fix: Display all category badges for easy selection in the catalog

Fixes: KaotoIO#1041
igarashitm · Apr 30, 2024 · a74639c · a74639c
1 parent 4d6d944
commit a74639c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/packages/ui/src/components/Catalog/Catalog.tsx b/packages/ui/src/components/Catalog/Catalog.tsx
@@ -21,6 +21,22 @@ export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (prop
   const [searchTerm, setSearchTerm] = useDebounceValue('', 500, { trailing: true });
   const [filterTags, setFilterTags] = useState<string[]>([]);
 
+  /** All tags */
+  const tags = useMemo(() => {
+    return props.tiles
+      .reduce((acc, tile) => {
+        tile.tags.forEach((tag) => !acc.includes(tag) && acc.push(tag));
+        return acc;
+      }, [] as string[])
+      .sort((a, b) => {
+        const lowerA = a.toLowerCase();
+        const lowerB = b.toLowerCase();
+        if (lowerA < lowerB) return -1;
+        if (lowerA > lowerB) return 1;
+        return 0;
+      });
+  }, [props.tiles]);
+
   /** Filter by selected group */
   const filteredTilesByGroup = useMemo(() => {
     return filterTiles(props.tiles, { searchTerm, searchTags: filterTags });
@@ -61,6 +77,7 @@ export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (prop
         className="catalog__filter"
         searchTerm={searchTerm}
         groups={tilesGroups}
+        tags={tags}
         layouts={[CatalogLayout.Gallery, CatalogLayout.List]}
         activeGroup={activeGroup}
         activeLayout={activeLayout}

diff --git a/packages/ui/src/components/Catalog/CatalogFilter.tsx b/packages/ui/src/components/Catalog/CatalogFilter.tsx
@@ -14,11 +14,13 @@ import {
 import { FunctionComponent, useEffect, useRef } from 'react';
 import { CatalogLayout } from './Catalog.models';
 import { CatalogLayoutIcon } from './CatalogLayoutIcon';
+import { TimesCircleIcon } from '@patternfly/react-icons';
 
 interface CatalogFilterProps {
   className?: string;
   searchTerm: string;
   groups: { name: string; count: number }[];
+  tags: string[];
   layouts: CatalogLayout[];
   activeGroup: string;
   activeLayout: CatalogLayout;
@@ -36,8 +38,16 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
     inputRef.current?.focus();
   }, []);
 
-  const onClose = (tag: string) => {
-    props.setFilterTags(props.filterTags.filter((savedTag) => savedTag !== tag));
+  const onToggleTag = (tag: string) => {
+    const isToggled = props.filterTags.includes(tag);
+
+    props.setFilterTags(
+      isToggled ? props.filterTags.filter((savedTag) => savedTag !== tag) : props.filterTags.concat(tag),
+    );
+  };
+
+  const handleClearFilterTags = () => {
+    props.setFilterTags([]);
   };
 
   return (
@@ -99,10 +109,33 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
           </FormGroup>
         </GridItem>
       </Grid>
-      <LabelGroup categoryName="Filtered tags" numLabels={10}>
-        {props.filterTags.map((tag, index) => (
-          <Label key={tag + index} id={tag + index} color="blue" onClose={() => onClose(tag)} isCompact>
-            {tag}
+      <LabelGroup
+        categoryName={props.filterTags.length > 0 ? 'Filtered tags' : 'Click tags for filtering'}
+        numLabels={props.tags.length + 1}
+      >
+        {props.filterTags.length > 0 && (
+          <Label
+            key="clear"
+            id="clear"
+            color="grey"
+            variant="filled"
+            onClick={handleClearFilterTags}
+            icon={<TimesCircleIcon />}
+            isCompact
+          >
+            <b>Clear</b>
+          </Label>
+        )}
+        {props.tags.map((tag, index) => (
+          <Label
+            key={tag + index}
+            id={tag + index}
+            color={props.filterTags.includes(tag) ? 'blue' : 'grey'}
+            onClick={() => onToggleTag(tag)}
+            isCompact
+            variant={props.filterTags.includes(tag) ? 'filled' : 'outline'}
+          >
+            {props.filterTags.includes(tag) ? <b>{tag}</b> : <>{tag}</>}
           </Label>
         ))}
       </LabelGroup>