feat(14552): Show effective query on search pages

Author: zeeklop

graylog2-web-interface/src/components/common/SearchFiltersFormControls.tsx

@@ -15,7 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React, { useEffect, useMemo } from 'react';
-import { Formik } from 'formik';
+import { Formik, useFormikContext } from 'formik';
 import { OrderedMap } from 'immutable';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -27,9 +27,22 @@ type Props = {
   filters: SearchFilter[];
   onChange: (filters: OrderedMap<string, SearchFilter>) => void;
   hideFiltersPreview?: (val: boolean) => void;
+  queryString?: string;
 };
 
-function SearchFiltersFormControls({ filters, onChange, hideFiltersPreview = () => {} }: Props) {
+// Keeps the isolated Formik's `queryString` field in sync with the manually-entered query
+// living outside this form, without resetting `searchFilters` on every keystroke.
+const SyncQueryString = ({ queryString }: { queryString: string }) => {
+  const { setFieldValue } = useFormikContext();
+
+  useEffect(() => {
+    setFieldValue('queryString', queryString);
+  }, [queryString, setFieldValue]);
+
+  return null;
+};
+
+function SearchFiltersFormControls({ filters, onChange, hideFiltersPreview = () => {}, queryString = '' }: Props) {
   const searchFiltersPlugin = usePluginEntities('eventDefinitions.components.searchForm') ?? [];
   const pluggableControls = searchFiltersPlugin.map((controlFn) => controlFn()).filter((control) => !!control);
 
@@ -41,8 +54,8 @@ function SearchFiltersFormControls({ filters, onChange, hideFiltersPreview = ()
       filters.map((filter) => [filter.id || uuidv4(), { frontendId: filter.id || uuidv4(), ...filter }]),
     );
 
-    return { searchFilters };
-  }, [filters]);
+    return { searchFilters, queryString };
+  }, [filters, queryString]);
 
   if (!pluggableControls.length)
     return <SearchFilterBanner onHide={() => hideFiltersPreview(true)} pluggableControls={pluggableControls} />;
@@ -58,7 +71,10 @@ function SearchFiltersFormControls({ filters, onChange, hideFiltersPreview = ()
 
   return (
     <Formik onSubmit={handleSearchFiltersChange} initialValues={initialFilters}>
-      <SearchFiltersComponent />
+      <>
+        <SyncQueryString queryString={queryString} />
+        <SearchFiltersComponent />
+      </>
     </Formik>
   );
 }

graylog2-web-interface/src/components/event-definitions/event-definition-types/FilterForm.tsx

@@ -572,6 +572,7 @@ const FilterForm = ({ currentUser, eventDefinition, onChange, streams, validatio
               filters={eventDefinition.config.filters}
               onChange={handleSearchFiltersChange}
               hideFiltersPreview={hideFiltersPreview}
+              queryString={currentConfig.query}
             />
           </div>
         </FormGroup>