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

Wizard: Update spacing and colors used on Review step

Browse source
This commit is contained in:
regexowl 2025-05-20 10:42:33 +02:00 • committed by Lucas Garfield
parent eed08effe1
commit 2c2b961d90
2 changed files with 77 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

129
src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
View file

@ -8,6 +8,8 @@ import {
Content,
ContentVariants,
useWizardContext,
SplitItem,
Split,
} from '@patternfly/react-core';
import { ArrowRightIcon } from '@patternfly/react-icons';
@ -167,25 +169,23 @@ const Review = () => {
const composeExpandable = (label: string, testId: string, stepId: string) => {
return (
<Content>
<Content component={ContentVariants.dl}>
<Content
component={ContentVariants.dt}
className="pf-v6-u-min-width pf-v6-u-text-align-left"
>
<Button variant="link" component="span" isInline>
{label}
</Button>
</Content>
<Content component={ContentVariants.dd}>
<RevisitStepButton
ariaLabel={`Revisit ${label} step`}
testId={testId}
stepId={stepId}
/>
</Content>
</Content>
</Content>
<Split hasGutter>
<SplitItem
isFilled
className="pf-v6-u-min-width pf-v6-u-text-align-start"
>
<Button variant="link" component="span" isInline>
{label}
</Button>
</SplitItem>
<SplitItem isFilled>
<RevisitStepButton
ariaLabel={`Revisit ${label} step`}
testId={testId}
stepId={stepId}
/>
</SplitItem>
</Split>
);
};
@ -242,48 +242,57 @@ const Review = () => {
<TargetEnvOciList />
</StackItem>
)}
{environments.includes('vsphere') && (
<StackItem>
<Content>
<Content component={ContentVariants.h3}>
{targetOptions.vsphere} (.vmdk)
</Content>
<TargetEnvOtherList />
</Content>
</StackItem>
)}
{environments.includes('vsphere-ova') && (
<StackItem>
<Content>
<Content component={ContentVariants.h3}>
{targetOptions['vsphere-ova']} (.ova)
</Content>
<TargetEnvOtherList />
</Content>
</StackItem>
)}
{environments.includes('guest-image') && (
<StackItem>
<Content>
<Content component={ContentVariants.h3}>
{targetOptions['guest-image']} (.qcow2)
</Content>
<TargetEnvOtherList />
</Content>
</StackItem>
)}
{environments.includes('image-installer') && (
<StackItem>
<Content>
<Content component={ContentVariants.h3}>
{targetOptions['image-installer']} (.iso)
</Content>
<TargetEnvOtherList />
</Content>
</StackItem>
)}
{environments.includes('wsl') && (
<StackItem>
<Content>
<Content component={ContentVariants.h3}>
WSL - {targetOptions.wsl} (.tar.gz)
</Content>
<TargetEnvOtherList />
</Content>
</StackItem>
)}
</Stack>
{environments.includes('vsphere') && (
<Content>
<Content component={ContentVariants.h3}>
{targetOptions.vsphere} (.vmdk)
</Content>
<TargetEnvOtherList />
</Content>
)}
{environments.includes('vsphere-ova') && (
<Content>
<Content component={ContentVariants.h3}>
{targetOptions['vsphere-ova']} (.ova)
</Content>
<TargetEnvOtherList />
</Content>
)}
{environments.includes('guest-image') && (
<Content>
<Content component={ContentVariants.h3}>
{targetOptions['guest-image']} (.qcow2)
</Content>
<TargetEnvOtherList />
</Content>
)}
{environments.includes('image-installer') && (
<Content>
<Content component={ContentVariants.h3}>
{targetOptions['image-installer']} (.iso)
</Content>
<TargetEnvOtherList />
</Content>
)}
{environments.includes('wsl') && (
<Content>
<Content component={ContentVariants.h3}>
WSL - {targetOptions.wsl} (.tar.gz)
</Content>
<TargetEnvOtherList />
</Content>
)}
</ExpandableSection>
{isRhel(distribution) && (
<ExpandableSection

11
src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
View file

@ -9,6 +9,7 @@ import {
FormGroup,
CodeBlock,
CodeBlockCode,
Icon,
} from '@patternfly/react-core';
import { ExclamationTriangleIcon } from '@patternfly/react-icons';
@ -90,9 +91,12 @@ import PopoverActivation from '../Registration/components/PopoverActivation';
const ExpirationWarning = () => {
return (
<div className="pf-v6-u-mr-sm pf-v6-u-font-size-sm pf-v6-u-warning-color-200">
<ExclamationTriangleIcon /> Expires 14 days after creation
</div>
<Content className="pf-v6-u-font-size-sm pf-v6-u-text-color-status-warning">
<Icon status="warning" isInline>
<ExclamationTriangleIcon />
</Icon>{' '}
Expires 14 days after creation
</Content>
);
};
@ -486,6 +490,7 @@ export const ContentList = () => {
>
<Button
variant="link"
isInline
aria-label="Snapshot method"
className="pf-v6-u-p-0"
isDisabled={noRepositoriesSelected || isLoading || isError}