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": [