diff --git a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx index 656b1d60..9ff12256 100644 --- a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx +++ b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx @@ -7,8 +7,12 @@ import { Button, Alert, TextInput, + Select, + MenuToggleElement, + MenuToggle, + SelectList, + SelectOption, } from '@patternfly/react-core'; -import { Select, SelectOption } from '@patternfly/react-core/deprecated'; import { HelpIcon, MinusCircleIcon } from '@patternfly/react-icons'; import styles from '@patternfly/react-styles/css/components/Table/table'; import { @@ -163,6 +167,8 @@ export const mountpointPrefixes = [ '/var', ]; +const units = ['GiB', 'MiB', 'KiB']; + type MountpointPrefixPropTypes = { partition: Partition; }; @@ -173,10 +179,6 @@ const MountpointPrefix = ({ partition }: MountpointPrefixPropTypes) => { const prefix = getPrefix(partition.mountpoint); const suffix = getSuffix(partition.mountpoint); - const onToggle = (isOpen: boolean) => { - setIsOpen(isOpen); - }; - const onSelect = (event: React.MouseEvent, selection: string) => { setIsOpen(false); const mountpoint = selection + (suffix.length > 0 ? '/' + suffix : ''); @@ -185,18 +187,42 @@ const MountpointPrefix = ({ partition }: MountpointPrefixPropTypes) => { ); }; + const onToggleClick = () => { + setIsOpen(!isOpen); + }; + + const toggle = (toggleRef: React.Ref) => ( + + {prefix} + + ); + return ( ); }; @@ -292,10 +318,6 @@ const SizeUnit = ({ partition }: SizeUnitPropTypes) => { const dispatch = useAppDispatch(); const [isOpen, setIsOpen] = useState(false); - const onToggle = (isOpen: boolean) => { - setIsOpen(isOpen); - }; - const initialValue = useRef(partition).current; const onSelect = (event: React.MouseEvent, selection: Units) => { @@ -311,18 +333,43 @@ const SizeUnit = ({ partition }: SizeUnitPropTypes) => { setIsOpen(false); }; + const onToggleClick = () => { + setIsOpen(!isOpen); + }; + + const toggle = (toggleRef: React.Ref) => ( + + {partition.unit} + + ); + return ( ); }; diff --git a/src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx b/src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx index 6381b492..55684a59 100644 --- a/src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx +++ b/src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx @@ -88,23 +88,19 @@ const changePartitionSize = async () => { const changePartitionUnitsToKiB = async () => { const user = userEvent.setup(); const row = await getRow(1); - const units = await within(row).findAllByRole('button', { - name: /options menu/i, - }); - await waitFor(() => user.click(units[1])); - const mibibytes = await screen.findByText('KiB'); - await waitFor(() => user.click(mibibytes)); + const units = await within(row).findByTestId('unit-select'); + await waitFor(() => user.click(units)); + const kibOption = await screen.findByRole('option', { name: 'KiB' }); + await waitFor(() => user.click(kibOption)); }; const changePartitionUnitsToMiB = async () => { const user = userEvent.setup(); const row = await getRow(1); - const units = await within(row).findAllByRole('button', { - name: /options menu/i, - }); - await waitFor(() => user.click(units[1])); - const mibibytes = await screen.findByText('MiB'); - await waitFor(() => user.click(mibibytes)); + const units = await within(row).findByTestId('unit-select'); + await waitFor(() => user.click(units)); + const mibOption = await screen.findByRole('option', { name: 'MiB' }); + await waitFor(() => user.click(mibOption)); }; const goToReviewStep = async () => { @@ -191,9 +187,9 @@ describe('Step File system configuration', () => { expect(rows).toHaveLength(3); //Change mountpoint of final row to /var, resolving errors - const mountPointOptions = within(rows[2]).getAllByRole('button', { - name: 'Options menu', - })[0]; + const mountPointOptions = await within(rows[2]).findByTestId( + 'prefix-select' + ); user.click(mountPointOptions); const varButton = await within(rows[2]).findByRole('option', { name: '/var',