🐛 Provide unique keys for components in MultiselectFilterControl (#1949)

Addresses issue #1944 introduced by #1903 (follow-up to #1946) The MultiselectFilterControl component discovers groups from provided data. Each group results in a new ToolbarFilter/ChipGroup pair. Before this fix, the keys were based only on group names. In case of Language filter it created a collision with Language group derived from Tags. After this fix, the keys are built by concatenating category title and group name. The category title is known at compile time and is expected to be unique among all filters on the screen. Reference-Url: #1944 Reference-Url: #1903 Reference-Url: #1946 Signed-off-by: Radoslaw Szwajkowski <[email protected]>
konveyor · Jun 10, 2024 · 799ee18 · 799ee18
1 parent a316de3
commit 799ee18
Showing 1 changed file with 7 additions and 4 deletions.
diff --git 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}
         >
           {" "}