feat: manual stack registration (#643)

Author: Cahllagerfeld

package.json

@@ -26,6 +26,7 @@
 		"@dagrejs/dagre": "^1.1.2",
 		"@fontsource/inter": "^5.0.18",
 		"@hookform/resolvers": "^3.5.0",
+		"@radix-ui/react-tabs": "^1.1.0",
 		"@tanstack/react-query": "^5.40.1",
 		"@tanstack/react-table": "^8.17.3",
 		"@tisoap/react-flow-smart-edge": "^3.0.0",

pnpm-lock.yaml

@@ -8,10 +8,12 @@ import {
 	DropdownMenuTrigger
 } from "@zenml-io/react-component-library";
 import { useRef, useState } from "react";
-import { DeleteStackDialog, UpdateStackDialog } from "./DialogItems";
+import { UpdateStackDialog } from "./DialogItems";
+import { AlertDialogItem } from "../../components/AlertDialogDropdownItem";
+import { DeleteStackDialog } from "./DeleteStackModal";
 
-type Props = { name: string };
-export function StackActionsMenu({ name }: Props) {
+type Props = { name: string; id: string };
+export function StackActionsMenu({ name, id }: Props) {
 	const [hasOpenDialog, setHasOpenDialog] = useState(false);
 	const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -60,18 +62,19 @@ export function StackActionsMenu({ name }: Props) {
 							closeModal={() => handleDialogItemOpenChange(false)}
 						/>
 					</DialogItem>
-					<DialogItem
+					<AlertDialogItem
 						onSelect={handleDialogItemSelect}
 						onOpenChange={handleDialogItemOpenChange}
 						icon={<Trash className="h-3  w-3 !fill-neutral-400" />}
 						triggerChildren="Delete"
 					>
 						<DeleteStackDialog
+							stackId={id}
 							name={name}
 							className="lg:min-w-[600px]"
 							closeModal={() => handleDialogItemOpenChange(false)}
 						/>
-					</DialogItem>
+					</AlertDialogItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
 		</DropdownMenu>

src/app/stacks/ActionsDropdown.tsx

@@ -0,0 +1,58 @@
+import {
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogTitle
+} from "@zenml-io/react-component-library";
+import { Button } from "@zenml-io/react-component-library/components/server";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { useDeleteStack } from "./useDeleteStack";
+
+type DeleteDialogProps = {
+	closeModal?: () => void;
+	name: string;
+	stackId: string;
+};
+
+export const DeleteStackDialog = forwardRef<
+	ElementRef<typeof AlertDialogContent>,
+	ComponentPropsWithoutRef<typeof AlertDialogContent> & DeleteDialogProps
+>(({ closeModal, name, stackId, ...rest }, ref) => {
+	const { handleDelete, deleteStack } = useDeleteStack(stackId);
+
+	return (
+		<AlertDialogContent {...rest} className="p-0" ref={ref}>
+			<AlertDialogTitle className="m-0 py-2 pl-5 pr-3 text-text-lg font-semibold">
+				Delete {name}
+			</AlertDialogTitle>
+			<div className="border-y border-theme-border-moderate px-5 py-5">
+				<AlertDialogDescription>
+					Are you sure you want to delete this stack? <br />
+					This action cannot be undone.
+				</AlertDialogDescription>
+			</div>
+			<div className="flex justify-end gap-3 px-5 py-3">
+				<AlertDialogCancel onClick={() => closeModal?.()} asChild>
+					<Button intent="secondary">Cancel</Button>
+				</AlertDialogCancel>
+				<Button
+					disabled={deleteStack.isPending}
+					type="button"
+					onClick={() => handleDelete()}
+					intent="danger"
+				>
+					{deleteStack.isPending && (
+						<div
+							role="alert"
+							aria-busy="true"
+							className="full h-[20px] w-[20px] animate-spin rounded-rounded border-2 border-theme-text-negative border-b-theme-text-error"
+						></div>
+					)}
+					Delete
+				</Button>
+			</div>
+		</AlertDialogContent>
+	);
+});
+
+DeleteStackDialog.displayName = "DeleteStackDialog";

src/app/stacks/DeleteStackModal.tsx

@@ -34,28 +34,6 @@ export const UpdateStackDialog = forwardRef<
 
 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";
 };