Requested changes

misc: addressed slack env config validation error

.env.example

@@ -72,6 +72,3 @@ PLAIN_API_KEY=
 PLAIN_WISH_LABEL_IDS=
 
 SSL_CLIENT_CERTIFICATE_HEADER_KEY=
-
-WORKFLOW_SLACK_CLIENT_ID=
-WORKFLOW_SLACK_CLIENT_SECRET=

.gitignore

@@ -63,6 +63,7 @@ yarn-error.log*
 
 # Editor specific
 .vscode/*
+.idea/*
 
 frontend-build
 

backend/src/db/migrations/20240910070128_add-pki-key-usages.ts

@@ -0,0 +1,85 @@
+import { Knex } from "knex";
+
+import { CertKeyUsage } from "@app/services/certificate/certificate-types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  // Certificate template
+  const hasKeyUsagesCol = await knex.schema.hasColumn(TableName.CertificateTemplate, "keyUsages");
+  const hasExtendedKeyUsagesCol = await knex.schema.hasColumn(TableName.CertificateTemplate, "extendedKeyUsages");
+
+  await knex.schema.alterTable(TableName.CertificateTemplate, (tb) => {
+    if (!hasKeyUsagesCol) {
+      tb.specificType("keyUsages", "text[]");
+    }
+
+    if (!hasExtendedKeyUsagesCol) {
+      tb.specificType("extendedKeyUsages", "text[]");
+    }
+  });
+
+  if (!hasKeyUsagesCol) {
+    await knex(TableName.CertificateTemplate).update({
+      keyUsages: [CertKeyUsage.DIGITAL_SIGNATURE, CertKeyUsage.KEY_ENCIPHERMENT]
+    });
+  }
+
+  if (!hasExtendedKeyUsagesCol) {
+    await knex(TableName.CertificateTemplate).update({
+      extendedKeyUsages: []
+    });
+  }
+
+  // Certificate
+  const doesCertTableHaveKeyUsages = await knex.schema.hasColumn(TableName.Certificate, "keyUsages");
+  const doesCertTableHaveExtendedKeyUsages = await knex.schema.hasColumn(TableName.Certificate, "extendedKeyUsages");
+  await knex.schema.alterTable(TableName.Certificate, (tb) => {
+    if (!doesCertTableHaveKeyUsages) {
+      tb.specificType("keyUsages", "text[]");
+    }
+
+    if (!doesCertTableHaveExtendedKeyUsages) {
+      tb.specificType("extendedKeyUsages", "text[]");
+    }
+  });
+
+  if (!doesCertTableHaveKeyUsages) {
+    await knex(TableName.Certificate).update({
+      keyUsages: [CertKeyUsage.DIGITAL_SIGNATURE, CertKeyUsage.KEY_ENCIPHERMENT]
+    });
+  }
+
+  if (!doesCertTableHaveExtendedKeyUsages) {
+    await knex(TableName.Certificate).update({
+      extendedKeyUsages: []
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  // Certificate Template
+  const hasKeyUsagesCol = await knex.schema.hasColumn(TableName.CertificateTemplate, "keyUsages");
+  const hasExtendedKeyUsagesCol = await knex.schema.hasColumn(TableName.CertificateTemplate, "extendedKeyUsages");
+
+  await knex.schema.alterTable(TableName.CertificateTemplate, (t) => {
+    if (hasKeyUsagesCol) {
+      t.dropColumn("keyUsages");
+    }
+    if (hasExtendedKeyUsagesCol) {
+      t.dropColumn("extendedKeyUsages");
+    }
+  });
+
+  // Certificate
+  const doesCertTableHaveKeyUsages = await knex.schema.hasColumn(TableName.Certificate, "keyUsages");
+  const doesCertTableHaveExtendedKeyUsages = await knex.schema.hasColumn(TableName.Certificate, "extendedKeyUsages");
+  await knex.schema.alterTable(TableName.Certificate, (t) => {
+    if (doesCertTableHaveKeyUsages) {
+      t.dropColumn("keyUsages");
+    }
+    if (doesCertTableHaveExtendedKeyUsages) {
+      t.dropColumn("extendedKeyUsages");
+    }
+  });
+}

backend/src/db/schemas/certificate-templates.ts

@@ -16,7 +16,9 @@ export const CertificateTemplatesSchema = z.object({
   subjectAlternativeName: z.string(),
   ttl: z.string(),
   createdAt: z.date(),
-  updatedAt: z.date()
+  updatedAt: z.date(),
+  keyUsages: z.string().array().nullable().optional(),
+  extendedKeyUsages: z.string().array().nullable().optional()
 });
 
 export type TCertificateTemplates = z.infer<typeof CertificateTemplatesSchema>;

backend/src/db/schemas/certificates.ts

@@ -22,7 +22,9 @@ export const CertificatesSchema = z.object({
   revocationReason: z.number().nullable().optional(),
   altNames: z.string().default("").nullable().optional(),
   caCertId: z.string().uuid(),
-  certificateTemplateId: z.string().uuid().nullable().optional()
+  certificateTemplateId: z.string().uuid().nullable().optional(),
+  keyUsages: z.string().array().nullable().optional(),
+  extendedKeyUsages: z.string().array().nullable().optional()
 });
 
 export type TCertificates = z.infer<typeof CertificatesSchema>;

backend/src/ee/routes/v1/certificate-authority-crl-router.ts

@@ -11,6 +11,30 @@ export const registerCaCrlRouter = async (server: FastifyZodProvider) => {
     config: {
       rateLimit: readLimit
     },
+    schema: {
+      description: "Get CRL in DER format (deprecated)",
+      params: z.object({
+        crlId: z.string().trim().describe(CA_CRLS.GET.crlId)
+      }),
+      response: {
+        200: z.instanceof(Buffer)
+      }
+    },
+    handler: async (req, res) => {
+      const { crl } = await server.services.certificateAuthorityCrl.getCrlById(req.params.crlId);
+
+      res.header("Content-Type", "application/pkix-crl");
+
+      return Buffer.from(crl);
+    }
+  });
+
+  server.route({
+    method: "GET",
+    url: "/:crlId/der",
+    config: {
+      rateLimit: readLimit
+    },
     schema: {
       description: "Get CRL in DER format",
       params: z.object({

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

@@ -101,6 +101,7 @@ export const registerProjectRoleRouter = async (server: FastifyZodProvider) => {
             message: "Slug must be a valid"
           }),
         name: z.string().trim().optional().describe(PROJECT_ROLE.UPDATE.name),
+        description: z.string().trim().optional().describe(PROJECT_ROLE.UPDATE.description),
         permissions: ProjectPermissionSchema.array().describe(PROJECT_ROLE.UPDATE.permissions).optional()
       }),
       response: {

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

@@ -100,9 +100,20 @@ export const registerSamlRouter = async (server: FastifyZodProvider) => {
       async (req, profile, cb) => {
         try {
           if (!profile) throw new BadRequestError({ message: "Missing profile" });
-          const email = profile?.email ?? (profile?.emailAddress as string); // emailRippling is added because in Rippling the field `email` reserved
+          const email =
+            profile?.email ??
+            // entra sends data in this format
+            (profile["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/email"] as string) ??
+            (profile?.emailAddress as string); // emailRippling is added because in Rippling the field `email` reserved\
 
-          if (!email || !profile.firstName) {
+          const firstName = (profile.firstName ??
+            // entra sends data in this format
+            profile["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/firstName"]) as string;
+
+          const lastName =
+            profile.lastName ?? profile["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/lastName"];
+
+          if (!email || !firstName) {
             logger.info(
               {
                 err: new Error("Invalid saml request. Missing email or first name"),
@@ -110,14 +121,13 @@ export const registerSamlRouter = async (server: FastifyZodProvider) => {
               },
               `email: ${email} firstName: ${profile.firstName as string}`
             );
-            throw new BadRequestError({ message: "Invalid request. Missing email or first name" });
           }
 
           const { isUserCompleted, providerAuthToken } = await server.services.saml.samlLogin({
             externalId: profile.nameID,
             email,
-            firstName: profile.firstName as string,
-            lastName: profile.lastName as string,
+            firstName,
+            lastName: lastName as string,
             relayState: (req.body as { RelayState?: string }).RelayState,
             authProvider: (req as unknown as FastifyRequest).ssoConfig?.authProvider as string,
             orgId: (req as unknown as FastifyRequest).ssoConfig?.orgId as string

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

@@ -1,6 +1,7 @@
 import { AbilityBuilder, createMongoAbility, ForcedSubject, MongoAbility } from "@casl/ability";
 
 import { conditionsMatcher } from "@app/lib/casl";
+import { BadRequestError } from "@app/lib/errors";
 
 export enum ProjectPermissionActions {
   Read = "read",
@@ -75,117 +76,125 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions.Create, ProjectPermissionSub.SecretRollback]
   | [ProjectPermissionActions.Edit, ProjectPermissionSub.Kms];
 
+export const fullProjectPermissionSet: [ProjectPermissionActions, ProjectPermissionSub][] = [
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Secrets],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Secrets],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Secrets],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Secrets],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.SecretApproval],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.SecretApproval],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRotation],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.SecretRotation],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.SecretRotation],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.SecretRotation],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.SecretRollback],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Member],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Member],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Member],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Member],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Groups],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Groups],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Groups],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Groups],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Role],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Role],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Role],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Role],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Integrations],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Integrations],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Integrations],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Integrations],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Webhooks],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Webhooks],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Webhooks],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Webhooks],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Identity],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Identity],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Identity],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Identity],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.ServiceTokens],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.ServiceTokens],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.ServiceTokens],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.ServiceTokens],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Settings],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Settings],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Settings],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Settings],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Environments],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Environments],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Environments],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Environments],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Tags],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Tags],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Tags],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Tags],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.AuditLogs],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.AuditLogs],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.AuditLogs],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.AuditLogs],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.IpAllowList],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.IpAllowList],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.IpAllowList],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.IpAllowList],
+
+  // double check if all CRUD are needed for CA and Certificates
+  [ProjectPermissionActions.Read, ProjectPermissionSub.CertificateAuthorities],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.CertificateAuthorities],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.CertificateAuthorities],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.CertificateAuthorities],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.Certificates],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.Certificates],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Certificates],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Certificates],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.CertificateTemplates],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.CertificateTemplates],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.CertificateTemplates],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.CertificateTemplates],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.PkiAlerts],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.PkiAlerts],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.PkiAlerts],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.PkiAlerts],
+
+  [ProjectPermissionActions.Read, ProjectPermissionSub.PkiCollections],
+  [ProjectPermissionActions.Create, ProjectPermissionSub.PkiCollections],
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.PkiCollections],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.PkiCollections],
+
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Project],
+  [ProjectPermissionActions.Delete, ProjectPermissionSub.Project],
+
+  [ProjectPermissionActions.Edit, ProjectPermissionSub.Kms]
+];
+
 const buildAdminPermissionRules = () => {
   const { can, rules } = new AbilityBuilder<MongoAbility<ProjectPermissionSet>>(createMongoAbility);
 
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Secrets);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Secrets);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Secrets);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Secrets);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.SecretApproval);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.SecretApproval);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretRotation);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.SecretRotation);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretRotation);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.SecretRotation);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.SecretRollback);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Member);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Member);
-  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);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Role);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Integrations);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Integrations);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Integrations);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Integrations);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Webhooks);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Webhooks);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Webhooks);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Webhooks);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Identity);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Identity);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Identity);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Identity);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.ServiceTokens);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.ServiceTokens);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.ServiceTokens);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.ServiceTokens);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Settings);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Settings);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Settings);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Settings);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Environments);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Environments);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Environments);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Environments);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Tags);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Tags);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Tags);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.AuditLogs);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.AuditLogs);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.AuditLogs);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.AuditLogs);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.IpAllowList);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.IpAllowList);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.IpAllowList);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.IpAllowList);
-
-  // double check if all CRUD are needed for CA and Certificates
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.CertificateAuthorities);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.CertificateAuthorities);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.CertificateAuthorities);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.CertificateAuthorities);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.Certificates);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.Certificates);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Certificates);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Certificates);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.CertificateTemplates);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.CertificateTemplates);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.CertificateTemplates);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.CertificateTemplates);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.PkiAlerts);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.PkiAlerts);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.PkiAlerts);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.PkiAlerts);
-
-  can(ProjectPermissionActions.Read, ProjectPermissionSub.PkiCollections);
-  can(ProjectPermissionActions.Create, ProjectPermissionSub.PkiCollections);
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.PkiCollections);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.PkiCollections);
-
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Project);
-  can(ProjectPermissionActions.Delete, ProjectPermissionSub.Project);
-
-  can(ProjectPermissionActions.Edit, ProjectPermissionSub.Kms);
+  // Admins get full access to everything
+  fullProjectPermissionSet.forEach((permission) => {
+    const [action, subject] = permission;
+    can(action, subject);
+  });
 
   return rules;
 };
@@ -372,4 +381,31 @@ export const isAtLeastAsPrivilegedWorkspace = (
   return set1.size >= set2.size;
 };
 
+/*
+ * Case: The user requests to create a role with permissions that are not valid and not supposed to be used ever.
+ * If we don't check for this, we can run into issues where functions like the `isAtLeastAsPrivileged` will not work as expected, because we compare the size of each permission set.
+ * If the permission set contains invalid permissions, the size will be different, and result in incorrect results.
+ */
+export const validateProjectPermissions = (permissions: unknown) => {
+  const parsedPermissions =
+    typeof permissions === "string" ? (JSON.parse(permissions) as string[]) : (permissions as string[]);
+
+  const flattenedPermissions = [...parsedPermissions];
+
+  for (const perm of flattenedPermissions) {
+    const [action, subject] = perm;
+
+    if (
+      !fullProjectPermissionSet.find(
+        (currentPermission) => currentPermission[0] === action && currentPermission[1] === subject
+      )
+    ) {
+      throw new BadRequestError({
+        message: `Permission action ${action} on subject ${subject} is not valid`,
+        name: "Create Role"
+      });
+    }
+  }
+};
+
 /* eslint-enable */

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

@@ -363,7 +363,12 @@ export const ORGANIZATIONS = {
     membershipId: "The ID of the membership to delete."
   },
   LIST_IDENTITY_MEMBERSHIPS: {
-    orgId: "The ID of the organization to get identity memberships from."
+    orgId: "The ID of the organization to get identity memberships from.",
+    offset: "The offset to start from. If you enter 10, it will start from the 10th identity membership.",
+    limit: "The number of identity memberships to return.",
+    orderBy: "The column to order identity memberships by.",
+    orderDirection: "The direction identity memberships will be sorted in.",
+    search: "The text string that identity membership names will be filtered by."
   },
   GET_PROJECTS: {
     organizationId: "The ID of the organization to get projects from."
@@ -472,7 +477,12 @@ export const PROJECT_USERS = {
 
 export const PROJECT_IDENTITIES = {
   LIST_IDENTITY_MEMBERSHIPS: {
-    projectId: "The ID of the project to get identity memberships from."
+    projectId: "The ID of the project to get identity memberships from.",
+    offset: "The offset to start from. If you enter 10, it will start from the 10th identity membership.",
+    limit: "The number of identity memberships to return.",
+    orderBy: "The column to order identity memberships by.",
+    orderDirection: "The direction identity memberships will be sorted in.",
+    search: "The text string that identity membership names will be filtered by."
   },
   GET_IDENTITY_MEMBERSHIP_BY_ID: {
     identityId: "The ID of the identity to get the membership for.",
@@ -1073,6 +1083,10 @@ export const CERTIFICATE_AUTHORITIES = {
     certificateChain: "The certificate chain of the CA",
     serialNumber: "The serial number of the CA certificate"
   },
+  GET_CERT_BY_ID: {
+    caId: "The ID of the CA to get the CA certificate from",
+    caCertId: "The ID of the CA certificate to get"
+  },
   GET_CA_CERTS: {
     caId: "The ID of the CA to get the CA certificates for",
     certificate: "The certificate body of the CA certificate",
@@ -1112,11 +1126,15 @@ export const CERTIFICATE_AUTHORITIES = {
     issuingCaCertificate: "The certificate of the issuing CA",
     certificateChain: "The certificate chain of the issued certificate",
     privateKey: "The private key of the issued certificate",
-    serialNumber: "The serial number of the issued certificate"
+    serialNumber: "The serial number of the issued certificate",
+    keyUsages: "The key usage extension of the certificate",
+    extendedKeyUsages: "The extended key usage extension of the certificate"
   },
   SIGN_CERT: {
     caId: "The ID of the CA to issue the certificate from",
     pkiCollectionId: "The ID of the PKI collection to add the certificate to",
+    keyUsages: "The key usage extension of the certificate",
+    extendedKeyUsages: "The extended key usage extension of the certificate",
     csr: "The pem-encoded CSR to sign with the CA to be used for certificate issuance",
     friendlyName: "A friendly name for the certificate",
     commonName: "The common name (CN) for the certificate",
@@ -1166,7 +1184,10 @@ export const CERTIFICATE_TEMPLATES = {
     name: "The name of the template",
     commonName: "The regular expression string to use for validating common names",
     subjectAlternativeName: "The regular expression string to use for validating subject alternative names",
-    ttl: "The max TTL for the template"
+    ttl: "The max TTL for the template",
+    keyUsages: "The key usage constraint or default value for when template is used during certificate issuance",
+    extendedKeyUsages:
+      "The extended key usage constraint or default value for when template is used during certificate issuance"
   },
   GET: {
     certificateTemplateId: "The ID of the certificate template to get"
@@ -1178,7 +1199,11 @@ export const CERTIFICATE_TEMPLATES = {
     name: "The updated name of the template",
     commonName: "The updated regular expression string for validating common names",
     subjectAlternativeName: "The updated regular expression string for validating subject alternative names",
-    ttl: "The updated max TTL for the template"
+    ttl: "The updated max TTL for the template",
+    keyUsages:
+      "The updated key usage constraint or default value for when template is used during certificate issuance",
+    extendedKeyUsages:
+      "The updated extended key usage constraint or default value for when template is used during certificate issuance"
   },
   DELETE: {
     certificateTemplateId: "The ID of the certificate template to delete"

backend/src/lib/config/env.ts

@@ -147,8 +147,8 @@ const envSchema = z
     PLAIN_WISH_LABEL_IDS: zpStr(z.string().optional()),
     DISABLE_AUDIT_LOG_GENERATION: zodStrBool.default("false"),
     SSL_CLIENT_CERTIFICATE_HEADER_KEY: zpStr(z.string().optional()).default("x-ssl-client-cert"),
-    WORKFLOW_SLACK_CLIENT_ID: zpStr(z.string()).optional(),
-    WORKFLOW_SLACK_CLIENT_SECRET: zpStr(z.string()).optional()
+    WORKFLOW_SLACK_CLIENT_ID: zpStr(z.string().optional()),
+    WORKFLOW_SLACK_CLIENT_SECRET: zpStr(z.string().optional())
   })
   .transform((data) => ({
     ...data,

backend/src/lib/types/index.ts

@@ -52,3 +52,8 @@ export enum SecretSharingAccessType {
   Anyone = "anyone",
   Organization = "organization"
 }
+
+export enum OrderByDirection {
+  ASC = "asc",
+  DESC = "desc"
+}

backend/src/server/plugins/error-handler.ts

@@ -1,5 +1,6 @@
 import { ForbiddenError } from "@casl/ability";
 import fastifyPlugin from "fastify-plugin";
+import { JsonWebTokenError } from "jsonwebtoken";
 import { ZodError } from "zod";
 
 import {
@@ -11,6 +12,12 @@ import {
   UnauthorizedError
 } from "@app/lib/errors";
 
+enum JWTErrors {
+  JwtExpired = "jwt expired",
+  JwtMalformed = "jwt malformed",
+  InvalidAlgorithm = "invalid algorithm"
+}
+
 export const fastifyErrHandler = fastifyPlugin(async (server: FastifyZodProvider) => {
   server.setErrorHandler((error, req, res) => {
     req.log.error(error);
@@ -36,6 +43,27 @@ export const fastifyErrHandler = fastifyPlugin(async (server: FastifyZodProvider
         status: error.status,
         detail: error.detail
       });
+      // Handle JWT errors and make them more human-readable for the end-user.
+    } else if (error instanceof JsonWebTokenError) {
+      const message = (() => {
+        if (error.message === JWTErrors.JwtExpired) {
+          return "Your token has expired. Please re-authenticate.";
+        }
+        if (error.message === JWTErrors.JwtMalformed) {
+          return "The provided access token is malformed. Please use a valid token or generate a new one and try again.";
+        }
+        if (error.message === JWTErrors.InvalidAlgorithm) {
+          return "The access token is signed with an invalid algorithm. Please provide a valid token and try again.";
+        }
+
+        return error.message;
+      })();
+
+      void res.status(401).send({
+        statusCode: 401,
+        error: "TokenError",
+        message
+      });
     } else {
       void res.send(error);
     }

backend/src/server/routes/index.ts

@@ -493,7 +493,6 @@ export const registerRoutes = async (
     orgRoleDAL,
     permissionService,
     orgDAL,
-    userGroupMembershipDAL,
     projectBotDAL,
     incidentContactDAL,
     tokenService,

backend/src/server/routes/v1/certificate-authority-router.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
 import ms from "ms";
 import { z } from "zod";
 
@@ -7,7 +8,7 @@ import { CERTIFICATE_AUTHORITIES } from "@app/lib/api-docs";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
-import { CertKeyAlgorithm } from "@app/services/certificate/certificate-types";
+import { CertExtendedKeyUsage, CertKeyAlgorithm, CertKeyUsage } from "@app/services/certificate/certificate-types";
 import { CaRenewalType, CaStatus, CaType } from "@app/services/certificate-authority/certificate-authority-types";
 import {
   validateAltNamesField,
@@ -139,6 +140,33 @@ export const registerCaRouter = async (server: FastifyZodProvider) => {
     }
   });
 
+  // this endpoint will be used to serve the CA certificate when a client makes a request
+  // against the Authority Information Access CA Issuer URL
+  server.route({
+    method: "GET",
+    url: "/:caId/certificates/:caCertId/der",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      description: "Get DER-encoded certificate of CA",
+      params: z.object({
+        caId: z.string().trim().describe(CERTIFICATE_AUTHORITIES.GET_CERT_BY_ID.caId),
+        caCertId: z.string().trim().describe(CERTIFICATE_AUTHORITIES.GET_CERT_BY_ID.caCertId)
+      }),
+      response: {
+        200: z.instanceof(Buffer)
+      }
+    },
+    handler: async (req, res) => {
+      const caCert = await server.services.certificateAuthority.getCaCertById(req.params);
+
+      res.header("Content-Type", "application/pkix-cert");
+
+      return Buffer.from(caCert.rawData);
+    }
+  });
+
   server.route({
     method: "PATCH",
     url: "/:caId",
@@ -573,7 +601,9 @@ export const registerCaRouter = async (server: FastifyZodProvider) => {
             .refine((val) => ms(val) > 0, "TTL must be a positive number")
             .describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.ttl),
           notBefore: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.notBefore),
-          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.notAfter)
+          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.notAfter),
+          keyUsages: z.nativeEnum(CertKeyUsage).array().optional(),
+          extendedKeyUsages: z.nativeEnum(CertExtendedKeyUsage).array().optional()
         })
         .refine(
           (data) => {
@@ -653,7 +683,9 @@ export const registerCaRouter = async (server: FastifyZodProvider) => {
             .refine((val) => ms(val) > 0, "TTL must be a positive number")
             .describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.ttl),
           notBefore: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.notBefore),
-          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.notAfter)
+          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.notAfter),
+          keyUsages: z.nativeEnum(CertKeyUsage).array().optional(),
+          extendedKeyUsages: z.nativeEnum(CertExtendedKeyUsage).array().optional()
         })
         .refine(
           (data) => {

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

@@ -7,7 +7,7 @@ import { CERTIFICATE_AUTHORITIES, CERTIFICATES } from "@app/lib/api-docs";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
-import { CrlReason } from "@app/services/certificate/certificate-types";
+import { CertExtendedKeyUsage, CertKeyUsage, CrlReason } from "@app/services/certificate/certificate-types";
 import {
   validateAltNamesField,
   validateCaDateField
@@ -86,7 +86,17 @@ export const registerCertRouter = async (server: FastifyZodProvider) => {
             .refine((val) => ms(val) > 0, "TTL must be a positive number")
             .describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.ttl),
           notBefore: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.notBefore),
-          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.notAfter)
+          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.notAfter),
+          keyUsages: z
+            .nativeEnum(CertKeyUsage)
+            .array()
+            .optional()
+            .describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.keyUsages),
+          extendedKeyUsages: z
+            .nativeEnum(CertExtendedKeyUsage)
+            .array()
+            .optional()
+            .describe(CERTIFICATE_AUTHORITIES.ISSUE_CERT.extendedKeyUsages)
         })
         .refine(
           (data) => {
@@ -177,7 +187,17 @@ export const registerCertRouter = async (server: FastifyZodProvider) => {
             .refine((val) => ms(val) > 0, "TTL must be a positive number")
             .describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.ttl),
           notBefore: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.notBefore),
-          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.notAfter)
+          notAfter: validateCaDateField.optional().describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.notAfter),
+          keyUsages: z
+            .nativeEnum(CertKeyUsage)
+            .array()
+            .optional()
+            .describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.keyUsages),
+          extendedKeyUsages: z
+            .nativeEnum(CertExtendedKeyUsage)
+            .array()
+            .optional()
+            .describe(CERTIFICATE_AUTHORITIES.SIGN_CERT.extendedKeyUsages)
         })
         .refine(
           (data) => {

backend/src/server/routes/v1/certificate-template-router.ts

@@ -7,6 +7,7 @@ import { CERTIFICATE_TEMPLATES } from "@app/lib/api-docs";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/services/certificate/certificate-types";
 import { sanitizedCertificateTemplate } from "@app/services/certificate-template/certificate-template-schema";
 import { validateTemplateRegexField } from "@app/services/certificate-template/certificate-template-validators";
 
@@ -74,7 +75,19 @@ export const registerCertificateTemplateRouter = async (server: FastifyZodProvid
         ttl: z
           .string()
           .refine((val) => ms(val) > 0, "TTL must be a positive number")
-          .describe(CERTIFICATE_TEMPLATES.CREATE.ttl)
+          .describe(CERTIFICATE_TEMPLATES.CREATE.ttl),
+        keyUsages: z
+          .nativeEnum(CertKeyUsage)
+          .array()
+          .optional()
+          .default([CertKeyUsage.DIGITAL_SIGNATURE, CertKeyUsage.KEY_ENCIPHERMENT])
+          .describe(CERTIFICATE_TEMPLATES.CREATE.keyUsages),
+        extendedKeyUsages: z
+          .nativeEnum(CertExtendedKeyUsage)
+          .array()
+          .optional()
+          .default([])
+          .describe(CERTIFICATE_TEMPLATES.CREATE.extendedKeyUsages)
       }),
       response: {
         200: sanitizedCertificateTemplate
@@ -130,7 +143,13 @@ export const registerCertificateTemplateRouter = async (server: FastifyZodProvid
           .string()
           .refine((val) => ms(val) > 0, "TTL must be a positive number")
           .optional()
-          .describe(CERTIFICATE_TEMPLATES.UPDATE.ttl)
+          .describe(CERTIFICATE_TEMPLATES.UPDATE.ttl),
+        keyUsages: z.nativeEnum(CertKeyUsage).array().optional().describe(CERTIFICATE_TEMPLATES.UPDATE.keyUsages),
+        extendedKeyUsages: z
+          .nativeEnum(CertExtendedKeyUsage)
+          .array()
+          .optional()
+          .describe(CERTIFICATE_TEMPLATES.UPDATE.extendedKeyUsages)
       }),
       params: z.object({
         certificateTemplateId: z.string().describe(CERTIFICATE_TEMPLATES.UPDATE.certificateTemplateId)

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

@@ -246,12 +246,13 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
               description: true
             }).optional(),
             identity: IdentitiesSchema.pick({ name: true, id: true, authMethod: true })
-          }).array()
+          }).array(),
+          totalCount: z.number()
         })
       }
     },
     handler: async (req) => {
-      const identities = await server.services.identity.listOrgIdentities({
+      const { identityMemberships, totalCount } = await server.services.identity.listOrgIdentities({
         actor: req.permission.type,
         actorId: req.permission.id,
         actorAuthMethod: req.permission.authMethod,
@@ -259,7 +260,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
         orgId: req.query.orgId
       });
 
-      return { identities };
+      return { identities: identityMemberships, totalCount };
     }
   });
 

