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(, { theme$ });
+ const mount = toMountPoint(, {
+ ...{ 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 {children};
}
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": [