🐛 Reuse toggle component for apps table (#1692)

https://issues.redhat.com/browse/MTA-1807 Signed-off-by: Ian Bolton <[email protected]>
konveyor · Feb 22, 2024 · 81ad682 · 81ad682
1 parent a302446
commit 81ad682
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 27 deletions.
diff --git 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
@@ -13,13 +13,10 @@ import {
   ToolbarGroup,
   ButtonVariant,
   DropdownItem,
-  Dropdown,
-  MenuToggle,
-  MenuToggleElement,
   Modal,
   Tooltip,
 } from "@patternfly/react-core";
-import { PencilAltIcon, TagIcon, EllipsisVIcon } from "@patternfly/react-icons";
+import { PencilAltIcon, TagIcon } from "@patternfly/react-icons";
 import {
   Table,
   Thead,
@@ -106,6 +103,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();
@@ -115,8 +113,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);
@@ -799,27 +795,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>
               ) : (
                 <></>