misc: added image for service usage API

fix(checkbox): Remove manual css overrides of checkbox checked state

backend/src/ee/services/audit-log-stream/audit-log-stream-fns.ts

@@ -0,0 +1,21 @@
+export function providerSpecificPayload(url: string) {
+  const { hostname } = new URL(url);
+
+  const payload: Record<string, string> = {};
+
+  switch (hostname) {
+    case "http-intake.logs.datadoghq.com":
+    case "http-intake.logs.us3.datadoghq.com":
+    case "http-intake.logs.us5.datadoghq.com":
+    case "http-intake.logs.datadoghq.eu":
+    case "http-intake.logs.ap1.datadoghq.com":
+    case "http-intake.logs.ddog-gov.com":
+      payload.ddsource = "infisical";
+      payload.service = "audit-logs";
+      break;
+    default:
+      break;
+  }
+
+  return payload;
+}

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

@@ -13,6 +13,7 @@ import { TLicenseServiceFactory } from "../license/license-service";
 import { OrgPermissionActions, OrgPermissionSubjects } from "../permission/org-permission";
 import { TPermissionServiceFactory } from "../permission/permission-service-types";
 import { TAuditLogStreamDALFactory } from "./audit-log-stream-dal";
+import { providerSpecificPayload } from "./audit-log-stream-fns";
 import { LogStreamHeaders, TAuditLogStreamServiceFactory } from "./audit-log-stream-types";
 
 type TAuditLogStreamServiceFactoryDep = {
@@ -69,10 +70,11 @@ export const auditLogStreamServiceFactory = ({
       headers.forEach(({ key, value }) => {
         streamHeaders[key] = value;
       });
+
     await request
       .post(
         url,
-        { ping: "ok" },
+        { ...providerSpecificPayload(url), ping: "ok" },
         {
           headers: streamHeaders,
           // request timeout
@@ -137,7 +139,7 @@ export const auditLogStreamServiceFactory = ({
     await request
       .post(
         url || logStream.url,
-        { ping: "ok" },
+        { ...providerSpecificPayload(url || logStream.url), ping: "ok" },
         {
           headers: streamHeaders,
           // request timeout

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

@@ -1,13 +1,15 @@
-import { RawAxiosRequestHeaders } from "axios";
+import { AxiosError, RawAxiosRequestHeaders } from "axios";
 
 import { SecretKeyEncoding } from "@app/db/schemas";
 import { getConfig } from "@app/lib/config/env";
 import { request } from "@app/lib/config/request";
 import { infisicalSymmetricDecrypt } from "@app/lib/crypto/encryption";
+import { logger } from "@app/lib/logger";
 import { QueueJobs, QueueName, TQueueServiceFactory } from "@app/queue";
 import { TProjectDALFactory } from "@app/services/project/project-dal";
 
 import { TAuditLogStreamDALFactory } from "../audit-log-stream/audit-log-stream-dal";
+import { providerSpecificPayload } from "../audit-log-stream/audit-log-stream-fns";
 import { LogStreamHeaders } from "../audit-log-stream/audit-log-stream-types";
 import { TLicenseServiceFactory } from "../license/license-service";
 import { TAuditLogDALFactory } from "./audit-log-dal";
@@ -128,13 +130,29 @@ export const auditLogQueueServiceFactory = async ({
                   headers[key] = value;
                 });
 
-              return request.post(url, auditLog, {
-                headers,
-                // request timeout
-                timeout: AUDIT_LOG_STREAM_TIMEOUT,
-                // connection timeout
-                signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
-              });
+              try {
+                logger.info(`Streaming audit log [url=${url}] for org [orgId=${orgId}]`);
+                const response = await request.post(
+                  url,
+                  { ...providerSpecificPayload(url), ...auditLog },
+                  {
+                    headers,
+                    // request timeout
+                    timeout: AUDIT_LOG_STREAM_TIMEOUT,
+                    // connection timeout
+                    signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
+                  }
+                );
+                logger.info(
+                  `Successfully streamed audit log [url=${url}] for org [orgId=${orgId}] [response=${JSON.stringify(response.data)}]`
+                );
+                return response;
+              } catch (error) {
+                logger.error(
+                  `Failed to stream audit log [url=${url}] for org [orgId=${orgId}] [error=${(error as AxiosError).message}]`
+                );
+                return error;
+              }
             }
           )
         );
@@ -218,13 +236,29 @@ export const auditLogQueueServiceFactory = async ({
               headers[key] = value;
             });
 
-          return request.post(url, auditLog, {
-            headers,
-            // request timeout
-            timeout: AUDIT_LOG_STREAM_TIMEOUT,
-            // connection timeout
-            signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
-          });
+          try {
+            logger.info(`Streaming audit log [url=${url}] for org [orgId=${orgId}]`);
+            const response = await request.post(
+              url,
+              { ...providerSpecificPayload(url), ...auditLog },
+              {
+                headers,
+                // request timeout
+                timeout: AUDIT_LOG_STREAM_TIMEOUT,
+                // connection timeout
+                signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
+              }
+            );
+            logger.info(
+              `Successfully streamed audit log [url=${url}] for org [orgId=${orgId}] [response=${JSON.stringify(response.data)}]`
+            );
+            return response;
+          } catch (error) {
+            logger.error(
+              `Failed to stream audit log [url=${url}] for org [orgId=${orgId}] [error=${(error as AxiosError).message}]`
+            );
+            return error;
+          }
         }
       )
     );

backend/src/ee/services/secret-scanning/secret-scanning-queue/secret-scanning-queue.ts

@@ -1,17 +1,11 @@
-import { ProbotOctokit } from "probot";
-
-import { OrgMembershipRole, TableName } from "@app/db/schemas";
-import { getConfig } from "@app/lib/config/env";
-import { logger } from "@app/lib/logger";
-import { QueueJobs, QueueName, TQueueServiceFactory } from "@app/queue";
+import { InternalServerError } from "@app/lib/errors";
+import { TQueueServiceFactory } from "@app/queue";
 import { TOrgDALFactory } from "@app/services/org/org-dal";
-import { SmtpTemplates, TSmtpService } from "@app/services/smtp/smtp-service";
+import { TSmtpService } from "@app/services/smtp/smtp-service";
 import { TTelemetryServiceFactory } from "@app/services/telemetry/telemetry-service";
-import { PostHogEventTypes } from "@app/services/telemetry/telemetry-types";
 
 import { TSecretScanningDALFactory } from "../secret-scanning-dal";
-import { scanContentAndGetFindings, scanFullRepoContentAndGetFindings } from "./secret-scanning-fns";
-import { SecretMatch, TScanFullRepoEventPayload, TScanPushEventPayload } from "./secret-scanning-queue-types";
+import { TScanFullRepoEventPayload, TScanPushEventPayload } from "./secret-scanning-queue-types";
 
 type TSecretScanningQueueFactoryDep = {
   queueService: TQueueServiceFactory;
@@ -23,227 +17,21 @@ type TSecretScanningQueueFactoryDep = {
 
 export type TSecretScanningQueueFactory = ReturnType<typeof secretScanningQueueFactory>;
 
-export const secretScanningQueueFactory = ({
-  queueService,
-  secretScanningDAL,
-  smtpService,
-  telemetryService,
-  orgMembershipDAL: orgMemberDAL
-}: TSecretScanningQueueFactoryDep) => {
-  const startFullRepoScan = async (payload: TScanFullRepoEventPayload) => {
-    await queueService.queue(QueueName.SecretFullRepoScan, QueueJobs.SecretScan, payload, {
-      attempts: 3,
-      backoff: {
-        type: "exponential",
-        delay: 5000
-      },
-      removeOnComplete: true,
-      removeOnFail: {
-        count: 20 // keep the most recent 20 jobs
-      }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const secretScanningQueueFactory = (_props: TSecretScanningQueueFactoryDep) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const startFullRepoScan = async (_payload: TScanFullRepoEventPayload) => {
+    throw new InternalServerError({
+      message: "Secret Scanning V1 has been deprecated. Please migrate to Secret Scanning V2"
     });
   };
 
-  const startPushEventScan = async (payload: TScanPushEventPayload) => {
-    await queueService.queue(QueueName.SecretPushEventScan, QueueJobs.SecretScan, payload, {
-      attempts: 3,
-      backoff: {
-        type: "exponential",
-        delay: 5000
-      },
-      removeOnComplete: true,
-      removeOnFail: {
-        count: 20 // keep the most recent 20 jobs
-      }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const startPushEventScan = async (_payload: TScanPushEventPayload) => {
+    throw new InternalServerError({
+      message: "Secret Scanning V1 has been deprecated. Please migrate to Secret Scanning V2"
     });
   };
 
-  const getOrgAdminEmails = async (organizationId: string) => {
-    // get emails of admins
-    const adminsOfWork = await orgMemberDAL.findMembership({
-      [`${TableName.Organization}.id` as string]: organizationId,
-      role: OrgMembershipRole.Admin
-    });
-    return adminsOfWork.filter((userObject) => userObject.email).map((userObject) => userObject.email as string);
-  };
-
-  queueService.start(QueueName.SecretPushEventScan, async (job) => {
-    const appCfg = getConfig();
-    const { organizationId, commits, pusher, repository, installationId } = job.data;
-    const [owner, repo] = repository.fullName.split("/");
-    const octokit = new ProbotOctokit({
-      auth: {
-        appId: appCfg.SECRET_SCANNING_GIT_APP_ID,
-        privateKey: appCfg.SECRET_SCANNING_PRIVATE_KEY,
-        installationId
-      }
-    });
-    const allFindingsByFingerprint: { [key: string]: SecretMatch } = {};
-
-    for (const commit of commits) {
-      for (const filepath of [...commit.added, ...commit.modified]) {
-        // eslint-disable-next-line
-        const fileContentsResponse = await octokit.repos.getContent({
-          owner,
-          repo,
-          path: filepath
-        });
-
-        const { data } = fileContentsResponse;
-        const fileContent = Buffer.from((data as { content: string }).content, "base64").toString();
-
-        // eslint-disable-next-line
-        const findings = await scanContentAndGetFindings(`\n${fileContent}`); // extra line to count lines correctly
-
-        for (const finding of findings) {
-          const fingerPrintWithCommitId = `${commit.id}:${filepath}:${finding.RuleID}:${finding.StartLine}`;
-          const fingerPrintWithoutCommitId = `${filepath}:${finding.RuleID}:${finding.StartLine}`;
-          finding.Fingerprint = fingerPrintWithCommitId;
-          finding.FingerPrintWithoutCommitId = fingerPrintWithoutCommitId;
-          finding.Commit = commit.id;
-          finding.File = filepath;
-          finding.Author = commit.author.name;
-          finding.Email = commit?.author?.email ? commit?.author?.email : "";
-
-          allFindingsByFingerprint[fingerPrintWithCommitId] = finding;
-        }
-      }
-    }
-    await secretScanningDAL.transaction(async (tx) => {
-      if (!Object.keys(allFindingsByFingerprint).length) return;
-      await secretScanningDAL.upsert(
-        Object.keys(allFindingsByFingerprint).map((key) => ({
-          installationId,
-          email: allFindingsByFingerprint[key].Email,
-          author: allFindingsByFingerprint[key].Author,
-          date: allFindingsByFingerprint[key].Date,
-          file: allFindingsByFingerprint[key].File,
-          tags: allFindingsByFingerprint[key].Tags,
-          commit: allFindingsByFingerprint[key].Commit,
-          ruleID: allFindingsByFingerprint[key].RuleID,
-          endLine: String(allFindingsByFingerprint[key].EndLine),
-          entropy: String(allFindingsByFingerprint[key].Entropy),
-          message: allFindingsByFingerprint[key].Message,
-          endColumn: String(allFindingsByFingerprint[key].EndColumn),
-          startLine: String(allFindingsByFingerprint[key].StartLine),
-          startColumn: String(allFindingsByFingerprint[key].StartColumn),
-          fingerPrintWithoutCommitId: allFindingsByFingerprint[key].FingerPrintWithoutCommitId,
-          description: allFindingsByFingerprint[key].Description,
-          symlinkFile: allFindingsByFingerprint[key].SymlinkFile,
-          orgId: organizationId,
-          pusherEmail: pusher.email,
-          pusherName: pusher.name,
-          repositoryFullName: repository.fullName,
-          repositoryId: String(repository.id),
-          fingerprint: allFindingsByFingerprint[key].Fingerprint
-        })),
-        tx
-      );
-    });
-
-    const adminEmails = await getOrgAdminEmails(organizationId);
-    if (pusher?.email) {
-      adminEmails.push(pusher.email);
-    }
-    if (Object.keys(allFindingsByFingerprint).length) {
-      await smtpService.sendMail({
-        template: SmtpTemplates.SecretLeakIncident,
-        subjectLine: `Incident alert: leaked secrets found in Github repository ${repository.fullName}`,
-        recipients: adminEmails.filter((email) => email).map((email) => email),
-        substitutions: {
-          numberOfSecrets: Object.keys(allFindingsByFingerprint).length,
-          pusher_email: pusher.email,
-          pusher_name: pusher.name
-        }
-      });
-    }
-
-    await telemetryService.sendPostHogEvents({
-      event: PostHogEventTypes.SecretScannerPush,
-      distinctId: repository.fullName,
-      properties: {
-        numberOfRisks: Object.keys(allFindingsByFingerprint).length
-      }
-    });
-  });
-
-  queueService.start(QueueName.SecretFullRepoScan, async (job) => {
-    const appCfg = getConfig();
-    const { organizationId, repository, installationId } = job.data;
-    const octokit = new ProbotOctokit({
-      auth: {
-        appId: appCfg.SECRET_SCANNING_GIT_APP_ID,
-        privateKey: appCfg.SECRET_SCANNING_PRIVATE_KEY,
-        installationId
-      }
-    });
-
-    const findings = await scanFullRepoContentAndGetFindings(
-      // this is because of collision of octokit in probot and github
-      // eslint-disable-next-line
-      octokit as any,
-      installationId,
-      repository.fullName
-    );
-    await secretScanningDAL.transaction(async (tx) => {
-      if (!findings.length) return;
-      // eslint-disable-next-line
-      await secretScanningDAL.upsert(
-        findings.map((finding) => ({
-          installationId,
-          email: finding.Email,
-          author: finding.Author,
-          date: finding.Date,
-          file: finding.File,
-          tags: finding.Tags,
-          commit: finding.Commit,
-          ruleID: finding.RuleID,
-          endLine: String(finding.EndLine),
-          entropy: String(finding.Entropy),
-          message: finding.Message,
-          endColumn: String(finding.EndColumn),
-          startLine: String(finding.StartLine),
-          startColumn: String(finding.StartColumn),
-          fingerPrintWithoutCommitId: finding.FingerPrintWithoutCommitId,
-          description: finding.Description,
-          symlinkFile: finding.SymlinkFile,
-          orgId: organizationId,
-          repositoryFullName: repository.fullName,
-          repositoryId: String(repository.id),
-          fingerprint: finding.Fingerprint
-        })),
-        tx
-      );
-    });
-
-    const adminEmails = await getOrgAdminEmails(organizationId);
-    if (findings.length) {
-      await smtpService.sendMail({
-        template: SmtpTemplates.SecretLeakIncident,
-        subjectLine: `Incident alert: leaked secrets found in Github repository ${repository.fullName}`,
-        recipients: adminEmails.filter((email) => email).map((email) => email),
-        substitutions: {
-          numberOfSecrets: findings.length
-        }
-      });
-    }
-
-    await telemetryService.sendPostHogEvents({
-      event: PostHogEventTypes.SecretScannerFull,
-      distinctId: repository.fullName,
-      properties: {
-        numberOfRisks: findings.length
-      }
-    });
-  });
-
-  queueService.listen(QueueName.SecretPushEventScan, "failed", (job, err) => {
-    logger.error(err, "Failed to secret scan on push", job?.data);
-  });
-
-  queueService.listen(QueueName.SecretFullRepoScan, "failed", (job, err) => {
-    logger.error(err, "Failed to do full repo secret scan", job?.data);
-  });
-
   return { startFullRepoScan, startPushEventScan };
 };

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

@@ -98,6 +98,7 @@ export const secretScanningServiceFactory = ({
     if (canUseSecretScanning(actorOrgId)) {
       await Promise.all(
         repositories.map(({ id, full_name }) =>
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access
           secretScanningQueue.startFullRepoScan({
             organizationId: session.orgId,
             installationId,
@@ -180,6 +181,7 @@ export const secretScanningServiceFactory = ({
     if (!installationLink) return;
 
     if (canUseSecretScanning(installationLink.orgId)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access
       await secretScanningQueue.startPushEventScan({
         commits,
         pusher: { name: pusher.name, email: pusher.email },

backend/src/server/routes/index.ts

@@ -297,7 +297,6 @@ import { injectAssumePrivilege } from "../plugins/auth/inject-assume-privilege";
 import { injectIdentity } from "../plugins/auth/inject-identity";
 import { injectPermission } from "../plugins/auth/inject-permission";
 import { injectRateLimits } from "../plugins/inject-rate-limits";
-import { registerSecretScannerGhApp } from "../plugins/secret-scanner";
 import { registerV1Routes } from "./v1";
 import { registerV2Routes } from "./v2";
 import { registerV3Routes } from "./v3";
@@ -326,7 +325,6 @@ export const registerRoutes = async (
   }
 ) => {
   const appCfg = getConfig();
-  await server.register(registerSecretScannerGhApp, { prefix: "/ss-webhook" });
   await server.register(registerSecretScanningV2Webhooks, {
     prefix: "/secret-scanning/webhooks"
   });

backend/src/server/routes/v1/secret-sync-routers/cloudflare-pages-sync-router.ts

@@ -1,10 +1,11 @@
-import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
-import { registerSyncSecretsEndpoints } from "./secret-sync-endpoints";
 import {
   CloudflarePagesSyncSchema,
   CreateCloudflarePagesSyncSchema,
   UpdateCloudflarePagesSyncSchema
 } from "@app/services/secret-sync/cloudflare-pages/cloudflare-pages-schema";
+import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
+
+import { registerSyncSecretsEndpoints } from "./secret-sync-endpoints";
 
 export const registerCloudflarePagesSyncRouter = async (server: FastifyZodProvider) =>
   registerSyncSecretsEndpoints({

backend/src/services/app-connection/cloudflare/cloudflare-connection-schema.ts

@@ -1,6 +1,7 @@
 import z from "zod";
 
 import { AppConnections } from "@app/lib/api-docs";
+import { CharacterType, characterValidator } from "@app/lib/validator/validate-string";
 import { AppConnection } from "@app/services/app-connection/app-connection-enums";
 import {
   BaseAppConnectionSchema,
@@ -9,7 +10,6 @@ import {
 } from "@app/services/app-connection/app-connection-schemas";
 
 import { CloudflareConnectionMethod } from "./cloudflare-connection-enum";
-import { CharacterType, characterValidator } from "@app/lib/validator/validate-string";
 
 const accountIdCharacterValidator = characterValidator([
   CharacterType.AlphaNumeric,

backend/src/services/app-connection/gcp/gcp-connection-service.ts

@@ -1,3 +1,4 @@
+import { logger } from "@app/lib/logger";
 import { OrgServiceActor } from "@app/lib/types";
 
 import { AppConnection } from "../app-connection-enums";
@@ -19,6 +20,7 @@ export const gcpConnectionService = (getAppConnection: TGetAppConnectionFunc) =>
 
       return projects;
     } catch (error) {
+      logger.error(error, "Error listing GCP secret manager projects");
       return [];
     }
   };

backend/src/services/secret-sync/aws-parameter-store/aws-parameter-store-sync-fns.ts

@@ -307,7 +307,6 @@ export const AwsParameterStoreSyncFns = {
       awsParameterStoreSecretsRecord,
       Boolean(syncOptions.tags?.length || syncOptions.syncSecretMetadataAsTags)
     );
-    const syncTagsRecord = Object.fromEntries(syncOptions.tags?.map((tag) => [tag.key, tag.value]) ?? []);
 
     for await (const entry of Object.entries(secretMap)) {
       const [key, { value, secretMetadata }] = entry;
@@ -342,13 +341,13 @@ export const AwsParameterStoreSyncFns = {
         }
       }
 
-      if (shouldManageTags) {
+      if ((syncOptions.tags !== undefined || syncOptions.syncSecretMetadataAsTags) && shouldManageTags) {
         const { tagsToAdd, tagKeysToRemove } = processParameterTags({
           syncTagsRecord: {
             // configured sync tags take preference over secret metadata
             ...(syncOptions.syncSecretMetadataAsTags &&
               Object.fromEntries(secretMetadata?.map((tag) => [tag.key, tag.value]) ?? [])),
-            ...syncTagsRecord
+            ...(syncOptions.tags && Object.fromEntries(syncOptions.tags?.map((tag) => [tag.key, tag.value]) ?? []))
           },
           awsTagsRecord: awsParameterStoreTagsRecord[key] ?? {}
         });

backend/src/services/secret-sync/aws-secrets-manager/aws-secrets-manager-sync-fns.ts

@@ -366,37 +366,39 @@ export const AwsSecretsManagerSyncFns = {
           }
         }
 
-        const { tagsToAdd, tagKeysToRemove } = processTags({
-          syncTagsRecord: {
-            // configured sync tags take preference over secret metadata
-            ...(syncOptions.syncSecretMetadataAsTags &&
-              Object.fromEntries(secretMetadata?.map((tag) => [tag.key, tag.value]) ?? [])),
-            ...syncTagsRecord
-          },
-          awsTagsRecord: Object.fromEntries(
-            awsDescriptionsRecord[key]?.Tags?.map((tag) => [tag.Key!, tag.Value!]) ?? []
-          )
-        });
+        if (syncOptions.tags !== undefined || syncOptions.syncSecretMetadataAsTags) {
+          const { tagsToAdd, tagKeysToRemove } = processTags({
+            syncTagsRecord: {
+              // configured sync tags take preference over secret metadata
+              ...(syncOptions.syncSecretMetadataAsTags &&
+                Object.fromEntries(secretMetadata?.map((tag) => [tag.key, tag.value]) ?? [])),
+              ...(syncOptions.tags !== undefined && syncTagsRecord)
+            },
+            awsTagsRecord: Object.fromEntries(
+              awsDescriptionsRecord[key]?.Tags?.map((tag) => [tag.Key!, tag.Value!]) ?? []
+            )
+          });
 
-        if (tagsToAdd.length) {
-          try {
-            await addTags(client, key, tagsToAdd);
-          } catch (error) {
-            throw new SecretSyncError({
-              error,
-              secretKey: key
-            });
+          if (tagsToAdd.length) {
+            try {
+              await addTags(client, key, tagsToAdd);
+            } catch (error) {
+              throw new SecretSyncError({
+                error,
+                secretKey: key
+              });
+            }
           }
-        }
 
-        if (tagKeysToRemove.length) {
-          try {
-            await removeTags(client, key, tagKeysToRemove);
-          } catch (error) {
-            throw new SecretSyncError({
-              error,
-              secretKey: key
-            });
+          if (tagKeysToRemove.length) {
+            try {
+              await removeTags(client, key, tagKeysToRemove);
+            } catch (error) {
+              throw new SecretSyncError({
+                error,
+                secretKey: key
+              });
+            }
           }
         }
       }
@@ -439,32 +441,34 @@ export const AwsSecretsManagerSyncFns = {
         });
       }
 
-      const { tagsToAdd, tagKeysToRemove } = processTags({
-        syncTagsRecord,
-        awsTagsRecord: Object.fromEntries(
-          awsDescriptionsRecord[destinationConfig.secretName]?.Tags?.map((tag) => [tag.Key!, tag.Value!]) ?? []
-        )
-      });
+      if (syncOptions.tags !== undefined) {
+        const { tagsToAdd, tagKeysToRemove } = processTags({
+          syncTagsRecord,
+          awsTagsRecord: Object.fromEntries(
+            awsDescriptionsRecord[destinationConfig.secretName]?.Tags?.map((tag) => [tag.Key!, tag.Value!]) ?? []
+          )
+        });
 
-      if (tagsToAdd.length) {
-        try {
-          await addTags(client, destinationConfig.secretName, tagsToAdd);
-        } catch (error) {
-          throw new SecretSyncError({
-            error,
-            secretKey: destinationConfig.secretName
-          });
+        if (tagsToAdd.length) {
+          try {
+            await addTags(client, destinationConfig.secretName, tagsToAdd);
+          } catch (error) {
+            throw new SecretSyncError({
+              error,
+              secretKey: destinationConfig.secretName
+            });
+          }
         }
-      }
 
-      if (tagKeysToRemove.length) {
-        try {
-          await removeTags(client, destinationConfig.secretName, tagKeysToRemove);
-        } catch (error) {
-          throw new SecretSyncError({
-            error,
-            secretKey: destinationConfig.secretName
-          });
+        if (tagKeysToRemove.length) {
+          try {
+            await removeTags(client, destinationConfig.secretName, tagKeysToRemove);
+          } catch (error) {
+            throw new SecretSyncError({
+              error,
+              secretKey: destinationConfig.secretName
+            });
+          }
         }
       }
     }

docs/docs.json

@@ -2045,7 +2045,7 @@
         "tab": "SDKs",
         "groups": [
           {
-            "group": "",
+            "group": "Overview",
             "pages": ["sdks/overview"]
           },
           {
@@ -2065,7 +2065,7 @@
         "tab": "Changelog",
         "groups": [
           {
-            "group": "",
+            "group": "Overview",
             "pages": ["changelog/overview"]
           }
         ]

docs/integrations/secret-syncs/aws-parameter-store.mdx

@@ -148,3 +148,11 @@ description: "Learn how to configure an AWS Parameter Store Sync for Infisical."
         ```
     </Tab>
 </Tabs>
+
+## FAQ
+
+<AccordionGroup>
+    <Accordion title="What's the relationship between 'path' and 'key schema'?">
+        The path is required and will be prepended to the key schema. For example, if you have a path of `/demo/path/` and a key schema of `INFISICAL_{{secretKey}}`, then the result will be `/demo/path/INFISICAL_{{secretKey}}`.
+    </Accordion>
+</AccordionGroup>

docs/integrations/secret-syncs/gcp-secret-manager.mdx

@@ -7,9 +7,10 @@ description: "Learn how to configure a GCP Secret Manager Sync for Infisical."
 
         - Set up and add secrets to [Infisical Cloud](https://app.infisical.com)
         - Create a [GCP Connection](/integrations/app-connections/gcp) with the required **Secret Sync** permissions
-        - Enable **Cloud Resource Manager API** and **Secret Manager API** on your GCP project
+        - Enable **Cloud Resource Manager API**, **Secret Manager API**, and **Service Usage API** on your GCP project
             ![Secret Syncs Tab](/images/secret-syncs/gcp-secret-manager/enable-resource-manager-api.png)
             ![Secret Syncs Tab](/images/secret-syncs/gcp-secret-manager/enable-secret-manager-api.png)
+            ![Secret Syncs Tab](/images/secret-syncs/gcp-secret-manager/enable-service-usage-api.png)
 
 <Tabs>
     <Tab title="Infisical UI">

docs/sdks/languages/java.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Infisical Java SDK"
 sidebarTitle: "Java"
-url: "https://github.com/Infisical/java-sdk?tab=readme-ov-file#infisical-nodejs-sdk"
+url: "https://github.com/Infisical/java-sdk?tab=readme-ov-file#infisical-java-sdk"
 icon: "java"
 ---
 

docs/sdks/languages/node.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Infisical Node.js SDK"
 sidebarTitle: "Node.js"
-url: "https://github.com/Infisical/node-sdk-v2"
+url: "https://github.com/Infisical/node-sdk-v2?tab=readme-ov-file#infisical-nodejs-sdk"
 icon: "node"
 ---
 

docs/sdks/languages/python.mdx

@@ -43,7 +43,7 @@ def hello_world():
 This example demonstrates how to use the Infisical Python SDK with a Flask application. The application retrieves a secret named "NAME" and responds to requests with a greeting that includes the secret value.
 
 <Warning>
-	We do not recommend hardcoding your [Machine Identity Tokens](/platform/identities/overview). Setting it as an environment variable would be best.
+  We do not recommend hardcoding your [Machine Identity Tokens](/platform/identities/overview). Setting it as an environment variable would be best.
 </Warning>
 
 ## Installation
@@ -314,32 +314,32 @@ By default, `getSecret()` fetches and returns a shared secret. If not found, it
 #### Parameters
 
 <ParamField query="Parameters" type="object" optional>
-	<Expandable title="properties">
-		<ParamField query="secret_name" type="string" required>
-			The key of the secret to retrieve
-		</ParamField>
+  <Expandable title="properties">
+    <ParamField query="secret_name" type="string" required>
+      The key of the secret to retrieve
+    </ParamField>
     <ParamField query="include_imports" type="boolean">
           Whether or not to include imported secrets from the current path. Read about [secret import](/documentation/platform/secret-reference)
     </ParamField>
-		<ParamField query="environment" type="string" required>
-			The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
-		</ParamField>
-		<ParamField query="project_id" type="string" required>
-			The project ID where the secret lives in.
-		</ParamField>
-		<ParamField query="path" type="string" optional>
-			The path from where secret should be fetched from.
-		</ParamField>
-		<ParamField query="type" type="string" optional>
-			The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "personal".
-		</ParamField>
-		<ParamField query="include_imports" type="boolean" default="false" optional>
-			Whether or not to include imported secrets from the current path. Read about [secret import](/documentation/platform/secret-reference)
-		</ParamField>
+    <ParamField query="environment" type="string" required>
+      The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
+    </ParamField>
+    <ParamField query="project_id" type="string" required>
+      The project ID where the secret lives in.
+    </ParamField>
+    <ParamField query="path" type="string" optional>
+      The path from where secret should be fetched from.
+    </ParamField>
+    <ParamField query="type" type="string" optional>
+      The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "personal".
+    </ParamField>
+    <ParamField query="include_imports" type="boolean" default="false" optional>
+      Whether or not to include imported secrets from the current path. Read about [secret import](/documentation/platform/secret-reference)
+    </ParamField>
     <ParamField query="expand_secret_references" type="boolean" default="true" optional>
       Whether or not to expand secret references in the fetched secrets. Read about [secret reference](/documentation/platform/secret-reference)
     </ParamField>
-	</Expandable>
+  </Expandable>
 </ParamField>
 
 ### client.createSecret(options)
@@ -358,26 +358,26 @@ Create a new secret in Infisical.
 #### Parameters
 
 <ParamField query="Parameters" type="object" optional>
-	<Expandable title="properties">
-		<ParamField query="secret_name" type="string" required>
-			The key of the secret to create.
-		</ParamField>
-		<ParamField query="secret_value" type="string" required>
-			The value of the secret.
-		</ParamField>
-		<ParamField query="project_id" type="string" required>
-			The project ID where the secret lives in.
-		</ParamField>
-		<ParamField query="environment" type="string" required>
-			The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
-		</ParamField>
-		<ParamField query="path" type="string" optional>
-			The path from where secret should be created.
-		</ParamField>
-		<ParamField query="type" type="string" optional>
-			The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "shared".
-		</ParamField>
-	</Expandable>
+  <Expandable title="properties">
+    <ParamField query="secret_name" type="string" required>
+      The key of the secret to create.
+    </ParamField>
+    <ParamField query="secret_value" type="string" required>
+      The value of the secret.
+    </ParamField>
+    <ParamField query="project_id" type="string" required>
+      The project ID where the secret lives in.
+    </ParamField>
+    <ParamField query="environment" type="string" required>
+      The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
+    </ParamField>
+    <ParamField query="path" type="string" optional>
+      The path from where secret should be created.
+    </ParamField>
+    <ParamField query="type" type="string" optional>
+      The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "shared".
+    </ParamField>
+  </Expandable>
 </ParamField>
 
 ### client.updateSecret(options)
@@ -396,26 +396,26 @@ Update an existing secret in Infisical.
 #### Parameters
 
 <ParamField query="Parameters" type="object" optional>
-	<Expandable title="properties">
-		<ParamField query="secret_name" type="string" required>
-			The key of the secret to update.
-		</ParamField>
-		<ParamField query="secret_value" type="string" required>
-			The new value of the secret.
-		</ParamField>
-		<ParamField query="project_id" type="string" required>
-			The project ID where the secret lives in.
-		</ParamField>
-		<ParamField query="environment" type="string" required>
-			The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
-		</ParamField>
-		<ParamField query="path" type="string" optional>
-			The path from where secret should be updated.
-		</ParamField>
-		<ParamField query="type" type="string" optional>
-			The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "shared".
-		</ParamField>
-	</Expandable>
+  <Expandable title="properties">
+    <ParamField query="secret_name" type="string" required>
+      The key of the secret to update.
+    </ParamField>
+    <ParamField query="secret_value" type="string" required>
+      The new value of the secret.
+    </ParamField>
+    <ParamField query="project_id" type="string" required>
+      The project ID where the secret lives in.
+    </ParamField>
+    <ParamField query="environment" type="string" required>
+      The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
+    </ParamField>
+    <ParamField query="path" type="string" optional>
+      The path from where secret should be updated.
+    </ParamField>
+    <ParamField query="type" type="string" optional>
+      The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "shared".
+    </ParamField>
+  </Expandable>
 </ParamField>
 
 ### client.deleteSecret(options)
@@ -433,23 +433,23 @@ Delete a secret in Infisical.
 #### Parameters
 
 <ParamField query="Parameters" type="object" optional>
-	<Expandable title="properties">
-		<ParamField query="secret_name" type="string">
-			The key of the secret to update.
-		</ParamField>
-		<ParamField query="project_id" type="string" required>
-			The project ID where the secret lives in.
-		</ParamField>
-		<ParamField query="environment" type="string" required>
-			The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
-		</ParamField>
-		<ParamField query="path" type="string" optional>
-			The path from where secret should be deleted.
-		</ParamField>
-		<ParamField query="type" type="string" optional>
-			The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "shared".
-		</ParamField>
-	</Expandable>
+  <Expandable title="properties">
+    <ParamField query="secret_name" type="string">
+      The key of the secret to update.
+    </ParamField>
+    <ParamField query="project_id" type="string" required>
+      The project ID where the secret lives in.
+    </ParamField>
+    <ParamField query="environment" type="string" required>
+      The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
+    </ParamField>
+    <ParamField query="path" type="string" optional>
+      The path from where secret should be deleted.
+    </ParamField>
+    <ParamField query="type" type="string" optional>
+      The type of the secret. Valid options are "shared" or "personal". If not specified, the default value is "shared".
+    </ParamField>
+  </Expandable>
 </ParamField>
 
 ## Cryptography
@@ -480,14 +480,14 @@ encryptedData = client.encryptSymmetric(encryptOptions)
 #### Parameters
 
 <ParamField query="Parameters" type="object" required>
-	<Expandable title="properties">
-		<ParamField query="plaintext" type="string">
-			The plaintext you want to encrypt.
-		</ParamField>
-		<ParamField query="key" type="string" required>
-			The symmetric key to use for encryption.
-		</ParamField>
-	</Expandable>
+  <Expandable title="properties">
+    <ParamField query="plaintext" type="string">
+      The plaintext you want to encrypt.
+    </ParamField>
+    <ParamField query="key" type="string" required>
+      The symmetric key to use for encryption.
+    </ParamField>
+  </Expandable>
 </ParamField>
 
 #### Returns (object)
@@ -512,20 +512,20 @@ decryptedString = client.decryptSymmetric(decryptOptions)
 #### Parameters
 
 <ParamField query="Parameters" type="object" required>
-	<Expandable title="properties">
-		<ParamField query="ciphertext" type="string">
-			The ciphertext you want to decrypt.
-		</ParamField>
-		<ParamField query="key" type="string" required>
-			The symmetric key to use for encryption.
-		</ParamField>
-		<ParamField query="iv" type="string" required>
-			The initialization vector to use for decryption.
-		</ParamField>
-		<ParamField query="tag" type="string" required>
-			The authentication tag to use for decryption.
-		</ParamField>
-	</Expandable>
+  <Expandable title="properties">
+    <ParamField query="ciphertext" type="string">
+      The ciphertext you want to decrypt.
+    </ParamField>
+    <ParamField query="key" type="string" required>
+      The symmetric key to use for encryption.
+    </ParamField>
+    <ParamField query="iv" type="string" required>
+      The initialization vector to use for decryption.
+    </ParamField>
+    <ParamField query="tag" type="string" required>
+      The authentication tag to use for decryption.
+    </ParamField>
+  </Expandable>
 </ParamField>
 
 #### Returns (string)

docs/sdks/overview.mdx

@@ -10,24 +10,23 @@ From local development to production, Infisical SDKs provide the easiest way for
 -   Fetch secrets on demand
 
 <CardGroup cols={2}>
-    <Card title="Node" href="https://github.com/Infisical/node-sdk-v2" icon="node" color="#68a063">
-        Manage secrets for your Node application on demand
+    <Card title="Node.js" href="https://github.com/Infisical/node-sdk-v2?tab=readme-ov-file#infisical-nodejs-sdk" icon="node" color="#68a063">
+      Manage secrets for your Node application on demand
     </Card>
-    <Card href="https://github.com/Infisical/python-sdk-official" title="Python" icon="python" color="#4c8abe">
-        Manage secrets for your Python application on demand
+    <Card href="https://github.com/Infisical/python-sdk-official?tab=readme-ov-file#infisical-python-sdk" title="Python" icon="python" color="#4c8abe">
+      Manage secrets for your Python application on demand
     </Card>
-    <Card href="https://github.com/Infisical/java-sdk?tab=readme-ov-file#infisical-nodejs-sdk" title="Java" icon="java" color="#e41f23">
-        Manage secrets for your Java application on demand
+    <Card href="https://github.com/Infisical/java-sdk?tab=readme-ov-file#infisical-java-sdk" title="Java" icon="java" color="#e41f23">
+      Manage secrets for your Java application on demand
     </Card>
     <Card href="/sdks/languages/go" title="Go" icon="golang" color="#367B99">
-        Manage secrets for your Go application on demand
+      Manage secrets for your Go application on demand
     </Card>
-    <Card href="/sdks/languages/csharp" title="C#" icon="bars" color="#368833">
-        Manage secrets for your C#/.NET application on demand
+    <Card href="https://github.com/Infisical/infisical-dotnet-sdk?tab=readme-ov-file#infisical-net-sdk" title=".NET" icon="bars" color="#368833">
+      Manage secrets for your .NET application on demand
     </Card>
-
-      <Card href="/sdks/languages/ruby" title="Ruby" icon="diamond" color="#367B99">
-        Manage secrets for your Ruby application on demand
+    <Card href="/sdks/languages/ruby" title="Ruby" icon="diamond" color="#367B99">
+      Manage secrets for your Ruby application on demand
     </Card>
 </CardGroup>
 

frontend/src/components/permissions/AccessTree/AccessTree.tsx

@@ -2,10 +2,9 @@ import { useCallback, useEffect, useState } from "react";
 import { MongoAbility, MongoQuery } from "@casl/ability";
 import {
   faAnglesUp,
-  faArrowUpRightFromSquare,
-  faDownLeftAndUpRightToCenter,
   faUpRightAndDownLeftFromCenter,
-  faWindowRestore
+  faWindowRestore,
+  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -23,8 +22,8 @@ import {
 } from "@xyflow/react";
 import { twMerge } from "tailwind-merge";
 
-import { Button, IconButton, Spinner, Tooltip } from "@app/components/v2";
-import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
+import { Button, IconButton, Select, SelectItem, Spinner, Tooltip } from "@app/components/v2";
+import { ProjectPermissionSet, ProjectPermissionSub } from "@app/context/ProjectPermissionContext";
 
 import { AccessTreeSecretPathInput } from "./nodes/FolderNode/components/AccessTreeSecretPathInput";
 import { ShowMoreButtonNode } from "./nodes/ShowMoreButtonNode";
@@ -36,15 +35,17 @@ import { ViewMode } from "./types";
 
 export type AccessTreeProps = {
   permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
+  subject: ProjectPermissionSub;
+  onClose: () => void;
 };
 
 const EdgeTypes = { base: BasePermissionEdge };
 
 const NodeTypes = { role: RoleNode, folder: FolderNode, showMoreButton: ShowMoreButtonNode };
 
-const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
+const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) => {
   const [selectedPath, setSelectedPath] = useState<string>("/");
-  const accessTreeData = useAccessTree(permissions, selectedPath);
+  const accessTreeData = useAccessTree(permissions, selectedPath, subject);
   const { edges, nodes, isLoading, viewMode, setViewMode, environment } = accessTreeData;
   const [initialRender, setInitialRender] = useState(true);
 
@@ -78,32 +79,32 @@ const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
 
   useEffect(() => {
     setInitialRender(true);
-  }, [selectedPath, environment]);
+  }, [selectedPath, environment, subject, viewMode]);
 
   useEffect(() => {
     let timer: NodeJS.Timeout;
     if (initialRender) {
       timer = setTimeout(() => {
-        goToRootNode();
+        fitView({ duration: 500 });
         setInitialRender(false);
-      }, 500);
+      }, 50);
     }
     return () => clearTimeout(timer);
-  }, [nodes, edges, getViewport(), initialRender, goToRootNode]);
+  }, [nodes, edges, getViewport(), initialRender, fitView]);
 
   const handleToggleModalView = () =>
     setViewMode((prev) => (prev === ViewMode.Modal ? ViewMode.Docked : ViewMode.Modal));
 
-  const handleToggleUndockedView = () =>
-    setViewMode((prev) => (prev === ViewMode.Undocked ? ViewMode.Docked : ViewMode.Undocked));
+  const handleToggleView = () =>
+    setViewMode((prev) => (prev === ViewMode.Modal ? ViewMode.Undocked : ViewMode.Modal));
 
-  const undockButtonLabel = `${viewMode === ViewMode.Undocked ? "Dock" : "Undock"} View`;
-  const windowButtonLabel = `${viewMode === ViewMode.Modal ? "Dock" : "Expand"} View`;
+  const expandButtonLabel = viewMode === ViewMode.Modal ? "Anchor View" : "Expand View";
+  const hideButtonLabel = "Hide Access Tree";
 
   return (
     <div
       className={twMerge(
-        "w-full",
+        "mt-4 w-full",
         viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
         viewMode === ViewMode.Undocked &&
           "fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-[32rem] lg:w-[34%]"
@@ -130,7 +131,7 @@ const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
                 type="submit"
                 className="h-10 rounded-r-none bg-mineshaft-700"
                 leftIcon={<FontAwesomeIcon icon={faWindowRestore} />}
-                onClick={handleToggleUndockedView}
+                onClick={handleToggleView}
               >
                 Undock
               </Button>
@@ -176,48 +177,62 @@ const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
                   <Spinner />
                 </Panel>
               )}
+              {viewMode !== ViewMode.Undocked && (
+                <Panel position="top-left" className="flex gap-2">
+                  <Select
+                    value={environment}
+                    onValueChange={accessTreeData.setEnvironment}
+                    className="w-60"
+                    position="popper"
+                    dropdownContainerClassName="max-w-none"
+                    aria-label="Environment"
+                  >
+                    {Object.values(accessTreeData.environments).map((env) => (
+                      <SelectItem
+                        key={env.slug}
+                        value={env.slug}
+                        className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
+                      >
+                        <div className="ml-3 truncate font-medium">{env.name}</div>
+                      </SelectItem>
+                    ))}
+                  </Select>
+                  <AccessTreeSecretPathInput
+                    placeholder="Provide a path, default is /"
+                    environment={environment}
+                    value={selectedPath}
+                    onChange={setSelectedPath}
+                  />
+                </Panel>
+              )}
               {viewMode !== ViewMode.Docked && (
-                <Panel position="top-right" className="flex gap-1.5">
-                  {viewMode !== ViewMode.Undocked && (
-                    <AccessTreeSecretPathInput
-                      placeholder="Provide a path, default is /"
-                      environment={environment}
-                      value={selectedPath}
-                      onChange={setSelectedPath}
-                    />
-                  )}
-                  <Tooltip position="bottom" align="center" content={undockButtonLabel}>
+                <Panel position="top-right" className="flex gap-2">
+                  <Tooltip position="bottom" align="center" content={expandButtonLabel}>
                     <IconButton
-                      className="ml-1 w-10 rounded"
+                      className="rounded p-2"
                       colorSchema="secondary"
                       variant="plain"
-                      onClick={handleToggleUndockedView}
-                      ariaLabel={undockButtonLabel}
+                      onClick={handleToggleView}
+                      ariaLabel={expandButtonLabel}
                     >
                       <FontAwesomeIcon
                         icon={
                           viewMode === ViewMode.Undocked
-                            ? faArrowUpRightFromSquare
+                            ? faUpRightAndDownLeftFromCenter
                             : faWindowRestore
                         }
                       />
                     </IconButton>
                   </Tooltip>
-                  <Tooltip align="end" position="bottom" content={windowButtonLabel}>
+                  <Tooltip align="end" position="bottom" content={hideButtonLabel}>
                     <IconButton
-                      className="w-10 rounded"
+                      className="rounded p-2"
                       colorSchema="secondary"
                       variant="plain"
-                      onClick={handleToggleModalView}
-                      ariaLabel={windowButtonLabel}
+                      onClick={onClose}
+                      ariaLabel={hideButtonLabel}
                     >
-                      <FontAwesomeIcon
-                        icon={
-                          viewMode === ViewMode.Modal
-                            ? faDownLeftAndUpRightToCenter
-                            : faUpRightAndDownLeftFromCenter
-                        }
-                      />
+                      <FontAwesomeIcon icon={faXmark} />
                     </IconButton>
                   </Tooltip>
                 </Panel>
@@ -253,6 +268,9 @@ const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
 };
 
 export const AccessTree = (props: AccessTreeProps) => {
+  const { subject } = props;
+  if (!subject) return null;
+
   return (
     <AccessTreeErrorBoundary {...props}>
       <AccessTreeProvider>

frontend/src/components/permissions/AccessTree/components/AccessTreeContext.tsx

@@ -29,7 +29,7 @@ export type AccessTreeForm = { metadata: { key: string; value: string }[] };
 export const AccessTreeProvider: React.FC<AccessTreeProviderProps> = ({ children }) => {
   const [secretName, setSecretName] = useState("");
   const formMethods = useForm<AccessTreeForm>({ defaultValues: { metadata: [] } });
-  const [viewMode, setViewMode] = useState(ViewMode.Docked);
+  const [viewMode, setViewMode] = useState(ViewMode.Modal);
 
   const value = useMemo(
     () => ({

frontend/src/components/permissions/AccessTree/hooks/index.ts

@@ -33,7 +33,8 @@ type LevelFolderMap = Record<
 
 export const useAccessTree = (
   permissions: MongoAbility<ProjectPermissionSet, MongoQuery>,
-  searchPath: string
+  searchPath: string,
+  subject: ProjectPermissionSub
 ) => {
   const { currentWorkspace } = useWorkspace();
   const { secretName, setSecretName, setViewMode, viewMode } = useAccessTreeContext();
@@ -41,7 +42,6 @@ export const useAccessTree = (
   const metadata = useWatch({ control, name: "metadata" });
   const [nodes, setNodes] = useNodesState<Node>([]);
   const [edges, setEdges] = useEdgesState<Edge>([]);
-  const [subject, setSubject] = useState(ProjectPermissionSub.Secrets);
   const [environment, setEnvironment] = useState(currentWorkspace.environments[0]?.slug ?? "");
   const { data: environmentsFolders, isPending } = useListProjectEnvironmentsFolders(
     currentWorkspace.id
@@ -147,9 +147,7 @@ export const useAccessTree = (
     const roleNode = createRoleNode({
       subject,
       environment: slug,
-      environments: environmentsFolders,
-      onSubjectChange: setSubject,
-      onEnvironmentChange: setEnvironment
+      environments: environmentsFolders
     });
 
     const actionRuleMap = getSubjectActionRuleMap(subject, permissions);
@@ -280,7 +278,6 @@ export const useAccessTree = (
     subject,
     environment,
     setEnvironment,
-    setSubject,
     isLoading: isPending,
     environments: currentWorkspace.environments,
     secretName,

frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx

@@ -81,7 +81,7 @@ export const AccessTreeSecretPathInput = ({
             <FontAwesomeIcon icon={faSearch} />
           </div>
         ) : (
-          <Tooltip position="bottom" content="Search paths">
+          <Tooltip position="bottom" content="Search Paths">
             <div
               className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
               onClick={toggleSearch}

frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx

@@ -3,7 +3,6 @@ import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 
-import { Select, SelectItem } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { TProjectEnvironmentsFolders } from "@app/hooks/api/secretFolders/types";
 
@@ -29,7 +28,7 @@ const formatLabel = (text: string) => {
 };
 
 export const RoleNode = ({
-  data: { subject, environment, onSubjectChange, onEnvironmentChange, environments }
+  data: { subject }
 }: NodeProps & {
   data: ReturnType<typeof createRoleNode>["data"] & {
     onSubjectChange: Dispatch<SetStateAction<ProjectPermissionSub>>;
@@ -44,61 +43,10 @@ export const RoleNode = ({
         className="pointer-events-none !cursor-pointer opacity-0"
         position={Position.Top}
       />
-      <div className="flex w-full flex-col items-center justify-center rounded-md border-2 border-mineshaft-500 bg-gradient-to-b from-mineshaft-700 to-mineshaft-800 px-5 py-4 font-inter shadow-2xl">
-        <div className="flex w-full min-w-[240px] flex-col gap-4">
-          <div className="flex w-full flex-col gap-1.5">
-            <div className="ml-1 text-xs font-semibold text-mineshaft-200">Subject</div>
-            <Select
-              value={subject}
-              onValueChange={(value) => onSubjectChange(value as ProjectPermissionSub)}
-              className="w-full rounded-md border border-mineshaft-600 bg-mineshaft-900/90 text-sm shadow-inner backdrop-blur-sm transition-all hover:border-amber-600/50 focus:border-amber-500"
-              position="popper"
-              dropdownContainerClassName="max-w-none"
-              aria-label="Subject"
-            >
-              {[
-                ProjectPermissionSub.Secrets,
-                ProjectPermissionSub.SecretFolders,
-                ProjectPermissionSub.DynamicSecrets,
-                ProjectPermissionSub.SecretImports
-              ].map((sub) => {
-                return (
-                  <SelectItem
-                    className="relative flex items-center gap-2 py-2 pl-8 pr-8 text-sm capitalize hover:bg-mineshaft-700"
-                    value={sub}
-                    key={sub}
-                  >
-                    <div className="flex items-center gap-3">
-                      {getSubjectIcon(sub)}
-                      <span className="font-medium">{formatLabel(sub)}</span>
-                    </div>
-                  </SelectItem>
-                );
-              })}
-            </Select>
-          </div>
-
-          <div className="flex w-full flex-col gap-1.5">
-            <div className="ml-1 text-xs font-semibold text-mineshaft-200">Environment</div>
-            <Select
-              value={environment}
-              onValueChange={onEnvironmentChange}
-              className="w-full rounded-md border border-mineshaft-600 bg-mineshaft-900/90 text-sm shadow-inner backdrop-blur-sm transition-all hover:border-amber-600/50 focus:border-amber-500"
-              position="popper"
-              dropdownContainerClassName="max-w-none"
-              aria-label="Environment"
-            >
-              {Object.values(environments).map((env) => (
-                <SelectItem
-                  key={env.slug}
-                  value={env.slug}
-                  className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
-                >
-                  <div className="ml-3 font-medium">{env.name}</div>
-                </SelectItem>
-              ))}
-            </Select>
-          </div>
+      <div className="flex h-14 w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500">
+        <div className="flex items-center space-x-2 text-mineshaft-100">
+          {getSubjectIcon(subject)}
+          <span className="text-sm">{formatLabel(subject)} Access</span>
         </div>
       </div>
       <Handle

frontend/src/components/permissions/AccessTree/utils/createRoleNode.ts

@@ -1,5 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
-
 import { ProjectPermissionSub } from "@app/context";
 import { TProjectEnvironmentsFolders } from "@app/hooks/api/secretFolders/types";
 
@@ -8,24 +6,18 @@ import { PermissionNode } from "../types";
 export const createRoleNode = ({
   subject,
   environment,
-  environments,
-  onSubjectChange,
-  onEnvironmentChange
+  environments
 }: {
-  subject: string;
+  subject: ProjectPermissionSub;
   environment: string;
   environments: TProjectEnvironmentsFolders;
-  onSubjectChange: Dispatch<SetStateAction<ProjectPermissionSub>>;
-  onEnvironmentChange: (value: string) => void;
 }) => ({
   id: `role-${subject}-${environment}`,
   position: { x: 0, y: 0 },
   data: {
     subject,
     environment,
-    environments,
-    onSubjectChange,
-    onEnvironmentChange
+    environments
   },
   type: PermissionNode.Role,
   height: 48,

frontend/src/components/permissions/AccessTree/utils/positionElements.ts

@@ -39,16 +39,6 @@ export const positionElements = (nodes: Node[], edges: Edge[]) => {
   const positionedNodes = nodes.map((node) => {
     const { x, y } = dagre.node(node.id);
 
-    if (node.type === "role") {
-      return {
-        ...node,
-        position: {
-          x: x - (node.width ? node.width / 2 : 0),
-          y: y - 150
-        }
-      };
-    }
-
     return {
       ...node,
       position: {

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -173,17 +173,19 @@ export const ProjectTemplateEditRoleForm = ({
         <div className="p-4">
           <div className="mb-2 text-lg">Policies</div>
           <PermissionEmptyState />
-          {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
-            <GeneralPermissionPolicies
-              subject={subject}
-              actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-              title={PROJECT_PERMISSION_OBJECT[subject].title}
-              key={`project-permission-${subject}`}
-              isDisabled={isDisabled}
-            >
-              {renderConditionalComponents(subject, isDisabled)}
-            </GeneralPermissionPolicies>
-          ))}
+          <div>
+            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
+              <GeneralPermissionPolicies
+                subject={subject}
+                actions={PROJECT_PERMISSION_OBJECT[subject].actions}
+                title={PROJECT_PERMISSION_OBJECT[subject].title}
+                key={`project-permission-${subject}`}
+                isDisabled={isDisabled}
+              >
+                {renderConditionalComponents(subject, isDisabled)}
+              </GeneralPermissionPolicies>
+            ))}
+          </div>
         </div>
       </FormProvider>
     </form>

frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx

@@ -58,6 +58,7 @@ export const CreateSecretSyncModal = ({ onOpenChange, selectSync = null, ...prop
         }
         onPointerDownOutside={(e) => e.preventDefault()}
         className="max-w-2xl"
+        bodyClassName="overflow-visible"
         subTitle={selectedSync ? undefined : "Select a third-party service to sync secrets to."}
       >
         <Content

frontend/src/components/secret-syncs/SecretSyncSelect.tsx

@@ -1,10 +1,11 @@
-import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
-import { usePopUp } from "@app/hooks";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { SecretSync, useSecretSyncOptions } from "@app/hooks/api/secretSyncs";
 
 import { UpgradePlanModal } from "../license/UpgradePlanModal";
@@ -19,6 +20,26 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
+  const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", {
+    initPerPage: 16
+  });
+
+  const filteredOptions = useMemo(
+    () =>
+      secretSyncOptions?.filter(
+        ({ name, destination }) =>
+          name?.toLowerCase().includes(search.trim().toLowerCase()) ||
+          destination.toLowerCase().includes(search.toLowerCase())
+      ) ?? [],
+    [secretSyncOptions, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredOptions.length,
+    offset,
+    setPage
+  });
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -29,75 +50,103 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-4 gap-2">
-      {secretSyncOptions?.map(({ destination, enterprise }) => {
-        const { image, name } = SECRET_SYNC_MAP[destination];
-        return (
-          <button
-            type="button"
-            onClick={() =>
-              enterprise && !subscription.enterpriseSecretSyncs
-                ? handlePopUpOpen("upgradePlan")
-                : onSelect(destination)
-            }
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-          >
-            <img
-              src={`/images/integrations/${image}`}
-              height={40}
-              width={40}
-              className="mt-auto"
-              alt={`${name} logo`}
-            />
-            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-              {name}
-            </div>
-          </button>
-        );
-      })}
+    <div className="flex flex-col gap-4">
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search options..."
+        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
+      />
+      <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
+        {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
+          const { image, name } = SECRET_SYNC_MAP[destination];
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                enterprise && !subscription.enterpriseSecretSyncs
+                  ? handlePopUpOpen("upgradePlan")
+                  : onSelect(destination)
+              }
+              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+            >
+              <img
+                src={`/images/integrations/${image}`}
+                height={40}
+                width={40}
+                className="mt-auto"
+                alt={`${name} logo`}
+              />
+              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+                {name}
+              </div>
+            </button>
+          );
+        })}
+        {!filteredOptions?.length && (
+          <EmptyState
+            className="col-span-full mt-40"
+            title="No Secret Syncs match search"
+            icon={faSearch}
+          />
+        )}
+      </div>
+      {Boolean(filteredOptions.length) && (
+        <Pagination
+          startAdornment={
+            <Tooltip
+              side="bottom"
+              className="max-w-sm py-4"
+              content={
+                <>
+                  <p className="mb-2">Infisical is constantly adding support for more services.</p>
+                  <p>
+                    {`If you don't see the third-party
+            service you're looking for,`}{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://infisical.com/slack"
+                      rel="noopener noreferrer"
+                    >
+                      let us know on Slack
+                    </a>{" "}
+                    or{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://github.com/Infisical/infisical/discussions"
+                      rel="noopener noreferrer"
+                    >
+                      make a request on GitHub
+                    </a>
+                    .
+                  </p>
+                </>
+              }
+            >
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+                <span className="text-xs">
+                  Don&#39;t see the third-party service you&#39;re looking for?
+                </span>
+                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
+              </div>
+            </Tooltip>
+          }
+          count={filteredOptions.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[16]}
+        />
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use every Secret Sync if you switch to Infisical's Enterprise plan."
       />
-      <Tooltip
-        side="bottom"
-        className="max-w-sm py-4"
-        content={
-          <>
-            <p className="mb-2">Infisical is constantly adding support for more services.</p>
-            <p>
-              {`If you don't see the third-party
-            service you're looking for,`}{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://infisical.com/slack"
-                rel="noopener noreferrer"
-              >
-                let us know on Slack
-              </a>{" "}
-              or{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://github.com/Infisical/infisical/discussions"
-                rel="noopener noreferrer"
-              >
-                make a request on GitHub
-              </a>
-              .
-            </p>
-          </>
-        }
-      >
-        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
-          <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
-          <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-            Coming Soon
-          </div>
-        </div>
-      </Tooltip>
     </div>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx

@@ -30,7 +30,29 @@ export const AwsParameterStoreSyncFields = () => {
       />
       <Controller
         render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl isError={Boolean(error)} errorText={error?.message} label="Path">
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Path"
+            tooltipText={
+              <>
+                The path is required and will be prepended to the key schema. For example, if you
+                have a path of{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  /demo/path/
+                </code>{" "}
+                and a key schema of{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  INFISICAL_{"{{secretKey}}"}
+                </code>
+                , then the result will be{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  /demo/path/INFISICAL_{"{{secretKey}}"}
+                </code>
+              </>
+            }
+            tooltipClassName="max-w-lg"
+          >
             <Input value={value} onChange={onChange} placeholder="Path..." />
           </FormControl>
         )}

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx

@@ -76,7 +76,7 @@ export const GcpSyncFields = () => {
             helperText={
               <Tooltip
                 className="max-w-md"
-                content="Ensure that you've enabled the Secret Manager API and Cloud Resource Manager API on your GCP project. Additionally, make sure that the service account is assigned the appropriate GCP roles."
+                content="Ensure that you've enabled the Secret Manager API, Cloud Resource Manager API, and Service Usage API on your GCP project. Additionally, make sure that the service account is assigned the appropriate GCP roles."
               >
                 <div>
                   <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx

@@ -22,87 +22,19 @@ import { SecretSync } from "@app/hooks/api/secretSyncs";
 
 import { TSecretSyncForm } from "../schemas";
 
-export const AwsParameterStoreSyncOptionsFields = () => {
-  const { control, watch } = useFormContext<
+const AwsTagsSection = () => {
+  const { control } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.AWSParameterStore }
   >();
 
-  const region = watch("destinationConfig.region");
-  const connectionId = useWatch({ name: "connection.id", control });
-
-  const { data: kmsKeys = [], isPending: isKmsKeysPending } = useListAwsConnectionKmsKeys(
-    {
-      connectionId,
-      region,
-      destination: SecretSync.AWSParameterStore
-    },
-    { enabled: Boolean(connectionId && region) }
-  );
-
   const tagFields = useFieldArray({
     control,
     name: "syncOptions.tags"
   });
 
   return (
-    <>
-      <Controller
-        name="syncOptions.keyId"
-        control={control}
-        render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl
-            tooltipText="The AWS KMS key to encrypt parameters with"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            label="KMS Key"
-          >
-            <FilterableSelect
-              isLoading={isKmsKeysPending && Boolean(connectionId && region)}
-              isDisabled={!connectionId}
-              value={kmsKeys.find((org) => org.alias === value) ?? null}
-              onChange={(option) =>
-                onChange((option as SingleValue<TAwsConnectionKmsKey>)?.alias ?? null)
-              }
-              // eslint-disable-next-line react/no-unstable-nested-components
-              noOptionsMessage={({ inputValue }) =>
-                inputValue ? undefined : (
-                  <p>
-                    To configure a KMS key, ensure the following permissions are present on the
-                    selected IAM role:{" "}
-                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
-                      &#34;kms:ListAliases&#34;
-                    </span>
-                    ,{" "}
-                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
-                      &#34;kms:DescribeKey&#34;
-                    </span>
-                    ,{" "}
-                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
-                      &#34;kms:Encrypt&#34;
-                    </span>
-                    ,{" "}
-                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
-                      &#34;kms:Decrypt&#34;
-                    </span>
-                    .
-                  </p>
-                )
-              }
-              options={kmsKeys}
-              placeholder="Leave blank to use default KMS key"
-              getOptionLabel={(option) =>
-                option.alias === "alias/aws/ssm" ? `${option.alias} (Default)` : option.alias
-              }
-              getOptionValue={(option) => option.alias}
-            />
-          </FormControl>
-        )}
-      />
-      <FormLabel
-        label="Resource Tags"
-        tooltipText="Add resource tags to parameters synced by Infisical"
-      />
-      <div className="mb-3 grid max-h-[20vh] grid-cols-12 flex-col items-end gap-2 overflow-y-auto">
+    <div className="mb-4 mt-2 flex flex-col pl-2">
+      <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
         {tagFields.fields.map(({ id: tagFieldId }, i) => (
           <Fragment key={tagFieldId}>
             <div className="col-span-5">
@@ -164,12 +96,118 @@ export const AwsParameterStoreSyncOptionsFields = () => {
           Add Tag
         </Button>
       </div>
+    </div>
+  );
+};
+
+export const AwsParameterStoreSyncOptionsFields = () => {
+  const { control, watch, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.AWSParameterStore }
+  >();
+
+  const region = watch("destinationConfig.region");
+  const connectionId = useWatch({ name: "connection.id", control });
+  const watchedTags = watch("syncOptions.tags");
+
+  const { data: kmsKeys = [], isPending: isKmsKeysPending } = useListAwsConnectionKmsKeys(
+    {
+      connectionId,
+      region,
+      destination: SecretSync.AWSParameterStore
+    },
+    { enabled: Boolean(connectionId && region) }
+  );
+
+  return (
+    <>
+      <Controller
+        name="syncOptions.keyId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            tooltipText="The AWS KMS key to encrypt parameters with"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="KMS Key"
+          >
+            <FilterableSelect
+              isLoading={isKmsKeysPending && Boolean(connectionId && region)}
+              isDisabled={!connectionId}
+              value={kmsKeys.find((org) => org.alias === value) ?? null}
+              onChange={(option) =>
+                onChange((option as SingleValue<TAwsConnectionKmsKey>)?.alias ?? null)
+              }
+              // eslint-disable-next-line react/no-unstable-nested-components
+              noOptionsMessage={({ inputValue }) =>
+                inputValue ? undefined : (
+                  <p>
+                    To configure a KMS key, ensure the following permissions are present on the
+                    selected IAM role:{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:ListAliases&#34;
+                    </span>
+                    ,{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:DescribeKey&#34;
+                    </span>
+                    ,{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:Encrypt&#34;
+                    </span>
+                    ,{" "}
+                    <span className="rounded bg-mineshaft-600 text-mineshaft-300">
+                      &#34;kms:Decrypt&#34;
+                    </span>
+                    .
+                  </p>
+                )
+              }
+              options={kmsKeys}
+              placeholder="Leave blank to use default KMS key"
+              getOptionLabel={(option) =>
+                option.alias === "alias/aws/ssm" ? `${option.alias} (Default)` : option.alias
+              }
+              getOptionValue={(option) => option.alias}
+            />
+          </FormControl>
+        )}
+      />
+      <Switch
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+        id="overwrite-tags"
+        thumbClassName="bg-mineshaft-800"
+        isChecked={Array.isArray(watchedTags)}
+        onCheckedChange={(isChecked) => {
+          if (isChecked) {
+            setValue("syncOptions.tags", []);
+          } else {
+            setValue("syncOptions.tags", undefined);
+          }
+        }}
+      >
+        <p className="w-fit">
+          Configure Resource Tags{" "}
+          <Tooltip
+            className="max-w-md"
+            content={
+              <p>
+                If enabled, AWS resource tags will be overwritten using static values defined below.
+              </p>
+            }
+          >
+            <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+          </Tooltip>
+        </p>
+      </Switch>
+
+      {Array.isArray(watchedTags) && <AwsTagsSection />}
+
       <Controller
         name="syncOptions.syncSecretMetadataAsTags"
         control={control}
         render={({ field: { value, onChange }, fieldState: { error } }) => (
           <FormControl
-            className="mt-6"
+            className="mt-4"
             isError={Boolean(error?.message)}
             errorText={error?.message}
           >

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx

@@ -23,14 +23,93 @@ import { AwsSecretsManagerSyncMappingBehavior } from "@app/hooks/api/secretSyncs
 
 import { TSecretSyncForm } from "../schemas";
 
+const AwsTagsSection = () => {
+  const { control } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.AWSSecretsManager }
+  >();
+
+  const tagFields = useFieldArray({
+    control,
+    name: "syncOptions.tags"
+  });
+
+  return (
+    <div className="mb-4 mt-2 flex flex-col pl-2">
+      <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
+        {tagFields.fields.map(({ id: tagFieldId }, i) => (
+          <Fragment key={tagFieldId}>
+            <div className="col-span-5">
+              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+              <Controller
+                control={control}
+                name={`syncOptions.tags.${i}.key`}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    className="mb-0"
+                  >
+                    <Input className="text-xs" {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="col-span-6">
+              {i === 0 && (
+                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+              )}
+              <Controller
+                control={control}
+                name={`syncOptions.tags.${i}.value`}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    className="mb-0"
+                  >
+                    <Input className="text-xs" {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <Tooltip content="Remove tag" position="right">
+              <IconButton
+                variant="plain"
+                ariaLabel="Remove tag"
+                className="col-span-1 mb-1.5"
+                colorSchema="danger"
+                size="xs"
+                onClick={() => tagFields.remove(i)}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </IconButton>
+            </Tooltip>
+          </Fragment>
+        ))}
+      </div>
+      <div className="mt-2 flex">
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+          variant="outline_bg"
+          onClick={() => tagFields.append({ key: "", value: "" })}
+        >
+          Add Tag
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 export const AwsSecretsManagerSyncOptionsFields = () => {
-  const { control, watch } = useFormContext<
+  const { control, watch, setValue } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.AWSSecretsManager }
   >();
 
   const region = watch("destinationConfig.region");
   const connectionId = useWatch({ name: "connection.id", control });
   const mappingBehavior = watch("destinationConfig.mappingBehavior");
+  const watchedTags = watch("syncOptions.tags");
 
   const { data: kmsKeys = [], isPending: isKmsKeysPending } = useListAwsConnectionKmsKeys(
     {
@@ -41,11 +120,6 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
     { enabled: Boolean(connectionId && region) }
   );
 
-  const tagFields = useFieldArray({
-    control,
-    name: "syncOptions.tags"
-  });
-
   return (
     <>
       <Controller
@@ -102,78 +176,50 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
           </FormControl>
         )}
       />
-      <FormLabel label="Tags" tooltipText="Add tags to secrets synced by Infisical" />
-      <div className="mb-3 grid max-h-[20vh] grid-cols-12 flex-col items-end gap-2 overflow-y-auto">
-        {tagFields.fields.map(({ id: tagFieldId }, i) => (
-          <Fragment key={tagFieldId}>
-            <div className="col-span-5">
-              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
-              <Controller
-                control={control}
-                name={`syncOptions.tags.${i}.key`}
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    className="mb-0"
-                  >
-                    <Input className="text-xs" {...field} />
-                  </FormControl>
-                )}
-              />
-            </div>
-            <div className="col-span-6">
-              {i === 0 && (
-                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
-              )}
-              <Controller
-                control={control}
-                name={`syncOptions.tags.${i}.value`}
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    className="mb-0"
-                  >
-                    <Input className="text-xs" {...field} />
-                  </FormControl>
-                )}
-              />
-            </div>
-            <Tooltip content="Remove tag" position="right">
-              <IconButton
-                variant="plain"
-                ariaLabel="Remove tag"
-                className="col-span-1 mb-1.5"
-                colorSchema="danger"
-                size="xs"
-                onClick={() => tagFields.remove(i)}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-              </IconButton>
-            </Tooltip>
-          </Fragment>
-        ))}
-      </div>
-      <div className="mb-6 mt-2 flex">
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
-          variant="outline_bg"
-          onClick={() => tagFields.append({ key: "", value: "" })}
-        >
-          Add Tag
-        </Button>
-      </div>
+
+      <Switch
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+        id="overwrite-tags"
+        thumbClassName="bg-mineshaft-800"
+        isChecked={Array.isArray(watchedTags)}
+        onCheckedChange={(isChecked) => {
+          if (isChecked) {
+            setValue("syncOptions.tags", []);
+          } else {
+            setValue("syncOptions.tags", undefined);
+          }
+        }}
+      >
+        <p className="w-fit">
+          Configure Secret Tags{" "}
+          <Tooltip
+            className="max-w-md"
+            content={
+              <p>
+                If enabled, AWS secret tags will be overwritten using static values defined below.
+              </p>
+            }
+          >
+            <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+          </Tooltip>
+        </p>
+      </Switch>
+
+      {Array.isArray(watchedTags) && <AwsTagsSection />}
+
       {mappingBehavior === AwsSecretsManagerSyncMappingBehavior.OneToOne && (
         <Controller
           name="syncOptions.syncSecretMetadataAsTags"
           control={control}
           render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+            <FormControl
+              isError={Boolean(error?.message)}
+              errorText={error?.message}
+              className="mt-4"
+            >
               <Switch
                 className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
-                id="overwrite-existing-secrets"
+                id="sync-metadata-as-tags"
                 thumbClassName="bg-mineshaft-800"
                 isChecked={value}
                 onCheckedChange={onChange}

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -40,9 +40,9 @@ export const Checkbox = ({
     <div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}>
       <CheckboxPrimitive.Root
         className={twMerge(
-          "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
+          "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400/50 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
-          isChecked && "bg-primary hover:bg-primary",
+          isChecked && "border-primary/30 bg-primary/10",
           Boolean(children) && "mr-3",
           className
         )}
@@ -53,7 +53,10 @@ export const Checkbox = ({
         id={id}
       >
         <CheckboxPrimitive.Indicator
-          className={twMerge(`${checkIndicatorBg || "text-bunker-800"}`, indicatorClassName)}
+          className={twMerge(
+            `${checkIndicatorBg || "mt-[0.1rem] text-mineshaft-200"}`,
+            indicatorClassName
+          )}
         >
           {isIndeterminate ? (
             <FontAwesomeIcon icon={faMinus} size="sm" />

frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx

@@ -163,7 +163,7 @@ const PasswordGeneratorModal = ({
           <div className="mb-6 flex flex-row justify-between gap-2">
             <Checkbox
               id="useUppercase"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useUppercase}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useUppercase: checked as boolean })
@@ -174,7 +174,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useLowercase"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useLowercase}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useLowercase: checked as boolean })
@@ -185,7 +185,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useNumbers"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useNumbers}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useNumbers: checked as boolean })
@@ -196,7 +196,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useSpecialChars"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useSpecialChars}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useSpecialChars: checked as boolean })

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { TooltipProps as RootProps } from "@radix-ui/react-tooltip";
 import { twMerge } from "tailwind-merge";
 
 export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "content"> & {
@@ -14,6 +15,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   isDisabled?: boolean;
   center?: boolean;
   size?: "sm" | "md";
+  rootProps?: RootProps;
 };
 
 export const Tooltip = ({
@@ -28,12 +30,14 @@ export const Tooltip = ({
   isDisabled,
   position = "top",
   size = "md",
+  rootProps,
   ...props
 }: TooltipProps) =>
   // just render children if tooltip content is empty
   content ? (
     <TooltipPrimitive.Root
       delayDuration={50}
+      {...rootProps}
       open={isOpen}
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}

frontend/src/context/ProjectPermissionContext/types.ts

@@ -161,6 +161,18 @@ export type IdentityManagementSubjectFields = {
   identityId: string;
 };
 
+export type ConditionalProjectPermissionSubject =
+  | ProjectPermissionSub.SecretSyncs
+  | ProjectPermissionSub.Secrets
+  | ProjectPermissionSub.DynamicSecrets
+  | ProjectPermissionSub.Identity
+  | ProjectPermissionSub.SshHosts
+  | ProjectPermissionSub.PkiSubscribers
+  | ProjectPermissionSub.CertificateTemplates
+  | ProjectPermissionSub.SecretFolders
+  | ProjectPermissionSub.SecretImports
+  | ProjectPermissionSub.SecretRotation;
+
 export const formatedConditionsOperatorNames: { [K in PermissionConditionOperators]: string } = {
   [PermissionConditionOperators.$EQ]: "equal to",
   [PermissionConditionOperators.$IN]: "in",

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -23,6 +23,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { Link, linkOptions, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
 
 import { Mfa } from "@app/components/auth/Mfa";
+import { createNotification } from "@app/components/notifications";
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
@@ -49,6 +50,7 @@ import {
 } from "@app/hooks/api";
 import { authKeys } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
+import { getAuthToken } from "@app/hooks/api/reactQuery";
 import { SubscriptionPlan } from "@app/hooks/api/types";
 import { AuthMethod } from "@app/hooks/api/users/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
@@ -159,6 +161,16 @@ export const MinimizedOrgSidebar = () => {
     }
   };
 
+  const handleCopyToken = async () => {
+    try {
+      await window.navigator.clipboard.writeText(getAuthToken());
+      createNotification({ type: "success", text: "Copied current login session token to clipboard" });
+    } catch (error) {
+      console.log(error);
+      createNotification({ type: "error", text: "Failed to copy user token to clipboard" });
+    }
+  };
+
   if (shouldShowMfa) {
     return (
       <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
@@ -595,6 +607,16 @@ export const MinimizedOrgSidebar = () => {
                   </DropdownMenuItem>
                 </a>
                 <div className="mt-1 h-1 border-t border-mineshaft-600" />
+                <DropdownMenuItem onClick={handleCopyToken}>
+                  Copy Token
+                  <Tooltip
+                    content="This token is linked to your current login session and can only access resources within the organization you're currently logged into."
+                    className="max-w-3xl"
+                  >
+                    <FontAwesomeIcon icon={faInfoCircle} className="mb-[0.06rem] pl-1.5 text-xs" />
+                  </Tooltip>
+                </DropdownMenuItem>
+                <div className="mt-1 h-1 border-t border-mineshaft-600" />
                 <DropdownMenuItem onClick={logOutUser} icon={<FontAwesomeIcon icon={faSignOut} />}>
                   Log Out
                 </DropdownMenuItem>

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx

@@ -446,7 +446,6 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                                 <Checkbox
                                   id={optionValue}
                                   key={optionValue}
-                                  className="data-[state=checked]:bg-primary"
                                   isDisabled={Boolean(cert)}
                                   isChecked={value[optionValue]}
                                   onCheckedChange={(state) => {
@@ -481,7 +480,6 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                                 <Checkbox
                                   id={optionValue}
                                   key={optionValue}
-                                  className="data-[state=checked]:bg-primary"
                                   isDisabled={Boolean(cert)}
                                   isChecked={value[optionValue]}
                                   onCheckedChange={(state) => {

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx

@@ -405,7 +405,6 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                               <Checkbox
                                 id={optionValue}
                                 key={optionValue}
-                                className="data-[state=checked]:bg-primary"
                                 isChecked={value[optionValue]}
                                 onCheckedChange={(state) => {
                                   onChange({
@@ -439,7 +438,6 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                               <Checkbox
                                 id={optionValue}
                                 key={optionValue}
-                                className="data-[state=checked]:bg-primary"
                                 isChecked={value[optionValue]}
                                 onCheckedChange={(state) => {
                                   onChange({

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx

@@ -408,7 +408,6 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                                     <Checkbox
                                       id={optionValue}
                                       key={optionValue}
-                                      className="data-[state=checked]:bg-primary"
                                       isChecked={value[optionValue]}
                                       onCheckedChange={(state) => {
                                         onChange({
@@ -443,7 +442,6 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                                       <Checkbox
                                         id={optionValue}
                                         key={optionValue}
-                                        className="data-[state=checked]:bg-primary"
                                         isChecked={value[optionValue]}
                                         onCheckedChange={(state) => {
                                           onChange({
@@ -477,12 +475,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                     errorText={error?.message}
                     tooltipText="If enabled, a new certificate will be issued automatically X days before the current certificate expires."
                   >
-                    <Checkbox
-                      id="enableAutoRenewal"
-                      isChecked={value}
-                      onCheckedChange={onChange}
-                      className="data-[state=checked]:bg-primary"
-                    >
+                    <Checkbox id="enableAutoRenewal" isChecked={value} onCheckedChange={onChange}>
                       Enable Certificate Auto Renewal
                     </Checkbox>
                   </FormControl>

frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx

@@ -333,7 +333,6 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                           <Checkbox
                             id={optionValue}
                             key={optionValue}
-                            className="data-[state=checked]:bg-primary"
                             isChecked={value[optionValue]}
                             onCheckedChange={(state) => {
                               onChange({
@@ -367,7 +366,6 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                           <Checkbox
                             id={optionValue}
                             key={optionValue}
-                            className="data-[state=checked]:bg-primary"
                             isChecked={value[optionValue]}
                             onCheckedChange={(state) => {
                               onChange({

frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx

@@ -145,7 +145,6 @@ const KmipClientForm = ({ onComplete, kmipClient }: FormProps) => {
                     <Checkbox
                       id={optionValue}
                       key={optionValue}
-                      className="data-[state=checked]:bg-primary"
                       isChecked={value[optionValue]}
                       onCheckedChange={(state) => {
                         onChange({

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx

@@ -1,11 +1,12 @@
-import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
-import { usePopUp } from "@app/hooks";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useAppConnectionOptions } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 
@@ -19,6 +20,26 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
+  const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", {
+    initPerPage: 16
+  });
+
+  const filteredOptions = useMemo(
+    () =>
+      appConnectionOptions?.filter(
+        ({ name, app }) =>
+          name?.toLowerCase().includes(search.trim().toLowerCase()) ||
+          app.toLowerCase().includes(search.toLowerCase())
+      ) ?? [],
+    [appConnectionOptions, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredOptions.length,
+    offset,
+    setPage
+  });
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -29,86 +50,120 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-4 gap-2">
-      {appConnectionOptions?.map((option) => {
-        const { image, name, size = 50, enterprise = false, icon } = APP_CONNECTION_MAP[option.app];
+    <div className="flex flex-col gap-4">
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search options..."
+        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
+      />
+      <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
+        {filteredOptions.slice(offset, perPage * page)?.map((option) => {
+          const {
+            image,
+            name,
+            size = 50,
+            enterprise = false,
+            icon
+          } = APP_CONNECTION_MAP[option.app];
 
-        return (
-          <button
-            type="button"
-            onClick={() =>
-              enterprise && !subscription.enterpriseAppConnections
-                ? handlePopUpOpen("upgradePlan")
-                : onSelect(option.app)
-            }
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-          >
-            <div className="relative">
-              <img
-                src={`/images/integrations/${image}`}
-                style={{
-                  width: `${size}px`
-                }}
-                className="mt-auto"
-                alt={`${name} logo`}
-              />
-              {icon && (
-                <FontAwesomeIcon
-                  className="absolute -bottom-1.5 -right-1.5 text-primary-700"
-                  size="xl"
-                  icon={icon}
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                enterprise && !subscription.enterpriseAppConnections
+                  ? handlePopUpOpen("upgradePlan")
+                  : onSelect(option.app)
+              }
+              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+            >
+              <div className="relative">
+                <img
+                  src={`/images/integrations/${image}`}
+                  style={{
+                    width: `${size}px`
+                  }}
+                  className="mt-auto"
+                  alt={`${name} logo`}
                 />
-              )}
-            </div>
-            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-              {name}
-            </div>
-          </button>
-        );
-      })}
+                {icon && (
+                  <FontAwesomeIcon
+                    className="absolute -bottom-1.5 -right-1.5 text-primary-700"
+                    size="xl"
+                    icon={icon}
+                  />
+                )}
+              </div>
+              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+                {name}
+              </div>
+            </button>
+          );
+        })}
+        {!filteredOptions?.length && (
+          <EmptyState
+            className="col-span-full mt-40"
+            title="No App Connections match search"
+            icon={faSearch}
+          />
+        )}
+      </div>
+      {Boolean(filteredOptions.length) && (
+        <Pagination
+          startAdornment={
+            <Tooltip
+              side="bottom"
+              className="max-w-sm py-4"
+              content={
+                <>
+                  <p className="mb-2">Infisical is constantly adding support for more services.</p>
+                  <p>
+                    {`If you don't see the third-party
+            service you're looking for,`}{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://infisical.com/slack"
+                      rel="noopener noreferrer"
+                    >
+                      let us know on Slack
+                    </a>{" "}
+                    or{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://github.com/Infisical/infisical/discussions"
+                      rel="noopener noreferrer"
+                    >
+                      make a request on GitHub
+                    </a>
+                    .
+                  </p>
+                </>
+              }
+            >
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+                <span className="text-xs">
+                  Don&#39;t see the third-party service you&#39;re looking for?
+                </span>
+                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
+              </div>
+            </Tooltip>
+          }
+          count={filteredOptions.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[16]}
+        />
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use every App Connection if you switch to Infisical's Enterprise plan."
       />
-      <Tooltip
-        side="bottom"
-        className="max-w-sm py-4"
-        content={
-          <>
-            <p className="mb-2">Infisical is constantly adding support for more connections.</p>
-            <p>
-              {`If you don't see the third-party
-            app you're looking for,`}{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://infisical.com/slack"
-                rel="noopener noreferrer"
-              >
-                let us know on Slack
-              </a>{" "}
-              or{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://github.com/Infisical/infisical/discussions"
-                rel="noopener noreferrer"
-              >
-                make a request on GitHub
-              </a>
-              .
-            </p>
-          </>
-        }
-      >
-        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4">
-          <FontAwesomeIcon className="mt-auto text-xl" icon={faWrench} />
-          <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-            Coming Soon
-          </div>
-        </div>
-      </Tooltip>
     </div>
   );
 };

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -284,7 +284,6 @@ const ServiceTokenForm = () => {
                     <Checkbox
                       id={String(value[optionValue])}
                       key={optionValue}
-                      className="data-[state=checked]:bg-primary"
                       isChecked={value[optionValue]}
                       isDisabled={optionValue === "read"}
                       onCheckedChange={(state) => {

frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx

@@ -352,19 +352,21 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
         <div className="p-4">
           <div className="mb-2 text-lg">Policies</div>
           {(isCreate || !isPending) && <PermissionEmptyState />}
-          {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map(
-            (permissionSubject) => (
-              <GeneralPermissionPolicies
-                subject={permissionSubject}
-                actions={PROJECT_PERMISSION_OBJECT[permissionSubject].actions}
-                title={PROJECT_PERMISSION_OBJECT[permissionSubject].title}
-                key={`project-permission-${permissionSubject}`}
-                isDisabled={isDisabled}
-              >
-                {renderConditionalComponents(permissionSubject, isDisabled)}
-              </GeneralPermissionPolicies>
-            )
-          )}
+          <div>
+            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map(
+              (permissionSubject) => (
+                <GeneralPermissionPolicies
+                  subject={permissionSubject}
+                  actions={PROJECT_PERMISSION_OBJECT[permissionSubject].actions}
+                  title={PROJECT_PERMISSION_OBJECT[permissionSubject].title}
+                  key={`project-permission-${permissionSubject}`}
+                  isDisabled={isDisabled}
+                >
+                  {renderConditionalComponents(permissionSubject, isDisabled)}
+                </GeneralPermissionPolicies>
+              )
+            )}
+          </div>
         </div>
       </FormProvider>
     </form>

frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx

@@ -348,17 +348,19 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
         <div className="p-4">
           <div className="mb-2 text-lg">Policies</div>
           {(isCreate || !isPending) && <PermissionEmptyState />}
-          {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
-            <GeneralPermissionPolicies
-              subject={subject}
-              actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-              title={PROJECT_PERMISSION_OBJECT[subject].title}
-              key={`project-permission-${subject}`}
-              isDisabled={isDisabled}
-            >
-              {renderConditionalComponents(subject, isDisabled)}
-            </GeneralPermissionPolicies>
-          ))}
+          <div>
+            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
+              <GeneralPermissionPolicies
+                subject={subject}
+                actions={PROJECT_PERMISSION_OBJECT[subject].actions}
+                title={PROJECT_PERMISSION_OBJECT[subject].title}
+                key={`project-permission-${subject}`}
+                isDisabled={isDisabled}
+              >
+                {renderConditionalComponents(subject, isDisabled)}
+              </GeneralPermissionPolicies>
+            ))}
+          </div>
         </div>
       </FormProvider>
     </form>

frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx

@@ -1,5 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faCopy, faEdit, faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
@@ -12,19 +14,17 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  PageHeader,
-  Tooltip
+  PageHeader
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useDeleteProjectRole, useGetProjectRoleBySlug } from "@app/hooks/api";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 import { DuplicateProjectRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal";
+import { RolePermissionsSection } from "@app/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
-import { RoleDetailsSection } from "./components/RoleDetailsSection";
 import { RoleModal } from "./components/RoleModal";
-import { RolePermissionsSection } from "./components/RolePermissionsSection";
 
 const Page = () => {
   const navigate = useNavigate();
@@ -88,17 +88,29 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader
+            title={
+              <div className="flex flex-col">
+                <div>
+                  <span>{data.name}</span>
+                  <p className="text-sm font-[400] normal-case leading-3 text-mineshaft-400">
+                    {data.slug} {data.description && `- ${data.description}`}
+                  </p>
+                </div>
+              </div>
+            }
+          >
             {isCustomRole && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild className="rounded-lg">
-                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                    <Tooltip content="More options">
-                      <Button variant="outline_bg">More</Button>
-                    </Tooltip>
-                  </div>
+                  <Button
+                    colorSchema="secondary"
+                    rightIcon={<FontAwesomeIcon icon={faEllipsisV} className="ml-2" />}
+                  >
+                    Options
+                  </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="p-1">
+                <DropdownMenuContent align="end" sideOffset={2} className="p-1">
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Edit}
                     a={ProjectPermissionSub.Role}
@@ -113,6 +125,7 @@ const Page = () => {
                             roleSlug
                           })
                         }
+                        icon={<FontAwesomeIcon icon={faEdit} />}
                         disabled={!isAllowed}
                       >
                         Edit Role
@@ -128,6 +141,7 @@ const Page = () => {
                         className={twMerge(
                           !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
                         )}
+                        icon={<FontAwesomeIcon icon={faCopy} />}
                         onClick={() => {
                           handlePopUpOpen("duplicateRole");
                         }}
@@ -143,13 +157,9 @@ const Page = () => {
                   >
                     {(isAllowed) => (
                       <DropdownMenuItem
-                        className={twMerge(
-                          isAllowed
-                            ? "hover:!bg-red-500 hover:!text-white"
-                            : "pointer-events-none cursor-not-allowed opacity-50"
-                        )}
+                        icon={<FontAwesomeIcon icon={faTrash} />}
                         onClick={() => handlePopUpOpen("deleteRole")}
-                        disabled={!isAllowed}
+                        isDisabled={!isAllowed}
                       >
                         Delete Role
                       </DropdownMenuItem>
@@ -159,12 +169,7 @@ const Page = () => {
               </DropdownMenu>
             )}
           </PageHeader>
-          <div className="flex">
-            <div className="mr-4 w-96">
-              <RoleDetailsSection roleSlug={roleSlug} handlePopUpOpen={handlePopUpOpen} />
-            </div>
-            <RolePermissionsSection roleSlug={roleSlug} isDisabled={!isCustomRole} />
-          </div>
+          <RolePermissionsSection roleSlug={roleSlug} isDisabled={!isCustomRole} />
         </div>
       )}
       <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />

frontend/src/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton.tsx

@@ -24,7 +24,7 @@ export const AddPoliciesButton = ({ isDisabled }: Props) => {
   ] as const);
 
   return (
-    <>
+    <div>
       <Button
         className="h-10 rounded-r-none"
         variant="outline_bg"
@@ -73,6 +73,6 @@ export const AddPoliciesButton = ({ isDisabled }: Props) => {
         isOpen={popUp.applyTemplate.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("applyTemplate", isOpen)}
       />
-    </>
+    </div>
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/ConditionsFields.tsx

@@ -0,0 +1,206 @@
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import {
+  ConditionalProjectPermissionSubject,
+  PermissionConditionOperators
+} from "@app/context/ProjectPermissionContext/types";
+
+import {
+  getConditionOperatorHelperInfo,
+  renderOperatorSelectItems
+} from "./PermissionConditionHelpers";
+import { TFormSchema } from "./ProjectRoleModifySection.utils";
+
+export const ConditionsFields = ({
+  isDisabled,
+  subject,
+  position,
+  selectOptions
+}: {
+  isDisabled: boolean | undefined;
+  subject: ConditionalProjectPermissionSubject;
+  position: number;
+  selectOptions: [{ value: string; label: string }, ...{ value: string; label: string }[]];
+}) => {
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors }
+  } = useFormContext<TFormSchema>();
+  const items = useFieldArray({
+    control,
+    name: `permissions.${subject}.${position}.conditions`
+  });
+
+  const conditionErrorMessage =
+    errors?.permissions?.[subject]?.[position]?.conditions?.message ||
+    errors?.permissions?.[subject]?.[position]?.conditions?.root?.message;
+
+  return (
+    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
+      <div className="flex w-full items-center justify-between">
+        <div className="mt-2.5 flex items-center text-gray-300">
+          <span>Conditions</span>
+          <Tooltip
+            className="max-w-sm"
+            content={
+              <>
+                <p>
+                  Conditions determine when a policy will be applied (always if no conditions are
+                  present).
+                </p>
+                <p className="mt-3">
+                  All conditions must evaluate to true for the policy to take effect.
+                </p>
+              </>
+            }
+          >
+            <FontAwesomeIcon size="xs" className="ml-1 text-mineshaft-400" icon={faInfoCircle} />
+          </Tooltip>
+        </div>
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          variant="outline_bg"
+          size="xs"
+          className="mt-2"
+          isDisabled={isDisabled}
+          onClick={() =>
+            items.append({
+              lhs: selectOptions[0].value,
+              operator: PermissionConditionOperators.$EQ,
+              rhs: ""
+            })
+          }
+        >
+          Add Condition
+        </Button>
+      </div>
+      <div className="mt-2 flex flex-col space-y-2">
+        {Boolean(items.fields.length) &&
+          items.fields.map((el, index) => {
+            const condition =
+              (watch(`permissions.${subject}.${position}.conditions.${index}`) as {
+                lhs: string;
+                rhs: string;
+                operator: string;
+              }) || {};
+            return (
+              <div
+                key={el.id}
+                className="flex items-start gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
+              >
+                <div className="w-1/4">
+                  <Controller
+                    control={control}
+                    name={`permissions.${subject}.${position}.conditions.${index}.lhs`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0"
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => {
+                            setValue(
+                              `permissions.${subject}.${position}.conditions.${index}.operator`,
+                              PermissionConditionOperators.$IN as never
+                            );
+                            field.onChange(e);
+                          }}
+                          position="popper"
+                          className="w-full"
+                        >
+                          {selectOptions.map(({ value, label }) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <div className="flex w-44 items-center space-x-2">
+                  <Controller
+                    control={control}
+                    name={`permissions.${subject}.${position}.conditions.${index}.operator`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0 flex-grow"
+                      >
+                        <Select
+                          position="popper"
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => field.onChange(e)}
+                          className="w-full"
+                        >
+                          {renderOperatorSelectItems(condition.lhs)}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <div>
+                    <Tooltip
+                      asChild
+                      content={getConditionOperatorHelperInfo(
+                        condition?.operator as PermissionConditionOperators
+                      )}
+                      className="max-w-xs"
+                    >
+                      <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-bunker-400" />
+                    </Tooltip>
+                  </div>
+                </div>
+                <div className="flex-grow">
+                  <Controller
+                    control={control}
+                    name={`permissions.${subject}.${position}.conditions.${index}.rhs`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0 flex-grow"
+                      >
+                        <Input {...field} />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <IconButton
+                  ariaLabel="remove"
+                  variant="outline_bg"
+                  className="p-2.5"
+                  onClick={() => items.remove(index)}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            );
+          })}
+      </div>
+      {conditionErrorMessage && (
+        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
+          <FontAwesomeIcon icon={faWarning} className="text-red" />
+          <span>{conditionErrorMessage}</span>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/pages/project/RoleDetailsBySlugPage/components/DynamicSecretPermissionConditions.tsx

@@ -1,26 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -28,162 +8,17 @@ type Props = {
 };
 
 export const DynamicSecretPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions`
-  });
-
-  const conditionErrorMessage =
-    errors?.permissions?.[ProjectPermissionSub.DynamicSecrets]?.[position]?.conditions?.message ||
-    errors?.permissions?.[ProjectPermissionSub.DynamicSecrets]?.[position]?.conditions?.root
-      ?.message;
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition = watch(
-            `permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}`
-          ) as {
-            lhs: string;
-            rhs: string;
-            operator: string;
-          };
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => {
-                          setValue(
-                            `permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.operator`,
-                            PermissionConditionOperators.$IN as never
-                          );
-                          field.onChange(e);
-                        }}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                        <SelectItem value="metadataKey">Metadata Key</SelectItem>
-                        <SelectItem value="metadataValue">Metadata Value</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {conditionErrorMessage && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{conditionErrorMessage}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.DynamicSecrets}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" },
+        { value: "metadataKey", label: "Metadata Key" },
+        { value: "metadataValue", label: "Metadata Value" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionConditions.tsx

@@ -1,180 +1,26 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
   isDisabled?: boolean;
   type:
-    | ProjectPermissionSub.DynamicSecrets
     | ProjectPermissionSub.SecretFolders
     | ProjectPermissionSub.SecretImports
     | ProjectPermissionSub.SecretRotation;
 };
 
 export const GeneralPermissionConditions = ({ position = 0, isDisabled, type }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.${type}.${position}.conditions`
-  });
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${type}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${type}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${type}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${type}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[type]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[type]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>{}</div>
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={type}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx

@@ -3,6 +3,7 @@ import { Control, Controller, useFieldArray, useFormContext, useWatch } from "re
 import {
   faChevronDown,
   faChevronRight,
+  faDiagramProject,
   faGripVertical,
   faInfoCircle,
   faPlus,
@@ -27,6 +28,7 @@ type Props<T extends ProjectPermissionSub> = {
   actions: TProjectPermissionObject[T]["actions"];
   children?: JSX.Element;
   isDisabled?: boolean;
+  onShowAccessTree?: (subject: ProjectPermissionSub) => void;
 };
 
 type ActionProps = {
@@ -71,7 +73,8 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   actions,
   children,
   title,
-  isDisabled
+  isDisabled,
+  onShowAccessTree
 }: Props<T>) => {
   const { control, watch } = useFormContext<TFormSchema>();
   const { fields, remove, insert, move } = useFieldArray({
@@ -89,7 +92,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const [dragOverItem, setDragOverItem] = useState<number | null>(null);
 
-  if (!watchFields || !Array.isArray(watchFields) || watchFields.length === 0) return <div />;
+  if (!watchFields || !Array.isArray(watchFields) || watchFields.length === 0) return null;
 
   const handleDragStart = (_: React.DragEvent, index: number) => {
     setDraggedItem(index);
@@ -121,9 +124,9 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   };
 
   return (
-    <div className="border border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md">
+    <div className="overflow-clip border border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md">
       <div
-        className="flex cursor-pointer items-center space-x-8 px-5 py-4 text-sm text-gray-300"
+        className="flex h-14 cursor-pointer items-center px-5 py-4 text-sm text-gray-300"
         role="button"
         tabIndex={0}
         onClick={() => setIsOpen.toggle()}
@@ -133,20 +136,50 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
           }
         }}
       >
-        <div>
-          <FontAwesomeIcon icon={isOpen ? faChevronDown : faChevronRight} />
-        </div>
-        <div className="flex-grow">{title}</div>
+        <FontAwesomeIcon className="mr-8" icon={isOpen ? faChevronDown : faChevronRight} />
+
+        <div className="flex-grow text-base">{title}</div>
         {fields.length > 1 && (
           <div>
-            <Tag size="xs" className="px-2">
-              {fields.length} rules
+            <Tag size="xs" className="mr-2 px-2">
+              {fields.length} Rules
             </Tag>
           </div>
         )}
+        {isOpen && onShowAccessTree && (
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faDiagramProject} />}
+            variant="outline_bg"
+            size="xs"
+            className="ml-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              onShowAccessTree(subject);
+            }}
+          >
+            Visualize Access
+          </Button>
+        )}
+        {!isDisabled && isOpen && isConditionalSubjects(subject) && (
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            variant="outline_bg"
+            className="ml-2"
+            size="xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              insert(fields.length, [
+                { read: false, edit: false, create: false, delete: false } as any
+              ]);
+            }}
+            isDisabled={isDisabled}
+          >
+            Add Rule
+          </Button>
+        )}
       </div>
       {isOpen && (
-        <div key={`select-${subject}-type`} className="flex flex-col space-y-4 bg-bunker-800 p-6">
+        <div key={`select-${subject}-type`} className="flex flex-col space-y-3 bg-bunker-700 p-3">
           {fields.map((el, rootIndex) => {
             let isFullReadAccessEnabled = false;
 
@@ -154,78 +187,103 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
               isFullReadAccessEnabled = watch(`permissions.${subject}.${rootIndex}.read` as any);
             }
 
+            const isInverted = watch(`permissions.${subject}.${rootIndex}.inverted` as any);
+
             return (
               <div
                 key={el.id}
                 className={twMerge(
-                  "relative bg-mineshaft-800 p-5 pr-10 first:rounded-t-md last:rounded-b-md",
-                  dragOverItem === rootIndex ? "border-2 border-blue-400" : "",
+                  "relative rounded-md border-l-[6px] bg-mineshaft-800 px-5 py-4 transition-colors duration-300",
+                  isInverted ? "border-l-red-600/50" : "border-l-green-600/50",
+                  dragOverItem === rootIndex ? "border-2 border-primary/50" : "",
                   draggedItem === rootIndex ? "opacity-50" : ""
                 )}
                 onDragOver={(e) => handleDragOver(e, rootIndex)}
                 onDrop={handleDrop}
               >
-                {!isDisabled && (
-                  <Tooltip position="left" content="Drag to reorder permission">
-                    <div
-                      draggable
-                      onDragStart={(e) => handleDragStart(e, rootIndex)}
-                      onDragEnd={handleDragEnd}
-                      className="absolute right-3 top-2 cursor-move rounded-md bg-mineshaft-700 p-2 text-gray-400 hover:text-gray-200"
-                    >
-                      <FontAwesomeIcon icon={faGripVertical} />
-                    </div>
-                  </Tooltip>
-                )}
-
-                <div className="mb-4 flex items-center">
-                  {isConditionalSubjects(subject) && (
+                {isConditionalSubjects(subject) && (
+                  <div className="mb-4 flex items-center gap-3">
                     <div className="flex w-full items-center text-gray-300">
-                      <div className="w-1/4">Permission</div>
-                      <div className="mr-4 w-1/4">
-                        <Controller
-                          defaultValue={false as any}
-                          name={`permissions.${subject}.${rootIndex}.inverted`}
-                          render={({ field }) => (
-                            <Select
-                              value={String(field.value)}
-                              onValueChange={(val) => field.onChange(val === "true")}
-                              containerClassName="w-full"
-                              className="w-full"
-                              isDisabled={isDisabled}
-                            >
-                              <SelectItem value="false">Allow</SelectItem>
-                              <SelectItem value="true">Forbid</SelectItem>
-                            </Select>
-                          )}
+                      <div className="mr-3">Permission</div>
+                      <Controller
+                        defaultValue={false as any}
+                        name={`permissions.${subject}.${rootIndex}.inverted`}
+                        render={({ field }) => (
+                          <Select
+                            value={String(field.value)}
+                            onValueChange={(val) => field.onChange(val === "true")}
+                            containerClassName="w-40"
+                            className="w-full"
+                            isDisabled={isDisabled}
+                            position="popper"
+                          >
+                            <SelectItem value="false">Allow</SelectItem>
+                            <SelectItem value="true">Forbid</SelectItem>
+                          </Select>
+                        )}
+                      />
+                      <Tooltip
+                        asChild
+                        content={
+                          <>
+                            <p>
+                              Whether to allow or forbid the selected actions when the following
+                              conditions (if any) are met.
+                            </p>
+                            <p className="mt-2">Forbid rules must come after allow rules.</p>
+                          </>
+                        }
+                      >
+                        <FontAwesomeIcon
+                          icon={faInfoCircle}
+                          size="sm"
+                          className="ml-2 text-bunker-400"
                         />
-                      </div>
-                      <div>
-                        <Tooltip
-                          asChild
-                          content={
-                            <>
-                              <p>
-                                Whether to allow or forbid the selected actions when the following
-                                conditions (if any) are met.
-                              </p>
-                              <p className="mt-2">Forbid rules must come after allow rules.</p>
-                            </>
-                          }
+                      </Tooltip>
+                      {!isDisabled && (
+                        <Button
+                          leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                          variant="outline_bg"
+                          size="xs"
+                          className="ml-auto mr-3"
+                          onClick={() => remove(rootIndex)}
+                          isDisabled={isDisabled}
                         >
-                          <FontAwesomeIcon
-                            icon={faInfoCircle}
-                            size="sm"
-                            className="text-gray-400"
-                          />
+                          Remove Rule
+                        </Button>
+                      )}
+                      {!isDisabled && (
+                        <Tooltip position="left" content="Drag to reorder permission">
+                          <div
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, rootIndex)}
+                            onDragEnd={handleDragEnd}
+                            className="cursor-move text-bunker-300 hover:text-bunker-200"
+                          >
+                            <FontAwesomeIcon icon={faGripVertical} />
+                          </div>
                         </Tooltip>
-                      </div>
+                      )}
                     </div>
-                  )}
-                </div>
-                <div className="flex gap-4 text-gray-300">
-                  <div className="w-1/4">Actions</div>
-                  <div className="flex flex-grow flex-wrap justify-start gap-8">
+                  </div>
+                )}
+                <div className="flex flex-col text-gray-300">
+                  <div className="flex w-full justify-between">
+                    <div className="mb-2">Actions</div>
+                    {!isDisabled && !isConditionalSubjects(subject) && (
+                      <Button
+                        leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                        variant="outline_bg"
+                        size="xs"
+                        className="ml-auto"
+                        onClick={() => remove(rootIndex)}
+                        isDisabled={isDisabled}
+                      >
+                        Remove Rule
+                      </Button>
+                    )}
+                  </div>
+                  <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
                     {actions.map(({ label, value }, index) => {
                       if (typeof value !== "string") return undefined;
 
@@ -255,41 +313,6 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                   cloneElement(children, {
                     position: rootIndex
                   })}
-                <div
-                  className={twMerge(
-                    "mt-4 flex justify-start space-x-4",
-                    isConditionalSubjects(subject) && "justify-end"
-                  )}
-                >
-                  {!isDisabled && isConditionalSubjects(subject) && (
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      variant="star"
-                      size="xs"
-                      className="mt-2"
-                      onClick={() => {
-                        insert(rootIndex + 1, [
-                          { read: false, edit: false, create: false, delete: false } as any
-                        ]);
-                      }}
-                      isDisabled={isDisabled}
-                    >
-                      Add policy
-                    </Button>
-                  )}
-                  {!isDisabled && (
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                      variant="outline_bg"
-                      size="xs"
-                      className="mt-2 hover:border-red"
-                      onClick={() => remove(rootIndex)}
-                      isDisabled={isDisabled}
-                    >
-                      Remove policy
-                    </Button>
-                  )}{" "}
-                </div>
               </div>
             );
           })}

frontend/src/pages/project/RoleDetailsBySlugPage/components/IdentityManagementPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,150 +8,12 @@ type Props = {
 };
 
 export const IdentityManagementPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const permissionSubject = ProjectPermissionSub.Identity;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="identityId">Identity ID</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>{}</div>
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "identityId",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.Identity}
+      position={position}
+      selectOptions={[{ value: "identityId", label: "Identity ID" }]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PermissionConditionHelpers.tsx

@@ -17,17 +17,36 @@ export const getConditionOperatorHelperInfo = (type: PermissionConditionOperator
   }
 };
 
+// scott: we may need to pass the subject in the future to further refine returned items
 export const renderOperatorSelectItems = (type: string) => {
-  if (type === "secretTags") {
-    return <SelectItem value={PermissionConditionOperators.$IN}>Contains</SelectItem>;
+  switch (type) {
+    case "secretTags":
+      return <SelectItem value={PermissionConditionOperators.$IN}>Contains</SelectItem>;
+    case "identityId":
+      return (
+        <>
+          <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+        </>
+      );
+    case "hostname":
+    case "name":
+      return (
+        <>
+          <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$GLOB}>Glob Match</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+        </>
+      );
+    default:
+      return (
+        <>
+          <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$GLOB}>Glob Match</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+        </>
+      );
   }
-
-  return (
-    <>
-      <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
-      <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
-      <SelectItem value={PermissionConditionOperators.$GLOB}>Glob Match</SelectItem>
-      <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-    </>
-  );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PermissionEmptyState.tsx

@@ -12,7 +12,7 @@ export const PermissionEmptyState = () => {
     ([key, value]) => key && value?.length > 0
   );
 
-  if (isNotEmptyPermissions) return <div />;
+  if (isNotEmptyPermissions) return null;
 
   return <EmptyState title="No policies applied" className="py-8" />;
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PkiSubscriberPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,149 +8,12 @@ type Props = {
 };
 
 export const PkiSubscriberPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-
-  const permissionSubject = ProjectPermissionSub.PkiSubscribers;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="name">Name</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Tooltip
-                  asChild
-                  content={getConditionOperatorHelperInfo(
-                    condition?.operator as PermissionConditionOperators
-                  )}
-                  className="max-w-xs"
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                </Tooltip>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "name",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.PkiSubscribers}
+      position={position}
+      selectOptions={[{ value: "name", label: "Name" }]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PkiTemplatePermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,149 +8,12 @@ type Props = {
 };
 
 export const PkiTemplatePermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-
-  const permissionSubject = ProjectPermissionSub.CertificateTemplates;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="name">Name</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Tooltip
-                  asChild
-                  content={getConditionOperatorHelperInfo(
-                    condition?.operator as PermissionConditionOperators
-                  )}
-                  className="max-w-xs"
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                </Tooltip>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="delete"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "name",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.CertificateTemplates}
+      position={position}
+      selectOptions={[{ value: "name", label: "Name" }]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/RoleDetailsSection.tsx

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

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { MongoAbility, MongoQuery, RawRuleOf } from "@casl/ability";
 import { faSave } from "@fortawesome/free-solid-svg-icons";
@@ -88,6 +88,8 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
     roleSlug as string
   );
 
+  const [showAccessTree, setShowAccessTree] = useState<ProjectPermissionSub | null>(null);
+
   const form = useForm<TFormSchema>({
     values: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : undefined,
     resolver: zodResolver(projectRoleFormSchema)
@@ -133,71 +135,90 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
     [JSON.stringify(permissions)]
   );
 
+  const isSecretManagerProject = currentWorkspace.type === ProjectType.SecretManager;
+
   return (
     <div className="w-full">
-      {currentWorkspace.type === ProjectType.SecretManager && (
-        <AccessTree permissions={formattedPermissions} />
-      )}
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        className="flex h-full w-full flex-1 flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 py-4"
       >
         <FormProvider {...form}>
-          <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-            <h3 className="text-lg font-semibold text-mineshaft-100">Policies</h3>
-            <div className="flex items-center space-x-4">
-              {isCustomRole && (
-                <>
-                  {isDirty && (
-                    <Button
-                      className="mr-4 text-mineshaft-300"
-                      variant="link"
-                      isDisabled={isSubmitting}
-                      isLoading={isSubmitting}
-                      onClick={() => reset()}
-                    >
-                      Discard
-                    </Button>
-                  )}
-                  <div className="flex items-center">
-                    <Button
-                      variant="outline_bg"
-                      type="submit"
-                      className={twMerge(
-                        "mr-4 h-10 border",
-                        isDirty && "bg-primary text-black hover:bg-primary hover:opacity-80"
-                      )}
-                      isDisabled={isSubmitting || !isDirty}
-                      isLoading={isSubmitting}
-                      leftIcon={<FontAwesomeIcon icon={faSave} />}
-                    >
-                      Save
-                    </Button>
-                    <AddPoliciesButton isDisabled={isDisabled} />
-                  </div>
-                </>
-              )}
+          <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+            <div>
+              <h3 className="text-lg font-semibold text-mineshaft-100">Policies</h3>
+              <p className="text-sm leading-3 text-mineshaft-400">
+                Configure granular access policies
+              </p>
             </div>
-          </div>
-          <div className="py-4">
-            {!isPending && <PermissionEmptyState />}
-            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[])
-              .filter((subject) => !EXCLUDED_PERMISSION_SUBS.includes(subject))
-              .filter((subject) => ProjectTypePermissionSubjects[currentWorkspace.type][subject])
-              .map((subject) => (
-                <GeneralPermissionPolicies
-                  subject={subject}
-                  actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-                  title={PROJECT_PERMISSION_OBJECT[subject].title}
-                  key={`project-permission-${subject}`}
-                  isDisabled={isDisabled}
+            {isCustomRole && (
+              <div className="flex items-center gap-2">
+                {isDirty && (
+                  <Button
+                    className="mr-4 text-mineshaft-300"
+                    variant="link"
+                    isDisabled={isSubmitting}
+                    isLoading={isSubmitting}
+                    onClick={() => reset()}
+                  >
+                    Discard
+                  </Button>
+                )}
+                <Button
+                  colorSchema="secondary"
+                  type="submit"
+                  className={twMerge("h-10 border")}
+                  isDisabled={isSubmitting || !isDirty}
+                  isLoading={isSubmitting}
+                  leftIcon={<FontAwesomeIcon icon={faSave} />}
                 >
-                  {renderConditionalComponents(subject, isDisabled)}
-                </GeneralPermissionPolicies>
-              ))}
+                  Save
+                </Button>
+                <div className="ml-2 border-l border-mineshaft-500 pl-4">
+                  <AddPoliciesButton isDisabled={isDisabled} />
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex flex-1 flex-col overflow-hidden pl-4 pr-1">
+            <div className="thin-scrollbar flex-1 overflow-y-scroll py-4">
+              {!isPending && <PermissionEmptyState />}
+              {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[])
+                .filter((subject) => !EXCLUDED_PERMISSION_SUBS.includes(subject))
+                .filter((subject) => ProjectTypePermissionSubjects[currentWorkspace.type][subject])
+                .map((subject) => (
+                  <GeneralPermissionPolicies
+                    subject={subject}
+                    actions={PROJECT_PERMISSION_OBJECT[subject].actions}
+                    title={PROJECT_PERMISSION_OBJECT[subject].title}
+                    key={`project-permission-${subject}`}
+                    isDisabled={isDisabled}
+                    onShowAccessTree={
+                      isSecretManagerProject &&
+                      [
+                        ProjectPermissionSub.Secrets,
+                        ProjectPermissionSub.SecretFolders,
+                        ProjectPermissionSub.DynamicSecrets,
+                        ProjectPermissionSub.SecretImports
+                      ].includes(subject)
+                        ? setShowAccessTree
+                        : undefined
+                    }
+                  >
+                    {renderConditionalComponents(subject, isDisabled)}
+                  </GeneralPermissionPolicies>
+                ))}
+            </div>
           </div>
         </FormProvider>
       </form>
+      {isSecretManagerProject && showAccessTree && (
+        <AccessTree
+          permissions={formattedPermissions}
+          subject={showAccessTree}
+          onClose={() => setShowAccessTree(null)}
+        />
+      )}
     </div>
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/SecretPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import { PermissionConditionOperators } from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,159 +8,17 @@ type Props = {
 };
 
 export const SecretPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.secrets.${position}.conditions`
-  });
-
-  const conditionErrorMessage =
-    errors?.permissions?.secrets?.[position]?.conditions?.message ||
-    errors?.permissions?.secrets?.[position]?.conditions?.root?.message;
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition = watch(`permissions.secrets.${position}.conditions.${index}`) as {
-            lhs: string;
-            rhs: string;
-            operator: string;
-          };
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.secrets.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => {
-                          setValue(
-                            `permissions.secrets.${position}.conditions.${index}.operator`,
-                            PermissionConditionOperators.$IN as never
-                          );
-                          field.onChange(e);
-                        }}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                        <SelectItem value="secretName">Secret Name</SelectItem>
-                        <SelectItem value="secretTags">Secret Tags</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.secrets.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.secrets.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {conditionErrorMessage && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{conditionErrorMessage}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.Secrets}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" },
+        { value: "secretName", label: "Secret Name" },
+        { value: "secretTags", label: "Secret Tags" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/SecretSyncPermissionConditions.tsx

@@ -1,26 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -28,159 +8,15 @@ type Props = {
 };
 
 export const SecretSyncPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions`
-  });
-
-  const conditionErrorMessage =
-    errors?.permissions?.[ProjectPermissionSub.SecretSyncs]?.[position]?.conditions?.message ||
-    errors?.permissions?.[ProjectPermissionSub.SecretSyncs]?.[position]?.conditions?.root?.message;
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition = watch(
-            `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}`
-          ) as {
-            lhs: string;
-            rhs: string;
-            operator: string;
-          };
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => {
-                          setValue(
-                            `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.operator`,
-                            PermissionConditionOperators.$IN as never
-                          );
-                          field.onChange(e);
-                        }}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="remove"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {conditionErrorMessage && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{conditionErrorMessage}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.SecretSyncs}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/SshHostPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,149 +8,12 @@ type Props = {
 };
 
 export const SshHostPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-
-  const permissionSubject = ProjectPermissionSub.SshHosts;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
-      <p className="mt-2 text-gray-300">Conditions</p>
-      <p className="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="hostname">Hostname</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Tooltip
-                  asChild
-                  content={getConditionOperatorHelperInfo(
-                    condition?.operator as PermissionConditionOperators
-                  )}
-                  className="max-w-xs"
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                </Tooltip>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} onChange={(e) => field.onChange(e.target.value.trim())} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "hostname",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.SshHosts}
+      position={position}
+      selectOptions={[{ value: "hostname", label: "Hostname" }]}
+    />
   );
 };

frontend/src/pages/public/ViewSharedSecretByIDPage/components/PasswordContainer.tsx

@@ -70,7 +70,7 @@ export const PasswordContainer = ({
         colorSchema="primary"
         variant="outline_bg"
         size="sm"
-        onClick={() => window.open("https://app.infisical.com/share-secret", "_blank")}
+        onClick={() => window.open("/share-secret", "_blank", "noopener")}
         rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
       >
         Share Your Own Secret

frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx

@@ -76,7 +76,7 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
         colorSchema="primary"
         variant="outline_bg"
         size="sm"
-        onClick={() => window.open("https://app.infisical.com/share-secret", "_blank")}
+        onClick={() => window.open("/share-secret", "_blank", "noopener")}
         rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
       >
         Share Your Own Secret

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -6,6 +6,9 @@ import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
   faArrowDown,
+  faArrowLeft,
+  faArrowRight,
+  faArrowRightToBracket,
   faArrowUp,
   faFileImport,
   faFingerprint,
@@ -69,7 +72,7 @@ import {
   PreferenceKey,
   setUserTablePreference
 } from "@app/helpers/userTablePreferences";
-import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import { useDebounce, usePagination, usePopUp, useResetPageHelper, useToggle } from "@app/hooks";
 import {
   useCreateFolder,
   useCreateSecretV3,
@@ -164,6 +167,18 @@ export const OverviewPage = () => {
   const [debouncedSearchFilter, setDebouncedSearchFilter] = useDebounce(searchFilter);
   const secretPath = (routerSearch?.secretPath as string) || "/";
   const { subscription } = useSubscription();
+  const [collapseEnvironments, setCollapseEnvironments] = useToggle(
+    Boolean(localStorage.getItem("overview-collapse-environments"))
+  );
+
+  const handleToggleNarrowHeader = () => {
+    setCollapseEnvironments.toggle();
+    if (collapseEnvironments) {
+      localStorage.removeItem("overview-collapse-environments");
+    } else {
+      localStorage.setItem("overview-collapse-environments", "true");
+    }
+  };
 
   const [filter, setFilter] = useState<Filter>(DEFAULT_FILTER_STATE);
   const [filterHistory, setFilterHistory] = useState<
@@ -1173,47 +1188,81 @@ export const OverviewPage = () => {
             className="thin-scrollbar rounded-b-none"
           >
             <Table>
-              <THead>
-                <Tr className="sticky top-0 z-20 border-0">
-                  <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
-                    <div className="flex items-center border-b border-r border-mineshaft-600 pb-3 pl-3 pr-5 pt-3.5">
-                      <Tooltip
-                        className="max-w-[20rem] whitespace-nowrap capitalize"
-                        content={
-                          totalCount > 0
-                            ? `${
-                                !allRowsSelectedOnPage.isChecked ? "Select" : "Unselect"
-                              } all folders and secrets on page`
-                            : ""
-                        }
+              <THead className={collapseEnvironments ? "h-24" : ""}>
+                <Tr
+                  className={twMerge("sticky top-0 z-20 border-0", collapseEnvironments && "h-24")}
+                >
+                  <Th
+                    className={twMerge(
+                      "sticky left-0 z-20 min-w-[20rem] border-b-0 p-0",
+                      collapseEnvironments && "h-24"
+                    )}
+                  >
+                    <div
+                      className={twMerge(
+                        "flex h-full border-b border-mineshaft-600 pb-3 pl-3 pr-5",
+                        !collapseEnvironments && "border-r pt-3.5"
+                      )}
+                    >
+                      <div
+                        className={twMerge("flex items-center", collapseEnvironments && "mt-auto")}
                       >
-                        <div className="ml-2 mr-4">
-                          <Checkbox
-                            isDisabled={totalCount === 0}
-                            id="checkbox-select-all-rows"
-                            isChecked={allRowsSelectedOnPage.isChecked}
-                            isIndeterminate={allRowsSelectedOnPage.isIndeterminate}
-                            onCheckedChange={toggleSelectAllRows}
+                        <Tooltip
+                          className="max-w-[20rem] whitespace-nowrap capitalize"
+                          content={
+                            totalCount > 0
+                              ? `${
+                                  !allRowsSelectedOnPage.isChecked ? "Select" : "Unselect"
+                                } all folders and secrets on page`
+                              : ""
+                          }
+                        >
+                          <div className="ml-2 mr-4">
+                            <Checkbox
+                              isDisabled={totalCount === 0}
+                              id="checkbox-select-all-rows"
+                              isChecked={allRowsSelectedOnPage.isChecked}
+                              isIndeterminate={allRowsSelectedOnPage.isIndeterminate}
+                              onCheckedChange={toggleSelectAllRows}
+                            />
+                          </div>
+                        </Tooltip>
+                        Name
+                        <IconButton
+                          variant="plain"
+                          className="ml-2"
+                          ariaLabel="sort"
+                          onClick={() =>
+                            setOrderDirection((prev) =>
+                              prev === OrderByDirection.ASC
+                                ? OrderByDirection.DESC
+                                : OrderByDirection.ASC
+                            )
+                          }
+                        >
+                          <FontAwesomeIcon
+                            icon={orderDirection === "asc" ? faArrowDown : faArrowUp}
                           />
-                        </div>
-                      </Tooltip>
-                      Name
-                      <IconButton
-                        variant="plain"
-                        className="ml-2"
-                        ariaLabel="sort"
-                        onClick={() =>
-                          setOrderDirection((prev) =>
-                            prev === OrderByDirection.ASC
-                              ? OrderByDirection.DESC
-                              : OrderByDirection.ASC
-                          )
+                        </IconButton>
+                      </div>
+                      <Tooltip
+                        content={
+                          collapseEnvironments ? "Expand Environments" : "Collapse Environments"
                         }
+                        className="capitalize"
                       >
-                        <FontAwesomeIcon
-                          icon={orderDirection === "asc" ? faArrowDown : faArrowUp}
-                        />
-                      </IconButton>
+                        <IconButton
+                          ariaLabel="Toggle Environment View"
+                          variant="plain"
+                          colorSchema="secondary"
+                          className="ml-auto mt-auto h-min p-1"
+                          onClick={handleToggleNarrowHeader}
+                        >
+                          <FontAwesomeIcon
+                            icon={collapseEnvironments ? faArrowLeft : faArrowRight}
+                          />
+                        </IconButton>
+                      </Tooltip>
                     </div>
                   </Th>
                   {visibleEnvs?.map(({ name, slug }, index) => {
@@ -1223,28 +1272,76 @@ export const OverviewPage = () => {
 
                     return (
                       <Th
-                        className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
+                        className={twMerge(
+                          "min-table-row border-b-0 p-0 text-xs",
+                          collapseEnvironments && index === visibleEnvs.length - 1 && "mr-8",
+                          collapseEnvironments ? "h-24 w-[1rem]" : "min-w-[11rem] text-center"
+                        )}
                         key={`secret-overview-${name}-${index + 1}`}
                       >
-                        <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pb-[0.83rem] pt-3.5">
-                          <button
-                            type="button"
-                            className="text-sm font-medium duration-100 hover:text-mineshaft-100"
-                            onClick={() => handleExploreEnvClick(slug)}
+                        <Tooltip
+                          content={
+                            collapseEnvironments ? (
+                              <p className="whitespace-break-spaces">{name}</p>
+                            ) : (
+                              ""
+                            )
+                          }
+                          side="bottom"
+                          sideOffset={-1}
+                          align="end"
+                          className="max-w-xl text-xs normal-case"
+                          rootProps={{
+                            disableHoverableContent: true
+                          }}
+                        >
+                          <div
+                            className={twMerge(
+                              "border-b border-mineshaft-600",
+                              collapseEnvironments
+                                ? "relative h-24 w-[2.9rem]"
+                                : "flex items-center justify-center px-5 pb-[0.82rem] pt-3.5",
+                              collapseEnvironments &&
+                                index === visibleEnvs.length - 1 &&
+                                "overflow-clip"
+                            )}
                           >
-                            {name}
-                          </button>
-                          {missingKeyCount > 0 && (
-                            <Tooltip
-                              className="max-w-none lowercase"
-                              content={`${missingKeyCount} secrets missing\n compared to other environments`}
+                            <div
+                              className={twMerge(
+                                "border-mineshaft-600",
+                                collapseEnvironments
+                                  ? "ml-[0.85rem] h-24 -skew-x-[16rad] transform border-l text-xs"
+                                  : "flex items-center justify-center"
+                              )}
+                            />
+                            <button
+                              type="button"
+                              className={twMerge(
+                                "duration-100 hover:text-mineshaft-100",
+                                collapseEnvironments &&
+                                  (index === visibleEnvs.length - 1
+                                    ? "bottom-[1.75rem] w-14"
+                                    : "bottom-10 w-20"),
+                                collapseEnvironments
+                                  ? "absolute -rotate-[72.25deg] text-left !text-[12px] font-normal"
+                                  : "flex items-center text-center text-sm font-medium"
+                              )}
+                              onClick={() => handleExploreEnvClick(slug)}
                             >
-                              <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
-                                <span className="text-bunker-100">{missingKeyCount}</span>
-                              </div>
-                            </Tooltip>
-                          )}
-                        </div>
+                              <p className="truncate font-medium">{name}</p>
+                            </button>
+                            {!collapseEnvironments && missingKeyCount > 0 && (
+                              <Tooltip
+                                className="max-w-none lowercase"
+                                content={`${missingKeyCount} secrets missing\n compared to other environments`}
+                              >
+                                <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
+                                  <span className="text-bunker-100">{missingKeyCount}</span>
+                                </div>
+                              </Tooltip>
+                            )}
+                          </div>
+                        </Tooltip>
                       </Th>
                     );
                   })}
@@ -1409,16 +1506,40 @@ export const OverviewPage = () => {
                     />
                   </Td>
                   {visibleEnvs?.map(({ name, slug }) => (
-                    <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
-                      <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
-                        <Button
-                          size="xs"
-                          variant="outline_bg"
-                          isFullWidth
-                          onClick={() => handleExploreEnvClick(slug)}
-                        >
-                          Explore
-                        </Button>
+                    <Td
+                      key={`explore-${name}-btn`}
+                      className="border-0 border-r border-mineshaft-600 p-0"
+                    >
+                      <div
+                        className={twMerge(
+                          "flex w-full items-center justify-center border-t border-mineshaft-600 py-2"
+                        )}
+                      >
+                        {collapseEnvironments ? (
+                          <Tooltip className="normal-case" content="Explore Environment">
+                            <IconButton
+                              ariaLabel="Explore Environment"
+                              size="xs"
+                              variant="outline_bg"
+                              className="mx-auto h-[1.76rem] rounded"
+                              onClick={() => handleExploreEnvClick(slug)}
+                            >
+                              <FontAwesomeIcon icon={faArrowRightToBracket} />
+                            </IconButton>
+                          </Tooltip>
+                        ) : (
+                          <Button
+                            leftIcon={
+                              <FontAwesomeIcon className="mr-1" icon={faArrowRightToBracket} />
+                            }
+                            variant="outline_bg"
+                            size="xs"
+                            className="mx-2 w-full"
+                            onClick={() => handleExploreEnvClick(slug)}
+                          >
+                            Explore
+                          </Button>
+                        )}
                       </div>
                     </Td>
                   ))}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx

@@ -36,7 +36,7 @@ export const SecretOverviewDynamicSecretRow = ({
               isPresent ? "text-green-600" : "text-red-600"
             )}
           >
-            <div className="flex justify-center">
+            <div className="mx-auto flex w-[0.03rem] justify-center">
               <FontAwesomeIcon
                 // eslint-disable-next-line no-nested-ternary
                 icon={isPresent ? faCheck : faXmark}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx

@@ -70,7 +70,7 @@ export const SecretOverviewFolderRow = ({
               isPresent ? "text-green-600" : "text-red-600"
             )}
           >
-            <div className="flex justify-center">
+            <div className="mx-auto flex w-[0.03rem] justify-center">
               <FontAwesomeIcon
                 // eslint-disable-next-line no-nested-ternary
                 icon={isPresent ? faCheck : faXmark}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewSecretRotationRow.tsx

@@ -94,7 +94,7 @@ export const SecretOverviewSecretRotationRow = ({
                 isPresent ? "text-green-600" : "text-red-600"
               )}
             >
-              <div className="flex justify-center">
+              <div className="mx-auto flex w-[0.03rem] justify-center">
                 <FontAwesomeIcon
                   // eslint-disable-next-line no-nested-ternary
                   icon={isPresent ? faCheck : faXmark}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -1,8 +1,8 @@
 import { subject } from "@casl/ability";
-import { faCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
   faCheck,
+  faCircle,
   faCodeBranch,
   faEye,
   faEyeSlash,
@@ -145,14 +145,14 @@ export const SecretOverviewTableRow = ({
             <Td
               key={`sec-overview-${slug}-${i + 1}-value`}
               className={twMerge(
-                "px-0 py-0 group-hover:bg-mineshaft-700",
+                "border-r border-mineshaft-600 px-0 py-3 group-hover:bg-mineshaft-700",
                 isFormExpanded && "border-t-2 border-mineshaft-500",
                 (isSecretPresent && !isSecretEmpty) || isSecretImported ? "text-green-600" : "",
                 isSecretPresent && isSecretEmpty && !isSecretImported ? "text-yellow" : "",
                 !isSecretPresent && !isSecretEmpty && !isSecretImported ? "text-red-600" : ""
               )}
             >
-              <div className="h-full w-full border-r border-mineshaft-600 px-5 py-[0.85rem]">
+              <div className="mx-auto flex w-[0.03rem] justify-center">
                 <div className="flex justify-center">
                   {!isSecretEmpty && (
                     <Tooltip

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx

@@ -133,7 +133,6 @@ const Folder: React.FC<FolderProps> = ({
           {!isDisabled && (
             <Checkbox
               id="folder-root"
-              className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
               isChecked={allSelected || someSelected}
               onCheckedChange={handleFolderSelect}
               isIndeterminate={someSelected && !allSelected}
@@ -167,7 +166,6 @@ const Folder: React.FC<FolderProps> = ({
                 {!isDisabled && (
                   <Checkbox
                     id={`folder-${item.id}`}
-                    className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
                     isChecked={selectedItemIds.includes(item.id)}
                     onCheckedChange={(checked) => onItemSelect(item, !!checked)}
                     isDisabled={isDisabled}

frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -42,7 +42,6 @@ export const AutoCapitalizationSection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="autoCapitalization"
               isDisabled={!isAllowed}
               isChecked={currentWorkspace?.autoCapitalization ?? false}

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx

@@ -38,7 +38,6 @@ export const DeleteProjectProtection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="hasDeleteProtection"
               isDisabled={!isAllowed}
               isChecked={currentWorkspace?.hasDeleteProtection ?? false}

frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx

@@ -48,7 +48,6 @@ export const SecretSharingSection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="secretSharing"
               isDisabled={!isAllowed || isLoading}
               isChecked={currentWorkspace?.secretSharing ?? true}

frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx

@@ -48,7 +48,6 @@ export const SecretSnapshotsLegacySection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="showSnapshotsLegacy"
               isDisabled={!isAllowed || isLoading}
               isChecked={currentWorkspace?.showSnapshotsLegacy ?? false}