feat: add breadcrumb to issue listing

Close #1014

dashboard/src/components/Breadcrumb/IssueBreadcrumb.tsx

@@ -0,0 +1,42 @@
+import type { MessageDescriptor } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
+
+import { memo, type JSX } from 'react';
+
+import type { LinkProps } from '@tanstack/react-router';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './Breadcrumb';
+
+const IssueBreadcrumb = ({
+  searchParams,
+  locationMessage,
+}: {
+  searchParams: LinkProps['search'];
+  locationMessage: MessageDescriptor['id'];
+}): JSX.Element => {
+  return (
+    <Breadcrumb className="pt-6 pb-6">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink to="/issues" search={searchParams}>
+            <FormattedMessage id="issue.path" />
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>
+            <FormattedMessage id={locationMessage} />
+          </BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+export const MemoizedIssueBreadcrumb = memo(IssueBreadcrumb);

dashboard/src/components/IssueTable/IssueTable.tsx

@@ -41,6 +41,7 @@ import { valueOrEmpty } from '@/lib/string';
 
 import { TooltipDateTime } from '@/components/TooltipDateTime';
 import { shouldShowRelativeDate } from '@/lib/date';
+import { RedirectFrom } from '@/types/general';
 
 const getLinkProps = (
   row: Row<IssueListingTableItem>,
@@ -74,6 +75,8 @@ const getLinkProps = (
     params: { issueId: row.original.id },
     state: s => ({
       ...s,
+      id: row.original.id,
+      from: RedirectFrom.Issues,
     }),
   };
 };

dashboard/src/locales/messages/index.ts

@@ -207,6 +207,7 @@ export const messages = {
     'issue.firstSeen': 'First seen',
     'issue.newIssue': 'New issue: This is the first time this issue was seen',
     'issue.noIssueFound': 'No issue found.',
+    'issue.path': 'Issues',
     'issue.searchPlaceholder': 'Search by issue comment with a regex',
     'issue.tooltip':
       'Issues groups several builds or tests by matching result status and logs.{br}They may also be linked to an external issue tracker or mailing list discussion.',

dashboard/src/pages/IssueDetails/IssueDetails.tsx

@@ -10,6 +10,7 @@ import { RedirectFrom } from '@/types/general';
 import { MemoizedTreeBreadcrumb } from '@/components/Breadcrumb/TreeBreadcrumb';
 import { MemoizedHardwareBreadcrumb } from '@/components/Breadcrumb/HardwareBreadcrumb';
 import { useSearchStore } from '@/hooks/store/useSearchStore';
+import { MemoizedIssueBreadcrumb } from '@/components/Breadcrumb/IssueBreadcrumb';
 
 const getBuildTableRowLink = (buildId: string): LinkProps => ({
   to: '/build/$buildId',
@@ -54,6 +55,15 @@ const IssueDetailsPage = (): JSX.Element => {
           />
         );
       }
+
+      if (historyState.from === RedirectFrom.Issues) {
+        return (
+          <MemoizedIssueBreadcrumb
+            searchParams={previousSearch}
+            locationMessage="issueDetails.issueDetails"
+          />
+        );
+      }
     }
   }, [historyState.from, historyState.id, previousSearch]);
 

dashboard/src/types/general.ts

@@ -361,6 +361,7 @@ export const getTargetFilter = (
 export enum RedirectFrom {
   Tree = 'tree',
   Hardware = 'hardware',
+  Issues = 'issues',
 }
 
 export type PossibleMonitorPath = '/tree' | '/hardware' | '/issues';