enhance: greyed out tool if oauth is unconfigured (#1164)

obot-platform · Jan 9, 2025 · d17407c · d17407c
1 parent c7604ed
commit d17407c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 30 deletions.
diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx
@@ -52,33 +52,27 @@ export function ToolCatalog({
 	const configuredOauthApps = useMemo(() => {
 		return new Set(
 			oauthApps
-				.filter((app) => !app.noGatewayIntegration)
+				.filter(
+					(app) =>
+						!app.noGatewayIntegration ||
+						(app.noGatewayIntegration && app.appOverride)
+				)
 				.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;
-
-					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 oauthType
-						? configuredOauthApps.has(oauthType as OAuthProvider)
-						: true;
-				})
+		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;
+
+				return nameA.localeCompare(nameB);
+			}
 		);
-	}, [toolCategories, configuredOauthApps]);
+	}, [toolCategories]);
 
 	if (isLoading) return <LoadingSpinner />;
 
@@ -111,6 +105,13 @@ export function ToolCatalog({
 					<ToolCatalogGroup
 						key={category}
 						category={category}
+						configured={
+							categoryTools.bundleTool?.metadata?.oauth
+								? configuredOauthApps.has(
+										categoryTools.bundleTool.metadata.oauth as OAuthProvider
+									)
+								: true
+						}
 						tools={categoryTools}
 						selectedTools={tools}
 						onUpdateTools={onUpdateTools}

diff --git a/ui/admin/app/components/tools/ToolCatalogGroup.tsx b/ui/admin/app/components/tools/ToolCatalogGroup.tsx
@@ -8,12 +8,14 @@ import { CommandGroup } from "~/components/ui/command";
 
 export function ToolCatalogGroup({
 	category,
+	configured,
 	tools,
 	selectedTools,
 	onUpdateTools,
 	expandFor,
 }: {
 	category: string;
+	configured: boolean;
 	tools: ToolCategory;
 	selectedTools: string[];
 	onUpdateTools: (tools: string[]) => void;
@@ -74,6 +76,7 @@ export function ToolCatalogGroup({
 			{tools.bundleTool && (
 				<ToolItem
 					tool={tools.bundleTool}
+					configured={configured}
 					isSelected={selectedTools.includes(tools.bundleTool.id)}
 					isBundleSelected={false}
 					onSelect={() => handleSelectBundle(tools.bundleTool!.id)}
@@ -87,6 +90,7 @@ export function ToolCatalogGroup({
 				tools.tools.map((categoryTool) => (
 					<ToolItem
 						key={categoryTool.id}
+						configured={configured}
 						tool={categoryTool}
 						isSelected={selectedTools.includes(categoryTool.id)}
 						isBundleSelected={

diff --git a/ui/admin/app/components/tools/ToolItem.tsx b/ui/admin/app/components/tools/ToolItem.tsx
@@ -1,3 +1,5 @@
+import { TriangleAlertIcon } from "lucide-react";
+
 import { ToolReference } from "~/lib/model/toolReferences";
 import { cn } from "~/lib/utils";
 
@@ -9,6 +11,7 @@ import { CommandItem } from "~/components/ui/command";
 
 type ToolItemProps = {
 	tool: ToolReference;
+	configured: boolean;
 	isSelected: boolean;
 	isBundleSelected: boolean;
 	onSelect: () => void;
@@ -20,6 +23,7 @@ type ToolItemProps = {
 
 export function ToolItem({
 	tool,
+	configured,
 	isSelected,
 	isBundleSelected,
 	onSelect,
@@ -31,10 +35,10 @@ export function ToolItem({
 	return (
 		<CommandItem
 			className={cn("cursor-pointer", className)}
-			onSelect={onSelect}
+			onSelect={configured ? onSelect : undefined}
 			disabled={isBundleSelected}
 		>
-			<ToolTooltip tool={tool}>
+			<ToolTooltip tool={tool} requiresConfiguration={!configured}>
 				<div className={cn("flex w-full items-center justify-between gap-2")}>
 					<span
 						className={cn(
@@ -44,9 +48,15 @@ export function ToolItem({
 							}
 						)}
 					>
-						<Checkbox checked={isSelected || isBundleSelected} />
+						{configured ? (
+							<Checkbox checked={isSelected || isBundleSelected} />
+						) : isBundle ? (
+							<TriangleAlertIcon className="h-4 w-4 text-warning opacity-50" />
+						) : null}
 
-						<span className={cn("flex items-center")}>
+						<span
+							className={cn("flex items-center", !configured && "opacity-50")}
+						>
 							<ToolIcon
 								icon={tool.metadata?.icon}
 								category={tool.metadata?.category}

diff --git a/ui/admin/app/components/tools/ToolTooltip.tsx b/ui/admin/app/components/tools/ToolTooltip.tsx
@@ -1,8 +1,10 @@
-import { WrenchIcon } from "lucide-react";
+import { TriangleAlertIcon, WrenchIcon } from "lucide-react";
+import { $path } from "safe-routes";
 
 import { ToolReference } from "~/lib/model/toolReferences";
 
 import { ToolIcon } from "~/components/tools/ToolIcon";
+import { Link } from "~/components/ui/link";
 import {
 	Tooltip,
 	TooltipContent,
@@ -12,12 +14,14 @@ import {
 type ToolTooltipProps = {
 	tool: ToolReference;
 	children: React.ReactNode;
+	requiresConfiguration?: boolean;
 	isBundle?: boolean;
 };
 
 export function ToolTooltip({
 	tool,
 	children,
+	requiresConfiguration,
 	isBundle = false,
 }: ToolTooltipProps) {
 	return (
@@ -47,6 +51,21 @@ export function ToolTooltip({
 					<p className="text-sm">
 						{tool.description || "No description provided."}
 					</p>
+					{requiresConfiguration && (
+						<>
+							<div className="flex items-center gap-1 pt-2 text-xs text-warning">
+								<span>
+									<TriangleAlertIcon className="h-4 w-4 text-warning" />
+								</span>
+								<p>
+									<Link to={$path("/oauth-apps")} className="text-xs">
+										Setup
+									</Link>{" "}
+									required to use this tool.
+								</p>
+							</div>
+						</>
+					)}
 				</div>
 			</TooltipContent>
 		</Tooltip>

diff --git a/ui/admin/app/components/workflow/steps/StepBase.tsx b/ui/admin/app/components/workflow/steps/StepBase.tsx
@@ -169,15 +169,15 @@ export function StepBase({
 
 	function hasContent() {
 		const { workflows, tools } = step;
-		if (workflows.length || tools.length) {
+		if (workflows?.length || tools?.length) {
 			return true;
 		}
 		if (type === "if" && step.if) {
 			return (
 				step.if.condition.length || step.if.else.length || step.if.steps.length
 			);
 		} else if (type === "while" && step.while) {
-			return step.while.condition.length || step.while.steps.length;
+			return step.while?.condition.length || step.while?.steps.length;
 		}
 
 		return step.step?.length;

diff --git a/ui/admin/app/lib/model/workflows.ts b/ui/admin/app/lib/model/workflows.ts
@@ -25,8 +25,8 @@ export type Step = {
 	cache: boolean;
 	temperature: number;
 	tools: string[];
-	agents: string[];
-	workflows: string[];
+	agents?: string[];
+	workflows?: string[];
 };
 
 export type Template = {