From c944633bf46568c315136f864bf9d98207d2e0a8 Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Tue, 18 Jun 2024 14:07:58 +0300
Subject: [PATCH] Update to PF5 - part II - onSelect, onToggle event handlers

Reference: https://github.com/kubev2v/forklift-console-plugin/issues/1098

For avoiding uncaught PF 4 -> PF 5 migration errors, this PR named and typed (i.e. (add type to function
signature) all onSelect, onToggle callbacks appearances which use parameters.

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
---
 .../ActionServiceDropdown.tsx                 | 15 ++++++-
 .../components/Filter/AutocompleteFilter.tsx  | 39 +++++++++++++-----
 .../src/components/Filter/EnumFilter.tsx      | 31 ++++++++++----
 .../components/Filter/GroupedEnumFilter.tsx   | 33 +++++++++++----
 .../FilterGroup/AttributeValueFilter.tsx      | 19 ++++++++-
 .../Overview/modal/SettingsSelectInput.tsx    | 12 ++++--
 .../create/components/SelectProvider.tsx      | 14 ++++---
 .../details/components/MappingListItem.tsx    | 39 ++++++++++++------
 .../tabs/Hosts/modals/VSphereNetworkModal.tsx |  9 ++++-
 .../migrate/components/MappingListItem.tsx    | 40 +++++++++++++------
 10 files changed, 184 insertions(+), 67 deletions(-)

diff --git a/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx b/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx
index 91222d3c1..4e279dcde 100644
--- a/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx
+++ b/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx
@@ -67,12 +67,23 @@ const ActionsAsDropdown = ({
   const history = useHistory();
   const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
   const isPlain = variant === 'kebab';
+  const onToggle: (
+    isExpanded: boolean,
+    event:
+      | Event
+      | React.KeyboardEvent<Element>
+      | React.MouseEvent<Element, MouseEvent>
+      | React.ChangeEvent<Element>,
+  ) => void = (isExpanded) => {
+    setIsActionMenuOpen(isExpanded);
+  };
   const toggle =
     variant === 'kebab' ? (
-      <KebabToggle onToggle={setIsActionMenuOpen} />
+      <KebabToggle onToggle={onToggle} />
     ) : (
-      <DropdownToggle onToggle={setIsActionMenuOpen}>{dropdownToggleText}</DropdownToggle>
+      <DropdownToggle onToggle={onToggle}>{dropdownToggleText}</DropdownToggle>
     );
+
   return (
     <Dropdown
       position="right"
diff --git a/packages/common/src/components/Filter/AutocompleteFilter.tsx b/packages/common/src/components/Filter/AutocompleteFilter.tsx
index 3c0d5f349..669f4f28d 100644
--- a/packages/common/src/components/Filter/AutocompleteFilter.tsx
+++ b/packages/common/src/components/Filter/AutocompleteFilter.tsx
@@ -65,6 +65,32 @@ export const AutocompleteFilter = ({
     );
   };
 
+  const onSelect: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (event, value, isPlaceholder) => {
+    if (isPlaceholder) {
+      return;
+    }
+    // behave as Console's AutocompleteInput used i.e. to filter pods by label
+    if (!hasFilter(value)) {
+      addFilter(value);
+    }
+    setExpanded(false);
+  };
+
+  const onToggle: (
+    isExpanded: boolean,
+    event:
+      | Event
+      | React.KeyboardEvent<Element>
+      | React.MouseEvent<Element, MouseEvent>
+      | React.ChangeEvent<Element>,
+  ) => void = (isExpanded) => {
+    setExpanded(isExpanded);
+  };
+
   return (
     <ToolbarFilter
       key={filterId}
@@ -77,23 +103,14 @@ export const AutocompleteFilter = ({
       <Select
         variant={SelectVariant.typeahead}
         aria-label={placeholderLabel}
-        onSelect={(event, option, isPlaceholder) => {
-          if (isPlaceholder) {
-            return;
-          }
-          // behave as Console's AutocompleteInput used i.e. to filter pods by label
-          if (!hasFilter(option)) {
-            addFilter(option);
-          }
-          setExpanded(false);
-        }}
+        onSelect={onSelect}
         // intentionally keep the selections list empty
         // the select should pretend to be stateless
         // the selection is stored outside in a new chip
         selections={[]}
         placeholderText={placeholderLabel}
         isOpen={isExpanded}
-        onToggle={setExpanded}
+        onToggle={onToggle}
         onFilter={onFilter}
         shouldResetOnSelect={true}
       >
diff --git a/packages/common/src/components/Filter/EnumFilter.tsx b/packages/common/src/components/Filter/EnumFilter.tsx
index 7e6ef6e6d..2443072e4 100644
--- a/packages/common/src/components/Filter/EnumFilter.tsx
+++ b/packages/common/src/components/Filter/EnumFilter.tsx
@@ -138,6 +138,28 @@ export const EnumFilter = ({
     }
   };
 
+  const onSelect: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (event, value, isPlaceholder) => {
+    if (isPlaceholder) {
+      return;
+    }
+    hasFilter(value) ? deleteFilter(value) : addFilter(value);
+  };
+
+  const onToggle: (
+    isExpanded: boolean,
+    event:
+      | Event
+      | React.KeyboardEvent<Element>
+      | React.MouseEvent<Element, MouseEvent>
+      | React.ChangeEvent<Element>,
+  ) => void = (isExpanded) => {
+    setExpanded(isExpanded);
+  };
+
   return (
     <ToolbarFilter
       key={filterId}
@@ -150,16 +172,11 @@ export const EnumFilter = ({
       <Select
         variant={SelectVariant.checkbox}
         aria-label={placeholderLabel}
-        onSelect={(event, option, isPlaceholder) => {
-          if (isPlaceholder) {
-            return;
-          }
-          hasFilter(option) ? deleteFilter(option) : addFilter(option);
-        }}
+        onSelect={onSelect}
         selections={selectedUniqueEnumLabels}
         placeholderText={placeholderLabel}
         isOpen={isExpanded}
-        onToggle={setExpanded}
+        onToggle={onToggle}
       >
         {uniqueEnumLabels.map((label) => (
           <SelectOption key={label} value={label} />
diff --git a/packages/common/src/components/Filter/GroupedEnumFilter.tsx b/packages/common/src/components/Filter/GroupedEnumFilter.tsx
index 2d546564e..bfed41721 100644
--- a/packages/common/src/components/Filter/GroupedEnumFilter.tsx
+++ b/packages/common/src/components/Filter/GroupedEnumFilter.tsx
@@ -107,6 +107,29 @@ export const GroupedEnumFilter = ({
     return filteredGroups;
   };
 
+  const onSelect: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (event, value, isPlaceholder) => {
+    if (isPlaceholder) {
+      return;
+    }
+    const id = typeof value === 'string' ? value : (value as EnumValue).id;
+    hasFilter(id) ? deleteFilter(id) : addFilter(id);
+  };
+
+  const onToggle: (
+    isExpanded: boolean,
+    event:
+      | Event
+      | React.KeyboardEvent<Element>
+      | React.MouseEvent<Element, MouseEvent>
+      | React.ChangeEvent<Element>,
+  ) => void = (isExpanded) => {
+    setExpanded(isExpanded);
+  };
+
   return (
     <>
       {/**
@@ -141,19 +164,13 @@ export const GroupedEnumFilter = ({
           variant={SelectVariant.checkbox}
           isGrouped
           aria-label={placeholderLabel}
-          onSelect={(event, option, isPlaceholder) => {
-            if (isPlaceholder) {
-              return;
-            }
-            const id = typeof option === 'string' ? option : (option as EnumValue).id;
-            hasFilter(id) ? deleteFilter(id) : addFilter(id);
-          }}
+          onSelect={onSelect}
           selections={supportedEnumValues
             .filter(({ id }) => selectedEnumIds.includes(id))
             .map(toSelectOption)}
           placeholderText={placeholderLabel}
           isOpen={isExpanded}
-          onToggle={setExpanded}
+          onToggle={onToggle}
           hasInlineFilter={hasInlineFilter}
           onFilter={onFilter}
         >
diff --git a/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx b/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx
index d8623b08d..a242f31e7 100644
--- a/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx
+++ b/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx
@@ -44,19 +44,34 @@ export const AttributeValueFilter = ({
   const selectOptionToFilter = (selectedId) =>
     fieldFilters.find(({ resourceFieldId }) => resourceFieldId === selectedId) ?? currentFilter;
 
-  const onFilterTypeSelect = (event, value, isPlaceholder) => {
+  const onFilterTypeSelect: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (_event, value: IdOption, isPlaceholder) => {
     if (!isPlaceholder) {
       setCurrentFilter(selectOptionToFilter(value?.id));
       setExpanded(!expanded);
     }
   };
 
+  const onToggle: (
+    isExpanded: boolean,
+    event:
+      | Event
+      | React.KeyboardEvent<Element>
+      | React.MouseEvent<Element, MouseEvent>
+      | React.ChangeEvent<Element>,
+  ) => void = (isExpanded) => {
+    setExpanded(isExpanded);
+  };
+
   return (
     <ToolbarGroup variant="filter-group">
       <ToolbarItem>
         <Select
           onSelect={onFilterTypeSelect}
-          onToggle={setExpanded}
+          onToggle={onToggle}
           isOpen={expanded}
           variant={SelectVariant.single}
           aria-label={'Select Filter'}
diff --git a/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsSelectInput.tsx b/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsSelectInput.tsx
index 78d7f3e1b..9ad80791a 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsSelectInput.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsSelectInput.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useToggle } from 'src/modules/Providers/hooks';
 
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core';
 
 /**
  * @typedef Option
@@ -60,10 +60,14 @@ export const SettingsSelectInput: React.FC<SettingsSelectInputProps> = ({
   const valueLabel = keyToName?.[value] || value;
 
   // Callback function to handle selection in the dropdown menu
-  const onSelect = useCallback(
-    (event, selection) => {
+  const onSelect: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = useCallback(
+    (_event, value: string | number) => {
       // Use the dictionary to find the key corresponding to the selected name
-      const key = nameToKey[selection] || selection;
+      const key = nameToKey[value] || value;
       onChange(key);
 
       // Toggle the dropdown menu open state
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx
index 0e7ff0487..ecfb67271 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 import providerTypes from '../constanats/providerTypes';
@@ -28,11 +28,15 @@ export const SelectProvider: React.FunctionComponent<SelectProviderProps> = ({
 
   const providerTypesArray = Object.keys(providerTypes);
 
-  const onSelect = (_, selection: string) => {
+  const onSelect: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (_, value: string) => {
     const prevTypeFilters = filterState.typeFilters;
-    const typeFilters = prevTypeFilters.includes(selection)
-      ? prevTypeFilters.filter((item: string) => item !== selection)
-      : [...prevTypeFilters, selection];
+    const typeFilters = prevTypeFilters.includes(value)
+      ? prevTypeFilters.filter((item: string) => item !== value)
+      : [...prevTypeFilters, value];
     filterDispatch({ type: 'UPDATE_TYPE_FILTERS', payload: typeFilters });
   };
 
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MappingListItem.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MappingListItem.tsx
index c7854a2ed..c0622166a 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MappingListItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MappingListItem.tsx
@@ -12,6 +12,7 @@ import {
   Select,
   SelectGroup,
   SelectOption,
+  SelectOptionObject,
   SelectVariant,
 } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons';
@@ -50,6 +51,29 @@ export const MappingListItem: FC<MappingListItemProps> = ({
   const [isSrcOpen, setToggleSrcOpen] = useToggle(false);
   const [isTrgOpen, setToggleTrgOpen] = useToggle(false);
 
+  const onSelectForSource: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (event, value: string, isPlaceholder) => {
+    !isPlaceholder &&
+      replaceMapping({
+        current: { source, destination },
+        next: { source: value, destination },
+      });
+  };
+
+  const onSelectForDestination: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (event, value: string) => {
+    replaceMapping({
+      current: { source, destination },
+      next: { source, destination: value },
+    });
+  };
+
   return (
     <DataListItem aria-labelledby="">
       <DataListItemRow>
@@ -60,13 +84,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
                 variant={SelectVariant.single}
                 aria-label=""
                 onToggle={setToggleSrcOpen}
-                onSelect={(event, value: string, isPlaceholder: boolean) =>
-                  !isPlaceholder &&
-                  replaceMapping({
-                    current: { source, destination },
-                    next: { source: value, destination },
-                  })
-                }
+                onSelect={onSelectForSource}
                 selections={source}
                 isOpen={isSrcOpen}
                 isDisabled={!isEditable}
@@ -85,12 +103,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
                 variant={SelectVariant.single}
                 aria-label=""
                 onToggle={setToggleTrgOpen}
-                onSelect={(event, value: string) =>
-                  replaceMapping({
-                    current: { source, destination },
-                    next: { source, destination: value },
-                  })
-                }
+                onSelect={onSelectForDestination}
                 selections={destination}
                 isOpen={isTrgOpen}
                 isDisabled={!isEditable}
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
index dc43b9d98..d0c99e4f1 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
@@ -12,6 +12,7 @@ import {
   ModalVariant,
   Select,
   SelectOption,
+  SelectOptionObject,
   SelectVariant,
   TextInput,
 } from '@patternfly/react-core';
@@ -110,10 +111,14 @@ export const VSphereNetworkModal: React.FC<VSphereNetworkModalProps> = ({
 
   const onSelectToggle = () => dispatch({ type: 'TOGGLE_OPEN' });
 
-  const onSelect = (_event, selection) => {
+  const onSelect: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (_event, value: string) => {
     const selectedAdapter = getNetworkAdapterByLabel(
       firstInventoryHostPair.inventory.networkAdapters,
-      selection,
+      value,
     );
 
     dispatch({ type: 'SET_NETWORK', payload: selectedAdapter });
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
index ccbe4c255..00a1c3e21 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
@@ -11,6 +11,7 @@ import {
   Select,
   SelectGroup,
   SelectOption,
+  SelectOptionObject,
   SelectVariant,
 } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons';
@@ -52,6 +53,30 @@ export const MappingListItem: FC<MappingListItemProps> = ({
   const { t } = useForkliftTranslation();
   const [isSrcOpen, setToggleSrcOpen] = useToggle(false);
   const [isTrgOpen, setToggleTrgOpen] = useToggle(false);
+
+  const onSelectForSource: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (event, value: string, isPlaceholder) => {
+    !isPlaceholder &&
+      replaceMapping({
+        current: { source, destination },
+        next: { source: value, destination },
+      });
+  };
+
+  const onSelectForDestination: (
+    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+    value: string | SelectOptionObject,
+    isPlaceholder?: boolean,
+  ) => void = (event, value: string) => {
+    replaceMapping({
+      current: { source, destination },
+      next: { source, destination: value },
+    });
+  };
+
   return (
     <DataListItem aria-labelledby="">
       <DataListItemRow>
@@ -62,13 +87,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
                 variant={SelectVariant.single}
                 aria-label=""
                 onToggle={setToggleSrcOpen}
-                onSelect={(event, value: string, isPlaceholder: boolean) =>
-                  !isPlaceholder &&
-                  replaceMapping({
-                    current: { source, destination },
-                    next: { source: value, destination },
-                  })
-                }
+                onSelect={onSelectForSource}
                 selections={source}
                 isOpen={isSrcOpen}
                 isDisabled={isDisabled}
@@ -89,12 +108,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
                 variant={SelectVariant.single}
                 aria-label=""
                 onToggle={setToggleTrgOpen}
-                onSelect={(event, value: string) =>
-                  replaceMapping({
-                    current: { source, destination },
-                    next: { source, destination: value },
-                  })
-                }
+                onSelect={onSelectForDestination}
                 selections={destination}
                 isOpen={isTrgOpen}
                 isDisabled={isDisabled}