backend/src/server/routes/v2/identity-org-router.ts

@@ -2,9 +2,11 @@ import { z } from "zod";
 
 import { IdentitiesSchema, IdentityOrgMembershipsSchema, OrgRolesSchema } from "@app/db/schemas";
 import { ORGANIZATIONS } from "@app/lib/api-docs";
+import { OrderByDirection } from "@app/lib/types";
 import { readLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
+import { OrgIdentityOrderBy } from "@app/services/identity/identity-types";
 
 export const registerIdentityOrgRouter = async (server: FastifyZodProvider) => {
   server.route({
@@ -24,6 +26,27 @@ export const registerIdentityOrgRouter = async (server: FastifyZodProvider) => {
       params: z.object({
         orgId: z.string().trim().describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.orgId)
       }),
+      querystring: z.object({
+        offset: z.coerce.number().min(0).default(0).describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.offset).optional(),
+        limit: z.coerce
+          .number()
+          .min(1)
+          .max(20000) // TODO: temp limit until combobox added to add identity to project modal, reduce once added
+          .default(100)
+          .describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.limit)
+          .optional(),
+        orderBy: z
+          .nativeEnum(OrgIdentityOrderBy)
+          .default(OrgIdentityOrderBy.Name)
+          .describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.orderBy)
+          .optional(),
+        orderDirection: z
+          .nativeEnum(OrderByDirection)
+          .default(OrderByDirection.ASC)
+          .describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.orderDirection)
+          .optional(),
+        search: z.string().trim().describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.search).optional()
+      }),
       response: {
         200: z.object({
           identityMemberships: IdentityOrgMembershipsSchema.merge(
@@ -37,20 +60,26 @@ export const registerIdentityOrgRouter = async (server: FastifyZodProvider) => {
               }).optional(),
               identity: IdentitiesSchema.pick({ name: true, id: true, authMethod: true })
             })
-          ).array()
+          ).array(),
+          totalCount: z.number()
         })
       }
     },
     handler: async (req) => {
-      const identityMemberships = await server.services.identity.listOrgIdentities({
+      const { identityMemberships, totalCount } = await server.services.identity.listOrgIdentities({
         actor: req.permission.type,
         actorId: req.permission.id,
         actorAuthMethod: req.permission.authMethod,
         actorOrgId: req.permission.orgId,
-        orgId: req.params.orgId
+        orgId: req.params.orgId,
+        limit: req.query.limit,
+        offset: req.query.offset,
+        orderBy: req.query.orderBy,
+        orderDirection: req.query.orderDirection,
+        search: req.query.search
       });
 
-      return { identityMemberships };
+      return { identityMemberships, totalCount };
     }
   });
 };

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

@@ -7,11 +7,13 @@ import {
   ProjectMembershipRole,
   ProjectUserMembershipRolesSchema
 } from "@app/db/schemas";
-import { PROJECT_IDENTITIES } from "@app/lib/api-docs";
+import { ORGANIZATIONS, PROJECT_IDENTITIES } from "@app/lib/api-docs";
 import { BadRequestError } from "@app/lib/errors";
+import { OrderByDirection } from "@app/lib/types";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
+import { ProjectIdentityOrderBy } from "@app/services/identity-project/identity-project-types";
 import { ProjectUserMembershipTemporaryMode } from "@app/services/project-membership/project-membership-types";
 
 import { SanitizedProjectSchema } from "../sanitizedSchemas";
@@ -214,6 +216,32 @@ export const registerIdentityProjectRouter = async (server: FastifyZodProvider)
       params: z.object({
         projectId: z.string().trim().describe(PROJECT_IDENTITIES.LIST_IDENTITY_MEMBERSHIPS.projectId)
       }),
+      querystring: z.object({
+        offset: z.coerce
+          .number()
+          .min(0)
+          .default(0)
+          .describe(PROJECT_IDENTITIES.LIST_IDENTITY_MEMBERSHIPS.offset)
+          .optional(),
+        limit: z.coerce
+          .number()
+          .min(1)
+          .max(20000) // TODO: temp limit until combobox added to add identity to project modal, reduce once added
+          .default(100)
+          .describe(PROJECT_IDENTITIES.LIST_IDENTITY_MEMBERSHIPS.limit)
+          .optional(),
+        orderBy: z
+          .nativeEnum(ProjectIdentityOrderBy)
+          .default(ProjectIdentityOrderBy.Name)
+          .describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.orderBy)
+          .optional(),
+        orderDirection: z
+          .nativeEnum(OrderByDirection)
+          .default(OrderByDirection.ASC)
+          .describe(ORGANIZATIONS.LIST_IDENTITY_MEMBERSHIPS.orderDirection)
+          .optional(),
+        search: z.string().trim().describe(PROJECT_IDENTITIES.LIST_IDENTITY_MEMBERSHIPS.search).optional()
+      }),
       response: {
         200: z.object({
           identityMemberships: z
@@ -239,19 +267,25 @@ export const registerIdentityProjectRouter = async (server: FastifyZodProvider)
               identity: IdentitiesSchema.pick({ name: true, id: true, authMethod: true }),
               project: SanitizedProjectSchema.pick({ name: true, id: true })
             })
-            .array()
+            .array(),
+          totalCount: z.number()
         })
       }
     },
     handler: async (req) => {
-      const identityMemberships = await server.services.identityProject.listProjectIdentities({
+      const { identityMemberships, totalCount } = await server.services.identityProject.listProjectIdentities({
         actor: req.permission.type,
         actorId: req.permission.id,
         actorAuthMethod: req.permission.authMethod,
         actorOrgId: req.permission.orgId,
-        projectId: req.params.projectId
+        projectId: req.params.projectId,
+        limit: req.query.limit,
+        offset: req.query.offset,
+        orderBy: req.query.orderBy,
+        orderDirection: req.query.orderDirection,
+        search: req.query.search
       });
-      return { identityMemberships };
+      return { identityMemberships, totalCount };
     }
   });
 

backend/src/services/certificate-authority/certificate-authority-fns.ts

