particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Replace deprecated Modals with non-deprecated ones

Browse source 
The schema for `Modal` component changed between PF5 and PF6, this updates the modals to their non-deprecated version.
This commit is contained in:
regexowl 2025-06-16 16:35:53 +02:00 • committed by Gianluca Zuccarelli
parent caa678ebeb
commit 6521a46bb1
9 changed files with 257 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

113
src/Components/CreateImageWizard/steps/Packages/Packages.tsx
View file

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