fix: revert back the alert when clicking "Test Connection" button when adding an MCP, remove toast

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { Server } from "lucide-react";
+import { CheckCircle2, ChevronDown, ChevronUp, Server, XCircle } from "lucide-react";
 import { type FC, useRef, useState } from "react";
-import { toast } from "sonner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -13,6 +12,7 @@ import {
 	extractServerName,
 	parseMCPConfig,
 	testMCPConnection,
+	type MCPConnectionTestResult,
 } from "../../utils/mcp-config-validator";
 
 export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting }) => {
@@ -20,6 +20,8 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 	const [configJson, setConfigJson] = useState("");
 	const [jsonError, setJsonError] = useState<string | null>(null);
 	const [isTesting, setIsTesting] = useState(false);
+	const [showDetails, setShowDetails] = useState(false);
+	const [testResult, setTestResult] = useState<MCPConnectionTestResult | null>(null);
 
 	const DEFAULT_CONFIG = JSON.stringify(
 		{
@@ -65,26 +67,19 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 	const handleTestConnection = async () => {
 		const serverConfig = parseConfig();
 		if (!serverConfig) {
-			toast.error("Invalid configuration", {
+			setTestResult({
-				description: jsonError || "Please check your MCP server configuration JSON.",
+				status: "error",
+				message: jsonError || "Invalid configuration",
+				tools: [],
 			});
 			return;
 		}
 
 		setIsTesting(true);
+		setTestResult(null);
 
 		const result = await testMCPConnection(serverConfig);
-		
+		setTestResult(result);
-		if (result.status === "success") {
-			toast.success("Connection Successful", {
-				description: result.message,
-			});
-		} else {
-			toast.error("Connection Failed", {
-				description: result.message,
-			});
-		}
-		
 		setIsTesting(false);
 	};
 
@@ -153,17 +148,82 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 						</p>
 					</div>
 
+					{/* Test Connection */}
 					<div className="pt-4">
 						<Button
 							type="button"
 							onClick={handleTestConnection}
 							disabled={isTesting}
-							variant="outline"
+							variant="secondary"
-							className="w-full"
+							className="w-full h-8 text-[13px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80"
 						>
 							{isTesting ? "Testing Connection" : "Test Connection"}
 						</Button>
 					</div>
+
+					{/* Test Result */}
+					{testResult && (
+						<Alert
+							className={
+								testResult.status === "success"
+									? "border-green-500/50 bg-green-500/10"
+									: "border-red-500/50 bg-red-500/10"
+							}
+						>
+							{testResult.status === "success" ? (
+								<CheckCircle2 className="h-4 w-4 text-green-600" />
+							) : (
+								<XCircle className="h-4 w-4 text-red-600" />
+							)}
+							<div className="flex-1">
+								<div className="flex items-center justify-between">
+									<AlertTitle className="text-sm">
+										{testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
+									</AlertTitle>
+									{testResult.tools.length > 0 && (
+										<Button
+											type="button"
+											variant="ghost"
+											size="sm"
+											className="h-6 px-2"
+											onClick={(e) => {
+												e.preventDefault();
+												e.stopPropagation();
+												setShowDetails(!showDetails);
+											}}
+										>
+											{showDetails ? (
+												<>
+													<ChevronUp className="h-3 w-3 mr-1" />
+													Hide Details
+												</>
+											) : (
+												<>
+													<ChevronDown className="h-3 w-3 mr-1" />
+													Show Details
+												</>
+											)}
+										</Button>
+									)}
+								</div>
+								<AlertDescription className="text-xs mt-1">
+									{testResult.message}
+									{showDetails && testResult.tools.length > 0 && (
+										<div className="mt-3 pt-3 border-t border-green-500/20">
+											<p className="font-semibold mb-2">
+												Available tools:
+											</p>
+											<ul className="list-disc list-inside text-xs space-y-0.5">
+												{testResult.tools.map((tool) => (
+													<li key={tool.name}>{tool.name}</li>
+												))}
+											</ul>
+										</div>
+									)}
+								</AlertDescription>
+							</div>
+						</Alert>
+					)}
 				</div>
 			</form>
 		</div>

surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx

@@ -176,7 +176,7 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 							variant="secondary"
 							className="w-full h-8 text-[13px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80"
 						>
-							{isTesting ? "Testing Connection..." : "Test Connection"}
+							{isTesting ? "Testing Connection" : "Test Connection"}
 						</Button>
 					</div>