Opt for bulk save role permissions instead of save on each form change

feat: enhance approval policies

backend/src/db/migrations/20240717184929_add-enforcement-level-secrets-policies.ts

@@ -0,0 +1,23 @@
+import { Knex } from "knex";
+
+import { EnforcementLevel } from "@app/lib/types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretApprovalPolicy, "enforcementLevel");
+  if (!hasColumn) {
+    await knex.schema.table(TableName.SecretApprovalPolicy, (table) => {
+      table.string("enforcementLevel", 10).notNullable().defaultTo(EnforcementLevel.Hard);
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretApprovalPolicy, "enforcementLevel");
+  if (hasColumn) {
+    await knex.schema.table(TableName.SecretApprovalPolicy, (table) => {
+      table.dropColumn("enforcementLevel");
+    });
+  }
+}

backend/src/db/migrations/20240717194958_add-enforcement-level-access-policies.ts

@@ -0,0 +1,23 @@
+import { Knex } from "knex";
+
+import { EnforcementLevel } from "@app/lib/types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.AccessApprovalPolicy, "enforcementLevel");
+  if (!hasColumn) {
+    await knex.schema.table(TableName.AccessApprovalPolicy, (table) => {
+      table.string("enforcementLevel", 10).notNullable().defaultTo(EnforcementLevel.Hard);
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.AccessApprovalPolicy, "enforcementLevel");
+  if (hasColumn) {
+    await knex.schema.table(TableName.AccessApprovalPolicy, (table) => {
+      table.dropColumn("enforcementLevel");
+    });
+  }
+}

backend/src/db/schemas/access-approval-policies.ts

@@ -5,6 +5,8 @@
 
 import { z } from "zod";
 
+import { EnforcementLevel } from "@app/lib/types";
+
 import { TImmutableDBKeys } from "./models";
 
 export const AccessApprovalPoliciesSchema = z.object({
@@ -14,7 +16,8 @@ export const AccessApprovalPoliciesSchema = z.object({
   secretPath: z.string().nullable().optional(),
   envId: z.string().uuid(),
   createdAt: z.date(),
-  updatedAt: z.date()
+  updatedAt: z.date(),
+  enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
 });
 
 export type TAccessApprovalPolicies = z.infer<typeof AccessApprovalPoliciesSchema>;

backend/src/db/schemas/secret-approval-policies.ts

@@ -14,7 +14,8 @@ export const SecretApprovalPoliciesSchema = z.object({
   approvals: z.number().default(1),
   envId: z.string().uuid(),
   createdAt: z.date(),
-  updatedAt: z.date()
+  updatedAt: z.date(),
+  enforcementLevel: z.string().default("hard")
 });
 
 export type TSecretApprovalPolicies = z.infer<typeof SecretApprovalPoliciesSchema>;

backend/src/ee/routes/v1/access-approval-policy-router.ts

@@ -1,6 +1,7 @@
 import { nanoid } from "nanoid";
 import { z } from "zod";
 
+import { EnforcementLevel } from "@app/lib/types";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { sapPubSchema } from "@app/server/routes/sanitizedSchemas";
 import { AuthMode } from "@app/services/auth/auth-type";
@@ -17,7 +18,8 @@ export const registerAccessApprovalPolicyRouter = async (server: FastifyZodProvi
           secretPath: z.string().trim().default("/"),
           environment: z.string(),
           approvers: z.string().array().min(1),
-          approvals: z.number().min(1).default(1)
+          approvals: z.number().min(1).default(1),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
         })
         .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],
@@ -38,7 +40,8 @@ export const registerAccessApprovalPolicyRouter = async (server: FastifyZodProvi
         actorOrgId: req.permission.orgId,
         ...req.body,
         projectSlug: req.body.projectSlug,
-        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`
+        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`,
+        enforcementLevel: req.body.enforcementLevel
       });
       return { approval };
     }
@@ -115,7 +118,8 @@ export const registerAccessApprovalPolicyRouter = async (server: FastifyZodProvi
             .optional()
             .transform((val) => (val === "" ? "/" : val)),
           approvers: z.string().array().min(1),
-          approvals: z.number().min(1).default(1)
+          approvals: z.number().min(1).default(1),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
         })
         .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],

backend/src/ee/routes/v1/access-approval-request-router.ts

@@ -99,7 +99,8 @@ export const registerAccessApprovalRequestRouter = async (server: FastifyZodProv
               approvals: z.number(),
               approvers: z.string().array(),
               secretPath: z.string().nullish(),
-              envId: z.string()
+              envId: z.string(),
+              enforcementLevel: z.string()
             }),
             reviewers: z
               .object({

backend/src/ee/routes/v1/org-role-router.ts

@@ -52,6 +52,36 @@ export const registerOrgRoleRouter = async (server: FastifyZodProvider) => {
     }
   });
 
+  server.route({
+    method: "GET",
+    url: "/:organizationId/roles/:roleId",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      params: z.object({
+        organizationId: z.string().trim(),
+        roleId: z.string().trim()
+      }),
+      response: {
+        200: z.object({
+          role: OrgRolesSchema
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      const role = await server.services.orgRole.getRole(
+        req.permission.id,
+        req.params.organizationId,
+        req.params.roleId,
+        req.permission.authMethod,
+        req.permission.orgId
+      );
+      return { role };
+    }
+  });
+
   server.route({
     method: "PATCH",
     url: "/:organizationId/roles/:roleId",
@@ -69,7 +99,7 @@ export const registerOrgRoleRouter = async (server: FastifyZodProvider) => {
           .trim()
           .optional()
           .refine(
-            (val) => typeof val === "undefined" || Object.keys(OrgMembershipRole).includes(val),
+            (val) => typeof val !== "undefined" && !Object.keys(OrgMembershipRole).includes(val),
             "Please choose a different slug, the slug you have entered is reserved."
           )
           .refine((val) => typeof val === "undefined" || slugify(val) === val, {

backend/src/ee/routes/v1/scim-router.ts

@@ -350,7 +350,12 @@ export const registerScimRouter = async (server: FastifyZodProvider) => {
               schemas: z.array(z.string()),
               id: z.string().trim(),
               displayName: z.string().trim(),
-              members: z.array(z.any()).length(0),
+              members: z.array(
+                z.object({
+                  value: z.string(),
+                  display: z.string()
+                })
+              ),
               meta: z.object({
                 resourceType: z.string().trim()
               })
@@ -423,7 +428,7 @@ export const registerScimRouter = async (server: FastifyZodProvider) => {
         displayName: z.string().trim(),
         members: z.array(
           z.object({
-            value: z.string(), // infisical orgMembershipId
+            value: z.string(),
             display: z.string()
           })
         )

backend/src/ee/routes/v1/secret-approval-policy-router.ts

@@ -2,6 +2,7 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 
 import { removeTrailingSlash } from "@app/lib/fn";
+import { EnforcementLevel } from "@app/lib/types";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { sapPubSchema } from "@app/server/routes/sanitizedSchemas";
@@ -24,11 +25,13 @@ export const registerSecretApprovalPolicyRouter = async (server: FastifyZodProvi
             .string()
             .optional()
             .nullable()
+            .default("/")
             .transform((val) => (val ? removeTrailingSlash(val) : val)),
-          approverUserIds: z.string().array().min(1),
-          approvals: z.number().min(1).default(1)
+          approvers: z.string().array().min(1),
+          approvals: z.number().min(1).default(1),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
         })
-        .refine((data) => data.approvals <= data.approverUserIds.length, {
+        .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],
           message: "The number of approvals should be lower than the number of approvers."
         }),
@@ -47,7 +50,8 @@ export const registerSecretApprovalPolicyRouter = async (server: FastifyZodProvi
         actorOrgId: req.permission.orgId,
         projectId: req.body.workspaceId,
         ...req.body,
-        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`
+        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`,
+        enforcementLevel: req.body.enforcementLevel
       });
       return { approval };
     }
@@ -66,15 +70,17 @@ export const registerSecretApprovalPolicyRouter = async (server: FastifyZodProvi
       body: z
         .object({
           name: z.string().optional(),
-          approverUserIds: z.string().array().min(1),
+          approvers: z.string().array().min(1),
           approvals: z.number().min(1).default(1),
           secretPath: z
             .string()
             .optional()
             .nullable()
             .transform((val) => (val ? removeTrailingSlash(val) : val))
+            .transform((val) => (val === "" ? "/" : val)),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).optional()
         })
-        .refine((data) => data.approvals <= data.approverUserIds.length, {
+        .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],
           message: "The number of approvals should be lower than the number of approvers."
         }),

backend/src/ee/routes/v1/secret-approval-request-router.ts

@@ -49,7 +49,8 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
               name: z.string(),
               approvals: z.number(),
               approvers: z.string().array(),
-              secretPath: z.string().optional().nullable()
+              secretPath: z.string().optional().nullable(),
+              enforcementLevel: z.string()
             }),
             committerUser: approvalRequestUser,
             commits: z.object({ op: z.string(), secretId: z.string().nullable().optional() }).array(),
@@ -248,7 +249,8 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
                 name: z.string(),
                 approvals: z.number(),
                 approvers: approvalRequestUser.array(),
-                secretPath: z.string().optional().nullable()
+                secretPath: z.string().optional().nullable(),
+                enforcementLevel: z.string()
               }),
               environment: z.string(),
               statusChangedByUser: approvalRequestUser.optional(),

backend/src/ee/services/access-approval-policy/access-approval-policy-service.ts

