From 72c7fd63bf43f65ffe8aae19b23fa553ef462111 Mon Sep 17 00:00:00 2001
From: Cole McIntosh <colemcintosh6@gmail.com>
Date: Wed, 4 Jun 2025 14:34:18 -0600
Subject: [PATCH] Implement SSO configuration check in AdminPanel and update
 SSOModals to reflect SSO status

- Added logic to check SSO configuration and set state in AdminPanel.
- Introduced a new function to handle SSO configuration checks.
- Updated UI to conditionally render SSO button text based on configuration status.
- Passed SSO configuration status as a prop to SSOModals for better integration.
---
 .../src/components/SSOModals.tsx              |  4 +-
 .../src/components/admins.tsx                 | 46 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/SSOModals.tsx b/ui/litellm-dashboard/src/components/SSOModals.tsx
index 47ece2fd3b..9de42f8c01 100644
--- a/ui/litellm-dashboard/src/components/SSOModals.tsx
+++ b/ui/litellm-dashboard/src/components/SSOModals.tsx
@@ -13,6 +13,7 @@ interface SSOModalsProps {
   handleInstructionsCancel: () => void;
   form: any; // Replace with proper Form type if available
   accessToken: string | null;
+  ssoConfigured?: boolean; // Add optional prop to indicate if SSO is configured
 }
 
 const ssoProviderLogoMap: Record<string, string> = {
@@ -100,6 +101,7 @@ const SSOModals: React.FC<SSOModalsProps> = ({
   handleInstructionsCancel,
   form,
   accessToken,
+  ssoConfigured = false, // Default to false if not provided
 }) => {
   // Load existing SSO settings when modal opens
   useEffect(() => {
@@ -197,7 +199,7 @@ const SSOModals: React.FC<SSOModalsProps> = ({
   return (
     <>
       <Modal
-        title="Add SSO"
+        title={ssoConfigured ? "Edit SSO Settings" : "Add SSO"}
         visible={isAddSSOModalVisible}
         width={800}
         footer={null}
diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 79c6b95ce7..6b3ddc094d 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -67,6 +67,7 @@ import {
   addAllowedIP,
   getAllowedIPs,
   deleteAllowedIP,
+  getSSOSettings,
 } from "./networking";
 
 const AdminPanel: React.FC<AdminPanelProps> = ({
@@ -98,6 +99,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const [isDeleteIPModalVisible, setIsDeleteIPModalVisible] = useState(false);
   const [allowedIPs, setAllowedIPs] = useState<string[]>([]);
   const [ipToDelete, setIPToDelete] = useState<string | null>(null);
+  const [ssoConfigured, setSsoConfigured] = useState<boolean>(false);
   const router = useRouter();
 
   const [possibleUIRoles, setPossibleUIRoles] = useState<null | Record<
@@ -116,6 +118,30 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   let nonSssoUrl = baseUrl;
   nonSssoUrl += "/fallback/login";
 
+  // Extract the SSO configuration check logic into a separate function for reuse
+  const checkSSOConfiguration = async () => {
+    if (accessToken && premiumUser) {
+      try {
+        const ssoData = await getSSOSettings(accessToken);
+        console.log("SSO data:", ssoData);
+        
+        // Check if any SSO provider is configured
+        if (ssoData && ssoData.values) {
+          const hasGoogleSSO = ssoData.values.google_client_id && ssoData.values.google_client_secret;
+          const hasMicrosoftSSO = ssoData.values.microsoft_client_id && ssoData.values.microsoft_client_secret;
+          const hasGenericSSO = ssoData.values.generic_client_id && ssoData.values.generic_client_secret;
+          
+          setSsoConfigured(hasGoogleSSO || hasMicrosoftSSO || hasGenericSSO);
+        } else {
+          setSsoConfigured(false);
+        }
+      } catch (error) {
+        console.error("Error checking SSO configuration:", error);
+        setSsoConfigured(false);
+      }
+    }
+  };
+
   const handleShowAllowedIPs = async () => {
     try {
       if (premiumUser !== true) {
@@ -185,6 +211,10 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const handleAddSSOOk = () => {
     setIsAddSSOModalVisible(false);
     form.resetFields();
+    // Refresh SSO configuration status
+    if (accessToken && premiumUser) {
+      checkSSOConfiguration();
+    }
   };
 
   const handleAddSSOCancel = () => {
@@ -199,10 +229,18 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
 
   const handleInstructionsOk = () => {
     setIsInstructionsModalVisible(false);
+    // Refresh SSO configuration status after instructions are closed
+    if (accessToken && premiumUser) {
+      checkSSOConfiguration();
+    }
   };
 
   const handleInstructionsCancel = () => {
     setIsInstructionsModalVisible(false);
+    // Refresh SSO configuration status after instructions are closed
+    if (accessToken && premiumUser) {
+      checkSSOConfiguration();
+    }
   };
 
   const roles = ["proxy_admin", "proxy_admin_viewer"];
@@ -264,6 +302,11 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
     fetchProxyAdminInfo();
   }, [accessToken]);
 
+  // Add new useEffect to check SSO configuration
+  useEffect(() => {
+    checkSSOConfiguration();
+  }, [accessToken, premiumUser]);
+
   const handleMemberUpdateOk = () => {
     setIsUpdateModalModalVisible(false);
     memberForm.resetFields();
@@ -509,7 +552,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
                     style={{ width: '150px' }}
                     onClick={() => premiumUser === true ? setIsAddSSOModalVisible(true) : message.error("Only premium users can add SSO")}
                   >
-                    Add SSO
+                    {ssoConfigured ? "Edit SSO Settings" : "Add SSO"}
                   </Button>
                 </div>
                 <div>
@@ -534,6 +577,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
                 handleInstructionsCancel={handleInstructionsCancel}
                 form={form}
                 accessToken={accessToken}
+                ssoConfigured={ssoConfigured}
               />
               <Modal
               title="Manage Allowed IP Addresses"