osbuild · regexowl · Feb 14, 2025 · Feb 17, 2025 · Mar 5, 2025 · Mar 7, 2025
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
+      ouiaId="mount-point"
+      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
+      ouiaId="unit"
+      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/src/Components/CreateImageWizard/steps/ImageOutput/ArchSelect.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/ArchSelect.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 { ARCHES } from '../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
@@ -49,17 +51,34 @@ const ArchSelect = () => {
     return options;
   };
 
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ouiaId="arch_select"
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+      data-testid="arch_select"
+    >
+      {arch}
+    </MenuToggle>
+  );
+
   return (
     <FormGroup isRequired={true} label="Architecture">
       <Select
-        ouiaId="arch_select"
-        variant={SelectVariant.single}
-        onToggle={() => setIsOpen(!isOpen)}
-        onSelect={setArch}
-        selections={arch}
         isOpen={isOpen}
+        selected={arch}
+        onSelect={setArch}
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
       >
-        {setSelectOptions()}
+        <SelectList>{setSelectOptions()}</SelectList>
       </Select>
     </FormGroup>
   );

diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/ReleaseSelect.tsx b/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
+      ouiaId="release_select"
+      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>
   );

diff --git a/src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx b/src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx
@@ -3,9 +3,11 @@ import React, { useState } from 'react';
 import {
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-} from '@patternfly/react-core/deprecated';
+  DropdownList,
+  MenuToggle,
+  MenuToggleCheckbox,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 
 import { ApiRepositoryResponseRead } from '../../../../../store/contentSourcesApi';
 
@@ -42,34 +44,39 @@ export function BulkSelect({
 
   return (
     <Dropdown
-      toggle={
-        <DropdownToggle
-          id="stacked-example-toggle"
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          id="bulk-select-toggle"
+          data-testid="bulk-select-toggle"
+          ref={toggleRef}
           isDisabled={isDisabled}
-          splitButtonItems={[
-            <DropdownToggleCheckbox
-              id="example-checkbox-1"
-              key="split-checkbox"
-              aria-label="Select all"
-              isChecked={allChecked || someChecked ? null : false}
-              onClick={handleSelectPage}
-            />,
-          ]}
-          onToggle={toggleDropdown}
+          splitButtonOptions={{
+            items: [
+              <MenuToggleCheckbox
+                id="bulk-select-checkbox"
+                key="split-checkbox"
+                aria-label="Select all"
+                isChecked={allChecked || someChecked ? null : false}
+                onClick={handleSelectPage}
+              />,
+            ],
+          }}
+          onClick={toggleDropdown}
         >
           {someChecked ? `${selected.size} selected` : null}
-        </DropdownToggle>
-      }
+        </MenuToggle>
+      )}
       isOpen={dropdownIsOpen}
-      dropdownItems={[
+    >
+      <DropdownList>
         <DropdownItem
           key="none"
           isDisabled={!selected.size}
           onClick={() => {
             deselectAll();
             toggleDropdown();
           }}
-        >{`Clear all (${selected.size} items)`}</DropdownItem>,
+        >{`Clear all (${selected.size} items)`}</DropdownItem>
         <DropdownItem
           key="page"
           isDisabled={!contentList.length}
@@ -79,8 +86,8 @@ export function BulkSelect({
           }}
         >{`${allChecked ? 'Remove' : 'Select'} page (${
           perPage > contentList.length ? contentList.length : perPage
-        } items)`}</DropdownItem>,
-      ]}
-    />
+        } items)`}</DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
 }