Merge pull request #4757 from Infisical/fix/upgrade-plan-notice-in-popup

fix: Pro/Enterprise plan clarification in ui popup
This commit is contained in:
Piyush Gupta
2025-10-28 17:52:26 +05:30
committed by GitHub
44 changed files with 202 additions and 90 deletions
@@ -29,7 +29,9 @@ export const AuditLogStreamsTab = withPermission(
<Button
onClick={() => {
if (subscription && !subscription?.auditLogStreams) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
handlePopUpOpen("auditLogStreamForm");
@@ -56,6 +58,7 @@ export const AuditLogStreamsTab = withPermission(
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can add audit log streams if you switch to Infisical's Enterprise plan."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</div>
);
@@ -70,7 +70,9 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
type="button"
onClick={() => {
if (option.provider === LogProvider.QRadar) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
} else {
onSelect(option.provider);
}
@@ -110,6 +112,7 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="This audit log stream provider requires an enterprise license."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</div>
);
@@ -180,7 +180,9 @@ const OrgConfigSection = ({
className="mt-2"
onClick={() => {
if (subscription && !subscription.kmip) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
@@ -251,6 +253,7 @@ const OrgConfigSection = ({
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="KMIP requires an enterprise plan."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</>
);
@@ -27,6 +27,7 @@ type Props = {
kmsId?: string;
name?: string;
provider?: string;
isEnterpriseFeature?: boolean;
}
) => void;
subscription: SubscriptionPlan;
@@ -111,7 +112,9 @@ export const ExternalKmsItem = ({ kms, handlePopUpOpen, subscription }: Props) =
onClick={(e) => {
e.stopPropagation();
if (subscription && !subscription?.externalKms) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
@@ -74,7 +74,9 @@ export const OrgEncryptionTab = withPermission(
<Button
onClick={() => {
if (subscription && !subscription?.externalKms) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
handlePopUpOpen("addExternalKms");
@@ -124,6 +126,7 @@ export const OrgEncryptionTab = withPermission(
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can configure external KMS if you switch to Infisical's Enterprise plan."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
<AddExternalKmsForm
isOpen={popUp.addExternalKms.isOpen}
@@ -111,7 +111,9 @@ export const OrgGithubSyncSection = () => {
onClick={() =>
subscription.githubOrgSync
? handlePopUpOpen("githubOrgSyncConfig")
: handlePopUpOpen("upgradePlan")
: handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
})
}
colorSchema="secondary"
isDisabled={!isAllowed}
@@ -203,6 +205,7 @@ export const OrgGithubSyncSection = () => {
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can use GitHub Organization Plan if you switch to Infisical's Enterprise plan."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</div>
);
@@ -29,7 +29,9 @@ export const OrgScimSection = () => {
if (subscription?.scim) {
handlePopUpOpen("scimToken");
} else {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
}
};
@@ -37,7 +39,9 @@ export const OrgScimSection = () => {
try {
if (!currentOrg?.id) return;
if (!subscription?.scim) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
@@ -90,7 +94,9 @@ export const OrgScimSection = () => {
if (subscription?.scim) {
handleEnableSCIMToggle(value);
} else {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
}
}}
isChecked={currentOrg?.scimEnabled ?? false}
@@ -112,6 +118,7 @@ export const OrgScimSection = () => {
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</div>
);
@@ -34,7 +34,9 @@ export const OrgLDAPSection = (): JSX.Element => {
try {
if (!currentOrg?.id) return;
if (!subscription?.ldap) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
@@ -78,7 +80,9 @@ export const OrgLDAPSection = (): JSX.Element => {
handlePopUpOpen("addLDAP");
} else {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
}
} catch (err) {
console.error(err);
@@ -87,7 +91,9 @@ export const OrgLDAPSection = (): JSX.Element => {
const openLDAPGroupMapModal = () => {
if (!subscription?.ldap) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
@@ -186,6 +192,7 @@ export const OrgLDAPSection = (): JSX.Element => {
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</div>
);
@@ -27,7 +27,7 @@ export const OrgSSOSection = (): JSX.Element => {
const { mutateAsync } = useUpdateSSOConfig();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"upgradePlan",
"upgradeEnterprisePlan",
// "upgradeEnterprisePlan",
"addSSO"
] as const);
@@ -38,7 +38,9 @@ export const OrgSSOSection = (): JSX.Element => {
if (!currentOrg?.id) return;
if (!subscription?.samlSSO) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
description: "You can use SAML SSO if you switch to Infisical's Pro plan."
});
return;
}
@@ -65,7 +67,11 @@ export const OrgSSOSection = (): JSX.Element => {
if (!currentOrg?.id) return;
if (!subscription?.samlSSO || !subscription?.groups) {
handlePopUpOpen("upgradeEnterprisePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true,
description:
"You can use SAML group mapping if you switch to Infisical's Enterprise plan."
});
return;
}
@@ -105,7 +111,9 @@ export const OrgSSOSection = (): JSX.Element => {
handlePopUpOpen("addSSO");
} else {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
description: "You can use SAML SSO if you switch to Infisical's Pro plan."
});
}
} catch (err) {
console.error(err);
@@ -234,12 +242,8 @@ export const OrgSSOSection = (): JSX.Element => {
<UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can use SAML SSO if you switch to Infisical's Pro plan."
/>
<UpgradePlanModal
isOpen={popUp.upgradeEnterprisePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradeEnterprisePlan", isOpen)}
text="You can use SAML group mapping if you switch to Infisical's Enterprise plan."
text={popUp.upgradePlan.data?.description}
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</div>
);
@@ -93,7 +93,7 @@ export const OrgSsoTab = withPermission(
colorSchema="secondary"
onClick={() => {
if (!subscription?.samlSSO) {
handlePopUpOpen("upgradePlan", { feature: "SAML SSO", plan: "Pro" });
handlePopUpOpen("upgradePlan", { feature: "SAML SSO" });
return;
}
@@ -116,7 +116,7 @@ export const OrgSsoTab = withPermission(
colorSchema="secondary"
onClick={() => {
if (!subscription?.oidcSSO) {
handlePopUpOpen("upgradePlan", { feature: "OIDC SSO", plan: "Pro" });
handlePopUpOpen("upgradePlan", { feature: "OIDC SSO" });
return;
}
@@ -134,7 +134,10 @@ export const OrgSsoTab = withPermission(
colorSchema="secondary"
onClick={() => {
if (!subscription?.ldap) {
handlePopUpOpen("upgradePlan", { feature: "LDAP", plan: "Enterprise" });
handlePopUpOpen("upgradePlan", {
feature: "LDAP",
isEnterpriseFeature: true
});
return;
}
@@ -208,8 +211,13 @@ export const OrgSsoTab = withPermission(
text={`You can use ${
(popUp.upgradePlan.data as { feature: string })?.feature
} if you switch to Infisical's ${
(popUp.upgradePlan.data as { plan: string })?.plan
(popUp.upgradePlan.data as { isEnterpriseFeature: boolean })?.isEnterpriseFeature
? "Enterprise"
: "Pro"
} plan.`}
isEnterpriseFeature={
(popUp.upgradePlan.data as { isEnterpriseFeature: boolean })?.isEnterpriseFeature
}
/>
</>
);
@@ -60,7 +60,9 @@ export const ProjectTemplatesSection = () => {
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() => {
if (!subscription?.projectTemplates) {
handlePopUpOpen("upgradePlan");
handlePopUpOpen("upgradePlan", {
isEnterpriseFeature: true
});
return;
}
@@ -84,6 +86,7 @@ export const ProjectTemplatesSection = () => {
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can create project templates if you switch to Infisical's Enterprise plan."
isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
/>
</div>
</div>