From e35086b8c089299acc1afdceda632bf2f5e6a647 Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Wed, 12 Jul 2023 15:08:29 -0400
Subject: [PATCH] :bug: Fix mismatched new/deprecated dropdown components in
 KebabDropdown (#1126)

Fixes #1125

We were using the old Dropdown component from
`@patternfly/react-core/deprecated` with the new DropdownItem component
from `@patternfly/react-core`. This change upgrades our shared
`KebabDropdown` to use the new PF5 `Dropdown` structure.

Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
---
 .../kebab-dropdown/kebab-dropdown.tsx         | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/client/src/app/shared/components/kebab-dropdown/kebab-dropdown.tsx b/client/src/app/shared/components/kebab-dropdown/kebab-dropdown.tsx
index 891fd2ab5..452fb3fbb 100644
--- a/client/src/app/shared/components/kebab-dropdown/kebab-dropdown.tsx
+++ b/client/src/app/shared/components/kebab-dropdown/kebab-dropdown.tsx
@@ -1,9 +1,14 @@
 import React, { useState } from "react";
-
-import { Dropdown, KebabToggle } from "@patternfly/react-core/deprecated";
+import {
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from "@patternfly/react-core";
+import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
 
 export interface IKebabDropdownProps {
-  dropdownItems?: any[];
+  dropdownItems?: React.ReactNode[];
 }
 
 export const KebabDropdown: React.FC<IKebabDropdownProps> = ({
@@ -11,17 +16,25 @@ export const KebabDropdown: React.FC<IKebabDropdownProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onKebabToggle = (isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
   return (
     <Dropdown
-      toggle={<KebabToggle onToggle={(_, isOpen) => onKebabToggle(isOpen)} />}
+      popperProps={{ position: "right" }}
       isOpen={isOpen}
-      isPlain
-      position="right"
-      dropdownItems={dropdownItems}
-    />
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          isExpanded={isOpen}
+          onClick={() => setIsOpen(!isOpen)}
+          variant="plain"
+          aria-label="Table toolbar actions kebab toggle"
+          isDisabled={!dropdownItems || dropdownItems.length === 0}
+        >
+          <EllipsisVIcon aria-hidden="true" />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };