From 60691e8c1053bc985fdc00d5ec24ee2fab4bde13 Mon Sep 17 00:00:00 2001 From: Sharon Gratch Date: Wed, 17 Jul 2024 17:29:08 +0300 Subject: [PATCH] Update to PF5 - part II - handle rest of 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) the following callbacks appearances which use parameters: onFilter onTextInput onClear onDrop onInputKeyDown onSetPage onPerPageSelect onUserMinus onUserPlus onDataChange onTextChange Signed-off-by: Sharon Gratch --- .../components/Filter/AutocompleteFilter.tsx | 5 ++- .../src/components/Filter/FreetextFilter.tsx | 15 ++++++-- .../components/Filter/GroupedEnumFilter.tsx | 5 ++- .../TableView/ManageColumnsModal.tsx | 6 +++- .../FilterableSelect/FilterableSelect.tsx | 4 +-- .../src/components/page/StandardPage.tsx | 35 +++++++++++++------ .../Overview/modal/SettingsNumberInput.tsx | 4 +-- .../create/components/SearchInputProvider.tsx | 6 +++- .../components/edit/EsxiCredentialsEdit.tsx | 12 +++++-- .../edit/OpenshiftCredentialsEdit.tsx | 12 +++++-- .../edit/OpenstackCredentialsEdit.tsx | 12 +++++-- .../components/edit/OvirtCredentialsEdit.tsx | 12 +++++-- .../edit/VCenterCredentialsEdit.tsx | 12 +++++-- 13 files changed, 110 insertions(+), 30 deletions(-) diff --git a/packages/common/src/components/Filter/AutocompleteFilter.tsx b/packages/common/src/components/Filter/AutocompleteFilter.tsx index b9606f7b7..ad9668d6a 100644 --- 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 }) => ); - const onFilter = (_, textInput) => { + const onFilter: ( + event: React.ChangeEvent | 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 index e5c97af8e..b8b9d466e 100644 --- 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, + 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) => void = () => { + setInputValue(''); + }; + return ( setInputValue('')} + onClear={onClear} /> diff --git a/packages/common/src/components/Filter/GroupedEnumFilter.tsx b/packages/common/src/components/Filter/GroupedEnumFilter.tsx index 543eddac8..e69f274a8 100644 --- a/packages/common/src/components/Filter/GroupedEnumFilter.tsx +++ b/packages/common/src/components/Filter/GroupedEnumFilter.tsx @@ -87,7 +87,10 @@ export const GroupedEnumFilter = ({ )); - const onFilter = (_, textInput) => { + const onFilter: ( + event: React.ChangeEvent | 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 index dcc7f359d..9e6fc0ec7 100644 --- 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 index 4292f4f16..3387714ca 100644 --- 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 = * @param {React.FormEvent} _event The input event. * @param {string} value The new input value. */ - const onTextInputChange: (_event: React.FormEvent, value: string) => void = ( + const onTextInputChange: (event: React.FormEvent, value: string) => void = ( _event, value, ) => { @@ -187,7 +187,7 @@ export const FilterableSelect: React.FunctionComponent = * * @param {React.KeyboardEvent} event The keyboard event. */ - const onInputKeyDown = (event: React.KeyboardEvent) => { + const onInputKeyDown: React.KeyboardEventHandler = (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 index baa056d9b..f34e740fb 100644 --- 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({ .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 ( {title && ( @@ -413,11 +434,8 @@ export function StandardPage({ perPage={itemsPerPage} page={currentPage} itemCount={filteredData.length} - onSetPage={(even, page) => setPage(page)} - onPerPageSelect={(even, perPage, page) => { - setPerPage(perPage); - setPage(page); - }} + onSetPage={onSetPage} + onPerPageSelect={onPerPageSelect} /> )} @@ -460,11 +478,8 @@ export function StandardPage({ perPage={itemsPerPage} page={currentPage} itemCount={filteredData.length} - onSetPage={(_event, page) => setPage(page)} - onPerPageSelect={(_event, perPage, page) => { - setPerPage(perPage); - setPage(page); - }} + onSetPage={onSetPage} + onPerPageSelect={onPerPageSelect} /> )} diff --git a/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsNumberInput.tsx b/packages/forklift-console-plugin/src/modules/Overview/modal/SettingsNumberInput.tsx index f889d75a4..42d4a53ce 100644 --- 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 = ({ 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/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SearchInputProvider.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SearchInputProvider.tsx index fc8f252ca..bc9d8fe24 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SearchInputProvider.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SearchInputProvider.tsx @@ -30,13 +30,17 @@ export const SearchInputProvider: React.FunctionComponent) => void = () => { + updateNameFilter(''); + }; + return (
updateNameFilter('')} + onClear={onClear} />
); diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx index 68d941020..5df3cac0f 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx @@ -121,6 +121,14 @@ export const EsxiCredentialsEdit: React.FC = ({ 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 (
= ({ 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/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx index e9a88cac3..61b922a8b 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx @@ -115,6 +115,14 @@ export const OpenshiftCredentialsEdit: React.FC = ({ 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 ( = ({ 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/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx index a5fa4530a..054192b28 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx @@ -170,6 +170,14 @@ export const OpenstackCredentialsEdit: React.FC = ({ 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 ( = ({ 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/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx index 40c308a04..1b36b851b 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx @@ -127,6 +127,14 @@ export const OvirtCredentialsEdit: React.FC = ({ 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 ( = ({ 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/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx index cd674b6a1..f22c0cd19 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx @@ -115,6 +115,14 @@ export const VCenterCredentialsEdit: React.FC = ({ 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 ( = ({ 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'} />