CONSOLE-5049: Migrate OLM modals to overlay pattern

frontend/packages/console-app/src/actions/hooks/useCommonActions.ts

@@ -7,13 +7,13 @@ import {
   LazyAnnotationsModalOverlay,
   LazyDeleteModalOverlay,
   LazyLabelsModalOverlay,
-  taintsModal,
   tolerationsModal,
 } from '@console/internal/components/modals';
 import { useConfigureCountModal } from '@console/internal/components/modals/configure-count-modal';
+import { TaintsModalOverlay } from '@console/internal/components/modals/taints-modal';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
-import { referenceFor, K8sModel, K8sResourceKind } from '@console/internal/module/k8s';
+import { referenceFor, K8sModel, K8sResourceKind, NodeKind } from '@console/internal/module/k8s';
 import { CommonActionCreator, ActionObject } from './types';
 
 /**
@@ -141,9 +141,9 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         id: 'edit-taints',
         label: t('console-app~Edit taints'),
         cta: () =>
-          taintsModal({
+          launchModal(TaintsModalOverlay, {
             resourceKind: kind,
-            resource,
+            resource: resource as NodeKind,
           }),
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
@@ -159,9 +159,12 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
     }),
-    // Excluding stable modal launcher functions (tolerationsModal, taintsModal)
-    // to prevent unnecessary re-renders
-    // TODO: remove once all Modals have been updated to useOverlay
+    // Excluding legacy modal launcher functions (labelsModalLauncher, annotationsModalLauncher,
+    // podSelectorModal, tolerationsModal) from dependencies because:
+    // 1. These are created by createModalLauncher() and are referentially stable
+    // 2. They don't change between renders, so excluding them prevents unnecessary re-renders
+    // 3. Once these modals are migrated to useOverlay, they'll use launchModal instead
+    // TODO: Remove this eslint-disable once all modals have been migrated to useOverlay pattern
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [kind, resource, t, message, actualEditPath, launchModal],
   );

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

@@ -5,7 +5,7 @@ import { useCommonActions } from '@console/app/src/actions/hooks/useCommonAction
 import { Action } from '@console/dynamic-plugin-sdk';
 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 { useUninstallOperatorModal } from '../../components/modals/uninstall-operator-modal';
 import { ClusterServiceVersionModel } from '../../models';
@@ -31,16 +31,12 @@ export const useSubscriptionActions = (
   const { t } = useTranslation();
   const [model] = useK8sModel(referenceFor(obj));
   const [commonActions] = useCommonActions(model, obj, [CommonActionCreator.Edit]);
-  const uninstallOperatorModal = useUninstallOperatorModal({
-    k8sKill,
-    k8sGet,
-    k8sPatch,
-    subscription: obj,
-  });
 
   const memoizedFilterActions = useDeepCompareMemoize(filterActions);
   const installedCSV = obj.status?.installedCSV;
 
+  const uninstallOperatorModal = useUninstallOperatorModal(obj);
+
   const factory = useMemo(
     () => ({
       [SubscriptionActionCreator.RemoveSubscription]: () => ({
@@ -59,8 +55,7 @@ export const useSubscriptionActions = (
         };
       },
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [installedCSV, model, obj, t],
+    [installedCSV, model, obj, t, uninstallOperatorModal],
   );
 
   // filter and initialize requested actions or construct list of all SubscriptionActions

frontend/packages/operator-lifecycle-manager/src/actions/providers/catalog-source-provider.ts

@@ -4,10 +4,11 @@ import { CommonActionCreator } from '@console/app/src/actions/hooks/types';
 import { useCommonActions } from '@console/app/src/actions/hooks/useCommonActions';
 import { useCommonResourceActions } from '@console/app/src/actions/hooks/useCommonResourceActions';
 import { Action } from '@console/dynamic-plugin-sdk/src';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { referenceFor } from '@console/internal/module/k8s';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
-import { disableDefaultSourceModal } from '../../components/modals/disable-default-source-modal';
+import { LazyDisableDefaultSourceModalOverlay } from '../../components/modals';
 import { OperatorHubKind } from '../../components/operator-hub';
 import { DEFAULT_SOURCE_NAMESPACE } from '../../const';
 import { OperatorHubModel } from '../../models';
@@ -16,16 +17,22 @@ import useOperatorHubConfig from '../../utils/useOperatorHubConfig';
 
 const useDisableSourceAction = (operatorHub: OperatorHubKind, sourceName: string): Action[] => {
   const { t } = useTranslation();
+  const launchModal = useOverlay();
   const factory = useMemo(
     () => ({
       disableSource: () => ({
         id: 'disable-source',
         label: t('olm~Disable'),
-        cta: () => disableDefaultSourceModal({ kind: OperatorHubModel, operatorHub, sourceName }),
+        cta: () =>
+          launchModal(LazyDisableDefaultSourceModalOverlay, {
+            kind: OperatorHubModel,
+            operatorHub,
+            sourceName,
+          }),
         accessReview: asAccessReview(OperatorHubModel, operatorHub, 'patch'),
       }),
     }),
-    [t, operatorHub, sourceName],
+    [t, operatorHub, sourceName, launchModal],
   );
   const action = useMemo(() => [factory.disableSource()], [factory]);
   return action;

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 { k8sGet, k8sKill, k8sPatch } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource';
 import { DeleteModalOverlay } 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 { UninstallOperatorOverlay } from '../components/modals/uninstall-operator-modal';
+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,19 +48,11 @@ const useOperatorActions = ({ resource, subscription }): [Action[], boolean, any
       {
         id: 'uninstall-operator',
         label: t('olm~Uninstall Operator'),
-        cta: () =>
-          launchModal(UninstallOperatorOverlay, {
-            k8sKill,
-            k8sGet,
-            k8sPatch,
-            subscription,
-            csv: resource,
-            blocking: true,
-          }),
+        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/descriptors/spec/__tests__/resource-requirements.spec.tsx

@@ -1,7 +1,5 @@
 import { screen, waitFor, fireEvent } from '@testing-library/react';
-import { Map as ImmutableMap } from 'immutable';
 import * as k8sResourceModule from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource';
-import * as modal from '@console/internal/components/factory/modal';
 import { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
 import { renderWithProviders } from '@console/shared/src/test-utils/unit-test-utils';
 import { testResourceInstance, testModel } from '../../../../../mocks';
@@ -11,18 +9,23 @@ import {
   ResourceRequirementsModalLink,
 } from '../resource-requirements';
 
+const useK8sModelMock = jest.fn();
+const useOverlayMock = jest.fn();
+
 jest.mock('@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource', () => ({
   ...jest.requireActual('@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource'),
   k8sUpdate: jest.fn(),
 }));
 
-jest.mock('@console/internal/components/factory/modal', () => ({
-  ...jest.requireActual('@console/internal/components/factory/modal'),
-  createModalLauncher: jest.fn(),
+jest.mock('@console/shared/src/hooks/useK8sModel', () => ({
+  useK8sModel: (...args) => useK8sModelMock(...args),
+}));
+
+jest.mock('@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay', () => ({
+  useOverlay: (...args) => useOverlayMock(...args),
 }));
 
 const k8sUpdateMock = k8sResourceModule.k8sUpdate as jest.Mock;
-const createModalLauncherMock = modal.createModalLauncher as jest.Mock;
 
 describe('ResourceRequirementsModal', () => {
   const title = 'TestResource Resource Requests';
@@ -94,6 +97,7 @@ describe('ResourceRequirementsModal', () => {
 
 describe('ResourceRequirementsModalLink', () => {
   let obj: K8sResourceKind;
+  let launchModalMock: jest.Mock;
 
   beforeEach(() => {
     obj = {
@@ -106,23 +110,17 @@ describe('ResourceRequirementsModalLink', () => {
         },
       },
     };
+
+    launchModalMock = jest.fn();
+    useK8sModelMock.mockReturnValue([testModel, false]);
+    useOverlayMock.mockReturnValue(launchModalMock);
+
     jest.clearAllMocks();
   });
 
   it('should render button link with resource requests', () => {
     renderWithProviders(
       <ResourceRequirementsModalLink obj={obj} type="requests" path="resources" />,
-      {
-        initialState: {
-          k8s: ImmutableMap({
-            RESOURCES: ImmutableMap({
-              models: ImmutableMap({
-                'testapp.coreos.com~v1alpha1~TestResource': testModel,
-              }),
-            }),
-          }),
-        },
-      },
     );
 
     const { memory, cpu, 'ephemeral-storage': storage } = obj.spec.resources.requests;
@@ -132,20 +130,7 @@ describe('ResourceRequirementsModalLink', () => {
   });
 
   it('should render button link with resource limits', () => {
-    renderWithProviders(
-      <ResourceRequirementsModalLink obj={obj} type="limits" path="resources" />,
-      {
-        initialState: {
-          k8s: ImmutableMap({
-            RESOURCES: ImmutableMap({
-              models: ImmutableMap({
-                'testapp.coreos.com~v1alpha1~TestResource': testModel,
-              }),
-            }),
-          }),
-        },
-      },
-    );
+    renderWithProviders(<ResourceRequirementsModalLink obj={obj} type="limits" path="resources" />);
 
     const { memory, cpu, 'ephemeral-storage': storage } = obj.spec.resources.limits;
     expect(
@@ -165,17 +150,6 @@ describe('ResourceRequirementsModalLink', () => {
     };
     renderWithProviders(
       <ResourceRequirementsModalLink obj={objWithoutResources} type="limits" path="resources" />,
-      {
-        initialState: {
-          k8s: ImmutableMap({
-            RESOURCES: ImmutableMap({
-              models: ImmutableMap({
-                'testapp.coreos.com~v1alpha1~TestResource': testModel,
-              }),
-            }),
-          }),
-        },
-      },
     );
 
     expect(
@@ -186,38 +160,22 @@ describe('ResourceRequirementsModalLink', () => {
   });
 
   it('should open resource requirements modal when button is clicked', async () => {
-    const modalSpy = jest.fn();
-    createModalLauncherMock.mockReturnValue(modalSpy);
-
-    renderWithProviders(
-      <ResourceRequirementsModalLink obj={obj} type="limits" path="resources" />,
-      {
-        initialState: {
-          k8s: ImmutableMap({
-            RESOURCES: ImmutableMap({
-              models: ImmutableMap({
-                'testapp.coreos.com~v1alpha1~TestResource': testModel,
-              }),
-            }),
-          }),
-        },
-      },
-    );
+    renderWithProviders(<ResourceRequirementsModalLink obj={obj} type="limits" path="resources" />);
 
     fireEvent.click(screen.getByRole('button'));
 
     await waitFor(() => {
-      expect(modalSpy).toHaveBeenCalled();
+      expect(launchModalMock).toHaveBeenCalled();
     });
 
-    const modalArgs = modalSpy.mock.calls[0][0];
-    expect(modalArgs.title).toEqual(`${obj.kind} Resource Limits`);
-    expect(modalArgs.description).toEqual(
+    const [, modalProps] = launchModalMock.mock.calls[0];
+    expect(modalProps.title).toEqual(`${obj.kind} Resource Limits`);
+    expect(modalProps.description).toEqual(
       'Define the resource limits for this TestResource instance.',
     );
-    expect(modalArgs.obj).toEqual(obj);
-    expect(modalArgs.model).toEqual(testModel);
-    expect(modalArgs.type).toEqual('limits');
-    expect(modalArgs.path).toEqual('resources');
+    expect(modalProps.obj).toEqual(obj);
+    expect(modalProps.model).toEqual(testModel);
+    expect(modalProps.type).toEqual('limits');
+    expect(modalProps.path).toEqual('resources');
   });
 });

frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/configure-update-strategy.tsx

@@ -1,22 +1,28 @@
+import { useCallback } from 'react';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import i18n from '@console/internal/i18n';
 import { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
-import { updateStrategyModal } from '../../modals/update-strategy-modal';
+import { LazyUpdateStrategyModalOverlay } from '../../modals';
 import { Descriptor } from '../types';
 import { getPatchPathFromDescriptor } from '../utils';
 
-export const configureUpdateStrategyModal = ({
+export const useConfigureUpdateStrategyModal = ({
   kindObj,
   resource,
   specDescriptor,
   specValue,
 }: ConfigureUpdateStrategyModalProps) => {
-  return updateStrategyModal({
-    resourceKind: kindObj,
-    resource,
-    defaultValue: specValue,
-    title: i18n.t('olm~Edit {{item}}', { item: specDescriptor.displayName }),
-    path: `/spec/${getPatchPathFromDescriptor(specDescriptor)}`,
-  });
+  const launchModal = useOverlay();
+
+  return useCallback(() => {
+    return launchModal(LazyUpdateStrategyModalOverlay, {
+      resourceKind: kindObj,
+      resource,
+      defaultValue: specValue,
+      title: i18n.t('olm~Edit {{item}}', { item: specDescriptor.displayName }),
+      path: `/spec/${getPatchPathFromDescriptor(specDescriptor)}`,
+    });
+  }, [launchModal, kindObj, resource, specValue, specDescriptor]);
 };
 
 type ConfigureUpdateStrategyModalProps = {

frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/index.tsx

@@ -26,7 +26,7 @@ import { DefaultCapability, K8sResourceLinkCapability, SecretCapability } from '
 import { CapabilityProps, SpecCapability, Error } from '../types';
 import { getPatchPathFromDescriptor, getValidCapabilitiesForValue } from '../utils';
 import { useConfigureSizeModal } from './configure-size';
-import { configureUpdateStrategyModal } from './configure-update-strategy';
+import { useConfigureUpdateStrategyModal } from './configure-update-strategy';
 import { EndpointList, EndpointListProps } from './endpoint';
 import { ResourceRequirementsModalLink } from './resource-requirements';
 
@@ -287,19 +287,19 @@ const UpdateStrategy: FC<SpecCapabilityProps> = ({
   value,
 }) => {
   const { t } = useTranslation();
+  const launchUpdateStrategyModal = useConfigureUpdateStrategyModal({
+    kindObj: model,
+    resource: obj,
+    specDescriptor: descriptor,
+    specValue: value,
+  });
+
   return (
     <DetailsItem
       description={description}
       label={label}
       obj={obj}
-      onEdit={() =>
-        configureUpdateStrategyModal({
-          kindObj: model,
-          resource: obj,
-          specDescriptor: descriptor,
-          specValue: value,
-        })
-      }
+      onEdit={launchUpdateStrategyModal}
       path={fullPath}
     >
       {value?.type ?? t('public~None')}