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](https://github.com/elastic/kibana/assets/5312918/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>
elastic · Aug 11, 2023 · a29e4aa · a29e4aa
1 parent feb2493
commit a29e4aa
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 29 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_flyout.tsx b/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();
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/.../public/components/shared/transaction_action_menu/custom_link_menu_section/index.test.tsx b/.../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']);

diff --git a/...s/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.tsx b/...s/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>
     </>

diff --git a/.../plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx b/.../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>
     </>
   );