reverse portal in apm

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

@@ -7,21 +7,8 @@
 import { EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { Router } from 'react-router-dom';
-import {
-  RedirectAppLinks,
-  toMountPoint,
-} from '../../../../../../src/plugins/kibana_react/public';
-import { AlertsContextProvider } from '../../../../triggers_actions_ui/public';
 import { getAlertingCapabilities } from '../../components/alerting/get_alert_capabilities';
 import { getAPMHref } from '../../components/shared/Links/apm/APMLink';
-import {
-  ApmPluginContextValue,
-  ApmPluginContext,
-} from '../../context/ApmPluginContext';
-import { LicenseProvider } from '../../context/LicenseContext';
-import { ServiceNameContext } from '../../context/service_name_context';
-import { UrlParamsProvider } from '../../context/UrlParamsContext';
 import { useApmPluginContext } from '../../hooks/useApmPluginContext';
 import { useServiceName } from '../../hooks/use_service_name';
 import { AlertingPopoverAndFlyout } from './alerting_popover_flyout';
@@ -83,44 +70,3 @@ export function ActionMenu() {
     </EuiHeaderLinks>
   );
 }
-
-/**
- * Get the mount point to set the header menu with the header links.
- *
- * Alerts and ML links require a lot of context so include what we need here.
- */
-export function getActionMenuMountPoint(
-  apmPluginContextValue: ApmPluginContextValue,
-  serviceName?: string
-) {
-  const { appMountParameters, core, plugins } = apmPluginContextValue;
-
-  return toMountPoint(
-    <Router history={appMountParameters.history}>
-      <RedirectAppLinks application={core.application}>
-        <ApmPluginContext.Provider value={apmPluginContextValue}>
-          <UrlParamsProvider>
-            <LicenseProvider>
-              <ServiceNameContext.Provider value={serviceName}>
-                <AlertsContextProvider
-                  value={{
-                    actionTypeRegistry:
-                      plugins.triggersActionsUi.actionTypeRegistry,
-                    alertTypeRegistry:
-                      plugins.triggersActionsUi.alertTypeRegistry,
-                    capabilities: core.application.capabilities,
-                    docLinks: core.docLinks,
-                    http: core.http,
-                    toastNotifications: core.notifications.toasts,
-                  }}
-                >
-                  <ActionMenu />
-                </AlertsContextProvider>
-              </ServiceNameContext.Provider>
-            </LicenseProvider>
-          </UrlParamsProvider>
-        </ApmPluginContext.Provider>
-      </RedirectAppLinks>
-    </Router>
-  );
-}

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

@@ -21,7 +21,6 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
 import { useFetcher } from '../../../hooks/useFetcher';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useActionMenu } from '../../../hooks/use_action_menu';
 import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
 import { ApmHeader } from '../../shared/ApmHeader';
@@ -108,8 +107,6 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
   useTrackPageview({ app: 'apm', path: 'error_group_details' });
   useTrackPageview({ app: 'apm', path: 'error_group_details', delay: 15000 });
 
-  useActionMenu(serviceName);
-
   if (!errorGroupData || !errorDistributionData) {
     return null;
   }

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

