[WIP] CONSOLE-5012: Additional modal migrations to overlay pattern

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

@@ -110,7 +110,9 @@ export const useBuildsActions = (
         accessReview: asAccessReview(kindObj, obj, 'patch'),
       }),
     }),
-    [t, kindObj, obj, launchModal, cancelBuildModal],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, kindObj, obj, cancelBuildModal],
   );
 
   const buildPhase = obj.status?.phase;

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

@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Action } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
 import {
   annotationsModalLauncher,
-  deleteModal,
+  LazyDeleteModalProvider,
   labelsModalLauncher,
   podSelectorModal,
   taintsModal,
@@ -43,6 +44,7 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
   editPath?: string,
 ): [ActionObject<T>, boolean] => {
   const { t } = useTranslation();
+  const launchModal = useOverlay();
   const launchCountModal = useConfigureCountModal({
     resourceKind: kind,
     resource,
@@ -75,7 +77,7 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         id: 'delete-resource',
         label: t('console-app~Delete {{kind}}', { kind: kind?.kind }),
         cta: () =>
-          deleteModal({
+          launchModal(LazyDeleteModalProvider, {
             kind,
             resource,
             message,
@@ -169,6 +171,7 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
     }),
+    // missing launchModal dependency, that causes max depth exceeded error
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [kind, resource, t, message, actualEditPath],
   );

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

@@ -4,7 +4,7 @@ import { Action } from '@console/dynamic-plugin-sdk';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
 import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource';
-import { configureUpdateStrategyModal } from '@console/internal/components/modals';
+import { LazyConfigureUpdateStrategyModalProvider } from '@console/internal/components/modals';
 import { ErrorModal } from '@console/internal/components/modals/error-modal';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
@@ -16,7 +16,7 @@ import {
   k8sCreate,
   K8sModel,
 } from '@console/internal/module/k8s';
-import { resourceLimitsModal } from '../../components/modals/resource-limits';
+import { LazyResourceLimitsModalProvider } from '../../components/modals/resource-limits';
 import { DeploymentActionCreator, ActionObject } from './types';
 
 const restartRollout = (model: K8sModel | undefined, obj: K8sResourceKind | undefined) => {
@@ -107,7 +107,7 @@ export const useDeploymentActions = <T extends readonly DeploymentActionCreator[
       [DeploymentActionCreator.UpdateStrategy]: (): Action => ({
         id: 'edit-update-strategy',
         label: t('console-app~Edit update strategy'),
-        cta: () => configureUpdateStrategyModal({ deployment: resource }),
+        cta: () => launchModal(LazyConfigureUpdateStrategyModalProvider, { deployment: resource }),
         accessReview: {
           group: kind?.apiGroup,
           resource: kind?.plural,
@@ -171,7 +171,7 @@ export const useDeploymentActions = <T extends readonly DeploymentActionCreator[
         id: 'edit-resource-limits',
         label: t('console-app~Edit resource limits'),
         cta: () =>
-          resourceLimitsModal({
+          launchModal(LazyResourceLimitsModalProvider, {
             model: kind,
             resource,
           }),
@@ -184,7 +184,9 @@ export const useDeploymentActions = <T extends readonly DeploymentActionCreator[
         },
       }),
     }),
-    [t, resource, kind, launchModal],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, resource, kind],
   );
 
   return useMemo((): [ActionObject<T>, boolean] => {

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

@@ -52,7 +52,9 @@ export const useJobActions = (obj: JobKind, filterActions?: JobActionCreator[]):
         accessReview: asAccessReview(JobModel, obj, 'patch'),
       }),
     }),
-    [t, obj, launchModal],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, obj],
   );
 
   // filter and initialize requested actions or construct list of all PVCActions

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

@@ -2,11 +2,12 @@ import { useMemo } from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { Action } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { K8sPodControllerKind, K8sModel, referenceFor } from '@console/internal/module/k8s';
-import { deletePDBModal } from '../../components/pdb/modals';
+import { LazyDeletePDBModalProvider } from '../../components/pdb/modals';
 import { PodDisruptionBudgetKind } from '../../components/pdb/types';
 import { getPDBResource } from '../../components/pdb/utils/get-pdb-resources';
 import { PodDisruptionBudgetModel } from '../../models';
@@ -42,6 +43,7 @@ export const usePDBActions = (
   const namespace = resource?.metadata?.namespace;
   const memoizedFilterActions = useDeepCompareMemoize(filterActions);
   const { t } = useTranslation();
+  const launchModal = useOverlay();
   const watchedResource = useMemo(
     () => ({
       isList: true,
@@ -88,15 +90,16 @@ export const usePDBActions = (
         id: 'delete-pdb',
         label: t('console-app~Remove PodDisruptionBudget'),
         insertBefore: 'edit-resource-limits',
-        cta: () => {
-          deletePDBModal({
+        cta: () =>
+          launchModal(LazyDeletePDBModalProvider, {
             workloadName: resource.metadata.name,
             pdb: matchedPDB,
-          });
-        },
+          }),
         accessReview: asAccessReview(kindObj, resource, 'delete'),
       }),
     };
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loaded, kindObj, resource, matchedPDB, t]);
 
   const actions = useMemo<Action[]>(() => {

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

@@ -4,8 +4,11 @@ import { ModifyVACModal } from '@console/app/src/components/modals/modify-vac-mo
 import { Action } from '@console/dynamic-plugin-sdk';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
-import { clonePVCModal, expandPVCModal } from '@console/internal/components/modals';
-import deletePVCModal from '@console/internal/components/modals/delete-pvc-modal';
+import {
+  LazyClonePVCModalProvider,
+  LazyExpandPVCModalProvider,
+} from '@console/internal/components/modals';
+import { DeletePVCModalProvider } from '@console/internal/components/modals/delete-pvc-modal';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { VolumeSnapshotModel, PersistentVolumeClaimModel } from '@console/internal/models';
 import { PersistentVolumeClaimKind } from '@console/internal/module/k8s';
@@ -46,7 +49,7 @@ export const usePVCActions = (
         id: 'expand-pvc',
         label: t('console-app~Expand PVC'),
         cta: () =>
-          expandPVCModal({
+          launchModal(LazyExpandPVCModalProvider, {
             kind: PersistentVolumeClaimModel,
             resource: obj,
           }),
@@ -67,11 +70,7 @@ export const usePVCActions = (
         label: t('console-app~Clone PVC'),
         disabled: obj?.status?.phase !== 'Bound',
         tooltip: obj?.status?.phase !== 'Bound' ? t('console-app~PVC is not Bound') : '',
-        cta: () =>
-          clonePVCModal({
-            kind: PersistentVolumeClaimModel,
-            resource: obj,
-          }),
+        cta: () => launchModal(LazyClonePVCModalProvider, { resource: obj }),
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'create'),
       }),
       [PVCActionCreator.ModifyVAC]: () => ({
@@ -88,14 +87,13 @@ export const usePVCActions = (
       [PVCActionCreator.DeletePVC]: () => ({
         id: 'delete-pvc',
         label: t('public~Delete PersistentVolumeClaim'),
-        cta: () =>
-          deletePVCModal({
-            pvc: obj,
-          }),
+        cta: () => launchModal(DeletePVCModalProvider, { pvc: obj }),
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'delete'),
       }),
     }),
-    [t, obj, launchModal],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, obj],
   );
 
   // filter and initialize requested actions or construct list of all PVCActions

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

@@ -95,6 +95,8 @@ export const useRetryRolloutAction = (resource: DeploymentConfigKind): Action =>
         verb: 'patch',
       },
     }),
