import React , { useEffect , useRef , useState } from 'react' ; import { Observable } from 'rxjs' ; import { OverlayBanner } from './banners_service' ; interface Props { banners$ : Observable < OverlayBanner [ ] > ; } /**
 * BannersList is a list of "banners". A banner something that is displayed at the top of Kibana that may or may not
 * disappear.
 *
 * Whether or not a banner can be closed is completely up to the author of the banner. Some banners make sense to be
 * static, such as banners meant to indicate the sensitivity (e.g., classification) of the information being
 * represented.
 */ export const BannersList = ( { banners$ } ) => { const [ banners , setBanners ] = useState < OverlayBanner [ ] > ( [ ] ) ; useEffect ( ( ) => { const subscription = banners$ . subscribe ( setBanners ) ; return ( ) => subscription . unsubscribe ( ) ; } , [ banners$ ] ) ; if ( banners . length === 0 ) { return null ; } return ( < div className = "kbnGlobalBannerList" > { banners . map ( ( banner ) => ( < BannerItem key = { banner . id } banner = { banner } / > ) ) } < /div>); } ; const BannerItem = ( { banner } ) => { const element = useRef ( null ) ; useEffect ( ( ) => banner . mount ( element . current ! ) , [ banner ] ) ; return ( < div data - test - priority = { banner . priority } className = "kbnGlobalBannerList__item" ref = { element } data - test - subj = "global-banner-item" / > ) ; } ;