Skip to content

Commit

Permalink
🐛 Use separate chip groups for tag categories (#1903)
Browse files Browse the repository at this point in the history
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

---------

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
  • Loading branch information
rszwajko committed May 23, 2024
1 parent a8f75fd commit 5900a46
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 223 deletions.
4 changes: 1 addition & 3 deletions client/src/app/components/FilterToolbar/FilterToolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@ export interface IMultiselectFilterCategory<
TFilterCategoryKey extends string,
> extends IBasicFilterCategory<TItem, TFilterCategoryKey> {
/** The full set of options to select from for this filter. */
selectOptions:
| FilterSelectOptionProps[]
| Record<string, FilterSelectOptionProps[]>;
selectOptions: FilterSelectOptionProps[];
/** Option search input field placeholder text. */
placeholderText?: string;
/** How to connect multiple selected options together. Defaults to "AND". */
Expand Down
Loading

0 comments on commit 5900a46

Please sign in to comment.