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

package.json: upgrade patternfly to version 5

Browse source 
This upgrade requires multiple package updates. There are many style
updates to reflect pf5's syntax and structure changes
This commit is contained in:
jkozol 2023-09-27 17:04:34 +02:00 • committed by Lucas Garfield
parent c4d411efa4
commit a5b1b1f775
27 changed files with 21227 additions and 3291 deletions
Download patch file Download diff file Expand all files Collapse all files

24100
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

14
package.json
View file

@ -7,14 +7,14 @@
"npm": ">=7.0.0"
},
"dependencies": {
"@data-driven-forms/pf4-component-mapper": "3.20.13",
"@data-driven-forms/pf4-component-mapper": "3.21.7",
"@data-driven-forms/react-form-renderer": "3.21.7",
"@patternfly/patternfly": "4.224.2",
"@patternfly/react-core": "4.276.8",
"@patternfly/react-table": "4.113.3",
"@redhat-cloud-services/frontend-components": "3.11.2",
"@redhat-cloud-services/frontend-components-notifications": "3.2.14",
"@redhat-cloud-services/frontend-components-utilities": "3.7.4",
"@patternfly/patternfly": "5.0.4",
"@patternfly/react-core": "5.0.1",
"@patternfly/react-table": "5.0.1",
"@redhat-cloud-services/frontend-components": "4.0.10",
"@redhat-cloud-services/frontend-components-notifications": "4.0.4",
"@redhat-cloud-services/frontend-components-utilities": "4.0.2",
"@reduxjs/toolkit": "^1.9.5",
"@scalprum/react-core": "^0.5.1",
"@unleash/proxy-client-react": "^3.6.0",

7
src/Components/CreateImageWizard/formComponents/AWSSourcesSelect.js
View file

@ -4,13 +4,12 @@ import { FormSpy } from '@data-driven-forms/react-form-renderer';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import { Alert } from '@patternfly/react-core';
import { FormGroup, Spinner } from '@patternfly/react-core';
import {
FormGroup,
Select,
SelectOption,
SelectVariant,
Spinner,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
import { extractProvisioningList } from '../../../store/helpers';
@ -120,7 +119,7 @@ export const AWSSourcesSelect = ({
))}
{isFetching && (
<SelectOption isNoResultsOption={true}>
<Spinner isSVG size="lg" />
<Spinner size="lg" />
</SelectOption>
)}
</Select>

17
src/Components/CreateImageWizard/formComponents/ActivationKeyInformation.tsx
View file

@ -15,14 +15,7 @@ import {
} from '@patternfly/react-core';
import { Button, Popover } from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons';
import {
TableComposable,
Tbody,
Td,
Th,
Thead,
Tr,
} from '@patternfly/react-table';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
import { useShowActivationKeyQuery } from '../../../store/rhsmApi';
@ -46,7 +39,7 @@ const ActivationKeyInformation = (): JSX.Element => {
return (
<>
{isFetchingActivationKeyInfo && <Spinner isSVG size="lg" />}
{isFetchingActivationKeyInfo && <Spinner size="lg" />}
{isSuccessActivationKeyInfo && (
<TextContent>
<TextList component={TextListVariants.dl}>
@ -91,7 +84,7 @@ const ActivationKeyInformation = (): JSX.Element => {
variant="plain"
aria-label="About additional repositories"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
isSmall
size="sm"
>
<HelpIcon />
</Button>
@ -109,7 +102,7 @@ const ActivationKeyInformation = (): JSX.Element => {
<Text component={TextVariants.h3}>
Additional repositories
</Text>
<TableComposable
<Table
aria-label="Additional repositories table"
variant="compact"
>
@ -127,7 +120,7 @@ const ActivationKeyInformation = (): JSX.Element => {
)
)}
</Tbody>
</TableComposable>
</Table>
</TextContent>
}
>

8
src/Components/CreateImageWizard/formComponents/ActivationKeys.js
View file

@ -2,14 +2,12 @@ import React, { useEffect, useState } from 'react';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import { Alert, FormGroup, Spinner } from '@patternfly/react-core';
import {
Alert,
FormGroup,
Select,
SelectOption,
SelectVariant,
Spinner,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
import { useListActivationKeysQuery } from '../../../store/rhsmApi';
@ -88,7 +86,7 @@ const ActivationKeys = ({ label, isRequired, ...props }) => {
isNoResultsOption={true}
data-testid="activation-keys-loading"
>
<Spinner isSVG size="md" />
<Spinner size="md" />
</SelectOption>
)}
</Select>

7
src/Components/CreateImageWizard/formComponents/AzureResourceGroups.js
View file

@ -3,13 +3,12 @@ import React, { useState } from 'react';
import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import { FormGroup, Spinner } from '@patternfly/react-core';
import {
FormGroup,
Select,
SelectOption,
SelectVariant,
Spinner,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
import { useGetSourceUploadInfoQuery } from '../../../store/provisioningApi';
@ -67,7 +66,7 @@ const AzureResourceGroups = ({ label, isRequired, className, ...props }) => {
isNoResultsOption={true}
data-testid="azure-resource-groups-loading"
>
<Spinner isSVG size="lg" />
<Spinner size="lg" />
</SelectOption>
)}
{resourceGroups.map((name, index) => (

7
src/Components/CreateImageWizard/formComponents/AzureSourcesSelect.js
View file

@ -4,13 +4,12 @@ import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import { Alert } from '@patternfly/react-core';
import { FormGroup, Spinner } from '@patternfly/react-core';
import {
FormGroup,
Select,
SelectOption,
SelectVariant,
Spinner,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
import { extractProvisioningList } from '../../../store/helpers';
@ -115,7 +114,7 @@ const AzureSourcesSelect = ({ label, isRequired, className, ...props }) => {
))}
{isFetching && (
<SelectOption isNoResultsOption={true}>
<Spinner isSVG size="lg" />
<Spinner size="lg" />
</SelectOption>
)}
</Select>

15
src/Components/CreateImageWizard/formComponents/FileSystemConfiguration.js
View file

@ -19,14 +19,7 @@ import {
} from '@patternfly/react-icons';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import styles from '@patternfly/react-styles/css/components/Table/table';
import {
TableComposable,
Tbody,
Td,
Th,
Thead,
Tr,
} from '@patternfly/react-table';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
import { v4 as uuidv4 } from 'uuid';
import MountPoint, { MountPointValidPrefixes } from './MountPoint';
@ -304,7 +297,7 @@ const FileSystemConfiguration = ({ ...props }) => {
// customizations. Having a customizations added by the user first would mess
// up the logic.
if (isFetchingCustomizations) {
return <Spinner isSVG size="lg" />;
return <Spinner size="lg" />;
}
return (
@ -357,7 +350,7 @@ const FileSystemConfiguration = ({ ...props }) => {
</Button>
</Text>
</TextContent>
<TableComposable
<Table
aria-label="File system table"
className={isDragging && styles.modifiers.dragOver}
variant="compact"
@ -458,7 +451,7 @@ const FileSystemConfiguration = ({ ...props }) => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
<TextContent>
<Button
ouiaId="add-partition"

4
src/Components/CreateImageWizard/formComponents/ImageOutputReleaseSelect.js
View file

@ -3,12 +3,12 @@ import React, { useState } from 'react';
import { FormSpy } from '@data-driven-forms/react-form-renderer';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import { FormGroup } from '@patternfly/react-core';
import {
FormGroup,
Select,
SelectOption,
SelectVariant,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
import { RELEASES } from '../../../constants';

8
src/Components/CreateImageWizard/formComponents/MountPoint.js
View file

@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
import path from 'path';
import { TextInput } from '@patternfly/react-core';
import {
Select,
SelectOption,
SelectVariant,
TextInput,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
export const MountPointValidPrefixes = [
@ -68,7 +68,7 @@ const MountPoint = ({ ...props }) => {
ouiaId="mount-point"
className="pf-u-w-50"
isOpen={isOpen}
onToggle={onToggle}
onToggle={(_event, isOpen) => onToggle(isOpen)}
onSelect={onSelect}
selections={prefix}
variant={SelectVariant.single}
@ -85,7 +85,7 @@ const MountPoint = ({ ...props }) => {
type="text"
value={suffix}
aria-label="Mount point suffix text input"
onChange={(v) => setSuffix(v)}
onChange={(_event, v) => setSuffix(v)}
/>
)}
</>

11
src/Components/CreateImageWizard/formComponents/Oscap.js
View file

@ -2,15 +2,12 @@ import React, { useState } from 'react';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import { Alert, Radio, FormGroup, Spinner } from '@patternfly/react-core';
import {
Alert,
Radio,
FormGroup,
Select,
SelectOption,
SelectVariant,
Spinner,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
import { useGetOscapProfilesQuery } from '../../../store/imageBuilderApi';
@ -96,8 +93,8 @@ const ProfileSelector = ({ input, showSelector }) => {
{isSuccess &&
data.map((key, index) => <SelectOption key={index} value={key} />)}
{isFetching && (
<SelectOption isNoResultsOption={true} data-testid="profiles-loading">
<Spinner isSVG size="md" />
<SelectOption isNoResultsOption={true} data-testid="policies-loading">
<Spinner size="md" />
</SelectOption>
)}
</Select>

4
src/Components/CreateImageWizard/formComponents/Registration.js
View file

@ -192,7 +192,7 @@ const Registration = ({ label, ...props }) => {
registerSystem === 'register-now-insights' ||
registerSystem === 'register-now-rhc'
}
onChange={(checked) => {
onChange={(_event, checked) => {
if (checked) {
change(input.name, 'register-now-insights');
} else {
@ -212,7 +212,7 @@ const Registration = ({ label, ...props }) => {
}
data-testid="registration-checkbox-rhc"
isChecked={registerSystem === 'register-now-rhc'}
onChange={(checked) => {
onChange={(_event, checked) => {
if (checked) {
change(input.name, 'register-now-rhc');
} else {

88
src/Components/CreateImageWizard/formComponents/Repositories.js
View file

@ -7,10 +7,6 @@ import {
import {
Alert,
Button,
Dropdown,
DropdownItem,
DropdownToggle,
DropdownToggleCheckbox,
EmptyState,
EmptyStateBody,
EmptyStateIcon,
@ -20,21 +16,21 @@ import {
PanelMain,
SearchInput,
Spinner,
Title,
Toolbar,
ToolbarContent,
ToolbarItem,
EmptyStateHeader,
EmptyStateFooter,
} from '@patternfly/react-core';
import {
Dropdown,
DropdownItem,
DropdownToggle,
DropdownToggleCheckbox,
} from '@patternfly/react-core/deprecated';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { RepositoryIcon } from '@patternfly/react-icons';
import {
TableComposable,
Tbody,
Td,
Th,
Thead,
Tr,
} from '@patternfly/react-table';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
import PropTypes from 'prop-types';
import RepositoriesStatus from './RepositoriesStatus';
@ -402,10 +398,7 @@ const Repositories = (props) => {
<Panel>
<PanelMain>
<RepositoryUnavailable />
<TableComposable
variant="compact"
data-testid="repositories-table"
>
<Table variant="compact" data-testid="repositories-table">
<Thead>
<Tr>
<Th />
@ -442,7 +435,8 @@ const Repositories = (props) => {
rowIndex: rowIndex,
onSelect: (event, isSelecting) =>
handleSelect(repo.url, rowIndex, isSelecting),
disable: isFetching || repo.status !== 'Valid',
isDisabled:
isFetching || repo.status !== 'Valid',
}}
/>
<Td dataLabel={'Name'}>
@ -487,7 +481,7 @@ const Repositories = (props) => {
);
})}
</Tbody>
</TableComposable>
</Table>
</PanelMain>
</Panel>
</>
@ -508,10 +502,11 @@ const Error = () => {
const Loading = () => {
return (
<EmptyState>
<EmptyStateIcon variant="container" component={Spinner} />
<Title size="lg" headingLevel="h4">
Loading
</Title>
<EmptyStateHeader
titleText="Loading"
icon={<EmptyStateIcon icon={Spinner} />}
headingLevel="h4"
/>
</EmptyState>
);
};
@ -519,32 +514,35 @@ const Loading = () => {
const Empty = ({ isFetching, refetch }) => {
const { isBeta } = useGetEnvironment();
return (
<EmptyState variant={EmptyStateVariant.large} data-testid="empty-state">
<EmptyStateIcon icon={RepositoryIcon} />
<Title headingLevel="h4" size="lg">
No Custom Repositories
</Title>
<EmptyState variant={EmptyStateVariant.lg} data-testid="empty-state">
<EmptyStateHeader
titleText="No Custom Repositories"
icon={<EmptyStateIcon icon={RepositoryIcon} />}
headingLevel="h4"
/>
<EmptyStateBody>
Repositories can be added in the &quot;Repositories&quot; area of the
console. Once added, refresh this page to see them.
</EmptyStateBody>
<Button
variant="primary"
component="a"
target="_blank"
href={isBeta() ? '/preview/settings/content' : '/settings/content'}
className="pf-u-mr-sm"
>
Go to repositories
</Button>
<Button
variant="secondary"
isInline
onClick={() => refetch()}
isLoading={isFetching}
>
{isFetching ? 'Refreshing' : 'Refresh'}
</Button>
<EmptyStateFooter>
<Button
variant="primary"
component="a"
target="_blank"
href={isBeta() ? '/preview/settings/content' : '/settings/content'}
className="pf-u-mr-sm"
>
Go to repositories
</Button>
<Button
variant="secondary"
isInline
onClick={() => refetch()}
isLoading={isFetching}
>
{isFetching ? 'Refreshing' : 'Refresh'}
</Button>
</EmptyStateFooter>
</EmptyState>
);
};

26
src/Components/CreateImageWizard/formComponents/ReviewStep.js
View file

@ -67,7 +67,9 @@ const ReviewStep = () => {
<RepositoryUnavailable />
<ExpandableSection
toggleContent={'Image output'}
onToggle={onToggleImageOutput}
onToggle={(_event, isExpandedImageOutput) =>
onToggleImageOutput(isExpandedImageOutput)
}
isExpanded={isExpandedImageOutput}
isIndented
data-testid="image-output-expandable"
@ -76,7 +78,9 @@ const ReviewStep = () => {
</ExpandableSection>
<ExpandableSection
toggleContent={'Target environments'}
onToggle={onToggleTargetEnvs}
onToggle={(_event, isExpandedTargetEnvs) =>
onToggleTargetEnvs(isExpandedTargetEnvs)
}
isExpanded={isExpandedTargetEnvs}
isIndented
data-testid="target-environments-expandable"
@ -129,7 +133,7 @@ const ReviewStep = () => {
</ExpandableSection>
<ExpandableSection
toggleContent={'File system configuration'}
onToggle={onToggleFSC}
onToggle={(_event, isExpandedFSC) => onToggleFSC(isExpandedFSC)}
isExpanded={isExpandedFSC}
isIndented
data-testid="file-system-configuration-expandable"
@ -138,7 +142,9 @@ const ReviewStep = () => {
</ExpandableSection>
<ExpandableSection
toggleContent={'Content'}
onToggle={onToggleContent}
onToggle={(_event, isExpandedContent) =>
onToggleContent(isExpandedContent)
}
isExpanded={isExpandedContent}
isIndented
data-testid="content-expandable"
@ -148,7 +154,9 @@ const ReviewStep = () => {
{isRhel(getState()?.values?.release) && (
<ExpandableSection
toggleContent={'Registration'}
onToggle={onToggleRegistration}
onToggle={(_event, isExpandedRegistration) =>
onToggleRegistration(isExpandedRegistration)
}
isExpanded={isExpandedRegistration}
isIndented
data-testid="registration-expandable"
@ -165,7 +173,9 @@ const ReviewStep = () => {
getState()?.values?.['image-description']) && (
<ExpandableSection
toggleContent={'Image details'}
onToggle={onToggleImageDetail}
onToggle={(_event, isExpandedImageDetail) =>
onToggleImageDetail(isExpandedImageDetail)
}
isExpanded={isExpandedImageDetail}
isIndented
data-testid="image-details-expandable"
@ -176,7 +186,9 @@ const ReviewStep = () => {
{getState()?.values?.['oscap-profile'] && (
<ExpandableSection
toggleContent={'OpenSCAP Compliance'}
onToggle={onToggleOscapDetails}
onToggle={(_event, isExpandedOscapDetail) =>
onToggleOscapDetails(isExpandedOscapDetail)
}
isExpanded={isExpandedOscapDetail}
isIndented
data-testid="oscap-detail-expandable"

29
src/Components/CreateImageWizard/formComponents/ReviewStepTables.js
View file

@ -2,14 +2,7 @@ import React from 'react';
import { useFormApi } from '@data-driven-forms/react-form-renderer';
import { Alert, Panel, PanelMain, Spinner } from '@patternfly/react-core';
import {
TableComposable,
Tbody,
Td,
Th,
Thead,
Tr,
} from '@patternfly/react-table';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
import PropTypes from 'prop-types';
import { UNIT_GIB, UNIT_MIB } from '../../../constants';
@ -46,7 +39,7 @@ const RepoName = ({ repoUrl }) => {
*/}
{isSuccess && data.data?.[0]?.name && <p>{data.data?.[0].name}</p>}
{isSuccess && !data.data?.[0]?.name && errorLoading()}
{isFetching && <Spinner isSVG size="md" />}
{isFetching && <Spinner size="md" />}
{isError && errorLoading()}
</>
);
@ -58,10 +51,7 @@ export const FSReviewTable = () => {
return (
<Panel isScrollable>
<PanelMain maxHeight="30ch">
<TableComposable
aria-label="File system configuration table"
variant="compact"
>
<Table aria-label="File system configuration table" variant="compact">
<Thead>
<Tr>
<Th>Mount point</Th>
@ -85,7 +75,7 @@ export const FSReviewTable = () => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
</PanelMain>
</Panel>
);
@ -97,7 +87,7 @@ export const PackagesTable = () => {
return (
<Panel isScrollable>
<PanelMain maxHeight="30ch">
<TableComposable aria-label="Packages table" variant="compact">
<Table aria-label="Packages table" variant="compact">
<Thead>
<Tr>
<Th>Name</Th>
@ -110,7 +100,7 @@ export const PackagesTable = () => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
</PanelMain>
</Panel>
);
@ -122,10 +112,7 @@ export const RepositoriesTable = () => {
return (
<Panel isScrollable>
<PanelMain maxHeight="30ch">
<TableComposable
aria-label="Custom repositories table"
variant="compact"
>
<Table aria-label="Custom repositories table" variant="compact">
<Thead>
<Tr>
<Th>Name</Th>
@ -140,7 +127,7 @@ export const RepositoriesTable = () => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
</PanelMain>
</Panel>
);

2
src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js
View file

@ -523,7 +523,7 @@ export const RegisterNowList = () => {
variant="plain"
aria-label="About activation key"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
isSmall
size="sm"
>
<HelpIcon />
</Button>

8
src/Components/CreateImageWizard/formComponents/SizeUnit.js
View file

@ -1,11 +1,11 @@
import React, { useEffect, useState } from 'react';
import { TextInput } from '@patternfly/react-core';
import {
Select,
SelectOption,
SelectVariant,
TextInput,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import PropTypes from 'prop-types';
import { UNIT_GIB, UNIT_KIB, UNIT_MIB } from '../../../constants';
@ -48,13 +48,13 @@ const SizeUnit = ({ ...props }) => {
type="text"
value={size}
aria-label="Size text input"
onChange={(v) => setSize(isNaN(parseInt(v)) ? 0 : parseInt(v))}
onChange={(_event, v) => setSize(isNaN(parseInt(v)) ? 0 : parseInt(v))}
/>
<Select
ouiaId="unit"
className="pf-u-w-50"
isOpen={isOpen}
onToggle={onToggle}
onToggle={(_event, isOpen) => onToggle(isOpen)}
onSelect={onSelect}
selections={
unit === UNIT_KIB ? 'KiB' : unit === UNIT_MIB ? 'MiB' : 'GiB'

16
src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
View file

@ -142,7 +142,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
<Checkbox
label="VMWare vSphere"
isChecked={environment.vsphere || environment['vsphere-ova']}
onChange={(checked) => {
onChange={(_event, checked) => {
handleSetEnvironment('vsphere-ova', checked);
handleSetEnvironment('vsphere', false);
}}
@ -182,7 +182,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
</Popover>
</>
}
onChange={(checked) => {
onChange={(_event, checked) => {
handleSetEnvironment('vsphere-ova', checked);
handleSetEnvironment('vsphere', !checked);
}}
@ -215,7 +215,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
</Popover>
</>
}
onChange={(checked) => {
onChange={(_event, checked) => {
handleSetEnvironment('vsphere-ova', !checked);
handleSetEnvironment('vsphere', checked);
}}
@ -230,7 +230,9 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
<Checkbox
label="Virtualization - Guest image (.qcow2)"
isChecked={environment['guest-image']}
onChange={(checked) => handleSetEnvironment('guest-image', checked)}
onChange={(_event, checked) =>
handleSetEnvironment('guest-image', checked)
}
aria-label="Virtualization guest image checkbox"
id="checkbox-guest-image"
name="Virtualization guest image"
@ -239,7 +241,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
<Checkbox
label="Bare metal - Installer (.iso)"
isChecked={environment['image-installer']}
onChange={(checked) =>
onChange={(_event, checked) =>
handleSetEnvironment('image-installer', checked)
}
aria-label="Bare metal installer checkbox"
@ -252,7 +254,9 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
<Checkbox
label="WSL - Windows Subsystem for Linux (.tar.gz)"
isChecked={environment['wsl']}
onChange={(checked) => handleSetEnvironment('wsl', checked)}
onChange={(_event, checked) =>
handleSetEnvironment('wsl', checked)
}
aria-label="windows subsystem for linux checkbox"
id="checkbox-wsl"
name="WSL"

13
src/Components/ImagesTable/ClonesTable.tsx
View file

@ -1,14 +1,7 @@
import React, { useEffect, useState } from 'react';
import { ClipboardCopy, Skeleton } from '@patternfly/react-core';
import {
TableComposable,
Tbody,
Td,
Th,
Thead,
Tr,
} from '@patternfly/react-table';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
import { StatusClone, AwsDetailsStatus } from './Status';
@ -139,7 +132,7 @@ const ClonesTable = ({ compose }: ClonesTablePropTypes) => {
const { data } = useGetComposeClonesQuery({ composeId: compose.id });
return (
<TableComposable variant="compact" data-testid="clones-table">
<Table variant="compact" data-testid="clones-table">
<Thead>
<Tr className="no-bottom-border">
<Th className="pf-m-width-60">AMI</Th>
@ -151,7 +144,7 @@ const ClonesTable = ({ compose }: ClonesTablePropTypes) => {
{data?.data.map((clone) => (
<CloneRow clone={clone} key={clone.id} />
))}
</TableComposable>
</Table>
);
};

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

@ -5,22 +5,23 @@ import {
EmptyState,
EmptyStateBody,
EmptyStateIcon,
EmptyStateSecondaryActions,
EmptyStateVariant,
OnSetPage,
Pagination,
PaginationVariant,
Text,
Title,
Toolbar,
ToolbarContent,
ToolbarItem,
EmptyStateActions,
EmptyStateHeader,
EmptyStateFooter,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon, PlusCircleIcon } from '@patternfly/react-icons';
import {
ActionsColumn,
ExpandableRowContent,
TableComposable,
Table,
Tbody,
Td,
Th,
@ -98,7 +99,7 @@ const ImagesTable = () => {
</ToolbarItem>
<ToolbarItem
variant="pagination"
alignment={{ default: 'alignRight' }}
align={{ default: 'alignRight' }}
>
<Pagination
itemCount={itemCount}
@ -113,7 +114,7 @@ const ImagesTable = () => {
</ToolbarItem>
</ToolbarContent>
</Toolbar>
<TableComposable variant="compact" data-testid="images-table">
<Table variant="compact" data-testid="images-table">
<Thead>
<Tr>
<Th />
@ -135,12 +136,12 @@ const ImagesTable = () => {
/>
);
})}
</TableComposable>
</Table>
<Toolbar className="pf-u-mb-xl">
<ToolbarContent>
<ToolbarItem
variant="pagination"
alignment={{ default: 'alignRight' }}
align={{ default: 'alignRight' }}
>
<Pagination
variant={PaginationVariant.bottom}
@ -164,11 +165,12 @@ const ImagesTable = () => {
const EmptyImagesTable = () => {
return (
<EmptyState variant={EmptyStateVariant.large} data-testid="empty-state">
<EmptyStateIcon icon={PlusCircleIcon} />
<Title headingLevel="h4" size="lg">
Create an RPM-DNF image
</Title>
<EmptyState variant={EmptyStateVariant.lg} data-testid="empty-state">
<EmptyStateHeader
titleText="Create an RPM-DNF image"
icon={<EmptyStateIcon icon={PlusCircleIcon} />}
headingLevel="h4"
/>
<EmptyStateBody>
<Text>
Image builder is a tool for creating deployment-ready customized
@ -201,29 +203,31 @@ const EmptyImagesTable = () => {
</Button>
</Text>
</EmptyStateBody>
<Link
to={resolveRelPath('imagewizard')}
className="pf-c-button pf-m-primary"
data-testid="create-image-action"
>
Create image
</Link>
<EmptyStateSecondaryActions>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_rhel_images_using_the_image_builder_service'
}
className="pf-u-pt-md"
<EmptyStateFooter>
<Link
to={resolveRelPath('imagewizard')}
className="pf-c-button pf-m-primary"
data-testid="create-image-action"
>
Image builder for RPM-DNF documentation
</Button>
</EmptyStateSecondaryActions>
Create image
</Link>
<EmptyStateActions>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_rhel_images_using_the_image_builder_service'
}
className="pf-u-pt-md"
>
Image builder for RPM-DNF documentation
</Button>
</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
);
};

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

@ -170,7 +170,7 @@ const HelpPopover = ({ header, body }: HelpPopoverPropTypes) => {
minWidth="35rem"
headerContent={header}
bodyContent={body}
reference={ref}
triggerRef={ref}
/>
</>
);

4
src/Components/LandingPage/Quickstarts.tsx
View file

@ -15,9 +15,9 @@ export const Quickstarts = () => {
<ExpandableSection
className="pf-m-light pf-u-mb-xl expand-section"
toggleText="Help get started with new features"
onToggle={setShowHint}
onToggle={(_event, val) => setShowHint(val)}
isExpanded={showHint}
displaySize="large"
displaySize="lg"
>
<p className="pf-u-pt-sm">
<Button

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

@ -5,12 +5,17 @@ import {
Button,
Form,
FormGroup,
HelperText,
HelperTextItem,
FormHelperText,
Popover,
ValidatedOptions,
} from '@patternfly/react-core';
import {
Select,
SelectOption,
SelectVariant,
ValidatedOptions,
} from '@patternfly/react-core';
} from '@patternfly/react-core/deprecated';
import { ExclamationCircleIcon, HelpIcon } from '@patternfly/react-icons';
import { useNavigate } from 'react-router-dom';
@ -92,9 +97,11 @@ const RegionsSelect = ({
if (selected.includes(selection)) {
nextSelected = selected.filter((region) => region !== selection);
setSelected(nextSelected);
setIsOpen(false);
} else {
nextSelected = [...selected, selection];
setSelected(nextSelected);
setIsOpen(false);
}
nextSelected.length === 0
? setValidated(ValidatedOptions.error)
@ -122,9 +129,6 @@ const RegionsSelect = ({
<FormGroup
label="Select region"
isRequired
validated={validated}
helperTextInvalid={helperTextInvalid}
helperTextInvalidIcon={<ExclamationCircleIcon />}
labelIcon={
<Popover
headerContent={<div>Sharing images to other regions</div>}
@ -144,7 +148,7 @@ const RegionsSelect = ({
aria-describedby="simple-form-name-01"
className="pf-c-form__group-label-help"
>
<HelpIcon noVerticalAlign />
<HelpIcon />
</button>
</Popover>
}
@ -172,6 +176,18 @@ const RegionsSelect = ({
/>
))}
</Select>
{validated !== 'success' && (
<FormHelperText>
<HelperText>
<HelperTextItem
icon={<ExclamationCircleIcon />}
variant={validated}
>
{helperTextInvalid}
</HelperTextItem>
</HelperText>
</FormHelperText>
)}
</FormGroup>
<ActionGroup>
<Button

2
src/mockServiceWorker.js
View file

@ -2,7 +2,7 @@
/* tslint:disable */
/**
* Mock Service Worker (1.2.3).
* Mock Service Worker (1.3.1).
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
* - Please do NOT serve this file on production.

12
src/test/Components/CreateImageWizard/CreateImageWizard.compliance.test.js
View file

@ -136,12 +136,12 @@ describe('On Recreate', () => {
await waitFor(() => expect(createImageButton).toBeEnabled());
// check that the FSC contains a /tmp partition
const navigation = await screen.findByRole('navigation');
await user.click(
await within(navigation).findByRole('button', {
name: /file system configuration/i,
})
);
// There are two buttons with the same name but cannot easily select the DDF rendered sidenav.
// The sidenav will be the first node found out of all buttons.
const buttonsFSC = screen.getAllByRole('button', {
name: /file system configuration/i,
});
await user.click(buttonsFSC[0]);
await screen.findByRole('heading', { name: /file system configuration/i });
await screen.findByText('/tmp');

7
src/test/Components/ImagesTable/ImagesTable.test.js
View file

@ -116,11 +116,8 @@ describe('Images Table', () => {
const { findAllByRole } = within(table);
const rows = await findAllByRole('row');
// first row is header so look at index 1
const imageId = rows[1].cells[1].textContent;
const actionsButton = await within(rows[1]).findByRole('button', {
name: 'Actions',
name: 'Kebab toggle',
});
expect(actionsButton).toBeEnabled();
@ -151,7 +148,7 @@ describe('Images Table', () => {
// first row is header so look at index 1
const actionsButton = await within(rows[1]).findByRole('button', {
name: 'Actions',
name: 'Kebab toggle',
});
await user.click(actionsButton);

7
src/test/Components/ShareImageModal/ShareImageModal.test.js
View file

@ -40,11 +40,6 @@ describe('Create Share To Regions Modal', () => {
const shareButton = await screen.findByRole('button', { name: /share/i });
expect(shareButton).toBeDisabled();
let invalidAlert = screen.queryByText(
/select at least one region to share to\./i
);
expect(invalidAlert).not.toBeInTheDocument();
const selectToggle = screen.getByRole('button', { name: /options menu/i });
// eslint-disable-next-line testing-library/no-unnecessary-act
user.click(selectToggle);
@ -60,7 +55,7 @@ describe('Create Share To Regions Modal', () => {
user.click(clearAllButton);
await waitFor(() => expect(shareButton).toBeDisabled());
invalidAlert = screen.getByText(
const invalidAlert = screen.getByText(
/select at least one region to share to\./i
);
expect(invalidAlert).toBeInTheDocument();