From cccb9691f9f2fc856057accaeca0310beaa541e3 Mon Sep 17 00:00:00 2001
From: Bruno Clermont <bruno.clermont@gmail.com>
Date: Mon, 29 Jun 2026 10:27:07 -0400
Subject: [PATCH] fix(mcp): Update button silently doing nothing due to hidden
 Zod validation errors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/web/src/pages/mcp/mcp-connection-fields.tsx | 2 +-
 ui/web/src/pages/mcp/mcp-form-dialog.tsx       | 8 +++++++-
 ui/web/src/pages/mcp/mcp-settings-fields.tsx   | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/web/src/pages/mcp/mcp-connection-fields.tsx b/ui/web/src/pages/mcp/mcp-connection-fields.tsx
index 1f16fbef..c00a3a60 100644
--- a/ui/web/src/pages/mcp/mcp-connection-fields.tsx
+++ b/ui/web/src/pages/mcp/mcp-connection-fields.tsx
@@ -90,7 +90,7 @@ export function McpConnectionFields({ form }: McpConnectionFieldsProps) {
             <Label>{t("form.headers")}</Label>
             <KeyValueEditor
               value={headers}
-              onChange={(v) => setValue("headers", v)}
+              onChange={(v) => setValue("headers", v, { shouldDirty: true, shouldValidate: true })}
               keyPlaceholder={t("form.headerKeyPlaceholder")}
               valuePlaceholder={t("form.headerValuePlaceholder")}
               addLabel={t("form.addHeader")}
diff --git a/ui/web/src/pages/mcp/mcp-form-dialog.tsx b/ui/web/src/pages/mcp/mcp-form-dialog.tsx
index 159ce01f..07254a85 100644
--- a/ui/web/src/pages/mcp/mcp-form-dialog.tsx
+++ b/ui/web/src/pages/mcp/mcp-form-dialog.tsx
@@ -46,6 +46,7 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest, on
   const [createdServer, setCreatedServer] = useState<MCPServerData | null>(null);
 
   const form = useForm<MCPFormData>({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     resolver: zodResolver(mcpFormSchema),
     mode: "onChange",
     defaultValues: {
@@ -286,6 +287,11 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest, on
           <McpConnectionFields form={form} />
           <McpSettingsFields form={form} isEditing={!!server} />
           {error && <p className="text-sm text-destructive">{error}</p>}
+          {Object.keys(form.formState.errors).length > 0 && !error && (
+            <p className="text-sm text-destructive">
+              {Object.values(form.formState.errors).map(e => e?.message).filter(Boolean).join(", ")}
+            </p>
+          )}
         </div>
 
         <DialogFooter className="flex-col sm:flex-row gap-2">
@@ -321,7 +327,7 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest, on
             <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
               {t("form.cancel")}
             </Button>
-            <Button onClick={handleSubmit} disabled={loading}>
+            <Button type="button" onClick={handleSubmit} disabled={loading}>
               {loading ? t("form.saving") : (server || createdServer) ? t("form.update") : t("form.create")}
             </Button>
           </div>
diff --git a/ui/web/src/pages/mcp/mcp-settings-fields.tsx b/ui/web/src/pages/mcp/mcp-settings-fields.tsx
index dbee08b8..c31c7c52 100644
--- a/ui/web/src/pages/mcp/mcp-settings-fields.tsx
+++ b/ui/web/src/pages/mcp/mcp-settings-fields.tsx
@@ -49,7 +49,7 @@ export function McpSettingsFields({ form, isEditing }: McpSettingsFieldsProps) {
         <Label>{t("form.env")}</Label>
         <KeyValueEditor
           value={env}
-          onChange={(v) => setValue("env", v)}
+          onChange={(v) => setValue("env", v, { shouldDirty: true, shouldValidate: true })}
           keyPlaceholder={t("form.envKeyPlaceholder")}
           valuePlaceholder={t("form.envValuePlaceholder")}
           addLabel={t("form.addVariable")}
@@ -246,7 +246,7 @@ export function McpSettingsFields({ form, isEditing }: McpSettingsFieldsProps) {
           id="mcp-timeout"
           type="number"
           value={timeout}
-          onChange={(e) => setValue("timeout", Number(e.target.value))}
+          onChange={(e) => setValue("timeout", parseInt(e.target.value, 10) || 60, { shouldValidate: true })}
           min={1}
         />
       </div>