Merge pull request #2450 from Infisical/fix/address-client-side-error-secret-approval-page

fix: add loading screen for user context

.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=

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/project-router.ts

@@ -146,12 +146,16 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
         actorId: req.permission.id,
         actorOrgId: req.permission.orgId,
         actorAuthMethod: req.permission.authMethod,
-        projectId: req.params.workspaceId,
-        ...req.query,
-        endDate: req.query.endDate,
-        startDate: req.query.startDate || getLastMidnightDateISO(),
-        auditLogActor: req.query.actor,
-        actor: req.permission.type
+        actor: req.permission.type,
+
+        filter: {
+          ...req.query,
+          projectId: req.params.workspaceId,
+          endDate: req.query.endDate,
+          startDate: req.query.startDate || getLastMidnightDateISO(),
+          auditLogActorId: req.query.actor,
+          eventType: req.query.eventType ? [req.query.eventType] : undefined
+        }
       });
       return { auditLogs };
     }

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/audit-log/audit-log-dal.ts

@@ -6,6 +6,9 @@ import { DatabaseError } from "@app/lib/errors";
 import { ormify, selectAllTableCols, stripUndefinedInWhere } from "@app/lib/knex";
 import { logger } from "@app/lib/logger";
 import { QueueName } from "@app/queue";
+import { ActorType } from "@app/services/auth/auth-type";
+
+import { EventType } from "./audit-log-types";
 
 export type TAuditLogDALFactory = ReturnType<typeof auditLogDALFactory>;
 
