improvements: use stored preferred page size for project roles table and add reset helper

feat(machine-identities): Delete protection

backend/src/db/migrations/20250613153957_add-machine-identity-delete-protection.ts

@@ -0,0 +1,21 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasCol = await knex.schema.hasColumn(TableName.Identity, "hasDeleteProtection");
+  if (!hasCol) {
+    await knex.schema.alterTable(TableName.Identity, (t) => {
+      t.boolean("hasDeleteProtection").notNullable().defaultTo(false);
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasCol = await knex.schema.hasColumn(TableName.Identity, "hasDeleteProtection");
+  if (hasCol) {
+    await knex.schema.alterTable(TableName.Identity, (t) => {
+      t.dropColumn("hasDeleteProtection");
+    });
+  }
+}

backend/src/db/schemas/identities.ts

@@ -12,7 +12,8 @@ export const IdentitiesSchema = z.object({
   name: z.string(),
   authMethod: z.string().nullable().optional(),
   createdAt: z.date(),
-  updatedAt: z.date()
+  updatedAt: z.date(),
+  hasDeleteProtection: z.boolean().default(false)
 });
 
 export type TIdentities = z.infer<typeof IdentitiesSchema>;

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

@@ -48,7 +48,9 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
         id: z.string().trim().describe(GROUPS.GET_BY_ID.id)
       }),
       response: {
-        200: GroupsSchema
+        200: GroupsSchema.extend({
+          customRoleSlug: z.string().nullable()
+        })
       }
     },
     handler: async (req) => {

backend/src/ee/services/audit-log/audit-log-types.ts

@@ -780,6 +780,7 @@ interface CreateIdentityEvent {
   metadata: {
     identityId: string;
     name: string;
+    hasDeleteProtection: boolean;
   };
 }
 
@@ -788,6 +789,7 @@ interface UpdateIdentityEvent {
   metadata: {
     identityId: string;
     name?: string;
+    hasDeleteProtection?: boolean;
   };
 }
 

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

@@ -169,11 +169,29 @@ export const groupDALFactory = (db: TDbClient) => {
     }
   };
 
+  const findById = async (id: string, tx?: Knex) => {
+    try {
+      const doc = await (tx || db.replicaNode())(TableName.Groups)
+        .leftJoin(TableName.OrgRoles, `${TableName.Groups}.roleId`, `${TableName.OrgRoles}.id`)
+        .where(`${TableName.Groups}.id`, id)
+        .select(
+          selectAllTableCols(TableName.Groups),
+          db.ref("slug").as("customRoleSlug").withSchema(TableName.OrgRoles)
+        )
+        .first();
+
+      return doc;
+    } catch (error) {
+      throw new DatabaseError({ error, name: "Find by id" });
+    }
+  };
+
   return {
+    ...groupOrm,
     findGroups,
     findByOrgId,
     findAllGroupPossibleMembers,
     findGroupsByProjectId,
-    ...groupOrm
+    findById
   };
 };

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

