From ba31c76f31336e27a4fef5db7edb646ae27333d2 Mon Sep 17 00:00:00 2001
From: Panagiota Mitsopoulou <panagiota.mitsopoulou@elastic.co>
Date: Thu, 28 Sep 2023 07:22:51 +0200
Subject: [PATCH] [AO] use toMountPoint from react-kibana-mount for header menu
 portal (#167126)

Fixes https://github.com/elastic/kibana/issues/164366

### Acceptance Criteria
- use `toMountPoint` from `@kbn/react-kibana-mount` for
[kibana/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu_portal.tsx](https://github.com/elastic/kibana/blob/fcf838e1f389cae6fcaeb9f7bce713123a01c939/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu_portal.tsx#L10)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../components/header_menu/header_menu_portal.tsx     | 11 +++++++----
 x-pack/plugins/observability/tsconfig.json            |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu_portal.tsx b/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu_portal.tsx
index e6359e8c5c743..bdd14979f69b3 100644
--- a/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu_portal.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu_portal.tsx
@@ -7,9 +7,9 @@
 
 import React, { ReactNode, useEffect, useMemo } from 'react';
 import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
-import { toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import { AppMountParameters } from '@kbn/core/public';
-
+import { useKibana } from '../../../../utils/kibana_react';
 export interface HeaderMenuPortalProps {
   children: ReactNode;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
@@ -22,11 +22,14 @@ export default function HeaderMenuPortal({
   setHeaderActionMenu,
   theme$,
 }: HeaderMenuPortalProps) {
+  const { i18n } = useKibana().services;
   const portalNode = useMemo(() => createHtmlPortalNode(), []);
 
   useEffect(() => {
     setHeaderActionMenu((element) => {
-      const mount = toMountPoint(<OutPortal node={portalNode} />, { theme$ });
+      const mount = toMountPoint(<OutPortal node={portalNode} />, {
+        ...{ theme: { theme$ }, i18n },
+      });
       return mount(element);
     });
 
@@ -34,7 +37,7 @@ export default function HeaderMenuPortal({
       portalNode.unmount();
       setHeaderActionMenu(undefined);
     };
-  }, [portalNode, setHeaderActionMenu, theme$]);
+  }, [portalNode, setHeaderActionMenu, i18n, theme$]);
 
   return <InPortal node={portalNode}>{children}</InPortal>;
 }
diff --git a/x-pack/plugins/observability/tsconfig.json b/x-pack/plugins/observability/tsconfig.json
index 74a54afe8b53b..2b7a9e0749650 100644
--- a/x-pack/plugins/observability/tsconfig.json
+++ b/x-pack/plugins/observability/tsconfig.json
@@ -87,6 +87,7 @@
     "@kbn/aiops-plugin",
     "@kbn/content-management-plugin",
     "@kbn/deeplinks-observability",
+    "@kbn/react-kibana-mount",
     "@kbn/react-kibana-context-theme"
   ],
   "exclude": [