@@ -25,7 +28,24 @@ export const auditLogDALFactory = (db: TDbClient) => {
   const auditLogOrm = ormify(db, TableName.AuditLog);
 
   const find = async (
-    { orgId, projectId, userAgentType, startDate, endDate, limit = 20, offset = 0, actor, eventType }: TFindQuery,
+    {
+      orgId,
+      projectId,
+      userAgentType,
+      startDate,
+      endDate,
+      limit = 20,
+      offset = 0,
+      actorId,
+      actorType,
+      eventType,
+      eventMetadata
+    }: Omit<TFindQuery, "actor" | "eventType"> & {
+      actorId?: string;
+      actorType?: ActorType;
+      eventType?: EventType[];
+      eventMetadata?: Record<string, string>;
+    },
     tx?: Knex
   ) => {
     try {
@@ -34,7 +54,6 @@ export const auditLogDALFactory = (db: TDbClient) => {
           stripUndefinedInWhere({
             projectId,
             [`${TableName.AuditLog}.orgId`]: orgId,
-            eventType,
             userAgentType
           })
         )
@@ -52,8 +71,22 @@ export const auditLogDALFactory = (db: TDbClient) => {
         .offset(offset)
         .orderBy(`${TableName.AuditLog}.createdAt`, "desc");
 
-      if (actor) {
-        void sqlQuery.whereRaw(`"actorMetadata"->>'userId' = ?`, [actor]);
+      if (actorId) {
+        void sqlQuery.whereRaw(`"actorMetadata"->>'userId' = ?`, [actorId]);
+      }
+
+      if (eventMetadata && Object.keys(eventMetadata).length) {
+        Object.entries(eventMetadata).forEach(([key, value]) => {
+          void sqlQuery.whereRaw(`"eventMetadata"->>'${key}' = ?`, [value]);
+        });
+      }
+
+      if (actorType) {
+        void sqlQuery.where("actor", actorType);
+      }
+
+      if (eventType?.length) {
+        void sqlQuery.whereIn("eventType", eventType);
       }
 
       if (startDate) {

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

@@ -23,25 +23,12 @@ export const auditLogServiceFactory = ({
   auditLogQueue,
   permissionService
 }: TAuditLogServiceFactoryDep) => {
-  const listAuditLogs = async ({
-    userAgentType,
-    eventType,
-    offset,
-    limit,
-    endDate,
-    startDate,
-    actor,
-    actorId,
-    actorOrgId,
-    actorAuthMethod,
-    projectId,
-    auditLogActor
-  }: TListProjectAuditLogDTO) => {
-    if (projectId) {
+  const listAuditLogs = async ({ actorAuthMethod, actorId, actorOrgId, actor, filter }: TListProjectAuditLogDTO) => {
+    if (filter.projectId) {
       const { permission } = await permissionService.getProjectPermission(
         actor,
         actorId,
-        projectId,
+        filter.projectId,
         actorAuthMethod,
         actorOrgId
       );
@@ -65,14 +52,16 @@ export const auditLogServiceFactory = ({
     // If project ID is not provided, then we need to return all the audit logs for the organization itself.
 
     const auditLogs = await auditLogDAL.find({
-      startDate,
-      endDate,
-      limit,
-      offset,
-      eventType,
-      userAgentType,
-      actor: auditLogActor,
-      ...(projectId ? { projectId } : { orgId: actorOrgId })
+      startDate: filter.startDate,
+      endDate: filter.endDate,
+      limit: filter.limit,
+      offset: filter.offset,
+      eventType: filter.eventType,
+      userAgentType: filter.userAgentType,
+      actorId: filter.auditLogActorId,
+      actorType: filter.actorType,
+      eventMetadata: filter.eventMetadata,
+      ...(filter.projectId ? { projectId: filter.projectId } : { orgId: actorOrgId })
     });
 
     return auditLogs.map(({ eventType: logEventType, actor: eActor, actorMetadata, eventMetadata, ...el }) => ({

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

@@ -5,19 +5,23 @@ import { TIdentityTrustedIp } from "@app/services/identity/identity-types";
 import { PkiItemType } from "@app/services/pki-collection/pki-collection-types";
 
 export type TListProjectAuditLogDTO = {
-  auditLogActor?: string;
-  projectId?: string;
-  eventType?: string;
-  startDate?: string;
-  endDate?: string;
-  userAgentType?: string;
-  limit?: number;
-  offset?: number;
+  filter: {
+    userAgentType?: UserAgentType;
+    eventType?: EventType[];
+    offset?: number;
+    limit: number;
+    endDate?: string;
+    startDate?: string;
+    projectId?: string;
+    auditLogActorId?: string;
+    actorType?: ActorType;
+    eventMetadata?: Record<string, string>;
+  };
 } & Omit<TProjectPermission, "projectId">;
 
 export type TCreateAuditLogDTO = {
   event: Event;
-  actor: UserActor | IdentityActor | ServiceActor | ScimClientActor;
+  actor: UserActor | IdentityActor | ServiceActor | ScimClientActor | PlatformActor;
   orgId?: string;
   projectId?: string;
 } & BaseAuthData;
@@ -177,7 +181,8 @@ export enum EventType {
   UPDATE_SLACK_INTEGRATION = "update-slack-integration",
   DELETE_SLACK_INTEGRATION = "delete-slack-integration",
   GET_PROJECT_SLACK_CONFIG = "get-project-slack-config",
-  UPDATE_PROJECT_SLACK_CONFIG = "update-project-slack-config"
+  UPDATE_PROJECT_SLACK_CONFIG = "update-project-slack-config",
+  INTEGRATION_SYNCED = "integration-synced"
 }
 
 interface UserActorMetadata {
@@ -198,6 +203,8 @@ interface IdentityActorMetadata {
 
 interface ScimClientActorMetadata {}
 
+interface PlatformActorMetadata {}
+
 export interface UserActor {
   type: ActorType.USER;
   metadata: UserActorMetadata;
@@ -208,6 +215,11 @@ export interface ServiceActor {
   metadata: ServiceActorMetadata;
 }
 
+export interface PlatformActor {
+  type: ActorType.PLATFORM;
+  metadata: PlatformActorMetadata;
+}
+
 export interface IdentityActor {
   type: ActorType.IDENTITY;
   metadata: IdentityActorMetadata;
@@ -218,7 +230,7 @@ export interface ScimClientActor {
   metadata: ScimClientActorMetadata;
 }
 
-export type Actor = UserActor | ServiceActor | IdentityActor | ScimClientActor;
+export type Actor = UserActor | ServiceActor | IdentityActor | ScimClientActor | PlatformActor;
 
 interface GetSecretsEvent {
   type: EventType.GET_SECRETS;
@@ -1518,6 +1530,16 @@ interface GetProjectSlackConfig {
     id: string;
   };
 }
+interface IntegrationSyncedEvent {
+  type: EventType.INTEGRATION_SYNCED;
+  metadata: {
+    integrationId: string;
+    lastSyncJobId: string;
+    lastUsed: Date;
+    syncMessage: string;
+    isSynced: boolean;
+  };
+}
 
 export type Event =
   | GetSecretsEvent
@@ -1657,4 +1679,5 @@ export type Event =
   | DeleteSlackIntegration
   | GetSlackIntegration
   | UpdateProjectSlackConfig
-  | GetProjectSlackConfig;
+  | GetProjectSlackConfig
+  | IntegrationSyncedEvent;

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

@@ -1083,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",

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/queue/queue-service.ts

@@ -91,6 +91,8 @@ export type TQueueJobTypes = {
   [QueueName.IntegrationSync]: {
     name: QueueJobs.IntegrationSync;
     payload: {
+      isManual?: boolean;
+      actorId?: string;
       projectId: string;
       environment: string;
       secretPath: string;

backend/src/server/routes/index.ts

@@ -493,7 +493,6 @@ export const registerRoutes = async (
     orgRoleDAL,
     permissionService,
     orgDAL,
-    userGroupMembershipDAL,
     projectBotDAL,
     incidentContactDAL,
     tokenService,
@@ -811,6 +810,8 @@ export const registerRoutes = async (
     projectEnvDAL,
     webhookDAL,
     orgDAL,
+    auditLogService,
+    userDAL,
     projectMembershipDAL,
     smtpService,
     projectDAL,

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";
 
@@ -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",

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

@@ -4,7 +4,7 @@ import { IntegrationsSchema } from "@app/db/schemas";
 import { EventType } from "@app/ee/services/audit-log/audit-log-types";
 import { INTEGRATION } from "@app/lib/api-docs";
 import { removeTrailingSlash, shake } from "@app/lib/fn";
-import { writeLimit } from "@app/server/config/rateLimiter";
+import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { getTelemetryDistinctId } from "@app/server/lib/telemetry";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
@@ -154,6 +154,48 @@ export const registerIntegrationRouter = async (server: FastifyZodProvider) => {
     }
   });
 
+  server.route({
+    method: "GET",
+    url: "/:integrationId",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      description: "Get an integration by integration id",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        integrationId: z.string().trim().describe(INTEGRATION.UPDATE.integrationId)
+      }),
+      response: {
+        200: z.object({
+          integration: IntegrationsSchema.extend({
+            environment: z.object({
+              slug: z.string().trim(),
+              name: z.string().trim(),
+              id: z.string().trim()
+            })
+          })
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const integration = await server.services.integration.getIntegration({
+        actorId: req.permission.id,
+        actor: req.permission.type,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        id: req.params.integrationId
+      });
+
+      return { integration };
+    }
+  });
+
   server.route({
     method: "DELETE",
     url: "/:integrationId",

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

@@ -14,7 +14,7 @@ import { AUDIT_LOGS, ORGANIZATIONS } from "@app/lib/api-docs";
 import { getLastMidnightDateISO } from "@app/lib/fn";
 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 { ActorType, AuthMode } from "@app/services/auth/auth-type";
 
 export const registerOrgRouter = async (server: FastifyZodProvider) => {
   server.route({
@@ -74,8 +74,35 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
     schema: {
       description: "Get all audit logs for an organization",
       querystring: z.object({
-        eventType: z.nativeEnum(EventType).optional().describe(AUDIT_LOGS.EXPORT.eventType),
+        projectId: z.string().optional(),
+        actorType: z.nativeEnum(ActorType).optional(),
+        // eventType is split with , for multiple values, we need to transform it to array
+        eventType: z
+          .string()
+          .optional()
+          .transform((val) => (val ? val.split(",") : undefined)),
         userAgentType: z.nativeEnum(UserAgentType).optional().describe(AUDIT_LOGS.EXPORT.userAgentType),
+        eventMetadata: z
+          .string()
+          .optional()
+          .transform((val) => {
+            if (!val) {
+              return undefined;
+            }
+
+            const pairs = val.split(",");
+
+            return pairs.reduce(
+              (acc, pair) => {
+                const [key, value] = pair.split("=");
+                if (key && value) {
+                  acc[key] = value;
+                }
+                return acc;
+              },
+              {} as Record<string, string>
+            );
+          }),
         startDate: z.string().datetime().optional().describe(AUDIT_LOGS.EXPORT.startDate),
         endDate: z.string().datetime().optional().describe(AUDIT_LOGS.EXPORT.endDate),
         offset: z.coerce.number().default(0).describe(AUDIT_LOGS.EXPORT.offset),
@@ -114,13 +141,19 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
     onRequest: verifyAuth([AuthMode.JWT]),
     handler: async (req) => {
       const auditLogs = await server.services.auditLog.listAuditLogs({
+        filter: {
+          ...req.query,
+          endDate: req.query.endDate,
+          projectId: req.query.projectId,
+          startDate: req.query.startDate || getLastMidnightDateISO(),
+          auditLogActorId: req.query.actor,
+          actorType: req.query.actorType,
+          eventType: req.query.eventType as EventType[] | undefined
+        },
+
         actorId: req.permission.id,
         actorOrgId: req.permission.orgId,
         actorAuthMethod: req.permission.authMethod,
-        ...req.query,
-        endDate: req.query.endDate,
-        startDate: req.query.startDate || getLastMidnightDateISO(),
-        auditLogActor: req.query.actor,
         actor: req.permission.type
       });
       return { auditLogs };

backend/src/services/auth/auth-type.ts

@@ -34,6 +34,7 @@ export enum AuthMode {
 }
 
 export enum ActorType { // would extend to AWS, Azure, ...
+  PLATFORM = "platform", // Useful for when we want to perform logging on automated actions such as integration syncs.
   USER = "user", // userIdentity
   SERVICE = "service",
   IDENTITY = "identity",

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

@@ -768,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
    */
@@ -782,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" });
 
@@ -856,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,
@@ -865,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,
@@ -884,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)
+        })
       ]
     });
 
@@ -1176,12 +1219,18 @@ 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.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
@@ -1366,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;
 
@@ -1492,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,
@@ -1500,10 +1550,19 @@ 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.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
@@ -1783,6 +1842,7 @@ export const certificateAuthorityServiceFactory = ({
     renewCaCert,
     getCaCerts,
     getCaCert,
+    getCaCertById,
     signIntermediate,
     importCertToCa,
     issueCertFromCa,

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/identity-service.ts

@@ -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."

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/integration/integration-service.ts

@@ -2,7 +2,7 @@ import { ForbiddenError, subject } from "@casl/ability";
 
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/ee/services/permission/project-permission";
-import { BadRequestError } from "@app/lib/errors";
+import { BadRequestError, NotFoundError } from "@app/lib/errors";
 import { TProjectPermission } from "@app/lib/types";
 
 import { TIntegrationAuthDALFactory } from "../integration-auth/integration-auth-dal";
@@ -19,6 +19,7 @@ import { TIntegrationDALFactory } from "./integration-dal";
 import {
   TCreateIntegrationDTO,
   TDeleteIntegrationDTO,
+  TGetIntegrationDTO,
   TSyncIntegrationDTO,
   TUpdateIntegrationDTO
 } from "./integration-types";
@@ -180,6 +181,27 @@ export const integrationServiceFactory = ({
     return updatedIntegration;
   };
 
+  const getIntegration = async ({ id, actor, actorAuthMethod, actorId, actorOrgId }: TGetIntegrationDTO) => {
+    const integration = await integrationDAL.findById(id);
+
+    const { permission } = await permissionService.getProjectPermission(
+      actor,
+      actorId,
+      integration?.projectId || "",
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Integrations);
+
+    if (!integration) {
+      throw new NotFoundError({
+        message: "Integration not found"
+      });
+    }
+
+    return { ...integration, envId: integration.environment.id };
+  };
+
   const deleteIntegration = async ({
     actorId,
     id,
@@ -276,6 +298,8 @@ export const integrationServiceFactory = ({
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Integrations);
 
     await secretQueueService.syncIntegrations({
+      isManual: true,
+      actorId,
       environment: integration.environment.slug,
       secretPath: integration.secretPath,
       projectId: integration.projectId
@@ -289,6 +313,7 @@ export const integrationServiceFactory = ({
     updateIntegration,
     deleteIntegration,
     listIntegrationByProject,
+    getIntegration,
     syncIntegration
   };
 };

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

@@ -39,6 +39,10 @@ export type TCreateIntegrationDTO = {
   };
 } & Omit<TProjectPermission, "projectId">;
 
+export type TGetIntegrationDTO = {
+  id: string;
+} & Omit<TProjectPermission, "projectId">;
+
 export type TUpdateIntegrationDTO = {
   id: string;
   app?: string;

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) => {
@@ -475,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)
@@ -617,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));
@@ -644,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-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/secret-queue.ts

@@ -2,6 +2,8 @@
 import { AxiosError } from "axios";
 
 import { ProjectUpgradeStatus, ProjectVersion, TSecretSnapshotSecretsV2, TSecretVersionsV2 } from "@app/db/schemas";
+import { TAuditLogServiceFactory } from "@app/ee/services/audit-log/audit-log-service";
+import { Actor, EventType } from "@app/ee/services/audit-log/audit-log-types";
 import { TSecretApprovalRequestDALFactory } from "@app/ee/services/secret-approval-request/secret-approval-request-dal";
 import { TSecretRotationDALFactory } from "@app/ee/services/secret-rotation/secret-rotation-dal";
 import { TSnapshotDALFactory } from "@app/ee/services/secret-snapshot/snapshot-dal";
@@ -21,6 +23,7 @@ import { TSecretVersionTagDALFactory } from "@app/services/secret/secret-version
 import { TSecretBlindIndexDALFactory } from "@app/services/secret-blind-index/secret-blind-index-dal";
 import { TSecretTagDALFactory } from "@app/services/secret-tag/secret-tag-dal";
 
+import { ActorType } from "../auth/auth-type";
 import { TIntegrationDALFactory } from "../integration/integration-dal";
 import { TIntegrationAuthDALFactory } from "../integration-auth/integration-auth-dal";
 import { TIntegrationAuthServiceFactory } from "../integration-auth/integration-auth-service";
@@ -40,6 +43,7 @@ import { expandSecretReferencesFactory, getAllNestedSecretReferences } from "../
 import { TSecretVersionV2DALFactory } from "../secret-v2-bridge/secret-version-dal";
 import { TSecretVersionV2TagDALFactory } from "../secret-v2-bridge/secret-version-tag-dal";
 import { SmtpTemplates, TSmtpService } from "../smtp/smtp-service";
+import { TUserDALFactory } from "../user/user-dal";
 import { TWebhookDALFactory } from "../webhook/webhook-dal";
 import { fnTriggerWebhook } from "../webhook/webhook-fns";
 import { TSecretDALFactory } from "./secret-dal";
@@ -71,6 +75,7 @@ type TSecretQueueFactoryDep = {
   secretVersionDAL: TSecretVersionDALFactory;
   secretBlindIndexDAL: TSecretBlindIndexDALFactory;
   secretTagDAL: TSecretTagDALFactory;
+  userDAL: Pick<TUserDALFactory, "findById">;
   secretVersionTagDAL: TSecretVersionTagDALFactory;
   kmsService: Pick<TKmsServiceFactory, "createCipherPairWithDataKey">;
   secretV2BridgeDAL: TSecretV2BridgeDALFactory;
@@ -81,6 +86,7 @@ type TSecretQueueFactoryDep = {
   snapshotDAL: Pick<TSnapshotDALFactory, "findNSecretV1SnapshotByFolderId" | "deleteSnapshotsAboveLimit">;
   snapshotSecretV2BridgeDAL: Pick<TSnapshotSecretV2DALFactory, "insertMany" | "batchInsert">;
   keyStore: Pick<TKeyStoreFactory, "acquireLock" | "setItemWithExpiry" | "getItem">;
+  auditLogService: Pick<TAuditLogServiceFactory, "createAuditLog">;
 };
 
 export type TGetSecrets = {
@@ -106,6 +112,7 @@ export const secretQueueFactory = ({
   secretDAL,
   secretImportDAL,
   folderDAL,
+  userDAL,
   webhookDAL,
   projectEnvDAL,
   orgDAL,
@@ -125,7 +132,8 @@ export const secretQueueFactory = ({
   snapshotDAL,
   snapshotSecretV2BridgeDAL,
   secretApprovalRequestDAL,
-  keyStore
+  keyStore,
+  auditLogService
 }: TSecretQueueFactoryDep) => {
   const removeSecretReminder = async (dto: TRemoveSecretReminderDTO) => {
     const appCfg = getConfig();
@@ -430,7 +438,9 @@ export const secretQueueFactory = ({
     return content;
   };
 
-  const syncIntegrations = async (dto: TGetSecrets & { deDupeQueue?: Record<string, boolean> }) => {
+  const syncIntegrations = async (
+    dto: TGetSecrets & { isManual?: boolean; actorId?: string; deDupeQueue?: Record<string, boolean> }
+  ) => {
     await queueService.queue(QueueName.IntegrationSync, QueueJobs.IntegrationSync, dto, {
       attempts: 3,
       delay: 1000,
@@ -528,7 +538,7 @@ export const secretQueueFactory = ({
         }
       }
     );
-    await syncIntegrations({ secretPath, projectId, environment, deDupeQueue });
+    await syncIntegrations({ secretPath, projectId, environment, deDupeQueue, isManual: false });
     if (!excludeReplication) {
       await replicateSecrets({
         _deDupeReplicationQueue: deDupeReplicationQueue,
@@ -544,7 +554,7 @@ export const secretQueueFactory = ({
   });
 
   queueService.start(QueueName.IntegrationSync, async (job) => {
-    const { environment, projectId, secretPath, depth = 1, deDupeQueue = {} } = job.data;
+    const { environment, actorId, isManual, projectId, secretPath, depth = 1, deDupeQueue = {} } = job.data;
     if (depth > MAX_SYNC_SECRET_DEPTH) return;
 
     const folder = await folderDAL.findBySecretPath(projectId, environment, secretPath);
@@ -693,6 +703,30 @@ export const secretQueueFactory = ({
         });
     }
 
+    const generateActor = async (): Promise<Actor> => {
+      if (isManual && actorId) {
+        const user = await userDAL.findById(actorId);
+
+        if (!user) {
+          throw new Error("User not found");
+        }
+
+        return {
+          type: ActorType.USER,
+          metadata: {
+            email: user.email,
+            username: user.username,
+            userId: user.id
+          }
+        };
+      }
+
+      return {
+        type: ActorType.PLATFORM,
+        metadata: {}
+      };
+    };
+
     // akhilmhdh: this try catch is for lock release
     try {
       const secrets = shouldUseSecretV2Bridge
@@ -778,6 +812,21 @@ export const secretQueueFactory = ({
             }
           });
 
+          await auditLogService.createAuditLog({
+            projectId,
+            actor: await generateActor(),
+            event: {
+              type: EventType.INTEGRATION_SYNCED,
+              metadata: {
+                integrationId: integration.id,
+                isSynced: response?.isSynced ?? true,
+                lastSyncJobId: job?.id ?? "",
+                lastUsed: new Date(),
+                syncMessage: response?.syncMessage ?? ""
+              }
+            }
+          });
+
           await integrationDAL.updateById(integration.id, {
             lastSyncJobId: job.id,
             lastUsed: new Date(),
@@ -794,9 +843,23 @@ export const secretQueueFactory = ({
             (err instanceof AxiosError ? JSON.stringify(err?.response?.data) : (err as Error)?.message) ||
             "Unknown error occurred.";
 
+          await auditLogService.createAuditLog({
+            projectId,
+            actor: await generateActor(),
+            event: {
+              type: EventType.INTEGRATION_SYNCED,
+              metadata: {
+                integrationId: integration.id,
+                isSynced: false,
+                lastSyncJobId: job?.id ?? "",
+                lastUsed: new Date(),
+                syncMessage: message
+              }
+            }
+          });
+
           await integrationDAL.updateById(integration.id, {
             lastSyncJobId: job.id,
-            lastUsed: new Date(),
             syncMessage: message,
             isSynced: false
           });

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/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

@@ -769,6 +769,7 @@
       "group": "Internals",
       "pages": [
         "internals/overview",
+        "internals/permissions",
         "internals/components",
         "internals/flows",
         "internals/security",

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
@@ -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/UserContext/UserContext.tsx

@@ -25,6 +25,21 @@ export const UserProvider = ({ children }: Props): JSX.Element => {
     };
   }, [data, isLoading]);
 
+  if (isLoading) {
+    return (
+      <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
+        <img
+          src="/images/loading/loading.gif"
+          height={70}
+          width={120}
+          decoding="async"
+          loading="lazy"
+          alt="infisical loading indicator"
+        />
+      </div>
+    );
+  }
+
   return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
 };
 

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/auditLogs/constants.tsx

@@ -79,7 +79,8 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.UPDATE_CERTIFICATE_TEMPLATE_EST_CONFIG]:
     "Update certificate template EST configuration",
   [EventType.UPDATE_PROJECT_SLACK_CONFIG]: "Update project slack configuration",
-  [EventType.GET_PROJECT_SLACK_CONFIG]: "Get project slack configuration"
+  [EventType.GET_PROJECT_SLACK_CONFIG]: "Get project slack configuration",
+  [EventType.INTEGRATION_SYNCED]: "Integration sync"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {

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

@@ -1,4 +1,5 @@
 export enum ActorType {
+  PLATFORM = "platform",
   USER = "user",
   SERVICE = "service",
   IDENTITY = "identity"
@@ -91,5 +92,6 @@ export enum EventType {
   UPDATE_CERTIFICATE_TEMPLATE_EST_CONFIG = "update-certificate-template-est-config",
   GET_CERTIFICATE_TEMPLATE_EST_CONFIG = "get-certificate-template-est-config",
   UPDATE_PROJECT_SLACK_CONFIG = "update-project-slack-config",
-  GET_PROJECT_SLACK_CONFIG = "get-project-slack-config"
+  GET_PROJECT_SLACK_CONFIG = "get-project-slack-config",
+  INTEGRATION_SYNCED = "integration-synced"
 }

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

@@ -1,35 +1,58 @@
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, UseInfiniteQueryOptions, useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { Actor, AuditLog, AuditLogFilters } from "./types";
+import { Actor, AuditLog, TGetAuditLogsFilter } from "./types";
 
 export const auditLogKeys = {
-  getAuditLogs: (workspaceId: string | null, filters: AuditLogFilters) =>
+  getAuditLogs: (workspaceId: string | null, filters: TGetAuditLogsFilter) =>
     [{ workspaceId, filters }, "audit-logs"] as const,
   getAuditLogActorFilterOpts: (workspaceId: string) =>
     [{ workspaceId }, "audit-log-actor-filters"] as const
 };
 
-export const useGetAuditLogs = (filters: AuditLogFilters, workspaceId: string | null) => {
+export const useGetAuditLogs = (
+  filters: TGetAuditLogsFilter,
+  projectId: string | null,
+  options: Omit<
+    UseInfiniteQueryOptions<
+      AuditLog[],
+      unknown,
+      AuditLog[],
+      AuditLog[],
+      ReturnType<typeof auditLogKeys.getAuditLogs>
+    >,
+    "queryFn" | "queryKey" | "getNextPageParam"
+  > = {}
+) => {
   return useInfiniteQuery({
-    queryKey: auditLogKeys.getAuditLogs(workspaceId, filters),
+    queryKey: auditLogKeys.getAuditLogs(projectId, filters),
     queryFn: async ({ pageParam }) => {
-      const auditLogEndpoint = workspaceId
-        ? `/api/v1/workspace/${workspaceId}/audit-logs`
-        : "/api/v1/organization/audit-logs";
-      const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(auditLogEndpoint, {
-        params: {
-          ...filters,
-          offset: pageParam,
-          startDate: filters?.startDate?.toISOString(),
-          endDate: filters?.endDate?.toISOString()
+      const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(
+        "/api/v1/organization/audit-logs",
+        {
+          params: {
+            ...filters,
+            offset: pageParam,
+            startDate: filters?.startDate?.toISOString(),
+            endDate: filters?.endDate?.toISOString(),
+            ...(filters.eventMetadata && Object.keys(filters.eventMetadata).length
+              ? {
+                  eventMetadata: Object.entries(filters.eventMetadata)
+                    .map(([key, value]) => `${key}=${value}`)
+                    .join(",")
+                }
+              : {}),
+            ...(filters.eventType?.length ? { eventType: filters.eventType.join(",") } : {}),
+            ...(projectId ? { projectId } : {})
+          }
         }
-      });
+      );
       return data.auditLogs;
     },
     getNextPageParam: (lastPage, pages) =>
-      lastPage.length !== 0 ? pages.length * filters.limit : undefined
+      lastPage.length !== 0 ? pages.length * filters.limit : undefined,
+    ...options
   });
 };
 

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

@@ -3,6 +3,17 @@ import { IdentityTrustedIp } from "../identities/types";
 import { PkiItemType } from "../pkiCollections/constants";
 import { ActorType, EventType, UserAgentType } from "./enums";
 
+export type TGetAuditLogsFilter = {
+  eventType?: EventType[];
+  userAgentType?: UserAgentType;
+  eventMetadata?: Record<string, string>;
+  actorType?: ActorType;
+  actorId?: string; // user ID format
+  startDate?: Date;
+  endDate?: Date;
+  limit: number;
+};
+
 interface UserActorMetadata {
   userId: string;
   email: string;
@@ -33,7 +44,13 @@ export interface IdentityActor {
   metadata: IdentityActorMetadata;
 }
 
-export type Actor = UserActor | ServiceActor | IdentityActor;
+export interface PlatformActorMetadata {}
+export interface PlatformActor {
+  type: ActorType.PLATFORM;
+  metadata: PlatformActorMetadata;
+}
+
+export type Actor = UserActor | ServiceActor | IdentityActor | PlatformActor;
 
 interface GetSecretsEvent {
   type: EventType.GET_SECRETS;
@@ -761,6 +778,22 @@ interface GetProjectSlackConfig {
   };
 }
 
+export enum IntegrationSyncedEventTrigger {
+  MANUAL = "manual",
+  AUTO = "auto"
+}
+
+interface IntegrationSyncedEvent {
+  type: EventType.INTEGRATION_SYNCED;
+  metadata: {
+    integrationId: string;
+    lastSyncJobId: string;
+    lastUsed: Date;
+    syncMessage: string;
+    isSynced: boolean;
+  };
+}
+
 export type Event =
   | GetSecretsEvent
   | GetSecretEvent
@@ -838,7 +871,8 @@ export type Event =
   | CreateCertificateTemplateEstConfig
   | GetCertificateTemplateEstConfig
   | UpdateProjectSlackConfig
-  | GetProjectSlackConfig;
+  | GetProjectSlackConfig
+  | IntegrationSyncedEvent;
 
 export type AuditLog = {
   id: string;
@@ -856,12 +890,3 @@ export type AuditLog = {
     slug: string;
   };
 };
-
-export type AuditLogFilters = {
-  eventType?: EventType;
-  userAgentType?: UserAgentType;
-  actor?: string;
-  limit: number;
-  startDate?: Date;
-  endDate?: Date;
-};

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

@@ -1 +1,6 @@
-export { useCreateIntegration, useDeleteIntegration, useGetCloudIntegrations } from "./queries";
+export {
+  useCreateIntegration,
+  useDeleteIntegration,
+  useGetCloudIntegrations,
+  useGetIntegration
+} from "./queries";

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

@@ -1,13 +1,14 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
 
 import { createNotification } from "@app/components/notifications";
 import { apiRequest } from "@app/config/request";
 
 import { workspaceKeys } from "../workspace";
-import { TCloudIntegration } from "./types";
+import { TCloudIntegration, TIntegrationWithEnv } from "./types";
 
 export const integrationQueryKeys = {
-  getIntegrations: () => ["integrations"] as const
+  getIntegrations: () => ["integrations"] as const,
+  getIntegration: (id: string) => ["integration", id] as const
 };
 
 const fetchIntegrations = async () => {
@@ -18,6 +19,14 @@ const fetchIntegrations = async () => {
   return data.integrationOptions;
 };
 
+const fetchIntegration = async (id: string) => {
+  const { data } = await apiRequest.get<{ integration: TIntegrationWithEnv }>(
+    `/api/v1/integration/${id}`
+  );
+
+  return data.integration;
+};
+
 export const useGetCloudIntegrations = () =>
   useQuery({
     queryKey: integrationQueryKeys.getIntegrations(),
@@ -128,6 +137,26 @@ export const useDeleteIntegration = () => {
   });
 };
 
+export const useGetIntegration = (
+  integrationId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TIntegrationWithEnv,
+      unknown,
+      TIntegrationWithEnv,
+      ReturnType<typeof integrationQueryKeys.getIntegration>
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  return useQuery({
+    ...options,
+    enabled: Boolean(integrationId && options?.enabled === undefined ? true : options?.enabled),
+    queryKey: integrationQueryKeys.getIntegration(integrationId),
+    queryFn: () => fetchIntegration(integrationId)
+  });
+};
+
 export const useSyncIntegration = () => {
   return useMutation<{}, {}, { id: string; workspaceId: string; lastUsed: string }>({
     mutationFn: ({ id }) => apiRequest.post(`/api/v1/integration/${id}/sync`),

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

@@ -36,14 +36,34 @@ export type TIntegration = {
   metadata?: {
     githubVisibility?: string;
     githubVisibilityRepoIds?: string[];
+    shouldAutoRedeploy?: boolean;
+    secretAWSTag?: {
+      key: string;
+      value: string;
+    }[];
 
+    kmsKeyId?: string;
     secretSuffix?: string;
+    secretPrefix?: string;
     syncBehavior?: IntegrationSyncBehavior;
     mappingBehavior?: IntegrationMappingBehavior;
     scope: string;
     org: string;
     project: string;
     environment: string;
+
+    shouldDisableDelete?: boolean;
+    shouldMaskSecrets?: boolean;
+    shouldProtectSecrets?: boolean;
+    shouldEnableDelete?: boolean;
+  };
+};
+
+export type TIntegrationWithEnv = TIntegration & {
+  environment: {
+    id: string;
+    name: string;
+    slug: string;
   };
 };
 

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/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/pages/integrations/details/[integrationId].tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { IntegrationDetailsPage } from "@app/views/IntegrationsPage/IntegrationDetailsPage";
+
+export default function IntegrationsDetailsPage() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Head>
+        <title>Integration Details | Infisical</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content="Manage your .env files in seconds" />
+        <meta name="og:description" content={t("integrations.description") as string} />
+      </Head>
+      <IntegrationDetailsPage />
+    </>
+  );
+}
+
+IntegrationsDetailsPage.requireAuth = true;

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/IntegrationDetailsPage.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+import { twMerge } from "tailwind-merge";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useUser,
+  useWorkspace
+} from "@app/context";
+import { useGetIntegration } from "@app/hooks/api";
+import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
+
+import { IntegrationAuditLogsSection } from "./components/IntegrationAuditLogsSection";
+import { IntegrationConnectionSection } from "./components/IntegrationConnectionSection";
+import { IntegrationDetailsSection } from "./components/IntegrationDetailsSection";
+import { IntegrationSettingsSection } from "./components/IntegrationSettingsSection";
+
+export const IntegrationDetailsPage = () => {
+  const router = useRouter();
+  const integrationId = router.query.integrationId as string;
+
+  const { data: integration } = useGetIntegration(integrationId, {
+    refetchInterval: 4000
+  });
+
+  const projectId = useWorkspace().currentWorkspace?.id;
+  const { mutateAsync: syncIntegration } = useSyncIntegration();
+  const { currentOrg } = useOrganization();
+
+  return integration ? (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+        <Button
+          variant="link"
+          type="submit"
+          leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+          onClick={() => {
+            router.push(`/integrations/${projectId}`);
+          }}
+          className="mb-4"
+        >
+          Integrations
+        </Button>
+        <div className="mb-4 flex items-center justify-between">
+          <p className="text-3xl font-semibold text-white">
+            {integrationSlugNameMapping[integration.integration]} Integration
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild className="rounded-lg">
+              <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                <Tooltip content="More options">
+                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                </Tooltip>
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="p-1">
+              <DropdownMenuItem
+                onClick={async () => {
+                  await syncIntegration({
+                    id: integration.id,
+                    lastUsed: integration.lastUsed!,
+                    workspaceId: projectId!
+                  });
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faRefresh} />
+                  Manually Sync
+                </div>
+              </DropdownMenuItem>
+              <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Member}>
+                {(isAllowed) => (
+                  <DropdownMenuItem
+                    className={twMerge(
+                      isAllowed
+                        ? "hover:!bg-red-500 hover:!text-white"
+                        : "pointer-events-none cursor-not-allowed opacity-50"
+                    )}
+                    onClick={() => {}}
+                    disabled={!isAllowed}
+                  >
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faTrash} />
+                      Delete Integration
+                    </div>
+                  </DropdownMenuItem>
+                )}
+              </OrgPermissionCan>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="flex justify-center">
+          <div className="mr-4 w-96">
+            <IntegrationDetailsSection integration={integration} />
+            <IntegrationConnectionSection integration={integration} />
+          </div>
+          <div className="space-y-4">
+            <IntegrationSettingsSection integration={integration} />
+            <IntegrationAuditLogsSection orgId={currentOrg?.id || ""} integration={integration} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : null;
+};

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationAuditLogsSection.tsx

@@ -0,0 +1,78 @@
+import Link from "next/link";
+
+import { EmptyState } from "@app/components/v2";
+import { useSubscription } from "@app/context";
+import { EventType } from "@app/hooks/api/auditLogs/enums";
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+import { LogsSection } from "@app/views/Project/AuditLogsPage/components";
+
+// Add more events if needed
+const INTEGRATION_EVENTS = [EventType.INTEGRATION_SYNCED];
+
+type Props = {
+  integration: TIntegrationWithEnv;
+  orgId: string;
+};
+
+export const IntegrationAuditLogsSection = ({ integration, orgId }: Props) => {
+  const { subscription, isLoading } = useSubscription();
+
+  const auditLogsRetentionDays = subscription?.auditLogsRetentionDays ?? 30;
+
+  // eslint-disable-next-line no-nested-ternary
+  return subscription?.auditLogs ? (
+    <div className="h-full w-full min-w-[51rem] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <p className="text-lg font-semibold text-gray-200">Integration Logs</p>
+        <p className="text-xs text-gray-400">
+          Displaying audit logs from the last {auditLogsRetentionDays} days
+        </p>
+      </div>
+      <LogsSection
+        refetchInterval={4000}
+        remappedHeaders={{
+          Metadata: "Sync Status"
+        }}
+        showFilters={false}
+        presets={{
+          eventMetadata: { integrationId: integration.id },
+          startDate: new Date(new Date().setDate(new Date().getDate() - auditLogsRetentionDays)),
+          eventType: INTEGRATION_EVENTS
+        }}
+        filterClassName="bg-mineshaft-900 static"
+      />
+    </div>
+  ) : !isLoading ? (
+    <div className="h-full w-full min-w-[51rem] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 opacity-60">
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <p className="text-lg font-semibold text-gray-200">Integration Logs</p>
+      </div>
+      <EmptyState
+        className="rounded-lg"
+        title={
+          <div>
+            <p>
+              Please{" "}
+              <Link
+                href={
+                  subscription && subscription.slug !== null
+                    ? `/org${orgId}/billing`
+                    : "https://infisical.com/scheduledemo"
+                }
+                passHref
+              >
+                <a
+                  className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
+                  target="_blank"
+                >
+                  upgrade your subscription
+                </a>
+              </Link>{" "}
+              to view integration logs
+            </p>
+          </div>
+        }
+      />
+    </div>
+  ) : null;
+};

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationConnectionSection.tsx

@@ -0,0 +1,194 @@
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+
+import { FormLabel } from "@app/components/v2";
+import { IntegrationMappingBehavior, TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+  integration: TIntegrationWithEnv;
+};
+
+export const IntegrationConnectionSection = ({ integration }: Props) => {
+  const specifcQoveryDetails = () => {
+    if (integration.integration !== "qovery") return null;
+
+    return (
+      <div className="flex flex-row">
+        <div className="flex flex-col">
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Organization" />
+          <div className="text-sm text-mineshaft-300">{integration?.owner || "-"}</div>
+        </div>
+        <div className="flex flex-col">
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Project" />
+          <div className="text-sm text-mineshaft-300">{integration?.targetService || "-"}</div>
+        </div>
+        <div className="flex flex-col">
+          <FormLabel
+            className="text-sm font-semibold text-mineshaft-300"
+            label="Target Environment"
+          />
+          <div className="text-sm text-mineshaft-300">{integration?.targetEnvironment || "-"}</div>
+        </div>
+      </div>
+    );
+  };
+
+  const isNotAwsManagerOneToOneDetails = () => {
+    const isAwsSecretManagerOneToOne =
+      integration.integration === "aws-secret-manager" &&
+      integration.metadata?.mappingBehavior === IntegrationMappingBehavior.ONE_TO_ONE;
+
+    if (isAwsSecretManagerOneToOne) {
+      return null;
+    }
+
+    const formLabel = () => {
+      switch (integration.integration) {
+        case "qovery":
+          return integration.scope;
+        case "circleci":
+        case "terraform-cloud":
+          return "Project";
+        case "aws-secret-manager":
+          return "Secret";
+        case "aws-parameter-store":
+        case "rundeck":
+          return "Path";
+        case "github":
+          if (["github-env", "github-repo"].includes(integration.scope!)) {
+            return "Repository";
+          }
+          return "Organization";
+
+        default:
+          return "App";
+      }
+    };
+
+    const contents = () => {
+      switch (integration.integration) {
+        case "hashicorp-vault":
+          return `${integration.app} - path: ${integration.path}`;
+        case "github":
+          if (integration.scope === "github-org") {
+            return `${integration.owner}`;
+          }
+          return `${integration.owner}/${integration.app}`;
+
+        case "aws-parameter-store":
+        case "rundeck":
+          return `${integration.path}`;
+
+        default:
+          return `${integration.app}`;
+      }
+    };
+
+    return (
+      <div className="flex flex-col">
+        <FormLabel className="text-sm font-semibold text-mineshaft-300" label={formLabel()} />
+        <div className="text-sm text-mineshaft-300">{contents()}</div>
+      </div>
+    );
+  };
+
+  const targetEnvironmentDetails = () => {
+    if (
+      ["vercel", "netlify", "railway", "gitlab", "teamcity", "bitbucket"].includes(
+        integration.integration
+      ) ||
+      (integration.integration === "github" && integration.scope === "github-env")
+    ) {
+      return (
+        <div className="flex flex-col">
+          <FormLabel
+            className="text-sm font-semibold text-mineshaft-300"
+            label="Target Environment"
+          />
+          <div className="text-sm text-mineshaft-300">
+            {integration.targetEnvironment || integration.targetEnvironmentId}
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const generalIntegrationSpecificDetails = () => {
+    if (integration.integration === "checkly" && integration.targetService) {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Group" />
+          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
+        </div>
+      );
+    }
+
+    if (integration.integration === "circleci" && integration.owner) {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Organization" />
+          <div className="text-sm text-mineshaft-300">{integration.owner}</div>
+        </div>
+      );
+    }
+
+    if (integration.integration === "terraform-cloud" && integration.targetService) {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Category" />
+          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
+        </div>
+      );
+    }
+
+    if (integration.integration === "checkly" || integration.integration === "github") {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Secret Suffix" />
+          <div className="text-sm text-mineshaft-300">
+            {integration?.metadata?.secretSuffix || "-"}
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Connection</h3>
+      </div>
+
+      <div className="mt-4">
+        <FormLabel className="my-2" label="Source" />
+
+        <div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
+          <div className="flex flex-col">
+            <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Environment" />
+            <div className="text-sm text-mineshaft-300">{integration.environment.name}</div>
+          </div>
+          <div className="flex flex-col">
+            <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Secret Path" />
+            <div className="text-sm text-mineshaft-300">{integration.secretPath}</div>
+          </div>
+        </div>
+
+        <FormLabel className="my-2" label="Destination" />
+        <div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Platform" />
+          <div className="text-sm text-mineshaft-300">
+            {integrationSlugNameMapping[integration.integration]}
+          </div>
+
+          {specifcQoveryDetails()}
+          {isNotAwsManagerOneToOneDetails()}
+          {targetEnvironmentDetails()}
+          {generalIntegrationSpecificDetails()}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationDetailsSection.tsx

@@ -0,0 +1,69 @@
+import { faCalendarCheck, faCheckCircle, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+import { twMerge } from "tailwind-merge";
+
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+  integration: TIntegrationWithEnv;
+};
+
+export const IntegrationDetailsSection = ({ integration }: Props) => {
+  return (
+    <div>
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <h3 className="text-lg font-semibold text-mineshaft-100">Integration Details</h3>
+        </div>
+        <div className="mt-4">
+          <div className="space-y-3">
+            <div>
+              <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+              <p className="text-sm text-mineshaft-300">
+                {integrationSlugNameMapping[integration.integration]}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-mineshaft-300">Sync Status</p>
+              <div className="flex items-center">
+                <p
+                  className={twMerge(
+                    "mr-2 text-sm font-medium",
+                    integration.isSynced ? "text-green-500" : "text-red-500"
+                  )}
+                >
+                  {integration.isSynced ? "Synced" : "Not Synced"}
+                </p>
+                <FontAwesomeIcon
+                  size="sm"
+                  className={twMerge(integration.isSynced ? "text-green-500" : "text-red-500")}
+                  icon={integration.isSynced ? faCheckCircle : faCircleXmark}
+                />
+              </div>
+            </div>
+            {integration.lastUsed && (
+              <div>
+                <p className="text-sm font-semibold text-mineshaft-300">Latest Successful Sync</p>
+                <div className="flex items-center gap-2 text-sm text-mineshaft-300">
+                  {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
+                  <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
+                </div>
+              </div>
+            )}
+
+            <div>
+              {!integration.isSynced && integration.syncMessage && (
+                <>
+                  <p className="text-sm font-semibold text-mineshaft-300">Latest Sync Error</p>
+                  <p className="text-sm text-mineshaft-300">{integration.syncMessage}</p>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationSettingsSection.tsx

@@ -0,0 +1,89 @@
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+  integration: TIntegrationWithEnv;
+};
+
+type Metadata = NonNullable<TIntegrationWithEnv["metadata"]>;
+type MetadataKey = keyof Metadata;
+type MetadataValue<K extends MetadataKey> = Metadata[K];
+
+const metadataMappings: Record<keyof NonNullable<TIntegrationWithEnv["metadata"]>, string> = {
+  githubVisibility: "Github Visibility",
+  githubVisibilityRepoIds: "Github Visibility Repo Ids",
+  shouldAutoRedeploy: "Auto Redeploy Target Application When Secrets Change",
+  secretAWSTag: "Tags For Secrets Stored In AWS",
+  kmsKeyId: "AWS KMS Key ID",
+  secretSuffix: "Secret Suffix",
+  secretPrefix: "Secret Prefix",
+  syncBehavior: "Secrets Sync behavior",
+  mappingBehavior: "Secrets Mapping Behavior",
+  scope: "Scope",
+  org: "Organization",
+  project: "Project",
+  environment: "Environment",
+  shouldDisableDelete: "AWS Secret Deletion Disabled",
+  shouldMaskSecrets: "GitLab Secrets Masking Enabled",
+  shouldProtectSecrets: "GitLab Secret Protection Enabled",
+  shouldEnableDelete: "GitHub Secret Deletion Enabled"
+} as const;
+
+export const IntegrationSettingsSection = ({ integration }: Props) => {
+  const renderValue = <K extends MetadataKey>(key: K, value: MetadataValue<K>) => {
+    if (!value) return null;
+
+    // If it's a boolean, we render a generic "Yes" or "No" response.
+    if (typeof value === "boolean") {
+      return value ? "Yes" : "No";
+    }
+
+    // When the value is an object or array, or array of objects, we need to handle some special cases.
+    if (typeof value === "object") {
+      if (key === "secretAWSTag") {
+        return (value as MetadataValue<"secretAWSTag">)!.map(({ key: tagKey, value: tagValue }) => (
+          <p key={tagKey} className="text-sm text-gray-200">
+            {tagKey}={tagValue}
+          </p>
+        ));
+      }
+
+      if (key === "githubVisibilityRepoIds") {
+        return value.join(", ");
+      }
+    }
+
+    if (typeof value === "string") {
+      return value.length ? value : "N/A";
+    }
+
+    if (typeof value === "number") {
+      return value;
+    }
+
+    return null;
+  };
+
+  if (!integration.metadata || Object.keys(integration.metadata).length === 0) {
+    return null;
+  }
+
+  // eslint-disable-next-line no-nested-ternary
+  return (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <p className="text-lg font-semibold text-gray-200">Integration Settings</p>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        {integration.metadata &&
+          Object.entries(integration.metadata).map(([key, value]) => (
+            <div key={key} className="flex flex-col">
+              <p className="text-sm text-gray-400">
+                {metadataMappings[key as keyof typeof metadataMappings]}
+              </p>
+              <p className="text-sm text-gray-200">{renderValue(key as MetadataKey, value)}</p>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/index.tsx

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

frontend/src/views/IntegrationsPage/components/IntegrationsSection/ConfiguredIntegrationItem.tsx

@@ -1,6 +1,10 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import { useRouter } from "next/router";
 import {
   faArrowRight,
   faCalendarCheck,
+  faEllipsis,
   faRefresh,
   faWarning,
   faXmark
@@ -10,7 +14,7 @@ import { format } from "date-fns";
 import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormLabel, IconButton, Tag, Tooltip } from "@app/components/v2";
+import { Badge, FormLabel, IconButton, Tooltip } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
 import { TIntegration } from "@app/hooks/api/types";
@@ -28,9 +32,12 @@ export const ConfiguredIntegrationItem = ({
   onRemoveIntegration,
   onManualSyncIntegration
 }: IProps) => {
+  const router = useRouter();
+
   return (
     <div
-      className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3"
+      className="max-w-8xl flex cursor-pointer justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3 transition-all hover:bg-mineshaft-700"
+      onClick={() => router.push(`/integrations/details/${integration.id}`)}
       key={`integration-${integration?.id.toString()}`}
     >
       <div className="flex">
@@ -168,9 +175,9 @@ export const ConfiguredIntegrationItem = ({
           </div>
         )}
       </div>
-      <div className="mt-[1.5rem] flex cursor-default">
+      <div className="mt-[1.5rem] flex cursor-default space-x-3">
         {integration.isSynced != null && integration.lastUsed != null && (
-          <Tag key={integration.id} className={integration.isSynced ? "bg-green-800" : "bg-red/80"}>
+          <Badge variant={integration.isSynced ? "success" : "danger"} key={integration.id}>
             <Tooltip
               center
               className="max-w-xs whitespace-normal break-words"
@@ -178,7 +185,7 @@ export const ConfiguredIntegrationItem = ({
                 <div className="flex max-h-[10rem] flex-col overflow-auto ">
                   <div className="flex self-start">
                     <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
-                    <div className="text-sm">Last sync</div>
+                    <div className="text-sm">Last successful sync</div>
                   </div>
                   <div className="pl-5 text-left text-xs">
                     {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
@@ -195,43 +202,62 @@ export const ConfiguredIntegrationItem = ({
                 </div>
               }
             >
-              <div className="flex items-center space-x-2 text-white">
+              <div className="flex h-full items-center space-x-2">
                 <div>{integration.isSynced ? "Synced" : "Not synced"}</div>
                 {!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
               </div>
             </Tooltip>
-          </Tag>
+          </Badge>
         )}
-        <div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
+        <div className="space-x-1.5">
           <Tooltip className="text-center" content="Manually sync integration secrets">
-            <Button
-              onClick={() => onManualSyncIntegration()}
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                onManualSyncIntegration();
+              }}
+              ariaLabel="sync"
+              colorSchema="primary"
+              variant="star"
               className="max-w-[2.5rem] border-none bg-mineshaft-500"
             >
-              <FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
-            </Button>
+              <FontAwesomeIcon icon={faRefresh} className="px-1" />
+            </IconButton>
           </Tooltip>
-        </div>
-        <ProjectPermissionCan
-          I={ProjectPermissionActions.Delete}
-          a={ProjectPermissionSub.Integrations}
-        >
-          {(isAllowed: boolean) => (
-            <div className="flex items-end opacity-80 duration-200 hover:opacity-100">
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Delete}
+            a={ProjectPermissionSub.Integrations}
+          >
+            {(isAllowed: boolean) => (
               <Tooltip content="Remove Integration">
                 <IconButton
-                  onClick={() => onRemoveIntegration()}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRemoveIntegration();
+                  }}
                   ariaLabel="delete"
                   isDisabled={!isAllowed}
                   colorSchema="danger"
                   variant="star"
+                  className="max-w-[2.5rem] border-none bg-mineshaft-500"
                 >
-                  <FontAwesomeIcon icon={faXmark} className="px-0.5" />
+                  <FontAwesomeIcon icon={faXmark} className="px-1" />
                 </IconButton>
               </Tooltip>
-            </div>
-          )}
-        </ProjectPermissionCan>
+            )}
+          </ProjectPermissionCan>
+
+          <Tooltip content="View details">
+            <IconButton
+              ariaLabel="delete"
+              colorSchema="primary"
+              variant="star"
+              className="max-w-[2.5rem] border-none bg-mineshaft-500"
+            >
+              <FontAwesomeIcon icon={faEllipsis} className="px-1" />
+            </IconButton>
+          </Tooltip>
+        </div>
       </div>
     </div>
   );

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

@@ -50,7 +50,7 @@ type Props = {
   ) => void;
 };
 
-const INIT_PER_PAGE = 10;
+const INIT_PER_PAGE = 20;
 
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   const router = useRouter();

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/Org/UserPage/components/UserProjectsSection/UserAuditLogsSection.tsx

@@ -42,7 +42,9 @@ export const UserAuditLogsSection = withPermission(
         <LogsSection
           showFilters={showFilter}
           filterClassName="bg-mineshaft-900 static"
-          presetActor={orgMembership.user.id}
+          presets={{
+            actorId: orgMembership.user.id
+          }}
           isOrgAuditLogs
         />
       </div>

frontend/src/views/Project/AuditLogsPage/components/LogsFilter.tsx

@@ -1,14 +1,29 @@
+/* eslint-disable no-nested-ternary */
 import { useState } from "react";
-import { Control, Controller, UseFormReset } from "react-hook-form";
-import { faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { Control, Controller, UseFormReset, UseFormWatch } from "react-hook-form";
+import {
+  faCheckCircle,
+  faChevronDown,
+  faFilterCircleXmark
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Button, DatePicker, FormControl, Select, SelectItem } from "@app/components/v2";
+import {
+  Button,
+  DatePicker,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  FormControl,
+  Select,
+  SelectItem
+} from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetAuditLogActorFilterOpts } from "@app/hooks/api";
 import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
-import { ActorType } from "@app/hooks/api/auditLogs/enums";
+import { ActorType, EventType } from "@app/hooks/api/auditLogs/enums";
 import { Actor } from "@app/hooks/api/auditLogs/types";
 
 import { AuditLogFilterFormData } from "./types";
@@ -20,13 +35,17 @@ const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label
 }));
 
 type Props = {
-  presetActor?: string;
+  presets?: {
+    actorId?: string;
+    eventType?: EventType[];
+  };
   className?: string;
   control: Control<AuditLogFilterFormData>;
   reset: UseFormReset<AuditLogFilterFormData>;
+  watch: UseFormWatch<AuditLogFilterFormData>;
 };
 
-export const LogsFilter = ({ presetActor, className, control, reset }: Props) => {
+export const LogsFilter = ({ presets, className, control, reset, watch }: Props) => {
   const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
   const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
 
@@ -71,6 +90,8 @@ export const LogsFilter = ({ presetActor, className, control, reset }: Props) =>
     }
   };
 
+  const selectedEventTypes = watch("eventType") as EventType[] | undefined;
+
   return (
     <div
       className={twMerge(
@@ -82,29 +103,69 @@ export const LogsFilter = ({ presetActor, className, control, reset }: Props) =>
         <Controller
           control={control}
           name="eventType"
-          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-            <FormControl
-              label="Event"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="w-40"
-            >
-              <Select
-                {...(field.value ? { value: field.value } : { placeholder: "Select" })}
-                {...field}
-                onValueChange={(e) => onChange(e)}
-                className="w-full border border-mineshaft-500 bg-mineshaft-700 text-mineshaft-100"
-              >
-                {eventTypes.map(({ label, value }) => (
-                  <SelectItem value={String(value || "")} key={label}>
-                    {label}
-                  </SelectItem>
-                ))}
-              </Select>
+          render={({ field }) => (
+            <FormControl label="Events">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                    {selectedEventTypes?.length === 1
+                      ? eventTypes.find((eventType) => eventType.value === selectedEventTypes[0])
+                          ?.label
+                      : selectedEventTypes?.length === 0
+                      ? "Select event types"
+                      : `${selectedEventTypes?.length} events selected`}
+                    <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-xs" />
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="z-[100] max-h-80 overflow-hidden">
+                  <div className="max-h-80 overflow-y-auto">
+                    {eventTypes && eventTypes.length > 0 ? (
+                      eventTypes.map((eventType) => {
+                        const isSelected = selectedEventTypes?.includes(
+                          eventType.value as EventType
+                        );
+
+                        return (
+                          <DropdownMenuItem
+                            onSelect={(event) => eventTypes.length > 1 && event.preventDefault()}
+                            onClick={() => {
+                              if (selectedEventTypes?.includes(eventType.value as EventType)) {
+                                field.onChange(
+                                  selectedEventTypes?.filter((e: string) => e !== eventType.value)
+                                );
+                              } else {
+                                field.onChange([...(selectedEventTypes || []), eventType.value]);
+                              }
+                            }}
+                            key={`event-type-${eventType.value}`}
+                            icon={
+                              isSelected ? (
+                                <FontAwesomeIcon
+                                  icon={faCheckCircle}
+                                  className="pr-0.5 text-primary"
+                                />
+                              ) : (
+                                <div className="pl-[1.01rem]" />
+                              )
+                            }
+                            iconPos="left"
+                            className="w-[28.4rem] text-sm"
+                          >
+                            {eventType.label}
+                          </DropdownMenuItem>
+                        );
+                      })
+                    ) : (
+                      <div />
+                    )}
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </FormControl>
           )}
         />
-        {!isLoading && data && data.length > 0 && !presetActor && (
+
+        {!isLoading && data && data.length > 0 && !presets?.actorId && (
           <Controller
             control={control}
             name="actor"
@@ -207,8 +268,8 @@ export const LogsFilter = ({ presetActor, className, control, reset }: Props) =>
         leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} />}
         onClick={() =>
           reset({
-            eventType: undefined,
-            actor: presetActor,
+            eventType: presets?.eventType || [],
+            actor: presets?.actorId,
             userAgentType: undefined,
             startDate: undefined,
             endDate: undefined

frontend/src/views/Project/AuditLogsPage/components/LogsSection.tsx

@@ -5,24 +5,38 @@ import { yupResolver } from "@hookform/resolvers/yup";
 
 import { UpgradePlanModal } from "@app/components/v2";
 import { useSubscription } from "@app/context";
-import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
+import { ActorType, EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { LogsFilter } from "./LogsFilter";
-import { LogsTable } from "./LogsTable";
+import { LogsTable, TAuditLogTableHeader } from "./LogsTable";
 import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";
 
 type Props = {
-  presetActor?: string;
+  presets?: {
+    actorId?: string;
+    eventType?: EventType[];
+    actorType?: ActorType;
+    startDate?: Date;
+    endDate?: Date;
+    eventMetadata?: Record<string, string>;
+  };
+
   showFilters?: boolean;
   filterClassName?: string;
   isOrgAuditLogs?: boolean;
+  showActorColumn?: boolean;
+  remappedHeaders?: Partial<Record<TAuditLogTableHeader, string>>;
+  refetchInterval?: number;
 };
 
 export const LogsSection = ({
-  presetActor,
+  presets,
   filterClassName,
+  remappedHeaders,
   isOrgAuditLogs,
+  showActorColumn,
+  refetchInterval,
   showFilters
 }: Props) => {
   const { subscription } = useSubscription();
@@ -33,11 +47,12 @@ export const LogsSection = ({
   const { control, reset, watch } = useForm<AuditLogFilterFormData>({
     resolver: yupResolver(auditLogFilterFormSchema),
     defaultValues: {
-      actor: presetActor,
+      actor: presets?.actorId,
+      eventType: presets?.eventType || [],
       page: 1,
       perPage: 10,
-      startDate: new Date(new Date().setDate(new Date().getDate() - 1)), // day before today
-      endDate: new Date(new Date(Date.now()).setHours(23, 59, 59, 999)) // end of today
+      startDate: presets?.startDate ?? new Date(new Date().setDate(new Date().getDate() - 1)), // day before today
+      endDate: presets?.endDate ?? new Date(new Date(Date.now()).setHours(23, 59, 59, 999)) // end of today
     }
   });
 
@@ -47,7 +62,7 @@ export const LogsSection = ({
     }
   }, [subscription]);
 
-  const eventType = watch("eventType") as EventType | undefined;
+  const eventType = watch("eventType") as EventType[] | undefined;
   const userAgentType = watch("userAgentType") as UserAgentType | undefined;
   const actor = watch("actor");
 
@@ -59,19 +74,27 @@ export const LogsSection = ({
       {showFilters && (
         <LogsFilter
           className={filterClassName}
-          presetActor={presetActor}
+          presets={presets}
           control={control}
+          watch={watch}
           reset={reset}
         />
       )}
       <LogsTable
+        refetchInterval={refetchInterval}
+        remappedHeaders={remappedHeaders}
         isOrgAuditLogs={isOrgAuditLogs}
-        eventType={eventType}
-        userAgentType={userAgentType}
-        showActorColumn={!presetActor}
-        actor={actor}
-        startDate={startDate}
-        endDate={endDate}
+        showActorColumn={!!showActorColumn && !isOrgAuditLogs}
+        filter={{
+          eventMetadata: presets?.eventMetadata,
+          actorType: presets?.actorType,
+          limit: 15,
+          eventType,
+          userAgentType,
+          startDate,
+          endDate,
+          actorId: actor
+        }}
       />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}

frontend/src/views/Project/AuditLogsPage/components/LogsTable.tsx

@@ -15,43 +15,41 @@ import {
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetAuditLogs } from "@app/hooks/api";
-import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
+import { TGetAuditLogsFilter } from "@app/hooks/api/auditLogs/types";
 
 import { LogsTableRow } from "./LogsTableRow";
 
 type Props = {
-  eventType?: EventType;
-  userAgentType?: UserAgentType;
-  actor?: string;
-  startDate?: Date;
-  endDate?: Date;
   isOrgAuditLogs?: boolean;
   showActorColumn: boolean;
+  filter?: TGetAuditLogsFilter;
+  remappedHeaders?: Partial<Record<TAuditLogTableHeader, string>>;
+  refetchInterval?: number;
 };
 
 const AUDIT_LOG_LIMIT = 15;
 
+const TABLE_HEADERS = ["Timestamp", "Event", "Project", "Actor", "Source", "Metadata"] as const;
+export type TAuditLogTableHeader = (typeof TABLE_HEADERS)[number];
+
 export const LogsTable = ({
-  eventType,
-  userAgentType,
   showActorColumn,
-  actor,
-  startDate,
-  endDate,
-  isOrgAuditLogs
+  isOrgAuditLogs,
+  filter,
+  remappedHeaders,
+  refetchInterval
 }: Props) => {
   const { currentWorkspace } = useWorkspace();
 
   const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useGetAuditLogs(
     {
-      eventType,
-      userAgentType,
-      actor,
-      startDate,
-      endDate,
+      ...filter,
       limit: AUDIT_LOG_LIMIT
     },
-    !isOrgAuditLogs ? currentWorkspace?.id ?? "" : null
+    !isOrgAuditLogs ? currentWorkspace?.id ?? "" : null,
+    {
+      refetchInterval
+    }
   );
 
   const isEmpty = !isLoading && !data?.pages?.[0].length;
@@ -62,18 +60,24 @@ export const LogsTable = ({
         <Table>
           <THead>
             <Tr>
-              <Th>Timestamp</Th>
-              <Th>Event</Th>
-              {isOrgAuditLogs && <Th>Project</Th>}
-              {showActorColumn && <Th>Actor</Th>}
-              <Th>Source</Th>
-              <Th>Metadata</Th>
+              {TABLE_HEADERS.map((header, idx) => {
+                if (
+                  (header === "Project" && !isOrgAuditLogs) ||
+                  (header === "Actor" && !showActorColumn)
+                ) {
+                  return null;
+                }
+
+                return (
+                  <Th key={`table-header-${idx + 1}`}>{remappedHeaders?.[header] || header}</Th>
+                );
+              })}
             </Tr>
           </THead>
           <TBody>
             {!isLoading &&
               data?.pages?.map((group, i) => (
-                <Fragment key={`auditlog-item-${i + 1}`}>
+                <Fragment key={`audit-log-fragment-${i + 1}`}>
                   {group.map((auditLog) => (
                     <LogsTableRow
                       showActorColumn={showActorColumn}

frontend/src/views/Project/AuditLogsPage/components/LogsTableRow.tsx

@@ -1,4 +1,4 @@
-import { Td, Tr } from "@app/components/v2";
+import { Badge, Td, Tooltip, Tr } from "@app/components/v2";
 import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
 import { ActorType, EventType } from "@app/hooks/api/auditLogs/enums";
 import { Actor, AuditLog, Event } from "@app/hooks/api/auditLogs/types";
@@ -461,6 +461,21 @@ export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Prop
             <p>{`Secret Request Channels: ${event.metadata.secretRequestChannels}`}</p>
           </Td>
         );
+
+      case EventType.INTEGRATION_SYNCED:
+        return (
+          <Td>
+            <Tooltip
+              className="max-w-xs whitespace-normal break-words"
+              content={event.metadata.syncMessage!}
+              isDisabled={!event.metadata.syncMessage}
+            >
+              <Badge variant={event.metadata.isSynced ? "success" : "danger"}>
+                <p className="text-center">{event.metadata.isSynced ? "Successful" : "Failed"}</p>
+              </Badge>
+            </Tooltip>
+          </Td>
+        );
       default:
         return <Td />;
     }
@@ -484,16 +499,41 @@ export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Prop
     return formattedDate;
   };
 
+  const renderSource = () => {
+    const { event, actor } = auditLog;
+
+    if (event.type === EventType.INTEGRATION_SYNCED) {
+      if (actor.type === ActorType.USER) {
+        return (
+          <Td>
+            <p>Manually triggered by {actor.metadata.email}</p>
+          </Td>
+        );
+      }
+
+      // Platform / automatic syncs
+      return (
+        <Td>
+          <p>Automatically synced by Infisical</p>
+        </Td>
+      );
+    }
+
+    return (
+      <Td>
+        <p>{userAgentTTypeoNameMap[auditLog.userAgentType]}</p>
+        <p>{auditLog.ipAddress}</p>
+      </Td>
+    );
+  };
+
   return (
     <Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
       <Td>{formatDate(auditLog.createdAt)}</Td>
       <Td>{`${eventToNameMap[auditLog.event.type]}`}</Td>
       {isOrgAuditLogs && <Td>{auditLog.project.name}</Td>}
       {showActorColumn && renderActor(auditLog.actor)}
-      <Td>
-        <p>{userAgentTTypeoNameMap[auditLog.userAgentType]}</p>
-        <p>{auditLog.ipAddress}</p>
-      </Td>
+      {renderSource()}
       {renderMetadata(auditLog.event)}
     </Tr>
   );

frontend/src/views/Project/AuditLogsPage/components/types.tsx

@@ -4,7 +4,8 @@ import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 
 export const auditLogFilterFormSchema = yup
   .object({
-    eventType: yup.string().oneOf(Object.values(EventType), "Invalid event type"),
+    eventMetadata: yup.object({}).optional(),
+    eventType: yup.array(yup.string().oneOf(Object.values(EventType), "Invalid event type")),
     actor: yup.string(),
     userAgentType: yup.string().oneOf(Object.values(UserAgentType), "Invalid user agent type"),
     startDate: yup.date(),

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

@@ -56,7 +56,7 @@ import { IdentityModal } from "./components/IdentityModal";
 import { IdentityRoleForm } from "./components/IdentityRoleForm";
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
-const INIT_PER_PAGE = 10;
+const INIT_PER_PAGE = 20;
 const formatRoleName = (role: string, customRoleName?: string) => {
   if (role === ProjectMembershipRole.Custom) return customRoleName;
   if (role === ProjectMembershipRole.Member) return "Developer";

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}