From 6fd778af531eab066e213e0440ceac3818ff7c6a Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Wed, 14 Feb 2024 14:56:44 -0500
Subject: [PATCH] - Address PR comment

- Cleanup the single select

- Disable if no selectable option

- Cleanup multiselect filter control

Signed-off-by: Ian Bolton <ibolton@redhat.com>
---
 .../MultiselectFilterControl.tsx              | 52 +++++++------------
 .../FilterToolbar/SelectFilterControl.tsx     | 42 ++-------------
 2 files changed, 23 insertions(+), 71 deletions(-)

diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
index 9e82e336a5..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);
 
@@ -154,10 +145,18 @@ export const MultiselectFilterControl = <TItem,>({
 
   const onSelect = (value: string | undefined) => {
     if (value && value !== "No results") {
-      const newFilterValue = filterValue ? [...filterValue, value] : [value];
+      let newFilterValue: string[];
+
+      if (filterValue && filterValue.includes(value)) {
+        newFilterValue = filterValue.filter((item) => item !== value);
+      } else {
+        newFilterValue = filterValue ? [...filterValue, value] : [value];
+      }
+
       setFilterValue(newFilterValue);
     }
 
+    // Ensure focus remains on the input field
     textInputRef.current?.focus();
   };
 
@@ -205,7 +204,7 @@ export const MultiselectFilterControl = <TItem,>({
         newSelectOptions = [
           {
             key: "no-results",
-            isDisabled: true,
+            isDisabled: false,
             children: `No results found for "${inputValue}"`,
             value: "No results",
           },
@@ -245,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":
@@ -295,6 +278,7 @@ export const MultiselectFilterControl = <TItem,>({
         setIsFilterDropdownOpen(!isFilterDropdownOpen);
       }}
       isExpanded={isFilterDropdownOpen}
+      isDisabled={isDisabled || !category.selectOptions.length}
       isFullWidth
     >
       <TextInputGroup isPlain>
diff --git a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
index e8b6479dda..4246d6eccb 100644
--- a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
@@ -34,46 +34,18 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
 >): JSX.Element | null => {
   const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false);
 
-  const getChipFromOptionValue = (
-    optionValue: SelectOptionProps | undefined
-  ) => {
-    return optionValue ? optionValue.value : "";
-  };
-
-  const getOptionKeyFromChip = (chip: string) =>
-    category.selectOptions.find(
-      (optionProps) => optionProps.value.toString() === chip
-    )?.key;
-
-  const getOptionValueFromOptionKey = (
-    optionKey: string
-  ): SelectOptionProps => {
-    return (
-      category.selectOptions.find((optionProps) => {
-        return optionProps.value === optionKey;
-      }) || { value: "", children: "", key: "" }
-    );
-  };
-
   const onFilterSelect = (value: string) => {
     setFilterValue(value ? [value] : null);
     setIsFilterDropdownOpen(false);
   };
 
+  const chips = filterValue ? filterValue : [];
+
   const onFilterClear = (chip: string) => {
-    const optionKey = getOptionKeyFromChip(chip);
-    const newValue = filterValue
-      ? filterValue.filter((val) => val !== optionKey)
-      : [];
-    setFilterValue(newValue.length > 0 ? newValue : null);
+    const newValue = filterValue?.filter((val) => val !== chip);
+    setFilterValue(newValue?.length ? newValue : null);
   };
 
-  const selections: SelectOptionProps[] = filterValue
-    ? filterValue.map(getOptionValueFromOptionKey)
-    : [];
-
-  const chips = selections ? selections.map(getChipFromOptionValue) : [];
-
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => {
     return (
       <MenuToggle
@@ -116,11 +88,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
         <SelectList>
           {category.selectOptions.map((o: SelectOptionProps, index) => {
             return (
-              <SelectOption
-                key={`${index}-${o.value}`}
-                isSelected={o.value == filterValue}
-                {...o}
-              >
+              <SelectOption {...o} key={`${index}-${o.value}`}>
                 {o.value}
               </SelectOption>
             );