Complete preliminary list, update, create group in project

backend/src/@types/fastify.d.ts

@@ -22,6 +22,7 @@ import { TAuthPasswordFactory } from "@app/services/auth/auth-password-service";
 import { TAuthSignupFactory } from "@app/services/auth/auth-signup-service";
 import { ActorAuthMethod, ActorType } from "@app/services/auth/auth-type";
 import { TAuthTokenServiceFactory } from "@app/services/auth-token/auth-token-service";
+import { TGroupProjectServiceFactory } from "@app/services/group-project/group-project-service";
 import { TIdentityServiceFactory } from "@app/services/identity/identity-service";
 import { TIdentityAccessTokenServiceFactory } from "@app/services/identity-access-token/identity-access-token-service";
 import { TIdentityProjectServiceFactory } from "@app/services/identity-project/identity-project-service";
@@ -87,6 +88,7 @@ declare module "fastify" {
       superAdmin: TSuperAdminServiceFactory;
       user: TUserServiceFactory;
       group: TGroupServiceFactory;
+      groupProject: TGroupProjectServiceFactory;
       apiKey: TApiKeyServiceFactory;
       project: TProjectServiceFactory;
       projectMembership: TProjectMembershipServiceFactory;

backend/src/@types/knex.d.ts

@@ -23,6 +23,12 @@ import {
   TGitAppOrg,
   TGitAppOrgInsert,
   TGitAppOrgUpdate,
+  TGroupProjectMembershipRoles,
+  TGroupProjectMembershipRolesInsert,
+  TGroupProjectMembershipRolesUpdate,
+  TGroupProjectMemberships,
+  TGroupProjectMembershipsInsert,
+  TGroupProjectMembershipsUpdate,
   TGroups,
   TGroupsInsert,
   TGroupsUpdate,
@@ -199,6 +205,16 @@ declare module "knex/types/tables" {
       TUserGroupMembershipInsert,
       TUserGroupMembershipUpdate
     >;
+    [TableName.GroupProjectMembership]: Knex.CompositeTableType<
+      TGroupProjectMemberships,
+      TGroupProjectMembershipsInsert,
+      TGroupProjectMembershipsUpdate
+    >;
+    [TableName.GroupProjectMembershipRole]: Knex.CompositeTableType<
+      TGroupProjectMembershipRoles,
+      TGroupProjectMembershipRolesInsert,
+      TGroupProjectMembershipRolesUpdate
+    >;
     [TableName.UserAliases]: Knex.CompositeTableType<TUserAliases, TUserAliasesInsert, TUserAliasesUpdate>;
     [TableName.UserEncryptionKey]: Knex.CompositeTableType<
       TUserEncryptionKeys,

backend/src/db/migrations/20240318183910_group.ts

@@ -33,12 +33,53 @@ export async function up(knex: Knex): Promise<void> {
   }
 
   await createOnUpdateTrigger(knex, TableName.UserGroupMembership);
+
+  if (!(await knex.schema.hasTable(TableName.GroupProjectMembership))) {
+    await knex.schema.createTable(TableName.GroupProjectMembership, (t) => {
+      t.uuid("id", { primaryKey: true }).defaultTo(knex.fn.uuid());
+      t.string("role").notNullable();
+      t.uuid("roleId");
+      t.foreign("roleId").references("id").inTable(TableName.ProjectRoles);
+      t.string("projectId").notNullable();
+      t.foreign("projectId").references("id").inTable(TableName.Project).onDelete("CASCADE");
+      t.uuid("groupId").notNullable();
+      t.foreign("groupId").references("id").inTable(TableName.Groups).onDelete("CASCADE");
+      t.timestamps(true, true, true);
+    });
+  }
+  await createOnUpdateTrigger(knex, TableName.GroupProjectMembership);
+
+  if (!(await knex.schema.hasTable(TableName.GroupProjectMembershipRole))) {
+    await knex.schema.createTable(TableName.GroupProjectMembershipRole, (t) => {
+      t.uuid("id", { primaryKey: true }).defaultTo(knex.fn.uuid());
+      t.string("role").notNullable();
+      t.uuid("projectMembershipId").notNullable();
+      t.foreign("projectMembershipId").references("id").inTable(TableName.GroupProjectMembership).onDelete("CASCADE");
+      // until role is changed/removed the role should not deleted
+      t.uuid("customRoleId");
+      t.foreign("customRoleId").references("id").inTable(TableName.ProjectRoles);
+      t.boolean("isTemporary").notNullable().defaultTo(false);
+      t.string("temporaryMode");
+      t.string("temporaryRange"); // could be cron or relative time like 1H or 1minute etc
+      t.datetime("temporaryAccessStartTime");
+      t.datetime("temporaryAccessEndTime");
+      t.timestamps(true, true, true);
+    });
+  }
+
+  await createOnUpdateTrigger(knex, TableName.GroupProjectMembershipRole);
 }
 
 export async function down(knex: Knex): Promise<void> {
-  await knex.schema.dropTableIfExists(TableName.Groups);
+  await knex.schema.dropTableIfExists(TableName.GroupProjectMembershipRole);
-  await dropOnUpdateTrigger(knex, TableName.Groups);
+  await dropOnUpdateTrigger(knex, TableName.GroupProjectMembershipRole);
 
   await knex.schema.dropTableIfExists(TableName.UserGroupMembership);
   await dropOnUpdateTrigger(knex, TableName.UserGroupMembership);
+
+  await knex.schema.dropTableIfExists(TableName.GroupProjectMembership);
+  await dropOnUpdateTrigger(knex, TableName.GroupProjectMembership);
+
+  await knex.schema.dropTableIfExists(TableName.Groups);
+  await dropOnUpdateTrigger(knex, TableName.Groups);
 }

backend/src/db/schemas/group-project-membership-roles.ts

@@ -0,0 +1,31 @@
+// Code generated by automation script, DO NOT EDIT.
+// Automated by pulling database and generating zod schema
+// To update. Just run npm run generate:schema
+// Written by akhilmhdh.
+
+import { z } from "zod";
+
+import { TImmutableDBKeys } from "./models";
+
+export const GroupProjectMembershipRolesSchema = z.object({
+  id: z.string().uuid(),
+  role: z.string(),
+  projectMembershipId: z.string().uuid(),
+  customRoleId: z.string().uuid().nullable().optional(),
+  isTemporary: z.boolean().default(false),
+  temporaryMode: z.string().nullable().optional(),
+  temporaryRange: z.string().nullable().optional(),
+  temporaryAccessStartTime: z.date().nullable().optional(),
+  temporaryAccessEndTime: z.date().nullable().optional(),
+  createdAt: z.date(),
+  updatedAt: z.date()
+});
+
+export type TGroupProjectMembershipRoles = z.infer<typeof GroupProjectMembershipRolesSchema>;
+export type TGroupProjectMembershipRolesInsert = Omit<
+  z.input<typeof GroupProjectMembershipRolesSchema>,
+  TImmutableDBKeys
+>;
+export type TGroupProjectMembershipRolesUpdate = Partial<
+  Omit<z.input<typeof GroupProjectMembershipRolesSchema>, TImmutableDBKeys>
+>;

backend/src/db/schemas/group-project-memberships.ts

@@ -0,0 +1,24 @@
+// Code generated by automation script, DO NOT EDIT.
+// Automated by pulling database and generating zod schema
+// To update. Just run npm run generate:schema
+// Written by akhilmhdh.
+
+import { z } from "zod";
+
+import { TImmutableDBKeys } from "./models";
+
+export const GroupProjectMembershipsSchema = z.object({
+  id: z.string().uuid(),
+  role: z.string(),
+  roleId: z.string().uuid().nullable().optional(),
+  projectId: z.string(),
+  groupId: z.string().uuid(),
+  createdAt: z.date(),
+  updatedAt: z.date()
+});
+
+export type TGroupProjectMemberships = z.infer<typeof GroupProjectMembershipsSchema>;
+export type TGroupProjectMembershipsInsert = Omit<z.input<typeof GroupProjectMembershipsSchema>, TImmutableDBKeys>;
+export type TGroupProjectMembershipsUpdate = Partial<
+  Omit<z.input<typeof GroupProjectMembershipsSchema>, TImmutableDBKeys>
+>;

backend/src/db/schemas/index.ts

@@ -5,6 +5,8 @@ export * from "./auth-tokens";
 export * from "./backup-private-key";
 export * from "./git-app-install-sessions";
 export * from "./git-app-org";
+export * from "./group-project-membership-roles";
+export * from "./group-project-memberships";
 export * from "./groups";
 export * from "./identities";
 export * from "./identity-access-tokens";

backend/src/db/schemas/models.ts

@@ -3,6 +3,8 @@ import { z } from "zod";
 export enum TableName {
   Users = "users",
   Groups = "groups",
+  GroupProjectMembership = "group_project_memberships",
+  GroupProjectMembershipRole = "group_project_membership_roles",
   UserGroupMembership = "user_group_membership",
   UserAliases = "user_aliases",
   UserEncryptionKey = "user_encryption_keys",

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

@@ -94,10 +94,9 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
     }
   });
 
