feat: Improve UX of namespace select filter

[Nokel81]

closes #7590

NOTE:

This PR also includes performance improvements to the NamespaceSelectFilter in the form of using VirtualList as part of the new implementation.

Screen.Recording.2023-05-25.at.3.31.55.PM.mov

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[aleksfront]

First, this is a great improvement to the namespace selector! However, there are a few issues that I would like to address and suggest changes for, either immediately or in different pull requests.

To ensure intuitive understanding and ease of use, I propose the following improvements:

• Remove the "namespace" icon as it doesn't serve a clear purpose before being clicked. It should be immediately apparent without any confusion.
• Eliminate the need for advising tooltips. Depending on hints suggests a subpar user experience.
• Replace the icons with more familiar checkboxes.
• When clicking on a namespace name, only that particular namespace should be selected while others are deselected.
• Clicking on the checkbox should add the corresponding namespace to the list.
• Incorporate accessibility features that are currently missing.
• The overall styling requires attention, including fine-tuning the colors for the light theme.

Please refer to the following images:

Elements to be removed:

Replace icons with checkboxes:

I recommend splitting these changes into multiple pull requests, with a special emphasis on highlighting the performance improvement aspect, which is currently of utmost importance.

[Nokel81]

When clicking on a namespace name, only that particular namespace should be selected while others are deselected.

Clicking on the checkbox should add the corresponding namespace to the list.

Both of these are already implemented...

Eliminate the need for advising tooltips. Depending on hints suggests a subpar user experience.

I don't think we have a need for them, but I don't see how having hints are bad.

Remove the "namespace" icon as it doesn't serve a clear purpose before being clicked. It should be immediately apparent without any confusion.

I think if I instead make the icon non-focusable (and instead the text focuses) I think it should be fine to keep them. I think it adds a nice contrast between each individual namespace and the "All Namespaces" option.

Incorporate accessibility features that are currently missing.

This is rather vague, which ones do you mean exactly?

The overall styling requires attention, including fine-tuning the colors for the light theme.

Examples? I am already using the colour CSS variables from our themes.

Replace the icons with more familiar checkboxes.

I would like to get some more insight as to why this is better. Sure a checkbox by itself implies multiselection, but I think that there are other ways of implying multiselection, especially one that is "confirmed" immediately. Would having the + buttons only appear when hovering improve the UX you think?