Wizard: Swap FSC selects for non-deprecated version

This swaps deprecated PF4 Selects on FSC step for non-deprecated PF5 ones.
osbuild · Feb 17, 2025 · caafd1b · caafd1b
1 parent 074697a
commit caafd1b
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 36 deletions.
diff --git 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<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isDisabled={prefix === '/'}
+      data-testid="prefix-select"
+      isFullWidth
+    >
+      {prefix}
+    </MenuToggle>
+  );
+
   return (
     <Select
       ouiaId="mount-point"
       isOpen={isOpen}
-      onToggle={(_event, isOpen) => onToggle(isOpen)}
+      selected={prefix}
       onSelect={onSelect}
-      selections={prefix}
-      isDisabled={prefix === '/'}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
+      shouldFocusToggleOnSelect
     >
-      {mountpointPrefixes.map((prefix, index) => {
-        return <SelectOption key={index} value={prefix} />;
-      })}
+      <SelectList>
+        {mountpointPrefixes.map((prefix, index) => {
+          return (
+            <SelectOption key={index} value={prefix}>
+              {prefix}
+            </SelectOption>
+          );
+        })}
+      </SelectList>
     </Select>
   );
 };
@@ -291,10 +317,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) => {
@@ -310,18 +332,43 @@ const SizeUnit = ({ partition }: SizeUnitPropTypes) => {
     setIsOpen(false);
   };
 
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      data-testid="unit-select"
+    >
+      {partition.unit}
+    </MenuToggle>
+  );
+
   return (
     <Select
       ouiaId="unit"
       isOpen={isOpen}
-      onToggle={(_event, isOpen) => onToggle(isOpen)}
+      selected={partition.unit}
       onSelect={onSelect}
-      selections={partition.unit}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
+      shouldFocusToggleOnSelect
     >
-      <SelectOption value={'KiB'} />
-      <SelectOption value={'MiB'} />
-      <SelectOption value={'GiB'} />
-      <>{initialValue.unit === 'B' && <SelectOption value={'B'} />}</>
+      <SelectList>
+        {units.map((unit, index) => (
+          <SelectOption key={index} value={unit}>
+            {unit}
+          </SelectOption>
+        ))}
+        <>
+          {initialValue.unit === 'B' && (
+            <SelectOption value={'B'}>B</SelectOption>
+          )}
+        </>
+      </SelectList>
     </Select>
   );
 };

diff --git a/...mponents/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx b/...mponents/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',