fix: display error if tool creation failed

Update CreateTool.tsx
obot-platform · Dec 3, 2024 · 548a9bf · 548a9bf
1 parent b540b7e
commit 548a9bf
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 8 deletions.
diff --git a/ui/admin/app/components/tools/CreateTool.tsx b/ui/admin/app/components/tools/CreateTool.tsx
@@ -1,30 +1,71 @@
 import { PlusCircle } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import useSWR, { SWRResponse } from "swr";
 
-import { CreateToolReference } from "~/lib/model/toolReferences";
+import { CreateToolReference, ToolReference } from "~/lib/model/toolReferences";
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { useAsync } from "~/hooks/useAsync";
 
 interface CreateToolProps {
+    onError: (error: string) => void;
     onSuccess: () => void;
 }
 
-export function CreateTool({ onSuccess }: CreateToolProps) {
+export function CreateTool({ onError, onSuccess }: CreateToolProps) {
     const { register, handleSubmit, reset } = useForm<CreateToolReference>();
 
+    const [loadingToolId, setLoadingToolId] = useState("");
+    const getLoadingTool: SWRResponse<ToolReference, Error> = useSWR(
+        loadingToolId
+            ? ToolReferenceService.getToolReferenceById.key(loadingToolId)
+            : null,
+        ({ toolReferenceId }) =>
+            ToolReferenceService.getToolReferenceById(toolReferenceId),
+        {
+            revalidateOnFocus: false,
+            refreshInterval: 2000,
+        }
+    );
+
+    const handleCreatedTool = useCallback(
+        (loadedTool: ToolReference) => {
+            setLoadingToolId("");
+            reset();
+            if (loadedTool.error) {
+                onError(loadedTool.error);
+            } else {
+                onSuccess();
+            }
+        },
+        [onError, reset, onSuccess]
+    );
+
+    useEffect(() => {
+        if (!loadingToolId) return;
+
+        const { isLoading, data } = getLoadingTool;
+        if (isLoading) return;
+
+        if (data?.resolved) {
+            handleCreatedTool(data);
+        }
+    }, [getLoadingTool, handleCreatedTool, loadingToolId]);
+
     const { execute: onSubmit, isLoading } = useAsync(
         async (data: CreateToolReference) => {
-            await ToolReferenceService.createToolReference({
+            const response = await ToolReferenceService.createToolReference({
                 toolReference: { ...data, toolType: "tool" },
             });
-            reset();
-            onSuccess();
+
+            setLoadingToolId(response.id);
         }
     );
 
+    const pending = isLoading || !!loadingToolId;
     return (
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <div>
@@ -37,9 +78,9 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
                 />
             </div>
             <div className="flex justify-end">
-                <Button type="submit" disabled={isLoading}>
+                <Button type="submit" disabled={pending}>
                     <PlusCircle className="w-4 h-4 mr-2" />
-                    {isLoading ? "Creating..." : "Register Tool"}
+                    {pending ? "Creating..." : "Register Tool"}
                 </Button>
             </div>
         </form>

diff --git a/ui/admin/app/lib/model/toolReferences.ts b/ui/admin/app/lib/model/toolReferences.ts
@@ -5,6 +5,7 @@ export type ToolReferenceBase = {
     name: string;
     toolType: ToolReferenceType;
     reference: string;
+    resolved?: boolean;
     metadata?: Record<string, string>;
 };
 

diff --git a/ui/admin/app/routes/_auth.tools._index.tsx b/ui/admin/app/routes/_auth.tools._index.tsx
@@ -5,6 +5,7 @@ import useSWR, { preload } from "swr";
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 
 import { TypographyH2 } from "~/components/Typography";
+import ErrorDialog from "~/components/knowledge/ErrorDialog";
 import { CreateTool } from "~/components/tools/CreateTool";
 import { ToolGrid } from "~/components/tools/toolGrid";
 import { Button } from "~/components/ui/button";
@@ -38,6 +39,7 @@ export default function Tools() {
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState("");
+    const [errorDialogError, setErrorDialogError] = useState("");
 
     const handleCreateSuccess = () => {
         mutate();
@@ -49,6 +51,12 @@ export default function Tools() {
         mutate();
     };
 
+    const handleErrorDialogError = (error: string) => {
+        mutate();
+        setErrorDialogError(error);
+        setIsDialogOpen(false);
+    };
+
     return (
         <ScrollArea className="h-full p-8 flex flex-col gap-4">
             <div className="flex justify-between items-center">
@@ -81,9 +89,17 @@ export default function Tools() {
                                     agents.
                                 </DialogDescription>
                             </DialogHeader>
-                            <CreateTool onSuccess={handleCreateSuccess} />
+                            <CreateTool
+                                onError={handleErrorDialogError}
+                                onSuccess={handleCreateSuccess}
+                            />
                         </DialogContent>
                     </Dialog>
+                    <ErrorDialog
+                        error={errorDialogError}
+                        isOpen={errorDialogError !== ""}
+                        onClose={() => setErrorDialogError("")}
+                    />
                 </div>
             </div>