From 29cb8ae2d40132ef1da2d95451a3742311a81058 Mon Sep 17 00:00:00 2001 From: Sharon Gratch Date: Mon, 15 Jul 2024 14:49:22 +0300 Subject: [PATCH] Update to PF5 - part II - onChange event handler 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 onChange callback appearances which use parameters. Signed-off-by: Sharon Gratch --- .../components/Filter/AutocompleteFilter.tsx | 2 +- .../src/components/Filter/DateFilter.tsx | 5 +- .../src/components/Filter/DateRangeFilter.tsx | 15 ++++-- .../src/components/Filter/EnumFilter.tsx | 2 +- .../src/components/Filter/FreetextFilter.tsx | 12 +++-- .../components/Filter/GroupedEnumFilter.tsx | 2 +- .../src/components/Filter/SwitchFilter.tsx | 8 ++- .../TableView/ManageColumnsModal.tsx | 8 ++- .../FilterableSelect/FilterableSelect.tsx | 5 +- .../components/InputList/LazyTextInput.tsx | 8 ++- .../src/components/page/StandardPage.tsx | 4 +- .../MapsSection/components/MapsEdit.tsx | 2 +- .../ProvidersSection/ProvidersSection.tsx | 32 +++++++----- .../components/ProvidersEdit.tsx | 2 +- .../Overview/modal/SettingsNumberInput.tsx | 2 +- .../modules/Plans/modals/DuplicateModal.tsx | 6 +-- .../modals/PlanCutoverMigrationModal.tsx | 17 +++++-- .../create/components/SearchInputProvider.tsx | 9 +++- .../details/components/MappingListItem.tsx | 4 +- .../components/ProvidersEdit.tsx | 2 +- .../EditPlanPreserveClusterCpuModel.tsx | 6 ++- .../EditPlanPreserveStaticIPs.tsx | 6 ++- .../modals/EditPlanWarm/EditPlanWarm.tsx | 6 ++- .../views/details/tabs/Hooks/PlanHooks.tsx | 51 ++++++++++++++++--- .../Providers/modals/EditModal/EditModal.tsx | 6 ++- .../EditProviderVDDKImage.tsx | 18 ++++--- .../CertificateUpload/VerifyCertificate.tsx | 8 ++- .../components/EsxiProviderCreateForm.tsx | 24 +++++++-- .../components/OVAProviderCreateForm.tsx | 8 ++- .../OpenshiftProviderCreateForm.tsx | 8 ++- .../OpenstackProviderCreateForm.tsx | 8 ++- .../components/OvirtProviderCreateForm.tsx | 8 ++- .../create/components/ProviderCreateForm.tsx | 6 ++- .../components/VCenterProviderCreateForm.tsx | 24 +++++++-- .../components/edit/EsxiCredentialsEdit.tsx | 24 +++++++-- .../edit/OpenshiftCredentialsEdit.tsx | 16 +++++- .../edit/OpenstackCredentialsEdit.tsx | 8 ++- ...ionCredentialNameSecretFieldsFormGroup.tsx | 19 ++++--- .../ApplicationWithCredentialsIDFormGroup.tsx | 15 ++++-- .../PasswordSecretFieldsFormGroup.tsx | 17 +++++-- .../TokenWithUserIDSecretFieldsFormGroup.tsx | 15 ++++-- ...TokenWithUsernameSecretFieldsFormGroup.tsx | 17 +++++-- .../components/edit/OvirtCredentialsEdit.tsx | 24 +++++++-- .../edit/VCenterCredentialsEdit.tsx | 24 +++++++-- .../tabs/Hosts/modals/VSphereNetworkModal.tsx | 16 +++++- .../migrate/components/MappingListItem.tsx | 4 +- .../migrate/components/PlansCreateForm.tsx | 17 ++++++- .../MapsSection/components/MapsEdit.tsx | 2 +- .../ProvidersSection/ProvidersSection.tsx | 28 +++++----- .../components/ProvidersEdit.tsx | 2 +- 50 files changed, 453 insertions(+), 129 deletions(-) diff --git a/packages/common/src/components/Filter/AutocompleteFilter.tsx b/packages/common/src/components/Filter/AutocompleteFilter.tsx index e589ef545..b9606f7b7 100644 --- a/packages/common/src/components/Filter/AutocompleteFilter.tsx +++ b/packages/common/src/components/Filter/AutocompleteFilter.tsx @@ -71,7 +71,7 @@ export const AutocompleteFilter = ({ event: SelectEventType, value: SelectValueType, isPlaceholder?: boolean, - ) => void = (event, value, isPlaceholder) => { + ) => void = (_event, value, isPlaceholder) => { if (isPlaceholder) { return; } diff --git a/packages/common/src/components/Filter/DateFilter.tsx b/packages/common/src/components/Filter/DateFilter.tsx index aaf7822fd..0b17873fc 100644 --- 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, value: string) => { + const onDateChange: (event: FormEvent, 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 index 873a36e90..ed840bc53 100644 --- 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,7 +63,11 @@ export const DateRangeFilter = ({ onFilterUpdate([...validFilters.filter((range) => range !== target)]); }; - const onFromDateChange = (even: FormEvent, value: string) => { + const onFromDateChange: ( + event: React.FormEvent, + value: string, + date?: Date, + ) => void = (_event, value) => { //see DateFilter onDateChange if (value?.length === 10 && isValidDate(value)) { setFrom(parseISOtoJSDate(value)); @@ -71,7 +75,11 @@ export const DateRangeFilter = ({ } }; - const onToDateChange = (even: FormEvent, value: string) => { + const onToDateChange: ( + event: React.FormEvent, + 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 ( void = (event, value, isPlaceholder) => { + ) => void = (_event, value, isPlaceholder) => { if (isPlaceholder) { return; } diff --git a/packages/common/src/components/Filter/FreetextFilter.tsx b/packages/common/src/components/Filter/FreetextFilter.tsx index add16fdab..e5c97af8e 100644 --- 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, value: string) => void = ( + _event, + value, + ) => { + setInputValue(value); + }; + return ( { - setInputValue(value); - }} + onChange={onChange} onSearch={onTextInput} onClear={() => setInputValue('')} /> diff --git a/packages/common/src/components/Filter/GroupedEnumFilter.tsx b/packages/common/src/components/Filter/GroupedEnumFilter.tsx index 616ad142d..543eddac8 100644 --- a/packages/common/src/components/Filter/GroupedEnumFilter.tsx +++ b/packages/common/src/components/Filter/GroupedEnumFilter.tsx @@ -111,7 +111,7 @@ export const GroupedEnumFilter = ({ event: SelectEventType, value: SelectValueType, isPlaceholder?: boolean, - ) => void = (event, value, isPlaceholder) => { + ) => void = (_event, value, isPlaceholder) => { if (isPlaceholder) { return; } diff --git a/packages/common/src/components/Filter/SwitchFilter.tsx b/packages/common/src/components/Filter/SwitchFilter.tsx index 6bf787d3a..feb5f944f 100644 --- 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) => void = ( + checked, + ) => { + onFilterUpdate(checked ? [Boolean(checked).toString()] : []); + }; + return ( onFilterUpdate(checked ? [Boolean(checked).toString()] : [])} + onChange={onChange} /> ); diff --git a/packages/common/src/components/TableView/ManageColumnsModal.tsx b/packages/common/src/components/TableView/ManageColumnsModal.tsx index adcf55b7c..dcc7f359d 100644 --- 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) => void; + + const onChangeFactory: onChangeFactoryType = (id) => (checked) => onSelect(id, checked); + return ( onSelect(id, value)} + onChange={onChangeFactory(id)} otherControls /> diff --git a/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx b/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx index e493e7124..4292f4f16 100644 --- 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 = * @param {React.FormEvent} _event The input event. * @param {string} value The new input value. */ - const onTextInputChange = (_event: React.FormEvent, value: string) => { + const onTextInputChange: (_event: React.FormEvent, 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 index c958cf925..65223d536 100644 --- 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 = ({ } }; + const onChangeText: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + setValue(value); + }; + return ( setValue(value)} + onChange={onChangeText} onBlur={handleBlur} onKeyDown={handleKeyDown} aria-label={ariaLabel} diff --git a/packages/forklift-console-plugin/src/components/page/StandardPage.tsx b/packages/forklift-console-plugin/src/components/page/StandardPage.tsx index 1bf14313b..baa056d9b 100644 --- a/packages/forklift-console-plugin/src/components/page/StandardPage.tsx +++ b/packages/forklift-console-plugin/src/components/page/StandardPage.tsx @@ -460,8 +460,8 @@ export function StandardPage({ perPage={itemsPerPage} page={currentPage} itemCount={filteredData.length} - onSetPage={(event, page) => setPage(page)} - onPerPageSelect={(event, perPage, page) => { + onSetPage={(_event, page) => setPage(page)} + onPerPageSelect={(_event, perPage, page) => { setPerPage(perPage); setPage(page); }} diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx index 1c9687c37..fd9c2837c 100644 --- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx +++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx @@ -86,7 +86,7 @@ export const MapsEdit: React.FC = ({ export type MapsEditProps = { providers: V1beta1Provider[]; selectedProviderName: string; - onChange: (value: string) => void; + onChange: (value: string, event: React.FormEvent) => void; label: string; placeHolderLabel: string; invalidLabel: string; diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/ProvidersSection.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/ProvidersSection.tsx index 1d4f879d0..e1dae6c42 100644 --- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/ProvidersSection.tsx +++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/ProvidersSection.tsx @@ -53,6 +53,24 @@ export const ProvidersSection: React.FC = ({ obj }) => { dispatch({ type: 'INIT', payload: obj }); }; + const onChangeSource: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + dispatch({ + type: 'SET_SOURCE_PROVIDER', + payload: providers.find((p) => p?.metadata?.name === value), + }); + }; + + const onChangeTarget: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + dispatch({ + type: 'SET_TARGET_PROVIDER', + payload: providers.find((p) => p?.metadata?.name === value), + }); + }; + return ( @@ -88,12 +106,7 @@ export const ProvidersSection: React.FC = ({ 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 = ({ 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/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx index ab6d23dae..9986b574a 100644 --- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx +++ b/packages/forklift-console-plugin/src/modules/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) => 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 index a62dc2457..f889d75a4 100644 --- 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 = ({ setNewValue(newValue); }; - const onUserChange = (event: React.FormEvent) => { + const onUserChange: (event: React.FormEvent) => 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 index 95e5204f1..bd6274e87 100644 --- 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 = ({ title, resource, setNewNameValidation('success'); }; - const onChange = (name: string) => { - validateName(name); - setNewName(name); + const onChange: (value: string, event: React.FormEvent) => 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 index 1e1785e94..a22f4eadf 100644 --- 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 setCutoverDate(migrationCutoverDate); }, [lastMigration]); - const onDateChange = (inputDate, newDate: string) => { + const onDateChange: ( + event: React.FormEvent, + 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 setCutoverDate(updatedFromDate.toISOString()); }; - const onTimeChange = (_event, _time, hour: number, minute: number) => { + const onTimeChange: ( + event: React.FormEvent, + 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/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 29f083c0e..fc8f252ca 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 @@ -23,12 +23,19 @@ export const SearchInputProvider: React.FunctionComponent, value: string) => void = ( + _event, + value, + ) => { + updateNameFilter(value); + }; + return (
updateNameFilter(value)} + onChange={onChange} onClear={() => updateNameFilter('')} />
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 5c2d874ad..534d3d773 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 @@ -59,7 +59,7 @@ export const MappingListItem: FC = ({ event: SelectEventType, value: SelectValueType, isPlaceholder?: boolean, - ) => void = (event, value: string, isPlaceholder) => { + ) => void = (_event, value: string, isPlaceholder) => { !isPlaceholder && replaceMapping({ current: { source, destination }, @@ -71,7 +71,7 @@ export const MappingListItem: FC = ({ event: SelectEventType, value: SelectValueType, isPlaceholder?: boolean, - ) => void = (event, value: string) => { + ) => void = (_event, value: string) => { replaceMapping({ current: { source, destination }, next: { source, destination: value }, diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx index ab6d23dae..9986b574a 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx +++ b/packages/forklift-console-plugin/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) => void; label: string; placeHolderLabel: string; invalidLabel: string; diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveClusterCpuModel/EditPlanPreserveClusterCpuModel.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveClusterCpuModel/EditPlanPreserveClusterCpuModel.tsx index cd662b4c8..14b012634 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveClusterCpuModel/EditPlanPreserveClusterCpuModel.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveClusterCpuModel/EditPlanPreserveClusterCpuModel.tsx @@ -39,8 +39,10 @@ interface SwitchRendererProps { const PreserveClusterCpuModelInputFactory: () => ModalInputComponentType = () => { const SwitchRenderer: React.FC = ({ value, onChange }) => { - const onChangeInternal = (v) => { - onChange(v ? 'true' : 'false'); + const onChangeInternal: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + onChange(checked ? 'true' : 'false'); }; return ( diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveStaticIPs/EditPlanPreserveStaticIPs.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveStaticIPs/EditPlanPreserveStaticIPs.tsx index e0dad4b8b..da1219bce 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveStaticIPs/EditPlanPreserveStaticIPs.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanPreserveStaticIPs/EditPlanPreserveStaticIPs.tsx @@ -41,8 +41,10 @@ const PreserveStaticIPsInputFactory: () => ModalInputComponentType = () => { const { t } = useForkliftTranslation(); const SwitchRenderer: React.FC = ({ value, onChange }) => { - const onChangeInternal = (v) => { - onChange(v ? 'true' : 'false'); + const onChangeInternal: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + onChange(checked ? 'true' : 'false'); }; return ( diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanWarm/EditPlanWarm.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanWarm/EditPlanWarm.tsx index 91f97e436..0045e029d 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanWarm/EditPlanWarm.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanWarm/EditPlanWarm.tsx @@ -39,8 +39,10 @@ interface SwitchRendererProps { const WarmInputFactory: () => ModalInputComponentType = () => { const SwitchRenderer: React.FC = ({ value, onChange }) => { - const onChangeInternal = (v) => { - onChange(v ? 'true' : 'false'); + const onChangeInternal: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + onChange(checked ? 'true' : 'false'); }; return ( diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx index dc39f06ad..276647e58 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx @@ -91,6 +91,45 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name, ); + const onChangePreHookSet: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + dispatch({ type: 'PRE_HOOK_SET', payload: checked }); + }; + + const onChangePostHookSet: ( + checked: boolean, + event: React.FormEvent, + ) => void = (checked) => { + dispatch({ type: 'POST_HOOK_SET', payload: checked }); + }; + + const onChangePreHookImage: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + dispatch({ type: 'PRE_HOOK_IMAGE', payload: value }); + }; + + const onChangePreHookPlaybook: ( + value: string, + event: React.FormEvent, + ) => void = (value) => { + dispatch({ type: 'PRE_HOOK_PLAYBOOK', payload: value }); + }; + + const onChangePostHookImage: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + dispatch({ type: 'POST_HOOK_IMAGE', payload: value }); + }; + + const onChangePostHookPlaybook: ( + value: string, + event: React.FormEvent, + ) => void = (value) => { + dispatch({ type: 'POST_HOOK_PLAYBOOK', payload: value }); + }; + return ( {state.alertMessage && {state.alertMessage}} @@ -130,7 +169,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name, label="Enable pre migration hook" labelOff="Do not enable a pre migration hook" isChecked={state.preHookSet} - onChange={(value) => dispatch({ type: 'PRE_HOOK_SET', payload: value })} + onChange={onChangePreHookSet} /> @@ -141,7 +180,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name, spellCheck="false" value={state.preHook?.spec?.image} type="url" - onChange={(value) => dispatch({ type: 'PRE_HOOK_IMAGE', payload: value })} + onChange={onChangePreHookImage} aria-label="pre hook image" /> @@ -155,7 +194,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name, dispatch({ type: 'PRE_HOOK_PLAYBOOK', payload: value })} + onChange={onChangePreHookPlaybook} minHeight="400px" showMiniMap={false} /> @@ -180,7 +219,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name, label="Enable post migration hook" labelOff="Do not enable a post migration hook" isChecked={state.postHookSet} - onChange={(value) => dispatch({ type: 'POST_HOOK_SET', payload: value })} + onChange={onChangePostHookSet} /> @@ -191,7 +230,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name, spellCheck="false" value={state.postHook?.spec?.image} type="url" - onChange={(value) => dispatch({ type: 'POST_HOOK_IMAGE', payload: value })} + onChange={onChangePostHookImage} aria-label="pre hook image" /> @@ -205,7 +244,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name, dispatch({ type: 'POST_HOOK_PLAYBOOK', payload: value })} + onChange={onChangePostHookPlaybook} minHeight="400px" showMiniMap={false} /> diff --git a/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx index 07ee33e3e..400457180 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx @@ -135,6 +135,10 @@ export const EditModal: React.FC = ({ ); + const onChange: (value: string, event: React.FormEvent) => void = (value) => { + handleValueChange(value); + }; + /** * InputComponent_ is a higher-order component that renders either the passed-in InputComponent, or a default TextInput, */ @@ -146,7 +150,7 @@ export const EditModal: React.FC = ({ id="modal-with-form-form-field" name="modal-with-form-form-field" value={value} - onChange={(value) => handleValueChange(value)} + onChange={onChange} validated={validation.type} /> ); diff --git a/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderVDDKImage/EditProviderVDDKImage.tsx b/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderVDDKImage/EditProviderVDDKImage.tsx index 3da2ca88b..22e65770e 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderVDDKImage/EditProviderVDDKImage.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderVDDKImage/EditProviderVDDKImage.tsx @@ -35,6 +35,16 @@ export const EditProviderVDDKImage: React.FC = (prop const isEmptyImage = emptyImage === 'yes'; + const onChange: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + if (checked) { + setEmptyImage('yes'); + } else { + setEmptyImage(undefined); + } + }; + const body = ( @@ -45,13 +55,7 @@ export const EditProviderVDDKImage: React.FC = (prop 'Skip VMware Virtual Disk Development Kit (VDDK) SDK acceleration, migration may be slow.', )} isChecked={isEmptyImage} - onChange={(checked) => { - if (checked) { - setEmptyImage('yes'); - } else { - setEmptyImage(undefined); - } - }} + onChange={onChange} id="emptyVddkInitImage" name="emptyVddkInitImage" /> diff --git a/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/VerifyCertificate.tsx b/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/VerifyCertificate.tsx index d6a9e3453..c1a07884d 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/VerifyCertificate.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/VerifyCertificate.tsx @@ -26,6 +26,12 @@ export const VerifyCertificate: FC<{ }> = ({ thumbprint, issuer, validTo, isTrusted, setIsTrusted, hasThumbprintChanged }) => { const { t } = useForkliftTranslation(); + const onChange: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + setIsTrusted(checked); + }; + return ( <> {hasThumbprintChanged && ( @@ -60,7 +66,7 @@ export const VerifyCertificate: FC<{ id="certificate-check" name="certificateCheck" isChecked={isTrusted} - onChange={setIsTrusted} + onChange={onChange} /> diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx index ab3da9bcc..4f517c4ea 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx @@ -130,6 +130,24 @@ export const EsxiProviderCreateForm: React.FC = ({ event.preventDefault(); }; + const onChangeUrl: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('url', value); + }; + + const onChangEmptyVddk: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + handleChange('emptyVddkInitImage', checked ? 'yes' : undefined); + }; + + const onChangeVddk: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('vddkInitImage', value); + }; + return (
= ({ name="url" value={url} validated={state.validation.url.type} - onChange={(value) => handleChange('url', value)} + onChange={onChangeUrl} /> @@ -201,7 +219,7 @@ export const EsxiProviderCreateForm: React.FC = ({ 'Skip VMware Virtual Disk Development Kit (VDDK) SDK acceleration, migration may be slow.', )} isChecked={emptyVddkInitImage === 'yes'} - onChange={(value) => handleChange('emptyVddkInitImage', value ? 'yes' : undefined)} + onChange={onChangEmptyVddk} id="emptyVddkInitImage" name="emptyVddkInitImage" /> @@ -218,7 +236,7 @@ export const EsxiProviderCreateForm: React.FC = ({ validated={ emptyVddkInitImage === 'yes' ? 'default' : state.validation.vddkInitImage.type } - onChange={(value) => handleChange('vddkInitImage', value)} + onChange={onChangeVddk} /> diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx index b9f477e69..204cb354d 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx @@ -57,6 +57,12 @@ export const OVAProviderCreateForm: React.FC = ({ [provider], ); + const onChangeUrl: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('url', value); + }; + return ( = ({ isRequired value={url || ''} validated={state.validation.url.type} - onChange={(value) => handleChange('url', value)} + onChange={onChangeUrl} /> diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx index 03789a475..9a48aa805 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx @@ -59,6 +59,12 @@ export const OpenshiftProviderFormCreate: React.FC) => void = ( + value, + ) => { + handleChange('url', value); + }; + return (
handleChange('url', value)} + onChange={onChangeUrl} />
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx index 6c3672614..c4b39ddf8 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx @@ -59,6 +59,12 @@ export const OpenstackProviderCreateForm: React.FC) => void = ( + value, + ) => { + handleChange('url', value); + }; + return (
handleChange('url', value)} + onChange={onChangeUrl} />
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx index 3092ce100..c7079c325 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx @@ -59,6 +59,12 @@ export const OvirtProviderCreateForm: React.FC = ( [provider], ); + const onChangeUrl: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('url', value); + }; + return (
= ( name="url" value={url || ''} validated={state.validation.url.type} - onChange={(value) => handleChange('url', value)} + onChange={onChangeUrl} />
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx index 871515d0c..26376cef4 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx @@ -93,6 +93,10 @@ export const ProvidersCreateForm: React.FC = ({ onNewProviderChange({ ...newProvider, spec: { ...newProvider?.spec, type: type } }); }; + const onChange: (value: string, event: React.FormEvent) => void = (value) => { + handleNameChange(value); + }; + return (
@@ -153,7 +157,7 @@ export const ProvidersCreateForm: React.FC = ({ name="name" value={newProvider.metadata.name} // Use the appropriate prop value here validated={state.validation.name.type} - onChange={(value) => handleNameChange(value)} // Call the custom handler method + onChange={onChange} // Call the custom handler method /> diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx index fde32a125..389bed891 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx @@ -131,6 +131,24 @@ export const VCenterProviderCreateForm: React.FC event.preventDefault(); }; + const onChangeUrl: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('url', value); + }; + + const onChangEmptyVddk: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + handleChange('emptyVddkInitImage', checked ? 'yes' : undefined); + }; + + const onChangeVddk: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('vddkInitImage', value); + }; + return (
name="url" value={url} validated={state.validation.url.type} - onChange={(value) => handleChange('url', value)} + onChange={onChangeUrl} /> @@ -202,7 +220,7 @@ export const VCenterProviderCreateForm: React.FC 'Skip VMware Virtual Disk Development Kit (VDDK) SDK acceleration, migration may be slow.', )} isChecked={emptyVddkInitImage === 'yes'} - onChange={(value) => handleChange('emptyVddkInitImage', value ? 'yes' : undefined)} + onChange={onChangEmptyVddk} id="emptyVddkInitImage" name="emptyVddkInitImage" /> @@ -219,7 +237,7 @@ export const VCenterProviderCreateForm: React.FC validated={ emptyVddkInitImage === 'yes' ? 'default' : state.validation.vddkInitImage.type } - onChange={(value) => handleChange('vddkInitImage', value)} + onChange={onChangeVddk} />
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 9739da87f..68d941020 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 @@ -103,6 +103,24 @@ export const EsxiCredentialsEdit: React.FC = ({ secret, onCh togglePasswordHidden(); }; + const onChangeUser: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('user', value); + }; + + const onChangePassword: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('password', value); + }; + + const onChangeInsecure: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + handleChange('insecureSkipVerify', checked ? 'true' : 'false'); + }; + return ( = ({ secret, onCh type="text" id="username" name="username" - onChange={(value) => handleChange('user', value)} + onChange={onChangeUser} value={user} validated={state.validation.user.type} /> @@ -138,7 +156,7 @@ export const EsxiCredentialsEdit: React.FC = ({ secret, onCh isRequired type={state.passwordHidden ? 'password' : 'text'} aria-label="Password input" - onChange={(value) => handleChange('password', value)} + onChange={onChangePassword} value={password} validated={state.validation.password.type} /> @@ -181,7 +199,7 @@ export const EsxiCredentialsEdit: React.FC = ({ secret, onCh label={t('Skip certificate validation')} isChecked={insecureSkipVerify === 'true'} hasCheckIcon - onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')} + onChange={onChangeInsecure} /> 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 5fe4811ac..e9a88cac3 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 @@ -103,6 +103,18 @@ export const OpenshiftCredentialsEdit: React.FC = ({ secret, togglePasswordHidden(); }; + const onChangeToken: (value: string, event: React.FormEvent) => void = ( + value, + ) => { + handleChange('token', value); + }; + + const onChangeInsecure: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + handleChange('insecureSkipVerify', checked ? 'true' : 'false'); + }; + return ( = ({ secret, isRequired type={state.passwordHidden ? 'password' : 'text'} aria-label="Token input" - onChange={(value) => handleChange('token', value)} + onChange={onChangeToken} value={token} validated={state.validation.token.type} /> @@ -162,7 +174,7 @@ export const OpenshiftCredentialsEdit: React.FC = ({ secret, label={t('Skip certificate validation')} isChecked={insecureSkipVerify === 'true'} hasCheckIcon - onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')} + onChange={onChangeInsecure} /> 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 f615c1760..a5fa4530a 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 @@ -164,6 +164,12 @@ export const OpenstackCredentialsEdit: React.FC = ({ secret, event.preventDefault(); }; + const onChangeInsecure: (checked: boolean, event: React.FormEvent) => void = ( + checked, + ) => { + handleChange('insecureSkipVerify', checked ? 'true' : 'false'); + }; + return ( = ({ secret, aria-label={insecureSkipVerifyHelperTextMsgs.successAndSkipped} isChecked={insecureSkipVerify === 'true'} hasCheckIcon - onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')} + onChange={onChangeInsecure} /> (value: string, event: React.FormEvent) => void; + + const onChangeFactory: onChangeFactoryType = (changedField) => (value) => + handleChange(changedField, value); + return ( <> handleChange('applicationCredentialName', value)} + onChange={onChangeFactory('applicationCredentialName')} validated={state.validation.applicationCredentialName.type} /> @@ -114,7 +121,7 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC handleChange('applicationCredentialSecret', value)} + onChange={onChangeFactory('applicationCredentialSecret')} validated={state.validation.applicationCredentialSecret.type} />