CONSOLE-5012: Migrate delete modals and PVC modals to overlay pattern

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,
+  LazyDeleteModalOverlay,
   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(LazyDeleteModalOverlay, {
             kind,
             resource,
             message,
@@ -169,8 +171,11 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
     }),
+    // Excluding stable modal launcher functions (labelsModalLauncher, annotationsModalLauncher, podSelectorModal,
+    // tolerationsModal, taintsModal, launchCountModal) to prevent unnecessary re-renders
+    // TODO: remove once all Modals have been updated to useOverlay
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [kind, resource, t, message, actualEditPath],
+    [kind, resource, t, message, actualEditPath, launchModal],
   );
 
   const result = useMemo((): [ActionObject<T>, boolean] => {

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 {
+  LazyClonePVCModalOverlay,
+  LazyDeletePVCModalOverlay,
+  LazyExpandPVCModalOverlay,
+} from '@console/internal/components/modals';
 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(LazyExpandPVCModalOverlay, {
             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(LazyClonePVCModalOverlay, { resource: obj }),
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'create'),
       }),
       [PVCActionCreator.ModifyVAC]: () => ({
@@ -88,10 +87,7 @@ export const usePVCActions = (
       [PVCActionCreator.DeletePVC]: () => ({
         id: 'delete-pvc',
         label: t('public~Delete PersistentVolumeClaim'),
-        cta: () =>
-          deletePVCModal({
-            pvc: obj,
-          }),
+        cta: () => launchModal(LazyDeletePVCModalOverlay, { pvc: obj }),
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'delete'),
       }),
     }),

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 { LazyRestorePVCModalOverlay } 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,14 +45,13 @@ export const useVolumeSnapshotActions = (
         disabled: !resource?.status?.readyToUse,
         tooltip: !resource?.status?.readyToUse ? t('console-app~Volume Snapshot is not Ready') : '',
         cta: () =>
-          restorePVCModal({
-            kind: VolumeSnapshotModel,
+          launchModal(LazyRestorePVCModalOverlay, {
             resource,
           }),
         accessReview: asAccessReview(VolumeSnapshotModel, resource, 'create'),
       }),
     }),
-    [t, resource],
+    [t, resource, launchModal],
   );
 
   const actions = useMemo<Action[]>(() => {

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/components/modals/clone/clone-pvc-modal.tsx

@@ -8,12 +8,14 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { 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 {
   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';
@@ -24,7 +26,6 @@ import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import { RequestSizeInput } from '@console/internal/components/utils/request-size-input';
 import { ResourceIcon } from '@console/internal/components/utils/resource-icon';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
-import { history } from '@console/internal/components/utils/router';
 import { LoadingInline } from '@console/internal/components/utils/status-box';
 import { StorageClassDropdown } from '@console/internal/components/utils/storage-class-dropdown';
 import {
@@ -53,6 +54,7 @@ import './_clone-pvc-modal.scss';
 
 const ClonePVCModal = (props: ClonePVCModalProps) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { close, cancel, resource } = props;
   const [handlePromise, inProgress, errorMessage] = usePromiseHandler<PersistentVolumeClaimKind>();
   const { name: pvcName, namespace } = resource?.metadata;
@@ -129,7 +131,7 @@ const ClonePVCModal = (props: ClonePVCModalProps) => {
     handlePromise(k8sCreate(PersistentVolumeClaimModel, pvcCloneObj))
       .then((cloneResource) => {
         close();
-        history.push(resourceObjPath(cloneResource, referenceFor(cloneResource)));
+        navigate(resourceObjPath(cloneResource, referenceFor(cloneResource)));
       })
       .catch(() => {});
   };
@@ -275,4 +277,10 @@ export type ClonePVCModalProps = {
   resource?: PersistentVolumeClaimKind;
 } & ModalComponentProps;
 
-export default createModalLauncher(ClonePVCModal);
+export const ClonePVCModalOverlay: OverlayComponent<ClonePVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ClonePVCModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};

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

@@ -10,13 +10,15 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
 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,
@@ -28,7 +30,6 @@ import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import { RequestSizeInput } from '@console/internal/components/utils/request-size-input';
 import { ResourceIcon } from '@console/internal/components/utils/resource-icon';
 import { resourcePathFromModel } from '@console/internal/components/utils/resource-link';
-import { history } from '@console/internal/components/utils/router';
 import { StorageClassDropdown } from '@console/internal/components/utils/storage-class-dropdown';
 import {
   convertToBaseValue,
@@ -60,6 +61,7 @@ import './restore-pvc-modal.scss';
 const RestorePVCModal = ({ close, cancel, resource }: RestorePVCModalProps) => {
   const [handlePromise, inProgress, errorMessage] = usePromiseHandler<PersistentVolumeClaimKind>();
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [restorePVCName, setPVCName] = useState(`${getName(resource) || 'pvc'}-restore`);
   const volumeSnapshotAnnotations = getAnnotations(resource);
   const snapshotBaseSize = convertToBaseValue(resource?.status?.restoreSize ?? '0');
@@ -124,7 +126,7 @@ const RestorePVCModal = ({ close, cancel, resource }: RestorePVCModalProps) => {
     handlePromise(k8sCreate(PersistentVolumeClaimModel, restorePVCTemplate, { ns: namespace }))
       .then((newPVC) => {
         close();
-        history.push(
+        navigate(
           resourcePathFromModel(PersistentVolumeClaimModel, newPVC.metadata.name, namespace),
         );
       })
@@ -278,4 +280,10 @@ type RestorePVCModalProps = {
   resource: VolumeSnapshotKind;
 } & ModalComponentProps;
 
-export default createModalLauncher(RestorePVCModal);
+export const RestorePVCModalOverlay: OverlayComponent<RestorePVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <RestorePVCModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};

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/dev-console/src/actions/context-menu.ts

@@ -1,7 +1,10 @@
+import { useMemo } from 'react';
 import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { Action, K8sModel } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { TopologyApplicationObject } from '@console/dynamic-plugin-sdk/src/extensions/topology-types';
-import { deleteModal } from '@console/internal/components/modals';
+import { LazyDeleteModalOverlay } from '@console/internal/components/modals';
 import { asAccessReview } from '@console/internal/components/utils';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { deleteResourceModal } from '@console/shared';
@@ -36,14 +39,25 @@ export const DeleteApplicationAction = (
   };
 };
 
-export const DeleteResourceAction = (kind: K8sModel, obj: K8sResourceKind): Action => ({
-  id: `delete-resource`,
-  label: i18next.t('devconsole~Delete {{kind}}', { kind: kind.kind }),
-  cta: () =>
-    deleteModal({
-      kind,
-      resource: obj,
-      deleteAllResources: () => cleanUpWorkload(obj),
+export const useDeleteResourceAction = (
+  kind: K8sModel | undefined,
+  obj: K8sResourceKind,
+): Action => {
+  const { t } = useTranslation();
+  const launchModal = useOverlay();
+
+  return useMemo(
+    () => ({
+      id: `delete-resource`,
+      label: t('devconsole~Delete {{kind}}', { kind: kind?.kind }),
+      cta: () =>
+        launchModal(LazyDeleteModalOverlay, {
+          kind,
+          resource: obj,
+          deleteAllResources: () => cleanUpWorkload(obj),
+        }),
+      accessReview: asAccessReview(kind as K8sModel, obj, 'delete'),
     }),
-  accessReview: asAccessReview(kind, obj, 'delete'),
-});
+    [t, kind, obj, launchModal],
+  );
+};