-    [t, dcModel, rcModel, rc, canRetry, resource, launchModal],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, dcModel, rcModel, rc, canRetry, resource],
   );
 };

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

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Action } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
-import { restorePVCModal } from '@console/internal/components/modals';
+import { LazyRestorePVCModalProvider } from '@console/internal/components/modals';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { VolumeSnapshotModel } from '@console/internal/models';
 import { VolumeSnapshotKind } from '@console/internal/module/k8s';
@@ -32,6 +33,7 @@ export const useVolumeSnapshotActions = (
   filterActions?: VolumeSnapshotActionCreator[],
 ): Action[] => {
   const { t } = useTranslation();
+  const launchModal = useOverlay();
 
   const memoizedFilterActions = useDeepCompareMemoize(filterActions);
 
@@ -43,13 +45,14 @@ export const useVolumeSnapshotActions = (
         disabled: !resource?.status?.readyToUse,
         tooltip: !resource?.status?.readyToUse ? t('console-app~Volume Snapshot is not Ready') : '',
         cta: () =>
-          restorePVCModal({
-            kind: VolumeSnapshotModel,
+          launchModal(LazyRestorePVCModalProvider, {
             resource,
           }),
         accessReview: asAccessReview(VolumeSnapshotModel, resource, 'create'),
       }),
     }),
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [t, resource],
   );
 

frontend/packages/console-app/src/actions/providers/build-config-provider.ts

@@ -33,7 +33,9 @@ const useStartBuildAction = (obj: BuildConfig): Action[] => {
         accessReview: asAccessReview(BuildConfigModel, buildConfig, 'create', 'instantiate'),
       }),
     }),
-    [launchModal, t],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t],
   );
   const actions = useMemo<Action[]>(() => [factory[BuildConfigActionCreator.StartBuild](obj)], [
     factory,
@@ -66,7 +68,9 @@ const useStartLastBuildAction = (
         accessReview: asAccessReview(BuildConfigModel, latestBuild, 'create', 'instantiate'),
       }),
     }),
