From 7e9ee7b5e3513bd7cc43d6549dcb024802b1834c Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Thu, 15 May 2025 20:01:08 -0700
Subject: [PATCH] fix: add empty display for sso general tab if no sso is
 enabled

---
 .../SecretSyncOptionsFields.tsx               |   1 +
 .../components/OrgSsoTab/OrgSsoTab.tsx        | 190 +++++++++---------
 2 files changed, 99 insertions(+), 92 deletions(-)

diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
index a497c3ba9..e51de48ca 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
@@ -144,6 +144,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                     <a
                       href="https://infisical.com/docs/integrations/secret-syncs/overview#key-schemas"
                       target="_blank"
+                      rel="noreferrer"
                     >
                       Key Schema
                     </a>{" "}
diff --git a/frontend/src/pages/organization/SsoPage/components/OrgSsoTab/OrgSsoTab.tsx b/frontend/src/pages/organization/SsoPage/components/OrgSsoTab/OrgSsoTab.tsx
index 65f97cc2d..ca27b7517 100644
--- a/frontend/src/pages/organization/SsoPage/components/OrgSsoTab/OrgSsoTab.tsx
+++ b/frontend/src/pages/organization/SsoPage/components/OrgSsoTab/OrgSsoTab.tsx
@@ -1,7 +1,7 @@
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { Button, ContentLoader } from "@app/components/v2";
+import { Button, ContentLoader, EmptyState } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -60,102 +60,108 @@ export const OrgSsoTab = withPermission(
     const shouldShowCreateIdentityProviderView =
       !isOidcConfigured && !isSamlConfigured && !isLdapConfigured;
 
-    const createIdentityProviderView = (shouldDisplaySection(LoginMethod.SAML) ||
+    const createIdentityProviderView =
+      shouldDisplaySection(LoginMethod.SAML) ||
       shouldDisplaySection(LoginMethod.OIDC) ||
-      shouldDisplaySection(LoginMethod.LDAP)) && (
-      <>
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-          <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
-          <p className="mb-2 mt-1 text-gray-400">
-            Connect your identity provider to simplify user management
-          </p>
-          {shouldDisplaySection(LoginMethod.SAML) && (
-            <div
-              className={twMerge(
-                "mt-4 flex items-center justify-between",
-                (shouldDisplaySection(LoginMethod.OIDC) ||
-                  shouldDisplaySection(LoginMethod.LDAP)) &&
-                  "border-b border-mineshaft-500 pb-4"
-              )}
-            >
-              <p className="text-lg text-gray-200">SAML</p>
-              <Button
-                colorSchema="secondary"
-                onClick={() => {
-                  if (!subscription?.samlSSO) {
-                    handlePopUpOpen("upgradePlan", { feature: "SAML SSO", plan: "Pro" });
-                    return;
-                  }
-
-                  handlePopUpOpen("addSSO");
-                }}
+      shouldDisplaySection(LoginMethod.LDAP) ? (
+        <>
+          <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+            <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
+            <p className="mb-2 mt-1 text-gray-400">
+              Connect your identity provider to simplify user management
+            </p>
+            {shouldDisplaySection(LoginMethod.SAML) && (
+              <div
+                className={twMerge(
+                  "mt-4 flex items-center justify-between",
+                  (shouldDisplaySection(LoginMethod.OIDC) ||
+                    shouldDisplaySection(LoginMethod.LDAP)) &&
+                    "border-b border-mineshaft-500 pb-4"
+                )}
               >
-                Connect
-              </Button>
-            </div>
-          )}
-          {shouldDisplaySection(LoginMethod.OIDC) && (
-            <div
-              className={twMerge(
-                "mt-4 flex items-center justify-between",
-                shouldDisplaySection(LoginMethod.LDAP) && "border-b border-mineshaft-500 pb-4"
-              )}
-            >
-              <p className="text-lg text-gray-200">OIDC</p>
-              <Button
-                colorSchema="secondary"
-                onClick={() => {
-                  if (!subscription?.oidcSSO) {
-                    handlePopUpOpen("upgradePlan", { feature: "OIDC SSO", plan: "Pro" });
-                    return;
-                  }
+                <p className="text-lg text-gray-200">SAML</p>
+                <Button
+                  colorSchema="secondary"
+                  onClick={() => {
+                    if (!subscription?.samlSSO) {
+                      handlePopUpOpen("upgradePlan", { feature: "SAML SSO", plan: "Pro" });
+                      return;
+                    }
 
-                  handlePopUpOpen("addOIDC");
-                }}
+                    handlePopUpOpen("addSSO");
+                  }}
+                >
+                  Connect
+                </Button>
+              </div>
+            )}
+            {shouldDisplaySection(LoginMethod.OIDC) && (
+              <div
+                className={twMerge(
+                  "mt-4 flex items-center justify-between",
+                  shouldDisplaySection(LoginMethod.LDAP) && "border-b border-mineshaft-500 pb-4"
+                )}
               >
-                Connect
-              </Button>
-            </div>
-          )}
-          {shouldDisplaySection(LoginMethod.LDAP) && (
-            <div className="mt-4 flex items-center justify-between">
-              <p className="text-lg text-gray-200">LDAP</p>
-              <Button
-                colorSchema="secondary"
-                onClick={() => {
-                  if (!subscription?.ldap) {
-                    handlePopUpOpen("upgradePlan", { feature: "LDAP", plan: "Enterprise" });
-                    return;
-                  }
+                <p className="text-lg text-gray-200">OIDC</p>
+                <Button
+                  colorSchema="secondary"
+                  onClick={() => {
+                    if (!subscription?.oidcSSO) {
+                      handlePopUpOpen("upgradePlan", { feature: "OIDC SSO", plan: "Pro" });
+                      return;
+                    }
 
-                  handlePopUpOpen("addLDAP");
-                }}
-              >
-                Connect
-              </Button>
-            </div>
-          )}
-        </div>
-        <SSOModal
-          hideDelete
-          popUp={popUp}
-          handlePopUpClose={handlePopUpClose}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <OIDCModal
-          hideDelete
-          popUp={popUp}
-          handlePopUpClose={handlePopUpClose}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <LDAPModal
-          hideDelete
-          popUp={popUp}
-          handlePopUpClose={handlePopUpClose}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-      </>
-    );
+                    handlePopUpOpen("addOIDC");
+                  }}
+                >
+                  Connect
+                </Button>
+              </div>
+            )}
+            {shouldDisplaySection(LoginMethod.LDAP) && (
+              <div className="mt-4 flex items-center justify-between">
+                <p className="text-lg text-gray-200">LDAP</p>
+                <Button
+                  colorSchema="secondary"
+                  onClick={() => {
+                    if (!subscription?.ldap) {
+                      handlePopUpOpen("upgradePlan", { feature: "LDAP", plan: "Enterprise" });
+                      return;
+                    }
+
+                    handlePopUpOpen("addLDAP");
+                  }}
+                >
+                  Connect
+                </Button>
+              </div>
+            )}
+          </div>
+          <SSOModal
+            hideDelete
+            popUp={popUp}
+            handlePopUpClose={handlePopUpClose}
+            handlePopUpToggle={handlePopUpToggle}
+          />
+          <OIDCModal
+            hideDelete
+            popUp={popUp}
+            handlePopUpClose={handlePopUpClose}
+            handlePopUpToggle={handlePopUpToggle}
+          />
+          <LDAPModal
+            hideDelete
+            popUp={popUp}
+            handlePopUpClose={handlePopUpClose}
+            handlePopUpToggle={handlePopUpToggle}
+          />
+        </>
+      ) : (
+        <EmptyState title="" iconSize="2x" className="!pb-10 pt-14">
+          <p className="text-center text-lg">Single Sign-On (SSO) has been disabled</p>
+          <p className="text-center">Contact your server administrator</p>
+        </EmptyState>
+      );
 
     if (areConfigsLoading) {
       return <ContentLoader />;