feat: stacks fallbacks (#626)

Author: Cahllagerfeld

src/app/stacks/ActionsDropdown.tsx

@@ -0,0 +1,79 @@
+import HorizontalDots from "@/assets/icons/dots-horizontal.svg?react";
+import Edit from "@/assets/icons/edit.svg?react";
+import Trash from "@/assets/icons/trash.svg?react";
+import { DialogItem } from "@/components/dialog/DialogItem";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger
+} from "@zenml-io/react-component-library";
+import { useRef, useState } from "react";
+import { DeleteStackDialog, UpdateStackDialog } from "./DialogItems";
+
+type Props = { name: string };
+export function StackActionsMenu({ name }: Props) {
+	const [hasOpenDialog, setHasOpenDialog] = useState(false);
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+
+	const dropdownTriggerRef = useRef(null);
+	const focusRef = useRef<HTMLElement | null>(null);
+
+	function handleDialogItemSelect() {
+		focusRef.current = dropdownTriggerRef.current;
+	}
+
+	function handleDialogItemOpenChange(open: boolean) {
+		setHasOpenDialog(open);
+		if (open === false) {
+			setDropdownOpen(false);
+		}
+	}
+
+	return (
+		<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+			<DropdownMenu>
+				<DropdownMenuTrigger className="z-10" ref={dropdownTriggerRef}>
+					<HorizontalDots className="h-5 w-5 fill-theme-text-secondary" />
+				</DropdownMenuTrigger>
+				<DropdownMenuContent
+					hidden={hasOpenDialog}
+					onCloseAutoFocus={(event) => {
+						if (focusRef.current) {
+							focusRef.current.focus();
+							focusRef.current = null;
+							event.preventDefault();
+						}
+					}}
+					className="z-10"
+					align="end"
+					sideOffset={1}
+				>
+					<DialogItem
+						onSelect={handleDialogItemSelect}
+						onOpenChange={handleDialogItemOpenChange}
+						icon={<Edit className="h-3 w-3 !fill-neutral-400" />}
+						triggerChildren="Update"
+					>
+						<UpdateStackDialog
+							name={name}
+							className="lg:min-w-[600px]"
+							closeModal={() => handleDialogItemOpenChange(false)}
+						/>
+					</DialogItem>
+					<DialogItem
+						onSelect={handleDialogItemSelect}
+						onOpenChange={handleDialogItemOpenChange}
+						icon={<Trash className="h-3  w-3 !fill-neutral-400" />}
+						triggerChildren="Delete"
+					>
+						<DeleteStackDialog
+							name={name}
+							className="lg:min-w-[600px]"
+							closeModal={() => handleDialogItemOpenChange(false)}
+						/>
+					</DialogItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</DropdownMenu>
+	);
+}

src/app/stacks/DialogItems.tsx

@@ -0,0 +1,88 @@
+import { DialogContent, DialogHeader, DialogTitle } from "@zenml-io/react-component-library";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { InfoBox as InfoboxPrimitive } from "@/components/Infobox";
+import { Codesnippet } from "@/components/CodeSnippet";
+
+type Props = {
+	closeModal?: () => void;
+	name: string;
+};
+
+export const UpdateStackDialog = forwardRef<
+	ElementRef<typeof DialogContent>,
+	ComponentPropsWithoutRef<typeof DialogContent> & Props
+>(({ closeModal, name, ...rest }, ref) => {
+	return (
+		<DialogContent {...rest} ref={ref}>
+			<DialogHeader>
+				<DialogTitle>Update Stack</DialogTitle>
+			</DialogHeader>
+			<div className="space-y-5 p-7">
+				<Infobox action="update" />
+				<div className="space-y-1">
+					<p className="text-text-sm text-theme-text-secondary">Update a stack</p>
+					<Codesnippet
+						codeClasses="whitespace-pre-wrap"
+						wrap
+						code={`zenml stack update ${name} -o NEW_ORCHESTRATOR_NAME`}
+					/>
+				</div>
+			</div>
+		</DialogContent>
+	);
+});
+
+UpdateStackDialog.displayName = "UpdateStackDialog";
+
+export const DeleteStackDialog = forwardRef<
+	ElementRef<typeof DialogContent>,
+	ComponentPropsWithoutRef<typeof DialogContent> & Props
+>(({ closeModal, name, ...rest }, ref) => {
+	return (
+		<DialogContent {...rest} ref={ref}>
+			<DialogHeader>
+				<DialogTitle>Delete Stack</DialogTitle>
+			</DialogHeader>
+			<div className="space-y-5 p-7">
+				<Infobox action="delete" />
+				<div className="space-y-1">
+					<p className="text-text-sm text-theme-text-secondary">Delete a stack</p>
+					<Codesnippet codeClasses="whitespace-pre-wrap" wrap code={`zenml stack delete ${name}`} />
+				</div>
+			</div>
+		</DialogContent>
+	);
+});
+
+DeleteStackDialog.displayName = "DeleteStackDialog";
+
+type InfoProps = {
+	action: "delete" | "update" | "describe";
+};
+export function Infobox({ action }: InfoProps) {
+	function getAction() {
+		switch (action) {
+			case "delete":
+				return "delete";
+			case "update":
+				return "update";
+			case "describe":
+				return "get details of";
+		}
+	}
+
+	return (
+		<InfoboxPrimitive>
+			<div className="flex w-full flex-wrap justify-between gap-2">
+				<div className="min-w-0">
+					<p className="truncate text-text-sm font-semibold">
+						We are working on the new Stacks experience.
+					</p>
+					<p className="truncate text-text-sm">
+						Meanwhile you can use the CLI to {getAction()} your stack.
+					</p>
+				</div>
+			</div>
+		</InfoboxPrimitive>
+	);
+}

