CONSOLE-5012: Migrate confirmModal to overlay pattern

This commit migrates all instances of confirmModal to use the modern
overlay pattern with useWarningModal, completing the modal migration
effort started in previous PRs.

Changes:
- Removed deprecated confirmModal launcher and confirm-modal.tsx file
- Migrated topology moveNodeToGroup to use useWarningModal with proper
  cancel handling via global handler pattern
- Updated StopNodeMaintenanceModal to remove deprecated imperative API
  and keep only the useStopNodeMaintenanceModal hook
- Fixed useWarningModal to properly call closeOverlay() and filter it
  from props spread to prevent React DOM warnings
- Added try-catch in topology drag-drop to prevent optimistic update
  when user cancels the move operation
- Updated all metal3-plugin maintenance components to use the hook-based
  approach

This PR builds upon and depends on:
- openshift#15932 (ResourceLimitsModal migration)
- openshift#15939 (DeletePDBModal migration)
- openshift#15940 (ConfigureUnschedulableModal migration)
- openshift#15946 (Global error modal utility)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: rhamilto

frontend/packages/console-shared/src/hooks/useWarningModal.tsx

@@ -6,17 +6,22 @@ import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/us
 /**
  * ControlledWarningModal is a wrapper around WarningModal that manages its open state.
  */
-const ControlledWarningModal: FC<WarningModalProps> = (props) => {
+const ControlledWarningModal: FC<WarningModalProps & { closeOverlay?: () => void }> = ({
+  closeOverlay,
+  ...props
+}) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const onClose: WarningModalProps['onClose'] = (e) => {
     setIsOpen(false);
     props.onClose?.(e);
+    closeOverlay?.();
   };
 
   const onConfirm: WarningModalProps['onConfirm'] = () => {
     setIsOpen(false);
     props.onConfirm?.();
+    closeOverlay?.();
   };
 
   return <WarningModal {...props} isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} />;

frontend/packages/metal3-plugin/src/components/maintenance/StartingMaintenancePopoverContent.tsx

@@ -20,7 +20,7 @@ import {
   getNodeMaintenanceLastError,
   getNodeMaintenancePendingPods,
 } from '../../selectors';
