fix: filter out tools with unconfigured oauth provider

obot-platform · Jan 8, 2025 · e2d0c4f · e2d0c4f
1 parent dc18360
commit e2d0c4f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
@@ -116,7 +116,7 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
                     </h4>
 
                     <CardDescription>
-                        Add tools the allow the agent to perform useful actions
+                        Add tools that allow the agent to perform useful actions
                         such as searching the web, reading files, or interacting
                         with other systems.
                     </CardDescription>

diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx
@@ -2,6 +2,7 @@ import { AlertTriangleIcon, PlusIcon } from "lucide-react";
 import { useMemo } from "react";
 import useSWR from "swr";
 
+import { OAuthProvider } from "~/lib/model/oauthApps/oauth-helpers";
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 import { cn } from "~/lib/utils";
 
@@ -21,6 +22,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "~/components/ui/dialog";
+import { useOAuthAppList } from "~/hooks/oauthApps/useOAuthApps";
 
 type ToolCatalogProps = React.HTMLAttributes<HTMLDivElement> & {
     tools: string[];
@@ -42,18 +44,38 @@ export function ToolCatalog({
         { fallbackData: {} }
     );
 
-    const sortedCategories = useMemo(() => {
-        return Object.entries(toolCategories).sort(
-            ([nameA, categoryA], [nameB, categoryB]): number => {
-                const aHasBundle = categoryA.bundleTool ? 1 : 0;
-                const bHasBundle = categoryB.bundleTool ? 1 : 0;
+    const oauthApps = useOAuthAppList();
+    const configuredOauthApps = useMemo(() => {
+        return new Set(
+            oauthApps
+                .filter((app) => !app.noGatewayIntegration)
+                .map((app) => app.type)
+        );
+    }, [oauthApps]);
+
+    const sortedValidCategories = useMemo(() => {
+        return (
+            Object.entries(toolCategories)
+                .sort(([nameA, categoryA], [nameB, categoryB]): number => {
+                    const aHasBundle = categoryA.bundleTool ? 1 : 0;
+                    const bHasBundle = categoryB.bundleTool ? 1 : 0;
+
+                    if (aHasBundle !== bHasBundle)
+                        return bHasBundle - aHasBundle;
 
-                if (aHasBundle !== bHasBundle) return bHasBundle - aHasBundle;
+                    return nameA.localeCompare(nameB);
+                })
+                // filter out bundles with oauth providers that are not configured
+                .filter(([, { bundleTool }]) => {
+                    if (!bundleTool) return true;
+                    const oauthType = bundleTool.metadata?.oauth;
 
-                return nameA.localeCompare(nameB);
-            }
+                    return oauthType
+                        ? configuredOauthApps.has(oauthType as OAuthProvider)
+                        : true;
+                })
         );
-    }, [toolCategories]);
+    }, [toolCategories, configuredOauthApps]);
 
     if (isLoading) return <LoadingSpinner />;
 
@@ -82,7 +104,7 @@ export function ToolCatalog({
                         No results found.
                     </h1>{" "}
                 </CommandEmpty>
-                {sortedCategories.map(([category, categoryTools]) => (
+                {sortedValidCategories.map(([category, categoryTools]) => (
                     <ToolCatalogGroup
                         key={category}
                         category={category}

diff --git a/ui/admin/app/components/workflow/Workflow.tsx b/ui/admin/app/components/workflow/Workflow.tsx
@@ -81,7 +81,7 @@ function WorkflowContent({ className }: WorkflowProps) {
                     </h4>
 
                     <CardDescription>
-                        Add tools the allow the agent to perform useful actions
+                        Add tools that allow the agent to perform useful actions
                         such as searching the web, reading files, or interacting
                         with other systems.
                     </CardDescription>

diff --git a/ui/admin/app/hooks/cronjob/useCronjob.tsx b/ui/admin/app/hooks/cronjob/useCronjob.tsx
@@ -11,9 +11,9 @@ export function useCronjob(workflowId?: string) {
         CronJobApiService.getCronJobs()
     );
 
-    const cronJobs = getCronJobs.data?.filter(
-        (cronJob) => cronJob.workflow === workflowId
-    );
+    const cronJobs = getCronJobs.data
+        ?.filter((cronJob) => cronJob.workflow === workflowId)
+        .sort((cronJobA, cronJobB) => cronJobA.id.localeCompare(cronJobB.id));
 
     const createCronJob = useAsync(CronJobApiService.createCronJob, {
         onError: (error) => {
@@ -47,7 +47,7 @@ export function useCronjob(workflowId?: string) {
         const cronJobIndex = getCronJobs.data?.findIndex(
             (cronJob) => cronJob.id === cronJobId
         );
-        if (!cronJobIndex) return;
+        if (cronJobIndex === undefined) return;
 
         existingCronJobs[cronJobIndex] = {
             ...existingCronJobs[cronJobIndex],