Update to PF5 - part II - onChange event handler

Reference: #1098 For avoiding uncaught PF 4 -> PF 5 migration errors, this PR named and typed (i.e. (add type to function signature) all onChange callback appearances which use parameters. Signed-off-by: Sharon Gratch <[email protected]>
kubev2v · Jul 15, 2024 · 1d0c35d · 1d0c35d
1 parent d854c84
commit 1d0c35d
Show file tree

Hide file tree

Showing 44 changed files with 441 additions and 120 deletions.
diff --git a/packages/common/src/components/Filter/DateFilter.tsx b/packages/common/src/components/Filter/DateFilter.tsx
@@ -33,7 +33,10 @@ export const DateFilter = ({
     onFilterUpdate([...validFilters.filter((d) => d !== option)]);
   };
 
-  const onDateChange = (even: FormEvent<HTMLInputElement>, value: string) => {
+  const onDateChange: (event: FormEvent<HTMLInputElement>, value: string, date?: Date) => void = (
+    event,
+    value,
+  ) => {
     // require full format "YYYY-MM-DD" although partial date is also accepted
     // i.e. YYYY-MM gets parsed as YYYY-MM-01 and results in auto completing the date
     // unfortunately due to auto-complete user cannot delete the date char after char

diff --git a/packages/common/src/components/Filter/DateRangeFilter.tsx b/packages/common/src/components/Filter/DateRangeFilter.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent, useState } from 'react';
+import React, { useState } from 'react';
 import { DateTime } from 'luxon';
 
 import {
@@ -63,15 +63,23 @@ export const DateRangeFilter = ({
     onFilterUpdate([...validFilters.filter((range) => range !== target)]);
   };
 
-  const onFromDateChange = (even: FormEvent<HTMLInputElement>, value: string) => {
+  const onFromDateChange: (
+    event: React.FormEvent<HTMLInputElement>,
+    value: string,
+    date?: Date,
+  ) => void = (event, value) => {
     //see DateFilter onDateChange
     if (value?.length === 10 && isValidDate(value)) {
       setFrom(parseISOtoJSDate(value));
       setTo(undefined);
     }
   };
 
-  const onToDateChange = (even: FormEvent<HTMLInputElement>, value: string) => {
+  const onToDateChange: (
+    event: React.FormEvent<HTMLInputElement>,
+    value: string,
+    date?: Date,
+  ) => void = (event, value) => {
     //see DateFilter onDateChange
     if (value?.length === 10 && isValidDate(value)) {
       const newTo = parseISOtoJSDate(value);
@@ -82,6 +90,7 @@ export const DateRangeFilter = ({
       }
     }
   };
+
   return (
     <ToolbarFilter
       key={filterId}

diff --git a/packages/common/src/components/Filter/FreetextFilter.tsx b/packages/common/src/components/Filter/FreetextFilter.tsx
@@ -31,6 +31,14 @@ export const FreetextFilter = ({
     onFilterUpdate([...selectedFilters, inputValue]);
     setInputValue('');
   };
+
+  const onChange: (event: React.FormEvent<HTMLInputElement>, value: string) => void = (
+    event,
+    value,
+  ) => {
+    setInputValue(value);
+  };
+
   return (
     <ToolbarFilter
       key={filterId}
@@ -46,9 +54,7 @@ export const FreetextFilter = ({
         <SearchInput
           placeholder={placeholderLabel}
           value={inputValue}
-          onChange={(event, value) => {
-            setInputValue(value);
-          }}
+          onChange={onChange}
           onSearch={onTextInput}
           onClear={() => setInputValue('')}
         />

diff --git a/packages/common/src/components/Filter/SwitchFilter.tsx b/packages/common/src/components/Filter/SwitchFilter.tsx
@@ -20,12 +20,18 @@ export const SwitchFilter = ({
   onFilterUpdate,
   placeholderLabel,
 }: FilterTypeProps) => {
+  const onChange: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void = (
+    checked,
+  ) => {
+    onFilterUpdate(checked ? [Boolean(checked).toString()] : []);
+  };
+
   return (
     <ToolbarItem>
       <Switch
         label={placeholderLabel}
         isChecked={selectedFilters.length === 1 && selectedFilters[0] === 'true'}
-        onChange={(checked) => onFilterUpdate(checked ? [Boolean(checked).toString()] : [])}
+        onChange={onChange}
       />
     </ToolbarItem>
   );

diff --git a/packages/common/src/components/TableView/ManageColumnsModal.tsx b/packages/common/src/components/TableView/ManageColumnsModal.tsx
@@ -127,6 +127,12 @@ export const ManageColumnsModal = ({
     onClose();
   };
 
+  type onChangeFactoryType = (
+    id: string,
+  ) => (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+
+  const onChangeFactory: onChangeFactoryType = (id) => (checked) => onSelect(id, checked);
+
   return (
     <Modal
       title={title}
@@ -177,7 +183,7 @@ export const ManageColumnsModal = ({
                             : isVisible
                         }
                         isDisabled={isIdentity}
-                        onChange={(value) => onSelect(id, value)}
+                        onChange={onChangeFactory(id)}
                         otherControls
                       />
                     </DataListControl>

diff --git a/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx b/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx
@@ -143,7 +143,10 @@ export const FilterableSelect: React.FunctionComponent<FilterableSelectProps> =
    * @param {React.FormEvent<HTMLInputElement>} _event The input event.
    * @param {string} value The new input value.
    */
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+  const onTextInputChange: (_event: React.FormEvent<HTMLInputElement>, value: string) => void = (
+    _event,
+    value,
+  ) => {
     setInputValue(value);
     setFilterValue(value);
   };

diff --git a/packages/forklift-console-plugin/src/components/InputList/LazyTextInput.tsx b/packages/forklift-console-plugin/src/components/InputList/LazyTextInput.tsx
@@ -51,12 +51,18 @@ export const LazyTextInput: React.FunctionComponent<LazyTextInputProps> = ({
     }
   };
 
+  const onChangeText: (value: string, event: React.FormEvent<HTMLInputElement>) => void = (
+    value,
+  ) => {
+    setValue(value);
+  };
+
   return (
     <TextInput
       spellCheck="false"
       value={value}
       type={type}
-      onChange={(value) => setValue(value)}
+      onChange={onChangeText}
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
       aria-label={ariaLabel}

diff --git a/...ugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx b/...ugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx
@@ -86,7 +86,7 @@ export const MapsEdit: React.FC<MapsEditProps> = ({
 export type MapsEditProps = {
   providers: V1beta1Provider[];
   selectedProviderName: string;
-  onChange: (value: string) => void;
+  onChange: (value: string, event: React.FormEvent<HTMLSelectElement>) => void;
   label: string;
   placeHolderLabel: string;
   invalidLabel: string;

diff --git a/...in/src/modules/NetworkMaps/views/details/components/ProvidersSection/ProvidersSection.tsx b/...in/src/modules/NetworkMaps/views/details/components/ProvidersSection/ProvidersSection.tsx
@@ -53,6 +53,24 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
     dispatch({ type: 'INIT', payload: obj });
   };
 
+  const onChangeSource: (value: string, event: React.FormEvent<HTMLSelectElement>) => void = (
+    value,
+  ) => {
+    dispatch({
+      type: 'SET_SOURCE_PROVIDER',
+      payload: providers.find((p) => p?.metadata?.name === value),
+    });
+  };
+
+  const onChangeTarget: (value: string, event: React.FormEvent<HTMLSelectElement>) => void = (
+    value,
+  ) => {
+    dispatch({
+      type: 'SET_TARGET_PROVIDER',
+      payload: providers.find((p) => p?.metadata?.name === value),
+    });
+  };
+
   return (
     <Suspend obj={providers} loaded={providersLoaded} loadError={providersLoadError}>
       <Flex className="forklift-network-map__details-tab--update-button">
@@ -88,12 +106,7 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
           selectedProviderName={state.networkMap?.spec?.provider?.source?.name}
           label={t('Source provider')}
           placeHolderLabel={t('Select a provider')}
-          onChange={(value) =>
-            dispatch({
-              type: 'SET_SOURCE_PROVIDER',
-              payload: providers.find((p) => p?.metadata?.name === value),
-            })
-          }
+          onChange={onChangeSource}
           invalidLabel={t('The chosen provider is no longer available.')}
           mode={state.sourceProviderMode}
           helpContent="source provider"
@@ -105,12 +118,7 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
           selectedProviderName={state.networkMap?.spec?.provider?.destination?.name}
           label={t('Target provider')}
           placeHolderLabel={t('Select a provider')}
-          onChange={(value) =>
-            dispatch({
-              type: 'SET_TARGET_PROVIDER',
-              payload: providers.find((p) => p?.metadata?.name === value),
-            })
-          }
+          onChange={onChangeTarget}
           invalidLabel={t('The chosen provider is no longer available.')}
           mode={state.targetProviderMode}
           helpContent="Target provider"

diff --git a/...odules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/...odules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
@@ -85,7 +85,7 @@ const ProviderOption = (provider, index) => (
 export type ProvidersEditProps = {
   providers: V1beta1Provider[];
   selectedProviderName: string;
-  onChange: (value: string) => void;
+  onChange: (value: string, event: React.FormEvent<HTMLSelectElement>) => void;
   label: string;
   placeHolderLabel: string;
   invalidLabel: string;

diff --git a/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsNumberInput.tsx b/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsNumberInput.tsx
@@ -25,7 +25,7 @@ export const SettingsNumberInput: React.FC<SettingsSelectInputProps> = ({
     setNewValue(newValue);
   };
 
-  const onUserChange = (event: React.FormEvent<HTMLInputElement>) => {
+  const onUserChange: (event: React.FormEvent<HTMLInputElement>) => void = (event) => {
     const value = (event.target as HTMLInputElement).value;
     const newValue = value === '' ? value : +value;
     setNewValue(newValue || 0);

diff --git a/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx b/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx
@@ -96,9 +96,9 @@ export const DuplicateModal: React.FC<DuplicateModalProps> = ({ title, resource,
     setNewNameValidation('success');
   };
 
-  const onChange = (name: string) => {
-    validateName(name);
-    setNewName(name);
+  const onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void = (value) => {
+    validateName(value);
+    setNewName(value);
   };
 
   const onDuplicate = useCallback(async () => {

diff --git a/packages/forklift-console-plugin/src/modules/Plans/modals/PlanCutoverMigrationModal.tsx b/packages/forklift-console-plugin/src/modules/Plans/modals/PlanCutoverMigrationModal.tsx
@@ -59,10 +59,14 @@ export const PlanCutoverMigrationModal: React.FC<PlanCutoverMigrationModalProps>
     setCutoverDate(migrationCutoverDate);
   }, [lastMigration]);
 
-  const onDateChange = (inputDate, newDate: string) => {
+  const onDateChange: (
+    event: React.FormEvent<HTMLInputElement>,
+    value: string,
+    date?: Date,
+  ) => void = (event, value) => {
     const updatedFromDate = cutoverDate ? new Date(cutoverDate) : new Date();
 
-    const [year, month, day] = newDate.split('-').map((num: string) => parseInt(num, 10));
+    const [year, month, day] = value.split('-').map((num: string) => parseInt(num, 10));
 
     updatedFromDate.setFullYear(year);
     updatedFromDate.setMonth(month - 1);
@@ -71,7 +75,14 @@ export const PlanCutoverMigrationModal: React.FC<PlanCutoverMigrationModalProps>
     setCutoverDate(updatedFromDate.toISOString());
   };
 
-  const onTimeChange = (_event, _time, hour: number, minute: number) => {
+  const onTimeChange: (
+    event: React.FormEvent<HTMLInputElement>,
+    time: string,
+    hour?: number,
+    minute?: number,
+    seconds?: number,
+    isValid?: boolean,
+  ) => void = (event, time, hour, minute) => {
     const updatedFromDate = cutoverDate ? new Date(cutoverDate) : new Date();
 
     updatedFromDate.setHours(hour);

diff --git a/...forklift-console-plugin/src/modules/Plans/views/create/components/SearchInputProvider.tsx b/...forklift-console-plugin/src/modules/Plans/views/create/components/SearchInputProvider.tsx
@@ -23,12 +23,19 @@ export const SearchInputProvider: React.FunctionComponent<SearchInputProviderPro
     filterDispatch({ type: 'SET_NAME_FILTER', payload: value });
   };
 
+  const onChange: (event: React.FormEvent<HTMLInputElement>, value: string) => void = (
+    event,
+    value,
+  ) => {
+    updateNameFilter(value);
+  };
+
   return (
     <div className="forklift--create-plan--search-input-provider">
       <SearchInput
         placeholder={t('Filter provider')}
         value={filterState.nameFilter}
-        onChange={(_, value) => updateNameFilter(value)}
+        onChange={onChange}
         onClear={() => updateNameFilter('')}
       />
     </div>

diff --git a/.../src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/.../src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
@@ -85,7 +85,7 @@ const ProviderOption = (provider, index) => (
 export type ProvidersEditProps = {
   providers: V1beta1Provider[];
   selectedProviderName: string;
-  onChange: (value: string) => void;
+  onChange: (value: string, event: React.FormEvent<HTMLSelectElement>) => void;
   label: string;
   placeHolderLabel: string;
   invalidLabel: string;

diff --git a/...ettingsSection/modals/EditPlanPreserveClusterCpuModel/EditPlanPreserveClusterCpuModel.tsx b/...ettingsSection/modals/EditPlanPreserveClusterCpuModel/EditPlanPreserveClusterCpuModel.tsx
@@ -39,8 +39,10 @@ interface SwitchRendererProps {
 
 const PreserveClusterCpuModelInputFactory: () => ModalInputComponentType = () => {
   const SwitchRenderer: React.FC<SwitchRendererProps> = ({ value, onChange }) => {
-    const onChangeInternal = (v) => {
-      onChange(v ? 'true' : 'false');
+    const onChangeInternal: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void = (
+      checked,
+    ) => {
+      onChange(checked ? 'true' : 'false');
     };
 
     return (

diff --git a/...components/SettingsSection/modals/EditPlanPreserveStaticIPs/EditPlanPreserveStaticIPs.tsx b/...components/SettingsSection/modals/EditPlanPreserveStaticIPs/EditPlanPreserveStaticIPs.tsx
@@ -41,8 +41,10 @@ const PreserveStaticIPsInputFactory: () => ModalInputComponentType = () => {
   const { t } = useForkliftTranslation();
 
   const SwitchRenderer: React.FC<SwitchRendererProps> = ({ value, onChange }) => {
-    const onChangeInternal = (v) => {
-      onChange(v ? 'true' : 'false');
+    const onChangeInternal: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void = (
+      checked,
+    ) => {
+      onChange(checked ? 'true' : 'false');
     };
 
     return (

diff --git a/...dules/Plans/views/details/components/SettingsSection/modals/EditPlanWarm/EditPlanWarm.tsx b/...dules/Plans/views/details/components/SettingsSection/modals/EditPlanWarm/EditPlanWarm.tsx
@@ -39,8 +39,10 @@ interface SwitchRendererProps {
 
 const WarmInputFactory: () => ModalInputComponentType = () => {
   const SwitchRenderer: React.FC<SwitchRendererProps> = ({ value, onChange }) => {
-    const onChangeInternal = (v) => {
-      onChange(v ? 'true' : 'false');
+    const onChangeInternal: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void = (
+      checked,
+    ) => {
+      onChange(checked ? 'true' : 'false');
     };
 
     return (