Make log and history pages respect user settings

apps/bublik/src/pages/log-page/log-page.tsx

@@ -1,12 +1,14 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { Navigate, useSearchParams } from 'react-router-dom';
 
 import { LogPageMode } from '@/shared/types';
 import { usePrefetchLogPage, usePrefetchRun } from '@/services/bublik-api';
 import { CardHeader, RunModeToggle } from '@/shared/tailwind-ui';
 import { LogFeature, useLogPage } from '@/bublik/features/log';
 import { RunDetailsContainer } from '@/bublik/features/run-details';
+import { useUserPreferences } from '@/bublik/features/user-preferences';
 
 export interface LogHeaderProps {
 	runId: string;
@@ -30,8 +32,31 @@ const LogHeader = ({ runId }: LogHeaderProps) => {
 	);
 };
 
+export const useExperimentalLogRedirect = () => {
+	const [searchParams] = useSearchParams();
+	const { userPreferences } = useUserPreferences();
+
+	const shouldRedirect =
+		searchParams.get('experimental') === 'true'
+			? false
+			: userPreferences.log.makeExperimentalModeDefault &&
+			  !searchParams.get('experimental')
+			? true
+			: false;
+
+	const redirectLocation = useMemo(() => {
+		const nextParams = new URLSearchParams(searchParams);
+		nextParams.set('experimental', 'true');
+
+		return { search: nextParams.toString() };
+	}, [searchParams]);
+
+	return { shouldRedirect, location: redirectLocation };
+};
+
 export const LogPage = () => {
 	const { runId, mode } = useLogPage();
+	const { location, shouldRedirect } = useExperimentalLogRedirect();
 
 	usePrefetchLogPage({ runId });
 	usePrefetchRun({ runId });
@@ -44,6 +69,8 @@ export const LogPage = () => {
 
 	if (!runId) return <div>No Run ID!</div>;
 
+	if (shouldRedirect) return <Navigate to={location} />;
+
 	return (
 		<div className="flex h-screen gap-1 p-2 overflow-y-hidden">
 			<LogFeature runId={runId} isTreeShown={isTreeShown}>

libs/bublik/features/log/src/lib/containers/link-to-history/link-to-history.tsx

@@ -10,6 +10,7 @@ import {
 	useGetHistoryLinkDefaultsQuery,
 	useGetRunDetailsQuery
 } from '@/services/bublik-api';
+import { useUserPreferences } from '@/bublik/features/user-preferences';
 
 import { LinkToHistory } from '../../components';
 
@@ -27,6 +28,7 @@ export const LinkToHistoryContainer: FC<LinkToHistoryContainerProps> = ({
 			node: !state.data || !focusId ? undefined : state.data.tree[focusId]
 		})
 	});
+	const { userPreferences } = useUserPreferences();
 
 	const isTest = node?.entity === 'test';
 	const nodeId = node?.id;
@@ -41,8 +43,11 @@ export const LinkToHistoryContainer: FC<LinkToHistoryContainerProps> = ({
 
 		const query = buildQuery({ result: data, runDetails });
 
-		return `/history${stringifySearch(query)}`;
-	}, [data, runDetails]);
+		const search = new URLSearchParams(stringifySearch(query));
+		search.set('mode', userPreferences.history.defaultMode);
+
+		return `/history?${search.toString()}`;
+	}, [data, runDetails, userPreferences.history.defaultMode]);
 
 	return (
 		<LinkToHistory to={to} isError={isError || !data} isLoading={isFetching} />

libs/bublik/features/measurements/src/lib/containers/measurement-statistics/link-to-history.tsx

@@ -1,6 +1,6 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
-import { FC, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { stringifySearch } from '@/router';
 
@@ -10,24 +10,28 @@ import {
 } from '@/services/bublik-api';
 import { buildQuery } from '@/shared/utils';
 import { ButtonTw, Icon } from '@/shared/tailwind-ui';
+import { useUserPreferences } from '@/bublik/features/user-preferences';
 
 export interface LinkToHistoryProps {
 	runId: string;
 	resultId: string;
 }
 
-export const LinkToHistory: FC<LinkToHistoryProps> = ({ runId, resultId }) => {
+export const LinkToHistory = ({ runId, resultId }: LinkToHistoryProps) => {
 	const { data, isFetching, isError } =
 		useGetHistoryLinkDefaultsQuery(resultId);
 	const { data: runDetails } = useGetRunDetailsQuery(runId);
+	const { userPreferences } = useUserPreferences();
 
 	const query = useMemo<string>(() => {
 		if (!data || !runDetails) return '';
 
 		const query = buildQuery({ result: data, runDetails });
+		const search = new URLSearchParams(stringifySearch(query));
+		search.set('mode', userPreferences.history.defaultMode);
 
-		return stringifySearch(query);
-	}, [data, runDetails]);
+		return search.toString();
+	}, [data, runDetails, userPreferences.history.defaultMode]);
 
 	const to = { pathname: `/history`, search: query };
 

libs/bublik/features/result-links/src/lib/link-to-history/link-to-history.tsx

@@ -4,17 +4,22 @@ import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { getHistorySearch } from '@/shared/utils';
-import { DetailsAPIResponse, RunDataResults } from '@/shared/types';
+import {
+	DetailsAPIResponse,
+	HistoryMode,
+	RunDataResults
+} from '@/shared/types';
 import { ContextLinks, ContextLinksSection, Icon } from '@/shared/tailwind-ui';
 
 export interface LinkToHistoryProps {
 	result: RunDataResults;
 	runDetails: DetailsAPIResponse;
+	userPreferredHistoryMode?: HistoryMode;
 }
 
 export const LinkToHistory = (props: LinkToHistoryProps) => {
-	const { runDetails, result } = props;
-	const search = getHistorySearch(runDetails, result);
+	const { runDetails, result, userPreferredHistoryMode = 'linear' } = props;
+	const search = getHistorySearch(runDetails, result, userPreferredHistoryMode);
 	const prefilled = { pathname: '/history', search: search.prefilled };
 
 	const sections = useMemo<ContextLinksSection[]>(

libs/bublik/features/result-links/src/lib/result-links.container.tsx

@@ -3,10 +3,15 @@
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
 
-import { DetailsAPIResponse, RunDataResults } from '@/shared/types';
+import {
+	DetailsAPIResponse,
+	HistoryMode,
+	RunDataResults
+} from '@/shared/types';
 import { useGetRunDetailsQuery, usePrefetch } from '@/services/bublik-api';
 import { routes } from '@/router';
 import { Icon } from '@/shared/tailwind-ui';
+import { useUserPreferences } from '@/bublik/features/user-preferences';
 
 import { LinkToHistory } from './link-to-history';
 
@@ -15,6 +20,7 @@ export interface ResultLinksProps {
 	resultId: number;
 	result: RunDataResults;
 	runInfo: DetailsAPIResponse;
+	userPreferredHistoryMode?: HistoryMode;
 	hasMeasurements?: boolean;
 	onMeasurementLinkMouseEnter?: () => void;
 	onLogLinkMouseEnter?: () => void;
@@ -27,6 +33,7 @@ export const ResultLinks = (props: ResultLinksProps) => {
 		hasMeasurements,
 		result,
 		runInfo,
+		userPreferredHistoryMode = 'linear',
 		onLogLinkMouseEnter,
 		onMeasurementLinkMouseEnter
 	} = props;
@@ -45,7 +52,11 @@ export const ResultLinks = (props: ResultLinksProps) => {
 					</Link>
 				</li>
 				<li className="pl-2">
-					<LinkToHistory result={result} runDetails={runInfo} />
+					<LinkToHistory
+						result={result}
+						runDetails={runInfo}
+						userPreferredHistoryMode={userPreferredHistoryMode}
+					/>
 				</li>
 				{hasMeasurements && (
 					<li className="pl-2">
@@ -77,6 +88,7 @@ export const ResultLinksContainer: FC<ActionLinksProps> = ({
 }) => {
 	const { has_measurements: hasMeasurements } = result;
 	const { data: runInfo } = useGetRunDetailsQuery(runId);
+	const { userPreferences } = useUserPreferences();
 
 	const prefetchLogURL = usePrefetch('getLogUrlByResultId');
 	const prefetchHistory = usePrefetch('getHistoryLinkDefaults');
@@ -101,6 +113,7 @@ export const ResultLinksContainer: FC<ActionLinksProps> = ({
 			runId={runId}
 			runInfo={runInfo}
 			result={result}
+			userPreferredHistoryMode={userPreferences.history.defaultMode}
 			hasMeasurements={hasMeasurements}
 			onLogLinkMouseEnter={handleLogLinkMouseEnter}
 			onMeasurementLinkMouseEnter={handleMeasurementLinkMouseEnter}

libs/shared/utils/src/lib/router.ts

@@ -6,6 +6,7 @@ import {
 	DetailsAPIResponse,
 	HistoryAPIQuery,
 	HistoryDefaultResultAPIResponse,
+	HistoryMode,
 	HistorySearchParams,
 	RESULT_PROPERTIES,
 	RUN_PROPERTIES,
@@ -170,7 +171,8 @@ const byIterationWithAllTags = (
 
 export const getHistorySearch = (
 	runDetails: DetailsAPIResponse,
-	resultInfo: RunDataResults
+	resultInfo: RunDataResults,
+	userPreferredHistoryMode: HistoryMode
 ): HistorySearch => {
 	const { relevant_tags, important_tags } = runDetails;
 	const important = important_tags;
@@ -192,11 +194,20 @@ export const getHistorySearch = (
 		runDetails.finish
 	);
 
-	return {
+	const searchObj = {
 		prefilled: stringifySearch(prefilled).concat('&fromRun=true'),
 		byTestName: stringifySearch(testName),
 		byIteration: stringifySearch(iteration),
 		byIterationWithImportant: stringifySearch(iterationWithImportant),
 		byIterationWithAllTags: stringifySearch(iterationWithAllTags)
 	};
+
+	return Object.fromEntries(
+		Object.entries(searchObj).map(([key, search]) => {
+			const searchParams = new URLSearchParams(search);
+			searchParams.set('mode', userPreferredHistoryMode);
+
+			return [key, searchParams.toString()];
+		})
+	) as unknown as HistorySearch;
 };