Merge pull request #959 from zenml-io/staging

Release 0.39.2

Author: Cahllagerfeld

.github/workflows/claude-code-review.yml

@@ -30,7 +30,7 @@ jobs:
       needs.check-team-member.outputs.is-team-member == 'true' &&
       github.actor != 'github-actions[bot]' &&
       github.event.issue.pull_request &&
-      contains(github.event.comment.body, '@claude /full-review')
+      contains(github.event.comment.body, '/claude /full-review')
     runs-on: ubuntu-latest
     timeout-minutes: 10
     concurrency:
@@ -127,11 +127,11 @@ jobs:
               - If component APIs changed, check for updates to JSDoc comments or usage examples.
               - If new environment variables added, ensure .env.example is updated.
               - If OpenAPI types changed (src/types/core.ts), verify it was generated not hand-edited.
-            - Testing requirements:
-              - Unit tests (*.spec.ts) for new utilities in src/lib/
-              - E2E tests (e2e-tests/) for new user flows
-              - Suggest test coverage for critical business logic
-              - Verify test commands: pnpm test:unit, pnpm test:e2e, pnpm lint, pnpm build
+            - Testing guidance (keep concise—avoid verbose or generic suggestions):
+              - Only suggest tests directly relevant to the specific changes in this PR
+              - Briefly note if new utilities in src/lib/ lack a *.spec.ts file
+              - For UI changes, suggest 1-2 specific manual testing steps the author can perform
+              - Do NOT suggest comprehensive test suites or generic test patterns unrelated to the PR scope
             - If migration or breaking changes are introduced, recommend adding explicit notes.
             
             Review Format:

.github/workflows/claude.yml

@@ -36,10 +36,10 @@ jobs:
       needs.check-team-member.outputs.is-team-member == 'true' &&
       github.actor != 'github-actions[bot]' &&
       (
-        (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude') && !contains(github.event.comment.body, '/full-review')) ||
-        (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude') && !contains(github.event.comment.body, '/full-review')) ||
-        (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude') && !contains(github.event.review.body, '/full-review')) ||
-        (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+        (github.event_name == 'issue_comment' && contains(github.event.comment.body, '/claude') && !contains(github.event.comment.body, '/full-review')) ||
+        (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '/claude') && !contains(github.event.comment.body, '/full-review')) ||
+        (github.event_name == 'pull_request_review' && contains(github.event.review.body, '/claude') && !contains(github.event.review.body, '/full-review')) ||
+        (github.event_name == 'issues' && (contains(github.event.issue.body, '/claude') || contains(github.event.issue.title, '/claude')))
       )
     runs-on: ubuntu-latest
     timeout-minutes: 10

.github/workflows/codex-comment.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     if: |
       github.event.issue.pull_request &&
-      contains(github.event.comment.body, '@codex') &&
+      contains(github.event.comment.body, '/codex') &&
       github.actor != 'github-actions[bot]'
     outputs:
       is-team-member: ${{ steps.check.outputs.is-member }}
@@ -62,7 +62,7 @@ jobs:
         id: mode
         run: |
           COMMENT="${{ github.event.comment.body }}"
-          if echo "$COMMENT" | grep -qi '@codex /full-review'; then
+          if echo "$COMMENT" | grep -qi '/codex /full-review'; then
             echo "mode=full-review" >> "$GITHUB_OUTPUT"
           else
             echo "mode=comment" >> "$GITHUB_OUTPUT"
@@ -126,7 +126,10 @@ jobs:
             Documentation & Testing:
             - Cross-check docs (README, CLAUDE.md, AGENTS.md) when user flows/components change.
             - Confirm env vars and OpenAPI types are updated where applicable.
-            - Recommend test coverage (unit/e2e) for critical flows.
+            - Testing (keep concise—avoid verbose or generic suggestions):
+              * Only suggest tests directly relevant to the specific changes in this PR
+              * For UI changes, suggest 1-2 specific manual testing steps
+              * Do NOT recommend comprehensive test suites or patterns unrelated to the PR scope
 
             Output Instructions:
             - Start with a summary of what the PR achieves.
@@ -163,4 +166,4 @@ jobs:
               repo: context.repo.repo,
               issue_number: context.issue.number,
               body
-            });
+            });

