From 899bafb29025e5ca81ae7196f7bbc806058d7c99 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 2 Feb 2026 13:12:20 -0800
Subject: [PATCH] adding team mappings UI

---
 .../(dashboard)/hooks/sso/useSSOSettings.ts   |  2 +-
 .../Modals/DeleteSSOSettingsModal.tsx         |  1 +
 .../AdminSettings/SSOSettings/SSOSettings.tsx | 22 +++++++++++++++++--
 .../AdminSettings/SSOSettings/utils.ts        |  9 +++++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/sso/useSSOSettings.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/sso/useSSOSettings.ts
index fe901f57747..0431a8d39f7 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/sso/useSSOSettings.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/sso/useSSOSettings.ts
@@ -41,7 +41,7 @@ export interface RoleMappings {
 }
 
 export interface TeamMappings {
-  team_id_jwt_field: string;
+  team_ids_jwt_field: string;
 }
 
 export interface SSOSettingsResponse {
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/DeleteSSOSettingsModal.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/DeleteSSOSettingsModal.tsx
index 44cbf0020eb..2656c861aa8 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/DeleteSSOSettingsModal.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/DeleteSSOSettingsModal.tsx
@@ -33,6 +33,7 @@ const DeleteSSOSettingsModal: React.FC<DeleteSSOSettingsModalProps> = ({ isVisib
       user_email: null,
       sso_provider: null,
       role_mappings: null,
+      team_mappings: null,
     };
 
     await editSSOSettings(clearSettings, {
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.tsx
index adc1251cde2..fdeda0ece3e 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/SSOSettings.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSSOSettings, type SSOSettingsValues } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
-import { Button, Card, Descriptions, Space, Typography } from "antd";
+import { Button, Card, Descriptions, Space, Tag, Typography } from "antd";
 import { Edit, Shield, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { ssoProviderDisplayNames, ssoProviderLogoMap } from "./constants";
@@ -28,6 +28,7 @@ export default function SSOSettings() {
 
   const selectedProvider = ssoSettings?.values ? detectSSOProvider(ssoSettings.values) : null;
   const isRoleMappingsEnabled = Boolean(ssoSettings?.values.role_mappings);
+  const isTeamMappingsEnabled = Boolean(ssoSettings?.values.team_mappings);
 
   const renderEndpointValue = (value?: string | null) => (
     <Text className="font-mono text-gray-600 text-sm" copyable={!!value}>
@@ -38,6 +39,15 @@ export default function SSOSettings() {
   const renderSimpleValue = (value?: string | null) =>
     value ? value : <span className="text-gray-400 italic">Not configured</span>;
 
+  const renderTeamMappingsField = (values: SSOSettingsValues) => {
+    if (!values.team_mappings?.team_ids_jwt_field) {
+      return <span className="text-gray-400 italic">Not configured</span>;
+    }
+    return (
+      <Tag>{values.team_mappings.team_ids_jwt_field}</Tag>
+    );
+  };
+
   const descriptionsConfig = {
     column: {
       xxl: 1,
@@ -103,6 +113,10 @@ export default function SSOSettings() {
           render: (values: SSOSettingsValues) => renderEndpointValue(values.generic_userinfo_endpoint),
         },
         { label: "Proxy Base URL", render: (values: SSOSettingsValues) => renderSimpleValue(values.proxy_base_url) },
+        isTeamMappingsEnabled ? {
+          label: "Team IDs JWT Field",
+          render: (values: SSOSettingsValues) => renderTeamMappingsField(values),
+        } : null,
       ],
     },
     generic: {
@@ -129,6 +143,10 @@ export default function SSOSettings() {
           render: (values: SSOSettingsValues) => renderEndpointValue(values.generic_userinfo_endpoint),
         },
         { label: "Proxy Base URL", render: (values: SSOSettingsValues) => renderSimpleValue(values.proxy_base_url) },
+        isTeamMappingsEnabled ? {
+          label: "Team IDs JWT Field",
+          render: (values: SSOSettingsValues) => renderTeamMappingsField(values),
+        } : null,
       ],
     },
   };
@@ -155,7 +173,7 @@ export default function SSOSettings() {
             <span>{config.providerText}</span>
           </div>
         </Descriptions.Item>
-        {config.fields.map((field, index) => (
+        {config.fields.map((field, index) => field && (
           <Descriptions.Item key={index} label={field.label}>
             {field.render(values)}
           </Descriptions.Item>
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.ts b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.ts
index 072aa4fc42f..948ed4d2bfe 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.ts
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/utils.ts
@@ -23,7 +23,9 @@ export const processSSOSettingsPayload = (formValues: Record<string, any>): Reco
   };
 
   // Add role mappings only if use_role_mappings is checked AND provider supports role mappings
-  if (use_role_mappings) {
+  const provider = rest.sso_provider;
+  const supportsRoleMappings = provider === "okta" || provider === "generic";
+  if (use_role_mappings && supportsRoleMappings) {
     // Helper function to split comma-separated string into array
     const splitTeams = (teams: string | undefined): string[] => {
       if (!teams || teams.trim() === "") return [];
@@ -54,8 +56,9 @@ export const processSSOSettingsPayload = (formValues: Record<string, any>): Reco
     };
   }
 
-  // Add team mappings only if use_team_mappings is checked
-  if (use_team_mappings) {
+  // Add team mappings only if use_team_mappings is checked AND provider supports team mappings
+  const supportsTeamMappings = provider === "okta" || provider === "generic";
+  if (use_team_mappings && supportsTeamMappings) {
     payload.team_mappings = {
       team_ids_jwt_field: team_ids_jwt_field,
     };