feat(KaotoIOgh-115): Tag filtering in catalog

* feat(KaotoIOgh-121) Wrap tags in tile component
mkralik3 · Sep 14, 2023 · 2847995 · 2847995
1 parent 2634f64
commit 2847995
Show file tree

Hide file tree

Showing 16 changed files with 384 additions and 186 deletions.
diff --git a/packages/ui/src/components/Catalog/BaseCatalog.tsx b/packages/ui/src/components/Catalog/BaseCatalog.tsx
@@ -9,6 +9,7 @@ interface BaseCatalogProps {
   tiles: ITile[];
   catalogLayout: CatalogLayout;
   onTileClick?: (tile: ITile) => void;
+  onTagClick: (_event: unknown, value: string) => void;
 }
 
 export const BaseCatalog: FunctionComponent<BaseCatalogProps> = (props) => {
@@ -34,12 +35,16 @@ export const BaseCatalog: FunctionComponent<BaseCatalogProps> = (props) => {
       </Title>
       {props.catalogLayout == CatalogLayout.List && (
         <DataList aria-label="Catalog list" onSelectDataListItem={onSelectDataListItem} isCompact>
-          {props.tiles?.map((tile) => <CatalogDataListItem key={tile.name} tile={tile} />)}
+          {props.tiles?.map((tile) => (
+            <CatalogDataListItem key={tile.name} tile={tile} onTagClick={props.onTagClick} />
+          ))}
         </DataList>
       )}
       {props.catalogLayout == CatalogLayout.Gallery && (
         <Gallery hasGutter>
-          {props.tiles?.map((tile) => <Tile key={tile.name} tile={tile} onClick={onTileClick} />)}
+          {props.tiles?.map((tile) => (
+            <Tile key={tile.name} tile={tile} onClick={onTileClick} onTagClick={props.onTagClick} />
+          ))}
         </Gallery>
       )}
     </div>

diff --git a/packages/ui/src/components/Catalog/Catalog.tsx b/packages/ui/src/components/Catalog/Catalog.tsx
@@ -9,30 +9,42 @@ interface CatalogProps {
   onTileClick?: (tile: ITile) => void;
 }
 
+const checkThatArrayContainsAllTags = (arr: string[], tags: string[]) => tags.every((v) => arr.includes(v));
+
 export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (props) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [groups, setGroups] = useState<string[]>([]);
   const [activeGroup, setActiveGroup] = useState<string>(getFirstActiveGroup(props.tiles));
   const [activeLayout, setActiveLayout] = useState(CatalogLayout.Gallery);
   const [filteredTiles, setFilteredTiles] = useState<ITile[]>([]);
+  const [filterTags, setFilterTags] = useState<string[]>([]);
 
   useEffect(() => {
     setGroups(Object.keys(props.tiles));
     setActiveGroup(getFirstActiveGroup(props.tiles));
   }, [props.tiles]);
 
   useEffect(() => {
-    setFilteredTiles(
-      props.tiles[activeGroup]?.filter((tile) => {
-        return (
-          tile.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          tile.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          tile.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          tile.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase()))
-        );
-      }),
-    );
-  }, [searchTerm, activeGroup, props.tiles]);
+    let toBeFiltered: ITile[] = [];
+    // filter by selected tags
+    toBeFiltered = filterTags
+      ? props.tiles[activeGroup]?.filter((tile) => {
+          return checkThatArrayContainsAllTags(tile.tags, filterTags);
+        })
+      : props.tiles[activeGroup];
+    // filter by search term ( name, description, tag )
+    toBeFiltered = searchTerm
+      ? toBeFiltered?.filter((tile) => {
+          return (
+            tile.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            tile.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            tile.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            tile.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+          );
+        })
+      : toBeFiltered;
+    setFilteredTiles(toBeFiltered);
+  }, [searchTerm, activeGroup, props.tiles, filterTags]);
 
   const onFilterChange = useCallback((_event: unknown, value = '') => {
     setSearchTerm(value);
@@ -45,6 +57,12 @@ export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (prop
     [props],
   );
 
+  const onTagClick = useCallback((_event: unknown, value = '') => {
+    setFilterTags((previousFilteredTags) => {
+      return previousFilteredTags.includes(value) ? previousFilteredTags : [...previousFilteredTags, value];
+    });
+  }, []);
+
   return (
     <>
       <CatalogFilter
@@ -54,15 +72,18 @@ export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (prop
         layouts={[CatalogLayout.Gallery, CatalogLayout.List]}
         activeGroup={activeGroup}
         activeLayout={activeLayout}
+        filterTags={filterTags}
         onChange={onFilterChange}
         setActiveGroup={setActiveGroup}
         setActiveLayout={setActiveLayout}
+        setFilterTags={setFilterTags}
       />
       <BaseCatalog
         className="catalog__base"
         tiles={filteredTiles}
         catalogLayout={activeLayout}
         onTileClick={onTileClick}
+        onTagClick={onTagClick}
       />
     </>
   );

diff --git a/packages/ui/src/components/Catalog/CatalogFilter.tsx b/packages/ui/src/components/Catalog/CatalogFilter.tsx
@@ -1,4 +1,14 @@
-import { Form, FormGroup, Grid, GridItem, SearchInput, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  Grid,
+  GridItem,
+  Label,
+  LabelGroup,
+  SearchInput,
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@patternfly/react-core';
 import { FunctionComponent, useEffect, useRef } from 'react';
 import { CatalogLayout } from './Catalog.models';
 import { CatalogLayoutIcon } from './CatalogLayoutIcon';
@@ -10,9 +20,11 @@ interface CatalogFilterProps {
   layouts: CatalogLayout[];
   activeGroup: string;
   activeLayout: CatalogLayout;
+  filterTags: string[];
   onChange: (event: unknown, value?: string) => void;
   setActiveGroup: (group: string) => void;
   setActiveLayout: (layout: CatalogLayout) => void;
+  setFilterTags: (tags: string[]) => void;
 }
 
 export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
@@ -22,6 +34,10 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
     inputRef.current?.focus();
   }, []);
 
+  const onClose = (tag: string) => {
+    props.setFilterTags(props.filterTags.filter((savedTag) => savedTag !== tag));
+  };
+
   return (
     <Form className={props.className}>
       <Grid hasGutter>
@@ -76,6 +92,13 @@ 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}
+          </Label>
+        ))}
+      </LabelGroup>
     </Form>
   );
 };