@@ -15,7 +15,7 @@ import {
 
 /* eslint-disable no-bitwise */
 export const createSerialNumber = () => {
-  const randomBytes = crypto.randomBytes(32);
+  const randomBytes = crypto.randomBytes(20);
   randomBytes[0] &= 0x7f; // ensure the first bit is 0
   return randomBytes.toString("hex");
 };

backend/src/services/certificate-authority/certificate-authority-service.ts

@@ -19,7 +19,13 @@ import { TProjectDALFactory } from "@app/services/project/project-dal";
 import { getProjectKmsCertificateKeyId } from "@app/services/project/project-fns";
 
 import { TCertificateAuthorityCrlDALFactory } from "../../ee/services/certificate-authority-crl/certificate-authority-crl-dal";
-import { CertKeyAlgorithm, CertStatus } from "../certificate/certificate-types";
+import {
+  CertExtendedKeyUsage,
+  CertExtendedKeyUsageOIDToName,
+  CertKeyAlgorithm,
+  CertKeyUsage,
+  CertStatus
+} from "../certificate/certificate-types";
 import { TCertificateTemplateDALFactory } from "../certificate-template/certificate-template-dal";
 import { validateCertificateDetailsAgainstTemplate } from "../certificate-template/certificate-template-fns";
 import { TCertificateAuthorityCertDALFactory } from "./certificate-authority-cert-dal";
@@ -762,6 +768,39 @@ export const certificateAuthorityServiceFactory = ({
     };
   };
 
+  /**
+   * Return CA certificate object by ID
+   */
+  const getCaCertById = async ({ caId, caCertId }: { caId: string; caCertId: string }) => {
+    const caCert = await certificateAuthorityCertDAL.findOne({
+      caId,
+      id: caCertId
+    });
+
+    if (!caCert) {
+      throw new NotFoundError({ message: "CA certificate not found" });
+    }
+
+    const ca = await certificateAuthorityDAL.findById(caId);
+    const keyId = await getProjectKmsCertificateKeyId({
+      projectId: ca.projectId,
+      projectDAL,
+      kmsService
+    });
+
+    const kmsDecryptor = await kmsService.decryptWithKmsKey({
+      kmsId: keyId
+    });
+
+    const decryptedCaCert = await kmsDecryptor({
+      cipherTextBlob: caCert.encryptedCertificate
+    });
+
+    const caCertObj = new x509.X509Certificate(decryptedCaCert);
+
+    return caCertObj;
+  };
+
   /**
    * Issue certificate to be imported back in for intermediate CA
    */
@@ -776,6 +815,7 @@ export const certificateAuthorityServiceFactory = ({
     notAfter,
     maxPathLength
   }: TSignIntermediateDTO) => {
+    const appCfg = getConfig();
     const ca = await certificateAuthorityDAL.findById(caId);
     if (!ca) throw new BadRequestError({ message: "CA not found" });
 
@@ -850,7 +890,7 @@ export const certificateAuthorityServiceFactory = ({
       throw new BadRequestError({ message: "notAfter date is after CA certificate's notAfter date" });
     }
 
-    const { caPrivateKey } = await getCaCredentials({
+    const { caPrivateKey, caSecret } = await getCaCredentials({
       caId: ca.id,
       certificateAuthorityDAL,
       certificateAuthoritySecretDAL,
@@ -859,6 +899,11 @@ export const certificateAuthorityServiceFactory = ({
     });
 
     const serialNumber = createSerialNumber();
+
+    const caCrl = await certificateAuthorityCrlDAL.findOne({ caSecretId: caSecret.id });
+    const distributionPointUrl = `${appCfg.SITE_URL}/api/v1/pki/crl/${caCrl.id}/der`;
+
+    const caIssuerUrl = `${appCfg.SITE_URL}/api/v1/pki/ca/${ca.id}/certificates/${caCert.id}/der`;
     const intermediateCert = await x509.X509CertificateGenerator.create({
       serialNumber,
       subject: csrObj.subject,
@@ -878,7 +923,11 @@ export const certificateAuthorityServiceFactory = ({
         ),
         new x509.BasicConstraintsExtension(true, maxPathLength === -1 ? undefined : maxPathLength, true),
         await x509.AuthorityKeyIdentifierExtension.create(caCertObj, false),
-        await x509.SubjectKeyIdentifierExtension.create(csrObj.publicKey)
+        await x509.SubjectKeyIdentifierExtension.create(csrObj.publicKey),
+        new x509.CRLDistributionPointsExtension([distributionPointUrl]),
+        new x509.AuthorityInfoAccessExtension({
+          caIssuers: new x509.GeneralName("url", caIssuerUrl)
+        })
       ]
     });
 
@@ -1052,7 +1101,9 @@ export const certificateAuthorityServiceFactory = ({
     actorId,
     actorAuthMethod,
     actor,
-    actorOrgId
+    actorOrgId,
+    keyUsages,
+    extendedKeyUsages
   }: TIssueCertFromCaDTO) => {
     let ca: TCertificateAuthorities | undefined;
     let certificateTemplate: TCertificateTemplates | undefined;
@@ -1168,16 +1219,70 @@ export const certificateAuthorityServiceFactory = ({
     const caCrl = await certificateAuthorityCrlDAL.findOne({ caSecretId: caSecret.id });
     const appCfg = getConfig();
 
-    const distributionPointUrl = `${appCfg.SITE_URL}/api/v1/pki/crl/${caCrl.id}`;
+    const distributionPointUrl = `${appCfg.SITE_URL}/api/v1/pki/crl/${caCrl.id}/der`;
+    const caIssuerUrl = `${appCfg.SITE_URL}/api/v1/pki/ca/${ca.id}/certificates/${caCert.id}/der`;
 
     const extensions: x509.Extension[] = [
-      new x509.KeyUsagesExtension(x509.KeyUsageFlags.digitalSignature | x509.KeyUsageFlags.keyEncipherment, true),
       new x509.BasicConstraintsExtension(false),
       new x509.CRLDistributionPointsExtension([distributionPointUrl]),
       await x509.AuthorityKeyIdentifierExtension.create(caCertObj, false),
-      await x509.SubjectKeyIdentifierExtension.create(csrObj.publicKey)
+      await x509.SubjectKeyIdentifierExtension.create(csrObj.publicKey),
+      new x509.AuthorityInfoAccessExtension({
+        caIssuers: new x509.GeneralName("url", caIssuerUrl)
+      }),
+      new x509.CertificatePolicyExtension(["2.5.29.32.0"]) // anyPolicy
     ];
 
+    // handle key usages
+    let selectedKeyUsages: CertKeyUsage[] = keyUsages ?? [];
+    if (keyUsages === undefined && !certificateTemplate) {
+      selectedKeyUsages = [CertKeyUsage.DIGITAL_SIGNATURE, CertKeyUsage.KEY_ENCIPHERMENT];
+    }
+
+    if (keyUsages === undefined && certificateTemplate) {
+      selectedKeyUsages = (certificateTemplate.keyUsages ?? []) as CertKeyUsage[];
+    }
+
+    if (keyUsages?.length && certificateTemplate) {
+      const validKeyUsages = certificateTemplate.keyUsages || [];
+      if (keyUsages.some((keyUsage) => !validKeyUsages.includes(keyUsage))) {
+        throw new BadRequestError({
+          message: "Invalid key usage value based on template policy"
+        });
+      }
+      selectedKeyUsages = keyUsages;
+    }
+
+    const keyUsagesBitValue = selectedKeyUsages.reduce((accum, keyUsage) => accum | x509.KeyUsageFlags[keyUsage], 0);
+    if (keyUsagesBitValue) {
+      extensions.push(new x509.KeyUsagesExtension(keyUsagesBitValue, true));
+    }
+
+    // handle extended key usages
+    let selectedExtendedKeyUsages: CertExtendedKeyUsage[] = extendedKeyUsages ?? [];
+    if (extendedKeyUsages === undefined && certificateTemplate) {
+      selectedExtendedKeyUsages = (certificateTemplate.extendedKeyUsages ?? []) as CertExtendedKeyUsage[];
+    }
+
+    if (extendedKeyUsages?.length && certificateTemplate) {
+      const validExtendedKeyUsages = certificateTemplate.extendedKeyUsages || [];
+      if (extendedKeyUsages.some((eku) => !validExtendedKeyUsages.includes(eku))) {
+        throw new BadRequestError({
+          message: "Invalid extended key usage value based on template policy"
+        });
+      }
+      selectedExtendedKeyUsages = extendedKeyUsages;
+    }
+
+    if (selectedExtendedKeyUsages.length) {
+      extensions.push(
+        new x509.ExtendedKeyUsageExtension(
+          selectedExtendedKeyUsages.map((eku) => x509.ExtendedKeyUsage[eku]),
+          true
+        )
+      );
+    }
+
     let altNamesArray: {
       type: "email" | "dns";
       value: string;
@@ -1259,7 +1364,9 @@ export const certificateAuthorityServiceFactory = ({
           altNames,
           serialNumber,
           notBefore: notBeforeDate,
-          notAfter: notAfterDate
+          notAfter: notAfterDate,
+          keyUsages: selectedKeyUsages,
+          extendedKeyUsages: selectedExtendedKeyUsages
         },
         tx
       );
@@ -1308,6 +1415,7 @@ export const certificateAuthorityServiceFactory = ({
    * Note: CSR is generated externally and submitted to Infisical.
    */
   const signCertFromCa = async (dto: TSignCertFromCaDTO) => {
+    const appCfg = getConfig();
     let ca: TCertificateAuthorities | undefined;
     let certificateTemplate: TCertificateTemplates | undefined;
 
@@ -1321,7 +1429,9 @@ export const certificateAuthorityServiceFactory = ({
       altNames,
       ttl,
       notBefore,
-      notAfter
+      notAfter,
+      keyUsages,
+      extendedKeyUsages
     } = dto;
 
     let collectionId = pkiCollectionId;
@@ -1432,7 +1542,7 @@ export const certificateAuthorityServiceFactory = ({
         message: "A common name (CN) is required in the CSR or as a parameter to this endpoint"
       });
 
-    const { caPrivateKey } = await getCaCredentials({
+    const { caPrivateKey, caSecret } = await getCaCredentials({
       caId: ca.id,
       certificateAuthorityDAL,
       certificateAuthoritySecretDAL,
@@ -1440,13 +1550,115 @@ export const certificateAuthorityServiceFactory = ({
       kmsService
     });
 
+    const caCrl = await certificateAuthorityCrlDAL.findOne({ caSecretId: caSecret.id });
+    const distributionPointUrl = `${appCfg.SITE_URL}/api/v1/pki/crl/${caCrl.id}/der`;
+
+    const caIssuerUrl = `${appCfg.SITE_URL}/api/v1/pki/ca/${ca.id}/certificates/${caCert.id}/der`;
     const extensions: x509.Extension[] = [
-      new x509.KeyUsagesExtension(x509.KeyUsageFlags.digitalSignature | x509.KeyUsageFlags.keyEncipherment, true),
       new x509.BasicConstraintsExtension(false),
       await x509.AuthorityKeyIdentifierExtension.create(caCertObj, false),
-      await x509.SubjectKeyIdentifierExtension.create(csrObj.publicKey)
+      await x509.SubjectKeyIdentifierExtension.create(csrObj.publicKey),
+      new x509.CRLDistributionPointsExtension([distributionPointUrl]),
+      new x509.AuthorityInfoAccessExtension({
+        caIssuers: new x509.GeneralName("url", caIssuerUrl)
+      }),
+      new x509.CertificatePolicyExtension(["2.5.29.32.0"]) // anyPolicy
     ];
 
+    // handle key usages
+    const csrKeyUsageExtension = csrObj.getExtension("2.5.29.15") as x509.KeyUsagesExtension;
+    let csrKeyUsages: CertKeyUsage[] = [];
+    if (csrKeyUsageExtension) {
+      csrKeyUsages = Object.values(CertKeyUsage).filter(
+        (keyUsage) => (x509.KeyUsageFlags[keyUsage] & csrKeyUsageExtension.usages) !== 0
+      );
+    }
+
+    let selectedKeyUsages: CertKeyUsage[] = keyUsages ?? [];
+    if (keyUsages === undefined && !certificateTemplate) {
+      if (csrKeyUsageExtension) {
+        selectedKeyUsages = csrKeyUsages;
+      } else {
+        selectedKeyUsages = [CertKeyUsage.DIGITAL_SIGNATURE, CertKeyUsage.KEY_ENCIPHERMENT];
+      }
+    }
+
+    if (keyUsages === undefined && certificateTemplate) {
+      if (csrKeyUsageExtension) {
+        const validKeyUsages = certificateTemplate.keyUsages || [];
+        if (csrKeyUsages.some((keyUsage) => !validKeyUsages.includes(keyUsage))) {
+          throw new BadRequestError({
+            message: "Invalid key usage value based on template policy"
+          });
+        }
+        selectedKeyUsages = csrKeyUsages;
+      } else {
+        selectedKeyUsages = (certificateTemplate.keyUsages ?? []) as CertKeyUsage[];
+      }
+    }
+
+    if (keyUsages?.length && certificateTemplate) {
+      const validKeyUsages = certificateTemplate.keyUsages || [];
+      if (keyUsages.some((keyUsage) => !validKeyUsages.includes(keyUsage))) {
+        throw new BadRequestError({
+          message: "Invalid key usage value based on template policy"
+        });
+      }
+      selectedKeyUsages = keyUsages;
+    }
+
+    const keyUsagesBitValue = selectedKeyUsages.reduce((accum, keyUsage) => accum | x509.KeyUsageFlags[keyUsage], 0);
+    if (keyUsagesBitValue) {
+      extensions.push(new x509.KeyUsagesExtension(keyUsagesBitValue, true));
+    }
+
+    // handle extended key usages
+    const csrExtendedKeyUsageExtension = csrObj.getExtension("2.5.29.37") as x509.ExtendedKeyUsageExtension;
+    let csrExtendedKeyUsages: CertExtendedKeyUsage[] = [];
+    if (csrExtendedKeyUsageExtension) {
+      csrExtendedKeyUsages = csrExtendedKeyUsageExtension.usages.map(
+        (ekuOid) => CertExtendedKeyUsageOIDToName[ekuOid as string]
+      );
+    }
+
+    let selectedExtendedKeyUsages: CertExtendedKeyUsage[] = extendedKeyUsages ?? [];
+    if (extendedKeyUsages === undefined && !certificateTemplate && csrExtendedKeyUsageExtension) {
+      selectedExtendedKeyUsages = csrExtendedKeyUsages;
+    }
+
+    if (extendedKeyUsages === undefined && certificateTemplate) {
+      if (csrExtendedKeyUsageExtension) {
+        const validExtendedKeyUsages = certificateTemplate.extendedKeyUsages || [];
+        if (csrExtendedKeyUsages.some((eku) => !validExtendedKeyUsages.includes(eku))) {
+          throw new BadRequestError({
+            message: "Invalid extended key usage value based on template policy"
+          });
+        }
+        selectedExtendedKeyUsages = csrExtendedKeyUsages;
+      } else {
+        selectedExtendedKeyUsages = (certificateTemplate.extendedKeyUsages ?? []) as CertExtendedKeyUsage[];
+      }
+    }
+
+    if (extendedKeyUsages?.length && certificateTemplate) {
+      const validExtendedKeyUsages = certificateTemplate.extendedKeyUsages || [];
+      if (extendedKeyUsages.some((keyUsage) => !validExtendedKeyUsages.includes(keyUsage))) {
+        throw new BadRequestError({
+          message: "Invalid extended key usage value based on template policy"
+        });
+      }
+      selectedExtendedKeyUsages = extendedKeyUsages;
+    }
+
+    if (selectedExtendedKeyUsages.length) {
+      extensions.push(
+        new x509.ExtendedKeyUsageExtension(
+          selectedExtendedKeyUsages.map((eku) => x509.ExtendedKeyUsage[eku]),
+          true
+        )
+      );
+    }
+
     let altNamesFromCsr: string = "";
     let altNamesArray: {
       type: "email" | "dns";
@@ -1542,7 +1754,9 @@ export const certificateAuthorityServiceFactory = ({
           altNames: altNamesFromCsr || altNames,
           serialNumber,
           notBefore: notBeforeDate,
-          notAfter: notAfterDate
+          notAfter: notAfterDate,
+          keyUsages: selectedKeyUsages,
+          extendedKeyUsages: selectedExtendedKeyUsages
         },
         tx
       );
@@ -1628,6 +1842,7 @@ export const certificateAuthorityServiceFactory = ({
     renewCaCert,
     getCaCerts,
     getCaCert,
+    getCaCertById,
     signIntermediate,
     importCertToCa,
     issueCertFromCa,

backend/src/services/certificate-authority/certificate-authority-types.ts

@@ -4,7 +4,7 @@ import { TKmsServiceFactory } from "@app/services/kms/kms-service";
 import { TProjectDALFactory } from "@app/services/project/project-dal";
 
 import { TCertificateAuthorityCrlDALFactory } from "../../ee/services/certificate-authority-crl/certificate-authority-crl-dal";
-import { CertKeyAlgorithm } from "../certificate/certificate-types";
+import { CertExtendedKeyUsage, CertKeyAlgorithm, CertKeyUsage } from "../certificate/certificate-types";
 import { TCertificateAuthorityCertDALFactory } from "./certificate-authority-cert-dal";
 import { TCertificateAuthorityDALFactory } from "./certificate-authority-dal";
 import { TCertificateAuthoritySecretDALFactory } from "./certificate-authority-secret-dal";
@@ -97,6 +97,8 @@ export type TIssueCertFromCaDTO = {
   ttl: string;
   notBefore?: string;
   notAfter?: string;
+  keyUsages?: CertKeyUsage[];
+  extendedKeyUsages?: CertExtendedKeyUsage[];
 } & Omit<TProjectPermission, "projectId">;
 
 export type TSignCertFromCaDTO =
@@ -112,6 +114,8 @@ export type TSignCertFromCaDTO =
       ttl?: string;
       notBefore?: string;
       notAfter?: string;
+      keyUsages?: CertKeyUsage[];
+      extendedKeyUsages?: CertExtendedKeyUsage[];
     }
   | ({
       isInternal: false;
@@ -125,6 +129,8 @@ export type TSignCertFromCaDTO =
       ttl: string;
       notBefore?: string;
       notAfter?: string;
+      keyUsages?: CertKeyUsage[];
+      extendedKeyUsages?: CertExtendedKeyUsage[];
     } & Omit<TProjectPermission, "projectId">);
 
 export type TGetCaCertificateTemplatesDTO = {

backend/src/services/certificate-template/certificate-template-schema.ts

@@ -9,7 +9,9 @@ export const sanitizedCertificateTemplate = CertificateTemplatesSchema.pick({
   commonName: true,
   subjectAlternativeName: true,
   pkiCollectionId: true,
-  ttl: true
+  ttl: true,
+  keyUsages: true,
+  extendedKeyUsages: true
 }).merge(
   z.object({
     projectId: z.string(),

backend/src/services/certificate-template/certificate-template-service.ts

@@ -57,7 +57,9 @@ export const certificateTemplateServiceFactory = ({
     actorId,
     actorAuthMethod,
     actor,
-    actorOrgId
+    actorOrgId,
+    keyUsages,
+    extendedKeyUsages
   }: TCreateCertTemplateDTO) => {
     const ca = await certificateAuthorityDAL.findById(caId);
     if (!ca) {
@@ -86,7 +88,9 @@ export const certificateTemplateServiceFactory = ({
           name,
           commonName,
           subjectAlternativeName,
-          ttl
+          ttl,
+          keyUsages,
+          extendedKeyUsages
         },
         tx
       );
@@ -113,7 +117,9 @@ export const certificateTemplateServiceFactory = ({
     actorId,
     actorAuthMethod,
     actor,
-    actorOrgId
+    actorOrgId,
+    keyUsages,
+    extendedKeyUsages
   }: TUpdateCertTemplateDTO) => {
     const certTemplate = await certificateTemplateDAL.getById(id);
     if (!certTemplate) {
@@ -153,7 +159,9 @@ export const certificateTemplateServiceFactory = ({
           commonName,
           subjectAlternativeName,
           name,
-          ttl
+          ttl,
+          keyUsages,
+          extendedKeyUsages
         },
         tx
       );

backend/src/services/certificate-template/certificate-template-types.ts

@@ -1,4 +1,5 @@
 import { TProjectPermission } from "@app/lib/types";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/services/certificate/certificate-types";
 
 export type TCreateCertTemplateDTO = {
   caId: string;
@@ -7,6 +8,8 @@ export type TCreateCertTemplateDTO = {
   commonName: string;
   subjectAlternativeName: string;
   ttl: string;
+  keyUsages: CertKeyUsage[];
+  extendedKeyUsages: CertExtendedKeyUsage[];
 } & Omit<TProjectPermission, "projectId">;
 
 export type TUpdateCertTemplateDTO = {
@@ -17,6 +20,8 @@ export type TUpdateCertTemplateDTO = {
   commonName?: string;
   subjectAlternativeName?: string;
   ttl?: string;
+  keyUsages?: CertKeyUsage[];
+  extendedKeyUsages?: CertExtendedKeyUsage[];
 } & Omit<TProjectPermission, "projectId">;
 
 export type TGetCertTemplateDTO = {

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

@@ -1,3 +1,5 @@
+import * as x509 from "@peculiar/x509";
+
 import { TProjectPermission } from "@app/lib/types";
 
 export enum CertStatus {
@@ -12,6 +14,36 @@ export enum CertKeyAlgorithm {
   ECDSA_P384 = "EC_secp384r1"
 }
 
+export enum CertKeyUsage {
+  DIGITAL_SIGNATURE = "digitalSignature",
+  KEY_ENCIPHERMENT = "keyEncipherment",
+  NON_REPUDIATION = "nonRepudiation",
+  DATA_ENCIPHERMENT = "dataEncipherment",
+  KEY_AGREEMENT = "keyAgreement",
+  KEY_CERT_SIGN = "keyCertSign",
+  CRL_SIGN = "cRLSign",
+  ENCIPHER_ONLY = "encipherOnly",
+  DECIPHER_ONLY = "decipherOnly"
+}
+
+export enum CertExtendedKeyUsage {
+  CLIENT_AUTH = "clientAuth",
+  SERVER_AUTH = "serverAuth",
+  CODE_SIGNING = "codeSigning",
+  EMAIL_PROTECTION = "emailProtection",
+  TIMESTAMPING = "timeStamping",
+  OCSP_SIGNING = "ocspSigning"
+}
+
+export const CertExtendedKeyUsageOIDToName: Record<string, CertExtendedKeyUsage> = {
+  [x509.ExtendedKeyUsage.clientAuth]: CertExtendedKeyUsage.CLIENT_AUTH,
+  [x509.ExtendedKeyUsage.serverAuth]: CertExtendedKeyUsage.SERVER_AUTH,
+  [x509.ExtendedKeyUsage.codeSigning]: CertExtendedKeyUsage.CODE_SIGNING,
+  [x509.ExtendedKeyUsage.emailProtection]: CertExtendedKeyUsage.EMAIL_PROTECTION,
+  [x509.ExtendedKeyUsage.ocspSigning]: CertExtendedKeyUsage.OCSP_SIGNING,
+  [x509.ExtendedKeyUsage.timeStamping]: CertExtendedKeyUsage.TIMESTAMPING
+};
+
 export enum CrlReason {
   UNSPECIFIED = "UNSPECIFIED",
   KEY_COMPROMISE = "KEY_COMPROMISE",

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

@@ -152,7 +152,7 @@ export const groupProjectDALFactory = (db: TDbClient) => {
         `${TableName.ProjectRoles}.id`
       )
       .select(
-        db.ref("id").withSchema(TableName.GroupProjectMembership),
+        db.ref("id").withSchema(TableName.UserGroupMembership),
         db.ref("isGhost").withSchema(TableName.Users),
         db.ref("username").withSchema(TableName.Users),
         db.ref("email").withSchema(TableName.Users),

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

@@ -1,9 +1,11 @@
 import { Knex } from "knex";
 
 import { TDbClient } from "@app/db";
-import { TableName } from "@app/db/schemas";
+import { TableName, TIdentities } from "@app/db/schemas";
 import { DatabaseError } from "@app/lib/errors";
-import { ormify, sqlNestRelationships } from "@app/lib/knex";
+import { ormify, selectAllTableCols, sqlNestRelationships } from "@app/lib/knex";
+import { OrderByDirection } from "@app/lib/types";
+import { ProjectIdentityOrderBy, TListProjectIdentityDTO } from "@app/services/identity-project/identity-project-types";
 
 export type TIdentityProjectDALFactory = ReturnType<typeof identityProjectDALFactory>;
 
@@ -107,12 +109,45 @@ export const identityProjectDALFactory = (db: TDbClient) => {
     }
   };
 
-  const findByProjectId = async (projectId: string, filter: { identityId?: string } = {}, tx?: Knex) => {
+  const findByProjectId = async (
+    projectId: string,
+    filter: { identityId?: string } & Pick<
+      TListProjectIdentityDTO,
+      "limit" | "offset" | "search" | "orderBy" | "orderDirection"
+    > = {},
+    tx?: Knex
+  ) => {
     try {
-      const docs = await (tx || db.replicaNode())(TableName.IdentityProjectMembership)
+      // TODO: scott - optimize, there's redundancy here with project membership and the below query
+      const fetchIdentitySubquery = (tx || db.replicaNode())(TableName.Identity)
+        .where((qb) => {
+          if (filter.search) {
+            void qb.whereILike(`${TableName.Identity}.name`, `%${filter.search}%`);
+          }
+        })
+        .join(
+          TableName.IdentityProjectMembership,
+          `${TableName.IdentityProjectMembership}.identityId`,
+          `${TableName.Identity}.id`
+        )
+        .where(`${TableName.IdentityProjectMembership}.projectId`, projectId)
+        .orderBy(
+          `${TableName.Identity}.${filter.orderBy ?? ProjectIdentityOrderBy.Name}`,
+          filter.orderDirection ?? OrderByDirection.ASC
+        )
+        .select(selectAllTableCols(TableName.Identity))
+        .as(TableName.Identity); // required for subqueries
+
+      if (filter.limit) {
+        void fetchIdentitySubquery.offset(filter.offset ?? 0).limit(filter.limit);
+      }
+
+      const query = (tx || db.replicaNode())(TableName.IdentityProjectMembership)
         .where(`${TableName.IdentityProjectMembership}.projectId`, projectId)
         .join(TableName.Project, `${TableName.IdentityProjectMembership}.projectId`, `${TableName.Project}.id`)
-        .join(TableName.Identity, `${TableName.IdentityProjectMembership}.identityId`, `${TableName.Identity}.id`)
+        .join<TIdentities, TIdentities>(fetchIdentitySubquery, (bd) => {
+          bd.on(`${TableName.IdentityProjectMembership}.identityId`, `${TableName.Identity}.id`);
+        })
         .where((qb) => {
           if (filter.identityId) {
             void qb.where("identityId", filter.identityId);
@@ -154,6 +189,19 @@ export const identityProjectDALFactory = (db: TDbClient) => {
           db.ref("name").as("projectName").withSchema(TableName.Project)
         );
 
+      // TODO: scott - joins seem to reorder identities so need to order again, for the sake of urgency will optimize at a later point
+      if (filter.orderBy) {
+        switch (filter.orderBy) {
+          case "name":
+            void query.orderBy(`${TableName.Identity}.${filter.orderBy}`, filter.orderDirection);
+            break;
+          default:
+          // do nothing
+        }
+      }
+
+      const docs = await query;
+
       const members = sqlNestRelationships({
         data: docs,
         parentMapper: ({ identityId, identityName, identityAuthMethod, id, createdAt, updatedAt, projectName }) => ({
@@ -208,9 +256,37 @@ export const identityProjectDALFactory = (db: TDbClient) => {
     }
   };
 
+  const getCountByProjectId = async (
+    projectId: string,
+    filter: { identityId?: string } & Pick<TListProjectIdentityDTO, "search"> = {},
+    tx?: Knex
+  ) => {
+    try {
+      const identities = await (tx || db.replicaNode())(TableName.IdentityProjectMembership)
+        .where(`${TableName.IdentityProjectMembership}.projectId`, projectId)
+        .join(TableName.Project, `${TableName.IdentityProjectMembership}.projectId`, `${TableName.Project}.id`)
+        .join(TableName.Identity, `${TableName.IdentityProjectMembership}.identityId`, `${TableName.Identity}.id`)
+        .where((qb) => {
+          if (filter.identityId) {
+            void qb.where("identityId", filter.identityId);
+          }
+
+          if (filter.search) {
+            void qb.whereILike(`${TableName.Identity}.name`, `%${filter.search}%`);
+          }
+        })
+        .count();
+
+      return Number(identities[0].count);
+    } catch (error) {
+      throw new DatabaseError({ error, name: "GetCountByProjectId" });
+    }
+  };
+
   return {
     ...identityProjectOrm,
     findByIdentityId,
-    findByProjectId
+    findByProjectId,
+    getCountByProjectId
   };
 };

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

@@ -268,7 +268,12 @@ export const identityProjectServiceFactory = ({
     actor,
     actorId,
     actorAuthMethod,
-    actorOrgId
+    actorOrgId,
+    limit,
+    offset,
+    orderBy,
+    orderDirection,
+    search
   }: TListProjectIdentityDTO) => {
     const { permission } = await permissionService.getProjectPermission(
       actor,
@@ -279,8 +284,17 @@ export const identityProjectServiceFactory = ({
     );
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Identity);
 
-    const identityMemberships = await identityProjectDAL.findByProjectId(projectId);
-    return identityMemberships;
+    const identityMemberships = await identityProjectDAL.findByProjectId(projectId, {
+      limit,
+      offset,
+      orderBy,
+      orderDirection,
+      search
+    });
+
+    const totalCount = await identityProjectDAL.getCountByProjectId(projectId, { search });
+
+    return { identityMemberships, totalCount };
   };
 
   const getProjectIdentityByIdentityId = async ({

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

@@ -1,4 +1,4 @@
-import { TProjectPermission } from "@app/lib/types";
+import { OrderByDirection, TProjectPermission } from "@app/lib/types";
 
 import { ProjectUserMembershipTemporaryMode } from "../project-membership/project-membership-types";
 
@@ -40,8 +40,18 @@ export type TDeleteProjectIdentityDTO = {
   identityId: string;
 } & TProjectPermission;
 
-export type TListProjectIdentityDTO = TProjectPermission;
+export type TListProjectIdentityDTO = {
+  limit?: number;
+  offset?: number;
+  orderBy?: ProjectIdentityOrderBy;
+  orderDirection?: OrderByDirection;
+  search?: string;
+} & TProjectPermission;
 
 export type TGetProjectIdentityByIdentityIdDTO = {
   identityId: string;
 } & TProjectPermission;
+
+export enum ProjectIdentityOrderBy {
+  Name = "name"
+}

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

@@ -4,6 +4,8 @@ import { TDbClient } from "@app/db";
 import { TableName, TIdentityOrgMemberships } from "@app/db/schemas";
 import { DatabaseError } from "@app/lib/errors";
 import { ormify, selectAllTableCols } from "@app/lib/knex";
+import { OrderByDirection } from "@app/lib/types";
+import { TListOrgIdentitiesByOrgIdDTO } from "@app/services/identity/identity-types";
 
 export type TIdentityOrgDALFactory = ReturnType<typeof identityOrgDALFactory>;
 
@@ -27,9 +29,20 @@ export const identityOrgDALFactory = (db: TDbClient) => {
     }
   };
 
-  const find = async (filter: Partial<TIdentityOrgMemberships>, tx?: Knex) => {
+  const find = async (
+    {
+      limit,
+      offset = 0,
+      orderBy,
+      orderDirection = OrderByDirection.ASC,
+      search,
+      ...filter
+    }: Partial<TIdentityOrgMemberships> &
+      Pick<TListOrgIdentitiesByOrgIdDTO, "offset" | "limit" | "orderBy" | "orderDirection" | "search">,
+    tx?: Knex
+  ) => {
     try {
-      const docs = await (tx || db.replicaNode())(TableName.IdentityOrgMembership)
+      const query = (tx || db.replicaNode())(TableName.IdentityOrgMembership)
         .where(filter)
         .join(TableName.Identity, `${TableName.IdentityOrgMembership}.identityId`, `${TableName.Identity}.id`)
         .leftJoin(TableName.OrgRoles, `${TableName.IdentityOrgMembership}.roleId`, `${TableName.OrgRoles}.id`)
@@ -44,6 +57,30 @@ export const identityOrgDALFactory = (db: TDbClient) => {
         .select(db.ref("id").as("identityId").withSchema(TableName.Identity))
         .select(db.ref("name").as("identityName").withSchema(TableName.Identity))
         .select(db.ref("authMethod").as("identityAuthMethod").withSchema(TableName.Identity));
+
+      if (limit) {
+        void query.offset(offset).limit(limit);
+      }
+
+      if (orderBy) {
+        switch (orderBy) {
+          case "name":
+            void query.orderBy(`${TableName.Identity}.${orderBy}`, orderDirection);
+            break;
+          case "role":
+            void query.orderBy(`${TableName.IdentityOrgMembership}.${orderBy}`, orderDirection);
+            break;
+          default:
+          // do nothing
+        }
+      }
+
+      if (search?.length) {
+        void query.whereILike(`${TableName.Identity}.name`, `%${search}%`);
+      }
+
+      const docs = await query;
+
       return docs.map(
         ({
           crId,
@@ -79,5 +116,27 @@ export const identityOrgDALFactory = (db: TDbClient) => {
     }
   };
 
-  return { ...identityOrgOrm, find, findOne };
+  const countAllOrgIdentities = async (
+    { search, ...filter }: Partial<TIdentityOrgMemberships> & Pick<TListOrgIdentitiesByOrgIdDTO, "search">,
+    tx?: Knex
+  ) => {
+    try {
+      const query = (tx || db.replicaNode())(TableName.IdentityOrgMembership)
+        .where(filter)
+        .join(TableName.Identity, `${TableName.IdentityOrgMembership}.identityId`, `${TableName.Identity}.id`)
+        .count();
+
+      if (search?.length) {
+        void query.whereILike(`${TableName.Identity}.name`, `%${search}%`);
+      }
+
+      const identities = await query;
+
+      return Number(identities[0].count);
+    } catch (error) {
+      throw new DatabaseError({ error, name: "countAllOrgIdentities" });
+    }
+  };
+
+  return { ...identityOrgOrm, find, findOne, countAllOrgIdentities };
 };

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

@@ -6,7 +6,6 @@ import { OrgPermissionActions, OrgPermissionSubjects } from "@app/ee/services/pe
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
 import { isAtLeastAsPrivileged } from "@app/lib/casl";
 import { BadRequestError, ForbiddenRequestError, NotFoundError } from "@app/lib/errors";
-import { TOrgPermission } from "@app/lib/types";
 import { TIdentityProjectDALFactory } from "@app/services/identity-project/identity-project-dal";
 
 import { ActorType } from "../auth/auth-type";
@@ -16,6 +15,7 @@ import {
   TCreateIdentityDTO,
   TDeleteIdentityDTO,
   TGetIdentityByIdDTO,
+  TListOrgIdentitiesByOrgIdDTO,
   TListProjectIdentitiesByIdentityIdDTO,
   TUpdateIdentityDTO
 } from "./identity-types";
@@ -58,7 +58,8 @@ export const identityServiceFactory = ({
     if (!hasRequiredPriviledges) throw new BadRequestError({ message: "Failed to create a more privileged identity" });
 
     const plan = await licenseService.getPlan(orgId);
-    if (plan?.identityLimit && plan.identitiesUsed >= plan.identityLimit) {
+
+    if (plan?.slug !== "enterprise" && plan?.identityLimit && plan.identitiesUsed >= plan.identityLimit) {
       // limit imposed on number of identities allowed / number of identities used exceeds the number of identities allowed
       throw new BadRequestError({
         message: "Failed to create identity due to identity limit reached. Upgrade plan to create more identities."
@@ -195,14 +196,36 @@ export const identityServiceFactory = ({
     return { ...deletedIdentity, orgId: identityOrgMembership.orgId };
   };
 
-  const listOrgIdentities = async ({ orgId, actor, actorId, actorAuthMethod, actorOrgId }: TOrgPermission) => {
+  const listOrgIdentities = async ({
+    orgId,
+    actor,
+    actorId,
+    actorAuthMethod,
+    actorOrgId,
+    limit,
+    offset,
+    orderBy,
+    orderDirection,
+    search
+  }: TListOrgIdentitiesByOrgIdDTO) => {
     const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Identity);
 
     const identityMemberships = await identityOrgMembershipDAL.find({
-      [`${TableName.IdentityOrgMembership}.orgId` as "orgId"]: orgId
+      [`${TableName.IdentityOrgMembership}.orgId` as "orgId"]: orgId,
+      limit,
+      offset,
+      orderBy,
+      orderDirection,
+      search
     });
-    return identityMemberships;
+
+    const totalCount = await identityOrgMembershipDAL.countAllOrgIdentities({
+      [`${TableName.IdentityOrgMembership}.orgId` as "orgId"]: orgId,
+      search
+    });
+
+    return { identityMemberships, totalCount };
   };
 
   const listProjectIdentitiesByIdentityId = async ({

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

@@ -1,5 +1,5 @@
 import { IPType } from "@app/lib/ip";
-import { TOrgPermission } from "@app/lib/types";
+import { OrderByDirection, TOrgPermission } from "@app/lib/types";
 
 export type TCreateIdentityDTO = {
   role: string;
@@ -29,3 +29,16 @@ export interface TIdentityTrustedIp {
 export type TListProjectIdentitiesByIdentityIdDTO = {
   identityId: string;
 } & Omit<TOrgPermission, "orgId">;
+
+export type TListOrgIdentitiesByOrgIdDTO = {
+  limit?: number;
+  offset?: number;
+  orderBy?: OrgIdentityOrderBy;
+  orderDirection?: OrderByDirection;
+  search?: string;
+} & TOrgPermission;
+
+export enum OrgIdentityOrderBy {
+  Name = "name",
+  Role = "role"
+}

backend/src/services/integration-auth/integration-app-list.ts

@@ -242,37 +242,12 @@ const getAppsGithub = async ({ accessToken }: { accessToken: string }) => {
     };
   }
 
-  const octokit = new Octokit({
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  const repos = (await new Octokit({
     auth: accessToken
-  });
-
-  const getAllRepos = async () => {
-    let repos: GitHubApp[] = [];
-    let page = 1;
-    const perPage = 100;
-    let hasMore = true;
-
-    while (hasMore) {
-      const response = await octokit.request(
-        "GET /user/repos{?visibility,affiliation,type,sort,direction,per_page,page,since,before}",
-        {
-          per_page: perPage,
-          page
-        }
-      );
-
-      if ((response.data as GitHubApp[]).length > 0) {
-        repos = repos.concat(response.data as GitHubApp[]);
-        page += 1;
-      } else {
-        hasMore = false;
-      }
-    }
-
-    return repos;
-  };
-
-  const repos = await getAllRepos();
+  }).paginate("GET /user/repos{?visibility,affiliation,type,sort,direction,per_page,page,since,before}", {
+    per_page: 100
+  })) as GitHubApp[];
 
   const apps = repos
     .filter((a: GitHubApp) => a.permissions.admin === true)

backend/src/services/integration-auth/integration-sync-secret.ts

@@ -207,6 +207,12 @@ const syncSecretsGCPSecretManager = async ({
         }
       );
 
+      if (!secrets[key].value) {
+        logger.warn(
+          `syncSecretsGcpsecretManager: create secret value in gcp where [key=${key}] and integration appId [appId=${integration.appId}]`
+        );
+      }
+
       await request.post(
         `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets/${key}:addVersion`,
         {
@@ -237,6 +243,12 @@ const syncSecretsGCPSecretManager = async ({
         }
       );
     } else if (secrets[key].value !== res[key]) {
+      if (!secrets[key].value) {
+        logger.warn(
+          `syncSecretsGcpsecretManager: update secret value in gcp where [key=${key}] and integration appId [appId=${integration.appId}]`
+        );
+      }
+
       await request.post(
         `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${integration.appId}/secrets/${key}:addVersion`,
         {

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

@@ -17,7 +17,6 @@ import {
 } from "@app/db/schemas";
 import { TProjects } from "@app/db/schemas/projects";
 import { TGroupDALFactory } from "@app/ee/services/group/group-dal";
-import { TUserGroupMembershipDALFactory } from "@app/ee/services/group/user-group-membership-dal";
 import { TLicenseServiceFactory } from "@app/ee/services/license/license-service";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/ee/services/permission/org-permission";
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
@@ -90,7 +89,6 @@ type TOrgServiceFactoryDep = {
   >;
   projectUserAdditionalPrivilegeDAL: Pick<TProjectUserAdditionalPrivilegeDALFactory, "delete">;
   projectRoleDAL: Pick<TProjectRoleDALFactory, "find">;
-  userGroupMembershipDAL: Pick<TUserGroupMembershipDALFactory, "findUserGroupMembershipsInProject">;
   projectBotDAL: Pick<TProjectBotDALFactory, "findOne">;
   projectUserMembershipRoleDAL: Pick<TProjectUserMembershipRoleDALFactory, "insertMany">;
 };
@@ -116,7 +114,6 @@ export const orgServiceFactory = ({
   licenseService,
   projectRoleDAL,
   samlConfigDAL,
-  userGroupMembershipDAL,
   projectBotDAL,
   projectUserMembershipRoleDAL
 }: TOrgServiceFactoryDep) => {
@@ -458,7 +455,6 @@ export const orgServiceFactory = ({
     const appCfg = getConfig();
 
     const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
-    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Create, OrgPermissionSubjects.Member);
 
     const org = await orgDAL.findOrgById(orgId);
 
@@ -476,19 +472,20 @@ export const orgServiceFactory = ({
       });
     }
     const plan = await licenseService.getPlan(orgId);
-    if (plan?.memberLimit && plan.membersUsed >= plan.memberLimit) {
+    if (plan?.slug !== "enterprise" && plan?.memberLimit && plan.membersUsed >= plan.memberLimit) {
       // limit imposed on number of members allowed / number of members used exceeds the number of members allowed
       throw new BadRequestError({
         message: "Failed to invite member due to member limit reached. Upgrade plan to invite more members."
       });
     }
 
-    if (plan?.identityLimit && plan.identitiesUsed >= plan.identityLimit) {
+    if (plan?.slug !== "enterprise" && plan?.identityLimit && plan.identitiesUsed >= plan.identityLimit) {
       // limit imposed on number of identities allowed / number of identities used exceeds the number of identities allowed
       throw new BadRequestError({
         message: "Failed to invite member due to member limit reached. Upgrade plan to invite more members."
       });
     }
+
     const isCustomOrgRole = !Object.values(OrgMembershipRole).includes(organizationRoleSlug as OrgMembershipRole);
     if (isCustomOrgRole) {
       if (!plan?.rbac)
@@ -583,6 +580,8 @@ export const orgServiceFactory = ({
 
         // if there exist no org membership we set is as given by the request
         if (!inviteeMembership) {
+          // as its used by project invite also
+          ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Create, OrgPermissionSubjects.Member);
           let roleId;
           const orgRole = isCustomOrgRole ? OrgMembershipRole.Custom : organizationRoleSlug;
           if (isCustomOrgRole) {
@@ -616,7 +615,6 @@ export const orgServiceFactory = ({
       }
 
       const userIds = users.map(({ id }) => id);
-      const usernames = users.map((el) => el.username);
       const userEncryptionKeys = await userDAL.findUserEncKeyByUserIdsBatch({ userIds }, tx);
       // we don't need to spam with email. Thus org invitation doesn't need project invitation again
       const userIdsWithOrgInvitation = new Set(mailsForOrgInvitation.map((el) => el.userId));
@@ -643,12 +641,10 @@ export const orgServiceFactory = ({
           { tx }
         );
         const existingMembersGroupByUserId = groupBy(existingMembers, (i) => i.userId);
-        const userIdsToExcludeAsPartOfGroup = new Set(
-          await userGroupMembershipDAL.findUserGroupMembershipsInProject(usernames, projectId, tx)
-        );
         const userWithEncryptionKeyInvitedToProject = userEncryptionKeys.filter(
-          (user) => !existingMembersGroupByUserId?.[user.userId] && !userIdsToExcludeAsPartOfGroup.has(user.userId)
+          (user) => !existingMembersGroupByUserId?.[user.userId]
         );
+
         // eslint-disable-next-line no-continue
         if (!userWithEncryptionKeyInvitedToProject.length) continue;
 

backend/src/services/project-bot/project-bot-fns.ts

@@ -26,7 +26,10 @@ export const getBotKeyFnFactory = (
 ) => {
   const getBotKeyFn = async (projectId: string) => {
     const project = await projectDAL.findById(projectId);
-    if (!project) throw new BadRequestError({ message: "Project not found during bot lookup." });
+    if (!project)
+      throw new BadRequestError({
+        message: "Project not found during bot lookup. Are you sure you are using the correct project ID?"
+      });
 
     if (project.version === 3) {
       return { project, shouldUseSecretV2Bridge: true };

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

@@ -90,15 +90,20 @@ export const projectMembershipServiceFactory = ({
     // projectMembers[0].project
     if (includeGroupMembers) {
       const groupMembers = await groupProjectDAL.findAllProjectGroupMembers(projectId);
-
       const allMembers = [
         ...projectMembers.map((m) => ({ ...m, isGroupMember: false })),
         ...groupMembers.map((m) => ({ ...m, isGroupMember: true }))
       ];
 
       // Ensure the userId is unique
-      const membersIds = new Set(allMembers.map((entity) => entity.user.id));
-      const uniqueMembers = allMembers.filter((entity) => membersIds.has(entity.user.id));
+      const uniqueMembers: typeof allMembers = [];
+      const addedUserIds = new Set<string>();
+      allMembers.forEach((member) => {
+        if (!addedUserIds.has(member.user.id)) {
+          uniqueMembers.push(member);
+          addedUserIds.add(member.user.id);
+        }
+      });
 
       return uniqueMembers;
     }

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

@@ -7,7 +7,8 @@ import { TPermissionServiceFactory } from "@app/ee/services/permission/permissio
 import {
   ProjectPermissionActions,
   ProjectPermissionSet,
-  ProjectPermissionSub
+  ProjectPermissionSub,
+  validateProjectPermissions
 } from "@app/ee/services/permission/project-permission";
 import { BadRequestError } from "@app/lib/errors";
 
@@ -56,6 +57,9 @@ export const projectRoleServiceFactory = ({
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Create, ProjectPermissionSub.Role);
     const existingRole = await projectRoleDAL.findOne({ slug: data.slug, projectId });
     if (existingRole) throw new BadRequestError({ name: "Create Role", message: "Duplicate role" });
+
+    validateProjectPermissions(data.permissions);
+
     const role = await projectRoleDAL.create({
       ...data,
       projectId
@@ -120,6 +124,11 @@ export const projectRoleServiceFactory = ({
       if (existingRole && existingRole.id !== roleId)
         throw new BadRequestError({ name: "Update Role", message: "Duplicate role" });
     }
+
+    if (data.permissions) {
+      validateProjectPermissions(data.permissions);
+    }
+
     const [updatedRole] = await projectRoleDAL.update(
       { id: roleId, projectId },
       {

backend/src/services/secret-import/secret-import-service.ts

@@ -512,7 +512,11 @@ export const secretImportServiceFactory = ({
       return importedSecrets;
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
 
     const importedSecrets = await fnSecretsFromImports({ allowedImports, folderDAL, secretDAL, secretImportDAL });
     return importedSecrets.map((el) => ({

backend/src/services/secret/secret-fns.ts

@@ -832,7 +832,11 @@ export const createManySecretsRawFnFactory = ({
       secretDAL
     });
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     const inputSecrets = secrets.map((secret) => {
       const secretKeyEncrypted = encryptSymmetric128BitHexKeyUTF8(secret.secretName, botKey);
       const secretValueEncrypted = encryptSymmetric128BitHexKeyUTF8(secret.secretValue || "", botKey);
@@ -993,7 +997,11 @@ export const updateManySecretsRawFnFactory = ({
       return updatedSecrets;
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     const blindIndexCfg = await secretBlindIndexDAL.findOne({ projectId });
     if (!blindIndexCfg) throw new BadRequestError({ message: "Blind index not found", name: "Update secret" });
 

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

@@ -985,7 +985,11 @@ export const secretServiceFactory = ({
       return { secrets, imports };
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
 
     const { secrets, imports } = await getSecrets({
       actorId,
@@ -1146,7 +1150,10 @@ export const secretServiceFactory = ({
     });
 
     if (!botKey)
-      throw new BadRequestError({ message: "Please upgrade your project first", name: "bot_not_found_error" });
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     const decryptedSecret = decryptSecretRaw(encryptedSecret, botKey);
 
     if (expandSecretReferences) {
@@ -1238,7 +1245,11 @@ export const secretServiceFactory = ({
       return { secret, type: SecretProtectionType.Direct as const };
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     const secretKeyEncrypted = encryptSymmetric128BitHexKeyUTF8(secretName, botKey);
     const secretValueEncrypted = encryptSymmetric128BitHexKeyUTF8(secretValue || "", botKey);
     const secretCommentEncrypted = encryptSymmetric128BitHexKeyUTF8(secretComment || "", botKey);
@@ -1376,7 +1387,11 @@ export const secretServiceFactory = ({
       return { type: SecretProtectionType.Direct as const, secret };
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
 
     const secretValueEncrypted = encryptSymmetric128BitHexKeyUTF8(secretValue || "", botKey);
     const secretCommentEncrypted = encryptSymmetric128BitHexKeyUTF8(secretComment || "", botKey);
@@ -1498,7 +1513,11 @@ export const secretServiceFactory = ({
       });
       return { type: SecretProtectionType.Direct as const, secret };
     }
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     if (policy) {
       const approval = await secretApprovalRequestService.generateSecretApprovalRequest({
         policy,
@@ -1598,7 +1617,11 @@ export const secretServiceFactory = ({
       return { secrets, type: SecretProtectionType.Direct as const };
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     const sanitizedSecrets = inputSecrets.map(
       ({ secretComment, secretKey, metadata, tagIds, secretValue, skipMultilineEncoding }) => {
         const secretKeyEncrypted = encryptSymmetric128BitHexKeyUTF8(secretKey, botKey);
@@ -1720,7 +1743,11 @@ export const secretServiceFactory = ({
       return { type: SecretProtectionType.Direct as const, secrets };
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     const sanitizedSecrets = inputSecrets.map(
       ({
         secretComment,
@@ -1848,7 +1875,11 @@ export const secretServiceFactory = ({
       return { type: SecretProtectionType.Direct as const, secrets };
     }
 
-    if (!botKey) throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+    if (!botKey)
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
 
     if (policy) {
       const approval = await secretApprovalRequestService.generateSecretApprovalRequest({
@@ -2182,7 +2213,10 @@ export const secretServiceFactory = ({
     }
 
     if (!botKey)
-      throw new BadRequestError({ message: "Please upgrade your project first", name: "bot_not_found_error" });
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
 
     await secretDAL.transaction(async (tx) => {
       const secrets = await secretDAL.findAllProjectSecretValues(projectId, tx);
@@ -2265,7 +2299,10 @@ export const secretServiceFactory = ({
 
     const { botKey } = await projectBotService.getBotKey(project.id);
     if (!botKey) {
-      throw new BadRequestError({ message: "Project bot not found", name: "bot_not_found_error" });
+      throw new BadRequestError({
+        message: "Project bot not found. Please upgrade your project.",
+        name: "bot_not_found_error"
+      });
     }
 
     const sourceFolder = await folderDAL.findBySecretPath(project.id, sourceEnvironment, sourceSecretPath);

cli/packages/cmd/root.go

@@ -4,6 +4,7 @@ Copyright (c) 2023 Infisical Inc.
 package cmd
 
 import (
+	"fmt"
 	"os"
 	"strings"
 
@@ -43,14 +44,26 @@ func init() {
 	rootCmd.PersistentFlags().Bool("silent", false, "Disable output of tip/info messages. Useful when running in scripts or CI/CD pipelines.")
 	rootCmd.PersistentPreRun = func(cmd *cobra.Command, args []string) {
 		silent, err := cmd.Flags().GetBool("silent")
-		config.INFISICAL_URL = util.AppendAPIEndpoint(config.INFISICAL_URL)
 		if err != nil {
 			util.HandleError(err)
 		}
 
+		config.INFISICAL_URL = util.AppendAPIEndpoint(config.INFISICAL_URL)
+
 		if !util.IsRunningInDocker() && !silent {
 			util.CheckForUpdate()
 		}
+
+		loggedInDetails, err := util.GetCurrentLoggedInUserDetails()
+
+		if !silent && err == nil && loggedInDetails.IsUserLoggedIn && !loggedInDetails.LoginExpired {
+			token, err := util.GetInfisicalToken(cmd)
+
+			if err == nil && token != nil {
+				util.PrintWarning(fmt.Sprintf("Your logged-in session is being overwritten by the token provided from the %s.", token.Source))
+			}
+		}
+
 	}
 
 	// if config.INFISICAL_URL is set to the default value, check if INFISICAL_URL is set in the environment

cli/packages/cmd/secrets.go

@@ -160,19 +160,19 @@ var secretsSetCmd = &cobra.Command{
 			util.HandleError(err, "Unable to parse flag")
 		}
 
-		if (token == nil) {
+		if token == nil {
 			util.RequireLocalWorkspaceFile()
 		}
 
 		environmentName, _ := cmd.Flags().GetString("env")
 		if !cmd.Flags().Changed("env") {
-			environmentFromWorkspace := util.GetEnvFromWorkspaceFile()	
+			environmentFromWorkspace := util.GetEnvFromWorkspaceFile()
 			if environmentFromWorkspace != "" {
 				environmentName = environmentFromWorkspace
 			}
 		}
 
-				projectId, err := cmd.Flags().GetString("projectId")
+		projectId, err := cmd.Flags().GetString("projectId")
 		if err != nil {
 			util.HandleError(err, "Unable to parse flag")
 		}

cli/packages/models/cli.go

@@ -63,8 +63,9 @@ type DynamicSecretLease struct {
 }
 
 type TokenDetails struct {
-	Type  string
-	Token string
+	Type   string
+	Token  string
+	Source string
 }
 
 type SingleFolder struct {

cli/packages/util/helper.go

@@ -87,11 +87,15 @@ func GetInfisicalToken(cmd *cobra.Command) (token *models.TokenDetails, err erro
 		return nil, err
 	}
 
+	var source = "--token flag"
+
 	if infisicalToken == "" { // If no flag is passed, we first check for the universal auth access token env variable.
 		infisicalToken = os.Getenv(INFISICAL_UNIVERSAL_AUTH_ACCESS_TOKEN_NAME)
+		source = fmt.Sprintf("%s environment variable", INFISICAL_UNIVERSAL_AUTH_ACCESS_TOKEN_NAME)
 
 		if infisicalToken == "" { // If it's still empty after the first env check, we check for the service token env variable.
 			infisicalToken = os.Getenv(INFISICAL_TOKEN_NAME)
+			source = fmt.Sprintf("%s environment variable", INFISICAL_TOKEN_NAME)
 		}
 	}
 
@@ -101,14 +105,16 @@ func GetInfisicalToken(cmd *cobra.Command) (token *models.TokenDetails, err erro
 
 	if strings.HasPrefix(infisicalToken, "st.") {
 		return &models.TokenDetails{
-			Type:  SERVICE_TOKEN_IDENTIFIER,
-			Token: infisicalToken,
+			Type:   SERVICE_TOKEN_IDENTIFIER,
+			Token:  infisicalToken,
+			Source: source,
 		}, nil
 	}
 
 	return &models.TokenDetails{
-		Type:  UNIVERSAL_AUTH_TOKEN_IDENTIFIER,
-		Token: infisicalToken,
+		Type:   UNIVERSAL_AUTH_TOKEN_IDENTIFIER,
+		Token:  infisicalToken,
+		Source: source,
 	}, nil
 
 }

docs/api-reference/endpoints/project-roles/create.mdx

@@ -2,3 +2,7 @@
 title: "Create"
 openapi: "POST /api/v1/workspace/{projectSlug}/roles"
 ---
+
+<Note>
+  You can read more about the permissions field in the [permissions documentation](/internals/permissions).
+</Note>

docs/documentation/platform/pki/certificates.mdx

@@ -60,6 +60,8 @@ In the following steps, we explore how to issue a X.509 certificate under a CA.
     - Common Name (CN): A regular expression used to validate the common name in certificate requests.
     - Alternative Names (SANs): A regular expression used to validate subject alternative names in certificate requests.
     - TTL: The maximum Time-to-Live (TTL) for certificates issued using this template.
+    - Key Usage: The key usage constraint or default value for certificates issued using this template.
+    - Extended Key Usage: The extended key usage constraint or default value for certificates issued using this template.
   </Step>
   <Step title="Creating a certificate">
     To create a certificate, head to your Project > Internal PKI > Certificates and press **Issue** under the Certificates section.
@@ -76,13 +78,16 @@ In the following steps, we explore how to issue a X.509 certificate under a CA.
     - Common Name (CN): The (common) name for the certificate like `service.acme.com`.
     - Alternative Names (SANs): A comma-delimited list of Subject Alternative Names (SANs) for the certificate; these can be host names or email addresses like `app1.acme.com, app2.acme.com`.
     - TTL: The lifetime of the certificate in seconds.
-    
+    - Key Usage: The key usage extension of the certificate.
+    - Extended Key Usage: The extended key usage extension of the certificate.
+
     <Note>
       Note that Infisical PKI supports issuing certificates without certificate templates as well. If this is desired, then you can set the **Certificate Template** field to **None**
       and specify the **Issuing CA** and optional **Certificate Collection** fields; the rest of the fields for the issued certificate remain the same.
-      
+
       That said, we recommend using certificate templates to enforce policies and attach expiration monitoring on issued certificates.
     </Note>
+
   </Step>
   <Step title="Copying the certificate details">
     Once you have created the certificate from step 1, you'll be presented with the certificate details including the **Certificate Body**, **Certificate Chain**, and **Private Key**.
@@ -105,7 +110,7 @@ In the following steps, we explore how to issue a X.509 certificate under a CA.
     With certificate templates, you can specify, for example, that issued certificates must have a common name (CN) adhering to a specific format like .*.acme.com or perhaps that the max TTL cannot be more than 1 year.
 
     To create a certificate template, make an API request to the [Create Certificate Template](/api-reference/endpoints/certificate-templates/create) API endpoint, specifying the issuing CA.
-    
+
     ### Sample request
 
     ```bash Request
@@ -132,6 +137,7 @@ In the following steps, we explore how to issue a X.509 certificate under a CA.
       ttl: "...",
     }
     ```
+
   </Step>
   <Step title="Creating a certificate">
     To create a certificate under the certificate template, make an API request to the [Issue Certificate](/api-reference/endpoints/certificates/issue-cert) API endpoint,
@@ -164,7 +170,7 @@ In the following steps, we explore how to issue a X.509 certificate under a CA.
     <Note>
       Note that Infisical PKI supports issuing certificates without certificate templates as well. If this is desired, then you can set the **Certificate Template** field to **None**
       and specify the **Issuing CA** and optional **Certificate Collection** fields; the rest of the fields for the issued certificate remain the same.
-      
+
       That said, we recommend using certificate templates to enforce policies and attach expiration monitoring on issued certificates.
     </Note>
 
@@ -197,6 +203,7 @@ In the following steps, we explore how to issue a X.509 certificate under a CA.
       serialNumber: "..."
     }
     ```
+
   </Step>
 </Steps>
   </Tab>

docs/internals/permissions.mdx

@@ -0,0 +1,83 @@
+---
+title: "Permissions"
+description: "Infisical's permissions system provides granular access control."
+---
+
+## Summary
+
+The Infisical permissions system is based on a role-based access control (RBAC) model. The system allows you to define roles and assign them to users and machines. Each role has a set of permissions that define what actions a user can perform.
+
+Permissions are built on a subject-action-object model. The subject is the resource permission is being applied to, the action is what the permission allows.
+An example of a subject/action combination would be `secrets/read`. This permission allows the subject to read secrets.
+
+Currently Infisical supports 4 actions:
+1. `read`, allows the subject to read the object.
+2. `create`, allows the subject to create the object.
+3. `edit`, allows the subject to edit the object.
+4. `delete`, allows the subject to delete the object.
+
+Most subjects support all 4 actions, but some subjects only support a subset of actions. Please view the table below for a list of subjects and the actions they support.
+
+
+## Subjects and Actions
+<Tabs>
+<Tab title="Project Permissions">
+
+<Note>
+  Not all actions are applicable to all subjects. As an example, the `secrets-rollback` subject only supports `read`, and `create` as actions. While `secrets` support `read`, `create`, `edit`, `delete`.
+</Note>
+
+  | Subject | Actions |
+  |-----------------------------|---------|
+  | `secrets`                     | `read`, `create`, `edit`, `delete` |
+  | `secret-approval`             | `read`, `create`, `edit`, `delete` |
+  | `secret-rotation`             | `read`, `create`, `edit`, `delete` |
+  | `secret-rollback`             | `read`, `create`                   |
+  | `member`                      | `read`, `create`, `edit`, `delete` |
+  | `groups`                      | `read`, `create`, `edit`, `delete` |
+  | `role`                        | `read`, `create`, `edit`, `delete` |
+  | `integrations`                | `read`, `create`, `edit`, `delete` |
+  | `webhooks`                    | `read`, `create`, `edit`, `delete` | 
+  | `identity`                    | `read`, `create`, `edit`, `delete` |
+  | `service-tokens`              | `read`, `create`, `edit`, `delete` |
+  | `settings`                    | `read`, `create`, `edit`, `delete` |
+  | `environments`                | `read`, `create`, `edit`, `delete` |
+  | `tags`                        | `read`, `create`, `edit`, `delete` |
+  | `audit-logs`                  | `read`, `create`, `edit`, `delete` |
+  | `ip-allowlist`                | `read`, `create`, `edit`, `delete` |
+  | `certificate-authorities`     | `read`, `create`, `edit`, `delete` |
+  | `certificates`                | `read`, `create`, `edit`, `delete` |
+  | `certificate-templates`       | `read`, `create`, `edit`, `delete` |
+  | `pki-alerts`                  | `read`, `create`, `edit`, `delete` |
+  | `pki-collections`             | `read`, `create`, `edit`, `delete` |
+  | `workspace`                   | `edit`, `delete`                   |
+  | `kms`                         | `edit`                             | 
+
+  These details are especially useful if you're using the API to [create new project roles](../api-reference/endpoints/project-roles/create).
+  The rules outlined on this page, also apply when using our Terraform Provider to manage your Infisical project roles, or any other of our clients that manage project roles.
+</Tab>
+
+
+<Tab title="Organization Permissions">
+
+  <Note>
+    Not all actions are applicable to all subjects. As an example, the `workspace` subject only supports `read`, and `create` as actions. While `member` support `read`, `create`, `edit`, `delete`.
+  </Note>
+
+  | Subject | Actions |
+  |-----------------------------|------------------------------------|
+  | `workspace`                 | `read`, `create`                   |
+  | `role`                      | `read`, `create`, `edit`, `delete` |
+  | `member`                    | `read`, `create`, `edit`, `delete` |
+  | `secret-scanning`           | `read`, `create`, `edit`, `delete` |
+  | `settings`                  | `read`, `create`, `edit`, `delete` |
+  | `incident-account`          | `read`, `create`, `edit`, `delete` |
+  | `sso`                       | `read`, `create`, `edit`, `delete` |
+  | `scim`                      | `read`, `create`, `edit`, `delete` |
+  | `ldap`                      | `read`, `create`, `edit`, `delete` |
+  | `groups`                    | `read`, `create`, `edit`, `delete` |
+  | `billing`                   | `read`, `create`, `edit`, `delete` |
+  | `identity`                  | `read`, `create`, `edit`, `delete` |
+  | `kms`                       | `read`                             |
+</Tab>
+</Tabs>

docs/mint.json

@@ -696,7 +696,12 @@
         {
           "group": "Audit Logs",
           "pages": ["api-reference/endpoints/audit-logs/export-audit-log"]
-        },
+        }
+      ]
+    },
+    {
+      "group": "Infisical PKI",
+      "pages": [
         {
           "group": "Certificate Authorities",
           "pages": [
@@ -764,6 +769,7 @@
       "group": "Internals",
       "pages": [
         "internals/overview",
+        "internals/permissions",
         "internals/components",
         "internals/flows",
         "internals/security",

frontend/src/components/v2/ComboBox/ComboBox.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { faCaretDown, faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Combobox, Transition } from "@headlessui/react";
+import { ByComparator } from "@headlessui/react/dist/types";
+import { twMerge } from "tailwind-merge";
+
+type ComboBoxProps<T extends object> = {
+  value?: T;
+  className?: string;
+  items: {
+    value: T;
+    key: string;
+    label: string;
+  }[];
+  by: ByComparator<T>;
+  defaultValue?: T;
+  displayValue: (value: T) => string;
+  onSelectChange: (value: T) => void;
+  onFilter: (value: { value: T }, filterQuery: string) => boolean;
+};
+
+// TODO(akhilmhdh): This is a very temporary one due to limitation of present situation
+// don't mind the api for now will be switched to aria later
+export const ComboBox = <T extends object>({
+  onSelectChange,
+  onFilter,
+  displayValue,
+  by,
+  items,
+  ...props
+}: ComboBoxProps<T>) => {
+  const [query, setQuery] = useState("");
+
+  const filteredResult =
+    query === "" ? items.slice(0, 20) : items.filter((el) => onFilter(el, query)).slice(0, 20);
+
+  return (
+    <Combobox by={by} {...props} onChange={onSelectChange}>
+      <div className="relative">
+        <Combobox.Input
+          onChange={(event) => setQuery(event.target.value)}
+          displayValue={displayValue}
+          className=" inline-flex w-full items-center justify-between rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-200"
+        />
+        <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+          <FontAwesomeIcon icon={faCaretDown} size="sm" aria-hidden="true" />
+        </Combobox.Button>
+        <Transition
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          afterLeave={() => setQuery("")}
+        >
+          <Combobox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md  bg-mineshaft-900 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+            {filteredResult.map(({ value, key, label }) => (
+              <Combobox.Option
+                key={key}
+                value={value}
+                className={({ active }) =>
+                  `relative cursor-pointer  select-none py-2 pl-10 pr-4 transition-all hover:bg-mineshaft-500 ${
+                    active ? "text-primary" : "text-white"
+                  }`
+                }
+              >
+                {({ selected }) => (
+                  <>
+                    {label}
+                    {selected ? (
+                      <div className={twMerge("absolute top-2 left-3 text-primary")}>
+                        <FontAwesomeIcon icon={faCheck} />
+                      </div>
+                    ) : null}
+                  </>
+                )}
+              </Combobox.Option>
+            ))}
+          </Combobox.Options>
+        </Transition>
+      </div>
+    </Combobox>
+  );
+};

frontend/src/components/v2/ComboBox/index.tsx

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

frontend/src/components/v2/Input/Input.tsx

@@ -11,6 +11,7 @@ type Props = {
   isDisabled?: boolean;
   isReadOnly?: boolean;
   autoCapitalization?: boolean;
+  containerClassName?: string;
 };
 
 const inputVariants = cva(
@@ -71,6 +72,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       className,
+      containerClassName,
       isRounded = true,
       isFullWidth = true,
       isDisabled,
@@ -94,7 +96,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     };
 
     return (
-      <div className={inputParentContainerVariants({ isRounded, isError, isFullWidth, variant })}>
+      <div
+        className={inputParentContainerVariants({
+          isRounded,
+          isError,
+          isFullWidth,
+          variant,
+          className: containerClassName
+        })}
+      >
         {leftIcon && <span className="absolute left-0 ml-3 text-sm">{leftIcon}</span>}
         <input
           {...props}

frontend/src/components/v2/Modal/Modal.tsx

@@ -11,13 +11,24 @@ export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
   subTitle?: ReactNode;
   footerContent?: ReactNode;
+  bodyClassName?: string;
   onClose?: () => void;
   overlayClassName?: string;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
   (
-    { children, title, subTitle, className, overlayClassName, footerContent, onClose, ...props },
+    {
+      children,
+      title,
+      subTitle,
+      className,
+      overlayClassName,
+      footerContent,
+      bodyClassName,
+      onClose,
+      ...props
+    },
     forwardedRef
   ) => (
     <DialogPrimitive.Portal>
@@ -35,7 +46,10 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
           style={{ maxHeight: "90%" }}
         >
           {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
-          <CardBody className="overflow-y-auto overflow-x-hidden" style={{ maxHeight: "90%" }}>
+          <CardBody
+            className={twMerge("overflow-y-auto overflow-x-hidden", bodyClassName)}
+            style={{ maxHeight: "90%" }}
+          >
             {children}
           </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -40,6 +40,8 @@ export const Pagination = ({
   const upperLimit = Math.ceil(count / perPage);
   const nextPageNumber = Math.min(upperLimit, page + 1);
   const canGoNext = page + 1 <= upperLimit;
+  const canGoFirst = page > 1;
+  const canGoLast = page < upperLimit;
 
   return (
     <div
@@ -50,7 +52,7 @@ export const Pagination = ({
     >
       <div className="mr-6 flex items-center space-x-2">
         <div className="text-xs">
-          {(page - 1) * perPage} - {Math.min((page - 1) * perPage + perPage, count)} of {count}
+          {(page - 1) * perPage + 1} - {Math.min((page - 1) * perPage + perPage, count)} of {count}
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -73,6 +75,16 @@ export const Pagination = ({
         </DropdownMenu>
       </div>
       <div className="flex items-center space-x-4">
+        <IconButton
+          variant="plain"
+          ariaLabel="pagination-first"
+          className="relative"
+          onClick={() => onChangePage(1)}
+          isDisabled={!canGoFirst}
+        >
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronLeft} />
+          <FontAwesomeIcon className="text-xs" icon={faChevronLeft} />
+        </IconButton>
         <IconButton
           variant="plain"
           ariaLabel="pagination-prev"
@@ -89,6 +101,16 @@ export const Pagination = ({
         >
           <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
         </IconButton>
+        <IconButton
+          variant="plain"
+          ariaLabel="pagination-last"
+          className="relative"
+          onClick={() => onChangePage(upperLimit)}
+          isDisabled={!canGoLast}
+        >
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronRight} />
+          <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
+        </IconButton>
       </div>
     </div>
   );

frontend/src/components/v2/Select/Select.tsx

@@ -50,8 +50,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <SelectPrimitive.Trigger
             ref={ref}
             className={twMerge(
-              `inline-flex items-center justify-between rounded-md
-            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-200`,
+              `inline-flex items-center justify-between rounded-md border border-mineshaft-600
+            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-400`,
               className,
               isDisabled && "cursor-not-allowed opacity-50"
             )}

frontend/src/context/WorkspaceContext/WorkspaceContext.tsx

@@ -1,6 +1,7 @@
-import { createContext, ReactNode, useContext, useMemo } from "react";
+import { createContext, ReactNode, useContext, useEffect, useMemo } from "react";
 import { useRouter } from "next/router";
 
+import { createNotification } from "@app/components/notifications";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { Workspace } from "@app/hooks/api/workspace/types";
 
@@ -31,6 +32,34 @@ export const WorkspaceProvider = ({ children }: Props): JSX.Element => {
     };
   }, [ws, workspaceId, isLoading]);
 
+  const shouldTriggerNoProjectAccess =
+    !value.isLoading &&
+    !value.currentWorkspace &&
+    router.pathname.startsWith("/project") &&
+    workspaceId;
+
+  // handle redirects for project-specific routes
+  useEffect(() => {
+    if (shouldTriggerNoProjectAccess) {
+      createNotification({
+        text: "You are not a member of this project.",
+        type: "info"
+      });
+
+      setTimeout(() => {
+        router.push("/");
+      }, 5000);
+    }
+  }, [shouldTriggerNoProjectAccess, router]);
+
+  if (shouldTriggerNoProjectAccess) {
+    return (
+      <div className="flex h-screen w-screen items-center justify-center bg-bunker-800 text-primary-50">
+        You do not have sufficient access to this project.
+      </div>
+    );
+  }
+
   return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>;
 };
 

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

@@ -1,4 +1,4 @@
-import { CertKeyAlgorithm } from "../certificates/enums";
+import { CertExtendedKeyUsage, CertKeyAlgorithm, CertKeyUsage } from "../certificates/enums";
 import { CaRenewalType, CaStatus, CaType } from "./enums";
 
 export type TCertificateAuthority = {
@@ -91,6 +91,8 @@ export type TCreateCertificateDTO = {
   ttl: string; // string compatible with ms
   notBefore?: string;
   notAfter?: string;
+  keyUsages: CertKeyUsage[];
+  extendedKeyUsages: CertExtendedKeyUsage[];
 };
 
 export type TCreateCertificateResponse = {

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

@@ -1,3 +1,5 @@
+import { CertExtendedKeyUsage, CertKeyUsage } from "../certificates/enums";
+
 export type TCertificateTemplate = {
   id: string;
   caId: string;
@@ -8,6 +10,8 @@ export type TCertificateTemplate = {
   commonName: string;
   subjectAlternativeName: string;
   ttl: string;
+  keyUsages: CertKeyUsage[];
+  extendedKeyUsages: CertExtendedKeyUsage[];
 };
 
 export type TCreateCertificateTemplateDTO = {
@@ -18,6 +22,8 @@ export type TCreateCertificateTemplateDTO = {
   subjectAlternativeName: string;
   ttl: string;
   projectId: string;
+  keyUsages: CertKeyUsage[];
+  extendedKeyUsages: CertExtendedKeyUsage[];
 };
 
 export type TUpdateCertificateTemplateDTO = {
@@ -29,6 +35,8 @@ export type TUpdateCertificateTemplateDTO = {
   subjectAlternativeName?: string;
   ttl?: string;
   projectId: string;
+  keyUsages?: CertKeyUsage[];
+  extendedKeyUsages?: CertExtendedKeyUsage[];
 };
 
 export type TDeleteCertificateTemplateDTO = {

frontend/src/hooks/api/certificates/constants.tsx

@@ -1,4 +1,10 @@
-import { CertKeyAlgorithm, CertStatus, CrlReason } from "./enums";
+import {
+  CertExtendedKeyUsage,
+  CertKeyAlgorithm,
+  CertKeyUsage,
+  CertStatus,
+  CrlReason
+} from "./enums";
 
 export const certStatusToNameMap: { [K in CertStatus]: string } = {
   [CertStatus.ACTIVE]: "Active",
@@ -69,3 +75,24 @@ export const crlReasons = [
   },
   { label: crlReasonToNameMap[CrlReason.A_A_COMPROMISE], value: CrlReason.A_A_COMPROMISE }
 ];
+
+export const KEY_USAGES_OPTIONS = [
+  { value: CertKeyUsage.DIGITAL_SIGNATURE, label: "Digital Signature" },
+  { value: CertKeyUsage.KEY_ENCIPHERMENT, label: "Key Encipherment" },
+  { value: CertKeyUsage.NON_REPUDIATION, label: "Non Repudiation" },
+  { value: CertKeyUsage.DATA_ENCIPHERMENT, label: "Data Encipherment" },
+  { value: CertKeyUsage.KEY_AGREEMENT, label: "Key Agreement" },
+  { value: CertKeyUsage.KEY_CERT_SIGN, label: "Certificate Sign" },
+  { value: CertKeyUsage.CRL_SIGN, label: "CRL Sign" },
+  { value: CertKeyUsage.ENCIPHER_ONLY, label: "Encipher Only" },
+  { value: CertKeyUsage.DECIPHER_ONLY, label: "Decipher Only" }
+] as const;
+
+export const EXTENDED_KEY_USAGES_OPTIONS = [
+  { value: CertExtendedKeyUsage.CLIENT_AUTH, label: "Client Auth" },
+  { value: CertExtendedKeyUsage.SERVER_AUTH, label: "Server Auth" },
+  { value: CertExtendedKeyUsage.EMAIL_PROTECTION, label: "Email Protection" },
+  { value: CertExtendedKeyUsage.OCSP_SIGNING, label: "OCSP Signing" },
+  { value: CertExtendedKeyUsage.CODE_SIGNING, label: "Code Signing" },
+  { value: CertExtendedKeyUsage.TIMESTAMPING, label: "Timestamping" }
+] as const;

frontend/src/hooks/api/certificates/enums.tsx

@@ -22,3 +22,24 @@ export enum CrlReason {
   PRIVILEGE_WITHDRAWN = "PRIVILEGE_WITHDRAWN",
   A_A_COMPROMISE = "A_A_COMPROMISE"
 }
+
+export enum CertKeyUsage {
+  DIGITAL_SIGNATURE = "digitalSignature",
+  KEY_ENCIPHERMENT = "keyEncipherment",
+  NON_REPUDIATION = "nonRepudiation",
+  DATA_ENCIPHERMENT = "dataEncipherment",
+  KEY_AGREEMENT = "keyAgreement",
+  KEY_CERT_SIGN = "keyCertSign",
+  CRL_SIGN = "cRLSign",
+  ENCIPHER_ONLY = "encipherOnly",
+  DECIPHER_ONLY = "decipherOnly"
+}
+
+export enum CertExtendedKeyUsage {
+  CLIENT_AUTH = "clientAuth",
+  SERVER_AUTH = "serverAuth",
+  CODE_SIGNING = "codeSigning",
+  EMAIL_PROTECTION = "emailProtection",
+  TIMESTAMPING = "timeStamping",
+  OCSP_SIGNING = "ocspSigning"
+}

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

@@ -1,4 +1,4 @@
-import { CertStatus } from "./enums";
+import { CertExtendedKeyUsage, CertKeyUsage, CertStatus } from "./enums";
 
 export type TCertificate = {
   id: string;
@@ -11,6 +11,8 @@ export type TCertificate = {
   serialNumber: string;
   notBefore: string;
   notAfter: string;
+  keyUsages: CertKeyUsage[];
+  extendedKeyUsages: CertExtendedKeyUsage[];
 };
 
 export type TDeleteCertDTO = {

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

@@ -0,0 +1,4 @@
+export enum OrderByDirection {
+  ASC = "asc",
+  DESC = "desc"
+}

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

@@ -469,3 +469,8 @@ export type RevokeTokenDTO = {
 export type RevokeTokenRes = {
   message: string;
 };
+
+export type TProjectIdentitiesList = {
+  identityMemberships: IdentityMembership[];
+  totalCount: number;
+};

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

@@ -1,19 +1,22 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 
 import { TGroupOrgMembership } from "../groups/types";
-import { IdentityMembershipOrg } from "../identities/types";
 import {
   BillingDetails,
   Invoice,
   License,
   Organization,
+  OrgIdentityOrderBy,
   OrgPlanTable,
   PlanBillingInfo,
   PmtMethod,
   ProductsTable,
   TaxID,
+  TListOrgIdentitiesDTO,
+  TOrgIdentitiesList,
   UpdateOrgDTO
 } from "./types";
 
@@ -30,6 +33,12 @@ export const organizationKeys = {
   getOrgLicenses: (orgId: string) => [{ orgId }, "organization-licenses"] as const,
   getOrgIdentityMemberships: (orgId: string) =>
     [{ orgId }, "organization-identity-memberships"] as const,
+  // allows invalidation using above key without knowing params
+  getOrgIdentityMembershipsWithParams: ({
+    organizationId: orgId,
+    ...params
+  }: TListOrgIdentitiesDTO) =>
+    [...organizationKeys.getOrgIdentityMemberships(orgId), params] as const,
   getOrgGroups: (orgId: string) => [{ orgId }, "organization-groups"] as const
 };
 
@@ -360,19 +369,51 @@ export const useGetOrgLicenses = (organizationId: string) => {
   });
 };
 
-export const useGetIdentityMembershipOrgs = (organizationId: string) => {
+export const useGetIdentityMembershipOrgs = (
+  {
+    organizationId,
+    offset = 0,
+    limit = 100,
+    orderBy = OrgIdentityOrderBy.Name,
+    orderDirection = OrderByDirection.ASC,
+    search = ""
+  }: TListOrgIdentitiesDTO,
+  options?: Omit<
+    UseQueryOptions<
+      TOrgIdentitiesList,
+      unknown,
+      TOrgIdentitiesList,
+      ReturnType<typeof organizationKeys.getOrgIdentityMembershipsWithParams>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const params = new URLSearchParams({
+    offset: String(offset),
+    limit: String(limit),
+    orderBy: String(orderBy),
+    orderDirection: String(orderDirection),
+    search: String(search)
+  });
   return useQuery({
-    queryKey: organizationKeys.getOrgIdentityMemberships(organizationId),
+    queryKey: organizationKeys.getOrgIdentityMembershipsWithParams({
+      organizationId,
+      offset,
+      limit,
+      orderBy,
+      orderDirection,
+      search
+    }),
     queryFn: async () => {
-      const {
-        data: { identityMemberships }
-      } = await apiRequest.get<{ identityMemberships: IdentityMembershipOrg[] }>(
-        `/api/v2/organizations/${organizationId}/identity-memberships`
+      const { data } = await apiRequest.get<TOrgIdentitiesList>(
+        `/api/v2/organizations/${organizationId}/identity-memberships`,
+        { params }
       );
 
-      return identityMemberships;
+      return data;
     },
-    enabled: true
+    enabled: true,
+    ...options
   });
 };
 

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

@@ -1,3 +1,6 @@
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { IdentityMembershipOrg } from "@app/hooks/api/identities/types";
+
 export type Organization = {
   id: string;
   name: string;
@@ -102,3 +105,22 @@ export type ProductsTable = {
   head: ProductsTableHead[];
   rows: ProductsTableRow[];
 };
+
+export type TListOrgIdentitiesDTO = {
+  organizationId: string;
+  offset?: number;
+  limit?: number;
+  orderBy?: OrgIdentityOrderBy;
+  orderDirection?: OrderByDirection;
+  search?: string;
+};
+
+export type TOrgIdentitiesList = {
+  identityMemberships: IdentityMembershipOrg[];
+  totalCount: number;
+};
+
+export enum OrgIdentityOrderBy {
+  Name = "name",
+  Role = "role"
+}

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

@@ -163,27 +163,29 @@ export const useGetImportedSecretsAllEnvs = ({
       queryFn: () => fetchImportedSecrets(projectId, env, path).catch(() => []),
       enabled: Boolean(projectId) && Boolean(env),
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      select: (data: TImportedSecrets[]) => {
-        return data.map((el) => ({
-          environment: el.environment,
-          secretPath: el.secretPath,
-          environmentInfo: el.environmentInfo,
-          folderId: el.folderId,
-          secrets: el.secrets.map((encSecret) => {
-            return {
-              id: encSecret.id,
-              env: encSecret.environment,
-              key: encSecret.secretKey,
-              value: encSecret.secretValue,
-              tags: encSecret.tags,
-              comment: encSecret.secretComment,
-              createdAt: encSecret.createdAt,
-              updatedAt: encSecret.updatedAt,
-              version: encSecret.version
-            };
-          })
-        }));
-      }
+      select: useCallback(
+        (data: Awaited<ReturnType<typeof fetchImportedSecrets>>) =>
+          data.map((el) => ({
+            environment: el.environment,
+            secretPath: el.secretPath,
+            environmentInfo: el.environmentInfo,
+            folderId: el.folderId,
+            secrets: el.secrets.map((encSecret) => {
+              return {
+                id: encSecret.id,
+                env: encSecret.environment,
+                key: encSecret.secretKey,
+                value: encSecret.secretValue,
+                tags: encSecret.tags,
+                comment: encSecret.secretComment,
+                createdAt: encSecret.createdAt,
+                updatedAt: encSecret.updatedAt,
+                version: encSecret.version
+              };
+            })
+          })),
+        []
+      )
     }))
   });
 

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

@@ -108,7 +108,7 @@ export const useGetProjectSecrets = ({
     // wait for all values to be available
     enabled: Boolean(workspaceId && environment) && (options?.enabled ?? true),
     queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
-    queryFn: async () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
+    queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
     onError: (error) => {
       if (axios.isAxiosError(error)) {
         const serverResponse = error.response?.data as { message: string };
@@ -119,7 +119,10 @@ export const useGetProjectSecrets = ({
         });
       }
     },
-    select: ({ secrets }) => mergePersonalSecrets(secrets)
+    select: useCallback(
+      (data: Awaited<ReturnType<typeof fetchProjectSecrets>>) => mergePersonalSecrets(data.secrets),
+      []
+    )
   });
 
 export const useGetProjectSecretsAllEnv = ({
@@ -131,7 +134,11 @@ export const useGetProjectSecretsAllEnv = ({
 
   const secrets = useQueries({
     queries: envs.map((environment) => ({
-      queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
+      queryKey: secretKeys.getProjectSecret({
+        workspaceId,
+        environment,
+        secretPath
+      }),
       enabled: Boolean(workspaceId && environment),
       onError: (error: unknown) => {
         if (axios.isAxiosError(error) && !isErrorHandled) {
@@ -147,12 +154,17 @@ export const useGetProjectSecretsAllEnv = ({
           setIsErrorHandled.on();
         }
       },
-      queryFn: async () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
-      select: (el: SecretV3RawResponse) =>
-        mergePersonalSecrets(el.secrets).reduce<Record<string, SecretV3RawSanitized>>(
-          (prev, curr) => ({ ...prev, [curr.key]: curr }),
-          {}
-        )
+      queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
+      staleTime: 60 * 1000,
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      select: useCallback(
+        (data: Awaited<ReturnType<typeof fetchProjectSecrets>>) =>
+          mergePersonalSecrets(data.secrets).reduce<Record<string, SecretV3RawSanitized>>(
+            (prev, curr) => ({ ...prev, [curr.key]: curr }),
+            {}
+          ),
+        []
+      )
     }))
   });
 

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

@@ -1,6 +1,7 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 
 import { CaStatus } from "../ca/enums";
 import { TCertificateAuthority } from "../ca/types";
@@ -8,7 +9,7 @@ import { TCertificate } from "../certificates/types";
 import { TCertificateTemplate } from "../certificateTemplates/types";
 import { TGroupMembership } from "../groups/types";
 import { identitiesKeys } from "../identities/queries";
-import { IdentityMembership } from "../identities/types";
+import { TProjectIdentitiesList } from "../identities/types";
 import { IntegrationAuth } from "../integrationAuth/types";
 import { TIntegration } from "../integrations/types";
 import { TPkiAlert } from "../pkiAlerts/types";
@@ -24,8 +25,10 @@ import {
   DeleteEnvironmentDTO,
   DeleteWorkspaceDTO,
   NameWorkspaceSecretsDTO,
+  ProjectIdentityOrderBy,
   RenameWorkspaceDTO,
   TGetUpgradeProjectStatusDTO,
+  TListProjectIdentitiesDTO,
   ToggleAutoCapitalizationDTO,
   TUpdateWorkspaceIdentityRoleDTO,
   TUpdateWorkspaceUserRoleDTO,
@@ -484,18 +487,51 @@ export const useDeleteIdentityFromWorkspace = () => {
   });
 };
 
-export const useGetWorkspaceIdentityMemberships = (workspaceId: string) => {
+export const useGetWorkspaceIdentityMemberships = (
+  {
+    workspaceId,
+    offset = 0,
+    limit = 100,
+    orderBy = ProjectIdentityOrderBy.Name,
+    orderDirection = OrderByDirection.ASC,
+    search = ""
+  }: TListProjectIdentitiesDTO,
+  options?: Omit<
+    UseQueryOptions<
+      TProjectIdentitiesList,
+      unknown,
+      TProjectIdentitiesList,
+      ReturnType<typeof workspaceKeys.getWorkspaceIdentityMembershipsWithParams>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
   return useQuery({
-    queryKey: workspaceKeys.getWorkspaceIdentityMemberships(workspaceId),
+    queryKey: workspaceKeys.getWorkspaceIdentityMembershipsWithParams({
+      workspaceId,
+      offset,
+      limit,
+      orderBy,
+      orderDirection,
+      search
+    }),
     queryFn: async () => {
-      const {
-        data: { identityMemberships }
-      } = await apiRequest.get<{ identityMemberships: IdentityMembership[] }>(
-        `/api/v2/workspace/${workspaceId}/identity-memberships`
+      const params = new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit),
+        orderBy: String(orderBy),
+        orderDirection: String(orderDirection),
+        search: String(search)
+      });
+
+      const { data } = await apiRequest.get<TProjectIdentitiesList>(
+        `/api/v2/workspace/${workspaceId}/identity-memberships`,
+        { params }
       );
-      return identityMemberships;
+      return data;
     },
-    enabled: true
+    enabled: true,
+    ...options
   });
 };
 

frontend/src/hooks/api/workspace/query-keys.tsx

@@ -1,3 +1,5 @@
+import { TListProjectIdentitiesDTO } from "@app/hooks/api/workspace/types";
+
 import type { CaStatus } from "../ca";
 
 export const workspaceKeys = {
@@ -15,6 +17,12 @@ export const workspaceKeys = {
   getWorkspaceUsers: (workspaceId: string) => [{ workspaceId }, "workspace-users"] as const,
   getWorkspaceIdentityMemberships: (workspaceId: string) =>
     [{ workspaceId }, "workspace-identity-memberships"] as const,
+  // allows invalidation using above key without knowing params
+  getWorkspaceIdentityMembershipsWithParams: ({
+    workspaceId,
+    ...params
+  }: TListProjectIdentitiesDTO) =>
+    [...workspaceKeys.getWorkspaceIdentityMemberships(workspaceId), params] as const,
   getWorkspaceGroupMemberships: (workspaceId: string) =>
     [{ workspaceId }, "workspace-groups"] as const,
   getWorkspaceCas: ({ projectSlug }: { projectSlug: string }) =>

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

@@ -1,3 +1,5 @@
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+
 import { TProjectRole } from "../roles/types";
 
 export enum ProjectVersion {
@@ -141,3 +143,16 @@ export type TUpdateWorkspaceGroupRoleDTO = {
       }
   )[];
 };
+
+export type TListProjectIdentitiesDTO = {
+  workspaceId: string;
+  offset?: number;
+  limit?: number;
+  orderBy?: ProjectIdentityOrderBy;
+  orderDirection?: OrderByDirection;
+  search?: string;
+};
+
+export enum ProjectIdentityOrderBy {
+  Name = "name"
+}

frontend/src/pages/integrations/aws-secret-manager/create.tsx

@@ -104,6 +104,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   const [tagKey, setTagKey] = useState("");
   const [tagValue, setTagValue] = useState("");
   const [kmsKeyId, setKmsKeyId] = useState("");
+  const [secretPrefix, setSecretPrefix] = useState("");
 
   // const [path, setPath] = useState('');
   // const [pathErrorText, setPathErrorText] = useState('');
@@ -165,6 +166,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
                 ]
               }
             : {}),
+          ...(secretPrefix && { secretPrefix }),
           ...(kmsKeyId && { kmsKeyId }),
           mappingBehavior: selectedMappingBehavior
         }
@@ -325,7 +327,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
                 </Switch>
               </div>
               {shouldTag && (
-                <div className="mt-4">
+                <div className="mt-4 flex justify-between">
                   <FormControl label="Tag Key">
                     <Input
                       placeholder="managed-by"
@@ -342,10 +344,20 @@ export default function AWSSecretManagerCreateIntegrationPage() {
                   </FormControl>
                 </div>
               )}
+
+              <FormControl label="Secret Prefix" className="mt-4">
+                <Input
+                  value={secretPrefix}
+                  onChange={(e) => setSecretPrefix(e.target.value)}
+                  placeholder="INFISICAL_"
+                />
+              </FormControl>
+
               <FormControl label="Encryption Key" className="mt-4">
                 <Select
                   value={kmsKeyId}
                   onValueChange={(e) => {
+                    if (e === "no-keys") return;
                     setKmsKeyId(e);
                   }}
                   className="w-full border border-mineshaft-500"
@@ -363,7 +375,9 @@ export default function AWSSecretManagerCreateIntegrationPage() {
                       );
                     })
                   ) : (
-                    <div />
+                    <SelectItem isDisabled value="no-keys" key="no-keys">
+                      No KMS keys available
+                    </SelectItem>
                   )}
                 </Select>
               </FormControl>

frontend/src/views/Login/Login.utils.tsx

@@ -43,11 +43,6 @@ export const useNavigateToSelectOrganization = () => {
       await navigateUserToOrg(router, config.defaultAuthOrgId);
     }
 
-    let localOrgId = localStorage.getItem("orgData.id")
-    if(!cliCallbackPort && localOrgId != null){
-      await navigateUserToOrg(router, localOrgId);
-    }
-
     queryClient.invalidateQueries(userKeys.getUser);
     let redirectTo = "/login/select-organization";
 

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

@@ -42,6 +42,8 @@ export const IdentitySection = withPermission(
       ? subscription.identitiesUsed < subscription.identityLimit
       : true;
 
+    const isEnterprise = subscription?.slug === "enterprise"
+
     const onDeleteIdentitySubmit = async (identityId: string) => {
       try {
         await deleteMutateAsync({
@@ -93,7 +95,7 @@ export const IdentitySection = withPermission(
                 type="submit"
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => {
-                  if (!isMoreIdentitiesAllowed) {
+                  if (!isMoreIdentitiesAllowed && !isEnterprise) {
                     handlePopUpOpen("upgradePlan", {
                       description: "You can add more identities if you upgrade your Infisical plan."
                     });

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

@@ -1,5 +1,12 @@
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import { faEllipsis, faServer } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowDown,
+  faArrowUp,
+  faEllipsis,
+  faMagnifyingGlass,
+  faServer
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -11,8 +18,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   EmptyState,
+  IconButton,
+  Input,
+  Pagination,
   Select,
   SelectItem,
+  Spinner,
   Table,
   TableContainer,
   TableSkeleton,
@@ -23,7 +34,10 @@ import {
   Tr
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useDebounce } from "@app/hooks";
 import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { OrgIdentityOrderBy } from "@app/hooks/api/organization/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -36,22 +50,60 @@ type Props = {
   ) => void;
 };
 
+const INIT_PER_PAGE = 20;
+
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   const router = useRouter();
   const { currentOrg } = useOrganization();
-  const orgId = currentOrg?.id || "";
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(INIT_PER_PAGE);
+  const [orderDirection, setOrderDirection] = useState(OrderByDirection.ASC);
+  const [orderBy, setOrderBy] = useState(OrgIdentityOrderBy.Name);
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search);
+
+  const organizationId = currentOrg?.id || "";
 
   const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-  const { data, isLoading } = useGetIdentityMembershipOrgs(orgId);
 
-  const { data: roles } = useGetOrgRoles(orgId);
+  const offset = (page - 1) * perPage;
+  const { data, isLoading, isFetching } = useGetIdentityMembershipOrgs(
+    {
+      organizationId,
+      offset,
+      limit: perPage,
+      orderDirection,
+      orderBy,
+      search: debouncedSearch
+    },
+    { keepPreviousData: true }
+  );
+
+  useEffect(() => {
+    // reset page if no longer valid
+    if (data && data.totalCount < offset) setPage(1);
+  }, [data?.totalCount]);
+
+  const { data: roles } = useGetOrgRoles(organizationId);
+
+  const handleSort = (column: OrgIdentityOrderBy) => {
+    if (column === orderBy) {
+      setOrderDirection((prev) =>
+        prev === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
+      );
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
 
   const handleChangeRole = async ({ identityId, role }: { identityId: string; role: string }) => {
     try {
       await updateMutateAsync({
         identityId,
         role,
-        organizationId: orgId
+        organizationId
       });
 
       createNotification({
@@ -71,124 +123,180 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   };
 
   return (
-    <TableContainer>
-      <Table>
-        <THead>
-          <Tr>
-            <Th>Name</Th>
-            <Th>Role</Th>
-            <Th className="w-5" />
-          </Tr>
-        </THead>
-        <TBody>
-          {isLoading && <TableSkeleton columns={4} innerKey="org-identities" />}
-          {!isLoading &&
-            data?.map(({ identity: { id, name }, role, customRole }) => {
-              return (
-                <Tr
-                  className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
-                  key={`identity-${id}`}
-                  onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
-                >
-                  <Td>{name}</Td>
-                  <Td>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.Identity}
-                    >
-                      {(isAllowed) => {
-                        return (
-                          <Select
-                            value={role === "custom" ? (customRole?.slug as string) : role}
-                            isDisabled={!isAllowed}
-                            className="w-40 bg-mineshaft-600"
-                            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                            onValueChange={(selectedRole) =>
-                              handleChangeRole({
-                                identityId: id,
-                                role: selectedRole
-                              })
-                            }
-                          >
-                            {(roles || []).map(({ slug, name: roleName }) => (
-                              <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                {roleName}
-                              </SelectItem>
-                            ))}
-                          </Select>
-                        );
-                      }}
-                    </OrgPermissionCan>
-                  </Td>
-                  <Td>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild className="rounded-lg">
-                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                        </div>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" className="p-1">
-                        <OrgPermissionCan
-                          I={OrgPermissionActions.Edit}
-                          a={OrgPermissionSubjects.Identity}
-                        >
-                          {(isAllowed) => (
-                            <DropdownMenuItem
-                              className={twMerge(
-                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                router.push(`/org/${orgId}/identities/${id}`);
-                              }}
-                              disabled={!isAllowed}
-                            >
-                              Edit Identity
-                            </DropdownMenuItem>
-                          )}
-                        </OrgPermissionCan>
-                        <OrgPermissionCan
-                          I={OrgPermissionActions.Delete}
-                          a={OrgPermissionSubjects.Identity}
-                        >
-                          {(isAllowed) => (
-                            <DropdownMenuItem
-                              className={twMerge(
-                                isAllowed
-                                  ? "hover:!bg-red-500 hover:!text-white"
-                                  : "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handlePopUpOpen("deleteIdentity", {
-                                  identityId: id,
-                                  name
-                                });
-                              }}
-                              disabled={!isAllowed}
-                            >
-                              Delete Identity
-                            </DropdownMenuItem>
-                          )}
-                        </OrgPermissionCan>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </Td>
-                </Tr>
-              );
-            })}
-          {!isLoading && data && data?.length === 0 && (
-            <Tr>
-              <Td colSpan={4}>
-                <EmptyState
-                  title="No identities have been created in this organization"
-                  icon={faServer}
-                />
-              </Td>
+    <div>
+      <Input
+        containerClassName="mb-4"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search identities by name..."
+      />
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr className="h-14">
+              <Th className="w-1/2">
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === OrgIdentityOrderBy.Name ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(OrgIdentityOrderBy.Name)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC &&
+                        orderBy === OrgIdentityOrderBy.Name
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>
+                <div className="flex items-center">
+                  Role
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === OrgIdentityOrderBy.Role ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(OrgIdentityOrderBy.Role)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC &&
+                        orderBy === OrgIdentityOrderBy.Role
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-16">{isFetching ? <Spinner size="xs" /> : null}</Th>
             </Tr>
-          )}
-        </TBody>
-      </Table>
-    </TableContainer>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={3} innerKey="org-identities" />}
+            {!isLoading &&
+              data?.identityMemberships.map(({ identity: { id, name }, role, customRole }) => {
+                return (
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`identity-${id}`}
+                    onClick={() => router.push(`/org/${organizationId}/identities/${id}`)}
+                  >
+                    <Td>{name}</Td>
+                    <Td>
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Edit}
+                        a={OrgPermissionSubjects.Identity}
+                      >
+                        {(isAllowed) => {
+                          return (
+                            <Select
+                              value={role === "custom" ? (customRole?.slug as string) : role}
+                              isDisabled={!isAllowed}
+                              className="w-40 bg-mineshaft-600"
+                              dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                              onValueChange={(selectedRole) =>
+                                handleChangeRole({
+                                  identityId: id,
+                                  role: selectedRole
+                                })
+                              }
+                            >
+                              {(roles || []).map(({ slug, name: roleName }) => (
+                                <SelectItem value={slug} key={`owner-option-${slug}`}>
+                                  {roleName}
+                                </SelectItem>
+                              ))}
+                            </Select>
+                          );
+                        }}
+                      </OrgPermissionCan>
+                    </Td>
+                    <Td>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="flex justify-center hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  router.push(`/org/${organizationId}/identities/${id}`);
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Edit Identity
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteIdentity", {
+                                    identityId: id,
+                                    name
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Identity
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isLoading && data && data.totalCount > INIT_PER_PAGE && (
+          <Pagination
+            count={data.totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+          />
+        )}
+        {!isLoading && data && data?.identityMemberships.length === 0 && (
+          <EmptyState
+            title={
+              debouncedSearch.trim().length > 0
+                ? "No identities match search filter"
+                : "No identities have been created in this organization"
+            }
+            icon={faServer}
+          />
+        )}
+      </TableContainer>
+    </div>
   );
 };

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

@@ -51,6 +51,8 @@ export const OrgMembersSection = () => {
     ? subscription.identitiesUsed < subscription.identityLimit
     : true;
 
+  const isEnterprise = subscription?.slug === "enterprise";
+
   const handleAddMemberModal = () => {
     if (currentOrg?.authEnforced) {
       createNotification({
@@ -60,7 +62,7 @@ export const OrgMembersSection = () => {
       return;
     }
 
-    if (!isMoreUsersAllowed || !isMoreIdentitiesAllowed) {
+    if ((!isMoreUsersAllowed || !isMoreIdentitiesAllowed) && !isEnterprise) {
       handlePopUpOpen("upgradePlan", {
         description: "You can add more members if you upgrade your Infisical plan."
       });

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx

@@ -7,7 +7,12 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   Button,
+  Checkbox,
   FormControl,
   FormLabel,
   Input,
@@ -28,6 +33,11 @@ import {
   useListWorkspacePkiCollections
 } from "@app/hooks/api";
 import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import {
+  EXTENDED_KEY_USAGES_OPTIONS,
+  KEY_USAGES_OPTIONS
+} from "@app/hooks/api/certificates/constants";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/hooks/api/certificates/enums";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { CertificateContent } from "./CertificateContent";
@@ -39,7 +49,26 @@ const schema = z.object({
   friendlyName: z.string(),
   commonName: z.string().trim().min(1),
   altNames: z.string(),
-  ttl: z.string().trim()
+  ttl: z.string().trim(),
+  keyUsages: z.object({
+    [CertKeyUsage.DIGITAL_SIGNATURE]: z.boolean().optional(),
+    [CertKeyUsage.KEY_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.NON_REPUDIATION]: z.boolean().optional(),
+    [CertKeyUsage.DATA_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_AGREEMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_CERT_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.CRL_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.ENCIPHER_ONLY]: z.boolean().optional(),
+    [CertKeyUsage.DECIPHER_ONLY]: z.boolean().optional()
+  }),
+  extendedKeyUsages: z.object({
+    [CertExtendedKeyUsage.CLIENT_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.CODE_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.EMAIL_PROTECTION]: z.boolean().optional(),
+    [CertExtendedKeyUsage.OCSP_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.SERVER_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.TIMESTAMPING]: z.boolean().optional()
+  })
 });
 
 export type FormData = z.infer<typeof schema>;
@@ -88,7 +117,14 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
     setValue,
     watch
   } = useForm<FormData>({
-    resolver: zodResolver(schema)
+    resolver: zodResolver(schema),
+    defaultValues: {
+      keyUsages: {
+        [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+        [CertKeyUsage.KEY_ENCIPHERMENT]: true
+      },
+      extendedKeyUsages: {}
+    }
   });
 
   const selectedCertTemplateId = watch("certificateTemplateId");
@@ -107,7 +143,11 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
         commonName: cert.commonName,
         altNames: cert.altNames,
         certificateTemplateId: cert.certificateTemplateId ?? CERT_TEMPLATE_NONE_VALUE,
-        ttl: ""
+        ttl: "",
+        keyUsages: Object.fromEntries((cert.keyUsages || []).map((name) => [name, true])),
+        extendedKeyUsages: Object.fromEntries(
+          (cert.extendedKeyUsages || []).map((name) => [name, true])
+        )
       });
     } else {
       reset({
@@ -116,7 +156,12 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
         commonName: "",
         altNames: "",
         ttl: "",
-        certificateTemplateId: CERT_TEMPLATE_NONE_VALUE
+        certificateTemplateId: CERT_TEMPLATE_NONE_VALUE,
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
       });
     }
   }, [cert]);
@@ -124,6 +169,14 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
   useEffect(() => {
     if (!cert && selectedCertTemplate) {
       setValue("ttl", selectedCertTemplate.ttl);
+      setValue(
+        "keyUsages",
+        Object.fromEntries(selectedCertTemplate.keyUsages.map((name) => [name, true]))
+      );
+      setValue(
+        "extendedKeyUsages",
+        Object.fromEntries(selectedCertTemplate.extendedKeyUsages.map((name) => [name, true]))
+      );
     }
   }, [selectedCertTemplate, cert]);
 
@@ -133,7 +186,9 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
     collectionId,
     commonName,
     altNames,
-    ttl
+    ttl,
+    keyUsages,
+    extendedKeyUsages
   }: FormData) => {
     try {
       if (!currentWorkspace?.slug) return;
@@ -146,7 +201,13 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
         friendlyName,
         commonName,
         altNames,
-        ttl
+        ttl,
+        keyUsages: Object.entries(keyUsages)
+          .filter(([, value]) => value)
+          .map(([key]) => key as CertKeyUsage),
+        extendedKeyUsages: Object.entries(extendedKeyUsages)
+          .filter(([, value]) => value)
+          .map(([key]) => key as CertExtendedKeyUsage)
       });
 
       reset();
@@ -363,8 +424,87 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </FormControl>
               )}
             />
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="key-usages" className="data-[state=open]:border-none">
+                <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+                  <div className="order-1 ml-3">Key Usage</div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <Controller
+                    control={control}
+                    name="keyUsages"
+                    render={({ field: { onChange, value }, fieldState: { error } }) => {
+                      return (
+                        <FormControl
+                          label="Key Usage"
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                        >
+                          <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                            {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                              return (
+                                <Checkbox
+                                  id={optionValue}
+                                  key={optionValue}
+                                  className="data-[state=checked]:bg-primary"
+                                  isDisabled={Boolean(cert)}
+                                  isChecked={value[optionValue]}
+                                  onCheckedChange={(state) => {
+                                    onChange({
+                                      ...value,
+                                      [optionValue]: state
+                                    });
+                                  }}
+                                >
+                                  {label}
+                                </Checkbox>
+                              );
+                            })}
+                          </div>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                  <Controller
+                    control={control}
+                    name="extendedKeyUsages"
+                    render={({ field: { onChange, value }, fieldState: { error } }) => {
+                      return (
+                        <FormControl
+                          label="Extended Key Usage"
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                        >
+                          <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                            {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                              return (
+                                <Checkbox
+                                  id={optionValue}
+                                  key={optionValue}
+                                  className="data-[state=checked]:bg-primary"
+                                  isDisabled={Boolean(cert)}
+                                  isChecked={value[optionValue]}
+                                  onCheckedChange={(state) => {
+                                    onChange({
+                                      ...value,
+                                      [optionValue]: state
+                                    });
+                                  }}
+                                >
+                                  {label}
+                                </Checkbox>
+                              );
+                            })}
+                          </div>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
             {!cert && (
-              <div className="flex items-center">
+              <div className="mt-4 flex items-center">
                 <Button
                   className="mr-4"
                   size="sm"

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx

@@ -7,7 +7,12 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   Button,
+  Checkbox,
   FormControl,
   FormLabel,
   Input,
@@ -25,8 +30,14 @@ import {
   useGetCertTemplate,
   useListWorkspaceCas,
   useListWorkspacePkiCollections,
-  useUpdateCertTemplate} from "@app/hooks/api";
+  useUpdateCertTemplate
+} from "@app/hooks/api";
 import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import {
+  EXTENDED_KEY_USAGES_OPTIONS,
+  KEY_USAGES_OPTIONS
+} from "@app/hooks/api/certificates/constants";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/hooks/api/certificates/enums";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const validateTemplateRegexField = z
@@ -45,7 +56,26 @@ const schema = z.object({
   name: z.string().min(1),
   commonName: validateTemplateRegexField,
   subjectAlternativeName: validateTemplateRegexField,
-  ttl: z.string().trim().min(1)
+  ttl: z.string().trim().min(1),
+  keyUsages: z.object({
+    [CertKeyUsage.DIGITAL_SIGNATURE]: z.boolean().optional(),
+    [CertKeyUsage.KEY_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.NON_REPUDIATION]: z.boolean().optional(),
+    [CertKeyUsage.DATA_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_AGREEMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_CERT_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.CRL_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.ENCIPHER_ONLY]: z.boolean().optional(),
+    [CertKeyUsage.DECIPHER_ONLY]: z.boolean().optional()
+  }),
+  extendedKeyUsages: z.object({
+    [CertExtendedKeyUsage.CLIENT_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.CODE_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.EMAIL_PROTECTION]: z.boolean().optional(),
+    [CertExtendedKeyUsage.OCSP_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.SERVER_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.TIMESTAMPING]: z.boolean().optional()
+  })
 });
 
 export type FormData = z.infer<typeof schema>;
@@ -61,9 +91,9 @@ type Props = {
 
 export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Props) => {
   const { currentWorkspace } = useWorkspace();
-  
+
   const { data: ca } = useGetCaById(caId);
-  
+
   const { data: certTemplate } = useGetCertTemplate(
     (popUp?.certificateTemplate?.data as { id: string })?.id || ""
   );
@@ -86,7 +116,13 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
     reset,
     formState: { isSubmitting }
   } = useForm<FormData>({
-    resolver: zodResolver(schema)
+    resolver: zodResolver(schema),
+    defaultValues: {
+      keyUsages: {
+        [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+        [CertKeyUsage.KEY_ENCIPHERMENT]: true
+      }
+    }
   });
 
   useEffect(() => {
@@ -97,14 +133,23 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
         commonName: certTemplate.commonName,
         subjectAlternativeName: certTemplate.subjectAlternativeName,
         collectionId: certTemplate.pkiCollectionId ?? undefined,
-        ttl: certTemplate.ttl
+        ttl: certTemplate.ttl,
+        keyUsages: Object.fromEntries(certTemplate.keyUsages.map((name) => [name, true]) ?? []),
+        extendedKeyUsages: Object.fromEntries(
+          certTemplate.extendedKeyUsages.map((name) => [name, true]) ?? []
+        )
       });
     } else {
       reset({
         caId,
         name: "",
         commonName: "",
-        ttl: ""
+        ttl: "",
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
       });
     }
   }, [certTemplate, ca]);
@@ -114,7 +159,9 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
     name,
     commonName,
     subjectAlternativeName,
-    ttl
+    ttl,
+    keyUsages,
+    extendedKeyUsages
   }: FormData) => {
     if (!currentWorkspace?.id) {
       return;
@@ -130,7 +177,13 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
           name,
           commonName,
           subjectAlternativeName,
-          ttl
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
         });
 
         createNotification({
@@ -145,7 +198,13 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
           name,
           commonName,
           subjectAlternativeName,
-          ttl
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
         });
 
         createNotification({
@@ -332,7 +391,84 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
               </FormControl>
             )}
           />
-          <div className="flex items-center">
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="key-usages" className="data-[state=open]:border-none">
+              <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+                <div className="order-1 ml-3">Key Usage</div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Controller
+                  control={control}
+                  name="keyUsages"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="Key Usage"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                          {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                            return (
+                              <Checkbox
+                                id={optionValue}
+                                key={optionValue}
+                                className="data-[state=checked]:bg-primary"
+                                isChecked={value[optionValue]}
+                                onCheckedChange={(state) => {
+                                  onChange({
+                                    ...value,
+                                    [optionValue]: state
+                                  });
+                                }}
+                              >
+                                {label}
+                              </Checkbox>
+                            );
+                          })}
+                        </div>
+                      </FormControl>
+                    );
+                  }}
+                />
+                <Controller
+                  control={control}
+                  name="extendedKeyUsages"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="Extended Key Usage"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                          {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                            return (
+                              <Checkbox
+                                id={optionValue}
+                                key={optionValue}
+                                className="data-[state=checked]:bg-primary"
+                                isChecked={value[optionValue]}
+                                onCheckedChange={(state) => {
+                                  onChange({
+                                    ...value,
+                                    [optionValue]: state
+                                  });
+                                }}
+                              >
+                                {label}
+                              </Checkbox>
+                            );
+                          })}
+                        </div>
+                      </FormControl>
+                    );
+                  }}
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+          <div className="mt-4 flex items-center">
             <Button
               className="mr-4"
               size="sm"

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

@@ -104,10 +104,11 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                     defaultValue={field.value}
                     {...field}
                     onValueChange={(e) => onChange(e)}
-                    className="w-full"
+                    className="w-full border border-mineshaft-600"
+                    placeholder="Select group..."
                   >
                     {filteredGroupMembershipOrgs.map(({ name, slug, id }) => (
-                      <SelectItem value={slug} key={`org-group-${id}`}>
+                      <SelectItem value={slug} key={`org-group-${id}`} >
                         {name}
                       </SelectItem>
                     ))}
@@ -131,6 +132,7 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                     {...field}
                     onValueChange={(e) => onChange(e)}
                     className="w-full"
+                    placeholder="Select role..."
                   >
                     {(roles || []).map(({ name, slug }) => (
                       <SelectItem value={slug} key={`st-role-${slug}`}>
@@ -141,7 +143,7 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </FormControl>
               )}
             />
-            <div className="flex items-center">
+            <div className="flex items-center mt-6">
               <Button
                 className="mr-4"
                 size="sm"
@@ -151,9 +153,13 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
               >
                 {popUp?.group?.data ? "Update" : "Create"}
               </Button>
-              <Button colorSchema="secondary" variant="plain">
-                Cancel
-              </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("group", false)}
+            >
+              Cancel
+            </Button>
             </div>
           </form>
         ) : (

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

@@ -1,11 +1,15 @@
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import {
-    faArrowUpRightFromSquare,
-    faClock,
-    faEdit,
-    faPlus,
-    faServer,
-    faXmark
+  faArrowDown,
+  faArrowUp,
+  faArrowUpRightFromSquare,
+  faClock,
+  faEdit,
+  faMagnifyingGlass,
+  faPlus,
+  faServer,
+  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
@@ -15,337 +19,418 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-    Button,
-    DeleteActionModal,
-    EmptyState,
-    HoverCard,
-    HoverCardContent,
-    HoverCardTrigger,
-    IconButton,
-    Modal,
-    ModalContent,
-    Table,
-    TableContainer,
-    TableSkeleton,
-    Tag,
-    TBody,
-    Td,
-    Th,
-    THead,
-    Tooltip,
-    Tr
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Spinner,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  Tag,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
+import { useDebounce } from "@app/hooks";
 import { useDeleteIdentityFromWorkspace, useGetWorkspaceIdentityMemberships } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { IdentityMembership } from "@app/hooks/api/identities/types";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { ProjectIdentityOrderBy } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { IdentityModal } from "./components/IdentityModal";
 import { IdentityRoleForm } from "./components/IdentityRoleForm";
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+const INIT_PER_PAGE = 20;
 const formatRoleName = (role: string, customRoleName?: string) => {
-    if (role === ProjectMembershipRole.Custom) return customRoleName;
-    if (role === ProjectMembershipRole.Member) return "Developer";
-    if (role === ProjectMembershipRole.NoAccess) return "No access";
-    return role;
+  if (role === ProjectMembershipRole.Custom) return customRoleName;
+  if (role === ProjectMembershipRole.Member) return "Developer";
+  if (role === ProjectMembershipRole.NoAccess) return "No access";
+  return role;
 };
 export const IdentityTab = withProjectPermission(
-    () => {
-        const { currentWorkspace } = useWorkspace();
+  () => {
+    const { currentWorkspace } = useWorkspace();
 
-        const workspaceId = currentWorkspace?.id ?? "";
+    const [page, setPage] = useState(1);
+    const [perPage, setPerPage] = useState(INIT_PER_PAGE);
+    const [orderDirection, setOrderDirection] = useState(OrderByDirection.ASC);
+    const [orderBy, setOrderBy] = useState(ProjectIdentityOrderBy.Name);
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search);
 
-        const { data, isLoading } = useGetWorkspaceIdentityMemberships(currentWorkspace?.id || "");
-        const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
+    const workspaceId = currentWorkspace?.id ?? "";
 
-        const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-            "identity",
-            "deleteIdentity",
-            "upgradePlan",
-            "updateRole"
-        ] as const);
+    const offset = (page - 1) * perPage;
+    const { data, isLoading, isFetching } = useGetWorkspaceIdentityMemberships(
+      {
+        workspaceId: currentWorkspace?.id || "",
+        offset,
+        limit: perPage,
+        orderDirection,
+        orderBy,
+        search: debouncedSearch
+      },
+      { keepPreviousData: true }
+    );
+    const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
 
-        const onRemoveIdentitySubmit = async (identityId: string) => {
-            try {
-                await deleteMutateAsync({
-                    identityId,
-                    workspaceId
-                });
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "identity",
+      "deleteIdentity",
+      "upgradePlan",
+      "updateRole"
+    ] as const);
 
-                createNotification({
-                    text: "Successfully removed identity from project",
-                    type: "success"
-                });
+    const onRemoveIdentitySubmit = async (identityId: string) => {
+      try {
+        await deleteMutateAsync({
+          identityId,
+          workspaceId
+        });
 
-                handlePopUpClose("deleteIdentity");
-            } catch (err) {
-                console.error(err);
-                const error = err as any;
-                const text = error?.response?.data?.message ?? "Failed to remove identity from project";
+        createNotification({
+          text: "Successfully removed identity from project",
+          type: "success"
+        });
 
-                createNotification({
-                    text,
-                    type: "error"
-                });
-            }
-        };
+        handlePopUpClose("deleteIdentity");
+      } catch (err) {
+        console.error(err);
+        const error = err as any;
+        const text = error?.response?.data?.message ?? "Failed to remove identity from project";
 
-        return (
-            <motion.div
-                key="identity-role-panel"
-                transition={{ duration: 0.15 }}
-                initial={{ opacity: 0, translateX: 30 }}
-                animate={{ opacity: 1, translateX: 0 }}
-                exit={{ opacity: 0, translateX: 30 }}
+        createNotification({
+          text,
+          type: "error"
+        });
+      }
+    };
+
+    useEffect(() => {
+      // reset page if no longer valid
+      if (data && data.totalCount < offset) setPage(1);
+    }, [data?.totalCount]);
+
+    const handleSort = (column: ProjectIdentityOrderBy) => {
+      if (column === orderBy) {
+        setOrderDirection((prev) =>
+          prev === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
+        );
+        return;
+      }
+
+      setOrderBy(column);
+      setOrderDirection(OrderByDirection.ASC);
+    };
+
+    return (
+      <motion.div
+        key="identity-role-panel"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+      >
+        <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">Identities</p>
+            <div className="flex w-full justify-end pr-4">
+              <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
+                <span className="w-max cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+                  Documentation{" "}
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="mb-[0.06rem] ml-1 text-xs"
+                  />
+                </span>
+              </Link>
+            </div>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Create}
+              a={ProjectPermissionSub.Identity}
             >
-                <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">Identities</p>
-                        <div className="flex w-full justify-end pr-4">
-                            <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
-                                <span className="w-max cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
-                                    Documentation{" "}
-                                    <FontAwesomeIcon
-                                        icon={faArrowUpRightFromSquare}
-                                        className="mb-[0.06rem] ml-1 text-xs"
-                                    />
-                                </span>
-                            </Link>
-                        </div>
-                        <ProjectPermissionCan
-                            I={ProjectPermissionActions.Create}
-                            a={ProjectPermissionSub.Identity}
-                        >
-                            {(isAllowed) => (
-                                <Button
-                                    colorSchema="primary"
-                                    type="submit"
-                                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                                    onClick={() => handlePopUpOpen("identity")}
-                                    isDisabled={!isAllowed}
-                                >
-                                    Add identity
-                                </Button>
-                            )}
-                        </ProjectPermissionCan>
+              {(isAllowed) => (
+                <Button
+                  colorSchema="primary"
+                  type="submit"
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  onClick={() => handlePopUpOpen("identity")}
+                  isDisabled={!isAllowed}
+                >
+                  Add identity
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          </div>
+          <Input
+            containerClassName="mb-4"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+            placeholder="Search identities by name..."
+          />
+          <TableContainer>
+            <Table>
+              <THead>
+                <Tr className="h-14">
+                  <Th className="w-1/3">
+                    <div className="flex items-center">
+                      Name
+                      <IconButton
+                        variant="plain"
+                        className={`ml-2 ${
+                          orderBy === ProjectIdentityOrderBy.Name ? "" : "opacity-30"
+                        }`}
+                        ariaLabel="sort"
+                        onClick={() => handleSort(ProjectIdentityOrderBy.Name)}
+                      >
+                        <FontAwesomeIcon
+                          icon={
+                            orderDirection === OrderByDirection.DESC &&
+                            orderBy === ProjectIdentityOrderBy.Name
+                              ? faArrowUp
+                              : faArrowDown
+                          }
+                        />
+                      </IconButton>
                     </div>
-                    <TableContainer>
-                        <Table>
-                            <THead>
-                                <Tr>
-                                    <Th>Name</Th>
-                                    <Th>Role</Th>
-                                    <Th>Added on</Th>
-                                    <Th className="w-5" />
-                                </Tr>
-                            </THead>
-                            <TBody>
-                                {isLoading && <TableSkeleton columns={7} innerKey="project-identities" />}
-                                {!isLoading &&
-                                    data &&
-                                    data.length > 0 &&
-                                    data.map((identityMember, index) => {
-                                        const {
-                                            identity: { id, name },
-                                            roles,
-                                            createdAt
-                                        } = identityMember;
-                                        return (
-                                            <Tr className="h-10" key={`st-v3-${id}`}>
-                                                <Td>{name}</Td>
+                  </Th>
+                  <Th className="w-1/3">Role</Th>
+                  <Th>Added on</Th>
+                  <Th className="w-16">{isFetching ? <Spinner size="xs" /> : null}</Th>
+                </Tr>
+              </THead>
+              <TBody>
+                {isLoading && <TableSkeleton columns={4} innerKey="project-identities" />}
+                {!isLoading &&
+                  data &&
+                  data.identityMemberships.length > 0 &&
+                  data.identityMemberships.map((identityMember, index) => {
+                    const {
+                      identity: { id, name },
+                      roles,
+                      createdAt
+                    } = identityMember;
+                    return (
+                      <Tr className="h-10" key={`st-v3-${id}`}>
+                        <Td>{name}</Td>
 
-                                                <Td>
-                                                    <div className="flex items-center space-x-2">
-                                                        {roles
-                                                            .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
-                                                            .map(
-                                                                ({
-                                                                    role,
-                                                                    customRoleName,
-                                                                    id: roleId,
-                                                                    isTemporary,
-                                                                    temporaryAccessEndTime
-                                                                }) => {
-                                                                    const isExpired =
-                                                                        new Date() > new Date(temporaryAccessEndTime || ("" as string));
-                                                                    return (
-                                                                        <Tag key={roleId}>
-                                                                            <div className="flex items-center space-x-2">
-                                                                                <div className="capitalize">
-                                                                                    {formatRoleName(role, customRoleName)}
-                                                                                </div>
-                                                                                {isTemporary && (
-                                                                                    <div>
-                                                                                        <Tooltip
-                                                                                            content={
-                                                                                                isExpired
-                                                                                                    ? "Timed role expired"
-                                                                                                    : "Timed role 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: roleId,
-                                                                                isTemporary,
-                                                                                temporaryAccessEndTime
-                                                                            }) => {
-                                                                                const isExpired =
-                                                                                    new Date() >
-                                                                                    new Date(temporaryAccessEndTime || ("" as string));
-                                                                                return (
-                                                                                    <Tag key={roleId} className="capitalize">
-                                                                                        <div className="flex items-center space-x-2">
-                                                                                            <div>{formatRoleName(role, customRoleName)}</div>
-                                                                                            {isTemporary && (
-                                                                                                <div>
-                                                                                                    <Tooltip
-                                                                                                        content={
-                                                                                                            isExpired
-                                                                                                                ? "Access expired"
-                                                                                                                : "Temporary access"
-                                                                                                        }
-                                                                                                    >
-                                                                                                        <FontAwesomeIcon
-                                                                                                            icon={faClock}
-                                                                                                            className={twMerge(
-                                                                                                                new Date() >
-                                                                                                                new Date(
-                                                                                                                    temporaryAccessEndTime as string
-                                                                                                                ) && "text-red-600"
-                                                                                                            )}
-                                                                                                        />
-                                                                                                    </Tooltip>
-                                                                                                </div>
-                                                                                            )}
-                                                                                        </div>
-                                                                                    </Tag>
-                                                                                );
-                                                                            }
-                                                                        )}
-                                                                </HoverCardContent>
-                                                            </HoverCard>
-                                                        )}
-                                                        <Tooltip content="Edit permission">
-                                                            <IconButton
-                                                                size="sm"
-                                                                variant="plain"
-                                                                ariaLabel="update-role"
-                                                                onClick={() =>
-                                                                    handlePopUpOpen("updateRole", { ...identityMember, index })
-                                                                }
-                                                            >
-                                                                <FontAwesomeIcon icon={faEdit} />
-                                                            </IconButton>
-                                                        </Tooltip>
-                                                    </div>
-                                                </Td>
-                                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                                                <Td className="flex justify-end">
-                                                    <ProjectPermissionCan
-                                                        I={ProjectPermissionActions.Delete}
-                                                        a={ProjectPermissionSub.Identity}
-                                                    >
-                                                        {(isAllowed) => (
-                                                            <IconButton
-                                                                onClick={() => {
-                                                                    handlePopUpOpen("deleteIdentity", {
-                                                                        identityId: id,
-                                                                        name
-                                                                    });
-                                                                }}
-                                                                size="lg"
-                                                                colorSchema="danger"
-                                                                variant="plain"
-                                                                ariaLabel="update"
-                                                                className="ml-4"
-                                                                isDisabled={!isAllowed}
-                                                            >
-                                                                <FontAwesomeIcon icon={faXmark} />
-                                                            </IconButton>
-                                                        )}
-                                                    </ProjectPermissionCan>
-                                                </Td>
-                                            </Tr>
+                        <Td>
+                          <div className="flex items-center space-x-2">
+                            {roles
+                              .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+                              .map(
+                                ({
+                                  role,
+                                  customRoleName,
+                                  id: roleId,
+                                  isTemporary,
+                                  temporaryAccessEndTime
+                                }) => {
+                                  const isExpired =
+                                    new Date() > new Date(temporaryAccessEndTime || ("" as string));
+                                  return (
+                                    <Tag key={roleId}>
+                                      <div className="flex items-center space-x-2">
+                                        <div className="capitalize">
+                                          {formatRoleName(role, customRoleName)}
+                                        </div>
+                                        {isTemporary && (
+                                          <div>
+                                            <Tooltip
+                                              content={
+                                                isExpired
+                                                  ? "Timed role expired"
+                                                  : "Timed role 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: roleId,
+                                        isTemporary,
+                                        temporaryAccessEndTime
+                                      }) => {
+                                        const isExpired =
+                                          new Date() >
+                                          new Date(temporaryAccessEndTime || ("" as string));
+                                        return (
+                                          <Tag key={roleId} className="capitalize">
+                                            <div className="flex items-center space-x-2">
+                                              <div>{formatRoleName(role, customRoleName)}</div>
+                                              {isTemporary && (
+                                                <div>
+                                                  <Tooltip
+                                                    content={
+                                                      isExpired
+                                                        ? "Access expired"
+                                                        : "Temporary access"
+                                                    }
+                                                  >
+                                                    <FontAwesomeIcon
+                                                      icon={faClock}
+                                                      className={twMerge(
+                                                        new Date() >
+                                                          new Date(
+                                                            temporaryAccessEndTime as string
+                                                          ) && "text-red-600"
+                                                      )}
+                                                    />
+                                                  </Tooltip>
+                                                </div>
+                                              )}
+                                            </div>
+                                          </Tag>
                                         );
-                                    })}
-                                {!isLoading && data && data?.length === 0 && (
-                                    <Tr>
-                                        <Td colSpan={7}>
-                                            <EmptyState
-                                                title="No identities have been added to this project"
-                                                icon={faServer}
-                                            />
-                                        </Td>
-                                    </Tr>
-                                )}
-                            </TBody>
-                        </Table>
-                    </TableContainer>
-                    <Modal
-                        isOpen={popUp.updateRole.isOpen}
-                        onOpenChange={(state) => handlePopUpToggle("updateRole", state)}
-                    >
-                        <ModalContent
-                            className="max-w-3xl"
-                            title={`Manage Access for ${(popUp.updateRole.data as IdentityMembership)?.identity?.name
-                                }`}
-                            subTitle={`
+                                      }
+                                    )}
+                                </HoverCardContent>
+                              </HoverCard>
+                            )}
+                            <Tooltip content="Edit permission">
+                              <IconButton
+                                size="sm"
+                                variant="plain"
+                                ariaLabel="update-role"
+                                onClick={() =>
+                                  handlePopUpOpen("updateRole", { ...identityMember, index })
+                                }
+                              >
+                                <FontAwesomeIcon icon={faEdit} />
+                              </IconButton>
+                            </Tooltip>
+                          </div>
+                        </Td>
+                        <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                        <Td className="flex justify-end">
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.Identity}
+                          >
+                            {(isAllowed) => (
+                              <IconButton
+                                onClick={() => {
+                                  handlePopUpOpen("deleteIdentity", {
+                                    identityId: id,
+                                    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 && data.totalCount > INIT_PER_PAGE && (
+              <Pagination
+                count={data.totalCount}
+                page={page}
+                perPage={perPage}
+                onChangePage={(newPage) => setPage(newPage)}
+                onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+              />
+            )}
+            {!isLoading && data && data?.identityMemberships.length === 0 && (
+              <EmptyState
+                title={
+                  debouncedSearch.trim().length > 0
+                    ? "No identities match search filter"
+                    : "No identities have been added to this project"
+                }
+                icon={faServer}
+              />
+            )}
+          </TableContainer>
+          <Modal
+            isOpen={popUp.updateRole.isOpen}
+            onOpenChange={(state) => handlePopUpToggle("updateRole", state)}
+          >
+            <ModalContent
+              className="max-w-3xl"
+              title={`Manage Access for ${
+                (popUp.updateRole.data as IdentityMembership)?.identity?.name
+              }`}
+              subTitle={`
                             Configure role-based access control by assigning machine identities a mix of roles and specific privileges. An identity will gain access to all actions within the roles assigned to it, not just the actions those roles share in common. You must choose at least one permanent role.
                             `}
-                        >
-                            <IdentityRoleForm
-                                onOpenUpgradeModal={(description) =>
-                                    handlePopUpOpen("upgradePlan", { description })
-                                }
-                                identityProjectMember={
-                                    data?.[
-                                    (popUp.updateRole?.data as IdentityMembership & { index: number })?.index
-                                    ] as IdentityMembership
-                                }
-                            />
-                        </ModalContent>
-                    </Modal>
-                    <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-                    <DeleteActionModal
-                        isOpen={popUp.deleteIdentity.isOpen}
-                        title={`Are you sure want to remove ${(popUp?.deleteIdentity?.data as { name: string })?.name || ""
-                            } from the project?`}
-                        onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
-                        deleteKey="confirm"
-                        onDeleteApproved={() =>
-                            onRemoveIdentitySubmit(
-                                (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
-                            )
-                        }
-                    />
-                </div>
-            </motion.div>
-        );
-    },
-    { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Identity }
+            >
+              <IdentityRoleForm
+                onOpenUpgradeModal={(description) =>
+                  handlePopUpOpen("upgradePlan", { description })
+                }
+                identityProjectMember={
+                  data?.identityMemberships[
+                    (popUp.updateRole?.data as IdentityMembership & { index: number })?.index
+                  ] as IdentityMembership
+                }
+              />
+            </ModalContent>
+          </Modal>
+          <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+          <DeleteActionModal
+            isOpen={popUp.deleteIdentity.isOpen}
+            title={`Are you sure want to remove ${
+              (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+            } from the project?`}
+            onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+            deleteKey="confirm"
+            onDeleteApproved={() =>
+              onRemoveIdentitySubmit(
+                (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
+              )
+            }
+          />
+        </div>
+      </motion.div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Identity }
 );

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityModal.tsx

@@ -1,11 +1,12 @@
-import { useMemo } from "react";
+import { useEffect, 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 { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { Button, FormControl, Modal, ModalClose, ModalContent } from "@app/components/v2";
+import { ComboBox } from "@app/components/v2/ComboBox";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
   useAddIdentityToWorkspace,
@@ -17,8 +18,14 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
   .object({
-    identityId: yup.string().required("Identity id is required"),
-    role: yup.string()
+    identity: yup.object({
+      id: yup.string().required("Identity id is required"),
+      name: yup.string().required("Identity name is required")
+    }),
+    role: yup.object({
+      slug: yup.string().required("role slug is required"),
+      name: yup.string().required("role name is required")
+    })
   })
   .required();
 
@@ -33,14 +40,26 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
 
-  const orgId = currentOrg?.id || "";
+  const organizationId = currentOrg?.id || "";
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
 
-  const { data: identityMembershipOrgs } = useGetIdentityMembershipOrgs(orgId);
-  const { data: identityMemberships } = useGetWorkspaceIdentityMemberships(workspaceId);
+  const { data: identityMembershipOrgsData } = useGetIdentityMembershipOrgs({
+    organizationId,
+    limit: 20000 // TODO: this is temp to preserve functionality for bitcoindepot, will replace with combobox in separate PR
+  });
+  const identityMembershipOrgs = identityMembershipOrgsData?.identityMemberships;
+  const { data: identityMembershipsData } = useGetWorkspaceIdentityMemberships({
+    workspaceId,
+    limit: 20000 // TODO: this is temp to preserve functionality for bitcoindepot, will optimize in PR referenced above
+  });
+  const identityMemberships = identityMembershipsData?.identityMemberships;
 
-  const { data: roles } = useGetProjectRoles(projectSlug);
+  const {
+    data: roles,
+    isLoading: isRolesLoading,
+    isFetched: isRolesFetched
+  } = useGetProjectRoles(projectSlug);
 
   const { mutateAsync: addIdentityToWorkspaceMutateAsync } = useAddIdentityToWorkspace();
 
@@ -58,17 +77,24 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
     control,
     handleSubmit,
     reset,
+    setValue,
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: yupResolver(schema)
   });
 
-  const onFormSubmit = async ({ identityId, role }: FormData) => {
+  useEffect(() => {
+    if (!isRolesFetched || !roles) return;
+
+    setValue("role", { name: roles[0]?.name, slug: roles[0]?.slug });
+  }, [isRolesFetched, roles]);
+
+  const onFormSubmit = async ({ identity, role }: FormData) => {
     try {
       await addIdentityToWorkspaceMutateAsync({
         workspaceId,
-        identityId,
-        role: role || undefined
+        identityId: identity.id,
+        role: role.slug || undefined
       });
 
       createNotification({
@@ -76,7 +102,17 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
         type: "success"
       });
 
-      reset();
+      const nextAvailableMembership = filteredIdentityMembershipOrgs.filter(
+        (membership) => membership.identity.id !== identity.id
+      )[0];
+
+      // prevents combobox from displaying previously added identity
+      reset({
+        identity: {
+          name: nextAvailableMembership?.identity.name,
+          id: nextAvailableMembership?.identity.id
+        }
+      });
       handlePopUpToggle("identity", false);
     } catch (err) {
       console.error(err);
@@ -98,34 +134,41 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
         reset();
       }}
     >
-      <ModalContent title="Add Identity to Project">
+      <ModalContent title="Add Identity to Project" bodyClassName="overflow-visible">
         {filteredIdentityMembershipOrgs.length ? (
           <form onSubmit={handleSubmit(onFormSubmit)}>
             <Controller
               control={control}
-              name="identityId"
-              defaultValue={filteredIdentityMembershipOrgs?.[0]?.id}
+              name="identity"
+              defaultValue={{
+                id: filteredIdentityMembershipOrgs?.[0]?.identity?.id,
+                name: filteredIdentityMembershipOrgs?.[0]?.identity?.name
+              }}
               render={({ field: { onChange, ...field }, fieldState: { error } }) => (
                 <FormControl label="Identity" errorText={error?.message} isError={Boolean(error)}>
-                  <Select
-                    defaultValue={field.value}
-                    {...field}
-                    onValueChange={(e) => onChange(e)}
+                  <ComboBox
                     className="w-full"
-                  >
-                    {filteredIdentityMembershipOrgs.map(({ identity }) => (
-                      <SelectItem value={identity.id} key={`org-identity-${identity.id}`}>
-                        {identity.name}
-                      </SelectItem>
-                    ))}
-                  </Select>
+                    by="id"
+                    value={{ id: field.value.id, name: field.value.name }}
+                    defaultValue={{ id: field.value.id, name: field.value.name }}
+                    onSelectChange={(value) => onChange({ id: value.id, name: value.name })}
+                    displayValue={(el) => el.name}
+                    onFilter={({ value }, filterQuery) =>
+                      value.name.toLowerCase().includes(filterQuery.toLowerCase())
+                    }
+                    items={filteredIdentityMembershipOrgs.map(({ identity }) => ({
+                      key: identity.id,
+                      value: { id: identity.id, name: identity.name },
+                      label: identity.name
+                    }))}
+                  />
                 </FormControl>
               )}
             />
             <Controller
               control={control}
               name="role"
-              defaultValue=""
+              defaultValue={{ name: "", slug: "" }}
               render={({ field: { onChange, ...field }, fieldState: { error } }) => (
                 <FormControl
                   label="Role"
@@ -133,18 +176,22 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
                   isError={Boolean(error)}
                   className="mt-4"
                 >
-                  <Select
-                    defaultValue={field.value}
-                    {...field}
-                    onValueChange={(e) => onChange(e)}
+                  <ComboBox
                     className="w-full"
-                  >
-                    {(roles || []).map(({ name, slug }) => (
-                      <SelectItem value={slug} key={`st-role-${slug}`}>
-                        {name}
-                      </SelectItem>
-                    ))}
-                  </Select>
+                    by="slug"
+                    value={{ slug: field.value.slug, name: field.value.name }}
+                    defaultValue={{ slug: field.value.slug, name: field.value.name }}
+                    onSelectChange={(value) => onChange({ slug: value.slug, name: value.name })}
+                    displayValue={(el) => el.name}
+                    onFilter={({ value }, filterQuery) =>
+                      value.name.toLowerCase().includes(filterQuery.toLowerCase())
+                    }
+                    items={(roles || []).map(({ slug, name }) => ({
+                      key: slug,
+                      value: { slug, name },
+                      label: name
+                    }))}
+                  />
                 </FormControl>
               )}
             />
@@ -158,9 +205,11 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
               >
                 {popUp?.identity?.data ? "Update" : "Create"}
               </Button>
-              <Button colorSchema="secondary" variant="plain">
-                Cancel
-              </Button>
+              <ModalClose asChild>
+                <Button colorSchema="secondary" variant="plain">
+                  Cancel
+                </Button>
+              </ModalClose>
             </div>
           </form>
         ) : (
@@ -169,7 +218,9 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
               All identities in your organization have already been added to this project.
             </div>
             <Link href={`/org/${currentWorkspace?.orgId}/members`}>
-              <Button variant="outline_bg">Create a new identity</Button>
+              <Button isDisabled={isRolesLoading} isLoading={isRolesLoading} variant="outline_bg">
+                Create a new identity
+              </Button>
             </Link>
           </div>
         )}

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import { subject } from "@casl/ability";
@@ -8,14 +8,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner } from "@app/components/permissions";
-import { ContentLoader } from "@app/components/v2";
+import { ContentLoader, Pagination } from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
   useProjectPermission,
   useWorkspace
 } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { useDebounce, usePopUp } from "@app/hooks";
 import {
   useGetDynamicSecrets,
   useGetImportedSecretsSingleEnv,
@@ -39,7 +39,7 @@ import { SecretImportListView } from "./components/SecretImportListView";
 import { SecretListView } from "./components/SecretListView";
 import { SnapshotView } from "./components/SnapshotView";
 import { StoreProvider } from "./SecretMainPage.store";
-import { Filter, GroupBy, SortDir } from "./SecretMainPage.types";
+import { Filter, SortDir } from "./SecretMainPage.types";
 
 const LOADER_TEXT = [
   "Retrieving your encrypted secrets...",
@@ -47,6 +47,7 @@ const LOADER_TEXT = [
   "Getting secret import links..."
 ];
 
+const INIT_PER_PAGE = 20;
 export const SecretMainPage = () => {
   const { t } = useTranslation();
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
@@ -59,6 +60,10 @@ export const SecretMainPage = () => {
     tags: {},
     searchFilter: (router.query.searchFilter as string) || ""
   });
+  const debouncedSearchFilter = useDebounce(filter.searchFilter);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(INIT_PER_PAGE);
+  const paginationOffset = (page - 1) * perPage;
 
   const [snapshotId, setSnapshotId] = useState<string | null>(null);
   const isRollbackMode = Boolean(snapshotId);
@@ -185,11 +190,6 @@ export const SecretMainPage = () => {
     });
   };
 
-  const handleGroupByChange = useCallback(
-    (groupBy?: GroupBy) => setFilter((state) => ({ ...state, groupBy })),
-    []
-  );
-
   const handleTagToggle = useCallback(
     (tagId: string) =>
       setFilter((state) => {
@@ -223,6 +223,113 @@ export const SecretMainPage = () => {
   const loadingOnAccess =
     canReadSecret &&
     (isSecretsLoading || isSecretImportsLoading || isFoldersLoading || isDynamicSecretLoading);
+
+  const rows = useMemo(() => {
+    const filteredSecrets =
+      secrets
+        ?.filter(({ key, tags: secretTags, value }) => {
+          const isTagFilterActive = Boolean(Object.keys(filter.tags).length);
+          return (
+            (!isTagFilterActive || secretTags?.some(({ id }) => filter.tags?.[id])) &&
+            (key.toUpperCase().includes(debouncedSearchFilter.toUpperCase()) ||
+              value?.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
+          );
+        })
+        .sort((a, b) =>
+          sortDir === SortDir.ASC ? a.key.localeCompare(b.key) : b.key.localeCompare(a.key)
+        ) ?? [];
+    const filteredFolders =
+      folders
+        ?.filter(({ name }) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
+        .sort((a, b) =>
+          sortDir === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+        ) ?? [];
+    const filteredDynamicSecrets =
+      dynamicSecrets
+        ?.filter(({ name }) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
+        .sort((a, b) =>
+          sortDir === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+        ) ?? [];
+    const filteredSecretImports =
+      secretImports
+        ?.filter(({ importPath }) =>
+          importPath.toLowerCase().includes(debouncedSearchFilter.toLowerCase())
+        )
+        .sort((a, b) =>
+          sortDir === "asc"
+            ? a.importPath.localeCompare(b.importPath)
+            : b.importPath.localeCompare(a.importPath)
+        ) ?? [];
+
+    const totalRows =
+      filteredSecretImports.length +
+      filteredFolders.length +
+      filteredDynamicSecrets.length +
+      filteredSecrets.length;
+
+    const paginatedImports = filteredSecretImports.slice(
+      paginationOffset,
+      paginationOffset + perPage
+    );
+
+    let remainingRows = perPage - paginatedImports.length;
+    const foldersStartIndex = Math.max(0, paginationOffset - filteredSecretImports.length);
+    const paginatedFolders =
+      remainingRows > 0
+        ? filteredFolders.slice(foldersStartIndex, foldersStartIndex + remainingRows)
+        : [];
+
+    remainingRows -= paginatedFolders.length;
+    const dynamicSecretStartIndex = Math.max(
+      0,
+      paginationOffset - filteredSecretImports.length - filteredFolders.length
+    );
+    const paginatiedDynamicSecrets =
+      remainingRows > 0
+        ? filteredDynamicSecrets.slice(
+            dynamicSecretStartIndex,
+            dynamicSecretStartIndex + remainingRows
+          )
+        : [];
+
+    remainingRows -= paginatiedDynamicSecrets.length;
+    const secretStartIndex = Math.max(
+      0,
+      paginationOffset -
+        filteredSecretImports.length -
+        filteredFolders.length -
+        filteredDynamicSecrets.length
+    );
+
+    const paginatiedSecrets =
+      remainingRows > 0
+        ? filteredSecrets.slice(secretStartIndex, secretStartIndex + remainingRows)
+        : [];
+
+    return {
+      imports: paginatedImports,
+      folders: paginatedFolders,
+      secrets: paginatiedSecrets,
+      dynamicSecrets: paginatiedDynamicSecrets,
+      totalRows
+    };
+  }, [
+    sortDir,
+    debouncedSearchFilter,
+    folders,
+    secrets,
+    dynamicSecrets,
+    paginationOffset,
+    perPage,
+    filter.tags,
+    importedSecrets
+  ]);
+
+  useEffect(() => {
+    // reset page if no longer valid
+    if (rows.totalRows < paginationOffset) setPage(1);
+  }, [rows.totalRows]);
+
   // loading screen when you don't have permission but as folder's is viewable need to wait for that
   const loadingOnDenied = !canReadSecret && isFoldersLoading;
   if (loadingOnAccess || loadingOnDenied) {
@@ -237,7 +344,15 @@ export const SecretMainPage = () => {
           <NavHeader
             pageName={t("dashboard.title")}
             currentEnv={environment}
-            userAvailableEnvs={currentWorkspace?.environments}
+            userAvailableEnvs={currentWorkspace?.environments.filter(({ slug }) =>
+              permission.can(
+                ProjectPermissionActions.Read,
+                subject(ProjectPermissionSub.Secrets, {
+                  environment: slug,
+                  secretPath
+                })
+              )
+            )}
             isFolderMode
             secretPath={secretPath}
             isProjectRelated
@@ -258,7 +373,6 @@ export const SecretMainPage = () => {
               filter={filter}
               tags={tags}
               onVisiblilityToggle={handleToggleVisibility}
-              onGroupByChange={handleGroupByChange}
               onSearchChange={handleSearchChange}
               onToggleTagFilter={handleTagToggle}
               snapshotCount={snapshotCount || 0}
@@ -291,7 +405,7 @@ export const SecretMainPage = () => {
                 {canReadSecret && (
                   <SecretImportListView
                     searchTerm={filter.searchFilter}
-                    secretImports={secretImports}
+                    secretImports={rows.imports}
                     isFetching={isSecretImportsLoading || isSecretImportsFetching}
                     environment={environment}
                     workspaceId={workspaceId}
@@ -301,7 +415,7 @@ export const SecretMainPage = () => {
                   />
                 )}
                 <FolderListView
-                  folders={folders}
+                  folders={rows.folders}
                   environment={environment}
                   workspaceId={workspaceId}
                   secretPath={secretPath}
@@ -314,15 +428,13 @@ export const SecretMainPage = () => {
                     environment={environment}
                     projectSlug={projectSlug}
                     secretPath={secretPath}
-                    dynamicSecrets={dynamicSecrets || []}
+                    dynamicSecrets={rows.dynamicSecrets || []}
                   />
                 )}
                 {canReadSecret && (
                   <SecretListView
-                    secrets={secrets}
+                    secrets={rows.secrets}
                     tags={tags}
-                    filter={filter}
-                    sortDir={sortDir}
                     isVisible={isVisible}
                     environment={environment}
                     workspaceId={workspaceId}
@@ -331,6 +443,16 @@ export const SecretMainPage = () => {
                   />
                 )}
                 {!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
+                {!loadingOnAccess && rows.totalRows > INIT_PER_PAGE && (
+                  <Pagination
+                    className="border-t border-solid border-t-mineshaft-600"
+                    count={rows.totalRows}
+                    page={page}
+                    perPage={perPage}
+                    onChangePage={(newPage) => setPage(newPage)}
+                    onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+                  />
+                )}
               </div>
             </div>
             <CreateSecretForm

frontend/src/views/SecretMainPage/SecretMainPage.types.ts

@@ -1,7 +1,6 @@
 export type Filter = {
   tags: Record<string, boolean>;
   searchFilter: string;
-  groupBy?: GroupBy | null;
 };
 
 export enum SortDir {
@@ -9,6 +8,8 @@ export enum SortDir {
   DESC = "desc"
 }
 
-export enum GroupBy {
-  PREFIX = "prefix"
+export enum RowType {
+  Folder = "folder",
+  DynamicSecret = "dynamic",
+  Secret = "Secret"
 }

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -62,7 +62,7 @@ import {
   useSelectedSecretActions,
   useSelectedSecrets
 } from "../../SecretMainPage.store";
-import { Filter, GroupBy } from "../../SecretMainPage.types";
+import { Filter } from "../../SecretMainPage.types";
 import { CreateDynamicSecretForm } from "./CreateDynamicSecretForm";
 import { CreateSecretImportForm } from "./CreateSecretImportForm";
 import { FolderForm } from "./FolderForm";
@@ -81,7 +81,6 @@ type Props = {
   isVisible?: boolean;
   snapshotCount: number;
   isSnapshotCountLoading?: boolean;
-  onGroupByChange: (opt?: GroupBy) => void;
   onSearchChange: (term: string) => void;
   onToggleTagFilter: (tagId: string) => void;
   onVisiblilityToggle: () => void;
@@ -101,7 +100,6 @@ export const ActionBar = ({
   isSnapshotCountLoading,
   onSearchChange,
   onToggleTagFilter,
-  onGroupByChange,
   onVisiblilityToggle,
   onClickRollbackMode
 }: Props) => {
@@ -307,16 +305,6 @@ export const ActionBar = ({
               </IconButton>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="p-0">
-              <DropdownMenuGroup>Group By</DropdownMenuGroup>
-              <DropdownMenuItem
-                iconPos="right"
-                icon={
-                  filter?.groupBy === GroupBy.PREFIX && <FontAwesomeIcon icon={faCheckCircle} />
-                }
-                onClick={() => onGroupByChange(!filter.groupBy ? GroupBy.PREFIX : undefined)}
-              >
-                Prefix
-              </DropdownMenuItem>
               <DropdownMenuGroup>Filter By</DropdownMenuGroup>
               <DropdownSubMenu>
                 <DropdownSubMenuTrigger

frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportListView.tsx

@@ -123,7 +123,7 @@ export const SecretImportListView = ({
     if (!isFetching) {
       setItems(secretImports);
     }
-  }, [isFetching]);
+  }, [isFetching, secretImports]);
 
   const { mutateAsync: deleteSecretImport } = useDeleteSecretImport();
   const { mutate: updateSecretImport } = useUpdateSecretImport();

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
-import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { CreateTagModal } from "@app/components/tags/CreateTagModal";
@@ -16,7 +15,7 @@ import { WsTag } from "@app/hooks/api/types";
 import { AddShareSecretModal } from "@app/views/ShareSecretPage/components/AddShareSecretModal";
 
 import { useSelectedSecretActions, useSelectedSecrets } from "../../SecretMainPage.store";
-import { Filter, GroupBy, SortDir } from "../../SecretMainPage.types";
+import { Filter } from "../../SecretMainPage.types";
 import { SecretDetailSidebar } from "./SecretDetaiSidebar";
 import { SecretItem } from "./SecretItem";
 import { FontAwesomeSpriteSymbols } from "./SecretListView.utils";
@@ -26,53 +25,11 @@ type Props = {
   environment: string;
   workspaceId: string;
   secretPath?: string;
-  filter: Filter;
-  sortDir?: SortDir;
   tags?: WsTag[];
   isVisible?: boolean;
   isProtectedBranch?: boolean;
 };
 
-const reorderSecretGroupByUnderscore = (secrets: SecretV3RawSanitized[], sortDir: SortDir) => {
-  const groupedSecrets: Record<string, SecretV3RawSanitized[]> = {};
-  secrets.forEach((secret) => {
-    const lastSeperatorIndex = secret.key.lastIndexOf("_");
-    const namespace =
-      lastSeperatorIndex !== -1 ? secret.key.substring(0, lastSeperatorIndex) : "misc";
-    if (!groupedSecrets?.[namespace]) groupedSecrets[namespace] = [];
-    groupedSecrets[namespace].push(secret);
-  });
-
-  return Object.keys(groupedSecrets)
-    .sort((a, b) =>
-      sortDir === SortDir.ASC
-        ? a.toLowerCase().localeCompare(b.toLowerCase())
-        : b.toLowerCase().localeCompare(a.toLowerCase())
-    )
-    .map((namespace) => ({ namespace, secrets: groupedSecrets[namespace] }));
-};
-
-const reorderSecret = (
-  secrets: SecretV3RawSanitized[],
-  sortDir: SortDir,
-  filter?: GroupBy | null
-) => {
-  if (filter === GroupBy.PREFIX) {
-    return reorderSecretGroupByUnderscore(secrets, sortDir);
-  }
-
-  return [
-    {
-      namespace: "",
-      secrets: secrets?.sort((a, b) =>
-        sortDir === SortDir.ASC
-          ? a.key.toLowerCase().localeCompare(b.key.toLowerCase())
-          : b.key.toLowerCase().localeCompare(a.key.toLowerCase())
-      )
-    }
-  ];
-};
-
 export const filterSecrets = (secrets: SecretV3RawSanitized[], filter: Filter) =>
   secrets.filter(({ key, value, tags }) => {
     const isTagFilterActive = Boolean(Object.keys(filter.tags).length);
@@ -88,8 +45,6 @@ export const SecretListView = ({
   environment,
   workspaceId,
   secretPath = "/",
-  filter,
-  sortDir = SortDir.ASC,
   tags: wsTags = [],
   isVisible,
   isProtectedBranch = false
@@ -331,52 +286,30 @@ export const SecretListView = ({
 
   return (
     <>
-      {reorderSecret(secrets, sortDir, filter.groupBy).map(
-        ({ namespace, secrets: groupedSecrets }) => {
-          const filteredSecrets = filterSecrets(groupedSecrets, filter);
-          return (
-            <div className="flex flex-col" key={`${namespace}-${groupedSecrets.length}`}>
-              <div
-                className={twMerge(
-                  "text-md h-0 bg-bunker-600 capitalize transition-all",
-                  Boolean(namespace) && Boolean(filteredSecrets.length) && "h-11 py-3 pl-4 "
-                )}
-                key={namespace}
-              >
-                {namespace}
-              </div>
-              {FontAwesomeSpriteSymbols.map(({ icon, symbol }) => (
-                <FontAwesomeIcon
-                  icon={icon}
-                  symbol={symbol}
-                  key={`font-awesome-svg-spritie-${symbol}`}
-                />
-              ))}
-              {filteredSecrets.map((secret) => (
-                <SecretItem
-                  environment={environment}
-                  secretPath={secretPath}
-                  tags={wsTags}
-                  isSelected={selectedSecrets?.[secret.id]}
-                  onToggleSecretSelect={toggleSelectedSecret}
-                  isVisible={isVisible}
-                  secret={secret}
-                  key={secret.id}
-                  onSaveSecret={handleSaveSecret}
-                  onDeleteSecret={onDeleteSecret}
-                  onDetailViewSecret={onDetailViewSecret}
-                  onCreateTag={onCreateTag}
-                  handleSecretShare={() =>
-                    handlePopUpOpen("createSharedSecret", {
-                      value: secret.valueOverride ?? secret.value
-                    })
-                  }
-                />
-              ))}
-            </div>
-          );
-        }
-      )}
+      {FontAwesomeSpriteSymbols.map(({ icon, symbol }) => (
+        <FontAwesomeIcon icon={icon} symbol={symbol} key={`font-awesome-svg-spritie-${symbol}`} />
+      ))}
+      {secrets.map((secret) => (
+        <SecretItem
+          environment={environment}
+          secretPath={secretPath}
+          tags={wsTags}
+          isSelected={selectedSecrets?.[secret.id]}
+          onToggleSecretSelect={toggleSelectedSecret}
+          isVisible={isVisible}
+          secret={secret}
+          key={secret.id}
+          onSaveSecret={handleSaveSecret}
+          onDeleteSecret={onDeleteSecret}
+          onDetailViewSecret={onDetailViewSecret}
+          onCreateTag={onCreateTag}
+          handleSecretShare={() =>
+            handlePopUpOpen("createSharedSecret", {
+              value: secret.valueOverride ?? secret.value
+            })
+          }
+        />
+      ))}
       <DeleteActionModal
         isOpen={popUp.deleteSecret.isOpen}
         deleteKey={(popUp.deleteSecret?.data as SecretV3RawSanitized)?.key}

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -31,6 +31,7 @@ import {
   Input,
   Modal,
   ModalContent,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -49,7 +50,7 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { useDebounce, usePopUp } from "@app/hooks";
 import {
   useCreateFolder,
   useCreateSecretV3,
@@ -78,6 +79,14 @@ export enum EntryType {
   SECRET = "secret"
 }
 
+enum RowType {
+  Folder = "folder",
+  DynamicSecret = "dynamic",
+  Secret = "Secret"
+}
+
+const INIT_PER_PAGE = 20;
+
 export const SecretOverviewPage = () => {
   const { t } = useTranslation();
 
@@ -101,6 +110,7 @@ export const SecretOverviewPage = () => {
   const workspaceId = currentWorkspace?.id as string;
   const projectSlug = currentWorkspace?.slug as string;
   const [searchFilter, setSearchFilter] = useState("");
+  const debouncedSearchFilter = useDebounce(searchFilter);
   const secretPath = (router.query?.secretPath as string) || "/";
 
   const [selectedEntries, setSelectedEntries] = useState<{
@@ -111,6 +121,9 @@ export const SecretOverviewPage = () => {
     [EntryType.SECRET]: {}
   });
 
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(INIT_PER_PAGE);
+
   const toggleSelectedEntry = useCallback(
     (type: EntryType, key: string) => {
       const isChecked = Boolean(selectedEntries[type]?.[key]);
@@ -160,11 +173,31 @@ export const SecretOverviewPage = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
-  const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
+  const [visibleEnvs, setVisibleEnvs] = useState(
+    userAvailableEnvs?.filter(({ slug }) =>
+      permission.can(
+        ProjectPermissionActions.Read,
+        subject(ProjectPermissionSub.Secrets, {
+          environment: slug,
+          secretPath
+        })
+      )
+    )
+  );
 
   useEffect(() => {
-    setVisibleEnvs(userAvailableEnvs);
-  }, [userAvailableEnvs]);
+    setVisibleEnvs(
+      userAvailableEnvs?.filter(({ slug }) =>
+        permission.can(
+          ProjectPermissionActions.Read,
+          subject(ProjectPermissionSub.Secrets, {
+            environment: slug,
+            secretPath
+          })
+        )
+      )
+    );
+  }, [userAvailableEnvs, secretPath]);
 
   const {
     data: secrets,
@@ -439,7 +472,40 @@ export const SecretOverviewPage = () => {
     }
   };
 
-  if (isWorkspaceLoading) {
+  const rows = useMemo(() => {
+    const filteredSecretNames =
+      secKeys
+        ?.filter((name) => name.toUpperCase().includes(debouncedSearchFilter.toUpperCase()))
+        .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a))) ?? [];
+    const filteredFolderNames =
+      folderNames
+        ?.filter((name) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
+        .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a))) ?? [];
+    const filteredDynamicSecrets =
+      dynamicSecretNames
+        ?.filter((name) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
+        .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a))) ?? [];
+
+    return [
+      ...filteredFolderNames.map((name) => ({ name, type: RowType.Folder })),
+      ...filteredDynamicSecrets.map((name) => ({ name, type: RowType.DynamicSecret })),
+      ...filteredSecretNames.map((name) => ({ name, type: RowType.Secret }))
+    ];
+  }, [sortDir, debouncedSearchFilter, secKeys, folderNames, dynamicSecretNames]);
+
+  const paginationOffset = (page - 1) * perPage;
+
+  useEffect(() => {
+    // reset page if no longer valid
+    if (rows.length < paginationOffset) setPage(1);
+  }, [rows.length]);
+
+  const isTableLoading =
+    folders?.some(({ isLoading }) => isLoading) ||
+    secrets?.some(({ isLoading }) => isLoading) ||
+    dynamicSecrets?.some(({ isLoading }) => isLoading);
+
+  if (isWorkspaceLoading || isTableLoading) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
         <img
@@ -454,32 +520,16 @@ export const SecretOverviewPage = () => {
     );
   }
 
-  const isTableLoading = !(
-    folders?.some(({ isLoading }) => !isLoading) && secrets?.some(({ isLoading }) => !isLoading)
-  );
-
   const canViewOverviewPage = Boolean(userAvailableEnvs.length);
   // This is needed to also show imports from other paths – right now those are missing.
   // const combinedKeys = [...secKeys, ...secretImports.map((impSecrets) => impSecrets?.data?.map((impSec) => impSec.secrets?.map((impSecKey) => impSecKey.key))).flat().flat()];
-  const filteredSecretNames = secKeys
-    ?.filter((name) => name.toUpperCase().includes(searchFilter.toUpperCase()))
-    .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a)));
-  const filteredFolderNames = folderNames
-    ?.filter((name) => name.toLowerCase().includes(searchFilter.toLowerCase()))
-    .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a)));
-  const filteredDynamicSecrets = dynamicSecretNames
-    ?.filter((name) => name.toLowerCase().includes(searchFilter.toLowerCase()))
-    .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a)));
 
   const isTableEmpty =
     !(
       folders?.every(({ isLoading }) => isLoading) &&
       secrets?.every(({ isLoading }) => isLoading) &&
       dynamicSecrets?.every(({ isLoading }) => isLoading)
-    ) &&
-    filteredSecretNames?.length === 0 &&
-    filteredFolderNames?.length === 0 &&
-    filteredDynamicSecrets?.length === 0;
+    ) && rows.length === 0;
 
   return (
     <>
@@ -550,27 +600,37 @@ export const SecretOverviewPage = () => {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
-                    {userAvailableEnvs.map((availableEnv) => {
-                      const { id: envId, name } = availableEnv;
+                    {userAvailableEnvs
+                      .filter(({ slug }) =>
+                        permission.can(
+                          ProjectPermissionActions.Read,
+                          subject(ProjectPermissionSub.Secrets, {
+                            environment: slug,
+                            secretPath
+                          })
+                        )
+                      )
+                      .map((availableEnv) => {
+                        const { id: envId, name } = availableEnv;
 
-                      const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
-                      return (
-                        <DropdownMenuItem
-                          onClick={() => handleEnvSelect(envId)}
-                          key={envId}
-                          icon={
-                            isEnvSelected ? (
-                              <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                            ) : (
-                              <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
-                            )
-                          }
-                          iconPos="left"
-                        >
-                          <div className="flex items-center">{name}</div>
-                        </DropdownMenuItem>
-                      );
-                    })}
+                        const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+                        return (
+                          <DropdownMenuItem
+                            onClick={() => handleEnvSelect(envId)}
+                            key={envId}
+                            icon={
+                              isEnvSelected ? (
+                                <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                              ) : (
+                                <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
+                              )
+                            }
+                            iconPos="left"
+                          >
+                            <div className="flex items-center">{name}</div>
+                          </DropdownMenuItem>
+                        );
+                      })}
                     {/* <DropdownMenuItem className="px-1.5" asChild>
                     <Button
                       size="xs"
@@ -656,7 +716,7 @@ export const SecretOverviewPage = () => {
           resetSelectedEntries={resetSelectedEntries}
         />
         <div className="thin-scrollbar mt-4" ref={parentTableRef}>
-          <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
+          <TableContainer>
             <Table>
               <THead>
                 <Tr className="sticky top-0 z-20 border-0">
@@ -753,7 +813,7 @@ export const SecretOverviewPage = () => {
                     <Td colSpan={visibleEnvs.length + 1}>
                       <EmptyState
                         title={
-                          searchFilter
+                          debouncedSearchFilter
                             ? "No secret found for your search, add one now"
                             : "Let's add some secrets"
                         }
@@ -774,48 +834,59 @@ export const SecretOverviewPage = () => {
                   </Tr>
                 )}
                 {!isTableLoading &&
-                  filteredFolderNames.map((folderName, index) => (
-                    <SecretOverviewFolderRow
-                      folderName={folderName}
-                      isFolderPresentInEnv={isFolderPresentInEnv}
-                      isSelected={selectedEntries.folder[folderName]}
-                      onToggleFolderSelect={() => toggleSelectedEntry(EntryType.FOLDER, folderName)}
-                      environments={visibleEnvs}
-                      key={`overview-${folderName}-${index + 1}`}
-                      onClick={handleFolderClick}
-                      onToggleFolderEdit={(name: string) =>
-                        handlePopUpOpen("updateFolder", { name })
-                      }
-                    />
-                  ))}
-                {!isTableLoading &&
-                  filteredDynamicSecrets.map((dynamicSecretName, index) => (
-                    <SecretOverviewDynamicSecretRow
-                      dynamicSecretName={dynamicSecretName}
-                      isDynamicSecretInEnv={isDynamicSecretPresentInEnv}
-                      environments={visibleEnvs}
-                      key={`overview-${dynamicSecretName}-${index + 1}`}
-                    />
-                  ))}
-                {!isTableLoading &&
-                  visibleEnvs?.length > 0 &&
-                  filteredSecretNames.map((key, index) => (
-                    <SecretOverviewTableRow
-                      isSelected={selectedEntries.secret[key]}
-                      onToggleSecretSelect={() => toggleSelectedEntry(EntryType.SECRET, key)}
-                      secretPath={secretPath}
-                      getImportedSecretByKey={getImportedSecretByKey}
-                      isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
-                      onSecretCreate={handleSecretCreate}
-                      onSecretDelete={handleSecretDelete}
-                      onSecretUpdate={handleSecretUpdate}
-                      key={`overview-${key}-${index + 1}`}
-                      environments={visibleEnvs}
-                      secretKey={key}
-                      getSecretByKey={getSecretByKey}
-                      expandableColWidth={expandableTableWidth}
-                    />
-                  ))}
+                  rows.slice(paginationOffset, paginationOffset + perPage).map((row, index) => {
+                    switch (row.type) {
+                      case RowType.Secret:
+                        if (visibleEnvs?.length === 0) return null;
+                        return (
+                          <SecretOverviewTableRow
+                            isSelected={selectedEntries.secret[row.name]}
+                            onToggleSecretSelect={() =>
+                              toggleSelectedEntry(EntryType.SECRET, row.name)
+                            }
+                            secretPath={secretPath}
+                            getImportedSecretByKey={getImportedSecretByKey}
+                            isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
+                            onSecretCreate={handleSecretCreate}
+                            onSecretDelete={handleSecretDelete}
+                            onSecretUpdate={handleSecretUpdate}
+                            key={`overview-${row.name}-${index + 1}`}
+                            environments={visibleEnvs}
+                            secretKey={row.name}
+                            getSecretByKey={getSecretByKey}
+                            expandableColWidth={expandableTableWidth}
+                          />
+                        );
+                      case RowType.DynamicSecret:
+                        return (
+                          <SecretOverviewDynamicSecretRow
+                            dynamicSecretName={row.name}
+                            isDynamicSecretInEnv={isDynamicSecretPresentInEnv}
+                            environments={visibleEnvs}
+                            key={`overview-${row.name}-${index + 1}`}
+                          />
+                        );
+                      case RowType.Folder:
+                        return (
+                          <SecretOverviewFolderRow
+                            folderName={row.name}
+                            isFolderPresentInEnv={isFolderPresentInEnv}
+                            isSelected={selectedEntries.folder[row.name]}
+                            onToggleFolderSelect={() =>
+                              toggleSelectedEntry(EntryType.FOLDER, row.name)
+                            }
+                            environments={visibleEnvs}
+                            key={`overview-${row.name}-${index + 1}`}
+                            onClick={handleFolderClick}
+                            onToggleFolderEdit={(name: string) =>
+                              handlePopUpOpen("updateFolder", { name })
+                            }
+                          />
+                        );
+                      default:
+                        return null;
+                    }
+                  })}
               </TBody>
               <TFoot>
                 <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
@@ -842,6 +913,16 @@ export const SecretOverviewPage = () => {
                 </Tr>
               </TFoot>
             </Table>
+            {!isTableLoading && rows.length > INIT_PER_PAGE && (
+              <Pagination
+                className="border-t border-solid border-t-mineshaft-600"
+                count={rows.length}
+                page={page}
+                perPage={perPage}
+                onChangePage={(newPage) => setPage(newPage)}
+                onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+              />
+            )}
           </TableContainer>
         </div>
       </div>

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

@@ -13,7 +13,7 @@ import { twMerge } from "tailwind-merge";
 
 import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
-import { SecretType,SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
 
 import { SecretEditRow } from "./SecretEditRow";
@@ -53,6 +53,8 @@ export const SecretOverviewTableRow = ({
   onSecretDelete,
   isImportedSecretPresentInEnv,
   getImportedSecretByKey,
+  // temporary until below todo is resolved
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandableColWidth,
   onToggleSecretSelect,
   isSelected
@@ -150,10 +152,11 @@ export const SecretOverviewTableRow = ({
             }`}
           >
             <div
-              className="ml-2 p-2"
-              style={{
-                width: `calc(${expandableColWidth}px - 1rem)`
-              }}
+              className="ml-2 w-[99%] p-2"
+              // TODO: scott expandableColWidth sometimes 0 due to parent ref not mounting, opting for relative width until resolved
+              // style={{
+              //   width: `calc(${expandableColWidth} - 1rem)`
+              // }}
             >
               <SecretRenameRow
                 secretKey={secretKey}