[WIP] CONSOLE-5012: Create shared global error modal launcher utility

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/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 { LazyConfigureUpdateStrategyModalOverlay } 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 { LazyResourceLimitsModalOverlay } 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(LazyConfigureUpdateStrategyModalOverlay, { 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(LazyResourceLimitsModalOverlay, {
             model: kind,
             resource,
           }),

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 { LazyDeletePDBModalOverlay } 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,16 +90,15 @@ export const usePDBActions = (
         id: 'delete-pdb',
         label: t('console-app~Remove PodDisruptionBudget'),
         insertBefore: 'edit-resource-limits',
-        cta: () => {
-          deletePDBModal({
+        cta: () =>
+          launchModal(LazyDeletePDBModalOverlay, {
             workloadName: resource.metadata.name,
             pdb: matchedPDB,
-          });
-        },
+          }),
         accessReview: asAccessReview(kindObj, resource, 'delete'),
       }),
     };
-  }, [loaded, kindObj, resource, matchedPDB, t]);
+  }, [loaded, kindObj, resource, matchedPDB, t, launchModal]);
 
   const actions = useMemo<Action[]>(() => {
     if (!loaded || !kindObj || !resource) return [];

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/resource-limits/ResourceLimitsModalLauncher.tsx

@@ -4,7 +4,8 @@ import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';
 import { limitsValidationSchema } from '@console/dev-console/src/components/import/validation-schema';
-import { createModalLauncher, ModalComponentProps } from '@console/internal/components/factory';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import { ModalComponentProps, ModalWrapper } from '@console/internal/components/factory';
 import { K8sKind, k8sPatch, K8sResourceKind } from '@console/internal/module/k8s';
 import { getLimitsDataFromResource, getResourceLimitsData } from '@console/shared/src';
 import ResourceLimitsModal from './ResourceLimitsModal';
@@ -60,6 +61,10 @@ const ResourceLimitsModalLauncher: FC<ResourceLimitsModalLauncherProps> = (props
   );
 };
 
-export const resourceLimitsModal = createModalLauncher(
-  (props: ResourceLimitsModalLauncherProps) => <ResourceLimitsModalLauncher {...props} />,
+export const ResourceLimitsModalOverlay: OverlayComponent<ResourceLimitsModalLauncherProps> = (
+  props,
+) => (
+  <ModalWrapper blocking onClose={props.closeOverlay}>
+    <ResourceLimitsModalLauncher {...props} close={props.closeOverlay} />
+  </ModalWrapper>
 );

frontend/packages/console-app/src/components/modals/resource-limits/index.ts

@@ -1,4 +1,10 @@
-export const resourceLimitsModal = (props) =>
-  import(
-    './ResourceLimitsModalLauncher' /* webpackChunkName: "resource-limits-modal" */
-  ).then((m) => m.resourceLimitsModal(props));
+import { lazy } from 'react';
+
+// Lazy-loaded OverlayComponent for Resource Limits Modal
+export const LazyResourceLimitsModalOverlay = lazy(() =>
+  import('./ResourceLimitsModalLauncher' /* webpackChunkName: "resource-limits-modal" */).then(
+    (m) => ({
+      default: m.ResourceLimitsModalOverlay,
+    }),
+  ),
+);