From 614a725e6fb51066d6852670a658bc57af15e023 Mon Sep 17 00:00:00 2001 From: Piyush Gupta Date: Mon, 27 Oct 2025 19:49:32 +0530 Subject: [PATCH 1/2] fix: plan clarification in ui popup --- .../components/pki-syncs/PkiSyncSelect.tsx | 6 ++++- .../secret-syncs/SecretSyncSelect.tsx | 5 +++- frontend/src/layouts/PamLayout/PamLayout.tsx | 8 +++++-- .../components/EncryptionPageForm.tsx | 2 ++ .../CertificateTemplatesSection.tsx | 1 + .../components/CertificateTemplatesTable.tsx | 5 +++- .../PkiTemplateListPage.tsx | 1 + .../KmipPage/components/KmipClientTable.tsx | 5 +++- .../OrgGroupsSection/OrgGroupsSection.tsx | 4 +++- .../IdentityAuthMethodModalContent.tsx | 3 ++- .../IdentitySection/IdentityLdapAuthForm.tsx | 10 ++++++-- .../IdentitySection/IdentitySection.tsx | 11 ++++++--- .../OrgMembersSection/OrgMembersSection.tsx | 2 +- .../OrgMembersSection/OrgMembersTable.tsx | 3 ++- .../OrgRoleTabSection/OrgRoleTable.tsx | 2 +- .../components/AppConnectionList.tsx | 5 +++- .../AuditLogsPage/components/LogsSection.tsx | 4 ++-- .../IdentityDetailsByIDPage.tsx | 1 + .../ProjectsPage/ProjectsPage.tsx | 2 +- .../AuditLogStreamTab/AuditLogStreamTab.tsx | 5 +++- .../components/LogStreamProviderSelect.tsx | 5 +++- .../components/KmipTab/OrgKmipTab.tsx | 5 +++- .../OrgEncryptionTab/ExternalKmsItem.tsx | 5 +++- .../OrgEncryptionTab/OrgEncryptionTab.tsx | 5 +++- .../OrgGithubSyncSection.tsx | 5 +++- .../OrgProvisioningTab/OrgSCIMSection.tsx | 13 +++++++--- .../components/OrgSsoTab/OrgLDAPSection.tsx | 13 +++++++--- .../components/OrgSsoTab/OrgSSOSection.tsx | 24 +++++++++++-------- .../components/OrgSsoTab/OrgSsoTab.tsx | 16 +++++++++---- .../components/ProjectTemplatesSection.tsx | 5 +++- .../components/UserOrgMembershipModal.tsx | 2 +- .../components/ResourceTypeSelect.tsx | 20 +++++++++------- .../GroupsSection/GroupsSection.tsx | 6 ++++- .../MemberDetailsByIDPage.tsx | 2 +- .../MemberRoleModify.tsx | 6 ++--- .../AuditLogsRetentionSection.tsx | 5 ++-- .../OverviewPage/OverviewPage.tsx | 15 ++++++------ .../AccessApprovalRequest.tsx | 7 ++++-- .../ApprovalPolicyList/ApprovalPolicyList.tsx | 2 +- .../components/ActionBar/ActionBar.tsx | 23 ++++++++++-------- .../SecretListView/SecretDetailSidebar.tsx | 2 +- .../SecretScanningDataSourcesSection.tsx | 5 +++- .../components/SshHostGroupHostsSection.tsx | 6 ++++- .../components/SshHostGroupsSection.tsx | 6 ++++- 44 files changed, 199 insertions(+), 89 deletions(-) diff --git a/frontend/src/components/pki-syncs/PkiSyncSelect.tsx b/frontend/src/components/pki-syncs/PkiSyncSelect.tsx index 667332c75..aedfebf47 100644 --- a/frontend/src/components/pki-syncs/PkiSyncSelect.tsx +++ b/frontend/src/components/pki-syncs/PkiSyncSelect.tsx @@ -69,7 +69,10 @@ export const PkiSyncSelect = ({ onSelect }: Props) => { type="button" onClick={() => enterprise && !subscription.enterpriseCertificateSyncs - ? handlePopUpOpen("upgradePlan") + ? handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true, + text: "You can use every Certificate Sync if you switch to Infisical's Enterprise plan." + }) : onSelect(destination) } className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600" @@ -148,6 +151,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => { handlePopUpToggle("upgradePlan", isOpen)} + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} text="You can use every Certificate Sync if you switch to Infisical's Enterprise plan." /> diff --git a/frontend/src/components/secret-syncs/SecretSyncSelect.tsx b/frontend/src/components/secret-syncs/SecretSyncSelect.tsx index 0c0fdd67b..b3aeab962 100644 --- a/frontend/src/components/secret-syncs/SecretSyncSelect.tsx +++ b/frontend/src/components/secret-syncs/SecretSyncSelect.tsx @@ -67,7 +67,9 @@ export const SecretSyncSelect = ({ onSelect }: Props) => { type="button" onClick={() => enterprise && !subscription.enterpriseSecretSyncs - ? handlePopUpOpen("upgradePlan") + ? handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true + }) : onSelect(destination) } className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600" @@ -145,6 +147,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => { )} handlePopUpToggle("upgradePlan", isOpen)} text="You can use every Secret Sync if you switch to Infisical's Enterprise plan." /> diff --git a/frontend/src/layouts/PamLayout/PamLayout.tsx b/frontend/src/layouts/PamLayout/PamLayout.tsx index f34c29d0d..5b74703dc 100644 --- a/frontend/src/layouts/PamLayout/PamLayout.tsx +++ b/frontend/src/layouts/PamLayout/PamLayout.tsx @@ -18,7 +18,10 @@ export const PamLayout = () => { useEffect(() => { if (subscription && !subscription.pam) { - handlePopUpOpen("upgradePlan"); + handlePopUpOpen("upgradePlan", { + description: "You can use PAM if you switch to Infisical's Enterprise plan.", + isEnterpriseFeature: true + }); } }, [subscription]); @@ -111,7 +114,8 @@ export const PamLayout = () => { onOpenChange={(isOpen) => { handlePopUpToggle("upgradePlan", isOpen); }} - text="You can use PAM if you switch to a paid Infisical plan." + text={popUp.upgradePlan.data?.description} + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} /> ); diff --git a/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx b/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx index 69f4139a2..b434c3f65 100644 --- a/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx +++ b/frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx @@ -54,6 +54,7 @@ export const EncryptionPageForm = () => { if (!subscription.hsm) { handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true, description: "Hardware Security Module's (HSM's), are only available on Enterprise plans." }); return; @@ -146,6 +147,7 @@ export const EncryptionPageForm = () => { isOpen={popUp.upgradePlan.isOpen} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} text={(popUp.upgradePlan?.data as { description: string })?.description} + isEnterpriseFeature={popUp.upgradePlan?.data?.isEnterpriseFeature} /> ); diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx index c4d25a6ad..629553200 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesSection.tsx @@ -104,6 +104,7 @@ export const CertificateTemplatesSection = ({ caId }: Props) => { handlePopUpToggle("upgradePlan", isOpen)} + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} text="Managing template enrollment options for EST is only available on Infisical's Enterprise plan." /> diff --git a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesTable.tsx b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesTable.tsx index e7d137807..c36618309 100644 --- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesTable.tsx +++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplatesTable.tsx @@ -36,6 +36,7 @@ type Props = { data?: { id?: string; name?: string; + isEnterpriseFeature?: boolean; } ) => void; }; @@ -90,7 +91,9 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen, caId }: Props) => { { if (!subscription?.pkiEst) { - handlePopUpOpen("upgradePlan"); + handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true + }); return; } diff --git a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx index 440ebb481..14eb6e5b6 100644 --- a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx +++ b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx @@ -296,6 +296,7 @@ export const PkiTemplateListPage = () => { isOpen={popUp.estUpgradePlan.isOpen} onOpenChange={(isOpen) => handlePopUpToggle("estUpgradePlan", isOpen)} text="You can only configure template enrollment methods if you switch to Infisical's Enterprise plan." + isEnterpriseFeature={true} /> ); diff --git a/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx b/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx index 9ba85beef..474ad158a 100644 --- a/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx +++ b/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx @@ -170,7 +170,9 @@ export const KmipClientTable = () => { leftIcon={} onClick={() => { if (subscription && !subscription.kmip) { - handlePopUpOpen("upgradePlan"); + handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true + }); return; } @@ -343,6 +345,7 @@ export const KmipClientTable = () => { isOpen={popUp.upgradePlan.isOpen} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} text="KMIP requires an enterprise plan." + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} /> diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx index 753ebd93c..125973810 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx @@ -27,7 +27,8 @@ export const OrgGroupsSection = () => { if (!subscription?.groups) { handlePopUpOpen("upgradePlan", { description: - "You can manage users more efficiently with groups if you upgrade your Infisical plan to an Enterprise license." + "You can manage users more efficiently with groups if you upgrade your Infisical plan to an Enterprise license.", + isEnterpriseFeature: true }); } else { handlePopUpOpen("group"); @@ -92,6 +93,7 @@ export const OrgGroupsSection = () => { handlePopUpToggle("upgradePlan", isOpen)} + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} text={(popUp.upgradePlan?.data as { description: string })?.description} /> diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx index 57663f441..b8bbce31b 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx @@ -291,7 +291,8 @@ export const IdentityAuthMethodModalContent = ({ handlePopUpToggle("upgradePlan", isOpen)} - text="You can use IP allowlisting if you switch to Infisical's Pro plan." + text={`You can use ${popUp.upgradePlan.data?.featureName ?? "IP allowlisting"} if you switch to Infisical's ${popUp.upgradePlan.data?.isEnterpriseFeature ? "Enterprise" : "Pro"} plan.`} + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} /> ); diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm.tsx index 878e65cfc..b2096fa06 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm.tsx @@ -147,7 +147,10 @@ const schema = z export type FormData = z.infer; type Props = { - handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void; + handlePopUpOpen: ( + popUpName: keyof UsePopUpState<["upgradePlan"]>, + data?: { isEnterpriseFeature?: boolean; featureName?: string } + ) => void; handlePopUpToggle: ( popUpName: keyof UsePopUpState<["identityAuthMethod"]>, state?: boolean @@ -304,7 +307,10 @@ export const IdentityLdapAuthForm = ({ useEffect(() => { if (!subscription?.ldap) { - handlePopUpOpen("upgradePlan"); + handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true, + featureName: "LDAP authentication" + }); handlePopUpToggle("identityAuthMethod", false); } }, [subscription, handlePopUpOpen, handlePopUpToggle]); diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx index 5c15a0cdd..c9af90a26 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx @@ -163,7 +163,7 @@ export const IdentitySection = withPermission( if (!isMoreIdentitiesAllowed && !isEnterprise) { handlePopUpOpen("upgradePlan", { description: - "You can add more identities if you upgrade your Infisical plan." + "You can add more identities if you upgrade your Infisical Pro plan." }); return; } @@ -209,7 +209,11 @@ export const IdentitySection = withPermission( leftIcon={} onClick={() => { if (subscription && !subscription.machineIdentityAuthTemplates) { - handlePopUpOpen("upgradePlan"); + handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true, + description: + "You can use Identity Auth Templates if you switch to Infisical's Enterprise plan." + }); return; } handlePopUpOpen("createTemplate"); @@ -279,7 +283,8 @@ export const IdentitySection = withPermission( handlePopUpToggle("upgradePlan", isOpen)} - text="You can use Identity Auth Templates if you switch to Infisical's Enterprise plan." + text={popUp.upgradePlan.data?.description} + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} /> ); diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx index a8f5ea059..0628a214a 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx @@ -75,7 +75,7 @@ export const OrgMembersSection = () => { if (!isMoreIdentitiesAllowed && !isEnterprise) { handlePopUpOpen("upgradePlan", { - description: "You can add more members if you upgrade your Infisical plan." + description: "You can add more members if you switch to Infisical's Pro plan." }); return; } diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx index 8e5d223ca..77ffe9117 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx @@ -133,7 +133,8 @@ export const OrgMembersTable = ({ if (isCustomRole && subscription && !subscription?.rbac) { handlePopUpOpen("upgradePlan", { - description: "You can assign custom roles to members if you upgrade your Infisical plan." + description: + "You can assign custom roles to members if you switch to Infisical's Pro plan." }); return; } diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx index 6aaae7d57..6b9caa8b9 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx @@ -104,7 +104,7 @@ export const OrgRoleTable = () => { if (isCustomRole && subscription && !subscription?.rbac) { handlePopUpOpen("upgradePlan", { description: - "You can set the default org role to a custom role if you upgrade your Infisical plan." + "You can set the default org role to a custom role if you switch to Infisical's Pro plan." }); return; } diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx index 8cd28ea91..ad0ed433d 100644 --- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx +++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx @@ -75,7 +75,9 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => { type="button" onClick={() => enterprise && !subscription.enterpriseAppConnections - ? handlePopUpOpen("upgradePlan") + ? handlePopUpOpen("upgradePlan", { + isEnterpriseFeature: true + }) : onSelect(option.app) } className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600" @@ -167,6 +169,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => { isOpen={popUp.upgradePlan.isOpen} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} text="You can use every App Connection if you switch to Infisical's Enterprise plan." + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} /> ); diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx index e950dbb45..2ad1d20e6 100644 --- a/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx +++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx @@ -137,7 +137,7 @@ const LogsSectionComponent = ({ onOpenChange={(isOpen) => { handlePopUpToggle("upgradePlan", isOpen); }} - text="You can use audit logs if you switch to a paid Infisical plan." + text="You can use audit logs if you switch to Infisical's Pro plan." /> @@ -181,7 +181,7 @@ const LogsSectionComponent = ({ onOpenChange={(isOpen) => { handlePopUpToggle("upgradePlan", isOpen); }} - text="You can use audit logs if you switch to a paid Infisical plan." + text="You can use audit logs if you switch to Infisical's Pro plan." /> ); diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx index 65e7d0b4a..f3bd05eeb 100644 --- a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx +++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx @@ -121,6 +121,7 @@ const Page = () => { isOpen={popUp.upgradePlan.isOpen} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} text={(popUp.upgradePlan?.data as { description: string })?.description} + isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature} /> { handlePopUpToggle("upgradePlan", isOpen)} - text="You have exceeded the number of projects allowed on the free plan." + text="You have exceeded the number of projects allowed on the free plan. You can upgrade to Infisical's Pro plan to add more projects." /> ); diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx index f4f7932a4..2ccdfad61 100644 --- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx @@ -29,7 +29,9 @@ export const AuditLogStreamsTab = withPermission(