[WIP] CONSOLE-5012: Migrate modals 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';
@@ -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,
@@ -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/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;

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

@@ -11,12 +11,13 @@ import {
 } from '@patternfly/react-core';
 import { Trans, useTranslation } from 'react-i18next';
 import { VolumeModeSelector } from '@console/app/src/components/volume-modes/volume-mode';
+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 {
   dropdownUnits,
@@ -278,4 +279,13 @@ type RestorePVCModalProps = {
   resource: VolumeSnapshotKind;
 } & ModalComponentProps;
 
-export default createModalLauncher(RestorePVCModal);
+export const RestorePVCModalProvider: OverlayComponent<RestorePVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <RestorePVCModal cancel={props.closeOverlay} close={props.closeOverlay} {...props} />
+    </ModalWrapper>
+  );
+};
+
+// For backward compatibility with the index.ts re-export
+export default RestorePVCModalProvider;

frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/OverlayProvider.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { createContext, useState, useCallback } from 'react';
+import { createContext, useState, useCallback, Suspense } from 'react';
 import * as _ from 'lodash';
 import { UnknownProps } from '../common-types';
 
@@ -52,7 +52,9 @@ export const OverlayProvider: FC<OverlayProviderProps> = ({ children }) => {
   return (
     <OverlayContext.Provider value={{ launchOverlay, closeOverlay }}>
       {_.map(componentsMap, (c, id) => (
-        <c.Component {...c.props} key={id} closeOverlay={() => closeOverlay(id)} />
+        <Suspense key={id} fallback={null}>
+          <c.Component {...c.props} closeOverlay={() => closeOverlay(id)} />
+        </Suspense>
       ))}
       {children}
     </OverlayContext.Provider>

frontend/packages/console-shared/src/components/formik-fields/EnvironmentField.tsx

@@ -75,7 +75,9 @@ const EnvironmentField: FC<EnvironmentFieldProps> = ({
           } catch (e) {}
         }
       });
-  }, [namespace, launchModal]);
+    // missing launchModal dependency, that causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [namespace]);
 
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={required}>