162224 fix action menu overlaps flyout

x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_flyout.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMemo } from 'react';
+import React from 'react';
+import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
+import { Filter } from '../../../../common/custom_link/custom_link_types';
+import { useFetcher } from '../../../hooks/use_fetcher';
+import { convertFiltersToQuery } from '../../app/settings/custom_link/create_edit_custom_link_flyout/helper';
+import { CreateEditCustomLinkFlyout } from '../../app/settings/custom_link/create_edit_custom_link_flyout';
+
+export function CustomLinkFlyout({
+  transaction,
+  isOpen,
+  onClose,
+}: {
+  transaction?: Transaction;
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  const filters = useMemo(
+    () =>
+      [
+        { key: 'service.name', value: transaction?.service.name },
+        { key: 'service.environment', value: transaction?.service.environment },
+        { key: 'transaction.name', value: transaction?.transaction.name },
+        { key: 'transaction.type', value: transaction?.transaction.type },
+      ].filter((filter): filter is Filter => typeof filter.value === 'string'),
+    [transaction]
+  );
+
+  const { refetch } = useFetcher(
+    (callApmApi) =>
+      callApmApi('GET /internal/apm/settings/custom_links', {
+        isCachable: false,
+        params: { query: convertFiltersToQuery(filters) },
+      }),
+    [filters]
+  );
+
+  return (
+    <>
+      {isOpen && (
+        <CreateEditCustomLinkFlyout
+          defaults={{ filters }}
+          onClose={() => {
+            onClose();
+          }}
+          onSave={() => {
+            onClose();
+            refetch();
+          }}
+          onDelete={() => {
+            onClose();
+            refetch();
+          }}
+        />
+      )}
+    </>
+  );
+}

x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.tsx

@@ -30,7 +30,6 @@ import {
 import { Transaction } from '../../../../../typings/es_schemas/ui/transaction';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
-import { CreateEditCustomLinkFlyout } from '../../../app/settings/custom_link/create_edit_custom_link_flyout';
 import { convertFiltersToQuery } from '../../../app/settings/custom_link/create_edit_custom_link_flyout/helper';
 import { LoadingStatePrompt } from '../../loading_state_prompt';
 import { CustomLinkToolbar } from './custom_link_toolbar';
@@ -40,11 +39,12 @@ const DEFAULT_LINKS_TO_SHOW = 3;
 
 export function CustomLinkMenuSection({
   transaction,
+  openCreateCustomLinkFlyout,
 }: {
   transaction?: Transaction;
+  openCreateCustomLinkFlyout: () => void;
 }) {
   const [showAllLinks, setShowAllLinks] = useState(false);
-  const [isCreateEditFlyoutOpen, setIsCreateEditFlyoutOpen] = useState(false);
 
   const filters = useMemo(
     () =>
@@ -57,7 +57,7 @@ export function CustomLinkMenuSection({
     [transaction]
   );
 
-  const { data, status, refetch } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) =>
       callApmApi('GET /internal/apm/settings/custom_links', {
         isCachable: false,
@@ -70,23 +70,6 @@ export function CustomLinkMenuSection({
 
   return (
     <>
-      {isCreateEditFlyoutOpen && (
-        <CreateEditCustomLinkFlyout
-          defaults={{ filters }}
-          onClose={() => {
-            setIsCreateEditFlyoutOpen(false);
-          }}
-          onSave={() => {
-            setIsCreateEditFlyoutOpen(false);
-            refetch();
-          }}
-          onDelete={() => {
-            setIsCreateEditFlyoutOpen(false);
-            refetch();
-          }}
-        />
-      )}
-
       <ActionMenuDivider />
 
       <Section>
@@ -103,7 +86,7 @@ export function CustomLinkMenuSection({
           </EuiFlexItem>
           <EuiFlexItem>
             <CustomLinkToolbar
-              onClickCreate={() => setIsCreateEditFlyoutOpen(true)}
+              onClickCreate={openCreateCustomLinkFlyout}
               showCreateButton={customLinks.length > 0}
             />
           </EuiFlexItem>
@@ -131,7 +114,7 @@ export function CustomLinkMenuSection({
           customLinks={customLinks}
           showAllLinks={showAllLinks}
           toggleShowAll={() => setShowAllLinks((show) => !show)}
-          onClickCreate={() => setIsCreateEditFlyoutOpen(true)}
+          onClickCreate={openCreateCustomLinkFlyout}
         />
       </Section>
     </>

x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx

@@ -32,6 +32,7 @@ import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useProfilingPlugin } from '../../../hooks/use_profiling_plugin';
 import { CustomLinkMenuSection } from './custom_link_menu_section';
 import { getSections } from './sections';
+import { CustomLinkFlyout } from './custom_link_flyout';
 
 interface Props {
   readonly transaction?: Transaction;
@@ -69,8 +70,21 @@ export function TransactionActionMenu({ transaction, isLoading }: Props) {
   const { isProfilingPluginInitialized, profilingLocators } =
     useProfilingPlugin();
 
+  const [isCreateEditFlyoutOpen, setIsCreateEditFlyoutOpen] = useState(false);
+
+  function openCustomLinkFlyout() {
+    setIsCreateEditFlyoutOpen(true);
+    setIsActionPopoverOpen(false);
+  }
+
   return (
     <>
+      <CustomLinkFlyout
+        transaction={transaction}
+        isOpen={isCreateEditFlyoutOpen}
+        onClose={() => setIsCreateEditFlyoutOpen(false)}
+      />
+
       <ActionMenu
         id="transactionActionMenu"
         closePopover={() => setIsActionPopoverOpen(false)}
@@ -91,7 +105,12 @@ export function TransactionActionMenu({ transaction, isLoading }: Props) {
           transaction={transaction}
           profilingLocators={profilingLocators}
         />
-        {hasGoldLicense && <CustomLinkMenuSection transaction={transaction} />}
+        {hasGoldLicense && (
+          <CustomLinkMenuSection
+            transaction={transaction}
+            openCreateCustomLinkFlyout={openCustomLinkFlyout}
+          />
+        )}
       </ActionMenu>
     </>
   );

x-pack/plugins/apm/tsconfig.json

@@ -96,7 +96,8 @@
     "@kbn/logs-shared-plugin",
     "@kbn/unified-field-list",
     "@kbn/discover-plugin",
-    "@kbn/observability-ai-assistant-plugin"
+    "@kbn/observability-ai-assistant-plugin",
+    "@kbn/apm-plugin"
   ],
   "exclude": ["target/**/*"]
 }