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

sharedComponents: Align buttons in header

Browse source 
The buttons in imageBuilderHeader were stacked under the title. This makes them align next to the header title.
This commit is contained in:
regexowl 2024-04-23 12:29:17 +02:00 • committed by Lucas Garfield
parent ddca8d7430
commit 00cf55f4f0
1 changed files with 67 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/Components/sharedComponents/ImageBuilderHeader.tsx
View file

@ -30,6 +30,65 @@ type ImageBuilderHeaderPropTypes = {
experimentalFlag?: boolean;
};
const AboutImageBuilderPopover = () => {
return (
<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>
);
};
export const ImageBuilderHeader = ({
experimentalFlag,
}: ImageBuilderHeaderPropTypes) => {
@ -46,62 +105,15 @@ export const ImageBuilderHeader = ({
<PageHeader data-testid="image-builder-header">
<Flex>
<FlexItem>
<PageHeaderTitle className="title" title="Images" />
<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>
<PageHeaderTitle
className="title"
title={
<>
Images <AboutImageBuilderPopover />
<OpenSourceBadge repositoriesURL="https://osbuild.org/docs/service/architecture/" />
</>
}
>
<Button
variant="plain"
aria-label="About image builder"
className="pf-u-pl-sm header-button"
>
<HelpIcon />
</Button>
</Popover>
<OpenSourceBadge repositoriesURL="https://osbuild.org/docs/service/architecture/" />
/>
</FlexItem>
{experimentalFlag && (
<>