diff --git a/x-pack/plugins/uptime/public/components/overview/query_bar/query_bar.tsx b/x-pack/plugins/uptime/public/components/overview/query_bar/query_bar.tsx index 0543e5868bb9e..9436f420f7740 100644 --- a/x-pack/plugins/uptime/public/components/overview/query_bar/query_bar.tsx +++ b/x-pack/plugins/uptime/public/components/overview/query_bar/query_bar.tsx @@ -34,11 +34,11 @@ export const isValidKuery = (query: string) => { export const QueryBar = () => { const { search: urlValue } = useGetUrlParams(); - const { query, setQuery } = useQueryBar(); + const { query, setQuery, submitImmediately } = useQueryBar(); const { index_pattern: indexPattern } = useIndexPattern(); - const [inputVal, setInputVal] = useState(query.query); + const [inputVal, setInputVal] = useState(query.query as string); const isInValid = () => { if (query.language === SyntaxType.text) { @@ -66,6 +66,7 @@ export const QueryBar = () => { }} onSubmit={(queryN) => { if (queryN) setQuery({ query: queryN.query as string, language: queryN.language }); + submitImmediately(); }} query={{ ...query, query: inputVal }} aria-label={i18n.translate('xpack.uptime.filterBar.ariaLabel', { diff --git a/x-pack/plugins/uptime/public/components/overview/query_bar/use_query_bar.ts b/x-pack/plugins/uptime/public/components/overview/query_bar/use_query_bar.ts index 0d8a2ee17994a..164231bfdd89b 100644 --- a/x-pack/plugins/uptime/public/components/overview/query_bar/use_query_bar.ts +++ b/x-pack/plugins/uptime/public/components/overview/query_bar/use_query_bar.ts @@ -5,9 +5,10 @@ * 2.0. */ -import { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { useDebounce } from 'react-use'; import { useDispatch } from 'react-redux'; +import { Query } from 'src/plugins/data/common'; import { useGetUrlParams, useUpdateKueryString, useUrlParams } from '../../../hooks'; import { setEsKueryString } from '../../../state/actions'; import { useIndexPattern } from './use_index_pattern'; @@ -20,7 +21,26 @@ export enum SyntaxType { } const SYNTAX_STORAGE = 'uptime:queryBarSyntax'; -export const useQueryBar = () => { +const DEFAULT_QUERY_UPDATE_DEBOUNCE_INTERVAL = 800; + +interface UseQueryBarUtils { + // The Query object used by the search bar + query: Query; + // Update the Query object + setQuery: React.Dispatch>; + /** + * By default the search bar uses a debounce to delay submitting input; + * this function will cancel the debounce and submit immediately. + */ + submitImmediately: () => void; +} + +/** + * Provides state management and automatic dispatching of a Query object. + * + * @returns {UseQueryBarUtils} + */ +export const useQueryBar = (): UseQueryBarUtils => { const dispatch = useDispatch(); const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams(); @@ -30,7 +50,7 @@ export const useQueryBar = () => { services: { storage }, } = useKibana(); - const [query, setQuery] = useState( + const [query, setQuery] = useState( queryParam ? { query: queryParam, @@ -59,23 +79,37 @@ export const useQueryBar = () => { [dispatch] ); - useEffect(() => { - setEsKueryFilters(esFilters ?? ''); - }, [esFilters, setEsKueryFilters]); + const setEs = useCallback(() => setEsKueryFilters(esFilters ?? ''), [ + esFilters, + setEsKueryFilters, + ]); + const [, cancelEsKueryUpdate] = useDebounce(setEs, DEFAULT_QUERY_UPDATE_DEBOUNCE_INTERVAL, [ + esFilters, + setEsKueryFilters, + ]); - useDebounce( - () => { - if (query.language === SyntaxType.text && queryParam !== query.query) { - updateUrlParams({ query: query.query as string }); - } - if (query.language === SyntaxType.kuery) { - updateUrlParams({ query: '' }); - } - }, - 350, + const handleQueryUpdate = useCallback(() => { + if (query.language === SyntaxType.text && queryParam !== query.query) { + updateUrlParams({ query: query.query as string }); + } + if (query.language === SyntaxType.kuery) { + updateUrlParams({ query: '' }); + } + }, [query.language, query.query, queryParam, updateUrlParams]); + + const [, cancelQueryUpdate] = useDebounce( + handleQueryUpdate, + DEFAULT_QUERY_UPDATE_DEBOUNCE_INTERVAL, [query] ); + const submitImmediately = useCallback(() => { + cancelQueryUpdate(); + cancelEsKueryUpdate(); + handleQueryUpdate(); + setEs(); + }, [cancelEsKueryUpdate, cancelQueryUpdate, handleQueryUpdate, setEs]); + useDebounce( () => { if (query.language === SyntaxType.kuery && !error && esFilters) { @@ -92,5 +126,5 @@ export const useQueryBar = () => { [esFilters, error] ); - return { query, setQuery }; + return { query, setQuery, submitImmediately }; };