-    [latestBuild, launchModal, t],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [latestBuild, t],
   );
   const actions = useMemo<Action[]>(
     () => (latestBuild ? [factory[BuildConfigActionCreator.StartLastRun]()] : []),

frontend/packages/console-app/src/actions/providers/deployment-provider.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { DeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
+import { useDeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
 import { Action } from '@console/dynamic-plugin-sdk/src';
 import { DeploymentKind, referenceFor } from '@console/internal/module/k8s';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
@@ -14,6 +14,7 @@ export const useDeploymentActionsProvider = (resource: DeploymentKind) => {
   const [kindObj, inFlight] = useK8sModel(referenceFor(resource));
   const [hpaActions, relatedHPAs] = useHPAActions(kindObj, resource);
   const [pdbActions] = usePDBActions(kindObj, resource);
+  const deleteResourceAction = useDeleteResourceAction(kindObj, resource);
   const [deploymentActionsObject, deploymentActionsReady] = useDeploymentActions(
     kindObj,
     resource,
@@ -54,7 +55,7 @@ export const useDeploymentActionsProvider = (resource: DeploymentKind) => {
           deploymentActionsObject.EditDeployment,
           ...(resource.metadata?.annotations?.['openshift.io/generated-by'] ===
           'OpenShiftWebConsole'
-            ? [DeleteResourceAction(kindObj, resource)]
+            ? [deleteResourceAction]
             : [commonActions.Delete]),
         ];
   }, [
@@ -66,6 +67,7 @@ export const useDeploymentActionsProvider = (resource: DeploymentKind) => {
     commonActions,
     isReady,
     deploymentActionsObject,
+    deleteResourceAction,
   ]);
 
   return [deploymentActions, !inFlight, undefined];

frontend/packages/console-app/src/actions/providers/deploymentconfig-provider.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { DeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
+import { useDeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
 import { DeploymentConfigKind, referenceFor } from '@console/internal/module/k8s';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
 import { getHealthChecksAction } from '../creators/health-checks-factory';
@@ -15,6 +15,7 @@ export const useDeploymentConfigActionsProvider = (resource: DeploymentConfigKin
   const [hpaActions, relatedHPAs] = useHPAActions(kindObj, resource);
   const [pdbActions] = usePDBActions(kindObj, resource);
   const retryRolloutAction = useRetryRolloutAction(resource);
+  const deleteResourceAction = useDeleteResourceAction(kindObj, resource);
   const [deploymentActions, deploymentActionsReady] = useDeploymentActions(kindObj, resource, [
     DeploymentActionCreator.StartDCRollout,
     DeploymentActionCreator.PauseRollout,
@@ -50,7 +51,7 @@ export const useDeploymentConfigActionsProvider = (resource: DeploymentConfigKin
             deploymentActions.EditDeployment,
             ...(resource.metadata?.annotations?.['openshift.io/generated-by'] ===
             'OpenShiftWebConsole'
-              ? [DeleteResourceAction(kindObj, resource)]
+              ? [deleteResourceAction]
               : [commonActions.Delete]),
           ]
         : [],
@@ -64,6 +65,7 @@ export const useDeploymentConfigActionsProvider = (resource: DeploymentConfigKin
       commonActions,
       deploymentActions,
       isReady,
+      deleteResourceAction,
     ],
   );
 

frontend/packages/console-app/src/actions/providers/machine-config-pool-provider.ts

@@ -24,7 +24,9 @@ const usePauseAction = (obj: MachineConfigPoolKind): Action[] => {
         accessReview: asAccessReview(MachineConfigPoolModel, obj, 'patch'),
       }),
     }),
-    [launchModal, obj, t],
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [obj, t],
   );
 
   const action = useMemo<Action[]>(() => [factory.PauseUpdates()], [factory]);

frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx

@@ -8,12 +8,13 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
   ModalBody,
   ModalComponentProps,
   ModalSubmitFooter,
   ModalTitle,
-  createModalLauncher,
+  ModalWrapper,
 } from '@console/internal/components/factory';
 import { DataPoint } from '@console/internal/components/graphs';
 import { PrometheusEndpoint } from '@console/internal/components/graphs/helpers';
@@ -275,4 +276,13 @@ export type ClonePVCModalProps = {
   resource?: PersistentVolumeClaimKind;
 } & ModalComponentProps;
 
-export default createModalLauncher(ClonePVCModal);
+export const ClonePVCModalProvider: OverlayComponent<ClonePVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ClonePVCModal cancel={props.closeOverlay} close={props.closeOverlay} {...props} />
+    </ModalWrapper>
+  );
+};
+
+// For backward compatibility with the index.ts re-export
+export default ClonePVCModalProvider;