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

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

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

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

@ -1,7 +1,8 @@
import React from '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';

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

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

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

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

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

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

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

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

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

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

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

@ -3,20 +3,18 @@ import React from 'react';
import {
EmptyState,
EmptyStateBody,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateVariant,
} from '@patternfly/react-core';
import { LockIcon } from '@patternfly/react-icons';
export const RequireAdmin = () => {
return (
<EmptyState variant={EmptyStateVariant.xl}>
<EmptyStateHeader
titleText="Access is limited."
headingLevel="h4"
icon={<EmptyStateIcon icon={LockIcon} color="#f4c145" />}
/>
<EmptyState
headingLevel="h4"
icon={LockIcon}
titleText="Access is limited."
variant={EmptyStateVariant.xl}
>
<EmptyStateBody>
Administrative access is required to run the Image Builder frontend.
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 (
<>
<ImageBuilderHeader inWizard />
<PageSection type={PageSectionTypes.wizard}>
<PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
<Wizard
startIndex={startIndex}
onClose={() => navigate(resolveRelPath(''))}

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

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

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

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

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

@ -6,7 +6,7 @@ import {
FormHelperText,
HelperText,
HelperTextItem,
Text,
Content,
Title,
} from '@patternfly/react-core';
@ -48,11 +48,11 @@ const DetailsStep = () => {
<Title headingLevel="h1" size="xl">
Details
</Title>
<Text>
<Content component="p">
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
blueprint.
</Text>
</Content>
<FormGroup isRequired label="Blueprint name" fieldId="blueprint-name">
<ValidatedInputAndTextArea
ariaLabel="blueprint name"

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
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 FileSystemConfiguration from './FileSystemConfiguration';
@ -22,7 +22,7 @@ const FileSystemStep = () => {
<Title headingLevel="h1" size="xl">
File system configuration
</Title>
<Text>Define the partitioning of the image.</Text>
<Content component="p">Define the partitioning of the image.</Content>
{hasIsoTargetOnly ? (
<FileSystemAutomaticPartition />
) : fileSystemConfigurationType === 'automatic' ? (

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

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

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

@ -1,6 +1,6 @@
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';
@ -10,7 +10,7 @@ const HostnameStep = () => {
<Title headingLevel="h1" size="xl">
Hostname
</Title>
<Text>Select a hostname for your image.</Text>
<Content component="p">Select a hostname for your image.</Content>
<HostnameInput />
</Form>
);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -82,7 +82,6 @@ const SatelliteRegistration = () => {
? 'success'
: 'default'
}
hasIcon
>
{isRejected
? '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 {
Button,
Popover,
Spinner,
Text,
TextContent,
} from '@patternfly/react-core';
import { Button, Popover, Spinner, Content } from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons';
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
@ -27,30 +21,31 @@ const PopoverActivation = () => {
hasAutoWidth
maxWidth="35rem"
bodyContent={
<TextContent>
<Text>
<Content>
<Content component="p">
Activation keys enable you to register a system with appropriate
subscriptions, system purpose, and repositories attached.
</Text>
<Text>
</Content>
<Content component="p">
If using an activation key with command line registration, you must
provide your organization&apos;s ID.
</Text>
</Content>
{orgId ? (
<Text>Your organization&apos;s ID is {orgId}</Text>
<Content component="p">
Your organization&apos;s ID is {orgId}
</Content>
) : (
<Spinner size="md" />
)}
</TextContent>
</Content>
}
>
<Button
icon={<HelpIcon />}
variant="plain"
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"
>
<HelpIcon />
</Button>
/>
</Popover>
);
};

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

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

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

@ -14,8 +14,8 @@ import {
ToggleGroupItem,
PaginationVariant,
Grid,
Modal,
} from '@patternfly/react-core';
import { Modal } from '@patternfly/react-core/deprecated';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@ -504,7 +504,7 @@ const Repositories = () => {
)}
<Toolbar>
<ToolbarContent>
<ToolbarItem variant="bulk-select">
<ToolbarItem>
<BulkSelect
selected={selected}
contentList={contentList}
@ -522,7 +522,7 @@ const Repositories = () => {
}
/>
</ToolbarItem>
<ToolbarItem variant="search-filter">
<ToolbarItem>
<SearchInput
placeholder="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"
ref={toggleRef}
isDisabled={isDisabled}
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="bulk-select-checkbox"
key="split-checkbox"
aria-label="Select all"
isChecked={allChecked || someChecked ? null : false}
onClick={handleSelectPage}
/>,
],
}}
splitButtonItems={[
<MenuToggleCheckbox
id="bulk-select-checkbox"
key="split-checkbox"
aria-label="Select all"
isChecked={allChecked || someChecked ? null : false}
onClick={handleSelectPage}
/>,
]}
onClick={toggleDropdown}
>
{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 {
EmptyState,
EmptyStateVariant,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateBody,
EmptyStateFooter,
Button,
@ -20,16 +18,17 @@ type EmptyProps = {
const Empty = ({ hasFilterValue, refetch }: EmptyProps) => {
return (
<EmptyState variant={EmptyStateVariant.lg} data-testid="empty-state">
<EmptyStateHeader
titleText={
hasFilterValue
? 'No matching repositories found'
: 'No custom repositories'
}
icon={<EmptyStateIcon icon={RepositoryIcon} />}
headingLevel="h4"
/>
<EmptyState
headingLevel="h4"
icon={RepositoryIcon}
titleText={
hasFilterValue
? 'No matching repositories found'
: 'No custom repositories'
}
variant={EmptyStateVariant.lg}
data-testid="empty-state"
>
<EmptyStateBody>
{hasFilterValue
? '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 {
EmptyState,
EmptyStateIcon,
Spinner,
EmptyStateHeader,
Bullseye,
} from '@patternfly/react-core';
import { EmptyState, Spinner, Bullseye } from '@patternfly/react-core';
export const Loading = () => {
return (
<Bullseye>
<EmptyState>
<EmptyStateHeader
titleText="Loading"
icon={<EmptyStateIcon icon={Spinner} />}
headingLevel="h4"
/>
</EmptyState>
<EmptyState
headingLevel="h4"
icon={Spinner}
titleText="Loading"
></EmptyState>
</Bullseye>
);
};

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

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

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

@ -1,6 +1,6 @@
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 Repositories from './Repositories';
@ -37,12 +37,12 @@ const RepositoriesStep = () => {
<Title headingLevel="h1" size="xl">
Custom repositories
</Title>
<Text>
<Content component="p">
Select the linked custom repositories from which you can add packages to
the image.
<br />
<ManageRepositoriesButton />
</Text>
</Content>
{packages.length && recommendedRepos.length ? (
<Alert
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,
Flex,
FlexItem,
Modal,
Button,
} from '@patternfly/react-core';
import { Modal } from '@patternfly/react-core/deprecated';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
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}
isExpanded={isOpen}
isDisabled={!isValid}
splitButtonOptions={{
variant: 'action',
items: composeId
splitButtonItems={
composeId
? [
<EditSaveButton
key="wizard-edit-save-btn"
@ -95,8 +94,8 @@ const ReviewWizardFooter = () => {
setIsOpen={setIsOpen}
isDisabled={!isValid}
/>,
],
}}
]
}
/>
)}
shouldFocusToggleOnSelect

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
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';
@ -10,7 +10,9 @@ const ServicesStep = () => {
<Title headingLevel="h1" size="xl">
Systemd services
</Title>
<Text>Enable, disable and mask systemd services.</Text>
<Content component="p">
Enable, disable and mask systemd services.
</Content>
<ServicesInput />
</Form>
);

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

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

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

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

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

@ -1,6 +1,6 @@
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 Snapshot from './Snapshot';
@ -14,10 +14,10 @@ export default function SnapshotStep() {
Repeatable build
</Title>
<Grid>
<Text>
<Content component="p">
Control the consistency of the packages in the repository used to
build the image.
</Text>
</Content>
<Button
component="a"
target="_blank"

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

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@ import React from 'react';
import {
Radio,
Text,
Content,
Form,
Title,
FormGroup,
@ -68,12 +68,12 @@ const Azure = () => {
<Title headingLevel="h1" size="xl">
Target environment - Microsoft Azure
</Title>
<Text>
<Content component="p">
Upon build, Image Builder sends the image to the selected authorized
Azure account. The image will be uploaded to the resource group in the
subscription you specify.
</Text>
<Text>
</Content>
<Content component="p">
To authorize Image Builder to push images to Microsoft Azure, the
account owner must configure Image Builder as an authorized application
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
</Button>
</Text>
</Content>
<AzureHyperVSelect />
<FormGroup label="Share method:">
<Radio

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

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

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

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

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

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

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

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

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

@ -1,6 +1,7 @@
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';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
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 RegionsSelect from './RegionsSelect';

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

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