Toggle action and service icon menus (#87220)

Make it so clicking the icon menu or action menu while the popover is open closes the popover. This also fixes the issue where the action menu would not close at all. Rename the `onOpen` prop to `onClick` to match what it does. Fixes #87161. Fixes #87131.
elastic · Jan 5, 2021 · 42ba5a8 · 42ba5a8
1 parent 8ac632b
commit 42ba5a8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_icons/icon_popover.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_icons/icon_popover.tsx
@@ -17,7 +17,7 @@ import { px } from '../../../../style/variables';
 interface IconPopoverProps {
   title: string;
   children: React.ReactChild;
-  onOpen: () => void;
+  onClick: () => void;
   onClose: () => void;
   detailsFetchStatus: FETCH_STATUS;
   isOpen: boolean;
@@ -27,7 +27,7 @@ export function IconPopover({
   icon,
   title,
   children,
-  onOpen,
+  onClick,
   onClose,
   detailsFetchStatus,
   isOpen,
@@ -44,7 +44,7 @@ export function IconPopover({
       anchorPosition="downCenter"
       ownFocus={false}
       button={
-        <EuiButtonEmpty onClick={onOpen} data-test-subj={`popover_${title}`}>
+        <EuiButtonEmpty onClick={onClick} data-test-subj={`popover_${title}`}>
           <EuiIcon type={icon} size="l" color="black" />
         </EuiButtonEmpty>
       }

diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_icons/index.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_icons/index.tsx
@@ -144,8 +144,10 @@ export function ServiceIcons({ serviceName }: Props) {
                 icon={item.icon}
                 detailsFetchStatus={detailsFetchStatus}
                 title={item.title}
-                onOpen={() => {
-                  setSelectedIconPopover(item.key);
+                onClick={() => {
+                  setSelectedIconPopover((prevSelectedIconPopover) =>
+                    item.key === prevSelectedIconPopover ? null : item.key
+                  );
                 }}
                 onClose={() => {
                   setSelectedIconPopover(null);

diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx
@@ -63,7 +63,13 @@ export function TransactionActionMenu({ transaction }: Props) {
         isOpen={isActionPopoverOpen}
         anchorPosition="downRight"
         button={
-          <ActionMenuButton onClick={() => setIsActionPopoverOpen(true)} />
+          <ActionMenuButton
+            onClick={() =>
+              setIsActionPopoverOpen(
+                (prevIsActionPopoverOpen) => !prevIsActionPopoverOpen
+              )
+            }
+          />
         }
       >
         <div>