Merge pull request #616 from zenml-io/future

Release

.github/workflows/unit-tests.yml

@@ -9,6 +9,7 @@ on:
     branches:
       - main
       - dev
+      - future
   workflow_dispatch:
 
 jobs:

src/app/activate-server/ServerNameStep.tsx

@@ -29,7 +29,7 @@ export function SetServerNameStep({ setUsername }: Props) {
 	const { mutate } = useActivateServer({
 		onSuccess: async (data) => {
 			setUsername(data.name);
-			loginMutate({ username: data.name, password: serverSettings.admin_password });
+			loginMutate({ username: data.name, password: serverSettings.admin_password ?? undefined });
 		},
 		onError: (error) => {
 			if (error instanceof Error) {

src/app/activate-user/AccountDetailsStep.tsx

@@ -8,7 +8,6 @@ export function AccountDetailsStep() {
 	const { setNewUser, newUser } = useActivationContext();
 
 	function handleDetailsSubmit({ fullName, getUpdates, email }: AccountDetailForm) {
-		//@ts-expect-error null is the initial value it needs to be set to
 		setNewUser((prev) => ({
 			...prev,
 			...(email ? { email } : { email: null }),

src/app/activate-user/AwarenessStep.tsx

@@ -29,7 +29,7 @@ export function AwarenessStep({ userId, setUsername }: Props) {
 	const { mutate } = useActivateUser({
 		onSuccess: async (data) => {
 			setUsername(data.name);
-			loginMutate({ username: data.name, password: newUser.password });
+			loginMutate({ username: data.name, password: newUser.password ?? undefined });
 		},
 		onError: (error) => {
 			if (error instanceof Error) {

src/app/runs/[id]/_Tabs/Configuration/DockerImageCollapsible.tsx

@@ -75,13 +75,13 @@ export function DockerImageCollapsible({ data }: Props) {
 				{data.dockerfile && (
 					<>
 						<p className="mb-2 mt-5 text-theme-text-secondary">Dockerfile</p>
-						<Codesnippet fullWidth highlightCode wrap code={data.dockerfile} />
+						<Codesnippet fullWidth wrap code={data.dockerfile} />
 					</>
 				)}
 				{data.requirements && (
 					<>
 						<p className="mb-2 mt-5 text-theme-text-secondary">Requirements</p>
-						<Codesnippet fullWidth highlightCode wrap code={data.requirements} />
+						<Codesnippet fullWidth wrap code={data.requirements} />
 					</>
 				)}
 			</CollapsibleContent>

src/app/runs/[id]/_Tabs/Configuration/index.tsx

@@ -31,7 +31,7 @@ export function ConfigurationTab() {
 
 	return (
 		<div className="grid grid-cols-1 gap-5">
-			<NestedCollapsible title="Parameters" data={data.metadata?.config.parameters} />
+			<NestedCollapsible title="Parameters" data={data.metadata?.config.parameters ?? undefined} />
 			{(buildData?.metadata?.images as BuildItemMap)?.orchestrator && (
 				<DockerImageCollapsible data={buildData?.metadata?.images?.orchestrator as BuildItem} />
 			)}

src/app/settings/notifications/NotificationsForm.tsx

@@ -46,8 +46,8 @@ export function NotificationsForm({ settings }: Props) {
 	const { control, handleSubmit, watch } = useForm<NotificationFormType>({
 		resolver: zodResolver(NotificationFormSchema),
 		defaultValues: {
-			announcements: settings.body?.display_announcements,
-			updates: settings.body?.display_updates
+			announcements: settings.body?.display_announcements ?? undefined,
+			updates: settings.body?.display_updates ?? undefined
 		}
 	});
 

src/app/settings/profile/UpdateProfileForm.tsx

@@ -107,7 +107,7 @@ export function UpdateProfileForm({ user }: Props) {
 							Email
 						</label>
 						<Input
-							placeholder={user.metadata?.email}
+							placeholder={user.metadata?.email ?? undefined}
 							{...register("email")}
 							id={emailId}
 							className="w-full"

src/app/survey/AccountDetailsStep.tsx

@@ -12,7 +12,6 @@ export function AccountDetailsStep({ user }: Props) {
 	const { setSurveyStep } = useSurveyContext();
 	const { setUser } = useSurveyUserContext();
 	function handleDetailsSubmit({ fullName, getUpdates, email }: AccountDetailForm) {
-		//@ts-expect-error null is the initial value it needs to be set to
 		setUser((prev) => ({
 			...prev,
 			...(email ? { email } : { email: null }),

src/components/ExecutionStatus.tsx

@@ -6,7 +6,7 @@ import Initializing from "@/assets/icons/initializing.svg?react";
 import Cached from "@/assets/icons/cached.svg?react";
 import Running from "@/assets/icons/dots-circle.svg?react";
 
-export function getExecutionStatusColor(status?: ExecutionStatus) {
+export function getExecutionStatusColor(status?: ExecutionStatus | null) {
 	if (!status) return null;
 	switch (status) {
 		case "completed":
@@ -58,7 +58,7 @@ export function ExecutionStatusIcon({
 	status,
 	className
 }: {
-	status?: ExecutionStatus;
+	status?: ExecutionStatus | null;
 	className?: string;
 }) {
 	if (!status) return null;

src/components/MetadataCards.tsx

@@ -36,7 +36,7 @@ export function MetadataCards({ metadata }: Props) {
 	);
 }
 
-export function UncategorizedCard({ metadata }: Props) {
+export function UncategorizedCard({ metadata, title }: Props & { title?: string }) {
 	const metaData = Object.entries(metadata || {});
 	const regex = /^<class\s+'.*'>$/;
 
@@ -63,7 +63,7 @@ export function UncategorizedCard({ metadata }: Props) {
 
 	return (
 		<div>
-			<CollapsibleCard initialOpen title="Uncategorized">
+			<CollapsibleCard initialOpen title={title || "Uncategorized"}>
 				<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
 					{nonDicts.map(([_, value]) => (
 						<KeyValue

src/components/artifacts/artifact-node-sheet/DetailCards.tsx

@@ -1,11 +1,16 @@
+import Pipelines from "@/assets/icons/pipeline.svg?react";
 import Spinner from "@/assets/icons/spinner.svg?react";
+import Run from "@/assets/icons/terminal-square.svg?react";
 import { DisplayDate } from "@/components/DisplayDate";
 import { ErrorFallback } from "@/components/Error";
+import { ExecutionStatusIcon, getExecutionStatusTagColor } from "@/components/ExecutionStatus";
 import { InlineAvatar } from "@/components/InlineAvatar";
 import { Key, KeyValue, Value } from "@/components/KeyValue";
 import { useArtifactVersion } from "@/data/artifact-versions/artifact-version-detail-query";
 import { useComponentDetail } from "@/data/components/component-detail-query";
+import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStepDetail } from "@/data/steps/step-detail-query";
+import { routes } from "@/router/routes";
 import {
 	Skeleton,
 	Tag,
@@ -14,95 +19,124 @@ import {
 	TooltipProvider,
 	TooltipTrigger
 } from "@zenml-io/react-component-library";
+import { Link } from "react-router-dom";
 import { Codesnippet } from "../../CodeSnippet";
 import { CollapsibleCard } from "../../CollapsibleCard";
-import { ArtifactIcon } from "@/components/ArtifactIcon";
-import { ArtifactVersionBody } from "@/types/artifact-versions";
-import { getExecutionStatusTagColor } from "@/components/ExecutionStatus";
-import Run from "@/assets/icons/terminal-square.svg?react";
 
 type Props = {
 	artifactVersionId: string;
 };
 
 export function DetailsCard({ artifactVersionId }: Props) {
-	const {
-		data: artifactVersion,
-		isPending: isArtifactVersionPending,
-		isError: isArtifactVersionError,
-		error
-	} = useArtifactVersion({ versionId: artifactVersionId });
+	const artifactVersion = useArtifactVersion({ versionId: artifactVersionId });
+
+	const producerRunId = artifactVersion.data?.body?.producer_pipeline_run_id;
+
+	const pipelineRun = usePipelineRun(
+		{
+			runId: producerRunId as string
+		},
+		{ throwOnError: true, enabled: !!producerRunId }
+	);
 
-	const producerId = artifactVersion?.metadata?.producer_step_run_id;
-	const { data: stepData } = useStepDetail(
+	const producerId = artifactVersion.data?.metadata?.producer_step_run_id;
+	const stepDetail = useStepDetail(
 		{
 			stepId: producerId!
 		},
 		{ enabled: !!producerId }
 	);
 
-	if (isArtifactVersionPending) return <Skeleton className="h-[500px] w-full" />;
-	if (isArtifactVersionError) return <ErrorFallback err={error} />;
+	if (artifactVersion.isPending || pipelineRun.isPending)
+		return <Skeleton className="h-[500px] w-full" />;
+	if (artifactVersion.isError || pipelineRun.isError)
+		return <ErrorFallback err={artifactVersion.error! || pipelineRun.error!} />;
 
 	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">
-				{artifactVersion.metadata?.producer_step_run_id && (
-					<KeyValue
-						label="Producer Step"
-						value={
+				<KeyValue
+					label="Pipeline"
+					value={
+						<Link
+							to={routes.pipelines.namespace(
+								encodeURIComponent(pipelineRun.data.body?.pipeline?.name as string)
+							)}
+						>
 							<Tag
-								color="grey"
+								color="purple"
 								className="inline-flex items-center gap-0.5"
 								rounded={false}
 								emphasis="subtle"
 							>
-								{stepData?.body?.status === "running" ? (
-									<Spinner className="mr-1 h-4 w-4 border-[2px]" />
-								) : (
-									<ArtifactIcon
-										artifactType={artifactVersion.body?.type as ArtifactVersionBody["type"]}
-										className="mr-1 h-4 w-4 fill-current"
-									/>
-								)}
-								{stepData ? stepData?.name : <Skeleton className="h-5 w-5" />}
+								<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
+								{pipelineRun.data.body?.pipeline?.name}
+
+								<div className="rounded-sm bg-primary-50 px-1 py-0.25">
+									{pipelineRun.data.body?.pipeline?.body?.version}
+								</div>
 							</Tag>
+						</Link>
+					}
+				/>
+				{artifactVersion.data.body?.producer_pipeline_run_id && pipelineRun.data.body?.status && (
+					<KeyValue
+						label="Producer Run"
+						value={
+							<Link to={routes.runs.detail(artifactVersion.data.body?.producer_pipeline_run_id)}>
+								<Tag
+									color={getExecutionStatusTagColor(pipelineRun.data.body?.status)}
+									className="inline-flex items-center gap-0.5"
+									rounded={false}
+									emphasis="subtle"
+								>
+									{pipelineRun.data.body?.status === "running" ? (
+										<Spinner className="mr-1 h-4 w-4 border-[2px]" />
+									) : (
+										<Run className={`mr-1 h-4 w-4 fill-current`} />
+									)}
+
+									{artifactVersion.data.body?.producer_pipeline_run_id}
+								</Tag>
+							</Link>
 						}
 					/>
 				)}
-				{artifactVersion.body?.producer_pipeline_run_id && (
+				{artifactVersion.data.body?.artifact.id && (
 					<KeyValue
-						label="Producer Run"
+						label="Producer Step"
 						value={
-							<Tag
-								color={getExecutionStatusTagColor(stepData?.body?.status)}
-								className="inline-flex items-center gap-0.5"
-								rounded={false}
-								emphasis="subtle"
-							>
-								{stepData?.body?.status === "running" ? (
-									<Spinner className="mr-1 h-4 w-4 border-[2px]" />
+							<>
+								{stepDetail.data ? (
+									<Tag
+										color={getExecutionStatusTagColor("completed")}
+										className="inline-flex items-center gap-0.5"
+										rounded={false}
+										emphasis="subtle"
+									>
+										<ExecutionStatusIcon className="mr-1 fill-current" status={"completed"} />
+										{stepDetail.data.name}
+									</Tag>
 								) : (
-									<Run className={`mr-1 h-4 w-4 fill-current`} />
+									<Skeleton className="h-full w-[150px]" />
 								)}
-								{artifactVersion.body?.producer_pipeline_run_id}
-							</Tag>
+							</>
 						}
 					/>
 				)}
 
-				<KeyValue label="Type" value={artifactVersion.body?.type} />
+				<KeyValue label="Type" value={artifactVersion.data.body?.type} />
 				<KeyValue
 					label="Author"
 					value={
 						<div className="inline-flex items-center gap-1">
-							<InlineAvatar username={artifactVersion.body?.user?.name || ""} />
+							<InlineAvatar username={artifactVersion.data.body?.user?.name || ""} />
 						</div>
 					}
 				/>
 				<KeyValue
 					label="Updated"
-					value={<DisplayDate dateString={artifactVersion.body!.updated || ""} />}
+					value={<DisplayDate dateString={artifactVersion.data.body?.updated || ""} />}
 				/>
 			</dl>
 		</CollapsibleCard>

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

@@ -6,11 +6,12 @@ import { usePipelineBuild } from "@/data/pipeline-builds/all-pipeline-builds-que
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStepDetail } from "@/data/steps/step-detail-query";
 import { renderAnyToString } from "@/lib/strings";
-import { AnyDict } from "@/types/common";
+import { AnyDict, MetadataMap } from "@/types/common";
 import { BuildItemMap } from "@/types/pipeline-builds";
 import { Skeleton } from "@zenml-io/react-component-library";
 import { useParams } from "react-router-dom";
 import { ErrorFallback } from "../../Error";
+import { UncategorizedCard } from "../../MetadataCards";
 
 type Props = {
 	stepId: string;
@@ -72,6 +73,9 @@ export function StepConfigTab({ stepId }: Props) {
 
 	return (
 		<div className="space-y-5">
+			{data.metadata?.run_metadata && (
+				<UncategorizedCard title="Metadata" metadata={data.metadata?.run_metadata as MetadataMap} />
+			)}
 			<KeyValueCard data={data.metadata?.config?.parameters as AnyDict} title="Parameters" />
 			{dataImage ? <DockerImageCollapsible data={dataImage} /> : null}
 			<CodeSnippetCard id={data.id} />

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

@@ -47,7 +47,7 @@ export function StepLogsTab({ stepId, stepDetail }: Props) {
 					<KeyValue label="Enable logs" value="Disabled" />
 				</dl>
 			) : (
-				<Codesnippet fullWidth wrap code={data || ""} />
+				<Codesnippet codeClasses="whitespace-pre-line" fullWidth wrap code={data || ""} />
 			)}
 		</CollapsibleCard>
 	);

src/components/survey/AccountDetailsForm.tsx

@@ -5,8 +5,8 @@ import { Controller, useForm } from "react-hook-form";
 import { AccountDetailForm, accountDetailsFormSchema } from "./form-schemas";
 
 type AccountDetailsProps = {
-	fullName?: string;
-	email?: string;
+	fullName?: string | null;
+	email?: string | null;
 	getUpdates?: boolean;
 	submitHandler: (data: AccountDetailForm) => void;
 };