import { EuiIcon , EuiListGroupItemProps } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React from 'react' ; import { ChromeNavLink , ChromeRecentlyAccessedHistoryItem , CoreStart } from '../../..' ; import { HttpStart } from '../../../http' ; import { InternalApplicationStart } from '../../../application/types' ; import { relativeToAbsolute } from '../../nav_links/to_nav_link' ; export const isModifiedOrPrevented = ( event ) => event . metaKey || event . altKey || event . ctrlKey || event . shiftKey || event . defaultPrevented ; interface Props { link : ChromeNavLink ; appId ? : string ; basePath ? : HttpStart [ 'basePath' ] ; dataTestSubj ? : string ; onClick ? : Function ; navigateToUrl : CoreStart [ 'application' ] [ 'navigateToUrl' ] ; externalLink ? : boolean ; iconProps ? : EuiListGroupItemProps [ 'iconProps' ] ; } export function createEuiListItem ( { link , appId , basePath , onClick = ( ) => { } , navigateToUrl , dataTestSubj , externalLink = false , iconProps , } ) { const { href , id , title , disabled , euiIconType , icon , tooltip , url } = link ; return { label : tooltip ?? title , href , onClick ( event ) { if ( ! isModifiedOrPrevented ( event ) ) { onClick ( ) ; } if ( ! externalLink && event . button === 0 && ! isModifiedOrPrevented ( event ) ) { event . preventDefault ( ) ; navigateToUrl ( url ) ; } } , isActive : ! externalLink && appId === id , isDisabled : disabled , 'data-test-subj' : dataTestSubj , ... ( basePath && { iconType : euiIconType , iconProps , icon : ! euiIconType && icon ? < EuiIcon type = { basePath . prepend ( `/${ icon }` ) } size = "m" / > : undefined , } ) , } ; } export function createEuiButtonItem ( { link , onClick = ( ) => { } , navigateToUrl , dataTestSubj , } ) { const { href , disabled , url , id } = link ; return { href , onClick ( event ) { if ( ! isModifiedOrPrevented ( event ) ) { onClick ( ) ; } event . preventDefault ( ) ; navigateToUrl ( url ) ; } , isDisabled : disabled , dataTestSubj : `collapsibleNavAppButton-${ id }` , } ; } export function createOverviewLink ( { link , onClick = ( ) => { } , navigateToUrl , } ) { const { href , url } = link ; return { href , onClick ( event ) { event . stopPropagation ( ) ; if ( ! isModifiedOrPrevented ( event ) ) { onClick ( ) ; } event . preventDefault ( ) ; navigateToUrl ( url ) ; } , 'data-test-subj' : `collapsibleNavAppLink-overview` , } ; } export interface RecentNavLink { href : string ; label : string ; title : string ; 'aria-label' : string ; iconType ? : string ; onClick : React . MouseEventHandler ; } param recentLink param navLinks param basePath export function createRecentNavLink ( recentLink , navLinks , basePath , navigateToUrl ) { const { link , label } = recentLink ; const href = relativeToAbsolute ( basePath . prepend ( link ) ) ; const navLink = navLinks . find ( ( nl ) => href . startsWith ( nl . baseUrl ) ) ; let titleAndAriaLabel = label ; if ( navLink ) { titleAndAriaLabel = i18n . translate ( 'core.ui.recentLinks.linkItem.screenReaderLabel' , { defaultMessage : '{recentlyAccessedItemLinklabel}, type: {pageType}' , values : { recentlyAccessedItemLinklabel : label , pageType : navLink . title , } , } ) ; } return { href , label , title : titleAndAriaLabel , 'aria-label' : titleAndAriaLabel , iconType : navLink ?. euiIconType , onClick ( event ) { if ( event . button === 0 && ! isModifiedOrPrevented ( event ) ) { event . preventDefault ( ) ; navigateToUrl ( href ) ; } } , } ; }