import { i18n } from '@osd/i18n' ; import { EuiContextMenuPanelDescriptor , EuiBadge , EuiIcon , EuiToolTip , EuiScreenReaderOnly , EuiNotificationBadge , } from '@elastic/eui' ; import classNames from 'classnames' ; import React from 'react' ; import { Action } from 'src/plugins/ui_actions/public' ; import { PanelOptionsMenu } from './panel_options_menu' ; import { IEmbeddable } from '../../embeddables' ; import { EmbeddableContext , panelBadgeTrigger , panelNotificationTrigger } from '../../triggers' ; import { uiToReactComponent } from '../../../../../opensearch_dashboards_react/public' ; export interface PanelHeaderProps { title ? : string ; isViewMode : boolean ; hidePanelTitle : boolean ; getActionContextMenuPanel : ( ) => Promise < EuiContextMenuPanelDescriptor [ ] > ; closeContextMenu : boolean ; badges : Array < Action < EmbeddableContext > > ; notifications : Array < Action < EmbeddableContext > > ; embeddable : IEmbeddable ; headerId ? : string ; showPlaceholderTitle ? : boolean ; } function renderBadges ( badges , embeddable ) { return badges . map ( ( badge ) => ( < EuiBadge key = { badge . id } className = "embPanel__headerBadge" iconType = { badge . getIconType ( { embeddable , trigger : panelBadgeTrigger } ) } onClick = { ( ) => badge . execute ( { embeddable , trigger : panelBadgeTrigger } ) } onClickAriaLabel = { badge . getDisplayName ( { embeddable , trigger : panelBadgeTrigger } ) } > { badge . getDisplayName ( { embeddable , trigger : panelBadgeTrigger } ) } < /EuiBadge>)); } function renderNotifications ( notifications , embeddable ) { return notifications . map ( ( notification ) => { const context = { embeddable } ; let badge = notification . MenuItem ? ( React . createElement ( uiToReactComponent ( notification . MenuItem ) ) ) : ( < EuiNotificationBadge data - test - subj = { `embeddablePanelNotification-${ notification . id }` } key = { notification . id } style = { { marginTop : '4px' , marginRight : '4px' } } onClick = { ( ) => notification . execute ( { ... context , trigger : panelNotificationTrigger } ) } > { notification . getDisplayName ( { ... context , trigger : panelNotificationTrigger } ) } < /EuiNotificationBadge>); if ( notification . getDisplayNameTooltip ) { const tooltip = notification . getDisplayNameTooltip ( { ... context , trigger : panelNotificationTrigger , } ) ; if ( tooltip ) { badge = ( < EuiToolTip position = "top" delay = "regular" content = { tooltip } key = { notification . id } > { badge } < /EuiToolTip>); } } return badge ; } ) ; } type EmbeddableWithDescription = IEmbeddable & { getDescription : ( ) => string ; } ; function getViewDescription ( embeddable ) { if ( 'getDescription' in embeddable ) { const description = embeddable . getDescription ( ) ; if ( description ) { return description ; } } return '' ; } export function PanelHeader ( { title , isViewMode , hidePanelTitle , getActionContextMenuPanel , closeContextMenu , badges , notifications , embeddable , headerId , } ) { const description = getViewDescription ( embeddable ) ; const showTitle = ! hidePanelTitle && ( ! isViewMode || title ) ; const showPanelBar = ! isViewMode || badges . length > 0 || notifications . length > 0 || showTitle || description ; const classes = classNames ( 'embPanel__header' , { 'embPanel__header--floater' : ! showPanelBar , } ) ; const placeholderTitle = i18n . translate ( 'embeddableApi.panel.placeholderTitle' , { defaultMessage : '[No Title]' , } ) ; const getAriaLabel = ( ) => { return ( < span id = { headerId } > { showPanelBar && title ? i18n . translate ( 'embeddableApi.panel.enhancedDashboardPanelAriaLabel' , { defaultMessage : 'Dashboard panel: {title}' , values : { title : title || placeholderTitle } , } ) : i18n . translate ( 'embeddableApi.panel.dashboardPanelAriaLabel' , { defaultMessage : 'Dashboard panel' , } ) } < /span>); } ; if ( ! showPanelBar ) { return ( < div className = { classes } > < PanelOptionsMenu getActionContextMenuPanel = { getActionContextMenuPanel } isViewMode = { isViewMode } closeContextMenu = { closeContextMenu } title = { title } / > < EuiScreenReaderOnly > { getAriaLabel ( ) } < /EuiScreenReaderOnly> < /div>); } const renderTitle = ( ) => { const titleComponent = showTitle ? ( < span className = { title ? 'embPanel__titleText' : 'embPanel__placeholderTitleText' } > { title || placeholderTitle } < /span>) : undefined; return description ? ( < EuiToolTip content = { description } delay = "regular" position = "top" anchorClassName = "embPanel__titleTooltipAnchor" > < span className = "embPanel__titleInner" > { titleComponent } < EuiIcon type = "iInCircle" color = "subdued" / > < /span> < /EuiToolTip>) : (<span className="embPanel__titleInner">{titleComponent}</span > ) ; } ; return ( < figcaption className = { classes } data - test - subj = { `embeddablePanelHeading-${ ( title || '' ) . replace ( /\s/g , '' ) }` } > < h2 data - test - subj = "dashboardPanelTitle" className = "embPanel__title embPanel__dragger" > < EuiScreenReaderOnly > { getAriaLabel ( ) } < /EuiScreenReaderOnly> { renderTitle ( ) } { renderBadges ( badges , embeddable ) } < /h2> { renderNotifications ( notifications , embeddable ) } < PanelOptionsMenu isViewMode = { isViewMode } getActionContextMenuPanel = { getActionContextMenuPanel } closeContextMenu = { closeContextMenu } title = { title } / > < /figcaption>); }