From d4e08f4ae2b677003cba4b24eae4171bd9f8ac6d Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 23 Apr 2026 21:20:25 +0000 Subject: [PATCH] feat(ui): SearchTools/SearchConnectionTest to shadcn - antd Button/Divider/Typography + antd icons (InfoCircleOutlined, WarningOutlined) + inline SVG check \u2192 shadcn Button + lucide AlertTriangle/CheckCircle2/Info/Loader2. - Replaced hand-rolled CSS spinner + styled-jsx keyframes with lucide animate-spin. - Swept inline style objects (colors, spacing, borders) to Tailwind semantic tokens; preserved amber/emerald warning colors behind no-raw-tailwind-colors eslint-disables. Gates: TS \u2713 | Build \u2713. Co-authored-by: yuneng-jiang --- .../SearchTools/SearchConnectionTest.tsx | 271 ++++++++---------- 1 file changed, 116 insertions(+), 155 deletions(-) diff --git a/ui/litellm-dashboard/src/components/SearchTools/SearchConnectionTest.tsx b/ui/litellm-dashboard/src/components/SearchTools/SearchConnectionTest.tsx index a8472cb1f8a..2bbd593f047 100644 --- a/ui/litellm-dashboard/src/components/SearchTools/SearchConnectionTest.tsx +++ b/ui/litellm-dashboard/src/components/SearchTools/SearchConnectionTest.tsx @@ -1,12 +1,11 @@ -import { InfoCircleOutlined, WarningOutlined } from "@ant-design/icons"; -import { Button, Divider, Typography } from "antd"; +import { AlertTriangle, CheckCircle2, Info, Loader2 } from "lucide-react"; +import { Button } from "@/components/ui/button"; import React, { useEffect, useState } from "react"; import NotificationsManager from "../molecules/notifications_manager"; import { testSearchToolConnection } from "../networking"; -const { Text } = Typography; - interface SearchConnectionTestProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any litellmParams: Record; accessToken: string; onTestComplete?: () => void; @@ -31,7 +30,10 @@ const SearchConnectionTest: React.FC = ({ const runTest = async () => { setIsLoading(true); try { - const result = await testSearchToolConnection(accessToken, litellmParams); + const result = await testSearchToolConnection( + accessToken, + litellmParams, + ); setTestResult(result); if (result.status === "success") { NotificationsManager.success("Connection test successful!"); @@ -39,7 +41,10 @@ const SearchConnectionTest: React.FC = ({ } catch (error) { setTestResult({ status: "error", - message: error instanceof Error ? error.message : "Unknown error occurred", + message: + error instanceof Error + ? error.message + : "Unknown error occurred", error_type: "NetworkError", }); } finally { @@ -67,19 +72,19 @@ const SearchConnectionTest: React.FC = ({ // If the error contains HTML (like a 401 page), extract just the key info if (finalError.includes("") || finalError.includes("(.*?)<\/title>/); if (titleMatch) { return titleMatch[1]; } - // If it's a 401 error - if (finalError.includes("401") || finalError.includes("Authorization Required")) { + if ( + finalError.includes("401") || + finalError.includes("Authorization Required") + ) { return "Authentication failed: Invalid API key or credentials"; } return "Authentication error - please check your API key"; } - // Limit very long error messages if (finalError.length > 200) { return finalError.substring(0, 200) + "..."; } @@ -87,38 +92,21 @@ const SearchConnectionTest: React.FC = ({ return finalError; }; - const errorMessage = testResult?.message ? getCleanErrorMessage(testResult.message) : "Unknown error"; + const errorMessage = testResult?.message + ? getCleanErrorMessage(testResult.message) + : "Unknown error"; if (isLoading) { return ( -
-
-
-
+
+
+
+
- - Testing connection to {litellmParams.search_provider || "search provider"}... - - + + Testing connection to{" "} + {litellmParams.search_provider || "search provider"}... +
); @@ -129,139 +117,113 @@ const SearchConnectionTest: React.FC = ({ } return ( -
+
{testResult.status === "success" ? ( -
-
- -
-
- +
+ +
+ Connection to {litellmParams.search_provider} successful! - + {testResult.test_query && ( - - Test query: {testResult.test_query} - + + Test query:{" "} + + {testResult.test_query} + + )} {testResult.results_count !== undefined && ( - + Results retrieved: {testResult.results_count} - + )}
) : ( - <> -
-
- - - Connection to {litellmParams.search_provider || "search provider"} failed - -
+
+
+ + + Connection to{" "} + {litellmParams.search_provider || "search provider"} failed + +
-
- - Error:{" "} - - - {errorMessage} - +
+ Error: + + {errorMessage} + - {testResult.error_type && ( -
- - Error type:{" "} - - {testResult.error_type} - - -
- )} - - {testResult.message && ( -
- -
- )} -
- - {showDetails && ( -
- - Full Error Details - - 
-                  {testResult.message}
-
+ {testResult.error_type && ( +
+ + Error type:{" "} + + {testResult.error_type} + +
)} -
- - Troubleshooting tips: - -
    -
  • Verify your API key is correct and active
    • -
  • Check if the search provider service is operational
    • -
  • Ensure you have sufficient credits/quota with the provider
    • -
  • Review the provider's documentation for any additional requirements
    • -
-
+ {testResult.message && ( +
+ +
+ )}
- + + {showDetails && ( +
+ + Full Error Details + + 
+                {testResult.message}
+
+
+ )} + + {/* eslint-disable-next-line litellm-ui/no-raw-tailwind-colors */} +
+ {/* eslint-disable-next-line litellm-ui/no-raw-tailwind-colors */} + + Troubleshooting tips: + + {/* eslint-disable-next-line litellm-ui/no-raw-tailwind-colors */} +
    +
  • Verify your API key is correct and active
    • +
  • Check if the search provider service is operational
    • +
  • + Ensure you have sufficient credits/quota with the provider +
    • +
  • + Review the provider's documentation for any additional + requirements +
    • +
+
+
)} - -
-
@@ -269,4 +231,3 @@ const SearchConnectionTest: React.FC = ({ }; export default SearchConnectionTest; -