add theme$ to integrations header portal

elastic · Jan 5, 2022 · ef66867 · ef66867
1 parent 265a031
commit ef66867
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
@@ -76,7 +76,7 @@ export const IntegrationsAppContext: React.FC<{
                             <Router history={history}>
                               <AgentPolicyContextProvider>
                                 <PackageInstallProvider notifications={startServices.notifications}>
-                                  <IntegrationsHeader {...{ setHeaderActionMenu }} />
+                                  <IntegrationsHeader {...{ setHeaderActionMenu, theme$ }} />
                                   {children}
                                 </PackageInstallProvider>
                               </AgentPolicyContextProvider>

diff --git a/x-pack/plugins/fleet/public/applications/integrations/components/header/header.tsx b/x-pack/plugins/fleet/public/applications/integrations/components/header/header.tsx
@@ -15,11 +15,13 @@ import { DeploymentDetails } from './deployment_details';
 
 export const IntegrationsHeader = ({
   setHeaderActionMenu,
+  theme$,
 }: {
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
 }) => {
   return (
-    <HeaderPortal {...{ setHeaderActionMenu }}>
+    <HeaderPortal {...{ setHeaderActionMenu, theme$ }}>
       <EuiHeaderSection grow={false}>
         <EuiHeaderSectionItem>
           <EuiHeaderLinks>

diff --git a/x-pack/plugins/fleet/public/applications/integrations/components/header/header_portal.tsx b/x-pack/plugins/fleet/public/applications/integrations/components/header/header_portal.tsx
@@ -14,22 +14,23 @@ import { toMountPoint } from '../../../../../../../../src/plugins/kibana_react/p
 
 export interface Props {
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
 }
 
-export const HeaderPortal: FC<Props> = ({ children, setHeaderActionMenu }) => {
+export const HeaderPortal: FC<Props> = ({ children, setHeaderActionMenu, theme$ }) => {
   const portalNode = useMemo(() => createPortalNode(), []);
 
   useEffect(() => {
     setHeaderActionMenu((element) => {
-      const mount = toMountPoint(<OutPortal node={portalNode} />);
+      const mount = toMountPoint(<OutPortal node={portalNode} />, { theme$ });
       return mount(element);
     });
 
     return () => {
       portalNode.unmount();
       setHeaderActionMenu(undefined);
     };
-  }, [portalNode, setHeaderActionMenu]);
+  }, [portalNode, setHeaderActionMenu, theme$]);
 
   return <InPortal node={portalNode}>{children}</InPortal>;
 };