From 1120313177d21e9c2beda22e57ea50f2fa39ac8d Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Tue, 10 Feb 2026 16:37:07 -0500
Subject: [PATCH] CONSOLE-4447: Migrate core modals to PatternFly v6

---
 .../src/hooks/useLabelsModal.tsx              |  20 +-
 .../modals/add-secret-to-workload.tsx         | 262 +++++++------
 .../components/modals/alert-routing-modal.tsx |  71 +++-
 .../configure-cluster-upstream-modal.tsx      | 246 ++++++------
 .../modals/configure-ns-pull-secret-modal.tsx | 363 +++++++++---------
 .../configure-update-strategy-modal.tsx       |  94 +++--
 .../components/modals/expand-pvc-modal.tsx    |  90 +++--
 .../public/components/modals/labels-modal.tsx | 129 ++++---
 .../modals/managed-resource-save-modal.tsx    |  95 +++--
 .../components/modals/remove-volume-modal.tsx |  83 ++--
 frontend/public/style/_common.scss            |   4 -
 11 files changed, 852 insertions(+), 605 deletions(-)

diff --git a/frontend/packages/console-shared/src/hooks/useLabelsModal.tsx b/frontend/packages/console-shared/src/hooks/useLabelsModal.tsx
index d7601e21047..3916bc3e649 100644
--- a/frontend/packages/console-shared/src/hooks/useLabelsModal.tsx
+++ b/frontend/packages/console-shared/src/hooks/useLabelsModal.tsx
@@ -1,27 +1,17 @@
 import { useCallback } from 'react';
