import React , { FC , useContext } from 'react' ; import { EuiComboBox , EuiComboBoxOptionOption } from '@elastic/eui' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { Field } from '../../../../../../../../../common/types/fields' ; import { createFieldOptions , createDocCountFieldOption , } from '../../../../../common/job_creator/util/general' ; interface Props { fields : Field [ ] ; changeHandler ( i ) : void ; selectedField : string | null ; } export const SummaryCountFieldSelect = ( { fields , changeHandler , selectedField } ) => { const { jobCreator } = useContext ( JobCreatorContext ) ; const options = [ ... createDocCountFieldOption ( jobCreator . aggregationFields . length > 0 ) , ... createFieldOptions ( fields , jobCreator . additionalFields ) , ] ; const selection = [ ] ; if ( selectedField !== null ) { selection . push ( { label : selectedField } ) ; } function onChange ( selectedOptions ) { const option = selectedOptions [ 0 ] ; if ( typeof option !== 'undefined' ) { changeHandler ( option . label ) ; } else { changeHandler ( null ) ; } } return ( < EuiComboBox singleSelection = { { asPlainText : true } } options = { options } selectedOptions = { selection } onChange = { onChange } isClearable = { true } data - test - subj = "mlSummaryCountFieldNameSelect" / > ) ; } ;