import { i18n } from '@kbn/i18n' ; import { ChromeBreadcrumb } from 'kibana/public' ; import { MouseEvent , useEffect } from 'react' ; import { useKibana } from '../utils/kibana_react' ; import { useQueryParams } from './use_query_params' ; function addClickHandlers ( breadcrumbs , navigateToHref ? ) { return breadcrumbs . map ( ( bc ) => ( { ... bc , ... ( bc . href ? { onClick : ( event ) => { if ( navigateToHref && bc . href ) { event . preventDefault ( ) ; navigateToHref ( bc . href ) ; } } , } : { } ) , } ) ) ; } function getTitleFromBreadCrumbs ( breadcrumbs ) { return breadcrumbs . map ( ( { text } ) => text ?. toString ( ) ?? '' ) . reverse ( ) ; } export const useBreadcrumbs = ( extraCrumbs , app ? ) => { const params = useQueryParams ( ) ; const { services : { chrome : { docTitle , setBreadcrumbs } , application : { getUrlForApp , navigateToUrl } , } , } = useKibana ( ) ; const setTitle = docTitle . change ; const appPath = getUrlForApp ( app ?. id ?? 'observability-overview' ) ?? '' ; useEffect ( ( ) => { const breadcrumbs = [ { text : app ?. label ?? i18n . translate ( 'xpack.observability.breadcrumbs.observabilityLinkText' , { defaultMessage : 'Observability' , } ) , href : appPath + '/overview' , } , ... extraCrumbs , ] ; if ( setBreadcrumbs ) { setBreadcrumbs ( addClickHandlers ( breadcrumbs , navigateToUrl ) ) ; } if ( setTitle ) { setTitle ( getTitleFromBreadCrumbs ( breadcrumbs ) ) ; } } , [ app ?. label , appPath , extraCrumbs , navigateToUrl , params , setBreadcrumbs , setTitle ] ) ; } ;