Merge pull request #589 from ryanhopperlowe/admin/fix/473-confirm-whe…

…n-deleting-agents

feat: admin ui - confirm when deleting agents

ui/admin/app/components/agent/DeleteAgent.tsx

@@ -0,0 +1,48 @@
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+import { mutate } from "swr";
+
+import { AgentService } from "~/lib/service/api/agentService";
+
+import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
+import { Button } from "~/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+import { useAsync } from "~/hooks/useAsync";
+
+export function DeleteAgent({ id }: { id: string }) {
+    const deleteAgent = useAsync(AgentService.deleteAgent, {
+        onSuccess: () => {
+            toast.success("Agent deleted");
+            mutate(AgentService.getAgents.key());
+        },
+        onError: () => toast.error("Failed to delete agent"),
+    });
+
+    return (
+        <Tooltip>
+            <TooltipContent>Delete Agent</TooltipContent>
+
+            <ConfirmationDialog
+                title="Delete Agent?"
+                description="This action cannot be undone."
+                onConfirm={() => deleteAgent.execute(id)}
+                confirmProps={{ variant: "destructive" }}
+            >
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        disabled={deleteAgent.isLoading}
+                        loading={deleteAgent.isLoading}
+                    >
+                        <TrashIcon />
+                    </Button>
+                </TooltipTrigger>
+            </ConfirmationDialog>
+        </Tooltip>
+    );
+}

ui/admin/app/routes/_auth.agents._index.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Link, useNavigate } from "@remix-run/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { SquarePen, Trash } from "lucide-react";
+import { SquarePen } from "lucide-react";
 import { useMemo } from "react";
 import { $path } from "remix-routes";
 import useSWR, { mutate, preload } from "swr";
@@ -13,14 +13,14 @@ import { generateRandomName } from "~/lib/service/nameGenerator";
 import { timeSince } from "~/lib/utils";
 
 import { TypographyH2, TypographyP } from "~/components/Typography";
+import { DeleteAgent } from "~/components/agent/DeleteAgent";
 import { DataTable } from "~/components/composed/DataTable";
 import { Button } from "~/components/ui/button";
 import {
     Tooltip,
     TooltipContent,
     TooltipTrigger,
 } from "~/components/ui/tooltip";
-import { useAsync } from "~/hooks/useAsync";
 
 export async function clientLoader() {
     mutate(AgentService.getAgents.key(), ThreadsService.getThreads.key());
@@ -56,13 +56,6 @@ export default function Agents() {
 
     const agents = getAgents.data || [];
 
-    const deleteAgent = useAsync(AgentService.deleteAgent, {
-        onSuccess: () => {
-            AgentService.revalidateAgents();
-            ThreadsService.revalidateThreads();
-        },
-    });
-
     return (
         <div>
             <div className="h-full p-8 flex flex-col gap-4">
@@ -177,23 +170,7 @@ export default function Agents() {
                             </TooltipContent>
                         </Tooltip>
 
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    onClick={() =>
-                                        deleteAgent.execute(row.original.id)
-                                    }
-                                >
-                                    <Trash />
-                                </Button>
-                            </TooltipTrigger>
-
-                            <TooltipContent>
-                                <p>Delete Agent</p>
-                            </TooltipContent>
-                        </Tooltip>
+                        <DeleteAgent id={row.original.id} />
                     </div>
                 ),
             }),