diff --git a/frontend/src/views/Org/MembersPage/MembersPage.tsx b/frontend/src/views/Org/MembersPage/MembersPage.tsx index 9e7855e53..f05b44f4b 100644 --- a/frontend/src/views/Org/MembersPage/MembersPage.tsx +++ b/frontend/src/views/Org/MembersPage/MembersPage.tsx @@ -36,9 +36,7 @@ export const MembersPage = withPermission( Members - {process.env.NEXT_PUBLIC_NEW_PERMISSION_FLAG === "true" && ( - Roles - )} + Roles { const [searchPermission, setSearchPermission] = useState(""); + const { subscription } = useSubscription(); + const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const); const isNonEditable = ["owner", "admin", "member"].includes(role?.slug || ""); const isNewRole = !role?.slug; @@ -120,6 +123,11 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => { }; const handleFormSubmit = async (el: TFormSchema) => { + if (subscription && !subscription?.rbac) { + handlePopUpOpen("upgradePlan"); + return; + } + if (!isNewRole) { await handleRoleUpdate(el); return; @@ -155,7 +163,8 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {

- Organization-level roles allow you to define permissions for resources at a high level across the organization + Organization-level roles allow you to define permissions for resources at a high level + across the organization

{
+ {subscription && ( + handlePopUpToggle("upgradePlan", isOpen)} + text={ + subscription.slug === null + ? "You can use RBAC under an Enterprise license" + : "You can use RBAC if you switch to Infisical's Team Plan." + } + /> + )} ); }; diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx index f40400185..a288acfc5 100644 --- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx +++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx @@ -21,8 +21,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; -import { Button, FormControl, Input } from "@app/components/v2"; -import { useOrganization, useWorkspace } from "@app/context"; +import { Button, FormControl, Input, UpgradePlanModal } from "@app/components/v2"; +import { useOrganization, useSubscription, useWorkspace } from "@app/context"; +import { usePopUp } from "@app/hooks"; import { useCreateRole, useUpdateRole } from "@app/hooks/api"; import { TRole } from "@app/hooks/api/roles/types"; @@ -108,6 +109,8 @@ type Props = { export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => { const [searchPermission, setSearchPermission] = useState(""); + const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const); + const isNonEditable = ["admin", "member", "viewer"].includes(role?.slug || ""); const isNewRole = !role?.slug; @@ -115,6 +118,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => { const { currentOrg } = useOrganization(); const orgId = currentOrg?._id || ""; const { currentWorkspace } = useWorkspace(); + const { subscription } = useSubscription(); const workspaceId = currentWorkspace?._id || ""; const { @@ -133,7 +137,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => { const handleRoleUpdate = async (el: TFormSchema) => { if (!role?._id) return; - console.log(el); try { await updateRole({ orgId, @@ -151,6 +154,11 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => { }; const handleFormSubmit = async (el: TFormSchema) => { + if (subscription && !subscription?.rbac) { + handlePopUpOpen("upgradePlan"); + return; + } + if (!isNewRole) { await handleRoleUpdate(el); return; @@ -187,7 +195,8 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {

- Project-level roles allow you to define permissions for resources within projects at a granular level + Project-level roles allow you to define permissions for resources within projects at a + granular level

{
+ {subscription && ( + handlePopUpToggle("upgradePlan", isOpen)} + text={ + subscription.slug === null + ? "You can use RBAC under an Enterprise license" + : "You can use RBAC if you switch to Infisical's Team Plan." + } + /> + )} ); };