Disabling URL synchronization, fixing unnecessary history change.

graylog2-web-interface/src/components/events/bulk-replay/ReplaySearch.tsx

@@ -22,7 +22,8 @@ const ViewReplaySearch = ({ eventData, eventDefinition, aggregations }) => {
       isShown: false,
     },
     infoBar: { component: EventInfoBar },
-  }), []);
+    synchronizeUrl: false,
+  } as const), []);
 
   return (
     <SearchPageLayoutProvider value={searchPageLayout}>

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

@@ -133,9 +133,10 @@ type Props = {
 const Search = ({ forceSideBarPinned = false }: Props) => {
   const dispatch = useAppDispatch();
   const refreshSearch = useCallback(() => dispatch(execute()), [dispatch]);
-  const { sidebar: { isShown: showSidebar }, searchAreaContainer, infoBar } = useSearchPageLayout();
+  const { sidebar: { isShown: showSidebar }, searchAreaContainer, infoBar, synchronizeUrl = true } = useSearchPageLayout();
   const InfoBar = infoBar?.component;
   const SearchAreaContainer = searchAreaContainer?.component;
+  const SynchronizationComponent = synchronizeUrl ? SynchronizeUrl : React.Fragment;
 
   useEffect(() => {
     refreshSearch();
@@ -149,7 +150,7 @@ const Search = ({ forceSideBarPinned = false }: Props) => {
 
   return (
     <>
-      <SynchronizeUrl />
+      <SynchronizationComponent />
       <ExternalValueActionsProvider>
         <SearchExplainContextProvider>
           <WidgetFocusProvider>

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

@@ -16,15 +16,15 @@
  */
 import { useEffect } from 'react';
 
-import type { Location } from 'routing/withLocation';
-import withLocation from 'routing/withLocation';
 import { useSyncWithQueryParameters } from 'views/hooks/SyncWithQueryParameters';
 import bindSearchParamsFromQuery from 'views/hooks/BindSearchParamsFromQuery';
 import type { AppDispatch } from 'stores/useAppDispatch';
 import type { RootState } from 'views/types';
 import { selectView } from 'views/logic/slices/viewSelectors';
 import useAppDispatch from 'stores/useAppDispatch';
 import { selectSearchExecutionState } from 'views/logic/slices/searchExecutionSelectors';
+import useLocation from 'routing/useLocation';
+import useQuery from 'routing/useQuery';
 
 const bindSearchParamsFromQueryThunk = (query: { [key: string]: unknown; }) => (_dispatch: AppDispatch, getState: () => RootState) => {
   const view = selectView(getState());
@@ -41,17 +41,13 @@ const useBindSearchParamsFromQuery = (query: { [key: string]: unknown }) => {
   }, [query]);
 };
 
-type Props = {
-  location: Location,
-};
-
-const SynchronizeUrl = ({ location }: Props) => {
-  const { pathname, search } = location;
-  const query = `${pathname}${search}`;
-  useBindSearchParamsFromQuery(location.query);
-  useSyncWithQueryParameters(query);
+const SynchronizeUrl = () => {
+  const { pathname, search } = useLocation();
+  const query = useQuery();
+  useBindSearchParamsFromQuery(query);
+  useSyncWithQueryParameters(`${pathname}${search}`);
 
   return null;
 };
 
-export default withLocation(SynchronizeUrl);
+export default SynchronizeUrl;

graylog2-web-interface/src/views/components/contexts/DashboardPageContextProvider.tsx

@@ -59,8 +59,11 @@ const useCleanupQueryParams = ({ uriParams, query, navigate }) => {
   useEffect(() => {
     if (uriParams?.page === undefined) {
       const baseURI = _clearURI(query);
+      const newQuery = baseURI.toString();
 
-      navigate(baseURI.toString(), { replace: true });
+      if (query !== newQuery) {
+        navigate(newQuery, { replace: true });
+      }
     }
   }, [query, navigate, uriParams?.page]);
 };

graylog2-web-interface/src/views/components/contexts/SearchPageLayoutContext.tsx

@@ -41,8 +41,9 @@ export type LayoutState = {
     share: { isShown: boolean },
     actionsDropdown: { isShown: boolean },
   },
-  searchAreaContainer?: { component: React.ComponentType }
-  infoBar?: { component: React.ComponentType }
+  searchAreaContainer?: { component: React.ComponentType },
+  infoBar?: { component: React.ComponentType },
+  synchronizeUrl: boolean,
 }
 
 export const DEFAULT_STATE: LayoutState = {
@@ -53,6 +54,7 @@ export const DEFAULT_STATE: LayoutState = {
     share: { isShown: true },
     actionsDropdown: { isShown: true },
   },
+  synchronizeUrl: true,
 };
 
 const SearchPageLayoutContext = React.createContext<LayoutState>(DEFAULT_STATE);

graylog2-web-interface/src/views/components/contexts/WidgetFocusProvider.tsx

@@ -125,8 +125,11 @@ const useCleanupQueryParams = ({ focusUriParams, widgetIds, query, history }: Cl
   useEffect(() => {
     if ((focusUriParams?.id && !widgetIds.includes(focusUriParams.id) && focusUriParams.isPageShown) || (focusUriParams?.id === undefined)) {
       const baseURI = _clearURI(query);
+      const newQuery = baseURI.toString();
 
-      history.replace(baseURI.toString());
+      if (query !== newQuery) {
+        history.replace(newQuery);
+      }
     }
   }, [focusUriParams, widgetIds, query, history]);
 };

graylog2-web-interface/src/views/pages/BulkEventReplayPage.tsx

@@ -24,7 +24,7 @@ const BulkEventReplayPage = () => {
   const history = useHistory();
   const onClose = useCallback(() => {
     history.push(Routes.ALERTS.LIST);
-  }, []);
+  }, [history]);
 
   return isInitialLoading
     ? <Spinner />