@@ -47,7 +47,8 @@ export const accessApprovalPolicyServiceFactory = ({
     approvals,
     approvers,
     projectSlug,
-    environment
+    environment,
+    enforcementLevel
   }: TCreateAccessApprovalPolicy) => {
     const project = await projectDAL.findProjectBySlug(projectSlug, actorOrgId);
     if (!project) throw new BadRequestError({ message: "Project not found" });
@@ -94,7 +95,8 @@ export const accessApprovalPolicyServiceFactory = ({
           envId: env.id,
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );
@@ -143,7 +145,8 @@ export const accessApprovalPolicyServiceFactory = ({
     actor,
     actorOrgId,
     actorAuthMethod,
-    approvals
+    approvals,
+    enforcementLevel
   }: TUpdateAccessApprovalPolicy) => {
     const accessApprovalPolicy = await accessApprovalPolicyDAL.findById(policyId);
     if (!accessApprovalPolicy) throw new BadRequestError({ message: "Secret approval policy not found" });
@@ -163,7 +166,8 @@ export const accessApprovalPolicyServiceFactory = ({
         {
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );

backend/src/ee/services/access-approval-policy/access-approval-policy-types.ts

@@ -1,4 +1,4 @@
-import { TProjectPermission } from "@app/lib/types";
+import { EnforcementLevel, TProjectPermission } from "@app/lib/types";
 import { ActorAuthMethod } from "@app/services/auth/auth-type";
 
 import { TPermissionServiceFactory } from "../permission/permission-service";
@@ -20,6 +20,7 @@ export type TCreateAccessApprovalPolicy = {
   approvers: string[];
   projectSlug: string;
   name: string;
+  enforcementLevel: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TUpdateAccessApprovalPolicy = {
@@ -28,6 +29,7 @@ export type TUpdateAccessApprovalPolicy = {
   approvers?: string[];
   secretPath?: string;
   name?: string;
+  enforcementLevel?: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TDeleteAccessApprovalPolicy = {

backend/src/ee/services/access-approval-request/access-approval-request-dal.ts

@@ -48,6 +48,7 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
           db.ref("name").withSchema(TableName.AccessApprovalPolicy).as("policyName"),
           db.ref("approvals").withSchema(TableName.AccessApprovalPolicy).as("policyApprovals"),
           db.ref("secretPath").withSchema(TableName.AccessApprovalPolicy).as("policySecretPath"),
+          db.ref("enforcementLevel").withSchema(TableName.AccessApprovalPolicy).as("policyEnforcementLevel"),
           db.ref("envId").withSchema(TableName.AccessApprovalPolicy).as("policyEnvId")
         )
 
@@ -98,6 +99,7 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
             name: doc.policyName,
             approvals: doc.policyApprovals,
             secretPath: doc.policySecretPath,
+            enforcementLevel: doc.policyEnforcementLevel,
             envId: doc.policyEnvId
           },
           privilege: doc.privilegeId
@@ -165,6 +167,7 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
         tx.ref("projectId").withSchema(TableName.Environment),
         tx.ref("slug").withSchema(TableName.Environment).as("environment"),
         tx.ref("secretPath").withSchema(TableName.AccessApprovalPolicy).as("policySecretPath"),
+        tx.ref("enforcementLevel").withSchema(TableName.AccessApprovalPolicy).as("policyEnforcementLevel"),
         tx.ref("approvals").withSchema(TableName.AccessApprovalPolicy).as("policyApprovals"),
         tx.ref("approverId").withSchema(TableName.AccessApprovalPolicyApprover)
       );
@@ -184,7 +187,8 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
             id: el.policyId,
             name: el.policyName,
             approvals: el.policyApprovals,
-            secretPath: el.policySecretPath
+            secretPath: el.policySecretPath,
+            enforcementLevel: el.policyEnforcementLevel
           }
         }),
         childrenMapper: [

backend/src/ee/services/group/user-group-membership-dal.ts

@@ -162,17 +162,50 @@ export const userGroupMembershipDALFactory = (db: TDbClient) => {
     }
   };
 
-  const findUserGroupMembershipsInOrg = async (userId: string, orgId: string) => {
+  const findGroupMembershipsByUserIdInOrg = async (userId: string, orgId: string) => {
     try {
       const docs = await db
         .replicaNode()(TableName.UserGroupMembership)
         .join(TableName.Groups, `${TableName.UserGroupMembership}.groupId`, `${TableName.Groups}.id`)
+        .join(TableName.OrgMembership, `${TableName.UserGroupMembership}.userId`, `${TableName.OrgMembership}.userId`)
+        .join(TableName.Users, `${TableName.UserGroupMembership}.userId`, `${TableName.Users}.id`)
         .where(`${TableName.UserGroupMembership}.userId`, userId)
-        .where(`${TableName.Groups}.orgId`, orgId);
+        .where(`${TableName.Groups}.orgId`, orgId)
+        .select(
+          db.ref("id").withSchema(TableName.UserGroupMembership),
+          db.ref("groupId").withSchema(TableName.UserGroupMembership),
+          db.ref("name").withSchema(TableName.Groups).as("groupName"),
+          db.ref("id").withSchema(TableName.OrgMembership).as("orgMembershipId"),
+          db.ref("firstName").withSchema(TableName.Users).as("firstName"),
+          db.ref("lastName").withSchema(TableName.Users).as("lastName")
+        );
 
       return docs;
     } catch (error) {
-      throw new DatabaseError({ error, name: "findTest" });
+      throw new DatabaseError({ error, name: "Find group memberships by user id in org" });
+    }
+  };
+
+  const findGroupMembershipsByGroupIdInOrg = async (groupId: string, orgId: string) => {
+    try {
+      const docs = await db
+        .replicaNode()(TableName.UserGroupMembership)
+        .join(TableName.Groups, `${TableName.UserGroupMembership}.groupId`, `${TableName.Groups}.id`)
+        .join(TableName.OrgMembership, `${TableName.UserGroupMembership}.userId`, `${TableName.OrgMembership}.userId`)
+        .join(TableName.Users, `${TableName.UserGroupMembership}.userId`, `${TableName.Users}.id`)
+        .where(`${TableName.Groups}.id`, groupId)
+        .where(`${TableName.Groups}.orgId`, orgId)
+        .select(
+          db.ref("id").withSchema(TableName.UserGroupMembership),
+          db.ref("groupId").withSchema(TableName.UserGroupMembership),
+          db.ref("name").withSchema(TableName.Groups).as("groupName"),
+          db.ref("id").withSchema(TableName.OrgMembership).as("orgMembershipId"),
+          db.ref("firstName").withSchema(TableName.Users).as("firstName"),
+          db.ref("lastName").withSchema(TableName.Users).as("lastName")
+        );
+      return docs;
+    } catch (error) {
+      throw new DatabaseError({ error, name: "Find group memberships by group id in org" });
     }
   };
 
@@ -182,6 +215,7 @@ export const userGroupMembershipDALFactory = (db: TDbClient) => {
     findUserGroupMembershipsInProject,
     findGroupMembersNotInProject,
     deletePendingUserGroupMembershipsByUserIds,
-    findUserGroupMembershipsInOrg
+    findGroupMembershipsByUserIdInOrg,
+    findGroupMembershipsByGroupIdInOrg
   };
 };

backend/src/ee/services/scim/scim-service.ts

@@ -9,6 +9,7 @@ import { TUserGroupMembershipDALFactory } from "@app/ee/services/group/user-grou
 import { TScimDALFactory } from "@app/ee/services/scim/scim-dal";
 import { getConfig } from "@app/lib/config/env";
 import { BadRequestError, ScimRequestError, UnauthorizedError } from "@app/lib/errors";
+import { logger } from "@app/lib/logger";
 import { alphaNumericNanoId } from "@app/lib/nanoid";
 import { TOrgPermission } from "@app/lib/types";
 import { AuthTokenType } from "@app/services/auth/auth-type";
@@ -51,6 +52,7 @@ import {
   TListScimUsers,
   TListScimUsersDTO,
   TReplaceScimUserDTO,
+  TScimGroup,
   TScimTokenJwtPayload,
   TUpdateScimGroupNamePatchDTO,
   TUpdateScimGroupNamePutDTO,
@@ -83,7 +85,8 @@ type TScimServiceFactoryDep = {
     | "insertMany"
     | "filterProjectsByUserMembership"
     | "delete"
-    | "findUserGroupMembershipsInOrg"
+    | "findGroupMembershipsByUserIdInOrg"
+    | "findGroupMembershipsByGroupIdInOrg"
   >;
   projectKeyDAL: Pick<TProjectKeyDALFactory, "find" | "findLatestProjectKey" | "insertMany" | "delete">;
   projectBotDAL: Pick<TProjectBotDALFactory, "findOne">;
@@ -252,7 +255,10 @@ export const scimServiceFactory = ({
         status: 403
       });
 
-    const groupMembershipsInOrg = await userGroupMembershipDAL.findUserGroupMembershipsInOrg(membership.userId, orgId);
+    const groupMembershipsInOrg = await userGroupMembershipDAL.findGroupMembershipsByUserIdInOrg(
+      membership.userId,
+      orgId
+    );
 
     return buildScimUser({
       orgMembershipId: membership.id,
@@ -263,7 +269,7 @@ export const scimServiceFactory = ({
       active: membership.isActive,
       groups: groupMembershipsInOrg.map((group) => ({
         value: group.groupId,
-        display: group.name
+        display: group.groupName
       }))
     });
   };
@@ -509,7 +515,10 @@ export const scimServiceFactory = ({
       isActive: active
     });
 
-    const groupMembershipsInOrg = await userGroupMembershipDAL.findUserGroupMembershipsInOrg(membership.userId, orgId);
+    const groupMembershipsInOrg = await userGroupMembershipDAL.findGroupMembershipsByUserIdInOrg(
+      membership.userId,
+      orgId
+    );
 
     return buildScimUser({
       orgMembershipId: membership.id,
@@ -520,7 +529,7 @@ export const scimServiceFactory = ({
       active,
       groups: groupMembershipsInOrg.map((group) => ({
         value: group.groupId,
-        display: group.name
+        display: group.groupName
       }))
     });
   };
@@ -589,13 +598,20 @@ export const scimServiceFactory = ({
       }
     );
 
-    const scimGroups = groups.map((group) =>
-      buildScimGroup({
+    const scimGroups: TScimGroup[] = [];
+
+    for await (const group of groups) {
+      const members = await userGroupMembershipDAL.findGroupMembershipsByGroupIdInOrg(group.id, orgId);
+      const scimGroup = buildScimGroup({
         groupId: group.id,
         name: group.name,
-        members: [] // does this need to be populated?
-      })
-    );
+        members: members.map((member) => ({
+          value: member.orgMembershipId,
+          display: `${member.firstName ?? ""} ${member.lastName ?? ""}`
+        }))
+      });
+      scimGroups.push(scimGroup);
+    }
 
     return buildScimGroupList({
       scimGroups,
@@ -872,23 +888,27 @@ export const scimServiceFactory = ({
           break;
         }
         case "add": {
-          const orgMemberships = await orgMembershipDAL.find({
-            $in: {
-              id: operation.value.map((member) => member.value)
-            }
-          });
+          try {
+            const orgMemberships = await orgMembershipDAL.find({
+              $in: {
+                id: operation.value.map((member) => member.value)
+              }
+            });
 
-          await addUsersToGroupByUserIds({
-            group,
-            userIds: orgMemberships.map((membership) => membership.userId as string),
-            userDAL,
-            userGroupMembershipDAL,
-            orgDAL,
-            groupProjectDAL,
-            projectKeyDAL,
-            projectDAL,
-            projectBotDAL
-          });
+            await addUsersToGroupByUserIds({
+              group,
+              userIds: orgMemberships.map((membership) => membership.userId as string),
+              userDAL,
+              userGroupMembershipDAL,
+              orgDAL,
+              groupProjectDAL,
+              projectKeyDAL,
+              projectDAL,
+              projectBotDAL
+            });
+          } catch {
+            logger.info("Repeat SCIM user-group add operation");
+          }
 
           break;
         }
@@ -916,10 +936,15 @@ export const scimServiceFactory = ({
       }
     }
 
+    const members = await userGroupMembershipDAL.findGroupMembershipsByGroupIdInOrg(group.id, orgId);
+
     return buildScimGroup({
       groupId: group.id,
       name: group.name,
-      members: []
+      members: members.map((member) => ({
+        value: member.orgMembershipId,
+        display: `${member.firstName ?? ""} ${member.lastName ?? ""}`
+      }))
     });
   };
 

backend/src/ee/services/secret-approval-policy/secret-approval-policy-service.ts

@@ -45,12 +45,13 @@ export const secretApprovalPolicyServiceFactory = ({
     actorOrgId,
     actorAuthMethod,
     approvals,
-    approverUserIds,
+    approvers,
     projectId,
     secretPath,
-    environment
+    environment,
+    enforcementLevel
   }: TCreateSapDTO) => {
-    if (approvals > approverUserIds.length)
+    if (approvals > approvers.length)
       throw new BadRequestError({ message: "Approvals cannot be greater than approvers" });
 
     const { permission } = await permissionService.getProjectPermission(
@@ -73,12 +74,13 @@ export const secretApprovalPolicyServiceFactory = ({
           envId: env.id,
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );
       await secretApprovalPolicyApproverDAL.insertMany(
-        approverUserIds.map((approverUserId) => ({
+        approvers.map((approverUserId) => ({
           approverUserId,
           policyId: doc.id
         })),
@@ -90,7 +92,7 @@ export const secretApprovalPolicyServiceFactory = ({
   };
 
   const updateSecretApprovalPolicy = async ({
-    approverUserIds,
+    approvers,
     secretPath,
     name,
     actorId,
@@ -98,7 +100,8 @@ export const secretApprovalPolicyServiceFactory = ({
     actorOrgId,
     actorAuthMethod,
     approvals,
-    secretPolicyId
+    secretPolicyId,
+    enforcementLevel
   }: TUpdateSapDTO) => {
     const secretApprovalPolicy = await secretApprovalPolicyDAL.findById(secretPolicyId);
     if (!secretApprovalPolicy) throw new BadRequestError({ message: "Secret approval policy not found" });
@@ -118,14 +121,15 @@ export const secretApprovalPolicyServiceFactory = ({
         {
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );
-      if (approverUserIds) {
+      if (approvers) {
         await secretApprovalPolicyApproverDAL.delete({ policyId: doc.id }, tx);
         await secretApprovalPolicyApproverDAL.insertMany(
-          approverUserIds.map((approverUserId) => ({
+          approvers.map((approverUserId) => ({
             approverUserId,
             policyId: doc.id
           })),

backend/src/ee/services/secret-approval-policy/secret-approval-policy-types.ts

@@ -1,20 +1,22 @@
-import { TProjectPermission } from "@app/lib/types";
+import { EnforcementLevel, TProjectPermission } from "@app/lib/types";
 
 export type TCreateSapDTO = {
   approvals: number;
   secretPath?: string | null;
   environment: string;
-  approverUserIds: string[];
+  approvers: string[];
   projectId: string;
   name: string;
+  enforcementLevel: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TUpdateSapDTO = {
   secretPolicyId: string;
   approvals?: number;
   secretPath?: string | null;
-  approverUserIds: string[];
+  approvers: string[];
   name?: string;
+  enforcementLevel?: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TDeleteSapDTO = {

backend/src/ee/services/secret-approval-request/secret-approval-request-dal.ts

@@ -94,6 +94,7 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
         tx.ref("projectId").withSchema(TableName.Environment),
         tx.ref("slug").withSchema(TableName.Environment).as("environment"),
         tx.ref("secretPath").withSchema(TableName.SecretApprovalPolicy).as("policySecretPath"),
+        tx.ref("enforcementLevel").withSchema(TableName.SecretApprovalPolicy).as("policyEnforcementLevel"),
         tx.ref("approvals").withSchema(TableName.SecretApprovalPolicy).as("policyApprovals")
       );
 
@@ -128,7 +129,8 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
             id: el.policyId,
             name: el.policyName,
             approvals: el.policyApprovals,
-            secretPath: el.policySecretPath
+            secretPath: el.policySecretPath,
+            enforcementLevel: el.policyEnforcementLevel
           }
         }),
         childrenMapper: [
@@ -282,6 +284,7 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
             `DENSE_RANK() OVER (partition by ${TableName.Environment}."projectId" ORDER BY ${TableName.SecretApprovalRequest}."id" DESC) as rank`
           ),
           db.ref("secretPath").withSchema(TableName.SecretApprovalPolicy).as("policySecretPath"),
+          db.ref("enforcementLevel").withSchema(TableName.SecretApprovalPolicy).as("policyEnforcementLevel"),
           db.ref("approvals").withSchema(TableName.SecretApprovalPolicy).as("policyApprovals"),
           db.ref("approverUserId").withSchema(TableName.SecretApprovalPolicyApprover),
           db.ref("email").withSchema("committerUser").as("committerUserEmail"),
@@ -308,7 +311,8 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
             id: el.policyId,
             name: el.policyName,
             approvals: el.policyApprovals,
-            secretPath: el.policySecretPath
+            secretPath: el.policySecretPath,
+            enforcementLevel: el.policyEnforcementLevel
           },
           committerUser: {
             userId: el.committerUserId,

backend/src/ee/services/secret-approval-request/secret-approval-request-service.ts

@@ -11,6 +11,7 @@ import { decryptSymmetric128BitHexKeyUTF8 } from "@app/lib/crypto";
 import { BadRequestError, UnauthorizedError } from "@app/lib/errors";
 import { groupBy, pick, unique } from "@app/lib/fn";
 import { alphaNumericNanoId } from "@app/lib/nanoid";
+import { EnforcementLevel } from "@app/lib/types";
 import { ActorType } from "@app/services/auth/auth-type";
 import { TProjectDALFactory } from "@app/services/project/project-dal";
 import { TProjectBotServiceFactory } from "@app/services/project-bot/project-bot-service";
@@ -289,7 +290,10 @@ export const secretApprovalRequestServiceFactory = ({
         ({ userId: approverId }) => reviewers[approverId.toString()] === ApprovalStatus.APPROVED
       ).length;
 
-    if (!hasMinApproval) throw new BadRequestError({ message: "Doesn't have minimum approvals needed" });
+    const isSoftEnforcement = secretApprovalRequest.policy.enforcementLevel === EnforcementLevel.Soft;
+
+    if (!hasMinApproval && !isSoftEnforcement)
+      throw new BadRequestError({ message: "Doesn't have minimum approvals needed" });
     const secretApprovalSecrets = await secretApprovalRequestSecretDAL.findByRequestId(secretApprovalRequest.id);
     if (!secretApprovalSecrets) throw new BadRequestError({ message: "No secrets found" });
 

backend/src/lib/api-docs/constants.ts

@@ -348,10 +348,15 @@ export const ORGANIZATIONS = {
   LIST_USER_MEMBERSHIPS: {
     organizationId: "The ID of the organization to get memberships from."
   },
+  GET_USER_MEMBERSHIP: {
+    organizationId: "The ID of the organization to get the membership for.",
+    membershipId: "The ID of the membership to get."
+  },
   UPDATE_USER_MEMBERSHIP: {
     organizationId: "The ID of the organization to update the membership for.",
     membershipId: "The ID of the membership to update.",
-    role: "The new role of the membership."
+    role: "The new role of the membership.",
+    isActive: "The active status of the membership"
   },
   DELETE_USER_MEMBERSHIP: {
     organizationId: "The ID of the organization to delete the membership from.",

backend/src/lib/types/index.ts

@@ -42,3 +42,8 @@ export type RequiredKeys<T> = {
 }[keyof T];
 
 export type PickRequired<T> = Pick<T, RequiredKeys<T>>;
+
+export enum EnforcementLevel {
+  Hard = "hard",
+  Soft = "soft"
+}

backend/src/server/routes/index.ts

@@ -457,6 +457,7 @@ export const registerRoutes = async (
     tokenService,
     projectDAL,
     projectMembershipDAL,
+    orgMembershipDAL,
     projectKeyDAL,
     smtpService,
     userDAL,

backend/src/server/routes/v1/project-router.ts

@@ -78,6 +78,7 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
               lastName: true,
               id: true
             }).merge(UserEncryptionKeysSchema.pick({ publicKey: true })),
+            project: ProjectsSchema.pick({ name: true, id: true }),
             roles: z.array(
               z.object({
                 id: z.string(),

backend/src/server/routes/v2/organization-router.ts

@@ -1,6 +1,13 @@
 import { z } from "zod";
 
-import { OrganizationsSchema, OrgMembershipsSchema, UserEncryptionKeysSchema, UsersSchema } from "@app/db/schemas";
+import {
+  OrganizationsSchema,
+  OrgMembershipsSchema,
+  ProjectMembershipsSchema,
+  ProjectsSchema,
+  UserEncryptionKeysSchema,
+  UsersSchema
+} from "@app/db/schemas";
 import { ORGANIZATIONS } from "@app/lib/api-docs";
 import { creationLimit, readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
@@ -30,6 +37,7 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
               user: UsersSchema.pick({
                 username: true,
                 email: true,
+                isEmailVerified: true,
                 firstName: true,
                 lastName: true,
                 id: true
@@ -103,6 +111,54 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
     }
   });
 
+  server.route({
+    method: "GET",
+    url: "/:organizationId/memberships/:membershipId",
+    config: {
+      rateLimit: writeLimit
+    },
+    schema: {
+      description: "Get organization user membership",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        organizationId: z.string().trim().describe(ORGANIZATIONS.GET_USER_MEMBERSHIP.organizationId),
+        membershipId: z.string().trim().describe(ORGANIZATIONS.GET_USER_MEMBERSHIP.membershipId)
+      }),
+      response: {
+        200: z.object({
+          membership: OrgMembershipsSchema.merge(
+            z.object({
+              user: UsersSchema.pick({
+                username: true,
+                email: true,
+                isEmailVerified: true,
+                firstName: true,
+                lastName: true,
+                id: true
+              }).merge(z.object({ publicKey: z.string().nullable() }))
+            })
+          ).omit({ createdAt: true, updatedAt: true })
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.API_KEY, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const membership = await server.services.org.getOrgMembership({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        orgId: req.params.organizationId,
+        membershipId: req.params.membershipId
+      });
+      return { membership };
+    }
+  });
+
   server.route({
     method: "PATCH",
     url: "/:organizationId/memberships/:membershipId",
@@ -121,7 +177,8 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
         membershipId: z.string().trim().describe(ORGANIZATIONS.UPDATE_USER_MEMBERSHIP.membershipId)
       }),
       body: z.object({
-        role: z.string().trim().describe(ORGANIZATIONS.UPDATE_USER_MEMBERSHIP.role)
+        role: z.string().trim().optional().describe(ORGANIZATIONS.UPDATE_USER_MEMBERSHIP.role),
+        isActive: z.boolean().optional().describe(ORGANIZATIONS.UPDATE_USER_MEMBERSHIP.isActive)
       }),
       response: {
         200: z.object({
@@ -129,17 +186,17 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
         })
       }
     },
-    onRequest: verifyAuth([AuthMode.JWT, AuthMode.API_KEY, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
     handler: async (req) => {
       if (req.auth.actor !== ActorType.USER) return;
 
       const membership = await server.services.org.updateOrgMembership({
         userId: req.permission.id,
-        role: req.body.role,
         actorAuthMethod: req.permission.authMethod,
         orgId: req.params.organizationId,
         membershipId: req.params.membershipId,
-        actorOrgId: req.permission.orgId
+        actorOrgId: req.permission.orgId,
+        ...req.body
       });
       return { membership };
     }
@@ -183,6 +240,69 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
     }
   });
 
+  server.route({
+    // TODO: re-think endpoint structure in future so users only need to pass in membershipId bc organizationId is redundant
+    method: "GET",
+    url: "/:organizationId/memberships/:membershipId/project-memberships",
+    config: {
+      rateLimit: writeLimit
+    },
+    schema: {
+      description: "Get project memberships given organization membership",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        organizationId: z.string().trim().describe(ORGANIZATIONS.DELETE_USER_MEMBERSHIP.organizationId),
+        membershipId: z.string().trim().describe(ORGANIZATIONS.DELETE_USER_MEMBERSHIP.membershipId)
+      }),
+      response: {
+        200: z.object({
+          memberships: ProjectMembershipsSchema.extend({
+            user: UsersSchema.pick({
+              email: true,
+              username: true,
+              firstName: true,
+              lastName: true,
+              id: true
+            }).merge(UserEncryptionKeysSchema.pick({ publicKey: true })),
+            project: ProjectsSchema.pick({ name: true, id: true }),
+            roles: z.array(
+              z.object({
+                id: z.string(),
+                role: z.string(),
+                customRoleId: z.string().optional().nullable(),
+                customRoleName: z.string().optional().nullable(),
+                customRoleSlug: z.string().optional().nullable(),
+                isTemporary: z.boolean(),
+                temporaryMode: z.string().optional().nullable(),
+                temporaryRange: z.string().nullable().optional(),
+                temporaryAccessStartTime: z.date().nullable().optional(),
+                temporaryAccessEndTime: z.date().nullable().optional()
+              })
+            )
+          })
+            .omit({ createdAt: true, updatedAt: true })
+            .array()
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const memberships = await server.services.org.listProjectMembershipsByOrgMembershipId({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        orgId: req.params.organizationId,
+        orgMembershipId: req.params.membershipId
+      });
+      return { memberships };
+    }
+  });
+
   server.route({
     method: "POST",
     url: "/",

backend/src/services/org-membership/org-membership-dal.ts

@@ -1,5 +1,6 @@
 import { TDbClient } from "@app/db";
-import { TableName } from "@app/db/schemas";
+import { TableName, TUserEncryptionKeys } from "@app/db/schemas";
+import { DatabaseError } from "@app/lib/errors";
 import { ormify } from "@app/lib/knex";
 
 export type TOrgMembershipDALFactory = ReturnType<typeof orgMembershipDALFactory>;
@@ -7,7 +8,51 @@ export type TOrgMembershipDALFactory = ReturnType<typeof orgMembershipDALFactory
 export const orgMembershipDALFactory = (db: TDbClient) => {
   const orgMembershipOrm = ormify(db, TableName.OrgMembership);
 
+  const findOrgMembershipById = async (membershipId: string) => {
+    try {
+      const member = await db
+        .replicaNode()(TableName.OrgMembership)
+        .where(`${TableName.OrgMembership}.id`, membershipId)
+        .join(TableName.Users, `${TableName.OrgMembership}.userId`, `${TableName.Users}.id`)
+        .leftJoin<TUserEncryptionKeys>(
+          TableName.UserEncryptionKey,
+          `${TableName.UserEncryptionKey}.userId`,
+          `${TableName.Users}.id`
+        )
+        .select(
+          db.ref("id").withSchema(TableName.OrgMembership),
+          db.ref("inviteEmail").withSchema(TableName.OrgMembership),
+          db.ref("orgId").withSchema(TableName.OrgMembership),
+          db.ref("role").withSchema(TableName.OrgMembership),
+          db.ref("roleId").withSchema(TableName.OrgMembership),
+          db.ref("status").withSchema(TableName.OrgMembership),
+          db.ref("isActive").withSchema(TableName.OrgMembership),
+          db.ref("email").withSchema(TableName.Users),
+          db.ref("username").withSchema(TableName.Users),
+          db.ref("firstName").withSchema(TableName.Users),
+          db.ref("lastName").withSchema(TableName.Users),
+          db.ref("isEmailVerified").withSchema(TableName.Users),
+          db.ref("id").withSchema(TableName.Users).as("userId"),
+          db.ref("publicKey").withSchema(TableName.UserEncryptionKey)
+        )
+        .where({ isGhost: false }) // MAKE SURE USER IS NOT A GHOST USER
+        .first();
+
+      if (!member) return undefined;
+
+      const { email, isEmailVerified, username, firstName, lastName, userId, publicKey, ...data } = member;
+
+      return {
+        ...data,
+        user: { email, isEmailVerified, username, firstName, lastName, id: userId, publicKey }
+      };
+    } catch (error) {
+      throw new DatabaseError({ error, name: "Find org membership by id" });
+    }
+  };
+
   return {
-    ...orgMembershipOrm
+    ...orgMembershipOrm,
+    findOrgMembershipById
   };
 };

backend/src/services/org/org-dal.ts

@@ -76,6 +76,7 @@ export const orgDALFactory = (db: TDbClient) => {
           db.ref("status").withSchema(TableName.OrgMembership),
           db.ref("isActive").withSchema(TableName.OrgMembership),
           db.ref("email").withSchema(TableName.Users),
+          db.ref("isEmailVerified").withSchema(TableName.Users),
           db.ref("username").withSchema(TableName.Users),
           db.ref("firstName").withSchema(TableName.Users),
           db.ref("lastName").withSchema(TableName.Users),
@@ -84,9 +85,9 @@ export const orgDALFactory = (db: TDbClient) => {
         )
         .where({ isGhost: false }); // MAKE SURE USER IS NOT A GHOST USER
 
-      return members.map(({ email, username, firstName, lastName, userId, publicKey, ...data }) => ({
+      return members.map(({ email, isEmailVerified, username, firstName, lastName, userId, publicKey, ...data }) => ({
         ...data,
-        user: { email, username, firstName, lastName, id: userId, publicKey }
+        user: { email, isEmailVerified, username, firstName, lastName, id: userId, publicKey }
       }));
     } catch (error) {
       throw new DatabaseError({ error, name: "Find all org members" });

backend/src/services/org/org-role-service.ts

@@ -42,6 +42,61 @@ export const orgRoleServiceFactory = ({ orgRoleDAL, permissionService }: TOrgRol
     return role;
   };
 
+  const getRole = async (
+    userId: string,
+    orgId: string,
+    roleId: string,
+    actorAuthMethod: ActorAuthMethod,
+    actorOrgId: string | undefined
+  ) => {
+    const { permission } = await permissionService.getUserOrgPermission(userId, orgId, actorAuthMethod, actorOrgId);
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Role);
+
+    switch (roleId) {
+      case "b11b49a9-09a9-4443-916a-4246f9ff2c69": {
+        return {
+          id: roleId,
+          orgId,
+          name: "Admin",
+          slug: "admin",
+          description: "Complete administration access over the organization",
+          permissions: packRules(orgAdminPermissions.rules),
+          createdAt: new Date(),
+          updatedAt: new Date()
+        };
+      }
+      case "b11b49a9-09a9-4443-916a-4246f9ff2c70": {
+        return {
+          id: roleId,
+          orgId,
+          name: "Member",
+          slug: "member",
+          description: "Non-administrative role in an organization",
+          permissions: packRules(orgMemberPermissions.rules),
+          createdAt: new Date(),
+          updatedAt: new Date()
+        };
+      }
+      case "b10d49a9-09a9-4443-916a-4246f9ff2c72": {
+        return {
+          id: "b10d49a9-09a9-4443-916a-4246f9ff2c72", // dummy user for zod validation in response
+          orgId,
+          name: "No Access",
+          slug: "no-access",
+          description: "No access to any resources in the organization",
+          permissions: packRules(orgNoAccessPermissions.rules),
+          createdAt: new Date(),
+          updatedAt: new Date()
+        };
+      }
+      default: {
+        const role = await orgRoleDAL.findOne({ id: roleId, orgId });
+        if (!role) throw new BadRequestError({ message: "Role not found", name: "Get role" });
+        return role;
+      }
+    }
+  };
+
   const updateRole = async (
     userId: string,
     orgId: string,
@@ -144,5 +199,5 @@ export const orgRoleServiceFactory = ({ orgRoleDAL, permissionService }: TOrgRol
     return { permissions: packRules(permission.rules), membership };
   };
 
-  return { createRole, updateRole, deleteRole, listRoles, getUserPermission };
+  return { createRole, getRole, updateRole, deleteRole, listRoles, getUserPermission };
 };

backend/src/services/org/org-service.ts

@@ -15,9 +15,10 @@ import { getConfig } from "@app/lib/config/env";
 import { generateAsymmetricKeyPair } from "@app/lib/crypto";
 import { generateSymmetricKey, infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
 import { generateUserSrpKeys } from "@app/lib/crypto/srp";
-import { BadRequestError, UnauthorizedError } from "@app/lib/errors";
+import { BadRequestError, NotFoundError, UnauthorizedError } from "@app/lib/errors";
 import { alphaNumericNanoId } from "@app/lib/nanoid";
 import { isDisposableEmail } from "@app/lib/validator";
+import { TOrgMembershipDALFactory } from "@app/services/org-membership/org-membership-dal";
 import { TUserAliasDALFactory } from "@app/services/user-alias/user-alias-dal";
 
 import { ActorAuthMethod, ActorType, AuthMethod, AuthTokenType } from "../auth/auth-type";
@@ -38,7 +39,9 @@ import {
   TFindAllWorkspacesDTO,
   TFindOrgMembersByEmailDTO,
   TGetOrgGroupsDTO,
+  TGetOrgMembershipDTO,
   TInviteUserToOrgDTO,
+  TListProjectMembershipsByOrgMembershipIdDTO,
   TUpdateOrgDTO,
   TUpdateOrgMembershipDTO,
   TVerifyUserToOrgDTO
@@ -54,6 +57,7 @@ type TOrgServiceFactoryDep = {
   projectDAL: TProjectDALFactory;
   projectMembershipDAL: Pick<TProjectMembershipDALFactory, "findProjectMembershipsByUserId" | "delete">;
   projectKeyDAL: Pick<TProjectKeyDALFactory, "find" | "delete">;
+  orgMembershipDAL: Pick<TOrgMembershipDALFactory, "findOrgMembershipById" | "findOne">;
   incidentContactDAL: TIncidentContactsDALFactory;
   samlConfigDAL: Pick<TSamlConfigDALFactory, "findOne" | "findEnforceableSamlCfg">;
   smtpService: TSmtpService;
@@ -79,6 +83,7 @@ export const orgServiceFactory = ({
   projectDAL,
   projectMembershipDAL,
   projectKeyDAL,
+  orgMembershipDAL,
   tokenService,
   orgBotDAL,
   licenseService,
@@ -364,6 +369,7 @@ export const orgServiceFactory = ({
    * */
   const updateOrgMembership = async ({
     role,
+    isActive,
     orgId,
     userId,
     membershipId,
@@ -373,8 +379,16 @@ export const orgServiceFactory = ({
     const { permission } = await permissionService.getUserOrgPermission(userId, orgId, actorAuthMethod, actorOrgId);
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Edit, OrgPermissionSubjects.Member);
 
+    const foundMembership = await orgMembershipDAL.findOne({
+      id: membershipId,
+      orgId
+    });
+    if (!foundMembership) throw new NotFoundError({ message: "Failed to find organization membership" });
+    if (foundMembership.userId === userId)
+      throw new BadRequestError({ message: "Cannot update own organization membership" });
+
     const isCustomRole = !Object.values(OrgMembershipRole).includes(role as OrgMembershipRole);
-    if (isCustomRole) {
+    if (role && isCustomRole) {
       const customRole = await orgRoleDAL.findOne({ slug: role, orgId });
       if (!customRole) throw new BadRequestError({ name: "Update membership", message: "Role not found" });
 
@@ -394,7 +408,7 @@ export const orgServiceFactory = ({
       return membership;
     }
 
-    const [membership] = await orgDAL.updateMembership({ id: membershipId, orgId }, { role, roleId: null });
+    const [membership] = await orgDAL.updateMembership({ id: membershipId, orgId }, { role, roleId: null, isActive });
     return membership;
   };
   /*
@@ -585,6 +599,24 @@ export const orgServiceFactory = ({
     return { token, user };
   };
 
+  const getOrgMembership = async ({
+    membershipId,
+    orgId,
+    actor,
+    actorId,
+    actorAuthMethod,
+    actorOrgId
+  }: TGetOrgMembershipDTO) => {
+    const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Member);
+
+    const membership = await orgMembershipDAL.findOrgMembershipById(membershipId);
+    if (!membership) throw new NotFoundError({ message: "Failed to find organization membership" });
+    if (membership.orgId !== orgId) throw new NotFoundError({ message: "Failed to find organization membership" });
+
+    return membership;
+  };
+
   const deleteOrgMembership = async ({
     orgId,
     userId,
@@ -608,6 +640,26 @@ export const orgServiceFactory = ({
     return deletedMembership;
   };
 
+  const listProjectMembershipsByOrgMembershipId = async ({
+    orgMembershipId,
+    orgId,
+    actor,
+    actorId,
+    actorAuthMethod,
+    actorOrgId
+  }: TListProjectMembershipsByOrgMembershipIdDTO) => {
+    const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Member);
+
+    const membership = await orgMembershipDAL.findOrgMembershipById(orgMembershipId);
+    if (!membership) throw new NotFoundError({ message: "Failed to find organization membership" });
+    if (membership.orgId !== orgId) throw new NotFoundError({ message: "Failed to find organization membership" });
+
+    const projectMemberships = await projectMembershipDAL.findProjectMembershipsByUserId(orgId, membership.user.id);
+
+    return projectMemberships;
+  };
+
   /*
    * CRUD operations of incident contacts
    * */
@@ -668,6 +720,7 @@ export const orgServiceFactory = ({
     findOrgMembersByUsername,
     createOrganization,
     deleteOrganizationById,
+    getOrgMembership,
     deleteOrgMembership,
     findAllWorkspaces,
     addGhostUser,
@@ -676,6 +729,7 @@ export const orgServiceFactory = ({
     findIncidentContacts,
     createIncidentContact,
     deleteIncidentContact,
-    getOrgGroups
+    getOrgGroups,
+    listProjectMembershipsByOrgMembershipId
   };
 };

backend/src/services/org/org-types.ts

@@ -6,11 +6,16 @@ export type TUpdateOrgMembershipDTO = {
   userId: string;
   orgId: string;
   membershipId: string;
-  role: string;
+  role?: string;
+  isActive?: boolean;
   actorOrgId: string | undefined;
   actorAuthMethod: ActorAuthMethod;
 };
 
+export type TGetOrgMembershipDTO = {
+  membershipId: string;
+} & TOrgPermission;
+
 export type TDeleteOrgMembershipDTO = {
   userId: string;
   orgId: string;
@@ -55,3 +60,7 @@ export type TUpdateOrgDTO = {
 } & TOrgPermission;
 
 export type TGetOrgGroupsDTO = TOrgPermission;
+
+export type TListProjectMembershipsByOrgMembershipIdDTO = {
+  orgMembershipId: string;
+} & TOrgPermission;

backend/src/services/project-membership/project-membership-dal.ts

@@ -16,6 +16,7 @@ export const projectMembershipDALFactory = (db: TDbClient) => {
       const docs = await db
         .replicaNode()(TableName.ProjectMembership)
         .where({ [`${TableName.ProjectMembership}.projectId` as "projectId"]: projectId })
+        .join(TableName.Project, `${TableName.ProjectMembership}.projectId`, `${TableName.Project}.id`)
         .join(TableName.Users, `${TableName.ProjectMembership}.userId`, `${TableName.Users}.id`)
         .where((qb) => {
           if (filter.usernames) {
@@ -58,17 +59,22 @@ export const projectMembershipDALFactory = (db: TDbClient) => {
           db.ref("isTemporary").withSchema(TableName.ProjectUserMembershipRole),
           db.ref("temporaryRange").withSchema(TableName.ProjectUserMembershipRole),
           db.ref("temporaryAccessStartTime").withSchema(TableName.ProjectUserMembershipRole),
-          db.ref("temporaryAccessEndTime").withSchema(TableName.ProjectUserMembershipRole)
+          db.ref("temporaryAccessEndTime").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("name").as("projectName").withSchema(TableName.Project)
         )
         .where({ isGhost: false });
 
       const members = sqlNestRelationships({
         data: docs,
-        parentMapper: ({ email, firstName, username, lastName, publicKey, isGhost, id, userId }) => ({
+        parentMapper: ({ email, firstName, username, lastName, publicKey, isGhost, id, userId, projectName }) => ({
           id,
           userId,
           projectId,
-          user: { email, username, firstName, lastName, id: userId, publicKey, isGhost }
+          user: { email, username, firstName, lastName, id: userId, publicKey, isGhost },
+          project: {
+            id: projectId,
+            name: projectName
+          }
         }),
         key: "id",
         childrenMapper: [
@@ -151,14 +157,95 @@ export const projectMembershipDALFactory = (db: TDbClient) => {
 
   const findProjectMembershipsByUserId = async (orgId: string, userId: string) => {
     try {
-      const memberships = await db
+      const docs = await db
         .replicaNode()(TableName.ProjectMembership)
-        .where({ userId })
         .join(TableName.Project, `${TableName.ProjectMembership}.projectId`, `${TableName.Project}.id`)
-        .where({ [`${TableName.Project}.orgId` as "orgId"]: orgId })
-        .select(selectAllTableCols(TableName.ProjectMembership));
+        .join(TableName.Users, `${TableName.ProjectMembership}.userId`, `${TableName.Users}.id`)
+        .where(`${TableName.Users}.id`, userId)
+        .where(`${TableName.Project}.orgId`, orgId)
+        .join<TUserEncryptionKeys>(
+          TableName.UserEncryptionKey,
+          `${TableName.UserEncryptionKey}.userId`,
+          `${TableName.Users}.id`
+        )
+        .join(
+          TableName.ProjectUserMembershipRole,
+          `${TableName.ProjectUserMembershipRole}.projectMembershipId`,
+          `${TableName.ProjectMembership}.id`
+        )
+        .leftJoin(
+          TableName.ProjectRoles,
+          `${TableName.ProjectUserMembershipRole}.customRoleId`,
+          `${TableName.ProjectRoles}.id`
+        )
+        .select(
+          db.ref("id").withSchema(TableName.ProjectMembership),
+          db.ref("isGhost").withSchema(TableName.Users),
+          db.ref("username").withSchema(TableName.Users),
+          db.ref("email").withSchema(TableName.Users),
+          db.ref("publicKey").withSchema(TableName.UserEncryptionKey),
+          db.ref("firstName").withSchema(TableName.Users),
+          db.ref("lastName").withSchema(TableName.Users),
+          db.ref("id").withSchema(TableName.Users).as("userId"),
+          db.ref("role").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("id").withSchema(TableName.ProjectUserMembershipRole).as("membershipRoleId"),
+          db.ref("customRoleId").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("name").withSchema(TableName.ProjectRoles).as("customRoleName"),
+          db.ref("slug").withSchema(TableName.ProjectRoles).as("customRoleSlug"),
+          db.ref("temporaryMode").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("isTemporary").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("temporaryRange").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("temporaryAccessStartTime").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("temporaryAccessEndTime").withSchema(TableName.ProjectUserMembershipRole),
+          db.ref("name").as("projectName").withSchema(TableName.Project),
+          db.ref("id").as("projectId").withSchema(TableName.Project)
+        )
+        .where({ isGhost: false });
 
-      return memberships;
+      const members = sqlNestRelationships({
+        data: docs,
+        parentMapper: ({ email, firstName, username, lastName, publicKey, isGhost, id, projectId, projectName }) => ({
+          id,
+          userId,
+          projectId,
+          user: { email, username, firstName, lastName, id: userId, publicKey, isGhost },
+          project: {
+            id: projectId,
+            name: projectName
+          }
+        }),
+        key: "id",
+        childrenMapper: [
+          {
+            label: "roles" as const,
+            key: "membershipRoleId",
+            mapper: ({
+              role,
+              customRoleId,
+              customRoleName,
+              customRoleSlug,
+              membershipRoleId,
+              temporaryRange,
+              temporaryMode,
+              temporaryAccessEndTime,
+              temporaryAccessStartTime,
+              isTemporary
+            }) => ({
+              id: membershipRoleId,
+              role,
+              customRoleId,
+              customRoleName,
+              customRoleSlug,
+              temporaryRange,
+              temporaryMode,
+              temporaryAccessEndTime,
+              temporaryAccessStartTime,
+              isTemporary
+            })
+          }
+        ]
+      });
+      return members;
     } catch (error) {
       throw new DatabaseError({ error, name: "Find project memberships by user id" });
     }

docs/self-hosting/configuration/envars.mdx

@@ -328,6 +328,27 @@ SMTP_FROM_NAME=Infisical
   </Info>
 </Accordion>
 
+<Accordion title="SMTP2Go"> 
+1. Create an account and configure [SMTP2Go](https://www.smtp2go.com/) to send emails.
+2. Turn on SMTP authentication  
+```
+SMTP_HOST=mail.smtp2go.com
+SMTP_PORT=You can use one of the following ports: 2525, 80, 25, 8025, or 587
+SMTP_USERNAME=username #Your SMTP2GO account's SMTP username
+SMTP_PASSWORD=password #Your SMTP2GO account's SMTP password
+SMTP_FROM_ADDRESS=hey@example.com # your email address being used to send out emails
+SMTP_FROM_NAME=Infisical
+```
+{" "}
+
+<Note> 
+Optional (for TLS/SSL):
+
+TLS: Available on the same ports (2525, 80, 25, 8025, or 587)
+SSL: Available on ports 465, 8465, and 443
+</Note>
+</Accordion> 
+
 ## Authentication
 
 By default, users can only login via email/password based login method.

docs/self-hosting/ee.mdx

@@ -15,15 +15,30 @@ This guide walks through how you can use these paid features on a self hosted in
     </Step>
     <Step title="Activate the license">
         Depending on whether or not the environment where Infisical is deployed has internet access, you may be issued a regular license or an offline license.
-        
-        - If using a regular license, you should set the value of the environment variable `LICENSE_KEY` in Infisical to the issued license key.
-        - If using an offline license, you should set the value of the environment variable `LICENSE_KEY_OFFLINE` in Infisical to the issued license key.
 
-        <Note>
-            How you set the environment variable will depend on the deployment method you used. Please refer to the documentation of your deployment method for specific instructions.
-        </Note>
+        
+        <Tabs>
+            <Tab title="Regular License">
+            - Assign the issued license key to the `LICENSE_KEY` environment variable in your Infisical instance.
+
+            - Your Infisical instance will need to communicate with the Infisical license server to validate the license key. 
+            If you want to limit outgoing connections only to the Infisical license server, you can use the following IP addresses: `13.248.249.247` and `35.71.190.59`
+
+            <Note>
+                Ensure that your firewall or network settings allow outbound connections to these IP addresses to avoid any issues with license validation.
+            </Note>
+            </Tab>
+            <Tab title="Offline License">
+            - Assign the issued license key to the `LICENSE_KEY_OFFLINE` environment variable in your Infisical instance.
+
+            <Note>
+                How you set the environment variable will depend on the deployment method you used. Please refer to the documentation of your deployment method for specific instructions.
+            </Note>
+            </Tab>
+        </Tabs>
 
         Once your instance starts up, the license key will be validated and you’ll be able to use the paid features. 
         However, when the license expires, Infisical will continue to run, but EE features will be disabled until the license is renewed or a new one is purchased.
     </Step>
 </Steps>
+

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -25,7 +25,7 @@ export const DeleteActionModal = ({
   deleteKey,
   onDeleteApproved,
   title,
-  subTitle = "This action is irreversible!",
+  subTitle = "This action is irreversible.",
   buttonText = "Delete"
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
@@ -86,7 +86,7 @@ export const DeleteActionModal = ({
           <FormControl
             label={
               <div className="break-words pb-2 text-sm">
-                Type <span className="font-bold">{deleteKey}</span> to delete the resource
+                Type <span className="font-bold">{deleteKey}</span> to perform this action
               </div>
             }
             className="mb-0"
@@ -94,7 +94,7 @@ export const DeleteActionModal = ({
             <Input
               value={inputData}
               onChange={(e) => setInputData(e.target.value)}
-              placeholder="Type to delete..."
+              placeholder="Type confirm..."
             />
           </FormControl>
         </form>

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -1,9 +1,11 @@
 import { cloneElement, ReactNode } from "react";
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationTriangle, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Label from "@radix-ui/react-label";
 import { twMerge } from "tailwind-merge";
 
+import { Tooltip } from "../Tooltip";
+
 export type FormLabelProps = {
   id?: string;
   isRequired?: boolean;
@@ -11,9 +13,10 @@ export type FormLabelProps = {
   label?: ReactNode;
   icon?: ReactNode;
   className?: string;
+  tooltipText?: string;
 };
 
-export const FormLabel = ({ id, label, isRequired, icon, className,isOptional }: FormLabelProps) => (
+export const FormLabel = ({ id, label, isRequired, icon, className,isOptional, tooltipText }: FormLabelProps) => (
   <Label.Root
     className={twMerge(
       "mb-0.5 ml-1 flex items-center text-sm font-normal text-mineshaft-400",
@@ -24,11 +27,20 @@ export const FormLabel = ({ id, label, isRequired, icon, className,isOptional }:
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
     {isOptional && <span className="ml-1 text-gray-500 italic text-xs">- Optional</span>}
-    {icon && (
+    {icon && !tooltipText && (
       <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
         {icon}
       </span>
     )}
+    {tooltipText && (
+      <Tooltip content={tooltipText}>
+          <FontAwesomeIcon
+            icon={faQuestionCircle}
+            size="1x"
+            className="ml-2"
+          />
+      </Tooltip>
+    )}
   </Label.Root>
 );
 
@@ -64,6 +76,7 @@ export type FormControlProps = {
   children: JSX.Element;
   className?: string;
   icon?: ReactNode;
+  tooltipText?: string;
 };
 
 export const FormControl = ({
@@ -76,7 +89,8 @@ export const FormControl = ({
   id,
   isError,
   icon,
-  className
+  className,
+  tooltipText
 }: FormControlProps): JSX.Element => {
   return (
     <div className={twMerge("mb-4", className)}>
@@ -87,6 +101,7 @@ export const FormControl = ({
           isRequired={isRequired}
           id={id}
           icon={icon}
+          tooltipText={tooltipText}
         />
       ) : (
         label

frontend/src/helpers/policies.ts

@@ -0,0 +1,12 @@
+import { PolicyType } from "@app/hooks/api/policies/enums";
+
+export const policyDetails: Record<PolicyType, { name: string; className: string }> = {
+  [PolicyType.AccessPolicy]: {
+    className: "bg-lime-900 text-lime-100",
+    name: "Access Policy"
+  },
+  [PolicyType.ChangePolicy]: {
+    className: "bg-indigo-900 text-indigo-100",
+    name: "Change Policy"
+  }
+};

frontend/src/hooks/api/accessApproval/mutation.tsx

@@ -16,14 +16,15 @@ export const useCreateAccessApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateAccessPolicyDTO>({
-    mutationFn: async ({ environment, projectSlug, approvals, approvers, name, secretPath }) => {
+    mutationFn: async ({ environment, projectSlug, approvals, approvers, name, secretPath, enforcementLevel }) => {
       const { data } = await apiRequest.post("/api/v1/access-approvals/policies", {
         environment,
         projectSlug,
         approvals,
         approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },
@@ -37,12 +38,13 @@ export const useUpdateAccessApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TUpdateAccessPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, name, secretPath }) => {
+    mutationFn: async ({ id, approvers, approvals, name, secretPath, enforcementLevel }) => {
       const { data } = await apiRequest.patch(`/api/v1/access-approvals/policies/${id}`, {
         approvals,
         approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },

frontend/src/hooks/api/accessApproval/types.ts

@@ -1,3 +1,4 @@
+import { EnforcementLevel, PolicyType } from "../policies/enums";
 import { TProjectPermission } from "../roles/types";
 import { WorkspaceEnv } from "../workspace/types";
 
@@ -11,6 +12,11 @@ export type TAccessApprovalPolicy = {
   environment: WorkspaceEnv;
   projectId: string;
   approvers: string[];
+  policyType: PolicyType;
+  approversRequired: boolean;
+  enforcementLevel: EnforcementLevel;
+  updatedAt: Date;
+  userApprovers?: { userId: string }[];
 };
 
 export type TAccessApprovalRequest = {
@@ -47,6 +53,7 @@ export type TAccessApprovalRequest = {
     approvers: string[];
     secretPath?: string | null;
     envId: string;
+    enforcementLevel: EnforcementLevel;
   };
 
   reviewers: {
@@ -119,6 +126,7 @@ export type TCreateAccessPolicyDTO = {
   approvers?: string[];
   approvals?: number;
   secretPath?: string;
+  enforcementLevel?: EnforcementLevel;
 };
 
 export type TUpdateAccessPolicyDTO = {
@@ -128,6 +136,7 @@ export type TUpdateAccessPolicyDTO = {
   secretPath?: string;
   environment?: string;
   approvals?: number;
+  enforcementLevel?: EnforcementLevel;
   // for invalidating list
   projectSlug: string;
 };

frontend/src/hooks/api/policies/enums.ts

@@ -0,0 +1,9 @@
+export enum EnforcementLevel {
+    Hard = "hard",
+    Soft = "soft"
+}
+
+export enum PolicyType {
+    ChangePolicy = "change",
+    AccessPolicy = "access"
+}

frontend/src/hooks/api/roles/index.tsx

@@ -7,6 +7,7 @@ export {
   useUpdateProjectRole
 } from "./mutation";
 export {
+  useGetOrgRole,
   useGetOrgRoles,
   useGetProjectRoleBySlug,
   useGetProjectRoles,

frontend/src/hooks/api/roles/mutation.tsx

@@ -9,6 +9,7 @@ import {
   TCreateProjectRoleDTO,
   TDeleteOrgRoleDTO,
   TDeleteProjectRoleDTO,
+  TOrgRole,
   TUpdateOrgRoleDTO,
   TUpdateProjectRoleDTO
 } from "./types";
@@ -52,12 +53,17 @@ export const useDeleteProjectRole = () => {
 export const useCreateOrgRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: ({ orgId, permissions, ...dto }: TCreateOrgRoleDTO) =>
-      apiRequest.post(`/api/v1/organization/${orgId}/roles`, {
+  return useMutation<TOrgRole, {}, TCreateOrgRoleDTO>({
+    mutationFn: async ({ orgId, permissions, ...dto }: TCreateOrgRoleDTO) => {
+      const {
+        data: { role }
+      } = await apiRequest.post(`/api/v1/organization/${orgId}/roles`, {
         ...dto,
         permissions: permissions.length ? packRules(permissions) : []
-      }),
+      });
+
+      return role;
+    },
     onSuccess: (_, { orgId }) => {
       queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
     }
@@ -67,14 +73,20 @@ export const useCreateOrgRole = () => {
 export const useUpdateOrgRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: ({ id, orgId, permissions, ...dto }: TUpdateOrgRoleDTO) =>
-      apiRequest.patch(`/api/v1/organization/${orgId}/roles/${id}`, {
+  return useMutation<TOrgRole, {}, TUpdateOrgRoleDTO>({
+    mutationFn: async ({ id, orgId, permissions, ...dto }: TUpdateOrgRoleDTO) => {
+      const {
+        data: { role }
+      } = await apiRequest.patch(`/api/v1/organization/${orgId}/roles/${id}`, {
         ...dto,
         permissions: permissions?.length ? packRules(permissions) : []
-      }),
-    onSuccess: (_, { orgId }) => {
+      });
+
+      return role;
+    },
+    onSuccess: (_, { id, orgId }) => {
       queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
+      queryClient.invalidateQueries(roleQueryKeys.getOrgRole(orgId, id));
     }
   });
 };
@@ -82,13 +94,19 @@ export const useUpdateOrgRole = () => {
 export const useDeleteOrgRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: ({ orgId, id }: TDeleteOrgRoleDTO) =>
-      apiRequest.delete(`/api/v1/organization/${orgId}/roles/${id}`, {
+  return useMutation<TOrgRole, {}, TDeleteOrgRoleDTO>({
+    mutationFn: async ({ orgId, id }: TDeleteOrgRoleDTO) => {
+      const {
+        data: { role }
+      } = await apiRequest.delete(`/api/v1/organization/${orgId}/roles/${id}`, {
         data: { orgId }
-      }),
-    onSuccess: (_, { orgId }) => {
+      });
+
+      return role;
+    },
+    onSuccess: (_, { id, orgId }) => {
       queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
+      queryClient.invalidateQueries(roleQueryKeys.getOrgRole(orgId, id));
     }
   });
 };

frontend/src/hooks/api/roles/queries.tsx

@@ -40,6 +40,7 @@ export const roleQueryKeys = {
   getProjectRoleBySlug: (projectSlug: string, roleSlug: string) =>
     ["roles", { projectSlug, roleSlug }] as const,
   getOrgRoles: (orgId: string) => ["org-roles", { orgId }] as const,
+  getOrgRole: (orgId: string, roleId: string) => [{ orgId, roleId }, "org-role"] as const,
   getUserOrgPermissions: ({ orgId }: TGetUserOrgPermissionsDTO) =>
     ["user-permissions", { orgId }] as const,
   getUserProjectPermissions: ({ workspaceId }: TGetUserProjectPermissionDTO) =>
@@ -89,6 +90,21 @@ export const useGetOrgRoles = (orgId: string, enable = true) =>
     enabled: Boolean(orgId) && enable
   });
 
+export const useGetOrgRole = (orgId: string, roleId: string) =>
+  useQuery({
+    queryKey: roleQueryKeys.getOrgRole(orgId, roleId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{
+        role: Omit<TOrgRole, "permissions"> & { permissions: unknown };
+      }>(`/api/v1/organization/${orgId}/roles/${roleId}`);
+      return {
+        ...data.role,
+        permissions: unpackRules(data.role.permissions as PackRule<TPermission>[])
+      };
+    },
+    enabled: Boolean(orgId && roleId)
+  });
+
 const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
   if (orgId === "") return { permissions: [], membership: null };
 

frontend/src/hooks/api/secretApproval/mutation.tsx

@@ -9,14 +9,15 @@ export const useCreateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateSecretPolicyDTO>({
-    mutationFn: async ({ environment, workspaceId, approvals, approverUserIds, secretPath, name }) => {
+    mutationFn: async ({ environment, workspaceId, approvals, approvers, secretPath, name, enforcementLevel }) => {
       const { data } = await apiRequest.post("/api/v1/secret-approvals", {
         environment,
         workspaceId,
         approvals,
-        approverUserIds,
+        approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },
@@ -30,12 +31,13 @@ export const useUpdateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TUpdateSecretPolicyDTO>({
-    mutationFn: async ({ id, approverUserIds, approvals, secretPath, name }) => {
+    mutationFn: async ({ id, approvers, approvals, secretPath, name, enforcementLevel }) => {
       const { data } = await apiRequest.patch(`/api/v1/secret-approvals/${id}`, {
         approvals,
-        approverUserIds,
+        approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },

frontend/src/hooks/api/secretApproval/types.ts

@@ -1,3 +1,4 @@
+import { EnforcementLevel } from "../policies/enums";
 import { WorkspaceEnv } from "../workspace/types";
 
 export type TSecretApprovalPolicy = {
@@ -9,6 +10,8 @@ export type TSecretApprovalPolicy = {
   secretPath?: string;
   approvals: number;
   userApprovers: { userId: string }[];
+  updatedAt: Date;
+  enforcementLevel: EnforcementLevel;
 };
 
 export type TGetSecretApprovalPoliciesDTO = {
@@ -26,16 +29,18 @@ export type TCreateSecretPolicyDTO = {
   name?: string;
   environment: string;
   secretPath?: string | null;
-  approverUserIds?: string[];
+  approvers?: string[];
   approvals?: number;
+  enforcementLevel: EnforcementLevel;
 };
 
 export type TUpdateSecretPolicyDTO = {
   id: string;
   name?: string;
-  approverUserIds?: string[];
+  approvers?: string[];
   secretPath?: string | null;
   approvals?: number;
+  enforcementLevel?: EnforcementLevel;
   // for invalidating list
   workspaceId: string;
 };

frontend/src/hooks/api/users/index.tsx

@@ -16,6 +16,8 @@ export {
   useGetMyIp,
   useGetMyOrganizationProjects,
   useGetMySessions,
+  useGetOrgMembership,
+  useGetOrgMembershipProjectMemberships,
   useGetOrgUsers,
   useGetUser,
   useGetUserAction,
@@ -23,6 +25,5 @@ export {
   useRegisterUserAction,
   useRevokeMySessions,
   useUpdateMfaEnabled,
-  useUpdateOrgUserRole,
-  useUpdateUserAuthMethods
-} from "./queries";
+  useUpdateOrgMembership,
+  useUpdateUserAuthMethods} from "./queries";

frontend/src/hooks/api/users/mutation.tsx

@@ -57,8 +57,9 @@ export const useAddUserToWsNonE2EE = () => {
       });
       return data;
     },
-    onSuccess: (_, { projectId }) => {
+    onSuccess: (_, { orgId, projectId }) => {
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(projectId));
+      queryClient.invalidateQueries(userKeys.allOrgMembershipProjectMemberships(orgId));
     }
   });
 };

frontend/src/hooks/api/users/queries.tsx

@@ -13,7 +13,8 @@ import {
   OrgUser,
   RenameUserDTO,
   TokenVersion,
-  UpdateOrgUserRoleDTO,
+  TWorkspaceUser,
+  UpdateOrgMembershipDTO,
   User,
   UserEnc
 } from "./types";
@@ -23,6 +24,13 @@ export const userKeys = {
   getPrivateKey: ["user"] as const,
   userAction: ["user-action"] as const,
   userProjectFavorites: (orgId: string) => [{ orgId }, "user-project-favorites"] as const,
+  getOrgMembership: (orgId: string, orgMembershipId: string) =>
+    [{ orgId, orgMembershipId }, "org-membership"] as const,
+  allOrgMembershipProjectMemberships: (orgId: string) => [orgId, "all-user-memberships"] as const,
+  forOrgMembershipProjectMemberships: (orgId: string, orgMembershipId: string) =>
+    [...userKeys.allOrgMembershipProjectMemberships(orgId), { orgMembershipId }] as const,
+  getOrgMembershipProjectMemberships: (orgId: string, username: string) =>
+    [{ orgId, username }, "org-membership-project-memberships"] as const,
   getOrgUsers: (orgId: string) => [{ orgId }, "user"],
   myIp: ["ip"] as const,
   myAPIKeys: ["api-keys"] as const,
@@ -167,6 +175,41 @@ export const useAddUserToOrg = () => {
   });
 };
 
+export const useGetOrgMembership = (organizationId: string, orgMembershipId: string) => {
+  return useQuery({
+    queryKey: userKeys.getOrgMembership(organizationId, orgMembershipId),
+    queryFn: async () => {
+      const {
+        data: { membership }
+      } = await apiRequest.get<{ membership: OrgUser }>(
+        `/api/v2/organizations/${organizationId}/memberships/${orgMembershipId}`
+      );
+
+      return membership;
+    },
+    enabled: Boolean(organizationId) && Boolean(orgMembershipId)
+  });
+};
+
+export const useGetOrgMembershipProjectMemberships = (
+  organizationId: string,
+  orgMembershipId: string
+) => {
+  return useQuery({
+    queryKey: userKeys.forOrgMembershipProjectMemberships(organizationId, orgMembershipId),
+    queryFn: async () => {
+      const {
+        data: { memberships }
+      } = await apiRequest.get<{ memberships: TWorkspaceUser[] }>(
+        `/api/v2/organizations/${organizationId}/memberships/${orgMembershipId}/project-memberships`
+      );
+
+      return memberships;
+    },
+    enabled: Boolean(organizationId) && Boolean(orgMembershipId)
+  });
+};
+
 export const useDeleteOrgMembership = () => {
   const queryClient = useQueryClient();
 
@@ -180,24 +223,43 @@ export const useDeleteOrgMembership = () => {
   });
 };
 
-export const useUpdateOrgUserRole = () => {
+export const useDeactivateOrgMembership = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<{}, {}, UpdateOrgUserRoleDTO>({
-    mutationFn: ({ organizationId, membershipId, role }) => {
+  return useMutation<{}, {}, DeletOrgMembershipDTO>({
+    mutationFn: ({ membershipId, orgId }) => {
+      return apiRequest.post(
+        `/api/v2/organizations/${orgId}/memberships/${membershipId}/deactivate`
+      );
+    },
+    onSuccess: (_, { orgId, membershipId }) => {
+      queryClient.invalidateQueries(userKeys.getOrgUsers(orgId));
+      queryClient.invalidateQueries(userKeys.getOrgMembership(orgId, membershipId));
+    }
+  });
+};
+
+export const useUpdateOrgMembership = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, UpdateOrgMembershipDTO>({
+    mutationFn: ({ organizationId, membershipId, role, isActive }) => {
       return apiRequest.patch(
         `/api/v2/organizations/${organizationId}/memberships/${membershipId}`,
         {
-          role
+          role,
+          isActive
         }
       );
     },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { organizationId, membershipId }) => {
       queryClient.invalidateQueries(userKeys.getOrgUsers(organizationId));
+      queryClient.invalidateQueries(userKeys.getOrgMembership(organizationId, membershipId));
     },
     // to remove old states
-    onError: (_, { organizationId }) => {
+    onError: (_, { organizationId, membershipId }) => {
       queryClient.invalidateQueries(userKeys.getOrgUsers(organizationId));
+      queryClient.invalidateQueries(userKeys.getOrgMembership(organizationId, membershipId));
     }
   });
 };

frontend/src/hooks/api/users/types.ts

@@ -49,6 +49,7 @@ export type OrgUser = {
   user: {
     username: string;
     email?: string;
+    isEmailVerified: boolean;
     firstName: string;
     lastName: string;
     id: string;
@@ -82,6 +83,11 @@ export type TWorkspaceUser = {
     id: string;
     publicKey: string;
   };
+  projectId: string;
+  project: {
+    id: string;
+    name: string;
+  };
   inviteEmail: string;
   organization: string;
   roles: (
@@ -127,12 +133,14 @@ export type AddUserToWsDTOE2EE = {
 export type AddUserToWsDTONonE2EE = {
   projectId: string;
   usernames: string[];
+  orgId: string;
 };
 
-export type UpdateOrgUserRoleDTO = {
+export type UpdateOrgMembershipDTO = {
   organizationId: string;
   membershipId: string;
-  role: string;
+  role?: string;
+  isActive?: boolean;
 };
 
 export type DeletOrgMembershipDTO = {

frontend/src/hooks/api/workspace/queries.tsx

@@ -11,6 +11,7 @@ import { IdentityMembership } from "../identities/types";
 import { IntegrationAuth } from "../integrationAuth/types";
 import { TIntegration } from "../integrations/types";
 import { EncryptedSecret } from "../secrets/types";
+import { userKeys } from "../users/queries";
 import { TWorkspaceUser } from "../users/types";
 import {
   CreateEnvironmentDTO,
@@ -385,6 +386,7 @@ export const useDeleteUserFromWorkspace = () => {
     }: {
       workspaceId: string;
       usernames: string[];
+      orgId: string;
     }) => {
       const {
         data: { deletedMembership }
@@ -393,8 +395,9 @@ export const useDeleteUserFromWorkspace = () => {
       });
       return deletedMembership;
     },
-    onSuccess: (_, { workspaceId }) => {
+    onSuccess: (_, { orgId, workspaceId }) => {
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(workspaceId));
+      queryClient.invalidateQueries(userKeys.allOrgMembershipProjectMemberships(orgId));
     }
   });
 };

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -264,7 +264,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
           usernames: orgUsers
             .map((member) => member.user.username)
             .filter((username) => username !== user.username),
-          projectId: newProjectId
+          projectId: newProjectId,
+          orgId: currentOrg.id
         });
       }
 

frontend/src/pages/org/[id]/memberships/[membershipId]/index.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { UserPage } from "@app/views/Org/UserPage";
+
+export default function User() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <UserPage />
+    </>
+  );
+}
+
+User.requireAuth = true;

frontend/src/pages/org/[id]/overview/index.tsx

@@ -541,7 +541,8 @@ const OrganizationPage = withPermission(
             usernames: orgUsers
               .map((member) => member.user.username)
               .filter((username) => username !== user.username),
-            projectId: newProjectId
+            projectId: newProjectId,
+            orgId: currentOrg.id
           });
         }
 

frontend/src/pages/org/[id]/roles/[roleId]/index.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { RolePage } from "@app/views/Org/RolePage";
+
+export default function Role() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <RolePage />
+    </>
+  );
+}
+
+Role.requireAuth = true;

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx

@@ -1,4 +1,4 @@
-import { faKey } from "@fortawesome/free-solid-svg-icons";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
 
 import {
   EmptyState,
@@ -37,7 +37,7 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) =>
           </Tr>
         </THead>
         <TBody>
-          {isLoading && <TableSkeleton columns={2} innerKey="identity-project-memberships" />}
+          {isLoading && <TableSkeleton columns={4} innerKey="identity-project-memberships" />}
           {!isLoading &&
             projectMemberships?.map((membership) => {
               return (
@@ -51,7 +51,7 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) =>
         </TBody>
       </Table>
       {!isLoading && !projectMemberships?.length && (
-        <EmptyState title="This identity has not been assigned to any projects" icon={faKey} />
+        <EmptyState title="This identity has not been assigned to any projects" icon={faFolder} />
       )}
     </TableContainer>
   );

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -68,7 +68,7 @@ export const IdentitySection = withPermission(
     };
 
     return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex justify-between">
           <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
           <div className="flex w-full justify-end pr-4">

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -16,7 +16,7 @@ import {
   useOrganization,
   useSubscription
 } from "@app/context";
-import { useDeleteOrgMembership } from "@app/hooks/api";
+import { useDeleteOrgMembership, useUpdateOrgMembership } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AddOrgMemberModal } from "./AddOrgMemberModal";
@@ -32,11 +32,13 @@ export const OrgMembersSection = () => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "addMember",
     "removeMember",
+    "deactivateMember",
     "upgradePlan",
     "setUpEmail"
   ] as const);
 
   const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
+  const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
 
   const isMoreUsersAllowed = subscription?.memberLimit
     ? subscription.membersUsed < subscription.memberLimit
@@ -65,6 +67,29 @@ export const OrgMembersSection = () => {
     handlePopUpOpen("addMember");
   };
 
+  const onDeactivateMemberSubmit = async (orgMembershipId: string) => {
+    try {
+      await updateOrgMembership({
+        organizationId: orgId,
+        membershipId: orgMembershipId,
+        isActive: false
+      });
+
+      createNotification({
+        text: "Successfully deactivated user in organization",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to deactivate user in organization",
+        type: "error"
+      });
+    }
+
+    handlePopUpClose("deactivateMember");
+  };
+
   const onRemoveMemberSubmit = async (orgMembershipId: string) => {
     try {
       await deleteMutateAsync({
@@ -128,6 +153,20 @@ export const OrgMembersSection = () => {
           )
         }
       />
+      <DeleteActionModal
+        isOpen={popUp.deactivateMember.isOpen}
+        title={`Are you sure want to deactivate member with username ${
+          (popUp?.deactivateMember?.data as { username: string })?.username || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deactivateMember", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onDeactivateMemberSubmit(
+            (popUp?.deactivateMember?.data as { orgMembershipId: string })?.orgMembershipId
+          )
+        }
+        buttonText="Deactivate"
+      />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -1,13 +1,18 @@
 import { useCallback, useMemo, useState } from "react";
-import { faMagnifyingGlass, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+import { faEllipsis, faMagnifyingGlass, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   EmptyState,
-  IconButton,
   Input,
   Select,
   SelectItem,
@@ -32,13 +37,13 @@ import {
   useFetchServerStatus,
   useGetOrgRoles,
   useGetOrgUsers,
-  useUpdateOrgUserRole
+  useUpdateOrgMembership
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
+    popUpName: keyof UsePopUpState<["removeMember", "deactivateMember", "upgradePlan"]>,
     data?: {
       orgMembershipId?: string;
       username?: string;
@@ -49,6 +54,7 @@ type Props = {
 };
 
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Props) => {
+  const router = useRouter();
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const { user } = useUser();
@@ -63,14 +69,14 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
   const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);
 
   const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
-  const { mutateAsync: updateUserOrgRole } = useUpdateOrgUserRole();
+  const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
 
   const onRoleChange = async (membershipId: string, role: string) => {
     if (!currentOrg?.id) return;
 
     try {
       // TODO: replace hardcoding default role
-      const isCustomRole = !["admin", "member"].includes(role);
+      const isCustomRole = !["admin", "member", "no-access"].includes(role);
 
       if (isCustomRole && subscription && !subscription?.rbac) {
         handlePopUpOpen("upgradePlan", {
@@ -79,7 +85,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
         return;
       }
 
-      await updateUserOrgRole({
+      await updateOrgMembership({
         organizationId: currentOrg?.id,
         membershipId,
         role
@@ -176,7 +182,11 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                   const email = u?.email || inviteEmail;
                   const username = u?.username ?? inviteEmail ?? "-";
                   return (
-                    <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
+                    <Tr
+                      key={`org-membership-${orgMembershipId}`}
+                      className="h-10 w-full cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+                      onClick={() => router.push(`/org/${orgId}/memberships/${orgMembershipId}`)}
+                    >
                       <Td className={isActive ? "" : "text-mineshaft-400"}>{name}</Td>
                       <Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
                       <Td>
@@ -238,34 +248,117 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                       </Td>
                       <Td>
                         {userId !== u?.id && (
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            a={OrgPermissionSubjects.Member}
-                          >
-                            {(isAllowed) => (
-                              <IconButton
-                                onClick={() => {
-                                  if (currentOrg?.authEnforced) {
-                                    createNotification({
-                                      text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
-                                      type: "error"
-                                    });
-                                    return;
-                                  }
-
-                                  handlePopUpOpen("removeMember", { orgMembershipId, username });
-                                }}
-                                size="lg"
-                                colorSchema="danger"
-                                variant="plain"
-                                ariaLabel="update"
-                                className="ml-4"
-                                isDisabled={!isAllowed}
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild className="rounded-lg">
+                              <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                                <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                              </div>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="p-1">
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Edit}
+                                a={OrgPermissionSubjects.Member}
                               >
-                                <FontAwesomeIcon icon={faXmark} />
-                              </IconButton>
-                            )}
-                          </OrgPermissionCan>
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={twMerge(
+                                      !isAllowed &&
+                                        "pointer-events-none cursor-not-allowed opacity-50"
+                                    )}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      router.push(`/org/${orgId}/memberships/${orgMembershipId}`);
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    Edit User
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Delete}
+                                a={OrgPermissionSubjects.Member}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={
+                                      isActive
+                                        ? twMerge(
+                                            isAllowed
+                                              ? "hover:!bg-red-500 hover:!text-white"
+                                              : "pointer-events-none cursor-not-allowed opacity-50"
+                                          )
+                                        : ""
+                                    }
+                                    onClick={async (e) => {
+                                      e.stopPropagation();
+
+                                      if (currentOrg?.scimEnabled) {
+                                        createNotification({
+                                          text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
+                                          type: "error"
+                                        });
+                                        return;
+                                      }
+
+                                      if (!isActive) {
+                                        // activate user
+                                        await updateOrgMembership({
+                                          organizationId: orgId,
+                                          membershipId: orgMembershipId,
+                                          isActive: true
+                                        });
+
+                                        return;
+                                      }
+
+                                      // deactivate user
+                                      handlePopUpOpen("deactivateMember", {
+                                        orgMembershipId,
+                                        username
+                                      });
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    {`${isActive ? "Deactivate" : "Activate"} User`}
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Delete}
+                                a={OrgPermissionSubjects.Member}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={twMerge(
+                                      isAllowed
+                                        ? "hover:!bg-red-500 hover:!text-white"
+                                        : "pointer-events-none cursor-not-allowed opacity-50"
+                                    )}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+
+                                      if (currentOrg?.scimEnabled) {
+                                        createNotification({
+                                          text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
+                                          type: "error"
+                                        });
+                                        return;
+                                      }
+
+                                      handlePopUpOpen("removeMember", {
+                                        orgMembershipId,
+                                        username
+                                      });
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    Remove User
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
                         )}
                       </Td>
                     </Tr>

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -106,8 +106,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
 export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
   const isNonEditable = ["owner", "admin", "member", "no-access"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
-
-  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const {

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -7,7 +7,7 @@ import { OrgRoleModifySection } from "./OrgRoleModifySection";
 import { OrgRoleTable } from "./OrgRoleTable";
 
 export const OrgRoleTabSection = () => {
-  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
+  const { popUp, handlePopUpClose } = usePopUp(["editRole"] as const);
   return popUp.editRole.isOpen ? (
     <motion.div
       key="role-modify"
@@ -29,7 +29,7 @@ export const OrgRoleTabSection = () => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: -30 }}
     >
-      <OrgRoleTable onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
+      <OrgRoleTable />
     </motion.div>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -1,14 +1,17 @@
-import { useState } from "react";
-import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+import { faEllipsis, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
-  IconButton,
-  Input,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   Table,
   TableContainer,
   TableSkeleton,
@@ -22,17 +25,17 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { usePopUp } from "@app/hooks";
 import { useDeleteOrgRole, useGetOrgRoles } from "@app/hooks/api";
 import { TOrgRole } from "@app/hooks/api/roles/types";
+import { RoleModal } from "@app/views/Org/RolePage/components";
 
-type Props = {
-  onSelectRole: (role?: TOrgRole) => void;
-};
-
-export const OrgRoleTable = ({ onSelectRole }: Props) => {
-  const [searchRoles, setSearchRoles] = useState("");
+export const OrgRoleTable = () => {
+  const router = useRouter();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 
-  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "role",
+    "deleteRole"
+  ] as const);
 
   const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);
 
@@ -54,100 +57,113 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
   };
 
   return (
-    <div className="w-full">
-      <div className="mb-4 flex">
-        <div className="mr-4 flex-1">
-          <Input
-            value={searchRoles}
-            onChange={(e) => setSearchRoles(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search roles..."
-          />
-        </div>
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Organization Roles</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
           {(isAllowed) => (
             <Button
-              isDisabled={!isAllowed}
+              colorSchema="primary"
+              type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => onSelectRole()}
+              onClick={() => {
+                handlePopUpOpen("role");
+              }}
+              isDisabled={!isAllowed}
             >
               Add Role
             </Button>
           )}
         </OrgPermissionCan>
       </div>
-      <div>
-        <TableContainer>
-          <Table>
-            <THead>
-              <Tr>
-                <Th>Name</Th>
-                <Th>Slug</Th>
-                <Th aria-label="actions" />
-              </Tr>
-            </THead>
-            <TBody>
-              {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {roles?.map((role) => {
-                const { id, name, slug } = role;
-                const isNonMutatable = ["owner", "admin", "member", "no-access"].includes(slug);
-
-                return (
-                  <Tr key={`role-list-${id}`}>
-                    <Td>{name}</Td>
-                    <Td>{slug}</Td>
-                    <Td className="flex justify-end">
-                      <div className="flex space-x-2">
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Slug</Th>
+              <Th aria-label="actions" className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isRolesLoading && <TableSkeleton columns={3} innerKey="org-roles" />}
+            {roles?.map((role) => {
+              const { id, name, slug } = role;
+              const isNonMutatable = ["owner", "admin", "member", "no-access"].includes(slug);
+              return (
+                <Tr
+                  key={`role-list-${id}`}
+                  className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+                  onClick={() => router.push(`/org/${orgId}/roles/${id}`)}
+                >
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
                         <OrgPermissionCan
                           I={OrgPermissionActions.Edit}
                           a={OrgPermissionSubjects.Role}
-                          renderTooltip
-                          allowedLabel="Edit"
                         >
                           {(isAllowed) => (
-                            <IconButton
-                              isDisabled={!isAllowed}
-                              ariaLabel="edit"
-                              onClick={() => onSelectRole(role)}
-                              variant="plain"
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                router.push(`/org/${orgId}/roles/${id}`);
+                              }}
+                              disabled={!isAllowed}
                             >
-                              <FontAwesomeIcon icon={faEdit} />
-                            </IconButton>
+                              {`${isNonMutatable ? "View" : "Edit"} Role`}
+                            </DropdownMenuItem>
                           )}
                         </OrgPermissionCan>
-                        <OrgPermissionCan
-                          I={OrgPermissionActions.Delete}
-                          a={OrgPermissionSubjects.Role}
-                          renderTooltip
-                          allowedLabel={
-                            isNonMutatable ? "Reserved roles are non-removable" : "Delete"
-                          }
-                        >
-                          {(isAllowed) => (
-                            <IconButton
-                              ariaLabel="delete"
-                              onClick={() => handlePopUpOpen("deleteRole", role)}
-                              variant="plain"
-                              isDisabled={isNonMutatable || !isAllowed}
-                            >
-                              <FontAwesomeIcon icon={faTrash} />
-                            </IconButton>
-                          )}
-                        </OrgPermissionCan>
-                      </div>
-                    </Td>
-                  </Tr>
-                );
-              })}
-            </TBody>
-          </Table>
-        </TableContainer>
-      </div>
+                        {!isNonMutatable && (
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.Role}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteRole", role);
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Role
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                        )}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Td>
+                </Tr>
+              );
+            })}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
         title={`Are you sure want to delete ${
           (popUp?.deleteRole?.data as TOrgRole)?.name || " "
         } role?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteRole", isOpen)}
         deleteKey={(popUp?.deleteRole?.data as TOrgRole)?.slug || ""}
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}

frontend/src/views/Org/RolePage/RolePage.tsx

@@ -0,0 +1,157 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { withPermission } from "@app/hoc";
+import { useDeleteOrgRole, useGetOrgRole } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
+
+export const RolePage = withPermission(
+  () => {
+    const router = useRouter();
+    const roleId = router.query.roleId as string;
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?.id || "";
+    const { data } = useGetOrgRole(orgId, roleId);
+    const { mutateAsync: deleteOrgRole } = useDeleteOrgRole();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "role",
+      "deleteOrgRole"
+    ] as const);
+
+    const onDeleteOrgRoleSubmit = async () => {
+      try {
+        if (!orgId || !roleId) return;
+
+        await deleteOrgRole({
+          orgId,
+          id: roleId
+        });
+
+        createNotification({
+          text: "Successfully deleted organization role",
+          type: "success"
+        });
+
+        handlePopUpClose("deleteOrgRole");
+        router.push(`/org/${orgId}/members`);
+      } catch (err) {
+        console.error(err);
+        const error = err as any;
+        const text = error?.response?.data?.message ?? "Failed to delete organization role";
+
+        createNotification({
+          text,
+          type: "error"
+        });
+      }
+    };
+
+    const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {data && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => {
+                router.push(`/org/${orgId}/members`);
+              }}
+              className="mb-4"
+            >
+              Roles
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.name}</p>
+              {isCustomRole && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild className="rounded-lg">
+                    <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                      <Tooltip content="More options">
+                        <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                      </Tooltip>
+                    </div>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="p-1">
+                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={async () => {
+                            handlePopUpOpen("role", {
+                              roleId
+                            });
+                          }}
+                          disabled={!isAllowed}
+                        >
+                          Edit Role
+                        </DropdownMenuItem>
+                      )}
+                    </OrgPermissionCan>
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Delete}
+                      a={OrgPermissionSubjects.Role}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            isAllowed
+                              ? "hover:!bg-red-500 hover:!text-white"
+                              : "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={async () => {
+                            handlePopUpOpen("deleteOrgRole");
+                          }}
+                          disabled={!isAllowed}
+                        >
+                          Delete Role
+                        </DropdownMenuItem>
+                      )}
+                    </OrgPermissionCan>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
+              </div>
+              <RolePermissionsSection roleId={roleId} />
+            </div>
+          </div>
+        )}
+        <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <DeleteActionModal
+          isOpen={popUp.deleteOrgRole.isOpen}
+          title={`Are you sure want to delete the organization role ${data?.name ?? ""}?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteOrgRole", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => onDeleteOrgRoleSubmit()}
+        />
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Role }
+);

frontend/src/views/Org/RolePage/components/RoleDetailsSection.tsx

@@ -0,0 +1,95 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetOrgRole } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  roleId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["role"]>, data?: {}) => void;
+};
+
+export const RoleDetailsSection = ({ roleId, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { data } = useGetOrgRole(orgId, roleId);
+  const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
+
+  return data ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Details</h3>
+        {isCustomRole && (
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
+            {(isAllowed) => {
+              return (
+                <Tooltip content="Edit Role">
+                  <IconButton
+                    isDisabled={!isAllowed}
+                    ariaLabel="copy icon"
+                    variant="plain"
+                    className="group relative"
+                    onClick={() =>
+                      handlePopUpOpen("role", {
+                        roleId
+                      })
+                    }
+                  >
+                    <FontAwesomeIcon icon={faPencil} />
+                  </IconButton>
+                </Tooltip>
+              );
+            }}
+          </OrgPermissionCan>
+        )}
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Role ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{roleId}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(roleId);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{data.name}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Slug</p>
+          <p className="text-sm text-mineshaft-300">{data.slug}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Description</p>
+          <p className="text-sm text-mineshaft-300">
+            {data.description?.length ? data.description : "-"}
+          </p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend/src/views/Org/RolePage/components/RoleModal.tsx

@@ -0,0 +1,200 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useCreateOrgRole, useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    name: z.string(),
+    description: z.string(),
+    slug: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["role"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["role"]>, state?: boolean) => void;
+};
+
+export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const router = useRouter();
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const popupData = popUp?.role?.data as {
+    roleId: string;
+  };
+
+  const { data: role } = useGetOrgRole(orgId, popupData?.roleId ?? "");
+
+  const { mutateAsync: createOrgRole } = useCreateOrgRole();
+  const { mutateAsync: updateOrgRole } = useUpdateOrgRole();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: ""
+    }
+  });
+
+  useEffect(() => {
+    if (role) {
+      reset({
+        name: role.name,
+        description: role.description,
+        slug: role.slug
+      });
+    } else {
+      reset({
+        name: "",
+        description: "",
+        slug: ""
+      });
+    }
+  }, [role]);
+
+  const onFormSubmit = async ({ name, description, slug }: FormData) => {
+    try {
+      console.log("onFormSubmit args: ", {
+        name,
+        description,
+        slug
+      });
+
+      if (!orgId) return;
+
+      if (role) {
+        // update
+
+        await updateOrgRole({
+          orgId,
+          id: role.id,
+          name,
+          description,
+          slug
+        });
+
+        handlePopUpToggle("role", false);
+      } else {
+        // create
+
+        const newRole = await createOrgRole({
+          orgId,
+          name,
+          description,
+          slug,
+          permissions: []
+        });
+
+        handlePopUpToggle("role", false);
+        router.push(`/org/${orgId}/roles/${newRole.id}`);
+      }
+
+      createNotification({
+        text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text =
+        error?.response?.data?.message ??
+        `Failed to ${popUp?.role?.data ? "update" : "create"} role`;
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.role?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("role", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${popUp?.role?.data ? "Update" : "Create"} Role`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="Billing Team" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="slug"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Slug"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="billing" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Description" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="To manage billing" />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.role?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("role", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionRow.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { TFormSchema } from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
+
+const PERMISSIONS = [
+  { action: "read", label: "View" },
+  { action: "create", label: "Create" },
+  { action: "edit", label: "Modify" },
+  { action: "delete", label: "Remove" }
+] as const;
+
+const SECRET_SCANNING_PERMISSIONS = [
+  { action: "read", label: "View risks" },
+  { action: "create", label: "Add integrations" },
+  { action: "edit", label: "Edit risk status" },
+  { action: "delete", label: "Remove integrations" }
+] as const;
+
+const INCIDENT_CONTACTS_PERMISSIONS = [
+  { action: "read", label: "View contacts" },
+  { action: "create", label: "Add new contacts" },
+  { action: "edit", label: "Edit contacts" },
+  { action: "delete", label: "Remove contacts" }
+] as const;
+
+const MEMBERS_PERMISSIONS = [
+  { action: "read", label: "View all members" },
+  { action: "create", label: "Invite members" },
+  { action: "edit", label: "Edit members" },
+  { action: "delete", label: "Remove members" }
+] as const;
+
+const BILLING_PERMISSIONS = [
+  { action: "read", label: "View bills" },
+  { action: "create", label: "Add payment methods" },
+  { action: "edit", label: "Edit payments" },
+  { action: "delete", label: "Remove payments" }
+] as const;
+
+const getPermissionList = (option: string) => {
+  switch (option) {
+    case "secret-scanning":
+      return SECRET_SCANNING_PERMISSIONS;
+    case "billing":
+      return BILLING_PERMISSIONS;
+    case "incident-contact":
+      return INCIDENT_CONTACTS_PERMISSIONS;
+    case "member":
+      return MEMBERS_PERMISSIONS;
+    default:
+      return PERMISSIONS;
+  }
+};
+
+type Props = {
+  isEditable: boolean;
+  title: string;
+  formName: keyof Omit<Exclude<TFormSchema["permissions"], undefined>, "workspace">;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-acess",
+  Custom = "custom"
+}
+
+export const RolePermissionRow = ({ isEditable, title, formName, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: `permissions.${formName}`
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const totalActions = PERMISSIONS.length;
+    const score = actions.map((key) => (rule?.[key] ? 1 : 0)).reduce((a, b) => a + b, 0 as number);
+
+    if (isCustom) return Permission.Custom;
+    if (score === 0) return Permission.NoAccess;
+    if (score === totalActions) return Permission.FullAccess;
+    if (score === 1 && rule?.read) return Permission.ReadOnly;
+
+    return Permission.Custom;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  useEffect(() => {
+    const isRowCustom = selectedPermissionCategory === Permission.Custom;
+    if (isRowCustom) {
+      setIsRowExpanded.on();
+    }
+  }, []);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+        setValue(
+          `permissions.${formName}`,
+          { read: false, edit: false, create: false, delete: false },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.FullAccess:
+        setValue(
+          `permissions.${formName}`,
+          { read: true, edit: true, create: true, delete: true },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          `permissions.${formName}`,
+          { read: true, edit: false, create: false, delete: false },
+          { shouldDirty: true }
+        );
+        break;
+      default:
+        setValue(
+          `permissions.${formName}`,
+          { read: false, edit: false, create: false, delete: false },
+          { shouldDirty: true }
+        );
+        break;
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>{title}</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && " border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {getPermissionList(formName).map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.${formName}.${action}`}
+                    key={`permissions.${formName}.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={field.value}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.${formName}.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx

@@ -0,0 +1,162 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button , Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
+import {
+  formRolePermission2API,
+  formSchema,
+  rolePermission2Form,
+  TFormSchema
+} from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
+
+import { RolePermissionRow } from "./RolePermissionRow";
+
+const SIMPLE_PERMISSION_OPTIONS = [
+  {
+    title: "User management",
+    formName: "member"
+  },
+  {
+    title: "Group management",
+    formName: "groups"
+  },
+  {
+    title: "Machine identity management",
+    formName: "identity"
+  },
+  {
+    title: "Billing & usage",
+    formName: "billing"
+  },
+  {
+    title: "Role management",
+    formName: "role"
+  },
+  {
+    title: "Incident Contacts",
+    formName: "incident-contact"
+  },
+  {
+    title: "Organization profile",
+    formName: "settings"
+  },
+  {
+    title: "Secret Scanning",
+    formName: "secret-scanning"
+  },
+  {
+    title: "SSO",
+    formName: "sso"
+  },
+  {
+    title: "LDAP",
+    formName: "ldap"
+  },
+  {
+    title: "SCIM",
+    formName: "scim"
+  }
+] as const;
+
+type Props = {
+  roleId: string;
+};
+
+export const RolePermissionsSection = ({ roleId }: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const { data: role } = useGetOrgRole(orgId, roleId);
+
+  const {
+    setValue,
+    control,
+    handleSubmit,
+    formState: { isDirty, isSubmitting },
+    reset
+  } = useForm<TFormSchema>({
+    defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
+    resolver: zodResolver(formSchema)
+  });
+
+  const { mutateAsync: updateRole } = useUpdateOrgRole();
+
+  const onSubmit = async (el: TFormSchema) => {
+    try {
+      await updateRole({
+        orgId,
+        id: roleId,
+        ...el,
+        permissions: formRolePermission2API(el.permissions)
+      });
+      createNotification({ type: "success", text: "Successfully updated role" });
+    } catch (err) {
+      console.log(err);
+      createNotification({ type: "error", text: "Failed to update role" });
+    }
+  };
+
+  const isCustomRole = !["admin", "member", "no-access"].includes(role?.slug ?? "");
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Permissions</h3>
+        {isCustomRole && (
+          <div className="flex items-center">
+            <Button
+              colorSchema="primary"
+              type="submit"
+              isDisabled={isSubmitting || !isDirty}
+              isLoading={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              className="ml-4 text-mineshaft-300"
+              variant="link"
+              isDisabled={isSubmitting || !isDirty}
+              isLoading={isSubmitting}
+              onClick={() => reset()}
+            >
+              Cancel
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="py-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th className="w-5" />
+                <Th>Resource</Th>
+                <Th>Permission</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {SIMPLE_PERMISSION_OPTIONS.map((permission) => {
+                return (
+                  <RolePermissionRow
+                    title={permission.title}
+                    formName={permission.formName}
+                    control={control}
+                    setValue={setValue}
+                    key={`org-role-${roleId}-permission-${permission.formName}`}
+                    isEditable={isCustomRole}
+                  />
+                );
+              })}
+            </TBody>
+          </Table>
+        </TableContainer>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Org/RolePage/components/RolePermissionsSection/index.tsx

@@ -0,0 +1 @@
+export { RolePermissionsSection } from "./RolePermissionsSection";

frontend/src/views/Org/RolePage/components/index.tsx

@@ -0,0 +1,3 @@
+export { RoleDetailsSection } from "./RoleDetailsSection";
+export { RoleModal } from "./RoleModal";
+export { RolePermissionsSection } from "./RolePermissionsSection";

frontend/src/views/Org/RolePage/index.tsx

@@ -0,0 +1 @@
+export { RolePage } from "./RolePage";

frontend/src/views/Org/UserPage/UserPage.tsx

@@ -0,0 +1,288 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useUser
+} from "@app/context";
+import { withPermission } from "@app/hoc";
+import {
+  useDeleteOrgMembership,
+  useGetOrgMembership,
+  useUpdateOrgMembership
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { UserDetailsSection, UserOrgMembershipModal, UserProjectsSection } from "./components";
+
+export const UserPage = withPermission(
+  () => {
+    const router = useRouter();
+    const membershipId = router.query.membershipId as string;
+    const { user } = useUser();
+    const { currentOrg } = useOrganization();
+
+    const userId = user?.id || "";
+    const orgId = currentOrg?.id || "";
+
+    const { data: membership } = useGetOrgMembership(orgId, membershipId);
+
+    const { mutateAsync: deleteOrgMembership } = useDeleteOrgMembership();
+    const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "removeMember",
+      "orgMembership",
+      "deactivateMember",
+      "upgradePlan"
+    ] as const);
+
+    const onDeactivateMemberSubmit = async (orgMembershipId: string) => {
+      try {
+        await updateOrgMembership({
+          organizationId: orgId,
+          membershipId: orgMembershipId,
+          isActive: false
+        });
+
+        createNotification({
+          text: "Successfully deactivated user in organization",
+          type: "success"
+        });
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to deactivate user in organization",
+          type: "error"
+        });
+      }
+
+      handlePopUpClose("deactivateMember");
+    };
+
+    const onRemoveMemberSubmit = async (orgMembershipId: string) => {
+      try {
+        await deleteOrgMembership({
+          orgId,
+          membershipId: orgMembershipId
+        });
+
+        createNotification({
+          text: "Successfully removed user from org",
+          type: "success"
+        });
+
+        handlePopUpClose("removeMember");
+        router.push(`/org/${orgId}/members`);
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to remove user from the organization",
+          type: "error"
+        });
+      }
+
+      handlePopUpClose("removeMember");
+    };
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {membership && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => {
+                router.push(`/org/${orgId}/members`);
+              }}
+              className="mb-4"
+            >
+              Users
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">
+                {membership.user.firstName || membership.user.lastName
+                  ? `${membership.user.firstName} ${membership.user.lastName}`
+                  : "-"}
+              </p>
+              {userId !== membership.user.id && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild className="rounded-lg">
+                    <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                      <Tooltip content="More options">
+                        <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                      </Tooltip>
+                    </div>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="p-1">
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Edit}
+                      a={OrgPermissionSubjects.Identity}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={() =>
+                            handlePopUpOpen("orgMembership", {
+                              membershipId: membership.id,
+                              role: membership.role
+                            })
+                          }
+                          disabled={!isAllowed}
+                        >
+                          Edit User
+                        </DropdownMenuItem>
+                      )}
+                    </OrgPermissionCan>
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Delete}
+                      a={OrgPermissionSubjects.Member}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={
+                            membership.isActive
+                              ? twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )
+                              : ""
+                          }
+                          onClick={async () => {
+                            if (currentOrg?.scimEnabled) {
+                              createNotification({
+                                text: "You cannot manage users from Infisical when SCIM is enabled for your organization",
+                                type: "error"
+                              });
+                              return;
+                            }
+
+                            if (!membership.isActive) {
+                              // activate user
+                              await updateOrgMembership({
+                                organizationId: orgId,
+                                membershipId,
+                                isActive: true
+                              });
+
+                              return;
+                            }
+
+                            // deactivate user
+                            handlePopUpOpen("deactivateMember", {
+                              orgMembershipId: membershipId,
+                              username: membership.user.username
+                            });
+                          }}
+                          disabled={!isAllowed}
+                        >
+                          {`${membership.isActive ? "Deactivate" : "Activate"} User`}
+                        </DropdownMenuItem>
+                      )}
+                    </OrgPermissionCan>
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Delete}
+                      a={OrgPermissionSubjects.Member}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            isAllowed
+                              ? "hover:!bg-red-500 hover:!text-white"
+                              : "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={() => {
+                            if (currentOrg?.scimEnabled) {
+                              createNotification({
+                                text: "You cannot manage users from Infisical when SCIM is enabled for your organization",
+                                type: "error"
+                              });
+                              return;
+                            }
+
+                            handlePopUpOpen("removeMember", {
+                              orgMembershipId: membershipId,
+                              username: membership.user.username
+                            });
+                          }}
+                          disabled={!isAllowed}
+                        >
+                          Remove User
+                        </DropdownMenuItem>
+                      )}
+                    </OrgPermissionCan>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <UserDetailsSection membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
+              </div>
+              <UserProjectsSection membershipId={membershipId} />
+            </div>
+          </div>
+        )}
+        <DeleteActionModal
+          isOpen={popUp.removeMember.isOpen}
+          title={`Are you sure want to remove member with username ${
+            (popUp?.removeMember?.data as { username: string })?.username || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onRemoveMemberSubmit(
+              (popUp?.removeMember?.data as { orgMembershipId: string })?.orgMembershipId
+            )
+          }
+        />
+        <DeleteActionModal
+          isOpen={popUp.deactivateMember.isOpen}
+          title={`Are you sure want to deactivate member with username ${
+            (popUp?.deactivateMember?.data as { username: string })?.username || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deactivateMember", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onDeactivateMemberSubmit(
+              (popUp?.deactivateMember?.data as { orgMembershipId: string })?.orgMembershipId
+            )
+          }
+          buttonText="Deactivate"
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={(popUp.upgradePlan?.data as { description: string })?.description}
+        />
+        <UserOrgMembershipModal
+          popUp={popUp}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Member }
+);

frontend/src/views/Org/UserPage/components/UserDetailsSection.tsx

@@ -0,0 +1,195 @@
+import {
+  faCheck,
+  faCheckCircle,
+  faCircleXmark,
+  faCopy,
+  faPencil} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, IconButton, Tooltip } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useUser
+} from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import {
+  useAddUserToOrg,
+  useFetchServerStatus,
+  useGetOrgMembership,
+  useGetOrgRoles
+} from "@app/hooks/api";
+import { OrgUser } from "@app/hooks/api/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  membershipId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["orgMembership"]>, data?: {}) => void;
+};
+
+export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) => {
+  const [copyTextUsername, isCopyingUsername, setCopyTextUsername] = useTimedReset<string>({
+    initialState: "Copy username to clipboard"
+  });
+
+  const { user } = useUser();
+  const { currentOrg } = useOrganization();
+  const userId = user?.id || "";
+  const orgId = currentOrg?.id || "";
+
+  const { data: roles } = useGetOrgRoles(orgId);
+  const { data: serverDetails } = useFetchServerStatus();
+  const { data: membership } = useGetOrgMembership(orgId, membershipId);
+  const { mutateAsync: inviteUser, isLoading } = useAddUserToOrg();
+
+  const onResendInvite = async (email: string) => {
+    try {
+      const { data } = await inviteUser({
+        organizationId: orgId,
+        inviteeEmail: email
+      });
+
+      //   setCompleteInviteLink(data?.completeInviteLink || "");
+
+      if (!data.completeInviteLink) {
+        createNotification({
+          text: `Successfully resent invite to ${email}`,
+          type: "success"
+        });
+      }
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to resend invite to ${email}`,
+        type: "error"
+      });
+    }
+  };
+
+  const getStatus = (m: OrgUser) => {
+    if (!m.isActive) {
+      return "Deactivated";
+    }
+
+    return m.status === "invited" ? "Invited" : "Active";
+  };
+
+  const roleName = roles?.find((r) => r.slug === membership?.role)?.name;
+
+  return membership ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Details</h3>
+        {userId !== membership.user.id && (
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+            {(isAllowed) => {
+              return (
+                <Tooltip content="Edit Membership">
+                  <IconButton
+                    isDisabled={!isAllowed}
+                    ariaLabel="copy icon"
+                    variant="plain"
+                    className="group relative"
+                    onClick={() => {
+                      handlePopUpOpen("orgMembership", {
+                        membershipId: membership.id,
+                        role: membership.role
+                      });
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faPencil} />
+                  </IconButton>
+                </Tooltip>
+              );
+            }}
+          </OrgPermissionCan>
+        )}
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">
+            {membership.user.firstName || membership.user.lastName
+              ? `${membership.user.firstName} ${membership.user.lastName}`
+              : "-"}
+          </p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Username</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{membership.user.username}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextUsername}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText("");
+                    setCopyTextUsername("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingUsername ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Email</p>
+          <div className="flex items-center">
+            <p className="mr-2 text-sm text-mineshaft-300">{membership.user.email ?? "-"}</p>
+            <Tooltip
+              content={
+                membership.user.isEmailVerified
+                  ? "Email has been verified"
+                  : "Email has not been verified"
+              }
+            >
+              <FontAwesomeIcon
+                size="sm"
+                icon={membership.user.isEmailVerified ? faCheckCircle : faCircleXmark}
+              />
+            </Tooltip>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{roleName ?? "-"}</p>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">{getStatus(membership)}</p>
+        </div>
+        {membership.isActive &&
+          (membership.status === "invited" || membership.status === "verified") &&
+          membership.user.email &&
+          serverDetails?.emailConfigured && (
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+              {(isAllowed) => {
+                return (
+                  <Button
+                    isDisabled={!isAllowed}
+                    className="mt-4 w-full"
+                    colorSchema="primary"
+                    type="submit"
+                    isLoading={isLoading}
+                    onClick={() => {
+                      onResendInvite(membership.user.email as string);
+                    }}
+                  >
+                    Resend Invite
+                  </Button>
+                );
+              }}
+            </OrgPermissionCan>
+          )}
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx

@@ -0,0 +1,160 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import { useGetOrgRoles, useUpdateOrgMembership } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  role: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["orgMembership"]>;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>, data?: {}) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["orgMembership"]>, state?: boolean) => void;
+};
+
+export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const { subscription } = useSubscription();
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const { data: roles } = useGetOrgRoles(orgId);
+
+  const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const popUpData = popUp?.orgMembership?.data as {
+    membershipId: string;
+    role: string;
+  };
+
+  useEffect(() => {
+    if (!roles?.length) return;
+
+    if (popUpData) {
+      reset({
+        role: popUpData.role
+      });
+    } else {
+      reset({
+        role: roles[0].slug
+      });
+    }
+  }, [popUp?.orgMembership?.data, roles]);
+
+  const onFormSubmit = async ({ role }: FormData) => {
+    try {
+      if (!orgId) return;
+
+      await updateOrgMembership({
+        organizationId: orgId,
+        membershipId: popUpData.membershipId,
+        role
+      });
+
+      handlePopUpToggle("orgMembership", false);
+
+      createNotification({
+        text: "Successfully updated user organization role",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to update user organization role";
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.orgMembership?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("orgMembership", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Update Membership">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="role"
+            defaultValue=""
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Update Organization Role"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => {
+                    const isCustomRole = !["admin", "member", "no-access"].includes(e);
+
+                    if (isCustomRole && subscription && !subscription?.rbac) {
+                      handlePopUpOpen("upgradePlan", {
+                        description:
+                          "You can assign custom roles to members if you upgrade your Infisical plan."
+                      });
+                      return;
+                    }
+
+                    onChange(e);
+                  }}
+                  className="w-full"
+                >
+                  {(roles || []).map(({ name, slug }) => (
+                    <SelectItem value={slug} key={`st-role-${slug}`}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Update
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("orgMembership", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserAddToProjectModal.tsx

@@ -0,0 +1,145 @@
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import { useAddUserToWsNonE2EE, useGetOrgMembershipProjectMemberships } from "@app/hooks/api";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    projectId: z.string()
+  })
+  .required();
+
+type FormData = z.infer<typeof schema>;
+
+type Props = {
+  membershipId: string;
+  popUp: UsePopUpState<["addUserToProject"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["addUserToProject"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const UserAddToProjectModal = ({ membershipId, popUp, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { workspaces } = useWorkspace();
+
+  const { mutateAsync: addUserToWorkspaceNonE2EE } = useAddUserToWsNonE2EE();
+
+  const popupData = popUp.addUserToProject.data as {
+    username: string;
+  };
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const { data: projectMemberships } = useGetOrgMembershipProjectMemberships(orgId, membershipId);
+
+  const filteredWorkspaces = useMemo(() => {
+    const wsWorkspaceIds = new Map();
+
+    projectMemberships?.forEach((projectMembership) => {
+      wsWorkspaceIds.set(projectMembership.project.id, true);
+    });
+
+    return (workspaces || []).filter(
+      ({ id, orgId: projectOrgId, version }) =>
+        !wsWorkspaceIds.has(id) && projectOrgId === currentOrg?.id && version === ProjectVersion.V2
+    );
+  }, [workspaces, projectMemberships]);
+
+  const onFormSubmit = async ({ projectId }: FormData) => {
+    try {
+      await addUserToWorkspaceNonE2EE({
+        projectId,
+        usernames: [popupData.username],
+        orgId
+      });
+
+      createNotification({
+        text: "Successfully added user to project",
+        type: "success"
+      });
+
+      reset();
+      handlePopUpToggle("addUserToProject", false);
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to add identity to project";
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addUserToProject?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addUserToProject", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Add User to Project">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="projectId"
+            defaultValue=""
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl label="Project" errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {(filteredWorkspaces || []).map(({ id, name }) => (
+                    <SelectItem value={id} key={`project-${id}`}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Add
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("addUserToProject", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectRow.tsx

@@ -0,0 +1,90 @@
+import { useMemo } from "react";
+import { useRouter } from "next/router";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  membership: TWorkspaceUser;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromProject"]>, data?: {}) => void;
+};
+
+const formatRoleName = (role: string, customRoleName?: string) => {
+  if (role === ProjectMembershipRole.Custom) return customRoleName;
+  if (role === ProjectMembershipRole.Admin) return "Admin";
+  if (role === ProjectMembershipRole.Member) return "Developer";
+  if (role === ProjectMembershipRole.Viewer) return "Viewer";
+  if (role === ProjectMembershipRole.NoAccess) return "No Access";
+  return role;
+};
+
+export const UserProjectRow = ({
+  membership: { id, project, user, roles },
+  handlePopUpOpen
+}: Props) => {
+  const { workspaces } = useWorkspace();
+  const router = useRouter();
+
+  const isAccessible = useMemo(() => {
+    const workspaceIds = new Map();
+
+    workspaces?.forEach((workspace) => {
+      workspaceIds.set(workspace.id, true);
+    });
+
+    return workspaceIds.has(project.id);
+  }, [workspaces, project]);
+
+  return (
+    <Tr
+      className="group h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+      key={`user-project-membership-${id}`}
+      onClick={() => {
+        if (isAccessible) {
+          router.push(`/project/${project.id}/members`);
+          return;
+        }
+
+        createNotification({
+          text: "Unable to access project",
+          type: "error"
+        });
+      }}
+    >
+      <Td>{project.name}</Td>
+      <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
+        roles.length > 1 ? ` (+${roles.length - 1})` : ""
+      }`}</Td>
+      <Td>
+        {isAccessible && (
+          <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <Tooltip content="Remove">
+              <IconButton
+                colorSchema="danger"
+                ariaLabel="copy icon"
+                variant="plain"
+                className="group relative"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlePopUpOpen("removeUserFromProject", {
+                    username: user.username,
+                    projectId: project.id,
+                    projectName: project.name
+                  });
+                }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </IconButton>
+            </Tooltip>
+          </div>
+        )}
+      </Td>
+    </Tr>
+  );
+};

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsSection.tsx

@@ -0,0 +1,98 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { useOrganization, useUser } from "@app/context";
+import { useDeleteUserFromWorkspace, useGetOrgMembership } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { UserAddToProjectModal } from "./UserAddToProjectModal";
+import { UserProjectsTable } from "./UserProjectsTable";
+
+type Props = {
+  membershipId: string;
+};
+
+export const UserProjectsSection = ({ membershipId }: Props) => {
+  const { user } = useUser();
+  const { currentOrg } = useOrganization();
+
+  const userId = user?.id || "";
+  const orgId = currentOrg?.id || "";
+
+  const { data: membership } = useGetOrgMembership(orgId, membershipId);
+
+  const { mutateAsync: removeUserFromWorkspace } = useDeleteUserFromWorkspace();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "addUserToProject",
+    "removeUserFromProject"
+  ] as const);
+
+  const handleRemoveUser = async (projectId: string, username: string) => {
+    try {
+      await removeUserFromWorkspace({ workspaceId: projectId, usernames: [username], orgId });
+      createNotification({
+        text: "Successfully removed user from project",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to remove user from the project",
+        type: "error"
+      });
+    }
+    handlePopUpClose("removeUserFromProject");
+  };
+
+  return membership ? (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Projects</h3>
+        {userId !== membership.user.id && membership.status !== "invited" && (
+          <IconButton
+            ariaLabel="copy icon"
+            variant="plain"
+            className="group relative"
+            onClick={() => {
+              handlePopUpOpen("addUserToProject", {
+                username: membership.user.username
+              });
+            }}
+          >
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        )}
+      </div>
+      <div className="py-4">
+        <UserProjectsTable membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
+      </div>
+      <UserAddToProjectModal
+        membershipId={membershipId}
+        popUp={popUp}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <DeleteActionModal
+        isOpen={popUp.removeUserFromProject.isOpen}
+        deleteKey="remove"
+        title={`Do you want to remove this user from ${
+          (popUp?.removeUserFromProject?.data as { projectName: string })?.projectName || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("removeUserFromProject", isOpen)}
+        onDeleteApproved={() => {
+          const popupData = popUp?.removeUserFromProject?.data as {
+            username: string;
+            projectId: string;
+            projectName: string;
+          };
+
+          return handleRemoveUser(popupData.projectId, popupData.username);
+        }}
+      />
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx

@@ -0,0 +1,62 @@
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useGetOrgMembershipProjectMemberships } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { UserProjectRow } from "./UserProjectRow";
+
+type Props = {
+  membershipId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromProject"]>, data?: {}) => void;
+};
+
+export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const { data: projectMemberships, isLoading } = useGetOrgMembershipProjectMemberships(
+    orgId,
+    membershipId
+  );
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th>Role</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={3} innerKey="user-project-memberships" />}
+          {!isLoading &&
+            projectMemberships?.map((membership) => {
+              return (
+                <UserProjectRow
+                  key={`user-project-membership-${membership.id}`}
+                  membership={membership}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isLoading && !projectMemberships?.length && (
+        <EmptyState title="This user has not been assigned to any projects" icon={faFolder} />
+      )}
+    </TableContainer>
+  );
+};

frontend/src/views/Org/UserPage/components/UserProjectsSection/index.tsx

@@ -0,0 +1 @@
+export { UserProjectsSection } from "./UserProjectsSection";

frontend/src/views/Org/UserPage/components/index.tsx

@@ -0,0 +1,3 @@
+export { UserDetailsSection } from "./UserDetailsSection";
+export { UserOrgMembershipModal } from "./UserOrgMembershipModal";
+export { UserProjectsSection } from "./UserProjectsSection";

frontend/src/views/Org/UserPage/index.tsx

@@ -0,0 +1 @@
+export { UserPage } from "./UserPage";

frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx

@@ -6,14 +6,15 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button,FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
   useAddUserToWsE2EE,
   useAddUserToWsNonE2EE,
   useGetOrgUsers,
   useGetUserWsKey,
-  useGetWorkspaceUsers} from "@app/hooks/api";
+  useGetWorkspaceUsers
+} from "@app/hooks/api";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -76,7 +77,8 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
       } else if (currentWorkspace.version === ProjectVersion.V2) {
         await addUserToWorkspaceNonE2EE({
           projectId: workspaceId,
-          usernames: [orgUser.user.username]
+          usernames: [orgUser.user.username],
+          orgId
         });
       } else {
         createNotification({

frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersSection.tsx

@@ -4,7 +4,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub , useOrganization, useWorkspace } from "@app/context";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization,
+  useWorkspace
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteUserFromWorkspace } from "@app/hooks/api";
 
@@ -30,7 +35,11 @@ export const MembersSection = () => {
     if (!currentWorkspace?.id) return;
 
     try {
-      await removeUserFromWorkspace({ workspaceId: currentWorkspace.id, usernames: [username] });
+      await removeUserFromWorkspace({
+        workspaceId: currentWorkspace.id,
+        usernames: [username],
+        orgId: currentOrg.id
+      });
       createNotification({
         text: "Successfully removed user from project",
         type: "success"

frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx

@@ -3,25 +3,31 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { Divider } from "@app/components/v2/Divider";
+import { Badge } from "@app/components/v2/Badge";
 import { useWorkspace } from "@app/context";
+import { useGetAccessRequestsCount, useGetSecretApprovalRequestCount } from "@app/hooks/api";
 
-import { AccessApprovalPolicyList } from "./components/AccessApprovalPolicyList";
 import { AccessApprovalRequest } from "./components/AccessApprovalRequest";
-import { SecretApprovalPolicyList } from "./components/SecretApprovalPolicyList";
+import { ApprovalPolicyList } from "./components/ApprovalPolicyList";
 import { SecretApprovalRequest } from "./components/SecretApprovalRequest";
 
 enum TabSection {
   SecretApprovalRequests = "approval-requests",
   SecretPolicies = "approval-rules",
   ResourcePolicies = "resource-rules",
-  ResourceApprovalRequests = "resource-requests"
+  ResourceApprovalRequests = "resource-requests",
+  Policies = "policies"
 }
 
 export const SecretApprovalPage = () => {
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
+  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId: projectId });
+  const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({ projectSlug });
+  const defaultTab = (accessApprovalRequestCount?.pendingCount || 0) > (secretApprovalReqCount?.open || 0)
+    ? TabSection.ResourceApprovalRequests
+    : TabSection.SecretApprovalRequests;
 
   return (
     <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 px-6 text-white">
@@ -45,25 +51,26 @@ export const SecretApprovalPage = () => {
           </Link>
         </div>
       </div>
-      <Tabs defaultValue={TabSection.SecretApprovalRequests}>
+      <Tabs defaultValue={defaultTab}>
         <TabList>
-          <Tab value={TabSection.SecretApprovalRequests}>Secret Requests</Tab>
-          <Tab value={TabSection.SecretPolicies}>Secret Policies</Tab>
-          <Divider />
-          <Tab value={TabSection.ResourceApprovalRequests}>Access Requests</Tab>
-          <Tab value={TabSection.ResourcePolicies}>Access Request Policies</Tab>
+          <Tab value={TabSection.SecretApprovalRequests}>
+            Secret Requests
+            {Boolean(secretApprovalReqCount?.open) && (<Badge className="ml-2">{secretApprovalReqCount?.open}</Badge>)}
+          </Tab>
+          <Tab value={TabSection.ResourceApprovalRequests}>
+            Access Requests
+            {Boolean(accessApprovalRequestCount?.pendingCount) && <Badge className="ml-2">{accessApprovalRequestCount?.pendingCount}</Badge>}
+          </Tab>
+          <Tab value={TabSection.Policies}>Policies</Tab>
         </TabList>
-        <TabPanel value={TabSection.SecretPolicies}>
-          <SecretApprovalPolicyList workspaceId={projectId} />
-        </TabPanel>
         <TabPanel value={TabSection.SecretApprovalRequests}>
           <SecretApprovalRequest />
         </TabPanel>
         <TabPanel value={TabSection.ResourceApprovalRequests}>
           <AccessApprovalRequest projectId={projectId} projectSlug={projectSlug} />
         </TabPanel>
-        <TabPanel value={TabSection.ResourcePolicies}>
-          <AccessApprovalPolicyList workspaceId={projectId} />
+        <TabPanel value={TabSection.Policies}>
+          <ApprovalPolicyList workspaceId={projectId} />
         </TabPanel>
       </Tabs>
     </div>

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/AccessApprovalPolicyList.tsx

@@ -1,174 +0,0 @@
-import { faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  UpgradePlanModal
-} from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useSubscription,
-  useWorkspace
-} from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { useDeleteAccessApprovalPolicy, useGetWorkspaceUsers } from "@app/hooks/api";
-import { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
-import { TAccessApprovalPolicy } from "@app/hooks/api/types";
-
-import { AccessApprovalPolicyRow } from "./components/AccessApprovalPolicyRow";
-import { AccessPolicyForm } from "./components/AccessPolicyModal";
-
-interface IProps {
-  workspaceId: string;
-}
-
-export const AccessApprovalPolicyList = ({ workspaceId }: IProps) => {
-  const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
-    "secretPolicyForm",
-    "deletePolicy",
-    "upgradePlan"
-  ] as const);
-  const { permission } = useProjectPermission();
-  const { subscription } = useSubscription();
-  const { currentWorkspace } = useWorkspace();
-
-  const { data: members } = useGetWorkspaceUsers(workspaceId);
-  const { data: policies, isLoading: isPoliciesLoading } = useGetAccessApprovalPolicies({
-    projectSlug: currentWorkspace?.slug as string,
-    options: {
-      enabled:
-        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
-        !!currentWorkspace?.slug
-    }
-  });
-
-  const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteAccessApprovalPolicy();
-
-  const handleDeletePolicy = async () => {
-    const { id } = popUp.deletePolicy.data as TAccessApprovalPolicy;
-    if (!currentWorkspace?.slug) return;
-
-    try {
-      await deleteSecretApprovalPolicy({
-        projectSlug: currentWorkspace?.slug,
-        id
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully deleted policy"
-      });
-      handlePopUpClose("deletePolicy");
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed  to delete policy"
-      });
-    }
-  };
-
-  return (
-    <div>
-      <div className="mb-6 flex items-end justify-between">
-        <div className="flex flex-col">
-          <span className="text-xl font-semibold text-mineshaft-100">Access Request Policies</span>
-          <div className="mt-2 text-sm text-bunker-300">
-            Implement secret request policies for specific secrets and environments.
-          </div>
-        </div>
-        <div>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
-            a={ProjectPermissionSub.SecretApproval}
-          >
-            {(isAllowed) => (
-              <Button
-                onClick={() => {
-                  if (subscription && !subscription?.secretApproval) {
-                    handlePopUpOpen("upgradePlan");
-                    return;
-                  }
-                  handlePopUpOpen("secretPolicyForm");
-                }}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                isDisabled={!isAllowed}
-              >
-                Create policy
-              </Button>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </div>
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Name</Th>
-              <Th>Environment</Th>
-              <Th>Secret Path</Th>
-              <Th>Eligible Approvers</Th>
-              <Th>Approval Required</Th>
-              <Th />
-            </Tr>
-          </THead>
-          <TBody>
-            {isPoliciesLoading && (
-              <TableSkeleton columns={6} innerKey="secret-policies" className="bg-mineshaft-700" />
-            )}
-            {!isPoliciesLoading && !policies?.length && (
-              <Tr>
-                <Td colSpan={6}>
-                  <EmptyState title="No policies found" icon={faFileShield} />
-                </Td>
-              </Tr>
-            )}
-            {!!currentWorkspace &&
-              policies?.map((policy) => (
-                <AccessApprovalPolicyRow
-                  projectSlug={currentWorkspace.slug}
-                  policy={policy}
-                  key={policy.id}
-                  members={members}
-                  onEdit={() => handlePopUpOpen("secretPolicyForm", policy)}
-                  onDelete={() => handlePopUpOpen("deletePolicy", policy)}
-                />
-              ))}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <AccessPolicyForm
-        projectSlug={currentWorkspace?.slug!}
-        isOpen={popUp.secretPolicyForm.isOpen}
-        onToggle={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
-        members={members}
-        editValues={popUp.secretPolicyForm.data as TAccessApprovalPolicy}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deletePolicy.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this policy?"
-        onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
-        onDeleteApproved={handleDeletePolicy}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add secret approval policy if you switch to Infisical's Enterprise  plan."
-      />
-    </div>
-  );
-};

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessApprovalPolicyRow.tsx

@@ -1,146 +0,0 @@
-import { useState } from "react";
-import { faCheckCircle, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  IconButton,
-  Input,
-  Td,
-  Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
-import { useUpdateAccessApprovalPolicy } from "@app/hooks/api";
-import { TAccessApprovalPolicy } from "@app/hooks/api/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  policy: TAccessApprovalPolicy;
-  members?: TWorkspaceUser[];
-  projectSlug: string;
-  onEdit: () => void;
-  onDelete: () => void;
-};
-
-export const AccessApprovalPolicyRow = ({
-  policy,
-  members = [],
-  projectSlug,
-  onEdit,
-  onDelete
-}: Props) => {
-  const [selectedApprovers, setSelectedApprovers] = useState<string[]>([]);
-  const { mutate: updateAccessApprovalPolicy, isLoading } = useUpdateAccessApprovalPolicy();
-  const { permission } = useProjectPermission();
-
-  return (
-    <Tr>
-      <Td>{policy.name}</Td>
-      <Td>{policy.environment.slug}</Td>
-      <Td>{policy.secretPath || "*"}</Td>
-      <Td>
-        <DropdownMenu
-          onOpenChange={(isOpen) => {
-            if (!isOpen) {
-              updateAccessApprovalPolicy(
-                {
-                  projectSlug,
-                  id: policy.id,
-                  approvers: selectedApprovers
-                },
-                {
-                  onSettled: () => {
-                    setSelectedApprovers([]);
-                  }
-                }
-              );
-            } else {
-              setSelectedApprovers(policy.approvers);
-            }
-          }}
-        >
-          <DropdownMenuTrigger
-            asChild
-            disabled={
-              isLoading ||
-              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
-            }
-          >
-            <Input
-              isReadOnly
-              value={policy.approvers?.length ? `${policy.approvers.length} selected` : "None"}
-              className="text-left"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-            align="start"
-          >
-            <DropdownMenuLabel>
-              Select members that are allowed to approve changes
-            </DropdownMenuLabel>
-            {members?.map(({ id, user }) => {
-              const isChecked = selectedApprovers.includes(id);
-              return (
-                <DropdownMenuItem
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    setSelectedApprovers((state) =>
-                      isChecked ? state.filter((el) => el !== id) : [...state, id]
-                    );
-                  }}
-                  key={`create-policy-members-${id}`}
-                  iconPos="right"
-                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                >
-                  {user.username}
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </Td>
-      <Td>{policy.approvals}</Td>
-      <Td>
-        <div className="flex items-center justify-end space-x-4">
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Edit}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Edit"
-          >
-            {(isAllowed) => (
-              <IconButton variant="plain" ariaLabel="edit" onClick={onEdit} isDisabled={!isAllowed}>
-                <FontAwesomeIcon icon={faPencil} size="lg" />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Delete}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Delete"
-          >
-            {(isAllowed) => (
-              <IconButton
-                variant="plain"
-                colorSchema="danger"
-                size="lg"
-                ariaLabel="edit"
-                onClick={onDelete}
-                isDisabled={!isAllowed}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </Td>
-    </Tr>
-  );
-};

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -1,266 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import {
-  useCreateAccessApprovalPolicy,
-  useUpdateAccessApprovalPolicy
-} from "@app/hooks/api/accessApproval";
-import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  isOpen?: boolean;
-  onToggle: (isOpen: boolean) => void;
-  members?: TWorkspaceUser[];
-  projectSlug: string;
-  editValues?: TAccessApprovalPolicy;
-};
-
-const formSchema = z
-  .object({
-    environment: z.string(),
-    name: z.string().optional(),
-    secretPath: z.string().optional(),
-    approvals: z.number().min(1),
-    approvers: z.string().array().min(1)
-  })
-  .refine((data) => data.approvals <= data.approvers.length, {
-    path: ["approvals"],
-    message: "The number of approvals should be lower than the number of approvers."
-  });
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const AccessPolicyForm = ({
-  isOpen,
-  onToggle,
-  members = [],
-  projectSlug,
-  editValues
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema),
-    values: editValues ? { ...editValues, environment: editValues.environment.slug } : undefined
-  });
-  const { currentWorkspace } = useWorkspace();
-
-  const environments = currentWorkspace?.environments || [];
-  useEffect(() => {
-    if (!isOpen) reset({});
-  }, [isOpen]);
-
-  const isEditMode = Boolean(editValues);
-
-  const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
-  const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
-
-  const handleCreatePolicy = async (data: TFormSchema) => {
-    if (!projectSlug) return;
-
-    try {
-      await createAccessApprovalPolicy({
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully created policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to create policy"
-      });
-    }
-  };
-
-  const handleUpdatePolicy = async (data: TFormSchema) => {
-    if (!projectSlug) return;
-    if (!editValues?.id) return;
-
-    try {
-      await updateAccessApprovalPolicy({
-        id: editValues?.id,
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "failed  to update policy"
-      });
-    }
-  };
-
-  const handleFormSubmit = async (data: TFormSchema) => {
-    if (isEditMode) {
-      await handleUpdatePolicy(data);
-    } else {
-      await handleCreatePolicy(data);
-    }
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onToggle}>
-      <ModalContent title={isEditMode ? "Edit Access Policy" : "Create Access Policy"}>
-        <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="environment"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Environment"
-                isRequired
-                className="mt-4"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Select
-                  isDisabled={isEditMode}
-                  value={value}
-                  onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
-                >
-                  {environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-                    >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="secretPath"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="approvers"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Approvers Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Input
-                      isReadOnly
-                      value={value?.length ? `${value.length} selected` : "None"}
-                      className="text-left"
-                    />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-                    align="start"
-                  >
-                    <DropdownMenuLabel>
-                      Select members that are allowed to approve changes
-                    </DropdownMenuLabel>
-                    {members.map(({ id, user }) => {
-                      const isChecked = value?.includes(id);
-                      return (
-                        <DropdownMenuItem
-                          onClick={(evt) => {
-                            evt.preventDefault();
-                            onChange(
-                              isChecked ? value?.filter((el) => el !== id) : [...(value || []), id]
-                            );
-                          }}
-                          key={`create-policy-members-${id}`}
-                          iconPos="right"
-                          icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                        >
-                          {user.username}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approvals"
-            defaultValue={1}
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Approvals Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input
-                  {...field}
-                  type="number"
-                  onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center space-x-4">
-            <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-              Save
-            </Button>
-            <Button onClick={() => onToggle(false)} variant="outline_bg">
-              Close
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
-  );
-};

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/index.tsx

@@ -1 +0,0 @@
-export { AccessApprovalPolicyList } from "./AccessApprovalPolicyList";

frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx

@@ -40,6 +40,7 @@ import {
   useGetAccessRequestsCount
 } from "@app/hooks/api/accessApproval/queries";
 import { TAccessApprovalRequest } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel } from "@app/hooks/api/policies/enums";
 import { ApprovalStatus, TWorkspaceUser } from "@app/hooks/api/types";
 import { queryClient } from "@app/reactQuery";
 
@@ -80,7 +81,12 @@ export const AccessApprovalRequest = ({
   projectId: string;
 }) => {
   const [selectedRequest, setSelectedRequest] = useState<
-    (TAccessApprovalRequest & { user: TWorkspaceUser["user"] | null }) | null
+    (TAccessApprovalRequest & {
+      user: TWorkspaceUser["user"] | null;
+      isRequestedByCurrentUser: boolean;
+      isApprover: boolean;
+    })
+    | null
   >(null);
 
   const { handlePopUpOpen, popUp, handlePopUpClose } = usePopUp([
@@ -141,6 +147,8 @@ export const AccessApprovalRequest = ({
     );
     const isApprover = request.policy.approvers.indexOf(membership.id || "") !== -1;
     const isAccepted = request.isApproved;
+    const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
+    const isRequestedByCurrentUser = request.requestedBy === membership.id;
 
     const userReviewStatus = request.reviewers.find(
       ({ member }) => member === membership.id
@@ -178,7 +186,9 @@ export const AccessApprovalRequest = ({
       isRejectedByAnyone,
       isApprover,
       userReviewStatus,
-      isAccepted
+      isAccepted,
+      isSoftEnforcement,
+      isRequestedByCurrentUser
     };
   };
 
@@ -331,16 +341,24 @@ export const AccessApprovalRequest = ({
                     tabIndex={0}
                     onClick={() => {
                       if (
-                        !details.isApprover ||
-                        details.isReviewedByUser ||
-                        details.isRejectedByAnyone ||
-                        details.isAccepted
+                        (
+                          !details.isApprover
+                          || details.isReviewedByUser
+                          || details.isRejectedByAnyone
+                          || details.isAccepted
+                        ) && !(
+                          details.isSoftEnforcement
+                          && details.isRequestedByCurrentUser
+                          && !details.isAccepted
+                        )
                       )
                         return;
 
                       setSelectedRequest({
                         ...request,
-                        user: membersGroupById?.[request.requestedBy].user!
+                        user: membersGroupById?.[request.requestedBy].user!,
+                        isRequestedByCurrentUser: details.isRequestedByCurrentUser,
+                        isApprover: details.isApprover
                       });
                       handlePopUpOpen("reviewRequest");
                     }}
@@ -355,7 +373,9 @@ export const AccessApprovalRequest = ({
                       if (evt.key === "Enter") {
                         setSelectedRequest({
                           ...request,
-                          user: membersGroupById?.[request.requestedBy].user!
+                          user: membersGroupById?.[request.requestedBy].user!,
+                          isRequestedByCurrentUser: details.isRequestedByCurrentUser,
+                          isApprover: details.isApprover
                         });
                         handlePopUpOpen("reviewRequest");
                       }

frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -2,11 +2,12 @@ import { useCallback, useMemo, useState } from "react";
 import ms from "ms";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, Modal, ModalContent } from "@app/components/v2";
+import { Button, Checkbox, Modal, ModalContent } from "@app/components/v2";
 import { Badge } from "@app/components/v2/Badge";
 import { ProjectPermissionActions } from "@app/context";
 import { useReviewAccessRequest } from "@app/hooks/api";
 import { TAccessApprovalRequest } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel } from "@app/hooks/api/policies/enums";
 import { TWorkspaceUser } from "@app/hooks/api/types";
 
 export const ReviewAccessRequestModal = ({
@@ -19,12 +20,18 @@ export const ReviewAccessRequestModal = ({
 }: {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
-  request: TAccessApprovalRequest & { user: TWorkspaceUser["user"] | null };
+  request: TAccessApprovalRequest & {
+    user: TWorkspaceUser["user"] | null;
+    isRequestedByCurrentUser: boolean;
+    isApprover: boolean;
+  };
   projectSlug: string;
   selectedRequester: string | undefined;
   selectedEnvSlug: string | undefined;
 }) => {
   const [isLoading, setIsLoading] = useState<"approved" | "rejected" | null>(null);
+  const [byPassApproval, setByPassApproval] = useState(false);
+  const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
 
   const accessDetails = {
     env: request.environmentName,
@@ -134,10 +141,14 @@ export const ReviewAccessRequestModal = ({
           <div className="space-x-2">
             <Button
               isLoading={isLoading === "approved"}
-              isDisabled={!!isLoading}
+              isDisabled={
+                !!isLoading ||
+                (!request.isApprover && !byPassApproval && isSoftEnforcement)
+              }
               onClick={() => handleReview("approved")}
               className="mt-4"
               size="sm"
+              colorSchema={!request.isApprover && isSoftEnforcement ? "danger" : "primary"}
             >
               Approve Request
             </Button>
@@ -151,6 +162,21 @@ export const ReviewAccessRequestModal = ({
               Reject Request
             </Button>
           </div>
+          {isSoftEnforcement && request.isRequestedByCurrentUser && !request.isApprover && (
+            <div className="mt-4">
+              <Checkbox
+                onCheckedChange={(checked) => setByPassApproval(checked === true)}
+                isChecked={byPassApproval}
+                id="byPassApproval"
+                checkIndicatorBg="text-white"
+                className={byPassApproval ? "bg-red hover:bg-red-600 border-red" : ""}
+              >
+                <span className="text-red text-sm">
+                  Approve without waiting for requirements to be met (bypass policy protection)
+                </span>
+              </Checkbox>
+            </div>
+          )}
         </div>
       </ModalContent>
     </Modal>

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx

@@ -0,0 +1,262 @@
+import { useMemo,useState } from "react";
+import { faCheckCircle,faChevronDown, faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  TProjectPermission,
+  useProjectPermission,
+  useSubscription,
+  useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteAccessApprovalPolicy, useDeleteSecretApprovalPolicy, useGetSecretApprovalPolicies, useGetWorkspaceUsers } from "@app/hooks/api";
+import { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
+import { PolicyType } from "@app/hooks/api/policies/enums";
+import { TAccessApprovalPolicy, Workspace } from "@app/hooks/api/types";
+
+import { AccessPolicyForm } from "./components/AccessPolicyModal";
+import { ApprovalPolicyRow } from "./components/ApprovalPolicyRow";
+
+interface IProps {
+  workspaceId: string;
+}
+
+const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?: Workspace) => {
+  const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies({
+    projectSlug: currentWorkspace?.slug as string,
+    options: {
+      enabled:
+        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
+        !!currentWorkspace?.slug
+    }
+  });
+  const { data: secretPolicies, isLoading: isSecretPoliciesLoading } = useGetSecretApprovalPolicies({
+    workspaceId: currentWorkspace?.id as string,
+    options: {
+      enabled:
+        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
+        !!currentWorkspace?.id
+    }
+  });
+
+  // merge data sorted by updatedAt
+  const policies = [
+    ...(accessPolicies?.map(policy => ({ ...policy, policyType: PolicyType.AccessPolicy })) || []),
+    ...(secretPolicies?.map(policy => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
+  ].sort((a, b) => {
+    return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+  });
+
+  return {
+    policies,
+    isLoading: isAccessPoliciesLoading || isSecretPoliciesLoading
+  };
+};
+
+export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
+  const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
+    "policyForm",
+    "deletePolicy",
+    "upgradePlan"
+  ] as const);
+  const { permission } = useProjectPermission();
+  const { subscription } = useSubscription();
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: members } = useGetWorkspaceUsers(workspaceId);
+  const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(permission, currentWorkspace);
+
+  const [filterType, setFilterType] = useState<string | null>(null);
+
+  const filteredPolicies = useMemo(() => {
+    return filterType
+      ? policies.filter(policy => policy.policyType === filterType)
+      : policies;
+  }, [policies, filterType]);
+
+  const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
+  const { mutateAsync: deleteAccessApprovalPolicy } = useDeleteAccessApprovalPolicy();
+
+  const handleDeletePolicy = async () => {
+    const { id, policyType } = popUp.deletePolicy.data as TAccessApprovalPolicy;
+    if (!currentWorkspace?.slug) return;
+
+    try {
+      if (policyType === PolicyType.ChangePolicy) {
+        await deleteSecretApprovalPolicy({
+          workspaceId,
+          id
+        });
+      } else {
+        await deleteAccessApprovalPolicy({
+          projectSlug: currentWorkspace?.slug,
+          id
+        });
+      }
+      createNotification({
+        type: "success",
+        text: "Successfully deleted policy"
+      });
+      handlePopUpClose("deletePolicy");
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to delete policy"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-6 flex items-end justify-between">
+        <div className="flex flex-col">
+          <span className="text-xl font-semibold text-mineshaft-100">Policies</span>
+          <div className="mt-2 text-sm text-bunker-300">
+            Implement granular policies for access requests and secrets management.
+          </div>
+        </div>
+        <div>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.SecretApproval}
+          >
+            {(isAllowed) => (
+              <Button
+                onClick={() => {
+                  if (subscription && !subscription?.secretApproval) {
+                    handlePopUpOpen("upgradePlan");
+                    return;
+                  }
+                  handlePopUpOpen("policyForm");
+                }}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                isDisabled={!isAllowed}
+              >
+                Create policy
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+      </div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Environment</Th>
+              <Th>Secret Path</Th>
+              <Th>Eligible Approvers</Th>
+              <Th>Approval Required</Th>
+              <Th>
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <Button
+                      variant="plain"
+                      colorSchema="secondary"
+                      className="text-bunker-300 uppercase text-xs font-semibold"
+                      rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
+                    >
+                      Type
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuLabel>Select a type</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      onClick={() => setFilterType(null)}
+                      icon={!filterType && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      All
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => setFilterType(PolicyType.AccessPolicy)}
+                      icon={filterType === PolicyType.AccessPolicy && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      Access Policy
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => setFilterType(PolicyType.ChangePolicy)}
+                      icon={filterType === PolicyType.ChangePolicy && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      Change Policy
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPoliciesLoading && (
+              <TableSkeleton columns={6} innerKey="secret-policies" className="bg-mineshaft-700" />
+            )}
+            {!isPoliciesLoading && !filteredPolicies?.length && (
+              <Tr>
+                <Td colSpan={6}>
+                  <EmptyState title="No policies found" icon={faFileShield} />
+                </Td>
+              </Tr>
+            )}
+            {!!currentWorkspace &&
+              filteredPolicies?.map((policy) => (
+                <ApprovalPolicyRow
+                  projectSlug={currentWorkspace.slug}
+                  policy={policy}
+                  workspaceId={workspaceId}
+                  key={policy.id}
+                  members={members}
+                  onEdit={() => handlePopUpOpen("policyForm", policy)}
+                  onDelete={() => handlePopUpOpen("deletePolicy", policy)}
+                />
+              ))}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <AccessPolicyForm
+        projectSlug={currentWorkspace?.slug!}
+        isOpen={popUp.policyForm.isOpen}
+        onToggle={(isOpen) => handlePopUpToggle("policyForm", isOpen)}
+        members={members}
+        editValues={popUp.policyForm.data as TAccessApprovalPolicy}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deletePolicy.isOpen}
+        deleteKey="remove"
+        title="Do you want to remove this policy?"
+        onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
+        onDeleteApproved={handleDeletePolicy}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can add secret approval policy if you switch to Infisical's Enterprise plan."
+      />
+    </div>
+  );
+};

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -0,0 +1,369 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+	Button,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+	FormControl,
+	Input,
+	Modal,
+	ModalContent,
+	Select,
+	SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { policyDetails } from "@app/helpers/policies";
+import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
+import {
+	useCreateAccessApprovalPolicy,
+	useUpdateAccessApprovalPolicy
+} from "@app/hooks/api/accessApproval";
+import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
+import { TWorkspaceUser } from "@app/hooks/api/users/types";
+
+type Props = {
+	isOpen?: boolean;
+	onToggle: (isOpen: boolean) => void;
+	members?: TWorkspaceUser[];
+	projectSlug: string;
+	editValues?: TAccessApprovalPolicy;
+};
+
+const formSchema = z
+.object({
+	environment: z.string(),
+	name: z.string().optional(),
+	secretPath: z.string().optional(),
+	approvals: z.number().min(1),
+	approvers: z.string().array().min(1),
+	policyType: z.nativeEnum(PolicyType),
+	enforcementLevel: z.nativeEnum(EnforcementLevel)
+})
+.refine((data) => data.approvals <= data.approvers.length, {
+	path: ["approvals"],
+	message: "The number of approvals should be lower than the number of approvers."
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+export const AccessPolicyForm = ({
+	isOpen,
+	onToggle,
+	members = [],
+	projectSlug,
+	editValues
+}: Props) => {
+	const {
+		control,
+		handleSubmit,
+		reset,
+		watch,
+		formState: { isSubmitting }
+	} = useForm<TFormSchema>({
+		resolver: zodResolver(formSchema),
+		values: editValues ? { 
+			...editValues, 
+			environment: editValues.environment.slug, 
+			approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
+		} : undefined
+	});
+	const { currentWorkspace } = useWorkspace();
+	
+	const environments = currentWorkspace?.environments || [];
+	const isEditMode = Boolean(editValues);
+	
+	useEffect(() => {
+		if (!isOpen || !isEditMode) reset({});
+	}, [isOpen, isEditMode]);
+	
+	const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
+	const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
+	
+	const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
+	const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
+
+	const policyName = policyDetails[watch("policyType")]?.name || "Policy";
+	
+	const handleCreatePolicy = async (data: TFormSchema) => {
+		if (!projectSlug) return;
+		
+		try {
+			if (data.policyType === PolicyType.ChangePolicy) {
+				await createSecretApprovalPolicy({
+					...data,
+					workspaceId: currentWorkspace?.id || ""
+				});
+			} else {
+				await createAccessApprovalPolicy({
+					...data,
+					projectSlug
+				});
+			}
+			createNotification({
+				type: "success",
+				text: "Successfully created policy"
+			});
+			onToggle(false);
+		} catch (err) {
+			console.log(err);
+			createNotification({
+				type: "error",
+				text: "Failed to create policy"
+			});
+		}
+	};
+	
+	const handleUpdatePolicy = async (data: TFormSchema) => {
+		if (!projectSlug) return;
+		if (!editValues?.id) return;
+		
+		try {
+			if (data.policyType === PolicyType.ChangePolicy) {
+				await updateSecretApprovalPolicy({
+					id: editValues?.id,
+					...data,
+					workspaceId: currentWorkspace?.id || ""
+				});
+			} else {
+				await updateAccessApprovalPolicy({
+					id: editValues?.id,
+					...data,
+					projectSlug
+				});
+			}
+			createNotification({
+				type: "success",
+				text: "Successfully updated policy"
+			});
+			onToggle(false);
+		} catch (err) {
+			console.log(err);
+			createNotification({
+				type: "error",
+				text: "failed  to update policy"
+			});
+		}
+	};
+	
+	const handleFormSubmit = async (data: TFormSchema) => {
+		if (isEditMode) {
+			await handleUpdatePolicy(data);
+		} else {
+			await handleCreatePolicy(data);
+		}
+	};
+
+	const formatEnforcementLevel = (level: EnforcementLevel) => {
+		if (level === EnforcementLevel.Hard) return "Hard";
+		if (level === EnforcementLevel.Soft) return "Soft";
+		return level;
+	};
+	
+	return (
+		<Modal isOpen={isOpen} onOpenChange={onToggle}>
+			<ModalContent title={isEditMode ? `Edit ${policyName}` : "Create Policy"}>
+				<div className="flex flex-col space-y-3">
+					<form onSubmit={handleSubmit(handleFormSubmit)}>
+						<Controller
+						control={control}
+						name="policyType"
+						defaultValue={PolicyType.ChangePolicy}
+						
+						render={({ field: { value, onChange }, fieldState: { error } }) => (
+							<FormControl
+							label="Policy Type"
+							isRequired
+							isError={Boolean(error)}
+							tooltipText="Change polices govern secret changes within a given environment and secret path. Access polices allow underprivileged user to request access to environment/secret path."
+							errorText={error?.message}
+							>
+							<Select
+							isDisabled={isEditMode}
+							value={value}
+							onValueChange={(val) => onChange(val as PolicyType)}
+							className="w-full border border-mineshaft-500"
+							>
+							{Object.values(PolicyType).map((policyType) => {
+								return (
+									<SelectItem value={policyType} key={`policy-type-${policyType}`}>
+									{policyDetails[policyType].name}
+									</SelectItem>
+								);
+							})}
+							</Select>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="name"
+						render={({ field, fieldState: { error } }) => (
+							<FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
+							<Input {...field} value={field.value || ""} />
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="environment"
+						defaultValue={environments[0]?.slug}
+						render={({ field: { value, onChange }, fieldState: { error } }) => (
+							<FormControl
+							label="Environment"
+							isRequired
+							className="mt-4"
+							isError={Boolean(error)}
+							errorText={error?.message}
+							>
+							<Select
+							isDisabled={isEditMode}
+							value={value}
+							onValueChange={(val) => onChange(val)}
+							className="w-full border border-mineshaft-500"
+							>
+							{environments.map((sourceEnvironment) => (
+								<SelectItem
+								value={sourceEnvironment.slug}
+								key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+								>
+								{sourceEnvironment.name}
+								</SelectItem>
+							))}
+							</Select>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="secretPath"
+						render={({ field, fieldState: { error } }) => (
+							<FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
+							<Input {...field} value={field.value || ""} />
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="approvers"
+						render={({ field: { value, onChange }, fieldState: { error } }) => (
+							<FormControl
+							label="Required Approvers"
+							isRequired
+							isError={Boolean(error)}
+							errorText={error?.message}
+							>
+							<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Input
+								isReadOnly
+								value={value?.length ? `${value.length} selected` : "None"}
+								className="text-left"
+								/>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+							style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+							align="start"
+							>
+							<DropdownMenuLabel>
+							Select members that are allowed to approve requests
+							</DropdownMenuLabel>
+							{members.map(({ id, user }) => {
+								const userId = watch("policyType") === PolicyType.ChangePolicy ? user.id : id;
+								const isChecked = value?.includes(userId);
+								return (
+									<DropdownMenuItem
+									onClick={(evt) => {
+										evt.preventDefault();
+										onChange(
+											isChecked ? value?.filter((el: string) => el !== userId) : [...(value || []), userId]
+										);
+									}}
+									key={`create-policy-members-${userId}`}
+									iconPos="right"
+									icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+									>
+									{user.username}
+									</DropdownMenuItem>
+								);
+							})}
+							</DropdownMenuContent>
+							</DropdownMenu>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="approvals"
+						defaultValue={1}
+						render={({ field, fieldState: { error } }) => (
+							<FormControl
+							label="Minimum Approvals Required"
+							isError={Boolean(error)}
+							errorText={error?.message}
+							>
+							<Input
+							{...field}
+							type="number"
+							min={1}
+							onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
+							/>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="enforcementLevel"
+						defaultValue={EnforcementLevel.Hard}
+						render={({ field, fieldState: { error } }) => (
+							<FormControl
+							label="Enforcement Level"
+							isError={Boolean(error)}
+							errorText={error?.message}
+							tooltipText="Determines the level of enforcement for required approvers of a request"
+							helperText={
+								field.value === EnforcementLevel.Hard
+								? "All approvers must approve the request."
+								: "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies."
+							}
+							>
+								<Select
+								value={field.value}
+								onValueChange={(val) => field.onChange(val as EnforcementLevel)}
+								className="w-full border border-mineshaft-500"
+								>
+									{Object.values(EnforcementLevel).map((level) => {
+										return (
+											<SelectItem value={level} key={`enforcement-level-${level}`} className="text-xs">
+											{formatEnforcementLevel(level)}
+											</SelectItem>
+										);
+									})}
+								</Select>
+							</FormControl>
+						)}
+						/>
+						<div className="mt-8 flex items-center space-x-4">
+							<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+								Save
+							</Button>
+							<Button onClick={() => onToggle(false)} variant="outline_bg">
+								Close
+							</Button>
+						</div>
+					</form>
+				</div>
+			</ModalContent>
+		</Modal>
+	);
+};
+

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import { faCheckCircle, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Input,
+  Td,
+  Tr
+} from "@app/components/v2";
+import { Badge } from "@app/components/v2/Badge";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { policyDetails } from "@app/helpers/policies";
+import { useUpdateAccessApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
+import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
+import { WorkspaceEnv } from "@app/hooks/api/types";
+import { TWorkspaceUser } from "@app/hooks/api/users/types";
+
+interface IPolicy {
+  id: string;
+  name: string;
+  environment: WorkspaceEnv;
+  projectId?: string;
+  secretPath?: string;
+  approvals: number;
+  approvers?: string[];
+  userApprovers?: { userId: string }[];
+  updatedAt: Date;
+  policyType: PolicyType;
+  enforcementLevel: EnforcementLevel;
+};
+
+type Props = {
+  policy: IPolicy;
+  members?: TWorkspaceUser[];
+  projectSlug: string;
+  workspaceId: string;
+  onEdit: () => void;
+  onDelete: () => void;
+};
+
+export const ApprovalPolicyRow = ({
+  policy,
+  members = [],
+  projectSlug,
+  workspaceId,
+  onEdit,
+  onDelete
+}: Props) => {
+  const [selectedApprovers, setSelectedApprovers] = useState<string[]>(policy.userApprovers?.map(({ userId }) => userId) || policy.approvers || []);
+  const { mutate: updateAccessApprovalPolicy, isLoading: isAccessApprovalPolicyLoading } = useUpdateAccessApprovalPolicy();
+  const { mutate: updateSecretApprovalPolicy, isLoading: isSecretApprovalPolicyLoading } = useUpdateSecretApprovalPolicy();
+  const isLoading = isAccessApprovalPolicyLoading || isSecretApprovalPolicyLoading;
+
+  const { permission } = useProjectPermission();
+
+  return (
+    <Tr>
+      <Td>{policy.name}</Td>
+      <Td>{policy.environment.slug}</Td>
+      <Td>{policy.secretPath || "*"}</Td>
+      <Td>
+        <DropdownMenu
+          onOpenChange={(isOpen) => {
+            if (!isOpen) {
+              if (policy.policyType === PolicyType.AccessPolicy) {
+                updateAccessApprovalPolicy(
+                  {
+                    projectSlug,
+                    id: policy.id,
+                    approvers: selectedApprovers
+                  },
+                  { onSettled: () => {} }
+                );
+              } else {
+                updateSecretApprovalPolicy(
+                  {
+                    workspaceId,
+                    id: policy.id,
+                    approvers: selectedApprovers
+                  },
+                  { onSettled: () => {} }
+                );
+              }
+            } else {
+              setSelectedApprovers(policy.policyType === PolicyType.ChangePolicy
+                ? policy?.userApprovers?.map(({ userId }) => userId) || []
+                : policy?.approvers || []
+              );
+            }
+          }}
+      >
+          <DropdownMenuTrigger
+            asChild
+            disabled={
+              isLoading ||
+              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
+            }
+          >
+            <Input
+              isReadOnly
+              value={selectedApprovers.length ? `${selectedApprovers.length} selected` : "None"}
+              className="text-left"
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+            align="start"
+          >
+            <DropdownMenuLabel>
+              Select members that are allowed to approve changes
+            </DropdownMenuLabel>
+            {members?.map(({ id, user }) => {
+              const userId = policy.policyType === PolicyType.ChangePolicy ? user.id : id;
+              const isChecked = selectedApprovers.includes(userId);
+              return (
+                <DropdownMenuItem
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    setSelectedApprovers((state) =>
+                      isChecked ? state.filter((el) => el !== userId) : [...state, userId]
+                    );
+                  }}
+                  key={`create-policy-members-${userId}`}
+                  iconPos="right"
+                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+                >
+                  {user.username}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+      <Td>{policy.approvals}</Td>
+      <Td>
+        <Badge className={policyDetails[policy.policyType].className}>
+          {policyDetails[policy.policyType].name}
+        </Badge>
+      </Td>
+      <Td>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="rounded-lg cursor-pointer">
+            <div className="flex justify-center items-center hover:text-primary-400 data-[state=open]:text-primary-400 hover:scale-125 data-[state=open]:scale-125 transition-transform duration-300 ease-in-out">
+              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="center" className="p-1 min-w-[100%]">
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.SecretApproval}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit();
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Edit Policy
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={ProjectPermissionSub.SecretApproval}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    isAllowed
+                      ? "hover:!bg-red-500 hover:!text-white"
+                      : "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete();
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Delete Policy
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/index.tsx

@@ -0,0 +1 @@
+export { ApprovalPolicyList } from "./ApprovalPolicyList";

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/SecretApprovalPolicyList.tsx

@@ -1,178 +0,0 @@
-import { faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  Modal,
-  ModalContent,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  UpgradePlanModal
-} from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useSubscription
-} from "@app/context";
-import { usePopUp } from "@app/hooks";
-import {
-  useDeleteSecretApprovalPolicy,
-  useGetSecretApprovalPolicies,
-  useGetWorkspaceUsers
-} from "@app/hooks/api";
-import { TSecretApprovalPolicy } from "@app/hooks/api/types";
-
-import { SecretApprovalPolicyRow } from "./components/SecretApprovalPolicyRow";
-import { SecretPolicyForm } from "./components/SecretPolicyForm";
-
-type Props = {
-  workspaceId: string;
-};
-
-export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
-  const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
-    "secretPolicyForm",
-    "deletePolicy",
-    "upgradePlan"
-  ] as const);
-  const { permission } = useProjectPermission();
-  const { subscription } = useSubscription();
-
-  const { data: members } = useGetWorkspaceUsers(workspaceId);
-  const { data: policies, isLoading: isPoliciesLoading } = useGetSecretApprovalPolicies({
-    workspaceId,
-    options: {
-      enabled: permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval)
-    }
-  });
-
-  const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
-
-  const handleDeletePolicy = async () => {
-    const { id } = popUp.deletePolicy.data as TSecretApprovalPolicy;
-    try {
-      await deleteSecretApprovalPolicy({
-        workspaceId,
-        id
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully deleted policy"
-      });
-      handlePopUpClose("deletePolicy");
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed  to delete policy"
-      });
-    }
-  };
-
-  return (
-    <div>
-      <div className="mb-6 flex justify-between">
-        <div className="flex flex-col">
-          <span className="text-xl font-semibold text-mineshaft-100">Approval Policies</span>
-          <div className="mt-2 text-sm text-bunker-300">
-            Implement policies to prevent unauthorized secret changes.
-          </div>
-        </div>
-        <div>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
-            a={ProjectPermissionSub.SecretApproval}
-          >
-            {(isAllowed) => (
-              <Button
-                onClick={() => {
-                  if (subscription && !subscription?.secretApproval) {
-                    handlePopUpOpen("upgradePlan");
-                    return;
-                  }
-                  handlePopUpOpen("secretPolicyForm");
-                }}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                isDisabled={!isAllowed}
-              >
-                Create policy
-              </Button>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </div>
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Name</Th>
-              <Th>Environment</Th>
-              <Th>Secret Path</Th>
-              <Th>Eligible Approvers</Th>
-              <Th>Approval Required</Th>
-            </Tr>
-          </THead>
-          <TBody>
-            {isPoliciesLoading && (
-              <TableSkeleton columns={4} innerKey="secret-policies" className="bg-mineshaft-700" />
-            )}
-            {!isPoliciesLoading && !policies?.length && (
-              <Tr>
-                <Td colSpan={5}>
-                  <EmptyState title="No policies found" icon={faFileShield} />
-                </Td>
-              </Tr>
-            )}
-            {policies?.map((policy) => (
-              <SecretApprovalPolicyRow
-                workspaceId={workspaceId}
-                policy={policy}
-                key={policy.id}
-                members={members}
-                onEdit={() => handlePopUpOpen("secretPolicyForm", policy)}
-                onDelete={() => handlePopUpOpen("deletePolicy", policy)}
-              />
-            ))}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <Modal
-        isOpen={popUp.secretPolicyForm.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
-      >
-        <ModalContent title={popUp.secretPolicyForm.data ? "Edit policy" : "Create policy"}>
-          <SecretPolicyForm
-            workspaceId={workspaceId}
-            isOpen={popUp.secretPolicyForm.isOpen}
-            onToggle={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
-            members={members}
-            editValues={popUp.secretPolicyForm.data as TSecretApprovalPolicy}
-          />
-        </ModalContent>
-      </Modal>
-      <DeleteActionModal
-        isOpen={popUp.deletePolicy.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this polciy?"
-        onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
-        onDeleteApproved={handleDeletePolicy}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add secret approval policy if you switch to Infisical's Enterprise  plan."
-      />
-    </div>
-  );
-};

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretApprovalPolicyRow.tsx

@@ -1,148 +0,0 @@
-import { useState } from "react";
-import { faCheckCircle, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  IconButton,
-  Input,
-  Td,
-  Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
-import { useUpdateSecretApprovalPolicy } from "@app/hooks/api";
-import { TSecretApprovalPolicy } from "@app/hooks/api/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  policy: TSecretApprovalPolicy;
-  members?: TWorkspaceUser[];
-  workspaceId: string;
-  onEdit: () => void;
-  onDelete: () => void;
-};
-
-export const SecretApprovalPolicyRow = ({
-  policy,
-  members = [],
-  workspaceId,
-  onEdit,
-  onDelete
-}: Props) => {
-  const [selectedApprovers, setSelectedApprovers] = useState<string[]>([]);
-  const { mutate: updateSecretApprovalPolicy, isLoading } = useUpdateSecretApprovalPolicy();
-  const { permission } = useProjectPermission();
-
-  return (
-    <Tr>
-      <Td>{policy.name}</Td>
-      <Td>{policy.environment.slug}</Td>
-      <Td>{policy.secretPath || "*"}</Td>
-      <Td>
-        <DropdownMenu
-          onOpenChange={(isOpen) => {
-            if (!isOpen) {
-              updateSecretApprovalPolicy(
-                {
-                  workspaceId,
-                  id: policy.id,
-                  approverUserIds: selectedApprovers
-                },
-                {
-                  onSettled: () => {
-                    setSelectedApprovers([]);
-                  }
-                }
-              );
-            } else {
-              setSelectedApprovers(policy.userApprovers.map(({ userId }) => userId));
-            }
-          }}
-        >
-          <DropdownMenuTrigger
-            asChild
-            disabled={
-              isLoading ||
-              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
-            }
-          >
-            <Input
-              isReadOnly
-              value={
-                policy?.userApprovers.length ? `${policy.userApprovers.length} selected` : "None"
-              }
-              className="text-left"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-            align="start"
-          >
-            <DropdownMenuLabel>
-              Select members that are allowed to approve changes
-            </DropdownMenuLabel>
-            {members?.map(({ user }) => {
-              const isChecked = selectedApprovers.includes(user.id);
-              return (
-                <DropdownMenuItem
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    setSelectedApprovers((state) =>
-                      isChecked ? state.filter((el) => el !== user.id) : [...state, user.id]
-                    );
-                  }}
-                  key={`create-policy-members-${user.id}`}
-                  iconPos="right"
-                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                >
-                  {user.username}
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </Td>
-      <Td>{policy.approvals}</Td>
-      <Td>
-        <div className="flex items-center justify-end space-x-4">
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Edit}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Edit"
-          >
-            {(isAllowed) => (
-              <IconButton variant="plain" ariaLabel="edit" onClick={onEdit} isDisabled={!isAllowed}>
-                <FontAwesomeIcon icon={faPencil} size="lg" />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Delete}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Delete"
-          >
-            {(isAllowed) => (
-              <IconButton
-                variant="plain"
-                colorSchema="danger"
-                size="lg"
-                ariaLabel="edit"
-                onClick={onDelete}
-                isDisabled={!isAllowed}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </Td>
-    </Tr>
-  );
-};

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx

@@ -1,262 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  FormControl,
-  Input,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { SecretPathInput } from "@app/components/v2/SecretPathInput";
-import { useWorkspace } from "@app/context";
-import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
-import { TSecretApprovalPolicy } from "@app/hooks/api/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  isOpen?: boolean;
-  onToggle: (isOpen: boolean) => void;
-  members?: TWorkspaceUser[];
-  workspaceId: string;
-  editValues?: TSecretApprovalPolicy;
-};
-
-const formSchema = z
-  .object({
-    environment: z.string(),
-    name: z.string().optional(),
-    secretPath: z.string().optional().nullable(),
-    approvals: z.number().min(1),
-    approverUserIds: z.string().array().min(1)
-  })
-  .refine((data) => data.approvals <= data.approverUserIds.length, {
-    path: ["approvals"],
-    message: "The number of approvals should be lower than the number of approvers."
-  });
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const SecretPolicyForm = ({
-  onToggle,
-  members = [],
-  workspaceId,
-  editValues
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    watch,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema),
-    values: editValues
-      ? {
-        ...editValues,
-        approverUserIds: editValues.userApprovers.map(({ userId }) => userId),
-        environment: editValues.environment.slug
-      }
-      : undefined
-  });
-  const { currentWorkspace } = useWorkspace();
-  const selectedEnvironment = watch("environment");
-
-  const environments = currentWorkspace?.environments || [];
-
-  const isEditMode = Boolean(editValues);
-
-  const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
-  const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
-
-  const handleCreatePolicy = async (data: TFormSchema) => {
-    try {
-      await createSecretApprovalPolicy({
-        ...data,
-        workspaceId
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully created policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed  to create policy"
-      });
-    }
-  };
-
-  const handleUpdatePolicy = async (data: TFormSchema) => {
-    if (!editValues?.id) return;
-    try {
-      await updateSecretApprovalPolicy({
-        id: editValues?.id,
-        ...data,
-        secretPath: data.secretPath || null,
-        workspaceId
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "failed  to update policy"
-      });
-    }
-  };
-
-  const handleFormSubmit = async (data: TFormSchema) => {
-    if (isEditMode) {
-      await handleUpdatePolicy(data);
-    } else {
-      await handleCreatePolicy(data);
-    }
-  };
-
-  return (
-        <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="environment"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Environment"
-                isRequired
-                className="mt-4"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Select
-                  isDisabled={isEditMode}
-                  value={value}
-                  onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
-                >
-                  {environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-                    >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="secretPath"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <SecretPathInput
-                  {...field}
-                  value={field.value || ""}
-                  environment={selectedEnvironment}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approverUserIds"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Approvers Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Input
-                      isReadOnly
-                      value={value?.length ? `${value.length} selected` : "None"}
-                      className="text-left"
-                    />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-                    align="start"
-                  >
-                    <DropdownMenuLabel>
-                      Select members that are allowed to approve changes
-                    </DropdownMenuLabel>
-                    {members.map(({ user }) => {
-                      const isChecked = value?.includes(user.id);
-                      return (
-                        <DropdownMenuItem
-                          onClick={(evt) => {
-                            evt.preventDefault();
-                            onChange(
-                              isChecked
-                                ? value?.filter((el) => el !== user.id)
-                                : [...(value || []), user.id]
-                            );
-                          }}
-                          key={`create-policy-members-${user.id}`}
-                          iconPos="right"
-                          icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                        >
-                          {user.username}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approvals"
-            defaultValue={1}
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Approvals Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input
-                  {...field}
-                  type="number"
-                  onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center space-x-4">
-            <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-              Save
-            </Button>
-            <Button onClick={() => onToggle(false)} variant="outline_bg">
-              Close
-            </Button>
-          </div>
-        </form>
- 
-  );
-};

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/index.tsx

@@ -1 +0,0 @@
-export { SecretApprovalPolicyList } from "./SecretApprovalPolicyList";

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -1,20 +1,22 @@
+import React, { useState } from "react";
 import {
   faCheck,
   faClose,
+  faLandMineOn,
   faLockOpen,
   faSquareCheck,
   faSquareXmark,
-  faUserLock
-} from "@fortawesome/free-solid-svg-icons";
+  faUserLock} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
-import { Button } from "@app/components/v2";
+import { Button, Checkbox } from "@app/components/v2";
 import {
   usePerformSecretApprovalRequestMerge,
   useUpdateSecretApprovalRequestStatus
 } from "@app/hooks/api";
+import { EnforcementLevel } from "@app/hooks/api/policies/enums";
 
 type Props = {
   approvalRequestId: string;
@@ -25,6 +27,7 @@ type Props = {
   canApprove?: boolean;
   statusChangeByEmail?: string;
   workspaceId: string;
+  enforcementLevel: EnforcementLevel;
 };
 
 export const SecretApprovalRequestAction = ({
@@ -34,7 +37,8 @@ export const SecretApprovalRequestAction = ({
   isMergable,
   approvals,
   statusChangeByEmail,
-  workspaceId,
+  workspaceId,  
+  enforcementLevel,
   canApprove
 }: Props) => {
   const { mutateAsync: performSecretApprovalMerge, isLoading: isMerging } =
@@ -43,6 +47,8 @@ export const SecretApprovalRequestAction = ({
   const { mutateAsync: updateSecretStatusChange, isLoading: isStatusChanging } =
     useUpdateSecretApprovalRequestStatus();
 
+  const [byPassApproval, setByPassApproval] = useState(false);
+
   const handleSecretApprovalRequestMerge = async () => {
     try {
       await performSecretApprovalMerge({
@@ -82,6 +88,8 @@ export const SecretApprovalRequestAction = ({
     }
   };
 
+  const isSoftEnforcement = enforcementLevel === EnforcementLevel.Soft;
+
   if (!hasMerged && status === "open") {
     return (
       <div className="flex w-full items-center justify-between">
@@ -96,10 +104,25 @@ export const SecretApprovalRequestAction = ({
               At least {approvals} approving review required
               {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
             </span>
+            {!canApprove && isSoftEnforcement && (
+              <div className="mt-1">
+                <Checkbox
+                  onCheckedChange={(checked) => setByPassApproval(checked === true)}
+                  isChecked={byPassApproval}
+                  id="byPassApproval"
+                  checkIndicatorBg="text-white"
+                  className={byPassApproval ? "bg-red hover:bg-red-600 border-red" : ""}
+                >
+                  <span className="text-red text-sm">
+                    Merge without waiting for approval (bypass secret change policy)
+                  </span>
+                </Checkbox>
+              </div>
+            )}
           </span>
         </div>
         <div className="flex items-center space-x-2">
-          {canApprove ? (
+          {canApprove || isSoftEnforcement ? (
             <>
               <Button
                 onClick={() => handleSecretApprovalStatusChange("close")}
@@ -111,11 +134,14 @@ export const SecretApprovalRequestAction = ({
                 Close request
               </Button>
               <Button
-                leftIcon={<FontAwesomeIcon icon={faCheck} />}
-                isDisabled={!isMergable}
+                leftIcon={<FontAwesomeIcon icon={!canApprove ? faLandMineOn : faCheck} />}
+                isDisabled={
+                  (!isMergable && canApprove)
+                  || (!canApprove && isSoftEnforcement && !byPassApproval)
+                }
                 isLoading={isMerging}
                 onClick={handleSecretApprovalRequestMerge}
-                colorSchema="primary"
+                colorSchema={isSoftEnforcement && !canApprove ? "danger" : "primary"}
                 variant="solid"
               >
                 Merge

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -252,6 +252,7 @@ export const SecretApprovalRequestChanges = ({
             status={secretApprovalRequestDetails.status}
             isMergable={isMergable}
             statusChangeByEmail={secretApprovalRequestDetails.statusChangedByUser?.email}
+            enforcementLevel={secretApprovalRequestDetails.policy.enforcementLevel}
             workspaceId={workspaceId}
           />
         </div>

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -161,7 +161,6 @@ export const SecretOverviewTableRow = ({
                 secretPath={secretPath}
                 getSecretByKey={getSecretByKey}
               />
-
               <TableContainer>
                 <table className="secret-table">
                   <thead>