feat: update Onboarding (#955)

Author: Cahllagerfeld

src/app/onboarding/Setup/Items.tsx

@@ -1,11 +1,11 @@
-import Help from "@/assets/icons/help.svg?react";
 import { Codesnippet } from "@/components/CodeSnippet";
 import { HelpBox } from "@/components/fallback-pages/Helpbox";
 import { ChecklistItem } from "@/components/onboarding/ChecklistItem";
 import { useServerInfo } from "@/data/server/info-query";
 import { getLoginCommand } from "@/lib/login-command";
 import { OnboardingStep } from "@/types/onboarding";
-import { Box, Skeleton, buttonVariants } from "@zenml-io/react-component-library";
+import { Skeleton } from "@zenml-io/react-component-library";
+import { OnboardingHelpBox } from "./helpbox";
 import { PipelineSnippet } from "./pipeline-snippet";
 import { SetProject } from "./set-project";
 
@@ -23,7 +23,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 				<div>
 					<p className="mb-1 text-text-sm text-theme-text-secondary">Install ZenML</p>
 					<Codesnippet
-						code={`pip install "zenml==${data ? data.version : <Skeleton className="w-7" />}"`}
+						code={`uv pip install "zenml==${data ? data.version : <Skeleton className="w-7" />}"`}
 					/>
 				</div>
 				<div>
@@ -51,32 +51,30 @@ export function RunFirstPipeline({ active, completed, hasDownstreamStep }: Onboa
 					<p className="mb-1 text-text-sm text-theme-text-secondary">Run the training pipeline.</p>
 					<Codesnippet code="python run.py" />
 				</div>
-				<Box className="flex w-full flex-wrap items-center justify-between gap-y-1 p-2">
-					<div className="flex items-center gap-[10px]">
-						<div className="flex h-7 w-7 items-center justify-center rounded-sm bg-teal-25">
-							<Help className="h-5 w-5 fill-teal-400" />
-						</div>
-						<p>Do you need help?</p>
-					</div>
-					<div className="flex items-center gap-1">
-						<a
-							target="_blank"
-							rel="noopener noreferrer"
-							className={buttonVariants({ intent: "secondary", emphasis: "subtle", size: "md" })}
-							href="https://github.com/zenml-io/zenml/blob/main/examples/quickstart/README.md"
-						>
-							Open the Readme
-						</a>
-						<a
-							target="_blank"
-							rel="noopener noreferrer"
-							className={buttonVariants({ intent: "primary", emphasis: "subtle", size: "md" })}
-							href="https://docs.zenml.io/user-guides/starter-guide/create-an-ml-pipeline"
-						>
-							Browse our docs
-						</a>
-					</div>
-				</Box>
+				<OnboardingHelpBox href="https://docs.zenml.io/user-guides/starter-guide/create-an-ml-pipeline" />
+			</div>
+		</ChecklistItem>
+	);
+}
+
+export function DeployPipeline({ active, completed, hasDownstreamStep }: OnboardingStep) {
+	return (
+		<ChecklistItem
+			active={active}
+			hasDownstream={hasDownstreamStep}
+			completed={completed}
+			title="Deploy your pipeline (2 min)"
+		>
+			<div className="flex flex-col gap-5">
+				<div className="space-y-1">
+					<p>Deploy the pipeline</p>
+					<p className="text-text-sm text-theme-text-secondary">
+						Deploying your pipeline provides you with an API endpoint that you can call to trigger a
+						pipeline run.
+					</p>
+				</div>
+				<Codesnippet code="zenml pipeline deploy run.hello_pipeline" />
+				<OnboardingHelpBox href="https://docs.zenml.io/concepts/deployment" />
 			</div>
 		</ChecklistItem>
 	);

src/app/onboarding/Setup/helpbox.tsx

@@ -0,0 +1,27 @@
+import Help from "@/assets/icons/help.svg?react";
+import { Box, buttonVariants } from "@zenml-io/react-component-library";
+
+type OnboardingHelpBoxProps = {
+	href: string;
+};
+
+export function OnboardingHelpBox({ href }: OnboardingHelpBoxProps) {
+	return (
+		<Box className="flex w-full flex-wrap items-center justify-between gap-y-1 p-2">
+			<div className="flex items-center gap-[10px]">
+				<div className="flex h-7 w-7 items-center justify-center rounded-sm bg-teal-25">
+					<Help className="h-5 w-5 fill-teal-400" />
+				</div>
+				<p>Do you need help?</p>
+			</div>
+			<a
+				target="_blank"
+				rel="noopener noreferrer"
+				className={buttonVariants({ intent: "primary", emphasis: "subtle", size: "md" })}
+				href={href}
+			>
+				Browse our docs
+			</a>
+		</Box>
+	);
+}

src/app/onboarding/Setup/index.tsx

@@ -7,7 +7,7 @@ import { OnboardingResponse } from "@/types/onboarding";
 import { Skeleton } from "@zenml-io/react-component-library";
 import { useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import { ConnectZenMLStep, RunFirstPipeline } from "./Items";
+import { ConnectZenMLStep, DeployPipeline, RunFirstPipeline } from "./Items";
 
 export function OnboardingSetupList() {
 	const onboarding = useOnboarding({ refetchInterval: 5000 });
@@ -32,6 +32,7 @@ function OnboardingSetupListContent({ onboarding, isLocalServer }: Props) {
 	const { getItem, isFinished } = getOnboardingSetup(onboarding, isLocalServer);
 	const connectStep = getItem("device_verified");
 	const pipelineStep = getItem("pipeline_run");
+	const deployStep = getItem("pipeline_deployed");
 	const isInitialFinished = useRef(isFinished);
 
 	useEffect(() => {
@@ -58,6 +59,13 @@ function OnboardingSetupListContent({ onboarding, isLocalServer }: Props) {
 					hasDownstreamStep={pipelineStep.hasDownStreamStep}
 				/>
 			</li>
+			<li>
+				<DeployPipeline
+					active={deployStep.isActive}
+					completed={deployStep.isCompleted}
+					hasDownstreamStep={deployStep.hasDownStreamStep}
+				/>
+			</li>
 		</ul>
 	);
 }

src/lib/onboarding.spec.ts

@@ -6,13 +6,13 @@ describe("returns the correct items based on the deployment type", () => {
 	test("doesnt return connect step for local deployment", () => {
 		const isLocal = true;
 		const items = getSetupItems(isLocal);
-		expect(items).toEqual(["pipeline_run"]);
+		expect(items).toEqual(["pipeline_run", "pipeline_deployed"]);
 	});
 
 	test("includes the connect step for non-local deployments", () => {
 		const isLocal = false;
 		const items = getSetupItems(isLocal);
-		expect(items).toEqual(["device_verified", "pipeline_run"]);
+		expect(items).toEqual(["device_verified", "pipeline_run", "pipeline_deployed"]);
 	});
 });
 
@@ -75,11 +75,11 @@ describe("checks if the correct length is returned", () => {
 	test("returns correct value for local starter setup", () => {
 		const isLocal = true;
 		const items = getOnboardingLength(isLocal);
-		expect(items).toBe(1);
+		expect(items).toBe(2);
 	});
 	test("returns correct value for non-local starter setup", () => {
 		const isLocal = false;
 		const items = getOnboardingLength(isLocal);
-		expect(items).toBe(2);
+		expect(items).toBe(3);
 	});
 });

src/lib/onboarding.ts

@@ -1,7 +1,11 @@
 import { OnboardingChecklistItemName, OnboardingResponse } from "@/types/onboarding";
 
 export function getSetupItems(isLocal: boolean): OnboardingChecklistItemName[] {
-	return [...(isLocal ? [] : ["device_verified" as OnboardingChecklistItemName]), "pipeline_run"];
+	return [
+		...(isLocal ? [] : ["device_verified" as OnboardingChecklistItemName]),
+		"pipeline_run",
+		"pipeline_deployed"
+	];
 }
 
 const finalStep: OnboardingChecklistItemName = "oss_onboarding_completed";

src/types/onboarding.ts

@@ -1,6 +1,7 @@
 export type OnboardingChecklistItemName =
 	| "device_verified"
 	| "pipeline_run"
+	| "pipeline_deployed"
 	| "oss_onboarding_completed";
 
 export type OnboardingResponse = OnboardingChecklistItemName[];