diff --git a/dashboard/src/components/BuildDetails/BuildDetails.tsx b/dashboard/src/components/BuildDetails/BuildDetails.tsx index d6911c68..8b2517e5 100644 --- a/dashboard/src/components/BuildDetails/BuildDetails.tsx +++ b/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( + () => ( + 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)} + + + ), + [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( diff --git a/dashboard/src/components/DetailsLink/DetailsLink.tsx b/dashboard/src/components/DetailsLink/DetailsLink.tsx new file mode 100644 index 00000000..399826b0 --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +export default memo(LinkItem); diff --git a/dashboard/src/components/DetailsLink/index.tsx b/dashboard/src/components/DetailsLink/index.tsx new file mode 100644 index 00000000..3d22b1d2 --- /dev/null +++ b/dashboard/src/components/DetailsLink/index.tsx @@ -0,0 +1,3 @@ +import MemoizedLinkItem from './DetailsLink'; + +export default MemoizedLinkItem; diff --git a/dashboard/src/components/Section/FirstIncidentSection.tsx b/dashboard/src/components/Section/FirstIncidentSection.tsx index 0626b4d9..1f9bf4ac 100644 --- a/dashboard/src/components/Section/FirstIncidentSection.tsx +++ b/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 ( - s} @@ -39,7 +36,7 @@ const FirstIncidentLink = ({ > {truncateBigText(firstIncident.git_commit_hash)} - + ); } diff --git a/dashboard/src/components/TestDetails/TestDetails.tsx b/dashboard/src/components/TestDetails/TestDetails.tsx index 1163a35f..361014d3 100644 --- a/dashboard/src/components/TestDetails/TestDetails.tsx +++ b/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 ( - - {children} - - ); -}; +import MemoizedLinkItem from '@/components/DetailsLink'; -const MemoizedLinkItem = memo(LinkItem); +import { StatusHistoryItem } from './StatusHistoryItem'; const TestDetailsSections = ({ test,