From e50a31ad5c1ea6ed81910a0894ad4d88afbfcbd1 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Sat, 16 May 2026 15:18:06 -0700
Subject: [PATCH] fix(ui): don't require blank auth fields in model edit
 context
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auth fields render blank ('leave blank to keep'), but required metadata
(e.g. OpenAI api_key) added a required validation rule that blocked
onFinish entirely — making it impossible to save any unrelated edit
without re-entering the secret. Add a disableRequired prop to
ProviderSpecificFields and set it in the model edit Authentication section.
---
 .../src/components/add_model/provider_specific_fields.tsx | 8 +++++++-
 ui/litellm-dashboard/src/components/model_info_view.tsx   | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/add_model/provider_specific_fields.tsx b/ui/litellm-dashboard/src/components/add_model/provider_specific_fields.tsx
index 3fbad31db78..090e6e395b8 100644
--- a/ui/litellm-dashboard/src/components/add_model/provider_specific_fields.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/provider_specific_fields.tsx
@@ -14,6 +14,11 @@ interface ProviderSpecificFieldsProps {
   // inputs (e.g. the model edit form has a dedicated "API Base" field) so we
   // don't create a duplicate Form.Item bound to the same name.
   excludeKeys?: string[];
+  // Drop the "required" validation rule from every rendered field. Used in the
+  // model edit context, where auth fields render blank ("leave blank to keep")
+  // — a required rule would block onFinish and prevent saving any unrelated
+  // edit unless the user re-enters the secret.
+  disableRequired?: boolean;
 }
 
 interface ProviderCredentialField {
@@ -132,6 +137,7 @@ const ProviderSpecificFields: React.FC<ProviderSpecificFieldsProps> = ({
   selectedProvider,
   uploadProps,
   excludeKeys,
+  disableRequired,
 }) => {
   const selectedProviderEnum = Providers[selectedProvider as keyof typeof Providers] as Providers;
   const form = Form.useFormInstance(); // Get form instance from context
@@ -267,7 +273,7 @@ const ProviderSpecificFields: React.FC<ProviderSpecificFieldsProps> = ({
           <Form.Item
             label={field.label}
             name={field.key}
-            rules={field.required ? [{ required: true, message: "Required" }] : undefined}
+            rules={field.required && !disableRequired ? [{ required: true, message: "Required" }] : undefined}
             tooltip={field.tooltip}
             className={field.key === "vertex_credentials" ? "mb-0" : undefined}
           >
diff --git a/ui/litellm-dashboard/src/components/model_info_view.tsx b/ui/litellm-dashboard/src/components/model_info_view.tsx
index afa9bc6331a..ad859f7da66 100644
--- a/ui/litellm-dashboard/src/components/model_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/model_info_view.tsx
@@ -1126,6 +1126,7 @@ export default function ModelInfoView({
                               <ProviderSpecificFields
                                 selectedProvider={authProvider}
                                 excludeKeys={AUTH_FIELD_EXCLUDE_KEYS}
+                                disableRequired
                               />
                             </div>
                           )}