Migrate UninstallOperatorModal to React Router v6 and hook pattern

  Create useUninstallOperatorModal hook, replace history.push with useNavigate, and update all consumers to use
  new hook pattern.

  Assisted by: Claude Code

Author: sg00dwin

frontend/packages/operator-lifecycle-manager/src/actions/hooks/useSubscriptionActions.ts

@@ -3,12 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { CommonActionCreator } from '@console/app/src/actions/hooks/types';
 import { useCommonActions } from '@console/app/src/actions/hooks/useCommonActions';
 import { Action } from '@console/dynamic-plugin-sdk';
-import { useOverlay } from '@console/dynamic-plugin-sdk/src/lib-core';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
 import { asAccessReview } from '@console/internal/components/utils';
-import { referenceFor, k8sKill, k8sGet, k8sPatch } from '@console/internal/module/k8s';
+import { referenceFor } from '@console/internal/module/k8s';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
-import { LazyUninstallOperatorModalOverlay } from '../../components/modals';
+import { useUninstallOperatorModal } from '../../components/modals/uninstall-operator-modal';
 import { ClusterServiceVersionModel } from '../../models';
 import { SubscriptionKind } from '../../types';
 import { SubscriptionActionCreator } from './types';
@@ -32,23 +31,18 @@ export const useSubscriptionActions = (
   const { t } = useTranslation();
   const [model] = useK8sModel(referenceFor(obj));
   const [commonActions] = useCommonActions(model, obj, [CommonActionCreator.Edit]);
-  const launchModal = useOverlay();
 
   const memoizedFilterActions = useDeepCompareMemoize(filterActions);
   const installedCSV = obj.status?.installedCSV;
 
+  const uninstallOperatorModal = useUninstallOperatorModal(obj);
+
   const factory = useMemo(
     () => ({
       [SubscriptionActionCreator.RemoveSubscription]: () => ({
         id: 'remove-subscription',
         label: t('olm~Remove Subscription'),
-        cta: () =>
-          launchModal(LazyUninstallOperatorModalOverlay, {
-            k8sKill,
-            k8sGet,
-            k8sPatch,
-            subscription: obj,
-          }),
+        cta: () => uninstallOperatorModal(),
         accessReview: asAccessReview(model, obj, 'delete'),
       }),
       [SubscriptionActionCreator.ViewClusterServiceVersion]: () => {
@@ -61,7 +55,7 @@ export const useSubscriptionActions = (
         };
       },
     }),
-    [installedCSV, model, obj, t, launchModal],
+    [installedCSV, model, obj, t, uninstallOperatorModal],
   );
 
   // filter and initialize requested actions or construct list of all SubscriptionActions

frontend/packages/operator-lifecycle-manager/src/actions/useOperatorActions.ts

@@ -4,18 +4,19 @@ import { useTranslation } from 'react-i18next';
 import { K8S_VERB_DELETE } from '@console/dynamic-plugin-sdk/src/api/constants';
 import { Action } from '@console/dynamic-plugin-sdk/src/extensions/actions';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/lib-core';
-import { k8sKill, k8sGet, k8sPatch } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource';
 import { DeleteOverlay } from '@console/internal/components/modals/delete-modal';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
 import { referenceFor } from '@console/internal/module/k8s';
-import { LazyUninstallOperatorModalOverlay } from '../components/modals';
+import { useUninstallOperatorModal } from '../components/modals/uninstall-operator-modal';
 import { ClusterServiceVersionModel, SubscriptionModel } from '../models';
 
 const useOperatorActions = ({ resource, subscription }): [Action[], boolean, any] => {
   const { t } = useTranslation();
   const launchModal = useOverlay();
 
+  const uninstallOperatorModal = useUninstallOperatorModal(subscription, resource);
+
   const actions = useMemo(() => {
     if (!resource) {
       return [];
@@ -47,18 +48,11 @@ const useOperatorActions = ({ resource, subscription }): [Action[], boolean, any
       {
         id: 'uninstall-operator',
         label: t('olm~Uninstall Operator'),
-        cta: () =>
-          launchModal(LazyUninstallOperatorModalOverlay, {
-            k8sKill,
-            k8sGet,
-            k8sPatch,
-            subscription,
-            csv: resource,
-          }),
+        cta: () => uninstallOperatorModal(),
         accessReview: asAccessReview(SubscriptionModel, subscription, K8S_VERB_DELETE),
       },
     ];
-  }, [resource, subscription, t, launchModal]);
+  }, [resource, subscription, t, launchModal, uninstallOperatorModal]);
   return [actions, true, null];
 };
 

frontend/packages/operator-lifecycle-manager/src/components/modals/__tests__/uninstall-operator-modal.spec.tsx

