Merge pull request #15940 from rhamilto/CONSOLE-5012-3

CONSOLE-5012: Additional modal migrations to overlay pattern

Author: openshift-merge-bot[bot]

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

@@ -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) => {
@@ -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/components/modals/resource-limits/ResourceLimitsModalLauncher.tsx

@@ -4,15 +4,15 @@ 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';
 
 export type ResourceLimitsModalLauncherProps = {
   model: K8sKind;
   resource: K8sResourceKind;
-  close?: () => void;
 } & ModalComponentProps;
 
 const rlValidationSchema = (t: TFunction) =>
@@ -60,6 +60,14 @@ 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}
+      cancel={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,
+    }),
+  ),
+);

frontend/packages/console-app/src/components/nodes/menu-actions.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCommonResourceActions } from '@console/app/src/actions//hooks/useCommonResourceActions';
 import { Action } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useK8sModel } from '@console/dynamic-plugin-sdk/src/lib-core';
 import { k8sUpdateResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
@@ -14,7 +15,7 @@ import {
 } from '@console/internal/module/k8s';
 import { isNodeUnschedulable } from '@console/shared/src/selectors/node';
 import { makeNodeSchedulable } from '../../k8s/requests/nodes';
-import { createConfigureUnschedulableModal } from './modals';
+import { LazyConfigureUnschedulableModalOverlay } from './modals';
 
 const updateCSR = (csr: CertificateSigningRequestKind, type: 'Approved' | 'Denied') => {
   const approvedCSR = {
@@ -47,6 +48,7 @@ export const denyCSR = (csr: CertificateSigningRequestKind) => updateCSR(csr, 'D
 export const useNodeActions: ExtensionHook<Action[], NodeKind> = (obj) => {
   const [kindObj, inFlight] = useK8sModel(referenceFor(obj));
   const { t } = useTranslation();
+  const launchModal = useOverlay();
   const deleteMessage = useMemo(
     () => (
       <p>
@@ -71,14 +73,14 @@ export const useNodeActions: ExtensionHook<Action[], NodeKind> = (obj) => {
       actions.push({
         id: 'mark-as-unschedulable',
         label: t('console-app~Mark as unschedulable'),
-        cta: () => createConfigureUnschedulableModal({ resource: obj }),
+        cta: () => launchModal(LazyConfigureUnschedulableModalOverlay, { resource: obj }),
         accessReview: asAccessReview(kindObj, obj, 'patch'),
       });
     }
 
     actions.push(...commonActions);
     return actions;
-  }, [kindObj, obj, t, commonActions]);
+  }, [kindObj, obj, t, commonActions, launchModal]);
 
   return [nodeActions, !inFlight, undefined];
 };

frontend/packages/console-app/src/components/nodes/modals/ConfigureUnschedulableModal.tsx

@@ -1,20 +1,20 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
   ModalTitle,
   ModalBody,
   ModalSubmitFooter,
-  createModalLauncher,
+  ModalComponentProps,
+  ModalWrapper,
 } from '@console/internal/components/factory/modal';
 import { NodeKind } from '@console/internal/module/k8s';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 import { makeNodeUnschedulable } from '../../../k8s/requests/nodes';
 
 type ConfigureUnschedulableModalProps = {
   resource: NodeKind;
-  cancel?: () => void;
-  close?: () => void;
-};
+} & ModalComponentProps;
 
 const ConfigureUnschedulableModal: FC<ConfigureUnschedulableModalProps> = ({
   resource,
@@ -48,4 +48,14 @@ const ConfigureUnschedulableModal: FC<ConfigureUnschedulableModalProps> = ({
   );
 };
 
-export default createModalLauncher(ConfigureUnschedulableModal);
+export const ConfigureUnschedulableModalOverlay: OverlayComponent<ConfigureUnschedulableModalProps> = (
+  props,
+) => (
+  <ModalWrapper blocking onClose={props.closeOverlay}>
+    <ConfigureUnschedulableModal
+      {...props}
+      cancel={props.closeOverlay}
+      close={props.closeOverlay}
+    />
+  </ModalWrapper>
+);

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

@@ -1,6 +1,10 @@
-import { NodeKind } from '@console/internal/module/k8s';
+import { lazy } from 'react';
 
-export const createConfigureUnschedulableModal = (props: { resource: NodeKind }) =>
+// Lazy-loaded OverlayComponent for Configure Unschedulable Modal
+export const LazyConfigureUnschedulableModalOverlay = lazy(() =>
   import(
     './ConfigureUnschedulableModal' /* webpackChunkName: "configure-unschedulable-modal" */
-  ).then((m) => m.default(props));
+  ).then((m) => ({
+    default: m.ConfigureUnschedulableModalOverlay,
+  })),
+);

frontend/packages/console-app/src/components/pdb/modals/DeletePDBModal.tsx

@@ -4,12 +4,13 @@ import { Form } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens';
 import { useTranslation, Trans } from 'react-i18next';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
-  createModalLauncher,
   ModalBody,
   ModalComponentProps,
   ModalSubmitFooter,
   ModalTitle,
+  ModalWrapper,
 } from '@console/internal/components/factory/modal';
 import { LoadingInline } from '@console/internal/components/utils/status-box';
 import { k8sKill } from '@console/internal/module/k8s';
@@ -72,7 +73,11 @@ const DeletePDBModal: FC<DeletePDBModalProps> = ({ close, pdb, workloadName }) =
   );
 };
 
-export const deletePDBModal = createModalLauncher(DeletePDBModal);
+export const DeletePDBModalOverlay: OverlayComponent<DeletePDBModalProps> = (props) => (
+  <ModalWrapper blocking onClose={props.closeOverlay}>
+    <DeletePDBModal {...props} close={props.closeOverlay} />
+  </ModalWrapper>
+);
 
 export type DeletePDBModalProps = ModalComponentProps & {
   pdb: PodDisruptionBudgetKind;

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

@@ -1,6 +1,8 @@
-import { DeletePDBModalProps } from './DeletePDBModal';
+import { lazy } from 'react';
 
-export const deletePDBModal = (props: DeletePDBModalProps) =>
-  import('./DeletePDBModal' /* webpackChunkName: "shared-modals" */).then((m) =>
-    m.deletePDBModal(props),
-  );
+// Lazy-loaded OverlayComponent for Delete PDB Modal
+export const LazyDeletePDBModalOverlay = lazy(() =>
+  import('./DeletePDBModal' /* webpackChunkName: "delete-pdb-modal" */).then((m) => ({
+    default: m.DeletePDBModalOverlay,
+  })),
+);