add delete option to frontend for envs

Author: jsbroks

apps/web/app/routes/ws/environments/_components/EnvironmentCard.tsx

@@ -1,13 +1,32 @@
-import { Calendar, Layers } from "lucide-react";
+import { useState } from "react";
+import { Calendar, Layers, MoreVertical, Trash2 } from "lucide-react";
 import { Link } from "react-router";
 
+import { trpc } from "~/api/trpc";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "~/components/ui/alert-dialog";
+import { Button } from "~/components/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 import { useWorkspace } from "~/components/WorkspaceProvider";
 
 type EnvironmentCardProps = {
@@ -27,8 +46,26 @@ export const EnvironmentCard: React.FC<EnvironmentCardProps> = ({
   system,
 }) => {
   const { workspace } = useWorkspace();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
   const environmentUrl = `/${workspace.slug}/environments/${environment.id}`;
+  const utils = trpc.useUtils();
+
+  const deleteEnvironment = trpc.environment.delete.useMutation({
+    onSuccess: () => {
+      void utils.environment.list.invalidate();
+    },
+  });
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    void deleteEnvironment.mutate({
+      workspaceId: workspace.id,
+      environmentId: environment.id,
+    });
+    setShowDeleteDialog(false);
+  };
 
   const formatDate = (date?: string) => {
     if (!date) return null;
@@ -40,38 +77,95 @@ export const EnvironmentCard: React.FC<EnvironmentCardProps> = ({
   };
 
   return (
-    <Link to={environmentUrl} className="block">
-      <Card className="h-56 transition-all hover:border-primary/50 hover:shadow-md">
-        <CardHeader>
-          <CardTitle className="flex items-center justify-between">
-            <span className="truncate">{environment.name}</span>
-          </CardTitle>
+    <>
+      <Link to={environmentUrl} className="block">
+        <Card className="h-56 transition-all hover:border-primary/50 hover:shadow-md">
+          <CardHeader>
+            <CardTitle className="flex items-center justify-between">
+              <span className="truncate">{environment.name}</span>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  asChild
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="end"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <DropdownMenuItem
+                    className="text-destructive focus:text-destructive"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowDeleteDialog(true);
+                    }}
+                  >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </CardTitle>
+
+            <CardDescription className="text-xs">{system.name}</CardDescription>
 
-          <CardDescription className="text-xs">{system.name}</CardDescription>
+            {environment.description && (
+              <p className="mt-2 text-xs text-muted-foreground">
+                {environment.description}
+              </p>
+            )}
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {environment.resourceSelector?.cel && (
+              <div className="flex items-start gap-2">
+                <Layers className="mt-0.5 h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                <code className="block truncate rounded bg-muted px-2 py-1 text-xs">
+                  {environment.resourceSelector.cel}
+                </code>
+              </div>
+            )}
+            {environment.createdAt && (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Calendar className="h-3 w-3" />
+                <span>Created {formatDate(environment.createdAt)}</span>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </Link>
 
-          {environment.description && (
-            <p className="mt-2 text-xs text-muted-foreground">
-              {environment.description}
-            </p>
-          )}
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {environment.resourceSelector?.cel && (
-            <div className="flex items-start gap-2">
-              <Layers className="mt-0.5 h-4 w-4 flex-shrink-0 text-muted-foreground" />
-              <code className="block truncate rounded bg-muted px-2 py-1 text-xs">
-                {environment.resourceSelector.cel}
-              </code>
-            </div>
-          )}
-          {environment.createdAt && (
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Calendar className="h-3 w-3" />
-              <span>Created {formatDate(environment.createdAt)}</span>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </Link>
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent onClick={(e) => e.stopPropagation()}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Environment</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete{" "}
+              <strong>{environment.name}</strong>? This action cannot be undone
+              and will permanently remove the environment and all its associated
+              data.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={(e) => e.stopPropagation()}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 };

packages/trpc/src/routes/environments.ts

@@ -215,4 +215,36 @@ export const environmentRouter = router({
 
       return environment;
     }),
+
+  delete: protectedProcedure
+    .input(
+      z.object({
+        workspaceId: z.uuid(),
+        environmentId: z.string(),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      const { workspaceId, environmentId } = input;
+
+      const env = await getClientFor(workspaceId).GET(
+        "/v1/workspaces/{workspaceId}/environments/{environmentId}",
+        { params: { path: { workspaceId, environmentId } } },
+      );
+
+      if (!env.data) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Environment not found",
+        });
+      }
+
+      await sendGoEvent({
+        workspaceId,
+        eventType: Event.EnvironmentDeleted,
+        timestamp: Date.now(),
+        data: env.data,
+      });
+
+      return { success: true };
+    }),
 });