awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(rbac): applied subscription banner in custom roles

Browse Source
This commit is contained in:
Akhil Mohan
2023-09-08 21:16:02 +05:30
parent 8003273b2c
commit 63ff669612
3 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/views/Org/MembersPage/MembersPage.tsx
View File

@@ -36,9 +36,7 @@ export const MembersPage = withPermission(
<Tabs defaultValue={TabSections.Member}>
<TabList>
<Tab value={TabSections.Member}>Members</Tab>
{process.env.NEXT_PUBLIC_NEW_PERMISSION_FLAG === "true" && (
<Tab value={TabSections.Roles}>Roles</Tab>
)}
<Tab value={TabSections.Roles}>Roles</Tab>
</TabList>
<TabPanel value={TabSections.Member}>
<motion.div

26
frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx
View File

@@ -14,8 +14,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 } from "@app/context";
import { Button, FormControl, Input, UpgradePlanModal } from "@app/components/v2";
import { useOrganization, useSubscription } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useCreateRole, useUpdateRole } from "@app/hooks/api";
import { TRole } from "@app/hooks/api/roles/types";
@@ -80,6 +81,8 @@ const SIMPLE_PERMISSION_OPTIONS = [
export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
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) => {
</Button>
</div>
<p className="mb-8 text-gray-400">
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
</p>
<div className="flex flex-col space-y-6">
<FormControl
@@ -230,6 +239,17 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
</Button>
</div>
</form>
{subscription && (
<UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => 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."
}
/>
)}
</div>
);
};

28
frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx
View File

@@ -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) => {
</Button>
</div>
<p className="mb-8 text-gray-400">
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
</p>
<div className="flex flex-col space-y-6">
<FormControl
@@ -302,6 +311,17 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
</Button>
</div>
</form>
{subscription && (
<UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => 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."
}
/>
)}
</div>
);
};