[Fix] UI - Add No Default Models for Team and User Settings (#17037)

* Add No Default Models to Team and User settings

* Removing unused imports

* Adding to Create User and Team flow

ui/litellm-dashboard/src/components/OldTeams.tsx

@@ -30,8 +30,7 @@ import {
   Text,
   TextInput,
 } from "@tremor/react";
-import { Button as Button2, Form, Input, Modal, Select as Select2, Tooltip, Typography } from "antd";
-import { AlertTriangleIcon, XIcon } from "lucide-react";
+import { Button as Button2, Form, Input, Modal, Select as Select2, Switch, Tooltip, Typography } from "antd";
 import React, { useEffect, useState } from "react";
 import { formatNumberWithCommas } from "../utils/dataUtils";
 import { fetchTeams } from "./common_components/fetch_teams";
@@ -77,6 +76,7 @@ interface EditTeamModalProps {
 }
 
 import { updateExistingKeys } from "@/utils/dataUtils";
+import DeleteResourceModal from "./common_components/DeleteResourceModal";
 import { Member, teamCreateCall, v2TeamListCall } from "./networking";
 
 interface TeamInfo {
@@ -1145,6 +1145,9 @@ const Teams: React.FC<TeamProps> = ({
                       <Select2.Option key="all-proxy-models" value="all-proxy-models">
                         All Proxy Models
                       </Select2.Option>
+                      <Select2.Option key="no-default-models" value="no-default-models">
+                        No Default Models
+                      </Select2.Option>
                       {modelsToPick.map((model) => (
                         <Select2.Option key={model} value={model}>
                           {getModelDisplayName(model)}

ui/litellm-dashboard/src/components/SSOSettings.tsx

@@ -274,7 +274,9 @@ const SSOSettings: React.FC<SSOSettingsProps> = ({ accessToken, possibleUIRoles,
           onChange={(value) => handleTextInputChange(key, value)}
           className="mt-2"
         >
-          <Option value="no-default-models">No Default Models</Option>
+          <Option key="no-default-models" value="no-default-models">
+            No Default Models
+          </Option>
           {availableModels.map((model: string) => (
             <Option key={model} value={model}>
               {getModelDisplayName(model)}

ui/litellm-dashboard/src/components/TeamSSOSettings.test.tsx

@@ -0,0 +1,63 @@
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "../../tests/test-utils";
+import TeamSSOSettings from "./TeamSSOSettings";
+import * as networking from "./networking";
+
+// Mock the networking functions
+vi.mock("./networking");
+
+// Mock the budget duration dropdown
+vi.mock("./common_components/budget_duration_dropdown", () => ({
+  default: ({ value, onChange }: { value: string | null; onChange: (value: string) => void }) => (
+    <select data-testid="budget-duration-dropdown" value={value || ""} onChange={(e) => onChange(e.target.value)}>
+      <option value="">Select duration</option>
+      <option value="daily">Daily</option>
+      <option value="monthly">Monthly</option>
+    </select>
+  ),
+  getBudgetDurationLabel: vi.fn((value: string) => value),
+}));
+
+// Mock the model display name helper
+vi.mock("./key_team_helpers/fetch_available_models_team_key", () => ({
+  getModelDisplayName: vi.fn((model: string) => model),
+}));
+
+describe("TeamSSOSettings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders the component", async () => {
+    // Mock successful API responses
+    vi.mocked(networking.getDefaultTeamSettings).mockResolvedValue({
+      values: {
+        budget_duration: "monthly",
+        max_budget: 1000,
+      },
+      field_schema: {
+        description: "Default team settings",
+        properties: {
+          budget_duration: {
+            type: "string",
+            description: "Budget duration",
+          },
+          max_budget: {
+            type: "number",
+            description: "Maximum budget",
+          },
+        },
+      },
+    });
+
+    vi.mocked(networking.modelAvailableCall).mockResolvedValue({
+      data: [{ id: "gpt-4" }, { id: "claude-3" }],
+    });
+
+    renderWithProviders(<TeamSSOSettings accessToken="test-token" userID="test-user" userRole="admin" />);
+
+    const container = await screen.findByText("Default Team Settings");
+    expect(container).toBeInTheDocument();
+  });
+});

ui/litellm-dashboard/src/components/TeamSSOSettings.tsx

@@ -123,6 +123,9 @@ const TeamSSOSettings: React.FC<TeamSSOSettingsProps> = ({ accessToken, userID,
           onChange={(value) => handleTextInputChange(key, value)}
           className="mt-2"
         >
+          <Option key="no-default-models" value="no-default-models">
+            No Default Models
+          </Option>
           {availableModels.map((model: string) => (
             <Option key={model} value={model}>
               {getModelDisplayName(model)}

ui/litellm-dashboard/src/components/create_user_button.tsx

@@ -299,6 +299,9 @@ const Createuser: React.FC<CreateuserProps> = ({
                   <Select2.Option key="all-proxy-models" value="all-proxy-models">
                     All Proxy Models
                   </Select2.Option>
+                  <Select2.Option key="no-default-models" value="no-default-models">
+                    No Default Models
+                  </Select2.Option>
                   {userModels.map((model) => (
                     <Select2.Option key={model} value={model}>
                       {getModelDisplayName(model)}

ui/litellm-dashboard/src/components/team/team_info.tsx

@@ -586,6 +586,9 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
                       <Select.Option key="all-proxy-models" value="all-proxy-models">
                         All Proxy Models
                       </Select.Option>
+                      <Select.Option key="no-default-models" value="no-default-models">
+                        No Default Models
+                      </Select.Option>
                       {Array.from(new Set(userModels)).map((model, idx) => (
                         <Select.Option key={idx} value={model}>
                           {getModelDisplayName(model)}