🐛 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>

client/src/app/shared/components/kebab-dropdown/kebab-dropdown.tsx

@@ -1,27 +1,40 @@
 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> = ({
   dropdownItems,
 }) => {
   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>
   );
 };