import React , { useState } from 'react' ; import useDebounce from 'react-use/lib/useDebounce' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { i18n } from '@kbn/i18n' ; import { SearchFilterConfig } from '@elastic/eui/src/components/search_bar/search_filters' ; import { SchemaType } from '@elastic/eui/src/components/search_bar/search_box' ; import { EuiSearchBarOnChangeArgs } from '@elastic/eui/src/components/search_bar/search_bar' ; import { EuiButton , EuiCallOut , EuiSearchBar , EuiSpacer , Query } from '@elastic/eui' ; import { SnapshotDeleteProvider } from '../../../../components' ; import { SnapshotDetails } from '../../../../../../common/types' ; import { getQueryFromListParams , SnapshotListParams , getListParams } from '../../../../lib' ; const SEARCH_DEBOUNCE_VALUE_MS = 200 ; const onlyOneClauseMessage = i18n . translate ( 'xpack.snapshotRestore.snapshotList.searchBar.onlyOneClauseMessage' , { defaultMessage : 'You can only use one clause in the search bar' , } ) ; const searchSchema = { strict : true , fields : { snapshot : { type : 'string' , } , repository : { type : 'string' , } , policyName : { type : 'string' , } , } , } ; interface Props { listParams : SnapshotListParams ; setListParams : ( listParams : SnapshotListParams ) => void ; reload : ( ) => void ; selectedItems : SnapshotDetails [ ] ; onSnapshotDeleted : ( snapshotsDeleted : Array < { snapshot : string ; repository : string ; } > ) => void ; repositories : string [ ] ; } export const SnapshotSearchBar = ( { listParams , setListParams , reload , selectedItems , onSnapshotDeleted , repositories , } ) => { const [ cachedListParams , setCachedListParams ] = useState < SnapshotListParams > ( listParams ) ; useDebounce ( ( ) => { setListParams ( cachedListParams ) ; } , SEARCH_DEBOUNCE_VALUE_MS , [ cachedListParams ] ) ; const deleteButton = selectedItems . length ? ( < SnapshotDeleteProvider > { ( deleteSnapshotPrompt ) => { return ( < EuiButton onClick = { ( ) => deleteSnapshotPrompt ( selectedItems . map ( ( { snapshot , repository } ) => ( { snapshot , repository } ) ) , onSnapshotDeleted ) } color = "danger" data - test - subj = "srSnapshotListBulkDeleteActionButton" > < FormattedMessage id = "xpack.snapshotRestore.snapshotList.table.deleteSnapshotButton" defaultMessage = "Delete {count, plural, one {snapshot} other {snapshots}}" values = { { count : selectedItems . length , } } /> < /EuiButton>); } } < /SnapshotDeleteProvider>) : ([]); const searchFilters = [ { type : 'field_value_selection' as const , field : 'repository' , name : i18n . translate ( 'xpack.snapshotRestore.snapshotList.table.repositoryFilterLabel' , { defaultMessage : 'Repository' , } ) , operator : 'exact' , multiSelect : false , options : repositories . map ( ( repository ) => ( { value : repository , view : repository , } ) ) , } , ] ; const reloadButton = ( < EuiButton color = "success" iconType = "refresh" onClick = { reload } data - test - subj = "reloadButton" > < FormattedMessage id = "xpack.snapshotRestore.snapshotList.table.reloadSnapshotsButton" defaultMessage = "Reload" / > < /EuiButton>); const [ query , setQuery ] = useState < Query > ( getQueryFromListParams ( listParams ) ) ; const [ error , setError ] = useState < Error | null > ( null ) ; const onSearchBarChange = ( args ) => { const { query : changedQuery , error : queryError } = args ; if ( queryError ) { setError ( queryError ) ; } else if ( changedQuery ) { setError ( null ) ; setQuery ( changedQuery ) ; if ( changedQuery . ast . clauses . length > 1 ) { setError ( { name : onlyOneClauseMessage , message : onlyOneClauseMessage } ) ; } else { setCachedListParams ( getListParams ( listParams , changedQuery ) ) ; } } } ; return ( < > < EuiSearchBar filters = { searchFilters } query = { query } onChange = { onSearchBarChange } toolsLeft = { deleteButton } toolsRight = { reloadButton } box = { { schema : searchSchema , incremental : true , 'data-test-subj' : 'snapshotListSearch' } } /> < EuiSpacer / > { error ? ( < > < EuiCallOut data - test - subj = "snapshotListSearchError" iconType = "alert" color = "danger" title = { < FormattedMessage id = "xpack.snapshotRestore.snapshotList.searchBar.invalidSearchMessage" defaultMessage = "Invalid search: {errorMessage}" values = { { errorMessage : error . message , } } />}/ > < EuiSpacer /> < />) : null} < />); } ;