import React , { useCallback , useState , useEffect } from 'react' ; import { EuiComboBox , EuiComboBoxProps } from '@elastic/eui' ; import { getDataStart } from '../../../../services' ; import { SwitchModePopover } from './switch_mode_popover' ; import type { SelectIndexComponentProps } from './types' ; import type { IndexPatternValue } from '../../../../../common/types' ; import type { IndexPatternsService } from '../../../../../../../data/public' ; internal type IdsWithTitle = Awaited < ReturnType < IndexPatternsService [ 'getIdsWithTitle' ] > > ; internal type SelectedOptions = EuiComboBoxProps < string > [ 'selectedOptions' ] ; const toComboBoxOptions = ( options ) => options . map ( ( { title , id } ) => ( { label : title , id } ) ) ; export const ComboBoxSelect = ( { fetchedIndex , onIndexChange , onModeChange , disabled , placeholder , allowSwitchMode , 'data-test-subj' : dataTestSubj , } ) => { const [ availableIndexes , setAvailableIndexes ] = useState < IdsWithTitle > ( [ ] ) ; const [ selectedOptions , setSelectedOptions ] = useState < SelectedOptions > ( [ ] ) ; const onComboBoxChange = useCallback ( ( [ selected ] ) => { onIndexChange ( selected ? { id : selected . id } : '' ) ; } , [ onIndexChange ] ) ; useEffect ( ( ) => { let options = [ ] ; const { indexPattern , indexPatternString } = fetchedIndex ; if ( indexPattern || indexPatternString ) { if ( ! indexPattern ) { options = [ { label : indexPatternString ?? '' } ] ; } else { options = [ { id : indexPattern . id , label : indexPattern . title , } , ] ; } } setSelectedOptions ( options ) ; } , [ fetchedIndex ] ) ; useEffect ( ( ) => { async function fetchIndexes ( ) { setAvailableIndexes ( await getDataStart ( ) . indexPatterns . getIdsWithTitle ( ) ) ; } fetchIndexes ( ) ; } , [ ] ) ; return ( < EuiComboBox singleSelection = { { asPlainText : true } } onChange = { onComboBoxChange } options = { toComboBoxOptions ( availableIndexes ) } selectedOptions = { selectedOptions } isDisabled = { disabled } placeholder = { placeholder } data - test - subj = { dataTestSubj } { ... ( allowSwitchMode && { append : ( < SwitchModePopover onModeChange = { onModeChange } fetchedIndex = { fetchedIndex } useKibanaIndices = { true } / > ) , } ) } />); } ;