From 03382b73175b47753928eee39fe893390874bf31 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Wed, 21 Feb 2024 10:59:00 -0500
Subject: [PATCH] :bug: Reuse toggle component for apps table

Signed-off-by: Ian Bolton <ibolton@redhat.com>
---
 client/src/app/components/KebabDropdown.tsx   |  1 +
 .../applications-table/applications-table.tsx | 33 ++++---------------
 2 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/client/src/app/components/KebabDropdown.tsx b/client/src/app/components/KebabDropdown.tsx
index 3224c6fe06..bf0d2412ec 100644
--- a/client/src/app/components/KebabDropdown.tsx
+++ b/client/src/app/components/KebabDropdown.tsx
@@ -24,6 +24,7 @@ export const KebabDropdown: React.FC<IKebabDropdownProps> = ({
       popperProps={{ position: "right" }}
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      shouldFocusToggleOnSelect
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
index de45d031ae..a968a7751b 100644
--- a/client/src/app/pages/applications/applications-table/applications-table.tsx
+++ b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -13,12 +13,9 @@ import {
   ToolbarGroup,
   ButtonVariant,
   DropdownItem,
-  Dropdown,
-  MenuToggle,
-  MenuToggleElement,
   Modal,
 } from "@patternfly/react-core";
-import { PencilAltIcon, TagIcon, EllipsisVIcon } from "@patternfly/react-icons";
+import { PencilAltIcon, TagIcon } from "@patternfly/react-icons";
 import {
   Table,
   Thead,
@@ -105,6 +102,7 @@ import { AnalysisWizard } from "../analysis-wizard/analysis-wizard";
 import { TaskGroupProvider } from "../analysis-wizard/components/TaskGroupContext";
 import { ApplicationIdentityForm } from "../components/application-identity-form/application-identity-form";
 import { ApplicationReviewStatus } from "../components/application-review-status/application-review-status";
+import { KebabDropdown } from "@app/components/KebabDropdown";
 
 export const ApplicationsTable: React.FC = () => {
   const { t } = useTranslation();
@@ -114,8 +112,6 @@ export const ApplicationsTable: React.FC = () => {
   const { pushNotification } = React.useContext(NotificationsContext);
 
   const { identities } = useFetchIdentities();
-  const [isToolbarKebabOpen, setIsToolbarKebabOpen] =
-    React.useState<boolean>(false);
 
   const [saveApplicationModalState, setSaveApplicationModalState] =
     React.useState<"create" | Application | null>(null);
@@ -798,27 +794,10 @@ export const ApplicationsTable: React.FC = () => {
               </ToolbarItem>
               {dropdownItems.length ? (
                 <ToolbarItem id="toolbar-kebab">
-                  <Dropdown
-                    isOpen={isToolbarKebabOpen}
-                    onSelect={() => setIsToolbarKebabOpen(false)}
-                    onOpenChange={(_isOpen) => setIsToolbarKebabOpen(false)}
-                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                      <MenuToggle
-                        ref={toggleRef}
-                        aria-label="kebab dropdown toggle"
-                        variant="plain"
-                        onClick={() =>
-                          setIsToolbarKebabOpen(!isToolbarKebabOpen)
-                        }
-                        isExpanded={isToolbarKebabOpen}
-                      >
-                        <EllipsisVIcon />
-                      </MenuToggle>
-                    )}
-                    shouldFocusToggleOnSelect
-                  >
-                    {dropdownItems}
-                  </Dropdown>
+                  <KebabDropdown
+                    dropdownItems={dropdownItems}
+                    ariaLabel="Application actions"
+                  />
                 </ToolbarItem>
               ) : (
                 <></>