Merge pull request #897 from akhilmhdh/fix/sec-v3-fail

fix: moved backend get sec to v2 for dashboard

backend/package-lock.json

@@ -59,7 +59,7 @@
         "typescript": "^4.9.3",
         "utility-types": "^3.10.0",
         "winston": "^3.8.2",
-        "winston-loki": "^6.0.6"
+        "winston-loki": "^6.0.7"
       },
       "devDependencies": {
         "@jest/globals": "^29.3.1",
@@ -5761,11 +5761,6 @@
       "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
       "dev": true
     },
-    "node_modules/@types/long": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
-      "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
-    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -10206,9 +10201,9 @@
       }
     },
     "node_modules/long": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
     },
     "node_modules/lru_map": {
       "version": "0.3.3",
@@ -14446,9 +14441,9 @@
       }
     },
     "node_modules/protobufjs": {
-      "version": "6.11.3",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.3.tgz",
-      "integrity": "sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==",
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.4.tgz",
+      "integrity": "sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==",
       "hasInstallScript": true,
       "dependencies": {
         "@protobufjs/aspromise": "^1.1.2",
@@ -14461,13 +14456,11 @@
         "@protobufjs/path": "^1.1.2",
         "@protobufjs/pool": "^1.1.0",
         "@protobufjs/utf8": "^1.1.0",
-        "@types/long": "^4.0.1",
         "@types/node": ">=13.7.0",
-        "long": "^4.0.0"
+        "long": "^5.0.0"
       },
-      "bin": {
-        "pbjs": "bin/pbjs",
-        "pbts": "bin/pbts"
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
     "node_modules/proxy-addr": {
@@ -15999,6 +15992,11 @@
         "querystring": "0.2.0"
       }
     },
+    "node_modules/url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "node_modules/url/node_modules/punycode": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
@@ -16193,13 +16191,14 @@
       }
     },
     "node_modules/winston-loki": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/winston-loki/-/winston-loki-6.0.6.tgz",
-      "integrity": "sha512-cll+nv5T/b9uJXqca0N2WKL1JJNuJND9E6WOOAuSGkZ44L9VQ/QK9F+/5VKbv6LIP9p0nvPSOYxtACCDb/9iWw==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/winston-loki/-/winston-loki-6.0.7.tgz",
+      "integrity": "sha512-6psEy428ckTXP/ni+DrA4vas2Ldt/43TFm7beoVExKLlTyEwu7zu2c8GBGbnxrdzRQAxXUfom2sK7zr4QP8y5g==",
       "dependencies": {
         "async-exit-hook": "2.0.1",
         "btoa": "^1.2.1",
-        "protobufjs": "^6.8.8",
+        "protobufjs": "^7.2.4",
+        "url-polyfill": "^1.1.12",
         "winston-transport": "^4.3.0"
       },
       "optionalDependencies": {
@@ -21254,11 +21253,6 @@
       "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
       "dev": true
     },
-    "@types/long": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
-      "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
-    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -24612,9 +24606,9 @@
       }
     },
     "long": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
     },
     "lru_map": {
       "version": "0.3.3",
@@ -27730,9 +27724,9 @@
       }
     },
     "protobufjs": {
-      "version": "6.11.3",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.3.tgz",
-      "integrity": "sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==",
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.4.tgz",
+      "integrity": "sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==",
       "requires": {
         "@protobufjs/aspromise": "^1.1.2",
         "@protobufjs/base64": "^1.1.2",
@@ -27744,9 +27738,8 @@
         "@protobufjs/path": "^1.1.2",
         "@protobufjs/pool": "^1.1.0",
         "@protobufjs/utf8": "^1.1.0",
-        "@types/long": "^4.0.1",
         "@types/node": ">=13.7.0",
-        "long": "^4.0.0"
+        "long": "^5.0.0"
       }
     },
     "proxy-addr": {
@@ -28863,6 +28856,11 @@
         }
       }
     },
+    "url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
@@ -29012,14 +29010,15 @@
       }
     },
     "winston-loki": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/winston-loki/-/winston-loki-6.0.6.tgz",
-      "integrity": "sha512-cll+nv5T/b9uJXqca0N2WKL1JJNuJND9E6WOOAuSGkZ44L9VQ/QK9F+/5VKbv6LIP9p0nvPSOYxtACCDb/9iWw==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/winston-loki/-/winston-loki-6.0.7.tgz",
+      "integrity": "sha512-6psEy428ckTXP/ni+DrA4vas2Ldt/43TFm7beoVExKLlTyEwu7zu2c8GBGbnxrdzRQAxXUfom2sK7zr4QP8y5g==",
       "requires": {
         "async-exit-hook": "2.0.1",
         "btoa": "^1.2.1",
-        "protobufjs": "^6.8.8",
+        "protobufjs": "^7.2.4",
         "snappy": "7.1.1",
+        "url-polyfill": "^1.1.12",
         "winston-transport": "^4.3.0"
       },
       "dependencies": {

backend/package.json

@@ -50,7 +50,7 @@
     "typescript": "^4.9.3",
     "utility-types": "^3.10.0",
     "winston": "^3.8.2",
-    "winston-loki": "^6.0.6"
+    "winston-loki": "^6.0.7"
   },
   "name": "infisical-api",
   "version": "1.0.0",

backend/spec.json

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

backend/src/controllers/v1/integrationController.ts

@@ -8,6 +8,7 @@ import { getFolderByPath } from "../../services/FolderService";
 import { BadRequestError } from "../../utils/errors";
 import { EEAuditLogService } from "../../ee/services";
 import { EventType } from "../../ee/models";
