import React , { ReactElement } from 'react' ; import { EuiHeaderLinks } from '@elastic/eui' ; import classNames from 'classnames' ; import { MountPoint } from '../../../../core/public' ; import { MountPointPortal } from '../../../opensearch_dashboards_react/public' ; import { StatefulSearchBarProps , DataPublicPluginStart , SearchBarProps , } from '../../../data/public' ; import { TopNavMenuData } from './top_nav_menu_data' ; import { TopNavMenuItem } from './top_nav_menu_item' ; export type TopNavMenuProps = StatefulSearchBarProps & Omit < SearchBarProps , 'opensearchDashboards' | 'intl' | 'timeHistory' > & { config ? : TopNavMenuData [ ] ; showSearchBar ? : boolean ; showQueryBar ? : boolean ; showQueryInput ? : boolean ; showDatePicker ? : boolean ; showFilterBar ? : boolean ; data ? : DataPublicPluginStart ; className ? : string ; example setMenuMountPoint ? : ( menuMount : MountPoint | undefined ) => void ; } ; export function TopNavMenu ( props ) { const { config , showSearchBar , ... searchBarProps } = props ; if ( ( ! config || config . length === 0 ) && ( ! showSearchBar || ! props . data ) ) { return null ; } function renderItems ( ) { if ( ! config || config . length === 0 ) return null ; return config . map ( ( menuItem , i ) => { return < TopNavMenuItem key = { `nav-menu-${ i }` } { ... menuItem } />; } ) ; } function renderMenu ( className ) { if ( ! config || config . length === 0 ) return null ; return ( < EuiHeaderLinks data - test - subj = "top-nav" gutterSize = "xs" className = { className } > { renderItems ( ) } < /EuiHeaderLinks>); } function renderSearchBar ( ) { if ( ! showSearchBar || ! props . data ) return null ; const { SearchBar } = props . data . ui ; return < SearchBar { ... searchBarProps } / > ; } function renderLayout ( ) { const { setMenuMountPoint } = props ; const menuClassName = classNames ( 'osdTopNavMenu' , props . className ) ; const wrapperClassName = 'osdTopNavMenu__wrapper' ; if ( setMenuMountPoint ) { return ( < > < MountPointPortal setMountPoint = { setMenuMountPoint } > < span className = { wrapperClassName } > { renderMenu ( menuClassName ) } < /span> < /MountPointPortal> < span className = { wrapperClassName } > { renderSearchBar ( ) } < /span> < />); } else { return ( < span className = { wrapperClassName } > { renderMenu ( menuClassName ) } { renderSearchBar ( ) } < /span>); } } return renderLayout ( ) ; } TopNavMenu . defaultProps = { showSearchBar : false , showQueryBar : true , showQueryInput : true , showDatePicker : true , showFilterBar : true , screenTitle : '' , } ;