Wizard: Improve in-page wizard cosmetically

This commit:
1. Removes the header from the Data Driven Forms wizard
2. Adds padding around the in-page wizard so it is visually consistent
   with the images table
3. Refactors the images table header into a re-usable component that is
   now used in both the images table and the wizard
4. Allows the repositories table to fill the available vertical space in
   the wizard
5. Adjusts the package dual list selectors so that they fill the
   available horizontal space in the wizard
This commit is contained in:
lucasgarfield 2023-10-20 09:34:24 +02:00 committed by Lucas Garfield
parent 1c1290f7ed
commit c4d411efa4
9 changed files with 169 additions and 174 deletions

View file

@ -0,0 +1,7 @@
.title {
display: inline;
}
.header-button {
padding-right: 0;
}

View file

@ -0,0 +1,78 @@
import React from 'react';
import { Button, Popover, Text, TextContent } from '@patternfly/react-core';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
// eslint-disable-next-line rulesdir/disallow-fec-relative-imports
import {
OpenSourceBadge,
PageHeader,
PageHeaderTitle,
} from '@redhat-cloud-services/frontend-components';
import './ImageBuilderHeader.scss';
export const ImageBuilderHeader = () => {
return (
<>
{/*@ts-ignore*/}
<PageHeader>
<PageHeaderTitle className="title" title="Image Builder" />
<Popover
minWidth="35rem"
headerContent={'About image builder'}
bodyContent={
<TextContent>
<Text>
Image builder is a tool for creating deployment-ready customized
system images: installation disks, virtual machines, cloud
vendor-specific images, and others. By using image builder, you
can make these images faster than manual procedures because it
eliminates the specific configurations required for each output
type.
</Text>
<Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_rhel_images_using_the_image_builder_service'
}
>
Image builder for RPM-DNF documentation
</Button>
</Text>
<Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/edge_management/2022/html/create_rhel_for_edge_images_and_configure_automated_management/index'
}
>
Image builder for OSTree documentation
</Button>
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="About image builder"
className="pf-u-pl-sm header-button"
>
<HelpIcon />
</Button>
</Popover>
<OpenSourceBadge repositoriesURL="https://www.osbuild.org/guides/image-builder-service/architecture.html" />
</PageHeader>
</>
);
};