- Address PR comment

- Cleanup the single select - Disable if no selectable option - Cleanup multiselect filter control Signed-off-by: Ian Bolton <[email protected]>
konveyor · Feb 15, 2024 · 6fd778a · 6fd778a
1 parent a17311d
commit 6fd778a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 71 deletions.
diff --git 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
@@ -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>
             );