Remove shop links from plugin details modal

[mneudert]

Description:

Removes the CTA buttons leading to the webshop from the plugin detail modals.

The case fallback for {% if plugin.shop.variations|length %} was also removed for consistency with the CTA display behaviour. To my knowledge it should not happen that a premium plugin has no variations, and the links are still available in the description part of the modal.

Whitespace above the description has been adjusted to be a general "4 br height if not cta visible", though yet to be checked if it will be adjusted to a slightly lower amount.

Refs DEV-18004

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed

[michalkleiner]

The space above the metadata looks weird without the CTA, I've tried to mock a quick tweak that would make it look slightly better — add the below CSS to .metadata and remove the artificial line breaks creating the space.

div.metadata {
    border-left: 1px solid silver;
    padding-left: 10px;
    margin-left: 10px;
}

With the above CSS and with line breaks on the left, with a CTA that stays on the right — what do you think?

Without the CSS the alignment of the metadata column is just weird (even though it's what it was before horizontally).

[mneudert]

The margin/padding is more or less already taken care of in #22055 with the removal of .pluginDetails > .row > .col there. If we change that here it should be the same change to have it change only once.

The .row > .col removal somewhat messes up the alignment of everything else. Keeping your suggested .metadata change with the only modification of using 0.75rem to match the values removed by .row > .col. Should result in 12 instead of 10 pixels.

Displaying a silver border looks somewhat odd to me if it does not match the whole height, so i am inclined to skip that part 🤔

Pushed a matching change so we can see what it looks like after CI has generated the screenshot diffs: https://builds-artifacts.matomo.org/matomo-org/matomo/dev-18004/8813350044/

[michalkleiner]

We could put the border (silver or light gray) on the content, so it would be the whole height.
The generated UI screenshots seem to make the gap quite big, perhaps make it a bit smaller? Also we may need to add right padding as now the content is touching the border of the modal.

I'd say whichever way is the easiest as long as we keep the metadata at the top and it's somewhat visually separated from the content.

[mneudert]

I will add one or two changes so we (or probably you) can check with Javi on Monday which screenshot set we should keep.

To me that sounds like a reasonable way to invest the time, instead of doing everything without prior UI approval 🙈

[michalkleiner]

Good call 👍

[mneudert]

@michalkleiner created 4 sets of screenshots we could get checked:

• first commit: <br> tags
• second commit: removed <br> tags and added margin/padding
• third commit: added the silver border to the metadata block
• fourth commit: expanded silver border to full content height

The full height border will only be visible for actual modals, the UI tests don't have enough content for it to show. And it should only be checked with a plugin that displays images in the description, as those images may touch or even overlap the border.

Metadata content can currently overflow outside of the modal. If a link is displayed that contains no characters where a browser would break the line it will flow out of the metadata block. .Piwik_Popover already provides padding so the metadata content could be set to overflow: hidden to avoid that part.

[michalkleiner]

Spoke about this with the design team today and the preference is full height silver line, no space above the metadata (there's still an empty paragraph from somewhere) and if possible, a bit of padding so that the images don't touch the vertical line (which can be achieved by removing flex 1 and making them 48% wide).

[michalkleiner]

@mneudert pushed two commits based on the discussion with design, could you check it looks ok from your perspective and update the test screenshots, please? Then it's ok to merge if all is good.

[michalkleiner]

When I woke up today I had the same idea to remove the empty paragraph and add the margin-bottom to the action div after I saw the UI test screenshots, but I ran out of time on that, so well done you've done the same! :)