src/app/stacks/columns.tsx

@@ -5,6 +5,8 @@ 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 { StackActionsMenu } from "./ActionsDropdown";
+import { StackSheet } from "@/components/stacks/Sheet";
 
 export function getStackColumns(): ColumnDef<Stack>[] {
 	return [
@@ -21,7 +23,9 @@ export function getStackColumns(): ColumnDef<Stack>[] {
 						</Avatar>
 						<div>
 							<div className="flex items-center gap-1">
-								<h2 className="text-text-md font-semibold">{name}</h2>
+								<StackSheet stackId={id}>
+									<h2 className="text-text-md font-semibold">{name}</h2>
+								</StackSheet>
 							</div>
 							<div className="flex items-center gap-1">
 								<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>
@@ -51,6 +55,14 @@ export function getStackColumns(): ColumnDef<Stack>[] {
 				if (!author) return null;
 				return <InlineAvatar username={author.name} />;
 			}
+		},
+		{
+			id: "actions",
+			header: "",
+			accessorKey: "name",
+			cell: ({ getValue }) => {
+				return <StackActionsMenu name={getValue<string>()} />;
+			}
 		}
 	];
 }

src/app/stacks/create/new-infrastructure/Providers/AWS.tsx

@@ -1,7 +1,7 @@
 import { Tick } from "@/components/Tick";
 import { Avatar, AvatarFallback, Spinner } from "@zenml-io/react-component-library";
 import { ComponentListItem, ProviderComponents } from ".";
-import { ComponentBadge } from "../ComponentBadge";
+import { ComponentBadge } from "../../../../../components/stack-components/ComponentBadge";
 import { PermissionsCard } from "./PermissionsCard";
 
 type Props = ProviderComponents;

src/app/stacks/create/new-infrastructure/Providers/GCP.tsx

@@ -1,7 +1,7 @@
 import { Tick } from "@/components/Tick";
 import { Avatar, AvatarFallback, Spinner } from "@zenml-io/react-component-library";
 import { ComponentListItem, ProviderComponents } from ".";
-import { ComponentBadge } from "../ComponentBadge";
+import { ComponentBadge } from "../../../../../components/stack-components/ComponentBadge";
 import { PermissionsCard } from "./PermissionsCard";
 
 type Props = ProviderComponents;

src/assets/icons/dots-horizontal.svg

@@ -71,7 +71,7 @@ export function Breadcrumbs() {
 									<span
 										className={`
 											${isLastOne ? "pointer-events-none text-theme-text-primary" : "text-theme-text-secondary"}
-											ml-1 flex items-center text-text-md font-semibold capitalize`}
+											ml-1 flex items-center text-text-md font-semibold`}
 									>
 										{formatIdToTitleCase(value?.name as string)}
 									</span>
@@ -80,7 +80,7 @@ export function Breadcrumbs() {
 								<Link
 									className={`${isLastOne || segment === "settings" ? "pointer-events-none" : ""} 
 									${isLastOne ? "font-semibold text-theme-text-primary" : "text-theme-text-secondary"}
-									rounded-sm p-0.5 px-1 text-text-md  capitalize hover:text-purple-900 hover:underline`}
+									rounded-sm p-0.5 px-1 text-text-md hover:text-purple-900 hover:underline`}
 									to={matchSegmentWithURL(segment, value?.id as string)}
 								>
 									{typeof value?.name === "string" ? (

src/assets/icons/edit.svg

@@ -6,21 +6,21 @@ export const matchSegmentWithRequest = ({ segment, data }: { segment: string; da
 	const routeMap: { [key: string]: { [key: string]: { id?: string | null; name?: string } } } = {
 		// Pipelines
 		pipelines: {
-			pipelines: { id: data?.body?.pipeline?.id, name: "pipelines" }
+			pipelines: { id: data?.body?.pipeline?.id, name: "Pipelines" }
 		},
 		pipeline_detail: {
-			pipelines: { id: data?.body?.pipeline?.id, name: "pipelines" },
+			pipelines: { id: data?.body?.pipeline?.id, name: "Pipelines" },
 			pipeline_detail: { id: data?.name, name: data?.name }
 		},
 		stacks: {
-			stacks: { name: "stacks" }
+			stacks: { name: "Stacks" }
 		},
 		create_stack: {
-			stacks: { name: "stacks" },
+			stacks: { name: "Stacks" },
 			create: { name: "New Stack" }
 		},
 		runs: {
-			pipelines: { id: data?.body?.pipeline?.id, name: "pipelines" },
+			pipelines: { id: data?.body?.pipeline?.id, name: "Pipelines" },
 			pipeline_detail: {
 				id: data?.body?.pipeline?.name,
 				name: data?.body?.pipeline?.name