[APM] Hoist HeaderMenuPortal to prevent unmounts (#92012)

x-pack/plugins/apm/public/application/index.tsx

@@ -13,6 +13,7 @@ import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import 'react-vis/dist/style.css';
 import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { HeaderMenuPortal } from '../../../observability/public';
 import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
 import { ConfigSchema } from '../';
 import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
@@ -35,13 +36,16 @@ import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
 import { setHelpExtension } from '../setHelpExtension';
 import { setReadonlyBadge } from '../updateBadge';
+import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
+import { ActionMenu } from './action_menu';
 
 const MainContainer = euiStyled.div`
   height: 100%;
 `;
 
 function App() {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
+  const { appMountParameters } = useApmPluginContext();
 
   useBreadcrumbs(routes);
 
@@ -54,6 +58,11 @@ function App() {
       })}
     >
       <MainContainer data-test-subj="apmMainContainer" role="main">
+        <HeaderMenuPortal
+          setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
+        >
+          <ActionMenu />
+        </HeaderMenuPortal>
         <Route component={ScrollToTopOnPathChange} />
         <Switch>
           {routes.map((route, i) => (

x-pack/plugins/apm/public/components/app/Settings/index.tsx

@@ -16,8 +16,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { ReactNode, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { HeaderMenuPortal } from '../../../../../observability/public';
-import { ActionMenu } from '../../../application/action_menu';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 import { HomeLink } from '../../shared/Links/apm/HomeLink';
@@ -27,7 +25,7 @@ interface SettingsProps extends RouteComponentProps<{}> {
 }
 
 export function Settings({ children, location }: SettingsProps) {
-  const { appMountParameters, core } = useApmPluginContext();
+  const { core } = useApmPluginContext();
   const { basePath } = core.http;
   const canAccessML = !!core.application.capabilities.ml?.canAccessML;
   const { search, pathname } = location;
@@ -44,11 +42,6 @@ export function Settings({ children, location }: SettingsProps) {
 
   return (
     <>
-      <HeaderMenuPortal
-        setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
-      >
-        <ActionMenu />
-      </HeaderMenuPortal>
       <EuiPage>
         <EuiPageSideBar>
           <HomeLink>

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

@@ -8,9 +8,6 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
-import { HeaderMenuPortal } from '../../../../../observability/public';
-import { ActionMenu } from '../../../application/action_menu';
-import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { EnvironmentFilter } from '../EnvironmentFilter';
 
 const HeaderFlexGroup = euiStyled(EuiFlexGroup)`
@@ -19,13 +16,8 @@ const HeaderFlexGroup = euiStyled(EuiFlexGroup)`
 `;
 
 export function ApmHeader({ children }: { children: ReactNode }) {
-  const { setHeaderActionMenu } = useApmPluginContext().appMountParameters;
-
   return (
     <HeaderFlexGroup alignItems="center" gutterSize="s" wrap={true}>
-      <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
-        <ActionMenu />
-      </HeaderMenuPortal>
       <EuiFlexItem>{children}</EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EnvironmentFilter />

x-pack/plugins/observability/public/components/shared/index.tsx

@@ -8,17 +8,19 @@
 import React, { lazy, Suspense } from 'react';
 import { CoreVitalProps, HeaderMenuPortalProps } from './types';
 
+const CoreVitalsLazy = lazy(() => import('./core_web_vitals/index'));
+
 export function getCoreVitalsComponent(props: CoreVitalProps) {
-  const CoreVitalsLazy = lazy(() => import('./core_web_vitals/index'));
   return (
     <Suspense fallback={null}>
       <CoreVitalsLazy {...props} />
     </Suspense>
   );
 }
 
+const HeaderMenuPortalLazy = lazy(() => import('./header_menu_portal'));
+
 export function HeaderMenuPortal(props: HeaderMenuPortalProps) {
-  const HeaderMenuPortalLazy = lazy(() => import('./header_menu_portal'));
   return (
     <Suspense fallback={null}>
       <HeaderMenuPortalLazy {...props} />