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

@@ -7,8 +7,6 @@ import {
   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 {
@@ -90,7 +89,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 +99,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>
   );

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

@@ -1,17 +1,21 @@
 import * as _ from 'lodash';
 import type { ReactNode } from 'react';
 import { useState, useCallback, useEffect } from 'react';
-import { Alert, Checkbox } from '@patternfly/react-core';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Form,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-import {
-  ModalTitle,
-  ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-  ModalComponentProps,
-} from '../factory/modal';
+import { ModalComponentProps } from '../factory/modal';
 import { resourceListPathFromModel, ResourceLink } from '../utils/resource-link';
 import {
   k8sKill,
@@ -24,6 +28,7 @@ import {
 import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
 import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager/src/models';
 import { findOwner } from '../../module/k8s/managed-by';
+import { ModalErrorContent } from '@console/shared/src/components/modal-error-content';
 
 import { LocationDescriptor } from 'history';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
@@ -87,93 +92,116 @@ export const DeleteModal = (props: DeleteModalProps) => {
   });
 
   const { kind, resource, message } = props;
+
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>
-        <YellowExclamationTriangleIcon className="co-icon-space-r" />{' '}
-        {t('public~Delete {{kind}}?', {
-          kind: kind ? (kind.labelKey ? t(kind.labelKey) : kind.label) : '',
-        })}
-      </ModalTitle>
-      <ModalBody className="modal-body">
-        {message}
-        <div>
-          {_.has(resource.metadata, 'namespace') ? (
-            <Trans t={t} ns="public">
-              Are you sure you want to delete{' '}
-              <strong className="co-break-word">
-                {{ resourceName: resource?.metadata?.name }}
-              </strong>{' '}
-              in namespace <strong>{{ namespace: resource?.metadata?.namespace }}</strong>?
-            </Trans>
-          ) : (
-            <Trans t={t} ns="public">
-              Are you sure you want to delete{' '}
-              <strong className="co-break-word">
-                {{ resourceName: resource?.metadata?.name }}
-              </strong>
-              ?
-            </Trans>
-          )}
-          {_.has(kind, 'propagationPolicy') && (
-            <Checkbox
-              label={t('public~Delete dependent objects of this resource')}
-              onChange={(_event, checked) => setIsChecked(checked)}
-              isChecked={isChecked}
-              name="deleteDependentObjects"
-              id="deleteDependentObjects"
-            />
-          )}
-          {props.deleteAllResources && (
-            <Checkbox
-              label={t('public~Delete other resources created by console')}
-              onChange={(_event, checked) => setIsDeleteOtherResourcesChecked(checked)}
-              isChecked={isDeleteOtherResourcesChecked}
-              name="deleteOtherResources"
-              id="deleteOtherResources"
-            />
-          )}
-          {owner && (
-            <Alert
-              className="co-alert co-alert--margin-top"
-              isInline
-              variant="warning"
-              title={t('public~Managed resource')}
-            >
+    <>
+      <ModalHeader
+        title={
+          <>
+            <YellowExclamationTriangleIcon className="co-icon-space-r" />{' '}
+            {t('public~Delete {{kind}}?', {
+              kind: kind ? (kind.labelKey ? t(kind.labelKey) : kind.label) : '',
+            })}
+          </>
+        }
+      />
+      <ModalBody>
+        <Form id="delete-modal-form" onSubmit={submit}>
+          {message}
+          <div>
+            {_.has(resource.metadata, 'namespace') ? (
               <Trans t={t} ns="public">
-                This resource is managed by{' '}
-                <ResourceLink
-                  className="modal__inline-resource-link"
-                  inline
-                  kind={referenceForOwnerRef(owner)}
-                  name={owner.name}
-                  namespace={resource.metadata.namespace}
-                  onClick={props.cancel}
-                />{' '}
-                and any modifications may be overwritten. Edit the managing resource to preserve
-                changes.
+                Are you sure you want to delete{' '}
+                <strong className="co-break-word">
+                  {{ resourceName: resource?.metadata?.name }}
+                </strong>{' '}
+                in namespace <strong>{{ namespace: resource?.metadata?.namespace }}</strong>?
               </Trans>
-            </Alert>
-          )}
-        </div>
+            ) : (
+              <Trans t={t} ns="public">
+                Are you sure you want to delete{' '}
+                <strong className="co-break-word">
+                  {{ resourceName: resource?.metadata?.name }}
+                </strong>
+                ?
+              </Trans>
+            )}
+            {_.has(kind, 'propagationPolicy') && (
+              <Checkbox
+                label={t('public~Delete dependent objects of this resource')}
+                onChange={(_event, checked) => setIsChecked(checked)}
+                isChecked={isChecked}
+                name="deleteDependentObjects"
+                id="deleteDependentObjects"
+              />
+            )}
+            {props.deleteAllResources && (
+              <Checkbox
+                label={t('public~Delete other resources created by console')}
+                onChange={(_event, checked) => setIsDeleteOtherResourcesChecked(checked)}
+                isChecked={isDeleteOtherResourcesChecked}
+                name="deleteOtherResources"
+                id="deleteOtherResources"
+              />
+            )}
+            {owner && (
+              <Alert
+                className="co-alert co-alert--margin-top"
+                isInline
+                variant="warning"
+                title={t('public~Managed resource')}
+              >
+                <Trans t={t} ns="public">
+                  This resource is managed by{' '}
+                  <ResourceLink
+                    className="modal__inline-resource-link"
+                    inline
+                    kind={referenceForOwnerRef(owner)}
+                    name={owner.name}
+                    namespace={resource.metadata.namespace}
+                    onClick={props.cancel}
+                  />{' '}
+                  and any modifications may be overwritten. Edit the managing resource to preserve
+                  changes.
+                </Trans>
+              </Alert>
+            )}
+          </div>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitDanger
-        submitText={props.btnText || t('public~Delete')}
-        cancel={props.cancel}
-      />
-    </form>
+      <ModalFooter className="pf-v6-u-flex-wrap">
+        <ModalErrorContent errorMessage={errorMessage} data-test="alert-error" />
+        <Button
+          variant="danger"
+          type="submit"
+          form="delete-modal-form"
+          isLoading={inProgress}
+          isDisabled={inProgress}
+          data-test="confirm-action"
+          id="confirm-action"
+        >
+          {props.btnText || t('public~Delete')}
+        </Button>
+        <Button variant="link" onClick={props.cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooter>
+    </>
   );
 };
 
 export const DeleteModalOverlay: OverlayComponent<DeleteModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <DeleteModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal variant={ModalVariant.small} isOpen onClose={handleClose}>
+      <DeleteModal {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
 };
 
 export type DeleteModalProps = {