[WIP] CONSOLE-4447: Migrate modals to modern PatternFly Modal components

frontend/packages/console-app/src/components/favorite/FavoriteButton.tsx

@@ -9,10 +9,13 @@ import {
   HelperTextItem,
   TextInput,
   Tooltip,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { ModalVariant } from '@patternfly/react-core/deprecated';
 import { useTranslation } from 'react-i18next';
-import Modal from '@console/shared/src/components/modal/Modal';
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
 import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
 import { FAVORITES_CONFIG_MAP_KEY, FAVORITES_LOCAL_STORAGE_KEY } from '../../consts';
@@ -78,7 +81,8 @@ export const FavoriteButton = ({ defaultName }: FavoriteButtonProps) => {
     setIsModalOpen(false);
   };
 
-  const handleConfirmStar = () => {
+  const handleConfirmStar = (e?: React.FormEvent) => {
+    e?.preventDefault();
     const trimmedName = name.trim();
     if (!trimmedName) {
       setError(t('Name is required.'));
@@ -151,46 +155,39 @@ export const FavoriteButton = ({ defaultName }: FavoriteButtonProps) => {
       </Tooltip>
 
       {isModalOpen && (
-        <Modal
-          title={t('Add to favorites')}
-          isOpen={isModalOpen}
-          onClose={handleModalClose}
-          actions={[
-            <Button
-              key="confirm"
-              variant="primary"
-              onClick={handleConfirmStar}
-              form="confirm-favorite"
-            >
+        <Modal isOpen={isModalOpen} onClose={handleModalClose} variant={ModalVariant.small}>
+          <ModalHeader title={t('Add to favorites')} />
+          <ModalBody>
+            <Form id="confirm-favorite-form" onSubmit={handleConfirmStar}>
+              <FormGroup label={t('Name')} isRequired fieldId="input-name">
+                <TextInput
+                  id="confirm-favorite-form-name"
+                  data-test="input-name"
+                  name="name"
+                  type="text"
+                  onChange={(e, v) => handleNameChange(v)}
+                  value={name || ''}
+                  autoFocus
+                  required
+                />
+                {error && (
+                  <FormHelperText>
+                    <HelperText>
+                      <HelperTextItem variant="error">{error}</HelperTextItem>
+                    </HelperText>
+                  </FormHelperText>
+                )}
+              </FormGroup>
+            </Form>
+          </ModalBody>
+          <ModalFooter>
+            <Button key="confirm" variant="primary" type="submit" form="confirm-favorite-form">
               {t('Save')}
-            </Button>,
+            </Button>
             <Button key="cancel" variant="link" onClick={handleModalClose}>
               {t('Cancel')}
-            </Button>,
-          ]}
-          variant={ModalVariant.small}
-        >
-          <Form id="confirm-favorite-form" onSubmit={handleConfirmStar}>
-            <FormGroup label={t('Name')} isRequired fieldId="input-name">
-              <TextInput
-                id="confirm-favorite-form-name"
-                data-test="input-name"
-                name="name"
-                type="text"
-                onChange={(e, v) => handleNameChange(v)}
-                value={name || ''}
-                autoFocus
-                required
-              />
-              {error && (
-                <FormHelperText>
-                  <HelperText>
-                    <HelperTextItem variant="error">{error}</HelperTextItem>
-                  </HelperText>
-                </FormHelperText>
-              )}
-            </FormGroup>
-          </Form>
+            </Button>
+          </ModalFooter>
         </Modal>
       )}
     </div>

frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx

@@ -90,9 +90,6 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
         )}
       </ModalBody>
       <ModalFooter>
-        <Button variant="secondary" onClick={closeOverlay} type="button">
-          {t('public~Cancel')}
-        </Button>
         <Button
           type="submit"
           variant="primary"
@@ -102,6 +99,9 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
         >
           {t('public~Save')}
         </Button>
+        <Button variant="link" onClick={closeOverlay} type="button">
+          {t('public~Cancel')}
+        </Button>
       </ModalFooter>
     </Modal>
   );

frontend/packages/console-app/src/components/tour/TourStepComponent.tsx

@@ -3,14 +3,14 @@ import { useContext } from 'react';
 import {
   Grid,
   GridItem,
+  Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
   ModalVariant,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { ThemeContext } from '@console/internal/components/ThemeProvider';
-import Modal from '@console/shared/src/components/modal/Modal';
 import { PopoverPlacement } from '@console/shared/src/components/popover/const';
 import Popover from '@console/shared/src/components/popover/Popover';
 import Spotlight from '@console/shared/src/components/spotlight/Spotlight';
@@ -108,7 +108,6 @@ const TourStepComponent: FC<TourStepComponentProps> = ({
       id="guided-tour-modal"
       data-test="guided-tour-modal"
       aria-label={t('console-app~guided tour {{step, number}}', { step })}
-      isFullScreen
     >
       <ModalBody>
         <Grid hasGutter>

frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx

@@ -1,14 +1,23 @@
 import type { FC } from 'react';
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
-import { Split, SplitItem, Divider, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Split,
+  SplitItem,
+  Divider,
+  Stack,
+  StackItem,
+  Modal,
+  ModalBody,
+  ModalHeader,
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
 import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
-import { Modal } from '../../modal';
 import CatalogBadges from '../CatalogBadges';
 import { useCtaLink } from '../hooks/useCtaLink';
 import { getIconProps } from '../utils/catalog-utils';
 import CatalogDetailsPanel from './CatalogDetailsPanel';
+import './CatalogDetailsModal.scss';
 
 type CatalogDetailsModalProps = {
   item: CatalogItem;
@@ -42,43 +51,45 @@ const CatalogDetailsModal: FC<CatalogDetailsModalProps> = ({ item, onClose }) =>
 
   return (
     <Modal
-      className="co-catalog-page__overlay co-catalog-page__overlay--right"
+      className="ocs-modal co-catalog-page__overlay co-catalog-page__overlay--right"
       isOpen={!!item}
       onClose={onClose}
       aria-label={item.name}
-      header={modalHeader}
     >
-      <Stack hasGutter>
-        <StackItem>
-          <Split className="odc-catalog-details-modal__header">
-            <SplitItem>
-              {to && (
-                <div className="co-catalog-page__overlay-actions">
-                  <Link
-                    data-test="catalog-details-modal-cta"
-                    className="pf-v6-c-button pf-m-primary co-catalog-page__overlay-action"
-                    to={to}
-                    role="button"
-                    onClick={onClose}
-                  >
-                    {label}
-                  </Link>
-                </div>
-              )}
-            </SplitItem>
-            <SplitItem isFilled />
-            <SplitItem>
-              {badges?.length > 0 ? <CatalogBadges badges={badges} /> : undefined}
-            </SplitItem>
-          </Split>
-        </StackItem>
-        <StackItem>
-          <Divider />
-        </StackItem>
-        <StackItem>
-          <CatalogDetailsPanel item={item} />
-        </StackItem>
-      </Stack>
+      <ModalHeader>{modalHeader}</ModalHeader>
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Split className="odc-catalog-details-modal__header">
+              <SplitItem>
+                {to && (
+                  <div className="co-catalog-page__overlay-actions">
+                    <Link
+                      data-test="catalog-details-modal-cta"
+                      className="pf-v6-c-button pf-m-primary co-catalog-page__overlay-action"
+                      to={to}
+                      role="button"
+                      onClick={onClose}
+                    >
+                      {label}
+                    </Link>
+                  </div>
+                )}
+              </SplitItem>
+              <SplitItem isFilled />
+              <SplitItem>
+                {badges?.length > 0 ? <CatalogBadges badges={badges} /> : undefined}
+              </SplitItem>
+            </Split>
+          </StackItem>
+          <StackItem>
+            <Divider />
+          </StackItem>
+          <StackItem>
+            <CatalogDetailsPanel item={item} />
+          </StackItem>
+        </Stack>
+      </ModalBody>
     </Modal>
   );
 };

frontend/packages/console-shared/src/components/index.ts

@@ -15,7 +15,6 @@ export * from './virtualized-grid';
 export * from './alerts';
 export * from './popover';
 export * from './utils';
-export * from './modal';
 export * from './modals';
 export * from './hpa';
 export * from './multi-tab-list';

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/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx

@@ -169,7 +169,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
         <Button
           key="cancel-action"
           type="button"
-          variant="secondary"
+          variant="link"
           disabled={inProgress}
           onClick={closeModal}
           data-test-id="modal-cancel-action"

frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx

@@ -120,7 +120,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
         </Button>,
         <Button
           type="button"
-          variant="secondary"
+          variant="link"
           disabled={inProgress}
           onClick={closeModal}
           data-test-id="modal-cancel-action"

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

@@ -1,12 +1,15 @@
 import { useCallback } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalVariant } from '@patternfly/react-core';
 import { useModal } from '@console/dynamic-plugin-sdk/src/lib-core';
 import { CopyToClipboard } from '@console/internal/components/utils/copy-to-clipboard';
-import { Modal } from '@console/shared/src/components/modal';
 import { ModalComponent } from 'packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
 
 const CopyCodeModal: CopyCodeModalComponent = ({ title, snippet, closeModal }) => (
-  <Modal isOpen onClose={closeModal} title={title} variant="medium">
-    <CopyToClipboard key={snippet} value={snippet} />
+  <Modal isOpen onClose={closeModal} variant={ModalVariant.medium}>
+    <ModalHeader title={title} />
+    <ModalBody>
+      <CopyToClipboard key={snippet} value={snippet} />
+    </ModalBody>
   </Modal>
 );
 

frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx

@@ -44,7 +44,7 @@ const TestFunctionModal: FC<Props> = (props) => {
             {t('knative-plugin~Test')}
           </Button>
           &nbsp; &nbsp;
-          <Button type="button" variant="secondary" data-test="cancel-action" onClick={cancel}>
+          <Button type="button" variant="link" data-test="cancel-action" onClick={cancel}>
             {t('knative-plugin~Cancel')}
           </Button>
         </form>
@@ -64,7 +64,7 @@ const TestFunctionModal: FC<Props> = (props) => {
           &nbsp;
           <Button
             type="button"
-            variant="secondary"
+            variant="link"
             data-test="close-action"
             onClick={() => {
               clearResponseValues(props);

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

@@ -239,7 +239,7 @@ const PowerOffHostModal: OverlayComponent<PowerOffHostModalProps> = (props) => {
         >
           {t('metal3-plugin~Power Off')}
         </Button>
-        <Button variant="secondary" onClick={closeOverlay}>
+        <Button variant="link" onClick={closeOverlay}>
           {t('metal3-plugin~Cancel')}
         </Button>
       </PfModalFooter>

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

@@ -55,7 +55,7 @@ const RestartHostModal: OverlayComponent<RestartHostModalProps> = (props) => {
         <Button variant="primary" onClick={onSubmit} isLoading={inProgress}>
           {t('metal3-plugin~Restart')}
         </Button>
-        <Button variant="secondary" onClick={closeOverlay}>
+        <Button variant="link" onClick={closeOverlay}>
           {t('metal3-plugin~Cancel')}
         </Button>
       </PfModalFooter>