import React , { FC } from 'react' ; import { EuiButtonEmpty , EuiFlexGroup , EuiFlexItem , EuiIcon , EuiTitle , IconType , } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import { CoreStart } from 'opensearch-dashboards/public' ; import { RedirectAppLinks } from '../../app_links' ; import { useOpenSearchDashboards } from '../../context' ; import { ReactPluginBranding } from '../..' ; import './index.scss' ; interface Props { hideToolbar ? : boolean ; iconType ? : IconType ; overlap ? : boolean ; showDevToolsLink ? : boolean ; showManagementLink ? : boolean ; title : JSX . Element | string ; addBasePath : ( path : string ) => string ; branding : ReactPluginBranding ; } export const OverviewPageHeader = ( { hideToolbar , iconType , overlap , showDevToolsLink , showManagementLink , title , addBasePath , branding , } ) => { const { services : { application } , } = useOpenSearchDashboards < CoreStart > ( ) ; const { management : isManagementEnabled , dev_tools : isDevToolsEnabled , } = application . capabilities . navLinks ; const DEFAULT_OPENSEARCH_MARK = `${ branding . assetFolderUrl }/opensearch_mark_default_mode.svg` ; const DARKMODE_OPENSEARCH_MARK = `${ branding . assetFolderUrl }/opensearch_mark_dark_mode.svg` ; const darkMode = branding . darkMode ; const markDefault = branding . mark ?. defaultUrl ; const markDarkMode = branding . mark ?. darkModeUrl ; returns const customOverviewLogoDefaultMode = ( ) => { return markDefault ?? DEFAULT_OPENSEARCH_MARK ; } ; returns const customOverviewLogoDarkMode = ( ) => { return markDarkMode ?? markDefault ?? DARKMODE_OPENSEARCH_MARK ; } ; returns const customOverviewLogo = ( ) => { return darkMode ? customOverviewLogoDarkMode ( ) : customOverviewLogoDefaultMode ( ) ; } ; returns const renderBrandingEnabledOrDisabledLogo = ( iconTypeInput ? ) => { return customOverviewLogo ( ) ?? iconTypeInput ?? '' ; } ; return ( < header className = { `osdOverviewPageHeader ${ overlap ? 'osdOverviewPageHeader--hasOverlap' : 'osdOverviewPageHeader--noOverlap' }` } > < div className = "osdOverviewPageHeader__inner" > < EuiFlexGroup > < EuiFlexItem > < EuiFlexGroup gutterSize = "m" responsive = { false } > { iconType && ( < EuiFlexItem grow = { false } > < EuiIcon size = "xxl" type = { renderBrandingEnabledOrDisabledLogo ( iconType ) } data - test - subj = { `osdOverviewPageHeaderLogo` } data - test - logo = { renderBrandingEnabledOrDisabledLogo ( iconType ) } /> < /EuiFlexItem>)} < EuiFlexItem > < EuiTitle size = "m" > < h1 id = "osdOverviewPageHeader__title" > { title } < /h1> < /EuiTitle> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlexItem> { ! hideToolbar && ( < EuiFlexItem grow = { false } > < EuiFlexGroup className = "osdOverviewPageHeader__actions" responsive = { false } wrap > < EuiFlexItem className = "osdOverviewPageHeader__actionItem" grow = { false } > < RedirectAppLinks application = { application } > < EuiButtonEmpty className = "osdOverviewPageHeader__actionButton" flush = "both" href = { addBasePath ( '/app/home#/tutorial_directory' ) } iconType = "indexOpen" > { i18n . translate ( 'opensearch-dashboards-react.osdOverviewPageHeader.addDataButtonLabel' , { defaultMessage : 'Add data' , } ) } < /EuiButtonEmpty> < /RedirectAppLinks> < /EuiFlexItem> { showManagementLink && isManagementEnabled ? ( < EuiFlexItem className = "osdOverviewPageHeader__actionItem" grow = { false } > < RedirectAppLinks application = { application } > < EuiButtonEmpty className = "osdOverviewPageHeader__actionButton" flush = "both" iconType = "gear" href = { addBasePath ( '/app/management' ) } > { i18n . translate ( 'opensearch-dashboards-react.osdOverviewPageHeader.stackManagementButtonLabel' , { defaultMessage : 'Manage' , } ) } < /EuiButtonEmpty> < /RedirectAppLinks> < /EuiFlexItem>) : null} { showDevToolsLink && isDevToolsEnabled ? ( < EuiFlexItem className = "osdOverviewPageHeader__actionItem" grow = { false } > < RedirectAppLinks application = { application } > < EuiButtonEmpty className = "osdOverviewPageHeader__actionButton" flush = "both" iconType = "wrench" href = { addBasePath ( '/app/dev_tools#/console' ) } > { i18n . translate ( 'opensearch-dashboards-react.osdOverviewPageHeader.devToolsButtonLabel' , { defaultMessage : 'Dev tools' , } ) } < /EuiButtonEmpty> < /RedirectAppLinks> < /EuiFlexItem>) : null} < /EuiFlexGroup> < /EuiFlexItem>)} < /EuiFlexGroup> < /div> < /header>); } ;