Merge pull request #740 from zenml-io/staging

Release

Author: Cahllagerfeld

src/app/components/columns.tsx

@@ -5,7 +5,6 @@ import { ComponentSheet } from "@/components/stack-components/component-sheet";
 import { ComponentBadge } from "@/components/stack-components/ComponentBadge";
 import { snakeCaseToTitleCase } from "@/lib/strings";
 import { sanitizeUrl } from "@/lib/url";
-import { getUsername } from "@/lib/user";
 import { StackComponent } from "@/types/components";
 import { ColumnDef } from "@tanstack/react-table";
 import { Tag } from "@zenml-io/react-component-library/components/server";
@@ -88,9 +87,9 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 			header: "Author",
 			accessorFn: (row) => row.body?.user?.name,
 			cell: ({ row }) => {
-				const author = row.original.body?.user;
+				const author = row.original.body?.user?.name;
 				if (!author) return null;
-				return <InlineAvatar username={getUsername(author)} />;
+				return <InlineAvatar username={author} />;
 			}
 		},
 		{

src/app/pipelines/PipelinesTab/DeletePipelineAlert.tsx

@@ -15,9 +15,9 @@ export function DeletePipelineAlert() {
 
 	return (
 		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-			<AlertDialogTrigger>
+			<AlertDialogTrigger asChild>
 				<Button
-					className="rounded-sharp border-none bg-white"
+					className="rounded-sharp border-y-0 bg-white"
 					size="md"
 					emphasis="subtle"
 					intent="secondary"

src/app/pipelines/RunsTab/DeleteRunAlert.tsx

@@ -15,9 +15,9 @@ export function DeleteRunAlert() {
 
 	return (
 		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-			<AlertDialogTrigger>
+			<AlertDialogTrigger asChild>
 				<Button
-					className="rounded-sharp border-none bg-white"
+					className="rounded-sharp border-y-0 bg-white"
 					size="md"
 					emphasis="subtle"
 					intent="secondary"

src/app/pipelines/RunsTab/columns.tsx

@@ -137,13 +137,15 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
 		id: "author",
 		header: "Author",
 		accessorFn: (row) => ({
-			name: row.body?.user?.body?.full_name || row.body?.user?.name
+			name: row.body?.user?.name
 		}),
 		cell: ({ getValue }) => {
 			const { name } = getValue<{
-				name: string;
+				name?: string;
 			}>();
 
+			if (!name) return null;
+
 			return <InlineAvatar username={name} />;
 		}
 	},

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

@@ -7,6 +7,7 @@ import { Skeleton } from "@zenml-io/react-component-library";
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { RunActionsMenu } from "./RunActionMenu";
+import { RunRefreshGroup } from "@/components/runs/refresh-group";
 
 export function RunsDetailHeader() {
 	const { runId } = useParams() as { runId: string };
@@ -42,7 +43,10 @@ export function RunsDetailHeader() {
 					</>
 				)}
 			</div>
-			<RunActionsMenu />
+			<div className="flex items-center gap-1">
+				<RunRefreshGroup runId={runId} />
+				<RunActionsMenu />
+			</div>
 		</PageHeader>
 	);
 }

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

@@ -1,6 +1,7 @@
 import HorizontalDots from "@/assets/icons/dots-horizontal.svg?react";
 import Trash from "@/assets/icons/trash.svg?react";
 import {
+	Button,
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
@@ -19,9 +20,16 @@ export function RunActionsMenu() {
 			<DeleteRunAlert setOpen={setDeleteOpen} open={deleteOpen} />
 			<DropdownMenu modal={dropdownOpen} open={dropdownOpen} onOpenChange={setDropdownOpen}>
 				<DropdownMenu>
-					<DropdownMenuTrigger className="z-10">
-						<HorizontalDots className="h-5 w-5 shrink-0 fill-theme-text-secondary" />
-						<p className="sr-only">Run Actions</p>
+					<DropdownMenuTrigger asChild>
+						<Button
+							intent="secondary"
+							className="flex aspect-square items-center justify-center p-0"
+							emphasis="minimal"
+							size="md"
+						>
+							<HorizontalDots className="h-5 w-5 shrink-0 fill-theme-text-secondary" />
+							<p className="sr-only">Run Actions</p>
+						</Button>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent className="z-10" align="end" sideOffset={1}>
 						<DropdownMenuItem onClick={() => setDeleteOpen(true)} className="space-x-2">

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

@@ -5,17 +5,29 @@ import {
 	CollapsibleContent,
 	CollapsibleHeader,
 	CollapsiblePanel,
-	CollapsibleTrigger
+	CollapsibleTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
 } from "@zenml-io/react-component-library";
 import { useState } from "react";
 
 type Props = {
 	run: PipelineRun;
 };
 
+const PYTHON_PACKAGES_KEY = "python_packages";
+
 export function EnvironmentCollapsible({ run }: Props) {
 	const [open, setOpen] = useState(true);
 
+	const executionEnvironment = run.metadata?.orchestrator_environment;
+	const clientEnvironment = run.metadata?.client_environment;
+
+	const normalizedExecutionEnvironment = normalizePythonPackages(executionEnvironment ?? {});
+	const normalizedClientEnvironment = normalizePythonPackages(clientEnvironment ?? {});
+
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
 			<CollapsibleHeader intent="primary" className="flex items-center gap-[10px]">
@@ -32,16 +44,65 @@ export function EnvironmentCollapsible({ run }: Props) {
 				<NestedCollapsible
 					isInitialOpen
 					intent="secondary"
-					title="Client Environment"
-					data={run.metadata?.client_environment}
+					title={
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span>Client Environment</span>
+								</TooltipTrigger>
+								<TooltipContent className="max-w-[200px] whitespace-normal xl:max-w-[300px]">
+									Environment where you start your pipeline run by calling the pipeline function.{" "}
+									<a
+										rel="noopener noreferrer"
+										className="link"
+										href="https://docs.zenml.io/user-guides/best-practices/configure-python-environments#client-environment-or-the-runner-environment"
+										target="_blank"
+									>
+										Learn more about client environments
+									</a>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					}
+					data={normalizedClientEnvironment}
 				/>
 				<NestedCollapsible
 					isInitialOpen
 					intent="secondary"
-					title="Orchestrator Environment"
-					data={run.metadata?.orchestrator_environment}
+					title={
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span>Execution Environment</span>
+								</TooltipTrigger>
+								<TooltipContent className="max-w-[200px] whitespace-normal xl:max-w-[300px]">
+									Environment where your ZenML steps get executed.{" "}
+									<a
+										rel="noopener noreferrer"
+										className="link"
+										href="https://docs.zenml.io/user-guides/best-practices/configure-python-environments#execution-environments"
+										target="_blank"
+									>
+										Learn more about exectuion environments
+									</a>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					}
+					data={normalizedExecutionEnvironment}
 				/>
 			</CollapsibleContent>
 		</CollapsiblePanel>
 	);
 }
+
+function normalizePythonPackages(env: Record<string, unknown>) {
+	const pythonPackages = env[PYTHON_PACKAGES_KEY];
+	if (typeof pythonPackages === "string") {
+		return {
+			...env,
+			[PYTHON_PACKAGES_KEY]: pythonPackages.split("\n").map((pkg) => pkg.trim())
+		};
+	}
+	return env;
+}

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

@@ -1,5 +1,6 @@
 import ChevronDown from "@/assets/icons/chevron-down.svg?react";
 import { NestedCollapsible } from "@/components/NestedCollapsible";
+import { NotAvailable } from "@/components/not-available";
 import { pipelineDeploymentQueries } from "@/data/pipeline-deployments";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -37,7 +38,7 @@ export function PipelineParamsCollapsible({ deploymentId }: Props) {
 					Pipeline Parameters
 				</CollapsibleHeader>
 				<CollapsibleContent className="border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
-					Not available
+					<NotAvailable />
 				</CollapsibleContent>
 			</CollapsiblePanel>
 		);

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

@@ -11,7 +11,10 @@ import { PipelineParamsCollapsible } from "./ParameterCollapsible";
 
 export function ConfigurationTab() {
 	const { runId } = useParams() as { runId: string };
-	const { data, isError, isPending } = usePipelineRun({ runId: runId }, { throwOnError: true });
+	const { data, isError, isPending } = usePipelineRun(
+		{ runId: runId, queryParams: { include_python_packages: true } },
+		{ throwOnError: true }
+	);
 	const { data: buildData } = usePipelineBuild(
 		{
 			buildId: data?.body?.build?.id as string

src/app/settings/members/columns.tsx

@@ -1,6 +1,5 @@
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
-import { getUsername } from "@/lib/user";
 import { User, UserBody } from "@/types/user";
 import { ColumnDef } from "@tanstack/react-table";
 import { Badge } from "@zenml-io/react-component-library";
@@ -71,7 +70,7 @@ export function columns({ isAdmin }: Props): ColumnDef<User>[] {
 						header: "",
 						accessorFn: (row) => ({
 							id: row.id,
-							name: getUsername(row)
+							name: row.name
 						}),
 						meta: {
 							width: "5%"

src/app/settings/page.tsx

@@ -1,10 +1,9 @@
+import { InlineAvatar } from "@/components/InlineAvatar";
 import { useCurrentUser } from "@/data/users/current-user-query";
+import { Skeleton } from "@zenml-io/react-component-library";
 import { Outlet } from "react-router-dom";
 import { DisplayServer, ProfileSettingsMenu, ServerSettingsMenu } from "./LayoutSidebar";
-import { InlineAvatar } from "@/components/InlineAvatar";
 import { VersionDisplay } from "./VersionDisplay";
-import { getUsername } from "@/lib/user";
-import { Skeleton } from "@zenml-io/react-component-library";
 
 export default function SettingsPage() {
 	const { data } = useCurrentUser();
@@ -20,7 +19,7 @@ export default function SettingsPage() {
 				{data ? (
 					<div className="flex flex-col gap-4">
 						<p className="text-text-xs font-semibold uppercase text-theme-text-tertiary">Account</p>
-						<InlineAvatar username={getUsername(data)} />
+						<InlineAvatar username={data.name} />
 					</div>
 				) : (
 					<Skeleton className="h-[70px] w-full" />

src/app/settings/profile/page.tsx

@@ -1,7 +1,6 @@
 import { Avatar, AvatarFallback, Box, Skeleton } from "@zenml-io/react-component-library";
 import { UpdateProfileForm } from "./UpdateProfileForm";
 import { useCurrentUser } from "@/data/users/current-user-query";
-import { getUsername } from "@/lib/user";
 
 export default function ProfilePage() {
 	const { data: user } = useCurrentUser();
@@ -15,7 +14,7 @@ export default function ProfilePage() {
 				{user ? (
 					<Avatar size="xxl" className="ml-5 h-[140px] w-[140px]" type="rounded">
 						<AvatarFallback className="text-display-lg" size="xxl">
-							{getUsername(user)[0]}
+							{user.name[0]}
 						</AvatarFallback>
 					</Avatar>
 				) : (

src/app/settings/secrets/columns.tsx

@@ -3,10 +3,8 @@ import { CopyButton } from "@/components/CopyButton";
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
 import { getSecretSnippet } from "@/lib/code-snippets";
-import { getUsername } from "@/lib/user";
 import { routes } from "@/router/routes";
 import { SecretNamespace } from "@/types/secret";
-import { User } from "@/types/user";
 import { ColumnDef } from "@tanstack/react-table";
 import { Link } from "react-router-dom";
 import SecretsDropdown from "./SecretsDropdown";
@@ -54,14 +52,11 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
 	{
 		id: "author",
 		header: "Author",
-		accessorFn: (row) => row.body?.user,
+		accessorFn: (row) => row.body?.user?.name,
 		cell: ({ getValue }) => {
-			const user = getValue<User>();
-			return (
-				<>
-					<InlineAvatar username={getUsername(user)} />
-				</>
-			);
+			const name = getValue<string>();
+			if (!name) return null;
+			return <InlineAvatar username={name} />;
 		}
 	},
 	{

src/app/settings/service-accounts/DeleteAlert.tsx

@@ -21,7 +21,7 @@ export function DeleteServiceAccountAlert() {
 		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
 			<AlertDialogTrigger asChild>
 				<Button
-					className="rounded-sharp border-none bg-white"
+					className="rounded-sharp border-y-0 bg-white"
 					size="md"
 					emphasis="subtle"
 					intent="secondary"

src/app/settings/service-accounts/[service-account-id]/DeleteApiKeyDialog.tsx

@@ -21,7 +21,7 @@ export function DeleteApiKey({ serviceAccountId }: { serviceAccountId: string })
 		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
 			<AlertDialogTrigger asChild>
 				<Button
-					className="rounded-sharp border-none bg-white"
+					className="rounded-sharp border-y-0 bg-white"
 					size="md"
 					emphasis="subtle"
 					intent="secondary"

src/app/stacks/columns.tsx

@@ -2,9 +2,7 @@ import { CopyButton } from "@/components/CopyButton";
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
 import { StackSheet } from "@/components/stacks/Sheet";
-import { getUsername } from "@/lib/user";
 import { Stack } from "@/types/stack";
-import { User } from "@/types/user";
 import { ColumnDef } from "@tanstack/react-table";
 import { Avatar, AvatarFallback } from "@zenml-io/react-component-library";
 import { useMemo } from "react";
@@ -52,11 +50,11 @@ export function useStackColumns(): ColumnDef<Stack>[] {
 		{
 			id: "author",
 			header: "Author",
-			accessorFn: (row) => ({ author: row.body?.user }),
+			accessorFn: (row) => ({ author: row.body?.user?.name }),
 			cell: ({ getValue }) => {
-				const { author } = getValue<{ author?: User }>();
+				const { author } = getValue<{ author?: string }>();
 				if (!author) return null;
-				return <InlineAvatar username={getUsername(author)} />;
+				return <InlineAvatar username={author} />;
 			}
 		},
 		{

src/app/stacks/create/components/sharedSchema.ts

@@ -5,6 +5,5 @@ export const stackNameSchema = z
 	.string()
 	.trim()
 	.min(1, "Stack name is required")
-	.max(32, "Stack name must be less than 32 characters")
-	.regex(/^[a-zA-Z0-9-]+$/, "Stack name can only contain alphanumeric characters and hyphens")
+	.max(255, "Stack name must be less than 255 characters")
 	.refine((name) => validateStackName(name), "Stack name is already in use");