Wizard: Swap release select

This replaces deprecated PF4 select with non-deprecated PF5 one.

src/Components/CreateImageWizard/steps/ImageOutput/ReleaseSelect.tsx

@@ -1,11 +1,13 @@
 import React, { ReactElement, useState } from 'react';
 
-import { FormGroup } from '@patternfly/react-core';
 import {
+  FormGroup,
+  MenuToggle,
+  MenuToggleElement,
   Select,
+  SelectList,
   SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core/deprecated';
+} from '@patternfly/react-core';
 
 import {
   RELEASES,
@@ -45,13 +47,15 @@ const ReleaseSelect = () => {
   const releases = process.env.IS_ON_PREMISE ? ON_PREM_RELEASES : RELEASES;
 
   const handleSelect = (_event: React.MouseEvent, selection: Distributions) => {
-    if (!isRhel(selection)) {
-      dispatch(changeRegistrationType('register-later'));
-    } else {
-      dispatch(changeRegistrationType('register-now-rhc'));
+    if (selection !== ('loader' as Distributions)) {
+      if (!isRhel(selection)) {
+        dispatch(changeRegistrationType('register-later'));
+      } else {
+        dispatch(changeRegistrationType('register-now-rhc'));
+      }
+      dispatch(changeDistribution(selection));
+      setIsOpen(false);
     }
-    dispatch(changeDistribution(selection));
-    setIsOpen(false);
   };
 
   const handleExpand = () => {
@@ -124,26 +128,43 @@ const ReleaseSelect = () => {
     return options;
   };
 
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+      data-testid="release_select"
+    >
+      {releases.get(distribution)}
+    </MenuToggle>
+  );
+
   return (
     <FormGroup isRequired={true} label="Release">
       <Select
         ouiaId="release_select"
-        variant={SelectVariant.single}
-        onToggle={() => setIsOpen(!isOpen)}
-        onSelect={handleSelect}
-        selections={releases.get(distribution)}
         isOpen={isOpen}
-        {...(!showDevelopmentOptions &&
-          // Hide this for on-prem since the host
-          // could be centos or fedora
-          !process.env.IS_ON_PREMISE && {
-            loadingVariant: {
-              text: 'Show options for further development of RHEL',
-              onClick: handleExpand,
-            },
-          })}
+        selected={releases.get(distribution)}
+        onSelect={handleSelect}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
       >
-        {setSelectOptions()}
+        <SelectList>
+          {setSelectOptions()}
+          {!showDevelopmentOptions &&
+            // Hide this for on-prem since the host
+            // could be centos or fedora
+            !process.env.IS_ON_PREMISE && (
+              <SelectOption onClick={handleExpand} value="loader" isLoadButton>
+                Show options for further development of RHEL
+              </SelectOption>
+            )}
+        </SelectList>
       </Select>
     </FormGroup>
   );

src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx

@@ -45,15 +45,13 @@ let router: RemixRouter | undefined = undefined;
 
 const openReleaseMenu = async () => {
   const user = userEvent.setup();
-  const releaseMenu = screen.getAllByRole('button', {
-    name: /options menu/i,
-  })[0];
+  const releaseMenu = screen.getByTestId('release_select');
   await waitFor(() => user.click(releaseMenu));
 };
 
 const clickShowOptions = async () => {
   const user = userEvent.setup();
-  const showOptions = await screen.findByRole('button', {
+  const showOptions = await screen.findByRole('option', {
     name: /show options for further development of rhel/i,
   });
   await waitFor(() => user.click(showOptions));
@@ -220,7 +218,7 @@ describe('Step Image output', () => {
     await screen.findAllByRole('option', {
       name: /Red Hat Enterprise Linux \(RHEL\) 9/,
     });
-    await screen.findByRole('button', {
+    await screen.findByRole('option', {
       name: 'Show options for further development of RHEL',
     });
   });
@@ -229,7 +227,7 @@ describe('Step Image output', () => {
     await renderCreateMode();
     await openReleaseMenu();
 
-    const showOptionsButton = await screen.findByRole('button', {
+    const showOptionsButton = await screen.findByRole('option', {
       name: 'Show options for further development of RHEL',
     });
     user.click(showOptionsButton);

src/test/Components/CreateImageWizard/steps/Oscap/Oscap.test.tsx

@@ -30,13 +30,7 @@ import {
 
 const selectRhel8 = async () => {
   const user = userEvent.setup();
-  await waitFor(async () =>
-    user.click(
-      screen.getAllByRole('button', {
-        name: /options menu/i,
-      })[0]
-    )
-  );
+  await waitFor(async () => user.click(screen.getByTestId('release_select')));
   const rhel8 = await screen.findByRole('option', {
     name: /red hat enterprise linux \(rhel\) 8/i,
   });

src/test/Components/CreateImageWizard/steps/Review/Review.test.tsx

@@ -28,12 +28,10 @@ const setupWithRhel = async () => {
 const setupWithCentos = async () => {
   const user = userEvent.setup();
   await renderCreateMode();
-  const releaseMenu = screen.getAllByRole('button', {
-    name: /options menu/i,
-  })[0];
+  const releaseMenu = screen.getByTestId('release_select');
 
   await waitFor(() => user.click(releaseMenu));
-  const showOptionsButton = await screen.findByRole('button', {
+  const showOptionsButton = await screen.findByRole('option', {
     name: 'Show options for further development of RHEL',
   });
   await waitFor(() => user.click(showOptionsButton));