import React , { FC , ReactNode , useContext , useEffect , useMemo } from 'react' ; import { createPortalNode , InPortal , OutPortal } from 'react-reverse-portal' ; import { KibanaContextProvider , toMountPoint , } from '../../../../../../../src/plugins/kibana_react/public' ; import { useMlKibana } from '../../contexts/kibana' ; import { MlPageControlsContext } from '../ml_page' ; export interface HeaderMenuPortalProps { children : ReactNode ; } export const HeaderMenuPortal = ( { children } ) => { const { services } = useMlKibana ( ) ; const { setHeaderActionMenu } = useContext ( MlPageControlsContext ) ; const portalNode = useMemo ( ( ) => createPortalNode ( ) , [ ] ) ; useEffect ( ( ) => { if ( ! setHeaderActionMenu ) { return ; } setHeaderActionMenu ( ( element ) => { const mount = toMountPoint ( < KibanaContextProvider services = { services } > < OutPortal node = { portalNode } / > < /KibanaContextProvider>, { theme$: services.theme.theme$ }); return mount ( element ) ; } ) ; return ( ) => { portalNode . unmount ( ) ; setHeaderActionMenu ( undefined ) ; } ; } , [ portalNode , setHeaderActionMenu , services . theme . theme$ ] ) ; return < InPortal node = { portalNode } > { children } < /InPortal>; } ;