src/app/components/columns.tsx

@@ -3,6 +3,7 @@ import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
 import { ComponentSheet } from "@/components/stack-components/component-sheet";
 import { ComponentBadge } from "@/components/stack-components/ComponentBadge";
+import { ActionCell } from "@/components/tables/action-cell";
 import { snakeCaseToTitleCase } from "@/lib/strings";
 import { sanitizeUrl } from "@/lib/url";
 import { StackComponent } from "@/types/components";
@@ -89,9 +90,9 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 		{
 			id: "flavor",
 			header: "Flavor",
-			accessorFn: (row) => row.body?.flavor_name,
+			accessorFn: (row) => row.resources?.flavor?.body?.display_name,
 			cell: ({ row }) => {
-				const flavor = row.original.body?.flavor_name;
+				const flavor = row.original.resources?.flavor?.body?.display_name;
 				return (
 					<Tag
 						rounded={false}
@@ -140,7 +141,11 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 			id: "admin_actions",
 			header: "",
 			cell: ({ row }) => {
-				return <ComponentDropdown id={row.original.id} />;
+				return (
+					<ActionCell>
+						<ComponentDropdown id={row.original.id} />
+					</ActionCell>
+				);
 			}
 		}
 	];

src/app/components/component-dropdown.tsx

@@ -1,15 +1,14 @@
-import DotsIcon from "@/assets/icons/dots-horizontal.svg?react";
 import Edit from "@/assets/icons/edit.svg?react";
 import Trash from "@/assets/icons/trash.svg?react";
 import { DeleteStackComponentAlert } from "@/components/stack-components/delete-component/delete-alert";
+import { DropdownTriggerButton } from "@/components/dropdown-trigger-button";
 import { routes } from "@/router/routes";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuTrigger
 } from "@zenml-io/react-component-library/components/client";
-import { Button } from "@zenml-io/react-component-library/components/server";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useComponentBulkDelete } from "./selector-context";
@@ -36,13 +35,9 @@ export function ComponentDropdown({ id }: Props) {
 			/>
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
-					<Button
-						intent="secondary"
-						emphasis="minimal"
-						className="flex aspect-square items-center justify-center p-0"
-					>
-						<DotsIcon className="h-4 w-4 shrink-0 fill-theme-text-tertiary" />
-					</Button>
+					<DropdownTriggerButton>
+						<span className="sr-only">Open component actions</span>
+					</DropdownTriggerButton>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end" sideOffset={7}>
 					<DropdownMenuItem

src/app/components/create/config-step.tsx

@@ -23,6 +23,8 @@ export function ConfiguratinStep({ flavor, type, handleBack }: Props) {
 		navigate(routes.components.detail(id));
 	}
 
+	const flavorName = flavor.body?.display_name ?? snakeCaseToTitleCase(flavor.name);
+
 	return (
 		<>
 			<Wizard.Header className="flex items-center gap-2">
@@ -36,7 +38,7 @@ export function ConfiguratinStep({ flavor, type, handleBack }: Props) {
 					<span className="sr-only">Go step back</span>
 				</Button>
 				<span>
-					Configure your {snakeCaseToTitleCase(flavor.name)} {snakeCaseToTitleCase(type)}
+					Configure your {flavorName} {snakeCaseToTitleCase(type)}
 				</span>
 			</Wizard.Header>
 			<Wizard.Body className="p-0">

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/app/pipelines/[pipelineId]/runs/RunsTable.tsx

@@ -36,6 +36,7 @@ export function PipelineRunsTable({ params, columns }: Props) {
 				<DataTable
 					rowSelection={rowSelection}
 					onRowSelectionChange={setRowSelection}
+					getRowId={(row) => row.id}
 					columns={columns}
 					data={data.items}
 				/>