Improve Required Namespace/Project Filtering Message

[richard-cox]

Message is shown when

• Required Namespace / Project filter is on
• user has an option which isn't a namespace, project or multiple thereof.

There's been a request to improve how this looks

[kwwii]

We should define this at a component level and change all similar instances

[edenhernandez-suse]

Here the Adobe Xd prototype with the first ideas for both themes.

This is a special kind of "Empty state" component. Since it is quite an edge case on an experimental feature, we can solve it ad hoc without all the work required to design and build a real, customizable Empty state component.

[edenhernandez-suse]

We are going with the third option of the initial proposal:

Xd Prototype

NOTE: Please change the text colour in the light theme to var(--darker)

The images have been exported as SVGs:

Ideally, the text blocks should be vertically centered, however, this can complicate things with the image on top. If it gets complicated, just center the entire thing (image plus text).

[richard-cox]

Sorry, just caught this.

The icons in the header may change given user permissions and the extensions the user installs. Is it ok to show an image that might not match that at the top?

If the text is in the svg it won't change language and be in-sync with the text in the header component

[edenhernandez-suse]

Didn't know about the icons, that's something to consider indeed. Thanks for the catch.

Regarding the text, do you mean the text block or the text inside the Namespace filter? The filter has to be in "All Namespaces" for this message to appear, so it would always be in sync; however, the exact words would change with the language.

Any suggestion? could we replicate the header content restricting any interaction? I imagine old-school CSS solutions that might not be acceptable...

[richard-cox]

I was wondering that. We have a 'disabled' state, though that might confuse the user into clicking in it anyway

[edenhernandez-suse]

I had a quick call with @scures and we agreed on trying to literally copy the header content, using pointer-event: none to prevent any interaction, and letting the arrow point to the dropdown.

The SVGs of the arrows are attached here:

I can provide the SVG code if necessary.