import _ from 'lodash' ; import React , { useEffect , useRef } from 'react' ; import { CoreStart } from 'src/core/public' ; import { IStorageWrapper } from 'src/plugins/opensearch_dashboards_utils/public' ; import { OpenSearchDashboardsContextProvider } from '../../../../opensearch_dashboards_react/public' ; import { QueryStart , SavedQuery } from '../../query' ; import { SearchBar , SearchBarOwnProps } from './' ; import { useFilterManager } from './lib/use_filter_manager' ; import { useTimefilter } from './lib/use_timefilter' ; import { useSavedQuery } from './lib/use_saved_query' ; import { DataPublicPluginStart } from '../../types' ; import { Filter , Query , TimeRange } from '../../../common' ; import { useQueryStringManager } from './lib/use_query_string_manager' ; interface StatefulSearchBarDeps { core : CoreStart ; data : Omit < DataPublicPluginStart , 'ui' > ; storage : IStorageWrapper ; } export type StatefulSearchBarProps = SearchBarOwnProps & { appName : string ; useDefaultBehaviors ? : boolean ; savedQueryId ? : string ; onSavedQueryIdChange ? : ( savedQueryId ? : string ) => void ; } ; const defaultFiltersUpdated = ( queryService ) => { return ( filters ) => { queryService . filterManager . setFilters ( filters ) ; } ; } ; const defaultOnRefreshChange = ( queryService ) => { const { timefilter } = queryService . timefilter ; return ( options ) => { timefilter . setRefreshInterval ( { value : options . refreshInterval , pause : options . isPaused , } ) ; } ; } ; const defaultOnQuerySubmit = ( props , queryService , currentQuery ) => { if ( ! props . useDefaultBehaviors ) return props . onQuerySubmit ; const { timefilter } = queryService . timefilter ; return ( payload ) => { const isUpdate = ! _ . isEqual ( timefilter . getTime ( ) , payload . dateRange ) || ! _ . isEqual ( payload . query , currentQuery ) ; if ( isUpdate ) { timefilter . setTime ( payload . dateRange ) ; if ( payload . query ) { queryService . queryString . setQuery ( payload . query ) ; } else { queryService . queryString . clearQuery ( ) ; } } else { if ( props . onQuerySubmit ) props . onQuerySubmit ( { dateRange : timefilter . getTime ( ) , query : currentQuery , } , false ) ; } } ; } ; const defaultOnClearSavedQuery = ( props , clearSavedQuery ) => { if ( ! props . useDefaultBehaviors ) return props . onClearSavedQuery ; return ( ) => { clearSavedQuery ( ) ; if ( props . onSavedQueryIdChange ) props . onSavedQueryIdChange ( ) ; } ; } ; const defaultOnSavedQueryUpdated = ( props , setSavedQuery ) => { if ( ! props . useDefaultBehaviors ) return props . onSavedQueryUpdated ; return ( savedQuery ) => { setSavedQuery ( savedQuery ) ; if ( props . onSavedQueryIdChange ) props . onSavedQueryIdChange ( savedQuery . id ) ; } ; } ; const overrideDefaultBehaviors = ( props ) => { return props . useDefaultBehaviors ? { } : props ; } ; export function createSearchBar ( { core , storage , data } ) { return ( props ) => { const { useDefaultBehaviors } = props ; const onQuerySubmitRef = useRef ( props . onQuerySubmit ) ; const { filters } = useFilterManager ( { filters : props . filters , filterManager : data . query . filterManager , } ) ; const { query } = useQueryStringManager ( { query : props . query , queryStringManager : data . query . queryString , } ) ; const { timeRange , refreshInterval } = useTimefilter ( { dateRangeFrom : props . dateRangeFrom , dateRangeTo : props . dateRangeTo , refreshInterval : props . refreshInterval , isRefreshPaused : props . isRefreshPaused , timefilter : data . query . timefilter . timefilter , } ) ; const { savedQuery , setSavedQuery , clearSavedQuery } = useSavedQuery ( { queryService : data . query , savedQueryId : props . savedQueryId , notifications : core . notifications , } ) ; useEffect ( ( ) => { if ( ! useDefaultBehaviors || ! onQuerySubmitRef . current ) return ; onQuerySubmitRef . current ( { dateRange : timeRange , query , } , true ) ; } , [ query , timeRange , useDefaultBehaviors ] ) ; return ( < OpenSearchDashboardsContextProvider services = { { appName : props . appName , data , storage , ... core , } } > < SearchBar showAutoRefreshOnly = { props . showAutoRefreshOnly } showDatePicker = { props . showDatePicker } showFilterBar = { props . showFilterBar } showQueryBar = { props . showQueryBar } showQueryInput = { props . showQueryInput } showSaveQuery = { props . showSaveQuery } screenTitle = { props . screenTitle } indexPatterns = { props . indexPatterns } indicateNoData = { props . indicateNoData } timeHistory = { data . query . timefilter . history } dateRangeFrom = { timeRange . from } dateRangeTo = { timeRange . to } refreshInterval = { refreshInterval . value } isRefreshPaused = { refreshInterval . pause } filters = { filters } query = { query } onFiltersUpdated = { defaultFiltersUpdated ( data . query ) } onRefreshChange = { defaultOnRefreshChange ( data . query ) } savedQuery = { savedQuery } onQuerySubmit = { defaultOnQuerySubmit ( props , data . query , query ) } onClearSavedQuery = { defaultOnClearSavedQuery ( props , clearSavedQuery ) } onSavedQueryUpdated = { defaultOnSavedQueryUpdated ( props , setSavedQuery ) } onSaved = { defaultOnSavedQueryUpdated ( props , setSavedQuery ) } { ... overrideDefaultBehaviors ( props ) } /> < /OpenSearchDashboardsContextProvider>); } ; }