From 96a3690b59299a5b464cf79f5fd72a1065925564 Mon Sep 17 00:00:00 2001
From: Mubashir Osmani <mubashir@berri.ai>
Date: Fri, 10 Jul 2026 23:30:31 +0000
Subject: [PATCH] refactor(ui): address review nits on edit fallbacks modal

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../RouterSettings/Fallbacks/EditFallbacks.test.tsx   | 11 +++++------
 .../RouterSettings/Fallbacks/EditFallbacks.tsx        |  6 +-----
 .../RouterSettings/Fallbacks/FallbackGroupConfig.tsx  |  1 +
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.test.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.test.tsx
index 5d9b65e28b7..b0f8424661c 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import EditFallbacks, { Fallbacks } from "./EditFallbacks";
@@ -53,9 +53,8 @@ describe("EditFallbacks", () => {
     const onClose = vi.fn();
     setup({ onChange, onClose });
 
-    const firstFallbackRow = (await screen.findByText("gpt-3.5-turbo")).closest("div.group") as HTMLElement;
-    const removeButton = within(firstFallbackRow).getByRole("button");
-    await user.click(removeButton);
+    await screen.findByText("gpt-3.5-turbo");
+    await user.click(screen.getByTestId("remove-fallback-gpt-3.5-turbo"));
 
     await user.click(screen.getByRole("button", { name: /save changes/i }));
 
@@ -70,8 +69,8 @@ describe("EditFallbacks", () => {
     const onChange = vi.fn().mockResolvedValue(undefined);
     setup({ fallbackEntry: { "gpt-4": ["gpt-3.5-turbo"] }, onChange });
 
-    const row = (await screen.findByText("gpt-3.5-turbo")).closest("div.group") as HTMLElement;
-    await user.click(within(row).getByRole("button"));
+    await screen.findByText("gpt-3.5-turbo");
+    await user.click(screen.getByTestId("remove-fallback-gpt-3.5-turbo"));
 
     const saveButton = screen.getByRole("button", { name: /save changes/i });
     expect(saveButton).toBeDisabled();
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.tsx
index b7a06bdc489..c6556165063 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/EditFallbacks.tsx
@@ -62,10 +62,6 @@ export default function EditFallbacks({
     if (!primaryModel) {
       return;
     }
-    if (group.fallbackModels.length === 0) {
-      NotificationManager.error("Add at least one fallback model, or delete the entry instead.");
-      return;
-    }
 
     const updatedFallbacks = (value || []).map((entry) =>
       primaryModel in entry ? { ...entry, [primaryModel]: group.fallbackModels } : entry,
@@ -97,7 +93,7 @@ export default function EditFallbacks({
           Cancel
         </Button>
         <Button
-          type="default"
+          type="primary"
           icon={<Pencil className="w-4 h-4" />}
           onClick={handleSave}
           disabled={isSaving || group.fallbackModels.length === 0}
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
index 551660455a6..381818a53f5 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
@@ -184,6 +184,7 @@ export function FallbackGroupConfig({
 
                     <button
                       type="button"
+                      data-testid={`remove-fallback-${modelValue}`}
                       onClick={() => removeFallback(index)}
                       className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-red-500 p-1"
                     >