import React , { FC } from 'react' ; import useObservable from 'react-use/lib/useObservable' ; import { Observable } from 'rxjs' ; import { ChromeUserBanner } from '../../types' ; import { HeaderExtension } from './header_extension' ; export interface HeaderTopBannerProps { headerBanner$ : Observable < ChromeUserBanner | undefined > ; } export const HeaderTopBanner = ( { headerBanner$ } ) => { const headerBanner = useObservable ( headerBanner$ , undefined ) ; if ( ! headerBanner ) { return null ; } return ( < div className = "header__topBanner" data - test - subj = "headerTopBanner" > < HeaderExtension containerClassName = "header__topBannerContainer" display = "block" extension = { headerBanner . content } / > < /div>); } ;