import React , { useState } from 'react' ; import { EuiInMemoryTable , EuiBasicTableColumn , EuiButtonEmpty , EuiSpacer , EuiButton , EuiText , EuiSearchBarProps , } from '@elastic/eui' ; import { txtNameColumnTitle , txtSelectableMessage , txtCopyButtonLabel , txtSingleItemCopyActionLabel , txtActionColumnTitle , txtTriggerColumnTitle , } from './i18n' ; import { TextWithIcon } from '../text_with_icon' ; import { TriggerLineItem } from '../trigger_line_item' ; export interface DrilldownTemplateTableItem { id : string ; name : string ; icon ? : string ; description ? : string ; actionName ? : string ; actionIcon ? : string ; trigger ? : string ; triggerIncompatible ? : boolean ; } export interface DrilldownTemplateTableProps { items : DrilldownTemplateTableItem [ ] ; onCreate ? : ( id : string ) => void ; onClone ? : ( ids : string [ ] ) => void ; } export const DrilldownTemplateTable = ( { items , onCreate , onClone , } ) => { const [ selected , setSelected ] = useState < string [ ] > ( [ ] ) ; const columns = [ { field : 'name' , name : txtNameColumnTitle , sortable : true , render : ( omit , item ) => ( < div style = { { display : 'block' } } > < div style = { { display : 'block' } } > { item . name } < /div> < EuiText size = { 'xs' } color = { 'subdued' } > { item . description } < /EuiText> < /div>), } , { name : txtActionColumnTitle , render : ( item ) => ( < TextWithIcon icon = { item . actionIcon || 'empty' } color = { 'subdued' } > { item . actionName } < /TextWithIcon>), } , { field : 'trigger' , name : txtTriggerColumnTitle , sortable : true , render : ( omit , item ) => ( < TriggerLineItem incompatible = { item . triggerIncompatible } > { item . trigger } < /TriggerLineItem>), } , { align : 'right' , render : ( drilldown ) => ! ! onCreate && ( < EuiButtonEmpty size = "xs" disabled = { ! ! selected . length } onClick = { ( ) => onCreate ( drilldown . id ) } > { txtSingleItemCopyActionLabel } < /EuiButtonEmpty>), } , ] ; const search = { box : { incremental : true , } , defaultQuery : '' , } ; return ( < > < EuiInMemoryTable itemId = "id" tableLayout = { 'auto' } items = { items } columns = { columns } isSelectable = { ! ! onClone } responsive = { false } search = { search } sorting = { { sort : { field : 'nameCol' , direction : 'asc' , } , } } selection = { { onSelectionChange : ( selection ) => { setSelected ( selection . map ( ( drilldown ) => drilldown . id ) ) ; } , selectableMessage : ( ) => txtSelectableMessage , } } hasActions = { true } / > < EuiSpacer /> { ! ! onClone && ! ! selected . length && ( < EuiButton fill onClick = { ( ) => onClone ( selected ) } > { txtCopyButtonLabel ( selected . length ) } < /EuiButton>)} < />); } ;