Fix browser navigation not restoring the previous search. (#24538)

* Properly notmalize empty query string. This fixes an error where going back to a search qithout a query string, did not update the view.

* Properly update view and execute new search when URL query oparams change. For example when using the browser navigation.

* Avoid executing search twice when using browser navigation.

* Properly update browser history when creating a new search.

* Ignore order of query params when comparing Uris.

* Rever change that caused query input to be empty on replay search page.

* Udpate tests

* Extend tests

* Improve tests

* Adding changelog

Author: linuspahl

changelog/unreleased/issue-22105.toml

@@ -0,0 +1,5 @@
+type = "f"
+message = "Fix browser navigation not restoring the previous search"
+
+issues = ["22105", "18484"]
+pulls = ["24583"]

graylog2-web-interface/src/views/components/Search.test.tsx

@@ -30,7 +30,7 @@ import mockSearchesClusterConfig from 'fixtures/searchClusterConfig';
 
 import OriginalSearch from './Search';
 
-import { useSyncWithQueryParameters } from '../hooks/SyncWithQueryParameters';
+import useSyncWithQueryParameters from '../hooks/useSyncWithQueryParameters';
 
 jest.mock('views/logic/fieldtypes/useFieldTypes');
 
@@ -49,7 +49,7 @@ jest.mock('views/components/DashboardSearchBar', () => () => (
   </button>
 ));
 
-jest.mock('views/hooks/SyncWithQueryParameters');
+jest.mock('views/hooks/useSyncWithQueryParameters');
 
 jest.mock('routing/withLocation', () => (Component) => (props) => (
   <Component location={{ query: {}, pathname: '', search: '' }} {...props} />

graylog2-web-interface/src/views/components/SynchronizeUrl.tsx

@@ -16,21 +16,33 @@
  */
 import { useEffect } from 'react';
 
-import { useSyncWithQueryParameters } from 'views/hooks/SyncWithQueryParameters';
+import useSyncWithQueryParameters from 'views/hooks/useSyncWithQueryParameters';
 import bindSearchParamsFromQuery from 'views/hooks/BindSearchParamsFromQuery';
 import type { ViewsDispatch } from 'views/stores/useViewsDispatch';
+import useViewsDispatch from 'views/stores/useViewsDispatch';
 import type { RootState } from 'views/types';
 import { selectView } from 'views/logic/slices/viewSelectors';
-import useViewsDispatch from 'views/stores/useViewsDispatch';
 import { selectSearchExecutionState } from 'views/logic/slices/searchExecutionSelectors';
 import useLocation from 'routing/useLocation';
 import useQuery from 'routing/useQuery';
+import { updateView } from 'views/logic/slices/viewSlice';
 
 const bindSearchParamsFromQueryThunk =
-  (query: { [key: string]: unknown }) => (_dispatch: ViewsDispatch, getState: () => RootState) => {
+  (query: { [key: string]: unknown }) => async (dispatch: ViewsDispatch, getState: () => RootState) => {
     const view = selectView(getState());
     const executionState = selectSearchExecutionState(getState());
-    bindSearchParamsFromQuery({ view, query, retry: () => Promise.resolve(), executionState });
+
+    const result = await bindSearchParamsFromQuery({ view, query, retry: () => Promise.resolve(), executionState });
+
+    if (!result) {
+      return Promise.resolve();
+    }
+
+    const [newView] = result;
+
+    if (newView !== view) {
+      return dispatch(updateView(newView, true));
+    }
   };
 
 const useBindSearchParamsFromQuery = (query: { [key: string]: unknown }) => {

graylog2-web-interface/src/views/hooks/BindSearchParamsFromQuery.ts

@@ -20,7 +20,6 @@ import isDeepEqual from 'stores/isDeepEqual';
 import type { ViewHook, ViewHookArguments } from 'views/logic/hooks/ViewHook';
 import View from 'views/logic/views/View';
 import normalizeSearchURLQueryParams from 'views/logic/NormalizeSearchURLQueryParams';
-import createSearch from 'views/logic/slices/createSearch';
 
 const bindSearchParamsFromQuery: ViewHook = async ({ query, view, executionState }: ViewHookArguments) => {
   if (view.type !== View.Type.Search) {
@@ -68,11 +67,8 @@ const bindSearchParamsFromQuery: ViewHook = async ({ query, view, executionState
     return [view, executionState];
   }
 
-  const newSearch = view.search.toBuilder().newId().queries([newQuery]).build();
-
-  const savedSearch = await createSearch(newSearch);
-
-  const newView = view.toBuilder().search(savedSearch).build();
+  const newSearch = view.search.toBuilder().queries([newQuery]).build();
+  const newView = view.toBuilder().search(newSearch).build();
 
   return [newView, executionState];
 };