ODC-7669: Migrate PipelineQuickSearchVersionDropdown to PF5

Update PipelineQuickSearchVersionDropdown.tsx
logonoff · Aug 30, 2024 · 3e90f46 · 3e90f46
1 parent af11c82
commit 3e90f46
Showing 1 changed file with 43 additions and 32 deletions.
diff --git a/...ckages/pipelines-plugin/src/components/quicksearch/PipelineQuickSearchVersionDropdown.tsx b/...ckages/pipelines-plugin/src/components/quicksearch/PipelineQuickSearchVersionDropdown.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownToggle as DropdownToggleDeprecated,
-} from '@patternfly/react-core/deprecated';
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import { global_palette_green_500 as greenColor } from '@patternfly/react-tokens';
 import i18n from 'i18next';
@@ -39,38 +41,47 @@ const PipelineQuickSearchVersionDropdown: React.FC<PipelineQuickSearchVersionDro
     }
     return acc;
   }, {});
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      className="opp-quick-search-details__version-dropdown"
+      onClick={toggleIsOpen}
+      isExpanded={isOpen}
+      ref={toggleRef}
+      isDisabled={versions.length === 1}
+      data-test="task-version-toggle"
+    >
+      {versionItems[selectedVersion]}
+    </MenuToggle>
+  );
+
   return (
-    <DropdownDeprecated
+    <Select
       data-test="task-version"
       className="opp-quick-search-details__version-dropdown"
-      dropdownItems={Object.keys(versionItems).map((key) => (
-        <DropdownItemDeprecated
-          component="button"
-          key={key}
-          label={versionItems[key]}
-          onClick={(e) => {
-            e.stopPropagation();
-            onChange(key);
-            setOpen(false);
-          }}
-        >
-          <div className="opp-quick-search-details__version-dropdown-item">
-            {versionItems[key]}
-            {isSelectedVersionInstalled(item, key) && <CheckCircleIcon color={greenColor.value} />}
-          </div>
-        </DropdownItemDeprecated>
-      ))}
       isOpen={isOpen}
-      toggle={
-        <DropdownToggleDeprecated
-          isDisabled={versions.length === 1}
-          data-test="task-version-toggle"
-          onToggle={toggleIsOpen}
-        >
-          {versionItems[selectedVersion]}
-        </DropdownToggleDeprecated>
-      }
-    />
+      onSelect={(_, value: string) => {
+        if (value) {
+          onChange(value);
+        }
+        setOpen(false);
+      }}
+      toggle={toggle}
+      onOpenChange={(open) => setOpen(open)}
+    >
+      <SelectList>
+        {Object.keys(versionItems).map((key) => (
+          <SelectOption key={key} label={versionItems[key]} value={key}>
+            <div className="opp-quick-search-details__version-dropdown-item">
+              {versionItems[key]}
+              {isSelectedVersionInstalled(item, key) && (
+                <CheckCircleIcon color={greenColor.value} />
+              )}
+            </div>
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
   );
 };