-  // TODO: GET users part of group
   server.route({
     method: "GET",
-    url: "/:slug/users", // TODO: revise to users?
+    url: "/:slug/users",
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
       params: z.object({
@@ -120,8 +119,8 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
       }
     },
     handler: async (req) => {
-      const users = await server.services.group.getGroupUserMemberships({
+      const users = await server.services.group.listGroupUsers({
-        slug: req.params.slug,
+        groupSlug: req.params.slug,
         actor: req.permission.type,
         actorId: req.permission.id,
         orgId: req.permission.orgId as string,
@@ -134,20 +133,26 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
 
   server.route({
     method: "POST",
-    url: "/:groupSlug/users/:username",
+    url: "/:slug/users/:username",
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
       params: z.object({
-        groupSlug: z.string().trim(),
+        slug: z.string().trim(),
         username: z.string().trim()
       }),
       response: {
-        200: z.object({})
+        200: UsersSchema.pick({
+          email: true,
+          username: true,
+          firstName: true,
+          lastName: true,
+          id: true
+        })
       }
     },
     handler: async (req) => {
-      await server.services.group.createGroupUserMemberships({
+      const user = await server.services.group.addUserToGroup({
-        groupSlug: req.params.groupSlug,
+        groupSlug: req.params.slug,
         username: req.params.username,
         actor: req.permission.type,
         actorId: req.permission.id,
@@ -155,26 +160,33 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
         actorAuthMethod: req.permission.authMethod,
         actorOrgId: req.permission.orgId
       });
-      return {};
+
+      return user;
     }
   });
 
   server.route({
     method: "DELETE",
-    url: "/:groupSlug/users/:username",
+    url: "/:slug/users/:username",
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
       params: z.object({
-        groupSlug: z.string().trim(),
+        slug: z.string().trim(),
         username: z.string().trim()
       }),
       response: {
-        200: z.object({})
+        200: UsersSchema.pick({
+          email: true,
+          username: true,
+          firstName: true,
+          lastName: true,
+          id: true
+        })
       }
     },
     handler: async (req) => {
-      await server.services.group.deleteGroupUserMemberships({
+      const user = await server.services.group.removeUserFromGroup({
-        groupSlug: req.params.groupSlug,
+        groupSlug: req.params.slug,
         username: req.params.username,
         actor: req.permission.type,
         actorId: req.permission.id,
@@ -182,7 +194,8 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
         actorAuthMethod: req.permission.authMethod,
         actorOrgId: req.permission.orgId
       });
-      return {};
+
+      return user;
     }
   });
 };

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

@@ -154,8 +154,8 @@ export const groupServiceFactory = ({
     return group;
   };
 
-  const getGroupUserMemberships = async ({
+  const listGroupUsers = async ({
-    slug,
+    groupSlug,
     actor,
     actorId,
     orgId,
@@ -167,19 +167,19 @@ export const groupServiceFactory = ({
 
     const group = await groupDAL.findOne({
       orgId,
-      slug
+      slug: groupSlug
     });
 
     if (!group)
       throw new BadRequestError({
-        message: `Failed to find group with slug ${slug}`
+        message: `Failed to find group with slug ${groupSlug}`
       });
 
     const users = await groupDAL.findAllGroupMembers(group.orgId, group.id);
     return users;
   };
 
-  const createGroupUserMemberships = async ({
+  const addUserToGroup = async ({
     groupSlug,
     username,
     actor,
@@ -241,15 +241,15 @@ export const groupServiceFactory = ({
         message: `User ${username} is not part of the organization`
       });
 
-    const t = await userGroupMembershipDAL.create({
+    await userGroupMembershipDAL.create({
       userId: user.id,
       groupId: group.id
     });
 
-    return t;
+    return user;
   };
 
-  const deleteGroupUserMemberships = async ({
+  const removeUserFromGroup = async ({
     groupSlug,
     username,
     actor,
@@ -279,7 +279,6 @@ export const groupServiceFactory = ({
     if (!hasRequiredPriviledges)
       throw new ForbiddenRequestError({ message: "Failed to delete user from more privileged group" });
 
-    // get user with username
     const user = await userDAL.findOne({
       username
     });
@@ -300,20 +299,20 @@ export const groupServiceFactory = ({
         message: `User ${username} is not part of the group ${groupSlug}`
       });
 
-    const t = await userGroupMembershipDAL.delete({
+    await userGroupMembershipDAL.delete({
       groupId: group.id,
       userId: user.id
     });
 
-    return t;
+    return user;
   };
 
   return {
     createGroup,
     updateGroup,
     deleteGroup,
-    getGroupUserMemberships,
+    listGroupUsers,
-    createGroupUserMemberships,
+    addUserToGroup,
-    deleteGroupUserMemberships
+    removeUserFromGroup
   };
 };

backend/src/ee/services/group/group-types.ts

@@ -20,7 +20,7 @@ export type TDeleteGroupDTO = {
 } & TOrgPermission;
 
 export type TGetGroupUserMembershipsDTO = {
-  slug: string;
+  groupSlug: string;
 } & TOrgPermission;
 
 export type TCreateGroupUserMembershipDTO = {

backend/src/ee/services/permission/project-permission.ts

@@ -12,6 +12,7 @@ export enum ProjectPermissionActions {
 export enum ProjectPermissionSub {
   Role = "role",
   Member = "member",
+  Groups = "groups",
   Settings = "settings",
   Integrations = "integrations",
   Webhooks = "webhooks",
@@ -41,6 +42,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.Role]
   | [ProjectPermissionActions, ProjectPermissionSub.Tags]
   | [ProjectPermissionActions, ProjectPermissionSub.Member]
+  | [ProjectPermissionActions, ProjectPermissionSub.Groups]
   | [ProjectPermissionActions, ProjectPermissionSub.Integrations]
   | [ProjectPermissionActions, ProjectPermissionSub.Webhooks]
   | [ProjectPermissionActions, ProjectPermissionSub.AuditLogs]
@@ -82,6 +84,11 @@ const buildAdminPermissionRules = () => {
   can(ProjectPermissionActions.Edit, ProjectPermissionSub.Member);
   can(ProjectPermissionActions.Delete, ProjectPermissionSub.Member);
 
+  can(ProjectPermissionActions.Read, ProjectPermissionSub.Groups);
+  can(ProjectPermissionActions.Create, ProjectPermissionSub.Groups);
+  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Groups);
+  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Groups);
+
   can(ProjectPermissionActions.Read, ProjectPermissionSub.Role);
   can(ProjectPermissionActions.Create, ProjectPermissionSub.Role);
   can(ProjectPermissionActions.Edit, ProjectPermissionSub.Role);
@@ -157,6 +164,8 @@ const buildMemberPermissionRules = () => {
   can(ProjectPermissionActions.Read, ProjectPermissionSub.Member);
   can(ProjectPermissionActions.Create, ProjectPermissionSub.Member);
 
+  can(ProjectPermissionActions.Read, ProjectPermissionSub.Groups);
+
   can(ProjectPermissionActions.Read, ProjectPermissionSub.Integrations);
   can(ProjectPermissionActions.Create, ProjectPermissionSub.Integrations);
   can(ProjectPermissionActions.Edit, ProjectPermissionSub.Integrations);

backend/src/server/routes/index.ts

@@ -50,6 +50,9 @@ import { authPaswordServiceFactory } from "@app/services/auth/auth-password-serv
 import { authSignupServiceFactory } from "@app/services/auth/auth-signup-service";
 import { tokenDALFactory } from "@app/services/auth-token/auth-token-dal";
 import { tokenServiceFactory } from "@app/services/auth-token/auth-token-service";
+import { groupProjectDALFactory } from "@app/services/group-project/group-project-dal";
+import { groupProjectMembershipRoleDALFactory } from "@app/services/group-project/group-project-membership-role-dal";
+import { groupProjectServiceFactory } from "@app/services/group-project/group-project-service";
 import { identityDALFactory } from "@app/services/identity/identity-dal";
 import { identityOrgDALFactory } from "@app/services/identity/identity-org-dal";
 import { identityServiceFactory } from "@app/services/identity/identity-service";
@@ -198,6 +201,8 @@ export const registerRoutes = async (
   const gitAppInstallSessionDAL = gitAppInstallSessionDALFactory(db);
   const gitAppOrgDAL = gitAppDALFactory(db);
   const groupDAL = groupDALFactory(db);
+  const groupProjectDAL = groupProjectDALFactory(db);
+  const groupProjectMembershipRoleDAL = groupProjectMembershipRoleDALFactory(db);
   const userGroupMembershipDAL = userGroupMembershipDALFactory(db);
   const secretScanningDAL = secretScanningDALFactory(db);
   const licenseDAL = licenseDALFactory(db);
@@ -247,6 +252,14 @@ export const registerRoutes = async (
     permissionService,
     licenseService
   });
+  const groupProjectService = groupProjectServiceFactory({
+    groupDAL,
+    groupProjectDAL,
+    groupProjectMembershipRoleDAL,
+    projectDAL,
+    projectRoleDAL,
+    permissionService
+  });
   const scimService = scimServiceFactory({
     licenseService,
     scimDAL,
@@ -579,6 +592,7 @@ export const registerRoutes = async (
     signup: signupService,
     user: userService,
     group: groupService,
+    groupProject: groupProjectService,
     permission: permissionService,
     org: orgService,
     orgRole: orgRoleService,

backend/src/server/routes/v2/group-project-router.ts

@@ -0,0 +1,189 @@
+import ms from "ms";
+import { z } from "zod";
+
+import {
+  GroupProjectMembershipsSchema,
+  GroupsSchema,
+  ProjectMembershipRole,
+  ProjectUserMembershipRolesSchema
+} from "@app/db/schemas";
+import { PROJECTS } from "@app/lib/api-docs";
+import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
+import { AuthMode } from "@app/services/auth/auth-type";
+import { ProjectUserMembershipTemporaryMode } from "@app/services/project-membership/project-membership-types";
+
+export const registerGroupProjectRouter = async (server: FastifyZodProvider) => {
+  server.route({
+    method: "POST",
+    url: "/:projectId/group-memberships/:groupSlug",
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      params: z.object({
+        projectId: z.string().trim(),
+        groupSlug: z.string().trim()
+      }),
+      body: z.object({
+        role: z.string().trim().min(1).default(ProjectMembershipRole.NoAccess)
+      }),
+      response: {
+        200: z.object({
+          groupMembership: GroupProjectMembershipsSchema
+        })
+      }
+    },
+    handler: async (req) => {
+      const groupMembership = await server.services.groupProject.createProjectGroup({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        groupSlug: req.params.groupSlug,
+        projectId: req.params.projectId,
+        role: req.body.role
+      });
+      return { groupMembership };
+    }
+  });
+
+  server.route({
+    method: "PATCH",
+    url: "/:projectId/group-memberships/:groupSlug",
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      description: "Update project group memberships",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        projectId: z.string().trim(),
+        groupSlug: z.string().trim()
+      }),
+      body: z.object({
+        roles: z
+          .array(
+            z.union([
+              z.object({
+                role: z.string(),
+                isTemporary: z.literal(false).default(false)
+              }),
+              z.object({
+                role: z.string(),
+                isTemporary: z.literal(true),
+                temporaryMode: z.nativeEnum(ProjectUserMembershipTemporaryMode),
+                temporaryRange: z.string().refine((val) => ms(val) > 0, "Temporary range must be a positive number"),
+                temporaryAccessStartTime: z.string().datetime()
+              })
+            ])
+          )
+          .min(1)
+      }),
+      response: {
+        200: z.object({
+          roles: ProjectUserMembershipRolesSchema.array()
+        })
+      }
+    },
+    handler: async (req) => {
+      const roles = await server.services.groupProject.updateProjectGroup({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        groupSlug: req.params.groupSlug,
+        projectId: req.params.projectId,
+        roles: req.body.roles
+      });
+      return { roles };
+    }
+  });
+
+  server.route({
+    method: "DELETE",
+    url: "/:projectId/group-memberships/:groupSlug",
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      description: "Delete project group memberships",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        projectId: z.string().trim().describe(PROJECTS.DELETE_IDENTITY_MEMBERSHIP.projectId),
+        groupSlug: z.string().trim().describe(PROJECTS.DELETE_IDENTITY_MEMBERSHIP.identityId)
+      }),
+      response: {
+        200: z.object({
+          groupMembership: GroupProjectMembershipsSchema
+        })
+      }
+    },
+    handler: async (req) => {
+      const groupMembership = await server.services.groupProject.deleteProjectGroup({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        groupSlug: req.params.groupSlug,
+        projectId: req.params.projectId
+      });
+      return { groupMembership };
+    }
+  });
+
+  server.route({
+    method: "GET",
+    url: "/:projectId/group-memberships",
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      description: "Return project group memberships",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        projectId: z.string().trim().describe(PROJECTS.LIST_IDENTITY_MEMBERSHIPS.projectId)
+      }),
+      response: {
+        200: z.object({
+          groupMemberships: z
+            .object({
+              id: z.string(),
+              groupId: z.string(),
+              createdAt: z.date(),
+              updatedAt: z.date(),
+              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()
+                })
+              ),
+              group: GroupsSchema.pick({ name: true, id: true, slug: true })
+            })
+            .array()
+        })
+      }
+    },
+    handler: async (req) => {
+      const groupMemberships = await server.services.groupProject.listProjectGroup({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        projectId: req.params.projectId
+      });
+      return { groupMemberships };
+    }
+  });
+};

backend/src/server/routes/v2/index.ts

@@ -1,3 +1,4 @@
+import { registerGroupProjectRouter } from "./group-project-router";
 import { registerIdentityOrgRouter } from "./identity-org-router";
 import { registerIdentityProjectRouter } from "./identity-project-router";
 import { registerMfaRouter } from "./mfa-router";
@@ -22,6 +23,7 @@ export const registerV2Routes = async (server: FastifyZodProvider) => {
     async (projectServer) => {
       await projectServer.register(registerProjectRouter);
       await projectServer.register(registerIdentityProjectRouter);
+      await projectServer.register(registerGroupProjectRouter);
       await projectServer.register(registerProjectMembershipRouter);
     },
     { prefix: "/workspace" }

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

@@ -0,0 +1,99 @@
+import { Knex } from "knex";
+
+import { TDbClient } from "@app/db";
+import { TableName } from "@app/db/schemas";
+import { DatabaseError } from "@app/lib/errors";
+import { ormify, sqlNestRelationships } from "@app/lib/knex";
+
+export type TGroupProjectDALFactory = ReturnType<typeof groupProjectDALFactory>;
+
+export const groupProjectDALFactory = (db: TDbClient) => {
+  const groupProjectOrm = ormify(db, TableName.GroupProjectMembership);
+
+  const findByProjectId = async (projectId: string, tx?: Knex) => {
+    try {
+      const docs = await (tx || db)(TableName.GroupProjectMembership)
+        .where(`${TableName.GroupProjectMembership}.projectId`, projectId)
+        .join(TableName.Groups, `${TableName.GroupProjectMembership}.groupId`, `${TableName.Groups}.id`)
+        .join(
+          TableName.GroupProjectMembershipRole,
+          `${TableName.GroupProjectMembershipRole}.projectMembershipId`,
+          `${TableName.GroupProjectMembership}.id`
+        )
+        .leftJoin(
+          TableName.ProjectRoles,
+          `${TableName.GroupProjectMembershipRole}.customRoleId`,
+          `${TableName.ProjectRoles}.id`
+        )
+        .select(
+          db.ref("id").withSchema(TableName.GroupProjectMembership),
+          db.ref("createdAt").withSchema(TableName.GroupProjectMembership),
+          db.ref("updatedAt").withSchema(TableName.GroupProjectMembership),
+          db.ref("id").as("groupId").withSchema(TableName.Groups),
+          db.ref("name").as("groupName").withSchema(TableName.Groups),
+          db.ref("slug").as("groupSlug").withSchema(TableName.Groups),
+          db.ref("id").withSchema(TableName.GroupProjectMembership),
+          db.ref("role").withSchema(TableName.GroupProjectMembershipRole),
+          db.ref("id").withSchema(TableName.GroupProjectMembershipRole).as("membershipRoleId"),
+          db.ref("customRoleId").withSchema(TableName.GroupProjectMembershipRole),
+          db.ref("name").withSchema(TableName.ProjectRoles).as("customRoleName"),
+          db.ref("slug").withSchema(TableName.ProjectRoles).as("customRoleSlug"),
+          db.ref("temporaryMode").withSchema(TableName.GroupProjectMembershipRole),
+          db.ref("isTemporary").withSchema(TableName.GroupProjectMembershipRole),
+          db.ref("temporaryRange").withSchema(TableName.GroupProjectMembershipRole),
+          db.ref("temporaryAccessStartTime").withSchema(TableName.GroupProjectMembershipRole),
+          db.ref("temporaryAccessEndTime").withSchema(TableName.GroupProjectMembershipRole)
+        );
+
+      const members = sqlNestRelationships({
+        data: docs,
+        parentMapper: ({ groupId, groupName, groupSlug, id, createdAt, updatedAt }) => ({
+          id,
+          groupId,
+          createdAt,
+          updatedAt,
+          group: {
+            id: groupId,
+            name: groupName,
+            slug: groupSlug
+          }
+        }),
+        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: "FindByProjectId" });
+    }
+  };
+
+  return { ...groupProjectOrm, findByProjectId };
+};

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

@@ -0,0 +1,10 @@
+import { TDbClient } from "@app/db";
+import { TableName } from "@app/db/schemas";
+import { ormify } from "@app/lib/knex";
+
+export type TGroupProjectMembershipRoleDALFactory = ReturnType<typeof groupProjectMembershipRoleDALFactory>;
+
+export const groupProjectMembershipRoleDALFactory = (db: TDbClient) => {
+  const orm = ormify(db, TableName.GroupProjectMembershipRole);
+  return orm;
+};

backend/src/services/group-project/group-project-service.ts

@@ -0,0 +1,242 @@
+import { ForbiddenError } from "@casl/ability";
+import ms from "ms";
+
+import { ProjectMembershipRole } from "@app/db/schemas";
+import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/ee/services/permission/project-permission";
+import { isAtLeastAsPrivileged } from "@app/lib/casl";
+import { BadRequestError, ForbiddenRequestError } from "@app/lib/errors";
+import { groupBy } from "@app/lib/fn";
+
+import { TGroupDALFactory } from "../../ee/services/group/group-dal";
+import { TProjectDALFactory } from "../project/project-dal";
+import { ProjectUserMembershipTemporaryMode } from "../project-membership/project-membership-types";
+import { TProjectRoleDALFactory } from "../project-role/project-role-dal";
+import { TGroupProjectDALFactory } from "./group-project-dal";
+import { TGroupProjectMembershipRoleDALFactory } from "./group-project-membership-role-dal";
+import {
+  TCreateProjectGroupDTO,
+  TDeleteProjectGroupDTO,
+  TListProjectGroupDTO,
+  TUpdateProjectGroupDTO
+} from "./group-project-types";
+
+type TGroupProjectServiceFactoryDep = {
+  groupProjectDAL: TGroupProjectDALFactory;
+  groupProjectMembershipRoleDAL: Pick<
+    TGroupProjectMembershipRoleDALFactory,
+    "create" | "transaction" | "insertMany" | "delete"
+  >;
+  projectDAL: TProjectDALFactory;
+  projectRoleDAL: Pick<TProjectRoleDALFactory, "find">;
+  groupDAL: Pick<TGroupDALFactory, "findOne">;
+  permissionService: Pick<TPermissionServiceFactory, "getProjectPermission" | "getProjectPermissionByRole">;
+};
+
+export type TGroupProjectServiceFactory = ReturnType<typeof groupProjectServiceFactory>;
+
+export const groupProjectServiceFactory = ({
+  groupDAL,
+  groupProjectDAL,
+  groupProjectMembershipRoleDAL,
+  projectDAL,
+  projectRoleDAL,
+  permissionService
+}: TGroupProjectServiceFactoryDep) => {
+  const createProjectGroup = async ({
+    groupSlug,
+    actor,
+    actorId,
+    actorOrgId,
+    actorAuthMethod,
+    projectId,
+    role
+  }: TCreateProjectGroupDTO) => {
+    const { permission } = await permissionService.getProjectPermission(
+      actor,
+      actorId,
+      projectId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Create, ProjectPermissionSub.Groups);
+
+    const group = await groupDAL.findOne({ orgId: actorOrgId, slug: groupSlug });
+    if (!group) throw new BadRequestError({ message: `Failed to find group with slug ${groupSlug}` });
+
+    const existingGroup = await groupProjectDAL.findOne({ groupId: group.id, projectId });
+    if (existingGroup)
+      throw new BadRequestError({
+        message: `Group with slug ${groupSlug} already exists in project with id ${projectId}`
+      });
+
+    const project = await projectDAL.findById(projectId);
+
+    const { permission: rolePermission, role: customRole } = await permissionService.getProjectPermissionByRole(
+      role,
+      project.id
+    );
+    const hasPriviledge = isAtLeastAsPrivileged(permission, rolePermission);
+    if (!hasPriviledge)
+      throw new ForbiddenRequestError({
+        message: "Failed to add group to project with more privileged role"
+      });
+    const isCustomRole = Boolean(customRole);
+
+    const projectGroup = await groupProjectDAL.transaction(async (tx) => {
+      const groupProjectMembership = await groupProjectDAL.create(
+        {
+          groupId: group.id,
+          projectId: project.id,
+          role: isCustomRole ? ProjectMembershipRole.Custom : role,
+          roleId: customRole?.id
+        },
+        tx
+      );
+
+      await groupProjectMembershipRoleDAL.create(
+        {
+          projectMembershipId: groupProjectMembership.id,
+          role: isCustomRole ? ProjectMembershipRole.Custom : role,
+          customRoleId: customRole?.id
+        },
+        tx
+      );
+      return groupProjectMembership;
+    });
+    return projectGroup;
+  };
+
+  const updateProjectGroup = async ({
+    projectId,
+    groupSlug,
+    roles,
+    actor,
+    actorId,
+    actorAuthMethod,
+    actorOrgId
+  }: TUpdateProjectGroupDTO) => {
+    const { permission } = await permissionService.getProjectPermission(
+      actor,
+      actorId,
+      projectId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Edit, ProjectPermissionSub.Groups);
+
+    const group = await groupDAL.findOne({ orgId: actorOrgId, slug: groupSlug });
+    if (!group) throw new BadRequestError({ message: `Failed to find group with slug ${groupSlug}` });
+
+    const projectGroup = await groupProjectDAL.findOne({ groupId: group.id, projectId });
+    if (!projectGroup) throw new BadRequestError({ message: `Failed to find group with slug ${groupSlug}` });
+
+    const { permission: groupRolePermission } = await permissionService.getProjectPermissionByRole(
+      projectGroup.role,
+      projectId
+    );
+
+    const hasRequiredPriviledges = isAtLeastAsPrivileged(permission, groupRolePermission);
+    if (!hasRequiredPriviledges) throw new ForbiddenRequestError({ message: "Failed to delete more privileged group" });
+
+    // validate custom roles input
+    const customInputRoles = roles.filter(
+      ({ role }) => !Object.values(ProjectMembershipRole).includes(role as ProjectMembershipRole)
+    );
+    const hasCustomRole = Boolean(customInputRoles.length);
+    const customRoles = hasCustomRole
+      ? await projectRoleDAL.find({
+          projectId,
+          $in: { slug: customInputRoles.map(({ role }) => role) }
+        })
+      : [];
+    if (customRoles.length !== customInputRoles.length) throw new BadRequestError({ message: "Custom role not found" });
+
+    const customRolesGroupBySlug = groupBy(customRoles, ({ slug }) => slug);
+
+    const santiziedProjectMembershipRoles = roles.map((inputRole) => {
+      const isCustomRole = Boolean(customRolesGroupBySlug?.[inputRole.role]?.[0]);
+      if (!inputRole.isTemporary) {
+        return {
+          projectMembershipId: projectGroup.id,
+          role: isCustomRole ? ProjectMembershipRole.Custom : inputRole.role,
+          customRoleId: customRolesGroupBySlug[inputRole.role] ? customRolesGroupBySlug[inputRole.role][0].id : null
+        };
+      }
+
+      // check cron or relative here later for now its just relative
+      const relativeTimeInMs = ms(inputRole.temporaryRange);
+      return {
+        projectMembershipId: projectGroup.id,
+        role: isCustomRole ? ProjectMembershipRole.Custom : inputRole.role,
+        customRoleId: customRolesGroupBySlug[inputRole.role] ? customRolesGroupBySlug[inputRole.role][0].id : null,
+        isTemporary: true,
+        temporaryMode: ProjectUserMembershipTemporaryMode.Relative,
+        temporaryRange: inputRole.temporaryRange,
+        temporaryAccessStartTime: new Date(inputRole.temporaryAccessStartTime),
+        temporaryAccessEndTime: new Date(new Date(inputRole.temporaryAccessStartTime).getTime() + relativeTimeInMs)
+      };
+    });
+
+    const updatedRoles = await groupProjectMembershipRoleDAL.transaction(async (tx) => {
+      await groupProjectMembershipRoleDAL.delete({ projectMembershipId: projectGroup.id }, tx);
+      return groupProjectMembershipRoleDAL.insertMany(santiziedProjectMembershipRoles, tx);
+    });
+
+    return updatedRoles;
+  };
+
+  const deleteProjectGroup = async ({
+    groupSlug,
+    actorId,
+    actor,
+    actorOrgId,
+    actorAuthMethod,
+    projectId
+  }: TDeleteProjectGroupDTO) => {
+    const group = await groupDAL.findOne({ orgId: actorOrgId, slug: groupSlug });
+    if (!group) throw new BadRequestError({ message: `Failed to find group with slug ${groupSlug}` });
+
+    const groupProjectMembership = await groupProjectDAL.findOne({ groupId: group.id, projectId });
+    if (!groupProjectMembership) throw new BadRequestError({ message: `Failed to find group with slug ${groupSlug}` });
+
+    const { permission } = await permissionService.getProjectPermission(
+      actor,
+      actorId,
+      projectId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Delete, ProjectPermissionSub.Groups);
+    const { permission: groupRolePermission } = await permissionService.getProjectPermissionByRole(
+      groupProjectMembership.role,
+      projectId
+    );
+    const hasRequiredPriviledges = isAtLeastAsPrivileged(permission, groupRolePermission);
+    if (!hasRequiredPriviledges) throw new ForbiddenRequestError({ message: "Failed to delete more privileged group" });
+
+    const [deletedGroup] = await groupProjectDAL.delete({ groupId: group.id, projectId });
+    return deletedGroup;
+  };
+
+  const listProjectGroup = async ({ projectId, actor, actorId, actorAuthMethod, actorOrgId }: TListProjectGroupDTO) => {
+    const { permission } = await permissionService.getProjectPermission(
+      actor,
+      actorId,
+      projectId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Groups);
+
+    const groupMemberhips = await groupProjectDAL.findByProjectId(projectId);
+    return groupMemberhips;
+  };
+
+  return {
+    createProjectGroup,
+    updateProjectGroup,
+    deleteProjectGroup,
+    listProjectGroup
+  };
+};

backend/src/services/group-project/group-project-types.ts

@@ -0,0 +1,31 @@
+import { TProjectPermission } from "@app/lib/types";
+
+import { ProjectUserMembershipTemporaryMode } from "../project-membership/project-membership-types";
+
+export type TCreateProjectGroupDTO = {
+  groupSlug: string;
+  role: string;
+} & TProjectPermission;
+
+export type TUpdateProjectGroupDTO = {
+  roles: (
+    | {
+        role: string;
+        isTemporary?: false;
+      }
+    | {
+        role: string;
+        isTemporary: true;
+        temporaryMode: ProjectUserMembershipTemporaryMode.Relative;
+        temporaryRange: string;
+        temporaryAccessStartTime: string;
+      }
+  )[];
+  groupSlug: string;
+} & TProjectPermission;
+
+export type TDeleteProjectGroupDTO = {
+  groupSlug: string;
+} & TProjectPermission;
+
+export type TListProjectGroupDTO = TProjectPermission;

backend/src/services/identity-project/identity-project-service.ts

@@ -226,7 +226,7 @@ export const identityProjectServiceFactory = ({
     if (!hasRequiredPriviledges)
       throw new ForbiddenRequestError({ message: "Failed to delete more privileged identity" });
 
-    const [deletedIdentity] = await identityProjectDAL.delete({ identityId });
+    const [deletedIdentity] = await identityProjectDAL.delete({ identityId }); // TODO: fix
     return deletedIdentity;
   };
 

frontend/src/context/ProjectPermissionContext/types.ts

@@ -10,6 +10,7 @@ export enum ProjectPermissionActions {
 export enum ProjectPermissionSub {
   Role = "role",
   Member = "member",
+  Groups = "groups",
   Settings = "settings",
   Integrations = "integrations",
   Webhooks = "webhooks",
@@ -39,6 +40,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.Role]
   | [ProjectPermissionActions, ProjectPermissionSub.Tags]
   | [ProjectPermissionActions, ProjectPermissionSub.Member]
+  | [ProjectPermissionActions, ProjectPermissionSub.Groups]
   | [ProjectPermissionActions, ProjectPermissionSub.Integrations]
   | [ProjectPermissionActions, ProjectPermissionSub.Webhooks]
   | [ProjectPermissionActions, ProjectPermissionSub.AuditLogs]

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

@@ -1,5 +1,7 @@
 import { TOrgRole } from "../roles/types";
 
+// TODO: rectify/standardize types
+
 export type TGroupOrgMembership = TGroup & {
   customRole?: TOrgRole;
 }
@@ -12,4 +14,23 @@ export type TGroup = {
   createAt: string;
   updatedAt: string;
   role: string;
+};
+
+export type TGroupMembership = {
+  id: string;
+  group: TGroup;
+  roles: {
+    id: string;
+    role: "owner" | "admin" | "member" | "no-access" | "custom";
+    customRoleId: string;
+    customRoleName: string;
+    customRoleSlug: string;
+    isTemporary: boolean;
+    temporaryMode: string | null;
+    temporaryRange: string | null;
+    temporaryAccessStartTime: string | null;
+    temporaryAccessEndTime: string | null;
+  }[];
+  createdAt: string;
+  updatedAt: string;
 };

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

@@ -1,7 +1,9 @@
 export {
+  useAddGroupToWorkspace,
   useAddIdentityToWorkspace,
   useCreateWorkspace,
   useCreateWsEnvironment,
+  useDeleteGroupFromWorkspace,
   useDeleteIdentityFromWorkspace,
   useDeleteUserFromWorkspace,
   useDeleteWorkspace,
@@ -11,6 +13,7 @@ export {
   useGetUserWorkspaces,
   useGetWorkspaceAuthorizations,
   useGetWorkspaceById,
+  useGetWorkspaceGroupMemberships,
   useGetWorkspaceIdentityMemberships,
   useGetWorkspaceIndexStatus,
   useGetWorkspaceIntegrations,
@@ -19,8 +22,8 @@ export {
   useNameWorkspaceSecrets,
   useRenameWorkspace,
   useToggleAutoCapitalization,
+  useUpdateGroupWorkspaceRole,
   useUpdateIdentityWorkspaceRole,
   useUpdateUserWorkspaceRole,
   useUpdateWsEnvironment,
-  useUpgradeProject
+  useUpgradeProject} from "./queries";
-} from "./queries";

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

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { TGroupMembership } from "../groups/types";
 import { IdentityMembership } from "../identities/types";
 import { IntegrationAuth } from "../integrationAuth/types";
 import { TIntegration } from "../integrations/types";
@@ -16,6 +17,7 @@ import {
   RenameWorkspaceDTO,
   TGetUpgradeProjectStatusDTO,
   ToggleAutoCapitalizationDTO,
+  TUpdateWorkspaceGroupRoleDTO,
   TUpdateWorkspaceIdentityRoleDTO,
   TUpdateWorkspaceUserRoleDTO,
   UpdateEnvironmentDTO,
@@ -36,7 +38,9 @@ export const workspaceKeys = {
     [{ workspaceId }, "workspace-audit-logs"] as const,
   getWorkspaceUsers: (workspaceId: string) => [{ workspaceId }, "workspace-users"] as const,
   getWorkspaceIdentityMemberships: (workspaceId: string) =>
-    [{ workspaceId }, "workspace-identity-memberships"] as const
+    [{ workspaceId }, "workspace-identity-memberships"] as const,
+  getWorkspaceGroupMemberships: (workspaceId: string) =>
+    [{ workspaceId }, "workspace-group-memberships"] as const
 };
 
 const fetchWorkspaceById = async (workspaceId: string) => {
@@ -450,3 +454,90 @@ export const useGetWorkspaceIdentityMemberships = (workspaceId: string) => {
     enabled: true
   });
 };
+
+export const useAddGroupToWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      groupSlug,
+      workspaceId,
+      role
+    }: {
+      groupSlug: string;
+      workspaceId: string;
+      role?: string;
+    }) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.post(
+        `/api/v2/workspace/${workspaceId}/group-memberships/${groupSlug}`,
+        {
+          role
+        }
+      );
+      return groupMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(workspaceId));
+    }
+  });
+};
+
+export const useUpdateGroupWorkspaceRole = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ groupSlug, workspaceId, roles }: TUpdateWorkspaceGroupRoleDTO) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.patch(
+        `/api/v2/workspace/${workspaceId}/group-memberships/${groupSlug}`,
+        {
+          roles
+        }
+      );
+
+      return groupMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(workspaceId));
+    }
+  });
+};
+
+export const useDeleteGroupFromWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      groupSlug,
+      workspaceId
+    }: {
+      groupSlug: string;
+      workspaceId: string;
+    }) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.delete(
+        `/api/v2/workspace/${workspaceId}/group-memberships/${groupSlug}`
+      );
+      return groupMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(workspaceId));
+    }
+  });
+};
+
+export const useGetWorkspaceGroupMemberships = (workspaceId: string) => {
+  return useQuery({
+    queryKey: workspaceKeys.getWorkspaceGroupMemberships(workspaceId),
+    queryFn: async () => {
+      const {
+        data: { groupMemberships } 
+      } = await apiRequest.get<{ groupMemberships: TGroupMembership[] }>(
+        `/api/v2/workspace/${workspaceId}/group-memberships`
+      );
+      return groupMemberships;
+    },
+    enabled: true
+  });
+};

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

