fix: prevent stale budget fallback entries after form reset and guard empty payload in edit view

Address Greptile P1 (stale state after reset): use key prop to force
BudgetFallbacksEditor remount when parent resets budgetFallbacks to {},
matching the existing routerSettingsKey pattern.

Address Greptile P2 (inconsistent empty payload): guard budget_fallbacks
in edit view to only include when non-empty, matching create form behavior.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.test.tsx

@@ -68,6 +68,23 @@ describe("BudgetFallbacksEditor", () => {
     expect(labels.length).toBe(2);
   });
 
+  it("resets internal state when remounted with empty value via key prop", () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <BudgetFallbacksEditor
+        key={1}
+        value={{ "gpt-4": ["gpt-3.5-turbo"] }}
+        onChange={onChange}
+        availableModels={MODELS}
+      />,
+    );
+    expect(screen.getAllByText("Primary Model").length).toBe(1);
+
+    rerender(<BudgetFallbacksEditor key={2} value={{}} onChange={onChange} availableModels={MODELS} />);
+    expect(screen.queryByText("Primary Model")).toBeNull();
+    expect(screen.getByText("Add Budget Fallback")).toBeTruthy();
+  });
+
   it("shows ordering hint when multiple fallback models are configured", () => {
     const onChange = vi.fn();
     render(

ui/litellm-dashboard/src/components/organisms/create_key_button.tsx

@@ -204,6 +204,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
   const [routerSettings, setRouterSettings] = useState<RouterSettingsAccordionValue | null>(null);
   const [budgetLimits, setBudgetLimits] = useState<BudgetWindowEntry[]>([]);
   const [budgetFallbacks, setBudgetFallbacks] = useState<Record<string, string[]>>({});
+  const [budgetFallbacksKey, setBudgetFallbacksKey] = useState<number>(0);
   const [routerSettingsKey, setRouterSettingsKey] = useState<number>(0);
   const [agentsList, setAgentsList] = useState<{ agent_id: string; agent_name: string }[]>([]);
   const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
@@ -223,6 +224,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
     setSelectedProjectId(null);
     setBudgetLimits([]);
     setBudgetFallbacks({});
+    setBudgetFallbacksKey((k) => k + 1);
   };
 
   const handleCancel = () => {
@@ -243,6 +245,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
     setSelectedProjectId(null);
     setBudgetLimits([]);
     setBudgetFallbacks({});
+    setBudgetFallbacksKey((k) => k + 1);
   };
 
   useEffect(() => {
@@ -567,6 +570,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
       form.resetFields();
       setBudgetLimits([]);
       setBudgetFallbacks({});
+      setBudgetFallbacksKey((k) => k + 1);
       localStorage.removeItem("userData" + userID);
     } catch (error) {
       console.log("error in create key:", error);
@@ -1097,6 +1101,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
                     }
                   >
                     <BudgetFallbacksEditor
+                      key={budgetFallbacksKey}
                       value={budgetFallbacks}
                       onChange={setBudgetFallbacks}
                       availableModels={modelsToPick}

ui/litellm-dashboard/src/components/templates/key_edit_view.tsx

@@ -308,7 +308,9 @@ export function KeyEditView({
         values.budget_limits = [];
       }
 
-      values.budget_fallbacks = budgetFallbacks;
+      if (Object.keys(budgetFallbacks).length > 0) {
+        values.budget_fallbacks = budgetFallbacks;
+      }
 
       await onSubmit(values);
     } finally {