Loading...
;
- }
-
- if (!accessToken || !token || !userRole || !userID) {
- return Loading...
;
- }
- let all_models_on_proxy: any[] = [];
- let all_providers: string[] = [];
-
- // loop through model data and edit each row
- for (let i = 0; i < modelData.data.length; i++) {
- let curr_model = modelData.data[i];
- let litellm_model_name = curr_model?.litellm_params?.model;
- let custom_llm_provider = curr_model?.litellm_params?.custom_llm_provider;
- let model_info = curr_model?.model_info;
-
- let defaultProvider = "openai";
- let provider = "";
- let input_cost = "Undefined";
- let output_cost = "Undefined";
- let max_tokens = "Undefined";
- let max_input_tokens = "Undefined";
- let cleanedLitellmParams = {};
-
- const getProviderFromModel = (model: string) => {
- /**
- * Use model map
- * - check if model in model map
- * - return it's litellm_provider, if so
- */
- if (modelMap !== null && modelMap !== undefined) {
- if (typeof modelMap == "object" && model in modelMap) {
- return modelMap[model]["litellm_provider"];
- }
- }
- return "openai";
- };
-
- // Check if litellm_model_name is null or undefined
- if (litellm_model_name) {
- // Split litellm_model_name based on "/"
- let splitModel = litellm_model_name.split("/");
-
- // Get the first element in the split
- let firstElement = splitModel[0];
-
- // If there is only one element, default provider to openai
- provider = custom_llm_provider;
- if (!provider) {
- provider = splitModel.length === 1 ? getProviderFromModel(litellm_model_name) : firstElement;
- }
- } else {
- // litellm_model_name is null or undefined, default provider to openai
- provider = "-";
- }
-
- if (model_info) {
- input_cost = model_info?.input_cost_per_token;
- output_cost = model_info?.output_cost_per_token;
- max_tokens = model_info?.max_tokens;
- max_input_tokens = model_info?.max_input_tokens;
- }
-
- if (curr_model?.litellm_params) {
- cleanedLitellmParams = Object.fromEntries(
- Object.entries(curr_model?.litellm_params).filter(([key]) => key !== "model" && key !== "api_base"),
- );
- }
-
- modelData.data[i].provider = provider;
- modelData.data[i].input_cost = input_cost;
- modelData.data[i].output_cost = output_cost;
- modelData.data[i].litellm_model_name = litellm_model_name;
- all_providers.push(provider);
-
- // Convert Cost in terms of Cost per 1M tokens
- if (modelData.data[i].input_cost) {
- modelData.data[i].input_cost = (Number(modelData.data[i].input_cost) * 1000000).toFixed(2);
- }
-
- if (modelData.data[i].output_cost) {
- modelData.data[i].output_cost = (Number(modelData.data[i].output_cost) * 1000000).toFixed(2);
- }
-
- modelData.data[i].max_tokens = max_tokens;
- modelData.data[i].max_input_tokens = max_input_tokens;
- modelData.data[i].api_base = curr_model?.litellm_params?.api_base;
- modelData.data[i].cleanedLitellmParams = cleanedLitellmParams;
-
- all_models_on_proxy.push(curr_model.model_name);
- }
- // when users click request access show pop up to allow them to request access
+ const isLoading = isLoadingModels || isLoadingModelCostMap || isLoadingCredentials || isLoadingUISettings;
if (userRole && userRole == "Admin Viewer") {
const { Title, Paragraph } = Typography;
@@ -495,62 +223,20 @@ const ModelsAndEndpointsView: React.FC
- {date &&
- );
- };
-
- const handleOk = () => {
- addModelForm
- .validateFields()
- .then((values: any) => {
- handleAddModelSubmit(values, accessToken, addModelForm, handleRefreshClick);
- })
- .catch((error: any) => {
- const errorMessages =
- error.errorFields
- ?.map((field: any) => {
- return `${field.name.join(".")}: ${field.errors.join(", ")}`;
- })
- .join(" | ") || "Unknown validation error";
- NotificationsManager.fromBackend(`Please fill in the following required fields: ${errorMessages}`);
- });
};
Object.keys(Providers).find((key) => (Providers as { [index: string]: any })[key] === selectedProvider);
@@ -564,7 +250,7 @@ const ModelsAndEndpointsView: React.FCDate: {date}
} - {sortedPayload.map((category: any, idx: number) => { - const roundedValue = parseFloat(category.value.toFixed(5)); - const displayValue = roundedValue === 0 && category.value > 0 ? "<0.00001" : roundedValue.toFixed(5); - return ( -
-
- );
- })}
-
-
-
- {category.dataKey}
-{displayValue}
-
-
- {filteredData.length > 0
- ? `Showing ${pagination.pageIndex * pagination.pageSize + 1} - ${Math.min(
- (pagination.pageIndex + 1) * pagination.pageSize,
- filteredData.length,
- )} of ${filteredData.length} results`
- : "Showing 0 results"}
-
+ {isLoading ? (
+
@@ -359,7 +393,6 @@ const AllModelsTab = ({
getDisplayModelName,
() => {},
() => {},
- setEditModel,
expandedRows,
setExpandedRows,
)}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/PriceDataManagementTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/PriceDataManagementTab.tsx
index 4076c19c665..d44d19879d5 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/PriceDataManagementTab.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/PriceDataManagementTab.tsx
@@ -1,15 +1,12 @@
import { TabPanel, Text, Title } from "@tremor/react";
import PriceDataReload from "@/components/price_data_reload";
-import { modelCostMap } from "@/components/networking";
import React from "react";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { useModelCostMap } from "../../hooks/models/useModelCostMap";
-interface PriceDataManagementPanelProps {
- setModelMap: (data: any) => void;
-}
-
-const PriceDataManagementTab = ({ setModelMap }: PriceDataManagementPanelProps) => {
+const PriceDataManagementTab = () => {
const { accessToken } = useAuthorized();
+ const { refetch: refetchModelCostMap } = useModelCostMap();
return (
+
+ {isLoading ? (
+
- )}
+ )}
+ Public Model Hub
,
}));
@@ -51,7 +51,12 @@ describe("ModelHubTable", () => {
const getUiConfigMock = vi.mocked(networking.getUiConfig);
const modelHubPublicModelsCallMock = vi.mocked(networking.modelHubPublicModelsCall);
- getUiConfigMock.mockResolvedValue({ server_root_path: "/", proxy_base_url: "http://localhost:4000" });
+ getUiConfigMock.mockResolvedValue({
+ server_root_path: "/",
+ proxy_base_url: "http://localhost:4000",
+ auto_redirect_to_sso: false,
+ admin_ui_disabled: false,
+ });
modelHubPublicModelsCallMock.mockResolvedValue([]);
render(
-
- ),
- width: 500,
- okText: "Close",
- maskClosable: true,
- keyboard: true,
- });
return true;
} catch (error) {
@@ -319,29 +293,41 @@ const UsefulLinksManagement: React.FC- Your useful links have been saved and are now visible on the public model hub. -
-
-
- View your updated model hub:
- - Open Public Model Hub → - -
+ Public Model Hub
+
- )}
+ ) : (
+
+
+
+
+ )}
+
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.test.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.test.tsx
new file mode 100644
index 00000000000..67c6d7d6cc9
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.test.tsx
@@ -0,0 +1,505 @@
+import { render, screen, fireEvent, act, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import MakeAgentPublicForm from "./MakeAgentPublicForm";
+import { AgentHubData } from "@/components/AIHub/AgentHubTableColumns";
+
+// Mock the networking function
+vi.mock("../../networking", () => ({
+ makeAgentsPublicCall: vi.fn(),
+}));
+
+// Import the mocked function
+import { makeAgentsPublicCall } from "../../networking";
+const mockMakeAgentsPublicCall = vi.mocked(makeAgentsPublicCall);
+
+// Mock antd components
+vi.mock("antd", () => ({
+ Modal: ({ open, title, children, onCancel, footer }: any) =>
+ open ? (
+ ();
+ return {
+ ...actual,
+ Text: ({ children, className }: any) => {children},
+ Title: ({ children }: any) => {}}
+ handleAddSSOCancel={() => {}}
+ handleShowInstructions={() => {}}
+ handleInstructionsOk={() => {}}
+ handleInstructionsCancel={() => {}}
+ form={form}
+ accessToken="test-token"
+ ssoConfigured={false}
+ />
+ );
+ };
+
+ render( {}}
+ handleAddSSOCancel={() => {}}
+ handleShowInstructions={mockHandleShowInstructions}
+ handleInstructionsOk={() => {}}
+ handleInstructionsCancel={() => {}}
+ form={form}
+ accessToken="test-token"
+ ssoConfigured={false}
+ />
+ );
+ };
+
+ render( {}}
+ handleShowInstructions={() => {}}
+ handleInstructionsOk={() => {}}
+ handleInstructionsCancel={() => {}}
+ form={form}
+ accessToken="test-token"
+ ssoConfigured={true}
+ />
+ );
+ };
+
+ render( = ({
}
}
+ // Extract role mappings if they exist
+ let roleMappingFields = {};
+ if (ssoData.values.role_mappings) {
+ const roleMappings = ssoData.values.role_mappings;
+
+ // Helper function to join arrays into comma-separated strings
+ const joinTeams = (teams: string[] | undefined): string => {
+ if (!teams || teams.length === 0) return "";
+ return teams.join(", ");
+ };
+
+ roleMappingFields = {
+ use_role_mappings: true,
+ group_claim: roleMappings.group_claim,
+ default_role: roleMappings.default_role || "internal_user",
+ proxy_admin_teams: joinTeams(roleMappings.roles?.proxy_admin),
+ admin_viewer_teams: joinTeams(roleMappings.roles?.proxy_admin_viewer),
+ internal_user_teams: joinTeams(roleMappings.roles?.internal_user),
+ internal_viewer_teams: joinTeams(roleMappings.roles?.internal_user_viewer),
+ };
+ }
+
// Set form values with existing data (excluding UI access control fields)
const formValues = {
sso_provider: selectedProvider,
proxy_base_url: ssoData.values.proxy_base_url,
user_email: ssoData.values.user_email,
...ssoData.values,
+ ...roleMappingFields,
};
console.log("Setting form values:", formValues); // Debug log
@@ -178,8 +201,55 @@ const SSOModals: React.FC = ({
}
try {
+ const {
+ proxy_admin_teams,
+ admin_viewer_teams,
+ internal_user_teams,
+ internal_viewer_teams,
+ default_role,
+ group_claim,
+ use_role_mappings,
+ ...rest
+ } = formValues;
+
+ const payload: any = {
+ ...rest,
+ };
+
+ // Add role mappings if use_role_mappings is checked
+ if (use_role_mappings) {
+ // Helper function to split comma-separated string into array
+ const splitTeams = (teams: string | undefined): string[] => {
+ if (!teams || teams.trim() === "") return [];
+ return teams
+ .split(",")
+ .map((team) => team.trim())
+ .filter((team) => team.length > 0);
+ };
+
+ // Map default role display values to backend values
+ const defaultRoleMapping: Record = {
+ internal_user_viewer: "internal_user_viewer",
+ internal_user: "internal_user",
+ proxy_admin_viewer: "proxy_admin_viewer",
+ proxy_admin: "proxy_admin",
+ };
+
+ payload.role_mappings = {
+ provider: "generic",
+ group_claim,
+ default_role: defaultRoleMapping[default_role] || "internal_user",
+ roles: {
+ proxy_admin: splitTeams(proxy_admin_teams),
+ proxy_admin_viewer: splitTeams(admin_viewer_teams),
+ internal_user: splitTeams(internal_user_teams),
+ internal_user_viewer: splitTeams(internal_viewer_teams),
+ },
+ };
+ }
+
// Save SSO settings using the new API
- await updateSSOSettings(accessToken, formValues);
+ await updateSSOSettings(accessToken, payload);
// Continue with the original flow (show instructions)
handleShowInstructions(formValues);
@@ -211,6 +281,7 @@ const SSOModals: React.FC = ({
proxy_base_url: null,
user_email: null,
sso_provider: null,
+ role_mappings: null,
};
await updateSSOSettings(accessToken, clearSettings);
@@ -334,6 +405,79 @@ const SSOModals: React.FC = ({
>
prevValues.sso_provider !== currentValues.sso_provider}
+ >
+ {({ getFieldValue }) => {
+ const provider = getFieldValue("sso_provider");
+ return provider === "okta" || provider === "generic" ? (
+
+
+ ) : null;
+ }}
+
+
+
+ prevValues.use_role_mappings !== currentValues.use_role_mappings
+ }
+ >
+ {({ getFieldValue }) => {
+ const useRoleMappings = getFieldValue("use_role_mappings");
+ return useRoleMappings ? (
+
+
+ ) : null;
+ }}
+
+
+
+ prevValues.use_role_mappings !== currentValues.use_role_mappings
+ }
+ >
+ {({ getFieldValue }) => {
+ const useRoleMappings = getFieldValue("use_role_mappings");
+ return useRoleMappings ? (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : null;
+ }}
+
+
+ {/* Header Section */}
+
+ {/* Provider Row */}
+
+
+
+ );
+}
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/constants.ts b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/constants.ts
new file mode 100644
index 00000000000..595a961401a
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/constants.ts
@@ -0,0 +1,15 @@
+// SSO Provider logos
+export const ssoProviderLogoMap: Record = {
+ google: "https://artificialanalysis.ai/img/logos/google_small.svg",
+ microsoft: "https://upload.wikimedia.org/wikipedia/commons/a/a8/Microsoft_Azure_Logo.svg",
+ okta: "https://www.okta.com/sites/default/files/Okta_Logo_BrightBlue_Medium.png",
+ generic: "",
+};
+
+// SSO Provider display names (consistent between select dropdown and table)
+export const ssoProviderDisplayNames: Record = {
+ google: "Google SSO",
+ microsoft: "Microsoft SSO",
+ okta: "Okta / Auth0 SSO",
+ generic: "Generic SSO",
+};
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.test.ts b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.test.ts
new file mode 100644
index 00000000000..1c878d7b7b3
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.test.ts
@@ -0,0 +1,274 @@
+import { processSSOSettingsPayload } from "./utils";
+import { describe, it, expect } from "vitest";
+
+describe("processSSOSettingsPayload", () => {
+ describe("without role mappings", () => {
+ it("should return all fields except role mapping fields when use_role_mappings is false", () => {
+ const formValues = {
+ proxy_admin_teams: "team1, team2",
+ admin_viewer_teams: "viewer1",
+ internal_user_teams: "user1",
+ internal_viewer_teams: "viewer1",
+ default_role: "proxy_admin",
+ group_claim: "groups",
+ use_role_mappings: false,
+ other_field: "value",
+ another_field: 123,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result).toEqual({
+ other_field: "value",
+ another_field: 123,
+ });
+ expect(result.role_mappings).toBeUndefined();
+ });
+
+ it("should return all fields except role mapping fields when use_role_mappings is not present", () => {
+ const formValues = {
+ proxy_admin_teams: "team1",
+ admin_viewer_teams: "viewer1",
+ internal_user_teams: "user1",
+ internal_viewer_teams: "viewer1",
+ default_role: "proxy_admin",
+ group_claim: "groups",
+ other_field: "value",
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result).toEqual({
+ other_field: "value",
+ });
+ expect(result.role_mappings).toBeUndefined();
+ });
+ });
+
+ describe("with role mappings enabled", () => {
+ it("should create role mappings with all team types populated", () => {
+ const formValues = {
+ proxy_admin_teams: "admin1, admin2",
+ admin_viewer_teams: "viewer1, viewer2, viewer3",
+ internal_user_teams: "user1",
+ internal_viewer_teams: "internal_viewer1, internal_viewer2",
+ default_role: "proxy_admin",
+ group_claim: "groups",
+ use_role_mappings: true,
+ other_field: "value",
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.other_field).toBe("value");
+ expect(result.role_mappings).toEqual({
+ provider: "generic",
+ group_claim: "groups",
+ default_role: "proxy_admin",
+ roles: {
+ proxy_admin: ["admin1", "admin2"],
+ proxy_admin_viewer: ["viewer1", "viewer2", "viewer3"],
+ internal_user: ["user1"],
+ internal_user_viewer: ["internal_viewer1", "internal_viewer2"],
+ },
+ });
+ });
+
+ it("should handle empty team strings", () => {
+ const formValues = {
+ proxy_admin_teams: "",
+ admin_viewer_teams: "",
+ internal_user_teams: "",
+ internal_viewer_teams: "",
+ default_role: "internal_user",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.roles).toEqual({
+ proxy_admin: [],
+ proxy_admin_viewer: [],
+ internal_user: [],
+ internal_user_viewer: [],
+ });
+ });
+
+ it("should handle undefined team fields", () => {
+ const formValues = {
+ default_role: "internal_user_viewer",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.roles).toEqual({
+ proxy_admin: [],
+ proxy_admin_viewer: [],
+ internal_user: [],
+ internal_user_viewer: [],
+ });
+ });
+
+ it("should handle whitespace-only team strings", () => {
+ const formValues = {
+ proxy_admin_teams: " ",
+ admin_viewer_teams: ", , ,",
+ internal_user_teams: "user1, , user2",
+ internal_viewer_teams: "viewer1, ,viewer2",
+ default_role: "proxy_admin_viewer",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.roles).toEqual({
+ proxy_admin: [],
+ proxy_admin_viewer: [],
+ internal_user: ["user1", "user2"],
+ internal_user_viewer: ["viewer1", "viewer2"],
+ });
+ });
+
+ it("should trim whitespace from team names", () => {
+ const formValues = {
+ proxy_admin_teams: " admin1 , admin2 ",
+ admin_viewer_teams: " viewer1 ",
+ internal_user_teams: " user1 , user2 ",
+ internal_viewer_teams: "viewer1,viewer2",
+ default_role: "internal_user",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.roles).toEqual({
+ proxy_admin: ["admin1", "admin2"],
+ proxy_admin_viewer: ["viewer1"],
+ internal_user: ["user1", "user2"],
+ internal_user_viewer: ["viewer1", "viewer2"],
+ });
+ });
+
+ it("should filter out empty strings after trimming", () => {
+ const formValues = {
+ proxy_admin_teams: "admin1,,admin2, , admin3",
+ default_role: "internal_user",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.roles.proxy_admin).toEqual(["admin1", "admin2", "admin3"]);
+ });
+ });
+
+ describe("default role mapping", () => {
+ it("should map internal_user_viewer correctly", () => {
+ const formValues = {
+ default_role: "internal_user_viewer",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.default_role).toBe("internal_user_viewer");
+ });
+
+ it("should map internal_user correctly", () => {
+ const formValues = {
+ default_role: "internal_user",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.default_role).toBe("internal_user");
+ });
+
+ it("should map proxy_admin_viewer correctly", () => {
+ const formValues = {
+ default_role: "proxy_admin_viewer",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.default_role).toBe("proxy_admin_viewer");
+ });
+
+ it("should map proxy_admin correctly", () => {
+ const formValues = {
+ default_role: "proxy_admin",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.default_role).toBe("proxy_admin");
+ });
+
+ it("should default to internal_user for unknown roles", () => {
+ const formValues = {
+ default_role: "unknown_role",
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.default_role).toBe("internal_user");
+ });
+
+ it("should default to internal_user for undefined default_role", () => {
+ const formValues = {
+ group_claim: "groups",
+ use_role_mappings: true,
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result.role_mappings.default_role).toBe("internal_user");
+ });
+ });
+
+ describe("edge cases", () => {
+ it("should handle empty form values", () => {
+ const result = processSSOSettingsPayload({});
+
+ expect(result).toEqual({});
+ });
+
+ it("should preserve other fields in the payload", () => {
+ const formValues = {
+ use_role_mappings: false,
+ sso_provider: "google",
+ client_id: "123",
+ client_secret: "secret",
+ redirect_url: "http://example.com",
+ custom_field: { nested: "value" },
+ array_field: [1, 2, 3],
+ };
+
+ const result = processSSOSettingsPayload(formValues);
+
+ expect(result).toEqual({
+ sso_provider: "google",
+ client_id: "123",
+ client_secret: "secret",
+ redirect_url: "http://example.com",
+ custom_field: { nested: "value" },
+ array_field: [1, 2, 3],
+ });
+ });
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.ts b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.ts
new file mode 100644
index 00000000000..3533e1226c2
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.ts
@@ -0,0 +1,54 @@
+/**
+ * Processes SSO settings form values and transforms them into the payload format expected by the API
+ * Handles role mappings transformation and field extraction
+ */
+export const processSSOSettingsPayload = (formValues: Record): Record => {
+ const {
+ proxy_admin_teams,
+ admin_viewer_teams,
+ internal_user_teams,
+ internal_viewer_teams,
+ default_role,
+ group_claim,
+ use_role_mappings,
+ ...rest
+ } = formValues;
+
+ const payload: any = {
+ ...rest,
+ };
+
+ // Add role mappings if use_role_mappings is checked
+ if (use_role_mappings) {
+ // Helper function to split comma-separated string into array
+ const splitTeams = (teams: string | undefined): string[] => {
+ if (!teams || teams.trim() === "") return [];
+ return teams
+ .split(",")
+ .map((team) => team.trim())
+ .filter((team) => team.length > 0);
+ };
+
+ // Map default role display values to backend values
+ const defaultRoleMapping: Record = {
+ internal_user_viewer: "internal_user_viewer",
+ internal_user: "internal_user",
+ proxy_admin_viewer: "proxy_admin_viewer",
+ proxy_admin: "proxy_admin",
+ };
+
+ payload.role_mappings = {
+ provider: "generic",
+ group_claim,
+ default_role: defaultRoleMapping[default_role] || "internal_user",
+ roles: {
+ proxy_admin: splitTeams(proxy_admin_teams),
+ proxy_admin_viewer: splitTeams(admin_viewer_teams),
+ internal_user: splitTeams(internal_user_teams),
+ internal_user_viewer: splitTeams(internal_viewer_teams),
+ },
+ };
+ }
+
+ return payload;
+};
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
index 7680232ef0b..c9078383489 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
@@ -8,7 +8,7 @@ import { Alert, Card, Skeleton, Space, Switch, Typography } from "antd";
export default function UISettings() {
const { accessToken } = useAuthorized();
- const { data, isLoading, isError, error } = useUISettings(accessToken);
+ const { data, isLoading, isError, error } = useUISettings();
const { mutate: updateSettings, isPending: isUpdating, error: updateError } = useUpdateUISettings(accessToken);
const schema = data?.field_schema;
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
index 8f6bc411630..db268286007 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
@@ -268,16 +268,7 @@ const TopKeyView: React.FC = ({ topKeys, teams, showTags = fals
{/* Content */}
+
+ ) : null,
+ Form: Object.assign(({ children, form }: any) => , {
+ useForm: () => [
+ {
+ resetFields: vi.fn(),
+ validateFields: vi.fn(),
+ getFieldsValue: vi.fn(),
+ setFieldsValue: vi.fn(),
+ },
+ vi.fn(),
+ ],
+ Item: ({ children }: any) => {title}
+ {children}
+ {footer}
+ {children}
,
+ }),
+ Steps: Object.assign(
+ ({ children, current, className }: any) => (
+
+ {children}
+
+ ),
+ {
+ Step: ({ title }: any) => {title}
,
+ },
+ ),
+ Button: ({ children, onClick, disabled, loading, ...props }: any) => (
+
+ ),
+ Checkbox: ({ checked, indeterminate, onChange, children, disabled }: any) => (
+
+ ),
+}));
+
+// Mock @tremor/react components
+vi.mock("@tremor/react", () => ({
+ Text: ({ children, className }: any) => {children},
+ Title: ({ children }: any) => {children}
, + Badge: ({ children, color, size }: any) => ( + + {children} + + ), +})); + +describe("MakeAgentPublicForm", () => { + const mockProps = { + visible: true, + onClose: vi.fn(), + accessToken: "test-token", + agentHubData: [ + { + agent_id: "agent-1", + name: "Test Agent 1", + description: "Description 1", + version: "1.0", + is_public: false, + skills: [ + { id: "skill-1", name: "Skill 1", description: "Skill desc" }, + { id: "skill-2", name: "Skill 2", description: "Skill desc" }, + ], + protocolVersion: "1.0", + }, + { + agent_id: "agent-2", + name: "Test Agent 2", + description: "Description 2", + version: "2.0", + is_public: true, + skills: [], + protocolVersion: "1.0", + }, + ] as AgentHubData[], + onSuccess: vi.fn(), + }; + + beforeEach(() => { + vi.clearAllMocks(); + }); + + afterEach(() => { + vi.resetAllMocks(); + }); + + it("should render the component", () => { + render(
+
+ ) : null,
+ Form: Object.assign(({ children, form }: any) => , {
+ useForm: () => [
+ {
+ resetFields: vi.fn(),
+ validateFields: vi.fn(),
+ getFieldsValue: vi.fn(),
+ setFieldsValue: vi.fn(),
+ },
+ vi.fn(),
+ ],
+ Item: ({ children }: any) => {title}
+ {children}
+ {footer}
+ {children}
,
+ }),
+ Steps: Object.assign(
+ ({ children, current, className }: any) => (
+
+ {children}
+
+ ),
+ {
+ Step: ({ title }: any) => {title}
,
+ },
+ ),
+ Button: ({ children, onClick, disabled, loading, ...props }: any) => (
+
+ ),
+ Checkbox: ({ checked, indeterminate, onChange, children, disabled }: any) => (
+
+ ),
+}));
+
+// Additional @tremor/react mocks (Button is already mocked globally)
+vi.mock("@tremor/react", async (importOriginal) => {
+ const actual = await importOriginal{children}
, + Badge: ({ children, color, size }: any) => ( + + {children} + + ), + }; +}); + +describe("MakeMCPPublicForm", () => { + const mockProps = { + visible: true, + onClose: vi.fn(), + accessToken: "test-token", + mcpHubData: [ + { + server_id: "server-1", + server_name: "Test Server 1", + description: "Description 1", + url: "http://example.com/server1", + transport: "http", + status: "active", + mcp_info: { is_public: false }, + allowed_tools: ["tool-1", "tool-2"], + auth_type: "bearer", + credentials: {}, + created_at: "2024-01-01T00:00:00Z", + created_by: "user1", + updated_at: "2024-01-01T00:00:00Z", + updated_by: "user1", + teams: [], + mcp_access_groups: [], + extra_headers: [], + static_headers: {}, + args: [], + env: {}, + }, + { + server_id: "server-2", + server_name: "Test Server 2", + description: "Description 2", + url: "http://example.com/server2", + transport: "websocket", + status: "inactive", + mcp_info: { is_public: true }, + allowed_tools: [], + auth_type: "none", + credentials: {}, + created_at: "2024-01-01T00:00:00Z", + created_by: "user2", + updated_at: "2024-01-01T00:00:00Z", + updated_by: "user2", + teams: [], + mcp_access_groups: [], + extra_headers: [], + static_headers: {}, + args: [], + env: {}, + }, + ] as MCPServerData[], + onSuccess: vi.fn(), + }; + + beforeEach(() => { + vi.clearAllMocks(); + }); + + afterEach(() => { + vi.resetAllMocks(); + }); + + it("should render the component", () => { + render(
+
+ ) : null,
+ Form: Object.assign(({ children, form }: any) => , {
+ useForm: () => [
+ {
+ resetFields: vi.fn(),
+ validateFields: vi.fn(),
+ getFieldsValue: vi.fn(),
+ setFieldsValue: vi.fn(),
+ },
+ vi.fn(),
+ ],
+ Item: ({ children }: any) => {title}
+ {children}
+ {footer}
+ {children}
,
+ }),
+ Steps: Object.assign(
+ ({ children, current, className }: any) => (
+
+ {children}
+
+ ),
+ {
+ Step: ({ title }: any) => {title}
,
+ },
+ ),
+ Button: ({ children, onClick, disabled, loading, ...props }: any) => (
+
+ ),
+ Checkbox: ({ checked, indeterminate, onChange, children, disabled }: any) => (
+
+ ),
+}));
+
+// Mock @tremor/react components
+vi.mock("@tremor/react", () => ({
+ Text: ({ children, className }: any) => {children},
+ Title: ({ children }: any) => {children}
, + Badge: ({ children, color, size }: any) => ( + + {children} + + ), +})); + +// Mock ModelFilters component +vi.mock("../../model_filters", () => ({ + default: ({ onFilteredDataChange, modelHubData }: any) => ( +
+
+
+ ),
+}));
+
+// Mock NotificationsManager
+vi.mock("../../molecules/notifications_manager", () => ({
+ default: {
+ fromBackend: vi.fn(),
+ success: vi.fn(),
+ },
+}));
+
+describe("MakeModelPublicForm", () => {
+ const mockProps = {
+ visible: true,
+ onClose: vi.fn(),
+ accessToken: "test-token",
+ modelHubData: [
+ {
+ model_group: "gpt-4",
+ providers: ["openai"],
+ max_input_tokens: 8192,
+ max_output_tokens: 4096,
+ input_cost_per_token: 0.03,
+ output_cost_per_token: 0.06,
+ mode: "chat",
+ tpm: 10000,
+ rpm: 200,
+ supports_parallel_function_calling: true,
+ supports_vision: false,
+ supports_function_calling: true,
+ supported_openai_params: ["temperature", "max_tokens"],
+ is_public_model_group: false,
+ },
+ {
+ model_group: "gpt-3.5-turbo",
+ providers: ["openai"],
+ max_input_tokens: 4096,
+ max_output_tokens: 2048,
+ input_cost_per_token: 0.0015,
+ output_cost_per_token: 0.002,
+ mode: "chat",
+ tpm: 60000,
+ rpm: 3500,
+ supports_parallel_function_calling: false,
+ supports_vision: false,
+ supports_function_calling: true,
+ supported_openai_params: ["temperature", "max_tokens"],
+ is_public_model_group: true,
+ },
+ ] as ModelGroupInfo[],
+ onSuccess: vi.fn(),
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ afterEach(() => {
+ vi.resetAllMocks();
+ });
+
+ it("should render the component", () => {
+ render( ({
+ updateSSOSettings: vi.fn(),
+}));
+
+// Mock error utils
+vi.mock("@/components/shared/errorUtils", () => ({
+ parseErrorMessage: vi.fn((error) => error?.message || "Unknown error"),
+}));
+
+// Mock the useAuthorized hook
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
+ default: () => ({
+ accessToken: "test-access-token",
+ userId: "test-user-id",
+ userEmail: "test@example.com",
+ userRole: "admin",
+ }),
+}));
+
+// Mock NotificationsManager
+vi.mock("@/components/molecules/notifications_manager", () => ({
+ default: {
+ success: vi.fn(),
+ fromBackend: vi.fn(),
+ },
+}));
+
+describe("AddSSOSettingsModal", () => {
+ it("should render", () => {
+ const onCancel = vi.fn();
+ const onSuccess = vi.fn();
+
+ renderWithProviders( = ({ isVisible, onCancel, onSuccess }) => {
+ const [form] = Form.useForm();
+ const { mutateAsync, isPending } = useEditSSOSettings();
+
+ // Enhanced form submission handler
+ const handleFormSubmit = async (formValues: Record) => {
+ const payload = processSSOSettingsPayload(formValues);
+
+ await mutateAsync(payload, {
+ onSuccess: () => {
+ NotificationsManager.success("SSO settings added successfully");
+ onSuccess();
+ },
+ onError: (error) => {
+ NotificationsManager.fromBackend("Failed to save SSO settings: " + parseErrorMessage(error));
+ },
+ });
+ };
+
+ const handleCancel = () => {
+ form.resetFields();
+ onCancel();
+ };
+
+ return (
+
+
+
+
+ }
+ onCancel={handleCancel}
+ >
+
+ );
+};
+
+export default AddSSOSettingsModal;
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx
new file mode 100644
index 00000000000..a4b36e5190e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { TextInput } from "@tremor/react";
+import { Checkbox, Form, Input, Select } from "antd";
+import React from "react";
+import { ssoProviderLogoMap, ssoProviderDisplayNames } from "../constants";
+
+export interface BaseSSOSettingsFormProps {
+ form: any; // Replace with proper Form type if available
+ onFormSubmit: (formValues: Record) => Promise;
+}
+
+// Define the SSO provider configuration type
+export interface SSOProviderConfig {
+ envVarMap: Record;
+ fields: Array<{
+ label: string;
+ name: string;
+ placeholder?: string;
+ }>;
+}
+
+// Define configurations for each SSO provider
+export const ssoProviderConfigs: Record = {
+ google: {
+ envVarMap: {
+ google_client_id: "GOOGLE_CLIENT_ID",
+ google_client_secret: "GOOGLE_CLIENT_SECRET",
+ },
+ fields: [
+ { label: "Google Client ID", name: "google_client_id" },
+ { label: "Google Client Secret", name: "google_client_secret" },
+ ],
+ },
+ microsoft: {
+ envVarMap: {
+ microsoft_client_id: "MICROSOFT_CLIENT_ID",
+ microsoft_client_secret: "MICROSOFT_CLIENT_SECRET",
+ microsoft_tenant: "MICROSOFT_TENANT",
+ },
+ fields: [
+ { label: "Microsoft Client ID", name: "microsoft_client_id" },
+ { label: "Microsoft Client Secret", name: "microsoft_client_secret" },
+ { label: "Microsoft Tenant", name: "microsoft_tenant" },
+ ],
+ },
+ okta: {
+ envVarMap: {
+ generic_client_id: "GENERIC_CLIENT_ID",
+ generic_client_secret: "GENERIC_CLIENT_SECRET",
+ generic_authorization_endpoint: "GENERIC_AUTHORIZATION_ENDPOINT",
+ generic_token_endpoint: "GENERIC_TOKEN_ENDPOINT",
+ generic_userinfo_endpoint: "GENERIC_USERINFO_ENDPOINT",
+ },
+ fields: [
+ { label: "Generic Client ID", name: "generic_client_id" },
+ { label: "Generic Client Secret", name: "generic_client_secret" },
+ {
+ label: "Authorization Endpoint",
+ name: "generic_authorization_endpoint",
+ placeholder: "https://your-domain/authorize",
+ },
+ { label: "Token Endpoint", name: "generic_token_endpoint", placeholder: "https://your-domain/token" },
+ {
+ label: "Userinfo Endpoint",
+ name: "generic_userinfo_endpoint",
+ placeholder: "https://your-domain/userinfo",
+ },
+ ],
+ },
+ generic: {
+ envVarMap: {
+ generic_client_id: "GENERIC_CLIENT_ID",
+ generic_client_secret: "GENERIC_CLIENT_SECRET",
+ generic_authorization_endpoint: "GENERIC_AUTHORIZATION_ENDPOINT",
+ generic_token_endpoint: "GENERIC_TOKEN_ENDPOINT",
+ generic_userinfo_endpoint: "GENERIC_USERINFO_ENDPOINT",
+ },
+ fields: [
+ { label: "Generic Client ID", name: "generic_client_id" },
+ { label: "Generic Client Secret", name: "generic_client_secret" },
+ { label: "Authorization Endpoint", name: "generic_authorization_endpoint" },
+ { label: "Token Endpoint", name: "generic_token_endpoint" },
+ { label: "Userinfo Endpoint", name: "generic_userinfo_endpoint" },
+ ],
+ },
+};
+
+// Helper function to render provider fields
+export const renderProviderFields = (provider: string) => {
+ const config = ssoProviderConfigs[provider];
+ if (!config) return null;
+
+ return config.fields.map((field) => (
+
+ {field.name.includes("client") ?
+ ));
+};
+
+const BaseSSOSettingsForm: React.FC = ({ form, onFormSubmit }) => {
+ return (
+ = ({
+ isVisible,
+ onCancel,
+ onSuccess,
+ accessToken,
+}) => {
+ // Handle clearing SSO settings
+ const handleClearSSO = async () => {
+ if (!accessToken) {
+ NotificationsManager.fromBackend("No access token available");
+ return;
+ }
+
+ try {
+ // Clear all SSO settings
+ const clearSettings = {
+ google_client_id: null,
+ google_client_secret: null,
+ microsoft_client_id: null,
+ microsoft_client_secret: null,
+ microsoft_tenant: null,
+ generic_client_id: null,
+ generic_client_secret: null,
+ generic_authorization_endpoint: null,
+ generic_token_endpoint: null,
+ generic_userinfo_endpoint: null,
+ proxy_base_url: null,
+ user_email: null,
+ sso_provider: null,
+ };
+
+ await updateSSOSettings(accessToken, clearSettings);
+
+ NotificationsManager.success("SSO settings cleared successfully");
+
+ // Close modal and trigger success callback
+ onCancel();
+ onSuccess();
+ } catch (error) {
+ console.error("Failed to clear SSO settings:", error);
+ NotificationsManager.fromBackend("Failed to clear SSO settings: " + parseErrorMessage(error));
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default DeleteSSOSettingsModal;
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx
new file mode 100644
index 00000000000..559d837b409
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx
@@ -0,0 +1,620 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
+import EditSSOSettingsModal from "./EditSSOSettingsModal";
+import { useSSOSettings } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
+import { useEditSSOSettings } from "@/app/(dashboard)/hooks/sso/useEditSSOSettings";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import { parseErrorMessage } from "@/components/shared/errorUtils";
+import { processSSOSettingsPayload } from "../utils";
+
+// Constants
+const SSO_PROVIDERS = {
+ GOOGLE: "google",
+ MICROSOFT: "microsoft",
+ OKTA: "okta",
+ AUTH0: "auth0",
+ GENERIC: "generic",
+} as const;
+
+const TEST_DATA = {
+ MODAL_TITLE: "Edit SSO Settings",
+ MODAL_WIDTH: "800",
+ SUCCESS_MESSAGE: "SSO settings updated successfully",
+ ERROR_MESSAGE_PREFIX: "Failed to save SSO settings:",
+ BUTTON_TEXT: {
+ CANCEL: "Cancel",
+ SAVE: "Save",
+ SAVING: "Saving...",
+ },
+} as const;
+
+const TEST_IDS = {
+ MODAL: "modal",
+ BUTTON: "button",
+ BASE_SSO_FORM: "base-sso-form",
+ TRIGGER_FORM_SUBMIT: "trigger-form-submit",
+} as const;
+
+// Mock form instance
+const mockForm = {
+ resetFields: vi.fn(),
+ setFieldsValue: vi.fn(),
+ getFieldsValue: vi.fn(),
+ submit: vi.fn(),
+};
+
+// Types
+type SSOData = {
+ values: Record;
+} & Record;
+
+type SSOSettingsHookReturn = {
+ data: SSOData | null;
+ isLoading: boolean;
+ error: any;
+};
+
+type EditSSOSettingsHookReturn = {
+ mutateAsync: ReturnType;
+ isPending: boolean;
+};
+
+// Test data factories
+const createSSOData = (overrides: Record = {}): SSOData => ({
+ values: {
+ user_email: "test@example.com",
+ ...overrides,
+ },
+});
+
+const createGoogleSSOData = (overrides: Record = {}) =>
+ createSSOData({
+ google_client_id: "test-google-id",
+ google_client_secret: "test-google-secret",
+ ...overrides,
+ });
+
+const createMicrosoftSSOData = (overrides: Record = {}) =>
+ createSSOData({
+ microsoft_client_id: "test-microsoft-id",
+ microsoft_client_secret: "test-microsoft-secret",
+ microsoft_tenant: "test-tenant",
+ ...overrides,
+ });
+
+const createGenericSSOData = (overrides: Record = {}) =>
+ createSSOData({
+ generic_client_id: "test-generic-id",
+ generic_client_secret: "test-generic-secret",
+ generic_authorization_endpoint: overrides.authorization_endpoint || "https://custom.example.com/oauth",
+ ...overrides,
+ });
+
+const createRoleMappingsSSOData = (overrides: Record = {}) =>
+ createGoogleSSOData({
+ role_mappings: {
+ group_claim: "groups",
+ default_role: "internal_user",
+ roles: {
+ proxy_admin: overrides.proxy_admin || ["admin-group"],
+ proxy_admin_viewer: overrides.proxy_admin_viewer || ["viewer-group"],
+ internal_user: overrides.internal_user || ["user-group"],
+ internal_user_viewer: overrides.internal_user_viewer || ["readonly-group"],
+ },
+ },
+ ...overrides,
+ });
+
+// Mock utilities
+const createMockHooks = (): {
+ useSSOSettings: SSOSettingsHookReturn;
+ useEditSSOSettings: EditSSOSettingsHookReturn;
+} => ({
+ useSSOSettings: {
+ data: null,
+ isLoading: false,
+ error: null,
+ },
+ useEditSSOSettings: {
+ mutateAsync: vi.fn(),
+ isPending: false,
+ },
+});
+
+vi.mock("antd", () => ({
+ Modal: ({ children, open, title, footer, onCancel, width, ...props }: any) => (
+ ;
+ useEditSSOSettings: Partial;
+ }> = {},
+) => {
+ const defaultMocks = createMockHooks();
+ const mocks = {
+ useSSOSettings: { ...defaultMocks.useSSOSettings, ...overrides.useSSOSettings },
+ useEditSSOSettings: { ...defaultMocks.useEditSSOSettings, ...overrides.useEditSSOSettings },
+ };
+
+ (useSSOSettings as Mock).mockReturnValue(mocks.useSSOSettings);
+ (useEditSSOSettings as Mock).mockReturnValue(mocks.useEditSSOSettings);
+
+ return mocks;
+};
+
+const renderComponent = (props: Partial> = {}) => {
+ const defaultProps = {
+ isVisible: true,
+ onCancel: vi.fn(),
+ onSuccess: vi.fn(),
+ };
+
+ return {
+ ...render( = ({ isVisible, onCancel, onSuccess }) => {
+ const [form] = Form.useForm();
+
+ // Use react-query hooks for SSO settings
+ const ssoSettings = useSSOSettings();
+ const { mutateAsync, isPending } = useEditSSOSettings();
+ useEffect(() => {
+ if (isVisible && ssoSettings.data && ssoSettings.data.values) {
+ const ssoData = ssoSettings.data;
+ console.log("Raw SSO data received:", ssoData); // Debug log
+ console.log("SSO values:", ssoData.values); // Debug log
+ console.log("user_email from API:", ssoData.values.user_email); // Debug log
+
+ // Determine which SSO provider is configured
+ let selectedProvider = null;
+ if (ssoData.values.google_client_id) {
+ selectedProvider = "google";
+ } else if (ssoData.values.microsoft_client_id) {
+ selectedProvider = "microsoft";
+ } else if (ssoData.values.generic_client_id) {
+ // Check if it looks like Okta based on endpoints
+ if (
+ ssoData.values.generic_authorization_endpoint?.includes("okta") ||
+ ssoData.values.generic_authorization_endpoint?.includes("auth0")
+ ) {
+ selectedProvider = "okta";
+ } else {
+ selectedProvider = "generic";
+ }
+ }
+
+ // Extract role mappings if they exist
+ let roleMappingFields = {};
+ if (ssoData.values.role_mappings) {
+ const roleMappings = ssoData.values.role_mappings;
+
+ // Helper function to join arrays into comma-separated strings
+ const joinTeams = (teams: string[] | undefined): string => {
+ if (!teams || teams.length === 0) return "";
+ return teams.join(", ");
+ };
+
+ roleMappingFields = {
+ use_role_mappings: true,
+ group_claim: roleMappings.group_claim,
+ default_role: roleMappings.default_role || "internal_user",
+ proxy_admin_teams: joinTeams(roleMappings.roles?.proxy_admin),
+ admin_viewer_teams: joinTeams(roleMappings.roles?.proxy_admin_viewer),
+ internal_user_teams: joinTeams(roleMappings.roles?.internal_user),
+ internal_viewer_teams: joinTeams(roleMappings.roles?.internal_user_viewer),
+ };
+ }
+
+ // Set form values with existing data (excluding UI access control fields)
+ const formValues = {
+ sso_provider: selectedProvider,
+ ...ssoData.values,
+ ...roleMappingFields,
+ };
+
+ console.log("Setting form values:", formValues); // Debug log
+
+ // Clear form first, then set values with a small delay to ensure proper initialization
+ form.resetFields();
+ setTimeout(() => {
+ form.setFieldsValue(formValues);
+ console.log("Form values set, current form values:", form.getFieldsValue()); // Debug log
+ }, 100);
+ }
+ }, [isVisible, ssoSettings.data, form]);
+
+ // Enhanced form submission handler
+ const handleFormSubmit = async (formValues: Record) => {
+ try {
+ const payload = processSSOSettingsPayload(formValues);
+
+ await mutateAsync(payload, {
+ onSuccess: () => {
+ NotificationsManager.success("SSO settings updated successfully");
+ onSuccess();
+ },
+ onError: (error) => {
+ NotificationsManager.fromBackend("Failed to save SSO settings: " + parseErrorMessage(error));
+ },
+ });
+ } catch (error) {
+ // Handle processing errors gracefully
+ NotificationsManager.fromBackend("Failed to process SSO settings: " + parseErrorMessage(error));
+ }
+ };
+
+ const handleCancel = () => {
+ form.resetFields();
+ onCancel();
+ };
+
+ return (
+
+
+
+
+ }
+ onCancel={handleCancel}
+ >
+
+ );
+};
+
+export default EditSSOSettingsModal;
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/RedactableField.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/RedactableField.test.tsx
new file mode 100644
index 00000000000..a047d7aea4f
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/RedactableField.test.tsx
@@ -0,0 +1,108 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import RedactableField from "./RedactableField";
+
+describe("RedactableField", () => {
+ describe("when value is null", () => {
+ it("should display 'Not configured' text", () => {
+ render(
+ ,
+ );
+
+ expect(screen.getByText("SSO Configuration")).toBeInTheDocument();
+ expect(screen.getByText("Manage Single Sign-On authentication settings")).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.tsx
new file mode 100644
index 00000000000..27ff96af05f
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { useSSOSettings, type SSOSettingsValues } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { Button, Card, Descriptions, Space, Typography } from "antd";
+import { Edit, Shield, Trash2 } from "lucide-react";
+import { useState } from "react";
+import AddSSOSettingsModal from "./Modals/AddSSOSettingsModal";
+import DeleteSSOSettingsModal from "./Modals/DeleteSSOSettingsModal";
+import EditSSOSettingsModal from "./Modals/EditSSOSettingsModal";
+import RedactableField from "./RedactableField";
+import SSOSettingsEmptyPlaceholder from "./SSOSettingsEmptyPlaceholder";
+import SSOSettingsLoadingSkeleton from "./SSOSettingsLoadingSkeleton";
+import { ssoProviderDisplayNames, ssoProviderLogoMap } from "./constants";
+
+const { Title, Text } = Typography;
+
+export default function SSOSettings() {
+ const { data: ssoSettings, refetch, isLoading } = useSSOSettings();
+ const { accessToken } = useAuthorized();
+ const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
+ const [isAddModalVisible, setIsAddModalVisible] = useState(false);
+ const [isEditModalVisible, setIsEditModalVisible] = useState(false);
+ const isSSOConfigured =
+ Boolean(ssoSettings?.values.google_client_id) ||
+ Boolean(ssoSettings?.values.microsoft_client_id) ||
+ Boolean(ssoSettings?.values.generic_client_id);
+
+ // Determine the SSO provider based on the configuration
+ const detectSSOProvider = (values: SSOSettingsValues): string | null => {
+ if (values.google_client_id) return "google";
+ if (values.microsoft_client_id) return "microsoft";
+ if (values.generic_client_id) {
+ // Check if it looks like Okta/Auth0 based on endpoints
+ if (
+ values.generic_authorization_endpoint?.includes("okta") ||
+ values.generic_authorization_endpoint?.includes("auth0")
+ ) {
+ return "okta";
+ }
+ return "generic";
+ }
+ return null;
+ };
+
+ const selectedProvider = ssoSettings?.values ? detectSSOProvider(ssoSettings.values) : null;
+
+ const renderEndpointValue = (value?: string | null) => (
+
+ {value || "-"}
+
+ );
+
+ const renderSimpleValue = (value?: string | null) =>
+ value ? value : Not configured;
+
+ const descriptionsConfig = {
+ column: {
+ xxl: 1,
+ xl: 1,
+ lg: 1,
+ md: 1,
+ sm: 1,
+ xs: 1,
+ },
+ };
+
+ const providerConfigs = {
+ google: {
+ providerText: ssoProviderDisplayNames.google,
+ fields: [
+ {
+ label: "Client ID",
+ render: (values: SSOSettingsValues) =>
+
+
+ {config.fields.map((field, index) => (
+
+ {field.render(values)}
+
+ ))}
+
+ );
+ };
+
+ return (
+ <>
+ {isLoading ? (
+
+
+ {/* Header Section */}
+ setIsAddModalVisible(true)} />
+ )}
+
+
+ )}
+
+ setIsDeleteModalVisible(false)}
+ onSuccess={() => refetch()}
+ accessToken={accessToken}
+ />
+
+ setIsAddModalVisible(false)}
+ onSuccess={() => {
+ setIsAddModalVisible(false);
+ refetch();
+ }}
+ />
+
+ setIsEditModalVisible(false)}
+ onSuccess={() => {
+ setIsEditModalVisible(false);
+ refetch();
+ }}
+ />
+
+ );
+}
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettingsEmptyPlaceholder.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettingsEmptyPlaceholder.test.tsx
new file mode 100644
index 00000000000..6676ba1c2c9
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettingsEmptyPlaceholder.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import SSOSettingsEmptyPlaceholder from "./SSOSettingsEmptyPlaceholder";
+
+describe("SSOSettingsEmptyPlaceholder", () => {
+ it("should render", () => {
+ const onAdd = vi.fn();
+
+ render(
+ );
+}
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettingsLoadingSkeleton.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettingsLoadingSkeleton.test.tsx
new file mode 100644
index 00000000000..fd4fde69588
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettingsLoadingSkeleton.test.tsx
@@ -0,0 +1,222 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import SSOSettingsLoadingSkeleton from "./SSOSettingsLoadingSkeleton";
+
+// Mock lucide-react icons
+vi.mock("lucide-react", () => ({
+ Shield: ({ className }: any) => ,
+}));
+
+// Mock Ant Design components
+vi.mock("antd", () => ({
+ Card: ({ children, ...props }: any) => (
+
+
+
+ );
+};
+
+export default BaseSSOSettingsForm;
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/DeleteSSOSettingsModal.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/DeleteSSOSettingsModal.test.tsx
new file mode 100644
index 00000000000..ef6ec6c7055
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/DeleteSSOSettingsModal.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import DeleteSSOSettingsModal from "./DeleteSSOSettingsModal";
+
+describe("DeleteSSOSettingsModal", () => {
+ it("should render", () => {
+ const onCancel = vi.fn();
+ const onSuccess = vi.fn();
+
+ render(
+ Are you sure you want to clear all SSO settings? This action cannot be undone.
+Users will no longer be able to login using SSO after this change.
+
+
+ ),
+ Button: ({ children, onClick, loading, disabled, ...props }: any) => (
+
+ ),
+ Form: {
+ useForm: () => [mockForm],
+ },
+ Space: ({ children, ...props }: any) => (
+ {children}
+ {footer}
+
+
+ {children}
+
+ ),
+}));
+
+vi.mock("./BaseSSOSettingsForm", () => ({
+ default: ({ form, onFormSubmit }: any) => (
+
+
+
+ ),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/sso/useSSOSettings", () => ({
+ useSSOSettings: vi.fn(),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/sso/useEditSSOSettings", () => ({
+ useEditSSOSettings: vi.fn(),
+}));
+
+vi.mock("@/components/molecules/notifications_manager", () => ({
+ default: {
+ success: vi.fn(),
+ fromBackend: vi.fn(),
+ },
+}));
+
+vi.mock("@/components/shared/errorUtils", () => ({
+ parseErrorMessage: vi.fn(),
+}));
+
+vi.mock("../utils", () => ({
+ processSSOSettingsPayload: vi.fn(),
+}));
+
+// Test helpers
+const setupMocks = (
+ overrides: Partial<{
+ useSSOSettings: Partial
+
+ {value ? (
+ isHidden ? (
+ "•".repeat(value.length)
+ ) : (
+ value
+ )
+ ) : (
+ Not configured
+ )}
+
+ {value && (
+ :
+ );
+}
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.test.tsx
new file mode 100644
index 00000000000..5e7908a872b
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.test.tsx
@@ -0,0 +1,37 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import SSOSettings from "./SSOSettings";
+
+// Mock the useSSOSettings hook
+vi.mock("@/app/(dashboard)/hooks/sso/useSSOSettings", () => ({
+ useSSOSettings: () => ({
+ data: null,
+ refetch: vi.fn(),
+ }),
+}));
+
+const createQueryClient = () =>
+ new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ gcTime: 0,
+ },
+ },
+ });
+
+describe("SSOSettings", () => {
+ it("should render", () => {
+ const queryClient = createQueryClient();
+
+ render(
+
+ {ssoProviderLogoMap[selectedProvider] && (
+ 
+ )}
+ {config.providerText}
+
+
+
+
+ {isSSOConfigured ? (
+ renderSSOSettings()
+ ) : (
+
+
+
+
+ SSO Configuration
+ Manage Single Sign-On authentication settings
+
+
+ {isSSOConfigured && (
+ <>
+ } onClick={() => setIsEditModalVisible(true)}>
+ Edit SSO Settings
+
+ } onClick={() => setIsDeleteModalVisible(true)}>
+ Delete SSO Settings
+
+
+ )}
+
+
+
+ No SSO Configuration Found
+
+ Configure Single Sign-On (SSO) to enable seamless authentication for your team members using your identity
+ provider.
+
+
+ }
+ >
+
+
+
+ {children}
+
+ ),
+ Descriptions: Object.assign(
+ ({ children, bordered, column, ...props }: any) => (
+
+ {children}
+
+ ),
+ {
+ Item: ({ children, label, ...props }: any) => (
+
+
+ ),
+ },
+ ),
+ Typography: {
+ Title: ({ children, level, ...props }: any) => (
+ {label}
+ {children}
+
+ {children}
+
+ ),
+ Text: ({ children, type, ...props }: any) => (
+
+ {children}
+
+ ),
+ },
+ Space: ({ children, direction, size, className, ...props }: any) => (
+
+ {children}
+
+ ),
+ Skeleton: {
+ Button: ({ active, size, style, ...props }: any) => (
+
+ Button Skeleton
+
+ ),
+ Node: ({ active, style, ...props }: any) => (
+
+ Node Skeleton
+
+ ),
+ },
+}));
+
+describe("SSOSettingsLoadingSkeleton", () => {
+ it("should render without crashing", () => {
+ expect(() => render(
+
+
+ {/* Descriptions Table Skeleton */}
+
+
+
+
+ SSO Configuration
+ Manage Single Sign-On authentication settings
+
+
+
+
+
+
+
+
-
-
- setUsageView(value)}
- isAdmin={all_admin_roles.includes(userRole || "")}
- />
-
+ setUsageView(value)}
+ isAdmin={all_admin_roles.includes(userRole || "")}
+ />
{/* Your Usage Panel */}
@@ -479,7 +481,11 @@ const UsagePage: React.FC
-
- );
-};
-
/**
- * AllKeysTable – a new table for keys that mimics the table styling used in view_logs.
+ * VirtualKeysTable – a new table for keys that mimics the table styling used in view_logs.
* The team selector and filtering have been removed so that all keys are shown.
*/
-export function AllKeysTable({
- keys,
- setKeys,
- isLoading = false,
- pagination,
- onPageChange,
- pageSize = 50,
- teams,
- selectedTeam,
- setSelectedTeam,
- selectedKeyAlias,
- setSelectedKeyAlias,
- accessToken,
- userID,
- userRole,
- organizations,
- setCurrentOrg,
- refresh,
- onSortChange,
- currentSort,
- premiumUser,
- setAccessToken,
-}: AllKeysTableProps) {
- const [selectedKeyId, setSelectedKeyId] = useState
- Where Team is
-
-
-
- {selectedKeyId ? (
+ {selectedKey ? (
setSelectedKeyId(null)}
- keyData={filteredKeys.find((k) => k.token === selectedKeyId)}
- onKeyDataUpdate={(updatedKeyData) => {
- setKeys((keys) =>
- keys.map((key) => {
- if (key.token === updatedKeyData.token) {
- return updateExistingKeys(key, updatedKeyData);
- }
- return key;
- }),
- );
- if (refresh) refresh(); // Minimal fix: refresh the full key list after an update
- }}
- onDelete={() => {
- setKeys((keys) => keys.filter((key) => key.token !== selectedKeyId));
- if (refresh) refresh(); // Minimal fix: refresh the full key list after a delete
- }}
- accessToken={accessToken}
- userID={userID}
- userRole={userRole}
+ keyId={selectedKey.token}
+ onClose={() => setSelectedKey(null)}
+ keyData={selectedKey}
teams={allTeams}
- premiumUser={premiumUser}
- setAccessToken={setAccessToken}
/>
) : (
- {isLoading ? (
+ {isLoading || isFetching ? (
/end_user/new' \\
+
+-H 'Authorization: Bearer ' \\
+
+-H 'Content-Type: application/json' \\
+
+-d '{"user_id": "my-customer-id', "budget_id": ""}' # 👈 KEY CHANGE
+
+`;
+
+export const CHAT_COMPLETIONS_CURL_COMMAND = `
+curl -X POST --location '/chat/completions' \\
+
+-H 'Authorization: Bearer ' \\
+
+-H 'Content-Type: application/json' \\
+
+-d '{
+ "model": "gpt-3.5-turbo',
+ "messages":[{"role": "user", "content": "Hey, how's it going?"}],
+ "user": "my-customer-id"
+}' # 👈 KEY CHANGE
+
+`;
+
+export const OPENAI_SDK_PYTHON_CODE = `from openai import OpenAI
+client = OpenAI(
+ base_url="",
+ api_key=""
+)
+
+completion = client.chat.completions.create(
+ model="gpt-3.5-turbo",
+ messages=[
+ {"role": "system", "content": "You are a helpful assistant."},
+ {"role": "user", "content": "Hello!"}
+ ],
+ user="my-customer-id"
+)
+
+print(completion.choices[0].message)`;
diff --git a/ui/litellm-dashboard/src/components/common_components/NewBadge.test.tsx b/ui/litellm-dashboard/src/components/common_components/NewBadge.test.tsx
new file mode 100644
index 00000000000..a24b52db6b8
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/common_components/NewBadge.test.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import NewBadge from "./NewBadge";
+
+// Mock the hook directly
+vi.mock("@/app/(dashboard)/hooks/useDisableShowNewBadge", () => ({
+ useDisableShowNewBadge: vi.fn(),
+}));
+
+import { useDisableShowNewBadge } from "@/app/(dashboard)/hooks/useDisableShowNewBadge";
+
+const mockUseDisableShowNewBadge = vi.mocked(useDisableShowNewBadge);
+
+describe("NewBadge", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should render the badge when disableShowNewBadge is false", () => {
+ mockUseDisableShowNewBadge.mockReturnValue(false);
+
+ render(Test Content );
+
+ expect(screen.getByText("New")).toBeInTheDocument();
+ expect(screen.getByText("Test Content")).toBeInTheDocument();
+ });
+
+ it("should render the badge when disableShowNewBadge is not set", () => {
+ mockUseDisableShowNewBadge.mockReturnValue(false);
+
+ render(Test Content );
+
+ expect(screen.queryByText("New")).not.toBeInTheDocument();
+ expect(screen.getByText("Test Content")).toBeInTheDocument();
+ });
+
+ it("should render nothing when disableShowNewBadge is true and no children", () => {
+ mockUseDisableShowNewBadge.mockReturnValue(true);
+
+ const { container } = render(
+ {children}
+
+ ) : (
+ (defaultFilters);
const [allTeams, setAllTeams] = useState(teams || []);
const [allOrganizations, setAllOrganizations] = useState(organizations || []);
diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx
index 6bb014e6187..a04fbf3943d 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
-import { keyListCall, Member, Organization } from "../networking";
import { Setter } from "@/types";
+import { useEffect, useState } from "react";
+import { keyListCall, Member, Organization } from "../networking";
export interface Team {
team_id: string;
@@ -91,6 +91,10 @@ export interface KeyResponse {
last_rotation_at?: string;
key_rotation_at?: string;
next_rotation_at?: string;
+ user?: {
+ user_id: string;
+ user_email: string;
+ };
}
interface KeyListResponse {
@@ -106,6 +110,7 @@ interface UseKeyListProps {
selectedKeyAlias: string | null;
accessToken: string;
createClicked: boolean;
+ expand?: string[];
}
interface PaginationData {
@@ -129,6 +134,7 @@ const useKeyList = ({
selectedKeyAlias,
accessToken,
createClicked,
+ expand = [],
}: UseKeyListProps): UseKeyListReturn => {
const [keyData, setKeyData] = useState({
keys: [],
@@ -151,7 +157,19 @@ const useKeyList = ({
const page = typeof params.page === "number" ? params.page : 1;
const pageSize = typeof params.pageSize === "number" ? params.pageSize : 100;
- const data = await keyListCall(accessToken, null, null, null, null, null, page, pageSize);
+ const data = await keyListCall(
+ accessToken,
+ null,
+ null,
+ null,
+ null,
+ null,
+ page,
+ pageSize,
+ null,
+ null,
+ expand.join(","),
+ );
console.log("data", data);
setKeyData(data);
setError(null);
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 11e957ae6d4..fc248ee049a 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -24,11 +24,12 @@ import {
UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
-import { Badge, ConfigProvider, Layout, Menu } from "antd";
+import { ConfigProvider, Layout, Menu } from "antd";
import { useMemo } from "react";
import { all_admin_roles, internalUserRoles, isAdminRole, rolesWithWriteAccess } from "../utils/roles";
import type { Organization } from "./networking";
import UsageIndicator from "./usage_indicator";
+import NewBadge from "./common_components/NewBadge";
const { Sider } = Layout;
// Define the props type
@@ -103,11 +104,7 @@ const Sidebar: React.FC = ({ setPage, defaultSelectedKey, collapse
{
key: "agents",
page: "agents",
- label: (
-
- Agents = ({ setPage, defaultSelectedKey, collapse
page: "new_usage",
icon: = ({ setPage, defaultSelectedKey, collapse
{
key: "settings",
page: "settings",
- label: "Settings",
+ label: (
+
+ Settings = ({
transport,
auth_type: AUTH_TYPE.OAUTH2,
credentials: values.credentials,
+ authorization_url: values.authorization_url,
+ token_url: values.token_url,
+ registration_url: values.registration_url,
mcp_access_groups: values.mcp_access_groups,
static_headers: staticHeaders,
command: values.command,
@@ -608,6 +611,54 @@ const CreateMCPServer: React.FC = ({
size="large"
/>
+
+ Authorization URL Override (optional)
+
+
+
+ }
+ name="authorization_url"
+ >
+
+
+ Token URL Override (optional)
+
+
+
+ }
+ name="token_url"
+ >
+
+
+ Registration URL Override (optional)
+
+
+
+ }
+ name="registration_url"
+ >
+
),
@@ -148,11 +169,7 @@ const Navbar: React.FC
@@ -633,34 +546,46 @@ export function AllKeysTable({
-
- Showing{" "}
- {isLoading
- ? "..."
- : `${(pagination.currentPage - 1) * pageSize + 1} - ${Math.min(pagination.currentPage * pageSize, pagination.totalCount)}`}{" "}
- of {isLoading ? "..." : pagination.totalCount} results
-
+ {isLoading || isFetching ? (
+
-
- Page {isLoading ? "..." : pagination.currentPage} of {isLoading ? "..." : pagination.totalPages}
-
+ {isLoading || isFetching ? (
+
@@ -731,10 +656,6 @@ export function AllKeysTable({
userSelect: "none",
touchAction: "none",
opacity: header.column.getIsResizing() ? 1 : 0,
- transform:
- columnResizeMode === "onEnd" && header.column.getIsResizing()
- ? `translateX(${(table.options.columnResizeDirection === "rtl" ? -1 : 1) * (table.getState().columnSizingInfo.deltaOffset ?? 0)}px)`
- : "",
}}
/>
@@ -744,7 +665,7 @@ export function AllKeysTable({
))}
diff --git a/ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx b/ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx
new file mode 100644
index 00000000000..6f63fcfa549
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx
@@ -0,0 +1,276 @@
+import { renderHook, screen, waitFor, renderWithProviders } from "../../../tests/test-utils";
+import userEvent from "@testing-library/user-event";
+import { Form } from "antd";
+import type { UploadProps } from "antd/es/upload";
+import { describe, expect, it, vi } from "vitest";
+import type { Team } from "../key_team_helpers/key_list";
+import type { CredentialItem } from "../networking";
+import { Providers } from "../provider_info_helpers";
+import AddModelForm from "./AddModelForm";
+
+vi.mock("../molecules/models/ProviderLogo", () => ({
+ ProviderLogo: ({ provider, className }: { provider: string; className?: string }) => (
+ ;
+ selectedProvider: Providers;
+ setSelectedProvider: (provider: Providers) => void;
+ providerModels: string[];
+ setProviderModelsFn: (provider: Providers) => void;
+ getPlaceholder: (provider: Providers) => string;
+ uploadProps: UploadProps;
+ showAdvancedSettings: boolean;
+ setShowAdvancedSettings: (show: boolean) => void;
+ teams: Team[] | null;
+ credentials: CredentialItem[];
+}
+
+const { Title, Link } = Typography;
+
+const AddModelForm: React.FC = ({
+ form,
+ handleOk,
+ selectedProvider,
+ setSelectedProvider,
+ providerModels,
+ setProviderModelsFn,
+ getPlaceholder,
+ uploadProps,
+ showAdvancedSettings,
+ setShowAdvancedSettings,
+ teams,
+ credentials,
+}) => {
+ const [testMode, setTestMode] = useState("chat");
+ const [isResultModalVisible, setIsResultModalVisible] = useState(false);
+ const [isTestingConnection, setIsTestingConnection] = useState(false);
+ // Using a unique ID to force the ConnectionErrorDisplay to remount and run a fresh test
+ const [connectionTestId, setConnectionTestId] = useState("");
+
+ const { accessToken, userRole, premiumUser, userId } = useAuthorized();
+ const {
+ data: providerMetadata,
+ isLoading: isProviderMetadataLoading,
+ error: providerMetadataError,
+ } = useProviderFields();
+ const { data: guardrailsList, isLoading: isGuardrailsLoading, error: guardrailsError } = useGuardrails();
+ const { data: tagsList, isLoading: isTagsLoading, error: tagsError } = useTags();
+
+ const handleTestConnection = async () => {
+ setIsTestingConnection(true);
+ setConnectionTestId(`test-${Date.now()}`);
+ setIsResultModalVisible(true);
+ };
+
+ const [isTeamOnly, setIsTeamOnly] = useState(false);
+ const [modelAccessGroups, setModelAccessGroups] = useState([]);
+ // Team admin specific state
+ const [teamAdminSelectedTeam, setTeamAdminSelectedTeam] = useState(null);
+
+ useEffect(() => {
+ const fetchModelAccessGroups = async () => {
+ const response = await modelAvailableCall(accessToken, "", "", false, null, true, true);
+ setModelAccessGroups(response["data"].map((model: any) => model["id"]));
+ };
+ fetchModelAccessGroups();
+ }, [accessToken]);
+
+ const sortedProviderMetadata: ProviderCreateInfo[] = useMemo(() => {
+ if (!providerMetadata) {
+ return [];
+ }
+ return [...providerMetadata].sort((a, b) => a.provider_display_name.localeCompare(b.provider_display_name));
+ }, [providerMetadata]);
+
+ const providerMetadataErrorText = providerMetadataError
+ ? providerMetadataError instanceof Error
+ ? providerMetadataError.message
+ : "Failed to load providers"
+ : null;
+
+ const isAdmin = all_admin_roles.includes(userRole);
+ const isTeamAdmin = isUserTeamAdminForAnyTeam(teams, userId);
+
+ return (
+ <>
+ Add Model
+
+
+
+
+
+ {/* Test Connection Results Modal */}
+ {
+ setIsResultModalVisible(false);
+ setIsTestingConnection(false);
+ }}
+ footer={[
+ ,
+ ]}
+ width={700}
+ >
+ {/* Only render the ConnectionErrorDisplay when modal is visible and we have a test ID */}
+ {isResultModalVisible && (
+ {
+ setIsResultModalVisible(false);
+ setIsTestingConnection(false);
+ }}
+ onTestComplete={() => setIsTestingConnection(false)}
+ />
+ )}
+
+
+ );
+};
+
+export default AddModelForm;
diff --git a/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx b/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx
index 9362cbb3260..197bcd6569f 100644
--- a/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx
@@ -62,6 +62,14 @@ vi.mock("@/app/(dashboard)/hooks/providers/useProviderFields", () => ({
}),
}));
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
+ default: vi.fn().mockReturnValue({
+ accessToken: "test-access-token",
+ userRole: "Admin",
+ premiumUser: true,
+ }),
+}));
+
const createQueryClient = () =>
new QueryClient({
defaultOptions: {
@@ -137,7 +145,6 @@ const createTestProps = () => {
uploadProps,
accessToken: "test-access-token",
userRole: "Admin",
- premiumUser: true,
};
};
@@ -163,7 +170,6 @@ describe("Add Model Tab", () => {
credentials={props.credentials}
accessToken={props.accessToken}
userRole={props.userRole}
- premiumUser={props.premiumUser}
/>
,
);
@@ -192,7 +198,6 @@ describe("Add Model Tab", () => {
credentials={props.credentials}
accessToken={props.accessToken}
userRole={props.userRole}
- premiumUser={props.premiumUser}
/>
,
);
@@ -222,7 +227,6 @@ describe("Add Model Tab", () => {
credentials={props.credentials}
accessToken={props.accessToken}
userRole={props.userRole}
- premiumUser={props.premiumUser}
/>
,
);
@@ -251,7 +255,6 @@ describe("Add Model Tab", () => {
credentials={props.credentials}
accessToken={props.accessToken}
userRole={props.userRole}
- premiumUser={props.premiumUser}
/>
,
);
@@ -289,7 +292,6 @@ describe("Add Model Tab", () => {
credentials={props.credentials}
accessToken={props.accessToken}
userRole={props.userRole}
- premiumUser={props.premiumUser}
/>
,
);
diff --git a/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx b/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx
index cfe00af5071..f9b6533ac60 100644
--- a/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx
@@ -1,34 +1,18 @@
-import { useProviderFields } from "@/app/(dashboard)/hooks/providers/useProviderFields";
-import { all_admin_roles } from "@/utils/roles";
-import { Switch, Tab, TabGroup, TabList, TabPanel, TabPanels, Text } from "@tremor/react";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
import type { FormInstance } from "antd";
-import { Select as AntdSelect, Button, Card, Col, Form, Modal, Row, Tooltip, Typography } from "antd";
+import { Form } from "antd";
import type { UploadProps } from "antd/es/upload";
-import React, { useEffect, useMemo, useState } from "react";
-import TeamDropdown from "../common_components/team_dropdown";
+import React from "react";
import type { Team } from "../key_team_helpers/key_list";
-import {
- type CredentialItem,
- type ProviderCreateInfo,
- getGuardrailsList,
- modelAvailableCall,
- tagListCall,
-} from "../networking";
-import { Providers, providerLogoMap } from "../provider_info_helpers";
-import { ProviderLogo } from "../molecules/models/ProviderLogo";
-import { Tag } from "../tag_management/types";
+import { type CredentialItem } from "../networking";
+import { Providers } from "../provider_info_helpers";
import AddAutoRouterTab from "./add_auto_router_tab";
-import { TEST_MODES } from "./add_model_modes";
-import AdvancedSettings from "./advanced_settings";
-import ConditionalPublicModelName from "./conditional_public_model_name";
+import AddModelForm from "./AddModelForm";
import { handleAddAutoRouterSubmit } from "./handle_add_auto_router_submit";
-import LiteLLMModelNameField from "./litellm_model_name";
-import ConnectionErrorDisplay from "./model_connection_test";
-import ProviderSpecificFields from "./provider_specific_fields";
interface AddModelTabProps {
form: FormInstance; // For the Add Model tab
- handleOk: () => void;
+ handleOk: (values?: any) => Promise;
selectedProvider: Providers;
setSelectedProvider: (provider: Providers) => void;
providerModels: string[];
@@ -41,11 +25,8 @@ interface AddModelTabProps {
credentials: CredentialItem[];
accessToken: string;
userRole: string;
- premiumUser: boolean;
}
-const { Title, Link } = Typography;
-
const AddModelTab: React.FC = ({
form,
handleOk,
@@ -61,90 +42,9 @@ const AddModelTab: React.FC = ({
credentials,
accessToken,
userRole,
- premiumUser,
}) => {
// Create separate form instance for auto router
const [autoRouterForm] = Form.useForm();
- // State for test mode and connection testing
- const [testMode, setTestMode] = useState("chat");
- const [isResultModalVisible, setIsResultModalVisible] = useState(false);
- const [isTestingConnection, setIsTestingConnection] = useState(false);
- const [guardrailsList, setGuardrailsList] = useState([]);
- const [tagsList, setTagsList] = useState>({});
- // Using a unique ID to force the ConnectionErrorDisplay to remount and run a fresh test
- const [connectionTestId, setConnectionTestId] = useState("");
-
- // Provider metadata for driving the provider select from backend config
- const {
- data: providerMetadata,
- isLoading: isProviderMetadataLoading,
- error: providerMetadataError,
- } = useProviderFields();
-
- useEffect(() => {
- const fetchGuardrails = async () => {
- try {
- const response = await getGuardrailsList(accessToken);
- const guardrailNames = response.guardrails.map((g: { guardrail_name: string }) => g.guardrail_name);
- setGuardrailsList(guardrailNames);
- } catch (error) {
- console.error("Failed to fetch guardrails:", error);
- }
- };
-
- fetchGuardrails();
- }, [accessToken]);
-
- useEffect(() => {
- const fetchTags = async () => {
- try {
- const response = await tagListCall(accessToken);
- setTagsList(response);
- } catch (error) {
- console.error("Failed to fetch tags:", error);
- }
- };
-
- fetchTags();
- }, [accessToken]);
-
- // Test connection when button is clicked
- const handleTestConnection = async () => {
- setIsTestingConnection(true);
- // Generate a new test ID (using timestamp for uniqueness)
- // This forces React to create a new instance of ConnectionErrorDisplay
- setConnectionTestId(`test-${Date.now()}`);
- // Show the modal with the fresh test
- setIsResultModalVisible(true);
- };
-
- // State for team-only switch
- const [isTeamOnly, setIsTeamOnly] = useState(false);
-
- const [modelAccessGroups, setModelAccessGroups] = useState([]);
-
- useEffect(() => {
- const fetchModelAccessGroups = async () => {
- const response = await modelAvailableCall(accessToken, "", "", false, null, true, true);
- setModelAccessGroups(response["data"].map((model: any) => model["id"]));
- };
- fetchModelAccessGroups();
- }, [accessToken]);
-
- const sortedProviderMetadata: ProviderCreateInfo[] = useMemo(() => {
- if (!providerMetadata) {
- return [];
- }
- return [...providerMetadata].sort((a, b) => a.provider_display_name.localeCompare(b.provider_display_name));
- }, [providerMetadata]);
-
- const providerMetadataErrorText = providerMetadataError
- ? providerMetadataError instanceof Error
- ? providerMetadataError.message
- : "Failed to load providers"
- : null;
-
- const isAdmin = all_admin_roles.includes(userRole);
const handleAutoRouterOk = () => {
autoRouterForm
@@ -166,247 +66,20 @@ const AddModelTab: React.FC = ({
- Add Model
-
-
-
+
= ({
-
- {/* Test Connection Results Modal */}
- {
- setIsResultModalVisible(false);
- setIsTestingConnection(false);
- }}
- footer={[
- ,
- ]}
- width={700}
- >
- {/* Only render the ConnectionErrorDisplay when modal is visible and we have a test ID */}
- {isResultModalVisible && (
- {
- setIsResultModalVisible(false);
- setIsTestingConnection(false);
- }}
- onTestComplete={() => setIsTestingConnection(false)}
- />
- )}
-
);
};
diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 4ddd5cd5d1f..9de971bcd62 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -3,7 +3,7 @@
* Use this to avoid sharing master key with others
*/
import React, { useState, useEffect } from "react";
-import { Typography } from "antd";
+import { Alert, Typography } from "antd";
import { useRouter } from "next/navigation";
import { Button as Button2, Modal, Form, Input } from "antd";
import { Select, SelectItem } from "@tremor/react";
@@ -55,6 +55,7 @@ import {
getSSOSettings,
} from "./networking";
import UISettings from "./Settings/AdminSettings/UISettings/UISettings";
+import SSOSettings from "./Settings/AdminSettings/SSOSettings/SSOSettings";
const AdminPanel: React.FC = ({
searchParams,
@@ -496,14 +497,24 @@ const AdminPanel: React.FC = ({
Go to 'Internal Users' page to add other admins.
+ SSO Settings
Security Settings
SCIM
UI Settings
+
+
✨ Security Settings
+
+
+
+
+
);
};
diff --git a/ui/litellm-dashboard/src/components/budgets/constants.ts b/ui/litellm-dashboard/src/components/budgets/constants.ts
new file mode 100644
index 00000000000..9d6736db1f1
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/budgets/constants.ts
@@ -0,0 +1,42 @@
+export const CREATE_END_USER_CURL_COMMAND = `
+curl -X POST --location '
+ {provider}
+
+ ),
+}));
+
+vi.mock("../networking", async () => {
+ const actual = await vi.importActual("../networking");
+ return {
+ ...actual,
+ getGuardrailsList: vi.fn().mockResolvedValue({
+ guardrails: [{ guardrail_name: "test-guardrail-1" }, { guardrail_name: "test-guardrail-2" }],
+ }),
+ tagListCall: vi.fn().mockResolvedValue({}),
+ modelAvailableCall: vi.fn().mockResolvedValue({
+ data: [{ id: "model-group-1" }, { id: "model-group-2" }],
+ }),
+ modelHubCall: vi.fn().mockResolvedValue({
+ data: [
+ { model_group: "gpt-4", mode: "chat" },
+ { model_group: "gpt-3.5-turbo", mode: "chat" },
+ ],
+ }),
+ getProviderCreateMetadata: vi.fn().mockResolvedValue([
+ {
+ provider: "OpenAI",
+ provider_display_name: "OpenAI",
+ litellm_provider: "openai",
+ default_model_placeholder: "gpt-3.5-turbo",
+ credential_fields: [],
+ },
+ ]),
+ };
+});
+
+vi.mock("@/app/(dashboard)/hooks/providers/useProviderFields", () => ({
+ useProviderFields: vi.fn().mockReturnValue({
+ data: [
+ {
+ provider: "OpenAI",
+ provider_display_name: "OpenAI",
+ litellm_provider: "openai",
+ default_model_placeholder: "gpt-3.5-turbo",
+ credential_fields: [],
+ },
+ ],
+ isLoading: false,
+ error: null,
+ }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
+ default: vi.fn(),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/guardrails/useGuardrails", () => ({
+ useGuardrails: vi.fn().mockReturnValue({
+ data: [{ guardrail_name: "test-guardrail" }],
+ isLoading: false,
+ error: null,
+ }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({
+ useTags: vi.fn().mockReturnValue({
+ data: { tag1: ["model1", "model2"] },
+ isLoading: false,
+ error: null,
+ }),
+}));
+
+const mockAuthorizedUser = (userRole: string, userId: string, premiumUser: boolean) => ({
+ token: "test-token",
+ accessToken: "test-access-token",
+ userId,
+ userEmail: "test@example.com",
+ userRole,
+ premiumUser,
+ disabledPersonalKeyCreation: false,
+ showSSOBanner: false,
+});
+
+const testTeam: Team = {
+ team_id: "team-1",
+ team_alias: "Test Team",
+ models: ["gpt-4"],
+ max_budget: 100,
+ budget_duration: "monthly",
+ tpm_limit: null,
+ rpm_limit: null,
+ organization_id: "org-1",
+ created_at: "2024-01-01T00:00:00Z",
+ keys: [],
+ members_with_roles: [],
+};
+
+const createTestProps = (userRole = "proxy_admin", userId = "user-1", isTeamAdmin = false) => {
+ const { result } = renderHook(() => Form.useForm());
+ const [form] = result.current;
+
+ const teams = [
+ {
+ ...testTeam,
+ members_with_roles: isTeamAdmin ? [{ user_id: userId, role: "admin" }] : [],
+ },
+ ];
+
+ const credentials: CredentialItem[] = [
+ {
+ credential_name: "test-credential",
+ credential_values: {},
+ credential_info: {
+ custom_llm_provider: "openai",
+ description: "Test credential",
+ },
+ },
+ ];
+
+ const uploadProps: UploadProps = {
+ beforeUpload: () => false,
+ showUploadList: false,
+ };
+
+ return {
+ form,
+ handleOk: vi.fn(),
+ setSelectedProvider: vi.fn(),
+ setProviderModelsFn: vi.fn(),
+ getPlaceholder: vi.fn((provider: Providers) => `Enter ${provider} model name`),
+ setShowAdvancedSettings: vi.fn(),
+ selectedProvider: Providers.OpenAI,
+ providerModels: ["gpt-4", "gpt-3.5-turbo"],
+ showAdvancedSettings: false,
+ teams,
+ credentials,
+ uploadProps,
+ userRole,
+ userId,
+ };
+};
+
+describe("AddModelForm", () => {
+ it("should render", async () => {
+ const mockUseAuthorized = vi.mocked(await import("@/app/(dashboard)/hooks/useAuthorized"));
+ mockUseAuthorized.default.mockReturnValue(mockAuthorizedUser("proxy_admin", "user-1", true));
+
+ const props = createTestProps();
+
+ renderWithProviders( {
- const actual = await importOriginal();
- return {
- ...actual,
- userListCall: vi.fn().mockResolvedValue({
- users: [
- {
- user_id: "user-1",
- user_email: "user@example.com",
- user_role: "user",
- },
- ],
- }),
- };
-});
-
-// Mock filter helpers
-vi.mock("./key_team_helpers/filter_helpers", () => ({
- fetchAllKeyAliases: vi.fn().mockResolvedValue(["test-key-alias"]),
- fetchAllTeams: vi.fn().mockResolvedValue([
- {
- team_id: "team-1",
- team_alias: "Test Team",
- },
- ]),
- fetchAllOrganizations: vi.fn().mockResolvedValue([
- {
- organization_id: "org-1",
- organization_alias: "Test Organization",
- },
- ]),
-}));
-
-const mockKey: KeyResponse = {
- token: "sk-1234567890abcdef",
- token_id: "key-1",
- key_name: "test-key",
- key_alias: "Test Key Alias",
- spend: 5.5,
- max_budget: 100,
- expires: "2024-12-31T23:59:59Z",
- models: ["gpt-3.5-turbo", "gpt-4"],
- aliases: {},
- config: {},
- user_id: "user-1",
- team_id: "team-1",
- max_parallel_requests: 10,
- metadata: {},
- tpm_limit: 1000,
- rpm_limit: 100,
- duration: "30d",
- budget_duration: "1m",
- budget_reset_at: "2024-12-01T00:00:00Z",
- allowed_cache_controls: [],
- allowed_routes: [],
- permissions: {},
- model_spend: { "gpt-3.5-turbo": 2.5, "gpt-4": 3.0 },
- model_max_budget: { "gpt-3.5-turbo": 50, "gpt-4": 50 },
- soft_budget_cooldown: false,
- blocked: false,
- litellm_budget_table: {},
- organization_id: "org-1",
- created_at: "2024-11-01T10:00:00Z",
- updated_at: "2024-11-15T10:00:00Z",
- team_spend: 5.5,
- team_alias: "Test Team",
- team_tpm_limit: 5000,
- team_rpm_limit: 500,
- team_max_budget: 500,
- team_models: ["gpt-3.5-turbo", "gpt-4"],
- team_blocked: false,
- soft_budget: 50,
- team_model_aliases: {},
- team_member_spend: 0,
- team_metadata: {},
- end_user_id: "end-user-1",
- end_user_tpm_limit: 100,
- end_user_rpm_limit: 10,
- end_user_max_budget: 10,
- last_refreshed_at: Date.now(),
- api_key: "sk-1234567890abcdef",
- user_role: "user",
- rpm_limit_per_model: {},
- tpm_limit_per_model: {},
- user_tpm_limit: 1000,
- user_rpm_limit: 100,
- user_email: "user@example.com",
-};
-
-const mockTeam: Team = {
- team_id: "team-1",
- team_alias: "Test Team",
- models: ["gpt-3.5-turbo", "gpt-4"],
- max_budget: 500,
- budget_duration: "1m",
- tpm_limit: 5000,
- rpm_limit: 500,
- organization_id: "org-1",
- created_at: "2024-10-01T10:00:00Z",
- keys: [],
- members_with_roles: [],
-};
-
-const mockOrganization: Organization = {
- organization_id: "org-1",
- organization_alias: "Test Organization",
- budget_id: "budget-1",
- metadata: {},
- models: ["gpt-3.5-turbo", "gpt-4"],
- spend: 100,
- model_spend: { "gpt-3.5-turbo": 50, "gpt-4": 50 },
- created_at: "2024-10-01T10:00:00Z",
- created_by: "user-1",
- updated_at: "2024-11-01T10:00:00Z",
- updated_by: "user-1",
- litellm_budget_table: {},
- teams: [],
- users: [],
- members: [],
-};
-
-it("should render AllKeysTable component", () => {
- const mockProps = {
- keys: [mockKey],
- setKeys: vi.fn(),
- isLoading: false,
- pagination: {
- currentPage: 1,
- totalPages: 1,
- totalCount: 1,
- },
- onPageChange: vi.fn(),
- pageSize: 50,
- teams: [mockTeam],
- selectedTeam: null,
- setSelectedTeam: vi.fn(),
- selectedKeyAlias: null,
- setSelectedKeyAlias: vi.fn(),
- accessToken: "test-token",
- userID: "user-1",
- userRole: "admin",
- organizations: [mockOrganization],
- setCurrentOrg: vi.fn(),
- premiumUser: false,
- };
-
- renderWithProviders( = ({ accessToken }) => {
-
- Create a budget to assign to customers.
-
-
+
+
+
- How to use budget id
-
-
- Assign Budget to Customer
- Test it (Curl)
-
- Test it (OpenAI SDK)
-
-
-
-
- {`
-curl -X POST --location '/end_user/new' \
-
--H 'Authorization: Bearer ' \
-
--H 'Content-Type: application/json' \
-
--d '{"user_id": "my-customer-id', "budget_id": ""}' # 👈 KEY CHANGE
-
- `}
-
-
-
-
- {`
-curl -X POST --location '/chat/completions' \
-
--H 'Authorization: Bearer ' \
-
--H 'Content-Type: application/json' \
-
--d '{
- "model": "gpt-3.5-turbo',
- "messages":[{"role": "user", "content": "Hey, how's it going?"}],
- "user": "my-customer-id"
-}' # 👈 KEY CHANGE
-
- `}
-
-
-
-
- {`from openai import OpenAI
-client = OpenAI(
- base_url="",
- api_key=""
-)
-
-completion = client.chat.completions.create(
- model="gpt-3.5-turbo",
- messages=[
- {"role": "system", "content": "You are a helpful assistant."},
- {"role": "user", "content": "Hello!"}
- ],
- user="my-customer-id"
-)
-
-print(completion.choices[0].message)`}
-
-
-
-
-
+
+ How to use budget id
+
+
+ Assign Budget to Customer
+ Test it (Curl)
+ Test it (OpenAI SDK)
+
+
+
+ {CREATE_END_USER_CURL_COMMAND}
+
+
+ {CHAT_COMPLETIONS_CURL_COMMAND}
+
+
+ {OPENAI_SDK_PYTHON_CODE}
+
+
+
+
+
Complete the OAuth authorization flow to fetch an access token and store it as the authentication value.
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
index 1bf719ef904..f6a5d6622d4 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
@@ -10,6 +10,7 @@ export const mcpServerColumns = (
onView: (serverId: string) => void,
onEdit: (serverId: string) => void,
onDelete: (serverId: string) => void,
+ isLoadingHealth?: boolean,
): ColumnDef Use OAuth to fetch a fresh access token and save it as the authentication value.
+
+ Loading...
+
+ );
+ }
+
const getStatusColor = (status: string) => {
switch (status) {
case "healthy":
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
index f27e58e4a93..b4486bdfb23 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
@@ -229,6 +229,9 @@ const MCPServerEdit: React.FC
+ e.stopPropagation()}
+ >
+ Hide New Feature Indicators
+