@@ -111,3 +111,21 @@ export type TUpdateWorkspaceIdentityRoleDTO = {
       }
   )[];
 };
+
+export type TUpdateWorkspaceGroupRoleDTO = {
+  groupSlug: string;
+  workspaceId: string;
+  roles: (
+    | {
+        role: string;
+        isTemporary?: false;
+      }
+    | {
+        role: string;
+        isTemporary: true;
+        temporaryMode: ProjectUserMembershipTemporaryMode;
+        temporaryRange: string;
+        temporaryAccessStartTime: string;
+      }
+  )[];
+};

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupMembersModal.tsx

@@ -1,9 +1,13 @@
-import { faUsers } from "@fortawesome/free-solid-svg-icons";
+import { useMemo,useState } from "react";
+import { faMagnifyingGlass,faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
     Button,
     EmptyState,
+    Input,
     Modal,
     ModalContent,
     Table,
@@ -15,6 +19,10 @@ import {
     THead,
     Tr
 } from "@app/components/v2";
+import {
+    OrgPermissionActions,
+    OrgPermissionSubjects
+} from "@app/context";
 import { 
     useCreateGroupUserMembership,
     useDeleteGroupUserMembership,
@@ -23,7 +31,6 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
   popUp: UsePopUpState<["groupMembers"]>;
-//   handlePopUpClose: (popUpName: keyof UsePopUpState<["groupMembers"]>) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["groupMembers"]>, state?: boolean) => void;
 };
 
@@ -31,6 +38,7 @@ export const OrgGroupMembersModal = ({
     popUp,
     handlePopUpToggle
 }: Props) => {
+    const [searchMemberFilter, setSearchMemberFilter] = useState("");
     const { createNotification } = useNotificationContext();
     
     const popUpData = popUp?.groupMembers?.data as {
@@ -69,6 +77,17 @@ export const OrgGroupMembersModal = ({
         }
     }
     
+    const filterdUser = useMemo(
+        () =>
+        users?.filter(
+            ({ firstName, lastName, username }) =>
+              firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+              lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+              username?.toLowerCase().includes(searchMemberFilter.toLowerCase())
+          ),
+        [users, searchMemberFilter]
+      );
+    
     return (
         <Modal
             isOpen={popUp?.groupMembers?.isOpen}
@@ -77,17 +96,23 @@ export const OrgGroupMembersModal = ({
             }}
         >
             <ModalContent title="Manage Group Members">
-                <TableContainer>
+                <Input
+                    value={searchMemberFilter}
+                    onChange={(e) => setSearchMemberFilter(e.target.value)}
+                    leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                    placeholder="Search members..."
+                />
+                <TableContainer className="mt-4">
                     <Table>
                         <THead>
                             <Tr>
                                 <Th>User</Th>
-                                <Th>Status</Th>
+                                <Th />
                             </Tr>
                         </THead>
                         <TBody>
                             {isLoading && <TableSkeleton columns={2} innerKey="group-users" />}
-                            {!isLoading && users?.map(({
+                            {!isLoading && filterdUser?.map(({
                                 id,
                                 firstName,
                                 lastName,
@@ -100,24 +125,33 @@ export const OrgGroupMembersModal = ({
                                             <p>{`${firstName} ${lastName}`}</p>
                                             <p>{username}</p>
                                         </Td>
-                                        <Td>
+                                        <Td className="flex justify-end">
-                                            <Button
+                                            <OrgPermissionCan
-                                                // isLoading={isLoading}
+                                                I={OrgPermissionActions.Edit}
-                                                // isDisabled={!isAllowed}
+                                                a={OrgPermissionSubjects.Groups}
-                                                colorSchema="primary"
-                                                variant="outline_bg"
-                                                type="submit"
-                                                onClick={() => handleAssignment(username, !isPartOfGroup)}
                                             >
-                                                {isPartOfGroup ? "Unassign" : "Assign"}
+                                                {(isAllowed) => {
-                                            </Button>
+                                                    return (
+                                                        <Button
+                                                            isLoading={isLoading}
+                                                            isDisabled={!isAllowed}
+                                                            colorSchema="primary"
+                                                            variant="outline_bg"
+                                                            type="submit"
+                                                            onClick={() => handleAssignment(username, !isPartOfGroup)}
+                                                        >
+                                                            {isPartOfGroup ? "Unassign" : "Assign"}
+                                                        </Button>
+                                                    );
+                                                }}
+                                            </OrgPermissionCan>
                                         </Td>
                                     </Tr>
                                 );
                             })}
                         </TBody>
                     </Table>
-                    {!isLoading && !users?.length && (
+                    {!isLoading && !filterdUser?.length && (
                         <EmptyState
                             title="No users found"
                             icon={faUsers}

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx

@@ -96,7 +96,6 @@ export const OrgGroupsSection = () => {
             />
             <OrgGroupMembersModal
                 popUp={popUp}
-                handlePopUpClose={handlePopUpClose}
                 handlePopUpToggle={handlePopUpToggle}
             />
             <DeleteActionModal

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx

@@ -115,7 +115,7 @@ export const OrgGroupsTable = ({
                                     <Td>
                                     <OrgPermissionCan
                                         I={OrgPermissionActions.Edit}
-                                        a={OrgPermissionSubjects.Identity}
+                                        a={OrgPermissionSubjects.Groups}
                                     >
                                         {(isAllowed) => {
                                             return (

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -5,11 +5,12 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
-import { IdentityTab, MemberListTab, ProjectRoleListTab, ServiceTokenTab } from "./components";
+import { GroupsTab, IdentityTab, MemberListTab, ProjectRoleListTab, ServiceTokenTab } from "./components";
 
 enum TabSections {
   Member = "members",
   Roles = "roles",
+  Groups = "groups",
   Identities = "identities",
   ServiceTokens = "service-tokens"
 }
@@ -23,6 +24,7 @@ export const MembersPage = withProjectPermission(
           <Tabs defaultValue={TabSections.Member}>
             <TabList>
               <Tab value={TabSections.Member}>People</Tab>
+              <Tab value={TabSections.Groups}>Groups</Tab>
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
@@ -42,6 +44,17 @@ export const MembersPage = withProjectPermission(
                 <MemberListTab />
               </motion.div>
             </TabPanel>
+            <TabPanel value={TabSections.Groups}>
+              <motion.div
+                key="panel-1"
+                transition={{ duration: 0.15 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: 30 }}
+              >
+                <GroupsTab />
+              </motion.div>
+            </TabPanel>
             <TabPanel value={TabSections.Identities}>
               <IdentityTab />
             </TabPanel>

frontend/src/views/Project/MembersPage/components/GroupsTab/GroupsTab.tsx

@@ -0,0 +1,19 @@
+import { motion } from "framer-motion";
+
+import {
+    GroupsSection
+} from "./components";
+
+export const GroupsTab = () => {
+    return (
+        <motion.div
+            key="panel-groups"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+        >
+            <GroupsSection />
+        </motion.div>
+    );
+}

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx

@@ -0,0 +1,187 @@
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Link from "next/link";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Modal,
+    ModalContent,
+    Select,
+    SelectItem} from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import { 
+    useAddGroupToWorkspace,
+    useGetOrganizationGroups,
+    useGetProjectRoles,
+    useGetWorkspaceGroupMemberships,
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+// TODO: change this to zod
+
+const schema = yup
+  .object({
+    slug: yup.string().required("Group slug is required"),
+    role: yup.string()
+  })
+  .required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["group"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["group"]>, state?: boolean) => void;
+};
+
+export const GroupModal = ({
+    popUp,
+    handlePopUpToggle
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const { currentWorkspace } = useWorkspace();
+
+    const orgId = currentOrg?.id || "";
+    const workspaceId = currentWorkspace?.id || "";
+    
+    const { data: groups } = useGetOrganizationGroups(orgId);
+    const { data: groupMemberships } = useGetWorkspaceGroupMemberships(workspaceId);
+    
+    const { data: roles } = useGetProjectRoles(workspaceId);
+    
+    const { mutateAsync: addGroupToWorkspaceMutateAsync } = useAddGroupToWorkspace();
+    
+    const filteredGroupMembershipOrgs = useMemo(() => {
+        const wsGroupIds = new Map();
+
+        groupMemberships?.forEach((groupMembership) => {
+            wsGroupIds.set(groupMembership.group.id, true);
+        });
+
+        return (groups || []).filter(({ id }) => !wsGroupIds.has(id));
+    }, [groups, groupMemberships]);
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+      } = useForm<FormData>({
+        resolver: yupResolver(schema)
+      });
+
+    const onFormSubmit = async ({ slug, role }: FormData) => {
+        try {
+            await addGroupToWorkspaceMutateAsync({
+                workspaceId,
+                groupSlug: slug,
+                role: role || undefined
+            });
+            
+            reset();
+            handlePopUpToggle("group", false);
+            
+            createNotification({
+                text: "Successfully added group to project",
+                type: "success"
+            });
+        
+        } catch (err) {
+            createNotification({
+                text: "Failed to add group to project",
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <Modal
+            isOpen={popUp?.group?.isOpen}
+            onOpenChange={(isOpen) => {
+                handlePopUpToggle("group", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add Group to Project">
+            {filteredGroupMembershipOrgs.length ? (
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                    <Controller
+                        control={control}
+                        name="slug"
+                        defaultValue={filteredGroupMembershipOrgs?.[0]?.id}
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl label="Group" errorText={error?.message} isError={Boolean(error)}>
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => onChange(e)}
+                                className="w-full"
+                            >
+                                {filteredGroupMembershipOrgs.map(({ name, slug, id }) => (
+                                    <SelectItem value={slug} key={`org-group-${id}`}>
+                                        {name}
+                                    </SelectItem>
+                                ))}
+                            </Select>
+                            </FormControl>
+                        )}
+                    />
+                    <Controller
+                        control={control}
+                        name="role"
+                        defaultValue=""
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl
+                                label="Role"
+                                errorText={error?.message}
+                                isError={Boolean(error)}
+                                className="mt-4"
+                            >
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => 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}
+                        >
+                            {popUp?.group?.data ? "Update" : "Create"}
+                        </Button>
+                        <Button colorSchema="secondary" variant="plain">
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            ) : (
+                <div className="flex flex-col space-y-4">
+                    <div className="text-sm">
+                    All groups in your organization have already been added to this project.
+                    </div>
+                    <Link href={`/org/${currentWorkspace?.orgId}/members`}>
+                    <Button variant="outline_bg">Create a new group</Button>
+                    </Link>
+                </div>
+            )}
+            </ModalContent>
+      </Modal>
+    );
+}

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx

@@ -0,0 +1,458 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faClock, faEdit, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Spinner,
+  Tag,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetProjectRoles, useUpdateGroupWorkspaceRole } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+import { ProjectUserMembershipTemporaryMode } from "@app/hooks/api/workspace/types";
+import { groupBy } from "@app/lib/fn/array";
+
+const temporaryRoleFormSchema = z.object({
+  temporaryRange: z.string().min(1, "Required")
+});
+
+type TTemporaryRoleFormSchema = z.infer<typeof temporaryRoleFormSchema>;
+
+type TTemporaryRoleFormProps = {
+  temporaryConfig?: {
+    isTemporary?: boolean;
+    temporaryAccessEndTime?: string | null;
+    temporaryAccessStartTime?: string | null;
+    temporaryRange?: string | null;
+  };
+  onSetTemporary: (data: { temporaryRange: string; temporaryAccessStartTime?: string }) => void;
+  onRemoveTemporary: () => void;
+};
+
+const IdentityTemporaryRoleForm = ({
+  temporaryConfig: defaultValues = {},
+  onSetTemporary,
+  onRemoveTemporary
+}: TTemporaryRoleFormProps) => {
+  const { popUp, handlePopUpToggle } = usePopUp(["setTempRole"] as const);
+  const { control, handleSubmit } = useForm<TTemporaryRoleFormSchema>({
+    resolver: zodResolver(temporaryRoleFormSchema),
+    values: {
+      temporaryRange: defaultValues.temporaryRange || "1h"
+    }
+  });
+  const isTemporaryFieldValue = defaultValues.isTemporary;
+  const isExpired =
+    isTemporaryFieldValue && new Date() > new Date(defaultValues.temporaryAccessEndTime || "");
+
+  return (
+    <Popover
+      open={popUp.setTempRole.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("setTempRole", isOpen);
+      }}
+    >
+      <PopoverTrigger>
+        <IconButton ariaLabel="role-temp" variant="plain" size="md">
+          <Tooltip content={isExpired ? "Access Expired" : "Grant Temporary Access"}>
+            <FontAwesomeIcon
+              icon={faClock}
+              className={twMerge(
+                isTemporaryFieldValue && "text-primary",
+                isExpired && "text-red-600"
+              )}
+            />
+          </Tooltip>
+        </IconButton>
+      </PopoverTrigger>
+      <PopoverContent
+        arrowClassName="fill-gray-600"
+        side="right"
+        sideOffset={12}
+        hideCloseBtn
+        className="border border-gray-600 pt-4"
+      >
+        <div className="flex flex-col space-y-4">
+          <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+            Set Role Temporarily
+          </div>
+          {isExpired && <Tag colorSchema="red">Expired</Tag>}
+          <Controller
+            control={control}
+            name="temporaryRange"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Validity"
+                isError={Boolean(error?.message)}
+                errorText={error?.message}
+                helperText={
+                  <span>
+                    1m, 2h, 3d.{" "}
+                    <a
+                      href="https://github.com/vercel/ms?tab=readme-ov-file#examples"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary-700"
+                    >
+                      More
+                    </a>
+                  </span>
+                }
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center space-x-2">
+            {isTemporaryFieldValue && (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() => {
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime: new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })();
+                }}
+              >
+                Restart
+              </Button>
+            )}
+            {!isTemporaryFieldValue ? (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() =>
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime:
+                        defaultValues.temporaryAccessStartTime || new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })()
+                }
+              >
+                Grant access
+              </Button>
+            ) : (
+              <Button
+                size="xs"
+                variant="outline_bg"
+                colorSchema="danger"
+                onClick={() => {
+                  onRemoveTemporary();
+                  handlePopUpToggle("setTempRole");
+                }}
+              >
+                Revoke Access
+              </Button>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const formSchema = z.record(
+  z.object({
+    isChecked: z.boolean().optional(),
+    temporaryAccess: z.union([
+      z.object({
+        isTemporary: z.literal(true),
+        temporaryRange: z.string().min(1),
+        temporaryAccessStartTime: z.string().datetime(),
+        temporaryAccessEndTime: z.string().datetime().nullable().optional()
+      }),
+      z.boolean()
+    ])
+  })
+);
+type TForm = z.infer<typeof formSchema>;
+
+export type TMemberRolesProp = {
+  disableEdit?: boolean;
+  groupSlug: string;
+  roles: TWorkspaceUser["roles"];
+};
+
+const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+
+export const GroupRoles = ({
+  roles = [],
+  disableEdit = false,
+  groupSlug
+}: TMemberRolesProp) => {
+  const { currentWorkspace } = useWorkspace();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
+  const [searchRoles, setSearchRoles] = useState("");
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    setValue,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
+  const userRolesGroupBySlug = groupBy(roles, ({ customRoleSlug, role }) => customRoleSlug || role);
+
+  const updateGroupWorkspaceRole = useUpdateGroupWorkspaceRole();
+
+  const handleRoleUpdate = async (data: TForm) => {
+    const selectedRoles = Object.keys(data)
+      .filter((el) => Boolean(data[el].isChecked))
+      .map((el) => {
+        const isTemporary = Boolean(data[el].temporaryAccess);
+        if (!isTemporary) {
+          return { role: el, isTemporary: false as const };
+        }
+
+        const tempCfg = data[el].temporaryAccess as {
+          temporaryRange: string;
+          temporaryAccessStartTime: string;
+        };
+
+        return {
+          role: el,
+          isTemporary: true as const,
+          temporaryMode: ProjectUserMembershipTemporaryMode.Relative,
+          temporaryRange: tempCfg.temporaryRange,
+          temporaryAccessStartTime: tempCfg.temporaryAccessStartTime
+        };
+      });
+
+    try {
+      await updateGroupWorkspaceRole.mutateAsync({
+        workspaceId,
+        groupSlug,
+        roles: selectedRoles
+      });
+      createNotification({ text: "Successfully updated group role", type: "success" });
+      handlePopUpToggle("editRole");
+      setSearchRoles("");
+    } catch (err) {
+      createNotification({ text: "Failed to update group role", type: "error" });
+    }
+  };
+
+  const formatRoleName = (role: string, customRoleName?: string) => {
+    if (role === ProjectMembershipRole.Custom) return customRoleName;
+    if (role === ProjectMembershipRole.Member) return "Developer";
+    return role;
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      {roles
+        .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+        .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+          const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+          return (
+            <Tag key={id} className="capitalize">
+              <div className="flex items-center space-x-2">
+                <div>{formatRoleName(role, customRoleName)}</div>
+                {isTemporary && (
+                  <div>
+                    <Tooltip content={isExpired ? "Expired Temporary Access" : "Temporary Access"}>
+                      <FontAwesomeIcon
+                        icon={faClock}
+                        className={twMerge(isExpired && "text-red-600")}
+                      />
+                    </Tooltip>
+                  </div>
+                )}
+              </div>
+            </Tag>
+          );
+        })}
+      {roles.length > MAX_ROLES_TO_BE_SHOWN_IN_TABLE && (
+        <HoverCard>
+          <HoverCardTrigger>
+            <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
+          </HoverCardTrigger>
+          <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+            {roles
+              .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+              .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+                const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+                return (
+                  <Tag key={id} className="capitalize">
+                    <div className="flex items-center space-x-2">
+                      <div>{formatRoleName(role, customRoleName)}</div>
+                      {isTemporary && (
+                        <div>
+                          <Tooltip
+                            content={isExpired ? "Expired Temporary Access" : "Temporary Access"}
+                          >
+                            <FontAwesomeIcon
+                              icon={faClock}
+                              className={twMerge(
+                                new Date() > new Date(temporaryAccessEndTime as string) &&
+                                "text-red-600"
+                              )}
+                            />
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
+                  </Tag>
+                );
+              })}{" "}
+          </HoverCardContent>
+        </HoverCard>
+      )}
+      <div>
+        <Popover
+          open={popUp.editRole.isOpen}
+          onOpenChange={(isOpen) => {
+            handlePopUpToggle("editRole", isOpen);
+            reset();
+          }}
+        >
+          {!disableEdit && (
+            <PopoverTrigger>
+              <IconButton size="sm" variant="plain" ariaLabel="update">
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            </PopoverTrigger>
+          )}
+          <PopoverContent hideCloseBtn className="pt-4">
+            {isRolesLoading ? (
+              <div className="flex h-8 w-full items-center justify-center">
+                <Spinner />
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit(handleRoleUpdate)} id="role-update-form">
+                <div className="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
+                  {projectRoles
+                    ?.filter(
+                      ({ name, slug }) =>
+                        name.toLowerCase().includes(searchRoles.toLowerCase()) ||
+                        slug.toLowerCase().includes(searchRoles.toLowerCase())
+                    )
+                    ?.map(({ id, name, slug }) => {
+                      const userProjectRoleDetails = userRolesGroupBySlug?.[slug]?.[0];
+
+                      return (
+                        <div key={id} className="flex items-center space-x-4">
+                          <div className="flex-grow">
+                            <Controller
+                              control={control}
+                              defaultValue={Boolean(userProjectRoleDetails?.id)}
+                              name={`${slug}.isChecked`}
+                              render={({ field }) => (
+                                <Checkbox
+                                  id={slug}
+                                  isChecked={field.value}
+                                  onCheckedChange={(isChecked) => {
+                                    field.onChange(isChecked);
+                                    setValue(`${slug}.temporaryAccess`, false);
+                                  }}
+                                >
+                                  {name}
+                                </Checkbox>
+                              )}
+                            />
+                          </div>
+                          <div>
+                            <Controller
+                              control={control}
+                              name={`${slug}.temporaryAccess`}
+                              defaultValue={
+                                userProjectRoleDetails?.isTemporary
+                                  ? {
+                                    isTemporary: true,
+                                    temporaryAccessStartTime:
+                                      userProjectRoleDetails.temporaryAccessStartTime as string,
+                                    temporaryRange:
+                                      userProjectRoleDetails.temporaryRange as string,
+                                    temporaryAccessEndTime:
+                                      userProjectRoleDetails.temporaryAccessEndTime
+                                  }
+                                  : false
+                              }
+                              render={({ field }) => (
+                                <IdentityTemporaryRoleForm
+                                  temporaryConfig={
+                                    typeof field.value === "boolean"
+                                      ? { isTemporary: field.value }
+                                      : field.value
+                                  }
+                                  onSetTemporary={(data) => {
+                                    setValue(`${slug}.isChecked`, true, { shouldDirty: true });
+                                    field.onChange({ isTemporary: true, ...data });
+                                  }}
+                                  onRemoveTemporary={() => {
+                                    setValue(`${slug}.isChecked`, false, { shouldDirty: true });
+                                    field.onChange(false);
+                                  }}
+                                />
+                              )}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                </div>
+                <div className="mt-3 flex items-center space-x-2 border-t border-t-gray-700 pt-3">
+                  <div>
+                    <Input
+                      className="w-full p-1.5 pl-8"
+                      size="xs"
+                      value={searchRoles}
+                      onChange={(el) => setSearchRoles(el.target.value)}
+                      leftIcon={<FontAwesomeIcon icon={faSearch} />}
+                      placeholder="Search roles.."
+                    />
+                  </div>
+                  <div>
+                    <Button
+                      size="xs"
+                      type="submit"
+                      form="role-update-form"
+                      leftIcon={<FontAwesomeIcon icon={faCheck} />}
+                      isDisabled={!isDirty || isSubmitting}
+                      isLoading={isSubmitting}
+                    >
+                      Save
+                    </Button>
+                  </div>
+                </div>
+              </form>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx

@@ -0,0 +1,91 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+    Button,
+    DeleteActionModal
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub,useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteGroupFromWorkspace } from "@app/hooks/api";
+
+import { GroupModal } from "./GroupModal";
+import { GroupTable } from "./GroupsTable";
+
+export const GroupsSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { currentWorkspace } = useWorkspace();
+
+    const workspaceId = currentWorkspace?.id ?? "";
+    
+    const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
+    
+    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+        "group",
+        "deleteGroup",
+        "upgradePlan"
+    ] as const);
+
+    const onRemoveGroupSubmit = async (groupSlug: string) => {
+        try {
+            await deleteMutateAsync({
+                groupSlug,
+                workspaceId
+            });
+  
+            createNotification({
+                text: "Successfully removed identity from project",
+                type: "success"
+            });
+  
+          handlePopUpClose("deleteGroup");
+        } catch (err) {
+            console.error(err);
+            const error = err as any;
+            const text = error?.response?.data?.message ?? "Failed to remove group from project";
+    
+            createNotification({
+                text,
+                type: "error"
+            });
+        }
+    };
+      
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <div className="mb-4 flex items-center justify-between">
+                <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
+                <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Groups}>
+                    {(isAllowed) => (
+                        <Button
+                            colorSchema="primary"
+                            type="submit"
+                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                            onClick={() => handlePopUpOpen("group")}
+                            isDisabled={!isAllowed}
+                        >
+                            Add Group
+                        </Button>
+                    )}
+                </ProjectPermissionCan>
+            </div>
+            <GroupModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+            <GroupTable handlePopUpOpen={handlePopUpOpen} />
+            <DeleteActionModal
+                isOpen={popUp.deleteGroup.isOpen}
+                title={`Are you sure want to remove the group ${
+                    (popUp?.deleteGroup?.data as { name: string })?.name || ""
+                } from the project?`}
+                onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={() =>
+                    onRemoveGroupSubmit(
+                        (popUp?.deleteGroup?.data as { slug: string })?.slug
+                    )
+                }
+            />
+        </div>
+    );
+}

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx

@@ -0,0 +1,103 @@
+import { faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useGetWorkspaceGroupMemberships } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { GroupRoles } from "./GroupRoles";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteGroup", "group"]>,
+    data?: {
+      slug?: string;
+      name?: string;
+    }
+  ) => void;
+};
+
+export const GroupTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetWorkspaceGroupMemberships(currentWorkspace?.id || "");
+  return (
+    <TableContainer>
+        <Table>
+            <THead>
+            <Tr>
+                <Th>Name</Th>
+                <Th>Role</Th>
+                <Th>Added on</Th>
+                <Th className="w-5" />
+            </Tr>
+            </THead>
+            <TBody>
+            {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
+            {!isLoading &&
+                data &&
+                data.length > 0 &&
+                data.map(({ group: { id, name, slug }, roles, createdAt }) => {
+                    return (
+                        <Tr className="h-10" key={`st-v3-${id}`}>
+                        <Td>{name}</Td>
+                        <Td>
+                            <ProjectPermissionCan
+                                I={ProjectPermissionActions.Edit}
+                                a={ProjectPermissionSub.Groups}
+                            >
+                                {(isAllowed) => (
+                                    <GroupRoles roles={roles} disableEdit={!isAllowed} groupSlug={slug} />
+                                )}
+                            </ProjectPermissionCan>
+                        </Td>
+                        <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                        <Td className="flex justify-end">
+                            <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.Groups}
+                            >
+                            {(isAllowed) => (
+                                <IconButton
+                                onClick={() => {
+                                    handlePopUpOpen("deleteGroup", {
+                                        slug,
+                                        name
+                                    });
+                                }}
+                                size="lg"
+                                colorSchema="danger"
+                                variant="plain"
+                                ariaLabel="update"
+                                className="ml-4"
+                                isDisabled={!isAllowed}
+                                >
+                                <FontAwesomeIcon icon={faXmark} />
+                                </IconButton>
+                            )}
+                            </ProjectPermissionCan>
+                        </Td>
+                        </Tr>
+                    );
+                })}
+            </TBody>
+        </Table>
+        {!isLoading && data?.length === 0 && (
+            <EmptyState title="No groups have been added to this project" icon={faServer} />
+        )}
+    </TableContainer>
+  );
+};

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/index.tsx

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

frontend/src/views/Project/MembersPage/components/GroupsTab/components/index.tsx

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

frontend/src/views/Project/MembersPage/components/GroupsTab/index.tsx

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

frontend/src/views/Project/MembersPage/components/index.tsx

@@ -1,3 +1,4 @@
+export { GroupsTab } from "./GroupsTab";
 export { IdentityTab } from "./IdentityTab";
 export { MemberListTab } from "./MemberListTab";
 export { ProjectRoleListTab } from "./ProjectRoleListTab";