Update to PF5 - part II - onSelect, onToggle event handlers

Reference: #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 <[email protected]>
kubev2v · Jul 3, 2024 · 9009859 · 9009859
1 parent a906ca8
commit 9009859
Show file tree

Hide file tree

Showing 10 changed files with 184 additions and 67 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx b/...ages/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/...es/forklift-console-plugin/src/modules/Plans/views/details/components/MappingListItem.tsx b/...es/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';
@@ -54,6 +55,29 @@ export const MappingListItem: FC<MappingListItemProps> = ({
     deleteMapping({ source, destination });
   };
 
+  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>
@@ -64,13 +88,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}
@@ -89,12 +107,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/...sole-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx b/...sole-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
@@ -13,6 +13,7 @@ import {
   HelperTextItem,
   Modal,
   ModalVariant,
+  SelectOptionObject,
   Text,
   TextInput,
 } from '@patternfly/react-core';
@@ -111,10 +112,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 });