import { EuiHeaderBreadcrumbs } from '@elastic/eui' ; import classNames from 'classnames' ; import React from 'react' ; import useObservable from 'react-use/lib/useObservable' ; import { Observable } from 'rxjs' ; import { ChromeBreadcrumb } from '../../chrome_service' ; interface Props { appTitle$ : Observable < string > ; breadcrumbs$ : Observable < ChromeBreadcrumb [ ] > ; } export function HeaderBreadcrumbs ( { appTitle$ , breadcrumbs$ } ) { const appTitle = useObservable ( appTitle$ , 'OpenSearch Dashboards' ) ; const breadcrumbs = useObservable ( breadcrumbs$ , [ ] ) ; let crumbs = breadcrumbs ; if ( breadcrumbs . length === 0 && appTitle ) { crumbs = [ { text : appTitle } ] ; } crumbs = crumbs . map ( ( breadcrumb , i ) => ( { ... breadcrumb , 'data-test-subj' : classNames ( 'breadcrumb' , breadcrumb [ 'data-test-subj' ] , i === 0 && 'first' , i === breadcrumbs . length - 1 && 'last' ) , } ) ) ; return < EuiHeaderBreadcrumbs breadcrumbs = { crumbs } max = { 10 } data - test - subj = "breadcrumbs" / > ; }