162224 fix action menu overlaps flyout (#162664)

## Summary

Fixes #162224.

Currently when **create custom link** button is clicked, though the
flyout opens, but action menu persisted over the flyout making the
create custom link flyout unusable.

On this PR necessary restructuring and refactoring was done to fix this
behavior.

[Screencast from 07-28-2023 01:52:15
AM.webm](33b7ad00-d10f-41dc-9901-1ccf3006e895)


### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Achyut Jhunjhunwala <achyut.jhunjhunwala@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

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.test.tsx

@@ -16,6 +16,7 @@ import {
   expectTextsInDocument,
   expectTextsNotInDocument,
 } from '../../../../utils/test_helpers';
+import { noop } from 'lodash';
 
 function Wrapper({ children }: { children?: ReactNode }) {
   return (
@@ -45,7 +46,10 @@ describe('Custom links', () => {
     });
 
     const component = render(
-      <CustomLinkMenuSection transaction={transaction} />,
+      <CustomLinkMenuSection
+        transaction={transaction}
+        openCreateCustomLinkFlyout={noop}
+      />,
       { wrapper: Wrapper }
     );
 
@@ -63,7 +67,10 @@ describe('Custom links', () => {
     });
 
     const { getByTestId } = render(
-      <CustomLinkMenuSection transaction={transaction} />,
+      <CustomLinkMenuSection
+        transaction={transaction}
+        openCreateCustomLinkFlyout={noop}
+      />,
       { wrapper: Wrapper }
     );
     expect(getByTestId('loading-spinner')).toBeInTheDocument();
@@ -86,7 +93,10 @@ describe('Custom links', () => {
     });
 
     const component = render(
-      <CustomLinkMenuSection transaction={transaction} />,
+      <CustomLinkMenuSection
+        transaction={transaction}
+        openCreateCustomLinkFlyout={noop}
+      />,
       { wrapper: Wrapper }
     );
     expectTextsInDocument(component, ['foo', 'bar', 'baz']);
@@ -110,7 +120,10 @@ describe('Custom links', () => {
     });
 
     const component = render(
-      <CustomLinkMenuSection transaction={transaction} />,
+      <CustomLinkMenuSection
+        transaction={transaction}
+        openCreateCustomLinkFlyout={noop}
+      />,
       { wrapper: Wrapper }
     );
 
@@ -134,7 +147,10 @@ describe('Custom links', () => {
       });
 
       const component = render(
-        <CustomLinkMenuSection transaction={transaction} />,
+        <CustomLinkMenuSection
+          transaction={transaction}
+          openCreateCustomLinkFlyout={noop}
+        />,
         { wrapper: Wrapper }
       );
 
@@ -159,7 +175,10 @@ describe('Custom links', () => {
       });
 
       const component = render(
-        <CustomLinkMenuSection transaction={transaction} />,
+        <CustomLinkMenuSection
+          transaction={transaction}
+          openCreateCustomLinkFlyout={noop}
+        />,
         { wrapper: Wrapper }
       );
       expectTextsInDocument(component, ['Create']);

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