From 318d64a488c81c52035fceb0839831b1dedefb95 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Thu, 15 Feb 2024 10:34:56 -0500
Subject: [PATCH] Cleanup multiselect filter control

---
 .../MultiselectFilterControl.tsx              | 43 ++++---------------
 1 file changed, 9 insertions(+), 34 deletions(-)

diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
index 0c7696b8fd..ffe90ab529 100644
--- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -8,7 +8,6 @@ import {
   SelectGroup,
   SelectList,
   SelectOption,
-  SelectOptionProps,
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
@@ -49,7 +48,9 @@ export const MultiselectFilterControl = <TItem,>({
   const [selectOptions, setSelectOptions] = React.useState<
     FilterSelectOptionProps[]
   >(Array.isArray(category.selectOptions) ? category.selectOptions : []);
+
   const hasGroupings = !Array.isArray(selectOptions);
+
   const flatOptions: FilterSelectOptionProps[] = !hasGroupings
     ? selectOptions
     : (Object.values(selectOptions).flatMap(
@@ -70,13 +71,6 @@ export const MultiselectFilterControl = <TItem,>({
   const textInputRef = React.useRef<HTMLInputElement>();
   const [inputValue, setInputValue] = React.useState<string>("");
 
-  const getOptionKeyFromOptionValue = (
-    optionValue: string | SelectOptionProps
-  ) => flatOptions.find((option) => option?.value === optionValue)?.key;
-
-  const getOptionValueFromOptionKey = (optionKey: string) =>
-    flatOptions.find(({ key }) => key === optionKey)?.value;
-
   const onFilterClear = (chip: string | ToolbarChip) => {
     const chipKey = typeof chip === "string" ? chip : chip.key;
     const newFilterValue = filterValue
@@ -86,15 +80,12 @@ export const MultiselectFilterControl = <TItem,>({
     setFilterValue(newFilterValue);
   };
 
-  // Select expects "selections" to be an array of the "value" props from the relevant optionProps
-  const selections = filterValue?.map(getOptionValueFromOptionKey) ?? [];
-
   /*
    * Note: Chips can be a `ToolbarChip` or a plain `string`.  Use a hack to split a
    *       selected option in 2 parts.  Assuming the option is in the format "Group / Item"
    *       break the text and show a chip with the Item and the Group as a tooltip.
    */
-  const chips = selections.map((s, index) => {
+  const chips = filterValue?.map((s, index) => {
     const chip: string = s?.toString() ?? "";
     const idx = chip.indexOf(CHIP_BREAK_DELINEATOR);
 
@@ -213,7 +204,7 @@ export const MultiselectFilterControl = <TItem,>({
         newSelectOptions = [
           {
             key: "no-results",
-            isDisabled: true,
+            isDisabled: false,
             children: `No results found for "${inputValue}"`,
             value: "No results",
           },
@@ -253,27 +244,11 @@ export const MultiselectFilterControl = <TItem,>({
         setSelectOptions(newSelectOptions);
         setIsFilterDropdownOpen(true);
 
-        if (
-          isFilterDropdownOpen &&
-          selectedItem &&
-          selectedItem.value !== "no results"
-        ) {
-          setInputValue("");
-
-          const newFilterValue = [...(filterValue || [])];
-          const optionValue = getOptionValueFromOptionKey(selectedItem.value);
-
-          if (newFilterValue.includes(optionValue)) {
-            const indexToRemove = newFilterValue.indexOf(optionValue);
-            newFilterValue.splice(indexToRemove, 1);
-          } else {
-            newFilterValue.push(optionValue);
-          }
-
-          setFilterValue(newFilterValue);
-          setIsFilterDropdownOpen(false);
+        if (!isFilterDropdownOpen) {
+          setIsFilterDropdownOpen((prev) => !prev);
+        } else if (selectedItem && selectedItem.value !== "No results") {
+          onSelect(selectedItem.value);
         }
-
         break;
       case "Tab":
       case "Escape":
@@ -303,7 +278,7 @@ export const MultiselectFilterControl = <TItem,>({
         setIsFilterDropdownOpen(!isFilterDropdownOpen);
       }}
       isExpanded={isFilterDropdownOpen}
-      isDisabled={isDisabled || !selectOptions.length}
+      isDisabled={isDisabled || !category.selectOptions.length}
       isFullWidth
     >
       <TextInputGroup isPlain>