diff --git a/packages/ui/src/components/Catalog/DataListItem.scss b/packages/ui/src/components/Catalog/DataListItem.scss
@@ -21,10 +21,6 @@
         flex-flow: wrap;
     }
 
-    &__tags {
-        margin-right: 5px;
-    }
-
     @media (min-width: 768px) {
         &__title-div-right {
             justify-content: right;

diff --git a/packages/ui/src/components/Catalog/DataListItem.test.tsx b/packages/ui/src/components/Catalog/DataListItem.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { ITile } from './Catalog.models';
 import { CatalogDataListItem } from './DataListItem';
 
@@ -15,8 +15,18 @@ describe('DataListItem', () => {
   };
 
   it('renders correctly', () => {
-    const { container } = render(<CatalogDataListItem key={tile.name} tile={tile} />);
+    const { container } = render(<CatalogDataListItem key={tile.name} tile={tile} onTagClick={jest.fn()} />);
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('calls onTagClick prop when clicked', () => {
+    const onTagClick = jest.fn();
+
+    const { getByTestId } = render(<CatalogDataListItem key={tile.name} tile={tile} onTagClick={onTagClick} />);
+
+    fireEvent.click(getByTestId('tag-tag1'));
+
+    expect(onTagClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/ui/src/components/Catalog/DataListItem.tsx b/packages/ui/src/components/Catalog/DataListItem.tsx
@@ -5,16 +5,17 @@ import {
   DataListItemRow,
   Grid,
   GridItem,
-  Label,
+  LabelGroup,
 } from '@patternfly/react-core';
 import { FunctionComponent } from 'react';
 import { IconResolver } from '../IconResolver';
 import { ITile } from './Catalog.models';
 import './DataListItem.scss';
-import { getTagColor } from './tag-color-resolver';
+import { CatalogTag, CatalogTagsPanel } from './Tags';
 
 interface ICatalogDataListItemProps {
   tile: ITile;
+  onTagClick: (_event: unknown, value: string) => void;
 }
 
 const titleElementOrder = {
@@ -50,40 +51,28 @@ export const CatalogDataListItem: FunctionComponent<ICatalogDataListItemProps> =
                     <span id="clickable-action-item1" className="catalog-data-list-item__title-div-left__title">
                       {props.tile.title}
                     </span>
-                    {props.tile.headerTags?.map((tag, index) => (
-                      <Label
-                        key={`${props.tile.name}-${tag}-${index}`}
-                        className="catalog-data-list-item__tags"
-                        isCompact
-                        color={getTagColor(tag)}
-                      >
-                        {tag}
-                      </Label>
-                    ))}
-                    {props.tile.version && (
-                      <Label
-                        key={`${props.tile.version}`}
-                        isCompact
-                        className={'catalog-data-list-item__tags'}
-                        variant="outline"
-                      >
-                        {props.tile.version}
-                      </Label>
-                    )}
+                    <LabelGroup isCompact aria-label="data-list-item-headers-tags">
+                      {props.tile.headerTags?.map((tag, index) => (
+                        <CatalogTag
+                          key={`${props.tile.name}-${tag}-${index}`}
+                          tag={tag}
+                          className="catalog-data-list-item__tags"
+                        />
+                      ))}
+                      {props.tile.version && (
+                        <CatalogTag
+                          key={`${props.tile.version}`}
+                          tag={props.tile.version}
+                          className="catalog-data-list-item__tags"
+                          variant="outline"
+                        />
+                      )}
+                    </LabelGroup>
                   </div>
                 </GridItem>
                 <GridItem sm={12} md={6} order={tagsElementOrder}>
                   <div className="catalog-data-list-item__title-div-right">
-                    {props.tile.tags?.map((tag, index) => (
-                      <Label
-                        key={`${props.tile.name}-${tag}-${index}`}
-                        isCompact
-                        className={'catalog-data-list-item__tags'}
-                        color={getTagColor(tag)}
-                      >
-                        {tag}
-                      </Label>
-                    ))}
+                    <CatalogTagsPanel tags={props.tile.tags} onTagClick={props.onTagClick} />
                   </div>
                 </GridItem>
                 <GridItem span={12} order={descriptionElementOrder}>

diff --git a/packages/ui/src/components/Catalog/Tags/CatalogTag.tsx b/packages/ui/src/components/Catalog/Tags/CatalogTag.tsx
@@ -0,0 +1,24 @@
+import { Label } from '@patternfly/react-core';
+import { FunctionComponent } from 'react';
+import { getTagColor } from './tag-color-resolver';
+
+interface ICatalogTagProps {
+  tag: string;
+  className?: string;
+  variant?: 'outline' | 'filled';
+  textMaxWidth?: string;
+}
+
+export const CatalogTag: FunctionComponent<ICatalogTagProps> = (props) => {
+  return (
+    <Label
+      textMaxWidth={props.textMaxWidth ?? undefined}
+      isCompact
+      className={props.className ?? ''}
+      variant={props.variant ?? 'filled'}
+      color={getTagColor(props.tag)}
+    >
+      {props.tag}
+    </Label>
+  );
+};
diff --git a/packages/ui/src/components/Catalog/Tags/CatalogTagsPanel.tsx b/packages/ui/src/components/Catalog/Tags/CatalogTagsPanel.tsx
@@ -0,0 +1,33 @@
+import { Label, LabelGroup } from '@patternfly/react-core';
+import { FunctionComponent } from 'react';
+import { getTagColor } from './tag-color-resolver';
+
+interface ICatalogTagsPanelProps {
+  tags: string[];
+  onTagClick: (_event: unknown, value: string) => void;
+}
+
+export const CatalogTagsPanel: FunctionComponent<ICatalogTagsPanelProps> = (props) => {
+  return (
+    <LabelGroup isCompact aria-label="data-list-item-tags">
+      {props.tags.map((tag) => (
+        <Label
+          isCompact
+          key={tag}
+          data-testid={'tag-' + tag}
+          color={getTagColor(tag)}
+          onClick={(ev) => {
+            ev.stopPropagation(); // ignore root click, e.g. click on tile
+            props.onTagClick(ev, tag);
+          }}
+          render={({ className, content }) => (
+            // to force PF to render label as button with animation
+            <a className={className}>{content}</a>
+          )}
+        >
+          {tag}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};
diff --git a/packages/ui/src/components/Catalog/Tags/index.ts b/packages/ui/src/components/Catalog/Tags/index.ts
@@ -0,0 +1,3 @@
+export * from './tag-color-resolver';
+export * from './CatalogTag';
+export * from './CatalogTagsPanel';
diff --git a/.../components/Catalog/tag-color-resolver.ts → ...onents/Catalog/Tags/tag-color-resolver.ts b/.../components/Catalog/tag-color-resolver.ts → ...onents/Catalog/Tags/tag-color-resolver.ts
diff --git a/packages/ui/src/components/Catalog/Tile.scss b/packages/ui/src/components/Catalog/Tile.scss
@@ -18,16 +18,14 @@
 
   &__title {
     text-align: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
   }
 
   &__body {
     max-height: 150px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  &__tags {
-    margin-right: 1px;
-    margin-left: 1px;
-  }
 }
diff --git a/packages/ui/src/components/Catalog/Tile.test.tsx b/packages/ui/src/components/Catalog/Tile.test.tsx
@@ -14,17 +14,21 @@ describe('Tile', () => {
   };
 
   it('renders correctly', () => {
-    const { container } = render(<Tile tile={tile} onClick={jest.fn()} />);
+    const { container } = render(<Tile tile={tile} onClick={jest.fn()} onTagClick={jest.fn()} />);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('calls onClick prop when clicked', () => {
+  it('calls onClick and onTagClick prop when clicked', () => {
     const onClick = jest.fn();
-    const { getByRole } = render(<Tile tile={tile} onClick={onClick} />);
+    const onTagClick = jest.fn();
 
-    fireEvent.click(getByRole('button'));
+    const { getByTestId } = render(<Tile tile={tile} onClick={onClick} onTagClick={onTagClick} />);
+
+    fireEvent.click(getByTestId('tile-tile-name'));
+    fireEvent.click(getByTestId('tag-tag1'));
 
     expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onTagClick).toHaveBeenCalledTimes(1);
   });
 });