@@ -111,12 +111,14 @@ export const IDENTITIES = {
   CREATE: {
     name: "The name of the identity to create.",
     organizationId: "The organization ID to which the identity belongs.",
-    role: "The role of the identity. Possible values are 'no-access', 'member', and 'admin'."
+    role: "The role of the identity. Possible values are 'no-access', 'member', and 'admin'.",
+    hasDeleteProtection: "Prevents deletion of the identity when enabled."
   },
   UPDATE: {
     identityId: "The ID of the identity to update.",
     name: "The new name of the identity.",
-    role: "The new role of the identity."
+    role: "The new role of the identity.",
+    hasDeleteProtection: "Prevents deletion of the identity when enabled."
   },
   DELETE: {
     identityId: "The ID of the identity to delete."

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

@@ -44,6 +44,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
         name: z.string().trim().describe(IDENTITIES.CREATE.name),
         organizationId: z.string().trim().describe(IDENTITIES.CREATE.organizationId),
         role: z.string().trim().min(1).default(OrgMembershipRole.NoAccess).describe(IDENTITIES.CREATE.role),
+        hasDeleteProtection: z.boolean().default(false).describe(IDENTITIES.CREATE.hasDeleteProtection),
         metadata: z
           .object({ key: z.string().trim().min(1), value: z.string().trim().min(1) })
           .array()
@@ -75,6 +76,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
           type: EventType.CREATE_IDENTITY,
           metadata: {
             name: identity.name,
+            hasDeleteProtection: identity.hasDeleteProtection,
             identityId: identity.id
           }
         }
@@ -86,6 +88,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
         properties: {
           orgId: req.body.organizationId,
           name: identity.name,
+          hasDeleteProtection: identity.hasDeleteProtection,
           identityId: identity.id,
           ...req.auditLogInfo
         }
@@ -117,6 +120,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
       body: z.object({
         name: z.string().trim().optional().describe(IDENTITIES.UPDATE.name),
         role: z.string().trim().min(1).optional().describe(IDENTITIES.UPDATE.role),
+        hasDeleteProtection: z.boolean().optional().describe(IDENTITIES.UPDATE.hasDeleteProtection),
         metadata: z
           .object({ key: z.string().trim().min(1), value: z.string().trim().min(1) })
           .array()
@@ -148,6 +152,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
           type: EventType.UPDATE_IDENTITY,
           metadata: {
             name: identity.name,
+            hasDeleteProtection: identity.hasDeleteProtection,
             identityId: identity.id
           }
         }
@@ -243,7 +248,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
               permissions: true,
               description: true
             }).optional(),
-            identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
+            identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
               authMethods: z.array(z.string())
             })
           })
@@ -292,7 +297,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
               permissions: true,
               description: true
             }).optional(),
-            identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
+            identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
               authMethods: z.array(z.string())
             })
           }).array(),
@@ -386,7 +391,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
               permissions: true,
               description: true
             }).optional(),
-            identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
+            identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
               authMethods: z.array(z.string())
             })
           }).array(),
@@ -451,7 +456,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
                   temporaryAccessEndTime: z.date().nullable().optional()
                 })
               ),
-              identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
+              identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
                 authMethods: z.array(z.string())
               }),
               project: SanitizedProjectSchema.pick({ name: true, id: true, type: true })

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

