Merge pull request #665 from zenml-io/staging

Release

Author: Cahllagerfeld

src/app/onboarding/ProductionSetup/Items.tsx

@@ -53,11 +53,7 @@ export function RunNewPipeline({ active, completed, hasDownstreamStep }: Onboard
 				</div>
 				<div className="space-y-1">
 					<p className="text-text-sm text-theme-text-secondary">Run the pipeline</p>
-					<Codesnippet
-						wrap
-						codeClasses="whitespace-pre-wrap"
-						code="python run.py --training-pipeline"
-					/>
+					<Codesnippet wrap codeClasses="whitespace-pre-wrap" code="python run.py" />
 				</div>
 				<div>
 					<HelpBox link="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />

src/app/onboarding/StarterSetup/Items.tsx

@@ -66,7 +66,7 @@ export function RunFirstPipeline({ active, completed, hasDownstreamStep }: Onboa
 						Once it is running, your dashboard will show all the details of the associated run,
 						models, and artifacts.
 					</p>
-					<Codesnippet code="python run.py --training-pipeline" />
+					<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]">

src/app/page.tsx

@@ -1,6 +1,8 @@
 import CloudSquares from "@/assets/illustrations/cloud-squares.svg";
-import { Box } from "@zenml-io/react-component-library";
+import { Badge, Box, Button } from "@zenml-io/react-component-library";
 import { Codesnippet } from "../components/CodeSnippet";
+import External from "@/assets/icons/link-external.svg?react";
+import Codespaces from "@/assets/images/codespaces.gif";
 import { OverviewHeader } from "./Header";
 import { Link } from "react-router-dom";
 import { routes } from "@/router/routes";
@@ -9,8 +11,9 @@ export default function IndexPage() {
 	return (
 		<div>
 			<OverviewHeader />
-			<div className="layout-container py-5">
+			<div className="layout-container space-y-5 py-5">
 				<OverviewContent />
+				<VsCodeBox />
 			</div>
 		</div>
 	);
@@ -53,3 +56,33 @@ function OverviewContent() {
 		</Box>
 	);
 }
+
+function VsCodeBox() {
+	return (
+		<Box className="flex flex-col-reverse items-center overflow-hidden md:max-h-[200px] md:flex-row">
+			<div className="w-full space-y-3 px-7 py-5 xl:w-4/5">
+				<div className="flex items-center space-x-1">
+					<Badge className="text-text-xs font-semibold" color="green">
+						NEW
+					</Badge>
+					<h2 className="text-text-xl font-semibold">VS Code Quickstart with ZenML</h2>
+				</div>
+				<p className="text-theme-text-secondary">
+					Get started quickly with ZenML using GitHub Codespaces!
+					<br />
+					You can run our quickstart guide in a pre-configured environment.
+				</p>
+				<Button size="sm" className="w-fit" emphasis="subtle" asChild>
+					<a target="_blank" rel="noopener noreferrer" href="https://github.com/zenml-io/zenml">
+						Visit our GitHub repo <External className="h-5 w-5" />
+					</a>
+				</Button>
+			</div>
+			<img
+				className="object-contain"
+				src={Codespaces}
+				alt="Gif explaining how to setup codespaces"
+			/>
+		</Box>
+	);
+}

src/app/pipelines/PipelinesTab/ButtonGroup.tsx

@@ -0,0 +1,12 @@
+import { DeletePipelineAlert } from "./DeletePipelineAlert";
+import { usePipelinesSelectorContext } from "./PipelineSelectorContext";
+
+export function PipelinesButtonGroup() {
+	const { selectedPipelines } = usePipelinesSelectorContext();
+	return (
+		<div className="flex items-center divide-x divide-theme-border-moderate overflow-hidden rounded-md border border-theme-border-moderate">
+			<div className="bg-primary-25 px-2 py-1 font-semibold text-theme-text-brand">{`${selectedPipelines?.length} Pipeline${selectedPipelines?.length > 1 ? "s" : ""} selected`}</div>
+			<DeletePipelineAlert />
+		</div>
+	);
+}

src/app/pipelines/PipelinesTab/DeletePipelineAlert.tsx

@@ -0,0 +1,35 @@
+import Trash from "@/assets/icons/trash.svg?react";
+import { DeleteAlertContent } from "@/components/DeleteAlertDialog";
+import { AlertDialog, AlertDialogTrigger, Button } from "@zenml-io/react-component-library";
+import { useState } from "react";
+import { usePipelinesSelectorContext } from "./PipelineSelectorContext";
+
+export function DeletePipelineAlert() {
+	const [isOpen, setIsOpen] = useState(false);
+	const { bulkDeletePipelines, selectedPipelines } = usePipelinesSelectorContext();
+
+	async function handleDelete() {
+		await bulkDeletePipelines(selectedPipelines);
+		setIsOpen(false);
+	}
+
+	return (
+		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+			<AlertDialogTrigger>
+				<Button
+					className="rounded-sharp border-none bg-white"
+					size="md"
+					emphasis="subtle"
+					intent="secondary"
+				>
+					<Trash className="h-5 w-5 shrink-0 gap-1 fill-neutral-400" />
+					Delete
+				</Button>
+			</AlertDialogTrigger>
+			<DeleteAlertContent
+				title={`Delete Pipeline${selectedPipelines.length >= 2 ? "s" : ""}`}
+				handleDelete={handleDelete}
+			/>
+		</AlertDialog>
+	);
+}

src/app/pipelines/PipelinesTab/PipelineDropdown.tsx

@@ -0,0 +1,75 @@
+import DotsIcon from "@/assets/icons/dots-horizontal.svg?react";
+import Trash from "@/assets/icons/trash.svg?react";
+import { AlertDialogItem } from "@/components/AlertDialogDropdownItem";
+import { DeleteAlertContent } from "@/components/DeleteAlertDialog";
+import {
+	AlertDialogTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger
+} from "@zenml-io/react-component-library";
+import { ElementRef, useRef, useState } from "react";
+import { usePipelinesSelectorContext } from "./PipelineSelectorContext";
+
+type Props = {
+	id: string;
+};
+export function PipelineDropdown({ id }: Props) {
+	const [hasOpenDialog, setHasOpenDialog] = useState(false);
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const dropdownTriggerRef = useRef<ElementRef<typeof AlertDialogTrigger> | null>(null);
+	const focusRef = useRef<HTMLElement | null>(null);
+
+	const { bulkDeletePipelines } = usePipelinesSelectorContext();
+
+	async function handleDelete() {
+		await bulkDeletePipelines([id]);
+		handleDialogItemOpenChange(false);
+	}
+
+	function handleDialogItemSelect() {
+		focusRef.current = dropdownTriggerRef.current;
+	}
+
+	function handleDialogItemOpenChange(open: boolean) {
+		if (open === false) {
+			setDropdownOpen(false);
+			setTimeout(() => {
+				setHasOpenDialog(open);
+			}, 200);
+			return;
+		}
+		setHasOpenDialog(open);
+	}
+
+	return (
+		<DropdownMenu onOpenChange={setDropdownOpen} open={dropdownOpen}>
+			<DropdownMenuTrigger ref={dropdownTriggerRef}>
+				<DotsIcon className="h-4 w-4 fill-theme-text-tertiary" />
+			</DropdownMenuTrigger>
+			<DropdownMenuContent
+				hidden={hasOpenDialog}
+				onCloseAutoFocus={(event) => {
+					if (focusRef.current) {
+						focusRef.current.focus();
+						focusRef.current = null;
+						event.preventDefault();
+					}
+				}}
+				align="end"
+				sideOffset={7}
+			>
+				{/* <DropdownMenuItem ></DropdownMenuItem> */}
+				<AlertDialogItem
+					onSelect={handleDialogItemSelect}
+					open={hasOpenDialog}
+					onOpenChange={handleDialogItemOpenChange}
+					triggerChildren="Delete"
+					icon={<Trash fill="red" />}
+				>
+					<DeleteAlertContent title="Delete Pipeline" handleDelete={handleDelete} />
+				</AlertDialogItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

src/app/pipelines/PipelinesTab/PipelineSelectorContext.tsx

@@ -0,0 +1,56 @@
+import { pipelineQueries } from "@/data/pipelines";
+import { useDeletePipeline } from "@/data/pipelines/delete-pipeline";
+import { useQueryClient } from "@tanstack/react-query";
+import { useToast } from "@zenml-io/react-component-library";
+import { SetStateAction, createContext, useContext, useState } from "react";
+
+type PipelinesSelectorContextProps = {
+	selectedPipelines: string[];
+	setSelectedPipelines: (actions: SetStateAction<string[]>) => void;
+	bulkDeletePipelines: (runIds: string[]) => Promise<void>;
+};
+
+const PipelinesSelectorContext = createContext<PipelinesSelectorContextProps | null>(null);
+
+export function PipelinesSelectorProvider({ children }: { children: React.ReactNode }) {
+	const [selectedPipelines, setSelectedPipelines] = useState<string[]>([]);
+	const queryClient = useQueryClient();
+
+	const { toast } = useToast();
+
+	const deleteRunMutation = useDeletePipeline();
+
+	const bulkDeletePipelines = async (runIds: string[]) => {
+		try {
+			// Use mutateAsync to handle each delete operation
+			const deletePromises = runIds.map((id) => deleteRunMutation.mutateAsync({ pipelineId: id }));
+
+			await Promise.all(deletePromises);
+			toast({
+				description: "Deleted successfully.",
+				status: "success",
+				emphasis: "subtle",
+				rounded: true
+			});
+			await queryClient.invalidateQueries({ queryKey: pipelineQueries.all });
+			setSelectedPipelines([]);
+		} catch (error) {
+			console.error("Failed to delete some pipelines:", error);
+		}
+	};
+
+	return (
+		<PipelinesSelectorContext.Provider
+			value={{ selectedPipelines, setSelectedPipelines, bulkDeletePipelines }}
+		>
+			{children}
+		</PipelinesSelectorContext.Provider>
+	);
+}
+
+export function usePipelinesSelectorContext() {
+	const context = useContext(PipelinesSelectorContext);
+	if (!context)
+		throw new Error("usePipelinesSelectorContext must be used within a PipelinesSelectorProvider");
+	return context;
+}

src/app/pipelines/PipelinesTab/PipelinesBody.tsx

@@ -0,0 +1,51 @@
+import Refresh from "@/assets/icons/refresh.svg?react";
+import Pagination from "@/components/Pagination";
+import { SearchField } from "@/components/SearchField";
+import { pipelineQueries } from "@/data/pipelines";
+import { useQuery } from "@tanstack/react-query";
+import { Button, DataTable, Skeleton } from "@zenml-io/react-component-library";
+import { PipelinesButtonGroup } from "./ButtonGroup";
+import { getPipelineColumns } from "./columns";
+import { usePipelinesSelectorContext } from "./PipelineSelectorContext";
+import { usePipelineOverviewSearchParams } from "./service";
+
+export function PipelinesBody() {
+	const queryParams = usePipelineOverviewSearchParams();
+	const { selectedPipelines } = usePipelinesSelectorContext();
+	const { data, refetch } = useQuery({
+		...pipelineQueries.pipelineList({ ...queryParams, sort_by: "desc:latest_run" }),
+		throwOnError: true
+	});
+
+	return (
+		<div className="flex flex-col gap-5">
+			<div className="flex items-center justify-between">
+				{selectedPipelines.length ? (
+					<PipelinesButtonGroup />
+				) : (
+					<SearchField searchParams={queryParams} />
+				)}
+				<div className="flex justify-between">
+					<Button intent="primary" emphasis="subtle" size="md" onClick={() => refetch()}>
+						<Refresh className="h-5 w-5 fill-theme-text-brand" />
+						Refresh
+					</Button>
+				</div>
+			</div>
+			<div className="flex flex-col items-center gap-5">
+				<div className="w-full">
+					{data ? (
+						<DataTable columns={getPipelineColumns()} data={data.items} />
+					) : (
+						<Skeleton className="h-[500px] w-full" />
+					)}
+				</div>
+				{data ? (
+					data.total_pages > 1 && <Pagination searchParams={queryParams} paginate={data} />
+				) : (
+					<Skeleton className="h-[36px] w-[300px]" />
+				)}
+			</div>
+		</div>
+	);
+}

src/app/pipelines/PipelinesTab/PipelinesSelector.tsx

@@ -0,0 +1,27 @@
+import { Checkbox } from "@zenml-io/react-component-library";
+import { usePipelinesSelectorContext } from "./PipelineSelectorContext";
+
+type Props = {
+	id: string;
+};
+
+export const PipelinesSelector = ({ id }: Props) => {
+	const { selectedPipelines, setSelectedPipelines } = usePipelinesSelectorContext();
+
+	const handleCheck = (isChecked: boolean, id: string) => {
+		setSelectedPipelines((prevSelectedItems: any) => {
+			return isChecked
+				? [...prevSelectedItems, id]
+				: prevSelectedItems.filter((selectedItem: any) => selectedItem !== id);
+		});
+	};
+
+	return (
+		<Checkbox
+			id={id}
+			onCheckedChange={(e: boolean) => handleCheck(e, id)}
+			checked={selectedPipelines.includes(id)}
+			className="h-3 w-3"
+		/>
+	);
+};