Feat: log viewer query param

dashboard/src/components/BuildDetails/BuildDetails.tsx

@@ -2,7 +2,12 @@ import { useIntl } from 'react-intl';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useCallback, useMemo, useState, type JSX } from 'react';
 
-import { useParams, type LinkProps } from '@tanstack/react-router';
+import {
+  useNavigate,
+  useParams,
+  useSearch,
+  type LinkProps,
+} from '@tanstack/react-router';
 
 import SectionGroup from '@/components/Section/SectionGroup';
 import type { ISection } from '@/components/Section/Section';
@@ -65,12 +70,19 @@ const BuildDetails = ({
     error: issueError,
   } = useBuildIssues(buildId);
 
+  const { logOpen } = useSearch({ from: '/build/$buildId' });
+  const navigate = useNavigate({ from: '/build/$buildId' });
   const { formatMessage } = useIntl();
 
   const hasUsefulLogInfo = data?.log_url || data?.log_excerpt;
 
   const [sheetType, setSheetType] = useState<SheetType>('log');
   const [jsonContent, setJsonContent] = useState<IJsonContent>();
+  const logOpenChange = useCallback(
+    (isOpen: boolean) =>
+      navigate({ search: s => ({ ...s, logOpen: isOpen }), state: s => s }),
+    [navigate],
+  );
 
   const miscSection: ISection | undefined = useMemo(():
     | ISection
@@ -252,7 +264,7 @@ const BuildDetails = ({
         }
       >
         <ErrorBoundary FallbackComponent={UnexpectedError}>
-          <Sheet>
+          <Sheet open={logOpen} onOpenChange={logOpenChange}>
             {breadcrumb}
 
             <SectionGroup sections={sectionsData} />

dashboard/src/components/TestDetails/TestDetails.tsx

@@ -7,6 +7,7 @@ import type { LinkProps } from '@tanstack/react-router';
 import {
   Link,
   useParams,
+  useNavigate,
   useRouterState,
   useSearch,
 } from '@tanstack/react-router';
@@ -307,6 +308,8 @@ const TestDetails = ({ breadcrumb }: TestsDetailsProps): JSX.Element => {
   const { testId } = useParams({ from: '/test/$testId' });
 
   const { formatMessage } = useIntl();
+  const { logOpen } = useSearch({ from: '/test/$testId' });
+  const navigate = useNavigate({ from: '/test/$testId' });
 
   const { data, isLoading, status, error } = useTestDetails(testId ?? '');
   const {
@@ -317,6 +320,11 @@ const TestDetails = ({ breadcrumb }: TestsDetailsProps): JSX.Element => {
 
   const [sheetType, setSheetType] = useState<SheetType>('log');
   const [jsonContent, setJsonContent] = useState<IJsonContent>();
+  const logOpenChange = useCallback(
+    (isOpen: boolean) =>
+      navigate({ search: s => ({ ...s, logOpen: isOpen }), state: s => s }),
+    [navigate],
+  );
 
   const testDetailsTabTitle: string = useMemo(() => {
     return formatMessage(
@@ -339,7 +347,7 @@ const TestDetails = ({ breadcrumb }: TestsDetailsProps): JSX.Element => {
           />
         }
       >
-        <Sheet>
+        <Sheet open={logOpen} onOpenChange={logOpenChange}>
           <div className="w-full pb-8">
             {breadcrumb}
 

dashboard/src/routes/build/$buildId/route.tsx

@@ -12,6 +12,8 @@ import {
   DEFAULT_ORIGIN,
   type SearchSchema,
 } from '@/types/general';
+import { DEFAULT_LOG_OPEN, zLogOpen } from '@/types/commonDetails';
+
 import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
 
 export const buildDetailsDefaultValues = {
@@ -24,10 +26,12 @@ export const buildDetailsDefaultValues = {
   hardwareSearch: '',
   treeIndexes: [],
   treeCommits: {},
+  logOpen: DEFAULT_LOG_OPEN,
 };
 
 export const buildDetailsSearchSchema = z.object({
   tableFilter: zTableFilterInfoValidator,
+  logOpen: zLogOpen,
 } satisfies SearchSchema);
 
 export const Route = createFileRoute('/build/$buildId')({

dashboard/src/routes/test/$testId/route.tsx

@@ -12,6 +12,7 @@ import {
   type SearchSchema,
 } from '@/types/general';
 import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
+import { DEFAULT_LOG_OPEN, zLogOpen } from '@/types/commonDetails';
 
 export const testDetailsDefaultValues = {
   origin: DEFAULT_ORIGIN,
@@ -23,9 +24,12 @@ export const testDetailsDefaultValues = {
   hardwareSearch: '',
   treeIndexes: [],
   treeCommits: {},
+  logOpen: DEFAULT_LOG_OPEN,
 };
 
-export const testDetailsSearchSchema = z.object({} satisfies SearchSchema);
+export const testDetailsSearchSchema = z.object({
+  logOpen: zLogOpen,
+} satisfies SearchSchema);
 
 export const Route = createFileRoute('/test/$testId')({
   validateSearch: testDetailsSearchSchema,

dashboard/src/types/commonDetails.ts

@@ -1,3 +1,5 @@
+import { z } from 'zod';
+
 import type {
   ArchCompilerStatus,
   Architecture,
@@ -53,3 +55,9 @@ export type DetailsFilters = {
   boots: LocalFilters;
   tests: LocalFilters;
 };
+
+export const DEFAULT_LOG_OPEN = false;
+export const zLogOpen = z
+  .boolean()
+  .catch(DEFAULT_LOG_OPEN)
+  .default(DEFAULT_LOG_OPEN);

dashboard/src/types/general.ts

@@ -257,7 +257,8 @@ export type SearchParamsKeys =
   | 'treeCommits'
   | 'startTimestampInSeconds'
   | 'endTimestampInSeconds'
-  | 'issueVersion';
+  | 'issueVersion'
+  | 'logOpen';
 export type SearchSchema = Partial<Record<SearchParamsKeys, ZodTypeAny>>;
 
 const requestFilters = {

dashboard/src/utils/search.ts

@@ -150,6 +150,7 @@ const generalMinifiedParams: Record<SearchParamsKeys, string> = {
   startTimestampInSeconds: 'st',
   endTimestampInSeconds: 'et',
   issueVersion: 'iv',
+  logOpen: 'l',
 } as const;
 
 const treeInfoMinifiedParams: Record<keyof TTreeInformation, string> = {