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.

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

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);

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>