+import { syncSecretsToActiveIntegrationsQueue } from "../../queues/integrations/syncSecretsToThirdPartyServices";
 
 /**
  * Create/initialize an (empty) integration for integration authorization
@@ -76,7 +77,7 @@ export const createIntegration = async (req: Request, res: Response) => {
       })
     });
   }
-  
+
   await EEAuditLogService.createAuditLog(
     req.authData,
     {
@@ -218,3 +219,15 @@ export const deleteIntegration = async (req: Request, res: Response) => {
     integration
   });
 };
+
+// Will trigger sync for all integrations within the given env and workspace id 
+export const manualSync = async (req: Request, res: Response) => {
+  const { workspaceId, environment } = req.body;
+  syncSecretsToActiveIntegrationsQueue({
+    workspaceId,
+    environment
+  })
+
+  res.status(200).send()
+};
+

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,14 +953,14 @@ export const getSecrets = async (req: Request, res: Response) => {
       channel,
       ipAddress: req.realIP
     }));
-  
+
   await EEAuditLogService.createAuditLog(
     req.authData,
     {
       type: EventType.GET_SECRETS,
       metadata: {
         environment,
-        secretPath: secretPath as string,
+        secretPath: (secretPath as string) ?? "/",
         numberOfSecrets: secrets.length
       }
     },
@@ -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

@@ -11,7 +11,7 @@ import {
   IServiceTokenData,
   Secret,
   SecretBlindIndexData,
-  ServiceTokenData,
+  ServiceTokenData
 } from "../models";
 import { EventType, SecretVersion } from "../ee/models";
 import {
@@ -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({
@@ -463,8 +465,8 @@ export const createSecretHelper = async ({
   });
 
   const postHogClient = await TelemetryService.getPostHogClient();
-  
-  if (postHogClient && (metadata?.source !== "signup")) {
+
+  if (postHogClient && metadata?.source !== "signup") {
     postHogClient.capture({
       event: "secrets added",
       distinctId: await TelemetryService.getDistinctId({
@@ -549,7 +551,7 @@ export const getSecretsHelper = async ({
       channel: authData.userAgentType,
       ipAddress: authData.ipAddress
     }));
-  
+
   await EEAuditLogService.createAuditLog(
     authData,
     {
@@ -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;
@@ -659,7 +673,7 @@ export const getSecretHelper = async ({
       ipAddress: authData.ipAddress
     }));
 
-    await EEAuditLogService.createAuditLog(
+  await EEAuditLogService.createAuditLog(
     authData,
     {
       type: EventType.GET_SECRET,
@@ -680,7 +694,7 @@ export const getSecretHelper = async ({
 
   if (postHogClient) {
     postHogClient.capture({
-      event: "secrets pull",
+      event: "secrets pulled",
       distinctId: await TelemetryService.getDistinctId({
         authData
       }),
@@ -824,8 +838,8 @@ export const updateSecretHelper = async ({
       channel: authData.userAgentType,
       ipAddress: authData.ipAddress
     }));
-  
-    await EEAuditLogService.createAuditLog(
+
+  await EEAuditLogService.createAuditLog(
     authData,
     {
       type: EventType.UPDATE_SECRET,
@@ -908,14 +922,14 @@ export const deleteSecretHelper = async ({
   if (type === SECRET_SHARED) {
     secrets = await Secret.find({
       secretBlindIndex,
-      workspaceId: new Types.ObjectId(workspaceId),
+      workspace: new Types.ObjectId(workspaceId),
       environment,
       folder: folderId
     }).lean();
 
     secret = await Secret.findOneAndDelete({
       secretBlindIndex,
-      workspaceId: new Types.ObjectId(workspaceId),
+      workspace: new Types.ObjectId(workspaceId),
       environment,
       type,
       folder: folderId
@@ -931,7 +945,7 @@ export const deleteSecretHelper = async ({
     secret = await Secret.findOneAndDelete({
       secretBlindIndex,
       folder: folderId,
-      workspaceId: new Types.ObjectId(workspaceId),
+      workspace: new Types.ObjectId(workspaceId),
       environment,
       type,
       ...getAuthDataPayloadUserObj(authData)
@@ -1088,7 +1102,8 @@ const recursivelyExpandSecret = async (
 
   let interpolatedValue = interpolatedSec[key];
   if (!interpolatedValue) {
-    throw new Error(`Couldn't find referenced value - ${key}`);
+    console.error(`Couldn't find referenced value - ${key}`);
+    return "";
   }
 
   const refs = interpolatedValue.match(INTERPOLATION_SYNTAX_REG);

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/queues/integrations/syncSecretsToThirdPartyServices.ts

@@ -28,7 +28,7 @@ syncSecretsToThirdPartyServices.process(async (job: Job) => {
 
   // for each workspace integration, sync/push secrets
   // to that integration
-  for await (const integration of integrations) {
+  for (const integration of integrations) {
     // get workspace, environment (shared) secrets
     const secrets = await BotService.getSecrets({
       workspaceId: integration.workspace,
@@ -46,7 +46,7 @@ syncSecretsToThirdPartyServices.process(async (job: Job) => {
     });
 
     // sync secrets to integration
-    return await syncSecrets({
+    await syncSecrets({
       integration,
       integrationAuth,
       secrets,

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

@@ -4,6 +4,7 @@ import {
   requireAuth,
   requireIntegrationAuth,
   requireIntegrationAuthorizationAuth,
+  requireWorkspaceAuth,
   validateRequest,
 } from "../../middleware";
 import {
@@ -73,4 +74,19 @@ router.delete(
   integrationController.deleteIntegration
 );
 
+router.post(
+  "/manual-sync",
+  requireAuth({
+    acceptedAuthModes: [AuthMode.JWT]
+  }),
+  requireWorkspaceAuth({
+    acceptedRoles: [ADMIN, MEMBER],
+    locationWorkspaceId: "body",
+  }),
+  body("environment").isString().exists().trim(),
+  body("workspaceId").exists().trim(),
+  validateRequest,
+  integrationController.manualSync
+);
+
 export default router;

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

cli/packages/api/api.go

@@ -57,14 +57,14 @@ func CallLogin1V2(httpClient *resty.Client, request GetLoginOneV2Request) (GetLo
 		SetResult(&loginOneV2Response).
 		SetHeader("User-Agent", USER_AGENT).
 		SetBody(request).
-		Post(fmt.Sprintf("%v/v2/auth/login1", config.INFISICAL_URL))
+		Post(fmt.Sprintf("%v/v3/auth/login1", config.INFISICAL_URL))
 
 	if err != nil {
-		return GetLoginOneV2Response{}, fmt.Errorf("CallLogin1V2: Unable to complete api request [err=%s]", err)
+		return GetLoginOneV2Response{}, fmt.Errorf("CallLogin1V3: Unable to complete api request [err=%s]", err)
 	}
 
 	if response.IsError() {
-		return GetLoginOneV2Response{}, fmt.Errorf("CallLogin1V2: Unsuccessful response: [response=%s]", response)
+		return GetLoginOneV2Response{}, fmt.Errorf("CallLogin1V3: Unsuccessful response: [response=%s]", response)
 	}
 
 	return loginOneV2Response, nil
@@ -115,7 +115,7 @@ func CallLogin2V2(httpClient *resty.Client, request GetLoginTwoV2Request) (GetLo
 		SetResult(&loginTwoV2Response).
 		SetHeader("User-Agent", USER_AGENT).
 		SetBody(request).
-		Post(fmt.Sprintf("%v/v2/auth/login2", config.INFISICAL_URL))
+		Post(fmt.Sprintf("%v/v3/auth/login2", config.INFISICAL_URL))
 
 	cookies := response.Cookies()
 	// Find a cookie by name
@@ -134,11 +134,11 @@ func CallLogin2V2(httpClient *resty.Client, request GetLoginTwoV2Request) (GetLo
 	}
 
 	if err != nil {
-		return GetLoginTwoV2Response{}, fmt.Errorf("CallLogin2V2: Unable to complete api request [err=%s]", err)
+		return GetLoginTwoV2Response{}, fmt.Errorf("CallLogin2V3: Unable to complete api request [err=%s]", err)
 	}
 
 	if response.IsError() {
-		return GetLoginTwoV2Response{}, fmt.Errorf("CallLogin2V2: Unsuccessful response: [response=%s]", response)
+		return GetLoginTwoV2Response{}, fmt.Errorf("CallLogin2V3: Unsuccessful response: [response=%s]", response)
 	}
 
 	return loginTwoV2Response, nil

cli/packages/cmd/secrets.go

@@ -64,11 +64,22 @@ var secretsCmd = &cobra.Command{
 			util.HandleError(err, "Unable to parse flag")
 		}
 
+		secretOverriding, err := cmd.Flags().GetBool("secret-overriding")
+		if err != nil {
+			util.HandleError(err, "Unable to parse flag")
+		}
+
 		secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath, IncludeImport: includeImports})
 		if err != nil {
 			util.HandleError(err)
 		}
 
+		if secretOverriding {
+			secrets = util.OverrideSecrets(secrets, util.SECRET_TYPE_PERSONAL)
+		} else {
+			secrets = util.OverrideSecrets(secrets, util.SECRET_TYPE_SHARED)
+		}
+
 		if shouldExpandSecrets {
 			secrets = util.ExpandSecrets(secrets, infisicalToken)
 		}
@@ -641,6 +652,7 @@ func init() {
 	secretsGetCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
 	secretsCmd.AddCommand(secretsGetCmd)
 
+	secretsCmd.Flags().Bool("secret-overriding", true, "Prioritizes personal secrets, if any, with the same name over shared secrets")
 	secretsCmd.AddCommand(secretsSetCmd)
 	secretsSetCmd.Flags().String("path", "/", "get secrets within a folder path")
 

docs/self-hosting/configuration/redis.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Configure Redis"
-description: "How to add Redis to your self-hosted Infisical."
+description: "Learn to configure Redis with your self hosted Infisical"
 ---
 
 ## Why Redis?
@@ -8,7 +8,7 @@ As the features and use case of Infisical have grown, the need for a fast and re
 By adding Redis to Infisical, we can now support more complex workflows such as queuing system to run long running asynchronous tasks, cron jobs, and access reliable cache to speed up frequently used resources. 
 
 <Info>
-  Starting with Infisical version v0.XX.X, Redis will be required to fully use Infisical
+  Starting with Infisical version v0.31.0, Redis will be required to fully use Infisical
 </Info>
 
 ### Adding Redis to your self hosted instance of Infisical
@@ -51,8 +51,12 @@ To add Redis to your self hosted instance, follow the instructions for the deplo
     ```
     wget -O docker-compose.yml https://raw.githubusercontent.com/Infisical/infisical/main/docker-compose.yml
     ```
+    2. Add Redis environment variable to your .env file
+    ```.env .env
+      REDIS_URL=redis://redis:6379
+    ```
 
-    2. Restart your docker compose services 
+    3. Restart your docker compose services 
   </Tab>
   <Tab title="Standalone Docker image">
     This standalone version of Infisical does not have an internal Redis service. To configure Redis with your Infisical instance, you must connect to a external Redis service by setting the connection string as an environment variable.
@@ -73,4 +77,7 @@ To add Redis to your self hosted instance, follow the instructions for the deplo
 
     Redis environment variable name: `REDIS_URL`
   </Tab>
-</Tabs>
+</Tabs>
+
+## Support 
+If you have questions or need support, please join our [slack channel](https://infisical-users.slack.com) and one of our teammates will be happy to guide you.

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
 
 ```
 
@@ -214,4 +214,7 @@ Allow 3-5 minutes for the deployment to complete. Once done, you should now be a
   
 <Info>
 Once installation is complete, you will have to create the first account. No default account is provided.
-</Info>
+</Info>
+
+## Related blogs
+- [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/Dockerfile

@@ -57,7 +57,8 @@ COPY --chown=nextjs:nodejs --chmod=555 scripts ./scripts
 COPY --from=builder /app/public ./public
 RUN chown nextjs:nodejs ./public/data
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs --chmod=777 /app/.next/static ./.next/static
+RUN chmod -R 777 /app/.next/server
 
 USER nextjs
 

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
+  },
+]

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

@@ -46,6 +46,7 @@ const fetchProjectEncryptedSecrets = async (
       secretPath
     }
   });
+  
   return data.secrets;
 };
 
@@ -344,4 +345,4 @@ export const useCreateSecret = () => {
       );
     }
   });
-};
+};

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

@@ -7,7 +7,7 @@ import {
   CreateTagRes,
   DeleteTagDTO,
   DeleteWsTagRes,
-  UserWsTags
+  UserWsTags,
 } from "./types";
 
 const workspaceTags = {
@@ -30,13 +30,15 @@ export const useGetWsTags = (workspaceID: string) => {
   });
 }
 
+
 export const useCreateWsTag = () => {
   const queryClient = useQueryClient();
 
   return useMutation<CreateTagRes, {}, CreateTagDTO>({
-    mutationFn: async ({ workspaceID, tagName, tagSlug }) => {
+    mutationFn: async ({ workspaceID, tagName, tagColor, tagSlug }) => {
       const { data } = await apiRequest.post(`/api/v2/workspace/${workspaceID}/tags`, {
         name: tagName,
+        tagColor: tagColor || "",
         slug: tagSlug
       })
       return data;
@@ -47,6 +49,7 @@ export const useCreateWsTag = () => {
   });
 };
 
+
 export const useDeleteWsTag = () => {
   const queryClient = useQueryClient();
 

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

@@ -4,6 +4,7 @@ export type WsTag = {
   _id: string;
   name: string;
   slug: string;
+  tagColor?: string;
   workspace: string;
   createdAt: string;
   updatedAt: string;
@@ -16,6 +17,7 @@ export type CreateTagDTO = {
   workspaceID: string;
   tagSlug: string;
   tagName: string;
+  tagColor: string;
 };
 
 export type CreateTagRes = {
@@ -23,6 +25,7 @@ export type CreateTagRes = {
   slug: string;
   workspace: string;
   createdAt: string;
+  tagColor?: string;
   user: string;
   _id: string;
 };
@@ -36,4 +39,19 @@ export type DeleteWsTagRes = {
   createdAt: string;
   user: string;
   _id: string;
-};
+};
+
+export type SecretTags = { 
+  id: string;  
+  _id: string;
+  slug: string; 
+  tagColor: string;
+}
+
+export type TagColor  =  {
+  id: number;
+  hex: string
+  rgba: string
+  name: string
+  selected: boolean
+}

frontend/src/pages/org/[id]/secret-scanning/index.tsx

@@ -41,7 +41,7 @@ export default function SecretScanning() {
 
   const generateNewIntegrationSession = async () => {
     const session = await createNewIntegrationSession(String(localStorage.getItem("orgData.id")))
-    router.push(`https://github.com/apps/infisical-radar-dev/installations/new?state=${session.sessionId}`)
+    router.push(`https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`)
   }
 
   return (

frontend/src/styles/globals.css

@@ -107,6 +107,31 @@
     @apply bg-primary-400;
   }
 }
+.tags-conic-bg {
+  background: conic-gradient(rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));
+}
+
+.show-tags {
+  transform: translateY(10px);
+  transition: all 0.2s;
+  opacity: 1;
+}
+.hide-tags {
+  transform: translateY(-20px);
+  transition: all 0.2s;
+  opacity: 0;
+}
+
+.show-hex-input {
+  transform: translateY(-33px);
+  transition: all 0.2s;
+  opacity: 1;
+}
+.hide-hex-input {
+  transform: translateY(20px);
+  transition: all 0.2s;
+  opacity: 0;
+}
 
 @import "@fontsource/inter/400.css";
 @import "@fontsource/inter/500.css";

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -297,6 +297,7 @@ export const DashboardPage = () => {
     resolver: yupResolver(schema)
   });
 
+
   const {
     register,
     control,
@@ -513,11 +514,12 @@ export const DashboardPage = () => {
   }, []);
 
   const onCreateWsTag = useCallback(
-    async (tagName: string) => {
+    async (tagName: string, tagColor: string) => {
       try {
         await createWsTag({
           workspaceID: workspaceId,
           tagName,
+          tagColor,
           tagSlug: tagName.replace(" ", "_")
         });
         handlePopUpClose("addTag");

frontend/src/views/DashboardPage/DashboardPage.utils.ts

@@ -58,7 +58,8 @@ const secretSchema = yup.object({
     yup.object({
       _id: yup.string().required(),
       name: yup.string().required(),
-      slug: yup.string().required()
+      slug: yup.string().required(),
+      tagColor: yup.string().nullable(),
     })
   ),
   overrideAction: yup.string().notRequired().oneOf(Object.values(SecretActionType)),

frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx

@@ -1,11 +1,21 @@
+import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import {
+  faCheck
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { Button, FormControl, Input, ModalClose } from "@app/components/v2";
+import { Button, FormControl, Input, ModalClose, Tooltip } from "@app/components/v2";
+
+import { isValidHexColor } from "../../../../components/utilities/isValidHexColor";
+import { secretTagsColors } from "../../../../const"
+import { TagColor } from "../../../../hooks/api/tags/types";
+
 
 type Props = {
-  onCreateTag: (tagName: string) => Promise<void>;
+  onCreateTag: (tagName: string, tagColor: string) => Promise<void>;
 };
 
 const createTagSchema = yup.object({
@@ -23,11 +33,62 @@ export const CreateTagModal = ({ onCreateTag }: Props): JSX.Element => {
     resolver: yupResolver(createTagSchema)
   });
 
+  const [tagsColors] = useState<TagColor[]>(secretTagsColors)
+  const [selectedTagColor, setSelectedTagColor] = useState<TagColor>(tagsColors[0])
+  const [showHexInput, setShowHexInput] = useState<boolean>(false)
+  const [tagColor, setTagColor] = useState<string>("")
+
+
   const onFormSubmit = async ({ name }: FormData) => {
-    await onCreateTag(name);
+    await onCreateTag(name, tagColor);
     reset();
   };
 
+  useEffect(() => {
+    const clonedTagColors = [...tagsColors]
+    const selectedTagBgColor = clonedTagColors.find($tagColor => $tagColor.selected);
+
+    if (selectedTagBgColor) {
+      setSelectedTagColor(selectedTagBgColor);
+      setTagColor(selectedTagBgColor.hex);
+    }
+  }, [])
+
+  useEffect(() => {
+    const tagsList = document.querySelector(".secret-tags-wrapper")
+    const tagsHexWrapper = document.querySelector(".tags-hex-wrapper")
+
+    if (showHexInput) {
+      tagsList?.classList.add("hide-tags")
+      tagsList?.classList.remove("show-tags")
+      tagsHexWrapper?.classList.add("show-hex-input")
+      tagsHexWrapper?.classList.remove("hide-hex-input")
+    } else {
+      tagsList?.classList.remove("hide-tags")
+      tagsList?.classList.add("show-tags")
+      tagsHexWrapper?.classList.remove("show-hex-input")
+      tagsHexWrapper?.classList.add("hide-hex-input")
+    }
+  }, [showHexInput])
+
+
+  const handleColorChange = (clickedTagColor: TagColor) => {
+    const updatedTagColors = [...tagsColors];
+    const clickedTagColorIndex = updatedTagColors.findIndex(($tagColor) => $tagColor.id === clickedTagColor.id);
+    const updatedClickedTagColor = updatedTagColors[clickedTagColorIndex];
+
+    updatedTagColors.forEach((tgColor) => {
+      // eslint-disable-next-line no-param-reassign
+      tgColor.selected = false;
+    });
+
+    if (selectedTagColor.id !== clickedTagColor.id) {
+      updatedClickedTagColor.selected = !updatedClickedTagColor.selected;
+      setSelectedTagColor(updatedClickedTagColor);
+      setTagColor(updatedClickedTagColor.hex);
+    }
+  };
+
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
       <Controller
@@ -40,6 +101,81 @@ export const CreateTagModal = ({ onCreateTag }: Props): JSX.Element => {
           </FormControl>
         )}
       />
+
+      <div className="mt-2">
+        <div className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400">Tag Color</div>
+        <div className="flex gap-2 h-[50px]">
+          <div className="w-[12%]   h-[2.813rem]	 inline-flex font-inter items-center justify-center border relative rounded-md border-mineshaft-500  bg-mineshaft-900 hover:bg-mineshaft-800">
+            <div className="w-[26px]  h-[26px] rounded-full" style={{ background: `${tagColor}` }} />
+          </div>
+
+          <div className="w-[88%] h-[2.813rem] flex-wrap inline-flex gap-3 items-center border  rounded-md border-mineshaft-500 bg-mineshaft-900 hover:bg-mineshaft-800 relative">
+            <div className="flex-wrap	 inline-flex gap-3 items-center secret-tags-wrapper pl-3">
+              {
+                tagsColors.map(($tagColor: TagColor) => {
+                  return (
+                    <div key={`tag-color-${$tagColor.id}`}>
+                      <Tooltip content={`${$tagColor.name}`}>
+                        <div className=" flex items-center justify-center w-[26px] h-[26px] hover:ring-offset-2 hover:ring-2 bg-[#bec2c8] border-2 p-2 hover:shadow-lg border-transparent hover:border-black rounded-full"
+                          key={`tag-${$tagColor.id}`}
+                          style={{ backgroundColor: `${$tagColor.hex}` }}
+
+                          onClick={() => handleColorChange($tagColor)}
+                          tabIndex={0} role="button"
+                          onKeyDown={() => { }}
+                        >
+                          {
+                            $tagColor.selected && <FontAwesomeIcon icon={faCheck} style={{ color: "#00000070" }} />
+                          }
+                        </div>
+                      </Tooltip>
+                    </div>
+                  )
+                })
+              }
+            </div>
+
+            <div className="flex items-center gap-2 px-2 tags-hex-wrapper" >
+              <div className="w-1/6	  flex items-center  relative rounded-md hover:bg-mineshaft-800">
+                {
+                  isValidHexColor(tagColor) && (
+                    <div className="w-[26px]  h-[26px] rounded-full flex items-center justify-center" style={{ background: `${tagColor}` }}>
+                      <FontAwesomeIcon icon={faCheck} style={{ color: "#00000070" }} />
+                    </div>
+                  )
+                }
+
+                {
+                  !isValidHexColor(tagColor) && (
+                    <div className="border-dashed border bg-blue rounded-full w-[26px] h-[26px] border-mineshaft-500" />
+                  )
+                }
+              </div>
+              <div className="w-10/12">
+                <Input
+                  variant="plain"
+                  className="w-full focus:text-bunker-100 focus:ring-transparent bg-transparent"
+                  autoCapitalization={false}
+                  value={tagColor}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTagColor(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="w-[26px] h-[26px]  flex items-center justify-center absolute top-[10px] right-[-4px] translate-x-[-50%]">
+              <div className="border-mineshaft-500  border h-[2.1rem] mr-4 absolute right-5" />
+              <div className={`flex items-center justify-center w-[26px] h-[26px] bg-transparent cursor-pointer hover:ring-offset-1 hover:ring-2 border-mineshaft-500 border bg-mineshaft-900 rounded-[3px]  p-2 ${showHexInput ? "tags-conic-bg rounded-full" : ""}`} onClick={() => setShowHexInput((prev) => !prev)} style={{ border: "1px solid rgba(220, 216, 254, 0.376)" }}
+                tabIndex={0} role="button"
+                onKeyDown={() => { }}>
+                {
+                  !showHexInput && <span>#</span>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div className="mt-8 flex items-center">
         <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
           Create

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -15,7 +15,6 @@ import {
   faCopy,
   faEllipsis,
   faInfoCircle,
-  faPlus,
   faTags,
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
@@ -24,38 +23,23 @@ import { cx } from "cva";
 import { twMerge } from "tailwind-merge";
 
 import {
-  Button,
-  Checkbox,
-  FormControl,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
   IconButton,
   Input,
   Popover,
-  PopoverContent,
   PopoverTrigger,
   SecretInput,
   Tag,
-  TextArea,
   Tooltip
 } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 import { WsTag } from "@app/hooks/api/types";
 
+import AddTagPopoverContent from "../../../../components/AddTagPopoverContent/AddTagPopoverContent";
 import { FormData, SecretActionType } from "../../DashboardPage.utils";
 
-const tagColors = [
-  { bg: "bg-[#f1c40f]/40", text: "text-[#fcf0c3]/70" },
-  { bg: "bg-[#cb1c8d]/40", text: "text-[#f2c6e3]/70" },
-  { bg: "bg-[#badc58]/40", text: "text-[#eef6d5]/70" },
-  { bg: "bg-[#ff5400]/40", text: "text-[#ffddcc]/70" },
-  { bg: "bg-[#3AB0FF]/40", text: "text-[#f0fffd]/70" },
-  { bg: "bg-[#6F1AB6]/40", text: "text-[#FFE5F1]/70" },
-  { bg: "bg-[#C40B13]/40", text: "text-[#FFDEDE]/70" },
-  { bg: "bg-[#332FD0]/40", text: "text-[#DFF6FF]/70" }
-];
-
 type Props = {
   index: number;
   // backend generated unique id
@@ -95,7 +79,7 @@ export const SecretInputRow = memo(
     onSecretDelete,
     searchTerm,
     control,
-    register,
+    // register,
     setValue,
     isKeyError,
     keyError,
@@ -110,10 +94,8 @@ export const SecretInputRow = memo(
       append
     } = useFieldArray({ control, name: `secrets.${index}.tags` });
 
-    const tagColorByTagId = new Map((wsTags || []).map((wsTag, i) => [wsTag._id, tagColors[i % tagColors.length]]))
-
     // display the tags in alphabetical order
-    secretTags.sort((a, b) => a.name.localeCompare(b.name))
+    secretTags.sort((a, b) => a?.name?.localeCompare(b?.name));
 
     // to get details on a secret
     const overrideAction = useWatch({
@@ -145,33 +127,41 @@ export const SecretInputRow = memo(
     // when secret is override by personal values
     const isOverridden =
       overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
-    const [editorRef, setEditorRef] = useState(isOverridden ? secValueOverride : secValue);
+
+    const [hoveredTag, setHoveredTag] = useState<WsTag | null>(null);
+
+    const handleTagOnMouseEnter = (wsTag: WsTag) => {
+      setHoveredTag(wsTag);
+    };
+
+    const handleTagOnMouseLeave = () => {
+      setHoveredTag(null);
+    };
+
+    const checkIfTagIsVisible = (wsTag: WsTag) => wsTag._id === hoveredTag?._id;
 
     const secId = useWatch({ control, name: `secrets.${index}._id`, exact: true });
     const tags =
       useWatch({ control, name: `secrets.${index}.tags`, exact: true, defaultValue: [] }) || [];
+
     const selectedTagIds = tags.reduce<Record<string, boolean>>(
       (prev, curr) => ({ ...prev, [curr.slug]: true }),
       {}
     );
 
-    const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
+    const [isSecValueCopied, setIsSecValueCopied] = useToggle(false);
 
     useEffect(() => {
       let timer: NodeJS.Timeout;
-      if (isInviteLinkCopied) {
-        timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
+      if (isSecValueCopied) {
+        timer = setTimeout(() => setIsSecValueCopied.off(), 2000);
       }
       return () => clearTimeout(timer);
-    }, [isInviteLinkCopied]);
-
-    useEffect(() => {
-      setEditorRef(isOverridden ? secValueOverride : secValue);
-    }, [isOverridden]);
+    }, [isSecValueCopied]);
 
     const copyTokenToClipboard = () => {
       navigator.clipboard.writeText((secValueOverride || secValue) as string);
-      setInviteLinkCopied.on();
+      setIsSecValueCopied.on();
     };
 
     const onSecretOverride = () => {
@@ -195,13 +185,13 @@ export const SecretInputRow = memo(
     const onSelectTag = (selectedTag: WsTag) => {
       const shouldAppend = !selectedTagIds[selectedTag.slug];
       if (shouldAppend) {
-        append(selectedTag);
+        const { _id: id, name, slug, tagColor } = selectedTag;
+        append({ _id: id, name, slug, tagColor });
       } else {
-        const pos = tags.findIndex(({ slug }) => selectedTag.slug === slug);
+        const pos = tags.findIndex(({ slug }: { slug: string }) => selectedTag.slug === slug);
         remove(pos);
       }
     };
-
     const isCreatedSecret = !secId;
     const shouldBeBlockedInAddOnly = !isCreatedSecret && isAddOnly;
 
@@ -228,6 +218,7 @@ export const SecretInputRow = memo(
         <td className="flex h-10 w-10 items-center justify-center border-none px-4">
           <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
         </td>
+
         <Controller
           control={control}
           defaultValue=""
@@ -275,7 +266,7 @@ export const SecretInputRow = memo(
               <Controller
                 control={control}
                 name={`secrets.${index}.valueOverride`}
-                render={({ field: { onChange, onBlur } }) => (
+                render={({ field }) => (
                   <SecretInput
                     key={`secrets.${index}.valueOverride`}
                     isDisabled={
@@ -283,16 +274,8 @@ export const SecretInputRow = memo(
                       isRollbackMode ||
                       (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
                     }
-                    value={editorRef}
                     isVisible={!isSecretValueHidden}
-                    onChange={(val, html) => {
-                      onChange(val);
-                      setEditorRef(html);
-                    }}
-                    onBlur={(html) => {
-                      setEditorRef(html);
-                      onBlur();
-                    }}
+                    {...field}
                   />
                 )}
               />
@@ -300,7 +283,7 @@ export const SecretInputRow = memo(
               <Controller
                 control={control}
                 name={`secrets.${index}.value`}
-                render={({ field: { onBlur, onChange } }) => (
+                render={({ field }) => (
                   <SecretInput
                     key={`secrets.${index}.value`}
                     isVisible={!isSecretValueHidden}
@@ -309,15 +292,7 @@ export const SecretInputRow = memo(
                       isRollbackMode ||
                       (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
                     }
-                    onChange={(val, html) => {
-                      onChange(val);
-                      setEditorRef(html);
-                    }}
-                    value={editorRef}
-                    onBlur={(html) => {
-                      setEditorRef(html);
-                      onBlur();
-                    }}
+                    {...field}
                   />
                 )}
               />
@@ -326,21 +301,41 @@ export const SecretInputRow = memo(
         </td>
         <td className="min-w-sm flex">
           <div className="flex h-8 items-center pl-2">
-            {secretTags.map(({ id, _id, slug }, i) => {
-              // This map lookup shouldn't ever fail, but if it does we default to the first color
-              const tagColor = tagColorByTagId.get(_id) || tagColors[0]
+            {secretTags.map(({ id, slug, tagColor }) => {
               return (
-                <Tag
-                  className={cx(
-                    tagColor.bg,
-                    tagColor.text
-                  )}
-                  isDisabled={isReadOnly || isAddOnly || isRollbackMode}
-                  onClose={() => remove(i)}
-                  key={id}
-                >
-                  {slug}
-                </Tag>)
+                <>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <div>
+                        <Tag
+                          // isDisabled={isReadOnly || isAddOnly || isRollbackMode}
+                          // onClose={() => remove(i)}
+                          key={id}
+                          className="cursor-pointer"
+                        >
+                          <div className="rounded-full border-mineshaft-500 bg-transparent flex items-center  gap-1.5 justify-around">
+                            <div
+                              className="w-[10px] h-[10px] rounded-full"
+                              style={{ background: tagColor || "#bec2c8" }}
+                            />
+                            {slug}
+                          </div>
+                        </Tag>
+                      </div>
+                    </PopoverTrigger>
+                    <AddTagPopoverContent
+                      wsTags={wsTags}
+                      secKey={secKey || "this secret"}
+                      selectedTagIds={selectedTagIds}
+                      handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
+                      handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
+                      handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
+                      checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
+                      handleOnCreateTagOpen={() => onCreateTagOpen()}
+                    />
+                  </Popover>
+                </>
+              );
             })}
             <div className="w-0 overflow-hidden group-hover:w-6">
               <Tooltip content="Copy value">
@@ -351,7 +346,7 @@ export const SecretInputRow = memo(
                   className="py-[0.42rem]"
                   onClick={copyTokenToClipboard}
                 >
-                  <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
+                  <FontAwesomeIcon icon={isSecValueCopied ? faCheck : faCopy} />
                 </IconButton>
               </Tooltip>
             </div>
@@ -372,51 +367,16 @@ export const SecretInputRow = memo(
                       </Tooltip>
                     </div>
                   </PopoverTrigger>
-                  <PopoverContent
-                    side="left"
-                    className="max-h-96 w-auto min-w-[200px] overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 p-2 text-bunker-200"
-                    hideCloseBtn
-                  >
-                    <div className="mb-2 px-2 text-center text-sm font-medium text-bunker-200">
-                      Add tags to {secKey || "this secret"}
-                    </div>
-                    <div className="flex flex-col space-y-1">
-                      {wsTags?.map((wsTag) => (
-                        <Button
-                          variant="plain"
-                          size="sm"
-                          className={twMerge(
-                            "justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500",
-                            selectedTagIds?.[wsTag.slug] && "text-primary"
-                          )}
-                          onClick={() => onSelectTag(wsTag)}
-                          leftIcon={
-                            <Checkbox
-                              className="mr-0 data-[state=checked]:bg-primary"
-                              id="autoCapitalization"
-                              isChecked={selectedTagIds?.[wsTag.slug]}
-                              onCheckedChange={() => {}}
-                            >
-                              {}
-                            </Checkbox>
-                          }
-                          key={wsTag._id}
-                        >
-                          {wsTag.slug}
-                        </Button>
-                      ))}
-                      <Button
-                        variant="star"
-                        color="primary"
-                        size="sm"
-                        className="mt-4 h-7 justify-start bg-mineshaft-600 px-1"
-                        onClick={onCreateTagOpen}
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      >
-                        Add new tag
-                      </Button>
-                    </div>
-                  </PopoverContent>
+                  <AddTagPopoverContent
+                    wsTags={wsTags}
+                    secKey={secKey || "this secret"}
+                    selectedTagIds={selectedTagIds}
+                    handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
+                    handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
+                    handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
+                    checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
+                    handleOnCreateTagOpen={() => onCreateTagOpen()}
+                  />
                 </Popover>
               </div>
             )}
@@ -460,20 +420,16 @@ export const SecretInputRow = memo(
                       <FontAwesomeIcon icon={faComment} />
                     </IconButton>
                   </PopoverTrigger>
-                  <PopoverContent
-                    className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
-                    sticky="always"
-                  >
-                    <FormControl label="Comment" className="mb-0">
-                      <TextArea
-                        isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
-                        className="border border-mineshaft-600 text-sm"
-                        {...register(`secrets.${index}.comment`)}
-                        rows={8}
-                        cols={30}
-                      />
-                    </FormControl>
-                  </PopoverContent>
+                  <AddTagPopoverContent
+                    wsTags={wsTags}
+                    secKey={secKey || "this secret"}
+                    selectedTagIds={selectedTagIds}
+                    handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
+                    handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
+                    handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
+                    checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
+                    handleOnCreateTagOpen={() => onCreateTagOpen()}
+                  />
                 </Popover>
               </div>
             </Tooltip>

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -51,7 +51,7 @@ export const InitialStep = ({
 
                 // attemptCliLogin
                 const isCliLoginSuccessful = await attemptCliLogin({
-                    email,
+                    email: email.toLowerCase(),
                     password,
                 })
 
@@ -78,7 +78,7 @@ export const InitialStep = ({
                 }
             } else {
                 const isLoginSuccessful = await attemptLogin({
-                    email,
+                    email: email.toLowerCase(),
                     password,
                 });
                 if (isLoginSuccessful && isLoginSuccessful.success) {

frontend/src/views/Login/components/PasswordStep/PasswordStep.tsx

@@ -40,7 +40,8 @@ export const PasswordStep = ({
         authMethod
     } = jwt_decode(providerAuthToken) as any;
     
-    const handleLogin = async () => {
+    const handleLogin = async (e:React.FormEvent) => {
+        e.preventDefault()
         try {
             setIsLoading(true);
             
@@ -119,10 +120,12 @@ export const PasswordStep = ({
             console.error(err);
         }
     };
+
+
     
     return (
         <form 
-            onSubmit={(e) => e.preventDefault()}
+            onSubmit={handleLogin}
             className="h-full mx-auto w-full max-w-md px-6 pt-8"
         >
             <div className="mb-8">
@@ -153,9 +156,9 @@ export const PasswordStep = ({
             </div>
             <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[22rem] text-center rounded-md mt-4'>
                 <Button
+                    type="submit"
                     colorSchema="primary" 
                     variant="outline_bg"
-                    onClick={async () => handleLogin()} 
                     isFullWidth
                     isLoading={isLoading}
                     className="h-14"

frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx

@@ -15,11 +15,19 @@ export const SAMLSSOStep = ({
 
     const queryParams = new URLSearchParams(window.location.search);
 
+    const handleSubmission = (e:React.FormEvent) => {
+        e.preventDefault()
+        const callbackPort = queryParams.get("callback_port");
+        window.open(`/api/v1/sso/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+        window.close();
+    }
+
     return (
         <div className="mx-auto w-full max-w-md md:px-6">
             <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
                 What&apos;s your SSO Identifier?
             </p>
+            <form onSubmit={handleSubmission}>
             <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
                 <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
                 <Input
@@ -36,19 +44,16 @@ export const SAMLSSOStep = ({
             </div>
             <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
                 <Button
+                    type="submit" 
                     colorSchema="primary" 
                     variant="outline_bg"
-                    onClick={() => {
-                        const callbackPort = queryParams.get("callback_port");
-                        window.open(`/api/v1/sso/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-                        window.close();
-                    }} 
                     isFullWidth
                     className="h-14"
                 > 
                     {t("login.login")} 
                 </Button>
             </div>
+            </form>
             <div className="flex flex-row items-center justify-center mt-4">
                 <button
                 onClick={() => {

frontend/src/views/Org/MembersPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -60,7 +60,7 @@ type Props = {
 };
 
 const addMemberFormSchema = yup.object({
-  email: yup.string().email().required().label("Email").trim()
+  email: yup.string().email().required().label("Email").trim().lowercase()
 });
 
 type TAddMemberForm = yup.InferType<typeof addMemberFormSchema>;

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

@@ -1,13 +1,25 @@
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { yupResolver } from "@hookform/resolvers/yup";
 
+import { UpgradePlanModal } from "@app/components/v2";
+import { useSubscription } from "@app/context";
 import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
+import { usePopUp } from "@app/hooks/usePopUp";
 
 import { LogsFilter } from "./LogsFilter";
 import { LogsTable } from "./LogsTable";
 import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";
 
 export const LogsSection = () => {
+    const { subscription } = useSubscription();
+    const router = useRouter();
+    
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+        "upgradePlan"
+    ] as const);
+    
     const {
         control,
         reset,
@@ -20,6 +32,12 @@ export const LogsSection = () => {
             perPage: 10
         }
     });
+    
+    useEffect(() => {
+        if (subscription && !subscription.auditLogs) {
+            handlePopUpOpen("upgradePlan");
+        }
+    }, [subscription]);
 
     const eventType = watch("eventType") as EventType | undefined;
     const userAgentType = watch("userAgentType") as UserAgentType | undefined;
@@ -54,6 +72,19 @@ export const LogsSection = () => {
                 perPage={perPage}
                 setValue={setValue}
             />
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => {
+                    
+                    if (!isOpen) {
+                        router.back();
+                        return;
+                    }
+
+                    handlePopUpToggle("upgradePlan", isOpen)
+                }}
+                text="You can use audit logs if you switch to a paid Infisical plan."
+            />
         </div>
     );
  }

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowUp, faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -10,6 +10,7 @@ import NavHeader from "@app/components/navigation/NavHeader";
 import {
   Button,
   EmptyState,
+  IconButton,
   Input,
   Table,
   TableContainer,
@@ -46,6 +47,7 @@ export const SecretOverviewPage = () => {
   // coz when overflow the table goes to the right
   const parentTableRef = useRef<HTMLTableElement>(null);
   const [expandableTableWidth, setExpandableTableWidth] = useState(0);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
 
   useEffect(() => {
     const handleParentTableWidthResize = () => {
@@ -219,7 +221,7 @@ export const SecretOverviewPage = () => {
 
   const filteredSecretNames = secKeys?.filter((name) =>
     name.toUpperCase().includes(searchFilter.toUpperCase())
-  );
+  ).sort((a, b) => sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a));
   const filteredFolderNames = folderNames?.filter((name) =>
     name.toLowerCase().includes(searchFilter.toLowerCase())
   );
@@ -278,6 +280,9 @@ export const SecretOverviewPage = () => {
                 <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 px-5 pt-4 pb-3.5">
                     Name
+                    <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={() => setSortDir(prev => prev === "asc" ? "desc" : "asc")}>
+                      <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
+                    </IconButton>
                   </div>
                 </Th>
                 {userAvailableEnvs?.map(({ name, slug }, index) => {

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

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { faCheck, faCopy, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -39,14 +38,11 @@ export const SecretEditRow = ({
       value: defaultValue
     }
   });
-  const editorRef = useRef(defaultValue);
   const [isDeleting, setIsDeleting] = useToggle();
   const { createNotification } = useNotificationContext();
 
   const handleFormReset = () => {
     reset();
-    const val = getValues();
-    editorRef.current = val.value;
   };
 
   const handleCopySecretToClipboard = async () => {
@@ -78,7 +74,6 @@ export const SecretEditRow = ({
     try {
       await onSecretDelete(environment, secretName);
       reset({ value: undefined });
-      editorRef.current = undefined;
     } finally {
       setIsDeleting.off();
     }
@@ -90,20 +85,7 @@ export const SecretEditRow = ({
         <Controller
           control={control}
           name="value"
-          render={({ field: { onChange, onBlur } }) => (
-            <SecretInput
-              value={editorRef.current}
-              onChange={(val, html) => {
-                onChange(val);
-                editorRef.current = html;
-              }}
-              onBlur={(html) => {
-                editorRef.current = html;
-                onBlur();
-              }}
-              isVisible={isVisible}
-            />
-          )}
+          render={({ field }) => <SecretInput {...field} isVisible={isVisible} />}
         />
       </div>
       <div className="flex w-16 justify-center space-x-3 pl-2 transition-all">

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

@@ -52,7 +52,7 @@ export const SecretOverviewTableRow = ({
               <div className="text-blue-300/70">
                 <FontAwesomeIcon icon={isFormExpanded ? faAngleDown : faKey} />
               </div>
-              <div>{secretKey}</div>
+              <div title={secretKey}>{secretKey}</div>
             </div>
           </div>
         </Td>
@@ -73,7 +73,9 @@ export const SecretOverviewTableRow = ({
             >
               <div className="h-full w-full border-r border-mineshaft-600 py-[0.85rem] px-5">
                 <div className="flex justify-center">
-                  {!isSecretEmpty && <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />}
+                  {!isSecretEmpty &&  <Tooltip content={isSecretPresent ? "Present secret" : "Missing secret"}>
+                    <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />
+                  </Tooltip>}
                   {isSecretEmpty && (
                     <Tooltip content="Empty value">
                       <FontAwesomeIcon icon={faCircle} />

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectIndexSecretsSection/ProjectIndexSecretsSection.tsx

@@ -11,16 +11,13 @@ import {
     useNameWorkspaceSecrets
 } from "@app/hooks/api";
 
-// TODO: add check so that this only shows up if user is
-// an admin in the workspace
-
 export const ProjectIndexSecretsSection = () => {
     const { currentWorkspace } = useWorkspace();
     const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } = useGetWorkspaceIndexStatus(currentWorkspace?._id ?? "");
     const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
     const { data: encryptedSecrets } = useGetWorkspaceSecrets(currentWorkspace?._id ?? "");
     const nameWorkspaceSecrets = useNameWorkspaceSecrets();
-
+    
     const onEnableBlindIndices = async () => {
     if (!currentWorkspace?._id) return;
     if (!encryptedSecrets) return;
@@ -53,7 +50,7 @@ export const ProjectIndexSecretsSection = () => {
     });
   };
 
-    return (!isBlindIndexedLoading && !isBlindIndexed) ? (
+    return (!isBlindIndexedLoading && (isBlindIndexed === false)) ? (
         <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
             <p className="mb-3 text-xl font-semibold">Blind Indices</p>
             <p className="text-gray-400 mb-8">

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx

@@ -53,7 +53,8 @@ export const AddSecretTagModal = ({
             await createWsTag.mutateAsync({
                 workspaceID: currentWorkspace?._id,
                 tagName: name,
-                tagSlug: name.replace(" ", "_")
+                tagSlug: name.replace(/\s+/g, " ").replace(" ", "_"),
+                tagColor: ""
             });
 
             handlePopUpClose("CreateSecretTag");
@@ -62,6 +63,7 @@ export const AddSecretTagModal = ({
                 text: "Successfully created a tag",
                 type: "success"
             });
+            reset()
         } catch (err) {
             console.error(err);
             createNotification({

helm-charts/infisical/Chart.yaml

@@ -7,7 +7,7 @@ type: application
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: 0.3.0
+version: 0.3.2
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to

helm-charts/infisical/templates/_helpers.tpl

@@ -126,3 +126,5 @@ Create the mongodb connection string.
 {{- if .Values.mongodbConnection.externalMongoDBConnectionString -}}
 {{- $connectionString = .Values.mongodbConnection.externalMongoDBConnectionString -}}
 {{- end -}}
+{{- printf "%s" $connectionString -}}
+{{- end -}}

helm-charts/infisical/templates/backend-deployment.yaml

@@ -83,7 +83,6 @@ stringData:
                             "JWT_SERVICE_SECRET" (randAlphaNum 32 | lower)
                             "JWT_MFA_SECRET" (randAlphaNum 32 | lower)
                             "JWT_PROVIDER_AUTH_SECRET" (randAlphaNum 32 | lower)
-                            "REDIS_URL" (include "infisical.redis.connectionString" .)
                             "MONGO_URL" (include "infisical.mongodb.connectionString" .) }}
   {{- $secretObj := (lookup "v1" "Secret" .Release.Namespace (include "infisical.backend.fullname" .)) | default dict }}
   {{- $secretData := (get $secretObj "data") | default dict }}