🐛 Use separate chip groups for tag categories

[rszwajko]

Use one ToolbarFilter per options group. First filter provides
the option list. Remaining filters are hidden and used only for
side effects (separate chip groups). The approach follows
similar widgets used by Forklift plugin and OpenShift Console but
uses a flat list of toolbars (nesting trick requires the widget to be
visible all the time).

Related refactorings in MuliselectFilterControl:

1. drop unused feature - using dictionary type for selectedOptions
2. drop state that can be calculated:
   a) active item from focusedItemIndex
   b) selectedOptions from filters
3. centralize id calculations - use prefix based on category title
4. use label styling for tag category part of option

Resolves: #1774

Reference-Url: kubev2v/forklift-console-plugin#90
Reference-Url: https://github.com/openshift/console/blob/5ba18580676a25e4304df78253aad6a9832d4d56/frontend/public/components/filter-toolbar.tsx#L299

[codecov]

Codecov Report

Attention: Patch coverage is 2.27273% with 86 lines in your changes are missing coverage. Please review.

Project coverage is 41.96%. Comparing base (b654645) to head (f42287e).
Report is 142 commits behind head on main.

Files	Patch %	Lines
...ponents/FilterToolbar/MultiselectFilterControl.tsx	2.27%	82 Missing and 4 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1903      +/-   ##
==========================================
+ Coverage   39.20%   41.96%   +2.76%     
==========================================
  Files         146      163      +17     
  Lines        4857     5245     +388     
  Branches     1164     1336     +172     
==========================================
+ Hits         1904     2201     +297     
+ Misses       2939     2925      -14     
- Partials       14      119     +105     

Flag	Coverage Δ
client	41.96% <2.27%> (+2.76%)	⬆️
server	?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[rszwajko]

Separate chip groups for tag categories

Label styling for tag category part

[ibolton336]

@JustinXHale

[JustinXHale]

@ibolton336 @rszwajko this looks really good

[sjd78]

A few questions:

• Should the text filter apply to the tag category? What should be shown in the list if you type part of the category name "3rd"? (This kinda assumes the "3rd party" tag category is available on a fresh install)

• When navigating the drop down with keyboard input, should a page up/down bring checkbox focus with it the same way as up/down does? Right now if I hit page down, the checkbox focus does not follow and I need to use the arrow keys to scroll back to what I was looking at.

Visually looks great!

The chip groups look good and work great.

I'll take one more pass at the code later today.

[rszwajko]

@sjd78

Should the text filter apply to the tag category?

IMHO yes.

What should be shown in the list if you type part of the category name "3rd"?

All tags in that category. Note I haven't refactor the value format that is used internally for searching - it's still {category name}/{tag name}.

When navigating the drop down with keyboard input, should a page up/down bring checkbox focus with it the same way as up/down does?

There are 2 cases:

1. focus pinned to text input and focus-like styling moved with the keyboard - here we handle only up/down arrows but we could handle also page down/up (although page "size" is not well defined here)
2. focus actually moved from one checkbox to the other ( after opening from the keyboard via drop down toggle) - here the default rules apply: tabbing moves the focus and space toggles the selection

[sjd78]

A few style comments, but the main one is with the filteredOptions handling. That needs to be group aware so item filtering works as expected (i.e. filter is applied to both the tag category and tag name)

[sjd78]

Build of filteredOptions looks great!

LGTM