CONSOLE-5012: Migrate modals to overlay pattern

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';
@@ -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,

frontend/public/components/edit-yaml.tsx

@@ -31,7 +31,7 @@ import {
 } from '@console/dynamic-plugin-sdk';
 import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
 import { connectToFlags, WithFlagsProps } from '../reducers/connectToFlags';
-import { managedResourceSaveModal } from './modals';
+import { LazyManagedResourceSaveModalOverlay } from './modals';
 import ReplaceCodeModal from './modals/replace-code-modal';
 import { checkAccess } from './utils/rbac';
 import { Firehose } from './utils/firehose';
@@ -638,8 +638,7 @@ const EditYAMLInner: FC<EditYAMLInnerProps> = (props) => {
       }
 
       if (owner) {
-        managedResourceSaveModal({
-          kind: obj.kind,
+        launchModal(LazyManagedResourceSaveModalOverlay, {
           resource: obj,
           onSubmit: () => updateYAML(obj),
           owner,
@@ -648,7 +647,7 @@ const EditYAMLInner: FC<EditYAMLInnerProps> = (props) => {
       }
     }
     updateYAML(obj);
-  }, [create, owner, t, updateYAML, validate, onSave, props.obj, editorMounted]);
+  }, [create, owner, t, updateYAML, validate, onSave, props.obj, editorMounted, launchModal]);
 
   const save = () => {
     setErrors([]);

frontend/public/components/modals/configure-cluster-upstream-modal.tsx

@@ -20,8 +20,9 @@ import {
   ModalComponentProps,
   ModalSubmitFooter,
   ModalTitle,
-  createModalLauncher,
+  ModalWrapper,
 } from '../factory/modal';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { ExternalLink } from '@console/shared/src/components/links/ExternalLink';
 import {
   documentationURLs,
@@ -30,7 +31,6 @@ import {
   isUpstream,
 } from '../utils/documentation';
 import { useTranslation } from 'react-i18next';
-import { TFunction } from 'i18next';
 import { CLUSTER_VERSION_DEFAULT_UPSTREAM_SERVER_URL_PLACEHOLDER } from '@console/shared/src/constants';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 
@@ -166,9 +166,20 @@ export const ConfigureClusterUpstreamModal = (props: ConfigureClusterUpstreamMod
   );
 };
 
-export const configureClusterUpstreamModal = createModalLauncher(ConfigureClusterUpstreamModal);
+export const ConfigureClusterUpstreamModalOverlay: OverlayComponent<ConfigureClusterUpstreamModalProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ConfigureClusterUpstreamModal
+        {...props}
+        cancel={props.closeOverlay}
+        close={props.closeOverlay}
+      />
+    </ModalWrapper>
+  );
+};
 
 export type ConfigureClusterUpstreamModalProps = {
   cv: ClusterVersionKind;
-  t: TFunction;
 } & ModalComponentProps;

frontend/public/components/modals/configure-ns-pull-secret-modal.tsx

@@ -16,14 +16,15 @@ import { useTranslation } from 'react-i18next';
 import type { FC, ChangeEvent, FormEvent } from 'react';
 import { CONST } from '@console/shared';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sPatchByName, k8sCreate, K8sResourceKind } from '../../module/k8s';
 import { SecretModel, ServiceAccountModel } from '../../models';
 import { useState, useCallback } from 'react';
 import {
-  createModalLauncher,
   ModalTitle,
   ModalBody,
   ModalSubmitFooter,
+  ModalWrapper,
   ModalComponentProps,
 } from '../factory/modal';
 import { ResourceIcon } from '../utils/resource-icon';
@@ -313,4 +314,16 @@ const ConfigureNamespacePullSecret: FC<ConfigureNamespacePullSecretProps> = (pro
   );
 };
 
-export const configureNamespacePullSecretModal = createModalLauncher(ConfigureNamespacePullSecret);
+export const ConfigureNamespacePullSecretModalOverlay: OverlayComponent<ConfigureNamespacePullSecretProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ConfigureNamespacePullSecret
+        {...props}
+        cancel={props.closeOverlay}
+        close={props.closeOverlay}
+      />
+    </ModalWrapper>
+  );
+};

