Wizard: Replace deprecated Modals with non-deprecated ones

The schema for `Modal` component changed between PF5 and PF6, this updates the modals to their non-deprecated version.

src/Components/CreateImageWizard/steps/Packages/Packages.tsx

@@ -13,6 +13,7 @@ import {
   EmptyStateFooter,
   EmptyStateVariant,
   Icon,
+  Modal,
   Pagination,
   PaginationVariant,
   Popover,
@@ -28,8 +29,10 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarItem,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { Modal } from '@patternfly/react-core/deprecated';
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
@@ -577,12 +580,64 @@ const Packages = () => {
   const RepositoryModal = () => {
     return (
       <Modal
-        titleIconVariant="warning"
-        title="Custom repositories will be added to your image"
         isOpen={isRepoModalOpen}
         onClose={handleCloseModalToggle}
         width="50%"
-        actions={[
+      >
+        <ModalHeader
+          title="Custom repositories will be added to your image"
+          titleIconVariant="warning"
+        />
+        <ModalBody>
+          You have selected packages that belong to custom repositories. By
+          continuing, you are acknowledging and consenting to adding the
+          following custom repositories to your image.
+          <br />
+          <br />
+          The repositories will also get enabled in{' '}
+          <Button
+            component="a"
+            target="_blank"
+            variant="link"
+            iconPosition="right"
+            isInline
+            icon={<ExternalLinkAltIcon />}
+            href={CONTENT_URL}
+          >
+            content services
+          </Button>{' '}
+          if they were not enabled yet:
+          <br />
+          <Table variant="compact">
+            <Thead>
+              <Tr>
+                {isSelectingPackage ? (
+                  <Th>Packages</Th>
+                ) : (
+                  <Th>Package groups</Th>
+                )}
+                <Th>Repositories</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              <Tr>
+                {isSelectingPackage ? (
+                  <Td>{isSelectingPackage?.name}</Td>
+                ) : (
+                  <Td>{isSelectingGroup?.name}</Td>
+                )}
+                <Td>
+                  EPEL {getEpelVersionForDistribution(distribution)} Everything
+                  x86_64
+                </Td>
+              </Tr>
+            </Tbody>
+          </Table>
+          <br />
+          To move forward, either add the repos to your image, or go back to
+          review your package selections.
+        </ModalBody>
+        <ModalFooter>
           <Button
             key="add"
             variant="primary"
@@ -591,55 +646,11 @@ const Packages = () => {
             onClick={handleConfirmModalToggle}
           >
             Add listed repositories
-          </Button>,
+          </Button>
           <Button key="back" variant="link" onClick={handleCloseModalToggle}>
             Back
-          </Button>,
-        ]}
-      >
-        You have selected packages that belong to custom repositories. By
-        continuing, you are acknowledging and consenting to adding the following
-        custom repositories to your image.
-        <br />
-        <br />
-        The repositories will also get enabled in{' '}
-        <Button
-          component="a"
-          target="_blank"
-          variant="link"
-          iconPosition="right"
-          isInline
-          icon={<ExternalLinkAltIcon />}
-          href={CONTENT_URL}
-        >
-          content services
-        </Button>{' '}
-        if they were not enabled yet:
-        <br />
-        <Table variant="compact">
-          <Thead>
-            <Tr>
-              {isSelectingPackage ? <Th>Packages</Th> : <Th>Package groups</Th>}
-              <Th>Repositories</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            <Tr>
-              {isSelectingPackage ? (
-                <Td>{isSelectingPackage?.name}</Td>
-              ) : (
-                <Td>{isSelectingGroup?.name}</Td>
-              )}
-              <Td>
-                EPEL {getEpelVersionForDistribution(distribution)} Everything
-                x86_64
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-        <br />
-        To move forward, either add the repos to your image, or go back to
-        review your package selections.
+          </Button>
+        </ModalFooter>
       </Modal>
     );
   };

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import {
   Alert,
   Button,
+  Modal,
   Pagination,
   Panel,
   PanelMain,
@@ -14,8 +15,10 @@ import {
   ToggleGroupItem,
   PaginationVariant,
   Grid,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { Modal } from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
@@ -504,25 +507,22 @@ const Repositories = () => {
   if (!isTemplateSelected) {
     return (
       <Grid>
-        <Modal
-          titleIconVariant="warning"
-          title="Are you sure?"
-          isOpen={modalOpen}
-          onClose={onClose}
-          variant="small"
-          actions={[
+        <Modal isOpen={modalOpen} onClose={onClose} variant="small">
+          <ModalHeader title="Are you sure?" titleIconVariant="warning" />
+          <ModalBody>
+            You are removing a previously added repository.
+            <br />
+            We do not recommend removing repositories if you have added packages
+            from them.
+          </ModalBody>
+          <ModalFooter>
             <Button key="remove" variant="primary" onClick={handleRemoveAnyway}>
               Remove anyway
-            </Button>,
+            </Button>
             <Button key="back" variant="link" onClick={onClose}>
               Back
-            </Button>,
-          ]}
-        >
-          You are removing a previously added repository.
-          <br />
-          We do not recommend removing repositories if you have added packages
-          from them.
+            </Button>
+          </ModalFooter>
         </Modal>
         {wizardMode === 'edit' && (
           <Alert

src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx

@@ -8,8 +8,11 @@ import {
   Flex,
   FlexItem,
   Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { Modal } from '@patternfly/react-core/deprecated';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { ChromeUser } from '@redhat-cloud-services/types';
 
@@ -123,12 +126,14 @@ export const CreateSaveButton = ({
     };
 
     return (
-      <Modal
-        title="Save time by building images"
-        isOpen={showModal}
-        onClose={handleClose}
-        width="50%"
-        actions={[
+      <Modal isOpen={showModal} onClose={handleClose} width="50%">
+        <ModalHeader title="Save time by building images" />
+        <ModalBody>
+          Building blueprints and images doesn&apos;t need to be a two step
+          process. To build images simultaneously, use the dropdown arrow to the
+          right side of this button.
+        </ModalBody>
+        <ModalFooter>
           <Button
             key="back"
             variant="primary"
@@ -136,12 +141,8 @@ export const CreateSaveButton = ({
             onClick={handleClose}
           >
             Close
-          </Button>,
-        ]}
-      >
-        Building blueprints and images doesn’t need to be a two step process. To
-        build images simultaneously, use the dropdown arrow to the right side of
-        this button.
+          </Button>
+        </ModalFooter>
       </Modal>
     );
   };

src/Components/CreateImageWizard/steps/Users/components/RemoveUserModal.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 
-import { Button } from '@patternfly/react-core';
-import { Modal } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '@patternfly/react-core';
 
 import calculateNewIndex from './calculateNewIndex';
 
@@ -48,22 +53,20 @@ const RemoveUserModal = ({
   };
 
   return (
-    <Modal
-      title={`Remove user${userName ? ` ${userName}` : ''}?`}
-      isOpen={isOpen}
-      onClose={onClose}
-      width="50%"
-      actions={[
+    <Modal isOpen={isOpen} onClose={onClose} width="50%">
+      <ModalHeader title={`Remove user${userName ? ` ${userName}` : ''}?`} />
+      <ModalBody>
+        This action is permanent and cannot be undone. Once deleted all
+        information about the user will be lost.
+      </ModalBody>
+      <ModalFooter>
         <Button key="confirm" variant="primary" onClick={onConfirm}>
           Remove user
-        </Button>,
+        </Button>
         <Button key="cancel" variant="link" onClick={onClose}>
           Cancel
-        </Button>,
-      ]}
-    >
-      This action is permanent and cannot be undone. Once deleted all
-      information about the user will be lost.
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };