From 44d887d598c893be90e32fcfd40386e54de4d9c8 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 19 May 2026 06:16:51 +0000
Subject: [PATCH] fix(UserFieldsModal): align missing-check, fix preview, reuse
 serverDisplayName

- Use a shared isFieldMissing helper with the typeof string guard, matching getMissingUserFields in userFields.ts, so corrupt non-string localStorage values don't throw on .trim() and the modal/column badges agree.
- Render errorPreview from defs instead of the reactive missing array so the preview always shows the worst-case error even after the user starts filling fields.
- Reuse serverDisplayName (server_name || alias || server_id) in the save notification instead of the narrower server.server_name || "MCP server" fallback.

Co-authored-by: Yassin Kortam <yassin@berri.ai>
---
 .../components/mcp_tools/UserFieldsModal.tsx  | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/UserFieldsModal.tsx b/ui/litellm-dashboard/src/components/mcp_tools/UserFieldsModal.tsx
index 31f65c040ef..a6f6c32c212 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/UserFieldsModal.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/UserFieldsModal.tsx
@@ -42,16 +42,21 @@ const UserFieldsModal: React.FC<UserFieldsModalProps> = ({
 
   if (!server) return null;
 
-  const missing = defs.filter(
-    (f) => !values[f.name] || values[f.name].trim() === "",
-  );
+  const isFieldMissing = (name: string): boolean =>
+    !values[name] ||
+    typeof values[name] !== "string" ||
+    values[name].trim() === "";
+
+  const missing = defs.filter((f) => isFieldMissing(f.name));
   const allFilled = defs.length > 0 && missing.length === 0;
 
+  const serverDisplayName = server.server_name || server.alias || server.server_id;
+
   const handleSave = () => {
     setUserFieldValues(server.server_id, userId, values);
     NotificationsManager.success(
       allFilled
-        ? `Saved. ${server.server_name || "MCP server"} is ready to use.`
+        ? `Saved. ${serverDisplayName} is ready to use.`
         : `Saved ${defs.length - missing.length} of ${defs.length} fields.`,
     );
     onSaved();
@@ -60,8 +65,6 @@ const UserFieldsModal: React.FC<UserFieldsModalProps> = ({
     }
   };
 
-  const serverDisplayName = server.server_name || server.alias || server.server_id;
-
   const buildDeepLinkUrl = (): string => {
     if (typeof window === "undefined") {
       return `<dashboard-url>?openUserFields=${server.server_id}`;
@@ -73,8 +76,8 @@ const UserFieldsModal: React.FC<UserFieldsModalProps> = ({
 
   const errorPreview = `Error: MCP server "${serverDisplayName}" requires user configuration before use.
 
-${missing.length > 0 ? `Missing field${missing.length === 1 ? "" : "s"}:` : "All fields configured."}
-${missing.map((f) => `  • ${f.label || f.name}${f.description ? ` — ${f.description}` : ""}`).join("\n")}
+${defs.length > 0 ? `Missing field${defs.length === 1 ? "" : "s"}:` : "No fields defined."}
+${defs.map((f) => `  • ${f.label || f.name}${f.description ? ` — ${f.description}` : ""}`).join("\n")}
 
 Please configure your fields at:
 ${buildDeepLinkUrl()}
@@ -122,7 +125,7 @@ Once configured, retry your request.`;
                 ) : (
                   <Form layout="vertical">
                     {defs.map((f) => {
-                      const isMissing = !values[f.name] || values[f.name].trim() === "";
+                      const isMissing = isFieldMissing(f.name);
                       return (
                         <Form.Item
                           key={f.name}