frontend/public/components/modals/configure-update-strategy-modal.tsx

@@ -15,10 +15,16 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sPatch, Patch, DeploymentUpdateStrategy, K8sResourceKind } from '../../module/k8s';
 import { DeploymentModel } from '../../models';
-import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
+import {
+  ModalTitle,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalWrapper,
+  ModalComponentProps,
+} from '../factory/modal';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 
 export const getNumberOrPercent = (value) => {
@@ -216,7 +222,19 @@ export const ConfigureUpdateStrategyModal = ({
   );
 };
 
-export const configureUpdateStrategyModal = createModalLauncher(ConfigureUpdateStrategyModal);
+export const ConfigureUpdateStrategyModalOverlay: OverlayComponent<ConfigureUpdateStrategyModalProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ConfigureUpdateStrategyModal
+        {...props}
+        cancel={props.closeOverlay}
+        close={props.closeOverlay}
+      />
+    </ModalWrapper>
+  );
+};
 
 export type ConfigureUpdateStrategyProps = {
   showDescription?: boolean;
@@ -232,8 +250,6 @@ export type ConfigureUpdateStrategyProps = {
 
 export type ConfigureUpdateStrategyModalProps = {
   deployment: K8sResourceKind;
-  cancel?: () => void;
-  close?: () => void;
-};
+} & ModalComponentProps;
 
 ConfigureUpdateStrategy.displayName = 'ConfigureUpdateStrategy';

frontend/public/components/modals/index.ts

@@ -21,10 +21,14 @@ export const confirmModal = (props) =>
 export const errorModal = (props) =>
   import('./error-modal' /* webpackChunkName: "error-modal" */).then((m) => m.errorModal(props));
 
-export const configureNamespacePullSecretModal = (props) =>
+// Lazy-loaded OverlayComponent for Configure Namespace Pull Secret Modal
+export const LazyConfigureNamespacePullSecretModalOverlay = lazy(() =>
   import(
     './configure-ns-pull-secret-modal' /* webpackChunkName: "configure-ns-pull-secret-modal" */
-  ).then((m) => m.configureNamespacePullSecretModal(props));
+  ).then((m) => ({
+    default: m.ConfigureNamespacePullSecretModalOverlay,
+  })),
+);
 
 export const labelsModalLauncher = (props) =>
   import('./labels-modal' /* webpackChunkName: "labels-modal" */).then((m) =>
@@ -41,10 +45,14 @@ export const rollbackModal = (props) =>
     m.rollbackModal(props),
   );
 
-export const configureUpdateStrategyModal = (props) =>
+// Lazy-loaded OverlayComponent for Configure Update Strategy Modal
+export const LazyConfigureUpdateStrategyModalOverlay = lazy(() =>
   import(
     './configure-update-strategy-modal' /* webpackChunkName: "configure-update-strategy-modal" */
-  ).then((m) => m.configureUpdateStrategyModal(props));
+  ).then((m) => ({
+    default: m.ConfigureUpdateStrategyModalOverlay,
+  })),
+);
 
 export const annotationsModalLauncher = (props) =>
   import('./tags' /* webpackChunkName: "tags" */).then((m) => m.annotationsModalLauncher(props));
@@ -100,10 +108,14 @@ export const LazyClonePVCModalOverlay = lazy(() =>
   ).then((m) => ({ default: m.ClonePVCModalOverlay })),
 );
 
-export const configureClusterUpstreamModal = (props) =>
+// Lazy-loaded OverlayComponent for Configure Cluster Upstream Modal
+export const LazyConfigureClusterUpstreamModalOverlay = lazy(() =>
   import(
     './configure-cluster-upstream-modal' /* webpackChunkName: "configure-cluster-upstream-modal" */
-  ).then((m) => m.configureClusterUpstreamModal(props));
+  ).then((m) => ({
+    default: m.ConfigureClusterUpstreamModalOverlay,
+  })),
+);
 
 export const createAlertRoutingModal = (props) =>
   import('./alert-routing-modal' /* webpackChunkName: "alert-routing-modal" */).then((m) =>
@@ -115,19 +127,18 @@ export const createColumnManagementModal = (props) =>
     m.createColumnManagementModal(props),
   );
 
