From 401a92965e0584965d8b44badfd6085ca1b1f82e Mon Sep 17 00:00:00 2001 From: Murilo Geraldini Date: Tue, 25 Feb 2025 10:37:48 -0300 Subject: [PATCH 1/2] feat(build-details-page): add log query param Part of #994 --- .../src/components/BuildDetails/BuildDetails.tsx | 16 ++++++++++++++-- dashboard/src/routes/build/$buildId/route.tsx | 4 ++++ dashboard/src/types/commonDetails.ts | 8 ++++++++ dashboard/src/types/general.ts | 3 ++- dashboard/src/utils/search.ts | 1 + 5 files changed, 29 insertions(+), 3 deletions(-) diff --git a/dashboard/src/components/BuildDetails/BuildDetails.tsx b/dashboard/src/components/BuildDetails/BuildDetails.tsx index 2025e886..85318fd9 100644 --- a/dashboard/src/components/BuildDetails/BuildDetails.tsx +++ b/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('log'); const [jsonContent, setJsonContent] = useState(); + 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 = ({ } > - + {breadcrumb} diff --git a/dashboard/src/routes/build/$buildId/route.tsx b/dashboard/src/routes/build/$buildId/route.tsx index 7f85f914..b6d0e7f3 100644 --- a/dashboard/src/routes/build/$buildId/route.tsx +++ b/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')({ diff --git a/dashboard/src/types/commonDetails.ts b/dashboard/src/types/commonDetails.ts index aadceefe..a80dc565 100644 --- a/dashboard/src/types/commonDetails.ts +++ b/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); diff --git a/dashboard/src/types/general.ts b/dashboard/src/types/general.ts index 8e19a072..fdfcf066 100644 --- a/dashboard/src/types/general.ts +++ b/dashboard/src/types/general.ts @@ -257,7 +257,8 @@ export type SearchParamsKeys = | 'treeCommits' | 'startTimestampInSeconds' | 'endTimestampInSeconds' - | 'issueVersion'; + | 'issueVersion' + | 'logOpen'; export type SearchSchema = Partial>; const requestFilters = { diff --git a/dashboard/src/utils/search.ts b/dashboard/src/utils/search.ts index 89132bdb..112e0a94 100644 --- a/dashboard/src/utils/search.ts +++ b/dashboard/src/utils/search.ts @@ -150,6 +150,7 @@ const generalMinifiedParams: Record = { startTimestampInSeconds: 'st', endTimestampInSeconds: 'et', issueVersion: 'iv', + logOpen: 'l', } as const; const treeInfoMinifiedParams: Record = { From 05ff183718f00617d929328c15305235f4943619 Mon Sep 17 00:00:00 2001 From: Murilo Geraldini Date: Tue, 25 Feb 2025 10:47:39 -0300 Subject: [PATCH 2/2] feat(test-details-page): add log query param Closes #994 --- dashboard/src/components/TestDetails/TestDetails.tsx | 10 +++++++++- dashboard/src/routes/test/$testId/route.tsx | 6 +++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/dashboard/src/components/TestDetails/TestDetails.tsx b/dashboard/src/components/TestDetails/TestDetails.tsx index 5bcacb68..db454b3b 100644 --- a/dashboard/src/components/TestDetails/TestDetails.tsx +++ b/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('log'); const [jsonContent, setJsonContent] = useState(); + 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 => { /> } > - +
{breadcrumb} diff --git a/dashboard/src/routes/test/$testId/route.tsx b/dashboard/src/routes/test/$testId/route.tsx index 0ae2ac49..88cc9684 100644 --- a/dashboard/src/routes/test/$testId/route.tsx +++ b/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,