From 9e63834d21b2e5e44b1d71baf87afd1f1ca0bb94 Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Sat, 8 Jun 2024 16:58:38 +0200
Subject: [PATCH] Provide unique keys for components in
 MultiselectFilterControl

The component creates ToolbarFilter and ChipGroup components from
provided data which may be dynamic. It may happen that the created
components have the same keys as other filters created manually.

Provided unique keys are built by concatenating category title and
group name. The category title is known at compile time and is expected
to be unique. Group name is calculated from the provided data. Each
group results in new ToolbarFilter/ChipGroup

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
---
 .../FilterToolbar/MultiselectFilterControl.tsx        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
index cebddd971..2d7ec1795 100644
--- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -226,6 +226,9 @@ export const MultiselectFilterControl = <TItem,>({
     </MenuToggle>
   );
 
+  const withGroupPrefix = (group: string) =>
+    group === category.title ? group : `${category.title}/${group}`;
+
   return (
     <>
       {
@@ -234,8 +237,8 @@ export const MultiselectFilterControl = <TItem,>({
           chips={chipsFor(firstGroup)}
           deleteChip={(_, chip) => onFilterClear(chip)}
           deleteChipGroup={() => onFilterClearGroup(firstGroup)}
-          categoryName={firstGroup}
-          key={firstGroup}
+          categoryName={{ name: firstGroup, key: withGroupPrefix(firstGroup) }}
+          key={withGroupPrefix(firstGroup)}
           showToolbarItem={showToolbarItem}
         >
           <Select
@@ -285,8 +288,8 @@ export const MultiselectFilterControl = <TItem,>({
           chips={chipsFor(groupName)}
           deleteChip={(_, chip) => onFilterClear(chip)}
           deleteChipGroup={() => onFilterClearGroup(groupName)}
-          categoryName={groupName}
-          key={groupName}
+          categoryName={{ name: groupName, key: withGroupPrefix(groupName) }}
+          key={withGroupPrefix(groupName)}
           showToolbarItem={false}
         >
           {" "}