From 1576787860885a5786400c0db5c67320c48fe148 Mon Sep 17 00:00:00 2001
From: maxiadlovskii <maksym.yadlovskyi@graylog.com>
Date: Thu, 22 Feb 2024 13:37:30 +0100
Subject: [PATCH] Prevent starting the search before the current search is
 finished (#18341)

* Add loading state on search execute

* revert changes in FetchProvider.ts
---
 .../src/views/components/DashboardSearchBar.tsx             | 6 ++++--
 graylog2-web-interface/src/views/components/SearchBar.tsx   | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/graylog2-web-interface/src/views/components/DashboardSearchBar.tsx b/graylog2-web-interface/src/views/components/DashboardSearchBar.tsx
index c501c4247010..97164d38bb0e 100644
--- a/graylog2-web-interface/src/views/components/DashboardSearchBar.tsx
+++ b/graylog2-web-interface/src/views/components/DashboardSearchBar.tsx
@@ -61,6 +61,7 @@ import type { TimeRange } from 'views/logic/queries/Query';
 import QueryHistoryButton from 'views/components/searchbar/QueryHistoryButton';
 import type { Editor } from 'views/components/searchbar/queryinput/ace-types';
 import useView from 'views/hooks/useView';
+import useIsLoading from 'views/hooks/useIsLoading';
 
 import TimeRangeFilter from './searchbar/time-range-filter';
 import type { DashboardFormValues } from './DashboardSearchBarForm';
@@ -125,6 +126,7 @@ const DashboardSearchBar = () => {
 
   const { parameters } = useParameters();
   const initialValues = useInitialFormValues(timerange, queryString);
+  const isLoadingExecution = useIsLoading();
 
   if (!config) {
     return <Spinner />;
@@ -142,7 +144,7 @@ const DashboardSearchBar = () => {
                                  onSubmit={submitForm}
                                  validateQueryString={(values) => _validateQueryString(values, pluggableSearchBarControls, userTimezone, handlerContext)}>
               {({ dirty, errors, isSubmitting, isValid, isValidating, handleSubmit, values, setFieldValue, validateForm }) => {
-                const disableSearchSubmit = isSubmitting || isValidating || !isValid;
+                const disableSearchSubmit = isSubmitting || isValidating || !isValid || isLoadingExecution;
 
                 return (
                   <SearchBarContainer>
@@ -160,7 +162,7 @@ const DashboardSearchBar = () => {
                       <SearchButtonAndQuery>
                         <SearchButton disabled={disableSearchSubmit}
                                       glyph="filter"
-                                      displaySpinner={isSubmitting}
+                                      displaySpinner={isSubmitting || isLoadingExecution}
                                       dirty={dirty} />
                         <SearchInputAndValidationContainer>
                           <Field name="queryString">
diff --git a/graylog2-web-interface/src/views/components/SearchBar.tsx b/graylog2-web-interface/src/views/components/SearchBar.tsx
index 680f20f0f573..a2471747609a 100644
--- a/graylog2-web-interface/src/views/components/SearchBar.tsx
+++ b/graylog2-web-interface/src/views/components/SearchBar.tsx
@@ -68,6 +68,7 @@ import { updateQuery } from 'views/logic/slices/viewSlice';
 import useHandlerContext from 'views/components/useHandlerContext';
 import QueryHistoryButton from 'views/components/searchbar/QueryHistoryButton';
 import type { Editor } from 'views/components/searchbar/queryinput/ace-types';
+import useIsLoading from 'views/hooks/useIsLoading';
 
 import SearchBarForm from './searchbar/SearchBarForm';
 
@@ -152,6 +153,7 @@ const SearchBar = ({ onSubmit = defaultProps.onSubmit }: Props) => {
   const _onSubmit = useCallback((values: SearchBarFormValues) => onSubmit(dispatch, values, pluggableSearchBarControls, currentQuery),
     [currentQuery, dispatch, onSubmit, pluggableSearchBarControls]);
   const handlerContext = useHandlerContext();
+  const isLoadingExecution = useIsLoading();
 
   if (!currentQuery || !config) {
     return <Spinner />;
@@ -180,7 +182,7 @@ const SearchBar = ({ onSubmit = defaultProps.onSubmit }: Props) => {
                 setFieldValue,
                 validateForm,
               }) => {
-                const disableSearchSubmit = isSubmitting || isValidating || !isValid;
+                const disableSearchSubmit = isSubmitting || isValidating || !isValid || isLoadingExecution;
 
                 return (
                   <>
@@ -212,7 +214,7 @@ const SearchBar = ({ onSubmit = defaultProps.onSubmit }: Props) => {
                         <SearchButtonAndQuery>
                           <SearchButton disabled={disableSearchSubmit}
                                         dirty={dirty}
-                                        displaySpinner={isSubmitting} />
+                                        displaySpinner={isSubmitting || isLoadingExecution} />
                           <SearchInputAndValidationContainer>
                             <Field name="queryString">
                               {({ field: { name, value, onChange }, meta: { error } }) => (