@@ -29,24 +29,31 @@ jest.mock('react-i18next', () => ({
   Trans: () => null,
 }));
 
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useNavigate: () => mockNavigate,
+}));
+
+const mockK8sKill = jest.fn();
+
 jest.mock('@console/dynamic-plugin-sdk/src/utils/k8s', () => ({
   k8sGetResource: jest.fn(),
+  k8sKill: (...args) => mockK8sKill(...args),
 }));
 
 describe(UninstallOperatorModal.name, () => {
   let uninstallOperatorModalProps: UninstallOperatorModalProps;
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockK8sKill.mockResolvedValue({});
 
     uninstallOperatorModalProps = {
       subscription: {
         ..._.cloneDeep(testSubscription),
         status: { installedCSV: 'testapp.v1.0.0' },
       },
-      k8sKill: jest.fn().mockResolvedValue({}),
-      k8sGet: jest.fn().mockResolvedValue({}),
-      k8sPatch: jest.fn().mockResolvedValue({}),
       close: jest.fn(),
       cancel: jest.fn(),
     };
@@ -69,13 +76,14 @@ describe(UninstallOperatorModal.name, () => {
     fireEvent.submit(screen.getByRole('form'));
 
     await waitFor(() => {
-      expect(uninstallOperatorModalProps.k8sKill).toHaveBeenCalledTimes(2);
+      expect(mockK8sKill).toHaveBeenCalledTimes(2);
     });
 
-    expect(uninstallOperatorModalProps.k8sKill).toHaveBeenCalledWith(
+    expect(mockK8sKill).toHaveBeenCalledWith(
       SubscriptionModel,
       uninstallOperatorModalProps.subscription,
       {},
+      {},
       expect.objectContaining({
         kind: 'DeleteOptions',
         apiVersion: 'v1',
@@ -90,10 +98,10 @@ describe(UninstallOperatorModal.name, () => {
     fireEvent.submit(screen.getByRole('form'));
 
     await waitFor(() => {
-      expect(uninstallOperatorModalProps.k8sKill).toHaveBeenCalledTimes(2);
+      expect(mockK8sKill).toHaveBeenCalledTimes(2);
     });
 
-    expect(uninstallOperatorModalProps.k8sKill).toHaveBeenCalledWith(
+    expect(mockK8sKill).toHaveBeenCalledWith(
       ClusterServiceVersionModel,
       expect.objectContaining({
         metadata: expect.objectContaining({
@@ -102,6 +110,7 @@ describe(UninstallOperatorModal.name, () => {
         }),
       }),
       {},
+      {},
       expect.objectContaining({
         kind: 'DeleteOptions',
         apiVersion: 'v1',
@@ -118,7 +127,7 @@ describe(UninstallOperatorModal.name, () => {
     fireEvent.submit(screen.getByRole('form'));
 
     await waitFor(() => {
-      expect(uninstallOperatorModalProps.k8sKill).toHaveBeenCalledTimes(1);
+      expect(mockK8sKill).toHaveBeenCalledTimes(1);
     });
   });
 

frontend/packages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.tsx

@@ -4,7 +4,9 @@ import { useState, useEffect, useCallback } from 'react';
 import { Alert, Progress, ProgressSize, Title } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { k8sGetResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { settleAllPromises } from '@console/dynamic-plugin-sdk/src/utils/promise';
 import { getActiveNamespace } from '@console/internal/actions/ui';
@@ -18,7 +20,6 @@ import {
   ModalComponentProps,
 } from '@console/internal/components/factory/modal';
 import {
-  history,
   LinkifyExternal,
   ResourceLink,
   resourceListPathFromModel,
@@ -28,9 +29,9 @@ import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watc
 import { useAccessReview } from '@console/internal/components/utils/rbac';
 import { ConsoleOperatorConfigModel } from '@console/internal/models';
 import {
-  K8sKind,
   K8sResourceCommon,
   K8sResourceKind,
+  k8sKill,
   modelFor,
   referenceFor,
   k8sPatch,
@@ -59,12 +60,10 @@ export const UninstallOperatorModal: FC<UninstallOperatorModalProps> = ({
   cancel,
   close,
   csv,
-  k8sKill,
-  k8sGet: _k8sGet, // eslint-disable-line @typescript-eslint/no-unused-vars
-  k8sPatch: _k8sPatch, // eslint-disable-line @typescript-eslint/no-unused-vars
   subscription,
 }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [
     handleOperatorUninstallPromise,
     operatorUninstallInProgress,
@@ -151,7 +150,7 @@ export const UninstallOperatorModal: FC<UninstallOperatorModalProps> = ({
     };
 
     const operatorUninstallPromises = [
-      k8sKill(SubscriptionModel, subscription, {}, deleteOptions),
+      k8sKill(SubscriptionModel, subscription, {}, {}, deleteOptions),
       ...(subscription?.status?.installedCSV && (await clusterServiceVersionExists())
         ? [
             k8sKill(
@@ -163,6 +162,7 @@ export const UninstallOperatorModal: FC<UninstallOperatorModalProps> = ({
                 },
               },
               {},
+              {},
               deleteOptions,
             ),
           ]
@@ -183,7 +183,6 @@ export const UninstallOperatorModal: FC<UninstallOperatorModalProps> = ({
     consoleOperatorConfig,
     enabledPlugins,
     handleOperatorUninstallPromise,
-    k8sKill,
     removePlugins,
     subscription,
   ]);
@@ -229,9 +228,9 @@ export const UninstallOperatorModal: FC<UninstallOperatorModalProps> = ({
       window.location.pathname.split('/').includes(subscription.metadata.name) ||
       window.location.pathname.split('/').includes(subscription?.status?.installedCSV)
     ) {
-      history.push(resourceListPathFromModel(ClusterServiceVersionModel, getActiveNamespace()));
+      navigate(resourceListPathFromModel(ClusterServiceVersionModel, getActiveNamespace()));
     }
-  }, [close, subscription]);
+  }, [close, subscription, navigate]);
 
   useEffect(() => {
     if (isSubmitFinished && !hasSubmitErrors) {
@@ -264,7 +263,7 @@ export const UninstallOperatorModal: FC<UninstallOperatorModalProps> = ({
       setOperandsRemaining(operands.length);
       const operandDeletionPromises = operands.map((operand: K8sResourceCommon) => {
         const model = modelFor(referenceFor(operand));
-        return k8sKill(model, operand, {}, deleteOptions);
+        return k8sKill(model, operand, {}, {}, deleteOptions);
       });
       // eslint-disable-next-line promise/catch-or-return
       settleAllPromises(operandDeletionPromises).then(([, , results]) => {
@@ -647,14 +646,19 @@ export const UninstallOperatorModalOverlay: OverlayComponent<UninstallOperatorMo
   );
 };
 
+export const useUninstallOperatorModal = (subscription: K8sResourceKind, csv?: K8sResourceKind) => {
+  const launchModal = useOverlay();
+  return useCallback(
+    () =>
+      launchModal<UninstallOperatorModalProps>(UninstallOperatorModalOverlay, {
+        subscription,
+        csv,
+      }),
+    [launchModal, subscription, csv],
+  );
+};
+
 export type UninstallOperatorModalProps = {
-  k8sKill: (kind: K8sKind, resource: K8sResourceKind, options: any, json: any) => Promise<any>;
-  k8sGet: (kind: K8sKind, name: string, namespace: string) => Promise<K8sResourceKind>;
-  k8sPatch: (
-    kind: K8sKind,
-    resource: K8sResourceKind,
-    data: { op: string; path: string; value: any }[],
-  ) => Promise<any>;
   subscription: K8sResourceKind;
   csv?: K8sResourceKind;
   blocking?: boolean;

frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx

@@ -47,9 +47,6 @@ import {
 } from '@console/internal/components/utils';
 import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import {
-  k8sKill,
-  k8sGet,
-  k8sPatch,
   K8sKind,
   K8sModel,
   K8sResourceCommon,
@@ -98,11 +95,8 @@ import {
   DeprecatedOperatorWarningIcon,
   findDeprecatedOperator,
 } from './deprecated-operator-warnings/deprecated-operator-warnings';
-import {
-  LazyInstallPlanApprovalModalOverlay,
-  LazySubscriptionChannelModalOverlay,
-  LazyUninstallOperatorModalOverlay,
-} from './modals';
+import { LazyInstallPlanApprovalModalOverlay, LazySubscriptionChannelModalOverlay } from './modals';
+import { useUninstallOperatorModal } from './modals/uninstall-operator-modal';
 import { requireOperatorGroup } from './operator-group';
 import { getManualSubscriptionsInNamespace, NamespaceIncludesManualApproval } from './index';
 
@@ -424,7 +418,7 @@ export const SubscriptionDetails: FC<SubscriptionDetailsProps> = ({
 }) => {
   const { t } = useTranslation();
   const { removeQueryArgument } = useQueryParamsMutator();
-  const launchModal = useOverlay();
+  const uninstallOperatorModal = useUninstallOperatorModal(obj);
   const { source, sourceNamespace } = obj?.spec ?? {};
   const catalogHealth = obj?.status?.catalogHealth?.find(
     (ch) => ch.catalogSourceRef.name === source,
@@ -435,15 +429,10 @@ export const SubscriptionDetails: FC<SubscriptionDetailsProps> = ({
 
   useEffect(() => {
     if (new URLSearchParams(window.location.search).has('showDelete')) {
-      launchModal(LazyUninstallOperatorModalOverlay, {
-        k8sKill,
-        k8sGet,
-        k8sPatch,
-        subscription: obj,
-      });
+      uninstallOperatorModal();
       removeQueryArgument('showDelete');
     }
-  }, [launchModal, obj, removeQueryArgument]);
+  }, [uninstallOperatorModal, removeQueryArgument]);
 
   const { deprecatedPackage, deprecatedChannel, deprecatedVersion } = findDeprecatedOperator(obj);