Implement new layout for no data screen

[sgiehl]

Description:

Implements the new layout for the no data screen.

I tried to refactor and optimize the code a bit more. The styling is unfortunately quite "local" as it's yet unknown if any of that stylings will be used globally at some point or not.

refs DEV-17149

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

[bx80]

Looking really good, much nicer than the old tab layout 👍

I'm seeing some ugly wrapping with the button text:

This is with FireFox 102.10.0.esr, in Chromium 112.0.5615.138 there is no wrapping and the buttons look the same as the UI test screenshot, I haven't tested other browsers so it might just be a FireFox thing.

[sgiehl]

@Javi-Ormaechea @Stan-vw That might be something you need to decide. How should we handle the case, that the text is too long for the box? This can e.g. also happen for translations, as they might be a bit longer in some cases. We could either try to automatically resize the font so it matches the length. Or truncate the text to a certain length adding some dots in the end and add a tool-tip to the boxes showing the full title.

[Stan-vw]

@sgiehl your suggestions sound reasonable to me. One more thing I notice is with the SPA block: the text should probably be vertically centered, instead of lots of margin at the top and no margin at the bottom

[sgiehl]

I've updated the styling a bit so the boxes align the title in the middle. This now looks better in case the name is too long. But that will only work with two lines. For longer text the height of the box would automatically increase and the layout would partially break. But guess two lines should be enough for any translation

[mneudert]

LGTM for the stuff in this PR, but the TagManager needs more work.

For example on my local empty page I created a container without a published version. The information box below the container selection however only brought me back to the nodata page instead of the tag manager as I would have expected. Also, if there is no published container the steps 1 and 6 for the SPA/PWA (and React) are displayed empty.

With the layout discussion in matomo-org/tag-manager#691 going on it could perhaps be fixed altogether.

[sgiehl]

@mneudert Regarding the TagManager issue. Did that work on the old new data page or is that a bug I've introduced here?

[mneudert]

It was broken before, but for the SPA guide slightly different. Previously it displayed the container selection and then an empty point at position 2, now it is an empty point at position 1 with the container selection missing. It is not worse than before (the tag manager info link was also already broken) but the SPA should still show the container selection I guess?

[sgiehl]

Both parts a rendered within the TagManager, so indeed nothing to fix here. I don't know what the expected behavior for those cases actually would be. So this might be something that we should discuss with @snake14 or @AltamashShaikh

As that was sort of broken before, I would already merge the changes here and in the plugins. We can apply further fixes in TagManager at a later step.