fix(ui): keep team role and budget when the team ID is blank

ui/litellm-dashboard/src/app/(dashboard)/users/_components/DefaultUserSettings.test.tsx

@@ -150,4 +150,111 @@ describe("DefaultUserSettings", () => {
 
     expect(screen.getByText("Edit Settings")).toBeInTheDocument();
   });
+
+  describe("editable fields", () => {
+    const teamsOnlySettings = {
+      values: {
+        teams: [],
+      },
+      field_schema: {
+        description: "Default user settings",
+        properties: {
+          teams: {
+            type: "array",
+            description: "Teams",
+          },
+        },
+      },
+    };
+
+    const enterEditMode = async () => {
+      mockGetInternalUserSettings.mockResolvedValue(teamsOnlySettings);
+      mockUpdateInternalUserSettings.mockResolvedValue({ settings: {} });
+
+      render(<DefaultUserSettings {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Edit Settings")).toBeInTheDocument();
+      });
+
+      act(() => {
+        fireEvent.click(screen.getByText("Edit Settings"));
+      });
+    };
+
+    const savedPayload = () => mockUpdateInternalUserSettings.mock.calls[0][1] as Record<string, unknown>;
+
+    const selectUserRole = async (optionText: string) => {
+      act(() => {
+        fireEvent.mouseDown(document.querySelector(".ant-select-selector")!);
+      });
+
+      await waitFor(() => {
+        expect(document.querySelectorAll(".ant-select-item-option").length).toBeGreaterThan(0);
+      });
+
+      const option = Array.from(document.querySelectorAll(".ant-select-item-option")).find((el) =>
+        el.textContent?.includes(optionText),
+      );
+      expect(option).toBeTruthy();
+
+      act(() => {
+        fireEvent.click(option!);
+      });
+    };
+
+    it("keeps the stored role and max budget of a team saved without an ID", async () => {
+      mockGetInternalUserSettings.mockResolvedValue({
+        ...teamsOnlySettings,
+        values: { teams: [{ team_id: "", max_budget_in_team: 25, user_role: "admin" }] },
+      });
+      mockUpdateInternalUserSettings.mockResolvedValue({ settings: {} });
+
+      render(<DefaultUserSettings {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Edit Settings")).toBeInTheDocument();
+      });
+      act(() => {
+        fireEvent.click(screen.getByText("Edit Settings"));
+      });
+
+      expect(screen.getByPlaceholderText("Enter team ID")).toHaveValue("");
+      expect(screen.getByPlaceholderText("Optional")).toHaveValue("25.00");
+      expect(document.querySelector(".ant-select-selection-item")).toHaveTextContent("Admin");
+    });
+
+    it("keeps showing the selected role of a team whose ID has not been typed yet", async () => {
+      await enterEditMode();
+
+      act(() => {
+        fireEvent.click(screen.getByText("Add Team"));
+      });
+      await selectUserRole("Admin");
+
+      expect(document.querySelector(".ant-select-selection-item")).toHaveTextContent("Admin");
+    });
+
+    it("keeps the role and max budget of a team whose ID has not been typed yet", async () => {
+      await enterEditMode();
+
+      act(() => {
+        fireEvent.click(screen.getByText("Add Team"));
+      });
+
+      act(() => {
+        fireEvent.change(screen.getByPlaceholderText("Optional"), { target: { value: "25" } });
+      });
+      await selectUserRole("Admin");
+
+      act(() => {
+        fireEvent.click(screen.getByText("Save Changes"));
+      });
+
+      await waitFor(() => {
+        expect(mockUpdateInternalUserSettings).toHaveBeenCalled();
+      });
+      expect(savedPayload().teams).toEqual([{ team_id: "", max_budget_in_team: 25, user_role: "admin" }]);
+    });
+  });
 });

ui/litellm-dashboard/src/app/(dashboard)/users/_components/DefaultUserSettings.tsx

@@ -30,9 +30,9 @@
   userRole,
 }) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [settings, setSettings] = useState<any>(null);
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [editedValues, setEditedValues] = useState<any>({});
   const [saving, setSaving] = useState<boolean>(false);
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const { Paragraph } = Typography;
@@ -71,7 +71,7 @@
     };
 
     fetchSSOSettings();
   }, [accessToken]);
 
   const handleSaveSettings = async () => {
     if (!accessToken) return;
@@ -84,7 +84,7 @@
           acc[key] = value === "" ? null : value;
           return acc;
         },
         {} as Record<string, any>,
       );
 
       const updatedSettings = await updateInternalUserSettings(accessToken, processedValues);
@@ -98,15 +98,15 @@
     }
   };
 
   const handleTextInputChange = (key: string, value: any) => {
     setEditedValues((prev: Record<string, any>) => ({
       ...prev,
       [key]: value,
     }));
   };
 
   // Helper function to normalize teams array to consistent format
   const normalizeTeams = (teams: any[]): TeamEntry[] => {
     if (!teams || !Array.isArray(teams)) return [];
 
     return teams.map((team) => {
@@ -115,7 +115,7 @@
           team_id: team,
           user_role: "user" as const,
         };
-      } else if (typeof team === "object" && team.team_id) {
+      } else if (typeof team === "object" && team !== null && "team_id" in team) {
         return {
           team_id: team.team_id,
           max_budget_in_team: team.max_budget_in_team,
@@ -130,10 +130,10 @@
   };
 
   // Teams editor component
   const renderTeamsEditor = (teams: any[]) => {
     const normalizedTeams = normalizeTeams(teams);
 
     const updateTeam = (index: number, field: keyof TeamEntry, value: any) => {
       const updatedTeams = [...normalizedTeams];
       updatedTeams[index] = {
         ...updatedTeams[index],
@@ -211,7 +211,7 @@
     );
   };
 
   const renderEditableField = (key: string, property: any, value: any) => {
     const type = property.type;
 
     if (key === "teams") {