Add label styling for tag group

Additional changes: fix problem with chip groups disappearing when other filter type was chosen. Signed-off-by: Radoslaw Szwajkowski <[email protected]>
konveyor · May 10, 2024 · 30ab140 · 30ab140
1 parent 0c5fa2d
commit 30ab140
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 48 deletions.
diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import {
   Badge,
   Button,
+  Label,
   MenuToggle,
   MenuToggleElement,
   Select,
@@ -54,7 +55,7 @@ export const MultiselectFilterControl = <TItem,>({
       .includes(inputValue?.trim().toLowerCase() ?? "")
   );
 
-  const groups = [
+  const [firstGroup, ...otherGroups] = [
     ...new Set([
       ...(category.selectOptions
         ?.map(({ groupLabel }) => groupLabel)
@@ -225,60 +226,72 @@ export const MultiselectFilterControl = <TItem,>({
 
   return (
     <>
-      {groups.reduce(
-        (acc, groupName) => (
+      {[
+        <ToolbarFilter
+          id={`${idPrefix}-${firstGroup}`}
+          chips={chipsFor(firstGroup)}
+          deleteChip={(_, chip) => onFilterClear(chip)}
+          deleteChipGroup={() => onFilterClearAll(firstGroup)}
+          categoryName={firstGroup}
+          key={firstGroup}
+          showToolbarItem={showToolbarItem}
+        >
+          <Select
+            isScrollable={isScrollable}
+            aria-label={category.title}
+            toggle={toggle}
+            selected={filterValue}
+            onOpenChange={(isOpen) => setIsFilterDropdownOpen(isOpen)}
+            onSelect={(_, selection) => onSelect(selection as string)}
+            isOpen={isFilterDropdownOpen}
+          >
+            <SelectList id={withPrefix("select-typeahead-listbox")}>
+              {[
+                ...filteredOptions.map(
+                  ({ groupLabel, label, value, optionProps = {} }, index) => (
+                    <SelectOption
+                      {...optionProps}
+                      {...(!optionProps.isDisabled && { hasCheckbox: true })}
+                      key={value}
+                      id={withPrefix(`option-${index}`)}
+                      value={value}
+                      isFocused={focusedItemIndex === index}
+                      isSelected={filterValue?.includes(value)}
+                    >
+                      {!!groupLabel && <Label>{groupLabel}</Label>}{" "}
+                      {label ?? value}
+                    </SelectOption>
+                  )
+                ),
+                !filteredOptions.length && (
+                  <SelectOption
+                    isDisabled
+                    hasCheckbox={false}
+                    key={NO_RESULTS}
+                    value={NO_RESULTS}
+                    isSelected={false}
+                  >
+                    {`No results found for "${inputValue}"`}
+                  </SelectOption>
+                ),
+              ].filter(Boolean)}
+            </SelectList>
+          </Select>
+        </ToolbarFilter>,
+        ...otherGroups.map((groupName) => (
           <ToolbarFilter
             id={`${idPrefix}-${groupName}`}
             chips={chipsFor(groupName)}
             deleteChip={(_, chip) => onFilterClear(chip)}
             deleteChipGroup={() => onFilterClearAll(groupName)}
             categoryName={groupName}
-            showToolbarItem={showToolbarItem}
+            key={groupName}
+            showToolbarItem={false}
           >
-            {acc}
+            {" "}
           </ToolbarFilter>
-        ),
-        <Select
-          isScrollable={isScrollable}
-          aria-label={category.title}
-          toggle={toggle}
-          selected={filterValue}
-          onOpenChange={(isOpen) => setIsFilterDropdownOpen(isOpen)}
-          onSelect={(_, selection) => onSelect(selection as string)}
-          isOpen={isFilterDropdownOpen}
-        >
-          <SelectList id={withPrefix("select-typeahead-listbox")}>
-            {[
-              ...filteredOptions.map(
-                ({ label, value, optionProps = {} }, index) => (
-                  <SelectOption
-                    {...optionProps}
-                    {...(!optionProps.isDisabled && { hasCheckbox: true })}
-                    key={value}
-                    id={withPrefix(`option-${index}`)}
-                    value={value}
-                    isFocused={focusedItemIndex === index}
-                    isSelected={filterValue?.includes(value)}
-                  >
-                    {label ?? value}
-                  </SelectOption>
-                )
-              ),
-              !filteredOptions.length && (
-                <SelectOption
-                  isDisabled
-                  hasCheckbox={false}
-                  key={NO_RESULTS}
-                  value={NO_RESULTS}
-                  isSelected={false}
-                >
-                  {`No results found for "${inputValue}"`}
-                </SelectOption>
-              ),
-            ].filter(Boolean)}
-          </SelectList>
-        </Select>
-      )}
+        )),
+      ]}
     </>
   );
 };

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -462,7 +462,7 @@ export const ApplicationsTable: React.FC = () => {
           }) + "...",
         selectOptions: tagItems.map(({ name, tagName, categoryName }) => ({
           value: name,
-          label: name,
+          label: tagName,
           chipLabel: tagName,
           groupLabel: categoryName,
         })),