fix: add empty display for sso general tab if no sso is enabled

This commit is contained in:
Scott Wilson
2025-05-15 20:01:08 -07:00
parent 3306a9ca69
commit 7e9ee7b5e3
2 changed files with 99 additions and 92 deletions
@@ -144,6 +144,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
<a <a
href="https://infisical.com/docs/integrations/secret-syncs/overview#key-schemas" href="https://infisical.com/docs/integrations/secret-syncs/overview#key-schemas"
target="_blank" target="_blank"
rel="noreferrer"
> >
Key Schema Key Schema
</a>{" "} </a>{" "}
@@ -1,7 +1,7 @@
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
import { Button, ContentLoader } from "@app/components/v2"; import { Button, ContentLoader, EmptyState } from "@app/components/v2";
import { import {
OrgPermissionActions, OrgPermissionActions,
OrgPermissionSubjects, OrgPermissionSubjects,
@@ -60,102 +60,108 @@ export const OrgSsoTab = withPermission(
const shouldShowCreateIdentityProviderView = const shouldShowCreateIdentityProviderView =
!isOidcConfigured && !isSamlConfigured && !isLdapConfigured; !isOidcConfigured && !isSamlConfigured && !isLdapConfigured;
const createIdentityProviderView = (shouldDisplaySection(LoginMethod.SAML) || const createIdentityProviderView =
shouldDisplaySection(LoginMethod.SAML) ||
shouldDisplaySection(LoginMethod.OIDC) || shouldDisplaySection(LoginMethod.OIDC) ||
shouldDisplaySection(LoginMethod.LDAP)) && ( shouldDisplaySection(LoginMethod.LDAP) ? (
<> <>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6"> <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="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
<p className="mb-2 mt-1 text-gray-400"> <p className="mb-2 mt-1 text-gray-400">
Connect your identity provider to simplify user management Connect your identity provider to simplify user management
</p> </p>
{shouldDisplaySection(LoginMethod.SAML) && ( {shouldDisplaySection(LoginMethod.SAML) && (
<div <div
className={twMerge( className={twMerge(
"mt-4 flex items-center justify-between", "mt-4 flex items-center justify-between",
(shouldDisplaySection(LoginMethod.OIDC) || (shouldDisplaySection(LoginMethod.OIDC) ||
shouldDisplaySection(LoginMethod.LDAP)) && shouldDisplaySection(LoginMethod.LDAP)) &&
"border-b border-mineshaft-500 pb-4" "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");
}}
> >
Connect <p className="text-lg text-gray-200">SAML</p>
</Button> <Button
</div> colorSchema="secondary"
)} onClick={() => {
{shouldDisplaySection(LoginMethod.OIDC) && ( if (!subscription?.samlSSO) {
<div handlePopUpOpen("upgradePlan", { feature: "SAML SSO", plan: "Pro" });
className={twMerge( return;
"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;
}
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 <p className="text-lg text-gray-200">OIDC</p>
</Button> <Button
</div> colorSchema="secondary"
)} onClick={() => {
{shouldDisplaySection(LoginMethod.LDAP) && ( if (!subscription?.oidcSSO) {
<div className="mt-4 flex items-center justify-between"> handlePopUpOpen("upgradePlan", { feature: "OIDC SSO", plan: "Pro" });
<p className="text-lg text-gray-200">LDAP</p> return;
<Button }
colorSchema="secondary"
onClick={() => {
if (!subscription?.ldap) {
handlePopUpOpen("upgradePlan", { feature: "LDAP", plan: "Enterprise" });
return;
}
handlePopUpOpen("addLDAP"); handlePopUpOpen("addOIDC");
}} }}
> >
Connect Connect
</Button> </Button>
</div> </div>
)} )}
</div> {shouldDisplaySection(LoginMethod.LDAP) && (
<SSOModal <div className="mt-4 flex items-center justify-between">
hideDelete <p className="text-lg text-gray-200">LDAP</p>
popUp={popUp} <Button
handlePopUpClose={handlePopUpClose} colorSchema="secondary"
handlePopUpToggle={handlePopUpToggle} onClick={() => {
/> if (!subscription?.ldap) {
<OIDCModal handlePopUpOpen("upgradePlan", { feature: "LDAP", plan: "Enterprise" });
hideDelete return;
popUp={popUp} }
handlePopUpClose={handlePopUpClose}
handlePopUpToggle={handlePopUpToggle} handlePopUpOpen("addLDAP");
/> }}
<LDAPModal >
hideDelete Connect
popUp={popUp} </Button>
handlePopUpClose={handlePopUpClose} </div>
handlePopUpToggle={handlePopUpToggle} )}
/> </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) { if (areConfigsLoading) {
return <ContentLoader />; return <ContentLoader />;