import React , { FC } from 'react' ; import { EuiCode , EuiInputPopover } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { QueryStringInput } from '../../../../../../../../../src/plugins/data/public' ; import { SearchItems } from '../../../../hooks/use_search_items' ; import { StepDefineFormHook , QUERY_LANGUAGE_KUERY } from '../step_define' ; interface SourceSearchBarProps { indexPattern : SearchItems [ 'indexPattern' ] ; searchBar : StepDefineFormHook [ 'searchBar' ] ; } export const SourceSearchBar = ( { indexPattern , searchBar } ) => { const { actions : { searchChangeHandler , searchSubmitHandler , setErrorMessage } , state : { errorMessage , searchInput } , } = searchBar ; return ( < EuiInputPopover style = { { maxWidth : '100%' } } closePopover = { ( ) => setErrorMessage ( undefined ) } input = { < QueryStringInput bubbleSubmitEvent = { true } query = { searchInput } indexPatterns = { [ indexPattern ] } onChange = { searchChangeHandler } onSubmit = { searchSubmitHandler } placeholder = { searchInput . language === QUERY_LANGUAGE_KUERY ? i18n . translate ( 'xpack.transform.stepDefineForm.queryPlaceholderKql' , { defaultMessage : 'e.g. {example}' , values : { example : 'method : "GET" or status : "404"' } , } ) : i18n . translate ( 'xpack.transform.stepDefineForm.queryPlaceholderLucene' , { defaultMessage : 'e.g. {example}' , values : { example : 'method:GET OR status:404' } , } ) } disableAutoFocus = { true } dataTestSubj = "transformQueryInput" languageSwitcherPopoverAnchorPosition = "rightDown" / > } isOpen = { errorMessage ?. query === searchInput . query && errorMessage ?. message !== '' } > < EuiCode > { i18n . translate ( 'xpack.transform.stepDefineForm.invalidKuerySyntaxErrorMessageQueryBar' , { defaultMessage : 'Invalid query: {errorMessage}' , values : { errorMessage : errorMessage ?. message . split ( '\n' ) [ 0 ] , } , } ) } < /EuiCode> < /EuiInputPopover>); } ;