Update to PF5 - part II - handle rest of 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) the following callbacks appearances which use parameters: onFilter onTextInput onClear onDrop onInputKeyDown onSetPage onPerPageSelect onUserMinus onUserPlus onDataChange onTextChange Signed-off-by: Sharon Gratch <[email protected]>
kubev2v · Jul 18, 2024 · 60691e8 · 60691e8
1 parent ae6d381
commit 60691e8
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 30 deletions.
diff --git a/packages/common/src/components/Filter/AutocompleteFilter.tsx b/packages/common/src/components/Filter/AutocompleteFilter.tsx
@@ -57,7 +57,10 @@ export const AutocompleteFilter = ({
 
   const options = validSupported.map(({ label }) => <SelectOption key={label} value={label} />);
 
-  const onFilter = (_, textInput) => {
+  const onFilter: (
+    event: React.ChangeEvent<HTMLInputElement> | null,
+    textInput: string,
+  ) => React.ReactElement[] | undefined = (_event, textInput) => {
     if (textInput === '') {
       return options;
     }

diff --git a/packages/common/src/components/Filter/FreetextFilter.tsx b/packages/common/src/components/Filter/FreetextFilter.tsx
@@ -24,7 +24,14 @@ export const FreetextFilter = ({
   placeholderLabel,
 }: FilterTypeProps) => {
   const [inputValue, setInputValue] = useState('');
-  const onTextInput = (): void => {
+
+  const onTextInput: (
+    event: React.SyntheticEvent<HTMLButtonElement>,
+    value: string,
+    attrValueMap: {
+      [key: string]: string;
+    },
+  ) => void = () => {
     if (!inputValue || selectedFilters.includes(inputValue)) {
       return;
     }
@@ -39,6 +46,10 @@ export const FreetextFilter = ({
     setInputValue(value);
   };
 
+  const onClear: (event: React.SyntheticEvent<HTMLButtonElement>) => void = () => {
+    setInputValue('');
+  };
+
   return (
     <ToolbarFilter
       key={filterId}
@@ -56,7 +67,7 @@ export const FreetextFilter = ({
           value={inputValue}
           onChange={onChange}
           onSearch={onTextInput}
-          onClear={() => setInputValue('')}
+          onClear={onClear}
         />
       </InputGroup>
     </ToolbarFilter>

diff --git a/packages/common/src/components/Filter/GroupedEnumFilter.tsx b/packages/common/src/components/Filter/GroupedEnumFilter.tsx
@@ -87,7 +87,10 @@ export const GroupedEnumFilter = ({
     </SelectGroup>
   ));
 
-  const onFilter = (_, textInput) => {
+  const onFilter: (
+    event: React.ChangeEvent<HTMLInputElement> | null,
+    textInput: string,
+  ) => React.ReactElement[] | undefined = (_event, textInput) => {
     if (textInput === '') {
       return options;
     }

diff --git a/packages/common/src/components/TableView/ManageColumnsModal.tsx b/packages/common/src/components/TableView/ManageColumnsModal.tsx
@@ -12,6 +12,7 @@ import {
   DataListItemRow,
   DragDrop,
   Draggable,
+  DraggableItemPosition,
   Droppable,
   Modal,
   Text,
@@ -96,7 +97,10 @@ export const ManageColumnsModal = ({
 }: ManagedColumnsProps) => {
   const [editedColumns, setEditedColumns] = useState(filterActionsAndHidden(resourceFields));
   const restoreDefaults = () => setEditedColumns([...filterActionsAndHidden(defaultColumns)]);
-  const onDrop = (source: { index: number }, dest: { index: number }) => {
+  const onDrop: (source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean = (
+    source: { index: number },
+    dest: { index: number },
+  ) => {
     const draggedItem = editedColumns[source?.index];
     const itemCurrentlyAtDestination = editedColumns[dest?.index];
     if (!draggedItem || !itemCurrentlyAtDestination) {

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,7 @@ 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) => void = (
+  const onTextInputChange: (event: React.FormEvent<HTMLInputElement>, value: string) => void = (
     _event,
     value,
   ) => {
@@ -187,7 +187,7 @@ export const FilterableSelect: React.FunctionComponent<FilterableSelectProps> =
    *
    * @param {React.KeyboardEvent<HTMLInputElement>} event The keyboard event.
    */
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const onInputKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
     const enabledMenuItems = selectOptions.filter((menuItem) => !menuItem.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;

diff --git a/packages/forklift-console-plugin/src/components/page/StandardPage.tsx b/packages/forklift-console-plugin/src/components/page/StandardPage.tsx
@@ -350,6 +350,27 @@ export function StandardPage<T>({
     .filter((field) => field.filter?.primary)
     .map(toFieldFilter(sortedData));
 
+  const onSetPage: (
+    event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    perPage?: number,
+    startIdx?: number,
+    endIdx?: number,
+  ) => void = (_event, newPage) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect: (
+    event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number,
+    startIdx?: number,
+    endIdx?: number,
+  ) => void = (_event, perPage, page) => {
+    setPerPage(perPage);
+    setPage(page);
+  };
+
   return (
     <span className={className}>
       {title && (
@@ -413,11 +434,8 @@ export function StandardPage<T>({
                   perPage={itemsPerPage}
                   page={currentPage}
                   itemCount={filteredData.length}
-                  onSetPage={(even, page) => setPage(page)}
-                  onPerPageSelect={(even, perPage, page) => {
-                    setPerPage(perPage);
-                    setPage(page);
-                  }}
+                  onSetPage={onSetPage}
+                  onPerPageSelect={onPerPageSelect}
                 />
               </ToolbarItem>
             )}
@@ -460,11 +478,8 @@ export function StandardPage<T>({
             perPage={itemsPerPage}
             page={currentPage}
             itemCount={filteredData.length}
-            onSetPage={(_event, page) => setPage(page)}
-            onPerPageSelect={(_event, perPage, page) => {
-              setPerPage(perPage);
-              setPage(page);
-            }}
+            onSetPage={onSetPage}
+            onPerPageSelect={onPerPageSelect}
           />
         )}
       </PageSection>

diff --git a/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsNumberInput.tsx b/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsNumberInput.tsx
@@ -15,12 +15,12 @@ export const SettingsNumberInput: React.FC<SettingsSelectInputProps> = ({
     onChange(newValue.toString());
   };
 
-  const onUserMinus = () => {
+  const onUserMinus: (event: React.MouseEvent, name?: string) => void = () => {
     const newValue = (value || 0) - 1;
     setNewValue(newValue);
   };
 
-  const onUserPlus = () => {
+  const onUserPlus: (event: React.MouseEvent, name?: string) => void = () => {
     const newValue = (value || 0) + 1;
     setNewValue(newValue);
   };

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
@@ -30,13 +30,17 @@ export const SearchInputProvider: React.FunctionComponent<SearchInputProviderPro
     updateNameFilter(value);
   };
 
+  const onClear: (event: React.SyntheticEvent<HTMLButtonElement>) => void = () => {
+    updateNameFilter('');
+  };
+
   return (
     <div className="forklift--create-plan--search-input-provider">
       <SearchInput
         placeholder={t('Filter provider')}
         value={filterState.nameFilter}
         onChange={onChange}
-        onClear={() => updateNameFilter('')}
+        onClear={onClear}
       />
     </div>
   );

diff --git a/...iders/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx b/...iders/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
@@ -121,6 +121,14 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
     handleChange('insecureSkipVerify', checked ? 'true' : 'false');
   };
 
+  const onDataChange: (data: string) => void = (data) => {
+    handleChange('cacert', data);
+  };
+
+  const onTextChange: (text: string) => void = (text) => {
+    handleChange('cacert', text);
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -230,8 +238,8 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
           url={url}
           value={cacert}
           validated={state.validation.cacert.type}
-          onDataChange={(value) => handleChange('cacert', value)}
-          onTextChange={(value) => handleChange('cacert', value)}
+          onDataChange={onDataChange}
+          onTextChange={onTextChange}
           onClearClick={() => handleChange('cacert', '')}
           isDisabled={insecureSkipVerify === 'true'}
         />

diff --git a/.../views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx b/.../views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
@@ -115,6 +115,14 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
     handleChange('insecureSkipVerify', checked ? 'true' : 'false');
   };
 
+  const onDataChange: (data: string) => void = (data) => {
+    handleChange('cacert', data);
+  };
+
+  const onTextChange: (text: string) => void = (text) => {
+    handleChange('cacert', text);
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -206,8 +214,8 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           filenamePlaceholder="Drag and drop a file or upload one"
           value={cacert}
           validated={state.validation.cacert.type}
-          onDataChange={(value) => handleChange('cacert', value)}
-          onTextChange={(value) => handleChange('cacert', value)}
+          onDataChange={onDataChange}
+          onTextChange={onTextChange}
           onClearClick={() => handleChange('cacert', '')}
           browseButtonText="Upload"
           url={url}

diff --git a/.../views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx b/.../views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx
@@ -170,6 +170,14 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
     handleChange('insecureSkipVerify', checked ? 'true' : 'false');
   };
 
+  const onDataChange: (data: string) => void = (data) => {
+    handleChange('cacert', data);
+  };
+
+  const onTextChange: (text: string) => void = (text) => {
+    handleChange('cacert', text);
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -283,8 +291,8 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           filenamePlaceholder="Drag and drop a file or upload one"
           value={cacert}
           validated={state.validation.cacert.type}
-          onDataChange={(value) => handleChange('cacert', value)}
-          onTextChange={(value) => handleChange('cacert', value)}
+          onDataChange={onDataChange}
+          onTextChange={onTextChange}
           onClearClick={() => handleChange('cacert', '')}
           browseButtonText="Upload"
           url={url}

diff --git a/...ders/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx b/...ders/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx
@@ -127,6 +127,14 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
     handleChange('insecureSkipVerify', checked ? 'true' : 'false');
   };
 
+  const onDataChange: (data: string) => void = (data) => {
+    handleChange('cacert', data);
+  };
+
+  const onTextChange: (text: string) => void = (text) => {
+    handleChange('cacert', text);
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -237,8 +245,8 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
           filenamePlaceholder="Drag and drop a file or upload one"
           value={cacert}
           validated={state.validation.cacert.type}
-          onDataChange={(value) => handleChange('cacert', value)}
-          onTextChange={(value) => handleChange('cacert', value)}
+          onDataChange={onDataChange}
+          onTextChange={onTextChange}
           onClearClick={() => handleChange('cacert', '')}
           browseButtonText="Upload"
           url={url}

diff --git a/...rs/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx b/...rs/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
@@ -115,6 +115,14 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
     handleChange('insecureSkipVerify', checked ? 'true' : 'false');
   };
 
+  const onDataChange: (data: string) => void = (data) => {
+    handleChange('cacert', data);
+  };
+
+  const onTextChange: (text: string) => void = (text) => {
+    handleChange('cacert', text);
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -216,8 +224,8 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
           url={url}
           value={cacert}
           validated={state.validation.cacert.type}
-          onDataChange={(value) => handleChange('cacert', value)}
-          onTextChange={(value) => handleChange('cacert', value)}
+          onDataChange={onDataChange}
+          onTextChange={onTextChange}
           onClearClick={() => handleChange('cacert', '')}
           isDisabled={insecureSkipVerify === 'true'}
         />