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:
parent
1c1290f7ed
commit
c4d411efa4
9 changed files with 169 additions and 174 deletions
7
src/Components/sharedComponents/ImageBuilderHeader.scss
Normal file
7
src/Components/sharedComponents/ImageBuilderHeader.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.title {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
padding-right: 0;
|
||||
}
|
||||
78
src/Components/sharedComponents/ImageBuilderHeader.tsx
Normal file
78
src/Components/sharedComponents/ImageBuilderHeader.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue