feat(build-details): add tree details link

- Created a component for details link items
- Refactored old code to use the new component
- Added a tree details link to the build details page

Part of #960

dashboard/src/components/BuildDetails/BuildDetails.tsx

@@ -18,7 +18,7 @@ import { formatDate, getBuildStatus, getTitle } from '@/utils/utils';
 
 import IssueSection from '@/components/Issue/IssueSection';
 
-import { shouldTruncate, valueOrEmpty } from '@/lib/string';
+import { shouldTruncate, truncateBigText, valueOrEmpty } from '@/lib/string';
 
 import { Sheet } from '@/components/Sheet';
 
@@ -47,6 +47,9 @@ import PageWithTitle from '@/components/PageWithTitle';
 import { MemoizedBuildDetailsOGTags } from '@/components/OpenGraphTags/BuildDetailsOGTags';
 import ButtonOpenLogSheet from '@/components/Button/ButtonOpenLogSheet';
 
+import MemoizedLinkItem from '@/components/DetailsLink';
+import { LinkIcon } from '@/components/Icons/Link';
+
 import BuildDetailsTestSection from './BuildDetailsTestSection';
 
 interface BuildDetailsProps {
@@ -82,6 +85,29 @@ const BuildDetails = ({
     [navigate],
   );
 
+  const treeDetailsLink = useMemo(
+    () => (
+      <MemoizedLinkItem
+        to="/tree/$treeId"
+        params={{ treeId: data?.git_commit_hash }}
+        state={s => s}
+        search={{
+          treeInfo: {
+            gitBranch: data?.git_repository_branch,
+            gitUrl: data?.git_repository_url,
+            treeName: data?.tree_name,
+            commitName: data?.git_commit_name,
+            headCommitHash: data?.git_commit_hash,
+          },
+        }}
+      >
+        {truncateBigText(data?.git_commit_hash)}
+        <LinkIcon className="text-blue text-xl" />
+      </MemoizedLinkItem>
+    ),
+    [data],
+  );
+
   const miscSection: ISection | undefined = useMemo(():
     | ISection
     | undefined => {
@@ -220,7 +246,14 @@ const BuildDetails = ({
         ],
       },
     ];
-  }, [data, buildDetailsTitle, setSheetToLog, formatMessage, buildId]);
+  }, [
+    data,
+    buildDetailsTitle,
+    setSheetToLog,
+    formatMessage,
+    buildId,
+    treeDetailsLink,
+  ]);
 
   const sectionsData: ISection[] = useMemo(() => {
     return [...generalSections, filesSection, miscSection].filter(

dashboard/src/components/DetailsLink/DetailsLink.tsx

@@ -0,0 +1,18 @@
+import { type JSX, memo } from 'react';
+
+import { Link, type LinkProps } from '@tanstack/react-router';
+
+const LinkItem = ({ children, ...props }: LinkProps): JSX.Element => {
+  return (
+    <Link
+      {...props}
+      className="flex flex-row items-center gap-1 underline hover:text-slate-900"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default memo(LinkItem);

dashboard/src/components/DetailsLink/index.tsx

@@ -0,0 +1,3 @@
+import MemoizedLinkItem from './DetailsLink';
+
+export default MemoizedLinkItem;

dashboard/src/components/Section/FirstIncidentSection.tsx

@@ -1,5 +1,3 @@
-import { Link } from '@tanstack/react-router';
-
 import type { JSX } from 'react';
 
 import { truncateBigText, shouldTruncate, valueOrEmpty } from '@/lib/string';
@@ -10,6 +8,8 @@ import { TooltipDateTime } from '@/components/TooltipDateTime';
 import { TruncatedValueTooltip } from '@/components/Tooltip/TruncatedValueTooltip';
 import { LinkIcon } from '@/components/Icons/Link';
 
+import MemoizedLinkItem from '@/components/DetailsLink';
+
 import type { ISection, SubsectionLink } from './Section';
 
 const FirstIncidentLink = ({
@@ -19,10 +19,7 @@ const FirstIncidentLink = ({
 }): JSX.Element => {
   if (firstIncident?.git_commit_hash !== undefined) {
     return (
-      <Link
-        className="flex flex-row items-center gap-1 underline hover:text-slate-900"
-        target="_blank"
-        rel="noreferrer"
+      <MemoizedLinkItem
         to="/tree/$treeId"
         params={{ treeId: firstIncident.git_commit_hash }}
         state={s => s}
@@ -39,7 +36,7 @@ const FirstIncidentLink = ({
       >
         {truncateBigText(firstIncident.git_commit_hash)}
         <LinkIcon className="text-blue text-xl" />
-      </Link>
+      </MemoizedLinkItem>
     );
   }
 

dashboard/src/components/TestDetails/TestDetails.tsx

@@ -1,11 +1,10 @@
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import { Fragment, memo, useCallback, useMemo, useState } from 'react';
+import { Fragment, useCallback, useMemo, useState } from 'react';
 import type { Dispatch, SetStateAction, JSX } from 'react';
 
 import type { LinkProps } from '@tanstack/react-router';
 import {
-  Link,
   useParams,
   useNavigate,
   useRouterState,
@@ -52,22 +51,9 @@ import { Badge } from '@/components/ui/badge';
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/Tooltip';
 
-import { StatusHistoryItem } from './StatusHistoryItem';
-
-const LinkItem = ({ children, ...props }: LinkProps): JSX.Element => {
-  return (
-    <Link
-      {...props}
-      className="flex flex-row items-center gap-1 underline hover:text-slate-900"
-      target="_blank"
-      rel="noreferrer"
-    >
-      {children}
-    </Link>
-  );
-};
+import MemoizedLinkItem from '@/components/DetailsLink';
 
-const MemoizedLinkItem = memo(LinkItem);
+import { StatusHistoryItem } from './StatusHistoryItem';
 
 const TestDetailsSections = ({
   test,