import { EuiFormRow } from '@elastic/eui' ; import { InjectedIntl , injectI18n } from '@osd/i18n/react' ; import { uniq } from 'lodash' ; import React from 'react' ; import { GenericComboBox , GenericComboBoxProps } from './generic_combo_box' ; import { PhraseSuggestorUI , PhraseSuggestorProps } from './phrase_suggestor' ; import { withOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public' ; interface Props extends PhraseSuggestorProps { values ? : string [ ] ; onChange : ( values : string [ ] ) => void ; intl : InjectedIntl ; } class PhrasesValuesInputUI extends PhraseSuggestorUI < Props > { public render ( ) { const { suggestions } = this . state ; const { values , intl , onChange } = this . props ; const options = values ? uniq ( [ ... values , ... suggestions ] ) : suggestions ; return ( < EuiFormRow fullWidth = { true } label = { intl . formatMessage ( { id : 'data.filter.filterEditor.valuesSelectLabel' , defaultMessage : 'Values' , } ) } > < StringComboBox placeholder = { intl . formatMessage ( { id : 'data.filter.filterEditor.valuesSelectPlaceholder' , defaultMessage : 'Select values' , } ) } fullWidth = { true } options = { options } getLabel = { ( option ) => option } selectedOptions = { values || [ ] } onSearchChange = { this . onSearchChange } onCreateOption = { ( option ) => onChange ( [ ... ( values || [ ] ) , option ] ) } onChange = { onChange } isClearable = { false } data - test - subj = "filterParamsComboBox phrasesParamsComboxBox" / > < /EuiFormRow>); } } function StringComboBox ( props ) { return GenericComboBox ( props ) ; } export const PhrasesValuesInput = injectI18n ( withOpenSearchDashboards ( PhrasesValuesInputUI ) ) ;