fix(catalog): Fix for Log component selection in catalog list view

KaotoIO · May 28, 2024 · b3f64e1 · b3f64e1
1 parent 7545ea0
commit b3f64e1
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/ui/src/components/Catalog/BaseCatalog.tsx b/packages/ui/src/components/Catalog/BaseCatalog.tsx
@@ -24,7 +24,7 @@ export const BaseCatalog: FunctionComponent<BaseCatalogProps> = (props) => {
 
   const onSelectDataListItem = useCallback(
     (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {
-      const tile = props.tiles.find((tile) => tile.name === id);
+      const tile = props.tiles.find((tile) => tile.name + '-' + tile.type === id);
       onTileClick(tile!);
     },
     [onTileClick, props.tiles],

diff --git a/packages/ui/src/components/Catalog/DataListItem.tsx b/packages/ui/src/components/Catalog/DataListItem.tsx
@@ -37,7 +37,7 @@ export const CatalogDataListItem: FunctionComponent<ICatalogDataListItemProps> =
     <DataListItem
       aria-labelledby={props.tile.name}
       key={props.tile.name}
-      id={props.tile.name}
+      id={props.tile.name + '-' + props.tile.type}
       className="catalog-data-list-item"
     >
       <DataListItemRow>

diff --git a/packages/ui/src/components/Catalog/__snapshots__/DataListItem.test.tsx.snap b/packages/ui/src/components/Catalog/__snapshots__/DataListItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`DataListItem renders correctly 1`] = `
 <li
   aria-labelledby="tile-name"
   class="pf-v5-c-data-list__item catalog-data-list-item"
-  id="tile-name"
+  id="tile-name-tile-type"
 >
   <div
     class="pf-v5-c-data-list__item-row"