import { i18n } from '@osd/i18n' ; import React from 'react' ; import useObservable from 'react-use/lib/useObservable' ; import { Observable } from 'rxjs' ; import Url from 'url' ; import { ChromeNavLink } from '../..' ; import { CustomLogo } from './branding/opensearch_dashboards_custom_logo' ; import { ChromeBranding } from '../../chrome_service' ; import './header_logo.scss' ; function findClosestAnchor ( element ) { let current = element ; while ( current ) { if ( current . tagName === 'A' ) { return current as HTMLAnchorElement ; } if ( ! current . parentElement || current . parentElement === document . body ) { return undefined ; } current = current . parentElement ; } } function onClick ( event , forceNavigation , navLinks , navigateToApp ) { const anchor = findClosestAnchor ( ( event as any ) . nativeEvent . target ) ; if ( ! anchor ) { return ; } const navLink = navLinks . find ( ( item ) => item . href === anchor . href ) ; if ( navLink && navLink . disabled ) { event . preventDefault ( ) ; return ; } if ( event . isDefaultPrevented ( ) || event . altKey || event . metaKey || event . ctrlKey ) { return ; } if ( forceNavigation ) { const toParsed = Url . parse ( anchor . href ) ; const fromParsed = Url . parse ( document . location . href ) ; const sameProto = toParsed . protocol === fromParsed . protocol ; const sameHost = toParsed . host === fromParsed . host ; const samePath = toParsed . path === fromParsed . path ; if ( sameProto && sameHost && samePath ) { if ( toParsed . hash ) { document . location . reload ( ) ; } event . stopPropagation ( ) ; } } else { navigateToApp ( 'home' ) ; event . preventDefault ( ) ; } } interface Props { href : string ; navLinks$ : Observable < ChromeNavLink [ ] > ; forceNavigation$ : Observable < boolean > ; navigateToApp : ( appId : string ) => void ; branding : ChromeBranding ; } export function HeaderLogo ( { href , navigateToApp , branding , ... observables } ) { const forceNavigation = useObservable ( observables . forceNavigation$ , false ) ; const navLinks = useObservable ( observables . navLinks$ , [ ] ) ; return ( < a data - test - subj = "logo" onClick = { ( e ) => onClick ( e , forceNavigation , navLinks , navigateToApp ) } href = { href } aria - label = { i18n . translate ( 'core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel' , { defaultMessage : 'Go to home page' , } ) } className = "logoContainer" > < CustomLogo { ... branding } / > < /a>); }