feat: snapshot creation (#856)

Author: Cahllagerfeld

src/app/runs/[id]/Header.tsx

@@ -38,7 +38,7 @@ export function RunsDetailHeader() {
 			<div className="flex items-center gap-1">
 				<RunRefreshGroup runId={runId} />
 				<RunStopGroup runId={runId} />
-				<RunActionsMenu />
+				<RunActionsMenu runId={runId} />
 			</div>
 		</PageHeader>
 	);

src/app/runs/[id]/RunActionMenu.tsx

@@ -1,5 +1,6 @@
 import HorizontalDots from "@/assets/icons/dots-horizontal.svg?react";
 import Trash from "@/assets/icons/trash.svg?react";
+import Plus from "@/assets/icons/plus.svg?react";
 import {
 	Button,
 	DropdownMenu,
@@ -9,8 +10,14 @@ import {
 } from "@zenml-io/react-component-library";
 import { useState } from "react";
 import { DeleteRunAlert } from "./DeleteRunAlert";
+import { Link } from "react-router-dom";
+import { routes } from "@/router/routes";
 
-export function RunActionsMenu() {
+type Props = {
+	runId: string;
+};
+
+export function RunActionsMenu({ runId }: Props) {
 	const [deleteOpen, setDeleteOpen] = useState(false);
 
 	const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -32,6 +39,12 @@ export function RunActionsMenu() {
 						</Button>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent className="z-10" align="end" sideOffset={1}>
+						<DropdownMenuItem asChild className="space-x-2">
+							<Link to={routes.projects.runs.createSnapshot(runId)}>
+								<Plus className="h-3 w-3 fill-neutral-400" />
+								<p>New Snapshot</p>
+							</Link>
+						</DropdownMenuItem>
 						<DropdownMenuItem onClick={() => setDeleteOpen(true)} className="space-x-2">
 							<Trash className="h-3 w-3 fill-neutral-400" />
 							<p>Delete</p>

src/app/runs/[id]/create-snapshot/breadcrumb.ts

@@ -0,0 +1,34 @@
+import { pipelineBreadcrumb, runBreadcrumb } from "@/components/breadcrumbs/library";
+import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
+import { routes } from "@/router/routes";
+import { PipelineRun } from "@/types/pipeline-runs";
+
+import { useEffect } from "react";
+
+export function useCreateSnapshotFromRunBreadcrumbs(run?: PipelineRun) {
+	const { setBreadcrumbs } = useBreadcrumbsContext();
+
+	useEffect(() => {
+		if (run) {
+			setBreadcrumbs([
+				...(run.resources?.pipeline
+					? [
+							pipelineBreadcrumb,
+							{
+								label: run.resources.pipeline.name || "",
+								href: routes.projects.pipelines.detail.runs(run.resources.pipeline.id)
+							}
+						]
+					: [runBreadcrumb]),
+				{
+					label: run.name || "",
+					href: routes.projects.runs.detail(run.id)
+				},
+				{
+					label: "Create Snapshot",
+					href: routes.projects.runs.createSnapshot(run.id)
+				}
+			]);
+		}
+	}, [setBreadcrumbs, run]);
+}

src/app/runs/[id]/create-snapshot/page.tsx

@@ -0,0 +1,20 @@
+import { CreateSnapshotForm } from "@/components/pipeline-snapshots/create/form";
+import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
+import { useParams } from "react-router-dom";
+import { useCreateSnapshotFromRunBreadcrumbs } from "./breadcrumb";
+
+export default function CreateSnapshotFromRunPage() {
+	const { runId } = useParams() as { runId: string };
+	const runQuery = usePipelineRun({ runId });
+
+	useCreateSnapshotFromRunBreadcrumbs(runQuery.data);
+
+	if (runQuery.isPending) return <p>Loading...</p>;
+	if (runQuery.isError) return <p>Error</p>;
+
+	return (
+		<div className="mx-auto w-full max-w-4xl p-5">
+			<CreateSnapshotForm run={runQuery.data} />
+		</div>
+	);
+}

src/app/runs/columns.tsx

@@ -62,7 +62,7 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 			}>();
 			return (
 				<div className="group/copybutton flex items-center gap-2">
-					<RunIcon className={`h-5 w-5 ${getExecutionStatusColor(status)}`} />
+					<RunIcon className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(status)}`} />
 					<div>
 						<div className="flex items-center gap-1">
 							<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">

src/app/snapshots/[snapshotId]/_layout/header/info.tsx

@@ -47,7 +47,7 @@ function SnapshotDetailInfoContent({ snapshot }: { snapshot: PipelineSnapshot })
 			</div>
 
 			<div className="flex items-center gap-1">
-				<SnapshotIcon className={`h-5 w-5 fill-primary-400`} />
+				<SnapshotIcon className={`h-5 w-5 shrink-0 fill-primary-400`} />
 				<h2 className="text-text-lg font-semibold text-theme-text-primary">{name}</h2>
 			</div>
 

src/app/snapshots/create/breadcrumbs.ts

@@ -0,0 +1,19 @@
+import { snapshotBreadcrumb } from "@/components/breadcrumbs/library";
+import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
+import { routes } from "@/router/routes";
+
+import { useEffect } from "react";
+
+export function useCreateSnapshotBreadcrumbs() {
+	const { setBreadcrumbs } = useBreadcrumbsContext();
+
+	useEffect(() => {
+		setBreadcrumbs([
+			snapshotBreadcrumb,
+			{
+				label: "Create",
+				href: routes.projects.snapshots.create
+			}
+		]);
+	}, [setBreadcrumbs]);
+}

src/app/snapshots/create/page.tsx

@@ -0,0 +1,11 @@
+import { CreateSnapshotForm } from "@/components/pipeline-snapshots/create/form";
+import { useCreateSnapshotBreadcrumbs } from "./breadcrumbs";
+
+export default function CreateSnapshotPage() {
+	useCreateSnapshotBreadcrumbs();
+	return (
+		<div className="mx-auto w-full max-w-4xl p-5">
+			<CreateSnapshotForm run={undefined} />
+		</div>
+	);
+}

src/app/snapshots/page.content.tsx

@@ -15,7 +15,7 @@ export function GlobalSnapshotsContent() {
 
 	return (
 		<>
-			<SnapshotTableToolbar params={searchParams} />
+			<SnapshotTableToolbar displayCreateButton params={searchParams} />
 			<PipelineSnapshotsTable params={searchParams} columns={columns} />
 		</>
 	);

src/components/pipeline-snapshots/create/_form-components/create-snapshot-form-footer.tsx

@@ -0,0 +1,24 @@
+import { Button } from "@zenml-io/react-component-library";
+import { useNavigate } from "react-router-dom";
+
+type Props = {
+	isPending: boolean;
+};
+
+export function CreateSnapshotFormFooter({ isPending }: Props) {
+	const navigate = useNavigate();
+
+	return (
+		<div className="flex items-center justify-end gap-2 p-5">
+			<Button type="button" onClick={() => navigate(-1)} intent="secondary" size="md">
+				Cancel
+			</Button>
+			<Button type="submit" size="md" disabled={isPending}>
+				{isPending && (
+					<div className="h-4 w-4 animate-spin rounded-rounded border-2 border-theme-text-negative border-b-theme-text-brand" />
+				)}
+				Create Snapshot
+			</Button>
+		</div>
+	);
+}