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

src: Run codemods and lint

Browse source 
Run `npx @patternfly/pf-codemods@latest src --v6 --fix` and lint autofix to get the bulk of the changes in.
This commit is contained in:
regexowl 2025-05-19 13:52:20 +02:00 • committed by Lucas Garfield
parent 3617c0260d
commit 1fc1f0cb8d
79 changed files with 833 additions and 1066 deletions
Download patch file Download diff file Expand all files Collapse all files

48
playwright/test.spec.ts
View file

@ -11,65 +11,65 @@ test.describe.serial('test', () => {
await login(page); await login(page);
const frame = await ibFrame(page); const frame = await ibFrame(page);
await frame.getByRole('heading', { name: 'Images About image builder' }); frame.getByRole('heading', { name: 'Images About image builder' });
await frame.getByRole('heading', { name: 'Blueprints' }); frame.getByRole('heading', { name: 'Blueprints' });
await frame.getByTestId('blueprints-create-button').click(); await frame.getByTestId('blueprints-create-button').click();
await frame.getByRole('heading', { name: 'Image output' }); frame.getByRole('heading', { name: 'Image output' });
await frame.getByTestId('checkbox-guest-image').click(); await frame.getByTestId('checkbox-guest-image').click();
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
if (isHosted()) { if (isHosted()) {
await frame.getByRole('heading', { frame.getByRole('heading', {
name: 'Register systems using this image', name: 'Register systems using this image',
}); });
await page.getByTestId('register-later-radio').click(); await page.getByTestId('register-later-radio').click();
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
} }
await frame.getByRole('heading', { name: 'Compliance' }); frame.getByRole('heading', { name: 'Compliance' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'File system configuration' }); frame.getByRole('heading', { name: 'File system configuration' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
if (isHosted()) { if (isHosted()) {
await frame.getByRole('heading', { name: 'Repository snapshot' }); frame.getByRole('heading', { name: 'Repository snapshot' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Custom repositories' }); frame.getByRole('heading', { name: 'Custom repositories' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
} }
await frame.getByRole('heading', { name: 'Additional packages' }); frame.getByRole('heading', { name: 'Additional packages' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Users' }); frame.getByRole('heading', { name: 'Users' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Timezone' }); frame.getByRole('heading', { name: 'Timezone' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Locale' }); frame.getByRole('heading', { name: 'Locale' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Hostname' }); frame.getByRole('heading', { name: 'Hostname' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Kernel' }); frame.getByRole('heading', { name: 'Kernel' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Firewall' }); frame.getByRole('heading', { name: 'Firewall' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
await frame.getByRole('heading', { name: 'Systemd services' }); frame.getByRole('heading', { name: 'Systemd services' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
if (isHosted()) { if (isHosted()) {
await frame.getByRole('heading', { name: 'First boot configuration' }); frame.getByRole('heading', { name: 'First boot configuration' });
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
} }
await frame.getByRole('heading', { name: 'Details' }); frame.getByRole('heading', { name: 'Details' });
await frame.getByTestId('blueprint').fill(blueprintName); await frame.getByTestId('blueprint').fill(blueprintName);
await expect(frame.getByTestId('blueprint')).toHaveValue(blueprintName); await expect(frame.getByTestId('blueprint')).toHaveValue(blueprintName);
await frame.getByRole('button', { name: 'Next', exact: true }).click(); await frame.getByRole('button', { name: 'Next', exact: true }).click();
@ -102,21 +102,21 @@ test.describe.serial('test', () => {
.getByTestId('packages-search-input') .getByTestId('packages-search-input')
.locator('input') .locator('input')
.fill('osbuild-composer'); .fill('osbuild-composer');
await frame.getByTestId('packages-table').getByText('Searching'); frame.getByTestId('packages-table').getByText('Searching');
await frame.getByRole('gridcell', { name: 'osbuild-composer' }).first(); frame.getByRole('gridcell', { name: 'osbuild-composer' }).first();
await frame.getByRole('checkbox', { name: 'Select row 0' }).check(); await frame.getByRole('checkbox', { name: 'Select row 0' }).check();
await frame.getByRole('button', { name: 'Review and finish' }).click(); await frame.getByRole('button', { name: 'Review and finish' }).click();
await frame.getByRole('button', { name: 'About packages' }).click(); await frame.getByRole('button', { name: 'About packages' }).click();
await frame.getByRole('gridcell', { name: 'osbuild-composer' }); frame.getByRole('gridcell', { name: 'osbuild-composer' });
await frame await frame
.getByRole('button', { name: 'Save changes to blueprint' }) .getByRole('button', { name: 'Save changes to blueprint' })
.click(); .click();
await frame.getByRole('button', { name: 'Edit blueprint' }).click(); await frame.getByRole('button', { name: 'Edit blueprint' }).click();
await frame.getByRole('button', { name: 'About packages' }).click(); await frame.getByRole('button', { name: 'About packages' }).click();
await frame.getByRole('gridcell', { name: 'osbuild-composer' }); frame.getByRole('gridcell', { name: 'osbuild-composer' });
await frame.getByRole('button', { name: 'Cancel', exact: true }).click(); await frame.getByRole('button', { name: 'Cancel', exact: true }).click();
await frame.getByRole('heading', { name: 'All images' }); frame.getByRole('heading', { name: 'All images' });
}); });
test('build blueprint', async ({ page }) => { test('build blueprint', async ({ page }) => {
@ -133,7 +133,7 @@ test.describe.serial('test', () => {
.getByTestId('images-table') .getByTestId('images-table')
.getByRole('button', { name: 'Details' }) .getByRole('button', { name: 'Details' })
.click(); .click();
await frame.getByText('Build Information'); frame.getByText('Build Information');
}); });
test('delete blueprint', async ({ page }) => { test('delete blueprint', async ({ page }) => {

3
src/Components/Blueprints/BlueprintCard.tsx
View file

@ -40,9 +40,6 @@ const BlueprintCard = ({ blueprint }: blueprintProps) => {
isCompact isCompact
isClickable isClickable
onClick={() => dispatch(setBlueprintId(blueprint.id))} onClick={() => dispatch(setBlueprintId(blueprint.id))}
isSelectableRaised
hasSelectableInput
selectableInputAriaLabel={`Select blueprint ${blueprint.name}`}
> >
<CardHeader data-testid={blueprint.id}> <CardHeader data-testid={blueprint.id}>
<CardTitle> <CardTitle>

3
src/Components/Blueprints/BlueprintDiffModal.tsx
View file

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { DiffEditor } from '@monaco-editor/react'; import { DiffEditor } from '@monaco-editor/react';
import { Button, Modal, ModalVariant } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
import { BuildImagesButton } from './BuildImagesButton'; import { BuildImagesButton } from './BuildImagesButton';

9
src/Components/Blueprints/BlueprintsSideBar.tsx
View file

@ -7,8 +7,6 @@ import {
EmptyStateActions, EmptyStateActions,
EmptyStateBody, EmptyStateBody,
EmptyStateFooter, EmptyStateFooter,
EmptyStateHeader,
EmptyStateIcon,
Flex, Flex,
FlexItem, FlexItem,
SearchInput, SearchInput,
@ -227,12 +225,7 @@ const EmptyBlueprintState = ({
icon, icon,
action, action,
}: emptyBlueprintStateProps) => ( }: emptyBlueprintStateProps) => (
<EmptyState variant="sm"> <EmptyState headingLevel="h4" icon={icon} titleText={titleText} variant="sm">
<EmptyStateHeader
titleText={titleText}
headingLevel="h4"
icon={<EmptyStateIcon icon={icon} />}
/>
<EmptyStateBody>{bodyText}</EmptyStateBody> <EmptyStateBody>{bodyText}</EmptyStateBody>
<EmptyStateFooter> <EmptyStateFooter>
<EmptyStateActions>{action}</EmptyStateActions> <EmptyStateActions>{action}</EmptyStateActions>

61
src/Components/Blueprints/BuildImagesButton.tsx
View file

@ -115,38 +115,35 @@ export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
ref={toggleRef} ref={toggleRef}
onClick={onToggleClick} onClick={onToggleClick}
isExpanded={isOpen} isExpanded={isOpen}
splitButtonOptions={{ splitButtonItems={[
variant: 'action', <MenuToggleAction
items: [ data-testid="blueprint-build-image-menu-option"
<MenuToggleAction key="split-action"
data-testid="blueprint-build-image-menu-option" onClick={onBuildHandler}
key="split-action" id="wizard-build-image-btn"
onClick={onBuildHandler} isDisabled={
id="wizard-build-image-btn" !selectedBlueprintId ||
isDisabled={ deselectedTargets.length === blueprintImageType?.length
!selectedBlueprintId || }
deselectedTargets.length === blueprintImageType?.length >
} <Flex display={{ default: 'inlineFlex' }}>
> {imageBuildLoading && (
<Flex display={{ default: 'inlineFlex' }}> <FlexItem>
{imageBuildLoading && ( <Spinner
<FlexItem> style={
<Spinner {
style={ '--pf-v5-c-spinner--Color': '#fff',
{ } as React.CSSProperties
'--pf-v5-c-spinner--Color': '#fff', }
} as React.CSSProperties isInline
} size="md"
isInline />
size="md" </FlexItem>
/> )}
</FlexItem> <FlexItem>{children ? children : 'Build images'}</FlexItem>
)} </Flex>
<FlexItem>{children ? children : 'Build images'}</FlexItem> </MenuToggleAction>,
</Flex> ]}
</MenuToggleAction>,
],
}}
></MenuToggle> ></MenuToggle>
)} )}
> >

8
src/Components/Blueprints/DeleteBlueprintModal.tsx
View file

@ -1,11 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { import { ActionGroup, Button } from '@patternfly/react-core';
ActionGroup, import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
Button,
Modal,
ModalVariant,
} from '@patternfly/react-core';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome'; import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
import { ChromeUser } from '@redhat-cloud-services/types'; import { ChromeUser } from '@redhat-cloud-services/types';

8
src/Components/Blueprints/ImportBlueprintModal.tsx
View file

@ -11,10 +11,9 @@ import {
FormHelperText, FormHelperText,
HelperText, HelperText,
HelperTextItem, HelperTextItem,
Modal,
ModalVariant,
Popover, Popover,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
import { DropEvent } from '@patternfly/react-core/dist/esm/helpers'; import { DropEvent } from '@patternfly/react-core/dist/esm/helpers';
import { HelpIcon } from '@patternfly/react-icons'; import { HelpIcon } from '@patternfly/react-icons';
import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux'; import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
@ -261,13 +260,12 @@ export const ImportBlueprintModal: React.FunctionComponent<
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="About import" aria-label="About import"
className="pf-v5-u-pl-sm" className="pf-v5-u-pl-sm"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
</> </>
} }

14
src/Components/Cockpit/NotReady.tsx
View file

@ -5,8 +5,6 @@ import {
EmptyState, EmptyState,
EmptyStateActions, EmptyStateActions,
EmptyStateFooter, EmptyStateFooter,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateVariant, EmptyStateVariant,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { CubesIcon } from '@patternfly/react-icons'; import { CubesIcon } from '@patternfly/react-icons';
@ -14,12 +12,12 @@ import cockpit from 'cockpit';
export const NotReady = ({ enabled }: { enabled: boolean }) => { export const NotReady = ({ enabled }: { enabled: boolean }) => {
return ( return (
<EmptyState variant={EmptyStateVariant.xl}> <EmptyState
<EmptyStateHeader headingLevel="h4"
titleText={`OSBuild Composer is not ${enabled ? 'started' : 'enabled'}`} icon={CubesIcon}
headingLevel="h4" titleText={`OSBuild Composer is not ${enabled ? 'started' : 'enabled'}`}
icon={<EmptyStateIcon icon={CubesIcon} />} variant={EmptyStateVariant.xl}
/> >
<EmptyStateFooter> <EmptyStateFooter>
<EmptyStateActions> <EmptyStateActions>
<Button <Button

14
src/Components/Cockpit/RequireAdmin.tsx
View file

@ -3,20 +3,18 @@ import React from 'react';
import { import {
EmptyState, EmptyState,
EmptyStateBody, EmptyStateBody,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateVariant, EmptyStateVariant,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { LockIcon } from '@patternfly/react-icons'; import { LockIcon } from '@patternfly/react-icons';
export const RequireAdmin = () => { export const RequireAdmin = () => {
return ( return (
<EmptyState variant={EmptyStateVariant.xl}> <EmptyState
<EmptyStateHeader headingLevel="h4"
titleText="Access is limited." icon={LockIcon}
headingLevel="h4" titleText="Access is limited."
icon={<EmptyStateIcon icon={LockIcon} color="#f4c145" />} variant={EmptyStateVariant.xl}
/> >
<EmptyStateBody> <EmptyStateBody>
Administrative access is required to run the Image Builder frontend. Administrative access is required to run the Image Builder frontend.
Click on the icon in the toolbar to grant administrative access. Click on the icon in the toolbar to grant administrative access.

2
src/Components/CreateImageWizard/CreateImageWizard.tsx
View file

@ -359,7 +359,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
return ( return (
<> <>
<ImageBuilderHeader inWizard /> <ImageBuilderHeader inWizard />
<PageSection type={PageSectionTypes.wizard}> <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
<Wizard <Wizard
startIndex={startIndex} startIndex={startIndex}
onClose={() => navigate(resolveRelPath(''))} onClose={() => navigate(resolveRelPath(''))}

10
src/Components/CreateImageWizard/LabelInput.tsx
View file

@ -105,21 +105,19 @@ const LabelInput = ({
/> />
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<PlusCircleIcon className="pf-v5-u-primary-color-100" />}
variant="plain" variant="plain"
onClick={(e) => handleAddItem(e, inputValue)} onClick={(e) => handleAddItem(e, inputValue)}
isDisabled={!inputValue} isDisabled={!inputValue}
aria-label={ariaLabel} aria-label={ariaLabel}
> />
<PlusCircleIcon className="pf-v5-u-primary-color-100" />
</Button>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={handleClear} onClick={handleClear}
isDisabled={!inputValue} isDisabled={!inputValue}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
</TextInputGroup> </TextInputGroup>
{errorText && ( {errorText && (

12
src/Components/CreateImageWizard/ValidatedInput.tsx
View file

@ -98,9 +98,7 @@ export const ValidatedInputAndTextArea = ({
)} )}
{warning !== undefined && warning !== '' && ( {warning !== undefined && warning !== '' && (
<HelperText> <HelperText>
<HelperTextItem variant="warning" hasIcon> <HelperTextItem variant="warning">{warning}</HelperTextItem>
{warning}
</HelperTextItem>
</HelperText> </HelperText>
)} )}
{validated === 'error' && hasError && ( {validated === 'error' && hasError && (
@ -127,9 +125,7 @@ const getValidationState = (
export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => { export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
return ( return (
<HelperText> <HelperText>
<HelperTextItem variant="error" hasIcon> <HelperTextItem variant="error">{errorMessage}</HelperTextItem>
{errorMessage}
</HelperTextItem>
</HelperText> </HelperText>
); );
}; };
@ -171,9 +167,7 @@ export const ValidatedInput = ({
/> />
{!isPristine && !validator(value) && ( {!isPristine && !validator(value) && (
<HelperText> <HelperText>
<HelperTextItem variant="error" hasIcon> <HelperTextItem variant="error">{helperText}</HelperTextItem>
{helperText}
</HelperTextItem>
</HelperText> </HelperText>
)} )}
</> </>

6
src/Components/CreateImageWizard/steps/Details/index.tsx
View file

@ -6,7 +6,7 @@ import {
FormHelperText, FormHelperText,
HelperText, HelperText,
HelperTextItem, HelperTextItem,
Text, Content,
Title, Title,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
@ -48,11 +48,11 @@ const DetailsStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Details Details
</Title> </Title>
<Text> <Content component="p">
Enter a name to identify your blueprint. If no name is entered, the Enter a name to identify your blueprint. If no name is entered, the
images created from this blueprint will use the name of the parent images created from this blueprint will use the name of the parent
blueprint. blueprint.
</Text> </Content>
<FormGroup isRequired label="Blueprint name" fieldId="blueprint-name"> <FormGroup isRequired label="Blueprint name" fieldId="blueprint-name">
<ValidatedInputAndTextArea <ValidatedInputAndTextArea
ariaLabel="blueprint name" ariaLabel="blueprint name"

17
src/Components/CreateImageWizard/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
View file

@ -1,20 +1,15 @@
import React from 'react'; import React from 'react';
import { import { Button, Content, ContentVariants } from '@patternfly/react-core';
Button,
Text,
TextContent,
TextVariants,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { FILE_SYSTEM_CUSTOMIZATION_URL } from '../../../../constants'; import { FILE_SYSTEM_CUSTOMIZATION_URL } from '../../../../constants';
const FileSystemAutomaticPartition = () => { const FileSystemAutomaticPartition = () => {
return ( return (
<TextContent> <Content>
<Text component={TextVariants.h3}>Automatic partitioning</Text> <Content component={ContentVariants.h3}>Automatic partitioning</Content>
<Text> <Content component="p">
The system automatically partitions your image storage depending on the The system automatically partitions your image storage depending on the
target environment(s). The target environment sometimes dictates all or target environment(s). The target environment sometimes dictates all or
part of the partitioning scheme. Automatic partitioning applies the most part of the partitioning scheme. Automatic partitioning applies the most
@ -31,8 +26,8 @@ const FileSystemAutomaticPartition = () => {
> >
Customizing file systems during the image creation Customizing file systems during the image creation
</Button> </Button>
</Text> </Content>
</TextContent> </Content>
); );
}; };

27
src/Components/CreateImageWizard/steps/FileSystem/FileSystemConfiguration.tsx
View file

@ -3,9 +3,8 @@ import React from 'react';
import { import {
Alert, Alert,
Button, Button,
Text, Content,
TextContent, ContentVariants,
TextVariants,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { PlusCircleIcon } from '@patternfly/react-icons'; import { PlusCircleIcon } from '@patternfly/react-icons';
import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon } from '@patternfly/react-icons';
@ -42,19 +41,19 @@ const FileSystemConfiguration = () => {
return ( return (
<> <>
<TextContent> <Content>
<Text component={TextVariants.h3}>Configure partitions</Text> <Content component={ContentVariants.h3}>Configure partitions</Content>
</TextContent> </Content>
{partitions?.find((partition) => {partitions?.find((partition) =>
partition?.mountpoint?.includes('/usr') partition?.mountpoint?.includes('/usr')
) && <UsrSubDirectoriesDisabled />} ) && <UsrSubDirectoriesDisabled />}
<TextContent> <Content>
<Text> <Content component="p">
Create partitions for your image by defining mount points and minimum Create partitions for your image by defining mount points and minimum
sizes. Image builder creates partitions with a logical volume (LVM) sizes. Image builder creates partitions with a logical volume (LVM)
device type. device type.
</Text> </Content>
<Text> <Content component="p">
The order of partitions may change when the image is installed in The order of partitions may change when the image is installed in
order to conform to best practices and ensure functionality. order to conform to best practices and ensure functionality.
<br></br> <br></br>
@ -69,8 +68,8 @@ const FileSystemConfiguration = () => {
> >
Read more about manual configuration here Read more about manual configuration here
</Button> </Button>
</Text> </Content>
</TextContent> </Content>
{environments.includes('image-installer') && ( {environments.includes('image-installer') && (
<Alert <Alert
variant="warning" variant="warning"
@ -79,7 +78,7 @@ const FileSystemConfiguration = () => {
/> />
)} )}
<FileSystemTable /> <FileSystemTable />
<TextContent> <Content>
<Button <Button
className="pf-v5-u-text-align-left" className="pf-v5-u-text-align-left"
variant="link" variant="link"
@ -88,7 +87,7 @@ const FileSystemConfiguration = () => {
> >
Add partition Add partition
</Button> </Button>
</TextContent> </Content>
</> </>
); );
}; };

16
src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx
View file

@ -2,8 +2,7 @@ import React, { useRef, useState } from 'react';
import { import {
Popover, Popover,
TextContent, Content,
Text,
Button, Button,
Alert, Alert,
TextInput, TextInput,
@ -46,22 +45,21 @@ export const MinimumSizePopover = () => {
<Popover <Popover
maxWidth="30rem" maxWidth="30rem"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
Image Builder may extend this size based on requirements, selected Image Builder may extend this size based on requirements, selected
packages, and configurations. packages, and configurations.
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="File system configuration info" aria-label="File system configuration info"
aria-describedby="file-system-configuration-info" aria-describedby="file-system-configuration-info"
className="pf-v5-u-p-0" className="pf-v5-u-p-0"
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };

4
src/Components/CreateImageWizard/steps/FileSystem/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import FileSystemAutomaticPartition from './FileSystemAutomaticPartitionInformation'; import FileSystemAutomaticPartition from './FileSystemAutomaticPartitionInformation';
import FileSystemConfiguration from './FileSystemConfiguration'; import FileSystemConfiguration from './FileSystemConfiguration';
@ -22,7 +22,7 @@ const FileSystemStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
File system configuration File system configuration
</Title> </Title>
<Text>Define the partitioning of the image.</Text> <Content component="p">Define the partitioning of the image.</Content>
{hasIsoTargetOnly ? ( {hasIsoTargetOnly ? (
<FileSystemAutomaticPartition /> <FileSystemAutomaticPartition />
) : fileSystemConfigurationType === 'automatic' ? ( ) : fileSystemConfigurationType === 'automatic' ? (

6
src/Components/CreateImageWizard/steps/Firewall/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import PortsInput from './components/PortsInput'; import PortsInput from './components/PortsInput';
import Services from './components/Services'; import Services from './components/Services';
@ -11,7 +11,9 @@ const FirewallStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Firewall Firewall
</Title> </Title>
<Text>Customize firewall settings for your image.</Text> <Content component="p">
Customize firewall settings for your image.
</Content>
<PortsInput /> <PortsInput />
<Services /> <Services />
</Form> </Form>

14
src/Components/CreateImageWizard/steps/FirstBoot/index.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { CodeEditor, Language } from '@patternfly/react-code-editor'; import { CodeEditor, Language } from '@patternfly/react-code-editor';
import { import {
Text, Content,
Form, Form,
FormGroup, FormGroup,
FormHelperText, FormHelperText,
@ -52,22 +52,22 @@ const FirstBootStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
First boot configuration First boot configuration
</Title> </Title>
<Text> <Content component="p">
Configure the image with a custom script that will execute on its first Configure the image with a custom script that will execute on its first
boot. boot.
</Text> </Content>
<Alert <Alert
variant="warning" variant="warning"
isExpandable isExpandable
isInline isInline
title="Important: please do not include sensitive information" title="Important: please do not include sensitive information"
> >
<Text> <Content component="p">
Please ensure that your script does not contain any secrets, Please ensure that your script does not contain any secrets,
passwords, or other sensitive data. All scripts should be crafted passwords, or other sensitive data. All scripts should be crafted
without including confidential information to maintain security and without including confidential information to maintain security and
privacy. privacy.
</Text> </Content>
</Alert> </Alert>
<FormGroup> <FormGroup>
<CodeEditor <CodeEditor
@ -93,9 +93,7 @@ const FirstBootStep = () => {
{errors.script && ( {errors.script && (
<FormHelperText> <FormHelperText>
<HelperText> <HelperText>
<HelperTextItem variant="error" hasIcon> <HelperTextItem variant="error">{errors.script}</HelperTextItem>
{errors.script}
</HelperTextItem>
</HelperText> </HelperText>
</FormHelperText> </FormHelperText>
)} )}

4
src/Components/CreateImageWizard/steps/Hostname/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import HostnameInput from './components/HostnameInput'; import HostnameInput from './components/HostnameInput';
@ -10,7 +10,7 @@ const HostnameStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Hostname Hostname
</Title> </Title>
<Text>Select a hostname for your image.</Text> <Content component="p">Select a hostname for your image.</Content>
<HostnameInput /> <HostnameInput />
</Form> </Form>
); );

66
src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
View file

@ -6,12 +6,11 @@ import {
FormGroup, FormGroup,
Popover, Popover,
Radio, Radio,
Text,
TextContent,
TextVariants,
Tile,
Tooltip, Tooltip,
Content,
ContentVariants,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Tile } from '@patternfly/react-core/deprecated';
import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons'; import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
import { useGetArchitecturesQuery } from '../../../../store/backendApi'; import { useGetArchitecturesQuery } from '../../../../store/backendApi';
@ -123,7 +122,9 @@ const TargetEnvironment = () => {
data-testid="target-select" data-testid="target-select"
> >
<FormGroup <FormGroup
label={<Text component={TextVariants.small}>Public cloud</Text>} label={
<Content component={ContentVariants.small}>Public cloud</Content>
}
> >
<div className="tiles"> <div className="tiles">
{supportedEnvironments?.includes('aws') && ( {supportedEnvironments?.includes('aws') && (
@ -214,7 +215,9 @@ const TargetEnvironment = () => {
{supportedEnvironments?.includes('vsphere') && ( {supportedEnvironments?.includes('vsphere') && (
<> <>
<FormGroup <FormGroup
label={<Text component={TextVariants.small}>Private cloud</Text>} label={
<Content component={ContentVariants.small}>Private cloud</Content>
}
className="pf-v5-u-mt-sm" className="pf-v5-u-mt-sm"
> >
<Checkbox <Checkbox
@ -251,26 +254,25 @@ const TargetEnvironment = () => {
maxWidth="30rem" maxWidth="30rem"
position="right" position="right"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
An OVA file is a virtual appliance used by An OVA file is a virtual appliance used by
virtualization platforms such as VMware virtualization platforms such as VMware
vSphere. It is a package that contains files vSphere. It is a package that contains files
used to describe a virtual machine, which used to describe a virtual machine, which
includes a VMDK image, OVF descriptor file and includes a VMDK image, OVF descriptor file and
a manifest file. a manifest file.
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
variant="plain" variant="plain"
aria-label="About OVA file" aria-label="About OVA file"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
</> </>
} }
@ -300,24 +302,23 @@ const TargetEnvironment = () => {
maxWidth="30rem" maxWidth="30rem"
position="right" position="right"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
A VMDK file is a virtual disk that stores the A VMDK file is a virtual disk that stores the
contents of a virtual machine. This disk has to contents of a virtual machine. This disk has to
be imported into vSphere using govc import.vmdk, be imported into vSphere using govc import.vmdk,
use the OVA version when using the vSphere UI. use the OVA version when using the vSphere UI.
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
variant="plain" variant="plain"
aria-label="About VMDK file" aria-label="About VMDK file"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
</> </>
} }
@ -339,7 +340,9 @@ const TargetEnvironment = () => {
</FormGroup> </FormGroup>
</> </>
)} )}
<FormGroup label={<Text component={TextVariants.small}>Other</Text>}> <FormGroup
label={<Content component={ContentVariants.small}>Other</Content>}
>
{supportedEnvironments?.includes('guest-image') && ( {supportedEnvironments?.includes('guest-image') && (
<Checkbox <Checkbox
label="Virtualization - Guest image (.qcow2)" label="Virtualization - Guest image (.qcow2)"
@ -375,20 +378,22 @@ const TargetEnvironment = () => {
maxWidth="30rem" maxWidth="30rem"
position="right" position="right"
headerContent={ headerContent={
<TextContent> <Content>
<Text>WSL is not officially supported by Red Hat</Text> <Content component="p">
</TextContent> WSL is not officially supported by Red Hat
</Content>
</Content>
} }
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
You can use RHEL on Microsoft&apos;s Windows Subsystem You can use RHEL on Microsoft&apos;s Windows Subsystem
for Linux (WSL) for development and learning use cases. for Linux (WSL) for development and learning use cases.
Red Hat supports WSL under the Validated Software Red Hat supports WSL under the Validated Software
Pattern and Third Party Component Support Policy, which Pattern and Third Party Component Support Policy, which
does not include production use cases. does not include production use cases.
</Text> </Content>
</TextContent> </Content>
} }
footerContent={ footerContent={
<Button <Button
@ -405,13 +410,12 @@ const TargetEnvironment = () => {
} }
> >
<Button <Button
icon={<HelpIcon />}
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
variant="plain" variant="plain"
aria-label="About WSL file" aria-label="About WSL file"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
</> </>
} }

6
src/Components/CreateImageWizard/steps/ImageOutput/index.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import ArchSelect from './ArchSelect'; import ArchSelect from './ArchSelect';
import CentOSAcknowledgement from './CentOSAcknowledgement'; import CentOSAcknowledgement from './CentOSAcknowledgement';
@ -38,12 +38,12 @@ const ImageOutputStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Image output Image output
</Title> </Title>
<Text> <Content component="p">
Images enables you to create customized blueprints, create custom images Images enables you to create customized blueprints, create custom images
from the blueprints, and push them to target environments. from the blueprints, and push them to target environments.
<br /> <br />
<DocumentationButton /> <DocumentationButton />
</Text> </Content>
<ReleaseSelect /> <ReleaseSelect />
{distribution.match('centos-*') && <CentOSAcknowledgement />} {distribution.match('centos-*') && <CentOSAcknowledgement />}
<ReleaseLifecycle /> <ReleaseLifecycle />

5
src/Components/CreateImageWizard/steps/Kernel/components/KernelName.tsx
View file

@ -130,12 +130,11 @@ const KernelName = () => {
{kernel && ( {kernel && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={onClearButtonClick} onClick={onClearButtonClick}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

6
src/Components/CreateImageWizard/steps/Kernel/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import KernelArguments from './components/KernelArguments'; import KernelArguments from './components/KernelArguments';
import KernelName from './components/KernelName'; import KernelName from './components/KernelName';
@ -11,7 +11,9 @@ const KernelStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Kernel Kernel
</Title> </Title>
<Text>Customize kernel name and kernel arguments.</Text> <Content component="p">
Customize kernel name and kernel arguments.
</Content>
<KernelName /> <KernelName />
<KernelArguments /> <KernelArguments />
</Form> </Form>

5
src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx
View file

@ -115,12 +115,11 @@ const KeyboardDropDown = () => {
{keyboard && ( {keyboard && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={onClearButtonClick} onClick={onClearButtonClick}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

5
src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx
View file

@ -119,12 +119,11 @@ const LanguagesDropDown = () => {
{inputValue && ( {inputValue && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={onClearButtonClick} onClick={onClearButtonClick}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

4
src/Components/CreateImageWizard/steps/Locale/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import KeyboardDropDown from './components/KeyboardDropDown'; import KeyboardDropDown from './components/KeyboardDropDown';
import LanguagesDropDown from './components/LanguagesDropDown'; import LanguagesDropDown from './components/LanguagesDropDown';
@ -11,7 +11,7 @@ const LocaleStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Locale Locale
</Title> </Title>
<Text>Select the locale for your image.</Text> <Content component="p">Select the locale for your image.</Content>
<LanguagesDropDown /> <LanguagesDropDown />
<KeyboardDropDown /> <KeyboardDropDown />
</Form> </Form>

87
src/Components/CreateImageWizard/steps/Oscap/components/OscapProfileInformation.tsx
View file

@ -1,13 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { import { Spinner, Content, ContentVariants } from '@patternfly/react-core';
Spinner,
TextContent,
TextList,
TextListItem,
TextListItemVariants,
TextListVariants,
} from '@patternfly/react-core';
import { useGetOscapCustomizationsQuery } from '../../../../../store/backendApi'; import { useGetOscapCustomizationsQuery } from '../../../../../store/backendApi';
import { PolicyRead, usePolicyQuery } from '../../../../../store/complianceApi'; import { PolicyRead, usePolicyQuery } from '../../../../../store/complianceApi';
@ -84,75 +77,75 @@ export const OscapProfileInformation = ({
)} )}
{isSuccessOscapProfileInfo && ( {isSuccessOscapProfileInfo && (
<> <>
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Profile description: Profile description:
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{oscapProfile?.profile_description} {oscapProfile?.profile_description}
</TextListItem> </Content>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Reference ID: Reference ID:
</TextListItem> </Content>
<TextListItem <Content
data-testid="oscap-profile-info-ref-id" data-testid="oscap-profile-info-ref-id"
component={TextListItemVariants.dd} component={ContentVariants.dd}
> >
{oscapProfile?.profile_id} {oscapProfile?.profile_id}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
</> </>
)} )}
{isSuccessPolicyInfo && ( {isSuccessPolicyInfo && (
<> <>
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Policy description: Policy description:
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{policyInfo?.data?.schema?.description} {policyInfo?.data?.schema?.description}
</TextListItem> </Content>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Business objective: Business objective:
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{policyInfo?.data?.schema?.business_objective} {policyInfo?.data?.schema?.business_objective}
</TextListItem> </Content>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Policy type: Policy type:
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{policyInfo?.data?.schema?.type} {policyInfo?.data?.schema?.type}
</TextListItem> </Content>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Reference ID: Reference ID:
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{policyInfo?.data?.schema?.id} {policyInfo?.data?.schema?.id}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
</> </>
)} )}
</> </>

5
src/Components/CreateImageWizard/steps/Oscap/components/ProfileSelector.tsx
View file

@ -340,12 +340,11 @@ const ProfileSelector = () => {
{profileID && ( {profileID && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={handleClear} onClick={handleClear}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

6
src/Components/CreateImageWizard/steps/Oscap/index.tsx
View file

@ -4,7 +4,7 @@ import {
Alert, Alert,
AlertActionLink, AlertActionLink,
Form, Form,
Text, Content,
Title, Title,
ToggleGroup, ToggleGroup,
ToggleGroupItem, ToggleGroupItem,
@ -114,13 +114,13 @@ const OscapContent = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
{complianceEnabled ? 'Compliance' : 'OpenSCAP profile'} {complianceEnabled ? 'Compliance' : 'OpenSCAP profile'}
</Title> </Title>
<Text> <Content component="p">
Below you can select which Insights compliance policy or OpenSCAP Below you can select which Insights compliance policy or OpenSCAP
profile your image will be compliant to. Insights compliance allows the profile your image will be compliant to. Insights compliance allows the
use of tailored policies, whereas OpenSCAP gives you the default use of tailored policies, whereas OpenSCAP gives you the default
versions. This will automatically help monitor the adherence of your versions. This will automatically help monitor the adherence of your
registered RHEL systems to a selected policy or profile. registered RHEL systems to a selected policy or profile.
</Text> </Content>
{complianceEnabled && ( {complianceEnabled && (
<ToggleGroup aria-label="Default with single selectable"> <ToggleGroup aria-label="Default with single selectable">
<ToggleGroupItem <ToggleGroupItem

29
src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx
View file

@ -12,9 +12,8 @@ import {
PanelMainBody, PanelMainBody,
Popover, Popover,
Spinner, Spinner,
Text, Content,
TextContent, ContentVariants,
TextVariants,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { HelpIcon, OptimizeIcon } from '@patternfly/react-icons'; import { HelpIcon, OptimizeIcon } from '@patternfly/react-icons';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@ -160,8 +159,8 @@ const PackageRecommendations = () => {
Recommended Red Hat packages{' '} Recommended Red Hat packages{' '}
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<TextContent> <Content>
<Text component={TextVariants.small}> <Content component={ContentVariants.small}>
<em>Powered by RHEL Lightspeed</em>{' '} <em>Powered by RHEL Lightspeed</em>{' '}
<Popover <Popover
maxWidth="30rem" maxWidth="30rem"
@ -170,19 +169,19 @@ const PackageRecommendations = () => {
onShow={() => setIsExpanded(false)} onShow={() => setIsExpanded(false)}
onHide={() => setIsExpanded(false)} onHide={() => setIsExpanded(false)}
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
RHEL Lightspeed provides intelligent tools to RHEL Lightspeed provides intelligent tools to
improve the productivity and efficiency of teams improve the productivity and efficiency of teams
using RHEL. using RHEL.
</Text> </Content>
</TextContent> </Content>
} }
> >
<HelpIcon /> <HelpIcon />
</Popover> </Popover>
</Text> </Content>
</TextContent> </Content>
</FlexItem> </FlexItem>
</Flex> </Flex>
} }
@ -209,12 +208,12 @@ const PackageRecommendations = () => {
)} )}
{isSuccess && data && data?.packages && ( {isSuccess && data && data?.packages && (
<> <>
<TextContent> <Content>
<Text> <Content component="p">
Other users commonly add these packages with the ones you Other users commonly add these packages with the ones you
selected. selected.
</Text> </Content>
</TextContent> </Content>
<Table variant="compact"> <Table variant="compact">
<Thead> <Thead>
<Tr> <Tr>

73
src/Components/CreateImageWizard/steps/Packages/Packages.tsx
View file

@ -11,8 +11,6 @@ import {
EmptyStateActions, EmptyStateActions,
EmptyStateBody, EmptyStateBody,
EmptyStateFooter, EmptyStateFooter,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateVariant, EmptyStateVariant,
Icon, Icon,
Pagination, Pagination,
@ -24,14 +22,14 @@ import {
Tab, Tab,
Tabs, Tabs,
TabTitleText, TabTitleText,
Text, Content,
ToggleGroup, ToggleGroup,
ToggleGroupItem, ToggleGroupItem,
Toolbar, Toolbar,
ToolbarContent, ToolbarContent,
ToolbarItem, ToolbarItem,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Modal } from '@patternfly/react-core'; import { Modal } from '@patternfly/react-core/deprecated';
import { import {
CheckCircleIcon, CheckCircleIcon,
ExclamationCircleIcon, ExclamationCircleIcon,
@ -363,8 +361,7 @@ const Packages = () => {
<Tr> <Tr>
<Td colSpan={6}> <Td colSpan={6}>
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.sm}> <EmptyState icon={SearchIcon} variant={EmptyStateVariant.sm}>
<EmptyStateHeader icon={<EmptyStateIcon icon={SearchIcon} />} />
{toggleSelected === 'toggle-available' ? ( {toggleSelected === 'toggle-available' ? (
<EmptyStateBody> <EmptyStateBody>
Search above to add additional Search above to add additional
@ -392,8 +389,7 @@ const Packages = () => {
<Tr> <Tr>
<Td colSpan={6}> <Td colSpan={6}>
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.sm}> <EmptyState icon={Spinner} variant={EmptyStateVariant.sm}>
<EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
<EmptyStateBody> <EmptyStateBody>
{activeTabKey === Repos.OTHER {activeTabKey === Repos.OTHER
? 'Searching for recommendations' ? 'Searching for recommendations'
@ -413,12 +409,12 @@ const Packages = () => {
<Tr> <Tr>
<Td colSpan={6}> <Td colSpan={6}>
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.sm}> <EmptyState
<EmptyStateHeader headingLevel="h4"
icon={<EmptyStateIcon icon={SearchIcon} />} icon={SearchIcon}
titleText="The search value is too short" titleText="The search value is too short"
headingLevel="h4" variant={EmptyStateVariant.sm}
/> >
<EmptyStateBody> <EmptyStateBody>
Please make the search more specific and try again. Please make the search more specific and try again.
</EmptyStateBody> </EmptyStateBody>
@ -436,11 +432,11 @@ const Packages = () => {
<Tr> <Tr>
<Td colSpan={6}> <Td colSpan={6}>
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.sm}> <EmptyState
<EmptyStateHeader headingLevel="h4"
titleText="No selected packages in Other repos" titleText="No selected packages in Other repos"
headingLevel="h4" variant={EmptyStateVariant.sm}
/> >
<EmptyStateBody> <EmptyStateBody>
Try looking under &quot; Try looking under &quot;
<Button <Button
@ -467,14 +463,12 @@ const Packages = () => {
<Tr> <Tr>
<Td colSpan={6}> <Td colSpan={6}>
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.sm}> <EmptyState
<EmptyStateHeader headingLevel="h4"
icon={<EmptyStateIcon icon={SearchIcon} />} titleText="No results found"
/> icon={SearchIcon}
<EmptyStateHeader variant={EmptyStateVariant.sm}
titleText="No results found" >
headingLevel="h4"
/>
<EmptyStateBody> <EmptyStateBody>
Adjust your search and try again, or search in other Adjust your search and try again, or search in other
repositories (your repositories and popular repositories). repositories (your repositories and popular repositories).
@ -515,14 +509,12 @@ const Packages = () => {
<Tr> <Tr>
<Td colSpan={6}> <Td colSpan={6}>
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.sm}> <EmptyState
<EmptyStateHeader headingLevel="h4"
icon={<EmptyStateIcon icon={SearchIcon} />} titleText="No results found"
/> icon={SearchIcon}
<EmptyStateHeader variant={EmptyStateVariant.sm}
titleText="No results found" >
headingLevel="h4"
/>
<EmptyStateBody> <EmptyStateBody>
No packages found in known repositories. If you know of a No packages found in known repositories. If you know of a
repository containing this packages, add it to{' '} repository containing this packages, add it to{' '}
@ -1197,20 +1189,21 @@ const Packages = () => {
</Tbody> </Tbody>
</Table> </Table>
) : ( ) : (
<Text>This group has no packages</Text> <Content component="p">
This group has no packages
</Content>
)} )}
</div> </div>
} }
> >
<Button <Button
icon={<HelpIcon className="pf-v5-u-ml-xs" />}
variant="plain" variant="plain"
aria-label="About included packages" aria-label="About included packages"
component="span" component="span"
className="pf-v5-u-p-0" className="pf-v5-u-p-0"
isInline isInline
> />
<HelpIcon className="pf-v5-u-ml-xs" />
</Button>
</Popover> </Popover>
</Td> </Td>
<Td>N/A</Td> <Td>N/A</Td>
@ -1448,7 +1441,7 @@ const Packages = () => {
<Toolbar> <Toolbar>
<Stack> <Stack>
<ToolbarContent> <ToolbarContent>
<ToolbarItem variant="search-filter"> <ToolbarItem>
<SearchInput <SearchInput
type="text" type="text"
placeholder="Search packages" placeholder="Search packages"

19
src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Button, Popover, TextContent, Text } from '@patternfly/react-core'; import { Button, Popover, Content } from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons'; import { HelpIcon } from '@patternfly/react-icons';
const PackageInfoNotAvailablePopover = () => { const PackageInfoNotAvailablePopover = () => {
@ -8,25 +8,24 @@ const PackageInfoNotAvailablePopover = () => {
<Popover <Popover
headerContent="Package description" headerContent="Package description"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
The package description provides more information about the package. The package description provides more information about the package.
</Text> </Content>
<Text> <Content component="p">
When editing an existing blueprint, you may see a &quot;Not When editing an existing blueprint, you may see a &quot;Not
available&quot; value in the field because information about available&quot; value in the field because information about
previously added packages can not be fetched. previously added packages can not be fetched.
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="Package description" aria-label="Package description"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };

28
src/Components/CreateImageWizard/steps/Packages/components/RepoPopovers.tsx
View file

@ -1,30 +1,29 @@
import React from 'react'; import React from 'react';
import { Button, Popover, Text, TextContent } from '@patternfly/react-core'; import { Button, Popover, Content } from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons'; import { HelpIcon } from '@patternfly/react-icons';
export const IncludedReposPopover = () => { export const IncludedReposPopover = () => {
return ( return (
<Popover <Popover
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
View packages from the Red Hat repository and repositories View packages from the Red Hat repository and repositories
you&apos;ve selected. you&apos;ve selected.
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="About included repositories" aria-label="About included repositories"
component="span" component="span"
className="pf-v5-u-p-0" className="pf-v5-u-p-0"
size="sm" size="sm"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };
@ -33,24 +32,23 @@ export const OtherReposPopover = () => {
return ( return (
<Popover <Popover
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
View packages from popular repositories and your other repositories View packages from popular repositories and your other repositories
not included in the image. not included in the image.
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="About other repositories" aria-label="About other repositories"
component="span" component="span"
className="pf-v5-u-p-0" className="pf-v5-u-p-0"
size="sm" size="sm"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };

6
src/Components/CreateImageWizard/steps/Packages/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Alert, Text, Form, Title } from '@patternfly/react-core'; import { Alert, Content, Form, Title } from '@patternfly/react-core';
import PackageRecommendations from './PackageRecommendations'; import PackageRecommendations from './PackageRecommendations';
import Packages from './Packages'; import Packages from './Packages';
@ -16,7 +16,9 @@ const PackagesStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Additional packages Additional packages
</Title> </Title>
<Text>Blueprints created with Images include all required packages.</Text> <Content component="p">
Blueprints created with Images include all required packages.
</Content>
{!process.env.IS_ON_PREMISE && ( {!process.env.IS_ON_PREMISE && (
<Alert variant="info" isInline title="Search for package groups"> <Alert variant="info" isInline title="Search for package groups">
Search for package groups by starting your search with the Search for package groups by starting your search with the

96
src/Components/CreateImageWizard/steps/Registration/ActivationKeyInformation.tsx
View file

@ -3,13 +3,8 @@ import React from 'react';
import { import {
Alert, Alert,
Spinner, Spinner,
Text, Content,
TextContent, ContentVariants,
TextList,
TextListItem,
TextListItemVariants,
TextListVariants,
TextVariants,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Button, Popover } from '@patternfly/react-core'; import { Button, Popover } from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons'; import { HelpIcon } from '@patternfly/react-icons';
@ -38,56 +33,45 @@ const ActivationKeyInformation = (): JSX.Element => {
<> <>
{isFetchingActivationKeyInfo && <Spinner size="lg" />} {isFetchingActivationKeyInfo && <Spinner size="lg" />}
{isSuccessActivationKeyInfo && ( {isSuccessActivationKeyInfo && (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Name:</Content>
Name: <Content component={ContentVariants.dd}>{activationKey}</Content>
</TextListItem> <Content component={ContentVariants.dt}>Role:</Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{activationKey}
</TextListItem>
<TextListItem component={TextListItemVariants.dt}>
Role:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{activationKeyInfo?.body?.role || 'Not defined'} {activationKeyInfo?.body?.role || 'Not defined'}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>SLA:</Content>
SLA: <Content component={ContentVariants.dd}>
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{activationKeyInfo?.body?.serviceLevel || 'Not defined'} {activationKeyInfo?.body?.serviceLevel || 'Not defined'}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Usage:</Content>
Usage: <Content component={ContentVariants.dd}>
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{activationKeyInfo?.body?.usage || 'Not defined'} {activationKeyInfo?.body?.usage || 'Not defined'}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>
Additional repositories: Additional repositories:
<Popover <Popover
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
The core repositories for your operating system version The core repositories for your operating system version
are always enabled and do not need to be explicitly added are always enabled and do not need to be explicitly added
to the activation key. to the activation key.
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="About additional repositories" aria-label="About additional repositories"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
> />
<HelpIcon />
</Button>
</Popover> </Popover>
</TextListItem> </Content>
<TextListItem <Content
component={TextListItemVariants.dd} component={ContentVariants.dd}
className="pf-v5-u-display-flex pf-v5-u-align-items-flex-end" className="pf-v5-u-display-flex pf-v5-u-align-items-flex-end"
> >
{activationKeyInfo?.body?.additionalRepositories && {activationKeyInfo?.body?.additionalRepositories &&
@ -96,10 +80,10 @@ const ActivationKeyInformation = (): JSX.Element => {
position="right" position="right"
minWidth="30rem" minWidth="30rem"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text component={TextVariants.h3}> <Content component={ContentVariants.h3}>
Additional repositories Additional repositories
</Text> </Content>
<Table <Table
aria-label="Additional repositories table" aria-label="Additional repositories table"
variant="compact" variant="compact"
@ -119,7 +103,7 @@ const ActivationKeyInformation = (): JSX.Element => {
)} )}
</Tbody> </Tbody>
</Table> </Table>
</TextContent> </Content>
} }
> >
<Button <Button
@ -134,20 +118,16 @@ const ActivationKeyInformation = (): JSX.Element => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
)} )}
{isErrorActivationKeyInfo && ( {isErrorActivationKeyInfo && (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Name:</Content>
Name: <Content component={ContentVariants.dd}>{activationKey}</Content>
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}>
{activationKey}
</TextListItem>
</TextList>
<br /> <br />
<Alert <Alert
title="Information about the activation key unavailable" title="Information about the activation key unavailable"
@ -158,7 +138,7 @@ const ActivationKeyInformation = (): JSX.Element => {
Information about the activation key cannot be loaded. Please check Information about the activation key cannot be loaded. Please check
the key was not removed and try again later. the key was not removed and try again later.
</Alert> </Alert>
</TextContent> </Content>
)} )}
</> </>
); );

11
src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx
View file

@ -7,8 +7,7 @@ import {
Select, Select,
SelectList, SelectList,
SelectOption, SelectOption,
Text, Content,
TextContent,
MenuToggleElement, MenuToggleElement,
MenuToggle, MenuToggle,
TextInputGroup, TextInputGroup,
@ -262,11 +261,11 @@ const ActivationKeysList = () => {
> >
<SelectList>{prepareSelectOptions()}</SelectList> <SelectList>{prepareSelectOptions()}</SelectList>
</Select> </Select>
<TextContent> <Content>
<Text> <Content component="p">
Create and manage activation keys on the <ManageKeysButton /> Create and manage activation keys on the <ManageKeysButton />
</Text> </Content>
</TextContent> </Content>
</FormGroup> </FormGroup>
{isErrorActivationKeys && ( {isErrorActivationKeys && (
<Alert <Alert

29
src/Components/CreateImageWizard/steps/Registration/Registration.tsx
View file

@ -6,8 +6,7 @@ import {
FormGroup, FormGroup,
Popover, Popover,
Radio, Radio,
Text, Content,
TextContent,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
import { useFlag } from '@unleash/proxy-client-react'; import { useFlag } from '@unleash/proxy-client-react';
@ -27,13 +26,13 @@ const InsightsPopover = () => {
position="right" position="right"
minWidth="30rem" minWidth="30rem"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
Red Hat Insights client provides actionable intelligence about your Red Hat Insights client provides actionable intelligence about your
Red Hat Enterprise Linux environments, helping to identify and Red Hat Enterprise Linux environments, helping to identify and
address operational and vulnerability risks before an issue results address operational and vulnerability risks before an issue results
in downtime. in downtime.
</Text> </Content>
<Button <Button
component="a" component="a"
target="_blank" target="_blank"
@ -45,17 +44,16 @@ const InsightsPopover = () => {
> >
Learn more about Red Hat Insights Learn more about Red Hat Insights
</Button> </Button>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
aria-label="About remote host configuration (rhc)" aria-label="About remote host configuration (rhc)"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };
@ -67,12 +65,12 @@ const RhcPopover = () => {
position="right" position="right"
minWidth="30rem" minWidth="30rem"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
Remote host configuration allows Red Hat Enterprise Linux hosts to Remote host configuration allows Red Hat Enterprise Linux hosts to
connect to Red Hat Insights. Remote host configuration is required connect to Red Hat Insights. Remote host configuration is required
to use the Red Hat Insights Remediations service. to use the Red Hat Insights Remediations service.
</Text> </Content>
<Button <Button
component="a" component="a"
target="_blank" target="_blank"
@ -84,17 +82,16 @@ const RhcPopover = () => {
> >
Learn more about remote host configuration Learn more about remote host configuration
</Button> </Button>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
aria-label="About remote host configuration (rhc)" aria-label="About remote host configuration (rhc)"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };

1
src/Components/CreateImageWizard/steps/Registration/SatelliteRegistration.tsx
View file

@ -82,7 +82,6 @@ const SatelliteRegistration = () => {
? 'success' ? 'success'
: 'default' : 'default'
} }
hasIcon
> >
{isRejected {isRejected
? 'Must be a .PEM/.CER/.CRT file no larger than 512 KB' ? 'Must be a .PEM/.CER/.CRT file no larger than 512 KB'

29
src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx
View file

@ -1,12 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { import { Button, Popover, Spinner, Content } from '@patternfly/react-core';
Button,
Popover,
Spinner,
Text,
TextContent,
} from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons'; import { HelpIcon } from '@patternfly/react-icons';
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'; import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
@ -27,30 +21,31 @@ const PopoverActivation = () => {
hasAutoWidth hasAutoWidth
maxWidth="35rem" maxWidth="35rem"
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
Activation keys enable you to register a system with appropriate Activation keys enable you to register a system with appropriate
subscriptions, system purpose, and repositories attached. subscriptions, system purpose, and repositories attached.
</Text> </Content>
<Text> <Content component="p">
If using an activation key with command line registration, you must If using an activation key with command line registration, you must
provide your organization&apos;s ID. provide your organization&apos;s ID.
</Text> </Content>
{orgId ? ( {orgId ? (
<Text>Your organization&apos;s ID is {orgId}</Text> <Content component="p">
Your organization&apos;s ID is {orgId}
</Content>
) : ( ) : (
<Spinner size="md" /> <Spinner size="md" />
)} )}
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="Activation key popover" aria-label="Activation key popover"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0" className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };

6
src/Components/CreateImageWizard/steps/Registration/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title, FormGroup } from '@patternfly/react-core'; import { Content, Form, Title, FormGroup } from '@patternfly/react-core';
import ActivationKeyInformation from './ActivationKeyInformation'; import ActivationKeyInformation from './ActivationKeyInformation';
import ActivationKeysList from './ActivationKeysList'; import ActivationKeysList from './ActivationKeysList';
@ -21,11 +21,11 @@ const RegistrationStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Register systems using this image Register systems using this image
</Title> </Title>
<Text> <Content component="p">
You can either automatically register your systems with Red Hat to You can either automatically register your systems with Red Hat to
enhance security and track your spending or choose to register your enhance security and track your spending or choose to register your
system during initial boot. system during initial boot.
</Text> </Content>
<Registration /> <Registration />
{registrationType === 'register-satellite' && <SatelliteRegistration />} {registrationType === 'register-satellite' && <SatelliteRegistration />}
{!process.env.IS_ON_PREMISE && {!process.env.IS_ON_PREMISE &&

6
src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx
View file

@ -14,8 +14,8 @@ import {
ToggleGroupItem, ToggleGroupItem,
PaginationVariant, PaginationVariant,
Grid, Grid,
Modal,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Modal } from '@patternfly/react-core/deprecated';
import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@ -504,7 +504,7 @@ const Repositories = () => {
)} )}
<Toolbar> <Toolbar>
<ToolbarContent> <ToolbarContent>
<ToolbarItem variant="bulk-select"> <ToolbarItem>
<BulkSelect <BulkSelect
selected={selected} selected={selected}
contentList={contentList} contentList={contentList}
@ -522,7 +522,7 @@ const Repositories = () => {
} }
/> />
</ToolbarItem> </ToolbarItem>
<ToolbarItem variant="search-filter"> <ToolbarItem>
<SearchInput <SearchInput
placeholder="Filter repositories" placeholder="Filter repositories"
aria-label="Filter repositories" aria-label="Filter repositories"

20
src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx
View file

@ -50,17 +50,15 @@ export function BulkSelect({
data-testid="bulk-select-toggle" data-testid="bulk-select-toggle"
ref={toggleRef} ref={toggleRef}
isDisabled={isDisabled} isDisabled={isDisabled}
splitButtonOptions={{ splitButtonItems={[
items: [ <MenuToggleCheckbox
<MenuToggleCheckbox id="bulk-select-checkbox"
id="bulk-select-checkbox" key="split-checkbox"
key="split-checkbox" aria-label="Select all"
aria-label="Select all" isChecked={allChecked || someChecked ? null : false}
isChecked={allChecked || someChecked ? null : false} onClick={handleSelectPage}
onClick={handleSelectPage} />,
/>, ]}
],
}}
onClick={toggleDropdown} onClick={toggleDropdown}
> >
{someChecked ? `${selected.size} selected` : null} {someChecked ? `${selected.size} selected` : null}

23
src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx
View file

@ -3,8 +3,6 @@ import React from 'react';
import { import {
EmptyState, EmptyState,
EmptyStateVariant, EmptyStateVariant,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateBody, EmptyStateBody,
EmptyStateFooter, EmptyStateFooter,
Button, Button,
@ -20,16 +18,17 @@ type EmptyProps = {
const Empty = ({ hasFilterValue, refetch }: EmptyProps) => { const Empty = ({ hasFilterValue, refetch }: EmptyProps) => {
return ( return (
<EmptyState variant={EmptyStateVariant.lg} data-testid="empty-state"> <EmptyState
<EmptyStateHeader headingLevel="h4"
titleText={ icon={RepositoryIcon}
hasFilterValue titleText={
? 'No matching repositories found' hasFilterValue
: 'No custom repositories' ? 'No matching repositories found'
} : 'No custom repositories'
icon={<EmptyStateIcon icon={RepositoryIcon} />} }
headingLevel="h4" variant={EmptyStateVariant.lg}
/> data-testid="empty-state"
>
<EmptyStateBody> <EmptyStateBody>
{hasFilterValue {hasFilterValue
? 'Try another search query or clear the current search value' ? 'Try another search query or clear the current search value'

20
src/Components/CreateImageWizard/steps/Repositories/components/Loading.tsx
View file

@ -1,23 +1,15 @@
import React from 'react'; import React from 'react';
import { import { EmptyState, Spinner, Bullseye } from '@patternfly/react-core';
EmptyState,
EmptyStateIcon,
Spinner,
EmptyStateHeader,
Bullseye,
} from '@patternfly/react-core';
export const Loading = () => { export const Loading = () => {
return ( return (
<Bullseye> <Bullseye>
<EmptyState> <EmptyState
<EmptyStateHeader headingLevel="h4"
titleText="Loading" icon={Spinner}
icon={<EmptyStateIcon icon={Spinner} />} titleText="Loading"
headingLevel="h4" ></EmptyState>
/>
</EmptyState>
</Bullseye> </Bullseye>
); );
}; };

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

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Button, Label, Text, Tooltip } from '@patternfly/react-core'; import { Button, Label, Content, Tooltip } from '@patternfly/react-core';
import { ExternalLinkAltIcon, UploadIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon, UploadIcon } from '@patternfly/react-icons';
import { CONTENT_URL } from '../../../../../constants'; import { CONTENT_URL } from '../../../../../constants';
@ -9,7 +9,7 @@ const UploadRepositoryLabel = () => {
return ( return (
<Tooltip <Tooltip
content={ content={
<Text> <Content component="p">
Upload repository: Snapshots will only be taken when new content is Upload repository: Snapshots will only be taken when new content is
uploaded.&nbsp; uploaded.&nbsp;
<Button <Button
@ -23,7 +23,7 @@ const UploadRepositoryLabel = () => {
> >
Create and manage repositories here. Create and manage repositories here.
</Button> </Button>
</Text> </Content>
} }
> >
<Label <Label

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

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Alert, Button, Form, Text, Title } from '@patternfly/react-core'; import { Alert, Button, Form, Content, Title } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import Repositories from './Repositories'; import Repositories from './Repositories';
@ -37,12 +37,12 @@ const RepositoriesStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Custom repositories Custom repositories
</Title> </Title>
<Text> <Content component="p">
Select the linked custom repositories from which you can add packages to Select the linked custom repositories from which you can add packages to
the image. the image.
<br /> <br />
<ManageRepositoriesButton /> <ManageRepositoriesButton />
</Text> </Content>
{packages.length && recommendedRepos.length ? ( {packages.length && recommendedRepos.length ? (
<Alert <Alert
title="Why can't I remove a selected repository?" title="Why can't I remove a selected repository?"

2
src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx
View file

@ -7,9 +7,9 @@ import {
Spinner, Spinner,
Flex, Flex,
FlexItem, FlexItem,
Modal,
Button, Button,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Modal } from '@patternfly/react-core/deprecated';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome'; import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
import { ChromeUser } from '@redhat-cloud-services/types'; import { ChromeUser } from '@redhat-cloud-services/types';

9
src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx
View file

@ -76,9 +76,8 @@ const ReviewWizardFooter = () => {
onClick={onToggleClick} onClick={onToggleClick}
isExpanded={isOpen} isExpanded={isOpen}
isDisabled={!isValid} isDisabled={!isValid}
splitButtonOptions={{ splitButtonItems={
variant: 'action', composeId
items: composeId
? [ ? [
<EditSaveButton <EditSaveButton
key="wizard-edit-save-btn" key="wizard-edit-save-btn"
@ -95,8 +94,8 @@ const ReviewWizardFooter = () => {
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
isDisabled={!isValid} isDisabled={!isValid}
/>, />,
], ]
}} }
/> />
)} )}
shouldFocusToggleOnSelect shouldFocusToggleOnSelect

70
src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
View file

@ -5,13 +5,8 @@ import {
ExpandableSection, ExpandableSection,
Stack, Stack,
StackItem, StackItem,
Text, Content,
TextContent, ContentVariants,
TextList,
TextListItem,
TextListItemVariants,
TextListVariants,
TextVariants,
useWizardContext, useWizardContext,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { ArrowRightIcon } from '@patternfly/react-icons'; import { ArrowRightIcon } from '@patternfly/react-icons';
@ -152,6 +147,7 @@ const Review = () => {
}: RevisitStepButtonProps) => { }: RevisitStepButtonProps) => {
return ( return (
<Button <Button
icon={<ArrowRightIcon />}
variant="link" variant="link"
aria-label={ariaLabel} aria-label={ariaLabel}
data-testid={testId} data-testid={testId}
@ -160,7 +156,7 @@ const Review = () => {
className="pf-v5-u-p-0 pf-v5-u-font-weight-bold" className="pf-v5-u-p-0 pf-v5-u-font-weight-bold"
isInline isInline
> >
Revisit step <ArrowRightIcon /> Revisit step
</Button> </Button>
); );
}; };
@ -171,25 +167,25 @@ const Review = () => {
const composeExpandable = (label: string, testId: string, stepId: string) => { const composeExpandable = (label: string, testId: string, stepId: string) => {
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width pf-v5-u-text-align-left" className="pf-v5-u-min-width pf-v5-u-text-align-left"
> >
<Button variant="link" component="span" isInline> <Button variant="link" component="span" isInline>
{label} {label}
</Button> </Button>
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
<RevisitStepButton <RevisitStepButton
ariaLabel={`Revisit ${label} step`} ariaLabel={`Revisit ${label} step`}
testId={testId} testId={testId}
stepId={stepId} stepId={stepId}
/> />
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -249,44 +245,44 @@ const Review = () => {
</Stack> </Stack>
{environments.includes('vsphere') && ( {environments.includes('vsphere') && (
<TextContent> <Content>
<Text component={TextVariants.h3}> <Content component={ContentVariants.h3}>
{targetOptions.vsphere} (.vmdk) {targetOptions.vsphere} (.vmdk)
</Text> </Content>
<TargetEnvOtherList /> <TargetEnvOtherList />
</TextContent> </Content>
)} )}
{environments.includes('vsphere-ova') && ( {environments.includes('vsphere-ova') && (
<TextContent> <Content>
<Text component={TextVariants.h3}> <Content component={ContentVariants.h3}>
{targetOptions['vsphere-ova']} (.ova) {targetOptions['vsphere-ova']} (.ova)
</Text> </Content>
<TargetEnvOtherList /> <TargetEnvOtherList />
</TextContent> </Content>
)} )}
{environments.includes('guest-image') && ( {environments.includes('guest-image') && (
<TextContent> <Content>
<Text component={TextVariants.h3}> <Content component={ContentVariants.h3}>
{targetOptions['guest-image']} (.qcow2) {targetOptions['guest-image']} (.qcow2)
</Text> </Content>
<TargetEnvOtherList /> <TargetEnvOtherList />
</TextContent> </Content>
)} )}
{environments.includes('image-installer') && ( {environments.includes('image-installer') && (
<TextContent> <Content>
<Text component={TextVariants.h3}> <Content component={ContentVariants.h3}>
{targetOptions['image-installer']} (.iso) {targetOptions['image-installer']} (.iso)
</Text> </Content>
<TargetEnvOtherList /> <TargetEnvOtherList />
</TextContent> </Content>
)} )}
{environments.includes('wsl') && ( {environments.includes('wsl') && (
<TextContent> <Content>
<Text component={TextVariants.h3}> <Content component={ContentVariants.h3}>
WSL - {targetOptions.wsl} (.tar.gz) WSL - {targetOptions.wsl} (.tar.gz)
</Text> </Content>
<TargetEnvOtherList /> <TargetEnvOtherList />
</TextContent> </Content>
)} )}
</ExpandableSection> </ExpandableSection>
{isRhel(distribution) && ( {isRhel(distribution) && (

14
src/Components/CreateImageWizard/steps/Review/ReviewStepTables.tsx
View file

@ -3,8 +3,6 @@ import React from 'react';
import { import {
Alert, Alert,
EmptyState, EmptyState,
EmptyStateHeader,
EmptyStateIcon,
Panel, Panel,
PanelMain, PanelMain,
Spinner, Spinner,
@ -114,13 +112,11 @@ const Error = () => {
const Loading = () => { const Loading = () => {
return ( return (
<EmptyState> <EmptyState
<EmptyStateHeader headingLevel="h4"
titleText="Loading" icon={Spinner}
icon={<EmptyStateIcon icon={Spinner} />} titleText="Loading"
headingLevel="h4" ></EmptyState>
/>
</EmptyState>
); );
}; };

652
src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
View file

@ -4,13 +4,8 @@ import {
Alert, Alert,
Button, Button,
Popover, Popover,
Text, Content,
TextContent, ContentVariants,
TextList,
TextListItem,
TextListVariants,
TextListItemVariants,
TextVariants,
FormGroup, FormGroup,
CodeBlock, CodeBlock,
CodeBlockCode, CodeBlockCode,
@ -111,38 +106,33 @@ export const ImageOutputList = () => {
? ON_PREM_RELEASES ? ON_PREM_RELEASES
: RELEASES; : RELEASES;
return ( return (
<TextContent> <Content>
{distribution === RHEL_8 && ( {distribution === RHEL_8 && (
<> <>
<Text className="pf-v5-u-font-size-sm"> <Content component="p" className="pf-v5-u-font-size-sm">
{RELEASES.get(distribution)} will be supported through{' '} {RELEASES.get(distribution)} will be supported through{' '}
{toMonthAndYear(RHEL_8_FULL_SUPPORT[1])}, with optional ELS support {toMonthAndYear(RHEL_8_FULL_SUPPORT[1])}, with optional ELS support
through {toMonthAndYear(RHEL_8_MAINTENANCE_SUPPORT[1])}. Consider through {toMonthAndYear(RHEL_8_MAINTENANCE_SUPPORT[1])}. Consider
building an image with {RELEASES.get(RHEL_9)} to extend the support building an image with {RELEASES.get(RHEL_9)} to extend the support
period. period.
</Text> </Content>
<FormGroup label="Release lifecycle"> <FormGroup label="Release lifecycle">
<MajorReleasesLifecyclesChart /> <MajorReleasesLifecyclesChart />
</FormGroup> </FormGroup>
<br /> <br />
</> </>
)} )}
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Release Release
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{releases.get(distribution)} {releases.get(distribution)}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Architecture</Content>
Architecture <Content component={ContentVariants.dd}>{arch}</Content>
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}>{arch}</TextListItem> </Content>
</TextList>
</TextContent>
); );
}; };
export const FSCList = () => { export const FSCList = () => {
@ -152,15 +142,12 @@ export const FSCList = () => {
const partitions = useAppSelector(selectPartitions); const partitions = useAppSelector(selectPartitions);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Configuration type Configuration type
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{fileSystemConfigurationType === 'manual' ? 'Manual' : 'Automatic'} {fileSystemConfigurationType === 'manual' ? 'Manual' : 'Automatic'}
{fileSystemConfigurationType === 'manual' && ( {fileSystemConfigurationType === 'manual' && (
<> <>
@ -183,17 +170,17 @@ export const FSCList = () => {
</Popover> </Popover>
</> </>
)} )}
</TextListItem> </Content>
{fileSystemConfigurationType === 'manual' && ( {fileSystemConfigurationType === 'manual' && (
<> <>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>
Image size (minimum) <MinimumSizePopover /> Image size (minimum) <MinimumSizePopover />
</TextListItem> </Content>
<MinSize partitions={partitions} /> <MinSize partitions={partitions} />
</> </>
)} )}
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -217,9 +204,7 @@ export const MinSize = ({ partitions }: MinSizeProps) => {
} }
} }
return ( return <Content component={ContentVariants.dd}> {minSize} </Content>;
<TextListItem component={TextListItemVariants.dd}> {minSize} </TextListItem>
);
}; };
export const TargetEnvAWSList = () => { export const TargetEnvAWSList = () => {
@ -241,40 +226,29 @@ export const TargetEnvAWSList = () => {
); );
return ( return (
<TextContent> <Content>
<Text component={TextVariants.h3}>{targetOptions.aws}</Text> <Content component={ContentVariants.h3}>{targetOptions.aws}</Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Image type Image type
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
Red Hat hosted image Red Hat hosted image
<br /> <br />
<ExpirationWarning /> <ExpirationWarning />
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Shared to account</Content>
Shared to account <Content component={ContentVariants.dd}>{awsAccountId}</Content>
</TextListItem> <Content component={ContentVariants.dt}>
<TextListItem component={TextListItemVariants.dd}>
{awsAccountId}
</TextListItem>
<TextListItem component={TextListItemVariants.dt}>
{awsShareMethod === 'sources' ? 'Source' : null} {awsShareMethod === 'sources' ? 'Source' : null}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{isSuccess && awsShareMethod === 'sources' ? source?.name : null} {isSuccess && awsShareMethod === 'sources' ? source?.name : null}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Default region</Content>
Default region <Content component={ContentVariants.dd}>us-east-1</Content>
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> </Content>
us-east-1
</TextListItem>
</TextList>
</TextContent>
); );
}; };
@ -283,37 +257,30 @@ export const TargetEnvGCPList = () => {
const sharedMethod = useAppSelector(selectGcpShareMethod); const sharedMethod = useAppSelector(selectGcpShareMethod);
const email = useAppSelector(selectGcpEmail); const email = useAppSelector(selectGcpEmail);
return ( return (
<TextContent> <Content>
<Text component={TextVariants.h3}>{targetOptions.gcp}</Text> <Content component={ContentVariants.h3}>{targetOptions.gcp}</Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Image type Image type
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
Red Hat hosted image Red Hat hosted image
<br /> <br />
<ExpirationWarning /> <ExpirationWarning />
</TextListItem> </Content>
<> <>
{sharedMethod === 'withInsights' ? ( {sharedMethod === 'withInsights' ? (
<> <>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Shared with</Content>
Shared with <Content component={ContentVariants.dd}>
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
Red Hat Insights only Red Hat Insights only
<br /> <br />
</TextListItem> </Content>
</> </>
) : ( ) : (
<> <>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Account type</Content>
Account type <Content component={ContentVariants.dd}>
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{accountType === 'group' {accountType === 'group'
? 'Google group' ? 'Google group'
: accountType === 'serviceAccount' : accountType === 'serviceAccount'
@ -321,18 +288,18 @@ export const TargetEnvGCPList = () => {
: accountType === 'user' : accountType === 'user'
? 'Google account' ? 'Google account'
: 'Domain'} : 'Domain'}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>
{accountType === 'domain' ? 'Domain' : 'Principal'} {accountType === 'domain' ? 'Domain' : 'Principal'}
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{email || accountType} {email || accountType}
</TextListItem> </Content>
</> </>
)} )}
</> </>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -346,94 +313,71 @@ export const TargetEnvAzureList = () => {
const subscriptionId = useAppSelector(selectAzureSubscriptionId); const subscriptionId = useAppSelector(selectAzureSubscriptionId);
return ( return (
<TextContent> <Content>
<Text component={TextVariants.h3}>{targetOptions.azure}</Text> <Content component={ContentVariants.h3}>{targetOptions.azure}</Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Image type Image type
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
Red Hat hosted image Red Hat hosted image
<br /> <br />
<ExpirationWarning /> <ExpirationWarning />
</TextListItem> </Content>
{shareMethod === 'sources' && isSuccessAzureSources && ( {shareMethod === 'sources' && isSuccessAzureSources && (
<> <>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Azure Source</Content>
Azure Source <Content component={ContentVariants.dd}>
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{ {
rawAzureSources?.data?.find( rawAzureSources?.data?.find(
(source) => source.id === azureSource (source) => source.id === azureSource
)?.name )?.name
} }
</TextListItem> </Content>
</> </>
)} )}
{shareMethod === 'manual' && ( {shareMethod === 'manual' && (
<> <>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Azure tenant ID</Content>
Azure tenant ID <Content component={ContentVariants.dd}>{tenantId}</Content>
</TextListItem> <Content component={ContentVariants.dt}>Subscription ID</Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>{subscriptionId}</Content>
{tenantId}
</TextListItem>
<TextListItem component={TextListItemVariants.dt}>
Subscription ID
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{subscriptionId}
</TextListItem>
</> </>
)} )}
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Resource group</Content>
Resource group <Content component={ContentVariants.dd}>{azureResourceGroup}</Content>
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> </Content>
{azureResourceGroup}
</TextListItem>
</TextList>
</TextContent>
); );
}; };
export const TargetEnvOciList = () => { export const TargetEnvOciList = () => {
return ( return (
<TextContent> <Content>
<Text component={TextVariants.h3}>{targetOptions.oci}</Text> <Content component={ContentVariants.h3}>{targetOptions.oci}</Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Object Storage URL Object Storage URL
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
The URL for the built image will be ready to copy The URL for the built image will be ready to copy
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
export const TargetEnvOtherList = () => { export const TargetEnvOtherList = () => {
return ( return (
<> <>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Image type Image type
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
Built image will be available for download Built image will be available for download
</TextListItem> </Content>
</TextList> </Content>
</> </>
); );
}; };
@ -513,16 +457,16 @@ export const ContentList = () => {
return ( return (
<> <>
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<> <>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Repeatable build Repeatable build
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
<Popover <Popover
position="bottom" position="bottom"
headerContent={ headerContent={
@ -560,12 +504,10 @@ export const ContentList = () => {
) : ( ) : (
'' ''
)} )}
</TextListItem> </Content>
</> </>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>Custom repositories</Content>
Custom repositories <Content component={ContentVariants.dd}>
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{customRepositories?.length + recommendedRepositories.length > 0 ? ( {customRepositories?.length + recommendedRepositories.length > 0 ? (
<Popover <Popover
position="bottom" position="bottom"
@ -586,14 +528,11 @@ export const ContentList = () => {
) : ( ) : (
0 0
)} )}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Additional packages Additional packages
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{packages?.length > 0 || groups?.length > 0 ? ( {packages?.length > 0 || groups?.length > 0 ? (
<Popover <Popover
position="bottom" position="bottom"
@ -613,9 +552,9 @@ export const ContentList = () => {
) : ( ) : (
0 0
)} )}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
{duplicatePackages.length > 0 && ( {duplicatePackages.length > 0 && (
<Alert <Alert
title="Can not guarantee where some selected packages will come from" title="Can not guarantee where some selected packages will come from"
@ -633,35 +572,29 @@ export const ContentList = () => {
export const RegisterLaterList = () => { export const RegisterLaterList = () => {
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Registration type Registration type
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
Register the system later Register the system later
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
export const RegisterSatelliteList = () => { export const RegisterSatelliteList = () => {
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Register Satellite Register Satellite
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}>Enabled</TextListItem> <Content component={ContentVariants.dd}>Enabled</Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -678,48 +611,45 @@ export const RegisterNowList = () => {
); );
return ( return (
<> <>
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Registration type Registration type
</TextListItem> </Content>
<TextListItem <Content
component={TextListItemVariants.dd} component={ContentVariants.dd}
data-testid="review-registration" data-testid="review-registration"
> >
<TextList isPlain> <Content component="ul" isPlainList>
{registrationType?.startsWith('register-now') && ( {registrationType?.startsWith('register-now') && (
<TextListItem> <Content component="li">
Register with Red Hat Subscription Manager (RHSM) Register with Red Hat Subscription Manager (RHSM)
<br /> <br />
</TextListItem> </Content>
)} )}
{(registrationType === 'register-now-insights' || {(registrationType === 'register-now-insights' ||
registrationType === 'register-now-rhc') && ( registrationType === 'register-now-rhc') && (
<TextListItem> <Content component="li">
Connect to Red Hat Insights Connect to Red Hat Insights
<br /> <br />
</TextListItem> </Content>
)} )}
{registrationType === 'register-now-rhc' && ( {registrationType === 'register-now-rhc' && (
<TextListItem> <Content component="li">
Use remote host configuration (rhc) utility Use remote host configuration (rhc) utility
<br /> <br />
</TextListItem> </Content>
)} )}
</TextList> </Content>
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dt}> <Content component={ContentVariants.dt}>
Activation key <PopoverActivation /> Activation key <PopoverActivation />
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
<ActivationKeyInformation /> <ActivationKeyInformation />
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
{isError && ( {isError && (
<Alert <Alert
title="Information about the activation key unavailable" title="Information about the activation key unavailable"
@ -740,36 +670,34 @@ export const DetailsList = () => {
const blueprintDescription = useAppSelector(selectBlueprintDescription); const blueprintDescription = useAppSelector(selectBlueprintDescription);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
{blueprintName && ( {blueprintName && (
<> <>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Blueprint name Blueprint name
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>{blueprintName}</Content>
{blueprintName}
</TextListItem>
</> </>
)} )}
{blueprintDescription && ( {blueprintDescription && (
<> <>
<TextListItem <Content
component={TextListItemVariants.dt} component={ContentVariants.dt}
className="pf-v5-u-min-width" className="pf-v5-u-min-width"
> >
Description Description
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{blueprintDescription} {blueprintDescription}
</TextListItem> </Content>
</> </>
)} )}
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -782,28 +710,22 @@ export const TimezoneList = () => {
const ntpServers = useAppSelector(selectNtpServers); const ntpServers = useAppSelector(selectNtpServers);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Timezone Timezone
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{timezone ? timezone : 'None'} {timezone ? timezone : 'None'}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
NTP servers NTP servers
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{ntpServers && ntpServers.length > 0 ? ntpServers.join(', ') : 'None'} {ntpServers && ntpServers.length > 0 ? ntpServers.join(', ') : 'None'}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -811,48 +733,36 @@ export const UsersList = () => {
const users = useAppSelector(selectUsers); const users = useAppSelector(selectUsers);
return ( return (
<TextContent> <Content>
{users.map((user) => ( {users.map((user) => (
<TextList key={user.name} component={TextListVariants.dl}> <Content key={user.name} component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Username Username
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{user.name ? user.name : 'None'} {user.name ? user.name : 'None'}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Password Password
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{user.password || user.hasPassword ? '●'.repeat(8) : 'None'} {user.password || user.hasPassword ? '●'.repeat(8) : 'None'}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
SSH key SSH key
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{user.ssh_key ? user.ssh_key : 'None'} {user.ssh_key ? user.ssh_key : 'None'}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Administrator Administrator
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{user.isAdministrator ? 'True' : 'False'} {user.isAdministrator ? 'True' : 'False'}
</TextListItem> </Content>
</TextList> </Content>
))} ))}
</TextContent> </Content>
); );
}; };
@ -861,28 +771,22 @@ export const LocaleList = () => {
const keyboard = useAppSelector(selectKeyboard); const keyboard = useAppSelector(selectKeyboard);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Languages Languages
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{languages && languages.length > 0 ? languages.join(', ') : 'None'} {languages && languages.length > 0 ? languages.join(', ') : 'None'}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Keyboard Keyboard
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{keyboard ? keyboard : 'None'} {keyboard ? keyboard : 'None'}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -890,19 +794,16 @@ export const HostnameList = () => {
const hostname = useAppSelector(selectHostname); const hostname = useAppSelector(selectHostname);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Hostname Hostname
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{hostname ? hostname : 'None'} {hostname ? hostname : 'None'}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -910,24 +811,18 @@ export const KernelList = () => {
const kernel = useAppSelector(selectKernel); const kernel = useAppSelector(selectKernel);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Name Name
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{kernel.name ? kernel.name : 'None'} {kernel.name ? kernel.name : 'None'}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Append Append
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{kernel.append.length > 0 ? ( {kernel.append.length > 0 ? (
<CodeBlock> <CodeBlock>
<CodeBlockCode>{kernel.append.join(' ')}</CodeBlockCode> <CodeBlockCode>{kernel.append.join(' ')}</CodeBlockCode>
@ -935,9 +830,9 @@ export const KernelList = () => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -945,15 +840,12 @@ export const FirewallList = () => {
const firewall = useAppSelector(selectFirewall); const firewall = useAppSelector(selectFirewall);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Ports Ports
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{firewall.ports.length > 0 ? ( {firewall.ports.length > 0 ? (
<CodeBlock> <CodeBlock>
<CodeBlockCode>{firewall.ports.join(' ')}</CodeBlockCode> <CodeBlockCode>{firewall.ports.join(' ')}</CodeBlockCode>
@ -961,14 +853,11 @@ export const FirewallList = () => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Disabled services Disabled services
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{firewall.services.disabled.length > 0 ? ( {firewall.services.disabled.length > 0 ? (
<CodeBlock> <CodeBlock>
<CodeBlockCode> <CodeBlockCode>
@ -978,14 +867,11 @@ export const FirewallList = () => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Enabled services Enabled services
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{firewall.services.enabled.length > 0 ? ( {firewall.services.enabled.length > 0 ? (
<CodeBlock> <CodeBlock>
<CodeBlockCode> <CodeBlockCode>
@ -995,9 +881,9 @@ export const FirewallList = () => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -1005,15 +891,12 @@ export const ServicesList = () => {
const services = useAppSelector(selectServices); const services = useAppSelector(selectServices);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Disabled Disabled
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{services.disabled.length > 0 ? ( {services.disabled.length > 0 ? (
<CodeBlock> <CodeBlock>
<CodeBlockCode>{services.disabled.join(' ')}</CodeBlockCode> <CodeBlockCode>{services.disabled.join(' ')}</CodeBlockCode>
@ -1021,14 +904,11 @@ export const ServicesList = () => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Masked Masked
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{services.masked.length > 0 ? ( {services.masked.length > 0 ? (
<CodeBlock> <CodeBlock>
<CodeBlockCode>{services.masked.join(' ')}</CodeBlockCode> <CodeBlockCode>{services.masked.join(' ')}</CodeBlockCode>
@ -1036,14 +916,11 @@ export const ServicesList = () => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Enabled Enabled
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{services.enabled.length > 0 ? ( {services.enabled.length > 0 ? (
<CodeBlock> <CodeBlock>
<CodeBlockCode>{services.enabled.join(' ')}</CodeBlockCode> <CodeBlockCode>{services.enabled.join(' ')}</CodeBlockCode>
@ -1051,9 +928,9 @@ export const ServicesList = () => {
) : ( ) : (
'None' 'None'
)} )}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };
@ -1061,18 +938,15 @@ export const FirstBootList = () => {
const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript); const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);
return ( return (
<TextContent> <Content>
<TextList component={TextListVariants.dl}> <Content component={ContentVariants.dl}>
<TextListItem <Content component={ContentVariants.dt} className="pf-v5-u-min-width">
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
First boot script First boot script
</TextListItem> </Content>
<TextListItem component={TextListItemVariants.dd}> <Content component={ContentVariants.dd}>
{isFirstbootEnabled ? 'Enabled' : 'Disabled'} {isFirstbootEnabled ? 'Enabled' : 'Disabled'}
</TextListItem> </Content>
</TextList> </Content>
</TextContent> </Content>
); );
}; };

6
src/Components/CreateImageWizard/steps/Review/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Form, Text, Title } from '@patternfly/react-core'; import { Form, Content, Title } from '@patternfly/react-core';
import Review from './ReviewStep'; import Review from './ReviewStep';
@ -19,7 +19,9 @@ const ReviewStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Review {blueprintName} blueprint Review {blueprintName} blueprint
</Title> </Title>
{blueprintDescription && <Text>{blueprintDescription}</Text>} {blueprintDescription && (
<Content component="p">{blueprintDescription}</Content>
)}
<Review /> <Review />
</Form> </Form>
); );

6
src/Components/CreateImageWizard/steps/Services/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import ServicesInput from './components/ServicesInputs'; import ServicesInput from './components/ServicesInputs';
@ -10,7 +10,9 @@ const ServicesStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Systemd services Systemd services
</Title> </Title>
<Text>Enable, disable and mask systemd services.</Text> <Content component="p">
Enable, disable and mask systemd services.
</Content>
<ServicesInput /> <ServicesInput />
</Form> </Form>
); );

10
src/Components/CreateImageWizard/steps/Snapshot/Snapshot.tsx
View file

@ -7,7 +7,7 @@ import {
FormGroup, FormGroup,
Grid, Grid,
Radio, Radio,
Text, Content,
Title, Title,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
@ -99,10 +99,10 @@ export default function Snapshot() {
Use latest content Use latest content
</Title> </Title>
<Grid> <Grid>
<Text> <Content component="p">
Image Builder will automatically use the newest state of Image Builder will automatically use the newest state of
repositories when building this image. repositories when building this image.
</Text> </Content>
</Grid> </Grid>
</> </>
) : selectedOption === 'snapshotDate' ? ( ) : selectedOption === 'snapshotDate' ? (
@ -149,10 +149,10 @@ export default function Snapshot() {
</Flex> </Flex>
</FormGroup> </FormGroup>
<Grid> <Grid>
<Text> <Content component="p">
Image Builder will reflect the state of repositories based on the Image Builder will reflect the state of repositories based on the
selected date when building this image. selected date when building this image.
</Text> </Content>
</Grid> </Grid>
</> </>
) : isTemplatesEnabled && selectedOption === 'template' ? ( ) : isTemplatesEnabled && selectedOption === 'template' ? (

9
src/Components/CreateImageWizard/steps/Snapshot/components/TemplatesEmpty.tsx
View file

@ -3,7 +3,6 @@ import React from 'react';
import { import {
EmptyState, EmptyState,
EmptyStateVariant, EmptyStateVariant,
EmptyStateHeader,
EmptyStateBody, EmptyStateBody,
EmptyStateFooter, EmptyStateFooter,
Button, Button,
@ -32,8 +31,12 @@ const TemplatesEmpty = ({ refetch }: TemplatesEmptyProps) => {
}; };
return ( return (
<EmptyState variant={EmptyStateVariant.lg} data-testid="empty-state"> <EmptyState
<EmptyStateHeader titleText={'No content templates'} headingLevel="h4" /> headingLevel="h4"
titleText={'No content templates'}
variant={EmptyStateVariant.lg}
data-testid="empty-state"
>
<EmptyStateBody> <EmptyStateBody>
{`Content templates can be added in the "Templates" area of the {`Content templates can be added in the "Templates" area of the
console.`} console.`}

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

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Button, Form, Grid, Text, Title } from '@patternfly/react-core'; import { Button, Form, Grid, Content, Title } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import Snapshot from './Snapshot'; import Snapshot from './Snapshot';
@ -14,10 +14,10 @@ export default function SnapshotStep() {
Repeatable build Repeatable build
</Title> </Title>
<Grid> <Grid>
<Text> <Content component="p">
Control the consistency of the packages in the repository used to Control the consistency of the packages in the repository used to
build the image. build the image.
</Text> </Content>
<Button <Button
component="a" component="a"
target="_blank" target="_blank"

5
src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/AwsSourcesSelect.tsx
View file

@ -158,12 +158,11 @@ export const AwsSourcesSelect = () => {
{chosenSource?.name && ( {chosenSource?.name && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={handleClear} onClick={handleClear}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

10
src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { import {
Radio, Radio,
Text, Content,
Form, Form,
Title, Title,
FormGroup, FormGroup,
@ -58,15 +58,15 @@ const Aws = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Target environment - Amazon Web Services Target environment - Amazon Web Services
</Title> </Title>
<Text> <Content component="p">
Your image will be uploaded to AWS and shared with the account you Your image will be uploaded to AWS and shared with the account you
provide below. provide below.
</Text> </Content>
<Text> <Content component="p">
<b>The shared image will expire within 14 days.</b> To permanently <b>The shared image will expire within 14 days.</b> To permanently
access the image, copy the image, which will be shared to your account access the image, copy the image, which will be shared to your account
by Red Hat, to your own AWS account. by Red Hat, to your own AWS account.
</Text> </Content>
<FormGroup label="Share method:"> <FormGroup label="Share method:">
<Radio <Radio
id="radio-with-description" id="radio-with-description"

5
src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureResourceGroups.tsx
View file

@ -121,12 +121,11 @@ export const AzureResourceGroups = () => {
{azureResourceGroup && ( {azureResourceGroup && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={handleClear} onClick={handleClear}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

5
src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureSourcesSelect.tsx
View file

@ -169,12 +169,11 @@ export const AzureSourcesSelect = () => {
{selectedSource && ( {selectedSource && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={handleClear} onClick={handleClear}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

10
src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/index.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { import {
Radio, Radio,
Text, Content,
Form, Form,
Title, Title,
FormGroup, FormGroup,
@ -68,12 +68,12 @@ const Azure = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Target environment - Microsoft Azure Target environment - Microsoft Azure
</Title> </Title>
<Text> <Content component="p">
Upon build, Image Builder sends the image to the selected authorized Upon build, Image Builder sends the image to the selected authorized
Azure account. The image will be uploaded to the resource group in the Azure account. The image will be uploaded to the resource group in the
subscription you specify. subscription you specify.
</Text> </Content>
<Text> <Content component="p">
To authorize Image Builder to push images to Microsoft Azure, the To authorize Image Builder to push images to Microsoft Azure, the
account owner must configure Image Builder as an authorized application account owner must configure Image Builder as an authorized application
for a specific tenant ID and give it the role of &quot;Contributor&quot; for a specific tenant ID and give it the role of &quot;Contributor&quot;
@ -91,7 +91,7 @@ const Azure = () => {
> >
Learn more about OAuth 2.0 Learn more about OAuth 2.0
</Button> </Button>
</Text> </Content>
<AzureHyperVSelect /> <AzureHyperVSelect />
<FormGroup label="Share method:"> <FormGroup label="Share method:">
<Radio <Radio

14
src/Components/CreateImageWizard/steps/TargetEnvironment/Gcp/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Radio, Text, Form, Title, FormGroup } from '@patternfly/react-core'; import { Radio, Content, Form, Title, FormGroup } from '@patternfly/react-core';
import { useAppDispatch, useAppSelector } from '../../../../../store/hooks'; import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
import { import {
@ -34,22 +34,22 @@ const Gcp = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Target environment - Google Cloud Platform Target environment - Google Cloud Platform
</Title> </Title>
<Text> <Content component="p">
Select how to share your image. The image you create can be used to Select how to share your image. The image you create can be used to
launch instances on GCP, regardless of which method you select. launch instances on GCP, regardless of which method you select.
</Text> </Content>
<FormGroup label="Select image sharing" isRequired> <FormGroup label="Select image sharing" isRequired>
<Radio <Radio
id="share-with-google" id="share-with-google"
label="Share image with a Google account" label="Share image with a Google account"
name="radio-1" name="radio-1"
description={ description={
<Text> <Content component="p">
Your image will be uploaded to GCP and shared with the account you Your image will be uploaded to GCP and shared with the account you
provide below. provide below.
<b>The image expires in 14 days.</b> To keep permanent access to <b>The image expires in 14 days.</b> To keep permanent access to
your image, copy it to your GCP project. your image, copy it to your GCP project.
</Text> </Content>
} }
isChecked={shareMethod === 'withGoogle'} isChecked={shareMethod === 'withGoogle'}
onChange={() => { onChange={() => {
@ -63,12 +63,12 @@ const Gcp = () => {
label="Share image with Red Hat Insights only" label="Share image with Red Hat Insights only"
name="radio-2" name="radio-2"
description={ description={
<Text> <Content component="p">
Your image will be uploaded to GCP and shared with Red Hat Your image will be uploaded to GCP and shared with Red Hat
Insights. Insights.
<b> The image expires in 14 days.</b> You cannot access or <b> The image expires in 14 days.</b> You cannot access or
recreate this image in your GCP project. recreate this image in your GCP project.
</Text> </Content>
} }
isChecked={shareMethod === 'withInsights'} isChecked={shareMethod === 'withInsights'}
onChange={() => { onChange={() => {

5
src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx
View file

@ -112,12 +112,11 @@ const TimezoneDropDown = () => {
{timezone && ( {timezone && (
<TextInputGroupUtilities> <TextInputGroupUtilities>
<Button <Button
icon={<TimesIcon />}
variant="plain" variant="plain"
onClick={onClearButtonClick} onClick={onClearButtonClick}
aria-label="Clear input" aria-label="Clear input"
> />
<TimesIcon />
</Button>
</TextInputGroupUtilities> </TextInputGroupUtilities>
)} )}
</TextInputGroup> </TextInputGroup>

4
src/Components/CreateImageWizard/steps/Timezone/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, Form, Title } from '@patternfly/react-core'; import { Content, Form, Title } from '@patternfly/react-core';
import NtpServersInput from './components/NtpServersInput'; import NtpServersInput from './components/NtpServersInput';
import TimezoneDropDown from './components/TimezoneDropDown'; import TimezoneDropDown from './components/TimezoneDropDown';
@ -11,7 +11,7 @@ const TimezoneStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Timezone Timezone
</Title> </Title>
<Text>Select a timezone for your image.</Text> <Content component="p">Select a timezone for your image.</Content>
<TimezoneDropDown /> <TimezoneDropDown />
<NtpServersInput /> <NtpServersInput />
</Form> </Form>

12
src/Components/CreateImageWizard/steps/Users/components/EmptyUserState.tsx
View file

@ -4,8 +4,6 @@ import {
Button, Button,
EmptyState, EmptyState,
EmptyStateFooter, EmptyStateFooter,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateVariant, EmptyStateVariant,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon'; import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
@ -21,11 +19,11 @@ const EmptyUserState = () => {
}; };
return ( return (
<EmptyState variant={EmptyStateVariant.lg}> <EmptyState
<EmptyStateHeader headingLevel="h4"
icon={<EmptyStateIcon icon={UserIcon} />} icon={UserIcon}
headingLevel="h4" variant={EmptyStateVariant.lg}
/> >
<EmptyStateFooter> <EmptyStateFooter>
<Button variant="secondary" onClick={onAddUserClick}> <Button variant="secondary" onClick={onAddUserClick}>
Add a user Add a user

3
src/Components/CreateImageWizard/steps/Users/components/RemoveUserModal.tsx
View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Button, Modal } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import { Modal } from '@patternfly/react-core/deprecated';
import calculateNewIndex from './calculateNewIndex'; import calculateNewIndex from './calculateNewIndex';

4
src/Components/CreateImageWizard/steps/Users/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Form, Text, Title } from '@patternfly/react-core'; import { Form, Content, Title } from '@patternfly/react-core';
import EmptyUserState from './components/EmptyUserState'; import EmptyUserState from './components/EmptyUserState';
import UserInfo from './components/UserInfo'; import UserInfo from './components/UserInfo';
@ -16,7 +16,7 @@ const UsersStep = () => {
<Title headingLevel="h1" size="xl"> <Title headingLevel="h1" size="xl">
Users Users
</Title> </Title>
<Text>Add a user to your image.</Text> <Content component="p">Add a user to your image.</Content>
{users.length !== 0 ? <UserInfo /> : <EmptyUserState />} {users.length !== 0 ? <UserInfo /> : <EmptyUserState />}
</Form> </Form>
); );

4
src/Components/CreateImageWizard/utilities/PasswordValidatedInput.tsx
View file

@ -74,11 +74,11 @@ export const PasswordValidatedInput = ({
</> </>
<FormHelperText> <FormHelperText>
<HelperText component="ul"> <HelperText component="ul">
<HelperTextItem variant={ruleLength} component="li" hasIcon> <HelperTextItem variant={ruleLength} component="li">
Password must be at least 6 characters long Password must be at least 6 characters long
</HelperTextItem> </HelperTextItem>
{environments.includes('azure') && ( {environments.includes('azure') && (
<HelperTextItem variant={ruleCharacters} component="li" hasIcon> <HelperTextItem variant={ruleCharacters} component="li">
Must include at least 3 of the following: lowercase letters, Must include at least 3 of the following: lowercase letters,
uppercase letters, numbers, symbols uppercase letters, numbers, symbols
</HelperTextItem> </HelperTextItem>

28
src/Components/ImagesTable/EmptyState.tsx
View file

@ -6,7 +6,7 @@ import {
EmptyStateBody, EmptyStateBody,
EmptyStateIcon, EmptyStateIcon,
EmptyStateVariant, EmptyStateVariant,
Text, Content,
EmptyStateActions, EmptyStateActions,
EmptyStateHeader, EmptyStateHeader,
EmptyStateFooter, EmptyStateFooter,
@ -30,16 +30,16 @@ type ImagesEmptyStateProps = {
const EmptyBlueprintsImagesTable = () => ( const EmptyBlueprintsImagesTable = () => (
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.lg}> <EmptyState
<EmptyStateHeader icon={PlusCircleIcon}
icon={<EmptyStateIcon icon={PlusCircleIcon} />} titleText="No images"
titleText="No images" variant={EmptyStateVariant.lg}
/> >
<EmptyStateBody> <EmptyStateBody>
<Text> <Content component="p">
The selected blueprint version doesn&apos;t contain any images. Build The selected blueprint version doesn&apos;t contain any images. Build
an image from this version, or adjust the filters. an image from this version, or adjust the filters.
</Text> </Content>
</EmptyStateBody> </EmptyStateBody>
<EmptyStateFooter> <EmptyStateFooter>
<EmptyStateActions> <EmptyStateActions>
@ -63,18 +63,18 @@ const EmptyImagesTable = () => {
headingLevel="h4" headingLevel="h4"
/> />
<EmptyStateBody> <EmptyStateBody>
<Text> <Content component="p">
Image builder is a tool for creating deployment-ready customized Image builder is a tool for creating deployment-ready customized
system images: installation disks, virtual machines, cloud system images: installation disks, virtual machines, cloud
vendor-specific images, and others. By using image builder, you vendor-specific images, and others. By using image builder, you
can create these images faster than with manual procedures because can create these images faster than with manual procedures because
it eliminates the specific configurations required for each output it eliminates the specific configurations required for each output
type. type.
</Text> </Content>
<Text> <Content component="p">
There are no images yet. Create a blueprint to create images. There are no images yet. Create a blueprint to create images.
</Text> </Content>
<Text> <Content component="p">
<Button <Button
component="a" component="a"
target="_blank" target="_blank"
@ -86,7 +86,7 @@ const EmptyImagesTable = () => {
> >
Learn more about managing images with DNF Learn more about managing images with DNF
</Button> </Button>
</Text> </Content>
</EmptyStateBody> </EmptyStateBody>
<EmptyStateFooter> <EmptyStateFooter>
<EmptyStateActions> <EmptyStateActions>

2
src/Components/ImagesTable/ImagesTable.tsx
View file

@ -282,7 +282,7 @@ const ImagesTable = () => {
</Table> </Table>
<Toolbar className="pf-v5-u-mb-xl"> <Toolbar className="pf-v5-u-mb-xl">
<ToolbarContent> <ToolbarContent>
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}> <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
<Pagination <Pagination
variant={PaginationVariant.bottom} variant={PaginationVariant.bottom}
itemCount={itemCount} itemCount={itemCount}

2
src/Components/ImagesTable/ImagesTableToolbar.tsx
View file

@ -241,7 +241,7 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
</ToolbarItem> </ToolbarItem>
</> </>
)} )}
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}> <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
{pagination} {pagination}
</ToolbarItem> </ToolbarItem>
</ToolbarContent> </ToolbarContent>

3
src/Components/ImagesTable/Instance.tsx
View file

@ -8,12 +8,11 @@ import {
ClipboardCopy, ClipboardCopy,
List, List,
ListItem, ListItem,
Modal,
ModalVariant,
Popover, Popover,
PopoverPosition, PopoverPosition,
Skeleton, Skeleton,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
import { import {
ListComponent, ListComponent,
OrderType, OrderType,

9
src/Components/ImagesTable/Status.tsx
View file

@ -13,7 +13,7 @@ import {
Popover, Popover,
Skeleton, Skeleton,
Spinner, Spinner,
Text, Content,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { import {
CheckCircleIcon, CheckCircleIcon,
@ -458,7 +458,9 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
bodyContent={ bodyContent={
<> <>
<Alert variant="danger" title={text} isInline isPlain /> <Alert variant="danger" title={text} isInline isPlain />
<Text className="pf-v5-u-pt-md pf-v5-u-pb-md">{reason}</Text> <Content component="p" className="pf-v5-u-pt-md pf-v5-u-pb-md">
{reason}
</Content>
<Panel isScrollable> <Panel isScrollable>
<PanelMain maxHeight="25rem"> <PanelMain maxHeight="25rem">
<CodeBlock> <CodeBlock>
@ -467,6 +469,7 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
</PanelMain> </PanelMain>
</Panel> </Panel>
<Button <Button
icon={<CopyIcon />}
variant="link" variant="link"
onClick={() => onClick={() =>
navigator.clipboard.writeText( navigator.clipboard.writeText(
@ -475,7 +478,7 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
} }
className="pf-v5-u-pl-0 pf-v5-u-mt-md" className="pf-v5-u-pl-0 pf-v5-u-mt-md"
> >
Copy error text to clipboard <CopyIcon /> Copy error text to clipboard
</Button> </Button>
</> </>
} }

29
src/Components/LandingPage/LandingPage.tsx
View file

@ -6,8 +6,7 @@ import {
Tabs, Tabs,
Tab, Tab,
TabTitleText, TabTitleText,
Text, Content,
TextContent,
TabAction, TabAction,
PageSection, PageSection,
Sidebar, Sidebar,
@ -59,7 +58,7 @@ export const LandingPage = () => {
const imageList = ( const imageList = (
<> <>
<PageSection> <PageSection hasBodyWrapper={false}>
{showAlert && <NewAlert setShowAlert={setShowAlert} />} {showAlert && <NewAlert setShowAlert={setShowAlert} />}
<Sidebar hasBorder className="pf-v5-u-background-color-100"> <Sidebar hasBorder className="pf-v5-u-background-color-100">
<SidebarPanel <SidebarPanel
@ -101,14 +100,14 @@ export const LandingPage = () => {
header={'Conventional (RPM-DNF)'} header={'Conventional (RPM-DNF)'}
body={ body={
<div> <div>
<TextContent> <Content>
<Text> <Content component="p">
With RPM-DNF, you can manage the system software by With RPM-DNF, you can manage the system software by
using the DNF package manager and updated RPM packages. using the DNF package manager and updated RPM packages.
This is a simple and adaptive method of managing and This is a simple and adaptive method of managing and
modifying the system over its lifecycle. modifying the system over its lifecycle.
</Text> </Content>
<Text> <Content component="p">
<Button <Button
component="a" component="a"
target="_blank" target="_blank"
@ -120,8 +119,8 @@ export const LandingPage = () => {
> >
Learn more about managing images with DNF Learn more about managing images with DNF
</Button> </Button>
</Text> </Content>
</TextContent> </Content>
</div> </div>
} }
/> />
@ -136,8 +135,8 @@ export const LandingPage = () => {
<HelpPopover <HelpPopover
header={'Immutable (OSTree)'} header={'Immutable (OSTree)'}
body={ body={
<TextContent> <Content>
<Text> <Content component="p">
With OSTree, you can manage the system software by With OSTree, you can manage the system software by
referencing a central image repository. OSTree images referencing a central image repository. OSTree images
contain a complete operating system ready to be remotely contain a complete operating system ready to be remotely
@ -145,8 +144,8 @@ export const LandingPage = () => {
through commits and enable secure updates that only through commits and enable secure updates that only
address changes and keep the operating system unchanged. address changes and keep the operating system unchanged.
The updates are quick, and the rollbacks are easy. The updates are quick, and the rollbacks are easy.
</Text> </Content>
<Text> <Content component="p">
<Button <Button
component="a" component="a"
target="_blank" target="_blank"
@ -158,8 +157,8 @@ export const LandingPage = () => {
> >
Learn more about OSTree Learn more about OSTree
</Button> </Button>
</Text> </Content>
</TextContent> </Content>
} }
/> />
} }

34
src/Components/LandingPage/NewAlert.tsx
View file

@ -6,13 +6,9 @@ import {
AlertActionLink, AlertActionLink,
Flex, Flex,
FlexItem, FlexItem,
Text, Content,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import {
TextContent,
TextList,
TextListItem,
} from '@patternfly/react-core/dist/esm';
// Import for optional quickstarts functionality // Import for optional quickstarts functionality
// import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'; // import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
@ -76,20 +72,20 @@ export const NewAlert = ({ setShowAlert }: NewAlertPropTypes) => {
</> </>
} }
> >
<TextContent> <Content>
<Text> <Content component="p">
New options for blueprint customization are now available: New options for blueprint customization are now available:
</Text> </Content>
<TextList> <Content component="ul">
<TextListItem>Users</TextListItem> <Content component="li">Users</Content>
<TextListItem>Timezone</TextListItem> <Content component="li">Timezone</Content>
<TextListItem>Locale</TextListItem> <Content component="li">Locale</Content>
<TextListItem>Hostname</TextListItem> <Content component="li">Hostname</Content>
<TextListItem>Kernel</TextListItem> <Content component="li">Kernel</Content>
<TextListItem>Firewall</TextListItem> <Content component="li">Firewall</Content>
<TextListItem>Systemd services</TextListItem> <Content component="li">Systemd services</Content>
</TextList> </Content>
</TextContent> </Content>
</Alert> </Alert>
); );
} else { } else {

12
src/Components/ShareImageModal/RegionsSelect.tsx
View file

@ -184,6 +184,7 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
<TextInputGroupUtilities> <TextInputGroupUtilities>
{selected.length > 0 && ( {selected.length > 0 && (
<Button <Button
icon={<TimesIcon aria-hidden />}
variant="plain" variant="plain"
onClick={() => { onClick={() => {
setInputValue(''); setInputValue('');
@ -191,9 +192,7 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
setValidated(ValidatedOptions.error); setValidated(ValidatedOptions.error);
}} }}
aria-label="Clear input value" aria-label="Clear input value"
> />
<TimesIcon aria-hidden />
</Button>
)} )}
</TextInputGroupUtilities> </TextInputGroupUtilities>
</TextInputGroup> </TextInputGroup>
@ -208,7 +207,7 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
<FormGroup <FormGroup
label="Select region" label="Select region"
isRequired isRequired
labelIcon={ labelHelp={
<Popover <Popover
headerContent={<div>Sharing images to other regions</div>} headerContent={<div>Sharing images to other regions</div>}
bodyContent={ bodyContent={
@ -221,13 +220,12 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="About regions" aria-label="About regions"
className="pf-v5-u-pl-sm header-button" className="pf-v5-u-pl-sm header-button"
isInline isInline
> />
<HelpIcon />
</Button>
</Popover> </Popover>
} }
> >

2
src/Components/ShareImageModal/ShareImageModal.tsx
View file

@ -1,6 +1,6 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { Modal } from '@patternfly/react-core'; import { Modal } from '@patternfly/react-core/deprecated';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import RegionsSelect from './RegionsSelect'; import RegionsSelect from './RegionsSelect';

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

@ -4,8 +4,7 @@ import {
Alert, Alert,
Button, Button,
Popover, Popover,
Text, Content,
TextContent,
Flex, Flex,
FlexItem, FlexItem,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
@ -43,16 +42,16 @@ const AboutImageBuilderPopover = () => {
minWidth="35rem" minWidth="35rem"
headerContent={'About image builder'} headerContent={'About image builder'}
bodyContent={ bodyContent={
<TextContent> <Content>
<Text> <Content component="p">
Image builder is a tool for creating deployment-ready customized Image builder is a tool for creating deployment-ready customized
system images: installation disks, virtual machines, cloud system images: installation disks, virtual machines, cloud
vendor-specific images, and others. By using image builder, you can vendor-specific images, and others. By using image builder, you can
make these images faster than manual procedures because it make these images faster than manual procedures because it
eliminates the specific configurations required for each output eliminates the specific configurations required for each output
type. type.
</Text> </Content>
<Text> <Content component="p">
<Button <Button
component="a" component="a"
target="_blank" target="_blank"
@ -64,8 +63,8 @@ const AboutImageBuilderPopover = () => {
> >
Image builder for RPM-DNF documentation Image builder for RPM-DNF documentation
</Button> </Button>
</Text> </Content>
<Text> <Content component="p">
<Button <Button
component="a" component="a"
target="_blank" target="_blank"
@ -77,17 +76,16 @@ const AboutImageBuilderPopover = () => {
> >
Image builder for OSTree documentation Image builder for OSTree documentation
</Button> </Button>
</Text> </Content>
</TextContent> </Content>
} }
> >
<Button <Button
icon={<HelpIcon />}
variant="plain" variant="plain"
aria-label="About image builder" aria-label="About image builder"
className="pf-v5-u-pl-sm header-button" className="pf-v5-u-pl-sm header-button"
> />
<HelpIcon />
</Button>
</Popover> </Popover>
); );
}; };