diff --git a/src/Components/Blueprints/BlueprintDiffModal.tsx b/src/Components/Blueprints/BlueprintDiffModal.tsx index aaa4e28e..1da27ba2 100644 --- a/src/Components/Blueprints/BlueprintDiffModal.tsx +++ b/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 ( - + + + + + Synchronize images - , + , - ]} - > - + + ); }; diff --git a/src/Components/Blueprints/DeleteBlueprintModal.tsx b/src/Components/Blueprints/DeleteBlueprintModal.tsx index 71ab634d..aa112216 100644 --- a/src/Components/Blueprints/DeleteBlueprintModal.tsx +++ b/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 ( - - + + + + All versions of {blueprintName} and its associated images will be + deleted. + + - + ); }; diff --git a/src/Components/Blueprints/ImportBlueprintModal.tsx b/src/Components/Blueprints/ImportBlueprintModal.tsx index 5a96a0b0..0bbff256 100644 --- a/src/Components/Blueprints/ImportBlueprintModal.tsx +++ b/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< - Import pipeline - - You can import the blueprints you created by using the Red Hat - image builder into Insights images to create customized images. - - } - > - - - - + + Import pipeline + + You can import the blueprints you created by using the Red Hat + image builder into Insights images to create customized + images. + + } + > + + + ); }; diff --git a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx index 9f4cdf0c..664203b3 100644 --- a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx +++ b/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 ( + + + 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. +
+
+ The repositories will also get enabled in{' '} + {' '} + if they were not enabled yet: +
+ + + + {isSelectingPackage ? ( + + ) : ( + + )} + + + + + + {isSelectingPackage ? ( + + ) : ( + + )} + + + +
PackagesPackage groupsRepositories
{isSelectingPackage?.name}{isSelectingGroup?.name} + EPEL {getEpelVersionForDistribution(distribution)} Everything + x86_64 +
+
+ To move forward, either add the repos to your image, or go back to + review your package selections. +
+ , + , - ]} - > - 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. -
-
- The repositories will also get enabled in{' '} - {' '} - if they were not enabled yet: -
- - - - {isSelectingPackage ? : } - - - - - - {isSelectingPackage ? ( - - ) : ( - - )} - - - -
PackagesPackage groupsRepositories
{isSelectingPackage?.name}{isSelectingGroup?.name} - EPEL {getEpelVersionForDistribution(distribution)} Everything - x86_64 -
-
- To move forward, either add the repos to your image, or go back to - review your package selections. + +
); }; diff --git a/src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx b/src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx index 54d5d589..58d71572 100644 --- a/src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx +++ b/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 ( - + + + You are removing a previously added repository. +
+ We do not recommend removing repositories if you have added packages + from them. +
+ , + , - ]} - > - You are removing a previously added repository. -
- We do not recommend removing repositories if you have added packages - from them. + +
{wizardMode === 'edit' && ( + + + 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. + + , - ]} - > - 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. + + ); }; diff --git a/src/Components/CreateImageWizard/steps/Users/components/RemoveUserModal.tsx b/src/Components/CreateImageWizard/steps/Users/components/RemoveUserModal.tsx index c7e4377c..42b3311a 100644 --- a/src/Components/CreateImageWizard/steps/Users/components/RemoveUserModal.tsx +++ b/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 ( - + + + This action is permanent and cannot be undone. Once deleted all + information about the user will be lost. + + , + , - ]} - > - This action is permanent and cannot be undone. Once deleted all - information about the user will be lost. + + ); }; diff --git a/src/Components/ImagesTable/Instance.tsx b/src/Components/ImagesTable/Instance.tsx index 89a9947c..b0f67942 100644 --- a/src/Components/ImagesTable/Instance.tsx +++ b/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 && ( diff --git a/src/Components/ShareImageModal/ShareImageModal.tsx b/src/Components/ShareImageModal/ShareImageModal.tsx index ae369f5f..268f4c1d 100644 --- a/src/Components/ShareImageModal/ShareImageModal.tsx +++ b/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} > - + + + + ); };