@@ -101,6 +101,7 @@ export const identityProjectDALFactory = (db: TDbClient) => {
 
           db.ref("id").as("identityId").withSchema(TableName.Identity),
           db.ref("name").as("identityName").withSchema(TableName.Identity),
+          db.ref("hasDeleteProtection").withSchema(TableName.Identity),
           db.ref("id").withSchema(TableName.IdentityProjectMembership),
           db.ref("role").withSchema(TableName.IdentityProjectMembershipRole),
           db.ref("id").withSchema(TableName.IdentityProjectMembershipRole).as("membershipRoleId"),
@@ -130,6 +131,7 @@ export const identityProjectDALFactory = (db: TDbClient) => {
         data: docs,
         parentMapper: ({
           identityName,
+          hasDeleteProtection,
           uaId,
           awsId,
           gcpId,
@@ -151,6 +153,7 @@ export const identityProjectDALFactory = (db: TDbClient) => {
           identity: {
             id: identityId,
             name: identityName,
+            hasDeleteProtection,
             authMethods: buildAuthMethods({
               uaId,
               awsId,

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

@@ -114,16 +114,18 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("id").as("tokenId").withSchema(TableName.IdentityTokenAuth),
           db.ref("id").as("jwtId").withSchema(TableName.IdentityJwtAuth),
           db.ref("id").as("ldapId").withSchema(TableName.IdentityLdapAuth),
-          db.ref("name").withSchema(TableName.Identity)
+          db.ref("name").withSchema(TableName.Identity),
+          db.ref("hasDeleteProtection").withSchema(TableName.Identity)
         );
 
       if (data) {
-        const { name } = data;
+        const { name, hasDeleteProtection } = data;
         return {
           ...data,
           identity: {
             id: data.identityId,
             name,
+            hasDeleteProtection,
             authMethods: buildAuthMethods(data)
           }
         };
@@ -155,7 +157,8 @@ export const identityOrgDALFactory = (db: TDbClient) => {
         .orderBy(`${TableName.Identity}.${orderBy}`, orderDirection)
         .select(
           selectAllTableCols(TableName.IdentityOrgMembership),
-          db.ref("name").withSchema(TableName.Identity).as("identityName")
+          db.ref("name").withSchema(TableName.Identity).as("identityName"),
+          db.ref("hasDeleteProtection").withSchema(TableName.Identity)
         )
         .where(filter)
         .as("paginatedIdentity");
@@ -245,6 +248,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("updatedAt").withSchema("paginatedIdentity"),
           db.ref("identityId").withSchema("paginatedIdentity").as("identityId"),
           db.ref("identityName").withSchema("paginatedIdentity"),
+          db.ref("hasDeleteProtection").withSchema("paginatedIdentity"),
 
           db.ref("id").as("uaId").withSchema(TableName.IdentityUniversalAuth),
           db.ref("id").as("gcpId").withSchema(TableName.IdentityGcpAuth),
@@ -286,6 +290,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           crName,
           identityId,
           identityName,
+          hasDeleteProtection,
           role,
           roleId,
           id,
@@ -324,6 +329,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           identity: {
             id: identityId,
             name: identityName,
+            hasDeleteProtection,
             authMethods: buildAuthMethods({
               uaId,
               alicloudId,
@@ -476,6 +482,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("updatedAt").withSchema(TableName.IdentityOrgMembership),
           db.ref("identityId").withSchema(TableName.IdentityOrgMembership).as("identityId"),
           db.ref("name").withSchema(TableName.Identity).as("identityName"),
+          db.ref("hasDeleteProtection").withSchema(TableName.Identity),
 
           db.ref("id").as("uaId").withSchema(TableName.IdentityUniversalAuth),
           db.ref("id").as("gcpId").withSchema(TableName.IdentityGcpAuth),
@@ -518,6 +525,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           crName,
           identityId,
           identityName,
+          hasDeleteProtection,
           role,
           roleId,
           total_count,
@@ -556,6 +564,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           identity: {
             id: identityId,
             name: identityName,
+            hasDeleteProtection,
             authMethods: buildAuthMethods({
               uaId,
               alicloudId,

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

@@ -47,6 +47,7 @@ export const identityServiceFactory = ({
   const createIdentity = async ({
     name,
     role,
+    hasDeleteProtection,
     actor,
     orgId,
     actorId,
@@ -96,7 +97,7 @@ export const identityServiceFactory = ({
     }
 
     const identity = await identityDAL.transaction(async (tx) => {
-      const newIdentity = await identityDAL.create({ name }, tx);
+      const newIdentity = await identityDAL.create({ name, hasDeleteProtection }, tx);
       await identityOrgMembershipDAL.create(
         {
           identityId: newIdentity.id,
@@ -138,6 +139,7 @@ export const identityServiceFactory = ({
   const updateIdentity = async ({
     id,
     role,
+    hasDeleteProtection,
     name,
     actor,
     actorId,
@@ -189,7 +191,11 @@ export const identityServiceFactory = ({
     }
 
     const identity = await identityDAL.transaction(async (tx) => {
-      const newIdentity = name ? await identityDAL.updateById(id, { name }, tx) : await identityDAL.findById(id, tx);
+      const newIdentity =
+        name || hasDeleteProtection
+          ? await identityDAL.updateById(id, { name, hasDeleteProtection }, tx)
+          : await identityDAL.findById(id, tx);
+
       if (role) {
         await identityOrgMembershipDAL.updateById(
           identityOrgMembership.id,
@@ -272,6 +278,9 @@ export const identityServiceFactory = ({
 
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionIdentityActions.Delete, OrgPermissionSubjects.Identity);
 
+    if (identityOrgMembership.identity.hasDeleteProtection)
+      throw new BadRequestError({ message: "Identity has delete protection" });
+
     const deletedIdentity = await identityDAL.deleteById(id);
 
     await licenseService.updateSubscriptionOrgMemberCount(identityOrgMembership.orgId);

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

@@ -5,12 +5,14 @@ import { OrderByDirection, TOrgPermission } from "@app/lib/types";
 export type TCreateIdentityDTO = {
   role: string;
   name: string;
+  hasDeleteProtection: boolean;
   metadata?: { key: string; value: string }[];
 } & TOrgPermission;
 
 export type TUpdateIdentityDTO = {
   id: string;
   role?: string;
+  hasDeleteProtection?: boolean;
   name?: string;
   metadata?: { key: string; value: string }[];
   isActorSuperAdmin?: boolean;

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

@@ -81,6 +81,7 @@ export type TMachineIdentityCreatedEvent = {
   event: PostHogEventTypes.MachineIdentityCreated;
   properties: {
     name: string;
+    hasDeleteProtection: boolean;
     orgId: string;
     identityId: string;
   };

frontend/src/hooks/api/auditLogs/types.tsx

@@ -242,6 +242,7 @@ interface CreateIdentityEvent {
   metadata: {
     identityId: string;
     name: string;
+    hasDeleteProtection: boolean;
   };
 }
 
@@ -250,6 +251,7 @@ interface UpdateIdentityEvent {
   metadata: {
     identityId: string;
     name?: string;
+    hasDeleteProtection?: boolean;
   };
 }
 

frontend/src/hooks/api/identities/mutations.tsx

@@ -85,12 +85,13 @@ export const useCreateIdentity = () => {
 export const useUpdateIdentity = () => {
   const queryClient = useQueryClient();
   return useMutation<Identity, object, UpdateIdentityDTO>({
-    mutationFn: async ({ identityId, name, role, metadata }) => {
+    mutationFn: async ({ identityId, name, role, hasDeleteProtection, metadata }) => {
       const {
         data: { identity }
       } = await apiRequest.patch(`/api/v1/identities/${identityId}`, {
         name,
         role,
+        hasDeleteProtection,
         metadata
       });
 

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

@@ -14,6 +14,7 @@ export type IdentityTrustedIp = {
 export type Identity = {
   id: string;
   name: string;
+  hasDeleteProtection: boolean;
   authMethods: IdentityAuthMethod[];
   createdAt: string;
   updatedAt: string;
@@ -83,6 +84,7 @@ export type CreateIdentityDTO = {
   name: string;
   organizationId: string;
   role?: string;
+  hasDeleteProtection: boolean;
   metadata?: { key: string; value: string }[];
 };
 
@@ -90,6 +92,7 @@ export type UpdateIdentityDTO = {
   identityId: string;
   name?: string;
   role?: string;
+  hasDeleteProtection?: boolean;
   organizationId: string;
   metadata?: { key: string; value: string }[];
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -15,7 +15,8 @@ import {
   IconButton,
   Input,
   Modal,
-  ModalContent
+  ModalContent,
+  Switch
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { findOrgMembershipRole } from "@app/helpers/roles";
@@ -27,6 +28,7 @@ const schema = z
   .object({
     name: z.string().min(1, "Required"),
     role: z.object({ slug: z.string(), name: z.string() }),
+    hasDeleteProtection: z.boolean(),
     metadata: z
       .object({
         key: z.string().trim().min(1),
@@ -64,7 +66,8 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
-      name: ""
+      name: "",
+      hasDeleteProtection: false
     }
   });
 
@@ -78,6 +81,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
       identityId: string;
       name: string;
       role: string;
+      hasDeleteProtection: boolean;
       metadata?: { key: string; value: string }[];
       customRole: {
         name: string;
@@ -91,22 +95,25 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
       reset({
         name: identity.name,
         role: identity.customRole ?? findOrgMembershipRole(roles, identity.role),
+        hasDeleteProtection: identity.hasDeleteProtection,
         metadata: identity.metadata
       });
     } else {
       reset({
         name: "",
-        role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole)
+        role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole),
+        hasDeleteProtection: false
       });
     }
   }, [popUp?.identity?.data, roles]);
 
-  const onFormSubmit = async ({ name, role, metadata }: FormData) => {
+  const onFormSubmit = async ({ name, role, metadata, hasDeleteProtection }: FormData) => {
     try {
       const identity = popUp?.identity?.data as {
         identityId: string;
         name: string;
         role: string;
+        hasDeleteProtection: boolean;
       };
 
       if (identity) {
@@ -116,6 +123,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
           identityId: identity.identityId,
           name,
           role: role.slug || undefined,
+          hasDeleteProtection,
           organizationId: orgId,
           metadata
         });
@@ -127,6 +135,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
         const { id: createdId } = await createMutateAsync({
           name,
           role: role.slug || undefined,
+          hasDeleteProtection,
           organizationId: orgId,
           metadata
         });
@@ -215,6 +224,24 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
               </FormControl>
             )}
           />
+          <Controller
+            control={control}
+            name="hasDeleteProtection"
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+              <FormControl errorText={error?.message} isError={Boolean(error)}>
+                <Switch
+                  className="ml-0 mr-2 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                  containerClassName="flex-row-reverse w-fit"
+                  id="delete-protection-enabled"
+                  thumbClassName="bg-mineshaft-800"
+                  onCheckedChange={onChange}
+                  isChecked={value}
+                >
+                  <p>Delete Protection {value ? "Enabled" : "Disabled"}</p>
+                </Switch>
+              </FormControl>
+            )}
+          />
           <div>
             <FormLabel label="Metadata" />
           </div>

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -329,7 +329,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             <FontAwesomeIcon size="sm" icon={faEllipsis} />
                           </div>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
+                        <DropdownMenuContent align="start" className="mt-3 p-1">
                           <OrgPermissionCan
                             I={OrgPermissionIdentityActions.Edit}
                             a={OrgPermissionSubjects.Identity}

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -47,13 +47,19 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
           <DropdownMenuTrigger asChild>
             <Button
               size="xs"
-              rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
+              rightIcon={
+                <FontAwesomeIcon
+                  className="ml-1 transition-transform duration-200 group-data-[state=open]:rotate-180"
+                  icon={faChevronDown}
+                />
+              }
               colorSchema="secondary"
+              className="group select-none"
             >
               Options
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="min-w-[120px]" align="end">
+          <DropdownMenuContent className="mt-3 min-w-[120px]" align="end">
             <OrgPermissionCan
               I={OrgPermissionIdentityActions.Edit}
               a={OrgPermissionSubjects.Identity}
@@ -68,6 +74,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
                     handlePopUpOpen("identity", {
                       identityId,
                       name: data.identity.name,
+                      hasDeleteProtection: data.identity.hasDeleteProtection,
                       role: data.role,
                       customRole: data.customRole
                     });
@@ -131,6 +138,12 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
           <p className="text-sm font-semibold text-mineshaft-300">Name</p>
           <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
         </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Delete Protection</p>
+          <p className="text-sm text-mineshaft-300">
+            {data.identity.hasDeleteProtection ? "On" : "Off"}
+          </p>
+        </div>
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
           <p className="text-sm text-mineshaft-300">{data.role}</p>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx

@@ -35,7 +35,7 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
                   Options
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent className="min-w-[120px]" align="end">
+              <DropdownMenuContent className="mt-3 min-w-[120px]" align="end">
                 <OrgPermissionCan
                   I={OrgPermissionIdentityActions.Edit}
                   a={OrgPermissionSubjects.Identity}

frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -1,4 +1,16 @@
-import { faEllipsis, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faCopy,
+  faEdit,
+  faEllipsisV,
+  faEye,
+  faMagnifyingGlass,
+  faPlus,
+  faSearch,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
@@ -12,6 +24,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -19,15 +35,27 @@ import {
   Td,
   Th,
   THead,
+  Tooltip,
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useDeleteProjectRole, useGetProjectRoles } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { ProjectMembershipRole, TProjectRole } from "@app/hooks/api/roles/types";
 import { DuplicateProjectRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal";
 import { RoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/RoleModal";
 
+enum RolesOrderBy {
+  Name = "name",
+  Slug = "slug"
+}
+
 export const ProjectRoleList = () => {
   const navigate = useNavigate();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -57,6 +85,75 @@ export const ProjectRoleList = () => {
     }
   };
 
+  const {
+    orderDirection,
+    toggleOrderDirection,
+    orderBy,
+    setOrderDirection,
+    setOrderBy,
+    search,
+    setSearch,
+    page,
+    perPage,
+    setPerPage,
+    setPage,
+    offset
+  } = usePagination<RolesOrderBy>(RolesOrderBy.Name, {
+    initPerPage: getUserTablePreference("projectRolesTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("projectRolesTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const filteredRoles = useMemo(
+    () =>
+      roles
+        ?.filter((role) => {
+          const { slug, name } = role;
+
+          const searchValue = search.trim().toLowerCase();
+
+          return (
+            name.toLowerCase().includes(searchValue) || slug.toLowerCase().includes(searchValue)
+          );
+        })
+        .sort((a, b) => {
+          const [roleOne, roleTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          switch (orderBy) {
+            case RolesOrderBy.Slug:
+              return roleOne.slug.toLowerCase().localeCompare(roleTwo.slug.toLowerCase());
+            case RolesOrderBy.Name:
+            default:
+              return roleOne.name.toLowerCase().localeCompare(roleTwo.name.toLowerCase());
+          }
+        }) ?? [],
+    [roles, orderDirection, search, orderBy]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredRoles.length,
+    offset,
+    setPage
+  });
+
+  const handleSort = (column: RolesOrderBy) => {
+    if (column === orderBy) {
+      toggleOrderDirection();
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
+
+  const getClassName = (col: RolesOrderBy) => twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+
+  const getColSortIcon = (col: RolesOrderBy) =>
+    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
+
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
@@ -64,7 +161,7 @@ export const ProjectRoleList = () => {
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Role}>
           {(isAllowed) => (
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => handlePopUpOpen("role")}
@@ -75,18 +172,50 @@ export const ProjectRoleList = () => {
           )}
         </ProjectPermissionCan>
       </div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search project roles..."
+        className="flex-1"
+        containerClassName="mb-4"
+      />
       <TableContainer>
         <Table>
           <THead>
             <Tr>
-              <Th>Name</Th>
-              <Th>Slug</Th>
+              <Th>
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Name)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Name)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Name)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>
+                <div className="flex items-center">
+                  Slug
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Slug)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Slug)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Slug)} />
+                  </IconButton>
+                </div>
+              </Th>
               <Th aria-label="actions" className="w-5" />
             </Tr>
           </THead>
           <TBody>
-            {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-            {roles?.map((role) => {
+            {isRolesLoading && <TableSkeleton columns={3} innerKey="project-roles" />}
+            {filteredRoles?.slice(offset, perPage * page).map((role) => {
               const { id, name, slug } = role;
               const isNonMutatable = Object.values(ProjectMembershipRole).includes(
                 slug as ProjectMembershipRole
@@ -109,88 +238,118 @@ export const ProjectRoleList = () => {
                   <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">
-                        <ProjectPermissionCan
-                          I={ProjectPermissionActions.Edit}
-                          a={ProjectPermissionSub.Role}
-                        >
-                          {(isAllowed) => (
-                            <DropdownMenuItem
-                              className={twMerge(
-                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                navigate({
-                                  to: `/${currentWorkspace?.type}/$projectId/roles/$roleSlug` as const,
-                                  params: {
-                                    projectId: currentWorkspace.id,
-                                    roleSlug: slug
-                                  }
-                                });
-                              }}
-                              disabled={!isAllowed}
-                            >
-                              {`${isNonMutatable ? "View" : "Edit"} Role`}
-                            </DropdownMenuItem>
-                          )}
-                        </ProjectPermissionCan>
-                        <ProjectPermissionCan
-                          I={ProjectPermissionActions.Create}
-                          a={ProjectPermissionSub.Role}
-                        >
-                          {(isAllowed) => (
-                            <DropdownMenuItem
-                              className={twMerge(
-                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handlePopUpOpen("duplicateRole", role);
-                              }}
-                              disabled={!isAllowed}
-                            >
-                              Duplicate Role
-                            </DropdownMenuItem>
-                          )}
-                        </ProjectPermissionCan>
-                        {!isNonMutatable && (
+                    <Tooltip className="max-w-sm text-center" content="Options">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <IconButton
+                            ariaLabel="Options"
+                            colorSchema="secondary"
+                            className="w-6"
+                            variant="plain"
+                          >
+                            <FontAwesomeIcon icon={faEllipsisV} />
+                          </IconButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="min-w-[12rem]" sideOffset={2} align="end">
                           <ProjectPermissionCan
-                            I={ProjectPermissionActions.Delete}
+                            I={ProjectPermissionActions.Edit}
                             a={ProjectPermissionSub.Role}
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
+                                icon={<FontAwesomeIcon icon={isNonMutatable ? faEye : faEdit} />}
                                 className={twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
                                 )}
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  handlePopUpOpen("deleteRole", role);
+                                  navigate({
+                                    to: `/${currentWorkspace?.type}/$projectId/roles/$roleSlug` as const,
+                                    params: {
+                                      projectId: currentWorkspace.id,
+                                      roleSlug: slug
+                                    }
+                                  });
                                 }}
                                 disabled={!isAllowed}
                               >
-                                Delete Role
+                                {`${isNonMutatable ? "View" : "Edit"} Role`}
                               </DropdownMenuItem>
                             )}
                           </ProjectPermissionCan>
-                        )}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Create}
+                            a={ProjectPermissionSub.Role}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                icon={<FontAwesomeIcon icon={faCopy} />}
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("duplicateRole", role);
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Duplicate Role
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          {!isNonMutatable && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Delete}
+                              a={ProjectPermissionSub.Role}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  icon={<FontAwesomeIcon icon={faTrash} />}
+                                  className={twMerge(
+                                    isAllowed
+                                      ? "hover:!bg-red-500 hover:!text-white"
+                                      : "pointer-events-none cursor-not-allowed opacity-50",
+                                    "transition-colors duration-100"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("deleteRole", role);
+                                  }}
+                                  disabled={!isAllowed}
+                                >
+                                  Delete Role
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Tooltip>
                   </Td>
                 </Tr>
               );
             })}
           </TBody>
         </Table>
+        {Boolean(filteredRoles?.length) && (
+          <Pagination
+            count={filteredRoles!.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={handlePerPageChange}
+          />
+        )}
+        {!filteredRoles?.length && !isRolesLoading && (
+          <EmptyState
+            title={
+              roles?.length
+                ? "No project roles match search..."
+                : "This project does not have any roles"
+            }
+            icon={roles?.length ? faSearch : undefined}
+          />
+        )}
       </TableContainer>
       <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal