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

sharedComponents: tidy up image-builder-header

Browse source 
This commit simplifies and tidies up the shared ImageBuilderHeader
component by removing some of the `Flex` and `FlexItem` components.
Instead we can use the `actionComponents` from the `PageHeader`
component which takes care of some of the flex logic for us.
This commit is contained in:
Gianluca Zuccarelli 2025-06-04 17:58:02 +01:00 • committed by Simon Steinbeiß
parent 3dd67c8f39
commit 40fe892dbf
1 changed files with 73 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import { Button, Popover, Content, Flex, Alert } from '@patternfly/react-core';
Alert,
Button,
Popover,
Content,
Flex,
FlexItem,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
// eslint-disable-next-line rulesdir/disallow-fec-relative-imports // eslint-disable-next-line rulesdir/disallow-fec-relative-imports
import { import {
@ -31,11 +24,6 @@ import './ImageBuilderHeader.scss';
import { useFlagWithEphemDefault } from '../../Utilities/useGetEnvironment'; import { useFlagWithEphemDefault } from '../../Utilities/useGetEnvironment';
import { ImportBlueprintModal } from '../Blueprints/ImportBlueprintModal'; import { ImportBlueprintModal } from '../Blueprints/ImportBlueprintModal';
type ImageBuilderHeaderPropTypes = {
activeTab?: number;
inWizard?: boolean;
};
const AboutImageBuilderPopover = () => { const AboutImageBuilderPopover = () => {
return ( return (
<Popover <Popover
@ -90,6 +78,11 @@ const AboutImageBuilderPopover = () => {
); );
}; };
type ImageBuilderHeaderPropTypes = {
activeTab?: number;
inWizard?: boolean;
};
export const ImageBuilderHeader = ({ export const ImageBuilderHeader = ({
activeTab, activeTab,
inWizard, inWizard,
@ -113,89 +106,78 @@ export const ImageBuilderHeader = ({
/> />
)} )}
<PageHeader> <PageHeader>
<Flex> <PageHeaderTitle
<FlexItem> className="title"
<PageHeaderTitle title={
className="title"
title={
<>
Images <AboutImageBuilderPopover />
<OpenSourceBadge
repositoriesURL={OSBUILD_SERVICE_ARCHITECTURE_URL}
/>
</>
}
/>
</FlexItem>
{!inWizard && (
<> <>
<FlexItem align={{ default: 'alignRight' }}> Images <AboutImageBuilderPopover />
<Button <OpenSourceBadge
variant="primary" repositoriesURL={OSBUILD_SERVICE_ARCHITECTURE_URL}
data-testid="blueprints-create-button" />
onClick={() => navigate(resolveRelPath('imagewizard'))}
isDisabled={!isOnBlueprintsTab}
onMouseEnter={() =>
prefetchTargets({
distribution: distribution,
})
}
>
Create blueprint
</Button>
</FlexItem>
<FlexItem>
{importExportFlag && (
<Button
data-testid="import-blueprint-button"
variant="secondary"
onClick={() => setShowImportModal(true)}
isDisabled={!isOnBlueprintsTab}
>
Import
</Button>
)}
</FlexItem>
</> </>
)} }
</Flex> actionsContent={
{!isOnBlueprintsTab && !inWizard && ( <>
<Flex> {!inWizard && (
<FlexItem> <Flex>
<Alert <Button
variant="info" variant="primary"
isInline data-testid="blueprints-create-button"
title={ onClick={() => navigate(resolveRelPath('imagewizard'))}
<>Upcoming decommission of hosted Edge Management service</> isDisabled={!isOnBlueprintsTab}
} onMouseEnter={() =>
className="pf-v5-u-mt-sm pf-v5-u-mb-sm" prefetchTargets({
> distribution: distribution,
<Content> })
<Content> }
As of July 31, 2025, the hosted edge management service will >
no longer be supported. This means that pushing image Create blueprint
updates to Immutable (OSTree) systems using the Hybrid Cloud </Button>
Console will be discontinued. For an alternative way to {importExportFlag && (
manage edge systems, customers are encouraged to explore Red
Hat Edge Manager (RHEM).
</Content>
<Content>
<Button <Button
component="a" data-testid="import-blueprint-button"
target="_blank" variant="secondary"
variant="link" onClick={() => setShowImportModal(true)}
icon={<ExternalLinkAltIcon />} isDisabled={!isOnBlueprintsTab}
iconPosition="right"
isInline
href={RHEM_DOCUMENTATION_URL}
> >
Red Hat Edge Manager (RHEM) documentation Import
</Button> </Button>
</Content> )}
</Content> </Flex>
</Alert> )}
</FlexItem> </>
</Flex> }
/>
{!isOnBlueprintsTab && !inWizard && !process.env.IS_ON_PREMISE && (
<Alert
variant="info"
isInline
title={<>Upcoming decommission of hosted Edge Management service</>}
className="pf-v6-u-mt-sm pf-v6-u-mb-sm"
>
<Content>
<Content>
As of July 31, 2025, the hosted edge management service will no
longer be supported. This means that pushing image updates to
Immutable (OSTree) systems using the Hybrid Cloud Console will
be discontinued. For an alternative way to manage edge systems,
customers are encouraged to explore Red Hat Edge Manager (RHEM).
</Content>
<Content>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={RHEM_DOCUMENTATION_URL}
>
Red Hat Edge Manager (RHEM) documentation
</Button>
</Content>
</Content>
</Alert>
)} )}
</PageHeader> </PageHeader>
</> </>