CONSOLE-5049: Migrate cluster and toleration modals to useOverlay hook

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

@@ -7,7 +7,7 @@ import {
   LazyAnnotationsModalOverlay,
   LazyDeleteModalOverlay,
   LazyLabelsModalOverlay,
-  tolerationsModal,
+  LazyTolerationsModalOverlay,
 } from '@console/internal/components/modals';
 import { useConfigureCountModal } from '@console/internal/components/modals/configure-count-modal';
 import { TaintsModalOverlay } from '@console/internal/components/modals/taints-modal';
@@ -132,7 +132,7 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         id: 'edit-toleration',
         label: t('console-app~Edit tolerations'),
         cta: () =>
-          tolerationsModal({
+          launchModal(LazyTolerationsModalOverlay, {
             resourceKind: kind,
             resource,
             modalClassName: 'modal-lg',
@@ -161,10 +161,9 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
     }),
-    // Excluding legacy modal launcher functions from dependencies.
-    // These use createModalLauncher() which creates referentially stable functions.
-    // As each modal migrates to useOverlay, it will use launchModal (which IS in deps).
-    // TODO(CONSOLE-5012): Remove this disable when all modals in this file use useOverlay
+    // Excluding stable modal launcher functions (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, launchModal],
   );

frontend/public/components/cluster-settings/cluster-settings.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import type { FC, ReactNode } from 'react';
+import { useEffect } from 'react';
 import * as _ from 'lodash';
 import { css } from '@patternfly/react-styles';
 import * as semver from 'semver';
@@ -37,7 +38,11 @@ import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import PaneBodyGroup from '@console/shared/src/components/layout/PaneBodyGroup';
 
 import { ClusterOperatorPage } from './cluster-operator';
-import { clusterChannelModal, clusterMoreUpdatesModal, clusterUpdateModal } from '../modals';
+import {
+  LazyClusterChannelModalOverlay,
+  LazyClusterMoreUpdatesModalOverlay,
+  LazyClusterUpdateModalOverlay,
+} from '../modals';
 import { GlobalConfigPage } from './global-config';
 import {
   ClusterAutoscalerModel,
@@ -167,6 +172,7 @@ const calculatePercentage = (numerator: number, denominator: number): number =>
 
 export const CurrentChannel: FC<CurrentChannelProps> = ({ cv, canUpgrade }) => {
   const { t } = useTranslation();
+  const launchModal = useOverlay();
   const label = cv.spec.channel || t('public~Not configured');
   return canUpgrade ? (
     <Button
@@ -175,7 +181,7 @@ export const CurrentChannel: FC<CurrentChannelProps> = ({ cv, canUpgrade }) => {
       type="button"
       isInline
       data-test-id="current-channel-update-link"
-      onClick={() => clusterChannelModal({ cv })}
+      onClick={() => launchModal(LazyClusterChannelModalOverlay, { cv: cv as ClusterVersionKind })}
       variant="link"
     >
       {label}
@@ -224,6 +230,7 @@ export const CurrentVersion: FC<CurrentVersionProps> = ({ cv }) => {
 };
 
 export const UpdateLink: FC<CurrentVersionProps> = ({ cv, canUpgrade }) => {
+  const launchModal = useOverlay();
   // assume if 'worker' is editable, others are too
   const workerMachineConfigPoolIsEditable = useAccessReview({
     group: MachineConfigPoolModel.apiGroup,
@@ -246,7 +253,7 @@ export const UpdateLink: FC<CurrentVersionProps> = ({ cv, canUpgrade }) => {
       <Button
         variant="primary"
         type="button"
-        onClick={() => clusterUpdateModal({ cv })}
+        onClick={() => launchModal(LazyClusterUpdateModalOverlay, { cv })}
         data-test-id="cv-update-button"
       >
         {t('public~Select a version')}
@@ -586,6 +593,7 @@ export const UpdatesGraph: FC<UpdatesGraphProps> = ({ cv }) => {
   const newestVersionIsBlocked =
     clusterUpgradeableFalse && minorVersionIsNewer && !isClusterExternallyManaged();
   const { t } = useTranslation();
+  const launchModal = useOverlay();
 
   return (
     <div className="co-cluster-settings__updates-graph" data-test="cv-updates-graph">
@@ -606,7 +614,7 @@ export const UpdatesGraph: FC<UpdatesGraphProps> = ({ cv }) => {
               <Button
                 variant="secondary"
                 className="co-channel-more-versions"
-                onClick={() => clusterMoreUpdatesModal({ cv })}
+                onClick={() => launchModal(LazyClusterMoreUpdatesModalOverlay, { cv })}
                 data-test="cv-more-updates-button"
               >
                 {t('public~+ More')}
@@ -899,15 +907,17 @@ export const ClusterVersionDetailsTable: FC<ClusterVersionDetailsTableProps> = (
   const desiredVersion = getDesiredClusterVersion(cv);
   const updateStartedTime = getStartedTimeForCVDesiredVersion(cv, desiredVersion);
   const workerMachineConfigPool = getMCPByName(machineConfigPools, NodeTypes.worker);
-  if (new URLSearchParams(window.location.search).has('showVersions')) {
-    clusterUpdateModal({ cv })
-      .then(() => removeQueryArgument('showVersions'))
-      .catch(_.noop);
-  } else if (new URLSearchParams(window.location.search).has('showChannels')) {
-    clusterChannelModal({ cv })
-      .then(() => removeQueryArgument('showChannels'))
-      .catch(_.noop);
-  }
+  const launchModal = useOverlay();
+
+  useEffect(() => {
+    if (new URLSearchParams(window.location.search).has('showVersions')) {
+      launchModal(LazyClusterUpdateModalOverlay, { cv });
+      removeQueryArgument('showVersions');
+    } else if (new URLSearchParams(window.location.search).has('showChannels')) {
+      launchModal(LazyClusterChannelModalOverlay, { cv });
+      removeQueryArgument('showChannels');
+    }
+  }, [launchModal, cv, removeQueryArgument]);
 
   return (
     <>

frontend/public/components/modals/cluster-channel-modal.tsx

@@ -1,20 +1,20 @@
 import type { FormEventHandler } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { TFunction } from 'i18next';
 import { Content, TextInput, ContentVariants } from '@patternfly/react-core';
 import * as semver from 'semver';
 
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { ChannelDocLink } from '../cluster-settings/cluster-settings';
 import { ClusterVersionModel } from '../../models';
 import { ConsoleSelect } from '@console/internal/components/utils/console-select';
 import { isManaged } from '../utils/documentation';
 import {
-  createModalLauncher,
   ModalBody,
   ModalComponentProps,
   ModalSubmitFooter,
   ModalTitle,
+  ModalWrapper,
 } from '../factory/modal';
 import {
   ClusterVersionKind,
@@ -109,9 +109,14 @@ const ClusterChannelModal = (props: ClusterChannelModalProps) => {
   );
 };
 
-export const clusterChannelModal = createModalLauncher(ClusterChannelModal);
+export const ClusterChannelModalOverlay: OverlayComponent<ClusterChannelModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ClusterChannelModal {...props} close={props.closeOverlay} cancel={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
 
 type ClusterChannelModalProps = {
   cv: ClusterVersionKind;
-  t: TFunction;
 } & ModalComponentProps;

frontend/public/components/modals/cluster-more-updates-modal.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionGroup, Button } from '@patternfly/react-core';
 
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { isClusterExternallyManaged } from '@console/shared/src/hooks/useCanClusterUpgrade';
 import {
   ClusterVersionKind,
@@ -17,7 +18,7 @@ import {
   ModalComponentProps,
   ModalFooter,
   ModalTitle,
-  createModalLauncher,
+  ModalWrapper,
 } from '../factory/modal';
 import {
   ClusterNotUpgradeableAlert,
@@ -89,7 +90,15 @@ export const ClusterMoreUpdatesModal: FC<ClusterMoreUpdatesModalProps> = ({ canc
   );
 };
 
-export const clusterMoreUpdatesModal = createModalLauncher(ClusterMoreUpdatesModal);
+export const ClusterMoreUpdatesModalOverlay: OverlayComponent<ClusterMoreUpdatesModalProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ClusterMoreUpdatesModal {...props} cancel={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
 
 export type ClusterMoreUpdatesModalProps = {
   cv: ClusterVersionKind;

frontend/public/components/modals/cluster-update-modal.tsx

@@ -27,8 +27,9 @@ import {
   referenceForModel,
   sortMCPsByCreationTimestamp,
 } from '../../module/k8s';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
-  createModalLauncher,
+  ModalWrapper,
   ModalBody,
   ModalComponentProps,
   ModalSubmitFooter,
@@ -338,7 +339,13 @@ const ClusterUpdateModal = (props: ClusterUpdateModalProps) => {
   );
 };
 
-export const clusterUpdateModal = createModalLauncher(ClusterUpdateModal);
+export const ClusterUpdateModalOverlay: OverlayComponent<ClusterUpdateModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ClusterUpdateModal {...props} close={props.closeOverlay} cancel={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
 
 type ClusterUpdateModalProps = {
   cv: ClusterVersionKind;

frontend/public/components/modals/index.ts

@@ -64,25 +64,35 @@ export const LazyDeletePVCModalOverlay = lazy(() =>
   })),
 );
 
-export const clusterChannelModal = (props) =>
-  import('./cluster-channel-modal' /* webpackChunkName: "cluster-channel-modal" */).then((m) =>
-    m.clusterChannelModal(props),
-  );
+// Lazy-loaded OverlayComponent for Cluster Channel Modal
+export const LazyClusterChannelModalOverlay = lazy(() =>
+  import('./cluster-channel-modal' /* webpackChunkName: "cluster-channel-modal" */).then((m) => ({
+    default: m.ClusterChannelModalOverlay,
+  })),
+);
 
-export const clusterMoreUpdatesModal = (props) =>
-  import(
-    './cluster-more-updates-modal' /* webpackChunkName: "cluster-more-updates-modal" */
-  ).then((m) => m.clusterMoreUpdatesModal(props));
+// Lazy-loaded OverlayComponent for Cluster More Updates Modal
+export const LazyClusterMoreUpdatesModalOverlay = lazy(() =>
+  import('./cluster-more-updates-modal' /* webpackChunkName: "cluster-more-updates-modal" */).then(
+    (m) => ({
+      default: m.ClusterMoreUpdatesModalOverlay,
+    }),
+  ),
+);
 
-export const clusterUpdateModal = (props) =>
-  import('./cluster-update-modal' /* webpackChunkName: "cluster-update-modal" */).then((m) =>
-    m.clusterUpdateModal(props),
-  );
+// Lazy-loaded OverlayComponent for Cluster Update Modal
+export const LazyClusterUpdateModalOverlay = lazy(() =>
+  import('./cluster-update-modal' /* webpackChunkName: "cluster-update-modal" */).then((m) => ({
+    default: m.ClusterUpdateModalOverlay,
+  })),
+);
 
-export const tolerationsModal = (props) =>
-  import('./tolerations-modal' /* webpackChunkName: "tolerations-modal" */).then((m) =>
-    m.tolerationsModal(props),
-  );
+// Lazy-loaded OverlayComponent for Tolerations Modal
+export const LazyTolerationsModalOverlay = lazy(() =>
+  import('./tolerations-modal' /* webpackChunkName: "tolerations-modal" */).then((m) => ({
+    default: m.TolerationsModalOverlay,
+  })),
+);
 
 // Lazy-loaded OverlayComponent for Expand PVC Modal
 export const LazyExpandPVCModalOverlay = lazy(() =>

frontend/public/components/modals/tolerations-modal.tsx

@@ -11,8 +11,9 @@ import { useTranslation } from 'react-i18next';
 import { ConsoleSelect } from '@console/internal/components/utils/console-select';
 import { EmptyBox } from '../utils/status-box';
 import { K8sKind, k8sPatch, Toleration, TolerationOperator } from '../../module/k8s';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
-  createModalLauncher,
+  ModalWrapper,
   ModalBody,
   ModalComponentProps,
   ModalSubmitFooter,
@@ -238,7 +239,13 @@ const TolerationsModal = (props: TolerationsModalProps) => {
   );
 };
 
-export const tolerationsModal = createModalLauncher(TolerationsModal);
+export const TolerationsModalOverlay: OverlayComponent<TolerationsModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay} className={props.modalClassName}>
+      <TolerationsModal {...props} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
 
 type TolerationModalItem = {
   // isNew is used internally in the dialog to track existing vs new
@@ -251,4 +258,5 @@ export type TolerationsModalProps = {
   resource: any;
   existingReadOnly?: boolean;
   close?: () => void;
+  modalClassName?: string;
 } & ModalComponentProps;

frontend/public/locales/en/public.json

@@ -830,8 +830,6 @@
   "Add secret as": "Add secret as",
   "Prefix": "Prefix",
   "Volume": "Volume",
-  "Add Users": "Add Users",
-  "Add new Users to Group {{name}}.": "Add new Users to Group {{name}}.",
   "Edit routing configuration": "Edit routing configuration",
   "Group by": "Group by",
   "Group wait": "Group wait",
@@ -1751,6 +1749,7 @@
   "Edit Pod count": "Edit Pod count",
   "{{resourceKinds}} maintain the desired number of healthy pods.": "{{resourceKinds}} maintain the desired number of healthy pods.",
   "Impersonate Group {{name}}": "Impersonate Group {{name}}",
+  "Add Users": "Add Users",
   "Edit Machine count": "Edit Machine count",
   "Start build": "Start build",
   "Start last run": "Start last run",