From fdaa1e7f9dbc25030bfbc38a0737c23ccac4712d Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Mon, 10 Jun 2024 09:40:25 +0300
Subject: [PATCH] Update to PF5 - part II - onClick event handler

Reference: https://github.com/kubev2v/forklift-console-plugin/issues/1098

Seems like onClick event handler parameters was changed in PF5 for few of the
components by enforcing the event handler as the first parameter (E.g. https://www.patternfly.org/components/chip/#chip
while in our code we are not passing the event
https://github.com/kubev2v/forklift-console-plugin/blob/686daff412d61c5e84c14f7b87fe2867038fc14b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/ChipsToolbarProviders.tsx#L40).

For avoiding uncaught migration errors, this PR named and typed all callback appearances, when possible

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
---
 .../NetworkMapActionsDropdownItems.tsx        | 10 +--
 .../componenets/NetworkMapsAddButton.tsx      | 10 +--
 .../components/MapsSection/MapsSection.tsx    |  6 +-
 .../ProvidersSection/ProvidersSection.tsx     |  6 +-
 .../components/ShowWelcomeCardButton.tsx      |  7 +-
 .../Metrics/cards/MigrationsChartCard.tsx     | 39 ++++-----
 .../Metrics/cards/VmMigrationsChartCard.tsx   | 39 ++++-----
 .../actions/PlanActionsDropdownItems.tsx      | 44 ++++++----
 .../details/components/MappingListItem.tsx    |  6 +-
 .../details/components/PlanPageHeadings.tsx   | 19 ++--
 .../views/details/tabs/Hooks/PlanHooks.tsx    | 18 ++--
 .../components/MigrationVMsCancelButton.tsx   | 11 +--
 .../components/PlanVMsDeleteButton.tsx        | 10 +--
 .../views/list/components/ActionsCell.tsx     | 26 +++---
 .../actions/ProviderActionsDropdownItems.tsx  | 10 +--
 .../Providers/modals/EditModal/EditModal.tsx  |  6 +-
 .../CertificateUpload/CertificateUpload.tsx   | 16 ++--
 .../FetchCertificateModal.tsx                 | 11 ++-
 .../components/DetailsPage/DetailItem.tsx     | 86 ++++++++++---------
 .../views/create/ProvidersCreatePage.tsx      |  6 +-
 .../components/EsxiProviderCreateForm.tsx     | 10 +--
 .../components/VCenterProviderCreateForm.tsx  | 10 +--
 .../components/edit/EsxiCredentialsEdit.tsx   | 16 +++-
 .../edit/OpenshiftCredentialsEdit.tsx         | 16 +++-
 .../edit/OpenstackCredentialsEdit.tsx         | 10 +--
 .../components/edit/OvirtCredentialsEdit.tsx  | 16 +++-
 .../edit/VCenterCredentialsEdit.tsx           | 16 ++--
 .../Hosts/components/SelectNetworkButton.tsx  | 13 +--
 .../tabs/Networks/ProviderNetworks.tsx        |  9 +-
 .../components/MigrationAction.tsx            | 14 ++-
 .../list/components/ProvidersAddButton.tsx    | 10 +--
 .../migrate/components/MappingListItem.tsx    |  6 +-
 .../StorageMapActionsDropdownItems.tsx        | 10 +--
 .../componenets/StorageMapsAddButton.tsx      | 10 +--
 .../components/MapsSection/MapsSection.tsx    |  6 +-
 .../ProvidersSection/ProvidersSection.tsx     |  6 +-
 36 files changed, 305 insertions(+), 259 deletions(-)

diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx
index 92864e911..733848b98 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx
@@ -21,15 +21,15 @@ export const NetworkMapActionsDropdownItems = ({ data }: NetworkMapActionsDropdo
     namespace: networkMap?.metadata?.namespace,
   });
 
+  const onClick = () => {
+    showModal(<DeleteModal resource={networkMap} model={NetworkMapModel} />);
+  };
+
   return [
     <DropdownItemLink key="EditNetworkMapping" href={networkMapURL}>
       {t('Edit NetworkMap')}
     </DropdownItemLink>,
-    <DropdownItem
-      key="delete"
-      isDisabled={!data?.permissions?.canDelete}
-      onClick={() => showModal(<DeleteModal resource={networkMap} model={NetworkMapModel} />)}
-    >
+    <DropdownItem key="delete" isDisabled={!data?.permissions?.canDelete} onClick={onClick}>
       {t('Delete NetworkMap')}
     </DropdownItem>,
   ];
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/componenets/NetworkMapsAddButton.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/componenets/NetworkMapsAddButton.tsx
index c6b22d2d0..1b6e6431d 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/componenets/NetworkMapsAddButton.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/componenets/NetworkMapsAddButton.tsx
@@ -19,12 +19,12 @@ export const NetworkMapsAddButton: React.FC<{ namespace: string; dataTestId?: st
     namespaced: namespace !== undefined,
   });
 
+  const onClick = () => {
+    history.push(`${NetworkMapsListURL}/~new`);
+  };
+
   return (
-    <Button
-      data-testid={dataTestId}
-      variant="primary"
-      onClick={() => history.push(`${NetworkMapsListURL}/~new`)}
-    >
+    <Button data-testid={dataTestId} variant="primary" onClick={onClick}>
       {t('Create NetworkMap')}
     </Button>
   );
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/MapsSection.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/MapsSection.tsx
index 69cf80b6d..07736b867 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/MapsSection.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/MapsSection.tsx
@@ -156,6 +156,10 @@ export const MapsSection: React.FC<MapsSectionProps> = ({ obj }) => {
     });
   };
 
