Fix bug with Observability > APM header navigation (#100845)

smith · kibanamachine · commit e17919bd4391 · 2021-05-28T16:14:41.000Z
Call `setHeaderActionMenu(undefined)` when the HeaderMenuPortal is unmounted. Found this line in the docs: > Calling the handler with `undefined` will unmount the current mount point. Which we weren't doing before. Previous behavior: * Go to /app/observability/alerts * Click the "View in app" button for an APM alert * Click back * Click the "View in app" button for an APM alert * Get a weird toast error message and the header menu is gone forever Now: * Go to /app/observability/alerts * Click the "View in app" button for an APM alert * Click back * Click the "View in app" button for an APM alert * Get a working header menu Fixes #97140
diff --git a/x-pack/plugins/observability/public/components/shared/header_menu_portal.test.tsx b/x-pack/plugins/observability/public/components/shared/header_menu_portal.test.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import HeaderMenuPortal from './header_menu_portal';
+
+describe('HeaderMenuPortal', () => {
+  describe('when unmounted', () => {
+    it('calls setHeaderActionMenu with undefined', () => {
+      const setHeaderActionMenu = jest.fn();
+
+      const { unmount } = render(
+        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>test</HeaderMenuPortal>
+      );
+
+      unmount();
+
+      expect(setHeaderActionMenu).toHaveBeenCalledWith(undefined);
+    });
+  });
+});
diff --git a/x-pack/plugins/observability/public/components/shared/header_menu_portal.tsx b/x-pack/plugins/observability/public/components/shared/header_menu_portal.tsx
@@ -15,17 +15,14 @@ export default function HeaderMenuPortal({ children, setHeaderActionMenu }: Head
   const portalNode = useMemo(() => createPortalNode(), []);
 
   useEffect(() => {
-    let unmount = () => {};
-
     setHeaderActionMenu((element) => {
       const mount = toMountPoint(<OutPortal node={portalNode} />);
-      unmount = mount(element);
-      return unmount;
+      return mount(element);
     });
 
     return () => {
       portalNode.unmount();
-      unmount();
+      setHeaderActionMenu(undefined);
     };
   }, [portalNode, setHeaderActionMenu]);
 
diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts.stories.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts.stories.tsx
@@ -11,7 +11,10 @@ import { IntlProvider } from 'react-intl';
 import { MemoryRouter } from 'react-router-dom';
 import { AlertsPage } from '.';
 import { HttpSetup } from '../../../../../../src/core/public';
-import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+import {
+  KibanaContextProvider,
+  KibanaPageTemplate,
+} from '../../../../../../src/plugins/kibana_react/public';
 import { PluginContext, PluginContextValue } from '../../context/plugin_context';
 import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
 import { createCallObservabilityApi } from '../../services/call_observability_api';
@@ -63,6 +66,7 @@ export default {
                       http: { basePath: { prepend: (_: string) => '' } },
                     },
                     observabilityRuleTypeRegistry: createObservabilityRuleTypeRegistryMock(),
+                    ObservabilityPageTemplate: KibanaPageTemplate,
                   } as unknown) as PluginContextValue
                 }
               >
