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 {
Alert,
Button,
Popover,
Content,
Flex,
FlexItem,
} from '@patternfly/react-core';
import { Button, Popover, Content, Flex, Alert } from '@patternfly/react-core';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
// eslint-disable-next-line rulesdir/disallow-fec-relative-imports
import {
@ -31,11 +24,6 @@ import './ImageBuilderHeader.scss';
import { useFlagWithEphemDefault } from '../../Utilities/useGetEnvironment';
import { ImportBlueprintModal } from '../Blueprints/ImportBlueprintModal';
type ImageBuilderHeaderPropTypes = {
activeTab?: number;
inWizard?: boolean;
};
const AboutImageBuilderPopover = () => {
return (
<Popover
@ -90,6 +78,11 @@ const AboutImageBuilderPopover = () => {
);
};
type ImageBuilderHeaderPropTypes = {
activeTab?: number;
inWizard?: boolean;
};
export const ImageBuilderHeader = ({
activeTab,
inWizard,
@ -113,89 +106,78 @@ export const ImageBuilderHeader = ({
/>
)}
<PageHeader>
<Flex>
<FlexItem>
<PageHeaderTitle
className="title"
title={
<>
Images <AboutImageBuilderPopover />
<OpenSourceBadge
repositoriesURL={OSBUILD_SERVICE_ARCHITECTURE_URL}
/>
</>
}
/>
</FlexItem>
{!inWizard && (
<PageHeaderTitle
className="title"
title={
<>
<FlexItem align={{ default: 'alignRight' }}>
<Button
variant="primary"
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>
Images <AboutImageBuilderPopover />
<OpenSourceBadge
repositoriesURL={OSBUILD_SERVICE_ARCHITECTURE_URL}
/>
</>
)}
</Flex>
{!isOnBlueprintsTab && !inWizard && (
<Flex>
<FlexItem>
<Alert
variant="info"
isInline
title={
<>Upcoming decommission of hosted Edge Management service</>
}
className="pf-v5-u-mt-sm pf-v5-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>
}
actionsContent={
<>
{!inWizard && (
<Flex>
<Button
variant="primary"
data-testid="blueprints-create-button"
onClick={() => navigate(resolveRelPath('imagewizard'))}
isDisabled={!isOnBlueprintsTab}
onMouseEnter={() =>
prefetchTargets({
distribution: distribution,
})
}
>
Create blueprint
</Button>
{importExportFlag && (
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={RHEM_DOCUMENTATION_URL}
data-testid="import-blueprint-button"
variant="secondary"
onClick={() => setShowImportModal(true)}
isDisabled={!isOnBlueprintsTab}
>
Red Hat Edge Manager (RHEM) documentation
Import
</Button>
</Content>
</Content>
</Alert>
</FlexItem>
</Flex>
)}
</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>
</>