WIP convert multiselect filter to new select

client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx

@@ -1,19 +1,23 @@
 import * as React from "react";
-import { ToolbarChip, ToolbarFilter, Tooltip } from "@patternfly/react-core";
 import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
   Select,
-  SelectOption,
-  SelectOptionObject,
-  SelectVariant,
-  SelectProps,
   SelectGroup,
-} from "@patternfly/react-core/deprecated";
+  SelectOption,
+  SelectOptionProps,
+  ToolbarChip,
+  ToolbarFilter,
+  Tooltip,
+} from "@patternfly/react-core";
 import { IFilterControlProps } from "./FilterControl";
 import {
   IMultiselectFilterCategory,
   FilterSelectOptionProps,
 } from "./FilterToolbar";
 import { css } from "@patternfly/react-styles";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
 import "./select-overrides.css";
 
@@ -44,7 +48,7 @@ export const MultiselectFilterControl = <TItem,>({
     : Object.values(selectOptions).flatMap((i) => i);
 
   const getOptionKeyFromOptionValue = (
-    optionValue: string | SelectOptionObject
+    optionValue: string | SelectOptionProps
   ) => flatOptions.find(({ value }) => value === optionValue)?.key;
 
   const getOptionKeyFromChip = (chip: string) =>
@@ -53,7 +57,7 @@ export const MultiselectFilterControl = <TItem,>({
   const getOptionValueFromOptionKey = (optionKey: string) =>
     flatOptions.find(({ key }) => key === optionKey)?.value;
 
-  const onFilterSelect = (value: string | SelectOptionObject) => {
+  const onFilterSelect = (value: string | SelectOptionProps) => {
     const optionKey = getOptionKeyFromOptionValue(value);
     if (optionKey && filterValue?.includes(optionKey)) {
       const updatedValues = filterValue.filter(
@@ -126,25 +130,58 @@ export const MultiselectFilterControl = <TItem,>({
           .filter(Boolean)
       : flatOptions
           .filter((o) => filter(o))
-          .map((optionProps) => (
-            <SelectOption {...optionProps} key={optionProps.key} />
-          ));
+          .map((optionProps, index) => {
+            console.log("optionProps value", optionProps.value);
+            return (
+              <SelectOption
+                {...optionProps}
+                // key={optionProps.key}
+                key={`${index}-${optionProps.value}`}
+                // isSelected={optionProps.value === filterValue}
+              >
+                {optionProps.value}
+              </SelectOption>
+            );
+          });
 
   /**
    * Render options (with categories if available) where the option value OR key includes
    * the filterInput.
    */
-  const onOptionsFilter: SelectProps["onFilter"] = (_event, textInput) => {
-    const input = textInput?.toLowerCase();
-
-    return renderSelectOptions((optionProps, groupName) => {
-      // TODO: Checking for a filter match against the key or the value may not be desirable.
-      return (
-        groupName?.toLowerCase().includes(input) ||
-        optionProps?.key?.toLowerCase().includes(input) ||
-        optionProps?.value?.toString().toLowerCase().includes(input)
-      );
-    });
+  // const onOptionsFilter: SelectProps["onFilter"] = (_event, textInput) => {
+  //   const input = textInput?.toLowerCase();
+
+  //   return renderSelectOptions((optionProps, groupName) => {
+  //     // TODO: Checking for a filter match against the key or the value may not be desirable.
+  //     return (
+  //       groupName?.toLowerCase().includes(input) ||
+  //       optionProps?.key?.toLowerCase().includes(input) ||
+  //       optionProps?.value?.toString().toLowerCase().includes(input)
+  //     );
+  //   });
+  // };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => {
+    return (
+      <MenuToggle
+        aria-label={"Multiselect"}
+        id={`${category.key}-filter-value-select`}
+        isFullWidth
+        ref={toggleRef}
+        onClick={() => {
+          setIsFilterDropdownOpen(!isFilterDropdownOpen);
+        }}
+        isExpanded={isFilterDropdownOpen}
+        isDisabled={isDisabled || category.selectOptions.length === 0}
+      >
+        {category.placeholderText}
+        {filterValue?.length ? (
+          <Badge className={spacing.mlSm} isRead>
+            {filterValue?.length}
+          </Badge>
+        ) : null}
+      </MenuToggle>
+    );
   };
 
   return (
@@ -158,16 +195,11 @@ export const MultiselectFilterControl = <TItem,>({
       <Select
         className={css(isScrollable && "isScrollable")}
         aria-label={category.title}
-        toggleId={`${category.key}-filter-value-select`}
-        onToggle={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
-        selections={selections || []}
-        onSelect={(_, value) => onFilterSelect(value)}
+        toggle={toggle}
+        selected={filterValue}
+        onOpenChange={(isOpen) => setIsFilterDropdownOpen(isOpen)}
+        onSelect={(_, value) => onFilterSelect(value as string)}
         isOpen={isFilterDropdownOpen}
-        placeholderText={category.placeholderText}
-        isDisabled={isDisabled || category.selectOptions.length === 0}
-        variant={SelectVariant.checkbox}
-        hasInlineFilter
-        onFilter={onOptionsFilter}
       >
         {renderSelectOptions(() => true)}
       </Select>