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

Wizard: Add v5 PF slug to classNames

Browse source 
This adds v5 PF slug to classNames throughout the code base, making the formatting work properly.
This commit is contained in:
regexowl 2024-11-25 09:42:09 +01:00 • committed by Klara Simickova
parent 4f728874f7
commit d8bb3485d8
26 changed files with 122 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,7 @@ const FileSystemAutomaticPartition = () => {
icon={<ExternalLinkAltIcon />}
iconPosition="right"
href={FILE_SYSTEM_CUSTOMIZATION_URL}
className="pf-u-pl-0"
className="pf-v5-u-pl-0"
>
Customizing file systems during the image creation
</Button>

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

@ -65,7 +65,7 @@ const FileSystemConfiguration = () => {
icon={<ExternalLinkAltIcon />}
iconPosition="right"
href={FILE_SYSTEM_CUSTOMIZATION_URL}
className="pf-u-pl-0"
className="pf-v5-u-pl-0"
>
Read more about manual configuration here
</Button>
@ -83,7 +83,7 @@ const FileSystemConfiguration = () => {
<Button
ouiaId="add-partition"
data-testid="file-system-add-partition"
className="pf-u-text-align-left"
className="pf-v5-u-text-align-left"
variant="link"
icon={<PlusCircleIcon />}
onClick={handleAddPartition}

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

@ -54,7 +54,7 @@ export const MinimumSizePopover = () => {
variant="plain"
aria-label="File system configuration info"
aria-describedby="file-system-configuration-info"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
>
<HelpIcon />
</Button>

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

@ -98,7 +98,7 @@ const TargetEnvironment = () => {
<div className="tiles">
{supportedEnvironments?.includes('aws') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-aws"
title="Amazon Web Services"
icon={
@ -120,7 +120,7 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('gcp') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-google"
title="Google Cloud Platform"
icon={
@ -144,7 +144,7 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('azure') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-azure"
title="Microsoft Azure"
icon={
@ -168,7 +168,7 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('oci') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-oci"
title="Oracle Cloud Infrastructure"
icon={
@ -193,7 +193,7 @@ const TargetEnvironment = () => {
<>
<FormGroup
label={<Text component={TextVariants.small}>Private cloud</Text>}
className="pf-u-mt-sm"
className="pf-v5-u-mt-sm"
data-testid="target-private"
>
<Checkbox
@ -243,7 +243,7 @@ const TargetEnvironment = () => {
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
variant="plain"
aria-label="About OVA file"
isInline
@ -267,7 +267,7 @@ const TargetEnvironment = () => {
/>
)}
<Radio
className="pf-u-mt-sm"
className="pf-v5-u-mt-sm"
name="vsphere-radio"
aria-label="VMware vSphere radio button VMDK"
id="vsphere-radio-vmdk"
@ -290,7 +290,7 @@ const TargetEnvironment = () => {
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
variant="plain"
aria-label="About VMDK file"
isInline

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

@ -76,7 +76,7 @@ const OpenSCAPFGLabel = () => {
variant="plain"
aria-label="About OpenSCAP"
isInline
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0 pf-u-pr-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
>
<HelpIcon />
</Button>

12
src/Components/CreateImageWizard/steps/Oscap/OscapProfileInformation.tsx
View file

@ -102,7 +102,7 @@ export const OscapProfileInformation = ({
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Profile description:
</TextListItem>
@ -111,7 +111,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Operating system:
</TextListItem>
@ -120,7 +120,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Reference ID:
</TextListItem>
@ -132,7 +132,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Kernel arguments:
</TextListItem>
@ -145,7 +145,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Disabled services:
</TextListItem>
@ -158,7 +158,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Enabled services:
</TextListItem>

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

@ -541,7 +541,7 @@ const Packages = () => {
</EmptyStateActions>
<EmptyStateActions>
<Button
className="pf-u-pt-md"
className="pf-v5-u-pt-md"
variant="link"
isInline
component="a"
@ -1035,10 +1035,10 @@ const Packages = () => {
variant="plain"
aria-label="About included packages"
component="span"
className="pf-u-p-0"
className="pf-v5-u-p-0"
isInline
>
<HelpIcon className="pf-u-ml-xs" />
<HelpIcon className="pf-v5-u-ml-xs" />
</Button>
</Popover>
</Td>
@ -1308,7 +1308,7 @@ const Packages = () => {
variant="plain"
aria-label="About included repositories"
component="span"
className="pf-u-p-0"
className="pf-v5-u-p-0"
size="sm"
isInline
>
@ -1339,7 +1339,7 @@ const Packages = () => {
variant="plain"
aria-label="About other repositories"
component="span"
className="pf-u-p-0"
className="pf-v5-u-p-0"
size="sm"
isInline
>

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

@ -23,7 +23,7 @@ const PackageInfoNotAvailablePopover = () => {
<Button
variant="plain"
aria-label="Package description"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
>
<HelpIcon />
</Button>

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

@ -80,7 +80,7 @@ const ActivationKeyInformation = (): JSX.Element => {
<Button
variant="plain"
aria-label="About additional repositories"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
>
<HelpIcon />
</Button>
@ -88,7 +88,7 @@ const ActivationKeyInformation = (): JSX.Element => {
</TextListItem>
<TextListItem
component={TextListItemVariants.dd}
className="pf-u-display-flex pf-u-align-items-flex-end"
className="pf-v5-u-display-flex pf-v5-u-align-items-flex-end"
>
{activationKeyInfo.body?.additionalRepositories &&
activationKeyInfo.body?.additionalRepositories?.length > 0 ? (
@ -126,7 +126,7 @@ const ActivationKeyInformation = (): JSX.Element => {
data-testid="repositories-popover-button"
variant="link"
aria-label="Show additional repositories"
className="pf-u-pl-0 pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-0 pf-v5-u-pt-0 pf-v5-u-pb-0"
>
{activationKeyInfo.body?.additionalRepositories?.length}{' '}
repositories

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

@ -76,7 +76,7 @@ export const PopoverActivation = () => {
variant="plain"
aria-label="Activation key popover"
aria-describedby="subscription-activation-key"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0 pf-u-pr-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
>
<HelpIcon />
</Button>

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

@ -48,7 +48,7 @@ const InsightsPopover = () => {
>
<Button
variant="plain"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
aria-label="About remote host configuration (rhc)"
isInline
>
@ -87,7 +87,7 @@ const RhcPopover = () => {
>
<Button
variant="plain"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
aria-label="About remote host configuration (rhc)"
isInline
>
@ -152,7 +152,7 @@ const Registration = () => {
body={
showOptions && (
<Checkbox
className="pf-u-ml-lg"
className="pf-v5-u-ml-lg"
label={
<>
Enable predictive analytics and management capabilities

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

@ -74,11 +74,11 @@ const RepositoriesStatus = ({
<Alert
variant={repoStatus === 'Invalid' ? 'danger' : 'warning'}
title={repoStatus}
className="pf-u-pb-sm"
className="pf-v5-u-pb-sm"
isInline
isPlain
/>
<p className="pf-u-pb-md">Cannot fetch {repoUrl}</p>
<p className="pf-v5-u-pb-md">Cannot fetch {repoUrl}</p>
{(repoIntrospections || repoFailCount) && (
<>
<DescriptionList
@ -124,7 +124,7 @@ const RepositoriesStatus = ({
</>
}
>
<Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
<Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
{repoStatus === 'Invalid' && (
<ExclamationCircleIcon className="error" />
)}

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

@ -42,7 +42,7 @@ export default function Empty({ hasFilterValue, refetch }: EmptyProps) {
component="a"
target="_blank"
href={CONTENT_URL}
className="pf-u-mr-sm"
className="pf-v5-u-mr-sm"
>
Go to repositories
</Button>

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

@ -105,7 +105,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
data-testid={testId}
component="span"
onClick={() => revisitStep(stepId)}
className="pf-u-p-0 pf-u-font-weight-bold"
className="pf-v5-u-p-0 pf-v5-u-font-weight-bold"
isInline
>
Revisit step <ArrowRightIcon />
@ -123,7 +123,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width pf-v5-u-text-align-left"
className="pf-v5-u-min-width pf-v5-u-text-align-left"
>
<Button variant="link" component="span" isInline>
{label}

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

@ -76,7 +76,7 @@ import { PopoverActivation } from '../Registration/ActivationKeysList';
const ExpirationWarning = () => {
return (
<div className="pf-u-mr-sm pf-u-font-size-sm pf-v5-u-warning-color-200">
<div className="pf-v5-u-mr-sm pf-v5-u-font-size-sm pf-v5-u-warning-color-200">
<ExclamationTriangleIcon /> Expires 14 days after creation
</div>
);
@ -105,7 +105,7 @@ export const ImageOutputList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Release
</TextListItem>
@ -131,7 +131,7 @@ export const FSCList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Configuration type
</TextListItem>
@ -155,7 +155,7 @@ export const FSCList = () => {
variant="link"
aria-label="File system configuration info"
aria-describedby="file-system-configuration-info"
className="pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pt-0 pf-v5-u-pb-0"
>
View partitions
</Button>
@ -225,7 +225,7 @@ export const TargetEnvAWSList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -267,7 +267,7 @@ export const TargetEnvGCPList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -330,7 +330,7 @@ export const TargetEnvAzureList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -387,7 +387,7 @@ export const TargetEnvOciList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Object Storage URL
</TextListItem>
@ -405,7 +405,7 @@ export const TargetEnvOtherList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -485,7 +485,7 @@ export const ContentList = ({
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Repository snapshot
</TextListItem>
@ -509,7 +509,7 @@ export const ContentList = ({
<Button
variant="link"
aria-label="Snapshot method"
className="pf-u-p-0"
className="pf-v5-u-p-0"
isDisabled={noRepositoriesSelected || isLoading || isError}
isLoading={isLoading}
>
@ -552,7 +552,7 @@ export const ContentList = ({
<Button
variant="link"
aria-label="About custom repositories"
className="pf-u-p-0"
className="pf-v5-u-p-0"
>
{customRepositories?.length +
recommendedRepositories.length || 0}
@ -564,7 +564,7 @@ export const ContentList = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Additional packages
</TextListItem>
@ -583,7 +583,7 @@ export const ContentList = ({
<Button
variant="link"
aria-label="About packages"
className="pf-u-p-0"
className="pf-v5-u-p-0"
>
{packages?.length + groups?.length}
</Button>
@ -615,7 +615,7 @@ export const RegisterLaterList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Registration type
</TextListItem>
@ -644,7 +644,7 @@ export const RegisterNowList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Registration type
</TextListItem>
@ -708,7 +708,7 @@ export const DetailsList = () => {
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Blueprint name
</TextListItem>
@ -721,7 +721,7 @@ export const DetailsList = () => {
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Description
</TextListItem>
@ -747,7 +747,7 @@ export const FirstBootList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
First boot script
</TextListItem>