@@ -8,7 +8,6 @@ import { EuiTabs, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { $ElementType } from 'utility-types';
-import { useActionMenu } from '../../../hooks/use_action_menu';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { EuiTabLink } from '../../shared/EuiTabLink';
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
@@ -63,8 +62,6 @@ export function Home({ tab }: Props) {
     (homeTab) => homeTab.name === tab
   ) as $ElementType<typeof homeTabs, number>;
 
-  useActionMenu();
-
   return (
     <div>
       <ApmHeader>

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

@@ -7,7 +7,6 @@
 import { EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { useActionMenu } from '../../../hooks/use_action_menu';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { ServiceDetailTabs } from './ServiceDetailTabs';
 
@@ -18,8 +17,6 @@ interface Props extends RouteComponentProps<{ serviceName: string }> {
 export function ServiceDetails({ match, tab }: Props) {
   const { serviceName } = match.params;
 
-  useActionMenu(serviceName);
-
   return (
     <div>
       <ApmHeader>

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

@@ -27,7 +27,6 @@ import { useAgentName } from '../../../hooks/useAgentName';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/useFetcher';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useActionMenu } from '../../../hooks/use_action_menu';
 import { px, truncate, unit } from '../../../style/variables';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { MetricsChart } from '../../shared/charts/MetricsChart';
@@ -55,8 +54,6 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
   const { data } = useServiceMetricCharts(urlParams, agentName);
   const { start, end } = urlParams;
 
-  useActionMenu(serviceName);
-
   const { data: { host, containerId } = INITIAL_DATA, status } = useFetcher(
     (callApmApi) => {
       if (start && end) {

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

@@ -33,10 +33,11 @@ export function Settings({ children, location }: SettingsProps) {
     return getAPMHref({ basePath, path: `/settings${path}`, search });
   }
 
-  useActionMenu();
+  const ActionMenu = useActionMenu();
 
   return (
     <>
+      <ActionMenu />
       <HomeLink>
         <EuiButtonEmpty size="s" color="primary" iconType="arrowLeft">
           {i18n.translate('xpack.apm.settings.returnLinkLabel', {

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

@@ -32,7 +32,6 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { HeightRetainer } from '../../shared/HeightRetainer';
 import { Correlations } from '../Correlations';
-import { useActionMenu } from '../../../hooks/use_action_menu';
 
 interface Sample {
   traceId: string;
@@ -62,8 +61,6 @@ export function TransactionDetails({
   useTrackPageview({ app: 'apm', path: 'transaction_details' });
   useTrackPageview({ app: 'apm', path: 'transaction_details', delay: 15000 });
 
-  useActionMenu(serviceName);
-
   const localUIFiltersConfig = useMemo(() => {
     const config: React.ComponentProps<typeof LocalUIFilters> = {
       filterNames: ['transactionResult', 'serviceVersion'],

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

@@ -6,13 +6,17 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { ReactNode } from 'react';
+import { useActionMenu } from '../../../hooks/use_action_menu';
 import { DatePicker } from '../DatePicker';
 import { EnvironmentFilter } from '../EnvironmentFilter';
 import { KueryBar } from '../KueryBar';
 
 export function ApmHeader({ children }: { children: ReactNode }) {
+  const ActionMenu = useActionMenu();
+
   return (
     <>
+      <ActionMenu />
       <EuiFlexGroup alignItems="center" gutterSize="s" wrap={true}>
         <EuiFlexItem>{children}</EuiFlexItem>
         <EuiFlexItem grow={false}>

x-pack/plugins/apm/public/hooks/use_action_menu.tsx

@@ -4,24 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { unmountComponentAtNode } from 'react-dom';
-import { getActionMenuMountPoint } from '../application/action_menu';
+import { createPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
+import { toMountPoint } from '../../../../../src/plugins/kibana_react/public';
+import { ActionMenu } from '../application/action_menu';
 import { useApmPluginContext } from './useApmPluginContext';
 
-export function useActionMenu(serviceName?: string) {
-  const apmPluginContextValue = useApmPluginContext();
-  const { setHeaderActionMenu } = apmPluginContextValue.appMountParameters;
+export function useActionMenu() {
+  const { setHeaderActionMenu } = useApmPluginContext().appMountParameters;
+  const portalNode = createPortalNode();
 
   useEffect(() => {
     let mountPointElement: HTMLElement;
 
     setHeaderActionMenu((element) => {
       mountPointElement = element;
-      return getActionMenuMountPoint(
-        apmPluginContextValue,
-        serviceName
-      )(element);
+      return toMountPoint(<OutPortal node={portalNode} />)(mountPointElement);
     });
 
     return () => {
@@ -30,4 +29,10 @@ export function useActionMenu(serviceName?: string) {
       }
     };
   });
+
+  return () => (
+    <InPortal node={portalNode}>
+      <ActionMenu />
+    </InPortal>
+  );
 }