Migrate DeleteModal and related modals to modern PatternFly Modal

- Migrate DeleteModal from deprecated factory/modal components to
  modern PatternFly v6 Modal components
- Create reusable ModalErrorContent component for error display
- Update configure-count-modal and configure-machine-autoscaler-modal
  to use modern Modal components and ModalErrorContent
- Fix button order in add-group-users-modal (Primary first, Cancel second)

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

Author: rhamilto

frontend/packages/console-shared/src/components/modal-error-content/ModalErrorContent.tsx

@@ -0,0 +1,40 @@
+import type { FC, ReactNode } from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export interface ModalErrorContentProps {
+  /** The error message to display */
+  errorMessage?: ReactNode;
+  /** Optional additional CSS class names */
+  className?: string;
+  /** Optional data-test attribute for testing */
+  'data-test'?: string;
+}
+
+/**
+ * Displays an error message in a modal footer using PatternFly HelperText.
+ *
+ * @example
+ * ```tsx
+ * <ModalFooter>
+ *   <ModalErrorContent errorMessage={errorMessage} />
+ *   {/* modal footer buttons *\/}
+ * </ModalFooter>
+ * ```
+ */
+export const ModalErrorContent: FC<ModalErrorContentProps> = ({
+  errorMessage,
+  className = 'pf-v6-u-w-100 pf-v6-u-mb-md',
+  'data-test': dataTest = 'modal-error',
+}) => {
+  if (!errorMessage) {
+    return null;
+  }
+
+  return (
+    <HelperText isLiveRegion className={className}>
+      <HelperTextItem variant="error" data-test={dataTest}>
+        {errorMessage}
+      </HelperTextItem>
+    </HelperText>
+  );
+};

frontend/packages/console-shared/src/components/modal-error-content/index.ts

@@ -0,0 +1 @@
+export * from './ModalErrorContent';

frontend/public/components/modals/configure-count-modal.tsx

@@ -1,14 +1,12 @@
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import {
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   Button,
-  HelperText,
-  HelperTextItem,
   FormGroup,
   Form,
 } from '@patternfly/react-core';
@@ -18,6 +16,7 @@ import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { K8sResourceKind, K8sModel } from '../../module/k8s';
 import { NumberSpinner, NumberSpinnerProps } from '../utils/number-spinner';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { ModalErrorContent } from '@console/shared/src/components/modal-error-content';
 
 export const ConfigureCountModal: OverlayComponent<ConfigureCountModalProps> = (props) => {
   const {
@@ -43,6 +42,13 @@ export const ConfigureCountModal: OverlayComponent<ConfigureCountModalProps> = (
   const { t } = useTranslation();
   const [handlePromise, inProgress, errorMessage] = usePromiseHandler();
 
+  // Move focus away from the triggering element to prevent aria-hidden warning
+  useEffect(() => {
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }, []);
+
   const submit = useCallback(
     (e) => {
       e.preventDefault();
@@ -90,7 +96,7 @@ export const ConfigureCountModal: OverlayComponent<ConfigureCountModalProps> = (
         description={messageKey ? t(messageKey, messageVariablesSafe) : message}
       />
       <ModalBody>
-        <Form>
+        <Form id="configure-count-form" onSubmit={submit}>
           <FormGroup>
             <NumberSpinner
               value={value}
@@ -100,21 +106,17 @@ export const ConfigureCountModal: OverlayComponent<ConfigureCountModalProps> = (
               required
               min={0}
             />
-            {errorMessage && (
-              <HelperText isLiveRegion className="pf-v6-u-mt-md">
-                <HelperTextItem variant="error">{errorMessage}</HelperTextItem>
-              </HelperText>
-            )}
           </FormGroup>
         </Form>
       </ModalBody>
-      <ModalFooter>
-        <Button variant="secondary" onClick={closeOverlay} type="button">
-          {t('public~Cancel')}
-        </Button>
-        <Button variant="primary" isLoading={inProgress} onClick={submit}>
+      <ModalFooter className="pf-v6-u-flex-wrap">
+        <ModalErrorContent errorMessage={errorMessage} />
+        <Button variant="primary" type="submit" form="configure-count-form" isLoading={inProgress}>
           {buttonTextKey ? t(buttonTextKey, buttonTextVariables) : buttonText}
         </Button>
+        <Button variant="link" onClick={closeOverlay} type="button">
+          {t('public~Cancel')}
+        </Button>
       </ModalFooter>
     </Modal>
   );

frontend/public/components/modals/configure-machine-autoscaler-modal.tsx

@@ -8,8 +8,6 @@ import {
   ModalBody,
   ModalFooter,
   Button,
-  HelperText,
-  HelperTextItem,
   FormGroup,
   Form,
 } from '@patternfly/react-core';
@@ -20,6 +18,7 @@ import { resourcePathFromModel } from '../utils/resource-link';
 import { K8sResourceKind } from '../../module/k8s';
 import { k8sCreateResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { ModalErrorContent } from '@console/shared/src/components/modal-error-content';
 
 export const ConfigureMachineAutoscalerModal: OverlayComponent<ConfigureMachineAutoscalerModalProps> = ({
   machineSet,
@@ -116,7 +115,7 @@ export const ConfigureMachineAutoscalerModal: OverlayComponent<ConfigureMachineA
         description={t('public~This will automatically scale machine set {{ name }}.', { name })}
       />
       <ModalBody>
-        <Form>
+        <Form id="create-machineautoscaler-form">
           <FormGroup label={t('public~Minimum replicas:')} fieldId="min-replicas" isRequired>
             <NumberSpinner
               value={minReplicas}
@@ -134,20 +133,21 @@ export const ConfigureMachineAutoscalerModal: OverlayComponent<ConfigureMachineA
               required
             />
           </FormGroup>
-          {errorMessage && (
-            <HelperText isLiveRegion className="pf-v6-u-mt-md">
-              <HelperTextItem variant="error">{errorMessage}</HelperTextItem>
-            </HelperText>
-          )}
         </Form>
       </ModalBody>
-      <ModalFooter>
-        <Button variant="secondary" onClick={closeOverlay || cancelProp} type="button">
-          {t('public~Cancel')}
-        </Button>
-        <Button variant="primary" isLoading={inProgress} onClick={submit}>
+      <ModalFooter className="pf-v6-u-flex-wrap">
+        <ModalErrorContent errorMessage={errorMessage} />
+        <Button
+          variant="primary"
+          isLoading={inProgress}
+          onClick={submit}
+          form="create-machineautoscaler-form"
+        >
           {t('public~Create')}
         </Button>
+        <Button variant="link" onClick={closeOverlay || cancelProp} type="button">
+          {t('public~Cancel')}
+        </Button>
       </ModalFooter>
     </Modal>
   );