feat: add breadcrumb and historyState to issueDetails

Closes #592
kernelci · Jan 9, 2025 · 4896abf · 4896abf
1 parent 8df3474
commit 4896abf
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 40 deletions.
diff --git a/dashboard/src/components/BuildDetails/BuildDetails.tsx b/dashboard/src/components/BuildDetails/BuildDetails.tsx
@@ -6,7 +6,11 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useMemo } from 'react';
 
-import type { HistoryState, LinkProps } from '@tanstack/react-router';
+import {
+  useSearch,
+  type HistoryState,
+  type LinkProps,
+} from '@tanstack/react-router';
 
 import SectionGroup from '@/components/Section/SectionGroup';
 import type { ISection } from '@/components/Section/Section';
@@ -53,6 +57,7 @@ const BuildDetails = ({
   getTestTableRowLink,
   historyState,
 }: BuildDetailsProps): JSX.Element => {
+  const searchParams = useSearch({ from: '/build/$buildId' });
   const { data, error, isLoading } = useBuildDetails(buildId ?? '');
   const { data: issueData, status: issueStatus } = useBuildIssues(
     buildId ?? '',
@@ -217,11 +222,12 @@ const BuildDetails = ({
           onClickFilter={onClickFilter}
           tableFilter={tableFilter}
           getRowLink={getTestTableRowLink}
-          historyState={historyState}
         />
         <IssueSection
           data={issueData}
           status={issueStatus}
+          historyState={historyState}
+          previousSearch={searchParams}
         />
         <LogSheetContent logUrl={data.log_url} logExcerpt={data.log_excerpt} />
       </Sheet>

diff --git a/dashboard/src/components/BuildDetails/BuildDetailsTestSection.tsx b/dashboard/src/components/BuildDetails/BuildDetailsTestSection.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 
-import type { HistoryState, LinkProps } from '@tanstack/react-router';
+import type { LinkProps } from '@tanstack/react-router';
 
 import { Separator } from '@/components/ui/separator';
 
@@ -17,15 +17,13 @@ interface IBuildDetailsTestSection {
   onClickFilter: (filter: TestsTableFilter) => void;
   tableFilter: TableFilter;
   getRowLink: (testId: string) => LinkProps;
-  historyState?: HistoryState;
 }
 
 const BuildDetailsTestSection = ({
   buildId,
   onClickFilter,
   tableFilter,
   getRowLink,
-  historyState,
 }: IBuildDetailsTestSection): JSX.Element => {
   const intl = useIntl();
   const { data, error, isLoading } = useBuildTests(buildId);
@@ -45,7 +43,6 @@ const BuildDetailsTestSection = ({
             onClickFilter={onClickFilter}
             filter={tableFilter.testsTable}
             getRowLink={getRowLink}
-            historyState={historyState}
           />
         </div>
       ) : (

diff --git a/dashboard/src/components/Cards/IssuesList.tsx b/dashboard/src/components/Cards/IssuesList.tsx
@@ -13,7 +13,12 @@ import ListingItem, { ItemType } from '@/components/ListingItem/ListingItem';
 
 import ColoredCircle from '@/components/ColoredCircle/ColoredCircle';
 import { NoIssueFound } from '@/components/Issue/IssueSection';
-import type { TFilter, TFilterObjectsKeys, TIssue } from '@/types/general';
+import type {
+  RedirectFrom,
+  TFilter,
+  TFilterObjectsKeys,
+  TIssue,
+} from '@/types/general';
 
 import FilterLink from '@/components/Tabs/FilterLink';
 
@@ -29,6 +34,8 @@ interface IIssuesList {
   title: IBaseCard['title'];
   diffFilter: TFilter;
   issueFilterSection: TFilterObjectsKeys;
+  detailsId?: string;
+  pageFrom?: RedirectFrom;
 }
 
 const IssuesList = ({
@@ -37,6 +44,8 @@ const IssuesList = ({
   title,
   diffFilter,
   issueFilterSection,
+  detailsId,
+  pageFrom,
 }: IIssuesList): JSX.Element => {
   const getIssueLink = useCallback(
     (issueId: string, version: string): LinkProps => ({
@@ -46,8 +55,9 @@ const IssuesList = ({
         versionNumber: version,
       },
       search: s => s,
+      state: { id: detailsId, from: pageFrom },
     }),
-    [],
+    [detailsId, pageFrom],
   );
 
   const intl = useIntl();

diff --git a/dashboard/src/components/Issue/IssueSection.tsx b/dashboard/src/components/Issue/IssueSection.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import type { UseQueryResult } from '@tanstack/react-query';
 
+import type { HistoryState, LinkProps } from '@tanstack/react-router';
 import { Link } from '@tanstack/react-router';
 
 import { RiProhibited2Line } from 'react-icons/ri';
@@ -27,18 +28,24 @@ export const NoIssueFound = (): JSX.Element => {
 const IssueSection = ({
   data,
   status,
+  historyState,
+  previousSearch,
 }: {
   data?: TIssue[];
   status: UseQueryResult['status'];
+  historyState?: HistoryState;
+  previousSearch: LinkProps['search'];
 }): JSX.Element => {
   const issueList = useMemo(
     () =>
       data?.map(issue => (
         <Link
           key={issue.id + issue.version}
           className="mb-16 flex [&:not(:last-child)]:mb-2 [&:not(:last-child)]:border-b [&:not(:last-child)]:pb-2"
-          to={`/issue/${issue.id}/version/${issue.version}`}
-          search={s => s}
+          to="/issue/$issueId/version/$versionNumber"
+          params={{ issueId: issue.id, versionNumber: issue.version }}
+          state={historyState}
+          search={previousSearch}
         >
           <ListingItem
             unknown={issue.incidents_info.incidentsCount}
@@ -47,7 +54,7 @@ const IssueSection = ({
           />
         </Link>
       )),
-    [data],
+    [data, historyState, previousSearch],
   );
 
   return (

diff --git a/dashboard/src/components/IssueDetails/IssueDetails.tsx b/dashboard/src/components/IssueDetails/IssueDetails.tsx
@@ -33,6 +33,7 @@ interface IIssueDetails {
   getTestTableRowLink: (testId: string) => LinkProps;
   onClickBuildFilter: (filter: BuildsTableFilter) => void;
   getBuildTableRowLink: (testId: string) => LinkProps;
+  breadcrumb?: JSX.Element;
 }
 
 export const IssueDetails = ({
@@ -43,6 +44,7 @@ export const IssueDetails = ({
   getTestTableRowLink,
   onClickBuildFilter,
   getBuildTableRowLink,
+  breadcrumb,
 }: IIssueDetails): JSX.Element => {
   const { data, error, isLoading } = useIssueDetails(issueId, versionNumber);
 
@@ -159,6 +161,7 @@ export const IssueDetails = ({
 
   return (
     <ErrorBoundary FallbackComponent={UnexpectedError}>
+      {breadcrumb}
       <SectionGroup sections={sectionsData} />
       {hasTest && (
         <IssueDetailsTestSection

diff --git a/dashboard/src/components/Table/TableComponents.tsx b/dashboard/src/components/Table/TableComponents.tsx
@@ -1,4 +1,4 @@
-import type { HistoryState, LinkProps } from '@tanstack/react-router';
+import type { LinkProps } from '@tanstack/react-router';
 import type { Cell, Row } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
 import { memo, useCallback, useMemo } from 'react';
@@ -17,15 +17,13 @@ interface ITableCellComponent<T> {
   cell: Cell<T, unknown>;
   rowIndex: number;
   openLogSheet: (index: number) => void;
-  historyState?: HistoryState;
   detailsLinkProps: LinkProps;
 }
 
 const TableCellComponent = <T,>({
   cell,
   rowIndex,
   openLogSheet,
-  historyState,
   detailsLinkProps,
 }: ITableCellComponent<T>): JSX.Element => {
   const handleClick = useCallback(() => {
@@ -38,7 +36,7 @@ const TableCellComponent = <T,>({
   const parsedLinkProps: LinkProps =
     cell.column.id === DETAILS_COLUMN_ID
       ? detailsLinkProps
-      : { search: s => s, state: historyState };
+      : { search: s => s, state: s => s };
 
   return (
     <TableCellWithLink
@@ -58,7 +56,6 @@ interface ITableRowComponent<T extends BaseComponentType> {
   row: Row<T>;
   index: number;
   currentLog?: number;
-  historyState?: HistoryState;
   openLogSheet: (index: number) => void;
   getRowLink: (detailsId: string) => LinkProps;
 }
@@ -67,7 +64,6 @@ const TableRowComponent = <T extends BaseComponentType>({
   row,
   index,
   currentLog,
-  historyState,
   openLogSheet,
   getRowLink,
 }: ITableRowComponent<T>): JSX.Element => {
@@ -87,7 +83,6 @@ const TableRowComponent = <T extends BaseComponentType>({
           key={cellIdx}
           cell={cell}
           rowIndex={index}
-          historyState={historyState}
           openLogSheet={openLogSheet}
           detailsLinkProps={linkProps}
         />

diff --git a/dashboard/src/components/TestDetails/TestDetails.tsx b/dashboard/src/components/TestDetails/TestDetails.tsx
@@ -213,6 +213,8 @@ const TestDetails = ({
   breadcrumb,
   testId,
 }: TestsDetailsProps): JSX.Element => {
+  const historyState = useRouterState({ select: s => s.location.state });
+  const searchParams = useSearch({ from: '/test/$testId' });
   const { data, error, isLoading } = useTestDetails(testId ?? '');
   const { data: issueData, status: issueStatus } = useTestIssues(testId ?? '');
 
@@ -243,6 +245,8 @@ const TestDetails = ({
         <IssueSection
           data={issueData}
           status={issueStatus}
+          historyState={historyState}
+          previousSearch={searchParams}
         />
       </div>
       <LogSheetContent logUrl={data.log_url} logExcerpt={data.log_excerpt} />

diff --git a/dashboard/src/components/TestsTable/IndividualTestsTable.tsx b/dashboard/src/components/TestsTable/IndividualTestsTable.tsx
@@ -10,7 +10,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type { CSSProperties } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import type { HistoryState, LinkProps } from '@tanstack/react-router';
+import type { LinkProps } from '@tanstack/react-router';
 
 import type { TestHistory, TIndividualTest } from '@/types/general';
 
@@ -27,14 +27,12 @@ const ESTIMATED_ROW_HEIGHT = 60;
 interface IIndividualTestsTable {
   columns: ColumnDef<TIndividualTest>[];
   data: TIndividualTest[];
-  historyState?: HistoryState;
   getRowLink: (testId: TestHistory['id']) => LinkProps;
 }
 
 export function IndividualTestsTable({
   data,
   columns,
-  historyState,
   getRowLink,
 }: IIndividualTestsTable): JSX.Element {
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -107,11 +105,10 @@ export function IndividualTestsTable({
           openLogSheet={openLogSheet}
           currentLog={currentLog}
           getRowLink={getRowLink}
-          historyState={historyState}
         />
       );
     });
-  }, [virtualItems, rows, openLogSheet, getRowLink, currentLog, historyState]);
+  }, [virtualItems, rows, openLogSheet, getRowLink, currentLog]);
 
   // if more performance is needed, try using translate as in the example from tanstack virtual instead of padding
   // https://tanstack.com/virtual/latest/docs/framework/react/examples/table

diff --git a/dashboard/src/components/TestsTable/TestsTable.tsx b/dashboard/src/components/TestsTable/TestsTable.tsx
@@ -17,7 +17,7 @@ import { Fragment, useCallback, useMemo, useState } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import type { HistoryState, LinkProps } from '@tanstack/react-router';
+import type { LinkProps } from '@tanstack/react-router';
 
 import type { TestsTableFilter } from '@/types/tree/TreeDetails';
 import { possibleTestsTableFilter } from '@/types/tree/TreeDetails';
@@ -53,7 +53,6 @@ export interface ITestsTable {
   getRowLink: (testId: TestHistory['id']) => LinkProps;
   updatePathFilter?: (pathFilter: string) => void;
   currentPathFilter?: string;
-  historyState?: HistoryState;
 }
 
 // TODO: would be useful if the navigation happened within the table, so the parent component would only be required to pass the navigation url instead of the whole function for the update and the currentPath diffFilter (boots/tests Table)
@@ -67,7 +66,6 @@ export function TestsTable({
   getRowLink,
   updatePathFilter,
   currentPathFilter,
-  historyState,
 }: ITestsTable): JSX.Element {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [expanded, setExpanded] = useState<ExpandedState>({});
@@ -333,7 +331,6 @@ export function TestsTable({
                   getRowLink={getRowLink}
                   data={data[row.index].individual_tests}
                   columns={innerColumns}
-                  historyState={historyState}
                 />
               </TableCell>
             </TableRow>
@@ -347,7 +344,7 @@ export function TestsTable({
         </TableCell>
       </TableRow>
     );
-  }, [columns.length, data, getRowLink, innerColumns, modelRows, historyState]);
+  }, [columns.length, data, getRowLink, innerColumns, modelRows]);
 
   return (
     <div className="flex flex-col gap-6 pb-4">