-import stopNodeMaintenanceModal from '../modals/StopNodeMaintenanceModal';
+import { useStopNodeMaintenanceModal } from '../modals/StopNodeMaintenanceModal';
 import MaintenancePopoverPodList from './MaintenancePopoverPodList';
 
 type StartingMaintenancePopoverContentProps = {
@@ -31,6 +31,7 @@ const StartingMaintenancePopoverContent: FC<StartingMaintenancePopoverContentPro
   nodeMaintenance,
 }) => {
   const { t } = useTranslation();
+  const stopNodeMaintenanceModalLauncher = useStopNodeMaintenanceModal(nodeMaintenance);
   const reason = getNodeMaintenanceReason(nodeMaintenance);
   const creationTimestamp = getNodeMaintenanceCreationTimestamp(nodeMaintenance);
   const lastError = getNodeMaintenanceLastError(nodeMaintenance);
@@ -78,7 +79,7 @@ const StartingMaintenancePopoverContent: FC<StartingMaintenancePopoverContentPro
         <MaintenancePopoverPodList pods={pendingPods} />
       </ExpandableSection>
       <br />
-      <Button variant="link" onClick={() => stopNodeMaintenanceModal(nodeMaintenance, t)} isInline>
+      <Button variant="link" onClick={() => stopNodeMaintenanceModalLauncher()} isInline>
         {t('metal3-plugin~Stop maintenance')}
       </Button>
     </>

frontend/packages/metal3-plugin/src/components/maintenance/UnderMaintenancePopoverContent.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
 import { getNodeMaintenanceReason, getNodeMaintenanceCreationTimestamp } from '../../selectors';
-import stopNodeMaintenanceModal from '../modals/StopNodeMaintenanceModal';
+import { useStopNodeMaintenanceModal } from '../modals/StopNodeMaintenanceModal';
 
 type UnderMaintenancePopoverContentProps = {
   nodeMaintenance: K8sResourceKind;
@@ -20,6 +20,7 @@ const UnderMaintenancePopoverContent: FC<UnderMaintenancePopoverContentProps> =
   nodeMaintenance,
 }) => {
   const { t } = useTranslation();
+  const stopNodeMaintenanceModalLauncher = useStopNodeMaintenanceModal(nodeMaintenance);
   const reason = getNodeMaintenanceReason(nodeMaintenance);
   const creationTimestamp = getNodeMaintenanceCreationTimestamp(nodeMaintenance);
 
@@ -43,7 +44,7 @@ const UnderMaintenancePopoverContent: FC<UnderMaintenancePopoverContentProps> =
         </DescriptionListGroup>
       </DescriptionList>
       <br />
-      <Button variant="link" onClick={() => stopNodeMaintenanceModal(nodeMaintenance, t)} isInline>
+      <Button variant="link" onClick={() => stopNodeMaintenanceModalLauncher()} isInline>
         {t('metal3-plugin~Stop maintenance')}
       </Button>
     </>

frontend/packages/metal3-plugin/src/components/maintenance/actions.tsx

@@ -6,7 +6,7 @@ import { NodeKind } from '@console/internal/module/k8s';
 import { useMaintenanceCapability } from '../../hooks/useMaintenanceCapability';
 import { findNodeMaintenance } from '../../selectors';
 import { useStartNodeMaintenanceModalLauncher } from '../modals/StartNodeMaintenanceModal';
-import stopNodeMaintenanceModal from '../modals/StopNodeMaintenanceModal';
+import { useStopNodeMaintenanceModal } from '../modals/StopNodeMaintenanceModal';
 
 export const useNodeMaintenanceActions: ExtensionHook<Action[], NodeKind> = (resource) => {
   const { t } = useTranslation();
@@ -24,9 +24,10 @@ export const useNodeMaintenanceActions: ExtensionHook<Action[], NodeKind> = (res
     namespaced: false,
   });
 
-  const actions = useMemo(() => {
-    const nodeMaintenance = findNodeMaintenance(maintenances, resource.metadata.name);
+  const nodeMaintenance = findNodeMaintenance(maintenances, resource.metadata.name);
+  const stopNodeMaintenanceModalLauncher = useStopNodeMaintenanceModal(nodeMaintenance);
 
+  const actions = useMemo(() => {
     let action: Action = {
       id: 'start-node-maintenance',
       label: t('metal3-plugin~Start Maintenance'),
@@ -38,13 +39,13 @@ export const useNodeMaintenanceActions: ExtensionHook<Action[], NodeKind> = (res
       action = {
         id: 'stop-node-maintenance',
         label: t('metal3-plugin~Stop Maintenance'),
-        cta: () => stopNodeMaintenanceModal(nodeMaintenance, t),
+        cta: () => stopNodeMaintenanceModalLauncher(),
         insertBefore: 'edit-labels',
       };
     }
     return [action];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [maintenances, resource.metadata.name, t]);
+  }, [maintenances, resource.metadata.name, t, stopNodeMaintenanceModalLauncher]);
 
   return [actions, loading, loadError];
 };

frontend/packages/metal3-plugin/src/components/modals/StopNodeMaintenanceModal.tsx

@@ -1,6 +1,4 @@
-import { TFunction } from 'i18next';
 import { Trans, useTranslation } from 'react-i18next';
-import { confirmModal } from '@console/internal/components/modals/confirm-modal';
 import { k8sKill, K8sResourceKind } from '@console/internal/module/k8s';
 import { useWarningModal } from '@console/shared/src/hooks/useWarningModal';
 import {
@@ -26,23 +24,6 @@ const getMaintenanceModel = (nodeMaintenance: K8sResourceKind) => {
   return NodeMaintenanceKubevirtAlphaModel;
 };
 
-const stopNodeMaintenanceModal = (nodeMaintenance: K8sResourceKind, t: TFunction) => {
-  const reason = getNodeMaintenanceReason(nodeMaintenance);
-  const reasonLabel = reason ? `(${reason})` : '';
-  const nodeName = getNodeMaintenanceNodeName(nodeMaintenance);
-  return confirmModal({
-    title: t('metal3-plugin~Stop maintenance'),
-    message: (
-      <Trans t={t} ns="metal3-plugin">
-        Are you sure you want to stop maintenance <strong>{reasonLabel}</strong> on node{' '}
-        <strong>{nodeName}</strong>?
-      </Trans>
-    ),
-    btnText: t('metal3-plugin~Stop maintenance'),
-    executeFn: () => k8sKill(getMaintenanceModel(nodeMaintenance), nodeMaintenance),
-  });
-};
-
 export const useStopNodeMaintenanceModal = (nodeMaintenance: K8sResourceKind) => {
   const { t } = useTranslation();
   const reason = getNodeMaintenanceReason(nodeMaintenance);
@@ -61,5 +42,3 @@ export const useStopNodeMaintenanceModal = (nodeMaintenance: K8sResourceKind) =>
   });
   return stopNodeMaintenanceModalLauncher;
 };
-
-export default stopNodeMaintenanceModal;

frontend/packages/topology/src/components/graph-view/Topology.tsx

@@ -41,7 +41,7 @@ import { TOPOLOGY_LAYOUT_CONFIG_STORAGE_KEY, TOPOLOGY_LAYOUT_LOCAL_STORAGE_KEY }
 import { odcElementFactory } from '../../elements';
 import { getTopologyGraphModel, setTopologyGraphModel } from '../../redux/action';
 import { SHOW_GROUPING_HINT_EVENT, ShowGroupingHintEventListener } from '../../topology-types';
-import { useSetupMoveNodeToGroupErrorHandler } from '../../utils';
+import { useSetupMoveNodeToGroupHandlers } from '../../utils';
 import { componentFactory } from './components';
 import { DEFAULT_LAYOUT, SUPPORTED_LAYOUTS, layoutFactory } from './layouts/layoutFactory';
 import TopologyControlBar from './TopologyControlBar';
@@ -154,8 +154,8 @@ const Topology: FC<
     TopologyComponentFactory
   >(isTopologyComponentFactory);
 
-  // Setup global error handlers for topology operations
-  useSetupMoveNodeToGroupErrorHandler();
+  // Setup global error and confirmation handlers for topology operations
+  useSetupMoveNodeToGroupHandlers();
   useSetupGlobalErrorModalLauncher();
 
   const createVisualization = useCallback(() => {

frontend/packages/topology/src/components/graph-view/components/componentUtils.ts

@@ -136,18 +136,23 @@ const nodeDragSourceSpec = (
       if (monitor.didDrop() && dropResult && props && props.element.getParent() !== dropResult) {
         const controller = props.element.getController();
 
-        await moveNodeToGroup(
-          props.element as Node,
-          isNode(dropResult) ? (dropResult as Node) : null,
-        );
-
-        // perform the optimistic update in an action so as not to render too soon
-        action(() => {
-          // FIXME: check shouldn't be necessary if we handled the async and backend data refresh correctly
-          if (controller.getNodeById(props.element.getId())) {
-            dropResult.appendChild(props.element);
-          }
-        })();
+        try {
+          await moveNodeToGroup(
+            props.element as Node,
+            isNode(dropResult) ? (dropResult as Node) : null,
+          );
+
+          // perform the optimistic update in an action so as not to render too soon
+          action(() => {
+            // FIXME: check shouldn't be necessary if we handled the async and backend data refresh correctly
+            if (controller.getNodeById(props.element.getId())) {
+              dropResult.appendChild(props.element);
+            }
+          })();
+        } catch (error) {
+          // User cancelled or operation failed - don't perform the optimistic update
+          // The node will remain in its original position
+        }
       } else {
         // cancel operation
         return Promise.reject();

frontend/packages/topology/src/utils/moveNodeToGroup.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from 'react';
 import { Node } from '@patternfly/react-topology';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
-import { confirmModal } from '@console/internal/components/modals';
 import { ErrorModal, ErrorModalProps } from '@console/internal/components/modals/error-modal';
+import { useWarningModal } from '@console/shared/src/hooks/useWarningModal';
 import { updateTopologyResourceApplication } from './topology-utils';
 
 // Module-level error handler that can be set by the Topology component
@@ -13,6 +13,31 @@ export const setMoveNodeToGroupErrorHandler = (handler: ((error: string) => void
   globalErrorHandler = handler;
 };
 
+// Module-level confirm handler that can be set by the Topology component
+let globalConfirmHandler:
+  | ((
+      title: string,
+      message: React.ReactNode,
+      confirmButtonText: string,
+      onConfirm: () => Promise<void>,
+      onCancel: () => void,
+    ) => void)
+  | null = null;
+
+export const setMoveNodeToGroupConfirmHandler = (
+  handler:
+    | ((
+        title: string,
+        message: React.ReactNode,
+        confirmButtonText: string,
+        onConfirm: () => Promise<void>,
+        onCancel: () => void,
+      ) => void)
+    | null,
+) => {
+  globalConfirmHandler = handler;
+};
+
 export const moveNodeToGroup = (
   node: Node,
   targetGroup: Node,
@@ -24,14 +49,14 @@ export const moveNodeToGroup = (
   }
 
   if (sourceGroup) {
-    // t('topology~Move component node')
-    // t('topology~Remove component node from application')
-    const titleKey = targetGroup
-      ? 'topology~Move component node'
-      : 'topology~Remove component node from application';
     const nodeLabel = node.getLabel();
     const sourceLabel = sourceGroup.getLabel();
     const targetLabel = targetGroup?.getLabel();
+
+    // t('topology~Move component node')
+    // t('topology~Remove component node from application')
+    const title = targetGroup ? 'Move component node' : 'Remove component node from application';
+
     const message = targetGroup ? (
       <Trans ns="topology">
         Are you sure you want to move <strong>{{ nodeLabel }}</strong> from {{ sourceLabel }} to{' '}
@@ -42,37 +67,35 @@ export const moveNodeToGroup = (
         Are you sure you want to remove <strong>{{ nodeLabel }}</strong> from {{ sourceLabel }}?
       </Trans>
     );
+
     // t('topology~Move')
     // t('topology~Remove')
-    const btnTextKey = targetGroup ? 'topology~Move' : 'topology~Remove';
+    const confirmButtonText = targetGroup ? 'Move' : 'Remove';
 
     return new Promise((resolve, reject) => {
-      confirmModal({
-        titleKey,
-        message,
-        btnTextKey,
-        close: () => {
-          reject();
-        },
-        cancel: () => {
-          reject();
-        },
-        executeFn: () => {
-          return updateTopologyResourceApplication(
-            node,
-            targetGroup ? targetGroup.getLabel() : null,
-          )
-            .then(resolve)
-            .catch((err) => {
-              const error = err.message;
-              const errorHandler = onError || globalErrorHandler;
-              if (errorHandler) {
-                errorHandler(error);
-              }
-              reject(err);
-            });
-        },
-      });
+      if (!globalConfirmHandler) {
+        reject(new Error('Confirm handler not initialized'));
+        return;
+      }
+
+      const handleConfirm = () => {
+        return updateTopologyResourceApplication(node, targetGroup ? targetGroup.getLabel() : null)
+          .then(resolve)
+          .catch((err) => {
+            const error = err.message;
+            const errorHandler = onError || globalErrorHandler;
+            if (errorHandler) {
+              errorHandler(error);
+            }
+            reject(err);
+          });
+      };
+
+      const handleCancel = () => {
+        reject(new Error('User cancelled'));
+      };
+
+      globalConfirmHandler(title, message, confirmButtonText, handleConfirm, handleCancel);
     });
   }
 
@@ -86,6 +109,49 @@ export const moveNodeToGroup = (
 };
 
 /**
+ * Hook that sets up both error and confirm handling for moveNodeToGroup using useOverlay.
+ * This sets global handlers that will be used by all moveNodeToGroup calls.
+ */
+export const useSetupMoveNodeToGroupHandlers = () => {
+  const { t } = useTranslation();
+  const launcher = useOverlay();
+  const launchWarningModal = useWarningModal();
+
+  useEffect(() => {
+    const errorHandler = (error: string) => {
+      launcher<ErrorModalProps>(ErrorModal, { error });
+    };
+
+    const confirmHandler = (
+      title: string,
+      message: React.ReactNode,
+      confirmButtonText: string,
+      onConfirm: () => Promise<void>,
+      onCancel: () => void,
+    ) => {
+      launchWarningModal({
+        title: t(`topology~${title}`),
+        children: message,
+        confirmButtonLabel: t(`topology~${confirmButtonText}`),
+        onConfirm,
+        onClose: onCancel,
+      });
+    };
+
+    setMoveNodeToGroupErrorHandler(errorHandler);
+    setMoveNodeToGroupConfirmHandler(confirmHandler);
+
+    return () => {
+      setMoveNodeToGroupErrorHandler(null);
+      setMoveNodeToGroupConfirmHandler(null);
+    };
+    // Intentionally only run once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+/**
+ * @deprecated Use useSetupMoveNodeToGroupHandlers in the parent component instead
  * Hook that sets up error handling for moveNodeToGroup using useOverlay.
  * This sets a global error handler that will be used by all moveNodeToGroup calls.
  */