import React , { useEffect , useRef } from 'react' ; import { EuiComboBoxOptionOption } from '@elastic/eui' ; import { ComboBoxField , FieldHook } from '../../../../../../../shared_imports' ; import { useGlobalFields } from '../../../../form' ; interface PropsRepositoryCombobox { field : FieldHook ; isLoading : boolean ; repos : string [ ] ; noSuggestions : boolean ; globalRepository : string ; } export const RepositoryComboBoxField = ( { field , isLoading , repos , noSuggestions , globalRepository , } ) => { const isMounted = useRef ( false ) ; const { setValue } = field ; const { searchableSnapshotRepo : { setValue : setSearchableSnapshotRepository } , } = useGlobalFields ( ) ; useEffect ( ( ) => { if ( isMounted . current ) { setValue ( Boolean ( globalRepository . trim ( ) ) ? [ globalRepository ] : [ ] ) ; } isMounted . current = true ; } , [ setValue , globalRepository ] ) ; return ( < ComboBoxField field = { field } fullWidth = { false } euiFieldProps = { { 'data-test-subj' : 'searchableSnapshotCombobox' , options : repos . map ( ( repo ) => ( { label : repo , value : repo } ) ) , singleSelection : { asPlainText : true } , isLoading , noSuggestions , onCreateOption : ( newOption ) => { setSearchableSnapshotRepository ( newOption ) ; } , onChange : ( options ) => { if ( options . length > 0 ) { setSearchableSnapshotRepository ( options [ 0 ] . label ) ; } else { setSearchableSnapshotRepository ( '' ) ; } } , } } />); } ;