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

Wizard: Deduplicate ManageRepositoriesButton

Browse source 
This moves the `ManageRepositoriesButton` component to its own file and deduplicates it in the code base.

Tooltip for Upload repositories was also fixed and is now readable again.
This commit is contained in:
regexowl 2025-06-25 10:34:28 +02:00 • committed by Klara Simickova
parent 0319c81b41
commit 2894858838
4 changed files with 44 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/Components/CreateImageWizard/steps/Repositories/components/ManageRepositoriesButton.tsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import { Button } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { CONTENT_URL } from '../../../../../constants';
const ManageRepositoriesButton = () => {
return (
<Button
component="a"
target="_blank"
variant="link"
iconPosition="right"
isInline
icon={<ExternalLinkAltIcon />}
href={CONTENT_URL}
>
Create and manage repositories here
</Button>
);
};
export default ManageRepositoriesButton;

24
src/Components/CreateImageWizard/steps/Repositories/components/UploadRepositoryLabel.tsx
View file

@ -1,29 +1,19 @@
import React from 'react';
import { Button, Label, Content, Tooltip } from '@patternfly/react-core';
import { ExternalLinkAltIcon, UploadIcon } from '@patternfly/react-icons';
import { Label, Tooltip } from '@patternfly/react-core';
import { UploadIcon } from '@patternfly/react-icons';
import { CONTENT_URL } from '../../../../../constants';
import ManageRepositoriesButton from './ManageRepositoriesButton';
const UploadRepositoryLabel = () => {
return (
<Tooltip
content={
<Content>
<>
Upload repository: Snapshots will only be taken when new content is
uploaded.&nbsp;
<Button
component="a"
target="_blank"
variant="link"
iconPosition="right"
isInline
icon={<ExternalLinkAltIcon />}
href={CONTENT_URL}
>
Create and manage repositories here.
</Button>
</Content>
uploaded.
<ManageRepositoriesButton />
</>
}
>
<Label

28
src/Components/CreateImageWizard/steps/Repositories/index.tsx
View file

@ -1,33 +1,16 @@
import React from 'react';
import { Alert, Button, Form, Content, Title } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { Alert, Form, Content, Title } from '@patternfly/react-core';
import ManageRepositoriesButton from './components/ManageRepositoriesButton';
import Repositories from './Repositories';
import { CONTENT_URL } from '../../../../constants';
import { useAppSelector } from '../../../../store/hooks';
import {
selectPackages,
selectRecommendedRepositories,
} from '../../../../store/wizardSlice';
const ManageRepositoriesButton = () => {
return (
<Button
component="a"
target="_blank"
variant="link"
iconPosition="right"
isInline
icon={<ExternalLinkAltIcon />}
href={CONTENT_URL}
>
Create and manage repositories here
</Button>
);
};
const RepositoriesStep = () => {
const packages = useAppSelector(selectPackages);
const recommendedRepos = useAppSelector(selectRecommendedRepositories);
@ -39,9 +22,10 @@ const RepositoriesStep = () => {
</Title>
<Content>
Select the linked custom repositories from which you can add packages to
the image.
<br />
<ManageRepositoriesButton />
the image
<Content>
<ManageRepositoriesButton />
</Content>
</Content>
{packages.length && recommendedRepos.length ? (
<Alert

25
src/Components/CreateImageWizard/steps/Snapshot/index.tsx
View file

@ -1,11 +1,10 @@
import React from 'react';
import { Button, Form, Grid, Content, Title } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { Form, Content, Title } from '@patternfly/react-core';
import Snapshot from './components/Snapshot';
import { CONTENT_URL } from '../../../../constants';
import ManageRepositoriesButton from '../Repositories/components/ManageRepositoriesButton';
export default function SnapshotStep() {
return (
@ -13,23 +12,13 @@ export default function SnapshotStep() {
<Title headingLevel="h1" size="xl">
Repeatable build
</Title>
<Grid>
<Content>
Control the consistency of the packages in the repository used to build
the image.
<Content>
Control the consistency of the packages in the repository used to
build the image.
<ManageRepositoriesButton />
</Content>
<Button
component="a"
target="_blank"
variant="link"
iconPosition="right"
isInline
icon={<ExternalLinkAltIcon />}
href={CONTENT_URL}
>
Create and manage repositories here
</Button>
</Grid>
</Content>
<Snapshot />
</Form>
);