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/Blueprints/BlueprintDiffModal.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 
 import { DiffEditor } from '@monaco-editor/react';
-import { Button } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '@patternfly/react-core';
 
 import { BuildImagesButton } from './BuildImagesButton';
 
@@ -40,16 +46,23 @@ const BlueprintDiffModal = ({
   }
 
   return (
-    <Modal
-      variant={ModalVariant.large}
-      titleIconVariant={'info'}
-      isOpen={isOpen}
-      onClose={onClose}
-      title={`Compare ${blueprintName || ''} versions`}
-      actions={[
+    <Modal variant={ModalVariant.large} isOpen={isOpen} onClose={onClose}>
+      <ModalHeader
+        title={`Compare ${blueprintName || ''} versions`}
+        titleIconVariant={'info'}
+      />
+      <ModalBody>
+        <DiffEditor
+          height="90vh"
+          language="json"
+          original={JSON.stringify(baseBlueprint, undefined, 2)}
+          modified={JSON.stringify(blueprint, undefined, 2)}
+        />
+      </ModalBody>
+      <ModalFooter>
         <BuildImagesButton key="build-button">
           Synchronize images
-        </BuildImagesButton>,
+        </BuildImagesButton>
         <Button
           key="cancel-button"
           variant="link"
@@ -57,15 +70,8 @@ const BlueprintDiffModal = ({
           onClick={onClose}
         >
           Cancel
-        </Button>,
-      ]}
-    >
-      <DiffEditor
-        height="90vh"
-        language="json"
-        original={JSON.stringify(baseBlueprint, undefined, 2)}
-        modified={JSON.stringify(blueprint, undefined, 2)}
-      />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

src/Components/Blueprints/DeleteBlueprintModal.tsx

@@ -1,7 +1,13 @@
 import React, { useEffect, useState } from 'react';
 
-import { ActionGroup, Button } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { ChromeUser } from '@redhat-cloud-services/types';
 
@@ -83,22 +89,20 @@ export const DeleteBlueprintModal: React.FunctionComponent<
     setShowDeleteModal(false);
   };
   return (
-    <Modal
-      variant={ModalVariant.small}
-      titleIconVariant="warning"
-      isOpen={isOpen}
-      onClose={onDeleteClose}
-      title={'Delete blueprint?'}
-      description={`All versions of ${blueprintName} and its associated images will be deleted.`}
-    >
-      <ActionGroup>
+    <Modal variant={ModalVariant.small} isOpen={isOpen} onClose={onDeleteClose}>
+      <ModalHeader title={'Delete blueprint?'} titleIconVariant="warning" />
+      <ModalBody>
+        All versions of {blueprintName} and its associated images will be
+        deleted.
+      </ModalBody>
+      <ModalFooter>
         <Button variant="danger" type="button" onClick={handleDelete}>
           Delete
         </Button>
         <Button variant="link" type="button" onClick={onDeleteClose}>
           Cancel
         </Button>
-      </ActionGroup>
+      </ModalFooter>
     </Modal>
   );
 };

src/Components/Blueprints/ImportBlueprintModal.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { parse } from '@ltd/j-toml';
 import {
-  ActionGroup,
   Button,
   Checkbox,
   FileUpload,
@@ -11,9 +10,13 @@ import {
   FormHelperText,
   HelperText,
   HelperTextItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
   Popover,
 } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { DropEvent } from '@patternfly/react-core/dist/esm/helpers';
 import { HelpIcon } from '@patternfly/react-icons';
 import { useAddNotification } from '@redhat-cloud-services/frontend-components-notifications/hooks';
@@ -239,94 +242,99 @@ export const ImportBlueprintModal: React.FunctionComponent<
     <Modal
       variant={ModalVariant.medium}
       isOpen={isOpen}
-      title={
-        <>
-          Import pipeline
-          <Popover
-            bodyContent={
-              <div>
-                You can import the blueprints you created by using the Red Hat
-                image builder into Insights images to create customized images.
-              </div>
-            }
-          >
-            <Button
-              icon={<HelpIcon />}
-              variant="plain"
-              aria-label="About import"
-              className="pf-v6-u-pl-sm"
-              isInline
-            />
-          </Popover>
-        </>
-      }
       onClose={onImportClose}
     >
-      <Form>
-        <FormGroup fieldId="checkbox-import-custom-repositories">
-          <Checkbox
-            label="Import missing custom repositories after file upload."
-            isChecked={isCheckedImportRepos}
-            onChange={() => setIsCheckedImportRepos((prev) => !prev)}
-            aria-label="Import Custom Repositories checkbox"
-            id="checkbox-import-custom-repositories"
-            name="Import Repositories"
-          />
-        </FormGroup>
-        <FormGroup fieldId="import-blueprint-file-upload">
-          <FileUpload
-            id="import-blueprint-file-upload"
-            type="text"
-            value={fileContent}
-            filename={filename}
-            filenamePlaceholder="Drag and drop a file or upload one"
-            onFileInputChange={handleFileInputChange}
-            onDataChange={handleDataChange}
-            onReadStarted={handleFileReadStarted}
-            onReadFinished={handleFileReadFinished}
-            onClearClick={handleClear}
-            isLoading={isLoading}
-            isReadOnly={true}
-            browseButtonText="Upload"
-            dropzoneProps={{
-              accept: { 'text/json': ['.json'], 'text/plain': ['.toml'] },
-              maxSize: 512000,
-              onDropRejected: handleFileRejected,
-            }}
-            validated={isRejected || isInvalidFormat ? 'error' : 'default'}
-          />
-          <FormHelperText>
-            <HelperText>
-              <HelperTextItem variant={variantSwitch()}>
-                {isRejected
-                  ? 'Must be a valid Blueprint JSON/TOML file no larger than 512 KB'
-                  : isInvalidFormat
-                  ? 'Not compatible with the blueprints format.'
-                  : isOnPrem
-                  ? 'Importing on-premises blueprints is currently in beta. Results may vary.'
-                  : 'Upload your blueprint file. Supported formats: JSON, TOML.'}
-              </HelperTextItem>
-            </HelperText>
-          </FormHelperText>
-        </FormGroup>
-        <ActionGroup>
-          <Button
-            type="button"
-            isDisabled={isRejected || isInvalidFormat || !fileContent}
-            onClick={() =>
-              navigate(resolveRelPath(`imagewizard/import`), {
-                state: { blueprint: importedBlueprint },
-              })
-            }
-            data-testid="import-blueprint-finish"
-          >
-            Review and finish
-          </Button>
-          <Button variant="link" type="button" onClick={onImportClose}>
-            Cancel
-          </Button>
-        </ActionGroup>
-      </Form>
+      <ModalHeader
+        title={
+          <>
+            Import pipeline
+            <Popover
+              bodyContent={
+                <div>
+                  You can import the blueprints you created by using the Red Hat
+                  image builder into Insights images to create customized
+                  images.
+                </div>
+              }
+            >
+              <Button
+                icon={<HelpIcon />}
+                variant="plain"
+                aria-label="About import"
+                className="pf-v6-u-pl-sm"
+                isInline
+              />
+            </Popover>
+          </>
+        }
+      />
+      <ModalBody>
+        <Form>
+          <FormGroup fieldId="checkbox-import-custom-repositories">
+            <Checkbox
+              label="Import missing custom repositories after file upload."
+              isChecked={isCheckedImportRepos}
+              onChange={() => setIsCheckedImportRepos((prev) => !prev)}
+              aria-label="Import Custom Repositories checkbox"
+              id="checkbox-import-custom-repositories"
+              name="Import Repositories"
+            />
+          </FormGroup>
+          <FormGroup fieldId="import-blueprint-file-upload">
+            <FileUpload
+              id="import-blueprint-file-upload"
+              type="text"
+              value={fileContent}
+              filename={filename}
+              filenamePlaceholder="Drag and drop a file or upload one"
+              onFileInputChange={handleFileInputChange}
+              onDataChange={handleDataChange}
+              onReadStarted={handleFileReadStarted}
+              onReadFinished={handleFileReadFinished}
+              onClearClick={handleClear}
+              isLoading={isLoading}
+              isReadOnly={true}
+              browseButtonText="Upload"
+              dropzoneProps={{
+                accept: { 'text/json': ['.json'], 'text/plain': ['.toml'] },
+                maxSize: 512000,
+                onDropRejected: handleFileRejected,
+              }}
+              validated={isRejected || isInvalidFormat ? 'error' : 'default'}
+            />
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant={variantSwitch()}>
+                  {isRejected
+                    ? 'Must be a valid Blueprint JSON/TOML file no larger than 512 KB'
+                    : isInvalidFormat
+                    ? 'Not compatible with the blueprints format.'
+                    : isOnPrem
+                    ? 'Importing on-premises blueprints is currently in beta. Results may vary.'
+                    : 'Upload your blueprint file. Supported formats: JSON, TOML.'}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          type="button"
+          isDisabled={isRejected || isInvalidFormat || !fileContent}
+          onClick={() =>
+            navigate(resolveRelPath(`imagewizard/import`), {
+              state: { blueprint: importedBlueprint },
+            })
+          }
+          data-testid="import-blueprint-finish"
+        >
+          Review and finish
+        </Button>
+        <Button variant="link" type="button" onClick={onImportClose}>
+          Cancel
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

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>
   );
 };

src/Components/ImagesTable/Instance.tsx

@@ -8,11 +8,12 @@ import {
   ClipboardCopy,
   List,
   ListItem,
+  Modal,
+  ModalVariant,
   Popover,
   PopoverPosition,
   Skeleton,
 } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import {
   ListComponent,
   OrderType,
@@ -204,9 +205,7 @@ const ProvisioningLink = ({
         {wizardOpen && (
           <Modal
             isOpen
-            hasNoBodyWrapper
             appendTo={appendTo}
-            showClose={false}
             variant={ModalVariant.large}
             aria-label="Open launch wizard"
           >

src/Components/ShareImageModal/ShareImageModal.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { Modal } from '@patternfly/react-core/deprecated';
+import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import RegionsSelect from './RegionsSelect';
@@ -30,12 +30,16 @@ const ShareToRegionsModal = () => {
       variant="small"
       aria-label="Share to new region"
       onClose={handleClose}
-      title="Share to new region"
-      description="Configure new regions for this image that will run on your AWS. All the
-        regions will launch with the same configuration."
       appendTo={appendTo}
     >
-      <RegionsSelect composeId={composeId} handleClose={handleClose} />
+      <ModalHeader
+        title="Share to new region"
+        description="Configure new regions for this image that will run on your AWS. All the
+        regions will launch with the same configuration."
+      />
+      <ModalBody>
+        <RegionsSelect composeId={composeId} handleClose={handleClose} />
+      </ModalBody>
     </Modal>
   );
 };