-import type { ModalComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
-import { useModal } from '@console/dynamic-plugin-sdk/src/app/modal-support/useModal';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import type { UseLabelsModal } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 import { useK8sModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sModel';
 import { getGroupVersionKindForResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
-import { ModalWrapper } from '@console/internal/components/factory/modal';
 import type { LabelsModalProps } from '@console/internal/components/modals/labels-modal';
-import { LabelsModal } from '@console/internal/components/modals/labels-modal';
-
-const LabelsModalComponent: ModalComponent<LabelsModalProps> = ({ closeModal, kind, resource }) => {
-  return (
-    <ModalWrapper blocking onClose={closeModal}>
-      <LabelsModal cancel={closeModal} close={closeModal} kind={kind} resource={resource} />
-    </ModalWrapper>
-  );
-};
+import { LabelsModalOverlay } from '@console/internal/components/modals/labels-modal';
 
 export const useLabelsModal: UseLabelsModal = (resource) => {
-  const launcher = useModal();
+  const launchModal = useOverlay();
   const groupVersionKind = getGroupVersionKindForResource(resource);
   const [kind] = useK8sModel(groupVersionKind);
   return useCallback(
-    () => resource && kind && launcher<LabelsModalProps>(LabelsModalComponent, { kind, resource }),
-    [launcher, kind, resource],
+    () => resource && kind && launchModal<LabelsModalProps>(LabelsModalOverlay, { kind, resource }),
+    [launchModal, kind, resource],
   );
 };
diff --git a/frontend/public/components/modals/add-secret-to-workload.tsx b/frontend/public/components/modals/add-secret-to-workload.tsx
index 36b454e1835..04b0fb0e903 100644
--- a/frontend/public/components/modals/add-secret-to-workload.tsx
+++ b/frontend/public/components/modals/add-secret-to-workload.tsx
@@ -3,11 +3,22 @@ import { useState, useEffect, useCallback } from 'react';
 import * as _ from 'lodash';
 import * as fuzzy from 'fuzzysearch';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { FormGroup, Radio } from '@patternfly/react-core';
+import {
+  Button,
+  Content,
+  ContentVariants,
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+  Radio,
+  TextInput,
+} from '@patternfly/react-core';
 
 import { K8sKind, k8sList, k8sPatch, K8sResourceKind } from '../../module/k8s';
 import { DeploymentModel, DeploymentConfigModel, StatefulSetModel } from '../../models';
-import { ModalTitle, ModalBody, ModalSubmitFooter, ModalWrapper } from '../factory/modal';
 import { ConsoleSelect } from '@console/internal/components/utils/console-select';
 import { ResourceIcon, ResourceName } from '../utils/resource-icon';
 import { resourcePathFromModel } from '../utils/resource-link';
@@ -16,6 +27,8 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { ModalCallback } from './types';
+import type { ModalComponentProps } from '../factory';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 const workloadResourceModels = [DeploymentModel, DeploymentConfigModel, StatefulSetModel];
 const getContainers = (workload: K8sResourceKind) =>
@@ -167,132 +180,154 @@ export const AddSecretToWorkloadModal: FC<AddSecretToWorkloadModalProps> = (prop
   const selectWorkloadPlaceholder = t('public~Select a workload');
 
   return (
-    <form
-      onSubmit={submit}
-      name="co-add-secret-to-workload"
-      className="co-add-secret-to-workload modal-content"
-    >
-      <ModalTitle>{t('public~Add secret to workload')}</ModalTitle>
+    <>
+      <ModalHeader
+        title={t('public~Add secret to workload')}
+        data-test-id="modal-title"
+        labelId="add-secret-to-workload-modal-title"
+      />
       <ModalBody>
-        <p className="modal-paragraph">
+        <Content component={ContentVariants.p}>
           <Trans t={t} ns="public">
             Add all values from <ResourceIcon kind="Secret" />
             {{ secretName }} to a workload as environment variables or a volume.
           </Trans>
-        </p>
-        <div className="form-group">
-          <label className="co-required" htmlFor="co-add-secret-to-workload__workload">
-            {t('public~Add this secret to workload')}
-          </label>
-          <ConsoleSelect
-            items={workloadOptions}
-            selectedKey={selectedWorkloadUID}
-            title={selectWorkloadPlaceholder}
-            onChange={onWorkloadChange}
-            autocompleteFilter={autocompleteFilter}
-            autocompletePlaceholder={selectWorkloadPlaceholder}
-            id="co-add-secret-to-workload__workload"
-            data-test="add-secret-to-workload-button"
-          />
-        </div>
-        <fieldset>
-          <legend className="co-legend co-required">{t('public~Add secret as')}</legend>
-          <div className="pf-v6-c-form">
-            <FormGroup
-              role="radiogroup"
-              fieldId="co-add-secret-to-workload"
-              isStack
-              className="form-group"
-            >
-              <Radio
-                id="co-add-secret-to-workload__envvars"
-                name="co-add-secret-to-workload__add-as"
-                label={t('public~Environment variables')}
-                value="environment"
-                onChange={onAddAsChange}
-                isChecked={addAsEnvironment}
-                data-test="Environment variables-radio-input"
-                data-checked-state={addAsEnvironment}
-              />
-              {addAsEnvironment && (
-                <div className="co-m-radio-desc">
-                  <div className="form-group">
-                    <label htmlFor="co-add-secret-to-workload__prefix">{t('public~Prefix')}</label>
-                    <span className="pf-v6-c-form-control">
-                      <input
-                        name="prefix"
-                        id="co-add-secret-to-workload__prefix"
-                        data-test="add-secret-to-workload-prefix"
-                        placeholder="(optional)"
-                        type="text"
-                        onChange={(e) => setPrefix(e.currentTarget.value)}
-                      />
-                    </span>
-                  </div>
-                </div>
-              )}
-              <Radio
-                id="co-add-secret-to-workload__volume"
-                name="co-add-secret-to-workload__add-as"
-                label={t('public~Volume')}
-                value="volume"
-                onChange={onAddAsChange}
-                isChecked={addAsVolume}
-                data-test="Volume-radio-input"
-                data-checked-state={addAsVolume}
-              />
-              {addAsVolume && (
-                <div className="co-m-radio-desc">
-                  <div className="form-group">
-                    <label htmlFor="co-add-secret-to-workload__mountpath" className="co-required">
-                      {t('public~Mount path')}
-                    </label>
-                    <span className="pf-v6-c-form-control">
-                      <input
-                        name="mountPath"
-                        id="co-add-secret-to-workload__mountpath"
-                        data-test="add-secret-to-workload-mountpath"
-                        type="text"
-                        onChange={(e) => setMountPath(e.currentTarget.value)}
-                        required
-                      />
-                    </span>
-                  </div>
-                </div>
-              )}
-            </FormGroup>
-          </div>
-        </fieldset>
+        </Content>
+        <Form id="co-add-secret-to-workload" onSubmit={submit}>
+          <FormGroup
+            label={t('public~Add this secret to workload')}
+            isRequired
+            fieldId="co-add-secret-to-workload__workload"
+          >
+            <ConsoleSelect
+              items={workloadOptions}
+              selectedKey={selectedWorkloadUID}
+              title={selectWorkloadPlaceholder}
+              onChange={onWorkloadChange}
+              autocompleteFilter={autocompleteFilter}
+              autocompletePlaceholder={selectWorkloadPlaceholder}
+              id="co-add-secret-to-workload__workload"
+              data-test="add-secret-to-workload-button"
+            />
+          </FormGroup>
+          <FormGroup
+            label={t('public~Add secret as')}
+            isRequired
+            role="radiogroup"
+            fieldId="co-add-secret-to-workload"
+            isStack
+          >
+            <Radio
+              id="co-add-secret-to-workload__envvars"
+              name="co-add-secret-to-workload__add-as"
+              label={t('public~Environment variables')}
+              value="environment"
+              onChange={onAddAsChange}
+              isChecked={addAsEnvironment}
+              data-test="Environment variables-radio-input"
+              data-checked-state={addAsEnvironment}
+              body={
+                addAsEnvironment && (
+                  <FormGroup label={t('public~Prefix')} fieldId="co-add-secret-to-workload__prefix">
+                    <TextInput
+                      name="prefix"
+                      id="co-add-secret-to-workload__prefix"
+                      data-test="add-secret-to-workload-prefix"
+                      placeholder="(optional)"
+                      type="text"
+                      value={prefix}
+                      onChange={(_event, value) => setPrefix(value)}
+                    />
+                  </FormGroup>
+                )
+              }
+            />
+            <Radio
+              id="co-add-secret-to-workload__volume"
+              name="co-add-secret-to-workload__add-as"
+              label={t('public~Volume')}
+              value="volume"
+              onChange={onAddAsChange}
+              isChecked={addAsVolume}
+              data-test="Volume-radio-input"
+              data-checked-state={addAsVolume}
+              body={
+                addAsVolume && (
+                  <FormGroup
+                    label={t('public~Mount path')}
+                    isRequired
+                    fieldId="co-add-secret-to-workload__mountpath"
+                  >
+                    <TextInput
+                      name="mountPath"
+                      id="co-add-secret-to-workload__mountpath"
+                      data-test="add-secret-to-workload-mountpath"
+                      type="text"
+                      value={mountPath}
+                      onChange={(_event, value) => setMountPath(value)}
+                      isRequired
+                    />
+                  </FormGroup>
+                )
+              }
+            />
+          </FormGroup>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitText={t('public~Save')}
-        cancel={props.cancel}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="primary"
+          onClick={submit}
+          isLoading={inProgress}
+          isDisabled={inProgress}
+          data-test="confirm-action"
+          id="confirm-action"
+          form="co-add-secret-to-workload"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={props.cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
-export const AddSecretToWorkloadModalProvider: OverlayComponent<AddSecretToWorkloadModalProps> = (
+export const AddSecretToWorkloadModalOverlay: OverlayComponent<AddSecretToWorkloadModalProps> = (
   props,
 ) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <AddSecretToWorkloadModal close={props.closeOverlay} cancel={props.closeOverlay} {...props} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal
+      variant={ModalVariant.small}
+      isOpen
+      onClose={handleClose}
+      aria-labelledby="add-secret-to-workload-modal-title"
+    >
+      <AddSecretToWorkloadModal close={handleClose} cancel={handleClose} {...props} />
+    </Modal>
+  ) : null;
 };
 
 export const useAddSecretToWorkloadModalLauncher = (
   props: AddSecretToWorkloadModalProps,
 ): ModalCallback => {
-  const launcher = useOverlay();
+  const launchModal = useOverlay();
 
-  return useCallback(
-    () => launcher<AddSecretToWorkloadModalProps>(AddSecretToWorkloadModalProvider, props),
-    [launcher, props],
-  );
+  return useCallback(() => {
+    // Move focus away from the triggering element to prevent aria-hidden warning
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    return launchModal<AddSecretToWorkloadModalProps>(AddSecretToWorkloadModalOverlay, props);
+  }, [launchModal, props]);
 };
 
 type WorkloadItem = {
@@ -303,10 +338,7 @@ type WorkloadItem = {
 export type AddSecretToWorkloadModalProps = {
   secretName: string;
   namespace: string;
-  cancel?: () => void;
-  close?: () => void;
-  blocking?: boolean;
-};
+} & ModalComponentProps;
 
 export type AddSecretToWorkloadModalState = {
   inProgress: boolean;
diff --git a/frontend/public/components/modals/alert-routing-modal.tsx b/frontend/public/components/modals/alert-routing-modal.tsx
index 331400e6d82..28381204db2 100644
--- a/frontend/public/components/modals/alert-routing-modal.tsx
+++ b/frontend/public/components/modals/alert-routing-modal.tsx
@@ -2,14 +2,23 @@ import type { FC } from 'react';
 import { useState } from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+  TextInput,
+} from '@patternfly/react-core';
 
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import type { ModalComponentProps } from '../factory/modal';
-import { ModalTitle, ModalBody, ModalSubmitFooter, ModalWrapper } from '../factory/modal';
 import { K8sResourceKind } from '../../module/k8s';
 import { AlertmanagerConfig } from '../monitoring/alertmanager/alertmanager-config';
 import { patchAlertmanagerConfig } from '../monitoring/alertmanager/alertmanager-utils';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 const updateAlertRoutingProperty = (
   config: any,
@@ -63,10 +72,13 @@ export const AlertRoutingModal: FC<AlertRoutingModalProps> = ({
   };
 
   return (
-    <Form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle className="modal-header">{t('public~Edit routing configuration')}</ModalTitle>
+    <>
+      <ModalHeader
+        title={t('public~Edit routing configuration')}
+        labelId="alert-routing-modal-title"
+      />
       <ModalBody>
-        <div className="pf-v6-c-form">
+        <Form id="alert-routing-form" onSubmit={submit}>
           <FormGroup label={t('public~Group by')} fieldId="group-by">
             <TextInput
               id="group-by"
@@ -111,24 +123,45 @@ export const AlertRoutingModal: FC<AlertRoutingModalProps> = ({
               data-test-id="input-repeat-interval"
             />
           </FormGroup>
-        </div>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        inProgress={inProgress}
-        errorMessage={errorMessage}
-        cancel={cancel}
-        submitText={t('public~Save')}
-        cancelText={t('public~Cancel')}
-      />
-    </Form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="primary"
+          isLoading={inProgress}
+          isDisabled={inProgress}
+          data-test="confirm-action"
+          form="alert-routing-form"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
-export const AlertRoutingModalOverlay: OverlayComponent<AlertRoutingModalProps> = (props) => (
-  <ModalWrapper blocking onClose={props.closeOverlay}>
-    <AlertRoutingModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
-  </ModalWrapper>
-);
+export const AlertRoutingModalOverlay: OverlayComponent<AlertRoutingModalProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal
+      variant={ModalVariant.small}
+      isOpen
+      onClose={handleClose}
+      aria-labelledby="alert-routing-modal-title"
+    >
+      <AlertRoutingModal {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
+};
 
 type AlertRoutingModalProps = {
   config: AlertmanagerConfig;
diff --git a/frontend/public/components/modals/configure-cluster-upstream-modal.tsx b/frontend/public/components/modals/configure-cluster-upstream-modal.tsx
index b5f067eae53..cffc3945995 100644
--- a/frontend/public/components/modals/configure-cluster-upstream-modal.tsx
+++ b/frontend/public/components/modals/configure-cluster-upstream-modal.tsx
@@ -1,28 +1,28 @@
 import type { FormEventHandler } from 'react';
 import { useState, useRef, useCallback } from 'react';
 import {
+  Button,
+  Content,
+  ContentVariants,
   Form,
+  FormGroup,
   FormHelperText,
-  FormSection,
   HelperText,
   HelperTextItem,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
   Radio,
-  Stack,
-  StackItem,
   TextInput,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import { ClusterVersionModel } from '../../models';
 import { ClusterVersionKind, k8sPatch } from '../../module/k8s';
-import {
-  ModalBody,
-  ModalComponentProps,
-  ModalSubmitFooter,
-  ModalTitle,
-  ModalWrapper,
-} from '../factory/modal';
+import { ModalComponentProps } from '../factory/modal';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 import { ExternalLink } from '@console/shared/src/components/links/ExternalLink';
 import {
   documentationURLs,
@@ -73,95 +73,120 @@ export const ConfigureClusterUpstreamModal = (props: ConfigureClusterUpstreamMod
 
   return (
     <>
-      <ModalTitle>{t('public~Edit upstream configuration')}</ModalTitle>
-      <Form onSubmit={submit} name="form" className="pf-v6-c-form--no-gap">
-        <ModalBody>
-          <p>
-            {t(
-              'public~Select a configuration to receive updates. Updates can be configured to receive information from Red Hat or a custom update service.',
-            )}
-          </p>
-          {!isManaged() && !isUpstream() && (
-            <p>
-              <ExternalLink
-                href={updateURL}
-                text={t('public~Learn more about OpenShift local update services.')}
-              />
-            </p>
+      <ModalHeader
+        title={t('public~Edit upstream configuration')}
+        data-test-id="modal-title"
+        labelId="configure-cluster-upstream-modal-title"
+      />
+      <ModalBody>
+        <Content component={ContentVariants.p}>
+          {t(
+            'public~Select a configuration to receive updates. Updates can be configured to receive information from Red Hat or a custom update service.',
           )}
-          <FormSection title={t('public~Configuration')}>
-            <Stack hasGutter>
-              <StackItem>
-                <Radio
-                  name="config-default"
-                  id="config-default"
-                  onChange={() => {
-                    setCustomSelected(false);
-                    setInvalidCustomURL(false);
-                  }}
-                  label={t('public~Default')}
-                  isChecked={!customSelected}
-                />
-                <TextInput
-                  id={'cluster-version-default-upstream-server-url'}
-                  type="url"
-                  readOnly
-                  value={CLUSTER_VERSION_DEFAULT_UPSTREAM_SERVER_URL_PLACEHOLDER}
-                  readOnlyVariant="default"
-                />
-                <FormHelperText>
-                  <HelperText>
-                    <HelperTextItem>
-                      {t('public~Receive update information from Red Hat.')}
-                    </HelperTextItem>
-                  </HelperText>
-                </FormHelperText>
-              </StackItem>
-              <StackItem>
-                <Radio
-                  name="config-custom"
-                  id="config-custom"
-                  onChange={() => {
-                    setCustomSelected(true);
-                    customURLInputRef.current.focus();
-                  }}
-                  label={t('public~Custom update service')}
-                  isChecked={customSelected}
-                />
-                <TextInput
-                  id="cluster-version-custom-upstream-server-url"
-                  type="url"
-                  placeholder="https://example.com/api/upgrades_info/v1/graph"
-                  value={customURL}
-                  onChange={(_event, text) => {
-                    setCustomSelected(true);
-                    setCustomURL(text);
-                    setInvalidCustomURL(false);
-                  }}
-                  validated={invalidCustomURL ? 'error' : 'default'}
-                  ref={customURLInputRef}
-                />
-                {invalidCustomURL && (
-                  <FormHelperText>
-                    <HelperText>
-                      <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
-                        {t('public~Please enter a URL.')}
-                      </HelperTextItem>
-                    </HelperText>
-                  </FormHelperText>
-                )}
-              </StackItem>
-            </Stack>
-          </FormSection>
-        </ModalBody>
-        <ModalSubmitFooter
-          errorMessage={errorMessage}
-          inProgress={inProgress}
-          submitText={t('public~Save')}
-          cancel={props.cancel}
-          submitDisabled={invalidCustomURL}
-        />
-      </Form>
+        </Content>
+        {!isManaged() && !isUpstream() && (
+          <Content component={ContentVariants.p}>
+            <ExternalLink
+              href={updateURL}
+              text={t('public~Learn more about OpenShift local update services.')}
+            />
+          </Content>
+        )}
+        <Form id="configure-cluster-upstream-form" onSubmit={submit}>
+          <FormGroup
+            label={t('public~Configuration')}
+            role="radiogroup"
+            fieldId="co-add-secret-to-workload"
+            isStack
+          >
+            <Radio
+              name="config-default"
+              id="config-default"
+              onChange={() => {
+                setCustomSelected(false);
+                setInvalidCustomURL(false);
+              }}
+              label={t('public~Default')}
+              isChecked={!customSelected}
+              body={
+                !customSelected && (
+                  <>
+                    <TextInput
+                      id={'cluster-version-default-upstream-server-url'}
+                      type="url"
+                      readOnly
+                      value={CLUSTER_VERSION_DEFAULT_UPSTREAM_SERVER_URL_PLACEHOLDER}
+                      readOnlyVariant="default"
+                    />
+                    <FormHelperText className="pf-v6-u-mt-sm">
+                      <HelperText>
+                        <HelperTextItem>
+                          {t('public~Receive update information from Red Hat.')}
+                        </HelperTextItem>
+                      </HelperText>
+                    </FormHelperText>
+                  </>
+                )
+              }
+            />
+            <Radio
+              name="config-custom"
+              id="config-custom"
+              onChange={() => {
+                setCustomSelected(true);
+                setTimeout(() => {
+                  customURLInputRef.current?.focus();
+                }, 0);
+              }}
+              label={t('public~Custom update service')}
+              isChecked={customSelected}
+              body={
+                customSelected && (
+                  <>
+                    <TextInput
+                      id="cluster-version-custom-upstream-server-url"
+                      type="url"
+                      placeholder="https://example.com/api/upgrades_info/v1/graph"
+                      value={customURL}
+                      onChange={(_event, text) => {
+                        setCustomSelected(true);
+                        setCustomURL(text);
+                        setInvalidCustomURL(false);
+                      }}
+                      validated={invalidCustomURL ? 'error' : 'default'}
+                      ref={customURLInputRef}
+                    />
+                    {invalidCustomURL && (
+                      <FormHelperText className="pf-v6-u-mt-sm">
+                        <HelperText>
+                          <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                            {t('public~Please enter a URL.')}
+                          </HelperTextItem>
+                        </HelperText>
+                      </FormHelperText>
+                    )}
+                  </>
+                )
+              }
+            />
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="primary"
+          isLoading={inProgress}
+          isDisabled={inProgress || invalidCustomURL}
+          data-test="confirm-action"
+          form="configure-cluster-upstream-form"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={props.cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
     </>
   );
 };
@@ -169,15 +194,22 @@ export const ConfigureClusterUpstreamModal = (props: ConfigureClusterUpstreamMod
 export const ConfigureClusterUpstreamModalOverlay: OverlayComponent<ConfigureClusterUpstreamModalProps> = (
   props,
 ) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <ConfigureClusterUpstreamModal
-        {...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}
+      aria-labelledby="configure-cluster-upstream-modal-title"
+    >
+      <ConfigureClusterUpstreamModal {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
 };
 
 export type ConfigureClusterUpstreamModalProps = {
diff --git a/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx b/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx
index c9b8669dcff..5ec1a724d65 100644
--- a/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx
+++ b/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx
@@ -2,13 +2,19 @@ import * as _ from 'lodash';
 import { Base64 } from 'js-base64';
 import {
   Alert,
+  Button,
   CodeBlock,
   CodeBlockCode,
   Content,
   ContentVariants,
+  Form,
   FormGroup,
   Grid,
   GridItem,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
   Radio,
   TextInput,
 } from '@patternfly/react-core';
@@ -20,14 +26,9 @@ import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-supp
 import { k8sPatchByName, k8sCreate, K8sResourceKind } from '../../module/k8s';
 import { SecretModel, ServiceAccountModel } from '../../models';
 import { useState, useCallback } from 'react';
-import {
-  ModalTitle,
-  ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-  ModalComponentProps,
-} from '../factory/modal';
+import { ModalComponentProps } from '../factory/modal';
 import { ResourceIcon } from '../utils/resource-icon';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 interface FormData {
   username: string;
@@ -152,178 +153,198 @@ const ConfigureNamespacePullSecret: FC<ConfigureNamespacePullSecretProps> = (pro
   );
 
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>{t('public~Default pull Secret')}</ModalTitle>
+    <>
+      <ModalHeader
+        title={t('public~Default pull Secret')}
+        labelId="configure-ns-pull-secret-modal-title"
+      />
       <ModalBody>
-        <Grid hasGutter>
-          <GridItem>
-            <Content component={ContentVariants.p}>
-              {t(
-                'public~Specify default credentials to be used to authenticate and download containers within this namespace. These credentials will be the default unless a pod references a specific pull Secret.',
-              )}
-            </Content>
-          </GridItem>
-
-          <GridItem span={3}>
-            <label>{t('public~Namespace')}</label>
-          </GridItem>
-          <GridItem span={9}>
-            <ResourceIcon kind="Namespace" /> &nbsp;{namespace.metadata.name}
-          </GridItem>
-
-          <GridItem span={3}>
-            <label htmlFor="namespace-pull-secret-name">{t('public~Secret name')}</label>
-          </GridItem>
-
-          <GridItem span={9}>
-            <TextInput
-              type="text"
-              id="namespace-pull-secret-name"
-              aria-describedby="namespace-pull-secret-name-help"
-              isRequired
-            />
-            <Content component={ContentVariants.p} id="namespace-pull-secret-name-help">
-              {t('public~Friendly name to help you manage this in the future')}
-            </Content>
-          </GridItem>
-
-          <GridItem span={3}>
-            <label>{t('public~Method')}</label>
-          </GridItem>
-          <GridItem span={9}>
-            <div className="pf-v6-c-form">
-              <FormGroup role="radiogroup" fieldId="namespace-pull-secret-method" isStack>
-                <Radio
-                  id="namespace-pull-secret-method--form"
-                  name="namespace-pull-secret-method"
-                  label={t('public~Enter username/password')}
-                  value="form"
-                  onChange={onMethodChange}
-                  isChecked={method === 'form'}
-                  data-checked-state={method === 'form'}
-                />
-                <Radio
-                  id="namespace-pull-secret-method--upload"
-                  name="namespace-pull-secret-method"
-                  label={t('public~Upload Docker config.json')}
-                  value="upload"
-                  onChange={onMethodChange}
-                  isChecked={method === 'upload'}
-                  data-checked-state={method === 'upload'}
-                />
-              </FormGroup>
-            </div>
-          </GridItem>
-
-          {method === 'form' && (
-            <>
-              <GridItem span={3}>
-                <label htmlFor="namespace-pull-secret-address">
-                  {t('public~Registry address')}
-                </label>
-              </GridItem>
-              <GridItem span={9}>
-                <TextInput
-                  type="text"
-                  id="namespace-pull-secret-address"
-                  placeholder={t('public~quay.io')}
-                  isRequired
-                />
-              </GridItem>
-
-              <GridItem span={3}>
-                <label htmlFor="namespace-pull-secret-email">{t('public~Email address')}</label>
-              </GridItem>
-              <GridItem span={9}>
-                <TextInput
-                  type="email"
-                  id="namespace-pull-secret-email"
-                  aria-describedby="namespace-pull-secret-email-help"
-                />
-                <Content component={ContentVariants.p} id="namespace-pull-secret-email-help">
-                  {t('public~Optional, depending on registry provider')}
-                </Content>
-              </GridItem>
-
-              <GridItem span={3}>
-                <label htmlFor="namespace-pull-secret-username">{t('public~Username')}</label>
-              </GridItem>
-              <GridItem span={9}>
-                <TextInput type="text" id="namespace-pull-secret-username" isRequired />
-              </GridItem>
-
-              <GridItem span={3}>
-                <label htmlFor="namespace-pull-secret-password">{t('public~Password')}</label>
-              </GridItem>
-              <GridItem span={9}>
-                <TextInput type="password" id="namespace-pull-secret-password" isRequired />
-              </GridItem>
-            </>
-          )}
-
-          {method === 'upload' && (
-            <>
-              <GridItem span={3}>
-                <label htmlFor="namespace-pull-secret-file">{t('public~File upload')}</label>
-              </GridItem>
-              <GridItem span={9}>
-                <input
-                  type="file"
-                  id="namespace-pull-secret-file"
-                  onChange={onFileChange}
-                  aria-describedby="namespace-pull-secret-file-help"
-                />
-                <Content component={ContentVariants.p} id="namespace-pull-secret-file-help">
-                  {t(
-                    'public~Properly configured Docker config file in JSON format. Will be base64 encoded after upload.',
-                  )}
-                </Content>
-              </GridItem>
-
-              {invalidJson && (
-                <GridItem span={9} smOffset={3}>
-                  <Alert
-                    isInline
-                    className="co-alert"
-                    variant="danger"
-                    title={t('public~Invalid JSON')}
-                  >
-                    {t('public~The uploaded file is not properly-formatted JSON.')}
-                  </Alert>
+        <Form id="configure-ns-pull-secret-form" onSubmit={submit}>
+          <Grid hasGutter>
+            <GridItem>
+              <Content component={ContentVariants.p}>
+                {t(
+                  'public~Specify default credentials to be used to authenticate and download containers within this namespace. These credentials will be the default unless a pod references a specific pull Secret.',
+                )}
+              </Content>
+            </GridItem>
+
+            <GridItem span={3}>
+              <label>{t('public~Namespace')}</label>
+            </GridItem>
+            <GridItem span={9}>
+              <ResourceIcon kind="Namespace" /> &nbsp;{namespace.metadata.name}
+            </GridItem>
+
+            <GridItem span={3}>
+              <label htmlFor="namespace-pull-secret-name">{t('public~Secret name')}</label>
+            </GridItem>
+
+            <GridItem span={9}>
+              <TextInput
+                type="text"
+                id="namespace-pull-secret-name"
+                aria-describedby="namespace-pull-secret-name-help"
+                isRequired
+              />
+              <Content component={ContentVariants.p} id="namespace-pull-secret-name-help">
+                {t('public~Friendly name to help you manage this in the future')}
+              </Content>
+            </GridItem>
+
+            <GridItem span={3}>
+              <label>{t('public~Method')}</label>
+            </GridItem>
+            <GridItem span={9}>
+              <div className="pf-v6-c-form">
+                <FormGroup role="radiogroup" fieldId="namespace-pull-secret-method" isStack>
+                  <Radio
+                    id="namespace-pull-secret-method--form"
+                    name="namespace-pull-secret-method"
+                    label={t('public~Enter username/password')}
+                    value="form"
+                    onChange={onMethodChange}
+                    isChecked={method === 'form'}
+                    data-checked-state={method === 'form'}
+                  />
+                  <Radio
+                    id="namespace-pull-secret-method--upload"
+                    name="namespace-pull-secret-method"
+                    label={t('public~Upload Docker config.json')}
+                    value="upload"
+                    onChange={onMethodChange}
+                    isChecked={method === 'upload'}
+                    data-checked-state={method === 'upload'}
+                  />
+                </FormGroup>
+              </div>
+            </GridItem>
+
+            {method === 'form' && (
+              <>
+                <GridItem span={3}>
+                  <label htmlFor="namespace-pull-secret-address">
+                    {t('public~Registry address')}
+                  </label>
+                </GridItem>
+                <GridItem span={9}>
+                  <TextInput
+                    type="text"
+                    id="namespace-pull-secret-address"
+                    placeholder={t('public~quay.io')}
+                    isRequired
+                  />
+                </GridItem>
+
+                <GridItem span={3}>
+                  <label htmlFor="namespace-pull-secret-email">{t('public~Email address')}</label>
+                </GridItem>
+                <GridItem span={9}>
+                  <TextInput
+                    type="email"
+                    id="namespace-pull-secret-email"
+                    aria-describedby="namespace-pull-secret-email-help"
+                  />
+                  <Content component={ContentVariants.p} id="namespace-pull-secret-email-help">
+                    {t('public~Optional, depending on registry provider')}
+                  </Content>
+                </GridItem>
+
+                <GridItem span={3}>
+                  <label htmlFor="namespace-pull-secret-username">{t('public~Username')}</label>
+                </GridItem>
+                <GridItem span={9}>
+                  <TextInput type="text" id="namespace-pull-secret-username" isRequired />
+                </GridItem>
+
+                <GridItem span={3}>
+                  <label htmlFor="namespace-pull-secret-password">{t('public~Password')}</label>
+                </GridItem>
+                <GridItem span={9}>
+                  <TextInput type="password" id="namespace-pull-secret-password" isRequired />
+                </GridItem>
+              </>
+            )}
+
+            {method === 'upload' && (
+              <>
+                <GridItem span={3}>
+                  <label htmlFor="namespace-pull-secret-file">{t('public~File upload')}</label>
                 </GridItem>
-              )}
-              {fileData && (
-                <GridItem span={9} smOffset={3}>
-                  <CodeBlock>
-                    <CodeBlockCode>{fileData}</CodeBlockCode>
-                  </CodeBlock>
+                <GridItem span={9}>
+                  <input
+                    type="file"
+                    id="namespace-pull-secret-file"
+                    onChange={onFileChange}
+                    aria-describedby="namespace-pull-secret-file-help"
+                  />
+                  <Content component={ContentVariants.p} id="namespace-pull-secret-file-help">
+                    {t(
+                      'public~Properly configured Docker config file in JSON format. Will be base64 encoded after upload.',
+                    )}
+                  </Content>
                 </GridItem>
-              )}
-            </>
-          )}
-        </Grid>
+
+                {invalidJson && (
+                  <GridItem span={9} smOffset={3}>
+                    <Alert
+                      isInline
+                      className="co-alert"
+                      variant="danger"
+                      title={t('public~Invalid JSON')}
+                    >
+                      {t('public~The uploaded file is not properly-formatted JSON.')}
+                    </Alert>
+                  </GridItem>
+                )}
+                {fileData && (
+                  <GridItem span={9} smOffset={3}>
+                    <CodeBlock>
+                      <CodeBlockCode>{fileData}</CodeBlockCode>
+                    </CodeBlock>
+                  </GridItem>
+                )}
+              </>
+            )}
+          </Grid>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitText={t('public~Save')}
-        cancel={cancel}
-        submitDisabled={method === 'upload' && (!fileData || invalidJson)}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="primary"
+          isLoading={inProgress}
+          isDisabled={inProgress || (method === 'upload' && (!fileData || invalidJson))}
+          data-test="confirm-action"
+          form="configure-ns-pull-secret-form"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
 export const ConfigureNamespacePullSecretModalOverlay: OverlayComponent<ConfigureNamespacePullSecretProps> = (
   props,
 ) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <ConfigureNamespacePullSecret
-        {...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}
+      aria-labelledby="configure-ns-pull-secret-modal-title"
+    >
+      <ConfigureNamespacePullSecret {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
 };
diff --git a/frontend/public/components/modals/configure-update-strategy-modal.tsx b/frontend/public/components/modals/configure-update-strategy-modal.tsx
index aa80e897c34..02ff355cebc 100644
--- a/frontend/public/components/modals/configure-update-strategy-modal.tsx
+++ b/frontend/public/components/modals/configure-update-strategy-modal.tsx
@@ -2,6 +2,8 @@ import * as _ from 'lodash';
 import { useCallback, useState } from 'react';
 import type { FC } from 'react';
 import {
+  Button,
+  Form,
   FormGroup,
   FormHelperText,
   FormSection,
@@ -10,6 +12,10 @@ import {
   InputGroup,
   InputGroupItem,
   InputGroupText,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
   Radio,
   TextInput,
   Tooltip,
@@ -18,14 +24,9 @@ import { useTranslation } from 'react-i18next';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sPatch, Patch, DeploymentUpdateStrategy, K8sResourceKind } from '../../module/k8s';
 import { DeploymentModel } from '../../models';
-import {
-  ModalTitle,
-  ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-  ModalComponentProps,
-} from '../factory/modal';
+import { ModalComponentProps } from '../factory/modal';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 export const getNumberOrPercent = (value) => {
   if (typeof value === 'undefined') {
@@ -52,7 +53,7 @@ export const ConfigureUpdateStrategy: FC<ConfigureUpdateStrategyProps> = ({
   const { t } = useTranslation();
   const strategyIsNotRollingUpdate = strategyType !== 'RollingUpdate';
   return (
-    <div className="pf-v6-c-form pf-m-horizontal">
+    <>
       {showDescription && (
         <FormSection>
           {t('public~How should the pods be replaced when a new revision is created?')}
@@ -157,7 +158,7 @@ export const ConfigureUpdateStrategy: FC<ConfigureUpdateStrategyProps> = ({
         autoFocus={strategyType === 'Recreate'}
         data-test="recreate-update-strategy-radio"
       />
-    </div>
+    </>
   );
 };
 
@@ -199,41 +200,62 @@ export const ConfigureUpdateStrategyModal: FC<ConfigureUpdateStrategyModalProps>
   );
 
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>{t('public~Edit update strategy')}</ModalTitle>
+    <>
+      <ModalHeader
+        title={t('public~Edit update strategy')}
+        labelId="configure-update-strategy-modal-title"
+      />
       <ModalBody>
-        <ConfigureUpdateStrategy
-          strategyType={strategyType}
-          maxUnavailable={maxUnavailable}
-          maxSurge={maxSurge}
-          onChangeStrategyType={setStrategyType}
-          onChangeMaxUnavailable={setMaxUnavailable}
-          onChangeMaxSurge={setMaxSurge}
-          replicas={deployment.spec.replicas}
-        />
+        <Form id="configure-update-strategy-form" onSubmit={submit}>
+          <ConfigureUpdateStrategy
+            strategyType={strategyType}
+            maxUnavailable={maxUnavailable}
+            maxSurge={maxSurge}
+            onChangeStrategyType={setStrategyType}
+            onChangeMaxUnavailable={setMaxUnavailable}
+            onChangeMaxSurge={setMaxSurge}
+            replicas={deployment.spec.replicas}
+          />
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitText={t('public~Save')}
-        cancel={cancel}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="primary"
+          isLoading={inProgress}
+          isDisabled={inProgress}
+          data-test="confirm-action"
+          form="configure-update-strategy-form"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
 export const ConfigureUpdateStrategyModalOverlay: OverlayComponent<ConfigureUpdateStrategyModalProps> = (
   props,
 ) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <ConfigureUpdateStrategyModal
-        {...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}
+      aria-labelledby="configure-update-strategy-modal-title"
+    >
+      <ConfigureUpdateStrategyModal {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
 };
 
 export type ConfigureUpdateStrategyProps = {
diff --git a/frontend/public/components/modals/expand-pvc-modal.tsx b/frontend/public/components/modals/expand-pvc-modal.tsx
index 21d09ee09a7..087a0b1c04c 100644
--- a/frontend/public/components/modals/expand-pvc-modal.tsx
+++ b/frontend/public/components/modals/expand-pvc-modal.tsx
@@ -1,20 +1,26 @@
 import { useState, useCallback, FC } from 'react';
 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,
+  Button,
+  Content,
+  ContentVariants,
+  Form,
+  FormGroup,
+  Modal,
   ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-  ModalComponentProps,
-} from '../factory/modal';
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import { ModalComponentProps } from '../factory/modal';
 import { RequestSizeInput } from '../utils/request-size-input';
 import { resourceObjPath } from '../utils/resource-link';
 import { validate, convertToBaseValue, humanizeBinaryBytesWithoutB } from '../utils/units';
 import { k8sPatch, referenceFor, K8sKind, K8sResourceKind } from '../../module/k8s/';
 import { getRequestedPVCSize } from '@console/shared/src/selectors/storage';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 // Modal for expanding persistent volume claims
 const ExpandPVCModal: FC<ExpandPVCModalProps> = ({ resource, kind, close, cancel }) => {
@@ -58,36 +64,48 @@ const ExpandPVCModal: FC<ExpandPVCModalProps> = ({ resource, kind, close, cancel
   };
 
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>{t('public~Expand {{kind}}', { kind: kind.label })}</ModalTitle>
+    <>
+      <ModalHeader title={t('public~Expand {{kind}}', { kind: kind.label })} />
       <ModalBody>
-        <p>
+        <Content component={ContentVariants.p}>
           <Trans t={t} ns="public">
             Increase the capacity of PVC{' '}
             <strong className="co-break-word">{{ resourceName: resource.metadata.name }}.</strong>{' '}
             Note that capacity must be at least the current PVC size. This expansion might take some
             time to complete.
           </Trans>
-        </p>
-        <label className="co-required">{t('public~Total size')}</label>
-        <RequestSizeInput
-          name={t('public~requestSize')}
-          required
-          onChange={handleRequestSizeInputChange}
-          defaultRequestSizeUnit={requestSizeUnit}
-          defaultRequestSizeValue={requestSizeValue}
-          dropdownUnits={dropdownUnits}
-          testID="pvc-expand-size-input"
-          minValue={defaultSize[0]}
-        />
+        </Content>
+        <Form id="expand-pvc-form" onSubmit={submit}>
+          <FormGroup label={t('public~Total size')} isRequired fieldId="pvc-expand-size-input">
+            <RequestSizeInput
+              name={t('public~requestSize')}
+              required
+              onChange={handleRequestSizeInputChange}
+              defaultRequestSizeUnit={requestSizeUnit}
+              defaultRequestSizeValue={requestSizeValue}
+              dropdownUnits={dropdownUnits}
+              testID="pvc-expand-size-input"
+              minValue={defaultSize[0]}
+            />
+          </FormGroup>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitText={t('public~Expand')}
-        cancel={cancel}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="primary"
+          isLoading={inProgress}
+          isDisabled={inProgress}
+          data-test="confirm-action"
+          form="expand-pvc-form"
+        >
+          {t('public~Expand')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
@@ -97,9 +115,15 @@ export type ExpandPVCModalProps = {
 } & ModalComponentProps;
 
 export const ExpandPVCModalOverlay: OverlayComponent<ExpandPVCModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <ExpandPVCModal {...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}>
+      <ExpandPVCModal {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
 };
diff --git a/frontend/public/components/modals/labels-modal.tsx b/frontend/public/components/modals/labels-modal.tsx
index ab09981df54..dae4bc6c08c 100644
--- a/frontend/public/components/modals/labels-modal.tsx
+++ b/frontend/public/components/modals/labels-modal.tsx
@@ -2,6 +2,17 @@ import * as _ from 'lodash';
 import type { FC } from 'react';
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Content,
+  ContentVariants,
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
 import { K8sModel } from '@console/dynamic-plugin-sdk/src/api/common-types';
 import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource';
@@ -9,17 +20,11 @@ import { K8sResourceCommon } from '@console/dynamic-plugin-sdk/src/extensions/co
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { K8sResourceKind } from '../../module/k8s';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
-import {
-  ModalBody,
-  ModalComponentProps,
-  ModalSubmitFooter,
-  ModalTitle,
-  ModalWrapper,
-} from '../factory/modal';
+import { ModalComponentProps } from '../factory/modal';
 import { ResourceIcon } from '../utils/resource-icon';
 import { SelectorInput } from '../utils/selector-input';
 import { useK8sWatchResource } from '../utils/k8s-watch-hook';
-import { Grid, GridItem } from '@patternfly/react-core';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 const LABELS_PATH = '/metadata/labels';
 const TEMPLATE_SELECTOR_PATH = '/spec/template/metadata/labels';
@@ -88,31 +93,39 @@ const BaseLabelsModal: FC<BaseLabelsModalProps> = ({
   );
 
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>
-        {descriptionKey
-          ? t('public~Edit {{description}}', {
-              description: t(descriptionKey),
-            })
-          : t('public~Edit labels')}
-      </ModalTitle>
+    <>
+      <ModalHeader
+        title={
+          descriptionKey
+            ? t('public~Edit {{description}}', {
+                description: t(descriptionKey),
+              })
+            : t('public~Edit labels')
+        }
+        data-test-id="modal-title"
+        labelId="labels-modal-title"
+      />
       <ModalBody>
-        <Grid hasGutter>
-          <GridItem>
-            {messageKey
-              ? t(messageKey, messageVariables)
-              : t(
-                  'public~Labels help you organize and select resources. Adding labels below will let you query for objects that have similar, overlapping or dissimilar labels.',
-                )}
-          </GridItem>
-          <GridItem>
-            <label htmlFor="tags-input">
-              {descriptionKey
-                ? t('{{description}} for', { description: t(descriptionKey) })
-                : t('public~Labels for')}{' '}
-              <ResourceIcon groupVersionKind={getGroupVersionKindForModel(kind)} />{' '}
-              {resource?.metadata?.name}
-            </label>
+        <Content component={ContentVariants.p}>
+          {messageKey
+            ? t(messageKey, messageVariables)
+            : t(
+                'public~Labels help you organize and select resources. Adding labels below will let you query for objects that have similar, overlapping or dissimilar labels.',
+              )}
+        </Content>
+        <Form id="labels-form" onSubmit={submit}>
+          <FormGroup
+            label={
+              <>
+                {descriptionKey
+                  ? t('{{description}} for', { description: t(descriptionKey) })
+                  : t('public~Labels for')}{' '}
+                <ResourceIcon groupVersionKind={getGroupVersionKindForModel(kind)} />{' '}
+                {resource?.metadata?.name}
+              </>
+            }
+            fieldId="tags-input"
+          >
             <SelectorInput
               onChange={(l) => setLabels(l)}
               onValidationChange={setIsInputValid}
@@ -120,34 +133,56 @@ const BaseLabelsModal: FC<BaseLabelsModalProps> = ({
               labelClassName={labelClassName || `co-m-${kind.id}`}
               autoFocus
             />
-          </GridItem>
-        </Grid>
+          </FormGroup>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
+      <ModalFooterWithAlerts
         errorMessage={errorMessage}
         message={
           stale
             ? t('public~Labels have been updated. Click Cancel and reapply your changes.')
             : undefined
         }
-        inProgress={false}
-        submitText={t('public~Save')}
-        submitDisabled={stale || !isInputValid}
-        cancel={cancel}
-      />
-    </form>
+      >
+        <Button
+          type="submit"
+          variant="primary"
+          isDisabled={stale || !isInputValid}
+          data-test="confirm-action"
+          form="labels-form"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
-export const LabelsModal: FC<LabelsModalProps> = (props) => (
+const LabelsModal: FC<LabelsModalProps> = (props) => (
   <BaseLabelsModal path={LABELS_PATH} {...props} />
 );
 
-export const LabelsModalOverlay: OverlayComponent<LabelsModalProps> = (props) => (
-  <ModalWrapper blocking onClose={props.closeOverlay}>
-    <LabelsModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
-  </ModalWrapper>
-);
+export const LabelsModalOverlay: OverlayComponent<LabelsModalProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal
+      variant={ModalVariant.small}
+      isOpen
+      onClose={handleClose}
+      aria-labelledby="labels-modal-title"
+    >
+      <LabelsModal {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
+};
 
 type BaseLabelsModalProps = {
   descriptionKey?: string;
diff --git a/frontend/public/components/modals/managed-resource-save-modal.tsx b/frontend/public/components/modals/managed-resource-save-modal.tsx
index b4c01c8e718..f5efdf3d543 100644
--- a/frontend/public/components/modals/managed-resource-save-modal.tsx
+++ b/frontend/public/components/modals/managed-resource-save-modal.tsx
@@ -1,18 +1,21 @@
 import type { FC } from 'react';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-
 import {
-  ModalTitle,
+  Button,
+  Content,
+  ContentVariants,
+  Form,
+  Modal,
   ModalBody,
-  ModalSubmitFooter,
-  ModalComponentProps,
-  ModalWrapper,
-} from '../factory/modal';
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { referenceForOwnerRef, K8sResourceCommon, OwnerReference } from '../../module/k8s/';
-import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-
+import { ModalComponentProps } from '../factory/modal';
 import { ResourceLink } from '../utils/resource-link';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 const ManagedResourceSaveModal: FC<ManagedResourceSaveModalProps> = (props) => {
   const submit = (event) => {
@@ -24,36 +27,66 @@ const ManagedResourceSaveModal: FC<ManagedResourceSaveModalProps> = (props) => {
   const { owner, resource } = props;
   const { t } = useTranslation();
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>
-        <YellowExclamationTriangleIcon className="co-icon-space-r" /> {t('public~Managed resource')}
-      </ModalTitle>
-      <ModalBody className="modal-body">
-        <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}
-          />{' '}
-          and any modifications may be overwritten. Edit the managing resource to preserve changes.
-        </Trans>
+    <>
+      <ModalHeader
+        title={t('public~Managed resource')}
+        titleIconVariant="warning"
+        labelId="managed-resource-save-modal-title"
+      />
+      <ModalBody>
+        <Form id="managed-resource-save-form" onSubmit={submit}>
+          <Content component={ContentVariants.p}>
+            <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}
+              />{' '}
+              and any modifications may be overwritten. Edit the managing resource to preserve
+              changes.
+            </Trans>
+          </Content>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter submitText={t('public~Save')} cancel={props.close} inProgress={false} />
-    </form>
+      <ModalFooterWithAlerts>
+        <Button
+          type="submit"
+          variant="primary"
+          data-test="confirm-action"
+          form="managed-resource-save-form"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={props.close} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
 export const ManagedResourceSaveModalOverlay: OverlayComponent<ManagedResourceSaveModalProps> = (
   props,
 ) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <ManagedResourceSaveModal {...props} close={props.closeOverlay} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal
+      variant={ModalVariant.small}
+      isOpen
+      onClose={handleClose}
+      aria-labelledby="managed-resource-save-modal-title"
+    >
+      <ManagedResourceSaveModal {...props} close={handleClose} />
+    </Modal>
+  ) : null;
 };
 
 type ManagedResourceSaveModalProps = {
diff --git a/frontend/public/components/modals/remove-volume-modal.tsx b/frontend/public/components/modals/remove-volume-modal.tsx
index b204da10107..9ae6d683609 100644
--- a/frontend/public/components/modals/remove-volume-modal.tsx
+++ b/frontend/public/components/modals/remove-volume-modal.tsx
@@ -2,9 +2,18 @@ import * as _ from 'lodash';
 import type { FC, FormEvent } from 'react';
 import { useState, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import {
+  Button,
+  Content,
+  ContentVariants,
+  Form,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-import { ModalTitle, ModalBody, ModalSubmitFooter, ModalWrapper } from '../factory/modal';
 import {
   ContainerSpec,
   getVolumeType,
@@ -15,8 +24,8 @@ import {
   VolumeMount,
 } from '../../module/k8s/';
 import { RowVolumeData } from '../volumes-table';
-import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
 import { ModalCallback } from './types';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 export const RemoveVolumeModal: FC<RemoveVolumeModalProps> = (props) => {
   const [inProgress, setInProgress] = useState(false);
@@ -81,43 +90,63 @@ export const RemoveVolumeModal: FC<RemoveVolumeModalProps> = (props) => {
   const label = kind.label;
   const resourceName = resource.metadata.name;
   return (
-    <form onSubmit={submit} className="modal-content">
-      <ModalTitle>
-        <YellowExclamationTriangleIcon className="co-icon-space-r" /> {t('public~Remove volume?')}
-      </ModalTitle>
-      <ModalBody className="modal-body">
-        <div>
+    <>
+      <ModalHeader
+        title={t('public~Remove volume?')}
+        titleIconVariant="warning"
+        labelId="remove-volume-modal-title"
+      />
+      <ModalBody>
+        <Content component={ContentVariants.p}>
           <Trans t={t} ns="public">
             Are you sure you want to remove volume{' '}
             <strong className="co-break-word">{{ volumeName }}</strong> from{' '}
             <strong>{{ label }}</strong>: <strong>{{ resourceName }}</strong>?
           </Trans>
-        </div>
+        </Content>
         {type && (
-          <div>
-            <label>
-              {t('public~Note: This will not remove the underlying {{type}}.', { type })}
-            </label>
-          </div>
+          <Content component={ContentVariants.p}>
+            {t('public~Note: This will not remove the underlying {{type}}.', { type })}
+          </Content>
         )}
+        <Form id="remove-volume-form" onSubmit={submit} />
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitDanger
-        submitText={t('public~Remove volume')}
-        cancel={props.cancel}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="danger"
+          isLoading={inProgress}
+          isDisabled={inProgress}
+          data-test="confirm-action"
+          form="remove-volume-form"
+        >
+          {t('public~Remove volume')}
+        </Button>
+        <Button variant="link" onClick={props.cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
 export const RemoveVolumeModalProvider: OverlayComponent<RemoveVolumeModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <RemoveVolumeModal close={props.closeOverlay} cancel={props.closeOverlay} {...props} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal
+      variant={ModalVariant.small}
+      isOpen
+      onClose={handleClose}
+      aria-labelledby="remove-volume-modal-title"
+    >
+      <RemoveVolumeModal close={handleClose} cancel={handleClose} {...props} />
+    </Modal>
+  ) : null;
 };
 
 export const useRemoveModalLauncher = (props: RemoveVolumeModalProps): ModalCallback => {
diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
index 50433300d07..7bb83e65f9b 100644
--- a/frontend/public/style/_common.scss
+++ b/frontend/public/style/_common.scss
@@ -167,10 +167,6 @@
   white-space: nowrap;
 }
 
-.co-m-radio-desc {
-  margin-left: 20px;
-}
-
 .co-m-form-row {
   margin-bottom: var(--pf-t--global--spacer--md);
 }