remove the use of aggregation for documentDB compatibility

Add self-hosted setup/configuration docs for OAuth2 integrations

backend/spec.json

@@ -3203,6 +3203,9 @@
                   "name": {
                     "example": "any"
                   },
+                  "tagColor": {
+                    "example": "any"
+                  },
                   "slug": {
                     "example": "any"
                   }

backend/src/config/index.ts

@@ -37,6 +37,7 @@ export const getClientIdNetlify = async () => (await client.getSecret("CLIENT_ID
 export const getClientIdGitHub = async () => (await client.getSecret("CLIENT_ID_GITHUB")).secretValue;
 export const getClientIdGitLab = async () => (await client.getSecret("CLIENT_ID_GITLAB")).secretValue;
 export const getClientIdBitBucket = async () => (await client.getSecret("CLIENT_ID_BITBUCKET")).secretValue;
+export const getClientIdGCPSecretManager = async () => (await client.getSecret("CLIENT_ID_GCP_SECRET_MANAGER")).secretValue;
 export const getClientSecretAzure = async () => (await client.getSecret("CLIENT_SECRET_AZURE")).secretValue;
 export const getClientSecretHeroku = async () => (await client.getSecret("CLIENT_SECRET_HEROKU")).secretValue;
 export const getClientSecretVercel = async () => (await client.getSecret("CLIENT_SECRET_VERCEL")).secretValue;
@@ -44,6 +45,7 @@ export const getClientSecretNetlify = async () => (await client.getSecret("CLIEN
 export const getClientSecretGitHub = async () => (await client.getSecret("CLIENT_SECRET_GITHUB")).secretValue;
 export const getClientSecretGitLab = async () => (await client.getSecret("CLIENT_SECRET_GITLAB")).secretValue;
 export const getClientSecretBitBucket = async () => (await client.getSecret("CLIENT_SECRET_BITBUCKET")).secretValue;
+export const getClientSecretGCPSecretManager = async () => (await client.getSecret("CLIENT_SECRET_GCP_SECRET_MANAGER")).secretValue;
 export const getClientSlugVercel = async () => (await client.getSecret("CLIENT_SLUG_VERCEL")).secretValue;
 
 export const getClientIdGoogleLogin = async () => (await client.getSecret("CLIENT_ID_GOOGLE_LOGIN")).secretValue;

backend/src/controllers/v2/secretsController.ts

@@ -9,6 +9,7 @@ import {
   ACTION_UPDATE_SECRETS,
   ALGORITHM_AES_256_GCM,
   ENCODING_SCHEME_UTF8,
+  K8_USER_AGENT_NAME,
   SECRET_PERSONAL
 } from "../../variables";
 import { BadRequestError, UnauthorizedRequestError } from "../../utils/errors";
@@ -59,7 +60,7 @@ export const batchSecrets = async (req: Request, res: Response) => {
 
   let secretPath = req.body.secretPath as string;
   let folderId = req.body.folderId as string;
-  
+
   const createSecrets: BatchSecret[] = [];
   const updateSecrets: BatchSecret[] = [];
   const deleteSecrets: { _id: Types.ObjectId, secretName: string; }[] = [];
@@ -154,7 +155,7 @@ export const batchSecrets = async (req: Request, res: Response) => {
         };
       })
     });
-    
+
     const auditLogs = await Promise.all(
       createdSecrets.map((secret, index) => {
         return EEAuditLogService.createAuditLog(
@@ -178,7 +179,7 @@ export const batchSecrets = async (req: Request, res: Response) => {
     );
 
     await AuditLog.insertMany(auditLogs);
-    
+
     const addAction = (await EELogService.createAction({
       name: ACTION_ADD_SECRETS,
       userId: req.user?._id,
@@ -234,6 +235,9 @@ export const batchSecrets = async (req: Request, res: Response) => {
           $inc: {
             version: 1
           },
+          $unset: {
+            'metadata.source': true as true
+          },
           ...u,
           _id: new Types.ObjectId(u._id)
         }
@@ -277,7 +281,7 @@ export const batchSecrets = async (req: Request, res: Response) => {
         $in: updateSecrets.map((u) => new Types.ObjectId(u._id))
       }
     });
-    
+
     const auditLogs = await Promise.all(
       updateSecrets.map((secret) => {
         return EEAuditLogService.createAuditLog(
@@ -329,26 +333,26 @@ export const batchSecrets = async (req: Request, res: Response) => {
   // handle delete secrets
   if (deleteSecrets.length > 0) {
     const deleteSecretIds: Types.ObjectId[] = deleteSecrets.map((s) => s._id);
-    
+
     const deletedSecretsObj = (await Secret.find({
       _id: {
         $in: deleteSecretIds
       }
     }))
-    .reduce(
-      (obj: any, secret: ISecret) => ({
-        ...obj,
-        [secret._id.toString()]: secret
-      }),
-      {}
-    );
-    
+      .reduce(
+        (obj: any, secret: ISecret) => ({
+          ...obj,
+          [secret._id.toString()]: secret
+        }),
+        {}
+      );
+
     await Secret.deleteMany({
       _id: {
         $in: deleteSecretIds
       }
     });
-    
+
     await EESecretService.markDeletedSecretVersions({
       secretIds: deleteSecretIds
     });
@@ -949,7 +953,7 @@ export const getSecrets = async (req: Request, res: Response) => {
       channel,
       ipAddress: req.realIP
     }));
-  
+
   await EEAuditLogService.createAuditLog(
     req.authData,
     {
@@ -966,21 +970,36 @@ export const getSecrets = async (req: Request, res: Response) => {
   );
 
   const postHogClient = await TelemetryService.getPostHogClient();
+
+  // reduce the number of events captured
+  let shouldRecordK8Event = false
+  if (req.authData.userAgent == K8_USER_AGENT_NAME) {
+    const randomNumber = Math.random();
+    if (randomNumber > 0.9) {
+      shouldRecordK8Event = true
+    }
+  }
+
   if (postHogClient) {
-    postHogClient.capture({
-      event: "secrets pulled",
-      distinctId: await TelemetryService.getDistinctId({
-        authData: req.authData
-      }),
-      properties: {
-        numberOfSecrets: secrets.length,
-        environment,
-        workspaceId,
-        channel,
-        folderId,
-        userAgent: req.headers?.["user-agent"]
-      }
-    });
+    const shouldCapture = req.authData.userAgent !== K8_USER_AGENT_NAME || shouldRecordK8Event;
+    const approximateForNoneCapturedEvents = secrets.length * 10
+
+    if (shouldCapture) {
+      postHogClient.capture({
+        event: "secrets pulled",
+        distinctId: await TelemetryService.getDistinctId({
+          authData: req.authData
+        }),
+        properties: {
+          numberOfSecrets: shouldRecordK8Event ? approximateForNoneCapturedEvents : secrets.length,
+          environment,
+          workspaceId,
+          folderId,
+          channel: req.authData.userAgentType,
+          userAgent: req.authData.userAgent
+        }
+      });
+    }
   }
 
   return res.status(200).send({
@@ -1087,10 +1106,10 @@ export const updateSecrets = async (req: Request, res: Response) => {
           tags,
           ...(secretCommentCiphertext !== undefined && secretCommentIV && secretCommentTag
             ? {
-                secretCommentCiphertext,
-                secretCommentIV,
-                secretCommentTag
-              }
+              secretCommentCiphertext,
+              secretCommentIV,
+              secretCommentTag
+            }
             : {})
         }
       }

backend/src/controllers/v2/tagController.ts

@@ -6,10 +6,11 @@ import { BadRequestError, UnauthorizedRequestError } from "../../utils/errors";
 
 export const createWorkspaceTag = async (req: Request, res: Response) => {
   const { workspaceId } = req.params;
-  const { name, slug } = req.body;
+  const { name, slug, tagColor } = req.body;
   
   const tagToCreate = {
       name,
+      tagColor,
       workspace: new Types.ObjectId(workspaceId),
       slug,
       user: new Types.ObjectId(req.user._id),

backend/src/ee/models/secretVersion.ts

@@ -117,7 +117,7 @@ const secretVersionSchema = new Schema<ISecretVersion>(
       ref: "Tag",
       type: [Schema.Types.ObjectId],
       default: [],
-    },
+    }
   },
   {
     timestamps: true,

backend/src/helpers/secrets.ts

@@ -29,6 +29,7 @@ import {
   ALGORITHM_AES_256_GCM,
   ENCODING_SCHEME_BASE64,
   ENCODING_SCHEME_UTF8,
+  K8_USER_AGENT_NAME,
   SECRET_PERSONAL,
   SECRET_SHARED
 } from "../variables";
@@ -393,7 +394,8 @@ export const createSecretHelper = async ({
     secretCommentTag,
     folder: folderId,
     algorithm: ALGORITHM_AES_256_GCM,
-    keyEncoding: ENCODING_SCHEME_UTF8
+    keyEncoding: ENCODING_SCHEME_UTF8,
+    metadata
   }).save();
 
   const secretVersion = new SecretVersion({
@@ -567,21 +569,33 @@ export const getSecretsHelper = async ({
 
   const postHogClient = await TelemetryService.getPostHogClient();
 
+  // reduce the number of events captured
+  let shouldRecordK8Event = false
+  if (authData.userAgent == K8_USER_AGENT_NAME) {
+    const randomNumber = Math.random();
+    if (randomNumber > 0.9) {
+      shouldRecordK8Event = true
+    }
+  }
+
   if (postHogClient) {
-    postHogClient.capture({
-      event: "secrets pulled",
-      distinctId: await TelemetryService.getDistinctId({
-        authData
-      }),
-      properties: {
-        numberOfSecrets: secrets.length,
-        environment,
-        workspaceId,
-        folderId,
-        channel: authData.userAgentType,
-        userAgent: authData.userAgent
-      }
-    });
+    const shouldCapture = authData.userAgent !== K8_USER_AGENT_NAME || shouldRecordK8Event;
+    const approximateForNoneCapturedEvents = secrets.length * 10
+
+    if (shouldCapture) {
+      postHogClient.capture({
+        event: "secrets pulled",
+        distinctId: await TelemetryService.getDistinctId({ authData }),
+        properties: {
+          numberOfSecrets: shouldRecordK8Event ? approximateForNoneCapturedEvents : secrets.length,
+          environment,
+          workspaceId,
+          folderId,
+          channel: authData.userAgentType,
+          userAgent: authData.userAgent
+        }
+      });
+    }
   }
 
   return secrets;
@@ -680,7 +694,7 @@ export const getSecretHelper = async ({
 
   if (postHogClient) {
     postHogClient.capture({
-      event: "secrets pull",
+      event: "secrets pulled",
       distinctId: await TelemetryService.getDistinctId({
         authData
       }),

backend/src/integrations/apps.ts

@@ -18,6 +18,10 @@ import {
   INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
   INTEGRATION_FLYIO,
   INTEGRATION_FLYIO_API_URL,
+  INTEGRATION_GCP_API_URL,
+  INTEGRATION_GCP_SECRET_MANAGER,
+  INTEGRATION_GCP_SECRET_MANAGER_SERVICE_NAME,
+  INTEGRATION_GCP_SERVICE_USAGE_URL,
   INTEGRATION_GITHUB,
   INTEGRATION_GITLAB,
   INTEGRATION_GITLAB_API_URL,
@@ -79,6 +83,11 @@ const getApps = async ({
 }) => {
   let apps: App[] = [];
   switch (integrationAuth.integration) {
+    case INTEGRATION_GCP_SECRET_MANAGER:
+      apps = await getAppsGCPSecretManager({
+        accessToken,
+      });
+      break;
     case INTEGRATION_AZURE_KEY_VAULT:
       apps = [];
       break;
@@ -210,6 +219,96 @@ const getApps = async ({
   return apps;
 };
 
+/**
+ * Return list of apps for GCP secret manager integration
+ * @param {Object} obj
+ * @param {String} obj.accessToken - access token for GCP API
+ * @returns {Object[]} apps - list of GCP projects
+ * @returns {String} apps.name - name of GCP project
+ * @returns {String} apps.appId - id of GCP project
+ */
+const getAppsGCPSecretManager = async ({ accessToken }: { accessToken: string }) => {
+  
+  interface GCPApp {
+    projectNumber: string;
+    projectId: string;
+    lifecycleState: "ACTIVE" | "LIFECYCLE_STATE_UNSPECIFIED" | "DELETE_REQUESTED" | "DELETE_IN_PROGRESS";
+    name: string;
+    createTime: string;
+    parent: {
+      type: "organization" | "folder" | "project";
+      id: string;
+    }
+  }
+  
+  interface GCPGetProjectsRes {
+    projects: GCPApp[];
+    nextPageToken?: string;
+  }
+  
+  interface GCPGetServiceRes {
+    name: string;
+    parent: string;
+    state: "ENABLED" | "DISABLED" | "STATE_UNSPECIFIED"
+  }
+
+  let gcpApps: GCPApp[] = [];
+  const apps: App[] = [];
+  
+  const pageSize = 100;
+  let pageToken: string | undefined;
+  let hasMorePages = true;
+  
+  while (hasMorePages) {
+    const params = new URLSearchParams({
+      pageSize: String(pageSize),
+      ...(pageToken ? { pageToken } : {})
+    });
+
+    const res: GCPGetProjectsRes = (await standardRequest.get(`${INTEGRATION_GCP_API_URL}/v1/projects`, {
+        params,
+        headers: {
+          "Authorization": `Bearer ${accessToken}`,
+          "Accept-Encoding": "application/json"
+        }
+      })
+    )
+    .data;
+    
+    gcpApps = gcpApps.concat(res.projects);
+
+    if (!res.nextPageToken) {
+      hasMorePages = false;
+    }
+    
+    pageToken = res.nextPageToken;
+  }
+  
+  for await (const gcpApp of gcpApps) {
+    try {
+      const res: GCPGetServiceRes = (await standardRequest.get(
+        `${INTEGRATION_GCP_SERVICE_USAGE_URL}/v1/projects/${gcpApp.projectId}/services/${INTEGRATION_GCP_SECRET_MANAGER_SERVICE_NAME}`, {
+          headers: {
+            "Authorization": `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json"
+          }
+        }
+      )).data;
+      
+      if (res.state === "ENABLED") {
+        apps.push({
+          name: gcpApp.name,
+          appId: gcpApp.projectId
+        });
+      }
+    } catch {
+      continue;
+    }
+  }
+
+  return apps;
+};
+
 /**
  * Return list of apps for Heroku integration
  * @param {Object} obj

backend/src/integrations/exchange.ts

@@ -14,8 +14,12 @@ import {
   INTEGRATION_NETLIFY_TOKEN_URL,
   INTEGRATION_VERCEL,
   INTEGRATION_VERCEL_TOKEN_URL,
+  INTEGRATION_GCP_SECRET_MANAGER,
+  INTEGRATION_GCP_TOKEN_URL
 } from "../variables";
 import {
+  getClientIdGCPSecretManager,
+  getClientSecretGCPSecretManager,
   getClientIdAzure,
   getClientIdBitBucket,
   getClientIdGitHub,
@@ -113,6 +117,11 @@ const exchangeCode = async ({
   let obj = {} as any;
 
   switch (integration) {
+    case INTEGRATION_GCP_SECRET_MANAGER:
+      obj = await exchangeCodeGCP({
+        code,
+      });
+      break;
     case INTEGRATION_AZURE_KEY_VAULT:
       obj = await exchangeCodeAzure({
         code,
@@ -153,6 +162,40 @@ const exchangeCode = async ({
   return obj;
 };
 
+/**
+ * Return [accessToken] for GCP OAuth2 code-token exchange
+ * @param {Object} obj
+ * @param {String} obj.code - code for code-token exchange
+ * @returns {Object} obj2
+ * @returns {String} obj2.accessToken - access token for GCP API
+ * @returns {String} obj2.refreshToken - refresh token for GCP API
+ * @returns {Date} obj2.accessExpiresAt - date of expiration for access token
+ */
+const exchangeCodeGCP = async ({ code }: { code: string }) => {
+  const accessExpiresAt = new Date();
+
+  const res: ExchangeCodeAzureResponse = (
+    await standardRequest.post(
+      INTEGRATION_GCP_TOKEN_URL,
+      new URLSearchParams({
+        grant_type: "authorization_code",
+        code: code,
+        client_id: await getClientIdGCPSecretManager(),
+        client_secret: await getClientSecretGCPSecretManager(),
+        redirect_uri: `${await getSiteURL()}/integrations/gcp-secret-manager/oauth2/callback`,
+      } as any)
+    )
+  ).data;
+  
+  accessExpiresAt.setSeconds(accessExpiresAt.getSeconds() + res.expires_in);
+
+  return {
+    accessToken: res.access_token,
+    refreshToken: res.refresh_token,
+    accessExpiresAt,
+  };
+};
+
 /**
  * Return [accessToken] for Azure OAuth2 code-token exchange
  * @param param0

backend/src/integrations/sync.ts

@@ -26,6 +26,8 @@ import {
   INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
   INTEGRATION_FLYIO,
   INTEGRATION_FLYIO_API_URL,
+  INTEGRATION_GCP_SECRET_MANAGER,
+  INTEGRATION_GCP_SECRET_MANAGER_URL,
   INTEGRATION_GITHUB,
   INTEGRATION_GITLAB,
   INTEGRATION_GITLAB_API_URL,
@@ -92,6 +94,13 @@ const syncSecrets = async ({
   accessToken: string;
 }) => {
   switch (integration.integration) {
+    case INTEGRATION_GCP_SECRET_MANAGER:
+      await syncSecretsGCPSecretManager({
+        integration,
+        secrets,
+        accessToken
+      });
+      break;
     case INTEGRATION_AZURE_KEY_VAULT:
       await syncSecretsAzureKeyVault({
         integration,
@@ -286,6 +295,163 @@ const syncSecrets = async ({
   }
 };
 
+/**
+ * Sync/push [secrets] to GCP secret manager project
+ * @param {Object} obj
+ * @param {IIntegration} obj.integration - integration details
+ * @param {Object} obj.secrets - secrets to push to integration (object where keys are secret keys and values are secret values)
+ * @param {String} obj.accessToken - access token for GCP secret manager
+ */
+const syncSecretsGCPSecretManager = async ({
+  integration,
+  secrets,
+  accessToken
+}: {
+  integration: IIntegration;
+  secrets: Record<string, { value: string; comment?: string }>;
+  accessToken: string;
+}) => {
+  interface GCPSecret {
+    name: string;
+    createTime: string;
+  }
+  
+  interface GCPSMListSecretsRes {
+    secrets: GCPSecret[];
+    totalSize: number;
+    nextPageToken?: string;
+  }
+  
+  let gcpSecrets: GCPSecret[] = [];
+  
+  const pageSize = 100;
+  let pageToken: string | undefined;
+  let hasMorePages = true;
+  
+  while (hasMorePages) {
+    const params = new URLSearchParams({
+      pageSize: String(pageSize),
+      ...(pageToken ? { pageToken } : {})
+    });
+    
+    const res: GCPSMListSecretsRes = (await standardRequest.get(
+      `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets`,
+      {
+        params,
+        headers: {
+          "Authorization": `Bearer ${accessToken}`,
+          "Accept-Encoding": "application/json"
+        }
+      }
+    )).data;
+    
+    gcpSecrets = gcpSecrets.concat(res.secrets);
+    
+    if (!res.nextPageToken) {
+      hasMorePages = false;
+    }
+    
+    pageToken = res.nextPageToken;
+  }
+  
+  const res: { [key: string]: string; } = {};
+  
+  interface GCPLatestSecretVersionAccess {
+    name: string;
+    payload: {
+      data: string;
+    }
+  }
+  
+  for await (const gcpSecret of gcpSecrets) {
+    const arr = gcpSecret.name.split("/");
+    const key = arr[arr.length - 1];
+
+    const secretLatest: GCPLatestSecretVersionAccess = (await standardRequest.get(
+      `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}/versions/latest:access`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Accept-Encoding": "application/json"
+        }
+      }
+    )).data;
+    
+    res[key] = Buffer.from(secretLatest.payload.data, "base64").toString("utf-8");
+  }
+  
+  for await (const key of Object.keys(secrets)) {
+    if (!(key in res)) {
+      // case: create secret
+      await standardRequest.post(
+        `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets`,
+        {
+          replication: {
+            automatic: {}
+          }
+        },
+        {
+          params: {
+            secretId: key
+          },
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json"
+          }
+        }
+      );
+      
+      await standardRequest.post(
+        `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}:addVersion`,
+        {
+          payload: {
+            data: Buffer.from(secrets[key].value).toString("base64")
+          }
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json"
+          }
+        }
+      );
+    }
+  }
+  
+  for await (const key of Object.keys(res)) {
+    if (!(key in secrets)) {
+      // case: delete secret
+      await standardRequest.delete(
+        `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}`,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json"
+          }
+        }
+      );
+    } else {
+      // case: update secret
+      if (secrets[key].value !== res[key]) {
+        await standardRequest.post(
+          `${INTEGRATION_GCP_SECRET_MANAGER_URL}/v1beta1/projects/${integration.appId}/secrets/${key}:addVersion`,
+          {
+            payload: {
+              data: Buffer.from(secrets[key].value).toString("base64")
+            }
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+              "Accept-Encoding": "application/json"
+            }
+          }
+        );
+      }
+    }
+  }
+}
+
 /**
  * Sync/push [secrets] to Azure Key Vault with vault URI [integration.app]
  * @param {Object} obj

backend/src/models/integration.ts

@@ -24,7 +24,8 @@ import {
   INTEGRATION_TERRAFORM_CLOUD,
   INTEGRATION_TRAVISCI,
   INTEGRATION_VERCEL,
-  INTEGRATION_WINDMILL
+  INTEGRATION_WINDMILL,
+  INTEGRATION_GCP_SECRET_MANAGER
 } from "../variables";
 import { Schema, Types, model } from "mongoose";
 
@@ -70,7 +71,8 @@ export interface IIntegration {
     | "digital-ocean-app-platform"
     | "cloud-66"
     | "northflank"
-    | "windmill";
+    | "windmill"
+    | "gcp-secret-manager";
   integrationAuth: Types.ObjectId;
 }
 
@@ -167,7 +169,8 @@ const integrationSchema = new Schema<IIntegration>(
         INTEGRATION_BITBUCKET,
         INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
         INTEGRATION_CLOUD_66,
-        INTEGRATION_NORTHFLANK
+        INTEGRATION_NORTHFLANK,
+        INTEGRATION_GCP_SECRET_MANAGER
       ],
       required: true,
     },

backend/src/models/integrationAuth.ts

@@ -26,7 +26,8 @@ import {
   INTEGRATION_TERRAFORM_CLOUD,
   INTEGRATION_TRAVISCI,
   INTEGRATION_VERCEL,
-  INTEGRATION_WINDMILL
+  INTEGRATION_WINDMILL,
+  INTEGRATION_GCP_SECRET_MANAGER
 } from "../variables";
 import { Document, Schema, Types, model } from "mongoose";
 
@@ -58,7 +59,8 @@ export interface IIntegrationAuth extends Document {
     | "terraform-cloud"
     | "teamcity"
     | "northflank"
-    | "windmill";
+    | "windmill"
+    | "gcp-secret-manager";
   teamId: string;
   accountId: string;
   url: string;
@@ -111,7 +113,8 @@ const integrationAuthSchema = new Schema<IIntegrationAuth>(
         INTEGRATION_BITBUCKET,
         INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
         INTEGRATION_CLOUD_66,
-        INTEGRATION_NORTHFLANK
+        INTEGRATION_NORTHFLANK,
+        INTEGRATION_GCP_SECRET_MANAGER
       ],
       required: true,
     },

backend/src/models/secret.ts

@@ -31,6 +31,9 @@ export interface ISecret {
   keyEncoding: "utf8" | "base64";
   tags?: string[];
   folder?: string;
+  metadata?: {
+    [key: string]: string;
+  }
 }
 
 const secretSchema = new Schema<ISecret>(
@@ -131,6 +134,9 @@ const secretSchema = new Schema<ISecret>(
       type: String,
       default: "root",
     },
+    metadata: {
+      type: Schema.Types.Mixed
+    }
   },
   {
     timestamps: true,

backend/src/models/tag.ts

@@ -3,6 +3,7 @@ import { Schema, Types, model } from "mongoose";
 export interface ITag {
 	_id: Types.ObjectId;
 	name: string;
+	tagColor: string;
 	slug: string;
 	user: Types.ObjectId;
 	workspace: Types.ObjectId;
@@ -15,6 +16,11 @@ const tagSchema = new Schema<ITag>(
 			required: true,
 			trim: true,
 		},
+		tagColor: {
+			type: String,
+			required: false,
+			trim: true,
+		},
 		slug: {
 			type: String,
 			required: true,

backend/src/routes/v1/auth.ts

@@ -11,7 +11,7 @@ router.post("/token", validateRequest, authController.getNewToken);
 router.post( // TODO endpoint: deprecate (moved to api/v3/auth/login1)
   "/login1",
   authLimiter,
-  body("email").exists().trim().notEmpty(),
+  body("email").exists().trim().notEmpty().toLowerCase(),
   body("clientPublicKey").exists().trim().notEmpty(),
   validateRequest,
   authController.login1
@@ -20,7 +20,7 @@ router.post( // TODO endpoint: deprecate (moved to api/v3/auth/login1)
 router.post( // TODO endpoint: deprecate (moved to api/v3/auth/login2)
   "/login2",
   authLimiter,
-  body("email").exists().trim().notEmpty(),
+  body("email").exists().trim().notEmpty().toLowerCase(),
   body("clientProof").exists().trim().notEmpty(),
   validateRequest,
   authController.login2

backend/src/routes/v2/auth.ts

@@ -8,7 +8,7 @@ import { authLimiter } from "../../helpers/rateLimiter";
 router.post( // TODO: deprecate (moved to api/v3/auth/login1)
   "/login1",
   authLimiter,
-  body("email").isString().trim().notEmpty(),
+  body("email").isString().trim().notEmpty().toLowerCase(),
   body("clientPublicKey").isString().trim().notEmpty(),
   validateRequest,
   authController.login1
@@ -17,7 +17,7 @@ router.post( // TODO: deprecate (moved to api/v3/auth/login1)
 router.post( // TODO: deprecate (moved to api/v3/auth/login1)
   "/login2",
   authLimiter,
-  body("email").isString().trim().notEmpty(),
+  body("email").isString().trim().notEmpty().toLowerCase(),
   body("clientProof").isString().trim().notEmpty(),
   validateRequest,
   authController.login2

backend/src/routes/v2/environment.ts

@@ -16,7 +16,7 @@ import {
 router.post(
   "/:workspaceId/environments",
   requireAuth({
-    acceptedAuthModes: [AuthMode.JWT],
+    acceptedAuthModes: [AuthMode.JWT, AuthMode.API_KEY],
   }),
   requireWorkspaceAuth({
     acceptedRoles: [ADMIN, MEMBER],
@@ -32,7 +32,7 @@ router.post(
 router.put(
   "/:workspaceId/environments",
   requireAuth({
-    acceptedAuthModes: [AuthMode.JWT],
+    acceptedAuthModes: [AuthMode.JWT, AuthMode.API_KEY],
   }),
   requireWorkspaceAuth({
     acceptedRoles: [ADMIN, MEMBER],
@@ -49,7 +49,7 @@ router.put(
 router.patch(
   "/:workspaceId/environments",
   requireAuth({
-    acceptedAuthModes: [AuthMode.JWT],
+    acceptedAuthModes: [AuthMode.JWT, AuthMode.API_KEY],
   }),
   requireWorkspaceAuth({
     acceptedRoles: [ADMIN, MEMBER],
@@ -67,7 +67,7 @@ router.patch(
 router.delete(
   "/:workspaceId/environments",
   requireAuth({
-    acceptedAuthModes: [AuthMode.JWT],
+    acceptedAuthModes: [AuthMode.JWT, AuthMode.API_KEY],
   }),
   requireWorkspaceAuth({
     acceptedRoles: [ADMIN],
@@ -82,7 +82,7 @@ router.delete(
 router.get(
   "/:workspaceId/environments",
   requireAuth({
-    acceptedAuthModes: [AuthMode.JWT],
+    acceptedAuthModes: [AuthMode.JWT, AuthMode.API_KEY],
   }),
   requireWorkspaceAuth({
     acceptedRoles: [MEMBER, ADMIN],

backend/src/routes/v2/tags.ts

@@ -48,6 +48,7 @@ router.post(
   }),
   param("workspaceId").exists().trim(),
   body("name").exists().trim(),
+  body("tagColor").exists().trim(),
   body("slug").exists().trim(),
   validateRequest,
   tagController.createWorkspaceTag

backend/src/routes/v3/auth.ts

@@ -9,7 +9,7 @@ const router = express.Router();
 router.post(
     "/login1",
     authLimiter,
-    body("email").isString().trim(),
+    body("email").isString().trim().toLowerCase(),
     body("providerAuthToken").isString().trim().optional({nullable: true}),
     body("clientPublicKey").isString().trim().notEmpty(),
     validateRequest,
@@ -19,7 +19,7 @@ router.post(
 router.post(
     "/login2",
     authLimiter,
-    body("email").isString().trim(),
+    body("email").isString().trim().toLowerCase(),
     body("providerAuthToken").isString().trim().optional({nullable: true}),
     body("clientProof").isString().trim().notEmpty(),
     validateRequest,

backend/src/services/SecretImportService.ts

@@ -54,6 +54,14 @@ export const getAllImportedSecrets = async (
         type: "shared"
       }
     },
+    {
+      $lookup: {
+        from: "tags", // note this is the name of the collection in the database, not the Mongoose model name
+        localField: "tags",
+        foreignField: "_id",
+        as: "tags"
+      }
+    },
     {
       $group: {
         _id: {

backend/src/utils/setup/backfillData.ts

@@ -540,20 +540,26 @@ export const backfillIntegration = async () => {
 };
 
 export const backfillServiceTokenMultiScope = async () => {
-  await ServiceTokenData.updateMany(
-    {
-      scopes: {
-        $exists: false
-      }
-    },
-    [
-      {
-        $set: {
-          scopes: [{ environment: "$environment", secretPath: "$secretPath" }]
+  const documentsToUpdate = await ServiceTokenData.find({ scopes: { $exists: false } });
+
+  for (const doc of documentsToUpdate) {
+    // Cast doc to any to bypass TypeScript's type checks
+    const anyDoc = doc as any;
+
+    const environment = anyDoc.environment;
+    const secretPath = anyDoc.secretPath;
+
+    if (environment && secretPath) {
+      const updatedScopes = [
+        {
+          environment: environment,
+          secretPath: secretPath
         }
-      }
-    ]
-  );
+      ];
+
+      await ServiceTokenData.updateOne({ _id: doc._id }, { $set: { scopes: updatedScopes } });
+    }
+  }
 
   console.log("Migration: Service token migration v2 complete");
 };
@@ -649,24 +655,25 @@ export const backfillUserAuthMethods = async () => {
     }
   );
 
-  await User.updateMany(
-  {
-    authProvider: {
-      $exists: true
-    },
-    authMethods: {
-      $exists: false
-    }
-  },
-  [
-    {
-      $set: {
-        authMethods: ["$authProvider"]
+
+  const documentsToUpdate = await User.find({
+    authProvider: { $exists: true },
+    authMethods: { $exists: false }
+  });
+
+  for (const doc of documentsToUpdate) {
+    // Cast doc to any to bypass TypeScript's type checks
+    const anyDoc = doc as any;
+
+    const authProvider = anyDoc.authProvider;
+    const authMethods = [authProvider];
+
+    await User.updateOne(
+      { _id: doc._id },
+      {
+        $set: { authMethods: authMethods },
+        $unset: { authProvider: 1, authId: 1 }
       }
-    },
-    {
-      $unset: ["authProvider", "authId"]
-    }
-  ]
-);
+    );
+  }
 }

backend/src/variables/authentication.ts

@@ -2,4 +2,6 @@ export enum AuthMode {
     JWT = "jwt",
     SERVICE_TOKEN = "serviceToken",
     API_KEY = "apiKey"
-}
+}
+
+export const K8_USER_AGENT_NAME = "k8-operator"

backend/src/variables/integration.ts

@@ -1,17 +1,19 @@
 import {
     getClientIdAzure,
     getClientIdBitBucket,
+    getClientIdGCPSecretManager,
     getClientIdGitHub,
     getClientIdGitLab,
     getClientIdHeroku,
     getClientIdNetlify,
-    getClientSlugVercel,
+    getClientSlugVercel
 } from "../config";
 
 // integrations
 export const INTEGRATION_AZURE_KEY_VAULT = "azure-key-vault";
 export const INTEGRATION_AWS_PARAMETER_STORE = "aws-parameter-store";
 export const INTEGRATION_AWS_SECRET_MANAGER = "aws-secret-manager";
+export const INTEGRATION_GCP_SECRET_MANAGER = "gcp-secret-manager";
 export const INTEGRATION_HEROKU = "heroku";
 export const INTEGRATION_VERCEL = "vercel";
 export const INTEGRATION_NETLIFY = "netlify";
@@ -36,35 +38,37 @@ export const INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM = "digital-ocean-app-platfor
 export const INTEGRATION_CLOUD_66 = "cloud-66";
 export const INTEGRATION_NORTHFLANK = "northflank";
 export const INTEGRATION_SET = new Set([
+    INTEGRATION_GCP_SECRET_MANAGER,
     INTEGRATION_AZURE_KEY_VAULT,
-  INTEGRATION_HEROKU,
-  INTEGRATION_VERCEL,
-  INTEGRATION_NETLIFY,
-  INTEGRATION_GITHUB,
-  INTEGRATION_GITLAB,
-  INTEGRATION_RENDER,
-  INTEGRATION_FLYIO,
-  INTEGRATION_CIRCLECI,
-  INTEGRATION_LARAVELFORGE,
-  INTEGRATION_TRAVISCI,
-  INTEGRATION_TEAMCITY,
-  INTEGRATION_SUPABASE,
-  INTEGRATION_CHECKLY,
-  INTEGRATION_TERRAFORM_CLOUD,
-  INTEGRATION_HASHICORP_VAULT,
-  INTEGRATION_CLOUDFLARE_PAGES,
-  INTEGRATION_CODEFRESH,
-  INTEGRATION_WINDMILL,
-  INTEGRATION_BITBUCKET,
-  INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
-  INTEGRATION_CLOUD_66,
-  INTEGRATION_NORTHFLANK
+    INTEGRATION_HEROKU,
+    INTEGRATION_VERCEL,
+    INTEGRATION_NETLIFY,
+    INTEGRATION_GITHUB,
+    INTEGRATION_GITLAB,
+    INTEGRATION_RENDER,
+    INTEGRATION_FLYIO,
+    INTEGRATION_CIRCLECI,
+    INTEGRATION_LARAVELFORGE,
+    INTEGRATION_TRAVISCI,
+    INTEGRATION_TEAMCITY,
+    INTEGRATION_SUPABASE,
+    INTEGRATION_CHECKLY,
+    INTEGRATION_TERRAFORM_CLOUD,
+    INTEGRATION_HASHICORP_VAULT,
+    INTEGRATION_CLOUDFLARE_PAGES,
+    INTEGRATION_CODEFRESH,
+    INTEGRATION_WINDMILL,
+    INTEGRATION_BITBUCKET,
+    INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
+    INTEGRATION_CLOUD_66,
+    INTEGRATION_NORTHFLANK
 ]);
 
 // integration types
 export const INTEGRATION_OAUTH2 = "oauth2";
 
 // integration oauth endpoints
+export const INTEGRATION_GCP_TOKEN_URL = "https://accounts.google.com/o/oauth2/token";
 export const INTEGRATION_AZURE_TOKEN_URL = "https://login.microsoftonline.com/common/oauth2/v2.0/token";
 export const INTEGRATION_HEROKU_TOKEN_URL = "https://id.heroku.com/oauth/token";
 export const INTEGRATION_VERCEL_TOKEN_URL =
@@ -76,6 +80,7 @@ export const INTEGRATION_GITLAB_TOKEN_URL = "https://gitlab.com/oauth/token";
 export const INTEGRATION_BITBUCKET_TOKEN_URL = "https://bitbucket.org/site/oauth2/access_token"
 
 // integration apps endpoints
+export const INTEGRATION_GCP_API_URL = "https://cloudresourcemanager.googleapis.com";
 export const INTEGRATION_HEROKU_API_URL = "https://api.heroku.com";
 export const INTEGRATION_GITLAB_API_URL = "https://gitlab.com/api";
 export const INTEGRATION_VERCEL_API_URL = "https://api.vercel.com";
@@ -97,6 +102,10 @@ export const INTEGRATION_DIGITAL_OCEAN_API_URL = "https://api.digitalocean.com";
 export const INTEGRATION_CLOUD_66_API_URL = "https://app.cloud66.com/api";
 export const INTEGRATION_NORTHFLANK_API_URL = "https://api.northflank.com";
 
+export const INTEGRATION_GCP_SECRET_MANAGER_SERVICE_NAME = "secretmanager.googleapis.com"
+export const INTEGRATION_GCP_SECRET_MANAGER_URL = `https://${INTEGRATION_GCP_SECRET_MANAGER_SERVICE_NAME}`;
+export const INTEGRATION_GCP_SERVICE_USAGE_URL = "https://serviceusage.googleapis.com";
+
 export const getIntegrationOptions = async () => {
     const INTEGRATION_OPTIONS = [
         {
@@ -272,12 +281,12 @@ export const getIntegrationOptions = async () => {
             docsLink: "",
         },
         {
-            name: "Google Cloud Platform",
-            slug: "gcp",
+            name: "GCP Secret Manager",
+            slug: "gcp-secret-manager",
             image: "Google Cloud Platform.png",
-            isAvailable: false,
-            type: "",
-            clientId: "",
+            isAvailable: true,
+            type: "oauth",
+            clientId: await getClientIdGCPSecretManager(),
             docsLink: ""
         },
         {

cloudformation/ec2-deployment/infisical-ec2-deployment.template

@@ -22,7 +22,7 @@ Resources:
   DocumentDBCluster:
     Type: "AWS::DocDB::DBCluster"
     Properties:
-      EngineVersion: 4.0.0
+      EngineVersion: 5.0.0
       StorageEncrypted: true
       MasterUsername: !Ref DocumentDBUsername
       MasterUserPassword: !Ref DocumentDBPassword
@@ -38,7 +38,7 @@ Resources:
     Type: "AWS::DocDB::DBClusterParameterGroup"
     Properties:
       Description: "description"
-      Family: "docdb4.0"
+      Family: "docdb5.0"
       Parameters:
         tls: "disabled"
         ttl_monitor: "disabled"
@@ -97,6 +97,7 @@ Resources:
           echo "JWT_SERVICE_SECRET=${!JWT_SERVICE_SECRET}" >> .env
           echo "MONGO_URL=${!DOCUMENT_DB_CONNECTION_URL}" >> .env
           echo "HTTPS_ENABLED=false" >> .env
+          echo "REDIS_URL=redis://redis:6379" >> .env
 
           docker-compose up -d
 
@@ -174,4 +175,4 @@ Metadata:
         x: 270
         "y": 90
       z: 1
-      embeds: []
+      embeds: []

docs/api-reference/endpoints/environments/create.mdx

@@ -0,0 +1,4 @@
+---
+title: "Create"
+openapi: "POST /api/v2/workspace/{workspaceId}/environments"
+---

docs/api-reference/endpoints/environments/delete.mdx

@@ -0,0 +1,4 @@
+---
+title: "Delete"
+openapi: "DELETE /api/v2/workspace/{workspaceId}/environments"
+---

docs/api-reference/endpoints/environments/list.mdx

@@ -0,0 +1,4 @@
+---
+title: "List"
+openapi: "GET /api/v2/workspace/{workspaceId}/environments"
+---

docs/api-reference/endpoints/environments/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PUT /api/v2/workspace/{workspaceId}/environments"
+---

docs/api-reference/endpoints/secrets/list.mdx

@@ -1,6 +1,6 @@
 ---
-title: "Retrieve"
-openapi: "GET /api/v3/secrets/{secretName}"
+title: "List"
+openapi: "GET /api/v3/secrets/"
 ---
 
 <Tip>

docs/api-reference/endpoints/secrets/read.mdx

@@ -1,6 +1,6 @@
 ---
-title: "Retrieve All"
-openapi: "GET /api/v3/secrets/"
+title: "Retrieve"
+openapi: "GET /api/v3/secrets/{secretName}"
 ---
 
 <Tip>

docs/integrations/cicd/githubactions.mdx

@@ -3,7 +3,9 @@ title: "GitHub Actions"
 description: "How to sync secrets from Infisical to GitHub Actions"
 ---
 
-<Warning>
+<Tabs>
+  <Tab title="Usage">
+  <Warning>
     Infisical can sync secrets to GitHub repo secrets only. If your repo uses environment secrets, then stay tuned with this [issue](https://github.com/Infisical/infisical/issues/54).
 </Warning>
 
@@ -20,7 +22,7 @@ Prerequisites:
 
 Press on the GitHub tile and grant Infisical access to your GitHub account (repo privileges only).
 
-![integrations github authorization](../../images/integrations-github-auth.png)
+![integrations github authorization](../../images/integrations/github/integrations-github-auth.png)
 
 <Info>
   If this is your project's first cloud integration, then you'll have to grant Infisical access to your project's environment variables.
@@ -31,5 +33,43 @@ Press on the GitHub tile and grant Infisical access to your GitHub account (repo
 
 Select which Infisical environment secrets you want to sync to which GitHub repo and press start integration to start syncing secrets to the repo.
 
-![integrations github](../../images/integrations-github.png)
+![integrations github](../../images/integrations/github/integrations-github.png)
+  </Tab>
+  <Tab title="Self-Hosted Setup">
+    Using the GitHub integration on a self-hosted instance of Infisical requires configuring an OAuth application in GitHub
+    and registering your instance with it.
+    
+    ## Create an OAuth application in GitHub
+    
+    Navigate to your user Settings > Developer settings > OAuth Apps to create a new GitHub OAuth application.
+    
+   ![integrations github config](../../images/integrations/github/integrations-github-config-settings.png) 
+   ![integrations github config](../../images/integrations/github/integrations-github-config-dev-settings.png) 
+   ![integrations github config](../../images/integrations/github/integrations-github-config-new-app.png) 
+
+    Create the OAuth application. As part of the form, set the **Homepage URL** to your self-hosted domain `https://your-domain.com`
+    and the **Authorization callback URL** to `https://your-domain.com/integrations/github/oauth2/callback`.
+
+   ![integrations github config](../../images/integrations/github/integrations-github-config-new-app-form.png) 
+    
+    <Note>
+      If you have a GitHub organization, you can create an OAuth application under it
+      in your organization Settings > Developer settings > OAuth Apps > New Org OAuth App.
+    </Note>
+    
+    ## Add your OAuth application credentials to Infisical
+    
+    Obtain the **Client ID** and generate a new **Client Secret** for your GitHub OAuth application.
+   
+   ![integrations github config](../../images/integrations/github/integrations-github-config-credentials.png) 
+   
+   Back in your Infisical instance, add two new environment variables for the credentials of your GitHub OAuth application:
+
+   - `CLIENT_ID_GITHUB`: The **Client ID** of your GitHub OAuth application.
+   - `CLIENT_SECRET_GITHUB`: The **Client Secret** of your GitHub OAuth application.
+   
+  Once added, restart your Infisical instance and use the GitHub integration.
+   
+  </Tab>
+</Tabs>
 

docs/integrations/cicd/gitlab.mdx

@@ -3,12 +3,14 @@ title: "GitLab"
 description: "How to sync secrets from Infisical to GitLab"
 ---
 
-Prerequisites:
+<Tabs>
+  <Tab title="Usage">
+  Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 
-<Tabs>
-  <Tab title="Standard">
+<AccordionGroup>
+  <Accordion title="Standard">
   ## Navigate to your project's integrations tab
 
 ![integrations](../../images/integrations.png)
@@ -17,7 +19,7 @@ Prerequisites:
 
 Press on the GitLab tile and grant Infisical access to your GitLab account.
 
-![integrations gitlab authorization](../../images/integrations-gitlab-auth.png)
+![integrations gitlab authorization](../../images/integrations/gitlab/integrations-gitlab-auth.png)
 
 <Info>
   If this is your project's first cloud integration, then you'll have to grant
@@ -29,13 +31,11 @@ Press on the GitLab tile and grant Infisical access to your GitLab account.
 
 Select which Infisical environment secrets you want to sync to which GitLab repository and press create integration to start syncing secrets to GitLab.
 
-![integrations gitlab](../../images/integrations-gitlab-create.png)
-![integrations gitlab](../../images/integrations-gitlab.png)
-
-  </Tab>
-  <Tab title="Pipeline">
-
-## Generate service token
+![integrations gitlab](../../images/integrations/gitlab/integrations-gitlab-create.png)
+![integrations gitlab](../../images/integrations/gitlab/integrations-gitlab.png)
+  </Accordion>
+  <Accordion title="Pipeline">
+  ## Generate service token
 
 Generate an [Infisical Token](/documentation/platform/token) for the specific project and environment in Infisical.
 
@@ -65,6 +65,42 @@ build-job:
     - apt-get update && apt-get install -y infisical
     - infisical run -- npm run build
 ```
+  </Accordion>
+</AccordionGroup>
+  </Tab>
+  <Tab title="Self-Hosted Setup">
+  Using the GitLab integration on a self-hosted instance of Infisical requires configuring an application in GitLab
+  and registering your instance with it.
 
+  ## Create an OAuth application in GitLab
+    
+    Navigate to your user Settings > Applications to create a new GitLab application.
+   
+   ![integrations gitlab config](../../images/integrations/gitlab/integrations-gitlab-config-edit-profile.png) 
+   ![integrations gitlab config](../../images/integrations/gitlab/integrations-gitlab-config-new-app.png) 
+    
+    Create the application. As part of the form, set the **Redirect URI** to `https://your-domain.com/integrations/gitlab/oauth2/callback`.
+
+   ![integrations gitlab config](../../images/integrations/gitlab/integrations-gitlab-config-new-app-form.png) 
+   
+    <Note>
+      If you have a GitLab group, you can create an OAuth application under it
+      in your group Settings > Applications.
+    </Note>
+   
+   ## Add your OAuth application credentials to Infisical
+   
+   Obtain the **Application ID** and **Secret** for your GitLab application.
+   
+   ![integrations gitlab config](../../images/integrations/gitlab/integrations-gitlab-config-credentials.png) 
+   
+   Back in your Infisical instance, add two new environment variables for the credentials of your GitLab application:
+
+   - `CLIENT_ID_GITLAB`: The **Client ID** of your GitLab application.
+   - `CLIENT_SECRET_GITLAB`: The **Client Secret** of your GitLab application.
+   
+  Once added, restart your Infisical instance and use the GitLab integration.
+  
   </Tab>
 </Tabs>
+

docs/integrations/cloud/azure-key-vault.mdx

@@ -3,7 +3,9 @@ title: "Azure Key Vault"
 description: "How to sync secrets from Infisical to Azure Key Vault"
 ---
 
-Prerequisites:
+<Tabs>
+  <Tab title="Usage">
+  Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 - Set up Azure and have an existing key vault
@@ -20,13 +22,13 @@ Press on the Azure Key Vault tile and grant Infisical access to Azure Key Vault.
 
 Obtain the Vault URI of your key vault in the Overview tab.
 
-![integrations](../../images/integrations-azure-key-vault-vault-uri.png)
+![integrations](../../images/integrations/azure-key-vault/integrations-azure-key-vault-vault-uri.png)
 
 Select which Infisical environment secrets you want to sync to your key vault. Then, input your Vault URI from the previous step. Finally, press create integration to start syncing secrets to Azure Key Vault.
 
-![integrations](../../images/integrations-azure-key-vault-create.png)
+![integrations](../../images/integrations/azure-key-vault/integrations-azure-key-vault-create.png)
 
-![integrations](../../images/integrations-azure-key-vault.png)
+![integrations](../../images/integrations/azure-key-vault/integrations-azure-key-vault.png)
 
 <Info>
   If this is your project's first cloud integration, then you'll have to grant
@@ -34,3 +36,38 @@ Select which Infisical environment secrets you want to sync to your key vault. T
   breaks E2EE, it's necessary for Infisical to sync the environment variables to
   the cloud platform.
 </Info>
+  </Tab>
+  <Tab title="Self-Hosted Setup">
+  Using the Azure KV integration on a self-hosted instance of Infisical requires configuring an application in Azure
+  and registering your instance with it.
+  
+  ## Create an application in Azure
+  
+  Navigate to Azure Active Directory > App registrations to create a new application.
+  
+   ![integrations Azure KV config](../../images/integrations/azure-key-vault/integrations-azure-key-vault-config-aad.png) 
+   ![integrations Azure KV config](../../images/integrations/azure-key-vault/integrations-azure-key-vault-config-new-app.png) 
+
+    Create the application. As part of the form, set the **Redirect URI** to `https://your-domain.com/integrations/azure-key-vault/oauth2/callback`.
+   
+   ![integrations Azure KV config](../../images/integrations/azure-key-vault/integrations-azure-key-vault-config-new-app-form.png) 
+   
+   ## Add your application credentials to Infisical
+   
+   Obtain the **Application (Client) ID** in Overview and generate a **Client Secret** in Certificate & secrets for your Azure application.
+
+   ![integrations Azure KV config](../../images/integrations/azure-key-vault/integrations-azure-key-vault-config-credentials-1.png) 
+   ![integrations Azure KV config](../../images/integrations/azure-key-vault/integrations-azure-key-vault-config-credentials-2.png) 
+   ![integrations Azure KV config](../../images/integrations/azure-key-vault/integrations-azure-key-vault-config-credentials-3.png) 
+   
+   Back in your Infisical instance, add two new environment variables for the credentials of your Azure application.
+
+   - `CLIENT_ID_AZURE`: The **Application (Client) ID** of your Azure application.
+   - `CLIENT_SECRET_AZURE`: The **Client Secret** of your Azure application.
+   
+  Once added, restart your Infisical instance and use the Azure KV integration.
+
+  
+  </Tab>
+</Tabs>
+

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

@@ -0,0 +1,71 @@
+---
+title: "GCP Secret Manager"
+description: "How to sync secrets from Infisical to GCP Secret Manager"
+---
+
+<Tabs>
+  <Tab title="Usage">
+  Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+
+## Navigate to your project's integrations tab
+
+![integrations](../../images/integrations.png)
+
+## Authorize Infisical for GCP
+
+Press on the GCP Secret Manager tile and grant Infisical access to GCP.
+
+![integrations GCP authorization](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-auth.png)
+
+<Info>
+  If this is your project's first cloud integration, then you'll have to grant
+  Infisical access to your project's environment variables. Although this step
+  breaks E2EE, it's necessary for Infisical to sync the environment variables to
+  the cloud platform.
+</Info>
+
+## Start integration
+
+Select which Infisical environment secrets you want to sync to which GCP secret manager project. Lastly, press create integration to start syncing secrets to GCP secret manager.
+
+![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-create.png)
+![integrations GCP secret manager](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager.png)
+
+<Warning>
+    Using Infisical to sync secrets to GCP Secret Manager requires that you enable
+    the Service Usage API in the Google Cloud project you want to sync secrets to. More on that [here](https://cloud.google.com/service-usage/docs/set-up-development-environment).
+</Warning>
+  </Tab>
+  <Tab title="Self-Hosted Setup">
+  Using the GCP Secret Manager integration on a self-hosted instance of Infisical requires configuring an OAuth2 application in GCP
+  and registering your instance with it.
+  
+  ## Create an OAuth2 application in GCP
+  
+  Navigate to your project API & Services > Credentials to create a new OAuth2 application.
+   
+   ![integrations GCP secret manager config](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-config-api-services.png) 
+   ![integrations GCP secret manager config](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-config-new-app.png) 
+    
+    Create the application. As part of the form, add to **Authorized redirect URIs**: `https://your-domain.com/integrations/gitlab/oauth2/callback`.
+   
+   ![integrations GCP secret manager config](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-config-new-app-form.png) 
+   
+   ## Add your OAuth2 application credentials to Infisical
+   
+   Obtain the **Client ID** and **Client Secret** for your GCP OAuth2 application.
+   
+   ![integrations GCP secret manager config](../../images/integrations/gcp-secret-manager/integrations-gcp-secret-manager-config-credentials.png) 
+   
+   Back in your Infisical instance, add two new environment variables for the credentials of your GCP OAuth2 application:
+
+   - `CLIENT_ID_GCP_SECRET_MANAGER`: The **Client ID** of your GCP OAuth2 application.
+   - `CLIENT_SECRET_GCP_SECRET_MANAGER`: The **Client Secret** of your GCP OAuth2 application.
+   
+  Once added, restart your Infisical instance and use the GCP Secret Manager integration.
+
+  </Tab>
+</Tabs>
+

docs/integrations/cloud/heroku.mdx

@@ -3,7 +3,9 @@ title: "Heroku"
 description: "How to sync secrets from Infisical to Heroku"
 ---
 
-Prerequisites:
+<Tabs>
+  <Tab title="Usage">
+  Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 
@@ -15,7 +17,7 @@ Prerequisites:
 
 Press on the Heroku tile and grant Infisical access to your Heroku account.
 
-![integrations heroku authorization](../../images/integrations-heroku-auth.png)
+![integrations heroku authorization](../../images/integrations/heroku/integrations-heroku-auth.png)
 
 <Info>
   If this is your project's first cloud integration, then you'll have to grant
@@ -28,5 +30,38 @@ Press on the Heroku tile and grant Infisical access to your Heroku account.
 
 Select which Infisical environment secrets you want to sync to which Heroku app and press create integration to start syncing secrets to Heroku.
 
-![integrations heroku](../../images/integrations-heroku-create.png)
-![integrations heroku](../../images/integrations-heroku.png)
+![integrations heroku](../../images/integrations/heroku/integrations-heroku-create.png)
+![integrations heroku](../../images/integrations/heroku/integrations-heroku.png)
+  </Tab>
+  <Tab title="Self-Hosted Setup">
+  Using the Heroku integration on a self-hosted instance of Infisical requires configuring an API client in Heroku
+  and registering your instance with it.
+  
+  ## Create an API client in Heroku
+  
+  Navigate to your user Account settings > Applications to create a new API client.
+
+   ![integrations Heroku config](../../images/integrations/heroku/integrations-heroku-config-settings.png) 
+   ![integrations Heroku config](../../images/integrations/heroku/integrations-heroku-config-applications.png) 
+   ![integrations Heroku config](../../images/integrations/heroku/integrations-heroku-config-new-app.png) 
+   
+    Create the API client. As part of the form, set the **OAuth callback URL** to `https://your-domain.com/integrations/heroku/oauth2/callback`.
+
+   ![integrations Heroku config](../../images/integrations/heroku/integrations-heroku-config-new-app-form.png) 
+   
+   ## Add your Heroku API client credentials to Infisical
+   
+   Obtain the **Client ID** and **Client Secret** for your Heroku API client.
+   
+   ![integrations Heroku config](../../images/integrations/heroku/integrations-heroku-config-credentials.png) 
+   
+   Back in your Infisical instance, add two new environment variables for the credentials of your Heroku API client.
+
+   - `CLIENT_ID_HEROKU`: The **Client ID** of your Heroku API client.
+   - `CLIENT_SECRET_HEROKU`: The **Client Secret** of your Heroku API client.
+   
+  Once added, restart your Infisical instance and use the Heroku integration.
+
+  </Tab>
+</Tabs>
+

docs/integrations/cloud/netlify.mdx

@@ -3,7 +3,9 @@ title: "Netlify"
 description: "How to sync secrets from Infisical to Netlify"
 ---
 
-<Warning>
+<Tabs>
+  <Tab title="Usage">
+  <Warning>
   Infisical integrates with Netlify's new environment variable experience. If
   your site uses Netlify's old environment variable experience, you'll have to
   upgrade it to the new one to use this integration.
@@ -21,7 +23,7 @@ Prerequisites:
 
 Press on the Netlify tile and grant Infisical access to your Netlify account.
 
-![integrations netlify authorization](../../images/integrations-netlify-auth.png)
+![integrations netlify authorization](../../images/integrations/netlify/integrations-netlify-auth.png)
 
 <Info>
   If this is your project's first cloud integration, then you'll have to grant
@@ -34,5 +36,37 @@ Press on the Netlify tile and grant Infisical access to your Netlify account.
 
 Select which Infisical environment secrets you want to sync to which Netlify app and context. Lastly, press create integration to start syncing secrets to Netlify.
 
-![integrations netlify](../../images/integrations-netlify-create.png)
-![integrations netlify](../../images/integrations-netlify.png)
+![integrations netlify](../../images/integrations/netlify/integrations-netlify-create.png)
+![integrations netlify](../../images/integrations/netlify/integrations-netlify.png)
+
+  </Tab>
+  <Tab title="Self-Hosted Setup">
+    Using the Netlify integration on a self-hosted instance of Infisical requires configuring an OAuth application in Netlify
+  and registering your instance with it.
+  
+  ## Create an OAuth application in Netlify
+  
+  Navigate to your User settings > Applications > OAuth to create a new OAuth application.
+  
+   ![integrations Netlify config](../../images/integrations/netlify/integrations-netlify-config-user-settings.png) 
+   ![integrations Netlify config](../../images/integrations/netlify/integrations-netlify-config-new-app.png) 
+    
+    Create the OAuth application. As part of the form, set the **Redirect URI** to `https://your-domain.com/integrations/netlify/oauth2/callback`.
+
+   ![integrations Netlify config](../../images/integrations/netlify/integrations-netlify-config-new-app-form.png) 
+
+   ## Add your Netlify OAuth application credentials to Infisical
+   
+   Obtain the **Client ID** and **Secret** for your Netlify OAuth application.
+   
+   ![integrations Netlify config](../../images/integrations/netlify/integrations-netlify-config-credentials.png) 
+   
+   Back in your Infisical instance, add two new environment variables for the credentials of your Netlify OAuth application.
+
+   - `CLIENT_ID_NETLIFY`: The **Client ID** of your Netlify OAuth application.
+   - `CLIENT_SECRET_NETLIFY`: The **Secret** of your Netlify OAuth application.
+   
+  Once added, restart your Infisical instance and use the Netlify integration.
+  </Tab>
+</Tabs>
+

docs/integrations/cloud/vercel.mdx

@@ -3,7 +3,9 @@ title: "Vercel"
 description: "How to sync secrets from Infisical to Vercel"
 ---
 
-Prerequisites:
+<Tabs>
+  <Tab title="Usage">
+  Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 
@@ -15,7 +17,7 @@ Prerequisites:
 
 Press on the Vercel tile and grant Infisical access to your Vercel account.
 
-![integrations vercel authorization](../../images/integrations-vercel-auth.png)
+![integrations vercel authorization](../../images/integrations/vercel/integrations-vercel-auth.png)
 
 <Info>
   If this is your project's first cloud integration, then you'll have to grant
@@ -28,8 +30,8 @@ Press on the Vercel tile and grant Infisical access to your Vercel account.
 
 Select which Infisical environment secrets you want to sync to which Vercel app and environment. Lastly, press create integration to start syncing secrets to Vercel.
 
-![integrations vercel](../../images/integrations-vercel-create.png)
-![integrations vercel](../../images/integrations-vercel.png)
+![integrations vercel](../../images/integrations/vercel/integrations-vercel-create.png)
+![integrations vercel](../../images/integrations/vercel/integrations-vercel.png)
 
 <Info>
   Infisical syncs every envar to Vercel with type `encrypted` unless an existing
@@ -47,3 +49,37 @@ Select which Infisical environment secrets you want to sync to which Vercel app
   `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_SESSION_TOKEN`,
   `AWS_REGION`, and `AWS_DEFAULT_REGION`.
 </Warning>
+  </Tab>
+  <Tab title="Self-Hosted Setup">
+  Using the Vercel integration on a self-hosted instance of Infisical requires configuring an integration in Vercel.
+  and registering your instance with it.
+  
+  ## Create an integration in Vercel
+  
+  Navigate to Integrations > Integration Console to create a new integration.
+  
+   ![integrations Vercel config](../../images/integrations/vercel/integrations-vercel-config-integrations-console.png) 
+   ![integrations Vercel config](../../images/integrations/vercel/integrations-vercel-config-new-app.png) 
+    
+    Create the application. As part of the form, set **Redirect URL** to `https://your-domain.com/integrations/vercel/oauth2/callback`. Also,
+    be sure to set the API Scopes according to the second screenshot below.
+   
+   ![integrations Vercel config](../../images/integrations/vercel/integrations-vercel-config-new-app-form-1.png) 
+   ![integrations Vercel config](../../images/integrations/vercel/integrations-vercel-config-new-app-form-2.png) 
+   
+   ## Add your Vercel integration credentials to Infisical
+   
+   Obtain the **Client (Integration) ID** and **Client (Integration) Secret** for your Vercel integration.
+
+   ![integrations Vercel config](../../images/integrations/vercel/integrations-vercel-config-credentials.png) 
+   
+   Back in your Infisical instance, add two new environment variables for the credentials of your Vercel integration.
+
+   - `CLIENT_ID_VERCEL`: The **Client (Integration) ID** of your Vercel integration.
+   - `CLIENT_SECRET_VERCEL`: The **Client (Integration) Secret** of your Vercel integration.
+   
+  Once added, restart your Infisical instance and use the Vercel integration.
+
+  </Tab>
+</Tabs>
+

docs/integrations/overview.mdx

@@ -31,6 +31,7 @@ Missing an integration? [Throw in a request](https://github.com/Infisical/infisi
 | [AWS Parameter Store](/integrations/cloud/aws-parameter-store) | Cloud                  | Available   |
 | [AWS Secret Manager](/integrations/cloud/aws-secret-manager)   | Cloud                  | Available   |
 | [Azure Key Vault](/integrations/cloud/azure-key-vault)         | Cloud                  | Available   |
+| [GCP Secret Manager](/integrations/cloud/gcp-secret-manager)      | Cloud                  | Available   |
 | [Windmill](/integrations/cloud/windmill)                       | Cloud                  | Available   |
 | [BitBucket](/integrations/cicd/bitbucket)                      | CI/CD                  | Available   |
 | [Codefresh](/integrations/cicd/codefresh)                      | CI/CD                  | Available   |
@@ -53,5 +54,4 @@ Missing an integration? [Throw in a request](https://github.com/Infisical/infisi
 | [Flask](/integrations/frameworks/flask)                        | Framework              | Available   |
 | [Laravel](/integrations/frameworks/laravel)                    | Framework              | Available   |
 | [Ruby on Rails](/integrations/frameworks/rails)                | Framework              | Available   |
-| GCP Secret Manager                                             | Cloud                  | Coming soon |
 | Jenkins                                                        | CI/CD                  | Coming soon |

docs/mint.json

@@ -237,6 +237,7 @@
         "integrations/cloud/checkly",
         "integrations/cloud/hashicorp-vault",
         "integrations/cloud/azure-key-vault",
+        "integrations/cloud/gcp-secret-manager",
         "integrations/cloud/cloud-66",
         "integrations/cloud/windmill",
         "integrations/cicd/githubactions",
@@ -321,12 +322,21 @@
             "api-reference/endpoints/workspaces/rollback-snapshot"
           ]
         },
+        {
+          "group": "Environments",
+          "pages": [
+            "api-reference/endpoints/environments/list",
+            "api-reference/endpoints/environments/create",
+            "api-reference/endpoints/environments/update",
+            "api-reference/endpoints/environments/delete"
+          ]
+        },
         {
           "group": "Secrets",
           "pages": [
-            "api-reference/endpoints/secrets/read",
+            "api-reference/endpoints/secrets/list",
             "api-reference/endpoints/secrets/create",
-            "api-reference/endpoints/secrets/read-one",
+            "api-reference/endpoints/secrets/read",
             "api-reference/endpoints/secrets/update",
             "api-reference/endpoints/secrets/delete",
             "api-reference/endpoints/secrets/versions",

docs/self-hosting/deployment-options/kubernetes-helm.mdx

@@ -111,14 +111,14 @@ frontend:
   replicaCount: 2
   image:
     repository: infisical/frontend
-    tag: "v0.1.3"
+    tag: "v0.26.0" # <--- frontend version 
     pullPolicy: Always
 
 backend:
   replicaCount: 2
   image:
     repository: infisical/backend
-    tag: "v0.1.3"
+    tag: "v0.26.0" # <--- backend version 
     pullPolicy: Always
 
 backendEnvironmentVariables:
@@ -126,7 +126,7 @@ backendEnvironmentVariables:
 
 ingress:
   nginx:
-    enabled: false #<-- if you would like to install nginx along with Infisical
+    enabled: true #<-- if you would like to install nginx along with Infisical
 
 ```
 
@@ -217,4 +217,4 @@ Once installation is complete, you will have to create the first account. No def
 </Info>
 
 ## Related blogs
-- [Set up Infisical in a development cluster](https://iamunnip.hashnode.dev/infisical-open-source-secretops-kubernetes-setup)
+- [Set up Infisical in a development cluster](https://iamunnip.hashnode.dev/infisical-open-source-secretops-kubernetes-setup)

docs/spec.yaml

@@ -1949,6 +1949,8 @@ paths:
               properties:
                 name:
                   example: any
+                tagColor:
+                  example: any
                 slug:
                   example: any
   /api/v2/workspace/tags/{tagId}:

frontend/public/data/frequentConstants.ts

@@ -6,29 +6,30 @@ const integrationSlugNameMapping: Mapping = {
   "azure-key-vault": "Azure Key Vault",
   "aws-parameter-store": "AWS Parameter Store",
   "aws-secret-manager": "AWS Secret Manager",
-  heroku: "Heroku",
-  vercel: "Vercel",
-  netlify: "Netlify",
-  github: "GitHub",
-  gitlab: "GitLab",
-  render: "Render",
+  "heroku": "Heroku",
+  "vercel": "Vercel",
+  "netlify": "Netlify",
+  "github": "GitHub",
+  "gitlab": "GitLab",
+  "render": "Render",
   "laravel-forge": "Laravel Forge",
-  railway: "Railway",
-  flyio: "Fly.io",
-  circleci: "CircleCI",
-  travisci: "TravisCI",
-  supabase: "Supabase",
-  checkly: "Checkly",
+  "railway": "Railway",
+  "flyio": "Fly.io",
+  "circleci": "CircleCI",
+  "travisci": "TravisCI",
+  "supabase": "Supabase",
+  "checkly": "Checkly",
   "terraform-cloud": "Terraform Cloud",
   "teamcity": "TeamCity",
   "hashicorp-vault": "Vault",
   "cloudflare-pages": "Cloudflare Pages",
   "codefresh": "Codefresh",
   "digital-ocean-app-platform": "Digital Ocean App Platform",
-  bitbucket: "BitBucket",
+  "bitbucket": "BitBucket",
   "cloud-66": "Cloud 66",
-  northflank: "Northflank",
-  "windmill": "Windmill"
+  "northflank": "Northflank",
+  "windmill": "Windmill",
+  "gcp-secret-manager": "GCP Secret Manager"
 }
 
 const envMapping: Mapping = {

frontend/src/components/AddTagPopoverContent/AddTagPopoverContent.tsx

@@ -0,0 +1,78 @@
+
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Checkbox, PopoverContent } from "@app/components/v2";
+
+import { WsTag } from "../../hooks/api/tags/types";
+
+interface Props {
+    wsTags: WsTag[] | undefined;
+    secKey: string;
+    selectedTagIds: Record<string, boolean>;
+    handleSelectTag: (wsTag: WsTag) => void;
+    handleTagOnMouseEnter: (wsTag: WsTag) => void;
+    handleTagOnMouseLeave: () => void;
+    checkIfTagIsVisible: (wsTag: WsTag) => boolean;
+    handleOnCreateTagOpen: () => void
+}
+
+const AddTagPopoverContent = ({
+    wsTags,
+    secKey,
+    selectedTagIds,
+    handleSelectTag,
+    handleTagOnMouseEnter,
+    handleTagOnMouseLeave,
+    checkIfTagIsVisible,
+    handleOnCreateTagOpen
+}: Props) => {
+    return (
+        <PopoverContent
+            side="left"
+            className="relative max-h-96 w-auto min-w-[200px] p-2 overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 text-bunker-200"
+            hideCloseBtn
+        >
+            <div className=" text-center text-sm font-medium text-bunker-200">
+                Add tags to {secKey || "this secret"}
+            </div>
+            <div className="absolute left-0 w-full border-mineshaft-600 border-t mt-2" />
+            <div className="flex flex-col space-y-1.5">
+                {wsTags?.map((wsTag: WsTag) => (
+                    <div key={`tag-${wsTag._id}`} className="mt-4 h-[32px] relative flex items-center  justify-start hover:border-mineshaft-600 hover:border   hover:bg-mineshaft-700  p-2 rounded-md  hover:text-bunker-200 bg-none"
+                        onClick={() => handleSelectTag(wsTag)}
+                        onMouseEnter={() => handleTagOnMouseEnter(wsTag)}
+                        onMouseLeave={() => handleTagOnMouseLeave()}
+                        tabIndex={0} role="button"
+                        onKeyDown={() => { }}>
+                        {
+
+                            (checkIfTagIsVisible(wsTag) || selectedTagIds?.[wsTag.slug]) && <Checkbox
+                                id="autoCapitalization"
+                                isChecked={selectedTagIds?.[wsTag.slug]}
+                                className="absolute top-[50%] translate-y-[-50%] left-[10px] "
+                                checkIndicatorBg={`${!selectedTagIds?.[wsTag.slug] ? "text-transparent" : "text-mineshaft-800"}`}
+                            />
+                        }
+                        <div className="ml-7 flex items-center gap-3">
+                            <div className="w-[10px] h-[10px] rounded-full" style={{ background: wsTag?.tagColor ? wsTag.tagColor : "#bec2c8" }}> </div>
+                            <span >
+                                {wsTag.slug}
+                            </span>
+                        </div>
+                    </div>
+                ))}
+                <div
+                    className="h-[32px] relative flex items-center cursor-pointer   justify-start  border-mineshaft-600 border   bg-mineshaft-700 p-2 rounded-md  hover:text-bunker-200 bg-none"
+                    onClick={() => handleOnCreateTagOpen()}
+                    tabIndex={0} role="button"
+                    onKeyDown={() => { }}>
+                    <FontAwesomeIcon icon={faPlus} className="ml-1 mr-2" />
+                    <span> Add new tag</span>
+                </div>
+            </div>
+        </PopoverContent>
+    )
+}
+
+export default AddTagPopoverContent

frontend/src/components/utilities/isValidHexColor.ts

@@ -0,0 +1,5 @@
+export  const isValidHexColor = (hexColor: string) => {
+    const hexColorPattern = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+  
+    return hexColorPattern.test(hexColor);
+}

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

@@ -8,11 +8,12 @@ export type CheckboxProps = Omit<
   CheckboxPrimitive.CheckboxProps,
   "checked" | "disabled" | "required"
 > & {
-  children: ReactNode;
+  children?: ReactNode;
   id: string;
   isDisabled?: boolean;
   isChecked?: boolean;
   isRequired?: boolean;
+  checkIndicatorBg?: string | undefined;
 };
 
 export const Checkbox = ({
@@ -22,6 +23,7 @@ export const Checkbox = ({
   isChecked,
   isDisabled,
   isRequired,
+  checkIndicatorBg,
   ...props
 }: CheckboxProps): JSX.Element => {
   return (
@@ -39,7 +41,7 @@ export const Checkbox = ({
         {...props}
         id={id}
       >
-        <CheckboxPrimitive.Indicator className="text-bunker-800">
+        <CheckboxPrimitive.Indicator className={`${checkIndicatorBg || "text-bunker-800"}`}>
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -1,36 +1,35 @@
 /* eslint-disable react/no-danger */
-import { HTMLAttributes } from "react";
+import { forwardRef, HTMLAttributes } from "react";
 import ContentEditable from "react-contenteditable";
-import sanitizeHtml from "sanitize-html";
+import sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
 
 import { useToggle } from "@app/hooks";
 
 const REGEX = /\${([^}]+)}/g;
-const stripSpanTags = (str: string) => str.replace(/<\/?span[^>]*>/g, "");
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
-  let isHtml = false;
   for (let i = 0; i < str.length; i += 1) {
     const char = str.at(i);
-
-    if (char === "<" || char === ">") {
-      isHtml = char === "<";
-      finalStr += char;
-    } else if (!isHtml && char !== "\n") {
-      finalStr += "&#8226;";
-    } else {
-      finalStr += char;
-    }
+    finalStr += char === "\n" ? "\n" : "&#8226;";
   }
   return finalStr;
 };
 
-const syntaxHighlight = (orgContent?: string | null, isVisible?: boolean) => {
-  if (orgContent === "") return "EMPTY";
-  if (!orgContent) return "missing";
-  if (!isVisible) return replaceContentWithDot(orgContent);
-  const content = stripSpanTags(orgContent);
-  const newContent = content.replace(
+const sanitizeConf = {
+  allowedTags: ["span"],
+  disallowedTagsMode: "escape" as DisallowedTagsModes
+};
+
+const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
+  if (content === "") return "EMPTY";
+  if (!content) return "missing";
+  if (!isVisible) return replaceContentWithDot(content);
+
+  const sanitizedContent = sanitizeHtml(
+    content.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
+    sanitizeConf
+  );
+  const newContent = sanitizedContent.replace(
     REGEX,
     (_a, b) =>
       `<span class="ph-no-capture text-yellow">&#36;&#123;<span class="ph-no-capture text-yello-200/80">${b}</span>&#125;</span>`
@@ -39,57 +38,58 @@ const syntaxHighlight = (orgContent?: string | null, isVisible?: boolean) => {
   return newContent;
 };
 
-const sanitizeConf = {
-  allowedTags: ["div", "span", "br", "p"]
-};
-
 type Props = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur"> & {
   value?: string | null;
   isVisible?: boolean;
   isDisabled?: boolean;
-  onChange?: (val: string, html: string) => void;
-  onBlur?: (sanitizedHtml: string) => void;
+  onChange?: (val: string) => void;
+  onBlur?: () => void;
 };
 
-export const SecretInput = ({
-  value,
-  isVisible,
-  onChange,
-  onBlur,
-  isDisabled,
-  ...props
-}: Props) => {
-  const [isSecretFocused, setIsSecretFocused] = useToggle();
+export const SecretInput = forwardRef<HTMLDivElement, Props>(
+  ({ value, isVisible, onChange, onBlur, isDisabled, ...props }, ref) => {
+    const [isSecretFocused, setIsSecretFocused] = useToggle();
 
-  return (
-    <div
-      className="thin-scrollbar relative overflow-y-auto overflow-x-hidden"
-      style={{ maxHeight: `${21 * 7}px` }}
-    >
+    return (
       <div
-        dangerouslySetInnerHTML={{
-          __html: syntaxHighlight(value, isVisible || isSecretFocused)
-        }}
-        className={`absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all ${
-          !value && value !== "" && "italic text-red-600/70"
-        }`}
-      />
-      <ContentEditable
-        className="relative z-10 h-full w-full text-ellipsis whitespace-pre-line  break-all text-transparent caret-white outline-none"
-        role="textbox"
-        onChange={(evt) => {
-          if (onChange) onChange(evt.currentTarget.innerText.trim(), evt.currentTarget.innerHTML);
-        }}
-        onFocus={() => setIsSecretFocused.on()}
-        disabled={isDisabled}
-        spellCheck={false}
-        onBlur={(evt) => {
-          if (onBlur) onBlur(sanitizeHtml(evt.currentTarget.innerHTML || "", sanitizeConf));
-          setIsSecretFocused.off();
-        }}
-        html={isVisible || isSecretFocused ? value || "" : syntaxHighlight(value, false)}
-        {...props}
-      />
-    </div>
-  );
-};
+        className="thin-scrollbar relative overflow-y-auto overflow-x-hidden"
+        style={{ maxHeight: `${21 * 7}px` }}
+      >
+        <div
+          dangerouslySetInnerHTML={{
+            __html: syntaxHighlight(value, isVisible || isSecretFocused)
+          }}
+          className={`absolute top-0 left-0 z-0 h-full w-full inline-block text-ellipsis whitespace-pre-wrap break-all ${
+            !value && value !== "" && "italic text-red-600/70"
+          }`}
+          ref={ref}
+        />
+        <ContentEditable
+          className="relative z-10 h-full w-full text-ellipsis inline-block whitespace-pre-wrap  break-all text-transparent caret-white outline-none"
+          role="textbox"
+          onChange={(evt) => {
+            if (onChange) onChange(evt.currentTarget.innerText.trim());
+          }}
+          onFocus={() => setIsSecretFocused.on()}
+          disabled={isDisabled}
+          spellCheck={false}
+          onBlur={() => {
+            if (onBlur) onBlur();
+            setIsSecretFocused.off();
+          }}
+          html={
+            isVisible || isSecretFocused
+              ? sanitizeHtml(
+                  value?.replaceAll("<", "&lt;").replaceAll(">", "&gt;") || "",
+                  sanitizeConf
+                )
+              : syntaxHighlight(value, false)
+          }
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+SecretInput.displayName = "SecretInput";

frontend/src/components/v2/Tag/Tag.tsx

@@ -1,19 +1,14 @@
 import { ReactNode } from "react";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
 type Props = {
   children: ReactNode;
   className?: string;
-  onClose?: () => void;
-  color?: string;
-  isDisabled?: boolean;
 } & VariantProps<typeof tagVariants>;
 
 const tagVariants = cva(
-  "inline-flex items-center whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200",
+  "inline-flex items-center whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200 rounded-[30px] text-gray-400 ",
   {
     variants: {
       colorSchema: {
@@ -32,25 +27,10 @@ export const Tag = ({
   children,
   className,
   colorSchema = "gray",
-  color,
-  isDisabled,
-  size = "sm",
-  onClose
-}: Props) => (
+  size = "sm" }: Props) => (
   <div
     className={twMerge(tagVariants({ colorSchema, className, size }))}
-    style={{ backgroundColor: color }}
   >
     {children}
-    {onClose && (
-      <button
-        type="button"
-        onClick={onClose}
-        disabled={isDisabled}
-        className="ml-2 flex items-center justify-center"
-      >
-        <FontAwesomeIcon icon={faClose} />
-      </button>
-    )}
   </div>
 );

frontend/src/const.ts

@@ -51,3 +51,69 @@ const plansProd: Mapping = {
 export const plans = plansProd || plansDev;
 
 export const leaveConfirmDefaultMessage = "Your changes will be lost if you leave the page. Are you sure you want to continue?";
+
+export const secretTagsColors = [
+  {
+    id: 1,
+    hex: "#bec2c8",
+    rgba: "rgb(128,128,128, 0.8)",
+    name: "Grey",
+    selected: true
+  },
+  {
+    id: 2,
+    hex: "#95a2b3",
+    rgba: "rgb(0,0,255, 0.8)",
+    name: "blue",
+    selected: false
+  },
+  {
+    id: 3,
+    hex: "#5e6ad2",
+    rgba: "rgb(128,0,128, 0.8)",
+    name: "Purple",
+    selected: false
+  },
+  {
+    id: 4,
+    hex: "#26b5ce",
+    rgba: "rgb(0,128,128, 0.8)",
+    name: "Teal",
+    selected: false
+  },
+  {
+    id: 5,
+    hex: "#4cb782",
+    rgba: "rgb(0,128,0, 0.8)",
+    name: "Green",
+    selected: false
+  },
+  {
+    id: 6,
+    hex: "#f2c94c",
+    rgba: "rgb(255,255,0, 0.8)",
+    name: "Yellow",
+    selected: false
+  },
+  {
+    id: 7,
+    hex: "#f2994a",
+    rgba: "rgb(128,128,0, 0.8)",
+    name: "Orange",
+    selected: false
+  },
+  {
+    id: 8,
+    hex: "#f7c8c1",
+    rgba: "rgb(128,0,0, 0.8)",
+    name: "Pink",
+    selected: false
+  },
+  {
+    id: 9,
+    hex: "#eb5757",
+    rgba: "rgb(255,0,0, 0.8)",
+    name: "Red",
+    selected: false
+  },
+]