[Uptime] Increase debounce and add immediate submit to useQueryBar (#…

…99675) (#100072) * Increase debounce and add immediate submit to `useQueryBar`. * Reduce debounce to 800ms. Co-authored-by: Justin Kambic <justin.kambic@elastic.co>
elastic · May 13, 2021 · 8d9110f · 8d9110f
1 parent 08a4812
commit 8d9110f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 19 deletions.
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
@@ -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<string>(query.query);
+  const [inputVal, setInputVal] = useState<string>(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
@@ -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<React.SetStateAction<Query>>;
+  /**
+   * 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<UptimePluginServices>();
 
-  const [query, setQuery] = useState(
+  const [query, setQuery] = useState<Query>(
     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 };
 };