feat(query-builder): drop null params and forward navigate options on redirect

frontend/src/hooks/__tests__/useSafeNavigate.replace.test.tsx

@@ -0,0 +1,32 @@
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { back, getCurrentLocation } from 'lib/router/navigation';
+import { act, AllTheProviders, renderHook, waitFor } from 'tests/test-utils';
+
+// jest.config.ts maps `hooks/useSafeNavigate` to a mock; the `.ts` path loads the real hook.
+const { useSafeNavigate } = jest.requireActual<
+	typeof import('hooks/useSafeNavigate')
+>('hooks/useSafeNavigate.ts');
+
+describe('useSafeNavigate', () => {
+	it('adds a history entry for replace: false even when the target adds params', async () => {
+		const initialSearch = `?${QueryParams.relativeTime}=15m`;
+		const { result } = renderHook(() => useSafeNavigate(), {
+			wrapper: ({ children }): JSX.Element => (
+				<AllTheProviders initialRoute={`${ROUTES.LOGS_EXPLORER}${initialSearch}`}>
+					{children}
+				</AllTheProviders>
+			),
+		});
+
+		act(() => {
+			result.current.safeNavigate(
+				`${ROUTES.LOGS_EXPLORER}?${QueryParams.startTime}=1000`,
+				{ replace: false },
+			);
+		});
+		act(() => back());
+
+		await waitFor(() => expect(getCurrentLocation().search).toBe(initialSearch));
+	});
+});

frontend/src/hooks/useHandleExplorerTabChange.ts

@@ -90,7 +90,7 @@ export const useHandleExplorerTabChange = (): {
 				},
 				redirectToUrl,
 				undefined,
-				newTab,
+				{ newTab },
 			);
 		},
 		[panelType, getUpdateQuery, redirectWithQueryBuilderData, viewKey],

frontend/src/hooks/useSafeNavigate.ts

@@ -140,7 +140,7 @@ export const useSafeNavigate = (
 
 			const navigationOptions = {
 				...options,
-				replace: isDefaultParamsNavigation || options?.replace,
+				replace: options?.replace ?? isDefaultParamsNavigation,
 			};
 
 			if (typeof to === 'string') {

frontend/src/providers/QueryBuilder.tsx

@@ -949,7 +949,7 @@ export function QueryBuilderProvider({
 			searchParams?: Record<string, unknown>,
 			redirectingUrl?: (typeof ROUTES)[keyof typeof ROUTES],
 			shouldNotStringify?: boolean,
-			newTab?: boolean,
+			navigateOptions?: { newTab?: boolean; replace?: boolean },
 		) => {
 			const queryType =
 				!query.queryType || !Object.values(EQueryType).includes(query.queryType)
@@ -1001,14 +1001,18 @@ export function QueryBuilderProvider({
 			);
 
 			if (searchParams) {
-				Object.keys(searchParams).forEach((param) =>
+				Object.keys(searchParams).forEach((param) => {
+					if (searchParams[param] === null) {
+						urlQuery.delete(param);
+						return;
+					}
 					urlQuery.set(
 						param,
 						shouldNotStringify
 							? (searchParams[param] as string)
 							: JSON.stringify(searchParams[param]),
-					),
-				);
+					);
+				});
 			}
 			// Remove Hidden Filters from URL query parameters on query change
 			urlQuery.delete(QueryParams.activeLogId);
@@ -1017,7 +1021,7 @@ export function QueryBuilderProvider({
 				? `${redirectingUrl}?${urlQuery}`
 				: `${location.pathname}?${urlQuery}`;
 
-			safeNavigate(generatedUrl, { newTab });
+			safeNavigate(generatedUrl, navigateOptions);
 		},
 		[location.pathname, safeNavigate],
 	);

frontend/src/providers/__tests__/QueryBuilder.redirectSearchParams.test.tsx

@@ -0,0 +1,53 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { act, AllTheProviders, renderHook } from 'tests/test-utils';
+
+describe('redirectWithQueryBuilderData search params', () => {
+	it('removes params passed as null and JSON-encodes the rest', () => {
+		const { result } = renderHook(() => useQueryBuilder(), {
+			wrapper: ({ children }): JSX.Element => (
+				<AllTheProviders
+					initialRoute={`/unconstrained?${QueryParams.relativeTime}=6h&${QueryParams.viewName}=kept`}
+				>
+					{children}
+				</AllTheProviders>
+			),
+		});
+
+		act(() => {
+			result.current.redirectWithQueryBuilderData(initialQueriesMap.logs, {
+				[QueryParams.relativeTime]: null,
+				[QueryParams.startTime]: 1000,
+			});
+		});
+
+		const [url] = safeNavigateMock.mock.lastCall ?? [];
+		expect(url).toContain(`${QueryParams.startTime}=1000`);
+		expect(url).not.toContain(`${QueryParams.relativeTime}=`);
+		expect(url).toContain(`${QueryParams.viewName}=kept`);
+	});
+
+	it('passes navigate options to safeNavigate', () => {
+		const { result } = renderHook(() => useQueryBuilder(), {
+			wrapper: ({ children }): JSX.Element => (
+				<AllTheProviders initialRoute="/unconstrained">{children}</AllTheProviders>
+			),
+		});
+
+		act(() => {
+			result.current.redirectWithQueryBuilderData(
+				initialQueriesMap.logs,
+				{ [QueryParams.startTime]: 1000 },
+				undefined,
+				undefined,
+				{ replace: false },
+			);
+		});
+
+		expect(safeNavigateMock).toHaveBeenLastCalledWith(expect.any(String), {
+			replace: false,
+		});
+	});
+});

frontend/src/types/common/queryBuilder.ts

@@ -312,7 +312,7 @@ export type QueryBuilderContextType = {
 		searchParams?: Record<string, unknown>,
 		redirectToUrl?: (typeof ROUTES)[keyof typeof ROUTES],
 		shallStringify?: boolean,
-		newTab?: boolean,
+		navigateOptions?: { newTab?: boolean; replace?: boolean },
 	) => void;
 	handleRunQuery: () => void;
 	resetQuery: (newCurrentQuery?: QueryState) => void;