import React , { useCallback } from 'react' ; import uuid from 'uuid' ; import { EuiSpacer , EuiTitle , EuiButton , EuiText } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { AnnotationRow } from './annotation_row' ; import { collectionActions , CollectionActionsProps } from './lib/collection_actions' ; import type { Panel , Annotation } from '../../../common/types' ; import type { VisFields } from '../lib/fetch_fields' ; interface AnnotationsEditorProps { fields : VisFields ; model : Panel ; onChange : ( partialModel : Partial < Panel > ) => void ; } export const newAnnotation = ( ) => ( { id : uuid . v1 ( ) , color : '#F00' , index_pattern : '' , time_field : '' , icon : 'fa-tag' , ignore_global_filters : 1 , ignore_panel_filters : 1 , } ) ; const NoContent = ( { handleAdd } ) => ( < EuiText textAlign = "center" > < p > < FormattedMessage id = "visTypeTimeseries.annotationsEditor.howToCreateAnnotationDataSourceDescription" defaultMessage = "Click the button below to create an annotation data source." / > < /p> < EuiButton fill onClick = { handleAdd } data - test - subj = "addDataSourceButton" > < FormattedMessage id = "visTypeTimeseries.annotationsEditor.addDataSourceButtonLabel" defaultMessage = "Add data source" / > < /EuiButton> < /EuiText>); const getCollectionActionsProps = ( props ) => ( { name : 'annotations' , ... props , } as CollectionActionsProps < Panel > ) ; export const AnnotationsEditor = ( props ) => { const { annotations } = props . model ; const handleAdd = useCallback ( ( ) => collectionActions . handleAdd ( getCollectionActionsProps ( props ) , newAnnotation ) , [ props ] ) ; const handleDelete = useCallback ( ( annotation ) => ( ) => collectionActions . handleDelete ( getCollectionActionsProps ( props ) , annotation ) , [ props ] ) ; const onChange = useCallback ( ( annotation ) => { return ( part ) => collectionActions . handleChange ( getCollectionActionsProps ( props ) , { ... annotation , ... part , } ) ; } , [ props ] ) ; return ( < div className = "tvbAnnotationsEditor__container" > { annotations ?. length ? ( < div > < EuiTitle size = "s" > < span > < FormattedMessage id = "visTypeTimeseries.annotationsEditor.dataSourcesLabel" defaultMessage = "Data sources" / > < /span> < /EuiTitle> < EuiSpacer size = "m" / > { annotations . map ( ( annotation ) => ( < AnnotationRow key = { annotation . id } annotation = { annotation } fields = { props . fields } onChange = { onChange ( annotation ) } handleAdd = { handleAdd } handleDelete = { handleDelete ( annotation ) } / > ) ) } < /div>) : (<NoContent handleAdd={handleAdd}/ > ) } < /div>); } ;