feat: imporve code repo in pipeline step (#598) (#603)

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

Author: atzin-escandia

src/components/steps/step-sheet/DetailsTab.tsx

@@ -12,6 +12,7 @@ import { ErrorFallback } from "../../Error";
 import Github from "@/assets/icons/github.svg?react";
 import { CopyButton } from "@/components/CopyButton";
 import { transformToEllipsis } from "@/lib/strings";
+import { useCodeRepository } from "@/data/code-repositories/code-repositories-detail-query";
 
 type Props = {
 	stepId: string;
@@ -26,6 +27,15 @@ export function StepDetailsTab({ stepId, runId }: Props) {
 	const { data, isError, isPending, error } = useStepDetail({ stepId });
 	const { data: pipelineRunData } = usePipelineRun({ runId });
 
+	const repository = pipelineRunData?.body?.code_reference?.body?.code_repository;
+
+	const { data: codeRepositoryData } = useCodeRepository(
+		{ repositoryId: repository?.id as string },
+		{ throwOnError: true, enabled: !!repository?.id }
+	);
+
+	const repositoryMetadata = codeRepositoryData?.metadata?.config;
+
 	if (isError) return <ErrorFallback err={error} />;
 	if (isPending) return <Skeleton className="h-[300px] w-full" />;
 
@@ -36,6 +46,32 @@ export function StepDetailsTab({ stepId, runId }: Props) {
 	const enable_artifact_metadata = data.metadata?.config?.enable_artifact_metadata;
 	const enable_artifact_visualization = data.metadata?.config?.enable_artifact_visualization;
 
+	const getRepositoryLink = () => {
+		let name: string = repository?.name as string;
+		let url: string | null = "";
+
+		if (repository?.body?.source?.attribute === "GitHubCodeRepository") {
+			name = `${repositoryMetadata?.owner}/${repositoryMetadata?.repository}`;
+			url = `https://www.github.com/${name}`;
+		} else if (repository?.body?.source?.attribute === "GitLabCodeRepository") {
+			name = `${repositoryMetadata?.group}/${repositoryMetadata?.project}`;
+			url = `https://www.gitlab.com/${name}`;
+		}
+
+		return (
+			<a
+				target="_blank"
+				rel="noopener noreferrer"
+				className={`flex items-center ${url ? "" : "pointer-events-none"}`}
+				onClick={(e) => e.stopPropagation()}
+				href={url}
+			>
+				<Github className="mr-1 h-5 w-5 fill-theme-text-brand" />
+				{name}
+			</a>
+		);
+	};
+
 	return (
 		<CollapsibleCard initialOpen title="Details">
 			<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
@@ -112,7 +148,7 @@ export function StepDetailsTab({ stepId, runId }: Props) {
 								</Tag>
 							}
 						/>
-						{pipelineRunData.body?.code_reference && (
+						{pipelineRunData.body?.code_reference && repositoryMetadata && (
 							<KeyValue
 								label="Repository/Commit"
 								value={
@@ -123,8 +159,7 @@ export function StepDetailsTab({ stepId, runId }: Props) {
 											rounded={false}
 											emphasis="subtle"
 										>
-											<Github className="mr-1 h-5 w-5 fill-theme-text-brand" />
-											zenml.io/zenml
+											{getRepositoryLink()}
 											<div className="ml-1 rounded-sm bg-neutral-200 px-1 py-0.25">
 												{transformToEllipsis(
 													pipelineRunData?.body?.code_reference?.body?.commit as string,

src/data/api.ts

@@ -28,6 +28,10 @@ export const apiPaths = {
 		all: "/pipeline_builds",
 		detail: (runId: string) => `/pipeline_builds/${runId}`
 	},
+	code_repositories: {
+		all: "/code_repositories",
+		detail: (codeRepositoryId: string) => `/code_repositories/${codeRepositoryId}`
+	},
 	stacks: {
 		detail: (stackId: string) => `/stacks/${stackId}`
 	},

src/data/code-repositories/code-repositories-detail-query.ts

@@ -0,0 +1,48 @@
+import { UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { FetchError } from "@/lib/fetch-error";
+import { notFound } from "@/lib/not-found-error";
+import { apiPaths, createApiPath } from "../api";
+import { CodeRepository } from "@/types/code-repository";
+
+export type CodeRepositoryDetail = {
+	repositoryId: string;
+};
+
+export function getCodeRepositoryDetailQueryKey({ repositoryId }: CodeRepositoryDetail) {
+	return ["code_repositories", repositoryId];
+}
+
+export async function fetchAllCodeRepositories({ repositoryId }: CodeRepositoryDetail) {
+	const url = createApiPath(apiPaths.code_repositories.detail(repositoryId));
+	const res = await fetch(url, {
+		method: "GET",
+		credentials: "include",
+		headers: {
+			"Content-Type": "application/json"
+		}
+	});
+
+	if (res.status === 404) {
+		notFound();
+	}
+
+	if (!res.ok) {
+		throw new FetchError({
+			message: `Error while fetching code repository ${repositoryId}`,
+			status: res.status,
+			statusText: res.statusText
+		});
+	}
+	return res.json();
+}
+
+export function useCodeRepository(
+	repositoryId: CodeRepositoryDetail,
+	options?: Omit<UseQueryOptions<CodeRepository, FetchError>, "queryKey" | "queryFn">
+) {
+	return useQuery<CodeRepository, FetchError>({
+		queryKey: getCodeRepositoryDetailQueryKey(repositoryId),
+		queryFn: () => fetchAllCodeRepositories(repositoryId),
+		...options
+	});
+}

src/types/code-repository.ts

@@ -1,3 +1,9 @@
-import { components } from "./core";
+import { components, operations } from "./core";
 
 export type CodeRepository = components["schemas"]["CodeRepositoryResponse"];
+
+export type PageCodeRepositoryResponse = components["schemas"]["Page_CodeRepositoryResponse_"];
+
+export type CodeRepositoryListQueryParams = NonNullable<
+	operations["list_code_repositories_api_v1_code_repositories_get"]["parameters"]["query"]
+>;