fix: code repo icons (#718)

Co-authored-by: Cahllagerfeld <[email protected]>

Author: schustmi

src/app/runs/[id]/_Tabs/Overview/Details.tsx

@@ -119,7 +119,7 @@ export function Details() {
 							</TooltipProvider>
 						</div>
 					</Key>
-					<Value>
+					<Value className="h-auto">
 						{data.body?.code_reference ? (
 							<RepoBadge
 								repositoryId={data.body?.code_reference.body?.code_repository.id}

src/assets/icons/gitlab.svg

@@ -1,4 +1,5 @@
 import Github from "@/assets/icons/github.svg?react";
+import Gitlab from "@/assets/icons/gitlab.svg?react";
 import { useCodeRepository } from "@/data/code-repositories/code-repositories-detail-query";
 import { transformToEllipsis } from "@/lib/strings";
 import { Skeleton, Tag } from "@zenml-io/react-component-library";
@@ -19,15 +20,22 @@ export function RepoBadge({ repositoryId, commit }: Props) {
 	const repositoryMetadata = data?.metadata?.config;
 
 	const getRepositoryLink = () => {
+		let Icon: React.FunctionComponent<
+			React.SVGProps<SVGSVGElement> & {
+				title?: string;
+			}
+		> | null = null;
 		let name: string = data?.name as string;
-		let url: string | null = "";
+		let url: string | undefined = undefined;
 
 		if (data?.body?.source?.attribute === "GitHubCodeRepository") {
+			Icon = Github;
 			name = `${repositoryMetadata?.owner}/${repositoryMetadata?.repository}`;
 			url = `https://www.github.com/${name}` + (commit ? `/tree/${commit}` : "");
 		} else if (data?.body?.source?.attribute === "GitLabCodeRepository") {
+			Icon = Gitlab;
 			name = `${repositoryMetadata?.group}/${repositoryMetadata?.project}`;
-			url = `https://www.gitlab.com/${name}`;
+			url = `https://www.gitlab.com/${name}` + (commit ? `/tree/${commit}` : "");
 		}
 
 		return (
@@ -38,7 +46,7 @@ export function RepoBadge({ repositoryId, commit }: Props) {
 				onClick={(e) => e.stopPropagation()}
 				href={url}
 			>
-				<Github className="mr-1 h-5 w-5 fill-theme-text-brand" />
+				{Icon && <Icon className="mr-1 h-5 w-5 fill-theme-text-brand" />}
 				{name}
 			</a>
 		);

src/components/repositories/RepoBadge.tsx

@@ -100,36 +100,33 @@ export function StepDetailsTab({ stepId, runId }: Props) {
 								</Link>
 							}
 						/>
-						<KeyValue
-							label={
-								<div className="flex items-center space-x-0.5 truncate">
-									<span className="truncate">Repository/Commit</span>
-									<TooltipProvider>
-										<Tooltip>
-											<TooltipTrigger className="cursor-default">
-												<Info className="h-3 w-3 fill-theme-text-secondary" />
-												<span className="sr-only">Info</span>
-											</TooltipTrigger>
-											<TooltipContent className="w-full max-w-md whitespace-normal">
-												Git hash of code repository. Only set if pipeline was run in a clean git
-												repository connected to your ZenML server.
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-								</div>
-							}
-							value={
-								pipelineRunData.body?.code_reference ? (
-									<RepoBadge
-										repositoryId={repository?.id}
-										commit={pipelineRunData.body.code_reference.body?.commit}
-									/>
-								) : (
-									"Not available"
-								)
-							}
-						/>
-
+						<Key>
+							<div className="flex items-center space-x-0.5 truncate">
+								<span className="truncate">Repository/Commit</span>
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger className="cursor-default">
+											<Info className="h-3 w-3 fill-theme-text-secondary" />
+											<span className="sr-only">Info</span>
+										</TooltipTrigger>
+										<TooltipContent className="w-full max-w-md whitespace-normal">
+											Git hash of code repository. Only set if pipeline was run in a clean git
+											repository connected to your ZenML server.
+										</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							</div>
+						</Key>
+						<Value className="h-auto">
+							{pipelineRunData.body?.code_reference ? (
+								<RepoBadge
+									repositoryId={repository?.id}
+									commit={pipelineRunData.body.code_reference.body?.commit}
+								/>
+							) : (
+								"Not available"
+							)}
+						</Value>
 						<Key className={pipelineRunData.metadata?.code_path ? "col-span-3" : ""}>
 							<div className="flex items-center space-x-0.5 truncate">
 								<span>Code Path</span>