-export const removeUserModal = (props) =>
-  import('./remove-user-modal' /* webpackChunkName: "remove-user-modal" */).then((m) =>
-    m.removeUserModal(props),
-  );
-
 // Lazy-loaded OverlayComponent for Restore PVC Modal
 export const LazyRestorePVCModalOverlay = lazy(() =>
   import(
     '@console/app/src/components/modals/restore-pvc/restore-pvc-modal' /* webpackChunkName: "restore-pvc-modal" */
   ).then((m) => ({ default: m.RestorePVCModalOverlay })),
 );
 
-export const managedResourceSaveModal = (props) =>
+// Lazy-loaded OverlayComponent for Managed Resource Save Modal
+export const LazyManagedResourceSaveModalOverlay = lazy(() =>
   import(
     './managed-resource-save-modal' /* webpackChunkName: "managed-resource-save-modal" */
-  ).then((m) => m.managedResourceSaveModal(props));
+  ).then((m) => ({
+    default: m.ManagedResourceSaveModalOverlay,
+  })),
+);

frontend/public/components/modals/managed-resource-save-modal.tsx

@@ -1,9 +1,16 @@
 import type { FC } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
+import {
+  ModalTitle,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalComponentProps,
+  ModalWrapper,
+} from '../factory/modal';
 import { referenceForOwnerRef, K8sResourceCommon, OwnerReference } from '../../module/k8s/';
 import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 
 import { ResourceLink } from '../utils/resource-link';
 
@@ -39,11 +46,18 @@ const ManagedResourceSaveModal: FC<ManagedResourceSaveModalProps> = (props) => {
   );
 };
 
-export const managedResourceSaveModal = createModalLauncher(ManagedResourceSaveModal);
+export const ManagedResourceSaveModalOverlay: OverlayComponent<ManagedResourceSaveModalProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ManagedResourceSaveModal {...props} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
 
 type ManagedResourceSaveModalProps = {
   onSubmit: () => void;
-  close: () => void;
   resource: K8sResourceCommon;
   owner: OwnerReference;
-};
+} & ModalComponentProps;

frontend/public/components/namespace.jsx

@@ -41,6 +41,7 @@ import { DASH } from '@console/shared/src/constants/ui';
 import { ByteDataTypes } from '@console/shared/src/graph-helper/data-utils';
 import * as k8sActions from '@console/dynamic-plugin-sdk/src/app/k8s/actions/k8s';
 import { useActivePerspective } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   ConsoleLinkModel,
@@ -71,7 +72,7 @@ import {
 import { navFactory } from './utils/horizontal-nav';
 import { useAccessReview } from './utils/rbac';
 import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
-import { configureNamespacePullSecretModal } from './modals';
+import { LazyConfigureNamespacePullSecretModalOverlay } from './modals';
 import { RoleBindingsPage } from './RBAC';
 import { Bar } from './graphs/bar';
 import { Area } from './graphs/area';
@@ -856,6 +857,7 @@ export const PullSecret = (props) => {
   const [error, setError] = useState(false);
   const { t } = useTranslation();
   const { namespace, canViewSecrets } = props;
+  const launchModal = useOverlay();
 
   useEffect(() => {
     k8sGet(ServiceAccountModel, 'default', namespace.metadata.name, {})
@@ -873,7 +875,11 @@ export const PullSecret = (props) => {
       });
   }, [namespace.metadata.name]);
 
-  const modal = () => configureNamespacePullSecretModal({ namespace, pullSecret: undefined });
+  const modal = () =>
+    launchModal(LazyConfigureNamespacePullSecretModalOverlay, {
+      namespace,
+      pullSecret: undefined,
+    });
 
   const secrets = () => {
     if (error) {