pf5 Select* - switch from deprecated to current

src/api/collection.ts

@@ -169,7 +169,7 @@ export class API extends HubAPI {
         name,
         version,
       },
-      `pulp/api/v3/content/ansible/collection_versions/`,
+      'pulp/api/v3/content/ansible/collection_versions/',
     );
   }
 

src/components/ansible-repository-form.tsx

@@ -7,12 +7,12 @@ import {
   FormGroup,
   TextInput,
 } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import React, { useEffect, useState } from 'react';
 import { AnsibleRemoteAPI, type AnsibleRepositoryType } from 'src/api';
 import {
   FormFieldHelper,
   HelpButton,
+  HubSelect,
   LazyDistributions,
   PulpLabels,
   Spinner,
@@ -150,12 +150,11 @@ export const AnsibleRepositoryForm = ({
         : 'none',
   );
 
-  const [selectOpen, setSelectOpen] = useState(false);
-
   const selectPipeline = (value) => {
     if (disableHideFromSearch && value !== 'staging') {
       setHideFromSearch(repository?.pulp_labels?.hide_from_search === '');
     }
+
     if (value === 'staging') {
       setSelectedPipeline(value);
       setPipeline(value);
@@ -170,13 +169,12 @@ export const AnsibleRepositoryForm = ({
       setPipeline(null);
       setDisableHideFromSearch(false);
     }
-    setSelectOpen(false);
   };
 
   const selectOptions = {
-    staging: { id: 'staging', toString: () => t`Staging` },
-    approved: { id: 'approved', toString: () => t`Approved` },
-    none: { id: 'none', toString: () => t`None` },
+    staging: t`Staging`,
+    approved: t`Approved`,
+    none: t`None`,
   };
 
   const pipelineHelp = (
@@ -252,17 +250,11 @@ export const AnsibleRepositoryForm = ({
         t`Pipeline`,
         pipelineHelp,
         <div data-cy='pipeline'>
-          <Select
-            variant='single'
-            isOpen={selectOpen}
-            onToggle={() => setSelectOpen(!selectOpen)}
-            onSelect={(_e, value: { id }) => selectPipeline(value.id)}
-            selections={selectOptions[selectedPipeline]}
-          >
-            {Object.entries(selectOptions).map(([k, v]) => (
-              <SelectOption key={k} value={v} />
-            ))}
-          </Select>
+          <HubSelect
+            onSelect={selectPipeline}
+            selected={selectedPipeline}
+            options={selectOptions}
+          />
         </div>,
       )}
 

src/components/detail-list.tsx

@@ -114,7 +114,7 @@ export function DetailList<T>({
         <LoadingSpinner />
       ) : (
         <>
-          <div className='hub-toolbar' data-cy={`DetailList`}>
+          <div className='hub-toolbar' data-cy='DetailList'>
             <Toolbar>
               <ToolbarContent>
                 <ToolbarGroup>

src/components/hub-select.tsx

@@ -0,0 +1,50 @@
+import {
+  MenuToggle,
+  type MenuToggleElement,
+  Select,
+  SelectOption,
+} from '@patternfly/react-core';
+import React, { type Ref, useState } from 'react';
+
+// single select component - render options object in order, onSelect(option key), selected=option key
+export const HubSelect = ({
+  onSelect,
+  options,
+  selected,
+}: {
+  onSelect: (value) => void;
+  options: Record<string, string>;
+  selected: string;
+}) => {
+  const [isOpen, setOpen] = useState(false);
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      isExpanded={isOpen}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      ref={toggleRef}
+    >
+      {options[selected]}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setOpen(isOpen)}
+      onSelect={(_event, value) => {
+        onSelect(value);
+        setOpen(false);
+      }}
+      selected={selected}
+      toggle={toggle}
+    >
+      {Object.entries(options).map(([k, v]) => (
+        <SelectOption key={k} value={k}>
+          {v}
+        </SelectOption>
+      ))}
+    </Select>
+  );
+};

src/components/index.ts

@@ -49,6 +49,7 @@ export { HubAboutModal } from './hub-about-modal';
 export { HubCopyButton } from './hub-copy-button';
 export { HubListToolbar } from './hub-list-toolbar';
 export { HubPagination } from './hub-pagination';
+export { HubSelect } from './hub-select';
 export { ImportConsole } from './import-console';
 export { ImportList } from './import-list';
 export { ImportModal } from './import-modal';