+  const onClick = () => {
+    dispatch({ type: 'INIT', payload: obj });
+  };
+
   return (
     <Suspend obj={providers} loaded={providersLoaded} loadError={providersLoadError}>
       <Flex className="forklift-network-map__details-tab--update-button">
@@ -173,7 +177,7 @@ export const MapsSection: React.FC<MapsSectionProps> = ({ obj }) => {
         <FlexItem>
           <Button
             variant="secondary"
-            onClick={() => dispatch({ type: 'INIT', payload: obj })}
+            onClick={onClick}
             isDisabled={!state.hasChanges || state.updating}
           >
             {t('Cancel')}
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 0d7530bb7..1d4f879d0 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
@@ -49,6 +49,10 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
     });
   };
 
+  const onClick = () => {
+    dispatch({ type: 'INIT', payload: obj });
+  };
+
   return (
     <Suspend obj={providers} loaded={providersLoaded} loadError={providersLoadError}>
       <Flex className="forklift-network-map__details-tab--update-button">
@@ -66,7 +70,7 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
         <FlexItem>
           <Button
             variant="secondary"
-            onClick={() => dispatch({ type: 'INIT', payload: obj })}
+            onClick={onClick}
             isDisabled={!state.hasChanges || state.updating}
           >
             {t('Cancel')}
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/ShowWelcomeCardButton.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/ShowWelcomeCardButton.tsx
index 913d9d37c..f6c401053 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/ShowWelcomeCardButton.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/components/ShowWelcomeCardButton.tsx
@@ -10,15 +10,16 @@ export const ShowWelcomeCardButton: React.FC = () => {
   // Set and use context data for the overview page state
   const { setData } = useCreateOverviewContext();
   const { data: { hideWelcomeCardByContext } = {} } = useCreateOverviewContext();
+  const onClick = () => {
+    setData({ hideWelcomeCardByContext: false });
+  };
 
   if (!hideWelcomeCardByContext) return null;
 
   return (
     <Label
       color="purple"
-      onClick={() => {
-        setData({ hideWelcomeCardByContext: false });
-      }}
+      onClick={onClick}
       onClose={() => null}
       style={{ cursor: 'pointer' }}
       data-testid="show-welcome-card"
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx
index bd89ea725..f16b4577a 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx
@@ -72,6 +72,21 @@ export const MigrationsChartCard: React.FC<MigrationsCardProps> = () => {
     ...migrationsDataPoints.succeeded.map((m) => m.value),
   );
 
+  const onClickLast7Days = () => {
+    onToggle();
+    setSelectedTimeRange(TimeRangeOptions.Last7Days);
+  };
+
+  const onClickLast31Days = () => {
+    onToggle();
+    setSelectedTimeRange(TimeRangeOptions.Last31Days);
+  };
+
+  const onClickLast24H = () => {
+    onToggle();
+    setSelectedTimeRange(TimeRangeOptions.Last24H);
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -84,31 +99,13 @@ export const MigrationsChartCard: React.FC<MigrationsCardProps> = () => {
             isOpen={isDropdownOpened}
             isPlain
             dropdownItems={[
-              <DropdownItem
-                onClick={() => {
-                  onToggle();
-                  setSelectedTimeRange(TimeRangeOptions.Last7Days);
-                }}
-                key="7days"
-              >
+              <DropdownItem onClick={onClickLast7Days} key="7days">
                 {t('7 days')}
               </DropdownItem>,
-              <DropdownItem
-                onClick={() => {
-                  onToggle();
-                  setSelectedTimeRange(TimeRangeOptions.Last31Days);
-                }}
-                key="31days"
-              >
+              <DropdownItem onClick={onClickLast31Days} key="31days">
                 {t('31 days')}
               </DropdownItem>,
-              <DropdownItem
-                onClick={() => {
-                  onToggle();
-                  setSelectedTimeRange(TimeRangeOptions.Last24H);
-                }}
-                key="24hours"
-              >
+              <DropdownItem onClick={onClickLast24H} key="24hours">
                 {t('24 hours')}
               </DropdownItem>,
             ]}
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx
index c6b2ddfcf..8a233f00a 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx
@@ -94,6 +94,21 @@ export const VmMigrationsChartCard: React.FC<MigrationsCardProps> = () => {
     ...VmMigrationsDataPoints.succeeded.map((m) => m.value),
   );
 
+  const onClickLast7Days = () => {
+    onToggle();
+    setSelectedTimeRange(TimeRangeOptions.Last7Days);
+  };
+
+  const onClickLast31Days = () => {
+    onToggle();
+    setSelectedTimeRange(TimeRangeOptions.Last31Days);
+  };
+
+  const onClickLast24H = () => {
+    onToggle();
+    setSelectedTimeRange(TimeRangeOptions.Last24H);
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -106,31 +121,13 @@ export const VmMigrationsChartCard: React.FC<MigrationsCardProps> = () => {
             isOpen={isDropdownOpened}
             isPlain
             dropdownItems={[
-              <DropdownItem
-                onClick={() => {
-                  onToggle();
-                  setSelectedTimeRange(TimeRangeOptions.Last7Days);
-                }}
-                key="7days"
-              >
+              <DropdownItem onClick={onClickLast7Days} key="7days">
                 {t('7 days')}
               </DropdownItem>,
-              <DropdownItem
-                onClick={() => {
-                  onToggle();
-                  setSelectedTimeRange(TimeRangeOptions.Last31Days);
-                }}
-                key="31days"
-              >
+              <DropdownItem onClick={onClickLast31Days} key="31days">
                 {t('31 days')}
               </DropdownItem>,
-              <DropdownItem
-                onClick={() => {
-                  onToggle();
-                  setSelectedTimeRange(TimeRangeOptions.Last24H);
-                }}
-                key="24hours"
-              >
+              <DropdownItem onClick={onClickLast24H} key="24hours">
                 {t('24 hours')}
               </DropdownItem>,
             ]}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
index 5680d3e6a..2566b2a35 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
@@ -36,35 +36,45 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
 
   const buttonStartLabel = canReStart ? t('Restart migration') : t('Start migration');
 
+  const onClickPlanStart = () => {
+    showModal(
+      <PlanStartMigrationModal resource={plan} model={PlanModel} title={buttonStartLabel} />,
+    );
+  };
+
+  const onClickPlanCutover = () => {
+    showModal(<PlanCutoverMigrationModal resource={plan} />);
+  };
+
+  const onClickDuplicate = () => {
+    showModal(<DuplicateModal resource={plan} model={PlanModel} />);
+  };
+
+  const onClickArchive = () => {
+    showModal(<ArchiveModal resource={plan} model={PlanModel} />);
+  };
+
+  const onClickPlanDelete = () => {
+    showModal(<PlanDeleteModal resource={plan} model={PlanModel} />);
+  };
+
   return [
     <DropdownItemLink key="EditPlan" href={planURL}>
       {t('Edit Plan')}
     </DropdownItemLink>,
 
-    <DropdownItem
-      key="start"
-      isDisabled={!canStart}
-      onClick={() =>
-        showModal(
-          <PlanStartMigrationModal resource={plan} model={PlanModel} title={buttonStartLabel} />,
-        )
-      }
-    >
+    <DropdownItem key="start" isDisabled={!canStart} onClick={onClickPlanStart}>
       {buttonStartLabel}
     </DropdownItem>,
 
-    <DropdownItem
-      key="cutover"
-      isDisabled={!isWarmAndExecuting}
-      onClick={() => showModal(<PlanCutoverMigrationModal resource={plan} />)}
-    >
+    <DropdownItem key="cutover" isDisabled={!isWarmAndExecuting} onClick={onClickPlanCutover}>
       {t('Cutover')}
     </DropdownItem>,
 
     <DropdownItem
       key="duplicate"
       isDisabled={!data?.permissions?.canDelete}
-      onClick={() => showModal(<DuplicateModal resource={plan} model={PlanModel} />)}
+      onClick={onClickDuplicate}
     >
       {t('Duplicate Plan')}
     </DropdownItem>,
@@ -72,7 +82,7 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
     <DropdownItem
       key="archive"
       isDisabled={!data?.permissions?.canDelete || ['Archived', 'Archiving'].includes(phase)}
-      onClick={() => showModal(<ArchiveModal resource={plan} model={PlanModel} />)}
+      onClick={onClickArchive}
     >
       {t('Archive Plan')}
     </DropdownItem>,
@@ -80,7 +90,7 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
     <DropdownItem
       key="delete"
       isDisabled={!data?.permissions?.canDelete}
-      onClick={() => showModal(<PlanDeleteModal resource={plan} model={PlanModel} />)}
+      onClick={onClickPlanDelete}
     >
       {t('Delete Plan')}
     </DropdownItem>,
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 c7854a2ed..09105ba3c 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
@@ -50,6 +50,10 @@ export const MappingListItem: FC<MappingListItemProps> = ({
   const [isSrcOpen, setToggleSrcOpen] = useToggle(false);
   const [isTrgOpen, setToggleTrgOpen] = useToggle(false);
 
+  const onClick = () => {
+    deleteMapping({ source, destination });
+  };
+
   return (
     <DataListItem aria-labelledby="">
       <DataListItemRow>
@@ -111,7 +115,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
             aria-labelledby=""
           >
             <Button
-              onClick={() => deleteMapping({ source, destination })}
+              onClick={onClick}
               variant="plain"
               aria-label={t('Delete mapping')}
               key="delete-action"
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx
index d15cf015f..c01927c5b 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx
@@ -58,21 +58,16 @@ export const PlanPageHeadings: React.FC<{ name: string; namespace: string }> = (
     );
   }
 
+  const onClick = () => {
+    showModal(
+      <PlanStartMigrationModal resource={plan} model={PlanModel} title={buttonStartLabel} />,
+    );
+  };
+
   const actions = (
     <Level hasGutter>
       {canStart && (
-        <Button
-          variant="primary"
-          onClick={() =>
-            showModal(
-              <PlanStartMigrationModal
-                resource={plan}
-                model={PlanModel}
-                title={buttonStartLabel}
-              />,
-            )
-          }
-        >
+        <Button variant="primary" onClick={onClick}>
           <Level hasGutter>
             <>
               <LevelItem>{buttonStartIcon}</LevelItem>
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 09b2daa4f..3b03500dd 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
@@ -50,6 +50,13 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
     onUpdatePlanHooks({ plan, preHookResource, postHookResource, dispatch, state });
   }
 
+  const onClick = () => {
+    dispatch({
+      type: 'INIT',
+      payload: initialState(plan, preHookResource, postHookResource),
+    });
+  };
+
   const HooksTabAction = (
     <>
       <Flex>
@@ -65,16 +72,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
         </FlexItem>
 
         <FlexItem>
-          <Button
-            variant="secondary"
-            isDisabled={!state.hasChanges}
-            onClick={() =>
-              dispatch({
-                type: 'INIT',
-                payload: initialState(plan, preHookResource, postHookResource),
-              })
-            }
-          >
+          <Button variant="secondary" isDisabled={!state.hasChanges} onClick={onClick}>
             {t('Cancel')}
           </Button>
         </FlexItem>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/MigrationVMsCancelButton.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/MigrationVMsCancelButton.tsx
index fcc1c3539..795afe588 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/MigrationVMsCancelButton.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/MigrationVMsCancelButton.tsx
@@ -13,16 +13,13 @@ export const MigrationVMsCancelButton: FC<{
 }> = ({ selectedIds, migration }) => {
   const { t } = useForkliftTranslation();
   const { showModal } = useModal();
+  const onClick = () => {
+    showModal(<MigrationVMsCancelModal migration={migration} selected={selectedIds} />);
+  };
 
   return (
     <ToolbarItem>
-      <Button
-        variant="secondary"
-        onClick={() =>
-          showModal(<MigrationVMsCancelModal migration={migration} selected={selectedIds} />)
-        }
-        isDisabled={!selectedIds?.length}
-      >
+      <Button variant="secondary" onClick={onClick} isDisabled={!selectedIds?.length}>
         {t('Cancel virtual machines')}
       </Button>
     </ToolbarItem>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/PlanVMsDeleteButton.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/PlanVMsDeleteButton.tsx
index d3c1f69fc..09e79a221 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/PlanVMsDeleteButton.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/PlanVMsDeleteButton.tsx
@@ -14,13 +14,13 @@ export const PlanVMsDeleteButton: FC<{
   const { t } = useForkliftTranslation();
   const { showModal } = useModal();
 
+  const onClick = () => {
+    showModal(<PlanVMsDeleteModal plan={plan} selected={selectedIds} />);
+  };
+
   return (
     <ToolbarItem>
-      <Button
-        variant="secondary"
-        onClick={() => showModal(<PlanVMsDeleteModal plan={plan} selected={selectedIds} />)}
-        isDisabled={selectedIds?.length < 1}
-      >
+      <Button variant="secondary" onClick={onClick} isDisabled={selectedIds?.length < 1}>
         {t('Remove virtual machines')}
       </Button>
     </ToolbarItem>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ActionsCell.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ActionsCell.tsx
index dcccdeaae..a75a4d885 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ActionsCell.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ActionsCell.tsx
@@ -28,25 +28,23 @@ export const ActionsCell = ({ data }: CellProps) => {
   const buttonStartIcon = canReStart ? <ReStartIcon /> : <StartIcon />;
   const buttonCutoverIcon = <CutoverIcon />;
 
+  const onClickPlanStartMigration = () => {
+    showModal(
+      <PlanStartMigrationModal resource={data.obj} model={PlanModel} title={buttonStartLabel} />,
+    );
+  };
+
+  const onClickPlanCutoverMigration = () => {
+    showModal(<PlanCutoverMigrationModal resource={data.obj} />);
+  };
+
   return (
     <Flex flex={{ default: 'flex_3' }} flexWrap={{ default: 'nowrap' }}>
       <FlexItem grow={{ default: 'grow' }}></FlexItem>
 
       {canStart && (
         <FlexItem align={{ default: 'alignRight' }}>
-          <Button
-            variant="secondary"
-            icon={buttonStartIcon}
-            onClick={() =>
-              showModal(
-                <PlanStartMigrationModal
-                  resource={data.obj}
-                  model={PlanModel}
-                  title={buttonStartLabel}
-                />,
-              )
-            }
-          >
+          <Button variant="secondary" icon={buttonStartIcon} onClick={onClickPlanStartMigration}>
             {buttonStartLabel}
           </Button>
         </FlexItem>
@@ -57,7 +55,7 @@ export const ActionsCell = ({ data }: CellProps) => {
           <Button
             variant="secondary"
             icon={buttonCutoverIcon}
-            onClick={() => showModal(<PlanCutoverMigrationModal resource={data.obj} />)}
+            onClick={onClickPlanCutoverMigration}
           >
             {t('Cutover')}
           </Button>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx
index 8db771679..9f6688f4d 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx
@@ -20,6 +20,10 @@ export const ProviderActionsDropdownItems = ({ data }: ProviderActionsDropdownIt
     namespace: provider?.metadata?.namespace,
   });
 
+  const onClick = () => {
+    showModal(<DeleteModal resource={provider} model={ProviderModel} />);
+  };
+
   return [
     <DropdownItemLink key="EditProvider" href={providerURL}>
       {t('Edit Provider')}
@@ -30,11 +34,7 @@ export const ProviderActionsDropdownItems = ({ data }: ProviderActionsDropdownIt
     <DropdownItemLink key="MigratePlan" href={`${providerURL}/vms`}>
       {t('Migrate')}
     </DropdownItemLink>,
-    <DropdownItem
-      key="delete"
-      isDisabled={!data?.permissions?.canDelete}
-      onClick={() => showModal(<DeleteModal resource={provider} model={ProviderModel} />)}
-    >
+    <DropdownItem key="delete" isDisabled={!data?.permissions?.canDelete} onClick={onClick}>
       {t('Delete Provider')}
     </DropdownItem>,
   ];
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 806723412..9ba56ca32 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
@@ -104,6 +104,10 @@ export const EditModal: React.FC<EditModalProps> = ({
     }
   }, [resource, value]);
 
+  const onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (event) => {
+    event.preventDefault();
+  };
+
   /**
    * LabelIcon is a (?) icon that triggers a Popover component when clicked.
    */
@@ -112,7 +116,7 @@ export const EditModal: React.FC<EditModalProps> = ({
       <button
         type="button"
         aria-label="More info for field"
-        onClick={(e) => e.preventDefault()}
+        onClick={onClick}
         aria-describedby="modal-with-form-form-field"
         className="pf-c-form__group-label-help"
       >
diff --git a/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/CertificateUpload.tsx b/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/CertificateUpload.tsx
index 290fae566..e103de8f8 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/CertificateUpload.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/CertificateUpload.tsx
@@ -34,6 +34,12 @@ export const CertificateUpload: FC<CertificateUploadProps> = ({
   const { showModal } = useModal();
   const { t } = useForkliftTranslation();
   const isText = !type || type === 'text';
+  const onClick = () => {
+    showModal(
+      <FetchCertificateModal url={url} handleSave={onTextChange} existingCert={String(value)} />,
+    );
+  };
+
   return (
     <>
       <FileUpload
@@ -55,15 +61,7 @@ export const CertificateUpload: FC<CertificateUploadProps> = ({
                 className="forklift-certificate-upload-margin"
                 isDisabled={isDisabled || !url?.trim().startsWith('https://')}
                 variant="secondary"
-                onClick={() =>
-                  showModal(
-                    <FetchCertificateModal
-                      url={url}
-                      handleSave={onTextChange}
-                      existingCert={String(value)}
-                    />,
-                  )
-                }
+                onClick={onClick}
               >
                 {t('Fetch certificate from URL')}
               </Button>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/FetchCertificateModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/FetchCertificateModal.tsx
index eb88f7787..01dc5054d 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/FetchCertificateModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/utils/components/CertificateUpload/FetchCertificateModal.tsx
@@ -21,6 +21,12 @@ export const FetchCertificateModal: FC<{
   const success = !loading && !fetchError && !certError;
   const hasThumbprintChanged =
     existingCert && success && thumbprint !== calculateThumbprint(existingCert);
+
+  const onClick = () => {
+    handleSave(certificate);
+    toggleModal();
+  };
+
   return (
     <Modal
       title={t('Verify certificate')}
@@ -33,10 +39,7 @@ export const FetchCertificateModal: FC<{
         <Button
           key="confirm"
           variant="primary"
-          onClick={() => {
-            handleSave(certificate);
-            toggleModal();
-          }}
+          onClick={onClick}
           isDisabled={!success || !isTrusted}
         >
           {t('Confirm')}
diff --git a/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx b/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx
index b4cfed03d..36e3799c5 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx
@@ -108,50 +108,52 @@ export const DescriptionTitleWithHelp: React.FC<{
   crumbs,
   moreInfoLabel = 'More info:',
   moreInfoLink,
-}) => (
-  <DescriptionListTermHelpText>
-    {showHelpIconNextToTitle ? <label>{title} &nbsp;</label> : null}
-    <Popover
-      headerContent={<div>{title}</div>}
-      bodyContent={
-        <Flex direction={{ default: 'column' }}>
-          <FlexItem>{helpContent}</FlexItem>
+}) => {
+  const onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (event) => {
+    event.preventDefault();
+  };
 
-          {moreInfoLink && (
-            <FlexItem>
-              {moreInfoLabel}{' '}
-              <ExternalLink href={moreInfoLink} isInline hideIcon>
-                <Truncate content={moreInfoLink} />
-              </ExternalLink>
-            </FlexItem>
-          )}
+  return (
+    <DescriptionListTermHelpText>
+      {showHelpIconNextToTitle ? <label>{title} &nbsp;</label> : null}
+      <Popover
+        headerContent={<div>{title}</div>}
+        bodyContent={
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem>{helpContent}</FlexItem>
 
-          {crumbs && crumbs.length > 0 && (
-            <FlexItem>
-              <Breadcrumb>
-                {crumbs.map((c) => (
-                  <BreadcrumbItem key={c}>{c}</BreadcrumbItem>
-                ))}
-              </Breadcrumb>
-            </FlexItem>
-          )}
-        </Flex>
-      }
-    >
-      {showHelpIconNextToTitle ? (
-        <button
-          type="button"
-          onClick={(e) => e.preventDefault()}
-          className="pf-c-form__group-label-help"
-        >
-          <HelpIcon />
-        </button>
-      ) : (
-        <DescriptionListTermHelpTextButton> {title} </DescriptionListTermHelpTextButton>
-      )}
-    </Popover>
-  </DescriptionListTermHelpText>
-);
+            {moreInfoLink && (
+              <FlexItem>
+                {moreInfoLabel}{' '}
+                <ExternalLink href={moreInfoLink} isInline hideIcon>
+                  <Truncate content={moreInfoLink} />
+                </ExternalLink>
+              </FlexItem>
+            )}
+
+            {crumbs && crumbs.length > 0 && (
+              <FlexItem>
+                <Breadcrumb>
+                  {crumbs.map((c) => (
+                    <BreadcrumbItem key={c}>{c}</BreadcrumbItem>
+                  ))}
+                </Breadcrumb>
+              </FlexItem>
+            )}
+          </Flex>
+        }
+      >
+        {showHelpIconNextToTitle ? (
+          <button type="button" onClick={onClick} className="pf-c-form__group-label-help">
+            <HelpIcon />
+          </button>
+        ) : (
+          <DescriptionListTermHelpTextButton> {title} </DescriptionListTermHelpTextButton>
+        )}
+      </Popover>
+    </DescriptionListTermHelpText>
+  );
+};
 
 /**
  * Component for displaying title without a popover.
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.tsx
index 3fc93c1f2..2cd6fc3d3 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.tsx
@@ -211,6 +211,10 @@ export const ProvidersCreatePage: React.FC<{
     namespace: namespace,
   });
 
+  const onClick = () => {
+    history.push(providersListURL);
+  };
+
   return (
     <div>
       <PageSection variant="light">
@@ -272,7 +276,7 @@ export const ProvidersCreatePage: React.FC<{
             </Button>
           </FlexItem>
           <FlexItem>
-            <Button onClick={() => history.push(providersListURL)} variant="secondary">
+            <Button onClick={onClick} variant="secondary">
               {t('Cancel')}
             </Button>
           </FlexItem>
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 9597407b3..c0fdd6023 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
@@ -117,6 +117,10 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
     [provider],
   );
 
+  const onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
       <FormGroupWithHelpText
@@ -172,11 +176,7 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
             bodyContent={vddkHelperTextPopover}
             alertSeverityVariant="info"
           >
-            <button
-              type="button"
-              onClick={(e) => e.preventDefault()}
-              className="pf-c-form__group-label-help"
-            >
+            <button type="button" onClick={onClick} className="pf-c-form__group-label-help">
               <HelpIcon />
             </button>
           </Popover>
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 ac01cc88b..4b1957b2a 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
@@ -117,6 +117,10 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
     [provider],
   );
 
+  const onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
       <FormGroupWithHelpText
@@ -172,11 +176,7 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
             bodyContent={vddkHelperTextPopover}
             alertSeverityVariant="info"
           >
-            <button
-              type="button"
-              onClick={(e) => e.preventDefault()}
-              className="pf-c-form__group-label-help"
-            >
+            <button type="button" onClick={onClick} className="pf-c-form__group-label-help">
               <HelpIcon />
             </button>
           </Popover>
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 f01138977..825e76b4a 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
@@ -93,6 +93,16 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
     dispatch({ type: 'TOGGLE_PASSWORD_HIDDEN' });
   };
 
+  const onClickEventPreventDef: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (
+    event,
+  ) => {
+    event.preventDefault();
+  };
+
+  const onClickTogglePassword = () => {
+    togglePasswordHidden();
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -132,7 +142,7 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
         />
         <Button
           variant="control"
-          onClick={togglePasswordHidden}
+          onClick={onClickTogglePassword}
           aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
@@ -151,7 +161,7 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
           >
             <button
               type="button"
-              onClick={(e) => e.preventDefault()}
+              onClick={onClickEventPreventDef}
               className="pf-c-form__group-label-help"
             >
               <HelpIcon />
@@ -183,7 +193,7 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
           >
             <button
               type="button"
-              onClick={(e) => e.preventDefault()}
+              onClick={onClickEventPreventDef}
               className="pf-c-form__group-label-help"
             >
               <HelpIcon />
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 082860129..ae45dd055 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
@@ -93,6 +93,16 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
     dispatch({ type: 'TOGGLE_PASSWORD_HIDDEN' });
   }
 
+  const onClickEventPreventDef: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (
+    event,
+  ) => {
+    event.preventDefault();
+  };
+
+  const onClickTogglePassword = () => {
+    togglePasswordHidden();
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -114,7 +124,7 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
         />
         <Button
           variant="control"
-          onClick={() => togglePasswordHidden()}
+          onClick={onClickTogglePassword}
           aria-label={state.passwordHidden ? 'Show token' : 'Hide token'}
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
@@ -133,7 +143,7 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           >
             <button
               type="button"
-              onClick={(e) => e.preventDefault()}
+              onClick={onClickEventPreventDef}
               className="pf-c-form__group-label-help"
             >
               <HelpIcon />
@@ -165,7 +175,7 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           >
             <button
               type="button"
-              onClick={(e) => e.preventDefault()}
+              onClick={onClickEventPreventDef}
               className="pf-c-form__group-label-help"
             >
               <HelpIcon />
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 4e0f0f132..f615c1760 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
@@ -160,6 +160,10 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
     [secret],
   );
 
+  const onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -235,11 +239,7 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
             bodyContent={<div>{insecureSkipVerifyHelperTextPopover}</div>}
             alertSeverityVariant="info"
           >
-            <button
-              type="button"
-              onClick={(e) => e.preventDefault()}
-              className="pf-c-form__group-label-help"
-            >
+            <button type="button" onClick={onClick} className="pf-c-form__group-label-help">
               <HelpIcon />
             </button>
           </Popover>
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 4c1994e3d..d60e209f7 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
@@ -99,6 +99,16 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
     dispatch({ type: 'TOGGLE_PASSWORD_HIDDEN' });
   };
 
+  const onClickEventPreventDef: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (
+    event,
+  ) => {
+    event.preventDefault();
+  };
+
+  const onClickTogglePassword = () => {
+    togglePasswordHidden();
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -138,7 +148,7 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
         />
         <Button
           variant="control"
-          onClick={() => togglePasswordHidden()}
+          onClick={onClickTogglePassword}
           aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
@@ -157,7 +167,7 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
           >
             <button
               type="button"
-              onClick={(e) => e.preventDefault()}
+              onClick={onClickEventPreventDef}
               className="pf-c-form__group-label-help"
             >
               <HelpIcon />
@@ -189,7 +199,7 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
           >
             <button
               type="button"
-              onClick={(e) => e.preventDefault()}
+              onClick={onClickEventPreventDef}
               className="pf-c-form__group-label-help"
             >
               <HelpIcon />
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 9980a9c2f..f663fddf4 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
@@ -93,6 +93,10 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
     dispatch({ type: 'TOGGLE_PASSWORD_HIDDEN' });
   };
 
+  const onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
       <FormGroupWithHelpText
@@ -149,11 +153,7 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
             bodyContent={insecureSkipVerifyHelperTextPopover}
             alertSeverityVariant="info"
           >
-            <button
-              type="button"
-              onClick={(e) => e.preventDefault()}
-              className="pf-c-form__group-label-help"
-            >
+            <button type="button" onClick={onClick} className="pf-c-form__group-label-help">
               <HelpIcon />
             </button>
           </Popover>
@@ -181,11 +181,7 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
             bodyContent={cacertHelperTextPopover}
             alertSeverityVariant="info"
           >
-            <button
-              type="button"
-              onClick={(e) => e.preventDefault()}
-              className="pf-c-form__group-label-help"
-            >
+            <button type="button" onClick={onClick} className="pf-c-form__group-label-help">
               <HelpIcon />
             </button>
           </Popover>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/SelectNetworkButton.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/SelectNetworkButton.tsx
index faefe810d..7bafc1a1f 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/SelectNetworkButton.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/components/SelectNetworkButton.tsx
@@ -33,18 +33,13 @@ export const SelectNetworkButton: FC<{
 }> = ({ selectedIds, provider, hostsData }) => {
   const { t } = useForkliftTranslation();
   const { showModal } = useModal();
+  const onClick = () => {
+    showModal(<VSphereNetworkModal provider={provider} data={hostsData} selected={selectedIds} />);
+  };
 
   return (
     <ToolbarItem>
-      <Button
-        variant="secondary"
-        onClick={() =>
-          showModal(
-            <VSphereNetworkModal provider={provider} data={hostsData} selected={selectedIds} />,
-          )
-        }
-        isDisabled={!selectedIds?.length}
-      >
+      <Button variant="secondary" onClick={onClick} isDisabled={!selectedIds?.length}>
         {t('Select migration network')}
       </Button>
     </ToolbarItem>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Networks/ProviderNetworks.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Networks/ProviderNetworks.tsx
index 410263507..aa4b1d00c 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Networks/ProviderNetworks.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Networks/ProviderNetworks.tsx
@@ -49,6 +49,9 @@ const ProviderNetworks_: React.FC<ProviderNetworksProps> = ({ obj }) => {
     isDefault: `${net.namespace}/${net.name}` === defaultNetwork,
     config: JSON.parse(net?.object?.spec?.config || '{}') as CnoConfig,
   }));
+  const onClick = () => {
+    showModal(<EditProviderDefaultTransferNetwork resource={provider} />);
+  };
 
   return (
     <div>
@@ -57,11 +60,7 @@ const ProviderNetworks_: React.FC<ProviderNetworksProps> = ({ obj }) => {
 
         {permissions.canPatch && (
           <div className="forklift-page-provider-networks-button">
-            <Button
-              key="editTransferNetwork"
-              variant="secondary"
-              onClick={() => showModal(<EditProviderDefaultTransferNetwork resource={provider} />)}
-            >
+            <Button key="editTransferNetwork" variant="secondary" onClick={onClick}>
               {t('Set default transfer network')}
             </Button>
           </div>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/MigrationAction.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/MigrationAction.tsx
index ed01d5ff1..b8e220492 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/MigrationAction.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/MigrationAction.tsx
@@ -23,16 +23,14 @@ export const MigrationAction: FC<{
     namespaced: namespace !== undefined,
   });
   const { setData } = useCreateVmMigrationData();
+  const onClick = () => {
+    setData({ selectedVms, provider });
+    history.push(`${planListURL}/~new`);
+  };
+
   return (
     <ToolbarItem className={className}>
-      <Button
-        variant="primary"
-        onClick={() => {
-          setData({ selectedVms, provider });
-          history.push(`${planListURL}/~new`);
-        }}
-        isDisabled={!selectedVms?.length}
-      >
+      <Button variant="primary" onClick={onClick} isDisabled={!selectedVms?.length}>
         {t('Create migration plan')}
       </Button>
     </ToolbarItem>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/list/components/ProvidersAddButton.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/list/components/ProvidersAddButton.tsx
index abad92dca..d54127560 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/list/components/ProvidersAddButton.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/list/components/ProvidersAddButton.tsx
@@ -19,12 +19,12 @@ export const ProvidersAddButton: React.FC<{ namespace: string; dataTestId?: stri
     namespaced: namespace !== undefined,
   });
 
+  const onClick = () => {
+    history.push(`${providersListURL}/~new`);
+  };
+
   return (
-    <Button
-      data-testid={dataTestId}
-      variant="primary"
-      onClick={() => history.push(`${providersListURL}/~new`)}
-    >
+    <Button data-testid={dataTestId} variant="primary" onClick={onClick}>
       {t('Create Provider')}
     </Button>
   );
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
index ccbe4c255..d8461b872 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
@@ -52,6 +52,10 @@ export const MappingListItem: FC<MappingListItemProps> = ({
   const { t } = useForkliftTranslation();
   const [isSrcOpen, setToggleSrcOpen] = useToggle(false);
   const [isTrgOpen, setToggleTrgOpen] = useToggle(false);
+  const onClick = () => {
+    deleteMapping({ source, destination });
+  };
+
   return (
     <DataListItem aria-labelledby="">
       <DataListItemRow>
@@ -114,7 +118,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
           aria-labelledby=""
         >
           <Button
-            onClick={() => deleteMapping({ source, destination })}
+            onClick={onClick}
             variant="plain"
             aria-label={t('Delete mapping')}
             key="delete-action"
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx
index 8b5c2844b..2a12e9399 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx
@@ -21,15 +21,15 @@ export const StorageMapActionsDropdownItems = ({ data }: StorageMapActionsDropdo
     namespace: StorageMap?.metadata?.namespace,
   });
 
+  const onClick = () => {
+    showModal(<DeleteModal resource={StorageMap} model={StorageMapModel} />);
+  };
+
   return [
     <DropdownItemLink key="EditStorageMapping" href={StorageMapURL}>
       {t('Edit StorageMap')}
     </DropdownItemLink>,
-    <DropdownItem
-      key="delete"
-      isDisabled={!data?.permissions?.canDelete}
-      onClick={() => showModal(<DeleteModal resource={StorageMap} model={StorageMapModel} />)}
-    >
+    <DropdownItem key="delete" isDisabled={!data?.permissions?.canDelete} onClick={onClick}>
       {t('Delete StorageMap')}
     </DropdownItem>,
   ];
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/componenets/StorageMapsAddButton.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/componenets/StorageMapsAddButton.tsx
index 20f77c3a7..5fff30164 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/componenets/StorageMapsAddButton.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/componenets/StorageMapsAddButton.tsx
@@ -19,12 +19,12 @@ export const StorageMapsAddButton: React.FC<{ namespace: string; dataTestId?: st
     namespaced: namespace !== undefined,
   });
 
+  const onClick = () => {
+    history.push(`${StorageMapsListURL}/~new`);
+  };
+
   return (
-    <Button
-      data-testid={dataTestId}
-      variant="primary"
-      onClick={() => history.push(`${StorageMapsListURL}/~new`)}
-    >
+    <Button data-testid={dataTestId} variant="primary" onClick={onClick}>
       {t('Create StorageMap')}
     </Button>
   );
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/MapsSection.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/MapsSection.tsx
index 40e446db8..f54ace5ed 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/MapsSection.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/MapsSection.tsx
@@ -145,6 +145,10 @@ export const MapsSection: React.FC<MapsSectionProps> = ({ obj }) => {
     });
   };
 
+  const onClick = () => {
+    dispatch({ type: 'INIT', payload: obj });
+  };
+
   return (
     <Suspend obj={providers} loaded={providersLoaded} loadError={providersLoadError}>
       <Flex className="forklift-network-map__details-tab--update-button">
@@ -162,7 +166,7 @@ export const MapsSection: React.FC<MapsSectionProps> = ({ obj }) => {
         <FlexItem>
           <Button
             variant="secondary"
-            onClick={() => dispatch({ type: 'INIT', payload: obj })}
+            onClick={onClick}
             isDisabled={!state.hasChanges || state.updating}
           >
             {t('Cancel')}
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/ProvidersSection.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/ProvidersSection.tsx
index 5634fbb71..24e6f453a 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/ProvidersSection.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/ProvidersSection.tsx
@@ -45,6 +45,10 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
     await k8sUpdate({ model: StorageMapModel, data: state.StorageMap });
   };
 
+  const onClick = () => {
+    dispatch({ type: 'INIT', payload: obj });
+  };
+
   return (
     <Suspend obj={providers} loaded={providersLoaded} loadError={providersLoadError}>
       <Flex className="forklift-network-map__details-tab--update-button">
@@ -62,7 +66,7 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
         <FlexItem>
           <Button
             variant="secondary"
-            onClick={() => dispatch({ type: 'INIT', payload: obj })}
+            onClick={onClick}
             isDisabled={!state.hasChanges || state.updating}
           >
             {t('Cancel')}