From ca688764a3d332fa8f017d3d5c1922ee6e30047d Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Wed, 1 Feb 2023 11:56:38 +0700
Subject: [PATCH 01/52] Add login/logout logs

---
 backend/src/app.ts                            |   2 +-
 backend/src/controllers/v1/authController.ts  |  34 +++-
 .../src/controllers/v1/passwordController.ts  |   3 +-
 .../src/controllers/v2/secretsController.ts   |  36 ++--
 backend/src/ee/helpers/action.ts              | 181 +++++++++++++++---
 backend/src/ee/helpers/log.ts                 |  18 +-
 backend/src/ee/models/action.ts               |  20 +-
 backend/src/ee/models/log.ts                  |   4 +
 backend/src/ee/services/EELogService.ts       |  26 ++-
 backend/src/helpers/secret.ts                 |  32 ++--
 backend/src/models/LoginSRPDetail.ts          |  14 +-
 backend/src/models/index.ts                   |   5 +-
 backend/src/models/user.ts                    |   4 +-
 backend/src/variables/action.ts               |   4 +
 backend/src/variables/index.ts                |   4 +
 15 files changed, 297 insertions(+), 90 deletions(-)

diff --git a/backend/src/app.ts b/backend/src/app.ts
index 79561d00c..066da16d4 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -73,7 +73,7 @@ app.use(
   })
 );
 
-app.use(requestIp.mw())
+// app.use(requestIp.mw())
 
 if (NODE_ENV === 'production') {
   // enable app-wide rate-limiting + helmet security
diff --git a/backend/src/controllers/v1/authController.ts b/backend/src/controllers/v1/authController.ts
index 19850680e..6e2de53b3 100644
--- a/backend/src/controllers/v1/authController.ts
+++ b/backend/src/controllers/v1/authController.ts
@@ -4,16 +4,21 @@ import jwt from 'jsonwebtoken';
 import * as Sentry from '@sentry/node';
 import * as bigintConversion from 'bigint-conversion';
 const jsrp = require('jsrp');
-import { User } from '../../models';
+import { User, LoginSRPDetail } from '../../models';
 import { createToken, issueTokens, clearTokens } from '../../helpers/auth';
+import {
+  ACTION_LOGIN,
+  ACTION_LOGOUT
+} from '../../variables';
 import {
   NODE_ENV,
   JWT_AUTH_LIFETIME,
   JWT_AUTH_SECRET,
   JWT_REFRESH_SECRET
 } from '../../config';
-import LoginSRPDetail from '../../models/LoginSRPDetail';
 import { BadRequestError } from '../../utils/errors';
+import { EELogService } from '../../ee/services';
+import { getChannelFromUserAgent } from '../../utils/posthog'; // TODO: move this
 
 declare module 'jsonwebtoken' {
   export interface UserIDJwtPayload extends jwt.JwtPayload {
@@ -116,6 +121,18 @@ export const login2 = async (req: Request, res: Response) => {
             secure: NODE_ENV === 'production' ? true : false
           });
 
+          const loginAction = await EELogService.createAction({
+            name: ACTION_LOGIN,
+            userId: user._id
+          });
+          
+          loginAction && await EELogService.createLog({
+            userId: user._id,
+            actions: [loginAction],
+            channel: getChannelFromUserAgent(req.headers['user-agent']),
+            ipAddress: req.ip
+          });
+          
           // return (access) token in response
           return res.status(200).send({
             token: tokens.token,
@@ -159,6 +176,19 @@ export const logout = async (req: Request, res: Response) => {
       sameSite: 'strict',
       secure: NODE_ENV === 'production' ? true : false
     });
+
+    const logoutAction = await EELogService.createAction({
+      name: ACTION_LOGOUT,
+      userId: req.user._id
+    });
+    
+    logoutAction && await EELogService.createLog({
+      userId: req.user._id,
+      actions: [logoutAction],
+      channel: getChannelFromUserAgent(req.headers['user-agent']),
+      ipAddress: req.ip
+    });
+
   } catch (err) {
     Sentry.setUser({ email: req.user.email });
     Sentry.captureException(err);
diff --git a/backend/src/controllers/v1/passwordController.ts b/backend/src/controllers/v1/passwordController.ts
index d429cbf41..0c5530f58 100644
--- a/backend/src/controllers/v1/passwordController.ts
+++ b/backend/src/controllers/v1/passwordController.ts
@@ -4,12 +4,11 @@ import crypto from 'crypto';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const jsrp = require('jsrp');
 import * as bigintConversion from 'bigint-conversion';
-import { User, Token, BackupPrivateKey } from '../../models';
+import { User, Token, BackupPrivateKey, LoginSRPDetail } from '../../models';
 import { checkEmailVerification } from '../../helpers/signup';
 import { createToken } from '../../helpers/auth';
 import { sendMail } from '../../helpers/nodemailer';
 import { JWT_SIGNUP_LIFETIME, JWT_SIGNUP_SECRET, SITE_URL } from '../../config';
-import LoginSRPDetail from '../../models/LoginSRPDetail';
 import { BadRequestError } from '../../utils/errors';
 
 /**
diff --git a/backend/src/controllers/v2/secretsController.ts b/backend/src/controllers/v2/secretsController.ts
index 90eb8e48d..5c6f5898e 100644
--- a/backend/src/controllers/v2/secretsController.ts
+++ b/backend/src/controllers/v2/secretsController.ts
@@ -79,7 +79,7 @@ export const createSecrets = async (req: Request, res: Response) => {
     */
 
     const channel = getChannelFromUserAgent(req.headers['user-agent'])
-    const { workspaceId, environment } = req.body;
+    const { workspaceId, environment }: { workspaceId: string, environment: string } = req.body;
 
     const hasAccess = await userHasWorkspaceAccess(req.user, workspaceId, environment, ABILITY_WRITE)
     if (!hasAccess) {
@@ -175,17 +175,17 @@ export const createSecrets = async (req: Request, res: Response) => {
         }))
     });
 
-    const addAction = await EELogService.createActionSecret({
+    const addAction = await EELogService.createAction({
         name: ACTION_ADD_SECRETS,
-        userId: req.user._id.toString(),
-        workspaceId,
+        userId: req.user._id,
+        workspaceId: new Types.ObjectId(workspaceId),
         secretIds: newSecrets.map((n) => n._id)
     });
 
     // (EE) create (audit) log
     addAction && await EELogService.createLog({
         userId: req.user._id.toString(),
-        workspaceId,
+        workspaceId: new Types.ObjectId(workspaceId),
         actions: [addAction],
         channel,
         ipAddress: req.ip
@@ -300,16 +300,16 @@ export const getSecrets = async (req: Request, res: Response) => {
 
     const channel = getChannelFromUserAgent(req.headers['user-agent'])
 
-    const readAction = await EELogService.createActionSecret({
+    const readAction = await EELogService.createAction({
         name: ACTION_READ_SECRETS,
-        userId: userId,
-        workspaceId: workspaceId as string,
+        userId: new Types.ObjectId(userId),
+        workspaceId: new Types.ObjectId(workspaceId as string),
         secretIds: secrets.map((n: any) => n._id)
     });
 
     readAction && await EELogService.createLog({
-        userId: userId,
-        workspaceId: workspaceId as string,
+        userId: new Types.ObjectId(userId),
+        workspaceId: new Types.ObjectId(workspaceId as string),
         actions: [readAction],
         channel,
         ipAddress: req.ip
@@ -505,17 +505,17 @@ export const updateSecrets = async (req: Request, res: Response) => {
             });
         }, 10000);
 
-        const updateAction = await EELogService.createActionSecret({
+        const updateAction = await EELogService.createAction({
             name: ACTION_UPDATE_SECRETS,
-            userId: req.user._id.toString(),
-            workspaceId: key,
+            userId: req.user._id,
+            workspaceId: new Types.ObjectId(key),
             secretIds: workspaceSecretObj[key].map((secret: ISecret) => secret._id)
         });
 
         // (EE) create (audit) log
         updateAction && await EELogService.createLog({
             userId: req.user._id.toString(),
-            workspaceId: key,
+            workspaceId: new Types.ObjectId(key),
             actions: [updateAction],
             channel,
             ipAddress: req.ip
@@ -631,17 +631,17 @@ export const deleteSecrets = async (req: Request, res: Response) => {
                 workspaceId: key
             })
         });
-        const deleteAction = await EELogService.createActionSecret({
+        const deleteAction = await EELogService.createAction({
             name: ACTION_DELETE_SECRETS,
-            userId: req.user._id.toString(),
-            workspaceId: key,
+            userId: req.user._id,
+            workspaceId: new Types.ObjectId(key),
             secretIds: workspaceSecretObj[key].map((secret: ISecret) => secret._id)
         });
 
         // (EE) create (audit) log
         deleteAction && await EELogService.createLog({
             userId: req.user._id.toString(),
-            workspaceId: key,
+            workspaceId: new Types.ObjectId(key),
             actions: [deleteAction],
             channel,
             ipAddress: req.ip
diff --git a/backend/src/ee/helpers/action.ts b/backend/src/ee/helpers/action.ts
index 389cfedbf..eb94810f4 100644
--- a/backend/src/ee/helpers/action.ts
+++ b/backend/src/ee/helpers/action.ts
@@ -1,39 +1,40 @@
 import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
-import { SecretVersion, Action } from '../models';
+import { Action } from '../models';
 import { 
     getLatestSecretVersionIds,
     getLatestNSecretSecretVersionIds
 } from '../helpers/secretVersion';
-import { ACTION_UPDATE_SECRETS } from '../../variables';
+import { 
+    ACTION_LOGIN,
+    ACTION_LOGOUT,
+    ACTION_ADD_SECRETS,
+    ACTION_READ_SECRETS,
+    ACTION_DELETE_SECRETS,
+    ACTION_UPDATE_SECRETS,
+} from '../../variables';
 
 /**
- * Create an (audit) action for secrets including
- * add, delete, update, and read actions.
+ * Create an (audit) action for updating secrets
  * @param {Object} obj
  * @param {String} obj.name - name of action
- * @param {ObjectId[]} obj.secretIds - ids of relevant secrets
+ * @param {Types.ObjectId} obj.secretIds - ids of relevant secrets
  * @returns {Action} action - new action
  */
-const createActionSecretHelper = async ({
+const createActionUpdateSecret = async ({
     name,
     userId,
     workspaceId,
     secretIds
 }: {
     name: string;
-    userId: string;
-    workspaceId: string;
+    userId: Types.ObjectId;
+    workspaceId: Types.ObjectId;
     secretIds: Types.ObjectId[];
 }) => {
-
     let action;
-    let latestSecretVersions;
     try {
-        if (name === ACTION_UPDATE_SECRETS) {
-            // case: action is updating secrets
-            // -> add old and new secret versions
-            latestSecretVersions = (await getLatestNSecretSecretVersionIds({
+        const latestSecretVersions = (await getLatestNSecretSecretVersionIds({
                 secretIds,
                 n: 2
             }))
@@ -41,17 +42,7 @@ const createActionSecretHelper = async ({
                 oldSecretVersion: s.versions[0]._id,
                 newSecretVersion: s.versions[1]._id
             }));
-        } else {
-            // case: action is adding, deleting, or reading secrets
-            // -> add new secret versions
-            latestSecretVersions = (await getLatestSecretVersionIds({
-                secretIds
-            }))
-            .map((s) => ({
-                newSecretVersion: s.versionId
-            }));
-        }
-
+        
         action = await new Action({
             name,
             user: userId,
@@ -64,10 +55,148 @@ const createActionSecretHelper = async ({
     } catch (err) {
 		Sentry.setUser(null);
 		Sentry.captureException(err);
+        throw new Error('Failed to create update secret action');
+    }
+    
+    return action;
+}
+
+/**
+ * Create an (audit) action for creating, reading, and deleting
+ * secrets
+ * @param {Object} obj
+ * @param {String} obj.name - name of action
+ * @param {Types.ObjectId} obj.secretIds - ids of relevant secrets
+ * @returns {Action} action - new action
+ */
+const createActionSecret = async ({
+    name,
+    userId,
+    workspaceId,
+    secretIds
+}: {
+    name: string;
+    userId: Types.ObjectId;
+    workspaceId: Types.ObjectId;
+    secretIds: Types.ObjectId[];
+}) => {
+    let action;
+    try {
+        // case: action is adding, deleting, or reading secrets
+        // -> add new secret versions
+        const latestSecretVersions = (await getLatestSecretVersionIds({
+            secretIds
+        }))
+        .map((s) => ({
+            newSecretVersion: s.versionId
+        }));
+        
+       action = await new Action({
+            name,
+            user: userId,
+            workspace: workspaceId,
+            payload: {
+                secretVersions: latestSecretVersions
+            }
+        }).save(); 
+
+    } catch (err) {
+		Sentry.setUser(null);
+		Sentry.captureException(err);
+        throw new Error('Failed to create action create/read/delete secret action');
+    }
+    
+    return action;
+}
+
+/**
+ * Create an (audit) action for user with id [userId]
+ * @param {Object} obj 
+ * @param {String} obj.name - name of action
+ * @param {String} obj.userId - id of user associated with action
+ * @returns 
+ */
+const createActionUser = ({
+    name,
+    userId
+}: {
+    name: string;
+    userId: Types.ObjectId;
+}) => {
+    let action;
+    try {
+        action = new Action({
+            name,
+            user: userId
+        }).save();
+    } catch (err) {
+        Sentry.setUser(null);
+        Sentry.captureException(err);
+        throw new Error('Failed to create user action');
+    }
+
+    return action; 
+}
+
+/**
+ * Create an (audit) action. 
+ * @param {Object} obj
+ * @param {Object} obj.name - name of action
+ * @param {Types.ObjectId} obj.userId - id of user associated with action
+ * @param {Types.ObjectId} obj.workspaceId - id of workspace associated with action
+ * @param {Types.ObjectId[]} obj.secretIds - ids of secrets associated with action
+*/
+const createActionHelper = async ({
+    name,
+    userId,
+    workspaceId,
+    secretIds,
+}: {
+    name: string;
+    userId: Types.ObjectId;
+    workspaceId?: Types.ObjectId;
+    secretIds?: Types.ObjectId[];
+}) => {
+    let action;
+    try {
+        switch (name) {
+            case ACTION_LOGIN:
+            case ACTION_LOGOUT:
+                action = await createActionUser({
+                    name,
+                    userId
+                });
+                break;
+            case ACTION_ADD_SECRETS:
+            case ACTION_READ_SECRETS:
+            case ACTION_DELETE_SECRETS:
+                if (!workspaceId || !secretIds) throw new Error('Missing required params workspace id or secret ids to create action secret');
+                action = await createActionSecret({
+                    name,
+                    userId,
+                    workspaceId,
+                    secretIds
+                });
+                break;
+            case ACTION_UPDATE_SECRETS:
+                if (!workspaceId || !secretIds) throw new Error('Missing required params workspace id or secret ids to create action secret');
+                action = await createActionUpdateSecret({
+                    name,
+                    userId,
+                    workspaceId,
+                    secretIds
+                });
+                break;
+        }
+    } catch (err) {
+        Sentry.setUser(null);
+		Sentry.captureException(err);
         throw new Error('Failed to create action');
     }
     
     return action;
 }
 
-export { createActionSecretHelper };
\ No newline at end of file
+export { 
+    createActionHelper
+};
\ No newline at end of file
diff --git a/backend/src/ee/helpers/log.ts b/backend/src/ee/helpers/log.ts
index c357c9818..bdb0a2380 100644
--- a/backend/src/ee/helpers/log.ts
+++ b/backend/src/ee/helpers/log.ts
@@ -1,9 +1,19 @@
 import * as Sentry from '@sentry/node';
+import { Types } from 'mongoose';
 import { 
     Log,
     IAction
 } from '../models';
-
+/**
+ * Create an (audit) log
+ * @param {Object} obj
+ * @param {Types.ObjectId} obj.userId - id of user associated with the log
+ * @param {Types.ObjectId} obj.workspaceId - id of workspace associated with the log
+ * @param {IAction[]} obj.actions - actions to include in log
+ * @param {String} obj.channel - channel (web/cli/auto) associated with the log
+ * @param {String} obj.ipAddress - ip address associated with the log
+ * @returns {Log} log - new audit log
+ */
 const createLogHelper = async ({
     userId,
     workspaceId,
@@ -11,8 +21,8 @@ const createLogHelper = async ({
     channel,
     ipAddress
 }: {
-    userId: string;
-    workspaceId: string;
+    userId: Types.ObjectId;
+    workspaceId?: Types.ObjectId;
     actions: IAction[];
     channel: string;
     ipAddress: string;
@@ -21,7 +31,7 @@ const createLogHelper = async ({
     try {
         log = await new Log({
             user: userId,
-            workspace: workspaceId,
+            workspace: workspaceId ?? undefined,
             actionNames: actions.map((a) => a.name),
             actions,
             channel,
diff --git a/backend/src/ee/models/action.ts b/backend/src/ee/models/action.ts
index 3d48aa04d..7cdd7a355 100644
--- a/backend/src/ee/models/action.ts
+++ b/backend/src/ee/models/action.ts
@@ -1,10 +1,18 @@
 import { Schema, model, Types } from 'mongoose';
+import {
+    ACTION_LOGIN,
+    ACTION_LOGOUT,
+    ACTION_ADD_SECRETS,
+    ACTION_UPDATE_SECRETS,
+    ACTION_READ_SECRETS,
+    ACTION_DELETE_SECRETS
+} from '../../variables';
 
 export interface IAction {
     name: string;
     user?: Types.ObjectId,
     workspace?: Types.ObjectId,
-    payload: {
+    payload?: {
         secretVersions?: Types.ObjectId[]
     }
 }
@@ -13,7 +21,15 @@ const actionSchema = new Schema<IAction>(
     {
         name: {
             type: String,
-            required: true
+            required: true,
+            enum: [
+                ACTION_LOGIN,
+                ACTION_LOGOUT,
+                ACTION_ADD_SECRETS,
+                ACTION_UPDATE_SECRETS,
+                ACTION_READ_SECRETS,
+                ACTION_DELETE_SECRETS
+            ]
         },
         user: {
             type: Schema.Types.ObjectId,
diff --git a/backend/src/ee/models/log.ts b/backend/src/ee/models/log.ts
index b9eadc016..47be2e58f 100644
--- a/backend/src/ee/models/log.ts
+++ b/backend/src/ee/models/log.ts
@@ -1,5 +1,7 @@
 import { Schema, model, Types } from 'mongoose';
 import {
+    ACTION_LOGIN,
+    ACTION_LOGOUT,
     ACTION_ADD_SECRETS,
     ACTION_UPDATE_SECRETS,
     ACTION_READ_SECRETS,
@@ -29,6 +31,8 @@ const logSchema = new Schema<ILog>(
         actionNames: {
             type: [String],
             enum: [
+                ACTION_LOGIN,
+                ACTION_LOGOUT,
                 ACTION_ADD_SECRETS,
                 ACTION_UPDATE_SECRETS,
                 ACTION_READ_SECRETS,
diff --git a/backend/src/ee/services/EELogService.ts b/backend/src/ee/services/EELogService.ts
index c1b2da6fb..bbe03e09e 100644
--- a/backend/src/ee/services/EELogService.ts
+++ b/backend/src/ee/services/EELogService.ts
@@ -1,14 +1,12 @@
 import { Types } from 'mongoose';
 import { 
-    Log,
-    Action,
     IAction
 } from '../models';
 import {
     createLogHelper
 } from '../helpers/log';
 import {
-    createActionSecretHelper
+    createActionHelper
 } from '../helpers/action';
 import EELicenseService from './EELicenseService';
 
@@ -33,8 +31,8 @@ class EELogService {
         channel,
         ipAddress
     }: {
-        userId: string;
-        workspaceId: string;
+        userId: Types.ObjectId;
+        workspaceId?: Types.ObjectId;
         actions: IAction[];
         channel: string;
         ipAddress: string;
@@ -50,26 +48,26 @@ class EELogService {
     }
     
     /**
-     * Create an (audit) action for secrets including
-     * add, delete, update, and read actions.
+     * Create an (audit) action
      * @param {Object} obj
      * @param {String} obj.name - name of action
-     * @param {ObjectId[]} obj.secretIds - secret ids
+     * @param {Types.ObjectId} obj.userId - id of user associated with the action
+     * @param {Types.ObjectId} obj.workspaceId - id of workspace associated with the action
+     * @param {ObjectId[]} obj.secretIds - ids of secrets associated with the action
      * @returns {Action} action - new action
      */
-    static async createActionSecret({
+    static async createAction({
         name,
         userId,
         workspaceId,
         secretIds
     }: {
         name: string;
-        userId: string;
-        workspaceId: string;
-        secretIds: Types.ObjectId[];
+        userId: Types.ObjectId;
+        workspaceId?: Types.ObjectId;
+        secretIds?: Types.ObjectId[];
     }) {
-        if (!EELicenseService.isLicenseValid) return null; 
-        return await createActionSecretHelper({
+        return await createActionHelper({
             name,
             userId,
             workspaceId,
diff --git a/backend/src/helpers/secret.ts b/backend/src/helpers/secret.ts
index a16d114c6..9466cf7aa 100644
--- a/backend/src/helpers/secret.ts
+++ b/backend/src/helpers/secret.ts
@@ -406,10 +406,10 @@ const v2PushSecrets = async ({
 				secretIds: toDelete
 			});
 
-			const deleteAction = await EELogService.createActionSecret({
+			const deleteAction = await EELogService.createAction({
 				name: ACTION_DELETE_SECRETS,
-				userId,
-				workspaceId,
+				userId: new Types.ObjectId(userId),
+				workspaceId: new Types.ObjectId(userId),
 				secretIds: toDelete
 			});
 
@@ -499,10 +499,10 @@ const v2PushSecrets = async ({
 				})
 			});
 
-			const updateAction = await EELogService.createActionSecret({
+			const updateAction = await EELogService.createAction({
 				name: ACTION_UPDATE_SECRETS,
-				userId,
-				workspaceId,
+				userId: new Types.ObjectId(userId),
+				workspaceId: new Types.ObjectId(workspaceId),
 				secretIds: toUpdate.map((u) => u._id)
 			});
 
@@ -536,10 +536,10 @@ const v2PushSecrets = async ({
 				})
 			});
 
-			const addAction = await EELogService.createActionSecret({
+			const addAction = await EELogService.createAction({
 				name: ACTION_ADD_SECRETS,
-				userId,
-				workspaceId,
+				userId: new Types.ObjectId(userId),
+				workspaceId: new Types.ObjectId(workspaceId),
 				secretIds: newSecrets.map((n) => n._id)
 			});
 			addAction && actions.push(addAction);
@@ -553,8 +553,8 @@ const v2PushSecrets = async ({
 		// (EE) create (audit) log
 		if (actions.length > 0) {
 			await EELogService.createLog({
-				userId,
-				workspaceId,
+				userId: new Types.ObjectId(userId),
+				workspaceId: new Types.ObjectId(workspaceId),
 				actions,
 				channel,
 				ipAddress
@@ -645,16 +645,16 @@ const pullSecrets = async ({
 			environment
 		})
 
-		const readAction = await EELogService.createActionSecret({
+		const readAction = await EELogService.createAction({
 			name: ACTION_READ_SECRETS,
-			userId,
-			workspaceId,
+			userId: new Types.ObjectId(userId),
+			workspaceId: new Types.ObjectId(workspaceId),
 			secretIds: secrets.map((n: any) => n._id)
 		});
 
 		readAction && await EELogService.createLog({
-			userId,
-			workspaceId,
+			userId: new Types.ObjectId(userId),
+			workspaceId: new Types.ObjectId(workspaceId),
 			actions: [readAction],
 			channel,
 			ipAddress
diff --git a/backend/src/models/LoginSRPDetail.ts b/backend/src/models/LoginSRPDetail.ts
index f65e779c3..6b615db97 100644
--- a/backend/src/models/LoginSRPDetail.ts
+++ b/backend/src/models/LoginSRPDetail.ts
@@ -1,6 +1,14 @@
-import mongoose, { Schema, model } from 'mongoose';
+import mongoose, { Schema, model, Types } from 'mongoose';
 
-const LoginSRPDetailSchema = new Schema(
+export interface ILoginSRPDetail {
+	_id: Types.ObjectId;
+	clientPublicKey: string;
+	email: string;
+	serverBInt: mongoose.Schema.Types.Buffer;
+	expireAt: Date;
+}
+
+const loginSRPDetailSchema = new Schema<ILoginSRPDetail>(
 	{
 		clientPublicKey: {
 			type: String,
@@ -16,7 +24,7 @@ const LoginSRPDetailSchema = new Schema(
 	}
 );
 
-const LoginSRPDetail = model('LoginSRPDetail', LoginSRPDetailSchema);
+const LoginSRPDetail = model('LoginSRPDetail', loginSRPDetailSchema);
 
 // LoginSRPDetailSchema.index({ "expireAt": 1 }, { expireAfterSeconds: 0 });
 
diff --git a/backend/src/models/index.ts b/backend/src/models/index.ts
index 72ffca607..ac5f102c0 100644
--- a/backend/src/models/index.ts
+++ b/backend/src/models/index.ts
@@ -16,6 +16,7 @@ import UserAction, { IUserAction } from './userAction';
 import Workspace, { IWorkspace } from './workspace';
 import ServiceTokenData, { IServiceTokenData } from './serviceTokenData';
 import APIKeyData, { IAPIKeyData } from './apiKeyData';
+import LoginSRPDetail, { ILoginSRPDetail } from './loginSRPDetail';
 
 export {
 	BackupPrivateKey,
@@ -53,5 +54,7 @@ export {
 	ServiceTokenData,
 	IServiceTokenData,
 	APIKeyData,
-	IAPIKeyData
+	IAPIKeyData,
+	LoginSRPDetail,
+	ILoginSRPDetail
 };
diff --git a/backend/src/models/user.ts b/backend/src/models/user.ts
index 7ea988c9d..ba9a59bc5 100644
--- a/backend/src/models/user.ts
+++ b/backend/src/models/user.ts
@@ -12,6 +12,7 @@ export interface IUser {
 	salt?: string;
 	verifier?: string;
 	refreshVersion?: number;
+	seenIps: [string];
 }
 
 const userSchema = new Schema<IUser>(
@@ -54,7 +55,8 @@ const userSchema = new Schema<IUser>(
 			type: Number,
 			default: 0,
 			select: false
-		}
+		},
+		seenIps: [String]
 	},
 	{
 		timestamps: true
diff --git a/backend/src/variables/action.ts b/backend/src/variables/action.ts
index 512eb8e8d..682b357a7 100644
--- a/backend/src/variables/action.ts
+++ b/backend/src/variables/action.ts
@@ -1,9 +1,13 @@
+const ACTION_LOGIN = 'login';
+const ACTION_LOGOUT = 'logout';
 const ACTION_ADD_SECRETS = 'addSecrets';
 const ACTION_DELETE_SECRETS = 'deleteSecrets';
 const ACTION_UPDATE_SECRETS = 'updateSecrets';
 const ACTION_READ_SECRETS = 'readSecrets';
 
 export {
+    ACTION_LOGIN,
+    ACTION_LOGOUT,
     ACTION_ADD_SECRETS,
     ACTION_DELETE_SECRETS,
     ACTION_UPDATE_SECRETS,
diff --git a/backend/src/variables/index.ts b/backend/src/variables/index.ts
index dc1ce6f78..fafab6939 100644
--- a/backend/src/variables/index.ts
+++ b/backend/src/variables/index.ts
@@ -35,6 +35,8 @@ import {
 import { SECRET_SHARED, SECRET_PERSONAL } from './secret';
 import { EVENT_PUSH_SECRETS, EVENT_PULL_SECRETS } from './event';
 import {
+  ACTION_LOGIN,
+  ACTION_LOGOUT,
   ACTION_ADD_SECRETS,
   ACTION_UPDATE_SECRETS,
   ACTION_DELETE_SECRETS,
@@ -75,6 +77,8 @@ export {
   INTEGRATION_FLYIO_API_URL,
   EVENT_PUSH_SECRETS,
   EVENT_PULL_SECRETS,
+  ACTION_LOGIN,
+  ACTION_LOGOUT,
   ACTION_ADD_SECRETS,
   ACTION_UPDATE_SECRETS,
   ACTION_DELETE_SECRETS,

From 4722bb8fcdac05dfba6a5d7589bb01a4228bb42e Mon Sep 17 00:00:00 2001
From: Hasan Mansoor <68682354+HasanMansoor4@users.noreply.github.com>
Date: Thu, 2 Feb 2023 05:27:07 +0300
Subject: [PATCH 02/52] add auto capitalization api controllers and routes with
 mongo schema updated

---
 .../src/controllers/v2/workspaceController.ts | 40 ++++++++++++++++++-
 backend/src/models/workspace.ts               |  5 +++
 backend/src/routes/v2/workspace.ts            | 15 +++++++
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/backend/src/controllers/v2/workspaceController.ts b/backend/src/controllers/v2/workspaceController.ts
index 90781b58c..ce3ecba31 100644
--- a/backend/src/controllers/v2/workspaceController.ts
+++ b/backend/src/controllers/v2/workspaceController.ts
@@ -467,4 +467,42 @@ export const deleteWorkspaceMembership = async (req: Request, res: Response) =>
 	return res.status(200).send({
 		membership
 	});
-}
\ No newline at end of file
+}
+
+/**
+ * Change autoCapitilzation Rule of workspace
+ * @param req
+ * @param res
+ * @returns
+ */
+export const toggleAutoCapitilzation = async (req: Request, res: Response) => {
+	let workspace;
+	try {
+		const { workspaceId } = req.params;
+		const { autoCapitalization } = req.body;
+
+		workspace = await Workspace.findOneAndUpdate(
+			{
+				_id: workspaceId
+			},
+			{
+				autoCapitalization
+			},
+			{
+				new: true
+			}
+		);
+	} catch (err) {
+		Sentry.setUser({ email: req.user.email });
+		Sentry.captureException(err);
+		return res.status(400).send({
+			message: 'Failed to change autoCapitalization setting'
+		});
+	}
+
+	return res.status(200).send({
+		message: 'Successfully changed autoCapitalization setting',
+		workspace
+	});
+};
+
diff --git a/backend/src/models/workspace.ts b/backend/src/models/workspace.ts
index a70b64340..d68ae9416 100644
--- a/backend/src/models/workspace.ts
+++ b/backend/src/models/workspace.ts
@@ -8,6 +8,7 @@ export interface IWorkspace {
 		name: string;
 		slug: string;
 	}>;
+	autoCapitalization: boolean;
 }
 
 const workspaceSchema = new Schema<IWorkspace>({
@@ -15,6 +16,10 @@ const workspaceSchema = new Schema<IWorkspace>({
 		type: String,
 		required: true
 	},
+	autoCapitalization: {
+		type: Boolean,
+		default: true,
+	},
 	organization: {
 		type: Schema.Types.ObjectId,
 		ref: 'Organization',
diff --git a/backend/src/routes/v2/workspace.ts b/backend/src/routes/v2/workspace.ts
index 55299e575..4e48c9301 100644
--- a/backend/src/routes/v2/workspace.ts
+++ b/backend/src/routes/v2/workspace.ts
@@ -118,4 +118,19 @@ router.delete( // TODO - rewire dashboard to this route
 	workspaceController.deleteWorkspaceMembership
 );
 
+
+router.post(
+	'/:workspaceId/settings',
+	requireAuth({
+		acceptedAuthModes: ['jwt']
+	}),
+	requireWorkspaceAuth({
+		acceptedRoles: [ADMIN, MEMBER]
+	}),
+	param('workspaceId').exists().trim(),
+	body('autoCapitalization').exists().trim().notEmpty(),
+	validateRequest,
+	workspaceController.toggleAutoCapitilzation
+);
+
 export default router;

From 75cd7a0f1580a8a09dd00509d991bed72fed1fc8 Mon Sep 17 00:00:00 2001
From: Hasan Mansoor <68682354+HasanMansoor4@users.noreply.github.com>
Date: Thu, 2 Feb 2023 05:30:22 +0300
Subject: [PATCH 03/52] integrate frontend with backend for auto capitalization
 setting

---
 .../public/locales/en/settings-project.json   |  4 +-
 .../dashboard/DashboardInputField.tsx         |  9 +++--
 frontend/src/components/dashboard/KeyPair.tsx |  5 ++-
 .../src/pages/api/workspace/getWorkspaces.ts  |  1 +
 .../api/workspace/toggleAutoCapitalization.ts | 26 +++++++++++++
 frontend/src/pages/dashboard/[id].tsx         |  4 ++
 frontend/src/pages/settings/project/[id].tsx  | 38 +++++++++++++++++++
 7 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/pages/api/workspace/toggleAutoCapitalization.ts

diff --git a/frontend/public/locales/en/settings-project.json b/frontend/public/locales/en/settings-project.json
index 03e4b1459..3f3401f2e 100644
--- a/frontend/public/locales/en/settings-project.json
+++ b/frontend/public/locales/en/settings-project.json
@@ -9,5 +9,7 @@
   "project-id-description": "To integrate Infisical into your code base and get automatic injection of environmental variables, you should use the following Project ID.",
   "project-id-description2": "For more guidance, including code snipets for various languages and frameworks, see ",
   "auto-generated": "This is your project's auto-generated unique identifier. It can't be changed.",
-  "docs": "Infisical Docs"
+  "docs": "Infisical Docs",
+  "auto-capitalization": "Auto Capitalization",
+  "auto-capitalization-description": "According to standards, Infisical will automatically capitalize your keys. If you want to disable this feature, you can do so here."
 }
diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend/src/components/dashboard/DashboardInputField.tsx
index 0e292d65d..6969b04d8 100644
--- a/frontend/src/components/dashboard/DashboardInputField.tsx
+++ b/frontend/src/components/dashboard/DashboardInputField.tsx
@@ -14,6 +14,7 @@ interface DashboardInputFieldProps {
   blurred?: boolean;
   isDuplicate?: boolean;
   override?: boolean;
+  isCapitalized?: boolean;
 }
 
 /**
@@ -36,7 +37,8 @@ const DashboardInputField = ({
   value,
   blurred,
   isDuplicate,
-  override
+  override,
+  isCapitalized
 }: DashboardInputFieldProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
@@ -58,7 +60,7 @@ const DashboardInputField = ({
           } rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), position)}
+            onChange={(e) => onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, position)}
             type={type}
             value={value}
             className={`z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
@@ -164,7 +166,8 @@ function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInput
     prev.position === next.position &&
     prev.blurred === next.blurred &&
     prev.override === next.override &&
-    prev.isDuplicate === next.isDuplicate
+    prev.isDuplicate === next.isDuplicate && 
+    prev.isCapitalized === next.isCapitalized
   );
 }
 
diff --git a/frontend/src/components/dashboard/KeyPair.tsx b/frontend/src/components/dashboard/KeyPair.tsx
index 7de4edf82..c7aece86f 100644
--- a/frontend/src/components/dashboard/KeyPair.tsx
+++ b/frontend/src/components/dashboard/KeyPair.tsx
@@ -14,6 +14,7 @@ interface KeyPairProps {
   toggleSidebar: (id: string) => void;
   sidebarSecretId: string;
   isSnapshot: boolean;
+  isCapitalized: boolean;
 }
 
 /**
@@ -39,7 +40,8 @@ const KeyPair = ({
   isDuplicate,
   toggleSidebar,
   sidebarSecretId,
-  isSnapshot
+  isSnapshot,
+  isCapitalized
 }: KeyPairProps) => (
   <div
     className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && 'pointer-events-none'} ${
@@ -58,6 +60,7 @@ const KeyPair = ({
       <div className="min-w-xl w-96">
         <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
           <DashboardInputField
+            isCapitalized = {isCapitalized}
             onChangeHandler={modifyKey}
             type="varName"
             position={keyPair.pos}
diff --git a/frontend/src/pages/api/workspace/getWorkspaces.ts b/frontend/src/pages/api/workspace/getWorkspaces.ts
index 95c977008..168f6df62 100644
--- a/frontend/src/pages/api/workspace/getWorkspaces.ts
+++ b/frontend/src/pages/api/workspace/getWorkspaces.ts
@@ -4,6 +4,7 @@ interface Workspace {
   __v: number;
   _id: string;
   name: string;
+  autoCapitalization: boolean;
   organization: string;
   environments: Array<{ name: string; slug: string }>;
 }
diff --git a/frontend/src/pages/api/workspace/toggleAutoCapitalization.ts b/frontend/src/pages/api/workspace/toggleAutoCapitalization.ts
new file mode 100644
index 000000000..fa459d67a
--- /dev/null
+++ b/frontend/src/pages/api/workspace/toggleAutoCapitalization.ts
@@ -0,0 +1,26 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+/**
+ * This route lets us change the auto capitalization settings in a project.
+ * @param {*} req
+ * @param {*} res
+ * @returns
+ */
+const toggleAutoCapitalization = (workspaceId: string, state: boolean) =>
+  SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/settings`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      autoCapitalization: state
+    })
+  }).then(async (res) => {
+    if (res && res.status === 200) {
+      return res;
+    }
+    console.log('Failed to toggle auto capitalization state');
+    return undefined;
+  });
+
+export default toggleAutoCapitalization;
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index c7f15ca70..25fd7fecd 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -123,6 +123,7 @@ export default function Dashboard() {
   const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
   const [numSnapshots, setNumSnapshots] = useState<number>();
   const [saveLoading, setSaveLoading] = useState(false);
+  const [autoCapitalization, setAutoCapitalization] = useState(false);
 
   const { t } = useTranslation();
   const { createNotification } = useNotificationContext();
@@ -213,6 +214,7 @@ export default function Dashboard() {
         if (!workspace) {
           router.push(`/dashboard/${userWorkspaces?.[0]?._id}`);
         }
+        setAutoCapitalization(workspace?.autoCapitalization ?? true);
 
         setWorkspaceEnvs(workspace?.environments || []);
         // set env
@@ -758,6 +760,7 @@ export default function Dashboard() {
                         .filter((row) => !sharedToHide.includes(row.id))
                         .map((keyPair) => (
                           <KeyPair
+                            isCapitalized={autoCapitalization}
                             key={keyPair.id}
                             keyPair={keyPair}
                             modifyValue={listenChangeValue}
@@ -795,6 +798,7 @@ export default function Dashboard() {
                         )
                         .map((keyPair) => (
                           <KeyPair
+                            isCapitalized={autoCapitalization}
                             key={keyPair.id}
                             keyPair={keyPair}
                             modifyValue={listenChangeValue}
diff --git a/frontend/src/pages/settings/project/[id].tsx b/frontend/src/pages/settings/project/[id].tsx
index 14b2a3785..9e9aea4f6 100644
--- a/frontend/src/pages/settings/project/[id].tsx
+++ b/frontend/src/pages/settings/project/[id].tsx
@@ -12,6 +12,7 @@ import EnvironmentTable from '@app/components/basic/table/EnvironmentsTable';
 import ServiceTokenTable from '@app/components/basic/table/ServiceTokenTable';
 import NavHeader from '@app/components/navigation/NavHeader';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+import { Checkbox } from '@app/components/v2';
 import deleteEnvironment from '@app/pages/api/environments/deleteEnvironment';
 import updateEnvironment from '@app/pages/api/environments/updateEnvironment';
 
@@ -20,6 +21,7 @@ import getServiceTokens from '../../api/serviceToken/getServiceTokens';
 import deleteWorkspace from '../../api/workspace/deleteWorkspace';
 import getWorkspaces from '../../api/workspace/getWorkspaces';
 import renameWorkspace from '../../api/workspace/renameWorkspace';
+import toggleAutoCapitalization from '../../api/workspace/toggleAutoCapitalization';
 
 type EnvData = {
   name: string;
@@ -28,8 +30,10 @@ type EnvData = {
 
 export default function SettingsBasic() {
   const [buttonReady, setButtonReady] = useState(false);
+  const [autoCapitalizationButtonReady, setAutoCapitalizationButtonReady] = useState(false);
   const router = useRouter();
   const [workspaceName, setWorkspaceName] = useState('');
+  const [autoCapitalization, setAutoCapitalization] = useState(false);
   const [serviceTokens, setServiceTokens] = useState<any[]>([]);
   const [environments, setEnvironments] = useState<Array<EnvData>>([]);
   const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
@@ -63,6 +67,7 @@ export default function SettingsBasic() {
       userWorkspaces.forEach((userWorkspace) => {
         if (userWorkspace._id === workspaceId) {
           setWorkspaceName(userWorkspace.name);
+          setAutoCapitalization(userWorkspace.autoCapitalization ?? true);
           setEnvironments(userWorkspace.environments);
         }
       });
@@ -80,11 +85,22 @@ export default function SettingsBasic() {
     setWorkspaceName(newName);
   };
 
+  const toggleAutoCapitalizationCheckBox = (state: boolean) => {
+    setAutoCapitalizationButtonReady(true);
+    setAutoCapitalization(state);
+  };
+
   const submitChanges = (newWorkspaceName: string) => {
     renameWorkspace(workspaceId, newWorkspaceName);
     setButtonReady(false);
   };
 
+  const submitAutoCapitalizationChanges = () => {
+    toggleAutoCapitalization(workspaceId, autoCapitalization);
+    setAutoCapitalizationButtonReady(false);
+  };
+  
+
   const closeAddServiceTokenModal = () => {
     setIsAddServiceTokenDialogOpen(false);
   };
@@ -196,6 +212,28 @@ export default function SettingsBasic() {
                     </div>
                   </div>
                 </div>
+                <div className="bg-white/5 rounded-md px-6 pb-4 flex flex-col items-start w-full mb-6 pt-2">
+                  <p className="text-xl font-semibold mb-4 mt-2">{t('settings-project:auto-capitalization')}</p>
+                    <Checkbox
+                      className='data-[state=checked]:bg-primary' 
+                      id='autoCapitalization'
+                      isChecked={autoCapitalization}
+                      onCheckedChange={(state) => toggleAutoCapitalizationCheckBox(state as boolean)}
+                      > {t('settings-project:auto-capitalization-description')}</Checkbox>
+                  <div className="flex justify-start w-full">
+                    <div className="flex justify-start max-w-sm mt-4 mb-2">
+                      <Button
+                        text={t('common:save-changes') as string}
+                        onButtonPressed={() => submitAutoCapitalizationChanges()}
+                        color="mineshaft"
+                        size="md"
+                        active={autoCapitalizationButtonReady}
+                        iconDisabled={faCheck}
+                        textDisabled="Saved"
+                      />
+                    </div>
+                  </div>
+                </div>
                 <div className="bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start w-full mb-6 mt-4">
                   <p className="text-xl font-semibold self-start">{t('common:project-id')}</p>
                   <p className="text-base text-gray-400 font-normal self-start mt-4">

From 44b2bc1795fb48f7084ab6a30a0b9aee35c3637c Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Thu, 2 Feb 2023 12:57:54 -0800
Subject: [PATCH 04/52] modify method to check for cli updates

---
 cli/packages/util/check-for-update.go | 4 ++--
 cli/packages/util/vault.go            | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/cli/packages/util/check-for-update.go b/cli/packages/util/check-for-update.go
index 5fbf39a1e..a23b90ad1 100644
--- a/cli/packages/util/check-for-update.go
+++ b/cli/packages/util/check-for-update.go
@@ -2,10 +2,10 @@ package util
 
 import (
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io/ioutil"
 	"net/http"
-	"errors"
 )
 
 func CheckForUpdate() {
@@ -42,5 +42,5 @@ func getLatestTag(repoOwner string, repoName string) (string, error) {
 
 	json.Unmarshal(body, &tags)
 
-	return tags[0].Name, nil
+	return tags[0].Name[1:], nil
 }
diff --git a/cli/packages/util/vault.go b/cli/packages/util/vault.go
index 7e4ce1b31..0852e5f48 100644
--- a/cli/packages/util/vault.go
+++ b/cli/packages/util/vault.go
@@ -57,7 +57,7 @@ func fileKeyringPassphrasePrompt(prompt string) (string, error) {
 	if password, ok := os.LookupEnv("INFISICAL_VAULT_FILE_PASSPHRASE"); ok {
 		return password, nil
 	} else {
-		fmt.Println("You may set the `INFISICAL_VAULT_FILE_PASSPHRASE` environment variable to avoid typing password")
+		fmt.Println("You may set the environment variable `INFISICAL_VAULT_FILE_PASSPHRASE` with your password to avoid typing it")
 	}
 
 	fmt.Fprintf(os.Stderr, "%s:", prompt)
@@ -65,6 +65,7 @@ func fileKeyringPassphrasePrompt(prompt string) (string, error) {
 	if err != nil {
 		return "", err
 	}
+
 	fmt.Println("")
 	return string(b), nil
 }

From a4926d8833edc2de40ac1329479233501c537bd5 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Fri, 3 Feb 2023 12:32:54 +0700
Subject: [PATCH 05/52] Add back requestIp middleware

---
 backend/src/app.ts                                    | 2 +-
 backend/src/controllers/v1/membershipOrgController.ts | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/backend/src/app.ts b/backend/src/app.ts
index 066da16d4..79561d00c 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -73,7 +73,7 @@ app.use(
   })
 );
 
-// app.use(requestIp.mw())
+app.use(requestIp.mw())
 
 if (NODE_ENV === 'production') {
   // enable app-wide rate-limiting + helmet security
diff --git a/backend/src/controllers/v1/membershipOrgController.ts b/backend/src/controllers/v1/membershipOrgController.ts
index f3703b889..0040b583e 100644
--- a/backend/src/controllers/v1/membershipOrgController.ts
+++ b/backend/src/controllers/v1/membershipOrgController.ts
@@ -77,8 +77,6 @@ export const changeMembershipOrgRole = async (req: Request, res: Response) => {
 	// change role for (target) organization membership with id
 	// [membershipOrgId]
 
-	// TODO
-
 	let membershipToChangeRole;
 	// try {
 	// } catch (err) {

From bd230a8b7d700dd4bca8510c083396692dce8f43 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Fri, 3 Feb 2023 12:40:35 +0700
Subject: [PATCH 06/52] Remove comment from loginSRPDetail

---
 backend/src/models/LoginSRPDetail.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/backend/src/models/LoginSRPDetail.ts b/backend/src/models/LoginSRPDetail.ts
index 6b615db97..6f3b579bd 100644
--- a/backend/src/models/LoginSRPDetail.ts
+++ b/backend/src/models/LoginSRPDetail.ts
@@ -26,6 +26,4 @@ const loginSRPDetailSchema = new Schema<ILoginSRPDetail>(
 
 const LoginSRPDetail = model('LoginSRPDetail', loginSRPDetailSchema);
 
-// LoginSRPDetailSchema.index({ "expireAt": 1 }, { expireAfterSeconds: 0 });
-
 export default LoginSRPDetail;

From ee555f3f1531dbbe876fb36337192a8e8c597915 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Fri, 3 Feb 2023 12:46:14 +0700
Subject: [PATCH 07/52] Rename loginSRPDetail file

---
 backend/src/models/{LoginSRPDetail.ts => loginSRPDetail.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename backend/src/models/{LoginSRPDetail.ts => loginSRPDetail.ts} (100%)

diff --git a/backend/src/models/LoginSRPDetail.ts b/backend/src/models/loginSRPDetail.ts
similarity index 100%
rename from backend/src/models/LoginSRPDetail.ts
rename to backend/src/models/loginSRPDetail.ts

From 76d01270293fad6e30fe9150600a15ae26e1fdeb Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Fri, 3 Feb 2023 15:50:26 +0700
Subject: [PATCH 08/52] Add docs for PM2 integration, update
 Docker/Docker-Compose integration docs

---
 docs/integrations/overview.mdx                |  1 +
 .../integrations/platforms/docker-compose.mdx | 31 +++++------
 docs/integrations/platforms/docker.mdx        | 36 +++++++------
 docs/integrations/platforms/pm2.mdx           | 52 +++++++++++++++++++
 docs/mint.json                                |  3 +-
 5 files changed, 86 insertions(+), 37 deletions(-)
 create mode 100644 docs/integrations/platforms/pm2.mdx

diff --git a/docs/integrations/overview.mdx b/docs/integrations/overview.mdx
index 4f1e99227..36423e787 100644
--- a/docs/integrations/overview.mdx
+++ b/docs/integrations/overview.mdx
@@ -12,6 +12,7 @@ Missing an integration? Throw in a [request](https://github.com/Infisical/infisi
 | [Docker](/integrations/platforms/docker)                 | Platform  | Available   |
 | [Docker-Compose](/integrations/platforms/docker-compose) | Platform  | Available   |
 | [Kubernetes](/integrations/platforms/kubernetes)         | Platform  | Available   |
+| [PM2](/integrations/platforms/pm2)                       | Platform  | Available   |
 | [Heroku](/integrations/cloud/heroku)                     | Cloud     | Available   |
 | [Vercel](/integrations/cloud/vercel)                     | Cloud     | Available   |
 | [Netlify](/integrations/cloud/netlify)                   | Cloud     | Available   |
diff --git a/docs/integrations/platforms/docker-compose.mdx b/docs/integrations/platforms/docker-compose.mdx
index 698316582..e030869e3 100644
--- a/docs/integrations/platforms/docker-compose.mdx
+++ b/docs/integrations/platforms/docker-compose.mdx
@@ -1,45 +1,38 @@
 ---
 title: "Docker Compose"
-description: "How to use Infisical to inject environment variables into container defined in your Docker Compose file."
+description: "How to use Infisical to inject environment variables into services defined in your Docker Compose file."
 ---
 
-The Docker Compose integration enables you to inject environment variables from Infisical into the containers defined in your compose file.
+Prerequisites:
 
-## Add the CLI to your Dockerfile(s) start command
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 
-Follow the [guide to configure Infisical CLI](./docker) in your your Dockerfile first.
+## Configure the Infisical CLI for each service
 
-## Generate Infisical Token
+Follow this [guide](./docker) to configure the Infisical CLI for each service that you wish to inject environment variables into; you'll have to update the Dockerfile of each service.
 
-In order for Infisical CLI to authenticate and retrieve your project's secrets without exposing your login credentials, you must generate a Infisical Token.
-To learn how, visit [Infisical Token](../../getting-started/dashboard/token). Once you have generated the token, keep it handy.
+## Generate Infisical Tokens
 
-<Info>
-  If you have multiple services and they do not use the same secrets, you will
-  have to generate a Infisical Token for each service.
-</Info>
+Generate a unique [Infisical Token](https://infisical.com/docs/getting-started/dashboard/token) for each service.
 
-## Tell Docker Compose your Infisical Token
+## Add Infisical Tokens to your Docker Compose file
 
-For each service you want to inject secrets into, set an environment variable called `INFISICAL_TOKEN` equal to a helpful identifier variable.
-This will ensure that you can set Infisical Tokens for multiple services.
+For each service you want to inject secrets into, set an environment variable called `INFISICAL_TOKEN` equal to a unique identifier variable.
 
-For the example below, we have set `INFISICAL_TOKEN_FOR_WEB` and `INFISICAL_TOKEN_FOR_API` as the `INFISICAL_TOKEN` for the corresponding service.
+In the example below, we set `INFISICAL_TOKEN_FOR_WEB` and `INFISICAL_TOKEN_FOR_API` as the `INFISICAL_TOKEN` for the services.
 
 ```yaml
 # Example Docker Compose file
 services:
   web:
     build: .
-    image: auledge-frontend
-    container_name: auledge-frontend
+    image: example-service-1
     environment:
       - INFISICAL_TOKEN=${INFISICAL_TOKEN_FOR_WEB}
 
   api:
     build: .
-    image: auledge-backend
-    container_name: auledge-backend
+    image: example-service-2
     environment:
       - INFISICAL_TOKEN=${INFISICAL_TOKEN_FOR_API}
 ```
diff --git a/docs/integrations/platforms/docker.mdx b/docs/integrations/platforms/docker.mdx
index 8f53336ed..b4224d6d0 100644
--- a/docs/integrations/platforms/docker.mdx
+++ b/docs/integrations/platforms/docker.mdx
@@ -3,9 +3,11 @@ title: "Docker"
 description: "How to use Infisical to inject environment variables into a Docker container."
 ---
 
-Infisical can be used in a Dockerfile to inject environment variables into a Docker container.
+Prerequisites:
 
-## Add the CLI to your Dockerfile
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+
+## Add the Infisical CLI to your Dockerfile
 
 <Tabs>
 	 <Tab title="Alpine">
@@ -32,32 +34,32 @@ Infisical can be used in a Dockerfile to inject environment variables into a Doc
    </Tab>
 </Tabs>
 
-  ## Modify your Dockerfile start command 
+## Modify the start command in your Dockerfile
 
-  To make your Docker container consume Infisical secrets, you can start your application with Infisical.
-  This will automatically pull the necessary secrets and make them available to your application as if they were natively exposed within the container.
+Starting your service with the Infisical CLI pulls your secrets from Infisical and injects them into your service.
 
-  ```dockerfile
-  CMD ["infisical", "run", "---", "[your application start command]"]
+```dockerfile
+CMD ["infisical", "run", "---", "[your service start command]"]
 
-  # example with single single command 
-  CMD ["infisical", "run", "---", "npm run start"]
+# example with single single command
+CMD ["infisical", "run", "---", "npm run start"]
 
-  # example with multiple commands 
-  CMD ["infisical", "run", "--command", "npm run start && ..."]
-  ```
+# example with multiple commands
+CMD ["infisical", "run", "--command", "npm run start && ..."]
+```
 
-  View more options for the `run` command [here](../../cli/commands/run)
+## Generate an Infisical Token
+
+Head to your project settings in Infisical Cloud to generate an [Infisical Token](https://infisical.com/docs/getting-started/dashboard/token).
 
 ## Feed Docker your Infisical Token
 
-The CLI looks out for an environment variable called `INFISICAL_TOKEN`. If the token is detected, the CLI will authenticate, retrieve, and inject the environment variables which the token is authorized for.
-
 ```bash
  docker run --env INFISICAL_TOKEN=[token]...
 ```
 
-## Generate an Infisical Token
+<Info>
 
-[Generate an Infisical Token](../../getting-started/dashboard/token) and keep it handy.
+The Infisical CLI uses the detected `INFISICAL_TOKEN` environment variable to authenticate, retrieve, and inject the environment variables which the token is authorized for.
 
+</Info>
diff --git a/docs/integrations/platforms/pm2.mdx b/docs/integrations/platforms/pm2.mdx
new file mode 100644
index 000000000..e9b04bbb2
--- /dev/null
+++ b/docs/integrations/platforms/pm2.mdx
@@ -0,0 +1,52 @@
+---
+title: "PM2"
+description: "How to use Infisical to inject environment variables and secrets with PM2 into a Node.js app"
+---
+
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
+
+## Initialize Infisical for your Node.js app
+
+```bash
+# navigate to the root of your of your project
+cd /path/to/project
+
+# then initialize infisical
+infisical init
+```
+
+## Create a bash or js script
+
+<CodeGroup>
+
+```bash infisical-run.sh
+infisical run -- npm start
+```
+
+```js infisical-run.js
+const spawn = require("child_process").spawn;
+
+const infisical = spawn("infisical", ["run", "--", "npm", "start"]);
+
+infisical.stdout.on("data", (data) => console.log(`${data}`));
+infisical.stderr.on("data", (data) => console.error(`${data}`));
+```
+
+</CodeGroup>
+
+## Start your application as usual but with the script
+
+<CodeGroup>
+
+```bash infisical-run.sh
+pm2 start infisical-run.sh
+```
+
+```bash infisical-run.js
+pm2 start infisical-run.js
+```
+
+</CodeGroup>
diff --git a/docs/mint.json b/docs/mint.json
index 4ce1d6c03..441769152 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -209,7 +209,8 @@
       "pages": [
         "integrations/platforms/docker",
         "integrations/platforms/docker-compose",
-        "integrations/platforms/kubernetes"
+        "integrations/platforms/kubernetes",
+        "integrations/platforms/pm2"
       ]
     },
     {

From 3859a7e09baccf54ea06f55994b022c09e593c63 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Fri, 3 Feb 2023 22:16:31 +0530
Subject: [PATCH 09/52] feat(ui): added new react-query hooks for settings page

---
 frontend/package-lock.json                    | 273 ++++++++++++------
 frontend/package.json                         |   5 +-
 frontend/src/hooks/api/index.tsx              |   6 +-
 frontend/src/hooks/api/keys/index.tsx         |   1 +
 frontend/src/hooks/api/keys/queries.tsx       |  24 ++
 frontend/src/hooks/api/keys/types.ts          |  22 ++
 frontend/src/hooks/api/serviceTokens/index.ts |   1 +
 .../src/hooks/api/serviceTokens/queries.tsx   |  60 ++++
 frontend/src/hooks/api/serviceTokens/types.ts |  28 ++
 .../src/hooks/api/subscriptions/index.tsx     |   1 +
 .../src/hooks/api/subscriptions/queries.tsx   |  30 ++
 frontend/src/hooks/api/subscriptions/types.ts |  25 ++
 frontend/src/hooks/api/types.ts               |  13 +
 frontend/src/hooks/api/workspace/index.tsx    |   8 +
 frontend/src/hooks/api/workspace/queries.tsx  |  94 ++++++
 frontend/src/hooks/api/workspace/types.ts     |  29 ++
 frontend/src/hooks/usePopUp.tsx               |   6 +-
 17 files changed, 529 insertions(+), 97 deletions(-)
 create mode 100644 frontend/src/hooks/api/keys/index.tsx
 create mode 100644 frontend/src/hooks/api/keys/queries.tsx
 create mode 100644 frontend/src/hooks/api/keys/types.ts
 create mode 100644 frontend/src/hooks/api/serviceTokens/index.ts
 create mode 100644 frontend/src/hooks/api/serviceTokens/queries.tsx
 create mode 100644 frontend/src/hooks/api/serviceTokens/types.ts
 create mode 100644 frontend/src/hooks/api/subscriptions/index.tsx
 create mode 100644 frontend/src/hooks/api/subscriptions/queries.tsx
 create mode 100644 frontend/src/hooks/api/subscriptions/types.ts
 create mode 100644 frontend/src/hooks/api/types.ts
 create mode 100644 frontend/src/hooks/api/workspace/index.tsx
 create mode 100644 frontend/src/hooks/api/workspace/queries.tsx
 create mode 100644 frontend/src/hooks/api/workspace/types.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f5bb934fe..283c69b53 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.1.2",
         "@fortawesome/react-fontawesome": "^0.1.19",
         "@headlessui/react": "^1.6.6",
+        "@hookform/resolvers": "^2.9.10",
         "@radix-ui/react-accordion": "^1.1.0",
         "@radix-ui/react-alert-dialog": "^1.0.2",
         "@radix-ui/react-checkbox": "^1.0.1",
@@ -51,6 +52,7 @@
         "react-code-input": "^3.10.1",
         "react-dom": "^17.0.2",
         "react-grid-layout": "^1.3.4",
+        "react-hook-form": "^7.43.0",
         "react-i18next": "^12.1.1",
         "react-mailchimp-subscribe": "^2.1.3",
         "react-markdown": "^8.0.3",
@@ -64,7 +66,8 @@
         "tweetnacl-util": "^0.15.1",
         "uuid": "^8.3.2",
         "uuidv4": "^6.2.13",
-        "yaml": "^2.2.0"
+        "yaml": "^2.2.0",
+        "yup": "^0.32.11"
       },
       "devDependencies": {
         "@storybook/addon-essentials": "^7.0.0-beta.30",
@@ -108,7 +111,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
       "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.1.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -121,7 +123,6 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
       "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.0",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -157,7 +158,6 @@
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.5.tgz",
       "integrity": "sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -166,7 +166,6 @@
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.5.tgz",
       "integrity": "sha512-UdOWmk4pNWTm/4DlPUl/Pt4Gz4rcEMb7CY0Y3eJl5Yz1vI8ZJGmHWaVE55LoxRjdpx0z259GE9U5STA9atUinQ==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -196,7 +195,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -212,14 +210,12 @@
     "node_modules/@babel/core/node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -265,7 +261,6 @@
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
       "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.20.5",
         "@babel/helper-validator-option": "^7.18.6",
@@ -284,7 +279,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -293,7 +287,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -301,8 +294,7 @@
     "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
       "version": "7.20.12",
@@ -461,7 +453,6 @@
       "version": "7.20.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz",
       "integrity": "sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -535,7 +526,6 @@
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
       "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.20.2"
       },
@@ -586,7 +576,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
       "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -610,7 +599,6 @@
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.6.tgz",
       "integrity": "sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.20.5",
@@ -2897,6 +2885,14 @@
         "react-dom": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "2.9.10",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.10.tgz",
+      "integrity": "sha512-JIL1DgJIlH9yuxcNGtyhsWX/PgNltz+5Gr6+8SX9fhXc/hPbEIk6wPI82nhgvp3uUb6ZfAM5mqg/x7KR7NAb+A==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -7005,8 +7001,7 @@
     "node_modules/@types/lodash": {
       "version": "4.14.191",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
-      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
-      "dev": true
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
     },
     "node_modules/@types/mdast": {
       "version": "3.0.10",
@@ -8997,7 +8992,6 @@
       "version": "4.21.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
       "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10680,8 +10674,7 @@
     "node_modules/electron-to-chromium": {
       "version": "1.4.284",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
-      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==",
-      "dev": true
+      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -10977,7 +10970,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -12818,7 +12810,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -14991,7 +14982,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -15210,6 +15200,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
@@ -16183,6 +16178,11 @@
         "object-assign": "^4.1.0"
       }
     },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -16464,8 +16464,7 @@
     "node_modules/node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
-      "dev": true
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
     },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
@@ -17625,6 +17624,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "node_modules/property-information": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
@@ -18142,6 +18146,21 @@
         "react-dom": ">= 16.3.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.43.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.0.tgz",
+      "integrity": "sha512-/rVEz7T0gLdSFwPqutJ1kn2e0sQNyb9ci/hmwEYr2YG0KF/LSuRLvNrf9QWJM+gj88CjDpDW5Bh/1AD7B2+z9Q==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.1.tgz",
@@ -21168,6 +21187,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -21404,7 +21428,7 @@
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
       "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -21730,7 +21754,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
       "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -22480,6 +22503,23 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
     }
   },
   "dependencies": {
@@ -22487,7 +22527,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
       "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
-      "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.1.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -22497,7 +22536,6 @@
           "version": "0.1.1",
           "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
           "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
-          "dev": true,
           "requires": {
             "@jridgewell/set-array": "^1.0.0",
             "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -22525,14 +22563,12 @@
     "@babel/compat-data": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.5.tgz",
-      "integrity": "sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==",
-      "dev": true
+      "integrity": "sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g=="
     },
     "@babel/core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.5.tgz",
       "integrity": "sha512-UdOWmk4pNWTm/4DlPUl/Pt4Gz4rcEMb7CY0Y3eJl5Yz1vI8ZJGmHWaVE55LoxRjdpx0z259GE9U5STA9atUinQ==",
-      "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -22555,7 +22591,6 @@
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
           "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -22563,14 +22598,12 @@
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -22606,7 +22639,6 @@
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz",
       "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==",
-      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.20.5",
         "@babel/helper-validator-option": "^7.18.6",
@@ -22619,7 +22651,6 @@
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
           "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "dev": true,
           "requires": {
             "yallist": "^3.0.2"
           }
@@ -22627,14 +22658,12 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         },
         "yallist": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "dev": true
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
         }
       }
     },
@@ -22753,7 +22782,6 @@
       "version": "7.20.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz",
       "integrity": "sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==",
-      "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -22809,7 +22837,6 @@
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
       "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.20.2"
       }
@@ -22844,8 +22871,7 @@
     "@babel/helper-validator-option": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
-      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
-      "dev": true
+      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw=="
     },
     "@babel/helper-wrap-function": {
       "version": "7.20.5",
@@ -22863,7 +22889,6 @@
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.6.tgz",
       "integrity": "sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w==",
-      "dev": true,
       "requires": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.20.5",
@@ -24061,7 +24086,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
       "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.0",
@@ -24366,7 +24392,14 @@
     "@headlessui/react": {
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.6.6.tgz",
-      "integrity": "sha512-MFJtmj9Xh/hhBMhLccGbBoSk+sk61BlP6sJe4uQcVMtXZhCgGqd2GyIQzzmsdPdTEWGSF434CBi8mnhR6um46Q=="
+      "integrity": "sha512-MFJtmj9Xh/hhBMhLccGbBoSk+sk61BlP6sJe4uQcVMtXZhCgGqd2GyIQzzmsdPdTEWGSF434CBi8mnhR6um46Q==",
+      "requires": {}
+    },
+    "@hookform/resolvers": {
+      "version": "2.9.10",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.10.tgz",
+      "integrity": "sha512-JIL1DgJIlH9yuxcNGtyhsWX/PgNltz+5Gr6+8SX9fhXc/hPbEIk6wPI82nhgvp3uUb6ZfAM5mqg/x7KR7NAb+A==",
+      "requires": {}
     },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
@@ -27340,8 +27373,7 @@
     "@types/lodash": {
       "version": "4.14.191",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
-      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
-      "dev": true
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
     },
     "@types/mdast": {
       "version": "3.0.10",
@@ -28016,7 +28048,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -28150,7 +28183,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-align": {
       "version": "3.0.1",
@@ -28444,7 +28478,8 @@
     "axios-auth-refresh": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/axios-auth-refresh/-/axios-auth-refresh-3.3.3.tgz",
-      "integrity": "sha512-2IbDhJ/h6ddNBBnnzn1VFK/qx17pE9aVqiafB8rx5LVHsJ1HtFpUGkbXY7PzTG+8P9HJWcyA3fNZl9BikSuilg=="
+      "integrity": "sha512-2IbDhJ/h6ddNBBnnzn1VFK/qx17pE9aVqiafB8rx5LVHsJ1HtFpUGkbXY7PzTG+8P9HJWcyA3fNZl9BikSuilg==",
+      "requires": {}
     },
     "axobject-query": {
       "version": "3.1.1",
@@ -28459,7 +28494,8 @@
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
       "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "babel-loader": {
       "version": "9.1.2",
@@ -28838,7 +28874,6 @@
       "version": "4.21.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
       "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
-      "dev": true,
       "requires": {
         "caniuse-lite": "^1.0.30001400",
         "electron-to-chromium": "^1.4.251",
@@ -29668,7 +29703,8 @@
     "cva": {
       "version": "npm:class-variance-authority@0.4.0",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.4.0.tgz",
-      "integrity": "sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ=="
+      "integrity": "sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==",
+      "requires": {}
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -30121,8 +30157,7 @@
     "electron-to-chromium": {
       "version": "1.4.284",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
-      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==",
-      "dev": true
+      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
     "emoji-regex": {
       "version": "9.2.2",
@@ -30368,8 +30403,7 @@
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -30632,7 +30666,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.6.0.tgz",
       "integrity": "sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-import-resolver-node": {
       "version": "0.3.7",
@@ -30890,13 +30925,15 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-simple-import-sort": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-8.0.0.tgz",
       "integrity": "sha512-bXgJQ+lqhtQBCuWY/FUWdB27j4+lqcvXv5rUARkzbeWLwea+S5eBZEQrhnO+WgX3ZoJHVj0cn943iyXwByHHQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-storybook": {
       "version": "0.6.10",
@@ -31760,8 +31797,7 @@
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -32325,7 +32361,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -33339,8 +33376,7 @@
     "json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -33508,6 +33544,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
@@ -33638,7 +33679,8 @@
       "version": "7.1.8",
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.8.tgz",
       "integrity": "sha512-rRSa1aFmFnpDRFAhv5vIkWM4nPaoB9vnzIjuIKa1wGupfn2hdCNeaQHKpu4/muoc8n8J7yowjTP2oncA4/Rbgg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "md5.js": {
       "version": "1.3.5",
@@ -34155,6 +34197,11 @@
         "object-assign": "^4.1.0"
       }
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -34344,8 +34391,7 @@
     "node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
-      "dev": true
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
     },
     "normalize-package-data": {
       "version": "2.5.0",
@@ -34935,7 +34981,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -35044,7 +35091,8 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.2.tgz",
       "integrity": "sha512-5RjUbWRe305pUpc48MosoIp6uxZvZxrM6GyOgsbGLTce+ehePKNm7ziW2dLG2air9aXbGuXlHVSQQw4Lbosq3w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "pretty-error": {
       "version": "4.0.0",
@@ -35132,6 +35180,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "property-information": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
@@ -35437,7 +35490,8 @@
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
       "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "react-docgen": {
       "version": "5.4.3",
@@ -35469,7 +35523,8 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
       "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "react-dom": {
       "version": "17.0.2",
@@ -35521,6 +35576,12 @@
         "react-resizable": "^3.0.4"
       }
     },
+    "react-hook-form": {
+      "version": "7.43.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.0.tgz",
+      "integrity": "sha512-/rVEz7T0gLdSFwPqutJ1kn2e0sQNyb9ci/hmwEYr2YG0KF/LSuRLvNrf9QWJM+gj88CjDpDW5Bh/1AD7B2+z9Q==",
+      "requires": {}
+    },
     "react-i18next": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.1.tgz",
@@ -35534,7 +35595,8 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.1.tgz",
       "integrity": "sha512-cxKSeFTf7jpSSVddm66sKdolG90qURAX3g1roTeaN6x0YEbtWc8JpmFN9+yIqLNH2uEkYerWLtJZIXRIFuBKrg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "react-is": {
       "version": "16.13.1",
@@ -35649,7 +35711,8 @@
     "react-table": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz",
-      "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA=="
+      "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==",
+      "requires": {}
     },
     "read-cache": {
       "version": "1.0.0",
@@ -35805,7 +35868,8 @@
     "redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
-      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q=="
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "requires": {}
     },
     "regenerate": {
       "version": "1.4.2",
@@ -37258,7 +37322,8 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "style-to-object": {
       "version": "0.3.0",
@@ -37288,7 +37353,8 @@
     "styled-jsx": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.7.tgz",
-      "integrity": "sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA=="
+      "integrity": "sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==",
+      "requires": {}
     },
     "stylis": {
       "version": "4.0.13",
@@ -37750,6 +37816,11 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -37928,7 +37999,7 @@
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
       "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
-      "dev": true
+      "devOptional": true
     },
     "uc.micro": {
       "version": "1.0.6",
@@ -38164,7 +38235,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
       "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
-      "dev": true,
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -38202,12 +38272,14 @@
     "use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
-      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "requires": {}
     },
     "use-memo-one": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
-      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ=="
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "requires": {}
     },
     "use-sidecar": {
       "version": "1.1.2",
@@ -38221,7 +38293,8 @@
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
     },
     "util": {
       "version": "0.12.5",
@@ -38412,7 +38485,8 @@
           "version": "1.8.0",
           "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
           "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "eslint-scope": {
           "version": "5.1.1",
@@ -38638,7 +38712,8 @@
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
       "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "xtend": {
       "version": "4.0.2",
@@ -38698,6 +38773,20 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index f97edd68f..322e60f31 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.1.19",
     "@headlessui/react": "^1.6.6",
+    "@hookform/resolvers": "^2.9.10",
     "@radix-ui/react-accordion": "^1.1.0",
     "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.1",
@@ -58,6 +59,7 @@
     "react-code-input": "^3.10.1",
     "react-dom": "^17.0.2",
     "react-grid-layout": "^1.3.4",
+    "react-hook-form": "^7.43.0",
     "react-i18next": "^12.1.1",
     "react-mailchimp-subscribe": "^2.1.3",
     "react-markdown": "^8.0.3",
@@ -71,7 +73,8 @@
     "tweetnacl-util": "^0.15.1",
     "uuid": "^8.3.2",
     "uuidv4": "^6.2.13",
-    "yaml": "^2.2.0"
+    "yaml": "^2.2.0",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.0-beta.30",
diff --git a/frontend/src/hooks/api/index.tsx b/frontend/src/hooks/api/index.tsx
index 9df70dcf0..424fb514a 100644
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -1 +1,5 @@
-export { useGetAuthToken } from './auth';
+export * from './auth';
+export * from './keys';
+export * from './serviceTokens';
+export * from './subscriptions';
+export * from './workspace';
diff --git a/frontend/src/hooks/api/keys/index.tsx b/frontend/src/hooks/api/keys/index.tsx
new file mode 100644
index 000000000..23ffdf8d1
--- /dev/null
+++ b/frontend/src/hooks/api/keys/index.tsx
@@ -0,0 +1 @@
+export { useGetUserWsKey } from './queries';
diff --git a/frontend/src/hooks/api/keys/queries.tsx b/frontend/src/hooks/api/keys/queries.tsx
new file mode 100644
index 000000000..d37c73f13
--- /dev/null
+++ b/frontend/src/hooks/api/keys/queries.tsx
@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { UserWsKeyPair } from './types';
+
+const encKeyKeys = {
+  getUserWorkspaceKey: (workspaceID: string) => ['worksapce-key-pair', { workspaceID }] as const
+};
+
+const fetchUserWsKey = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ latestKey: UserWsKeyPair }>(
+    `/api/v1/key/${workspaceID}/latest`
+  );
+
+  return data.latestKey;
+};
+
+export const useGetUserWsKey = (workspaceID: string) =>
+  useQuery({
+    queryKey: encKeyKeys.getUserWorkspaceKey(workspaceID),
+    queryFn: () => fetchUserWsKey(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
diff --git a/frontend/src/hooks/api/keys/types.ts b/frontend/src/hooks/api/keys/types.ts
new file mode 100644
index 000000000..bad61b5dd
--- /dev/null
+++ b/frontend/src/hooks/api/keys/types.ts
@@ -0,0 +1,22 @@
+export type UserWsKeyPair = {
+  _id: string;
+  encryptedKey: string;
+  nonce: string;
+  sender: Sender;
+  receiver: string;
+  workspace: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type Sender = {
+  _id: string;
+  email: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+  firstName: string;
+  lastName: string;
+  publicKey: string;
+};
diff --git a/frontend/src/hooks/api/serviceTokens/index.ts b/frontend/src/hooks/api/serviceTokens/index.ts
new file mode 100644
index 000000000..548ad313a
--- /dev/null
+++ b/frontend/src/hooks/api/serviceTokens/index.ts
@@ -0,0 +1 @@
+export { useCreateServiceToken, useDeleteServiceToken, useGetUserWsServiceTokens } from './queries';
diff --git a/frontend/src/hooks/api/serviceTokens/queries.tsx b/frontend/src/hooks/api/serviceTokens/queries.tsx
new file mode 100644
index 000000000..70e0736d3
--- /dev/null
+++ b/frontend/src/hooks/api/serviceTokens/queries.tsx
@@ -0,0 +1,60 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateServiceTokenDTO,
+  CreateServiceTokenRes,
+  DeleteServiceTokenRes,
+  ServiceToken
+} from './types';
+
+const serviceTokenKeys = {
+  getAllWorkspaceServiceToken: (workspaceID: string) => [{ workspaceID }, 'service-tokens'] as const
+};
+
+const fetchWorkspaceServiceTokens = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ serviceTokenData: ServiceToken[] }>(
+    `/api/v2/workspace/${workspaceID}/service-token-data`
+  );
+
+  return data.serviceTokenData;
+};
+
+type UseGetWorkspaceServiceTokensProps = { workspaceID: string };
+
+export const useGetUserWsServiceTokens = ({ workspaceID }: UseGetWorkspaceServiceTokensProps) =>
+  useQuery({
+    queryKey: serviceTokenKeys.getAllWorkspaceServiceToken(workspaceID),
+    queryFn: () => fetchWorkspaceServiceTokens(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
+
+// mutation
+export const useCreateServiceToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<CreateServiceTokenRes, {}, CreateServiceTokenDTO>({
+    mutationFn: async (body) => {
+      const { data } = await apiRequest.post('/api/v2/service-token/', body);
+      return data;
+    },
+    onSuccess: ({ serviceTokenData: { workspace } }) => {
+      queryClient.invalidateQueries(serviceTokenKeys.getAllWorkspaceServiceToken(workspace));
+    }
+  });
+};
+
+export const useDeleteServiceToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteServiceTokenRes, {}, string>({
+    mutationFn: async (serviceTokenId) => {
+      const { data } = await apiRequest.delete(`/api/v2/service-token/${serviceTokenId}`);
+      return data;
+    },
+    onSuccess: ({ serviceTokenData: { workspace } }) => {
+      queryClient.invalidateQueries(serviceTokenKeys.getAllWorkspaceServiceToken(workspace));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/serviceTokens/types.ts b/frontend/src/hooks/api/serviceTokens/types.ts
new file mode 100644
index 000000000..a1eb73743
--- /dev/null
+++ b/frontend/src/hooks/api/serviceTokens/types.ts
@@ -0,0 +1,28 @@
+export type ServiceToken = {
+  _id: string;
+  name: string;
+  workspace: string;
+  environment: string;
+  user: string;
+  expiresAt: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type CreateServiceTokenDTO = {
+  name: string;
+  workspaceId: string;
+  environment: string;
+  expiresIn: number;
+  encryptedKey: string;
+  iv: string;
+  tag: string;
+};
+
+export type CreateServiceTokenRes = {
+  serviceToken: string;
+  serviceTokenData: ServiceToken;
+};
+
+export type DeleteServiceTokenRes = { serviceTokenData: ServiceToken };
diff --git a/frontend/src/hooks/api/subscriptions/index.tsx b/frontend/src/hooks/api/subscriptions/index.tsx
new file mode 100644
index 000000000..4bb98e85a
--- /dev/null
+++ b/frontend/src/hooks/api/subscriptions/index.tsx
@@ -0,0 +1 @@
+export { useGetOrgSubscription } from './queries';
diff --git a/frontend/src/hooks/api/subscriptions/queries.tsx b/frontend/src/hooks/api/subscriptions/queries.tsx
new file mode 100644
index 000000000..4a65912ef
--- /dev/null
+++ b/frontend/src/hooks/api/subscriptions/queries.tsx
@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { GetSubscriptionPlan } from './types';
+
+// import { Workspace } from './types';
+
+const subscriptionKeys = {
+  getOrgSubsription: (orgID: string) => ['subscription', { orgID }] as const
+};
+
+const fetchOrgSubscription = async (orgID: string) => {
+  const { data } = await apiRequest.get<{ subscriptions: GetSubscriptionPlan }>(
+    `/api/v1/organization/${orgID}/subscriptions`
+  );
+
+  return data.subscriptions;
+};
+
+type UseGetOrgSubscriptionProps = {
+  orgID: string;
+};
+
+export const useGetOrgSubscription = ({ orgID }: UseGetOrgSubscriptionProps) =>
+  useQuery({
+    queryKey: subscriptionKeys.getOrgSubsription(orgID),
+    queryFn: () => fetchOrgSubscription(orgID),
+    enabled: Boolean(orgID)
+  });
diff --git a/frontend/src/hooks/api/subscriptions/types.ts b/frontend/src/hooks/api/subscriptions/types.ts
new file mode 100644
index 000000000..f9dfcbf0b
--- /dev/null
+++ b/frontend/src/hooks/api/subscriptions/types.ts
@@ -0,0 +1,25 @@
+export type GetSubscriptionPlan = {
+  data: { plan: SubscriptionPlan }[];
+};
+
+export type SubscriptionPlan = {
+  id: string;
+  object: string;
+  active: boolean;
+  aggregate_usage: unknown;
+  amount: 1400;
+  amount_decimal: 1400;
+  billing_scheme: string;
+  created: 1674833546;
+  currency: string;
+  interval: string;
+  interval_count: 1;
+  livemode: false;
+  metadata: {};
+  nickname: null;
+  product: string;
+  tiers_mode: unknown;
+  transform_usage: unknown;
+  trial_period_days: unknown;
+  usage_type: string;
+};
diff --git a/frontend/src/hooks/api/types.ts b/frontend/src/hooks/api/types.ts
new file mode 100644
index 000000000..cc7498b72
--- /dev/null
+++ b/frontend/src/hooks/api/types.ts
@@ -0,0 +1,13 @@
+export type { GetAuthTokenAPI } from './auth/types';
+export type { UserWsKeyPair } from './keys/types';
+export type { CreateServiceTokenDTO, ServiceToken } from './serviceTokens/types';
+export type { GetSubscriptionPlan, SubscriptionPlan } from './subscriptions/types';
+export type {
+  CreateEnvironmentDTO,
+  DeleteEnvironmentDTO,
+  DeleteWorkspaceDTO,
+  RenameWorkspaceDTO,
+  UpdateEnvironmentDTO,
+  Workspace,
+  WorkspaceEnv
+} from './workspace/types';
diff --git a/frontend/src/hooks/api/workspace/index.tsx b/frontend/src/hooks/api/workspace/index.tsx
new file mode 100644
index 000000000..5de95ab05
--- /dev/null
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -0,0 +1,8 @@
+export {
+  useCreateWsEnvironment,
+  useDeleteWorkspace,
+  useDeleteWsEnvironment,
+  useGetUserWorkspaces,
+  useRenameWorkspace,
+  useUpdateWsEnvironment
+} from './queries';
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
new file mode 100644
index 000000000..b0566a43d
--- /dev/null
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -0,0 +1,94 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateEnvironmentDTO,
+  DeleteEnvironmentDTO,
+  DeleteWorkspaceDTO,
+  RenameWorkspaceDTO,
+  UpdateEnvironmentDTO,
+  Workspace
+} from './types';
+
+const workspaceKeys = {
+  getAllUserWorkspace: ['workspaces'] as const
+};
+
+const fetchUserWorkspaces = async () => {
+  const { data } = await apiRequest.get<{ workspaces: Workspace[] }>('/api/v1/workspace');
+
+  return data.workspaces;
+};
+
+export const useGetUserWorkspaces = () =>
+  useQuery(workspaceKeys.getAllUserWorkspace, fetchUserWorkspaces);
+
+// mutation
+export const useRenameWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, RenameWorkspaceDTO>({
+    mutationFn: ({ workspaceID, newWorkspaceName }) =>
+      apiRequest.post(`/api/v1/workspace/${workspaceID}/name`, { name: newWorkspaceName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useDeleteWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, DeleteWorkspaceDTO>({
+    mutationFn: ({ workspaceID }) => apiRequest.delete(`/api/v1/workspace/${workspaceID}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useCreateWsEnvironment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, CreateEnvironmentDTO>({
+    mutationFn: ({ workspaceID, environmentName, environmentSlug }) =>
+      apiRequest.post(`/api/v2/workspace/${workspaceID}/environments`, {
+        environmentName,
+        environmentSlug
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useUpdateWsEnvironment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, UpdateEnvironmentDTO>({
+    mutationFn: ({ workspaceID, environmentName, environmentSlug, oldEnvironmentSlug }) =>
+      apiRequest.put(`/api/v2/workspace/${workspaceID}/environments`, {
+        environmentName,
+        environmentSlug,
+        oldEnvironmentSlug
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useDeleteWsEnvironment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, DeleteEnvironmentDTO>({
+    mutationFn: ({ workspaceID, environmentSlug }) =>
+      apiRequest.delete(`/api/v2/workspace/${workspaceID}/environments`, {
+        data: { environmentSlug }
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/workspace/types.ts b/frontend/src/hooks/api/workspace/types.ts
new file mode 100644
index 000000000..cc4709477
--- /dev/null
+++ b/frontend/src/hooks/api/workspace/types.ts
@@ -0,0 +1,29 @@
+export type Workspace = {
+  __v: number;
+  _id: string;
+  name: string;
+  organization: string;
+  environments: WorkspaceEnv[];
+};
+
+export type WorkspaceEnv = { name: string; slug: string };
+
+// mutation dto
+export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
+
+export type DeleteWorkspaceDTO = { workspaceID: string };
+
+export type CreateEnvironmentDTO = {
+  workspaceID: string;
+  environmentSlug: string;
+  environmentName: string;
+};
+
+export type UpdateEnvironmentDTO = {
+  workspaceID: string;
+  oldEnvironmentSlug: string;
+  environmentSlug: string;
+  environmentName: string;
+};
+
+export type DeleteEnvironmentDTO = { workspaceID: string; environmentSlug: string };
diff --git a/frontend/src/hooks/usePopUp.tsx b/frontend/src/hooks/usePopUp.tsx
index b0c4163be..52839142d 100644
--- a/frontend/src/hooks/usePopUp.tsx
+++ b/frontend/src/hooks/usePopUp.tsx
@@ -21,7 +21,7 @@ interface UsePopUpReturn<T extends Readonly<string[]> | UsePopUpProps[]> {
   popUp: UsePopUpState<T>;
   handlePopUpOpen: (popUpName: keyof UsePopUpState<T>, data?: unknown) => void;
   handlePopUpClose: (popUpName: keyof UsePopUpState<T>) => void;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<T>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<T>, state?: boolean) => void;
 }
 
 /**
@@ -50,10 +50,10 @@ export const usePopUp = <T extends Readonly<string[]> | UsePopUpProps[]>(
     setPopUp((oldState) => ({ ...oldState, [popUpName]: { isOpen: false } }));
   }, []);
 
-  const handlePopUpToggle = useCallback((popUpName: keyof UsePopUpState<T>) => {
+  const handlePopUpToggle = useCallback((popUpName: keyof UsePopUpState<T>, state?: boolean) => {
     setPopUp((oldState) => ({
       ...oldState,
-      [popUpName]: { isOpen: !oldState[popUpName].isOpen }
+      [popUpName]: { isOpen: typeof state === 'undefined' ? !oldState[popUpName].isOpen : state }
     }));
   }, []);
 

From 48cd84ce77cde98165a856a19cb0c3cd22ae2951 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Fri, 3 Feb 2023 22:17:54 +0530
Subject: [PATCH 10/52] feat(ui): fine tuning components library with exiting
 app design

---
 frontend/src/components/v2/Button/Button.tsx  | 19 ++--
 frontend/src/components/v2/Card/Card.tsx      |  4 +-
 .../DeleteActionModal/DeleteActionModal.tsx   | 89 +++++++++++++++++++
 .../components/v2/DeleteActionModal/index.tsx |  1 +
 .../components/v2/FormControl/FormControl.tsx | 10 ++-
 .../components/v2/IconButton/IconButton.tsx   |  2 +-
 frontend/src/components/v2/Input/Input.tsx    |  5 +-
 frontend/src/components/v2/Modal/Modal.tsx    | 16 ++--
 frontend/src/components/v2/Modal/index.tsx    |  4 +-
 frontend/src/components/v2/Select/Select.tsx  | 22 ++---
 frontend/src/components/v2/Table/Table.tsx    | 28 +++---
 .../v2/UpgradePlanModal/UpgradePlanModal.tsx  | 36 ++++++++
 .../components/v2/UpgradePlanModal/index.tsx  |  1 +
 frontend/src/components/v2/index.tsx          |  2 +
 14 files changed, 192 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
 create mode 100644 frontend/src/components/v2/DeleteActionModal/index.tsx
 create mode 100644 frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
 create mode 100644 frontend/src/components/v2/UpgradePlanModal/index.tsx

diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 21548d0e3..27f34838d 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -18,7 +18,8 @@ const buttonVariants = cva(
     'font-inter font-medium',
     'cursor-pointer',
     'inline-flex items-center justify-center',
-    'relative'
+    'relative',
+    'whitespace-nowrap'
   ],
   {
     variants: {
@@ -33,7 +34,7 @@ const buttonVariants = cva(
         plain: ''
       },
       isDisabled: {
-        true: 'bg-opacity-70 cursor-not-allowed',
+        true: 'bg-opacity-40 cursor-not-allowed',
         false: ''
       },
       isFullWidth: {
@@ -45,9 +46,9 @@ const buttonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1', 'px-2'],
-        sm: ['text-sm', 'py-2', 'px-4'],
-        md: ['text-md', 'py-2', 'px-6'],
+        xs: ['text-xs', 'py-1', 'px-1'],
+        sm: ['text-sm', 'py-2', 'px-2'],
+        md: ['text-md', 'py-2', 'px-4'],
         lg: ['text-lg', 'py-2', 'px-8']
       }
     },
@@ -75,7 +76,7 @@ const buttonVariants = cva(
       {
         colorSchema: 'secondary',
         variant: 'plain',
-        className: 'text-mineshaft'
+        className: 'text-mineshaft-300'
       },
       {
         colorSchema: 'danger',
@@ -101,7 +102,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       isDisabled = false,
       className = '',
-      size = 'md',
+      size = 'sm',
       variant = 'solid',
       isFullWidth,
       isRounded = true,
@@ -144,7 +145,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         <span
           className={twMerge(
-            'transition-all shrink-0 cursor-pointer',
+            'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
             size === 'xs' ? 'mr-1' : 'mr-2'
           )}
@@ -154,7 +155,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <span className={twMerge('transition-all', loadingToggleClass)}>{children}</span>
         <span
           className={twMerge(
-            'transition-all shrink-0 cursor-pointer',
+            'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
             size === 'xs' ? 'ml-1' : 'ml-2'
           )}
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index 9e658aaf7..9ddfb8a42 100644
--- a/frontend/src/components/v2/Card/Card.tsx
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -29,7 +29,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className }: CardBodyProps) => (
-  <div className={twMerge('p-6 pt-0', className)}>{children}</div>
+  <div className={twMerge('p-6 pb-4 pt-0', className)}>{children}</div>
 );
 
 export type CardProps = {
@@ -47,7 +47,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <div
         ref={ref}
         className={twMerge(
-          'flex flex-col w-full font-inter text-gray-200 bg-mineshaft-700 shadow-md',
+          'flex w-full flex-col bg-mineshaft-800 font-inter text-gray-200 shadow-md',
           isFullHeight && 'h-full',
           isRounded && 'rounded-md',
           isPlain && 'shadow-none',
diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
new file mode 100644
index 000000000..7678af3cf
--- /dev/null
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+
+import { useToggle } from '@app/hooks';
+
+import { Button } from '../Button';
+import { FormControl } from '../FormControl';
+import { Input } from '../Input';
+import { Modal, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onChange?: (isOpen: boolean) => void;
+  deleteKey: string;
+  title: string;
+  onDeleteApproved: () => Promise<void>;
+};
+
+export const DeleteActionModal = ({
+  isOpen,
+  onClose,
+  onChange,
+  deleteKey,
+  onDeleteApproved,
+  title
+}: Props): JSX.Element => {
+  const [inputData, setInputData] = useState('');
+  const [isLoading, setIsLoading] = useToggle();
+
+  useEffect(() => {
+    setInputData('');
+  }, [isOpen]);
+
+  const onDelete = async () => {
+    setIsLoading.on();
+    try {
+      await onDeleteApproved();
+    } catch {
+      setIsLoading.off();
+    } finally {
+      setIsLoading.off();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(isOpenState) => {
+        setInputData('');
+        if (onChange) onChange(isOpenState);
+      }}
+    >
+      <ModalContent
+        title={title}
+        subTitle="This action is irreversible!!!"
+        footerContent={
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              colorSchema="danger"
+              isDisabled={!(deleteKey === inputData) || isLoading}
+              onClick={onDelete}
+              isLoading={isLoading}
+            >
+              Delete
+            </Button>
+            <Button variant="plain" colorSchema="secondary" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        }
+        onClose={onClose}
+      >
+        <form>
+          <FormControl
+            label={
+              <div className="pb-2 text-sm">
+                Type <span className="font-bold">{deleteKey}</span> to delete the resource
+              </div>
+            }
+            className="mb-4"
+          >
+            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} />
+          </FormControl>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/frontend/src/components/v2/DeleteActionModal/index.tsx b/frontend/src/components/v2/DeleteActionModal/index.tsx
new file mode 100644
index 000000000..b69763984
--- /dev/null
+++ b/frontend/src/components/v2/DeleteActionModal/index.tsx
@@ -0,0 +1 @@
+export { DeleteActionModal } from './DeleteActionModal';
diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index 14e58d5be..5a545acec 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -11,7 +11,7 @@ export type FormLabelProps = {
 };
 
 export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="text-mineshaft-300 text-sm font-medium block mb-1 ml-0.5" htmlFor={id}>
+  <Label.Root className="mb-1 ml-0.5 block text-sm font-medium text-mineshaft-300" htmlFor={id}>
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
   </Label.Root>
@@ -25,7 +25,7 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      'text-xs font-inter flex items-center opacity-90 text-mineshaft-300 mt-2',
+      'mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90',
       isError && 'text-red-600'
     )}
   >
@@ -46,6 +46,7 @@ export type FormControlProps = {
   helperText?: ReactNode;
   errorText?: ReactNode;
   children: JSX.Element;
+  className?: string;
 };
 
 export const FormControl = ({
@@ -55,10 +56,11 @@ export const FormControl = ({
   helperText,
   errorText,
   id,
-  isError
+  isError,
+  className
 }: FormControlProps): JSX.Element => {
   return (
-    <div>
+    <div className={twMerge('mb-4', className)}>
       {typeof label === 'string' ? (
         <FormLabel label={label} isRequired={isRequired} id={id} />
       ) : (
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
index b1a1f4813..eb4919617 100644
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -14,7 +14,7 @@ const iconButtonVariants = cva(
   [
     'button',
     'transition-all',
-    'font-inter font-medium',
+    'font-inter font-medium user-select-none',
     'cursor-pointer',
     'inline-flex items-center justify-center',
     'relative'
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index 4f502e31d..8c3685dac 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -8,6 +8,7 @@ type Props = {
   isRequired?: boolean;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
+  isDisabled?: boolean;
 };
 
 const inputVariants = cva(
@@ -46,7 +47,7 @@ const inputParentContainerVariants = cva('inline-flex font-inter items-center bo
     },
     isError: {
       true: 'border-red',
-      false: 'border-mineshaft-400'
+      false: 'border-mineshaft-500'
     },
     isFullWidth: {
       true: 'w-full',
@@ -70,6 +71,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       className,
       isRounded = true,
       isFullWidth = true,
+      isDisabled,
       isError = false,
       isRequired,
       leftIcon,
@@ -87,6 +89,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
           required={isRequired}
           ref={ref}
+          disabled={isDisabled}
           className={twMerge(
             leftIcon ? 'pl-9' : 'pl-4',
             rightIcon ? 'pr-9' : 'pr-4',
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index c7d42541d..eea12fbc5 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -11,31 +11,32 @@ export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
   subTitle?: string;
   footerContent?: ReactNode;
+  onClose?: () => void;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
-  ({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
+  ({ children, title, subTitle, className, footerContent, onClose, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className="fixed inset-0 w-full h-full animate-fadeIn"
-        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+        className="fixed inset-0 h-full w-full animate-fadeIn"
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
       />
       <DialogPrimitive.Content {...props} ref={forwardedRef}>
         <Card
           isRounded
           className={twMerge(
-            'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
+            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-md',
             className
           )}
         >
           {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
           <CardBody>{children}</CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <DialogPrimitive.Close aria-label="Close" asChild>
+          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
+              className="absolute top-2.5 right-2.5 rounded text-white hover:bg-gray-600"
             >
               <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
             </IconButton>
@@ -55,3 +56,6 @@ export const Modal = ({ isOpen, ...props }: ModalProps) => (
 
 export const ModalTrigger = DialogPrimitive.Trigger;
 export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;
+
+export const ModalClose = DialogPrimitive.Close;
+export type ModalCloseProps = DialogPrimitive.DialogCloseProps;
diff --git a/frontend/src/components/v2/Modal/index.tsx b/frontend/src/components/v2/Modal/index.tsx
index c97a564fb..7517b3ec1 100644
--- a/frontend/src/components/v2/Modal/index.tsx
+++ b/frontend/src/components/v2/Modal/index.tsx
@@ -1,2 +1,2 @@
-export type { ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
-export { Modal, ModalContent, ModalTrigger } from './Modal';
+export type { ModalCloseProps, ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
+export { Modal, ModalClose, ModalContent, ModalTrigger } from './Modal';
diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index c093b8b70..e76e90260 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -22,21 +22,23 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Trigger
           ref={ref}
           className={twMerge(
-            `inline-flex items-center justify-between data-[placeholder]:text-gray-500
-            px-3 py-2 font-inter text-sm text-bunker-200 font-normal rounded-md bg-mineshaft-800 outline-none`,
+            `inline-flex items-center justify-between rounded-md
+            bg-mineshaft-800 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
             className
           )}
         >
           <SelectPrimitive.Value placeholder={placeholder} />
-          {!props.disabled && <SelectPrimitive.Icon className="ml-3">
-            <FontAwesomeIcon icon={faChevronDown} size="sm" />
-          </SelectPrimitive.Icon>}
+          {!props.disabled && (
+            <SelectPrimitive.Icon className="ml-3">
+              <FontAwesomeIcon icon={faChevronDown} size="sm" />
+            </SelectPrimitive.Icon>
+          )}
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             // position="popper"
             sideOffset={4}
-            className="overflow-hidden text-bunker-100 rounded-md shadow-md font-inter bg-mineshaft-800"
+            className="overflow-hidden rounded-md bg-mineshaft-800 font-inter text-bunker-100 shadow-md"
             style={{ width: 'var(--radix-select-trigger-width) + 6' }}
           >
             <SelectPrimitive.ScrollUpButton>
@@ -75,11 +77,11 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <SelectPrimitive.Item
         {...props}
         className={twMerge(
-          `text-sm rounded-sm transition-all hover:bg-mineshaft-500
-          flex items-center pl-10 pr-4 py-2 cursor-pointer rounded-md
-          select-none outline-none relative`,
+          `relative flex cursor-pointer
+          select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
+          outline-none transition-all hover:bg-mineshaft-500`,
           isSelected && 'bg-primary',
-          isDisabled && 'text-gray-600 hover:bg-transparent cursor-not-allowed hover:text-gray-600',
+          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-gray-600',
           className
         )}
         ref={forwardedRef}
diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx
index 0c2b52eb8..3513bf62b 100644
--- a/frontend/src/components/v2/Table/Table.tsx
+++ b/frontend/src/components/v2/Table/Table.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, TdHTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export type TableContainerProps = {
@@ -14,7 +14,7 @@ export const TableContainer = ({
 }: TableContainerProps): JSX.Element => (
   <div
     className={twMerge(
-      'overflow-x-auto font-inter shadow-md relative border border-solid border-mineshaft-700',
+      'relative w-full overflow-x-auto border border-solid border-mineshaft-700 font-inter shadow-md',
       isRounded && 'rounded-md',
       className
     )}
@@ -32,7 +32,7 @@ export type TableProps = {
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
     className={twMerge(
-      'bg-bunker-800 p-2 roun  text-gray-300 w-full text-sm text-left rounded-md',
+      'w-full rounded rounded-md  bg-bunker-800 p-2 text-left text-sm text-gray-300',
       className
     )}
   >
@@ -47,7 +47,7 @@ export type THeadProps = {
 };
 
 export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge('text-xs bg-bunker text-bunker-300 uppercase', className)}>
+  <thead className={twMerge('bg-bunker text-xs uppercase text-bunker-300', className)}>
     {children}
   </thead>
 );
@@ -56,15 +56,17 @@ export const THead = ({ children, className }: THeadProps): JSX.Element => (
 export type TrProps = {
   children: ReactNode;
   className?: string;
-};
+} & HTMLAttributes<HTMLTableRowElement>;
 
-export const Tr = ({ children, className }: TrProps): JSX.Element => (
-  <tr className={twMerge('border border-solid border-mineshaft-700', className)}>{children}</tr>
+export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
+  <tr className={twMerge('border border-solid border-mineshaft-700', className)} {...props}>
+    {children}
+  </tr>
 );
 
 // table head columns
 export type ThProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
 };
 
@@ -84,10 +86,12 @@ export const TBody = ({ children, className }: TBodyProps): JSX.Element => (
 
 // table body columns
 export type TdProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
-};
+} & TdHTMLAttributes<HTMLTableCellElement>;
 
-export const Td = ({ children, className }: TdProps): JSX.Element => (
-  <td className={twMerge('text-left px-6 py-3', className)}>{children}</td>
+export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
+  <td className={twMerge('px-6 py-3 text-left', className)} {...props}>
+    {children}
+  </td>
 );
diff --git a/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx b/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
new file mode 100644
index 000000000..e991ca3a8
--- /dev/null
+++ b/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
@@ -0,0 +1,36 @@
+import Link from 'next/link';
+
+import { Button } from '../Button';
+import { Modal, ModalClose, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  text: string;
+};
+
+export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => (
+  <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <ModalContent
+      title="Unleash Infisical's Full Power"
+      footerContent={[
+        <Link
+          href={`/settings/billing/${localStorage.getItem('projectData.id') as string}`}
+          key="upgrade-plan"
+        >
+          <Button className="mr-4">Upgrade Plan</Button>
+        </Link>,
+        <ModalClose asChild key="upgrade-plan-cancel">
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+      ]}
+    >
+      <p className="mb-4 text-bunker-300">{text}</p>
+      <p className="font-medium text-bunker-300">
+        Upgrade and get access to this, as well as to other powerful enhancements.
+      </p>
+    </ModalContent>
+  </Modal>
+);
diff --git a/frontend/src/components/v2/UpgradePlanModal/index.tsx b/frontend/src/components/v2/UpgradePlanModal/index.tsx
new file mode 100644
index 000000000..e4649c2df
--- /dev/null
+++ b/frontend/src/components/v2/UpgradePlanModal/index.tsx
@@ -0,0 +1 @@
+export { UpgradePlanModal } from './UpgradePlanModal';
diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx
index 437114047..0f89a3a2b 100644
--- a/frontend/src/components/v2/index.tsx
+++ b/frontend/src/components/v2/index.tsx
@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './DeleteActionModal';
 export * from './Dropdown';
 export * from './FormControl';
 export * from './IconButton';
@@ -12,3 +13,4 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Table';
 export * from './TextArea';
+export * from './UpgradePlanModal';

From a4f78437278a593a92513283742b7ac461f3b9b2 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Fri, 3 Feb 2023 22:18:30 +0530
Subject: [PATCH 11/52] feat(ui): global workspace and subscription context

---
 .../SubscriptionContext.tsx                   | 47 +++++++++++++++++
 .../src/context/SubscriptionContext/index.tsx |  1 +
 .../WorkspaceContext/WorkspaceContext.tsx     | 52 +++++++++++++++++++
 .../src/context/WorkspaceContext/index.tsx    |  1 +
 frontend/src/context/index.tsx                |  2 +
 5 files changed, 103 insertions(+)
 create mode 100644 frontend/src/context/SubscriptionContext/SubscriptionContext.tsx
 create mode 100644 frontend/src/context/SubscriptionContext/index.tsx
 create mode 100644 frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
 create mode 100644 frontend/src/context/WorkspaceContext/index.tsx
 create mode 100644 frontend/src/context/index.tsx

diff --git a/frontend/src/context/SubscriptionContext/SubscriptionContext.tsx b/frontend/src/context/SubscriptionContext/SubscriptionContext.tsx
new file mode 100644
index 000000000..ae9910224
--- /dev/null
+++ b/frontend/src/context/SubscriptionContext/SubscriptionContext.tsx
@@ -0,0 +1,47 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+import { useGetOrgSubscription } from '@app/hooks/api';
+import { GetSubscriptionPlan } from '@app/hooks/api/types';
+
+import { useWorkspace } from '../WorkspaceContext';
+// import { Subscription } from '@app/hooks/api/workspace/types';
+
+type TSubscriptionContext = {
+  subscription?: GetSubscriptionPlan;
+  subscriptionPlan: string;
+  isLoading: boolean;
+};
+
+const SubscriptionContext = createContext<TSubscriptionContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const SubscriptionProvider = ({ children }: Props): JSX.Element => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetOrgSubscription({
+    orgID: currentWorkspace?.organization || ''
+  });
+
+  // memorize the workspace details for the context
+  const value = useMemo<TSubscriptionContext>(
+    () => ({
+      subscription: data,
+      subscriptionPlan: data?.data?.[0]?.plan?.product || '',
+      isLoading
+    }),
+    [data, isLoading]
+  );
+
+  return <SubscriptionContext.Provider value={value}>{children}</SubscriptionContext.Provider>;
+};
+
+export const useSubscription = () => {
+  const ctx = useContext(SubscriptionContext);
+  if (!ctx) {
+    throw new Error('useSubscription has to be used within <SubscriptionContext.Provider>');
+  }
+
+  return ctx;
+};
diff --git a/frontend/src/context/SubscriptionContext/index.tsx b/frontend/src/context/SubscriptionContext/index.tsx
new file mode 100644
index 000000000..9a2b07b15
--- /dev/null
+++ b/frontend/src/context/SubscriptionContext/index.tsx
@@ -0,0 +1 @@
+export { SubscriptionProvider, useSubscription } from './SubscriptionContext';
diff --git a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
new file mode 100644
index 000000000..ea82fbbe7
--- /dev/null
+++ b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
@@ -0,0 +1,52 @@
+import { createContext, ReactNode, useContext, useEffect, useMemo } from 'react';
+import { useRouter } from 'next/router';
+
+import { useGetUserWorkspaces } from '@app/hooks/api';
+import { Workspace } from '@app/hooks/api/workspace/types';
+
+type TWorkspaceContext = {
+  workspaces: Workspace[];
+  currentWorkspace?: Workspace;
+  isLoading: boolean;
+};
+
+const WorkspaceContext = createContext<TWorkspaceContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const WorkspaceProvider = ({ children }: Props): JSX.Element => {
+  const { data: ws, isLoading } = useGetUserWorkspaces();
+  const router = useRouter();
+  const workspaceId = router.query.id;
+
+  // memorize the workspace details for the context
+  const value = useMemo<TWorkspaceContext>(() => {
+    return {
+      workspaces: ws || [],
+      currentWorkspace: (ws || []).find(({ _id: id }) => id === workspaceId),
+      isLoading
+    };
+  }, [ws, workspaceId, isLoading]);
+
+  useEffect(() => {
+    // not loading and current workspace is empty
+    // ws empty means user has no access to the ws
+    // push to the first workspace
+    if (!isLoading && !value?.currentWorkspace?._id) {
+      router.push(`/dashboard/${value.workspaces?.[0]?._id}`);
+    }
+  }, [value?.currentWorkspace?._id, isLoading, value.workspaces?.[0]?._id, router.pathname]);
+
+  return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>;
+};
+
+export const useWorkspace = () => {
+  const ctx = useContext(WorkspaceContext);
+  if (!ctx) {
+    throw new Error('useWorkspace has to be used within <WorkspaceContext.Provider>');
+  }
+
+  return ctx;
+};
diff --git a/frontend/src/context/WorkspaceContext/index.tsx b/frontend/src/context/WorkspaceContext/index.tsx
new file mode 100644
index 000000000..3496038c3
--- /dev/null
+++ b/frontend/src/context/WorkspaceContext/index.tsx
@@ -0,0 +1 @@
+export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';
diff --git a/frontend/src/context/index.tsx b/frontend/src/context/index.tsx
new file mode 100644
index 000000000..1bf59f9ac
--- /dev/null
+++ b/frontend/src/context/index.tsx
@@ -0,0 +1,2 @@
+export { SubscriptionProvider, useSubscription } from './SubscriptionContext';
+export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';

From ed148a542d6671dc2f172e90d265777328e765cb Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Fri, 3 Feb 2023 22:19:03 +0530
Subject: [PATCH 12/52] feat(ui): implemented the new project settings page

---
 frontend/public/locales/en/section-token.json |   2 +-
 frontend/src/components/basic/Layout.tsx      |  57 ++-
 .../basic/table/EnvironmentsTable.tsx         |  57 ++-
 frontend/src/components/dashboard/SideBar.tsx |   4 +-
 .../components/navigation/NavBarDashboard.tsx |   2 +-
 .../src/components/navigation/NavHeader.tsx   |  23 +-
 frontend/src/const.ts                         |  28 +-
 frontend/src/pages/_app.tsx                   |  16 +-
 frontend/src/pages/activity/[id].tsx          |   2 +-
 frontend/src/pages/dashboard/[id].tsx         |   4 +-
 frontend/src/pages/settings/project/[id].tsx  | 328 +-----------------
 .../ProjectSettingsPage.tsx                   | 287 +++++++++++++++
 .../CopyProjectIDSection.tsx                  |  66 ++++
 .../components/CopyProjectIDSection/index.tsx |   1 +
 .../EnvironmentSection/EnvironmentSection.tsx | 239 +++++++++++++
 .../components/EnvironmentSection/index.tsx   |   1 +
 .../ProjectNameChangeSection.tsx              |  71 ++++
 .../ProjectNameChangeSection/index.tsx        |   1 +
 .../ServiceTokenSection.tsx                   | 307 ++++++++++++++++
 .../components/ServiceTokenSection/index.tsx  |   1 +
 .../ProjectSettingsPage/components/index.tsx  |   6 +
 .../Settings/ProjectSettingsPage/index.tsx    |   1 +
 22 files changed, 1099 insertions(+), 405 deletions(-)
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/CopyProjectIDSection.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/index.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/index.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/index.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/index.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/index.tsx

diff --git a/frontend/public/locales/en/section-token.json b/frontend/public/locales/en/section-token.json
index d12bd202c..ce468b1af 100644
--- a/frontend/public/locales/en/section-token.json
+++ b/frontend/public/locales/en/section-token.json
@@ -4,7 +4,7 @@
   "add-new": "Add New Token",
   "add-dialog": {
     "title": "Add a service token for {{target}}",
-    "description": "Specify the name, environment, and expiry period. When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.",
+    "description": "When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.",
     "name": "Service Token Name",
     "add": "Add Service Token",
     "copy-service-token": "Copy your service token",
diff --git a/frontend/src/components/basic/Layout.tsx b/frontend/src/components/basic/Layout.tsx
index a3d6092a1..ba4cf73b2 100644
--- a/frontend/src/components/basic/Layout.tsx
+++ b/frontend/src/components/basic/Layout.tsx
@@ -187,10 +187,10 @@ const Layout = ({ children }: LayoutProps) => {
       });
       const userWorkspaces = orgUserProjects;
       if (
-        userWorkspaces.length === 0 &&
-        router.asPath !== '/noprojects' &&
-        !router.asPath.includes('home') &&
-        !router.asPath.includes('settings') ||
+        (userWorkspaces.length === 0 &&
+          router.asPath !== '/noprojects' &&
+          !router.asPath.includes('home') &&
+          !router.asPath.includes('settings')) ||
         router.asPath === '/dashboard/undefined'
       ) {
         router.push('/noprojects');
@@ -246,16 +246,15 @@ const Layout = ({ children }: LayoutProps) => {
 
   return (
     <>
-      <div className="fixed w-full md:block flex flex-col h-screen">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js" defer />
+      <div className="flex h-screen w-full flex-col overflow-x-hidden">
         <NavBarDashboard />
-        <div className="flex flex-col md:flex-row flex-1">
-          <aside className="bg-bunker-600 border-r border-mineshaft-500 w-full md:w-60 h-screen">
-            <nav className="flex flex-col justify-between items-between h-full">
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+          <aside className="w-full border-r border-mineshaft-500 bg-bunker-600 md:w-60">
+            <nav className="items-between flex h-full flex-col justify-between">
               {/* <div className="py-6"></div> */}
               <div>
-                <div className="flex justify-center w-full mt-[4.5rem] mb-6 bg-bunker-600 h-20 flex-col items-center px-4">
-                  <div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
+                <div className="mt-6 mb-6 flex h-20 w-full flex-col items-center justify-center bg-bunker-600 px-4">
+                  <div className="ml-1 mb-1 self-start text-xs font-semibold tracking-wide text-gray-400">
                     {t('nav:menu.project')}
                   </div>
                   {Object.keys(workspaceMapping).length > 0 ? (
@@ -279,29 +278,29 @@ const Layout = ({ children }: LayoutProps) => {
                 <ul>
                   {Object.keys(workspaceMapping).length > 0 &&
                     menuItems.map(({ href, title, emoji }) => (
-                      <li className="mt-0.5 mx-2" key={title}>
+                      <li className="mx-2 mt-0.5" key={title}>
                         {router.asPath.split('/')[1] === href.split('/')[1] &&
                         (['project', 'billing', 'org', 'personal'].includes(
                           router.asPath.split('/')[2]
                         )
                           ? router.asPath.split('/')[2] === href.split('/')[2]
                           : true) ? (
-                          <div className="flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10">
-                            <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1" />
-                            <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">
+                          <div className="relative flex cursor-pointer rounded bg-primary-50/10 px-0.5 py-2.5 text-sm text-white">
+                            <div className="absolute inset-0 top-0 my-1 ml-1 mr-1 w-1 rounded-xl bg-primary" />
+                            <p className="ml-4 mr-2 flex w-6 items-center justify-center text-lg">
                               {emoji}
                             </p>
                             {title}
                           </div>
                         ) : router.asPath === '/noprojects' ? (
-                          <div className="flex p-2.5 text-white text-sm rounded">
-                            <p className="w-10 flex items-center justify-center text-lg">{emoji}</p>
+                          <div className="flex rounded p-2.5 text-sm text-white">
+                            <p className="flex w-10 items-center justify-center text-lg">{emoji}</p>
                             {title}
                           </div>
                         ) : (
                           <Link href={href}>
-                            <div className="flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5">
-                              <p className="w-10 flex items-center justify-center text-lg">
+                            <div className="flex cursor-pointer rounded p-2.5 text-sm text-white hover:bg-primary-50/5">
+                              <p className="flex w-10 items-center justify-center text-lg">
                                 {emoji}
                               </p>
                               {title}
@@ -312,11 +311,11 @@ const Layout = ({ children }: LayoutProps) => {
                     ))}
                 </ul>
               </div>
-              <div className="w-full mt-40 mb-4 px-2">
+              <div className="mt-40 mb-4 w-full px-2">
                 {router.asPath.split('/')[1] === 'home' ? (
-                  <div className="flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10">
-                    <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1" />
-                    <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">
+                  <div className="relative flex cursor-pointer rounded bg-primary-50/10 px-0.5 py-2.5 text-sm text-white">
+                    <div className="absolute inset-0 top-0 my-1 ml-1 mr-1 w-1 rounded-xl bg-primary" />
+                    <p className="ml-4 mr-2 flex w-6 items-center justify-center text-lg">
                       <FontAwesomeIcon icon={faBookOpen} />
                     </p>
                     Infisical Guide
@@ -336,8 +335,8 @@ const Layout = ({ children }: LayoutProps) => {
                   </div>
                 ) : (
                   <Link href={`/home/${workspaceMapping[workspaceSelected as any]}`}>
-                    <div className="relative flex p-2.5 overflow-visible text-white h-10 text-sm rounded cursor-pointer bg-white/10 hover:bg-primary-50/[0.15] mt-max">
-                      <p className="w-10 flex items-center justify-center text-lg">
+                    <div className="mt-max relative flex h-10 cursor-pointer overflow-visible rounded bg-white/10 p-2.5 text-sm text-white hover:bg-primary-50/[0.15]">
+                      <p className="flex w-10 items-center justify-center text-lg">
                         <FontAwesomeIcon icon={faBookOpen} />
                       </p>
                       Infisical Guide
@@ -369,12 +368,12 @@ const Layout = ({ children }: LayoutProps) => {
             error={error}
             loading={loading}
           />
-          <main className="flex-1 bg-bunker-800">{children}</main>
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800">{children}</main>
         </div>
       </div>
-      <div className="md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
-        <FontAwesomeIcon icon={faMobile} className="text-gray-300 text-7xl mb-8" />
-        <p className="text-gray-200 px-6 text-center text-lg max-w-sm">
+      <div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
+        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t('common:no-mobile')} `}
         </p>
       </div>
diff --git a/frontend/src/components/basic/table/EnvironmentsTable.tsx b/frontend/src/components/basic/table/EnvironmentsTable.tsx
index df0d06ef5..0583976db 100644
--- a/frontend/src/components/basic/table/EnvironmentsTable.tsx
+++ b/frontend/src/components/basic/table/EnvironmentsTable.tsx
@@ -41,7 +41,6 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-
   const onEnvCreateCB = async (env: Env) => {
     try {
       await onCreateEnv(env);
@@ -71,14 +70,14 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
 
   return (
     <>
-      <div className="flex flex-row justify-between w-full">
-        <div className="flex flex-col w-full">
-          <p className="text-xl font-semibold mb-3">Project Environments</p>
-          <p className="text-base text-gray-400 mb-4">
+      <div className="flex w-full flex-row justify-between">
+        <div className="flex w-full flex-col">
+          <p className="mb-3 text-xl font-semibold">Project Environments</p>
+          <p className="mb-4 text-base text-gray-400">
             Choose which environments will show up in your dashboard like development, staging,
             production
           </p>
-          <p className="text-sm mr-1 text-gray-500 self-start">
+          <p className="mr-1 self-start text-sm text-gray-500">
             Note: the text in slugs shows how these environmant should be accessed in CLI.
           </p>
         </div>
@@ -86,10 +85,10 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           <Button
             text="Add New Env"
             onButtonPressed={() => {
-              if (plan !== plans.starter || host !== "https://app.infisical.com") {
-                handlePopUpOpen('createUpdateEnv')
+              if (plan !== plans.starter || host !== 'https://app.infisical.com') {
+                handlePopUpOpen('createUpdateEnv');
               } else {
-                handlePopUpOpen('upgradePlan')
+                handlePopUpOpen('upgradePlan');
               }
             }}
             color="mineshaft"
@@ -98,32 +97,30 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           />
         </div>
       </div>
-      <div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
-        <div className="absolute rounded-t-md w-full h-12 bg-white/5" />
-        <table className="w-full my-1">
+      <div className="table-container relative mb-6 mt-1 w-full rounded-md border border-mineshaft-700 bg-bunker">
+        <div className="absolute h-12 w-full rounded-t-md bg-white/5" />
+        <table className="my-1 w-full">
           <thead className="text-bunker-300">
             <tr>
-              <th className="text-left pl-6 pt-2.5 pb-2">Name</th>
-              <th className="text-left pl-6 pt-2.5 pb-2">Slug</th>
+              <th className="pl-6 pt-2.5 pb-2 text-left">Name</th>
+              <th className="pl-6 pt-2.5 pb-2 text-left">Slug</th>
               <th aria-label="buttons" />
             </tr>
           </thead>
           <tbody>
             {data?.length > 0 ? (
               data.map(({ name, slug }) => (
-                <tr key={name} className="bg-bunker-800 hover:bg-bunker-800/5 duration-100">
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
-                    {name}
-                  </td>
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">{slug}</td>
-                  <td className="py-2 border-mineshaft-700 border-t flex justify-end">
-                    <div className="hover:opacity-100 duration-200 flex items-center mr-2">
+                <tr key={name} className="bg-bunker-800 duration-100 hover:bg-bunker-800/5">
+                  <td className="border-t border-mineshaft-700 py-2 pl-6 text-gray-300">{name}</td>
+                  <td className="border-t border-mineshaft-700 py-2 pl-6 text-gray-300">{slug}</td>
+                  <td className="flex justify-end border-t border-mineshaft-700 py-2">
+                    <div className="mr-2 flex items-center duration-200 hover:opacity-100">
                       <Button
                         onButtonPressed={() => {
-                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
-                            handlePopUpOpen('createUpdateEnv', { name, slug })
+                          if (plan !== plans.starter || host !== 'https://app.infisical.com') {
+                            handlePopUpOpen('createUpdateEnv', { name, slug });
                           } else {
-                            handlePopUpOpen('upgradePlan')
+                            handlePopUpOpen('upgradePlan');
                           }
                         }}
                         color="mineshaft"
@@ -131,13 +128,13 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
                         icon={faPencil}
                       />
                     </div>
-                    <div className="opacity-50 hover:opacity-100 duration-200 flex items-center mr-6">
+                    <div className="mr-6 flex items-center opacity-50 duration-200 hover:opacity-100">
                       <Button
                         onButtonPressed={() => {
-                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
-                            handlePopUpOpen('deleteEnv', { name, slug })
+                          if (plan !== plans.starter || host !== 'https://app.infisical.com') {
+                            handlePopUpOpen('deleteEnv', { name, slug });
                           } else {
-                            handlePopUpOpen('upgradePlan')
+                            handlePopUpOpen('upgradePlan');
                           }
                         }}
                         color="red"
@@ -150,7 +147,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
               ))
             ) : (
               <tr>
-                <td colSpan={4} className="text-center pt-7 pb-4 text-bunker-400">
+                <td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
                   No environmants found
                 </td>
               </tr>
@@ -174,7 +171,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           onCreateSubmit={onEnvCreateCB}
           onEditSubmit={onEnvUpdateCB}
         />
-        <UpgradePlanModal 
+        <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onClose={() => handlePopUpClose('upgradePlan')}
           text="You can add custom environments if you switch to Infisical's Team plan."
diff --git a/frontend/src/components/dashboard/SideBar.tsx b/frontend/src/components/dashboard/SideBar.tsx
index 1a3f99a29..257d94996 100644
--- a/frontend/src/components/dashboard/SideBar.tsx
+++ b/frontend/src/components/dashboard/SideBar.tsx
@@ -71,7 +71,7 @@ const SideBar = ({
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 right-0 z-40 shadow-xl flex flex-col justify-between">
       {isLoading ? (
         <div className="flex items-center justify-center h-full">
           <Image
@@ -171,7 +171,7 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]">
+      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-8">
         <Button
           text={String(t('common:save-changes'))}
           onButtonPressed={savePush}
diff --git a/frontend/src/components/navigation/NavBarDashboard.tsx b/frontend/src/components/navigation/NavBarDashboard.tsx
index d681930ac..81db93cda 100644
--- a/frontend/src/components/navigation/NavBarDashboard.tsx
+++ b/frontend/src/components/navigation/NavBarDashboard.tsx
@@ -93,7 +93,7 @@ export default function Navbar() {
   };
 
   return (
-    <div className="absolute flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
+    <div className="flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
       <div className="m-auto flex justify-start items-center mx-4">
         <div className="flex flex-row items-center">
           <div className="flex justify-center py-4">
diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx
index 247d4ac3d..bc3876750 100644
--- a/frontend/src/components/navigation/NavHeader.tsx
+++ b/frontend/src/components/navigation/NavHeader.tsx
@@ -3,8 +3,8 @@ import { useRouter } from 'next/router';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { useWorkspace } from '@app/context';
 import getOrganization from '@app/pages/api/organization/GetOrg';
-import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
 
 /**
  * This is the component at the top of almost every page.
@@ -23,9 +23,9 @@ export default function NavHeader({
   isProjectRelated?: boolean;
 }): JSX.Element {
   const [orgName, setOrgName] = useState('');
-  const [workspaceName, setWorkspaceName] = useState('');
   const router = useRouter();
   const projectId = String(router.query.id);
+  const { currentWorkspace } = useWorkspace();
 
   useEffect(() => {
     (async () => {
@@ -34,29 +34,24 @@ export default function NavHeader({
         orgId: orgId || ''
       });
       setOrgName(org.name);
-
-      const workspace = await getProjectInfo({
-        projectId
-      });
-      setWorkspaceName(workspace.name);
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
   return (
-    <div className="pt-20 ml-6 flex flex-row items-center">
-      <div className="bg-primary-900 h-6 w-6 rounded-md flex items-center justify-center text-mineshaft-100 mr-2">
+    <div className="ml-6 flex flex-row items-center pt-8">
+      <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
         {orgName?.charAt(0)}
       </div>
-      <div className="text-primary text-sm font-semibold">{orgName}</div>
+      <div className="text-sm font-semibold text-primary">{orgName}</div>
       {isProjectRelated && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
-          <div className="font-semibold text-primary text-sm">{workspaceName}</div>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+          <div className="text-sm font-semibold text-primary">{currentWorkspace?.name}</div>
         </>
       )}
-      <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
-      <div className="text-gray-400 text-sm">{pageName}</div>
+      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+      <div className="text-sm text-gray-400">{pageName}</div>
     </div>
   );
 }
diff --git a/frontend/src/const.ts b/frontend/src/const.ts
index 6ec3941a4..4583d1dbb 100644
--- a/frontend/src/const.ts
+++ b/frontend/src/const.ts
@@ -16,11 +16,31 @@ export const publicPaths = [
   `/terms`,
   `/subprocessors`,
   `/verify-email`,
-  `/password-reset`,
+  `/password-reset`
 ];
 
 export const languageMap = {
-  en: "English",
-  ko: "한국어",
-  fr: "Français",
+  en: 'English',
+  ko: '한국어',
+  fr: 'Français'
 };
+
+interface Mapping {
+  [key: string]: string;
+}
+
+const plansDev: Mapping = {
+  starter: 'prod_Mb4ATFT5QAHoPM',
+  team: 'prod_NEpD2WMXUS2eDn',
+  professional: 'prod_Mb4CetZ2jE7jdl',
+  enterprise: 'licence_key_required'
+};
+
+const plansProd: Mapping = {
+  starter: 'prod_Mb8oR5XNwyFTul',
+  team: 'prod_NEp7fAB3UJWK6A',
+  professional: 'prod_Mb8pUIpA0OUi5N',
+  enterprise: 'licence_key_required'
+};
+
+export const plans = plansProd || plansDev;
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 5bfaaa1e3..0d5809093 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -10,7 +10,9 @@ import Layout from '@app/components/basic/Layout';
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
 import { publicPaths } from '@app/const';
+import { SubscriptionProvider } from '@app/context';
 import { AuthProvider } from '@app/context/AuthContext';
+import { WorkspaceProvider } from '@app/context/WorkspaceContext';
 import { queryClient } from '@app/reactQuery';
 
 import '@fortawesome/fontawesome-svg-core/styles.css';
@@ -68,11 +70,15 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
   return (
     <QueryClientProvider client={queryClient}>
       <AuthProvider>
-        <NotificationProvider>
-          <Layout>
-            <Component {...pageProps} />
-          </Layout>
-        </NotificationProvider>
+        <WorkspaceProvider>
+          <SubscriptionProvider>
+            <NotificationProvider>
+              <Layout>
+                <Component {...pageProps} />
+              </Layout>
+            </NotificationProvider>
+          </SubscriptionProvider>
+        </WorkspaceProvider>
       </AuthProvider>
     </QueryClientProvider>
   );
diff --git a/frontend/src/pages/activity/[id].tsx b/frontend/src/pages/activity/[id].tsx
index 55e5b1924..181efb4b2 100644
--- a/frontend/src/pages/activity/[id].tsx
+++ b/frontend/src/pages/activity/[id].tsx
@@ -124,7 +124,7 @@ export default function Activity() {
   };
 
   return (
-    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll h-screen">
+    <div className="mx-6 lg:mx-0 w-full h-screen">
       <NavHeader pageName="Project Activity" isProjectRelated />
       {currentSidebarAction && (
         <ActivitySideBar toggleSidebar={toggleSidebar} currentAction={currentSidebarAction} />
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index b199790a9..99114a765 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -518,7 +518,7 @@ export default function Dashboard() {
   };
 
   return data ? (
-    <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
+    <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white">
       <Head>
         <title>{t('common:head-title', { title: t('dashboard:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -526,7 +526,7 @@ export default function Dashboard() {
         <meta property="og:title" content={String(t('dashboard:og-title'))} />
         <meta name="og:description" content={String(t('dashboard:og-description'))} />
       </Head>
-      <div className="flex flex-row">
+      <div className="flex flex-row h-full">
         {sidebarSecretId !== 'None' && (
           <SideBar
             toggleSidebar={toggleSidebar}
diff --git a/frontend/src/pages/settings/project/[id].tsx b/frontend/src/pages/settings/project/[id].tsx
index 14b2a3785..c0f84c377 100644
--- a/frontend/src/pages/settings/project/[id].tsx
+++ b/frontend/src/pages/settings/project/[id].tsx
@@ -1,332 +1,28 @@
-import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { useTranslation } from 'next-i18next';
-import { faCheck, faCopy, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import Button from '@app/components/basic/buttons/Button';
-import AddServiceTokenDialog from '@app/components/basic/dialog/AddServiceTokenDialog';
-import InputField from '@app/components/basic/InputField';
-import EnvironmentTable from '@app/components/basic/table/EnvironmentsTable';
-import ServiceTokenTable from '@app/components/basic/table/ServiceTokenTable';
-import NavHeader from '@app/components/navigation/NavHeader';
-import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-import deleteEnvironment from '@app/pages/api/environments/deleteEnvironment';
-import updateEnvironment from '@app/pages/api/environments/updateEnvironment';
-
-import createEnvironment from '../../api/environments/createEnvironment';
-import getServiceTokens from '../../api/serviceToken/getServiceTokens';
-import deleteWorkspace from '../../api/workspace/deleteWorkspace';
-import getWorkspaces from '../../api/workspace/getWorkspaces';
-import renameWorkspace from '../../api/workspace/renameWorkspace';
-
-type EnvData = {
-  name: string;
-  slug: string;
-};
-
-export default function SettingsBasic() {
-  const [buttonReady, setButtonReady] = useState(false);
-  const router = useRouter();
-  const [workspaceName, setWorkspaceName] = useState('');
-  const [serviceTokens, setServiceTokens] = useState<any[]>([]);
-  const [environments, setEnvironments] = useState<Array<EnvData>>([]);
-  const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
-  // const [isAddOpen, setIsAddOpen] = useState(false);
-  const [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] = useState(false);
-  const [projectIdCopied, setProjectIdCopied] = useState(false);
-  const workspaceId = router.query.id as string;
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+import { ProjectSettingsPage } from '@app/views/Settings/ProjectSettingsPage';
 
+const ProjectSettings = () => {
   const { t } = useTranslation();
 
-  /**
-   * This function copies the project id to the clipboard
-   */
-  function copyToClipboard() {
-    const copyText = document.getElementById('myInput') as HTMLInputElement;
-
-    if (copyText) {
-      copyText.select();
-      copyText.setSelectionRange(0, 99999); // For mobile devices
-
-      navigator.clipboard.writeText(copyText.value);
-
-      setProjectIdCopied(true);
-      setTimeout(() => setProjectIdCopied(false), 2000);
-    }
-  }
-
-  useEffect(() => {
-    const load = async () => {
-      const userWorkspaces = await getWorkspaces();
-      userWorkspaces.forEach((userWorkspace) => {
-        if (userWorkspace._id === workspaceId) {
-          setWorkspaceName(userWorkspace.name);
-          setEnvironments(userWorkspace.environments);
-        }
-      });
-      const tempServiceTokens = await getServiceTokens({
-        workspaceId
-      });
-      setServiceTokens(tempServiceTokens);
-    };
-
-    load();
-  }, []);
-
-  const modifyWorkspaceName = (newName: string) => {
-    setButtonReady(true);
-    setWorkspaceName(newName);
-  };
-
-  const submitChanges = (newWorkspaceName: string) => {
-    renameWorkspace(workspaceId, newWorkspaceName);
-    setButtonReady(false);
-  };
-
-  const closeAddServiceTokenModal = () => {
-    setIsAddServiceTokenDialogOpen(false);
-  };
-
-  /**
-   * This function deleted a workspace.
-   * It first checks if there is more than one workspace aviable. Otherwise, it doesn't delete
-   * It then checks if the name of the workspace to be deleted is correct. Otherwise, it doesn't delete.
-   * It then deletes the workspace and forwards the user to another aviable workspace.
-   */
-  const executeDeletingWorkspace = async () => {
-    const userWorkspaces = await getWorkspaces();
-
-    if (userWorkspaces.length > 1) {
-      if (
-        userWorkspaces.filter((workspace) => workspace._id === workspaceId)[0].name ===
-        workspaceToBeDeletedName
-      ) {
-        await deleteWorkspace(workspaceId);
-        const ws = await getWorkspaces();
-        router.push(`/dashboard/${ws[0]._id}`);
-      }
-    }
-  };
-
-  const onCreateEnvironment = async ({ name, slug }: EnvData) => {
-    const res = await createEnvironment(workspaceId, {
-      environmentName: name,
-      environmentSlug: slug
-    });
-    if (res) {
-      // TODO: on react-query migration do an api call to resync
-      setEnvironments((env) => [...env, { name, slug }]);
-    }
-  };
-
-  const onUpdateEnvironment = async (oldSlug: string, { name, slug }: EnvData) => {
-    const res = await updateEnvironment(workspaceId, {
-      oldEnvironmentSlug: oldSlug,
-      environmentName: name,
-      environmentSlug: slug
-    });
-    // TODO: on react-query migration do an api call to resync
-    if (res) {
-      setEnvironments((env) => env.map((el) => (el.slug === oldSlug ? { name, slug } : el)));
-    }
-  };
-
-  const onDeleteEnvironment = async (slugToBeDelete: string) => {
-    const res = await deleteEnvironment(workspaceId, slugToBeDelete);
-    // TODO: on react-query migration do an api call to resync
-    if (res) {
-      setEnvironments((env) => env.filter(({ slug }) => slug !== slugToBeDelete));
-    }
-  };
-
   return (
-    <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
+    <>
       <Head>
         <title>{t('common:head-title', { title: t('settings-project:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <AddServiceTokenDialog
-        isOpen={isAddServiceTokenDialogOpen}
-        workspaceId={workspaceId}
-        environments={environments}
-        closeModal={closeAddServiceTokenModal}
-        workspaceName={workspaceName}
-        serviceTokens={serviceTokens}
-        setServiceTokens={setServiceTokens}
-      />
-      <div className="flex flex-row mr-6 max-w-5xl">
-        <div className="w-full max-h-screen pb-2 overflow-y-auto">
-          <NavHeader pageName={t('settings-project:title')} isProjectRelated />
-          <div className="flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl">
-            <div className="flex flex-col justify-start items-start text-3xl">
-              <p className="font-semibold mr-4 text-gray-200">{t('settings-project:title')}</p>
-              <p className="font-normal mr-4 text-gray-400 text-base">
-                {t('settings-project:description')}
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-col ml-6 text-mineshaft-50">
-            <div className="flex flex-col">
-              <div className="min-w-md mt-2 flex flex-col items-start">
-                <div className="bg-white/5 rounded-md px-6 pb-4 flex flex-col items-start w-full mb-6 pt-2">
-                  <p className="text-xl font-semibold mb-4 mt-2">{t('common:display-name')}</p>
-                  <div className="max-h-28 w-full max-w-md mr-auto">
-                    <InputField
-                      label=""
-                      onChangeHandler={modifyWorkspaceName}
-                      type="varName"
-                      value={workspaceName}
-                      placeholder=""
-                      isRequired
-                    />
-                  </div>
-                  <div className="flex justify-start w-full">
-                    <div className="flex justify-start max-w-sm mt-4 mb-2">
-                      <Button
-                        text={t('common:save-changes') as string}
-                        onButtonPressed={() => submitChanges(workspaceName)}
-                        color="mineshaft"
-                        size="md"
-                        active={buttonReady}
-                        iconDisabled={faCheck}
-                        textDisabled="Saved"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start w-full mb-6 mt-4">
-                  <p className="text-xl font-semibold self-start">{t('common:project-id')}</p>
-                  <p className="text-base text-gray-400 font-normal self-start mt-4">
-                    {t('settings-project:project-id-description')}
-                  </p>
-                  <p className="text-base text-gray-400 font-normal self-start">
-                    {t('settings-project:project-id-description2')}
-                    {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                    <a
-                      href="https://infisical.com/docs/getting-started/introduction"
-                      target="_blank"
-                      rel="noopener"
-                      className="text-primary hover:opacity-80 duration-200"
-                    >
-                      {t('settings-project:docs')}
-                    </a>
-                  </p>
-                  <p className="mt-4 text-xs text-bunker-300">
-                    {t('settings-project:auto-generated')}
-                  </p>
-                  <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mb-3 mr-2 rounded-md text-gray-400">
-                    <p className="mr-2 font-bold pl-4">{`${t('common:project-id')}:`}</p>
-                    <input
-                      type="text"
-                      value={workspaceId}
-                      id="myInput"
-                      className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
-                      disabled
-                    />
-                    <div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
-                      <button
-                        type="button"
-                        onClick={copyToClipboard}
-                        className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
-                      >
-                        {projectIdCopied ? (
-                          <FontAwesomeIcon icon={faCheck} className="pr-0.5" />
-                        ) : (
-                          <FontAwesomeIcon icon={faCopy} />
-                        )}
-                      </button>
-                      <span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-bunker-800 rounded-md text-center text-gray-400 text-sm">
-                        {t('common:click-to-copy')}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-white/5 rounded-md px-6 pt-6 flex flex-col items-start w-full mt-4 mb-4">
-                  <EnvironmentTable
-                    data={environments}
-                    onCreateEnv={onCreateEnvironment}
-                    onUpdateEnv={onUpdateEnvironment}
-                    onDeleteEnv={onDeleteEnvironment}
-                  />
-                </div>
-                <div className="bg-white/5 rounded-md px-6 flex flex-col items-start w-full mt-4 mb-4 pt-2">
-                  <div className="flex flex-row justify-between w-full">
-                    <div className="flex flex-col w-full">
-                      <p className="text-xl font-semibold mb-3">
-                        {t('section-token:service-tokens')}
-                      </p>
-                      <p className="text-sm text-gray-400">
-                        {t('section-token:service-tokens-description')}
-                      </p>
-                      <p className="text-sm text-gray-400 mb-4">
-                        Please, make sure you are on the
-                        <a
-                          className="text-primary underline underline-offset-2 ml-1"
-                          href="https://infisical.com/docs/cli/overview"
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          latest version of CLI
-                        </a>
-                        .
-                      </p>
-                    </div>
-                    <div className="w-48 mt-2">
-                      <Button
-                        text={t('section-token:add-new') as string}
-                        onButtonPressed={() => {
-                          setIsAddServiceTokenDialogOpen(true);
-                        }}
-                        color="mineshaft"
-                        icon={faPlus}
-                        size="md"
-                      />
-                    </div>
-                  </div>
-                  <ServiceTokenTable
-                    data={serviceTokens}
-                    workspaceName={workspaceName}
-                    setServiceTokens={setServiceTokens as any}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="bg-white/5 rounded-md px-6 border-l border-red pl-6 flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2">
-              <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
-              <p className="mt-2 text-md text-gray-400">{t('settings-project:danger-zone-note')}</p>
-              <div className="max-h-28 w-full max-w-md mr-auto mt-4">
-                <InputField
-                  label={t('settings-project:project-to-delete') as string}
-                  onChangeHandler={setWorkspaceToBeDeletedName}
-                  type="varName"
-                  value={workspaceToBeDeletedName}
-                  placeholder=""
-                  isRequired
-                />
-              </div>
-              <button
-                type="button"
-                className="max-w-md mt-6 w-full inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-semibold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                onClick={executeDeletingWorkspace}
-              >
-                {t('settings-project:delete-project')}
-              </button>
-              <p className="mt-0.5 ml-1 text-xs text-gray-500">
-                {t('settings-project:delete-project-note')}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      <ProjectSettingsPage />
+    </>
   );
-}
+};
 
-SettingsBasic.requireAuth = true;
+export default ProjectSettings;
 
-export const getServerSideProps = getTranslatedServerSideProps([
+ProjectSettings.requireAuth = true;
+
+export const getServerSideProps = getTranslatedStaticProps([
   'settings',
   'settings-project',
   'section-token'
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
new file mode 100644
index 000000000..02d49764f
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -0,0 +1,287 @@
+import crypto from 'crypto';
+
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import NavHeader from '@app/components/navigation/NavHeader';
+// TODO(akhilmhdh):Refactor this into a better utility module package
+import {
+  decryptAssymmetric,
+  encryptSymmetric
+} from '@app/components/utilities/cryptography/crypto';
+import { Button, FormControl, Input } from '@app/components/v2';
+import { plans } from '@app/const';
+import { useSubscription, useWorkspace } from '@app/context';
+import { useToggle } from '@app/hooks';
+import {
+  useCreateServiceToken,
+  useCreateWsEnvironment,
+  useDeleteServiceToken,
+  useDeleteWorkspace,
+  useDeleteWsEnvironment,
+  useGetUserWsKey,
+  useGetUserWsServiceTokens,
+  useRenameWorkspace,
+  useUpdateWsEnvironment
+} from '@app/hooks/api';
+
+import {
+  CopyProjectIDSection,
+  CreateServiceToken,
+  CreateUpdateEnvFormData,
+  EnvironmentSection,
+  ProjectNameChangeSection,
+  ServiceTokenSection
+} from './components';
+
+export const ProjectSettingsPage = () => {
+  const { t } = useTranslation();
+  const { currentWorkspace } = useWorkspace();
+  const { data: serviceTokens } = useGetUserWsServiceTokens({
+    workspaceID: currentWorkspace?._id || ''
+  });
+  const workspaceID = currentWorkspace?._id || '';
+  const { createNotification } = useNotificationContext();
+  // delete action worksapce
+  const [deleteProjectInput, setDeleteProjectInput] = useState('');
+  const [isDeleting, setIsDeleting] = useToggle();
+
+  const renameWorkspace = useRenameWorkspace();
+  const deleteWorkspace = useDeleteWorkspace();
+  // env crud operation
+  const createWsEnv = useCreateWsEnvironment();
+  const updateWsEnv = useUpdateWsEnvironment();
+  const deleteWsEnv = useDeleteWsEnvironment();
+
+  // service token
+  const { data: latestFileKey } = useGetUserWsKey(workspaceID);
+  const createServiceToken = useCreateServiceToken();
+  const deleteServiceToken = useDeleteServiceToken();
+
+  // get user subscription
+  const { subscriptionPlan } = useSubscription();
+  const host = window.location.origin;
+  const isEnvServiceAllowed =
+    subscriptionPlan !== plans.starter || host !== 'https://app.infisical.com';
+
+  const onRenameWorkspace = async (name: string) => {
+    try {
+      await renameWorkspace.mutateAsync({ workspaceID, newWorkspaceName: name });
+      createNotification({
+        text: 'Successfully renamed workspace',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to rename workspace',
+        type: 'error'
+      });
+    }
+  };
+
+  const onDeleteWorkspace = async () => {
+    setIsDeleting.on();
+    try {
+      await deleteWorkspace.mutateAsync({ workspaceID });
+      createNotification({
+        text: 'Successfully deleted workspace',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete workspace',
+        type: 'error'
+      });
+    } finally {
+      setIsDeleting.off();
+    }
+  };
+
+  // workspace environment operation
+  const onCreateWsEnv = async ({ environmentName, environmentSlug }: CreateUpdateEnvFormData) => {
+    try {
+      await createWsEnv.mutateAsync({ workspaceID, environmentName, environmentSlug });
+      createNotification({
+        text: 'Successfully created environment',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create environment',
+        type: 'error'
+      });
+    }
+  };
+
+  const onUpdateWsEnv = async (
+    oldEnvironmentSlug: string,
+    { environmentName, environmentSlug }: CreateUpdateEnvFormData
+  ) => {
+    try {
+      await updateWsEnv.mutateAsync({
+        workspaceID,
+        environmentName,
+        environmentSlug,
+        oldEnvironmentSlug
+      });
+      createNotification({
+        text: 'Successfully updated environment',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to update environment',
+        type: 'error'
+      });
+    }
+  };
+
+  const onDeleteWsEnv = async (environmentSlug: string) => {
+    try {
+      await deleteWsEnv.mutateAsync({
+        workspaceID,
+        environmentSlug
+      });
+      createNotification({
+        text: 'Successfully deleted environment',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete environment',
+        type: 'error'
+      });
+    }
+  };
+
+  const onCreateServiceToken = async ({ environment, expiresIn, name }: CreateServiceToken) => {
+    // type guard
+    if (!latestFileKey) return '';
+    try {
+      // crypo calculation to generate the key
+      const key = decryptAssymmetric({
+        ciphertext: latestFileKey.encryptedKey,
+        nonce: latestFileKey.nonce,
+        publicKey: latestFileKey.sender.publicKey,
+        privateKey: localStorage.getItem('PRIVATE_KEY') as string
+      });
+      const randomBytes = crypto.randomBytes(16).toString('hex');
+      const { ciphertext, iv, tag } = encryptSymmetric({
+        plaintext: key,
+        key: randomBytes
+      });
+
+      const res = await createServiceToken.mutateAsync({
+        encryptedKey: ciphertext,
+        iv,
+        tag,
+        environment,
+        expiresIn: Number(expiresIn),
+        name,
+        workspaceId: workspaceID
+      });
+      console.log(res);
+      createNotification({
+        text: 'Successfully created API token',
+        type: 'success'
+      });
+      return res.serviceToken;
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create API token',
+        type: 'error'
+      });
+    }
+    return '';
+  };
+
+  const onDeleteServiceToken = async (tokenID: string) => {
+    try {
+      await deleteServiceToken.mutateAsync(tokenID);
+      createNotification({
+        text: 'Successfully revoked service token',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete service token',
+        type: 'error'
+      });
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex flex-col px-8 text-mineshaft-50">
+      {/* TODO(akhilmhdh): Remove this right when layout is refactored  */}
+      <div className="relative right-5">
+        <NavHeader pageName={t('settings-project:title')} isProjectRelated />
+      </div>
+      <div className="my-8 flex max-w-5xl flex-row items-center justify-between text-xl">
+        <div className="flex flex-col items-start justify-start text-3xl">
+          <p className="mr-4 font-semibold text-gray-200">{t('settings-project:title')}</p>
+          <p className="mr-4 text-base font-normal text-gray-400">
+            {t('settings-project:description')}
+          </p>
+        </div>
+      </div>
+      <ProjectNameChangeSection
+        workspaceName={currentWorkspace?.name}
+        onProjectNameChange={onRenameWorkspace}
+      />
+      <CopyProjectIDSection workspaceID={currentWorkspace?._id || ''} />
+      <EnvironmentSection
+        environments={currentWorkspace?.environments || []}
+        onCreate={onCreateWsEnv}
+        onDelete={onDeleteWsEnv}
+        onUpdate={onUpdateWsEnv}
+        isEnvServiceAllowed={isEnvServiceAllowed}
+      />
+      <ServiceTokenSection
+        tokens={serviceTokens || []}
+        environments={currentWorkspace?.environments || []}
+        onDeleteToken={onDeleteServiceToken}
+        workspaceName={currentWorkspace?.name || ''}
+        onCreateToken={onCreateServiceToken}
+      />
+      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-2">
+        <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
+        <p className="text-md mt-2 text-gray-400">{t('settings-project:danger-zone-note')}</p>
+        <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
+          <FormControl
+            label={
+              <div className="mb-2 text-sm font-normal text-gray-400">
+                Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
+                workspace
+              </div>
+            }
+          >
+            <Input
+              onChange={(e) => setDeleteProjectInput(e.target.value)}
+              value={deleteProjectInput}
+              placeholder="Type the project name to delete"
+            />
+          </FormControl>
+        </div>
+        <Button
+          colorSchema="danger"
+          onClick={onDeleteWorkspace}
+          isDisabled={deleteProjectInput !== currentWorkspace?.name || isDeleting}
+          isLoading={isDeleting}
+        >
+          {t('settings-project:delete-project')}
+        </Button>
+        <p className="mt-0.5 ml-1 text-xs text-gray-500">
+          {t('settings-project:delete-project-note')}
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/CopyProjectIDSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/CopyProjectIDSection.tsx
new file mode 100644
index 000000000..6e18a88f7
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/CopyProjectIDSection.tsx
@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { IconButton } from '@app/components/v2';
+import { useToggle } from '@app/hooks';
+
+type Props = {
+  workspaceID: string;
+};
+
+export const CopyProjectIDSection = ({ workspaceID }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isProjectIdCopied) {
+      timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isProjectIdCopied]);
+
+  const copyProjectIdToClipboard = () => {
+    navigator.clipboard.writeText(workspaceID);
+    setIsProjectIdCopied.on();
+  };
+
+  return (
+    <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pt-4 pb-2">
+      <p className="self-start text-xl font-semibold">{t('common:project-id')}</p>
+      <p className="mt-4 self-start text-base font-normal text-gray-400">
+        {t('settings-project:project-id-description')}
+      </p>
+      <p className="mt-2 self-start text-base font-normal text-gray-400">
+        {t('settings-project:project-id-description2')}
+        {/* eslint-disable-next-line react/jsx-no-target-blank */}
+        <a
+          href="https://infisical.com/docs/getting-started/introduction"
+          target="_blank"
+          rel="noopener"
+          className="text-primary duration-200 hover:opacity-80"
+        >
+          {t('settings-project:docs')}
+        </a>
+      </p>
+      <p className="mt-4 text-xs text-bunker-300">{t('settings-project:auto-generated')}</p>
+      <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400">
+        <p className="mr-2 pl-4 font-bold">{`${t('common:project-id')}:`}</p>
+        <p className="mr-4">{workspaceID}</p>
+        <IconButton
+          ariaLabel="copy icon"
+          colorSchema="secondary"
+          className="group relative"
+          onClick={() => copyProjectIdToClipboard()}
+        >
+          <FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />
+          <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+            {t('common:click-to-copy')}
+          </span>
+        </IconButton>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/index.tsx
new file mode 100644
index 000000000..1e56a1747
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/index.tsx
@@ -0,0 +1 @@
+export { CopyProjectIDSection } from './CopyProjectIDSection';
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
new file mode 100644
index 000000000..bb7a0a87e
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
@@ -0,0 +1,239 @@
+import { Controller, useForm } from 'react-hook-form';
+import { faPencil, faTrashCan } 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,
+  DeleteActionModal,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  UpgradePlanModal
+} from '@app/components/v2';
+import { usePopUp } from '@app/hooks/usePopUp';
+
+type Props = {
+  environments: Array<{ name: string; slug: string }>;
+  isEnvServiceAllowed: boolean;
+  onCreate: (data: CreateUpdateEnvFormData) => Promise<void>;
+  onUpdate: (oldEnvSlug: string, data: CreateUpdateEnvFormData) => Promise<void>;
+  onDelete: (envSlug: string) => Promise<void>;
+};
+
+const createUpdateEnvSchema = yup.object({
+  environmentName: yup.string().label('Environment Name').required(),
+  environmentSlug: yup.string().label('Environment Slug').required()
+});
+
+export type CreateUpdateEnvFormData = yup.InferType<typeof createUpdateEnvSchema>;
+
+export const EnvironmentSection = ({
+  environments,
+  isEnvServiceAllowed,
+  onCreate,
+  onDelete,
+  onUpdate
+}: Props): JSX.Element => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    'createUpdateEnv',
+    'deleteEnv',
+    'upgradePlan'
+  ] as const);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<CreateUpdateEnvFormData>({
+    resolver: yupResolver(createUpdateEnvSchema)
+  });
+
+  const isEnvUpdate = Boolean(popUp?.createUpdateEnv?.data);
+  const oldEnvSlug = (popUp?.createUpdateEnv?.data as { slug: string })?.slug;
+
+  const onEnvModalSubmit = async (data: CreateUpdateEnvFormData) => {
+    if (isEnvUpdate) {
+      await onUpdate(oldEnvSlug, data);
+    } else {
+      await onCreate(data);
+    }
+    handlePopUpClose('createUpdateEnv');
+  };
+
+  const onEnvDeleteSubmit = async (envSlug: string) => {
+    await onDelete(envSlug);
+    handlePopUpClose('deleteEnv');
+  };
+
+  return (
+    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 p-6">
+      <div className="mb-2 flex w-full flex-row justify-between">
+        <div className="flex w-full flex-col">
+          <p className="mb-3 text-xl font-semibold">Project Environments</p>
+          <p className="mb-4 text-base text-gray-400">
+            Choose which environments will show up in your dashboard like development, staging,
+            production
+          </p>
+          <p className="mr-1 self-start text-sm text-gray-500">
+            Note: the text in slugs shows how these environmant should be accessed in CLI.
+          </p>
+        </div>
+        <div>
+          <Button
+            onClick={() => {
+              if (isEnvServiceAllowed) {
+                handlePopUpOpen('createUpdateEnv');
+              } else {
+                handlePopUpOpen('upgradePlan');
+              }
+            }}
+            colorSchema="primary"
+          >
+            Add New Env
+          </Button>
+        </div>
+      </div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Slug</Th>
+              <Th aria-label="button" />
+            </Tr>
+          </THead>
+          <TBody>
+            {environments?.length > 0 ? (
+              environments.map(({ name, slug }) => (
+                <Tr key={name}>
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td className="flex items-center justify-end">
+                    <IconButton
+                      className="mr-4"
+                      onClick={() => {
+                        if (isEnvServiceAllowed) {
+                          handlePopUpOpen('createUpdateEnv', { name, slug });
+                          reset({ environmentName: name, environmentSlug: slug });
+                        } else {
+                          handlePopUpOpen('upgradePlan');
+                        }
+                      }}
+                      colorSchema="secondary"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faPencil} />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => {
+                        if (isEnvServiceAllowed) {
+                          handlePopUpOpen('deleteEnv', { name, slug });
+                        } else {
+                          handlePopUpOpen('upgradePlan');
+                        }
+                      }}
+                      colorSchema="danger"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr>
+                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
+                  No environmants found
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <Modal
+        isOpen={popUp?.createUpdateEnv?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle('createUpdateEnv', isOpen);
+          reset();
+        }}
+      >
+        <ModalContent title={isEnvUpdate ? 'Update environment' : 'Create a new environment'}>
+          <form onSubmit={handleSubmit(onEnvModalSubmit)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="environmentName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="environmentSlug"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment Slug"
+                  helperText="Slugs are shorthands used in cli to access environment"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                {isEnvUpdate ? 'Update' : 'Create'}
+              </Button>
+
+              <Button colorSchema="secondary" variant="plain">
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.deleteEnv.isOpen}
+        title={`Are you sure want to delete ${
+          (popUp?.deleteEnv?.data as { name: string })?.name || ' '
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle('deleteEnv', isOpen)}
+        deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ''}
+        onDeleteApproved={() =>
+          onEnvDeleteSubmit((popUp?.deleteEnv?.data as { slug: string })?.slug)
+        }
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('upgradePlan', isOpen)}
+        text="You can add custom environments if you switch to Infisical's Team plan."
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/index.tsx
new file mode 100644
index 000000000..239cfd747
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/index.tsx
@@ -0,0 +1 @@
+export { EnvironmentSection } from './EnvironmentSection';
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
new file mode 100644
index 000000000..876564e1f
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+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 } from '@app/components/v2';
+
+type Props = {
+  workspaceName?: string;
+  onProjectNameChange: (name: string) => Promise<void>;
+};
+
+const formSchema = yup.object({
+  name: yup.string().required().label('Project Name')
+});
+
+type FormData = yup.InferType<typeof formSchema>;
+
+export const ProjectNameChangeSection = ({
+  workspaceName,
+  onProjectNameChange
+}: Props): JSX.Element => {
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { isDirty, isSubmitting }
+  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    reset({ name: workspaceName });
+  }, [workspaceName]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    await onProjectNameChange(name);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-4 pt-2">
+        <p className="mb-4 mt-2 text-xl font-semibold">{t('common:display-name')}</p>
+        <div className="mb-4 w-full max-w-lg">
+          <Controller
+            defaultValue=""
+            render={({ field, fieldState: { error } }) => (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Input placeholder="Type your project name" {...field} />
+              </FormControl>
+            )}
+            control={control}
+            name="name"
+          />
+        </div>
+        <Button
+          isLoading={isSubmitting}
+          color="mineshaft"
+          size="sm"
+          type="submit"
+          isDisabled={!isDirty || isSubmitting}
+          leftIcon={<FontAwesomeIcon icon={faCheck} />}
+        >
+          {t('common:save-changes')}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/index.tsx
new file mode 100644
index 000000000..c50fe4757
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/index.tsx
@@ -0,0 +1 @@
+export { ProjectNameChangeSection } from './ProjectNameChangeSection';
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
new file mode 100644
index 000000000..bf83b0b4f
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
@@ -0,0 +1,307 @@
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { faCheck, faCopy, faPlus, faTrashCan } 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,
+  DeleteActionModal,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalTrigger,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from '@app/components/v2';
+import { usePopUp, useToggle } from '@app/hooks';
+import { ServiceToken, WorkspaceEnv } from '@app/hooks/api/types';
+
+const apiTokenExpiry = [
+  { label: '1 Day', value: 86400 },
+  { label: '7 Days', value: 604800 },
+  { label: '1 Month', value: 2592000 },
+  { label: '6 months', value: 15552000 },
+  { label: '12 months', value: 31104000 }
+];
+
+const createServiceTokenSchema = yup.object({
+  name: yup.string().required().label('Service Token Name'),
+  environment: yup.string().required().label('Environment'),
+  expiresIn: yup.string().required().label('Service Token Name')
+});
+
+export type CreateServiceToken = yup.InferType<typeof createServiceTokenSchema>;
+
+type Props = {
+  tokens: ServiceToken[];
+  workspaceName: string;
+  environments: WorkspaceEnv[];
+  onDeleteToken: (serviceTokenID: string) => Promise<void>;
+  onCreateToken: (data: CreateServiceToken) => Promise<string>;
+};
+
+type DeleteModalData = { name: string; id: string };
+
+export const ServiceTokenSection = ({
+  tokens = [],
+  onDeleteToken,
+  workspaceName,
+  environments = [],
+  onCreateToken
+}: Props): JSX.Element => {
+  const [newToken, setToken] = useState('');
+  const { t } = useTranslation();
+  const [isTokenCopied, setIsTokenCopied] = useToggle(false);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isTokenCopied) {
+      timer = setTimeout(() => setIsTokenCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isTokenCopied]);
+
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newToken);
+    setIsTokenCopied.on();
+  };
+
+  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    'createAPIToken',
+    'deleteAPITokenConfirmation'
+  ] as const);
+
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<CreateServiceToken>({
+    resolver: yupResolver(createServiceTokenSchema)
+  });
+
+  const hasServiceToken = Boolean(newToken);
+
+  const onFormSubmit = async (data: CreateServiceToken) => {
+    const token = await onCreateToken(data);
+    setToken(token);
+  };
+
+  const onDeleteApproved = async () => {
+    await onDeleteToken((popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id);
+    handlePopUpClose('deleteAPITokenConfirmation');
+  };
+
+  return (
+    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 p-6">
+      <div className="flex w-full flex-row justify-between">
+        <div className="flex w-full flex-col">
+          <p className="mb-3 text-xl font-semibold">{t('section-token:service-tokens')}</p>
+          <p className="text-sm text-gray-400">{t('section-token:service-tokens-description')}</p>
+          <p className="mb-4 text-sm text-gray-400">
+            Please, make sure you are on the
+            <a
+              className="ml-1 text-primary underline underline-offset-2"
+              href="https://infisical.com/docs/cli/overview"
+              target="_blank"
+              rel="noreferrer"
+            >
+              latest version of CLI
+            </a>
+            .
+          </p>
+        </div>
+        <div>
+          <Modal
+            isOpen={popUp?.createAPIToken?.isOpen}
+            onOpenChange={(open) => {
+              handlePopUpToggle('createAPIToken', open);
+              reset();
+              setToken('');
+            }}
+          >
+            <ModalTrigger asChild>
+              <Button color="mineshaft" leftIcon={<FontAwesomeIcon icon={faPlus} />}>
+                {t('section-token:add-new')}
+              </Button>
+            </ModalTrigger>
+            <ModalContent
+              title={
+                t('section-token:add-dialog.title', {
+                  target: workspaceName
+                }) as string
+              }
+              subTitle={t('section-token:add-dialog.description') as string}
+            >
+              {!hasServiceToken ? (
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                  <Controller
+                    control={control}
+                    name="name"
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label={t('section-token:add-dialog.name')}
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <Input {...field} placeholder="Type your token name" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="environment"
+                    defaultValue={environments?.[0]?.slug}
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => onChange(e)}
+                          className="w-full"
+                        >
+                          {environments.map(({ name, slug }) => (
+                            <SelectItem value={slug} key={slug}>
+                              {name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="expiresIn"
+                    defaultValue={String(apiTokenExpiry?.[0]?.value)}
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Token Expiry"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => onChange(e)}
+                          className="w-full"
+                        >
+                          {apiTokenExpiry.map(({ label, value }) => (
+                            <SelectItem value={String(value)} key={label}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <div className="mt-8 flex items-center">
+                    <Button
+                      className="mr-4"
+                      type="submit"
+                      isDisabled={isSubmitting}
+                      isLoading={isSubmitting}
+                    >
+                      Create
+                    </Button>
+                    <ModalClose asChild>
+                      <Button variant="plain" colorSchema="secondary">
+                        Cancel
+                      </Button>
+                    </ModalClose>
+                  </div>
+                </form>
+              ) : (
+                <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                  <p className="mr-4 break-all">{newToken}</p>
+                  <IconButton
+                    ariaLabel="copy icon"
+                    colorSchema="secondary"
+                    className="group relative"
+                    onClick={copyTokenToClipboard}
+                  >
+                    <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
+                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                      {t('common:click-to-copy')}
+                    </span>
+                  </IconButton>
+                </div>
+              )}
+            </ModalContent>
+          </Modal>
+        </div>
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.deleteAPITokenConfirmation.isOpen}
+        title={`Delete ${
+          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || ' '
+        } api key?`}
+        onChange={(isOpen) => handlePopUpToggle('deleteAPITokenConfirmation', isOpen)}
+        deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
+        onClose={() => handlePopUpClose('deleteAPITokenConfirmation')}
+        onDeleteApproved={onDeleteApproved}
+      />
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Token Name</Th>
+              <Th>Environment</Th>
+              <Th>Valid Until</Th>
+              <Th aria-label="button" />
+            </Tr>
+          </THead>
+          <TBody>
+            {tokens?.length > 0 ? (
+              tokens.map((row) => (
+                <Tr key={row._id}>
+                  <Td>{row.name}</Td>
+                  <Td>{row.environment}</Td>
+                  <Td>{new Date(row.expiresAt).toUTCString()}</Td>
+                  <Td className="flex items-center justify-end">
+                    <IconButton
+                      className="mr-4"
+                      onClick={() =>
+                        handlePopUpOpen('deleteAPITokenConfirmation', {
+                          name: row.name,
+                          id: row._id
+                        })
+                      }
+                      colorSchema="danger"
+                      ariaLabel="delete"
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr>
+                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
+                  No environmants found
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/index.tsx
new file mode 100644
index 000000000..d683dc3b8
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/index.tsx
@@ -0,0 +1 @@
+export {ServiceTokenSection} from './ServiceTokenSection'
\ No newline at end of file
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
new file mode 100644
index 000000000..163483278
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
@@ -0,0 +1,6 @@
+export { CopyProjectIDSection } from './CopyProjectIDSection';
+export { EnvironmentSection } from './EnvironmentSection';
+export type { CreateUpdateEnvFormData } from './EnvironmentSection/EnvironmentSection';
+export { ProjectNameChangeSection } from './ProjectNameChangeSection';
+export { ServiceTokenSection } from './ServiceTokenSection';
+export type { CreateServiceToken } from './ServiceTokenSection/ServiceTokenSection';
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/index.tsx
new file mode 100644
index 000000000..4c4efbdb7
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/index.tsx
@@ -0,0 +1 @@
+export { ProjectSettingsPage } from './ProjectSettingsPage';

From fb62fa4d3268abf48b346ff3d4cfde158532f3eb Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Fri, 3 Feb 2023 22:46:45 +0530
Subject: [PATCH 13/52] feat(ui): updated select design due to rebase changes

---
 frontend/src/components/v2/Select/Select.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index e76e90260..0a691e9eb 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -10,20 +10,24 @@ type Props = {
   children: ReactNode;
   placeholder?: string;
   className?: string;
+  dropdownContainerClassName?: string;
   isLoading?: boolean;
 };
 
 export type SelectProps = SelectPrimitive.SelectProps & Props;
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
-  ({ children, placeholder, className, isLoading, ...props }, ref): JSX.Element => {
+  (
+    { children, placeholder, className, isLoading, dropdownContainerClassName, ...props },
+    ref
+  ): JSX.Element => {
     return (
       <SelectPrimitive.Root {...props}>
         <SelectPrimitive.Trigger
           ref={ref}
           className={twMerge(
             `inline-flex items-center justify-between rounded-md
-            bg-mineshaft-800 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
+            bg-bunker-800 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
             className
           )}
         >
@@ -36,10 +40,10 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
-            // position="popper"
-            sideOffset={4}
-            className="overflow-hidden rounded-md bg-mineshaft-800 font-inter text-bunker-100 shadow-md"
-            style={{ width: 'var(--radix-select-trigger-width) + 6' }}
+            className={twMerge(
+              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md',
+              dropdownContainerClassName
+            )}
           >
             <SelectPrimitive.ScrollUpButton>
               <FontAwesomeIcon icon={faChevronUp} size="sm" />

From 1781b7139927730b8f7d38863380875e2e4e1d3f Mon Sep 17 00:00:00 2001
From: Mohammed <hi@cherfaoui.dev>
Date: Fri, 3 Feb 2023 22:33:39 +0100
Subject: [PATCH 14/52] add new modal to compare secrets across environments

---
 .../dashboard/CompareSecretsModal.tsx         | 75 +++++++++++++++++++
 frontend/src/components/dashboard/SideBar.tsx | 60 +++++++++++----
 2 files changed, 119 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/dashboard/CompareSecretsModal.tsx

diff --git a/frontend/src/components/dashboard/CompareSecretsModal.tsx b/frontend/src/components/dashboard/CompareSecretsModal.tsx
new file mode 100644
index 000000000..8c41ae8ca
--- /dev/null
+++ b/frontend/src/components/dashboard/CompareSecretsModal.tsx
@@ -0,0 +1,75 @@
+import { SetStateAction, useEffect, useState } from 'react';
+
+import { WorkspaceEnv } from '~/pages/dashboard/[id]';
+
+import getSecretsForProject from '../utilities/secrets/getSecretsForProject';
+import { Modal, ModalContent } from '../v2';
+
+interface Secrets {
+  label: string;
+  secret: string;
+}
+
+interface CompareSecretsModalProps {
+  compareModal: boolean;
+  setCompareModal: React.Dispatch<SetStateAction<boolean>>;
+  selectedEnv: WorkspaceEnv;
+  workspaceEnvs: WorkspaceEnv[];
+  workspaceId: string;
+  currentSecret: {
+    key: string;
+    value: string;
+  };
+}
+
+const CompareSecretsModal = ({
+  compareModal,
+  setCompareModal,
+  selectedEnv,
+  workspaceEnvs,
+  workspaceId,
+  currentSecret
+}: CompareSecretsModalProps) => {
+  const [secrets, setSecrets] = useState<Secrets[]>([]);
+
+  const getEnvSecrets = async () => {
+    const workspaceEnvironments = workspaceEnvs.filter((env) => env !== selectedEnv);
+    const newSecrets = await Promise.all(
+      workspaceEnvironments.map(async (env) => {
+        const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId });
+        const secret =
+          allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found';
+        return { label: env.name, secret };
+      })
+    );
+    setSecrets([{ label: selectedEnv.name, secret: currentSecret.value }, ...newSecrets]);
+  };
+
+  useEffect(() => {
+    if (compareModal) {
+      (async () => {
+        await getEnvSecrets();
+      })();
+    }
+  }, [compareModal]);
+
+  return (
+    <Modal isOpen={compareModal} onOpenChange={setCompareModal}>
+      <ModalContent title={currentSecret?.key} onOpenAutoFocus={(e) => e.preventDefault()}>
+        <div className="space-y-4">
+          {secrets.map((item) => (
+            <div key={`${currentSecret.key}${item.label}`} className="space-y-1">
+              <p className="text-sm text-bunker-300">{item.label}</p>
+              <input
+                defaultValue={item.secret}
+                className="h-no-capture text-md min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full rounded-md bg-bunker-800 px-2 py-1.5 font-mono text-gray-400 caret-white outline-none duration-200 no-scrollbar focus:ring-2 focus:ring-primary/50 "
+                readOnly
+              />
+            </div>
+          ))}
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
+export default CompareSecretsModal;
diff --git a/frontend/src/components/dashboard/SideBar.tsx b/frontend/src/components/dashboard/SideBar.tsx
index 1a3f99a29..b6c20d8d6 100644
--- a/frontend/src/components/dashboard/SideBar.tsx
+++ b/frontend/src/components/dashboard/SideBar.tsx
@@ -7,9 +7,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import SecretVersionList from '@app/ee/components/SecretVersionList';
 
+import { WorkspaceEnv } from '~/pages/dashboard/[id]';
+
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';
+import CompareSecretsModal from './CompareSecretsModal';
 import DashboardInputField from './DashboardInputField';
 import { DeleteActionButton } from './DeleteActionButton';
 import GenerateSecretMenu from './GenerateSecretMenu';
@@ -40,6 +43,9 @@ interface SideBarProps {
   sharedToHide: string[];
   setSharedToHide: (values: string[]) => void;
   deleteRow: (props: DeleteRowFunctionProps) => void;
+  workspaceEnvs: WorkspaceEnv[];
+  selectedEnv: WorkspaceEnv;
+  workspaceId: string;
 }
 
 /**
@@ -63,11 +69,15 @@ const SideBar = ({
   modifyComment,
   buttonReady,
   savePush,
-  deleteRow
+  deleteRow,
+  workspaceEnvs,
+  selectedEnv,
+  workspaceId
 }: SideBarProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isLoading, setIsLoading] = useState(false);
-  const [overrideEnabled, setOverrideEnabled] = useState(data[0].valueOverride !== undefined);
+  const [overrideEnabled, setOverrideEnabled] = useState(data[0]?.valueOverride !== undefined);
+  const [compareModal, setCompareModal] = useState(false);
   const { t } = useTranslation();
 
   return (
@@ -171,20 +181,38 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]">
-        <Button
-          text={String(t('common:save-changes'))}
-          onButtonPressed={savePush}
-          color="primary"
-          size="md"
-          active={buttonReady}
-          textDisabled="Saved"
-        />
-        <DeleteActionButton
-          onSubmit={() =>
-            deleteRow({ ids: data.map((secret) => secret.id), secretName: data[0]?.key })
-          }
-        />
+      <div className="mt-full mt-4 mb-[4.7rem] flex max-w-sm flex-col justify-start space-y-2 px-4">
+        <div>
+          <Button
+            text="Compare secret across environments"
+            color="mineshaft"
+            size="md"
+            onButtonPressed={() => setCompareModal(true)}
+          />
+          <CompareSecretsModal
+            compareModal={compareModal}
+            setCompareModal={setCompareModal}
+            currentSecret={{ key: data[0]?.key, value: data[0]?.value }}
+            workspaceEnvs={workspaceEnvs}
+            selectedEnv={selectedEnv}
+            workspaceId={workspaceId}
+          />
+        </div>
+        <div className="flex">
+          <Button
+            text={String(t('common:save-changes'))}
+            onButtonPressed={savePush}
+            color="primary"
+            size="md"
+            active={buttonReady}
+            textDisabled="Saved"
+          />
+          <DeleteActionButton
+            onSubmit={() =>
+              deleteRow({ ids: data.map((secret) => secret.id), secretName: data[0]?.key })
+            }
+          />
+        </div>
       </div>
     </div>
   );

From 16883cf168047826603dbf94d116f776327564c2 Mon Sep 17 00:00:00 2001
From: Mohammed <hi@cherfaoui.dev>
Date: Fri, 3 Feb 2023 22:34:18 +0100
Subject: [PATCH 15/52] make some params optional

---
 .../utilities/secrets/getSecretsForProject.ts       | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/utilities/secrets/getSecretsForProject.ts b/frontend/src/components/utilities/secrets/getSecretsForProject.ts
index c00f13d04..62c1e2e2d 100644
--- a/frontend/src/components/utilities/secrets/getSecretsForProject.ts
+++ b/frontend/src/components/utilities/secrets/getSecretsForProject.ts
@@ -29,8 +29,8 @@ interface SecretProps {
 
 interface FunctionProps {
   env: string;
-  setIsKeyAvailable: any;
-  setData: any;
+  setIsKeyAvailable?: any;
+  setData?: any;
   workspaceId: string;
 }
 
@@ -58,7 +58,9 @@ const getSecretsForProject = async ({
 
     const latestKey = await getLatestFileKey({ workspaceId });
     // This is called isKeyAvailable but what it really means is if a person is able to create new key pairs
-    setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true);
+    if (typeof setIsKeyAvailable === 'function') {
+      setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true);
+    }
 
     const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
 
@@ -131,7 +133,10 @@ const getSecretsForProject = async ({
       )[0]?.comment
     }));
 
-    setData(result);
+    if (typeof setData === 'function') {
+      setData(result);
+    }
+  
     return result;
   } catch (error) {
     console.log('Something went wrong during accessing or decripting secrets.');

From f1ef23874c7eacb523f0addf88cf454a9dead01b Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Fri, 3 Feb 2023 16:55:25 -0800
Subject: [PATCH 16/52] Add token flag to read secrets via service token

---
 cli/packages/cmd/export.go   |  7 +++-
 cli/packages/cmd/run.go      | 10 +++++-
 cli/packages/cmd/secrets.go  | 64 ++++++++++++++++++++----------------
 cli/packages/models/cli.go   |  5 +++
 cli/packages/util/secrets.go | 11 +++++--
 5 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/cli/packages/cmd/export.go b/cli/packages/cmd/export.go
index 41e170f70..089c407b0 100644
--- a/cli/packages/cmd/export.go
+++ b/cli/packages/cmd/export.go
@@ -56,7 +56,12 @@ var exportCmd = &cobra.Command{
 			util.HandleError(err, "Unable to parse flag")
 		}
 
-		secrets, err := util.GetAllEnvironmentVariables(envName)
+		infisicalToken, err := cmd.Flags().GetString("token")
+		if err != nil {
+			util.HandleError(err, "Unable to parse flag")
+		}
+
+		secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: envName, InfisicalToken: infisicalToken})
 		if err != nil {
 			util.HandleError(err, "Unable to fetch secrets")
 		}
diff --git a/cli/packages/cmd/run.go b/cli/packages/cmd/run.go
index d31981b02..bd1be4300 100644
--- a/cli/packages/cmd/run.go
+++ b/cli/packages/cmd/run.go
@@ -12,6 +12,7 @@ import (
 	"strings"
 	"syscall"
 
+	"github.com/Infisical/infisical-merge/packages/models"
 	"github.com/Infisical/infisical-merge/packages/util"
 	"github.com/fatih/color"
 	log "github.com/sirupsen/logrus"
@@ -58,6 +59,11 @@ var runCmd = &cobra.Command{
 			util.HandleError(err, "Unable to parse flag")
 		}
 
+		infisicalToken, err := cmd.Flags().GetString("token")
+		if err != nil {
+			util.HandleError(err, "Unable to parse flag")
+		}
+
 		// if !util.IsSecretEnvironmentValid(envName) {
 		// 	util.PrintMessageAndExit("Invalid environment name passed. Environment names can only be prod, dev, test or staging")
 		// }
@@ -72,7 +78,8 @@ var runCmd = &cobra.Command{
 			util.HandleError(err, "Unable to parse flag")
 		}
 
-		secrets, err := util.GetAllEnvironmentVariables(envName)
+		secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: envName, InfisicalToken: infisicalToken})
+
 		if err != nil {
 			util.HandleError(err, "Could not fetch secrets", "If you are using a service token to fetch secrets, please ensure it is valid")
 		}
@@ -140,6 +147,7 @@ var runCmd = &cobra.Command{
 
 func init() {
 	rootCmd.AddCommand(runCmd)
+	runCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
 	runCmd.Flags().StringP("env", "e", "dev", "Set the environment (dev, prod, etc.) from which your secrets should be pulled from")
 	runCmd.Flags().Bool("expand", true, "Parse shell parameter expansions in your secrets")
 	runCmd.Flags().Bool("secret-overriding", true, "Prioritizes personal secrets, if any, with the same name over shared secrets")
diff --git a/cli/packages/cmd/secrets.go b/cli/packages/cmd/secrets.go
index 060a69a45..c5fb11c1e 100644
--- a/cli/packages/cmd/secrets.go
+++ b/cli/packages/cmd/secrets.go
@@ -34,12 +34,17 @@ var secretsCmd = &cobra.Command{
 			util.HandleError(err)
 		}
 
+		infisicalToken, err := cmd.Flags().GetString("token")
+		if err != nil {
+			util.HandleError(err, "Unable to parse flag")
+		}
+
 		shouldExpandSecrets, err := cmd.Flags().GetBool("expand")
 		if err != nil {
 			util.HandleError(err)
 		}
 
-		secrets, err := util.GetAllEnvironmentVariables(environmentName)
+		secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken})
 		if err != nil {
 			util.HandleError(err)
 		}
@@ -111,7 +116,7 @@ var secretsSetCmd = &cobra.Command{
 		plainTextEncryptionKey := crypto.DecryptAsymmetric(encryptedWorkspaceKey, encryptedWorkspaceKeyNonce, encryptedWorkspaceKeySenderPublicKey, currentUsersPrivateKey)
 
 		// pull current secrets
-		secrets, err := util.GetAllEnvironmentVariables(environmentName)
+		secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName})
 		if err != nil {
 			util.HandleError(err, "unable to retrieve secrets")
 		}
@@ -267,7 +272,7 @@ var secretsDeleteCmd = &cobra.Command{
 			util.HandleError(err, "Unable to get local project details")
 		}
 
-		secrets, err := util.GetAllEnvironmentVariables(environmentName)
+		secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName})
 		if err != nil {
 			util.HandleError(err, "Unable to fetch secrets")
 		}
@@ -309,30 +314,6 @@ var secretsDeleteCmd = &cobra.Command{
 	},
 }
 
-func init() {
-	secretsCmd.AddCommand(secretsGetCmd)
-	secretsGetCmd.PersistentPreRun = func(cmd *cobra.Command, args []string) {
-		util.RequireLogin()
-		util.RequireLocalWorkspaceFile()
-	}
-
-	secretsCmd.AddCommand(secretsSetCmd)
-	secretsSetCmd.PersistentPreRun = func(cmd *cobra.Command, args []string) {
-		util.RequireLogin()
-		util.RequireLocalWorkspaceFile()
-	}
-
-	secretsCmd.AddCommand(secretsDeleteCmd)
-	secretsDeleteCmd.PersistentPreRun = func(cmd *cobra.Command, args []string) {
-		util.RequireLogin()
-		util.RequireLocalWorkspaceFile()
-	}
-
-	secretsCmd.PersistentFlags().String("env", "dev", "Used to select the environment name on which actions should be taken on")
-	secretsCmd.Flags().Bool("expand", true, "Parse shell parameter expansions in your secrets")
-	rootCmd.AddCommand(secretsCmd)
-}
-
 func getSecretsByNames(cmd *cobra.Command, args []string) {
 	environmentName, err := cmd.Flags().GetString("env")
 	if err != nil {
@@ -344,7 +325,12 @@ func getSecretsByNames(cmd *cobra.Command, args []string) {
 		util.HandleError(err, "Unable to parse flag")
 	}
 
-	secrets, err := util.GetAllEnvironmentVariables(environmentName)
+	infisicalToken, err := cmd.Flags().GetString("token")
+	if err != nil {
+		util.HandleError(err, "Unable to parse flag")
+	}
+
+	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken})
 	if err != nil {
 		util.HandleError(err, "To fetch all secrets")
 	}
@@ -380,3 +366,25 @@ func getSecretsByKeys(secrets []models.SingleEnvironmentVariable) map[string]mod
 
 	return secretMapByName
 }
+
+func init() {
+	secretsGetCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
+	secretsCmd.AddCommand(secretsGetCmd)
+
+	secretsCmd.AddCommand(secretsSetCmd)
+	secretsSetCmd.PersistentPreRun = func(cmd *cobra.Command, args []string) {
+		util.RequireLogin()
+		util.RequireLocalWorkspaceFile()
+	}
+
+	secretsCmd.AddCommand(secretsDeleteCmd)
+	secretsDeleteCmd.PersistentPreRun = func(cmd *cobra.Command, args []string) {
+		util.RequireLogin()
+		util.RequireLocalWorkspaceFile()
+	}
+
+	secretsCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
+	secretsCmd.PersistentFlags().String("env", "dev", "Used to select the environment name on which actions should be taken on")
+	secretsCmd.Flags().Bool("expand", true, "Parse shell parameter expansions in your secrets")
+	rootCmd.AddCommand(secretsCmd)
+}
diff --git a/cli/packages/models/cli.go b/cli/packages/models/cli.go
index 7bc31cab2..5c40e23f1 100644
--- a/cli/packages/models/cli.go
+++ b/cli/packages/models/cli.go
@@ -38,3 +38,8 @@ type SymmetricEncryptionResult struct {
 	Nonce      []byte
 	AuthTag    []byte
 }
+
+type GetAllSecretsParameters struct {
+	Environment    string
+	InfisicalToken string
+}
diff --git a/cli/packages/util/secrets.go b/cli/packages/util/secrets.go
index 1cf8a7ab5..c20bd94e7 100644
--- a/cli/packages/util/secrets.go
+++ b/cli/packages/util/secrets.go
@@ -97,8 +97,13 @@ func GetPlainTextSecretsViaJTW(JTWToken string, receiversPrivateKey string, work
 	return plainTextSecrets, nil
 }
 
-func GetAllEnvironmentVariables(envName string) ([]models.SingleEnvironmentVariable, error) {
-	infisicalToken := os.Getenv(INFISICAL_TOKEN_NAME)
+func GetAllEnvironmentVariables(params models.GetAllSecretsParameters) ([]models.SingleEnvironmentVariable, error) {
+	var infisicalToken string
+	if params.InfisicalToken == "" {
+		infisicalToken = os.Getenv(INFISICAL_TOKEN_NAME)
+	} else {
+		infisicalToken = params.InfisicalToken
+	}
 
 	if infisicalToken == "" {
 		RequireLocalWorkspaceFile()
@@ -115,7 +120,7 @@ func GetAllEnvironmentVariables(envName string) ([]models.SingleEnvironmentVaria
 			return nil, err
 		}
 
-		secrets, err := GetPlainTextSecretsViaJTW(loggedInUserDetails.UserCredentials.JTWToken, loggedInUserDetails.UserCredentials.PrivateKey, workspaceFile.WorkspaceId, envName)
+		secrets, err := GetPlainTextSecretsViaJTW(loggedInUserDetails.UserCredentials.JTWToken, loggedInUserDetails.UserCredentials.PrivateKey, workspaceFile.WorkspaceId, params.Environment)
 		return secrets, err
 
 	} else {

From fca003dfd76f87cb36d02076699b3382c3d4fd12 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 3 Feb 2023 20:09:28 -0800
Subject: [PATCH 17/52] Minor typos fixed and style changes

---
 .../components/basic/table/EnvironmentsTable.tsx |  2 +-
 frontend/src/components/v2/Button/Button.tsx     |  7 ++++---
 frontend/src/components/v2/Card/Card.tsx         |  4 ++--
 .../src/components/v2/IconButton/IconButton.tsx  | 16 ++++++++--------
 frontend/src/components/v2/Input/Input.tsx       |  6 +++---
 frontend/src/components/v2/Modal/Modal.tsx       |  4 ++--
 frontend/src/components/v2/Table/Table.tsx       |  6 +++---
 .../ProjectSettingsPage/ProjectSettingsPage.tsx  | 11 ++++++-----
 .../EnvironmentSection/EnvironmentSection.tsx    |  9 +++++----
 .../ProjectNameChangeSection.tsx                 |  4 ++--
 .../ServiceTokenSection/ServiceTokenSection.tsx  |  5 ++---
 11 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/basic/table/EnvironmentsTable.tsx b/frontend/src/components/basic/table/EnvironmentsTable.tsx
index 0583976db..37411c366 100644
--- a/frontend/src/components/basic/table/EnvironmentsTable.tsx
+++ b/frontend/src/components/basic/table/EnvironmentsTable.tsx
@@ -148,7 +148,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
             ) : (
               <tr>
                 <td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
-                  No environmants found
+                  No environments found
                 </td>
               </tr>
             )}
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 27f34838d..e16e09128 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -26,7 +26,7 @@ const buttonVariants = cva(
       colorSchema: {
         primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red']
+        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
       },
       variant: {
         solid: '',
@@ -34,7 +34,7 @@ const buttonVariants = cva(
         plain: ''
       },
       isDisabled: {
-        true: 'bg-opacity-40 cursor-not-allowed',
+        true: 'bg-mineshaft opacity-40 cursor-not-allowed',
         false: ''
       },
       isFullWidth: {
@@ -147,7 +147,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           className={twMerge(
             'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
-            size === 'xs' ? 'mr-1' : 'mr-2'
+            leftIcon && 'ml-2',
+            size === 'xs' ? 'mr-1' : 'mr-3'
           )}
         >
           {leftIcon}
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index 9ddfb8a42..1f8448a03 100644
--- a/frontend/src/components/v2/Card/Card.tsx
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -8,7 +8,7 @@ export type CardTitleProps = {
 };
 
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
-  <div className={twMerge('p-6 pb-4 font-sans text-xl font-medium', className)}>
+  <div className={twMerge('px-6 py-4 font-sans text-xl font-medium', className)}>
     {children}
     {subTitle && <p className="py-1 text-sm font-normal text-gray-400">{subTitle}</p>}
   </div>
@@ -29,7 +29,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className }: CardBodyProps) => (
-  <div className={twMerge('p-6 pb-4 pt-0', className)}>{children}</div>
+  <div className={twMerge('px-6 pb-6 pt-0', className)}>{children}</div>
 );
 
 export type CardProps = {
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
index eb4919617..d0500ab80 100644
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -22,9 +22,9 @@ const iconButtonVariants = cva(
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
-        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red']
+        primary: ['bg-primary', 'text-black', 'border-primary hover:opacity-80'],
+        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-bunker-400'],
+        danger: ['bg-[#973939] hover:bg-red', 'text-white', 'border-red']
       },
       variant: {
         solid: '',
@@ -40,10 +40,10 @@ const iconButtonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1', 'px-2'],
-        sm: ['text-sm', 'py-2', 'px-3'],
-        md: ['text-md', 'py-3', 'px-4'],
-        lg: ['text-lg', 'py-3', 'px-6']
+        xs: ['text-xs', 'py-2', 'px-2'],
+        sm: ['text-sm', 'py-3', 'px-3'],
+        md: ['text-md', 'py-4', 'px-4'],
+        lg: ['text-lg', 'py-6', 'px-6']
       }
     },
     compoundVariants: [
@@ -97,7 +97,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       ariaLabel,
       isDisabled = false,
       className,
-      size = 'md',
+      size = 'sm',
       variant = 'solid',
       isRounded = true,
       colorSchema = 'primary',
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index 8c3685dac..28524c72d 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -12,7 +12,7 @@ type Props = {
 };
 
 const inputVariants = cva(
-  'input w-full py-2 text-gray-400 placeholder-gray-500 placeholder-opacity-50',
+  'input w-full py-2 text-gray-400 placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2',
   {
     variants: {
       size: {
@@ -91,8 +91,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           disabled={isDisabled}
           className={twMerge(
-            leftIcon ? 'pl-9' : 'pl-4',
-            rightIcon ? 'pr-9' : 'pr-4',
+            leftIcon ? 'pl-9' : 'pl-2.5',
+            rightIcon ? 'pr-9' : 'pr-2.5',
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index eea12fbc5..8c979473b 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -36,9 +36,9 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-2.5 right-2.5 rounded text-white hover:bg-gray-600"
+              className="absolute top-3 right-3 rounded text-white hover:bg-gray-600"
             >
-              <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
+              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>
           </DialogPrimitive.Close>
         </Card>
diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx
index 3513bf62b..d44ba7755 100644
--- a/frontend/src/components/v2/Table/Table.tsx
+++ b/frontend/src/components/v2/Table/Table.tsx
@@ -59,7 +59,7 @@ export type TrProps = {
 } & HTMLAttributes<HTMLTableRowElement>;
 
 export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
-  <tr className={twMerge('border border-solid border-mineshaft-700', className)} {...props}>
+  <tr className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)} {...props}>
     {children}
   </tr>
 );
@@ -71,7 +71,7 @@ export type ThProps = {
 };
 
 export const Th = ({ children, className }: ThProps): JSX.Element => (
-  <th className={twMerge('px-6 py-3 font-medium', className)}>{children}</th>
+  <th className={twMerge('px-5 pt-4 pb-3.5 font-medium font-semibold bg-bunker-500', className)}>{children}</th>
 );
 
 // table body
@@ -91,7 +91,7 @@ export type TdProps = {
 } & TdHTMLAttributes<HTMLTableCellElement>;
 
 export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
-  <td className={twMerge('px-6 py-3 text-left', className)} {...props}>
+  <td className={twMerge('px-5 py-2 text-left', className)} {...props}>
     {children}
   </td>
 );
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index 02d49764f..e6e8f317d 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -64,6 +64,7 @@ export const ProjectSettingsPage = () => {
   const host = window.location.origin;
   const isEnvServiceAllowed =
     subscriptionPlan !== plans.starter || host !== 'https://app.infisical.com';
+  
 
   const onRenameWorkspace = async (name: string) => {
     try {
@@ -188,14 +189,14 @@ export const ProjectSettingsPage = () => {
       });
       console.log(res);
       createNotification({
-        text: 'Successfully created API token',
+        text: 'Successfully created a service token',
         type: 'success'
       });
       return res.serviceToken;
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to create API token',
+        text: 'Failed to create a service token',
         type: 'error'
       });
     }
@@ -251,13 +252,13 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name || ''}
         onCreateToken={onCreateServiceToken}
       />
-      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-2">
+      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-4">
         <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
         <p className="text-md mt-2 text-gray-400">{t('settings-project:danger-zone-note')}</p>
         <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
           <FormControl
             label={
-              <div className="mb-2 text-sm font-normal text-gray-400">
+              <div className="mb-0.5 text-sm font-normal text-gray-400">
                 Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
                 workspace
               </div>
@@ -278,7 +279,7 @@ export const ProjectSettingsPage = () => {
         >
           {t('settings-project:delete-project')}
         </Button>
-        <p className="mt-0.5 ml-1 text-xs text-gray-500">
+        <p className="mt-3 ml-0.5 text-xs text-gray-500">
           {t('settings-project:delete-project-note')}
         </p>
       </div>
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
index bb7a0a87e..521394f9f 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
@@ -1,5 +1,5 @@
 import { Controller, useForm } from 'react-hook-form';
-import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { faPencil, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
@@ -100,6 +100,7 @@ export const EnvironmentSection = ({
               }
             }}
             colorSchema="primary"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
           >
             Add New Env
           </Button>
@@ -122,7 +123,7 @@ export const EnvironmentSection = ({
                   <Td>{slug}</Td>
                   <Td className="flex items-center justify-end">
                     <IconButton
-                      className="mr-4"
+                      className="mr-3"
                       onClick={() => {
                         if (isEnvServiceAllowed) {
                           handlePopUpOpen('createUpdateEnv', { name, slug });
@@ -154,8 +155,8 @@ export const EnvironmentSection = ({
               ))
             ) : (
               <Tr>
-                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
-                  No environmants found
+                <Td colSpan={4} className="pt-7 pb-5 text-center text-bunker-400">
+                  No environments found
                 </Td>
               </Tr>
             )}
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index 876564e1f..02b488b55 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -41,9 +41,9 @@ export const ProjectNameChangeSection = ({
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
-      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-4 pt-2">
+      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-3">
         <p className="mb-4 mt-2 text-xl font-semibold">{t('common:display-name')}</p>
-        <div className="mb-4 w-full max-w-lg">
+        <div className="mb-2 w-full max-w-lg">
           <Controller
             defaultValue=""
             render={({ field, fieldState: { error } }) => (
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
index bf83b0b4f..052fdc678 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
@@ -277,7 +277,6 @@ export const ServiceTokenSection = ({
                   <Td>{new Date(row.expiresAt).toUTCString()}</Td>
                   <Td className="flex items-center justify-end">
                     <IconButton
-                      className="mr-4"
                       onClick={() =>
                         handlePopUpOpen('deleteAPITokenConfirmation', {
                           name: row.name,
@@ -294,8 +293,8 @@ export const ServiceTokenSection = ({
               ))
             ) : (
               <Tr>
-                <Td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
-                  No environmants found
+                <Td colSpan={4} className="py-6 text-center text-bunker-400">
+                  No service tokens found
                 </Td>
               </Tr>
             )}

From 0d57a26925c4d2c716cac7f4d37c32232d5e7d01 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Fri, 3 Feb 2023 20:54:14 -0800
Subject: [PATCH 18/52] Add token flag to export command

---
 cli/packages/cmd/export.go | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cli/packages/cmd/export.go b/cli/packages/cmd/export.go
index 089c407b0..c2963f6bd 100644
--- a/cli/packages/cmd/export.go
+++ b/cli/packages/cmd/export.go
@@ -96,6 +96,7 @@ func init() {
 	exportCmd.Flags().Bool("expand", true, "Parse shell parameter expansions in your secrets")
 	exportCmd.Flags().StringP("format", "f", "dotenv", "Set the format of the output file (dotenv, json, csv)")
 	exportCmd.Flags().Bool("secret-overriding", true, "Prioritizes personal secrets, if any, with the same name over shared secrets")
+	exportCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
 }
 
 // Format according to the format flag

From e16c0e53ff96601172bfd83e004a3a20333d9c05 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Fri, 3 Feb 2023 21:02:23 -0800
Subject: [PATCH 19/52] Add offline secrets fetch feature

---
 cli/packages/models/cli.go   |   6 +-
 cli/packages/util/common.go  |   9 +++
 cli/packages/util/secrets.go | 123 +++++++++++++++++++++++++++++++++--
 3 files changed, 129 insertions(+), 9 deletions(-)

diff --git a/cli/packages/models/cli.go b/cli/packages/models/cli.go
index 5c40e23f1..67b89b27f 100644
--- a/cli/packages/models/cli.go
+++ b/cli/packages/models/cli.go
@@ -34,9 +34,9 @@ type WorkspaceConfigFile struct {
 }
 
 type SymmetricEncryptionResult struct {
-	CipherText []byte
-	Nonce      []byte
-	AuthTag    []byte
+	CipherText []byte `json:"CipherText"`
+	Nonce      []byte `json:"Nonce"`
+	AuthTag    []byte `json:"AuthTag"`
 }
 
 type GetAllSecretsParameters struct {
diff --git a/cli/packages/util/common.go b/cli/packages/util/common.go
index 2d420ac6f..13e76046d 100644
--- a/cli/packages/util/common.go
+++ b/cli/packages/util/common.go
@@ -2,6 +2,7 @@ package util
 
 import (
 	"fmt"
+	"net/http"
 	"os"
 )
 
@@ -19,3 +20,11 @@ func WriteToFile(fileName string, dataToWrite []byte, filePerm os.FileMode) erro
 
 	return nil
 }
+
+func CheckIsConnectedToInternet() (ok bool) {
+	_, err := http.Get("http://clients3.google.com/generate_204")
+	if err != nil {
+		return false
+	}
+	return true
+}
diff --git a/cli/packages/util/secrets.go b/cli/packages/util/secrets.go
index c20bd94e7..57b105de3 100644
--- a/cli/packages/util/secrets.go
+++ b/cli/packages/util/secrets.go
@@ -2,6 +2,8 @@ package util
 
 import (
 	"encoding/base64"
+	"encoding/json"
+	"errors"
 	"fmt"
 	"os"
 	"regexp"
@@ -105,10 +107,18 @@ func GetAllEnvironmentVariables(params models.GetAllSecretsParameters) ([]models
 		infisicalToken = params.InfisicalToken
 	}
 
+	isConnected := CheckIsConnectedToInternet()
+	var secretsToReturn []models.SingleEnvironmentVariable
+	var errorToReturn error
+
 	if infisicalToken == "" {
-		RequireLocalWorkspaceFile()
-		RequireLogin()
-		log.Debug("Trying to fetch secrets using logged in details")
+		if isConnected {
+			log.Debug("GetAllEnvironmentVariables: Connected to internet, checking logged in creds")
+			RequireLocalWorkspaceFile()
+			RequireLogin()
+		}
+
+		log.Debug("GetAllEnvironmentVariables: Trying to fetch secrets using logged in details")
 
 		loggedInUserDetails, err := GetCurrentLoggedInUserDetails()
 		if err != nil {
@@ -120,13 +130,30 @@ func GetAllEnvironmentVariables(params models.GetAllSecretsParameters) ([]models
 			return nil, err
 		}
 
-		secrets, err := GetPlainTextSecretsViaJTW(loggedInUserDetails.UserCredentials.JTWToken, loggedInUserDetails.UserCredentials.PrivateKey, workspaceFile.WorkspaceId, params.Environment)
-		return secrets, err
+		secretsToReturn, errorToReturn = GetPlainTextSecretsViaJTW(loggedInUserDetails.UserCredentials.JTWToken, loggedInUserDetails.UserCredentials.PrivateKey, workspaceFile.WorkspaceId, params.Environment)
+		log.Debugf("GetAllEnvironmentVariables: Trying to fetch secrets JTW token [err=%s]", errorToReturn)
+
+		backupSecretsEncryptionKey := []byte(loggedInUserDetails.UserCredentials.PrivateKey)[0:32]
+		if errorToReturn == nil {
+			WriteBackupSecrets(workspaceFile.WorkspaceId, params.Environment, backupSecretsEncryptionKey, secretsToReturn)
+		}
+
+		// only attempt to serve cached secrets if no internet connection and if at least one secret cached
+		if !isConnected {
+			backedSecrets, err := ReadBackupSecrets(workspaceFile.WorkspaceId, params.Environment, backupSecretsEncryptionKey)
+			if len(backedSecrets) > 0 {
+				PrintWarning("Unable to fetch latest secret(s) due to connection error, serving secrets from last successful fetch. For more info, run with --debug")
+				secretsToReturn = backedSecrets
+				errorToReturn = err
+			}
+		}
 
 	} else {
 		log.Debug("Trying to fetch secrets using service token")
-		return GetPlainTextSecretsViaServiceToken(infisicalToken)
+		secretsToReturn, errorToReturn = GetPlainTextSecretsViaServiceToken(infisicalToken)
 	}
+
+	return secretsToReturn, errorToReturn
 }
 
 func getExpandedEnvVariable(secrets []models.SingleEnvironmentVariable, variableWeAreLookingFor string, hashMapOfCompleteVariables map[string]string, hashMapOfSelfRefs map[string]string) string {
@@ -300,3 +327,87 @@ func GetPlainTextSecrets(key []byte, encryptedSecrets api.GetEncryptedSecretsV2R
 
 	return plainTextSecrets, nil
 }
+
+func WriteBackupSecrets(workspace string, environment string, encryptionKey []byte, secrets []models.SingleEnvironmentVariable) error {
+	fileName := fmt.Sprintf("secrets_%s_%s", workspace, environment)
+	secrets_backup_folder_name := "secrets-backup"
+
+	_, fullConfigFileDirPath, err := GetFullConfigFilePath()
+	if err != nil {
+		return fmt.Errorf("WriteBackupSecrets: unable to get full config folder path [err=%s]", err)
+	}
+
+	// create secrets backup directory
+	fullPathToSecretsBackupFolder := fmt.Sprintf("%s/%s", fullConfigFileDirPath, secrets_backup_folder_name)
+	if _, err := os.Stat(fullPathToSecretsBackupFolder); errors.Is(err, os.ErrNotExist) {
+		err := os.Mkdir(fullPathToSecretsBackupFolder, os.ModePerm)
+		if err != nil {
+			return err
+		}
+	}
+
+	var encryptedSecrets []models.SymmetricEncryptionResult
+	for _, secret := range secrets {
+		marshaledSecrets, _ := json.Marshal(secret)
+		result, err := crypto.EncryptSymmetric(marshaledSecrets, encryptionKey)
+		if err != nil {
+			return err
+		}
+
+		encryptedSecrets = append(encryptedSecrets, result)
+	}
+
+	listOfSecretsMarshalled, _ := json.Marshal(encryptedSecrets)
+	err = os.WriteFile(fmt.Sprintf("%s/%s", fullPathToSecretsBackupFolder, fileName), listOfSecretsMarshalled, os.ModePerm)
+	if err != nil {
+		return fmt.Errorf("WriteBackupSecrets: Unable to write backup secrets to file [err=%s]", err)
+	}
+
+	return nil
+}
+
+func ReadBackupSecrets(workspace string, environment string, encryptionKey []byte) ([]models.SingleEnvironmentVariable, error) {
+	fileName := fmt.Sprintf("secrets_%s_%s", workspace, environment)
+	secrets_backup_folder_name := "secrets-backup"
+
+	_, fullConfigFileDirPath, err := GetFullConfigFilePath()
+	if err != nil {
+		return nil, fmt.Errorf("ReadBackupSecrets: unable to write config file because an error occurred when getting config file path [err=%s]", err)
+	}
+
+	fullPathToSecretsBackupFolder := fmt.Sprintf("%s/%s", fullConfigFileDirPath, secrets_backup_folder_name)
+	if _, err := os.Stat(fullPathToSecretsBackupFolder); errors.Is(err, os.ErrNotExist) {
+		return nil, nil
+	}
+
+	encryptedBackupSecretsFilePath := fmt.Sprintf("%s/%s", fullPathToSecretsBackupFolder, fileName)
+
+	encryptedBackupSecretsAsBytes, err := os.ReadFile(encryptedBackupSecretsFilePath)
+	if err != nil {
+		return nil, err
+	}
+
+	var listOfEncryptedBackupSecrets []models.SymmetricEncryptionResult
+
+	_ = json.Unmarshal(encryptedBackupSecretsAsBytes, &listOfEncryptedBackupSecrets)
+
+	var plainTextSecrets []models.SingleEnvironmentVariable
+	for _, encryptedSecret := range listOfEncryptedBackupSecrets {
+		result, err := crypto.DecryptSymmetric(encryptionKey, encryptedSecret.CipherText, encryptedSecret.AuthTag, encryptedSecret.Nonce)
+		if err != nil {
+			return nil, err
+		}
+
+		var plainTextSecret models.SingleEnvironmentVariable
+
+		err = json.Unmarshal(result, &plainTextSecret)
+		if err != nil {
+			return nil, err
+		}
+
+		plainTextSecrets = append(plainTextSecrets, plainTextSecret)
+	}
+
+	return plainTextSecrets, nil
+
+}

From 1e9118df333b0895c5b676d91133b278ba2eba39 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Fri, 3 Feb 2023 21:14:56 -0800
Subject: [PATCH 20/52] delete backup secrets when new user login

---
 cli/packages/cmd/login.go    |  3 +++
 cli/packages/util/secrets.go | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/cli/packages/cmd/login.go b/cli/packages/cmd/login.go
index 6a1dc2313..c37bdda08 100644
--- a/cli/packages/cmd/login.go
+++ b/cli/packages/cmd/login.go
@@ -101,6 +101,9 @@ var loginCmd = &cobra.Command{
 			util.HandleError(err, "Unable to write write to Infisical Config file. Please try again")
 		}
 
+		// clear backed up secrets from prev account
+		util.DeleteBackupSecrets()
+
 		color.Green("Nice! You are logged in as: %v", email)
 
 	},
diff --git a/cli/packages/util/secrets.go b/cli/packages/util/secrets.go
index 57b105de3..86f4a5e05 100644
--- a/cli/packages/util/secrets.go
+++ b/cli/packages/util/secrets.go
@@ -411,3 +411,16 @@ func ReadBackupSecrets(workspace string, environment string, encryptionKey []byt
 	return plainTextSecrets, nil
 
 }
+
+func DeleteBackupSecrets() error {
+	secrets_backup_folder_name := "secrets-backup"
+
+	_, fullConfigFileDirPath, err := GetFullConfigFilePath()
+	if err != nil {
+		return fmt.Errorf("ReadBackupSecrets: unable to write config file because an error occurred when getting config file path [err=%s]", err)
+	}
+
+	fullPathToSecretsBackupFolder := fmt.Sprintf("%s/%s", fullConfigFileDirPath, secrets_backup_folder_name)
+
+	return os.RemoveAll(fullPathToSecretsBackupFolder)
+}

From 56710657bd508f5c5fd52c56a7179d48a479dcf0 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 3 Feb 2023 23:49:03 -0800
Subject: [PATCH 21/52] Minor styling updates

---
 .../dashboard/CompareSecretsModal.tsx         | 33 +++++++++++++------
 frontend/src/components/dashboard/SideBar.tsx |  5 ++-
 frontend/src/components/v2/Modal/Modal.tsx    |  2 +-
 frontend/src/pages/dashboard/[id].tsx         |  4 ++-
 frontend/src/pages/users/[id].tsx             |  1 -
 5 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/dashboard/CompareSecretsModal.tsx b/frontend/src/components/dashboard/CompareSecretsModal.tsx
index 8c41ae8ca..b5d81bc04 100644
--- a/frontend/src/components/dashboard/CompareSecretsModal.tsx
+++ b/frontend/src/components/dashboard/CompareSecretsModal.tsx
@@ -1,6 +1,7 @@
 import { SetStateAction, useEffect, useState } from 'react';
+import Image from 'next/image';
 
-import { WorkspaceEnv } from '~/pages/dashboard/[id]';
+import { WorkspaceEnv } from '@app/hooks/api/types';
 
 import getSecretsForProject from '../utilities/secrets/getSecretsForProject';
 import { Modal, ModalContent } from '../v2';
@@ -33,9 +34,10 @@ const CompareSecretsModal = ({
   const [secrets, setSecrets] = useState<Secrets[]>([]);
 
   const getEnvSecrets = async () => {
-    const workspaceEnvironments = workspaceEnvs.filter((env) => env !== selectedEnv);
+    const workspaceEnvironments = workspaceEnvs?.filter((env) => env !== selectedEnv);
     const newSecrets = await Promise.all(
       workspaceEnvironments.map(async (env) => {
+        // #TODO: optimize this query somehow...
         const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId });
         const secret =
           allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found';
@@ -57,16 +59,27 @@ const CompareSecretsModal = ({
     <Modal isOpen={compareModal} onOpenChange={setCompareModal}>
       <ModalContent title={currentSecret?.key} onOpenAutoFocus={(e) => e.preventDefault()}>
         <div className="space-y-4">
-          {secrets.map((item) => (
-            <div key={`${currentSecret.key}${item.label}`} className="space-y-1">
-              <p className="text-sm text-bunker-300">{item.label}</p>
-              <input
-                defaultValue={item.secret}
-                className="h-no-capture text-md min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full rounded-md bg-bunker-800 px-2 py-1.5 font-mono text-gray-400 caret-white outline-none duration-200 no-scrollbar focus:ring-2 focus:ring-primary/50 "
-                readOnly
+          {secrets.length === 0 ? (
+            <div className="flex items-center bg-bunker-900 justify-center h-full py-4 rounded-md">
+              <Image
+                src="/images/loading/loading.gif"
+                height={60}
+                width={100}
+                alt="infisical loading indicator"
               />
             </div>
-          ))}
+          ) : (
+            secrets.map((item) => (
+              <div key={`${currentSecret.key}${item.label}`} className="space-y-0.5">
+                <p className="text-sm text-bunker-300">{item.label}</p>
+                <input
+                  defaultValue={item.secret}
+                  className="h-no-capture border border-mineshaft-500 text-md min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full rounded-md bg-bunker-800 px-2 py-1.5 font-mono text-gray-400 caret-white outline-none duration-200 no-scrollbar focus:ring-2 focus:ring-primary/50 "
+                  readOnly
+                />
+              </div>
+            ))
+          )}
         </div>
       </ModalContent>
     </Modal>
diff --git a/frontend/src/components/dashboard/SideBar.tsx b/frontend/src/components/dashboard/SideBar.tsx
index d04055af0..d602e2c93 100644
--- a/frontend/src/components/dashboard/SideBar.tsx
+++ b/frontend/src/components/dashboard/SideBar.tsx
@@ -6,8 +6,7 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import SecretVersionList from '@app/ee/components/SecretVersionList';
-
-import { WorkspaceEnv } from '~/pages/dashboard/[id]';
+import { WorkspaceEnv } from '@app/hooks/api/types';
 
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
@@ -181,7 +180,7 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="mt-full mt-4 mb-[4.7rem] flex max-w-sm flex-col justify-start space-y-2 px-4">
+      <div className="mt-full mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
         <div>
           <Button
             text="Compare secret across environments"
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index 8c979473b..41bfb9da7 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -25,7 +25,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-md',
+            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-50',
             className
           )}
         >
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index 99114a765..4a5bb8332 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -539,6 +539,9 @@ export default function Dashboard() {
             modifyValueOverride={listenChangeValueOverride}
             modifyComment={listenChangeComment}
             buttonReady={buttonReady}
+            workspaceEnvs={workspaceEnvs}
+            selectedEnv={selectedEnv}
+            workspaceId={workspaceId}
             savePush={savePush}
             sharedToHide={sharedToHide}
             setSharedToHide={setSharedToHide}
@@ -870,7 +873,6 @@ export default function Dashboard() {
     </div>
   ) : (
     <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
-      <div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full" />
       <Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
     </div>
   );
diff --git a/frontend/src/pages/users/[id].tsx b/frontend/src/pages/users/[id].tsx
index abd1cfc6f..27b531444 100644
--- a/frontend/src/pages/users/[id].tsx
+++ b/frontend/src/pages/users/[id].tsx
@@ -207,7 +207,6 @@ export default function Users() {
     </div>
   ) : (
     <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
-      <div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full" />
       <Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
     </div>
   );

From e72e6cf2b7289f6d155d3d9140571ff1eb8bc58f Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sat, 4 Feb 2023 14:24:10 +0530
Subject: [PATCH 22/52] feat(ui): removed workspace context redirect and added
 redirect when project is deleted

---
 .../src/context/WorkspaceContext/WorkspaceContext.tsx | 11 +----------
 .../ProjectSettingsPage/ProjectSettingsPage.tsx       |  8 ++++++--
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
index ea82fbbe7..4edef8e6a 100644
--- a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
+++ b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useEffect, useMemo } from 'react';
+import { createContext, ReactNode, useContext, useMemo } from 'react';
 import { useRouter } from 'next/router';
 
 import { useGetUserWorkspaces } from '@app/hooks/api';
@@ -30,15 +30,6 @@ export const WorkspaceProvider = ({ children }: Props): JSX.Element => {
     };
   }, [ws, workspaceId, isLoading]);
 
-  useEffect(() => {
-    // not loading and current workspace is empty
-    // ws empty means user has no access to the ws
-    // push to the first workspace
-    if (!isLoading && !value?.currentWorkspace?._id) {
-      router.push(`/dashboard/${value.workspaces?.[0]?._id}`);
-    }
-  }, [value?.currentWorkspace?._id, isLoading, value.workspaces?.[0]?._id, router.pathname]);
-
   return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>;
 };
 
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index e6e8f317d..953a3d140 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -2,6 +2,7 @@ import crypto from 'crypto';
 
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/router';
 
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import NavHeader from '@app/components/navigation/NavHeader';
@@ -37,7 +38,8 @@ import {
 
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, workspaces } = useWorkspace();
+  const router = useRouter();
   const { data: serviceTokens } = useGetUserWsServiceTokens({
     workspaceID: currentWorkspace?._id || ''
   });
@@ -64,7 +66,6 @@ export const ProjectSettingsPage = () => {
   const host = window.location.origin;
   const isEnvServiceAllowed =
     subscriptionPlan !== plans.starter || host !== 'https://app.infisical.com';
-  
 
   const onRenameWorkspace = async (name: string) => {
     try {
@@ -86,6 +87,9 @@ export const ProjectSettingsPage = () => {
     setIsDeleting.on();
     try {
       await deleteWorkspace.mutateAsync({ workspaceID });
+      // redirect user to first workspace user is part of
+      const ws = workspaces.find(({ _id }) => _id !== workspaceID);
+      router.push(`/dashboard/${ws?._id}`);
       createNotification({
         text: 'Successfully deleted workspace',
         type: 'success'

From 1d72d310e598f8269926b77c58bdc5429c46eabc Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sat, 4 Feb 2023 08:47:52 -0800
Subject: [PATCH 23/52] Add offline support to faq

---
 docs/cli/faq.mdx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/cli/faq.mdx b/docs/cli/faq.mdx
index 6a98d8dc3..7eb73258e 100644
--- a/docs/cli/faq.mdx
+++ b/docs/cli/faq.mdx
@@ -13,4 +13,9 @@ If none of the available stores work for you, you can try using the `file` store
 If you are still experiencing trouble, please seek support. 
 
 [Learn more about vault command](./commands/vault)
+</Accordion>
+
+<Accordion title="Can I fetch secrets with Infisical if I am offline?">
+Yes. If you have previously retrieved secrets for a specific project and environment (such as dev, staging, or prod), the  `run`/`secret` command will utilize the saved secrets, even when offline, on subsequent fetch attempts.
+
 </Accordion>
\ No newline at end of file

From 77a44b4490252ebfcbe6f840cc8792cfbe8e4a9b Mon Sep 17 00:00:00 2001
From: Hasan Mansoor <68682354+HasanMansoor4@users.noreply.github.com>
Date: Sun, 5 Feb 2023 06:21:58 +0300
Subject: [PATCH 24/52] Refactor into component and use React Query

---
 frontend/src/hooks/api/workspace/index.tsx    |  1 +
 frontend/src/hooks/api/workspace/queries.tsx  | 14 +++++++-
 frontend/src/hooks/api/workspace/types.ts     |  2 ++
 .../api/workspace/toggleAutoCapitalization.ts | 26 --------------
 .../ProjectSettingsPage.tsx                   | 29 ++++++++++++++++
 .../AutoCapitalizationSection.tsx             | 34 +++++++++++++++++++
 .../AutoCapitalizationSection/index.tsx       |  1 +
 7 files changed, 80 insertions(+), 27 deletions(-)
 delete mode 100644 frontend/src/pages/api/workspace/toggleAutoCapitalization.ts
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx

diff --git a/frontend/src/hooks/api/workspace/index.tsx b/frontend/src/hooks/api/workspace/index.tsx
index 5de95ab05..23d9e42a3 100644
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -4,5 +4,6 @@ export {
   useDeleteWsEnvironment,
   useGetUserWorkspaces,
   useRenameWorkspace,
+  useToggleAutoCapitalization,
   useUpdateWsEnvironment
 } from './queries';
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index b0566a43d..64e4a905c 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -7,6 +7,7 @@ import {
   DeleteEnvironmentDTO,
   DeleteWorkspaceDTO,
   RenameWorkspaceDTO,
+  ToggleAutoCapitalizationDTO,
   UpdateEnvironmentDTO,
   Workspace
 } from './types';
@@ -17,7 +18,6 @@ const workspaceKeys = {
 
 const fetchUserWorkspaces = async () => {
   const { data } = await apiRequest.get<{ workspaces: Workspace[] }>('/api/v1/workspace');
-
   return data.workspaces;
 };
 
@@ -37,6 +37,18 @@ export const useRenameWorkspace = () => {
   });
 };
 
+export const useToggleAutoCapitalization = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, ToggleAutoCapitalizationDTO>({
+    mutationFn: ({ workspaceID, state }) =>
+      apiRequest.post(`/api/v2/workspace/${workspaceID}/settings`, { autoCapitalization: state }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
 export const useDeleteWorkspace = () => {
   const queryClient = useQueryClient();
 
diff --git a/frontend/src/hooks/api/workspace/types.ts b/frontend/src/hooks/api/workspace/types.ts
index cc4709477..fd408999b 100644
--- a/frontend/src/hooks/api/workspace/types.ts
+++ b/frontend/src/hooks/api/workspace/types.ts
@@ -3,6 +3,7 @@ export type Workspace = {
   _id: string;
   name: string;
   organization: string;
+  autoCapitalization: boolean;
   environments: WorkspaceEnv[];
 };
 
@@ -10,6 +11,7 @@ export type WorkspaceEnv = { name: string; slug: string };
 
 // mutation dto
 export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
+export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };
 
 export type DeleteWorkspaceDTO = { workspaceID: string };
 
diff --git a/frontend/src/pages/api/workspace/toggleAutoCapitalization.ts b/frontend/src/pages/api/workspace/toggleAutoCapitalization.ts
deleted file mode 100644
index fa459d67a..000000000
--- a/frontend/src/pages/api/workspace/toggleAutoCapitalization.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import SecurityClient from '@app/components/utilities/SecurityClient';
-
-/**
- * This route lets us change the auto capitalization settings in a project.
- * @param {*} req
- * @param {*} res
- * @returns
- */
-const toggleAutoCapitalization = (workspaceId: string, state: boolean) =>
-  SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/settings`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      autoCapitalization: state
-    })
-  }).then(async (res) => {
-    if (res && res.status === 200) {
-      return res;
-    }
-    console.log('Failed to toggle auto capitalization state');
-    return undefined;
-  });
-
-export default toggleAutoCapitalization;
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index 953a3d140..4fdd3d843 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -24,9 +24,11 @@ import {
   useGetUserWsKey,
   useGetUserWsServiceTokens,
   useRenameWorkspace,
+  useToggleAutoCapitalization,
   useUpdateWsEnvironment
 } from '@app/hooks/api';
 
+import { AutoCapitalizationSection } from './components/AutoCapitalizationSection/AutoCapitalizationSection';
 import {
   CopyProjectIDSection,
   CreateServiceToken,
@@ -39,6 +41,7 @@ import {
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   const { currentWorkspace, workspaces } = useWorkspace();
+  console.log(currentWorkspace);
   const router = useRouter();
   const { data: serviceTokens } = useGetUserWsServiceTokens({
     workspaceID: currentWorkspace?._id || ''
@@ -50,6 +53,8 @@ export const ProjectSettingsPage = () => {
   const [isDeleting, setIsDeleting] = useToggle();
 
   const renameWorkspace = useRenameWorkspace();
+  const toggleAutoCapitalization = useToggleAutoCapitalization();
+  
   const deleteWorkspace = useDeleteWorkspace();
   // env crud operation
   const createWsEnv = useCreateWsEnvironment();
@@ -83,6 +88,26 @@ export const ProjectSettingsPage = () => {
     }
   };
 
+  const onAutoCapitalizationToggle = async (state: boolean) => {  
+    try {
+      await toggleAutoCapitalization.mutateAsync({
+        workspaceID,
+        state
+      });
+      const text = `Successfully ${state ? 'enabled' : 'disabled'} auto capitalization`;
+      createNotification({
+        text,
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to update auto capitalization',
+        type: 'error'
+      });
+    }
+  };
+
   const onDeleteWorkspace = async () => {
     setIsDeleting.on();
     try {
@@ -241,6 +266,10 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name}
         onProjectNameChange={onRenameWorkspace}
       />
+      <AutoCapitalizationSection
+        workspaceAutoCapitalization={currentWorkspace?.autoCapitalization}
+        onAutoCapitalizationChange={onAutoCapitalizationToggle}
+      />
       <CopyProjectIDSection workspaceID={currentWorkspace?._id || ''} />
       <EnvironmentSection
         environments={currentWorkspace?.environments || []}
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx
new file mode 100644
index 000000000..a398db343
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+
+import { Checkbox } from '@app/components/v2';
+
+type Props = {
+  workspaceAutoCapitalization?: boolean;
+  onAutoCapitalizationChange: (state: boolean) => Promise<void>;
+};
+
+export const AutoCapitalizationSection = ({
+  workspaceAutoCapitalization,
+  onAutoCapitalizationChange
+}: Props) => {
+  const { t } = useTranslation();
+  return (
+    <form>
+      <div className="mb-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
+        <p className="mb-4 mt-2 text-xl font-semibold">
+          {t('settings-project:auto-capitalization')}
+        </p>
+        <Checkbox
+          className="data-[state=checked]:bg-primary"
+          id="autoCapitalization"
+          isChecked={workspaceAutoCapitalization}
+          onCheckedChange={(state) => {
+            onAutoCapitalizationChange(state as boolean);
+          }}
+        >
+          {t('settings-project:auto-capitalization-description')}
+        </Checkbox>
+      </div>
+    </form>
+  );
+};
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx
new file mode 100644
index 000000000..2b851428e
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx
@@ -0,0 +1 @@
+export { AutoCapitalizationSection } from './AutoCapitalizationSection';
\ No newline at end of file

From a35e235744fac27e2058136de069baebc51a4d8b Mon Sep 17 00:00:00 2001
From: Hasan Mansoor <68682354+HasanMansoor4@users.noreply.github.com>
Date: Sun, 5 Feb 2023 06:25:40 +0300
Subject: [PATCH 25/52] remove console log

---
 .../views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index 4fdd3d843..da89e9882 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -41,7 +41,6 @@ import {
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   const { currentWorkspace, workspaces } = useWorkspace();
-  console.log(currentWorkspace);
   const router = useRouter();
   const { data: serviceTokens } = useGetUserWsServiceTokens({
     workspaceID: currentWorkspace?._id || ''

From b56d9287e41771f86ad19a8296430aa7daabe9db Mon Sep 17 00:00:00 2001
From: Kanhaiya M <kanhaiya38@protonmail.com>
Date: Sun, 5 Feb 2023 17:31:53 +0530
Subject: [PATCH 26/52] feat(ui): allow user to merge secrets while uploading
 file

---
 .../dashboard/ConfirmEnvOverwriteModal.tsx    | 42 ++++++++++++++++++
 frontend/src/pages/dashboard/[id].tsx         | 43 ++++++++++++++++++-
 2 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx

diff --git a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
new file mode 100644
index 000000000..1494fa84f
--- /dev/null
+++ b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
@@ -0,0 +1,42 @@
+import { Button, Modal, ModalContent } from '../v2';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onOverwriteConfirm: (preserve: 'old' | 'new') => void;
+  duplicateKeys: string[];
+};
+
+const ConfirmEnvOverwriteModal = ({
+  isOpen,
+  onClose,
+  duplicateKeys,
+  onOverwriteConfirm
+}: Props): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen}>
+      <ModalContent
+        title="Duplicate Secrets"
+        footerContent={
+          <div className="flex items-center gap-4">
+            <Button colorSchema="primary" onClick={() => onOverwriteConfirm('old')}>
+              Keep Old
+            </Button>
+            <Button colorSchema="danger" onClick={() => onOverwriteConfirm('new')}>
+              Overwrite
+            </Button>
+          </div>
+        }
+        onClose={onClose}
+      >
+        <div className="mx-1 flex flex-col gap-2">
+          <p className='text-gray-400'>File contains following duplicate secrets:</p>
+          <p className="text-sm text-gray-500">{duplicateKeys.join(', ')}</p>
+          <p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmEnvOverwriteModal;
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index 4a5bb8332..41d6756d9 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -22,6 +22,7 @@ import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
 import BottonRightPopup from '@app/components/basic/popups/BottomRightPopup';
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import ConfirmEnvOverwriteModal from '@app/components/dashboard/ConfirmEnvOverwriteModal';
 import DownloadSecretMenu from '@app/components/dashboard/DownloadSecretsMenu';
 import DropZone from '@app/components/dashboard/DropZone';
 import KeyPair from '@app/components/dashboard/KeyPair';
@@ -125,6 +126,7 @@ export default function Dashboard() {
   const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
   const [numSnapshots, setNumSnapshots] = useState<number>();
   const [saveLoading, setSaveLoading] = useState(false);
+  const [dropZoneData, setDropZoneData] = useState<SecretDataProps[]>();
 
   const { t } = useTranslation();
   const { createNotification } = useNotificationContext();
@@ -504,11 +506,33 @@ export default function Dashboard() {
     return undefined;
   };
 
-  const addData = (newData: SecretDataProps[]) => {
-    setData(data!.concat(newData));
+  const addDataWithMerge = (newData: SecretDataProps[], preserve?: 'old' | 'new') => {
+    setData((oldData) => {
+      let filteredOldData = oldData!;
+      let filteredNewData = newData;
+      if (preserve === 'new')
+        filteredOldData = oldData!.filter(
+          (oldDataPoint) => !newData.find((newDataPoint) => newDataPoint.key === oldDataPoint.key)
+        );
+      if (preserve === 'old')
+        filteredNewData = newData.filter(
+          (newDataPoint) => !oldData?.find((oldDataPoint) => oldDataPoint.key === newDataPoint.key)
+        );
+      return filteredOldData.concat(filteredNewData);
+    });
     setButtonReady(true);
   };
 
+  const addData = (newData: SecretDataProps[]) => {
+    if (
+      newData.some((newDataPoint) => data?.find((dataPoint) => dataPoint.key === newDataPoint.key)) // if newData contains duplicates
+    ) {
+      setDropZoneData(newData);
+      return;
+    }
+    addDataWithMerge(newData);
+  };
+
   const changeBlurred = () => {
     setBlurred(!blurred);
   };
@@ -527,6 +551,21 @@ export default function Dashboard() {
         <meta name="og:description" content={String(t('dashboard:og-description'))} />
       </Head>
       <div className="flex flex-row h-full">
+        <ConfirmEnvOverwriteModal
+          isOpen={!!dropZoneData}
+          onClose={() => setDropZoneData(undefined)}
+          onOverwriteConfirm={(preserve) => {
+            addDataWithMerge(dropZoneData!, preserve);
+            setDropZoneData(undefined);
+          }}
+          duplicateKeys={
+            dropZoneData
+              ?.filter((newDataPoint) =>
+                data?.find((dataPoint) => dataPoint.key === newDataPoint.key)
+              )
+              .map((duplicate) => duplicate.key) ?? []
+          }
+        />
         {sidebarSecretId !== 'None' && (
           <SideBar
             toggleSidebar={toggleSidebar}

From 86fd8768509d5c4ef5d6b64bf9c9e93c4b804b76 Mon Sep 17 00:00:00 2001
From: Hasan Mansoor <68682354+HasanMansoor4@users.noreply.github.com>
Date: Sun, 5 Feb 2023 20:51:53 +0300
Subject: [PATCH 27/52] change api from post to patch, fix spelling mistakes

---
 backend/src/controllers/v2/workspaceController.ts | 2 +-
 backend/src/routes/v2/workspace.ts                | 6 +++---
 frontend/src/hooks/api/workspace/queries.tsx      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/src/controllers/v2/workspaceController.ts b/backend/src/controllers/v2/workspaceController.ts
index ce3ecba31..55cd02fff 100644
--- a/backend/src/controllers/v2/workspaceController.ts
+++ b/backend/src/controllers/v2/workspaceController.ts
@@ -475,7 +475,7 @@ export const deleteWorkspaceMembership = async (req: Request, res: Response) =>
  * @param res
  * @returns
  */
-export const toggleAutoCapitilzation = async (req: Request, res: Response) => {
+export const toggleAutoCapitalization = async (req: Request, res: Response) => {
 	let workspace;
 	try {
 		const { workspaceId } = req.params;
diff --git a/backend/src/routes/v2/workspace.ts b/backend/src/routes/v2/workspace.ts
index 4e48c9301..9a753badd 100644
--- a/backend/src/routes/v2/workspace.ts
+++ b/backend/src/routes/v2/workspace.ts
@@ -119,8 +119,8 @@ router.delete( // TODO - rewire dashboard to this route
 );
 
 
-router.post(
-	'/:workspaceId/settings',
+router.patch(
+	'/:workspaceId/auto-capitalization',
 	requireAuth({
 		acceptedAuthModes: ['jwt']
 	}),
@@ -130,7 +130,7 @@ router.post(
 	param('workspaceId').exists().trim(),
 	body('autoCapitalization').exists().trim().notEmpty(),
 	validateRequest,
-	workspaceController.toggleAutoCapitilzation
+	workspaceController.toggleAutoCapitalization
 );
 
 export default router;
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index 64e4a905c..650058d5d 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -42,7 +42,7 @@ export const useToggleAutoCapitalization = () => {
 
   return useMutation<{}, {}, ToggleAutoCapitalizationDTO>({
     mutationFn: ({ workspaceID, state }) =>
-      apiRequest.post(`/api/v2/workspace/${workspaceID}/settings`, { autoCapitalization: state }),
+      apiRequest.patch(`/api/v2/workspace/${workspaceID}/auto-capitalization`, { autoCapitalization: state }),
     onSuccess: () => {
       queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
     }

From 9f9273bb0201d585aa6fde326c22378833294a7b Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sun, 5 Feb 2023 12:54:27 -0800
Subject: [PATCH 28/52] Add tags support for secrets

---
 backend/src/app.ts                            |  2 +
 backend/src/controllers/v2/index.ts           |  4 +-
 .../src/controllers/v2/secretsController.ts   | 58 +++++++++-------
 backend/src/controllers/v2/tagController.ts   | 66 +++++++++++++++++++
 backend/src/ee/models/secretVersion.ts        |  8 ++-
 backend/src/models/secret.ts                  |  6 ++
 backend/src/models/tag.ts                     | 49 ++++++++++++++
 backend/src/routes/v2/index.ts                |  4 +-
 backend/src/routes/v2/tags.ts                 | 50 ++++++++++++++
 9 files changed, 221 insertions(+), 26 deletions(-)
 create mode 100644 backend/src/controllers/v2/tagController.ts
 create mode 100644 backend/src/models/tag.ts
 create mode 100644 backend/src/routes/v2/tags.ts

diff --git a/backend/src/app.ts b/backend/src/app.ts
index 79561d00c..cf44804e9 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -50,6 +50,7 @@ import {
   serviceTokenData as v2ServiceTokenDataRouter,
   apiKeyData as v2APIKeyDataRouter,
   environment as v2EnvironmentRouter,
+  tags as v2TagsRouter,
 } from './routes/v2';
 
 import { healthCheck } from './routes/status';
@@ -112,6 +113,7 @@ app.use('/api/v1/integration-auth', v1IntegrationAuthRouter);
 app.use('/api/v2/users', v2UsersRouter);
 app.use('/api/v2/organizations', v2OrganizationsRouter);
 app.use('/api/v2/workspace', v2EnvironmentRouter);
+app.use('/api/v2/workspace', v2TagsRouter);
 app.use('/api/v2/workspace', v2WorkspaceRouter);
 app.use('/api/v2/secret', v2SecretRouter); // deprecated
 app.use('/api/v2/secrets', v2SecretsRouter);
diff --git a/backend/src/controllers/v2/index.ts b/backend/src/controllers/v2/index.ts
index 936f5e281..3183ac60f 100644
--- a/backend/src/controllers/v2/index.ts
+++ b/backend/src/controllers/v2/index.ts
@@ -6,6 +6,7 @@ import * as apiKeyDataController from './apiKeyDataController';
 import * as secretController from './secretController';
 import * as secretsController from './secretsController';
 import * as environmentController from './environmentController';
+import * as tagController from './tagController';
 
 export {
     usersController,
@@ -15,5 +16,6 @@ export {
     apiKeyDataController,
     secretController,
     secretsController,
-    environmentController
+    environmentController,
+    tagController
 }
diff --git a/backend/src/controllers/v2/secretsController.ts b/backend/src/controllers/v2/secretsController.ts
index 5c6f5898e..5ac86e903 100644
--- a/backend/src/controllers/v2/secretsController.ts
+++ b/backend/src/controllers/v2/secretsController.ts
@@ -86,17 +86,28 @@ export const createSecrets = async (req: Request, res: Response) => {
         throw UnauthorizedRequestError({ message: "You do not have the necessary permission(s) perform this action" })
     }
 
-    let toAdd;
+    let listOfSecretsToCreate;
     if (Array.isArray(req.body.secrets)) {
         // case: create multiple secrets
-        toAdd = req.body.secrets;
+        listOfSecretsToCreate = req.body.secrets;
     } else if (typeof req.body.secrets === 'object') {
         // case: create 1 secret
-        toAdd = [req.body.secrets];
+        listOfSecretsToCreate = [req.body.secrets];
     }
 
-    const newSecrets = await Secret.insertMany(
-        toAdd.map(({
+    type secretsToCreateType = {
+        type: string;
+        secretKeyCiphertext: string;
+        secretKeyIV: string;
+        secretKeyTag: string;
+        secretValueCiphertext: string;
+        secretValueIV: string;
+        secretValueTag: string;
+        tags: string[]
+    }
+
+    const newlyCreatedSecrets = await Secret.insertMany(
+        listOfSecretsToCreate.map(({
             type,
             secretKeyCiphertext,
             secretKeyIV,
@@ -104,15 +115,8 @@ export const createSecrets = async (req: Request, res: Response) => {
             secretValueCiphertext,
             secretValueIV,
             secretValueTag,
-        }: {
-            type: string;
-            secretKeyCiphertext: string;
-            secretKeyIV: string;
-            secretKeyTag: string;
-            secretValueCiphertext: string;
-            secretValueIV: string;
-            secretValueTag: string;
-        }) => {
+            tags
+        }: secretsToCreateType) => {
             return ({
                 version: 1,
                 workspace: new Types.ObjectId(workspaceId),
@@ -124,7 +128,8 @@ export const createSecrets = async (req: Request, res: Response) => {
                 secretKeyTag,
                 secretValueCiphertext,
                 secretValueIV,
-                secretValueTag
+                secretValueTag,
+                tags
             });
         })
     );
@@ -140,7 +145,7 @@ export const createSecrets = async (req: Request, res: Response) => {
 
     // (EE) add secret versions for new secrets
     await EESecretService.addSecretVersions({
-        secretVersions: newSecrets.map(({
+        secretVersions: newlyCreatedSecrets.map(({
             _id,
             version,
             workspace,
@@ -154,7 +159,8 @@ export const createSecrets = async (req: Request, res: Response) => {
             secretValueCiphertext,
             secretValueIV,
             secretValueTag,
-            secretValueHash
+            secretValueHash,
+            tags
         }) => ({
             _id: new Types.ObjectId(),
             secret: _id,
@@ -171,7 +177,8 @@ export const createSecrets = async (req: Request, res: Response) => {
             secretValueCiphertext,
             secretValueIV,
             secretValueTag,
-            secretValueHash
+            secretValueHash,
+            tags
         }))
     });
 
@@ -179,7 +186,7 @@ export const createSecrets = async (req: Request, res: Response) => {
         name: ACTION_ADD_SECRETS,
         userId: req.user._id,
         workspaceId: new Types.ObjectId(workspaceId),
-        secretIds: newSecrets.map((n) => n._id)
+        secretIds: newlyCreatedSecrets.map((n) => n._id)
     });
 
     // (EE) create (audit) log
@@ -201,7 +208,7 @@ export const createSecrets = async (req: Request, res: Response) => {
             event: 'secrets added',
             distinctId: req.user.email,
             properties: {
-                numberOfSecrets: toAdd.length,
+                numberOfSecrets: listOfSecretsToCreate.length,
                 environment,
                 workspaceId,
                 channel: channel,
@@ -211,7 +218,7 @@ export const createSecrets = async (req: Request, res: Response) => {
     }
 
     return res.status(200).send({
-        secrets: newSecrets
+        secrets: newlyCreatedSecrets
     });
 }
 
@@ -294,7 +301,7 @@ export const getSecrets = async (req: Request, res: Response) => {
             ],
             type: { $in: [SECRET_SHARED, SECRET_PERSONAL] }
         }
-    ).then())
+    ).populate("tags").then())
 
     if (err) throw ValidationError({ message: 'Failed to get secrets', stack: err.stack });
 
@@ -398,6 +405,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
         secretCommentCiphertext: string;
         secretCommentIV: string;
         secretCommentTag: string;
+        tags: string[]
     }
 
     const updateOperationsToPerform = req.body.secrets.map((secret: PatchSecret) => {
@@ -410,7 +418,8 @@ export const updateSecrets = async (req: Request, res: Response) => {
             secretValueTag,
             secretCommentCiphertext,
             secretCommentIV,
-            secretCommentTag
+            secretCommentTag,
+            tags
         } = secret;
 
         return ({
@@ -426,6 +435,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
                     secretValueCiphertext,
                     secretValueIV,
                     secretValueTag,
+                    tags,
                     ...((
                         secretCommentCiphertext &&
                         secretCommentIV &&
@@ -460,6 +470,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
                 secretCommentCiphertext,
                 secretCommentIV,
                 secretCommentTag,
+                tags
             } = secretModificationsBySecretId[secret._id.toString()]
 
             return ({
@@ -477,6 +488,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
                 secretCommentCiphertext: secretCommentCiphertext ? secretCommentCiphertext : secret.secretCommentCiphertext,
                 secretCommentIV: secretCommentIV ? secretCommentIV : secret.secretCommentIV,
                 secretCommentTag: secretCommentTag ? secretCommentTag : secret.secretCommentTag,
+                tags: tags ? tags : secret.tags
             });
         })
     }
diff --git a/backend/src/controllers/v2/tagController.ts b/backend/src/controllers/v2/tagController.ts
new file mode 100644
index 000000000..250ee08a5
--- /dev/null
+++ b/backend/src/controllers/v2/tagController.ts
@@ -0,0 +1,66 @@
+import { Request, Response } from 'express';
+import * as Sentry from '@sentry/node';
+import { Types } from 'mongoose';
+import {
+	Membership,
+} from '../../models';
+import Tag, { ITag } from '../../models/tag';
+import { Builder } from "builder-pattern"
+import to from 'await-to-js';
+import { BadRequestError, UnauthorizedRequestError } from '../../utils/errors';
+import { MongoError } from 'mongodb';
+import { userHasWorkspaceAccess } from '../../ee/helpers/checkMembershipPermissions';
+
+export const createWorkspaceTag = async (req: Request, res: Response) => {
+	const { workspaceId } = req.params
+	const { name, slug } = req.body
+	const sanitizedTagToCreate = Builder<ITag>()
+		.name(name)
+		.workspace(new Types.ObjectId(workspaceId))
+		.slug(slug)
+		.user(new Types.ObjectId(req.user._id))
+		.build();
+
+	const [err, createdTag] = await to(Tag.create(sanitizedTagToCreate))
+
+	if (err) {
+		if ((err as MongoError).code === 11000) {
+			throw BadRequestError({ message: "Tags must be unique in a workspace" })
+		}
+
+		throw err
+	}
+
+	res.json(createdTag)
+}
+
+export const deleteWorkspaceTag = async (req: Request, res: Response) => {
+	const { tagId } = req.params
+
+	const tagFromDB = await Tag.findById(tagId)
+	if (!tagFromDB) {
+		throw BadRequestError()
+	}
+
+	// can only delete if the request user is one that belongs to the same workspace as the tag
+	const membership = await Membership.findOne({
+		user: req.user,
+		workspace: tagFromDB.workspace
+	});
+
+	if (!membership) {
+		UnauthorizedRequestError({ message: 'Failed to validate membership' });
+	}
+
+	await Tag.findByIdAndDelete(tagId)
+
+	res.sendStatus(200)
+}
+
+export const getWorkspaceTags = async (req: Request, res: Response) => {
+	const { workspaceId } = req.params
+	const workspaceTags = await Tag.find({ workspace: workspaceId })
+	return res.json({
+		workspaceTags
+	})
+}
\ No newline at end of file
diff --git a/backend/src/ee/models/secretVersion.ts b/backend/src/ee/models/secretVersion.ts
index 1af4aff2c..efa042765 100644
--- a/backend/src/ee/models/secretVersion.ts
+++ b/backend/src/ee/models/secretVersion.ts
@@ -21,6 +21,7 @@ export interface ISecretVersion {
 	secretValueIV: string;
 	secretValueTag: string;
 	secretValueHash: string;
+	tags?: string[];
 }
 
 const secretVersionSchema = new Schema<ISecretVersion>(
@@ -88,7 +89,12 @@ const secretVersionSchema = new Schema<ISecretVersion>(
 		},
 		secretValueHash: {
 			type: String
-		}
+		},
+		tags: {
+			ref: 'Tag',
+			type: [Schema.Types.ObjectId],
+			default: []
+		},
 	},
 	{
 		timestamps: true
diff --git a/backend/src/models/secret.ts b/backend/src/models/secret.ts
index 6887c8b0f..4ac6c768d 100644
--- a/backend/src/models/secret.ts
+++ b/backend/src/models/secret.ts
@@ -23,6 +23,7 @@ export interface ISecret {
 	secretCommentIV?: string;
 	secretCommentTag?: string;
 	secretCommentHash?: string;
+	tags?: string[];
 }
 
 const secretSchema = new Schema<ISecret>(
@@ -47,6 +48,11 @@ const secretSchema = new Schema<ISecret>(
 			type: Schema.Types.ObjectId,
 			ref: 'User'
 		},
+		tags: {
+			ref: 'Tag',
+			type: [Schema.Types.ObjectId],
+			default: []
+		},
 		environment: {
 			type: String,
 			required: true
diff --git a/backend/src/models/tag.ts b/backend/src/models/tag.ts
new file mode 100644
index 000000000..6b02c8b1b
--- /dev/null
+++ b/backend/src/models/tag.ts
@@ -0,0 +1,49 @@
+import { Schema, model, Types } from 'mongoose';
+
+export interface ITag {
+	_id: Types.ObjectId;
+	name: string;
+	slug: string;
+	user: Types.ObjectId;
+	workspace: Types.ObjectId;
+}
+
+const tagSchema = new Schema<ITag>(
+	{
+		name: {
+			type: String,
+			required: true,
+			trim: true,
+		},
+		slug: {
+			type: String,
+			required: true,
+			trim: true,
+			lowercase: true,
+			validate: [
+				function (value: any) {
+					return value.indexOf(' ') === -1;
+				},
+				'slug cannot contain spaces'
+			]
+		},
+		user: {
+			type: Schema.Types.ObjectId,
+			ref: 'User'
+		},
+		workspace: {
+			type: Schema.Types.ObjectId,
+			ref: 'Workspace'
+		},
+	},
+	{
+		timestamps: true
+	}
+);
+
+tagSchema.index({ slug: 1, workspace: 1 }, { unique: true })
+tagSchema.index({ workspace: 1 })
+
+const Tag = model<ITag>('Tag', tagSchema);
+
+export default Tag;
diff --git a/backend/src/routes/v2/index.ts b/backend/src/routes/v2/index.ts
index 6f698e316..dfc9ee617 100644
--- a/backend/src/routes/v2/index.ts
+++ b/backend/src/routes/v2/index.ts
@@ -6,6 +6,7 @@ import secrets from './secrets';
 import serviceTokenData from './serviceTokenData';
 import apiKeyData from './apiKeyData';
 import environment from "./environment"
+import tags from "./tags"
 
 export {
     users,
@@ -15,5 +16,6 @@ export {
     secrets,
     serviceTokenData,
     apiKeyData,
-    environment
+    environment,
+    tags
 }
\ No newline at end of file
diff --git a/backend/src/routes/v2/tags.ts b/backend/src/routes/v2/tags.ts
new file mode 100644
index 000000000..d78e1e0f1
--- /dev/null
+++ b/backend/src/routes/v2/tags.ts
@@ -0,0 +1,50 @@
+import express, { Response, Request } from 'express';
+const router = express.Router();
+import { body, param } from 'express-validator';
+import { tagController } from '../../controllers/v2';
+import {
+  requireAuth,
+  requireWorkspaceAuth,
+  validateRequest,
+} from '../../middleware';
+import { ADMIN, MEMBER } from '../../variables';
+
+router.get(
+  '/:workspaceId/tags',
+  requireAuth({
+    acceptedAuthModes: ['jwt'],
+  }),
+  requireWorkspaceAuth({
+    acceptedRoles: [MEMBER, ADMIN],
+  }),
+  param('workspaceId').exists().trim(),
+  validateRequest,
+  tagController.getWorkspaceTags
+);
+
+router.delete(
+  '/tags/:tagId',
+  requireAuth({
+    acceptedAuthModes: ['jwt'],
+  }),
+  param('tagId').exists().trim(),
+  validateRequest,
+  tagController.deleteWorkspaceTag
+);
+
+router.post(
+  '/:workspaceId/tags',
+  requireAuth({
+    acceptedAuthModes: ['jwt'],
+  }),
+  requireWorkspaceAuth({
+    acceptedRoles: [MEMBER, ADMIN],
+  }),
+  param('workspaceId').exists().trim(),
+  body('name').exists().trim(),
+  body('slug').exists().trim(),
+  validateRequest,
+  tagController.createWorkspaceTag
+);
+
+export default router;

From 31df4a26fac566c20bec3d7f8812ad17fae772c0 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sun, 5 Feb 2023 16:05:34 -0800
Subject: [PATCH 29/52] Update cli docs to be more clear and consistent

---
 docs/cli/commands/init.mdx    |  6 ++--
 docs/cli/commands/run.mdx     | 61 ++++++++++++++++++++++++++++++-----
 docs/cli/commands/secrets.mdx | 30 +++--------------
 3 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/docs/cli/commands/init.mdx b/docs/cli/commands/init.mdx
index d477541b8..ef33e1d04 100644
--- a/docs/cli/commands/init.mdx
+++ b/docs/cli/commands/init.mdx
@@ -9,6 +9,8 @@ infisical init
 
 ## Description
 
-Link a local project to the platform
+Link a local project to your Infisical project. Once connected, you can then access the secrets locally from the connected Infisical project.
 
-The command creates a `infisical.json` file containing your Project ID.
+<Info>
+This command creates a `infisical.json` file containing your Project ID.
+</Info>
diff --git a/docs/cli/commands/run.mdx b/docs/cli/commands/run.mdx
index a3f02cf44..fcc9be549 100644
--- a/docs/cli/commands/run.mdx
+++ b/docs/cli/commands/run.mdx
@@ -25,13 +25,58 @@ description: "The command that injects your secrets into local environment"
 
 ## Description
 
-Inject environment variables from the platform into an application process.
+Inject secrets from Infisical into your application process.
 
-## Options
 
-| Option         | Description                                                                                                 | Default value |
-| -------------- | ----------------------------------------------------------------------------------------------------------- | ------------- |
-| `--env`        | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
-| `--expand`     | Parse shell parameter expansions in your secrets (e.g., `${DOMAIN}`)      | `true`        |
-| `--command`    | Pass secrets into chained commands (e.g., `"first-command && second-command; more-commands..."`)      | None        |
-| `--secret-overriding`|  Prioritizes personal secrets with the same name over shared secrets      | `true`        |
+## Subcommands & flags
+
+<Accordion title="infisical run" defaultOpen="true">
+  Use this command to inject secrets into your applications process
+
+  ```bash
+  $ infisical run -- <your application command>
+
+  # Example 
+  $ infisical run -- npm run dev
+  ```
+
+  ### flags 
+  <Accordion title="--command">
+    Pass secrets into multiple commands at once
+
+    ```bash
+    # Example 
+    infisical run --command="npm run build && npm run dev; more-commands..."
+    ```
+  </Accordion>
+
+  <Accordion title="--token">
+    If you are using a [service token](../../getting-started/dashboard/token) to authenticate, you can pass the token as a flag
+
+    ```bash
+    # Example 
+    infisical run --token="st.63e03c4a97cb4a747186c71e.ed5b46a34c078a8f94e8228f4ab0ff97.4f7f38034811995997d72badf44b42ec" -- npm run start
+    ```
+
+    You may also expose the token to the CLI by setting the environment variable `INFISICAL_TOKEN` before executing the run command. This will have the same effect as setting the token with `--token` flag 
+  </Accordion>
+
+  <Accordion title="--expand">
+    Turn on or off the shell parameter expansion in your secrets. If you have used shell parameters in your secret(s), activating this feature will populate them before injecting them into your application process.
+
+    Default value: `true`
+  </Accordion>
+
+  <Accordion title="--env">
+    This is used to specify the environment from which secrets should be retrieved. The accepted values are the environment slugs defined for your project, such as `dev`, `staging`, `test`, and `prod`.
+    
+    Default value: `dev`
+  </Accordion>
+
+  <Accordion title="--secret-overriding">
+    Prioritizes personal secrets with the same name over shared secrets
+
+    Default value: `true`
+  </Accordion>
+
+</Accordion>
diff --git a/docs/cli/commands/secrets.mdx b/docs/cli/commands/secrets.mdx
index 0556e1866..0e4190291 100644
--- a/docs/cli/commands/secrets.mdx
+++ b/docs/cli/commands/secrets.mdx
@@ -14,17 +14,8 @@ This command enables you to perform CRUD (create, read, update, delete) operatio
 <Accordion title="infisical secrets" defaultOpen="true">
   Use this command to print out all of the secrets in your project
 
-  ```
+  ```bash
   $ infisical secrets
-
-  ## Example 
-  $ infisical secrets
-  ┌─────────────┬──────────────┬─────────────┐
-  │ SECRET NAME │ SECRET VALUE │ SECRET TYPE │
-  ├─────────────┼──────────────┼─────────────┤
-  │ DOMAIN      │ example.com  │ shared      │
-  │ HASH        │ jebhfbwe     │ shared      │
-  └─────────────┴──────────────┴─────────────┘
   ```
 
   ### flags 
@@ -45,16 +36,11 @@ This command enables you to perform CRUD (create, read, update, delete) operatio
 <Accordion title="infisical secrets get">
   This command allows you selectively print the requested secrets by name
 
-  ``` 
+  ```bash 
   $ infisical secrets get <secret-name-a> <secret-name-b> ...
 
   # Example
   $ infisical secrets get DOMAIN
-  ┌─────────────┬──────────────┬─────────────┐
-  │ SECRET NAME │ SECRET VALUE │ SECRET TYPE │
-  ├─────────────┼──────────────┼─────────────┤
-  │ DOMAIN      │ example.com  │ shared      │
-  └─────────────┴──────────────┴─────────────┘
 
   ```
 
@@ -70,18 +56,11 @@ This command enables you to perform CRUD (create, read, update, delete) operatio
 This command allows you to set or update secrets in your environment. If the secret key provided already exists, its value will be updated with the new value. 
 If the secret key does not exist, a new secret will be created using both the key and value provided.
 
-```
+```bash
 $ infisical secrets set <key1=value1> <key2=value2>...
 
 ## Example 
 $ infisical secrets set STRIPE_API_KEY=sjdgwkeudyjwe DOMAIN=example.com HASH=jebhfbwe
-┌────────────────┬───────────────┬────────────────────────┐
-│ SECRET NAME    │ SECRET VALUE  │ STATUS                 │
-├────────────────┼───────────────┼────────────────────────┤
-│ STRIPE_API_KEY │ sjdgwkeudyjwe │ SECRET VALUE UNCHANGED │
-│ DOMAIN         │ example.com   │ SECRET VALUE MODIFIED  │
-│ HASH           │ jebhfbwe      │ SECRET CREATED         │
-└────────────────┴───────────────┴────────────────────────┘
 ```
 
   ### Flags 
@@ -95,12 +74,11 @@ $ infisical secrets set STRIPE_API_KEY=sjdgwkeudyjwe DOMAIN=example.com HASH=jeb
 <Accordion title="infisical secrets delete">
   This command allows you to delete secrets by their name(s).
 
-  ```
+  ```bash
   $ infisical secrets delete <keyName1> <keyName2>...
 
   ## Example 
   $ infisical secrets delete STRIPE_API_KEY DOMAIN HASH
-  secret name(s) [STRIPE_API_KEY, DOMAIN, HASH] have been deleted from your project
   ```
 
   ### Flags 

From c13cb2394273449d21c1e2f82e0fa83647ff4028 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sun, 5 Feb 2023 19:21:07 -0800
Subject: [PATCH 30/52] Add gitlab integ docs

---
 docs/integrations/cicd/gitlab.mdx | 34 +++++++++++++++++++++++++++++++
 docs/mint.json                    |  1 +
 2 files changed, 35 insertions(+)
 create mode 100644 docs/integrations/cicd/gitlab.mdx

diff --git a/docs/integrations/cicd/gitlab.mdx b/docs/integrations/cicd/gitlab.mdx
new file mode 100644
index 000000000..b84d90e07
--- /dev/null
+++ b/docs/integrations/cicd/gitlab.mdx
@@ -0,0 +1,34 @@
+---
+title: "Gitlab Pipeline"
+---
+
+To integrate Infisical secrets into your Gitlab CI/CD setup, three steps are required.
+
+## Generate service token 
+To expose Infisical secrets in Gitlab CI/CD, you must generate a service token for the specific project and environment in Infisical. For instructions on how to generate a service token, refer to [this page](../../getting-started/dashboard/token)
+
+## Set Infisical service token in Gitlab 
+To provide Infisical CLI with the service token generated in the previous step, go to **Settings > CI/CD > Variables** in Gitlab and create a new **INFISICAL_TOKEN** variable. Enter the generated service token as its value.
+
+## Configure Infisical in your pipeline 
+Edit your .gitlab-ci.yml to include the installation of the Infisical CLI. This will allow you to use the CLI for fetching and injecting secrets into any script or command within your Gitlab CI/CD process.
+
+#### Example
+```yaml 
+image: ubuntu
+
+stages:       
+  - build
+  - test
+  - deploy
+
+build-job:     
+  stage: build
+  script:
+    - apt update && apt install -y curl
+    - curl -1sLf 'https://dl.cloudsmith.io/public/infisical/infisical-cli/setup.deb.sh' | bash
+    - apt-get update && apt-get install -y infisical
+    - infisical run -- npm run build
+
+...
+```
\ No newline at end of file
diff --git a/docs/mint.json b/docs/mint.json
index 441769152..fd334b5ab 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -227,6 +227,7 @@
       "group": "CI/CD",
       "pages": [
         "integrations/cicd/githubactions",
+        "integrations/cicd/gitlab",
         "integrations/cicd/circleci"
       ]
     },

From 56a14925daf8678b1fea9aa6bb1d134fe14566b3 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sun, 5 Feb 2023 19:23:52 -0800
Subject: [PATCH 31/52] Add githlab to integ overview

---
 docs/integrations/overview.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/integrations/overview.mdx b/docs/integrations/overview.mdx
index 36423e787..eb99ca79d 100644
--- a/docs/integrations/overview.mdx
+++ b/docs/integrations/overview.mdx
@@ -37,7 +37,7 @@ Missing an integration? Throw in a [request](https://github.com/Infisical/infisi
 | GCP                                                      | Cloud     | Coming soon |
 | Azure                                                    | Cloud     | Coming soon |
 | DigitalOcean                                             | Cloud     | Coming soon |
-| GitLab                                                   | CI/CD     | Coming soon |
+| [GitLab Pipeline](/integrations/cicd/gitlab)             | CI/CD     | Available   |
 | [CircleCI](/integrations/cicd/circleci)                  | CI/CD     | Coming soon |
 | TravisCI                                                 | CI/CD     | Coming soon |
 | GitHub Actions                                           | CI/CD     | Coming soon |

From 086dd621b53c53d2fbbf8f38bf1ba1dfb78cf051 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sun, 5 Feb 2023 20:29:27 -0800
Subject: [PATCH 32/52] Revamped the dashabord look

---
 frontend/package-lock.json                    |  39 +++++
 frontend/package.json                         |   1 +
 frontend/public/locales/en/common.json        |   2 +-
 frontend/src/components/basic/Listbox.tsx     |   2 +-
 .../components/basic/dialog/DeleteEnvVar.tsx  |   2 +-
 .../dashboard/DashboardInputField.tsx         | 126 ++++++++++++----
 .../dashboard/DeleteActionButton.tsx          |  26 +++-
 .../dashboard/DownloadSecretsMenu.tsx         |   2 +-
 .../src/components/dashboard/DropZone.tsx     |   2 +-
 frontend/src/components/dashboard/KeyPair.tsx |  77 ++++++----
 frontend/src/components/dashboard/SideBar.tsx |  60 ++++----
 .../src/components/v2/HoverCard/HoverCard.tsx |  42 ++++++
 .../src/components/v2/HoverCard/index.tsx     |   2 +
 .../components/v2/IconButton/IconButton.tsx   |   2 +-
 frontend/src/components/v2/Modal/Modal.tsx    |   4 +-
 .../src/ee/components/PITRecoverySidebar.tsx  |   6 +-
 .../src/ee/components/SecretVersionList.tsx   |   2 +-
 frontend/src/pages/dashboard/[id].tsx         | 139 +++++++++++-------
 18 files changed, 388 insertions(+), 148 deletions(-)
 create mode 100644 frontend/src/components/v2/HoverCard/HoverCard.tsx
 create mode 100644 frontend/src/components/v2/HoverCard/index.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 283c69b53..7f52e04ae 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
         "@radix-ui/react-checkbox": "^1.0.1",
         "@radix-ui/react-dialog": "^1.0.2",
         "@radix-ui/react-dropdown-menu": "^2.0.2",
+        "@radix-ui/react-hover-card": "^1.0.3",
         "@radix-ui/react-label": "^2.0.0",
         "@radix-ui/react-popover": "^1.0.3",
         "@radix-ui/react-progress": "^1.0.1",
@@ -3858,6 +3859,27 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.0.3.tgz",
+      "integrity": "sha512-rr2+DxPlMhR57IPcNvZ85X8chytdfj7kyVToyR5Ge0r4IJEFiyPs0Cs8/K8oe5zt+yo0F8f29vtC8tNNK+ZIkA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
@@ -25050,6 +25072,23 @@
         "@radix-ui/react-use-callback-ref": "1.0.0"
       }
     },
+    "@radix-ui/react-hover-card": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.0.3.tgz",
+      "integrity": "sha512-rr2+DxPlMhR57IPcNvZ85X8chytdfj7kyVToyR5Ge0r4IJEFiyPs0Cs8/K8oe5zt+yo0F8f29vtC8tNNK+ZIkA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      }
+    },
     "@radix-ui/react-id": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 322e60f31..db8153a0a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
+    "@radix-ui/react-hover-card": "^1.0.3",
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-popover": "^1.0.3",
     "@radix-ui/react-progress": "^1.0.1",
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index e02c4f474..3d840c663 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -14,7 +14,7 @@
   "save-changes": "Save Changes",
   "saved": "Saved",
   "drop-zone": "Drag and drop a .env or .yml file here.",
-  "drop-zone-keys": "Drag and drop a .env or .yml file here to add more keys.",
+  "drop-zone-keys": "Drag and drop a .env or .yml file here to add more secrets.",
   "role": "Role",
   "role_admin": "admin",
   "display-name": "Display Name",
diff --git a/frontend/src/components/basic/Listbox.tsx b/frontend/src/components/basic/Listbox.tsx
index a2f08d9b9..19bdd1dd5 100644
--- a/frontend/src/components/basic/Listbox.tsx
+++ b/frontend/src/components/basic/Listbox.tsx
@@ -58,7 +58,7 @@ const ListBox = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <Listbox.Options className="border border-mineshaft-700 z-[70] p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm no-scrollbar no-scrollbar::-webkit-scrollbar">
               {data.map((person, personIdx) => (
                 <Listbox.Option
                   key={`${person}.${personIdx + 1}`}
diff --git a/frontend/src/components/basic/dialog/DeleteEnvVar.tsx b/frontend/src/components/basic/dialog/DeleteEnvVar.tsx
index d455a792c..48aa93c11 100644
--- a/frontend/src/components/basic/dialog/DeleteEnvVar.tsx
+++ b/frontend/src/components/basic/dialog/DeleteEnvVar.tsx
@@ -15,7 +15,7 @@ export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={() => {}}>
+        <Dialog as="div" className="relative z-[80]" onClose={() => {}}>
           <div className="fixed inset-0 overflow-y-auto">
             <Transition.Child
               as={Fragment}
diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend/src/components/dashboard/DashboardInputField.tsx
index 0e292d65d..c3f7e9a65 100644
--- a/frontend/src/components/dashboard/DashboardInputField.tsx
+++ b/frontend/src/components/dashboard/DashboardInputField.tsx
@@ -1,8 +1,10 @@
 import { memo, SyntheticEvent, useRef } from 'react';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faExclamationCircle, faEye, faLayerGroup } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import guidGenerator from '../utilities/randomId';
+import { Button } from '../v2';
+import { HoverObject } from '../v2/HoverCard';
 
 const REGEX = /([$]{.*?})/g;
 
@@ -10,10 +12,12 @@ interface DashboardInputFieldProps {
   position: number;
   onChangeHandler: (value: string, position: number) => void;
   value: string | undefined;
-  type: 'varName' | 'value';
+  type: 'varName' | 'value' | 'comment';
   blurred?: boolean;
   isDuplicate?: boolean;
-  override?: boolean;
+  overrideEnabled?: boolean;
+  modifyValueOverride?: (value: string | undefined, position: number) => void;
+  isSideBarOpen?: boolean;
 }
 
 /**
@@ -26,6 +30,8 @@ interface DashboardInputFieldProps {
  * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
  * @param {boolean} obj.isDuplicate - if the key name is duplicated
  * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
+ * 
+ * 
  * @returns
  */
 
@@ -36,7 +42,9 @@ const DashboardInputField = ({
   value,
   blurred,
   isDuplicate,
-  override
+  overrideEnabled,
+  modifyValueOverride,
+  isSideBarOpen
 }: DashboardInputFieldProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
@@ -51,41 +59,97 @@ const DashboardInputField = ({
     const error = startsWithNumber || isDuplicate;
 
     return (
-      <div className="flex-col w-full">
+      <div className={`relative flex-col w-full h-10 ${
+        error && value !== '' ? 'bg-red/[0.15]' : ''
+      } ${
+        isSideBarOpen && 'bg-mineshaft-700 duration-200'
+      }`}>
         <div
-          className={`group relative flex flex-col justify-center w-full border ${
-            error ? 'border-red' : 'border-mineshaft-500'
-          } rounded-md`}
+          className={`group relative flex flex-col justify-center items-center h-full ${
+            error ? 'w-max' : 'w-full'
+          }`}
         >
           <input
             onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), position)}
             type={type}
             value={value}
-            className={`z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
-              error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
+            className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${
+              error ? 'text-red-600 focus:text-red-500' : 'text-bunker-300 focus:text-bunker-100'
             } duration-200`}
             spellCheck="false"
           />
         </div>
         {startsWithNumber && (
-          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
-            Should not start with a number
-          </p>
+          <div className='absolute right-2 top-2 text-red z-50'>
+            <HoverObject 
+              text="Secret names should not start with a number"
+              icon={faExclamationCircle}
+              color="red"
+            />
+          </div>
         )}
-        {isDuplicate && !startsWithNumber && (
-          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
-            Secret names should be unique
-          </p>
+        {isDuplicate && value !== '' && !startsWithNumber && (
+          <div className='absolute right-2 top-2 text-red z-50'>
+            <HoverObject 
+              text="Secret names should be unique"
+              icon={faExclamationCircle}
+              color="red"
+            />
+          </div>
         )}
+        {!error && <div className={`absolute right-0 top-0 text-red z-50 ${
+          overrideEnabled ? 'visible group-hover:bg-mineshaft-700' : 'invisible group-hover:visible bg-mineshaft-700'
+        } cursor-pointer duration-0`}>
+          <Button variant="plain" onClick={() => {
+            if (modifyValueOverride) {
+              if (overrideEnabled === false) {
+                modifyValueOverride('', position);
+              } else {
+                modifyValueOverride(undefined, position);
+              }
+            }
+          }}>
+            <HoverObject 
+              text={overrideEnabled ? 'This secret is overriden with your personal value' : 'You can override this secret with a personal value'}
+              icon={faLayerGroup}
+              color={overrideEnabled ? 'primary' : 'bunker-400'}
+            />
+          </Button>
+        </div>}
+      </div>
+    );
+  }
+  if (type === 'comment') {
+    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== '';
+    const error = startsWithNumber || isDuplicate;
+
+    return (
+      <div className={`relative flex-col w-full h-10 ${
+        isSideBarOpen && 'bg-mineshaft-700 duration-200'
+      }`}>
+        <div
+          className={`group relative flex flex-col justify-center items-center ${
+            error ? 'w-max' : 'w-full'
+          }`}
+        >
+          <input
+            onChange={(e) => onChangeHandler(e.target.value, position)}
+            type={type}
+            value={value}
+            className='z-10 peer font-mono ph-no-capture bg-transparent py-2.5 caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            spellCheck="false"
+            placeholder='–'
+          />
+        </div>
       </div>
     );
   }
   if (type === 'value') {
     return (
       <div className="flex-col w-full">
-        <div className="group relative whitespace-pre	flex flex-col justify-center w-full border border-mineshaft-500 rounded-md">
-          {override === true && (
-            <div className="bg-primary-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-md">
+        <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
+          {overrideEnabled === true && (
+            <div className="bg-primary-500 rounded-sm absolute top-[0.1rem] right-[0.1rem] z-0 w-min text-xxs px-1 text-black opacity-80">
               Override enabled
             </div>
           )}
@@ -95,19 +159,19 @@ const DashboardInputField = ({
             onScroll={syncScroll}
             className={`${
               blurred
-                ? 'text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent'
+                ? 'text-transparent focus:text-transparent active:text-transparent'
                 : ''
-            } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
             spellCheck="false"
           />
           <div
             ref={ref}
             className={`${
-              blurred && !override
-                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400'
+              blurred && !overrideEnabled
+                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
                 : ''
-            } ${override ? 'text-primary-300' : 'text-gray-400'}
-            absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture overflow-x-scroll bg-bunker-800 h-9 rounded-md text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            } ${overrideEnabled ? 'text-primary-300' : 'text-gray-400'}
+            absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? 'invisible' : 'visible'} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >
             {value?.split(REGEX).map((word, id) => {
               if (word.match(REGEX) !== null) {
@@ -137,7 +201,9 @@ const DashboardInputField = ({
             })}
           </div>
           {blurred && (
-            <div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full rounded-md text-gray-400/50 text-clip">
+            <div className={`absolute flex flex-row justify-between items-center z-0 peer pr-2 ${
+              isSideBarOpen ? 'bg-mineshaft-700 duration-200' : 'bg-mineshaft-800'
+            } peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip`}>
               <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
                 {value?.split('').map(() => (
                   <FontAwesomeIcon
@@ -146,7 +212,9 @@ const DashboardInputField = ({
                     icon={faCircle}
                   />
                 ))}
+                {value?.split('').length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
               </div>
+              <div className='invisible group-hover:visible cursor-pointer'><FontAwesomeIcon icon={faEye} /></div>
             </div>
           )}
         </div>
@@ -163,8 +231,8 @@ function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInput
     prev.type === next.type &&
     prev.position === next.position &&
     prev.blurred === next.blurred &&
-    prev.override === next.override &&
-    prev.isDuplicate === next.isDuplicate
+    prev.overrideEnabled === next.overrideEnabled &&
+    prev.isDuplicate === next.isDuplicate 
   );
 }
 
diff --git a/frontend/src/components/dashboard/DeleteActionButton.tsx b/frontend/src/components/dashboard/DeleteActionButton.tsx
index e4d56dd95..d0708f239 100644
--- a/frontend/src/components/dashboard/DeleteActionButton.tsx
+++ b/frontend/src/components/dashboard/DeleteActionButton.tsx
@@ -1,26 +1,42 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from '../basic/buttons/Button';
 import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';
 
 type Props = {
-  onSubmit: () => void
+  onSubmit: () => void;
+  isPlain?: boolean;
 }
 
-export const DeleteActionButton = ({ onSubmit }: Props) => {
+export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false)
 
   return (
-    <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
-      <Button
+    <div className={`${
+      !isPlain 
+      ? 'bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2'
+      : 'cursor-pointer w-[2.35rem] h-[2.35rem] flex items-center justfy-center'}`}>
+      {isPlain 
+      ? <div
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+        onClick={() => setOpen(true)}
+        className="invisible group-hover:visible"
+      >
+        <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
+      </div>
+      : <Button
         text={String(t("Delete"))}
         // onButtonPressed={onSubmit}
         color="red"
         size="md"
         onButtonPressed={() => setOpen(true)}
-      />
+      />}
       <DeleteEnvVar 
         isOpen={open}
         onClose={() => {
diff --git a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx b/frontend/src/components/dashboard/DownloadSecretsMenu.tsx
index 19b300365..84c759756 100644
--- a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx
+++ b/frontend/src/components/dashboard/DownloadSecretsMenu.tsx
@@ -31,7 +31,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
+        <Menu.Items className="absolute z-[90] drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
           <Menu.Item>
             <Button
               color="mineshaft"
diff --git a/frontend/src/components/dashboard/DropZone.tsx b/frontend/src/components/dashboard/DropZone.tsx
index bb11332b8..5b1c0cd45 100644
--- a/frontend/src/components/dashboard/DropZone.tsx
+++ b/frontend/src/components/dashboard/DropZone.tsx
@@ -152,7 +152,7 @@ const DropZone = ({
     </div>
   ) : keysExist ? (
     <div
-      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
+      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-4 mx-auto mt-1 py-8 px-2"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
diff --git a/frontend/src/components/dashboard/KeyPair.tsx b/frontend/src/components/dashboard/KeyPair.tsx
index 7de4edf82..c87dd7f96 100644
--- a/frontend/src/components/dashboard/KeyPair.tsx
+++ b/frontend/src/components/dashboard/KeyPair.tsx
@@ -3,17 +3,25 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SecretDataProps } from 'public/data/frequentInterfaces';
 
 import DashboardInputField from './DashboardInputField';
+import { DeleteActionButton } from './DeleteActionButton';
 
 interface KeyPairProps {
   keyPair: SecretDataProps;
   modifyKey: (value: string, position: number) => void;
   modifyValue: (value: string, position: number) => void;
-  modifyValueOverride: (value: string, position: number) => void;
+  modifyValueOverride: (value: string | undefined, position: number) => void;
+  modifyComment: (value: string, position: number) => void;
   isBlurred: boolean;
   isDuplicate: boolean;
   toggleSidebar: (id: string) => void;
   sidebarSecretId: string;
   isSnapshot: boolean;
+  deleteRow?: (props: DeleteRowFunctionProps) => void;
+}
+
+export interface DeleteRowFunctionProps {
+  ids: string[];
+  secretName: string;
 }
 
 /**
@@ -23,11 +31,13 @@ interface KeyPairProps {
  * @param {function} obj.modifyKey - modify the key of a certain environment variable
  * @param {function} obj.modifyValue - modify the value of a certain environment variable
  * @param {function} obj.modifyValueOverride - modify the value of a certain environment variable if it is overriden
+ * @param {function} obj.modifyComment - modify the comment of a certain environment variable
  * @param {boolean} obj.isBlurred - if the blurring setting is turned on
  * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
  * @param {function} obj.toggleSidebar - open/close/switch sidebar
  * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
  * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar
+ * @param {function} obj.deleteRow - a function to delete a certain keyPair
  * @returns
  */
 const KeyPair = ({
@@ -35,50 +45,59 @@ const KeyPair = ({
   modifyKey,
   modifyValue,
   modifyValueOverride,
+  modifyComment,
   isBlurred,
   isDuplicate,
   toggleSidebar,
   sidebarSecretId,
-  isSnapshot
+  isSnapshot, 
+  deleteRow
 }: KeyPairProps) => (
   <div
-    className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && 'pointer-events-none'} ${
-      keyPair.id === sidebarSecretId && 'bg-mineshaft-500 duration-200'
-    } rounded-md`}
+    className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && 'pointer-events-none'} ${
+      keyPair.id === sidebarSecretId && 'bg-mineshaft-700 duration-200'
+    }`}
   >
-    <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
-      {keyPair.valueOverride && (
-        <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
-          <div className="w-1 h-1 rounded-full bg-primary z-40" />
-          <span className="absolute z-50 hidden group-hover:flex group-hover:animate-popdown duration-200 w-[10.5rem] -left-[0.4rem] -top-[1.7rem] translate-y-full px-2 py-2 bg-mineshaft-500 rounded-b-md rounded-r-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-0 after:bottom-[100%] after:-translate-x-0 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-mineshaft-500">
-            This secret is overriden
-          </span>
-        </div>
-      )}
-      <div className="min-w-xl w-96">
-        <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
+    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
+      <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
+      <div className="w-80 border-r border-mineshaft-600">
+        <div className="flex items-center max-h-16">
           <DashboardInputField
             onChangeHandler={modifyKey}
             type="varName"
             position={keyPair.pos}
             value={keyPair.key}
             isDuplicate={isDuplicate}
+            overrideEnabled={keyPair.valueOverride !== undefined}
+            modifyValueOverride={modifyValueOverride}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
           />
         </div>
       </div>
-      <div className="w-full min-w-xl">
+      <div className="w-full border-r border-mineshaft-600">
         <div
-          className={`flex min-w-xl items-center ${
-            !isSnapshot && 'pr-1.5'
-          } rounded-lg mt-4 md:mt-0 max-h-10`}
+          className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
         >
           <DashboardInputField
-            onChangeHandler={keyPair.valueOverride ? modifyValueOverride : modifyValue}
+            onChangeHandler={keyPair.valueOverride !== undefined ? modifyValueOverride : modifyValue}
             type="value"
             position={keyPair.pos}
-            value={keyPair.valueOverride ? keyPair.valueOverride : keyPair.value}
+            value={keyPair.valueOverride !== undefined ? keyPair.valueOverride : keyPair.value}
             blurred={isBlurred}
-            override={Boolean(keyPair.valueOverride)}
+            overrideEnabled={keyPair.valueOverride !== undefined}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
+          />
+        </div>
+      </div>
+      <div className="w-96 border-r border-mineshaft-600">
+        <div className="flex items-center max-h-16">
+          <DashboardInputField
+            onChangeHandler={modifyComment}
+            type="comment"
+            position={keyPair.pos}
+            value={keyPair.comment}
+            isDuplicate={isDuplicate}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
           />
         </div>
       </div>
@@ -88,11 +107,19 @@ const KeyPair = ({
           role="button"
           tabIndex={0}
           onClick={() => toggleSidebar(keyPair.id)}
-          className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200"
+          className="cursor-pointer w-[2.35rem] h-[2.35rem] px-6 rounded-md invisible group-hover:visible flex flex-row justify-center items-center"
         >
-          <FontAwesomeIcon className="text-gray-300 px-2.5 text-lg mt-0.5" icon={faEllipsis} />
+          <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
         </div>
       )}
+      {!isSnapshot && (
+        <DeleteActionButton
+          onSubmit={() => { if (deleteRow) {
+            deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
+          }}}
+          isPlain
+        />
+      )}
     </div>
   </div>
 );
diff --git a/frontend/src/components/dashboard/SideBar.tsx b/frontend/src/components/dashboard/SideBar.tsx
index d602e2c93..a40dc1634 100644
--- a/frontend/src/components/dashboard/SideBar.tsx
+++ b/frontend/src/components/dashboard/SideBar.tsx
@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import SecretVersionList from '@app/ee/components/SecretVersionList';
@@ -80,7 +80,7 @@ const SideBar = ({
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 right-0 z-40 shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 right-0 z-[70] shadow-xl flex flex-col justify-between">
       {isLoading ? (
         <div className="flex items-center justify-center h-full">
           <Image
@@ -101,19 +101,21 @@ const SideBar = ({
               className="p-1"
               onClick={() => toggleSidebar('None')}
             >
-              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
             </div>
           </div>
           <div className="mt-4 px-4 pointer-events-none">
             <p className="text-sm text-bunker-300">{t('dashboard:sidebar.key')}</p>
-            <DashboardInputField
-              onChangeHandler={modifyKey}
-              type="varName"
-              position={data[0]?.pos}
-              value={data[0]?.key}
-              isDuplicate={false}
-              blurred={false}
-            />
+            <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+              <DashboardInputField
+                onChangeHandler={modifyKey}
+                type="varName"
+                position={data[0]?.pos}
+                value={data[0]?.key}
+                isDuplicate={false}
+                blurred={false}
+              />
+            </div>
           </div>
           {(data[0]?.value || data[0]?.value === "") ? (
             <div
@@ -122,14 +124,16 @@ const SideBar = ({
               } duration-200`}
             >
               <p className="text-sm text-bunker-300">{t('dashboard:sidebar.value')}</p>
-              <DashboardInputField
-                onChangeHandler={modifyValue}
-                type="value"
-                position={data[0].pos}
-                value={data[0]?.value}
-                isDuplicate={false}
-                blurred
-              />
+              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+                <DashboardInputField
+                  onChangeHandler={modifyValue}
+                  type="value"
+                  position={data[0].pos}
+                  value={data[0]?.value}
+                  isDuplicate={false}
+                  blurred
+                />
+              </div>
               <div className="absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50">
                 <GenerateSecretMenu modifyValue={modifyValue} position={data[0]?.pos} />
               </div>
@@ -159,14 +163,16 @@ const SideBar = ({
                 !overrideEnabled && 'opacity-40 pointer-events-none'
               } duration-200`}
             >
-              <DashboardInputField
-                onChangeHandler={modifyValueOverride}
-                type="value"
-                position={data[0]?.pos}
-                value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
-                isDuplicate={false}
-                blurred
-              />
+              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+                <DashboardInputField
+                  onChangeHandler={modifyValueOverride}
+                  type="value"
+                  position={data[0]?.pos}
+                  value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
+                  isDuplicate={false}
+                  blurred
+                />
+              </div>
               <div className="absolute right-[0.57rem] top-[0.3rem] z-50">
                 <GenerateSecretMenu modifyValue={modifyValueOverride} position={data[0]?.pos} />
               </div>
diff --git a/frontend/src/components/v2/HoverCard/HoverCard.tsx b/frontend/src/components/v2/HoverCard/HoverCard.tsx
new file mode 100644
index 000000000..703e7dbd0
--- /dev/null
+++ b/frontend/src/components/v2/HoverCard/HoverCard.tsx
@@ -0,0 +1,42 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as HoverCard from '@radix-ui/react-hover-card';
+
+type Props = {
+  text: string;
+  icon: IconProp;
+  color: string;
+};
+
+export type HoverCardProps = Props;
+
+export const HoverObject = ({
+    text,
+    icon,
+    color
+  }: Props): JSX.Element => (
+  <HoverCard.Root openDelay={50}>
+    <HoverCard.Trigger asChild>
+      <a
+        className="ImageTrigger z-20"
+      >
+        <FontAwesomeIcon icon={icon} className={`text-${color}`} />
+      </a>
+    </HoverCard.Trigger>
+    <HoverCard.Portal>
+      <HoverCard.Content className="HoverCardContent z-[50]" sideOffset={5}>
+        <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
+            <div>
+              <div className="Text bold">{text}</div>
+            </div>
+          </div>
+        </div>
+
+        <HoverCard.Arrow className="border-mineshaft-600" />
+      </HoverCard.Content>
+    </HoverCard.Portal>
+  </HoverCard.Root>
+);
+
+HoverObject.displayName = 'HoverCard';
diff --git a/frontend/src/components/v2/HoverCard/index.tsx b/frontend/src/components/v2/HoverCard/index.tsx
new file mode 100644
index 000000000..fec7b1538
--- /dev/null
+++ b/frontend/src/components/v2/HoverCard/index.tsx
@@ -0,0 +1,2 @@
+export type { HoverCardProps } from './HoverCard';
+export { HoverObject } from './HoverCard';
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
index d0500ab80..98e81b089 100644
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -80,7 +80,7 @@ const iconButtonVariants = cva(
       {
         colorSchema: ['danger', 'primary', 'secondary'],
         variant: ['plain'],
-        className: 'bg-transparent py-1 px-1'
+        className: 'bg-transparent py-1 px-1 text-bunker-300'
       }
     ]
   }
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index 41bfb9da7..efc6ba3a3 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -18,14 +18,14 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
   ({ children, title, subTitle, className, footerContent, onClose, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className="fixed inset-0 h-full w-full animate-fadeIn"
+        className="fixed inset-0 h-full w-full animate-fadeIn z-[70]"
         style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
       />
       <DialogPrimitive.Content {...props} ref={forwardedRef}>
         <Card
           isRounded
           className={twMerge(
-            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-50',
+            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
             className
           )}
         >
diff --git a/frontend/src/ee/components/PITRecoverySidebar.tsx b/frontend/src/ee/components/PITRecoverySidebar.tsx
index d9cc47a7e..b13e3b66a 100644
--- a/frontend/src/ee/components/PITRecoverySidebar.tsx
+++ b/frontend/src/ee/components/PITRecoverySidebar.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from '@app/components/basic/buttons/Button';
@@ -155,7 +155,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
     <div
       className={`absolute border-l border-mineshaft-500 ${
         isLoading ? 'bg-bunker-800' : 'bg-bunker'
-      } fixed h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between`}
+      } fixed h-full w-96 right-0 z-[70] shadow-xl flex flex-col justify-between`}
     >
       {isLoading ? (
         <div className="flex items-center justify-center h-full mb-8">
@@ -177,7 +177,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
               className="p-1"
               onClick={() => toggleSidebar(false)}
             >
-              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
             </div>
           </div>
           <div className="flex flex-col px-2 py-2 overflow-y-auto h-[92vh]">
diff --git a/frontend/src/ee/components/SecretVersionList.tsx b/frontend/src/ee/components/SecretVersionList.tsx
index 4df9c38a7..fd4a3916c 100644
--- a/frontend/src/ee/components/SecretVersionList.tsx
+++ b/frontend/src/ee/components/SecretVersionList.tsx
@@ -89,7 +89,7 @@ const SecretVersionList = ({ secretId }: { secretId: string }) => {
             />
           </div>
         ) : (
-          <div className="h-48 overflow-y-auto overflow-x-none">
+          <div className="h-48 overflow-y-auto overflow-x-none dark:[color-scheme:dark]">
             {secretVersions ? (
               secretVersions
                 ?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index 4a5bb8332..d5b26c2f5 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -5,9 +5,9 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import {
-  faArrowDownAZ,
-  faArrowDownZA,
+  faArrowDown,
   faArrowLeft,
+  faArrowUp,
   faCheck,
   faClockRotateLeft,
   faEye,
@@ -31,6 +31,7 @@ import guidGenerator from '@app/components/utilities/randomId';
 import encryptSecrets from '@app/components/utilities/secrets/encryptSecrets';
 import getSecretsForProject from '@app/components/utilities/secrets/getSecretsForProject';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+import { IconButton } from '@app/components/v2';
 import getProjectSercetSnapshotsCount from '@app/ee/api/secrets/GetProjectSercetSnapshotsCount';
 import performSecretRollback from '@app/ee/api/secrets/PerformSecretRollback';
 import PITRecoverySidebar from '@app/ee/components/PITRecoverySidebar';
@@ -113,7 +114,7 @@ export default function Dashboard() {
   const [blurred, setBlurred] = useState(true);
   const [isKeyAvailable, setIsKeyAvailable] = useState(true);
   const [isNew, setIsNew] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [searchKeys, setSearchKeys] = useState('');
   const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
   const [sortMethod, setSortMethod] = useState('alphabetical');
@@ -133,11 +134,7 @@ export default function Dashboard() {
   const [workspaceEnvs, setWorkspaceEnvs] = useState<WorkspaceEnv[]>([]);
 
   const [selectedSnapshotEnv, setSelectedSnapshotEnv] = useState<WorkspaceEnv>();
-  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv>({
-    name: '',
-    slug: '',
-    isWriteDenied: false
-  });
+  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv>();
   const [atSecretAreaTop, setAtSecretsAreaTop] = useState(true);
   const secretsTop = useRef<HTMLDivElement>(null);
 
@@ -193,15 +190,18 @@ export default function Dashboard() {
       }));
 
     setData(sortedData);
+    setIsLoading(false);
   };
 
   /**
    * Reorder rows alphabetically or in the opprosite order
    */
   const reorderRows = (dataToReorder: SecretDataProps[] | 1) => {
-    setSortMethod((prevSort) => (prevSort === 'alphabetical' ? '-alphabetical' : 'alphabetical'));
+    if (dataToReorder) {
+      setSortMethod((prevSort) => (prevSort === 'alphabetical' ? '-alphabetical' : 'alphabetical'));
 
-    sortValuesHandler(dataToReorder, undefined);
+      sortValuesHandler(dataToReorder, undefined);
+    }
   };
 
   useEffect(() => {
@@ -246,16 +246,17 @@ export default function Dashboard() {
         setIsLoading(true);
         setBlurred(true);
         // ENV
-        const dataToSort = await getSecretsForProject({
-          env: selectedEnv.slug,
-          setIsKeyAvailable,
-          setData,
-          workspaceId
-        });
-        setInitialData(dataToSort);
-        reorderRows(dataToSort);
-
-        setTimeout(() => setIsLoading(false), 700);
+        let dataToSort;
+        if (selectedEnv) {
+          dataToSort = await getSecretsForProject({
+            env: selectedEnv.slug,
+            setIsKeyAvailable,
+            setData,
+            workspaceId
+          });
+          setInitialData(dataToSort);
+          reorderRows(dataToSort);
+        }
       } catch (error) {
         console.log('Error', error);
         setData(undefined);
@@ -283,6 +284,22 @@ export default function Dashboard() {
     }
   };
 
+  const addRowToBottom = () => {
+    setIsNew(false);
+    setData([
+      ...data!,
+      {
+        id: guidGenerator(),
+        idOverride: guidGenerator(),
+        pos: data!.length,
+        key: '',
+        value: '',
+        valueOverride: undefined,
+        comment: ''
+      },
+    ]);
+  };
+
   const deleteRow = ({ ids, secretName }: { ids: string[]; secretName: string }) => {
     setButtonReady(true);
     toggleSidebar('None');
@@ -370,7 +387,7 @@ export default function Dashboard() {
       });
     }
 
-    if (selectedEnv.isWriteDenied) {
+    if (selectedEnv?.isWriteDenied) {
       setSaveLoading(false);
       return createNotification({
         text: 'You are not allowed to edit this environment',
@@ -473,7 +490,7 @@ export default function Dashboard() {
     if (secretsToBeDeleted.concat(overridesToBeDeleted).length > 0) {
       await deleteSecrets({ secretIds: secretsToBeDeleted.concat(overridesToBeDeleted) });
     }
-    if (secretsToBeAdded.concat(overridesToBeAdded).length > 0) {
+    if (selectedEnv && secretsToBeAdded.concat(overridesToBeAdded).length > 0) {
       const secrets = await encryptSecrets({
         secretsToEncrypt: secretsToBeAdded.concat(overridesToBeAdded),
         workspaceId,
@@ -481,7 +498,7 @@ export default function Dashboard() {
       });
       if (secrets) await addSecrets({ secrets, env: selectedEnv.slug, workspaceId });
     }
-    if (secretsToBeUpdated.concat(overridesToBeUpdated).length > 0) {
+    if (selectedEnv && secretsToBeUpdated.concat(overridesToBeUpdated).length > 0) {
       const secrets = await encryptSecrets({
         secretsToEncrypt: secretsToBeUpdated.concat(overridesToBeUpdated),
         workspaceId,
@@ -518,7 +535,7 @@ export default function Dashboard() {
   };
 
   return data ? (
-    <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white">
+    <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white dark">
       <Head>
         <title>{t('common:head-title', { title: t('dashboard:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -526,7 +543,7 @@ export default function Dashboard() {
         <meta property="og:title" content={String(t('dashboard:og-title'))} />
         <meta name="og:description" content={String(t('dashboard:og-description'))} />
       </Head>
-      <div className="flex flex-row h-full">
+      <div className="flex flex-row h-full dark:[color-scheme:dark]">
         {sidebarSecretId !== 'None' && (
           <SideBar
             toggleSidebar={toggleSidebar}
@@ -540,7 +557,7 @@ export default function Dashboard() {
             modifyComment={listenChangeComment}
             buttonReady={buttonReady}
             workspaceEnvs={workspaceEnvs}
-            selectedEnv={selectedEnv}
+            selectedEnv={selectedEnv!}
             workspaceId={workspaceId}
             savePush={savePush}
             sharedToHide={sharedToHide}
@@ -555,7 +572,7 @@ export default function Dashboard() {
             setSnapshotData={setSnapshotData}
           />
         )}
-        <div className="w-full max-h-96 pb-2">
+        <div className="w-full max-h-96 pb-2 dark:[color-scheme:dark]">
           <NavHeader pageName={t('dashboard:title')} isProjectRelated />
           {checkDocsPopUpVisible && (
             <BottonRightPopup
@@ -568,7 +585,7 @@ export default function Dashboard() {
               setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
             />
           )}
-          <div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
+          <div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl">
             {snapshotData && (
               <div className="flex justify-start max-w-sm mt-1 mr-2">
                 <Button
@@ -589,7 +606,7 @@ export default function Dashboard() {
                   </span>
                 )}
               </div>
-              {!snapshotData && data?.length === 0 && (
+              {!snapshotData && data?.length === 0 && selectedEnv && (
                 <ListBox
                   isSelected={selectedEnv.name}
                   data={workspaceEnvs.map(({ name }) => name)}
@@ -629,7 +646,7 @@ export default function Dashboard() {
                   />
                 </div>
               )}
-              {snapshotData && (
+              {snapshotData && selectedEnv && (
                 <div className="flex justify-start max-w-sm mt-1">
                   <Button
                     text={String(t('Rollback to this snapshot'))}
@@ -656,6 +673,7 @@ export default function Dashboard() {
                         text: `Rollback has been performed successfully.`,
                         type: 'success'
                       });
+                      setButtonReady(false);
                     }}
                     color="primary"
                     size="md"
@@ -666,9 +684,9 @@ export default function Dashboard() {
             </div>
           </div>
           <div className="mx-6 w-full pr-12">
-            <div className="flex flex-col max-w-5xl pb-1">
+            <div className="flex flex-col pb-1">
               <div className="w-full flex flex-row items-start">
-                {(snapshotData || data?.length !== 0) && (
+                {(snapshotData || data?.length !== 0) && selectedEnv && (
                   <>
                     {!snapshotData ? (
                       <ListBox
@@ -699,28 +717,18 @@ export default function Dashboard() {
                         }
                       />
                     )}
-                    <div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 rounded-md flex flex-row items-center">
+                    <div className="h-10 w-full bg-mineshaft-700 hover:bg-white/10 ml-2 rounded-md flex flex-row items-center">
                       <FontAwesomeIcon
-                        className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
+                        className="bg-transparent rounded-l-md py-[0.7rem] pl-4 pr-2 text-bunker-300 text-sm"
                         icon={faMagnifyingGlass}
                       />
                       <input
-                        className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
+                        className="pl-2 text-bunker-300 rounded-r-md bg-transparent w-full h-full outline-none text-sm placeholder:hover:text-bunker-200 placeholder:focus:text-transparent"
                         value={searchKeys}
                         onChange={(e) => setSearchKeys(e.target.value)}
                         placeholder={String(t('dashboard:search-keys'))}
                       />
                     </div>
-                    {!snapshotData && (
-                      <div className="ml-2 min-w-max flex flex-row items-start justify-start">
-                        <Button
-                          onButtonPressed={() => reorderRows(1)}
-                          color="mineshaft"
-                          size="icon-md"
-                          icon={sortMethod === 'alphabetical' ? faArrowDownAZ : faArrowDownZA}
-                        />
-                      </div>
-                    )}
                     {!snapshotData && (
                       <div className="ml-2 min-w-max flex flex-row items-start justify-start">
                         <DownloadSecretMenu data={data} env={selectedEnv.slug} />
@@ -765,13 +773,30 @@ export default function Dashboard() {
                 />
               </div>
             ) : data?.length !== 0 ? (
-              <div className="flex flex-col w-full mt-1 mb-2">
+              <div className="flex flex-col w-full mt-1">
                 <div
                   onScroll={onSecretsAreaScroll}
-                  className="max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar"
+                  className="mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar border border-mineshaft-600 rounded-md"
                 >
                   <div ref={secretsTop} />
-                  <div className="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
+                  <div className='bg-mineshaft-800 text-sm rounded-t-md h-10 w-full flex flex-row items-center border-b-2 border-mineshaft-500 sticky top-0 z-[60]'>
+                    <div className='w-14'/>
+                    <div className='text-bunker-300 relative font-semibold h-10 flex items-center w-80 pl-2 border-r border-mineshaft-600'>
+                      <span>Key</span>
+                      {!snapshotData && <IconButton 
+                        ariaLabel="copy icon"
+                        variant="plain"
+                        className="group relative ml-2"
+                        onClick={() => reorderRows(1)}
+                      >
+                          {sortMethod === 'alphabetical' ? <FontAwesomeIcon icon={faArrowUp} /> : <FontAwesomeIcon icon={faArrowDown} />}
+                      </IconButton>}
+                    </div>
+                    <div className='text-bunker-300 pl-2 font-semibold h-10 flex items-center w-full border-r border-mineshaft-600'>Value</div>
+                    <div className='text-bunker-300 pl-2 font-semibold h-10 flex items-center w-96'>Comment</div>
+                    {!snapshotData && <div className='w-[9.3rem]'/>}
+                  </div>
+                  <div className="bg-mineshaft-800 rounded-b-md border-bunker-600">
                     {!snapshotData &&
                       data
                         ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()))
@@ -783,6 +808,7 @@ export default function Dashboard() {
                             modifyValue={listenChangeValue}
                             modifyValueOverride={listenChangeValueOverride}
                             modifyKey={listenChangeKey}
+                            modifyComment={listenChangeComment}
                             isBlurred={blurred}
                             isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
                               keyPair.key
@@ -790,6 +816,7 @@ export default function Dashboard() {
                             toggleSidebar={toggleSidebar}
                             sidebarSecretId={sidebarSecretId}
                             isSnapshot={false}
+                            deleteRow={deleteCertainRow}
                           />
                         ))}
                     {snapshotData &&
@@ -820,6 +847,7 @@ export default function Dashboard() {
                             modifyValue={listenChangeValue}
                             modifyValueOverride={listenChangeValueOverride}
                             modifyKey={listenChangeKey}
+                            modifyComment={listenChangeComment}
                             isBlurred={blurred}
                             isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
                               keyPair.key
@@ -829,9 +857,20 @@ export default function Dashboard() {
                             isSnapshot
                           />
                         ))}
+                    <div className='bg-mineshaft-800 text-sm rounded-t-md hover:bg-mineshaft-700 h-10 w-full flex flex-row items-center border-b-2 border-mineshaft-500 sticky top-0 z-[60]'>
+                      <div className='w-10'/>
+                      <button 
+                        type="button"
+                        className='text-bunker-300 relative font-normal h-10 flex items-center w-full cursor-pointer'
+                        onClick={addRowToBottom}
+                      >
+                        <FontAwesomeIcon icon={faPlus} className='mr-3'/>
+                        <span className='text-sm'>Add Secret</span>
+                      </button>
+                    </div>
                   </div>
                   {!snapshotData && (
-                    <div className="w-full max-w-5xl px-2 pt-3">
+                    <div className="w-full px-2 pt-3">
                       <DropZone
                         setData={addData}
                         setErrorDragAndDrop={setErrorDragAndDrop}
@@ -846,7 +885,7 @@ export default function Dashboard() {
                 </div>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
+              <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 mt-28">
                 {isKeyAvailable && !snapshotData && (
                   <DropZone
                     setData={setData}

From 68bf0b9efe105eb55dbc517b432f390250968d71 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Mon, 6 Feb 2023 17:57:47 +0700
Subject: [PATCH 33/52] Finish v1 Azure Key Vault integration

---
 backend/src/config/index.ts                   |   6 +
 .../v1/integrationAuthController.ts           |  10 +-
 .../controllers/v1/integrationController.ts   |   3 +
 backend/src/helpers/integration.ts            |   8 +-
 backend/src/integrations/apps.ts              |  15 ++
 backend/src/integrations/exchange.ts          |  59 +++++++
 backend/src/integrations/refresh.ts           |  80 +++++++--
 backend/src/integrations/sync.ts              | 154 +++++++++++++++-
 backend/src/models/integration.ts             |   4 +-
 backend/src/models/integrationAuth.ts         |   4 +-
 backend/src/services/IntegrationService.ts    |  21 ++-
 backend/src/variables/index.ts                |   4 +
 backend/src/variables/integration.ts          |  19 ++
 frontend/public/data/frequentConstants.ts     |  11 ++
 frontend/src/components/basic/Layout.tsx      |   4 +-
 .../components/integrations/Integration.tsx   |  17 +-
 .../WorkspaceContext/WorkspaceContext.tsx     |   2 +-
 .../api/integrations/authorizeIntegration.ts  |   2 +-
 frontend/src/pages/azure-key-vault.tsx        | 166 ++++++++++++++++++
 frontend/src/pages/github.tsx                 |   2 +-
 frontend/src/pages/integrations/[id].tsx      |  18 +-
 21 files changed, 560 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/pages/azure-key-vault.tsx

diff --git a/backend/src/config/index.ts b/backend/src/config/index.ts
index 2ecd1af8c..ad1acb1a6 100644
--- a/backend/src/config/index.ts
+++ b/backend/src/config/index.ts
@@ -13,10 +13,13 @@ const MONGO_URL = process.env.MONGO_URL!;
 const NODE_ENV = process.env.NODE_ENV! || 'production';
 const VERBOSE_ERROR_OUTPUT = process.env.VERBOSE_ERROR_OUTPUT! === 'true' && true;
 const LOKI_HOST = process.env.LOKI_HOST || undefined;
+const CLIENT_ID_AZURE = process.env.CLIENT_ID_AZURE!;
+const TENANT_ID_AZURE = process.env.TENANT_ID_AZURE!;
 const CLIENT_ID_HEROKU = process.env.CLIENT_ID_HEROKU!;
 const CLIENT_ID_VERCEL = process.env.CLIENT_ID_VERCEL!;
 const CLIENT_ID_NETLIFY = process.env.CLIENT_ID_NETLIFY!;
 const CLIENT_ID_GITHUB = process.env.CLIENT_ID_GITHUB!;
+const CLIENT_SECRET_AZURE = process.env.CLIENT_SECRET_AZURE!;
 const CLIENT_SECRET_HEROKU = process.env.CLIENT_SECRET_HEROKU!;
 const CLIENT_SECRET_VERCEL = process.env.CLIENT_SECRET_VERCEL!;
 const CLIENT_SECRET_NETLIFY = process.env.CLIENT_SECRET_NETLIFY!;
@@ -60,10 +63,13 @@ export {
   NODE_ENV,
   VERBOSE_ERROR_OUTPUT,
   LOKI_HOST,
+  CLIENT_ID_AZURE,
+  TENANT_ID_AZURE,
   CLIENT_ID_HEROKU,
   CLIENT_ID_VERCEL,
   CLIENT_ID_NETLIFY,
   CLIENT_ID_GITHUB,
+  CLIENT_SECRET_AZURE,
   CLIENT_SECRET_HEROKU,
   CLIENT_SECRET_VERCEL,
   CLIENT_SECRET_NETLIFY,
diff --git a/backend/src/controllers/v1/integrationAuthController.ts b/backend/src/controllers/v1/integrationAuthController.ts
index b030b79d6..cedc7e345 100644
--- a/backend/src/controllers/v1/integrationAuthController.ts
+++ b/backend/src/controllers/v1/integrationAuthController.ts
@@ -31,7 +31,7 @@ export const oAuthExchange = async (
 ) => {
 	try {
 		const { workspaceId, code, integration } = req.body;
-
+		
 		if (!INTEGRATION_SET.has(integration))
 			throw new Error('Failed to validate integration');
 		
@@ -40,12 +40,14 @@ export const oAuthExchange = async (
 			throw new Error("Failed to get environments")
 		}
 	
-		await IntegrationService.handleOAuthExchange({
+		const integrationDetails = await IntegrationService.handleOAuthExchange({
 			workspaceId,
 			integration,
 			code,
 			environment: environments[0].slug,
 		});
+		
+		return res.status(200).send(integrationDetails);
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);
@@ -53,10 +55,6 @@ export const oAuthExchange = async (
 			message: 'Failed to get OAuth2 code-token exchange'
 		});
 	}
-
-	return res.status(200).send({
-		message: 'Successfully enabled integration authorization'
-	});
 };
 
 /**
diff --git a/backend/src/controllers/v1/integrationController.ts b/backend/src/controllers/v1/integrationController.ts
index 4e66ce0aa..2b52f9725 100644
--- a/backend/src/controllers/v1/integrationController.ts
+++ b/backend/src/controllers/v1/integrationController.ts
@@ -16,6 +16,9 @@ import { eventPushSecrets } from '../../events';
  * @returns 
  */
 export const createIntegration = async (req: Request, res: Response) => {
+	
+	// TODO: make this more versatile
+
 	let integration;
 	try {
 		// initialize new integration after saving integration access token
diff --git a/backend/src/helpers/integration.ts b/backend/src/helpers/integration.ts
index 1618e5e67..595dbbb6f 100644
--- a/backend/src/helpers/integration.ts
+++ b/backend/src/helpers/integration.ts
@@ -44,6 +44,7 @@ const handleOAuthExchangeHelper = async ({
 }) => {
     let action;
     let integrationAuth;
+    let newIntegration;
     try {
         const bot = await Bot.findOne({
             workspace: workspaceId,
@@ -100,7 +101,7 @@ const handleOAuthExchangeHelper = async ({
         }
 
         // initialize new integration after exchange
-        await new Integration({
+        newIntegration = await new Integration({
             workspace: workspaceId,
             isActive: false,
             app: null,
@@ -113,6 +114,11 @@ const handleOAuthExchangeHelper = async ({
         Sentry.captureException(err);
         throw new Error('Failed to handle OAuth2 code-token exchange')
     }
+    
+    return ({
+        integrationAuth,
+        integration: newIntegration
+    });
 }
 /**
  * Sync/push environment variables in workspace with id [workspaceId] to
diff --git a/backend/src/integrations/apps.ts b/backend/src/integrations/apps.ts
index d1252954e..50f146be5 100644
--- a/backend/src/integrations/apps.ts
+++ b/backend/src/integrations/apps.ts
@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/node';
 import { Octokit } from '@octokit/rest';
 import { IIntegrationAuth } from '../models';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
@@ -40,6 +41,11 @@ const getApps = async ({
   let apps: App[];
   try {
     switch (integrationAuth.integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        apps = await getAppsAzureKeyVault({
+          accessToken
+        });
+      break;
       case INTEGRATION_HEROKU:
         apps = await getAppsHeroku({
           accessToken
@@ -81,6 +87,15 @@ const getApps = async ({
   return apps;
 };
 
+const getAppsAzureKeyVault = async ({
+  accessToken
+}: {
+  accessToken: string;
+}) => {
+  // TODO
+  return [];
+}
+
 /**
  * Return list of apps for Heroku integration
  * @param {Object} obj
diff --git a/backend/src/integrations/exchange.ts b/backend/src/integrations/exchange.ts
index 26aca5fdb..ada2b76bd 100644
--- a/backend/src/integrations/exchange.ts
+++ b/backend/src/integrations/exchange.ts
@@ -1,10 +1,12 @@
 import axios from 'axios';
 import * as Sentry from '@sentry/node';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_AZURE_TOKEN_URL,
   INTEGRATION_HEROKU_TOKEN_URL,
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
@@ -12,15 +14,27 @@ import {
 } from '../variables';
 import {
   SITE_URL,
+  CLIENT_ID_AZURE,
   CLIENT_ID_VERCEL,
   CLIENT_ID_NETLIFY,
   CLIENT_ID_GITHUB,
+  CLIENT_SECRET_AZURE,
   CLIENT_SECRET_HEROKU,
   CLIENT_SECRET_VERCEL,
   CLIENT_SECRET_NETLIFY,
   CLIENT_SECRET_GITHUB
 } from '../config';
 
+interface ExchangeCodeAzureResponse {
+  token_type: string;
+  scope: string;
+  expires_in: number;
+  ext_expires_in: number;
+  access_token: string;
+  refresh_token: string;
+  id_token: string;
+}
+
 interface ExchangeCodeHerokuResponse {
   token_type: string;
   access_token: string;
@@ -75,6 +89,11 @@ const exchangeCode = async ({
 
   try {
     switch (integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        obj = await exchangeCodeAzure({
+          code
+        });
+        break;
       case INTEGRATION_HEROKU:
         obj = await exchangeCodeHeroku({
           code
@@ -105,6 +124,46 @@ const exchangeCode = async ({
   return obj;
 };
 
+/**
+ * Return [accessToken] for Azure OAuth2 code-token exchange
+ * @param param0 
+ */
+const exchangeCodeAzure = async ({
+  code
+}: {
+  code: string;
+}) => {
+  const accessExpiresAt = new Date();
+  let res: ExchangeCodeAzureResponse;
+  try {
+    res = (await axios.post(
+      INTEGRATION_AZURE_TOKEN_URL,
+       new URLSearchParams({
+        grant_type: 'authorization_code',
+        code: code,
+        scope: 'https://vault.azure.net/.default openid offline_access', // TODO: do we need all these permissions?
+        client_id: CLIENT_ID_AZURE,
+        client_secret: CLIENT_SECRET_AZURE,
+        redirect_uri: `${SITE_URL}/azure-key-vault`
+      } as any)
+    )).data;
+    
+    accessExpiresAt.setSeconds(
+        accessExpiresAt.getSeconds() + res.expires_in
+    );
+  } catch (err: any) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error('Failed OAuth2 code-token exchange with Azure');
+  }
+  
+  return ({
+    accessToken: res.access_token,
+    refreshToken: res.refresh_token,
+    accessExpiresAt
+  });
+}
+
 /**
  * Return [accessToken], [accessExpiresAt], and [refreshToken] for Heroku
  * OAuth2 code-token exchange
diff --git a/backend/src/integrations/refresh.ts b/backend/src/integrations/refresh.ts
index ea232f1e5..4fdbcdbbb 100644
--- a/backend/src/integrations/refresh.ts
+++ b/backend/src/integrations/refresh.ts
@@ -1,13 +1,26 @@
 import axios from 'axios';
 import * as Sentry from '@sentry/node';
-import { INTEGRATION_HEROKU } from '../variables';
+import { INTEGRATION_AZURE_KEY_VAULT, INTEGRATION_HEROKU } from '../variables';
 import {
-    CLIENT_SECRET_HEROKU
+  SITE_URL,
+  CLIENT_ID_AZURE,
+  CLIENT_SECRET_AZURE,
+  CLIENT_SECRET_HEROKU
 } from '../config';
 import {
-    INTEGRATION_HEROKU_TOKEN_URL
+  INTEGRATION_AZURE_TOKEN_URL,
+  INTEGRATION_HEROKU_TOKEN_URL
 } from '../variables';
 
+interface RefreshTokenAzureResponse {
+  token_type: string;
+  scope: string;
+  expires_in: number;
+  ext_expires_in: 4871;
+  access_token: string;
+  refresh_token: string;
+}
+
 /**
  * Return new access token by exchanging refresh token [refreshToken] for integration
  * named [integration]
@@ -25,6 +38,11 @@ const exchangeRefresh = async ({
   let accessToken;
   try {
     switch (integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        accessToken = await exchangeRefreshAzure({
+          refreshToken
+        });
+        break;
       case INTEGRATION_HEROKU:
         accessToken = await exchangeRefreshHeroku({
           refreshToken
@@ -40,6 +58,38 @@ const exchangeRefresh = async ({
   return accessToken;
 };
 
+/**
+ * Return new access token by exchanging refresh token [refreshToken] for the
+ * Azure integration
+ * @param {Object} obj
+ * @param {String} obj.refreshToken - refresh token to use to get new access token for Azure
+ * @returns
+ */
+const exchangeRefreshAzure = async ({
+  refreshToken
+}: {
+  refreshToken: string;
+}) => {
+  try {
+    const res: RefreshTokenAzureResponse = (await axios.post(
+      INTEGRATION_AZURE_TOKEN_URL,
+       new URLSearchParams({
+        client_id: CLIENT_ID_AZURE,
+        scope: 'openid offline_access',
+        refresh_token: refreshToken,
+        grant_type: 'refresh_token',
+        client_secret: CLIENT_SECRET_AZURE
+      } as any)
+    )).data;
+    
+    return res.access_token;
+  } catch (err) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error('Failed to get refresh OAuth2 access token for Azure'); 
+  }
+}
+
 /**
  * Return new access token by exchanging refresh token [refreshToken] for the
  * Heroku integration
@@ -52,23 +102,23 @@ const exchangeRefreshHeroku = async ({
 }: {
   refreshToken: string;
 }) => {
-    let accessToken;
-	//TODO: Refactor code to take advantage of using RequestError. It's possible to create new types of errors for more detailed errors
-    try {
-        const res = await axios.post(
-            INTEGRATION_HEROKU_TOKEN_URL,
-            new URLSearchParams({
-                grant_type: 'refresh_token',
-                refresh_token: refreshToken,
-                client_secret: CLIENT_SECRET_HEROKU
-            } as any)
-        );
+  
+  let accessToken;
+  try {
+    const res = await axios.post(
+        INTEGRATION_HEROKU_TOKEN_URL,
+        new URLSearchParams({
+            grant_type: 'refresh_token',
+            refresh_token: refreshToken,
+            client_secret: CLIENT_SECRET_HEROKU
+        } as any)
+    );
 
     accessToken = res.data.access_token;
   } catch (err) {
     Sentry.setUser(null);
     Sentry.captureException(err);
-    throw new Error('Failed to get new OAuth2 access token for Heroku');
+    throw new Error('Failed to refresh OAuth2 access token for Heroku');
   }
 
   return accessToken;
diff --git a/backend/src/integrations/sync.ts b/backend/src/integrations/sync.ts
index 9954943b8..4604d744a 100644
--- a/backend/src/integrations/sync.ts
+++ b/backend/src/integrations/sync.ts
@@ -6,6 +6,7 @@ import sodium from 'libsodium-wrappers';
 // const sodium = require('libsodium-wrappers');
 import { IIntegration, IIntegrationAuth } from '../models';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
@@ -18,7 +19,6 @@ import {
   INTEGRATION_RENDER_API_URL,
   INTEGRATION_FLYIO_API_URL
 } from '../variables';
-import { access, appendFile } from 'fs';
 
 /**
  * Sync/push [secrets] to [app] in integration named [integration]
@@ -41,6 +41,13 @@ const syncSecrets = async ({
 }) => {
   try {
     switch (integration.integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        await syncSecretsAzureKeyVault({
+          integration,
+          secrets,
+          accessToken
+        });
+        break;
       case INTEGRATION_HEROKU:
         await syncSecretsHeroku({
           integration,
@@ -93,6 +100,151 @@ const syncSecrets = async ({
   }
 };
 
+/**
+ * Sync/push [secrets] to Azure Key Vault with vault URI [integration.app]
+ * @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 Azure Key Vault integration
+ */
+const syncSecretsAzureKeyVault = async ({
+  integration,
+  secrets,
+  accessToken
+}: {
+  integration: IIntegration;
+  secrets: any;
+  accessToken: string;
+}) => {
+  try {
+
+    interface GetAzureKeyVaultSecret {
+      id: string; // secret URI
+      attributes: {
+        enabled: true,
+        created: number;
+        updated: number;
+        recoveryLevel: string;
+        recoverableDays: number;
+      }
+    }
+    
+    interface AzureKeyVaultSecret extends GetAzureKeyVaultSecret {
+      key: string;
+    }
+    
+    /**
+     * Return all secrets from Azure Key Vault by paginating through URL [url]
+     * @param {String} url - pagination URL to get next set of secrets from Azure Key Vault
+     * @returns 
+     */
+    const paginateAzureKeyVaultSecrets = async (url: string) => {
+      let result: GetAzureKeyVaultSecret[] = [];
+      
+      while (url) {
+        const res = await axios.get(url, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`
+          }
+        });
+        
+        result = result.concat(res.data.value);
+        url = res.data.nextLink;
+      }
+      
+      return result;
+    }
+    
+    const getAzureKeyVaultSecrets = await paginateAzureKeyVaultSecrets(`${integration.app}/secrets?api-version=7.3`);
+    
+    let lastSlashIndex: number;
+    const res = (await Promise.all(getAzureKeyVaultSecrets.map(async (getAzureKeyVaultSecret) => {
+      if (!lastSlashIndex) {
+        lastSlashIndex = getAzureKeyVaultSecret.id.lastIndexOf('/');
+      }
+      
+      const azureKeyVaultSecret = await axios.get(`${getAzureKeyVaultSecret.id}?api-version=7.3`, {
+        headers: {
+          'Authorization': `Bearer ${accessToken}`
+        }
+      });
+
+      return ({
+        ...azureKeyVaultSecret.data,
+        key: getAzureKeyVaultSecret.id.substring(lastSlashIndex + 1),
+      });
+    })))
+    .reduce((obj: any, secret: any) => ({
+        ...obj,
+        [secret.key]: secret
+    }), {});
+    
+    const setSecrets: {
+      key: string;
+      value: string;
+    }[] = [];
+
+    Object.keys(secrets).forEach((key) => {
+      const hyphenatedKey = key.replace(/_/g, '-');
+      if (!(hyphenatedKey in res)) {
+        // case: secret has been created
+        setSecrets.push({
+          key: hyphenatedKey,
+          value: secrets[key]
+        });
+      } else {
+        if (secrets[key] !== res[hyphenatedKey].value) {
+          // case: secret has been updated
+          setSecrets.push({
+            key: hyphenatedKey,
+            value: secrets[key]
+          });
+        }
+      }
+    });
+    
+    const deleteSecrets: AzureKeyVaultSecret[] = [];
+    
+    Object.keys(res).forEach((key) => {
+      const underscoredKey = key.replace(/-/g, '_');
+      if (!(underscoredKey in secrets)) {
+        deleteSecrets.push(res[key]);
+      }
+    });
+    
+    // Sync/push set secrets
+    if (setSecrets.length > 0) {
+      setSecrets.forEach(async ({ key, value }) => {
+        await axios.put(
+          `${integration.app}/secrets/${key}?api-version=7.3`,
+          {
+            value
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`
+            }
+          }
+        );
+      });
+    }
+    
+    if (deleteSecrets.length > 0) {
+      deleteSecrets.forEach(async (secret) => {
+        await axios.delete(`${integration.app}/secrets/${secret.key}?api-version=7.3`, {
+          headers: {
+            'Authorization': `Bearer ${accessToken}`
+          }
+        });
+      });
+    }
+  } catch (err) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error('Failed to sync secrets to Azure Key Vault');
+  }
+};
+
 /**
  * Sync/push [secrets] to Heroku app named [integration.app]
  * @param {Object} obj
diff --git a/backend/src/models/integration.ts b/backend/src/models/integration.ts
index 01e1d7ee3..9c1214fb5 100644
--- a/backend/src/models/integration.ts
+++ b/backend/src/models/integration.ts
@@ -1,5 +1,6 @@
 import { Schema, model, Types } from 'mongoose';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
@@ -17,7 +18,7 @@ export interface IIntegration {
   owner: string;
   targetEnvironment: string;
   appId: string;
-  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio';
+  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio' | 'azure-key-vault';
   integrationAuth: Types.ObjectId;
 }
 
@@ -59,6 +60,7 @@ const integrationSchema = new Schema<IIntegration>(
     integration: {
       type: String,
       enum: [
+        INTEGRATION_AZURE_KEY_VAULT,
         INTEGRATION_HEROKU,
         INTEGRATION_VERCEL,
         INTEGRATION_NETLIFY,
diff --git a/backend/src/models/integrationAuth.ts b/backend/src/models/integrationAuth.ts
index bff56f09a..0eaa8c9e1 100644
--- a/backend/src/models/integrationAuth.ts
+++ b/backend/src/models/integrationAuth.ts
@@ -1,5 +1,6 @@
 import { Schema, model, Types } from 'mongoose';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
@@ -9,7 +10,7 @@ import {
 export interface IIntegrationAuth {
   _id: Types.ObjectId;
   workspace: Types.ObjectId;
-  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio';
+  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio' | 'azure-key-vault';
   teamId: string;
   accountId: string;
   refreshCiphertext?: string;
@@ -31,6 +32,7 @@ const integrationAuthSchema = new Schema<IIntegrationAuth>(
     integration: {
       type: String,
       enum: [
+        INTEGRATION_AZURE_KEY_VAULT,
         INTEGRATION_HEROKU,
         INTEGRATION_VERCEL,
         INTEGRATION_NETLIFY,
diff --git a/backend/src/services/IntegrationService.ts b/backend/src/services/IntegrationService.ts
index 4ee991cdd..cb452f8c8 100644
--- a/backend/src/services/IntegrationService.ts
+++ b/backend/src/services/IntegrationService.ts
@@ -1,7 +1,3 @@
-import * as Sentry from '@sentry/node';
-import {
-    Integration
-} from '../models';
 import { 
     handleOAuthExchangeHelper,
     syncIntegrationsHelper,
@@ -10,7 +6,6 @@ import {
     setIntegrationAuthRefreshHelper,
     setIntegrationAuthAccessHelper,
 } from '../helpers/integration';
-import { exchangeCode } from '../integrations';
 
 // should sync stuff be here too? Probably.
 // TODO: move bot functions to IntegrationService.
@@ -26,11 +21,15 @@ class IntegrationService {
      * - Store integration access and refresh tokens returned from the OAuth2 code-token exchange
      * - Add placeholder inactive integration
      * - Create bot sequence for integration
-     * @param {Object} obj
-     * @param {String} obj.workspaceId - id of workspace
-     * @param {String} obj.environment - workspace environment
-     * @param {String} obj.integration - name of integration 
-     * @param {String} obj.code - code
+     * @param {Object} obj1
+     * @param {String} obj1.workspaceId - id of workspace
+     * @param {String} obj1.environment - workspace environment
+     * @param {String} obj1.integration - name of integration 
+     * @param {String} obj1.code - code
+     * @returns {Object} obj2
+     * @returns {IntegrationAuth} obj2.integrationAuth - integration authorization after OAuth2 code-token exchange
+     * @returns {Integration} obj2.integration - newly-initialized integration OAuth2 code-token exchange
+     * @retrun
      */
     static async handleOAuthExchange({ 
         workspaceId,
@@ -43,7 +42,7 @@ class IntegrationService {
         code: string;
         environment: string;
     }) {
-        await handleOAuthExchangeHelper({
+        return await handleOAuthExchangeHelper({
             workspaceId,
             integration,
             code,
diff --git a/backend/src/variables/index.ts b/backend/src/variables/index.ts
index fafab6939..cf061520c 100644
--- a/backend/src/variables/index.ts
+++ b/backend/src/variables/index.ts
@@ -6,6 +6,7 @@ import {
   ENV_SET
 } from './environment';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
@@ -14,6 +15,7 @@ import {
   INTEGRATION_FLYIO,
   INTEGRATION_SET,
   INTEGRATION_OAUTH2,
+  INTEGRATION_AZURE_TOKEN_URL,
   INTEGRATION_HEROKU_TOKEN_URL,
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
@@ -58,6 +60,7 @@ export {
   ENV_STAGING,
   ENV_PROD,
   ENV_SET,
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
@@ -66,6 +69,7 @@ export {
   INTEGRATION_FLYIO,
   INTEGRATION_SET,
   INTEGRATION_OAUTH2,
+  INTEGRATION_AZURE_TOKEN_URL,
   INTEGRATION_HEROKU_TOKEN_URL,
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
diff --git a/backend/src/variables/integration.ts b/backend/src/variables/integration.ts
index 7cecb54c2..0cac80984 100644
--- a/backend/src/variables/integration.ts
+++ b/backend/src/variables/integration.ts
@@ -1,3 +1,7 @@
+import {
+    CLIENT_ID_AZURE,
+    TENANT_ID_AZURE
+} from '../config';
 import {
     CLIENT_ID_HEROKU,
     CLIENT_ID_NETLIFY,
@@ -6,6 +10,7 @@ import {
 } from '../config';
 
 // integrations
+const INTEGRATION_AZURE_KEY_VAULT = 'azure-key-vault';
 const INTEGRATION_HEROKU = 'heroku';
 const INTEGRATION_VERCEL = 'vercel';
 const INTEGRATION_NETLIFY = 'netlify';
@@ -13,6 +18,7 @@ const INTEGRATION_GITHUB = 'github';
 const INTEGRATION_RENDER = 'render';
 const INTEGRATION_FLYIO = 'flyio';
 const INTEGRATION_SET = new Set([
+    INTEGRATION_AZURE_KEY_VAULT,
     INTEGRATION_HEROKU,
     INTEGRATION_VERCEL,
     INTEGRATION_NETLIFY,
@@ -25,6 +31,7 @@ const INTEGRATION_SET = new Set([
 const INTEGRATION_OAUTH2 = 'oauth2';
 
 // integration oauth endpoints
+const INTEGRATION_AZURE_TOKEN_URL = `https://login.microsoftonline.com/${TENANT_ID_AZURE}/oauth2/v2.0/token`;
 const INTEGRATION_HEROKU_TOKEN_URL = 'https://id.heroku.com/oauth/token';
 const INTEGRATION_VERCEL_TOKEN_URL =
     'https://api.vercel.com/v2/oauth/access_token';
@@ -40,6 +47,16 @@ const INTEGRATION_RENDER_API_URL = 'https://api.render.com';
 const INTEGRATION_FLYIO_API_URL = 'https://api.fly.io/graphql';
 
 const INTEGRATION_OPTIONS = [
+    {
+        name: 'Azure Key Vault',
+        slug: 'azure-key-vault',
+        image: 'Microsoft Azure.png',
+        isAvailable: true,
+        type: 'oauth',
+        clientId: CLIENT_ID_AZURE,
+        tenantId: TENANT_ID_AZURE,
+        docsLink: ''
+    },
     {
         name: 'Heroku',
         slug: 'heroku',
@@ -143,6 +160,7 @@ const INTEGRATION_OPTIONS = [
 ]
 
 export {
+    INTEGRATION_AZURE_KEY_VAULT,
     INTEGRATION_HEROKU,
     INTEGRATION_VERCEL,
     INTEGRATION_NETLIFY,
@@ -151,6 +169,7 @@ export {
     INTEGRATION_FLYIO,
     INTEGRATION_SET,
     INTEGRATION_OAUTH2,
+    INTEGRATION_AZURE_TOKEN_URL,
     INTEGRATION_HEROKU_TOKEN_URL,
     INTEGRATION_VERCEL_TOKEN_URL,
     INTEGRATION_NETLIFY_TOKEN_URL,
diff --git a/frontend/public/data/frequentConstants.ts b/frontend/public/data/frequentConstants.ts
index 2ff525e54..6ac74cdbd 100644
--- a/frontend/public/data/frequentConstants.ts
+++ b/frontend/public/data/frequentConstants.ts
@@ -2,6 +2,16 @@ interface Mapping {
   [key: string]: string;
 }
 
+const integrationSlugNameMapping: Mapping = {
+  'azure-key-vault': 'Azure Key Vault',
+  'heroku': 'Heroku',
+  'vercel': 'Vercel',
+  'netlify': 'Netlify',
+  'github': 'GitHub',
+  'render': 'Render',
+  'flyio': 'Fly.io'
+}
+
 const envMapping: Mapping = {
   Development: "dev",
   Staging: "staging",
@@ -49,6 +59,7 @@ const plans = plansProd || plansDev;
 export {
   contextNetlifyMapping,
   envMapping,
+  integrationSlugNameMapping,
   plans,
   reverseContextNetlifyMapping,
   reverseEnvMapping}
diff --git a/frontend/src/components/basic/Layout.tsx b/frontend/src/components/basic/Layout.tsx
index ba4cf73b2..1f1ee246d 100644
--- a/frontend/src/components/basic/Layout.tsx
+++ b/frontend/src/components/basic/Layout.tsx
@@ -199,13 +199,13 @@ const Layout = ({ children }: LayoutProps) => {
           .split('/')
           [router.asPath.split('/').length - 1].split('?')[0];
 
-        if (!['heroku', 'vercel', 'github', 'netlify'].includes(intendedWorkspaceId)) {
+        if (!['heroku', 'vercel', 'github', 'netlify', 'azure-key-vault'].includes(intendedWorkspaceId)) {
           localStorage.setItem('projectData.id', intendedWorkspaceId);
         }
 
         // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
         if (
-          !['heroku', 'vercel', 'github', 'netlify'].includes(intendedWorkspaceId) &&
+          !['heroku', 'vercel', 'github', 'netlify', 'azure-key-vault'].includes(intendedWorkspaceId) &&
           !userWorkspaces
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)
diff --git a/frontend/src/components/integrations/Integration.tsx b/frontend/src/components/integrations/Integration.tsx
index abec74f9d..6bbecad43 100644
--- a/frontend/src/components/integrations/Integration.tsx
+++ b/frontend/src/components/integrations/Integration.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { faArrowRight, faRotate, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // TODO: This needs to be moved from public folder
-import { contextNetlifyMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
+import { contextNetlifyMapping, integrationSlugNameMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
 
 import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
@@ -52,6 +52,7 @@ const IntegrationTile = ({
   environments = [],
   handleDeleteIntegration
 }: Props) => {
+
   // set initial environment. This find will only execute when component is mounting
   const [integrationEnvironment, setIntegrationEnvironment] = useState<Props['environments'][0]>(
     environments.find(({ slug }) => slug === integration.environment) || {
@@ -72,7 +73,14 @@ const IntegrationTile = ({
       });
       
       setApps(tempApps);
-      setIntegrationApp(integration.app ? integration.app : tempApps[0].name);
+      
+      if (integration?.app) {
+        setIntegrationApp(integration.app);
+      } else if (tempApps.length > 0) {
+          setIntegrationApp(tempApps[0].name)
+        } else {
+          setIntegrationApp('');
+        }
 
       switch (integration.integration) {
         case 'vercel':
@@ -174,7 +182,7 @@ const IntegrationTile = ({
     return <div />;
   };
 
-  if (!integrationApp || apps.length === 0) return <div />;
+  if (!integrationApp) return <div />;
 
   return (
     <div className="max-w-5xl p-6 mx-6 mb-8 rounded-md bg-white/5 flex justify-between">
@@ -201,7 +209,8 @@ const IntegrationTile = ({
         <div className="mr-2">
           <p className="text-gray-400 text-xs font-semibold mb-2">INTEGRATION</p>
           <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300">
-            {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)}
+            {/* {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)} */}
+            {integrationSlugNameMapping[integration.integration]}
           </div>
         </div>
         <div className="mr-2">
diff --git a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
index ea82fbbe7..e32ea2598 100644
--- a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
+++ b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
@@ -35,7 +35,7 @@ export const WorkspaceProvider = ({ children }: Props): JSX.Element => {
     // ws empty means user has no access to the ws
     // push to the first workspace
     if (!isLoading && !value?.currentWorkspace?._id) {
-      router.push(`/dashboard/${value.workspaces?.[0]?._id}`);
+      // router.push(`/dashboard/${value.workspaces?.[0]?._id}`);
     }
   }, [value?.currentWorkspace?._id, isLoading, value.workspaces?.[0]?._id, router.pathname]);
 
diff --git a/frontend/src/pages/api/integrations/authorizeIntegration.ts b/frontend/src/pages/api/integrations/authorizeIntegration.ts
index 94f1d54f5..666499be6 100644
--- a/frontend/src/pages/api/integrations/authorizeIntegration.ts
+++ b/frontend/src/pages/api/integrations/authorizeIntegration.ts
@@ -26,7 +26,7 @@ const AuthorizeIntegration = ({ workspaceId, code, integration }: Props) =>
     })
   }).then(async (res) => {
     if (res && res.status === 200) {
-      return res;
+      return (res.json());
     }
     console.log('Failed to authorize the integration');
     return undefined;
diff --git a/frontend/src/pages/azure-key-vault.tsx b/frontend/src/pages/azure-key-vault.tsx
new file mode 100644
index 000000000..57f861387
--- /dev/null
+++ b/frontend/src/pages/azure-key-vault.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+
+import { 
+  Button, 
+  Card, 
+  CardTitle, 
+  FormControl, 
+  Input, 
+  Select, 
+  SelectItem 
+} from '../components/v2';
+import AuthorizeIntegration from './api/integrations/authorizeIntegration';
+import updateIntegration from './api/integrations/updateIntegration';
+import getAWorkspace from './api/workspace/getAWorkspace';
+
+interface Integration {
+  _id: string;
+  isActive: boolean;
+  app: string | null;
+  appId: string | null;
+  createdAt: string;
+  updatedAt: string;
+  environment: string;
+  integration: string;
+  targetEnvironment: string;
+  workspace: string;
+  integrationAuth: string;
+}
+
+export default function AzureKeyVault() {
+  const router = useRouter();
+
+  // query-string variables
+  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
+  const {code} = parsedUrl;
+  const {state} = parsedUrl;
+
+  const [integration, setIntegration] = useState<Integration | null>(null);
+  const [environments, setEnvironments] = useState<
+    {
+      name: string;
+      slug: string;
+    }[]
+  >([]);
+  const [environment, setEnvironment] = useState('');
+  const [vaultBaseUrl, setVaultBaseUrl] = useState('');
+  const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  
+  useEffect(() => {
+    (async () => {
+      try {
+        if (state === localStorage.getItem('latestCSRFToken')) {
+          localStorage.removeItem('latestCSRFToken');
+
+          const integrationDetails = await AuthorizeIntegration({
+            workspaceId: localStorage.getItem('projectData.id') as string,
+            code: code as string,
+            integration: 'azure-key-vault',
+          });
+          
+          setIntegration(integrationDetails.integration);
+          
+          const workspaceId = localStorage.getItem('projectData.id');
+          if (!workspaceId) return;
+
+          const workspace = await getAWorkspace(workspaceId);
+          setEnvironment(workspace.environments[0].slug);
+          setEnvironments(workspace.environments);
+
+        }
+      } catch (error) {
+        console.error('Azure Key Vault integration error: ', error);
+      }
+    })();
+  }, []);
+
+  const handleButtonClick = async () => {
+    try {
+      if (vaultBaseUrl.length === 0) {
+        setVaultBaseUrlErrorText('Vault URI cannot be blank');
+        return;
+      }
+      
+      if (
+        !vaultBaseUrl.startsWith('https://') 
+        || !vaultBaseUrl.endsWith('vault.azure.net')
+      ) {
+        setVaultBaseUrlErrorText('Vault URI must be like https://<vault_name>.vault.azure.net');
+        return;
+      }
+      
+      if (!integration) return;
+      
+      setIsLoading(true);
+      await updateIntegration({
+        integrationId: integration._id,
+        isActive: true,
+        environment,
+        app: vaultBaseUrl,
+        appId: null,
+        targetEnvironment: null,
+        owner: null
+      });
+      setIsLoading(false);
+      
+      router.push(
+        `/integrations/${localStorage.getItem('projectData.id')}`
+      );
+      
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  return (integration && environments.length > 0) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Azure Key Vault Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={environment}
+            onValueChange={(val) => setEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {environments.map((e) => (
+              <SelectItem value={e.slug} key={`azure-key-vault-environment-${e.slug}`}>
+                {e.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Vault URI"
+          errorText={vaultBaseUrlErrorText}
+          isError={vaultBaseUrlErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder='https://example.vault.azure.net'
+            value={vaultBaseUrl}
+            onChange={(e) => setVaultBaseUrl(e.target.value)}
+          />
+        </FormControl>
+          <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+          >
+            Create Integration
+          </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+AzureKeyVault.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/github.tsx b/frontend/src/pages/github.tsx
index 897027246..37c35b194 100644
--- a/frontend/src/pages/github.tsx
+++ b/frontend/src/pages/github.tsx
@@ -25,7 +25,7 @@ export default function Github() {
             integration: 'github',
           });
           router.push(
-            `/integrations/${  localStorage.getItem('projectData.id')}`
+            `/integrations/${localStorage.getItem('projectData.id')}`
           );
         }
       } catch (error) {
diff --git a/frontend/src/pages/integrations/[id].tsx b/frontend/src/pages/integrations/[id].tsx
index a4bf83a89..688d7c34f 100644
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -195,6 +195,11 @@ export default function Integrations() {
         localStorage.setItem('latestCSRFToken', state);
 
         switch (integrationOption.slug) {
+          case 'azure-key-vault':
+            window.location.assign(
+              `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/azure-key-vault&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`
+            );
+            break;
           case 'heroku':
             window.location.assign(
               `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`
@@ -275,10 +280,15 @@ export default function Integrations() {
       
       // case: integration has been authorized before
       // -> create new integration
-      const integration = await createIntegration({
-        integrationAuthId: integrationAuthX._id
-      });
-      setIntegrations([...integrations, integration]);
+      
+      if (!['azure-key-vault'].includes(integrationOption.slug)) {
+        const integration = await createIntegration({
+          integrationAuthId: integrationAuthX._id
+        });
+        setIntegrations([...integrations, integration]);
+      } else {
+        handleIntegrationOption({ integrationOption });
+      }
     } catch (err) {
       console.error(err);
     }

From 5ea5887146da207168ef89149ce9085192a2a512 Mon Sep 17 00:00:00 2001
From: Tuan Dang <dangtony98@gmail.com>
Date: Tue, 7 Feb 2023 11:48:17 +0700
Subject: [PATCH 34/52] Begin refactoring all integrations to separate
 integration pages by step

---
 backend/package-lock.json                     | 100 +++---------
 .../v1/integrationAuthController.ts           |   6 +-
 .../controllers/v1/integrationController.ts   |  24 ++-
 backend/src/helpers/integration.ts            |  26 ++--
 backend/src/routes/v1/integration.ts          |   9 +-
 backend/src/services/IntegrationService.ts    |   5 +-
 frontend/src/hooks/api/workspace/index.tsx    |   1 +
 frontend/src/hooks/api/workspace/queries.tsx  |  16 +-
 .../api/integrations/authorizeIntegration.ts  |   2 +-
 .../api/integrations/createIntegration.ts     |  12 +-
 frontend/src/pages/azure-key-vault.tsx        |  93 +++++------
 frontend/src/pages/heroku.tsx                 | 144 ++++++++++++++++--
 frontend/src/pages/integrations/[id].tsx      |   4 +-
 13 files changed, 258 insertions(+), 184 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 6703e198f..189b1eccd 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -10,13 +10,13 @@
       "license": "ISC",
       "dependencies": {
         "@godaddy/terminus": "^4.11.2",
-        "@sentry/node": "^7.21.1",
         "@octokit/rest": "^19.0.5",
-        "@sentry/tracing": "^7.21.1",
+        "@sentry/node": "^7.14.0",
+        "@sentry/tracing": "^7.19.0",
         "@types/crypto-js": "^4.1.1",
-        "axios": "^1.2.0",
         "@types/libsodium-wrappers": "^0.7.10",
         "await-to-js": "^3.0.0",
+        "axios": "^1.1.3",
         "bcrypt": "^5.1.0",
         "bigint-conversion": "^2.2.2",
         "builder-pattern": "^2.2.0",
@@ -32,9 +32,9 @@
         "js-yaml": "^4.1.0",
         "jsonwebtoken": "^9.0.0",
         "jsrp": "^0.2.4",
-        "mongoose": "^6.7.3",
         "libsodium-wrappers": "^0.7.10",
         "lodash": "^4.17.21",
+        "mongoose": "^6.7.2",
         "nodemailer": "^6.8.0",
         "posthog-node": "^2.2.2",
         "query-string": "^7.1.3",
@@ -2838,19 +2838,6 @@
         "@maxmind/geoip2-node": "^3.4.0"
       }
     },
-    "node_modules/@sentry/core": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
-      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
-      "dependencies": {
-        "@sentry/types": "7.21.1",
-        "@sentry/utils": "7.21.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -2905,27 +2892,10 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
-    "node_modules/@sentry/node": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.19.0.tgz",
-      "integrity": "sha512-yG7Tx32WqOkEHVotFLrumCcT9qlaSDTkFNZ+yLSvZXx74ifsE781DzBA9W7K7bBdYO3op+p2YdsOKzf3nPpAyQ==",
-      "dependencies": {
-        "@sentry/core": "7.19.0",
-        "@sentry/types": "7.19.0",
-        "@sentry/utils": "7.19.0",
-        "cookie": "^0.4.1",
-        "https-proxy-agent": "^5.0.0",
-        "lru_map": "^0.3.3",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/node/node_modules/@sentry/core": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.19.0.tgz",
-      "integrity": "sha512-YF9cTBcAnO4R44092BJi5Wa2/EO02xn2ziCtmNgAVTN2LD31a/YVGxGBt/FDr4Y6yeuVehaqijVVvtpSmXrGJw==",
+    "node_modules/@sentry/core": {
+      "version": "7.21.1",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
+      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
       "dependencies": {
         "@sentry/types": "7.21.1",
         "@sentry/utils": "7.21.1",
@@ -2986,26 +2956,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@sentry/types": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.21.1.tgz",
-      "integrity": "sha512-3/IKnd52Ol21amQvI+kz+WB76s8/LR5YvFJzMgIoI2S8d82smIr253zGijRXxHPEif8kMLX4Yt+36VzrLxg6+A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/utils": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.21.1.tgz",
-      "integrity": "sha512-F0W0AAi8tgtTx6ApZRI2S9HbXEA9ENX1phTZgdNNWcMFm1BNbc21XEwLqwXBNjub5nlA6CE8xnjXRgdZKx4kzQ==",
-      "dependencies": {
-        "@sentry/types": "7.21.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.51",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
@@ -14306,16 +14256,6 @@
         "@maxmind/geoip2-node": "^3.4.0"
       }
     },
-    "@sentry/core": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
-      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
-      "requires": {
-        "@sentry/types": "7.21.1",
-        "@sentry/utils": "7.21.1",
-        "tslib": "^1.9.3"
-      }
-    },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -14370,6 +14310,16 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "@sentry/core": {
+      "version": "7.21.1",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
+      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
+      "requires": {
+        "@sentry/types": "7.21.1",
+        "@sentry/utils": "7.21.1",
+        "tslib": "^1.9.3"
+      }
+    },
     "@sentry/node": {
       "version": "7.21.1",
       "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.21.1.tgz",
@@ -14409,20 +14359,6 @@
         "tslib": "^1.9.3"
       }
     },
-    "@sentry/types": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.21.1.tgz",
-      "integrity": "sha512-3/IKnd52Ol21amQvI+kz+WB76s8/LR5YvFJzMgIoI2S8d82smIr253zGijRXxHPEif8kMLX4Yt+36VzrLxg6+A=="
-    },
-    "@sentry/utils": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.21.1.tgz",
-      "integrity": "sha512-F0W0AAi8tgtTx6ApZRI2S9HbXEA9ENX1phTZgdNNWcMFm1BNbc21XEwLqwXBNjub5nlA6CE8xnjXRgdZKx4kzQ==",
-      "requires": {
-        "@sentry/types": "7.21.1",
-        "tslib": "^1.9.3"
-      }
-    },
     "@sinclair/typebox": {
       "version": "0.24.51",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
diff --git a/backend/src/controllers/v1/integrationAuthController.ts b/backend/src/controllers/v1/integrationAuthController.ts
index cedc7e345..747004f44 100644
--- a/backend/src/controllers/v1/integrationAuthController.ts
+++ b/backend/src/controllers/v1/integrationAuthController.ts
@@ -40,14 +40,16 @@ export const oAuthExchange = async (
 			throw new Error("Failed to get environments")
 		}
 	
-		const integrationDetails = await IntegrationService.handleOAuthExchange({
+		const integrationAuth = await IntegrationService.handleOAuthExchange({
 			workspaceId,
 			integration,
 			code,
 			environment: environments[0].slug,
 		});
 		
-		return res.status(200).send(integrationDetails);
+		return res.status(200).send({
+			integrationAuth
+		});
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);
diff --git a/backend/src/controllers/v1/integrationController.ts b/backend/src/controllers/v1/integrationController.ts
index 2b52f9725..0ffb8cbb8 100644
--- a/backend/src/controllers/v1/integrationController.ts
+++ b/backend/src/controllers/v1/integrationController.ts
@@ -1,4 +1,5 @@
 import { Request, Response } from 'express';
+import { Types } from 'mongoose';
 import * as Sentry from '@sentry/node';
 import { 
 	Integration, 
@@ -16,20 +17,31 @@ import { eventPushSecrets } from '../../events';
  * @returns 
  */
 export const createIntegration = async (req: Request, res: Response) => {
-	
-	// TODO: make this more versatile
-
 	let integration;
 	try {
+		const {
+			integrationAuthId,
+			app,
+			appId,
+			isActive,
+			targetEnvironment,
+			owner
+		} = req.body;
+
 		// initialize new integration after saving integration access token
         integration = await new Integration({
             workspace: req.integrationAuth.workspace._id,
-            isActive: false,
-            app: null,
             environment: req.integrationAuth.workspace?.environments[0].slug,
+            isActive,
+            app,
+			appId,
+			targetEnvironment,
             integration: req.integrationAuth.integration,
-            integrationAuth: req.integrationAuth._id
+            integrationAuth: new Types.ObjectId(integrationAuthId)
         }).save();
+		
+		// TODO: run sync function
+
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);
diff --git a/backend/src/helpers/integration.ts b/backend/src/helpers/integration.ts
index 595dbbb6f..30e370188 100644
--- a/backend/src/helpers/integration.ts
+++ b/backend/src/helpers/integration.ts
@@ -30,6 +30,7 @@ interface Update {
  * @param {String} obj.workspaceId - id of workspace
  * @param {String} obj.integration - name of integration 
  * @param {String} obj.code - code
+ * @returns {IntegrationAuth} integrationAuth - integration auth after OAuth2 code-token exchange
 */
 const handleOAuthExchangeHelper = async ({
     workspaceId,
@@ -44,7 +45,7 @@ const handleOAuthExchangeHelper = async ({
 }) => {
     let action;
     let integrationAuth;
-    let newIntegration;
+    // let newIntegration;
     try {
         const bot = await Bot.findOne({
             workspace: workspaceId,
@@ -100,25 +101,22 @@ const handleOAuthExchangeHelper = async ({
             });
         }
 
-        // initialize new integration after exchange
-        newIntegration = await new Integration({
-            workspace: workspaceId,
-            isActive: false,
-            app: null,
-            environment,
-            integration,
-            integrationAuth: integrationAuth._id
-        }).save();
+        // // initialize new integration after exchange
+        // newIntegration = await new Integration({
+        //     workspace: workspaceId,
+        //     isActive: false,
+        //     app: null,
+        //     environment,
+        //     integration,
+        //     integrationAuth: integrationAuth._id
+        // }).save();
     } catch (err) {
         Sentry.setUser(null);
         Sentry.captureException(err);
         throw new Error('Failed to handle OAuth2 code-token exchange')
     }
     
-    return ({
-        integrationAuth,
-        integration: newIntegration
-    });
+    return integrationAuth;
 }
 /**
  * Sync/push environment variables in workspace with id [workspaceId] to
diff --git a/backend/src/routes/v1/integration.ts b/backend/src/routes/v1/integration.ts
index d587bd2e5..3db9c412e 100644
--- a/backend/src/routes/v1/integration.ts
+++ b/backend/src/routes/v1/integration.ts
@@ -10,7 +10,7 @@ import { ADMIN, MEMBER } from '../../variables';
 import { body, param } from 'express-validator';
 import { integrationController } from '../../controllers/v1';
 
-router.post( // new: add new integration
+router.post( // new: add new integration for integration auth
 	'/',
 	requireAuth({
         acceptedAuthModes: ['jwt', 'apiKey']
@@ -19,7 +19,12 @@ router.post( // new: add new integration
 		acceptedRoles: [ADMIN, MEMBER],
 		location: 'body'
 	}),
-	body('integrationAuthId').exists().trim(),
+	body('integrationAuthId').exists().isString().trim(),
+	body('app').isString().trim(),
+	body('isActive').exists().isBoolean(),
+	body('appId').trim(),
+	body('targetEnvironment').trim(),
+	body('owner').trim(),
 	validateRequest,
 	integrationController.createIntegration
 );
diff --git a/backend/src/services/IntegrationService.ts b/backend/src/services/IntegrationService.ts
index cb452f8c8..5b0195427 100644
--- a/backend/src/services/IntegrationService.ts
+++ b/backend/src/services/IntegrationService.ts
@@ -26,10 +26,7 @@ class IntegrationService {
      * @param {String} obj1.environment - workspace environment
      * @param {String} obj1.integration - name of integration 
      * @param {String} obj1.code - code
-     * @returns {Object} obj2
-     * @returns {IntegrationAuth} obj2.integrationAuth - integration authorization after OAuth2 code-token exchange
-     * @returns {Integration} obj2.integration - newly-initialized integration OAuth2 code-token exchange
-     * @retrun
+     * @returns {IntegrationAuth} integrationAuth - integration authorization after OAuth2 code-token exchange
      */
     static async handleOAuthExchange({ 
         workspaceId,
diff --git a/frontend/src/hooks/api/workspace/index.tsx b/frontend/src/hooks/api/workspace/index.tsx
index 5de95ab05..67d8b9dea 100644
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -3,6 +3,7 @@ export {
   useDeleteWorkspace,
   useDeleteWsEnvironment,
   useGetUserWorkspaces,
+  useGetWorkspaceById,
   useRenameWorkspace,
   useUpdateWsEnvironment
 } from './queries';
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index b0566a43d..efdf4a6a3 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -11,16 +11,30 @@ import {
   Workspace
 } from './types';
 
+
 const workspaceKeys = {
+  getWorkspaceById: (workspaceId: string) => [{ workspaceId }, 'workspace'] as const,
   getAllUserWorkspace: ['workspaces'] as const
 };
 
+const fetchWorkspaceById = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ workspace: Workspace }>(`/api/v1/workspace/${workspaceId}`);
+  return data.workspace; 
+}
+
 const fetchUserWorkspaces = async () => {
   const { data } = await apiRequest.get<{ workspaces: Workspace[] }>('/api/v1/workspace');
-
   return data.workspaces;
 };
 
+export const useGetWorkspaceById = (workspaceId: string) => {
+  return useQuery({
+    queryKey: workspaceKeys.getWorkspaceById(workspaceId),
+    queryFn: () => fetchWorkspaceById(workspaceId),
+    enabled: true
+  });
+};
+
 export const useGetUserWorkspaces = () =>
   useQuery(workspaceKeys.getAllUserWorkspace, fetchUserWorkspaces);
 
diff --git a/frontend/src/pages/api/integrations/authorizeIntegration.ts b/frontend/src/pages/api/integrations/authorizeIntegration.ts
index 666499be6..9c70796b7 100644
--- a/frontend/src/pages/api/integrations/authorizeIntegration.ts
+++ b/frontend/src/pages/api/integrations/authorizeIntegration.ts
@@ -26,7 +26,7 @@ const AuthorizeIntegration = ({ workspaceId, code, integration }: Props) =>
     })
   }).then(async (res) => {
     if (res && res.status === 200) {
-      return (res.json());
+      return (await res.json()).integrationAuth;
     }
     console.log('Failed to authorize the integration');
     return undefined;
diff --git a/frontend/src/pages/api/integrations/createIntegration.ts b/frontend/src/pages/api/integrations/createIntegration.ts
index 6b37f1281..c2da2378a 100644
--- a/frontend/src/pages/api/integrations/createIntegration.ts
+++ b/frontend/src/pages/api/integrations/createIntegration.ts
@@ -1,7 +1,9 @@
 import SecurityClient from '@app/components/utilities/SecurityClient';
 
 interface Props {
-    integrationAuthId: string;
+  integrationAuthId: string;
+  isActive: boolean;
+  app: string | null;
 }
 /**
  * This route creates a new integration based on the integration authorization with id [integrationAuthId]
@@ -10,7 +12,9 @@ interface Props {
  * @returns
  */
 const createIntegration = ({ 
-    integrationAuthId
+    integrationAuthId,
+    isActive,
+    app
 }: Props) =>
   SecurityClient.fetchCall('/api/v1/integration', {
     method: 'POST',
@@ -18,7 +22,9 @@ const createIntegration = ({
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({
-        integrationAuthId
+        integrationAuthId,
+        isActive,
+        app
     })
   }).then(async (res) => {
     if (res && res.status === 200) {
diff --git a/frontend/src/pages/azure-key-vault.tsx b/frontend/src/pages/azure-key-vault.tsx
index 57f861387..71a3c6db7 100644
--- a/frontend/src/pages/azure-key-vault.tsx
+++ b/frontend/src/pages/azure-key-vault.tsx
@@ -13,71 +13,54 @@ import {
   Select, 
   SelectItem 
 } from '../components/v2';
+import { useGetWorkspaceById } from '../hooks/api/workspace';
 import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-import updateIntegration from './api/integrations/updateIntegration';
-import getAWorkspace from './api/workspace/getAWorkspace';
+import createIntegration from './api/integrations/createIntegration';
 
-interface Integration {
+interface IntegrationAuth {
   _id: string;
-  isActive: boolean;
-  app: string | null;
-  appId: string | null;
+  integration: string;
+  workspace: string;
   createdAt: string;
   updatedAt: string;
-  environment: string;
-  integration: string;
-  targetEnvironment: string;
-  workspace: string;
-  integrationAuth: string;
 }
 
 export default function AzureKeyVault() {
   const router = useRouter();
+  const workspaceResult = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
 
-  // query-string variables
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const {code} = parsedUrl;
-  const {state} = parsedUrl;
+  const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+
+  const [integrationAuth, setIntegrationAuth] = useState<IntegrationAuth | null>(null);
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
 
-  const [integration, setIntegration] = useState<Integration | null>(null);
-  const [environments, setEnvironments] = useState<
-    {
-      name: string;
-      slug: string;
-    }[]
-  >([]);
-  const [environment, setEnvironment] = useState('');
   const [vaultBaseUrl, setVaultBaseUrl] = useState('');
   const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
+
   const [isLoading, setIsLoading] = useState(false);
   
   useEffect(() => {
     (async () => {
       try {
-        if (state === localStorage.getItem('latestCSRFToken')) {
-          localStorage.removeItem('latestCSRFToken');
+        if (state !== localStorage.getItem('latestCSRFToken')) return;
+        localStorage.removeItem('latestCSRFToken');
 
-          const integrationDetails = await AuthorizeIntegration({
-            workspaceId: localStorage.getItem('projectData.id') as string,
-            code: code as string,
-            integration: 'azure-key-vault',
-          });
-          
-          setIntegration(integrationDetails.integration);
-          
-          const workspaceId = localStorage.getItem('projectData.id');
-          if (!workspaceId) return;
-
-          const workspace = await getAWorkspace(workspaceId);
-          setEnvironment(workspace.environments[0].slug);
-          setEnvironments(workspace.environments);
-
-        }
+        setIntegrationAuth(await AuthorizeIntegration({
+          workspaceId: localStorage.getItem('projectData.id') as string,
+          code: code as string,
+          integration: 'azure-key-vault',
+        }));
       } catch (error) {
         console.error('Azure Key Vault integration error: ', error);
       }
     })();
   }, []);
+  
+  useEffect(() => {
+    if (workspaceResult && workspaceResult.data) {
+      setSelectedSourceEnvironment(workspaceResult.data.environments[0].slug);
+    }
+  }, [workspaceResult]);
 
   const handleButtonClick = async () => {
     try {
@@ -94,17 +77,13 @@ export default function AzureKeyVault() {
         return;
       }
       
-      if (!integration) return;
+      if (!integrationAuth?._id) return;
       
       setIsLoading(true);
-      await updateIntegration({
-        integrationId: integration._id,
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
         isActive: true,
-        environment,
-        app: vaultBaseUrl,
-        appId: null,
-        targetEnvironment: null,
-        owner: null
+        app: vaultBaseUrl
       });
       setIsLoading(false);
       
@@ -117,7 +96,11 @@ export default function AzureKeyVault() {
     }
   }
 
-  return (integration && environments.length > 0) ? (
+  if (!workspaceResult) return <div />
+  
+  const { data: w } = workspaceResult;
+
+  return (integrationAuth && w && selectedSourceEnvironment) ? (
     <div className="h-full w-full flex justify-center items-center">
       <Card className="max-w-md p-8 rounded-md">
         <CardTitle className='text-center'>Azure Key Vault Integration</CardTitle>
@@ -126,13 +109,13 @@ export default function AzureKeyVault() {
           className='mt-4'
         >
           <Select
-            value={environment}
-            onValueChange={(val) => setEnvironment(val)}
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
             className='w-full border border-mineshaft-500'
           >
-            {environments.map((e) => (
-              <SelectItem value={e.slug} key={`azure-key-vault-environment-${e.slug}`}>
-                {e.name}
+            {w?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
               </SelectItem>
             ))}
           </Select>
diff --git a/frontend/src/pages/heroku.tsx b/frontend/src/pages/heroku.tsx
index ff4f2263e..66facdc06 100644
--- a/frontend/src/pages/heroku.tsx
+++ b/frontend/src/pages/heroku.tsx
@@ -1,41 +1,159 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import queryString from 'query-string';
 
+import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Select,
+  SelectItem
+} from '../components/v2';
 import AuthorizeIntegration from './api/integrations/authorizeIntegration';
+import getIntegrationApps from './api/integrations/GetIntegrationApps';
+import getAWorkspace from './api/workspace/getAWorkspace';
+
+interface Integration {
+  _id: string;
+  isActive: boolean;
+  app: string | null;
+  appId: string | null;
+  createdAt: string;
+  updatedAt: string;
+  environment: string;
+  integration: string;
+  targetEnvironment: string;
+  workspace: string;
+  integrationAuth: string;
+}
+
+interface IntegrationApp {
+  name: string;
+  appId?: string;
+  owner?: string;
+}
 
 export default function Heroku() {
   const router = useRouter();
   const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const {code} = parsedUrl;
-  const {state} = parsedUrl;
+  const { code } = parsedUrl;
+  const { state } = parsedUrl;
+
+  const [integration, setIntegration] = useState<Integration | null>(null);
+  const [environments, setEnvironments] = useState<
+    {
+      name: string;
+      slug: string;
+    }[]
+  >([]);
+  const [environment, setEnvironment] = useState('');
+  const [app, setApp] = useState('');
+  const [apps, setApps] = useState<IntegrationApp[]>([]);
 
-  /**
-   * Here we forward to the default workspace if a user opens this url
-   */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     (async () => {
       try {
         if (state === localStorage.getItem('latestCSRFToken')) {
           localStorage.removeItem('latestCSRFToken');
-          await AuthorizeIntegration({
+          const integrationDetails = await AuthorizeIntegration({
             workspaceId: localStorage.getItem('projectData.id') as string,
             code: code as string,
             integration: 'heroku',
           });
-          router.push(
-            `/integrations/${  localStorage.getItem('projectData.id')}`
-          );
+
+          setIntegration(integrationDetails.integration);
+
+          const workspaceId = localStorage.getItem('projectData.id');
+          if (!workspaceId) return;
+
+          const workspace = await getAWorkspace(workspaceId);
+          setEnvironment(workspace.environments[0].slug);
+          setEnvironments(workspace.environments);
+
+          const tempApps: [IntegrationApp] = await getIntegrationApps({
+            integrationAuthId: integrationDetails.integration.integrationAuth
+          });
+          
+          console.log('tempApps: ', tempApps);
+          setApp(tempApps[0].name);
+          setApps(tempApps);
+          
+          // router.push(
+          //   `/integrations/${  localStorage.getItem('projectData.id')}`
+          // );
         }
       } catch (error) {
         console.error('Heroku integration error: ', error);
       }
     })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  
+  const handleButtonClick = async () => {
+    try {
+      console.log('handleButtonClick');
+      console.log('project environment: ', environment);
+      console.log('app', app);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
+  console.log('integration: ', integration);
+  console.log('environments: ', environments);
+  console.log('apps: ', apps);
 
-  return <div />;
+  return (integration && environments.length > 0 && apps.length > 0) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Heroku Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={environment}
+            onValueChange={(val) => setEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {environments.map((e) => (
+              <SelectItem value={e.slug} key={`heroku-environment-${e.slug}`}>
+                {e.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Heroku App"
+          className='mt-4'
+        >
+          <Select
+            value={app}
+            onValueChange={(val) => setApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {apps.map((a) => (
+              <SelectItem value={a.name} key={`heroku-environment-${a.name}`}>
+                {a.name}
+              </SelectItem> 
+            ))}
+          </Select>
+        </FormControl>
+          <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+          >
+            Create Integration
+          </Button>
+      </Card>
+    </div>
+  ) : <div>Hello</div>
 }
 
 Heroku.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/[id].tsx b/frontend/src/pages/integrations/[id].tsx
index 688d7c34f..f065494cd 100644
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -235,7 +235,9 @@ export default function Integrations() {
         setIntegrationAuths([...integrationAuths, integrationAuth])
 
         const integration = await createIntegration({
-          integrationAuthId: integrationAuth._id
+          integrationAuthId: integrationAuth._id,
+          isActive: false,
+          app: null
         });
         
         setIntegrations([...integrations, integration]); 

From 679b1d9c23c9d9c6622964f9e23c9630bb5f4452 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 7 Feb 2023 23:10:31 +0700
Subject: [PATCH 35/52] Move existing integration authorization and creation
 into separate steps

---
 .../v1/integrationAuthController.ts           |  40 ++-
 .../controllers/v1/integrationController.ts   |  15 +-
 backend/src/helpers/integration.ts            |  12 -
 backend/src/integrations/exchange.ts          |   8 +-
 backend/src/integrations/sync.ts              |   2 -
 backend/src/routes/v1/integration.ts          |   1 +
 backend/src/routes/v1/integrationAuth.ts      |  13 +
 frontend/package-lock.json                    | 310 +++++++++++++++++-
 frontend/package.json                         |   1 +
 frontend/public/data/frequentConstants.ts     |   2 +-
 frontend/src/components/basic/Layout.tsx      |   6 +-
 .../dialog/IntegrationAccessTokenDialog.tsx   | 120 -------
 .../src/hooks/api/integrationAuth/index.tsx   |   3 +
 .../src/hooks/api/integrationAuth/queries.tsx |  38 +++
 .../src/hooks/api/integrationAuth/types.ts    |  13 +
 .../api/integrations/createIntegration.ts     |  16 +-
 frontend/src/pages/azure-key-vault.tsx        | 149 ---------
 frontend/src/pages/integrations/[id].tsx      | 187 +++++------
 .../integrations/azure-key-vault/create.tsx   | 124 +++++++
 .../azure-key-vault/oauth2/callback.tsx       |  41 +++
 .../pages/integrations/flyio/authorize.tsx    |  76 +++++
 .../src/pages/integrations/flyio/create.tsx   | 122 +++++++
 .../src/pages/integrations/github/create.tsx  | 123 +++++++
 .../integrations/github/oauth2/callback.tsx   |  41 +++
 .../src/pages/integrations/heroku/create.tsx  | 121 +++++++
 .../integrations/heroku/oauth2/callback.tsx   |  44 +++
 .../src/pages/integrations/netlify/create.tsx | 144 ++++++++
 .../integrations/netlify/oauth2/callback.tsx  |  41 +++
 .../pages/integrations/render/authorize.tsx   |  76 +++++
 .../src/pages/integrations/render/create.tsx  | 122 +++++++
 .../src/pages/integrations/vercel/create.tsx  | 142 ++++++++
 .../integrations/vercel/oauth2/callback.tsx   |  41 +++
 32 files changed, 1766 insertions(+), 428 deletions(-)
 delete mode 100644 frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx
 create mode 100644 frontend/src/hooks/api/integrationAuth/index.tsx
 create mode 100644 frontend/src/hooks/api/integrationAuth/queries.tsx
 create mode 100644 frontend/src/hooks/api/integrationAuth/types.ts
 delete mode 100644 frontend/src/pages/azure-key-vault.tsx
 create mode 100644 frontend/src/pages/integrations/azure-key-vault/create.tsx
 create mode 100644 frontend/src/pages/integrations/azure-key-vault/oauth2/callback.tsx
 create mode 100644 frontend/src/pages/integrations/flyio/authorize.tsx
 create mode 100644 frontend/src/pages/integrations/flyio/create.tsx
 create mode 100644 frontend/src/pages/integrations/github/create.tsx
 create mode 100644 frontend/src/pages/integrations/github/oauth2/callback.tsx
 create mode 100644 frontend/src/pages/integrations/heroku/create.tsx
 create mode 100644 frontend/src/pages/integrations/heroku/oauth2/callback.tsx
 create mode 100644 frontend/src/pages/integrations/netlify/create.tsx
 create mode 100644 frontend/src/pages/integrations/netlify/oauth2/callback.tsx
 create mode 100644 frontend/src/pages/integrations/render/authorize.tsx
 create mode 100644 frontend/src/pages/integrations/render/create.tsx
 create mode 100644 frontend/src/pages/integrations/vercel/create.tsx
 create mode 100644 frontend/src/pages/integrations/vercel/oauth2/callback.tsx

diff --git a/backend/src/controllers/v1/integrationAuthController.ts b/backend/src/controllers/v1/integrationAuthController.ts
index 747004f44..be42647de 100644
--- a/backend/src/controllers/v1/integrationAuthController.ts
+++ b/backend/src/controllers/v1/integrationAuthController.ts
@@ -10,6 +10,31 @@ import { INTEGRATION_SET, INTEGRATION_OPTIONS } from '../../variables';
 import { IntegrationService } from '../../services';
 import { getApps, revokeAccess } from '../../integrations';
 
+/***
+ * Return integration authorization with id [integrationAuthId]
+ */
+export const getIntegrationAuth = async (req: Request, res: Response) => {
+	let integrationAuth;
+	try {
+		const { integrationAuthId } = req.params;
+		integrationAuth = await IntegrationAuth.findById(integrationAuthId);
+		
+		if (!integrationAuth) return res.status(400).send({
+			message: 'Failed to find integration authorization'
+		});
+	} catch (err) {
+		Sentry.setUser({ email: req.user.email });
+		Sentry.captureException(err);
+		return res.status(400).send({
+			message: 'Failed to get integration authorization'
+		});	
+	}
+	
+	return res.status(200).send({
+		integrationAuth
+	});
+}
+
 export const getIntegrationOptions = async (
 	req: Request,
 	res: Response
@@ -31,7 +56,6 @@ export const oAuthExchange = async (
 ) => {
 	try {
 		const { workspaceId, code, integration } = req.body;
-		
 		if (!INTEGRATION_SET.has(integration))
 			throw new Error('Failed to validate integration');
 		
@@ -81,6 +105,13 @@ export const saveIntegrationAccessToken = async (
 			integration: string;
 		} = req.body;
 
+		const bot = await Bot.findOne({
+            workspace: new Types.ObjectId(workspaceId),
+            isActive: true
+        });
+        
+        if (!bot) throw new Error('Bot must be enabled to save integration access token');
+
 		integrationAuth = await IntegrationAuth.findOneAndUpdate({
             workspace: new Types.ObjectId(workspaceId),
             integration
@@ -91,13 +122,6 @@ export const saveIntegrationAccessToken = async (
             new: true,
             upsert: true
         });
-
-		const bot = await Bot.findOne({
-            workspace: new Types.ObjectId(workspaceId),
-            isActive: true
-        });
-        
-        if (!bot) throw new Error('Bot must be enabled to save integration access token');
 		
 		// encrypt and save integration access token
 		integrationAuth = await IntegrationService.setIntegrationAuthAccess({
diff --git a/backend/src/controllers/v1/integrationController.ts b/backend/src/controllers/v1/integrationController.ts
index 0ffb8cbb8..779cb3cb7 100644
--- a/backend/src/controllers/v1/integrationController.ts
+++ b/backend/src/controllers/v1/integrationController.ts
@@ -24,23 +24,34 @@ export const createIntegration = async (req: Request, res: Response) => {
 			app,
 			appId,
 			isActive,
+			sourceEnvironment,
 			targetEnvironment,
 			owner
 		} = req.body;
+		
+		// TODO: validate [sourceEnvironment] and [targetEnvironment]
 
 		// initialize new integration after saving integration access token
         integration = await new Integration({
             workspace: req.integrationAuth.workspace._id,
-            environment: req.integrationAuth.workspace?.environments[0].slug,
+            environment: sourceEnvironment,
             isActive,
             app,
 			appId,
 			targetEnvironment,
+			owner,
             integration: req.integrationAuth.integration,
             integrationAuth: new Types.ObjectId(integrationAuthId)
         }).save();
 		
-		// TODO: run sync function
+		if (integration) {
+			// trigger event - push secrets
+			EventService.handleEvent({
+				event: eventPushSecrets({
+					workspaceId: integration.workspace.toString()
+				})
+			});
+		}
 
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
diff --git a/backend/src/helpers/integration.ts b/backend/src/helpers/integration.ts
index 30e370188..17338ee68 100644
--- a/backend/src/helpers/integration.ts
+++ b/backend/src/helpers/integration.ts
@@ -43,9 +43,7 @@ const handleOAuthExchangeHelper = async ({
     code: string;
     environment: string;
 }) => {
-    let action;
     let integrationAuth;
-    // let newIntegration;
     try {
         const bot = await Bot.findOne({
             workspace: workspaceId,
@@ -100,16 +98,6 @@ const handleOAuthExchangeHelper = async ({
                 accessExpiresAt: res.accessExpiresAt
             });
         }
-
-        // // initialize new integration after exchange
-        // newIntegration = await new Integration({
-        //     workspace: workspaceId,
-        //     isActive: false,
-        //     app: null,
-        //     environment,
-        //     integration,
-        //     integrationAuth: integrationAuth._id
-        // }).save();
     } catch (err) {
         Sentry.setUser(null);
         Sentry.captureException(err);
diff --git a/backend/src/integrations/exchange.ts b/backend/src/integrations/exchange.ts
index ada2b76bd..846c9e7db 100644
--- a/backend/src/integrations/exchange.ts
+++ b/backend/src/integrations/exchange.ts
@@ -144,7 +144,7 @@ const exchangeCodeAzure = async ({
         scope: 'https://vault.azure.net/.default openid offline_access', // TODO: do we need all these permissions?
         client_id: CLIENT_ID_AZURE,
         client_secret: CLIENT_SECRET_AZURE,
-        redirect_uri: `${SITE_URL}/azure-key-vault`
+        redirect_uri: `${SITE_URL}/integrations/azure-key-vault/oauth2/callback`
       } as any)
     )).data;
     
@@ -227,7 +227,7 @@ const exchangeCodeVercel = async ({ code }: { code: string }) => {
           code: code,
           client_id: CLIENT_ID_VERCEL,
           client_secret: CLIENT_SECRET_VERCEL,
-          redirect_uri: `${SITE_URL}/vercel`
+          redirect_uri: `${SITE_URL}/integrations/vercel/oauth2/callback`
         } as any)
       )
     ).data;
@@ -267,7 +267,7 @@ const exchangeCodeNetlify = async ({ code }: { code: string }) => {
           code: code,
           client_id: CLIENT_ID_NETLIFY,
           client_secret: CLIENT_SECRET_NETLIFY,
-          redirect_uri: `${SITE_URL}/netlify`
+          redirect_uri: `${SITE_URL}/integrations/netlify/oauth2/callback`
         } as any)
       )
     ).data;
@@ -319,7 +319,7 @@ const exchangeCodeGithub = async ({ code }: { code: string }) => {
           client_id: CLIENT_ID_GITHUB,
           client_secret: CLIENT_SECRET_GITHUB,
           code: code,
-          redirect_uri: `${SITE_URL}/github`
+          redirect_uri: `${SITE_URL}/integrations/github/oauth2/callback`
         },
         headers: {
           Accept: 'application/json'
diff --git a/backend/src/integrations/sync.ts b/backend/src/integrations/sync.ts
index 4604d744a..401c7f9a1 100644
--- a/backend/src/integrations/sync.ts
+++ b/backend/src/integrations/sync.ts
@@ -1,9 +1,7 @@
 import axios from 'axios';
 import * as Sentry from '@sentry/node';
 import { Octokit } from '@octokit/rest';
-// import * as sodium from 'libsodium-wrappers';
 import sodium from 'libsodium-wrappers';
-// const sodium = require('libsodium-wrappers');
 import { IIntegration, IIntegrationAuth } from '../models';
 import {
   INTEGRATION_AZURE_KEY_VAULT,
diff --git a/backend/src/routes/v1/integration.ts b/backend/src/routes/v1/integration.ts
index 3db9c412e..90cea3a38 100644
--- a/backend/src/routes/v1/integration.ts
+++ b/backend/src/routes/v1/integration.ts
@@ -23,6 +23,7 @@ router.post( // new: add new integration for integration auth
 	body('app').isString().trim(),
 	body('isActive').exists().isBoolean(),
 	body('appId').trim(),
+	body('sourceEnvironment').trim(),
 	body('targetEnvironment').trim(),
 	body('owner').trim(),
 	validateRequest,
diff --git a/backend/src/routes/v1/integrationAuth.ts b/backend/src/routes/v1/integrationAuth.ts
index 3f88aa7e5..1918140c2 100644
--- a/backend/src/routes/v1/integrationAuth.ts
+++ b/backend/src/routes/v1/integrationAuth.ts
@@ -18,6 +18,19 @@ router.get(
 	integrationAuthController.getIntegrationOptions
 );
 
+router.get(
+	'/:integrationAuthId',
+	requireAuth({
+        acceptedAuthModes: ['jwt']
+    }),
+	requireIntegrationAuthorizationAuth({
+		acceptedRoles: [ADMIN, MEMBER]
+	}),
+	param('integrationAuthId'),
+	validateRequest,
+	integrationAuthController.getIntegrationAuth	
+);
+
 router.post(
 	'/oauth-token',
 	requireAuth({
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7f52e04ae..b0317ff7c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "@fortawesome/react-fontawesome": "^0.1.19",
         "@headlessui/react": "^1.6.6",
         "@hookform/resolvers": "^2.9.10",
+        "@octokit/rest": "^19.0.7",
         "@radix-ui/react-accordion": "^1.1.0",
         "@radix-ui/react-alert-dialog": "^1.0.2",
         "@radix-ui/react-checkbox": "^1.0.1",
@@ -3521,6 +3522,153 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@octokit/auth-token": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.3.tgz",
+      "integrity": "sha512-/aFM2M4HVDBT/jjDBa84sJniv1t9Gm/rLkalaz9htOm+L+8JMj1k9w0CkUdcxNyNxZPlTxKPVko+m1VlM58ZVA==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-AgvDRUg3COpR82P7PBdGZF/NNqGmtMq2NiPqeSsDIeCfYFOZ9gddqWNQHnFdEUf+YwOj4aZYmJnlPp7OXmDIDg==",
+      "dependencies": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.5.tgz",
+      "integrity": "sha512-LG4o4HMY1Xoaec87IqQ41TQ+glvIeTKqfjkCEmt5AIwDZJwQeVZFIEYXrYY6yLwK+pAScb9Gj4q+Nz2qSw1roA==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.5.tgz",
+      "integrity": "sha512-Qwfvh3xdqKtIznjX9lz2D458r7dJPP8l6r4GQkIdWQouZwHQK0mVT88uwiU2bdTU2OtT1uOlKpRciUWldpG0yQ==",
+      "dependencies": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^9.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-16.0.0.tgz",
+      "integrity": "sha512-JbFWOqTJVLHZSUUoF4FzAZKYtqdxWu9Z5m2QQnOyEa04fOFljvyh7D3GYKbfuaSWisqehImiVIMG4eyJeP5VEA=="
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.0.0.tgz",
+      "integrity": "sha512-Sq5VU1PfT6/JyuXPyt04KZNVsFOSBaYOAq2QRZUwzVlI10KFvcbUo8lR258AAQL1Et60b0WuVik+zOWKLuDZxw==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=4"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
+      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.0.1.tgz",
+      "integrity": "sha512-pnCaLwZBudK5xCdrR823xHGNgqOzRnJ/mpC/76YPpNP7DybdsJtP7mdOwh+wYZxK5jqeQuhu59ogMI4NRlBUvA==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.3.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.3.tgz",
+      "integrity": "sha512-TNAodj5yNzrrZ/VxP+H5HiYaZep0H3GU0O7PaF+fhDrt8FPrnkei9Aal/txsN/1P7V3CPiThG0tIvpPDYUsyAA==",
+      "dependencies": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
+      "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "19.0.7",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.7.tgz",
+      "integrity": "sha512-HRtSfjrWmWVNp2uAkEpQnuGMJsu/+dBr47dRc5QVgsCbnIc1+GFEaoKBWkYG+zjrsHpSqcAElMio+n10c0b5JA==",
+      "dependencies": {
+        "@octokit/core": "^4.1.0",
+        "@octokit/plugin-paginate-rest": "^6.0.0",
+        "@octokit/plugin-request-log": "^1.0.4",
+        "@octokit/plugin-rest-endpoint-methods": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.0.0.tgz",
+      "integrity": "sha512-LUewfj94xCMH2rbD5YJ+6AQ4AVjFYTgpp6rboWM5T7N3IsIF65SBEOVcYMGAEzO/kKNiNaW4LoWtoThOhH06gw==",
+      "dependencies": {
+        "@octokit/openapi-types": "^16.0.0"
+      }
+    },
     "node_modules/@pkgr/utils": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@@ -8789,6 +8937,11 @@
         }
       ]
     },
+    "node_modules/before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
+    },
     "node_modules/better-opn": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz",
@@ -10371,6 +10524,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -14099,7 +14257,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
       "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16455,7 +16612,6 @@
       "version": "2.6.8",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.8.tgz",
       "integrity": "sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==",
-      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -21217,8 +21373,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/trim-lines": {
       "version": "3.0.1",
@@ -21664,6 +21819,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w=="
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -22068,8 +22228,7 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack": {
       "version": "5.75.0",
@@ -22267,7 +22426,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -24829,6 +24987,118 @@
         "fastq": "^1.6.0"
       }
     },
+    "@octokit/auth-token": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.3.tgz",
+      "integrity": "sha512-/aFM2M4HVDBT/jjDBa84sJniv1t9Gm/rLkalaz9htOm+L+8JMj1k9w0CkUdcxNyNxZPlTxKPVko+m1VlM58ZVA==",
+      "requires": {
+        "@octokit/types": "^9.0.0"
+      }
+    },
+    "@octokit/core": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-AgvDRUg3COpR82P7PBdGZF/NNqGmtMq2NiPqeSsDIeCfYFOZ9gddqWNQHnFdEUf+YwOj4aZYmJnlPp7OXmDIDg==",
+      "requires": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/endpoint": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.5.tgz",
+      "integrity": "sha512-LG4o4HMY1Xoaec87IqQ41TQ+glvIeTKqfjkCEmt5AIwDZJwQeVZFIEYXrYY6yLwK+pAScb9Gj4q+Nz2qSw1roA==",
+      "requires": {
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/graphql": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.5.tgz",
+      "integrity": "sha512-Qwfvh3xdqKtIznjX9lz2D458r7dJPP8l6r4GQkIdWQouZwHQK0mVT88uwiU2bdTU2OtT1uOlKpRciUWldpG0yQ==",
+      "requires": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^9.0.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/openapi-types": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-16.0.0.tgz",
+      "integrity": "sha512-JbFWOqTJVLHZSUUoF4FzAZKYtqdxWu9Z5m2QQnOyEa04fOFljvyh7D3GYKbfuaSWisqehImiVIMG4eyJeP5VEA=="
+    },
+    "@octokit/plugin-paginate-rest": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.0.0.tgz",
+      "integrity": "sha512-Sq5VU1PfT6/JyuXPyt04KZNVsFOSBaYOAq2QRZUwzVlI10KFvcbUo8lR258AAQL1Et60b0WuVik+zOWKLuDZxw==",
+      "requires": {
+        "@octokit/types": "^9.0.0"
+      }
+    },
+    "@octokit/plugin-request-log": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
+      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
+      "requires": {}
+    },
+    "@octokit/plugin-rest-endpoint-methods": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.0.1.tgz",
+      "integrity": "sha512-pnCaLwZBudK5xCdrR823xHGNgqOzRnJ/mpC/76YPpNP7DybdsJtP7mdOwh+wYZxK5jqeQuhu59ogMI4NRlBUvA==",
+      "requires": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.3.1"
+      }
+    },
+    "@octokit/request": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.3.tgz",
+      "integrity": "sha512-TNAodj5yNzrrZ/VxP+H5HiYaZep0H3GU0O7PaF+fhDrt8FPrnkei9Aal/txsN/1P7V3CPiThG0tIvpPDYUsyAA==",
+      "requires": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/request-error": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
+      "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
+      "requires": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      }
+    },
+    "@octokit/rest": {
+      "version": "19.0.7",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.7.tgz",
+      "integrity": "sha512-HRtSfjrWmWVNp2uAkEpQnuGMJsu/+dBr47dRc5QVgsCbnIc1+GFEaoKBWkYG+zjrsHpSqcAElMio+n10c0b5JA==",
+      "requires": {
+        "@octokit/core": "^4.1.0",
+        "@octokit/plugin-paginate-rest": "^6.0.0",
+        "@octokit/plugin-request-log": "^1.0.4",
+        "@octokit/plugin-rest-endpoint-methods": "^7.0.0"
+      }
+    },
+    "@octokit/types": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.0.0.tgz",
+      "integrity": "sha512-LUewfj94xCMH2rbD5YJ+6AQ4AVjFYTgpp6rboWM5T7N3IsIF65SBEOVcYMGAEzO/kKNiNaW4LoWtoThOhH06gw==",
+      "requires": {
+        "@octokit/openapi-types": "^16.0.0"
+      }
+    },
     "@pkgr/utils": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@@ -28742,6 +29012,11 @@
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
+    "before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
+    },
     "better-opn": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz",
@@ -29938,6 +30213,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
+    },
     "dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -32732,8 +33012,7 @@
     "is-plain-object": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "dev": true
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
     },
     "is-regex": {
       "version": "1.1.4",
@@ -34410,7 +34689,6 @@
       "version": "2.6.8",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.8.tgz",
       "integrity": "sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==",
-      "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
       }
@@ -37863,8 +38141,7 @@
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "trim-lines": {
       "version": "3.0.1",
@@ -38186,6 +38463,11 @@
         "unist-util-is": "^5.0.0"
       }
     },
+    "universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w=="
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -38479,8 +38761,7 @@
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "webpack": {
       "version": "5.75.0",
@@ -38626,7 +38907,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "requires": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index db8153a0a..4e2e3e585 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "@fortawesome/react-fontawesome": "^0.1.19",
     "@headlessui/react": "^1.6.6",
     "@hookform/resolvers": "^2.9.10",
+    "@octokit/rest": "^19.0.7",
     "@radix-ui/react-accordion": "^1.1.0",
     "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.1",
diff --git a/frontend/public/data/frequentConstants.ts b/frontend/public/data/frequentConstants.ts
index 6ac74cdbd..f25da26d3 100644
--- a/frontend/public/data/frequentConstants.ts
+++ b/frontend/public/data/frequentConstants.ts
@@ -29,7 +29,7 @@ const reverseEnvMapping: Mapping = {
 const contextNetlifyMapping: Mapping = {
   "dev": "Local development",
   "branch-deploy": "Branch deploys",
-  "deploy-review": "Deploy Previews",
+  "deploy-preview": "Deploy Previews",
   "production": "Production"
 }
 
diff --git a/frontend/src/components/basic/Layout.tsx b/frontend/src/components/basic/Layout.tsx
index 1f1ee246d..c6e234058 100644
--- a/frontend/src/components/basic/Layout.tsx
+++ b/frontend/src/components/basic/Layout.tsx
@@ -199,13 +199,13 @@ const Layout = ({ children }: LayoutProps) => {
           .split('/')
           [router.asPath.split('/').length - 1].split('?')[0];
 
-        if (!['heroku', 'vercel', 'github', 'netlify', 'azure-key-vault'].includes(intendedWorkspaceId)) {
+        if (!['callback', 'create', 'authorize'].includes(intendedWorkspaceId)) {
           localStorage.setItem('projectData.id', intendedWorkspaceId);
         }
-
+        
         // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
         if (
-          !['heroku', 'vercel', 'github', 'netlify', 'azure-key-vault'].includes(intendedWorkspaceId) &&
+          !['callback', 'create', 'authorize'].includes(intendedWorkspaceId) &&
           !userWorkspaces
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)
diff --git a/frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx b/frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx
deleted file mode 100644
index 0a09f21e9..000000000
--- a/frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-
-interface IntegrationOption {
-  clientId: string;
-  clientSlug?: string; // vercel-integration specific
-  docsLink: string;
-  image: string;
-  isAvailable: boolean;
-  name: string;
-  slug: string;
-  type: string;
-}
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  selectedIntegrationOption: IntegrationOption | null
-  handleIntegrationOption: (arg:{
-    integrationOption: IntegrationOption,
-    accessToken?: string;
-})=>void;
-};
-
-const IntegrationAccessTokenDialog = ({
-    isOpen,
-    closeModal,
-    selectedIntegrationOption,
-    handleIntegrationOption
-}:Props) => {
-    const [accessToken, setAccessToken] = useState('');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const submit = async () => {
-        try {
-            if (selectedIntegrationOption && accessToken !== '') {
-                handleIntegrationOption({
-                    integrationOption: selectedIntegrationOption,
-                    accessToken
-                });
-                closeModal();
-                setAccessToken('');
-            }
-        } catch (err) {
-            console.log(err);
-        }
-    }
-
-    return (
-        <div>
-            <Transition appear show={isOpen} as={Fragment}>
-                <Dialog as="div" className="relative z-10" onClose={() => {
-                    closeModal();
-                }}>
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in duration-200"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="fixed inset-0 bg-black bg-opacity-70" />
-                    </Transition.Child>
-                    <div className="fixed inset-0 overflow-y-auto">
-                        <div className="flex min-h-full items-center justify-center p-4 text-center">
-                            <Transition.Child
-                                as={Fragment}
-                                enter="ease-out duration-300"
-                                enterFrom="opacity-0 scale-95"
-                                enterTo="opacity-100 scale-100"
-                                leave="ease-in duration-200"
-                                leaveFrom="opacity-100 scale-100"
-                                leaveTo="opacity-0 scale-95"
-                            >
-                                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
-                                <Dialog.Title
-                                    as="h3"
-                                    className="text-lg font-medium leading-6 text-gray-400"
-                                >
-                                    {`Enter your ${selectedIntegrationOption?.name} API Key`}
-                                </Dialog.Title>
-                                <div className="mt-2 mb-2">
-                                    <p className="text-sm text-gray-500">
-                                        {`This integration requires you to obtain an API key from ${selectedIntegrationOption?.name ?? ''} and store it with Infisical. `}
-                                        You can learn how to do this <a target="_blank" rel="noreferrer" className="text-primary cursor-pointer underline underline-offset-2" href="https://infisical.com/docs/integrations/cloud/render">here</a>.
-                                    </p>
-                                </div>
-                                <div className="mt-4 max-w-full">
-                                    <InputField
-                                        label="API Key"
-                                        onChangeHandler={setAccessToken}
-                                        type="varName"
-                                        value={accessToken}
-                                        placeholder=""
-                                        isRequired
-                                    />
-                                    <div className="mt-4 max-w-[5.5rem]">
-                                        <Button 
-                                            onButtonPressed={submit}
-                                            color="mineshaft"
-                                            text="Connect"
-                                            size="md"
-                                        />
-                                    </div>
-                                </div>
-                                </Dialog.Panel>
-                            </Transition.Child>
-                        </div>
-                    </div>
-                </Dialog>
-            </Transition>
-        </div>
-    );
-}
-
-export default IntegrationAccessTokenDialog;
\ No newline at end of file
diff --git a/frontend/src/hooks/api/integrationAuth/index.tsx b/frontend/src/hooks/api/integrationAuth/index.tsx
new file mode 100644
index 000000000..43920b65f
--- /dev/null
+++ b/frontend/src/hooks/api/integrationAuth/index.tsx
@@ -0,0 +1,3 @@
+export {
+    useGetIntegrationAuthApps,
+    useGetIntegrationAuthById} from './queries';
\ No newline at end of file
diff --git a/frontend/src/hooks/api/integrationAuth/queries.tsx b/frontend/src/hooks/api/integrationAuth/queries.tsx
new file mode 100644
index 000000000..508afc741
--- /dev/null
+++ b/frontend/src/hooks/api/integrationAuth/queries.tsx
@@ -0,0 +1,38 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import {
+    App,
+    IntegrationAuth} from './types';
+
+const integrationAuthKeys = {
+    getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuth'] as const,
+    getIntegrationAuthApps: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthApps'] as const,
+}
+
+const fetchIntegrationAuthById = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(`/api/v1/integration-auth/${integrationAuthId}`);
+    return data.integrationAuth;
+}
+
+const fetchIntegrationAuthApps = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ apps: App[] }>(`/api/v1/integration-auth/${integrationAuthId}/apps`);
+    return data.apps;
+}
+
+export const useGetIntegrationAuthById = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
+        queryFn: () => fetchIntegrationAuthById(integrationAuthId),
+        enabled: true
+    });
+}
+
+export const useGetIntegrationAuthApps = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId),
+        queryFn: () =>  fetchIntegrationAuthApps(integrationAuthId),
+        enabled: true
+    });
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/api/integrationAuth/types.ts b/frontend/src/hooks/api/integrationAuth/types.ts
new file mode 100644
index 000000000..bf193eafe
--- /dev/null
+++ b/frontend/src/hooks/api/integrationAuth/types.ts
@@ -0,0 +1,13 @@
+export type IntegrationAuth = {
+    _id: string;
+    workspace: string;
+    integration: string;
+    teamId?: string;
+    accountId?: string;
+}
+
+export type App = {
+    name: string;
+    appId?: string;
+    owner?: string;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/api/integrations/createIntegration.ts b/frontend/src/pages/api/integrations/createIntegration.ts
index c2da2378a..6b83d3fdc 100644
--- a/frontend/src/pages/api/integrations/createIntegration.ts
+++ b/frontend/src/pages/api/integrations/createIntegration.ts
@@ -4,6 +4,10 @@ interface Props {
   integrationAuthId: string;
   isActive: boolean;
   app: string | null;
+  appId: string | null;
+  sourceEnvironment: string;
+  targetEnvironment: string | null;
+  owner: string | null;
 }
 /**
  * This route creates a new integration based on the integration authorization with id [integrationAuthId]
@@ -14,7 +18,11 @@ interface Props {
 const createIntegration = ({ 
     integrationAuthId,
     isActive,
-    app
+    app,
+    appId,
+    sourceEnvironment,
+    targetEnvironment,
+    owner
 }: Props) =>
   SecurityClient.fetchCall('/api/v1/integration', {
     method: 'POST',
@@ -24,7 +32,11 @@ const createIntegration = ({
     body: JSON.stringify({
         integrationAuthId,
         isActive,
-        app
+        app,
+        appId,
+        sourceEnvironment,
+        targetEnvironment,
+        owner
     })
   }).then(async (res) => {
     if (res && res.status === 200) {
diff --git a/frontend/src/pages/azure-key-vault.tsx b/frontend/src/pages/azure-key-vault.tsx
deleted file mode 100644
index 71a3c6db7..000000000
--- a/frontend/src/pages/azure-key-vault.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-
-import { 
-  Button, 
-  Card, 
-  CardTitle, 
-  FormControl, 
-  Input, 
-  Select, 
-  SelectItem 
-} from '../components/v2';
-import { useGetWorkspaceById } from '../hooks/api/workspace';
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-import createIntegration from './api/integrations/createIntegration';
-
-interface IntegrationAuth {
-  _id: string;
-  integration: string;
-  workspace: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export default function AzureKeyVault() {
-  const router = useRouter();
-  const workspaceResult = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
-
-  const { code, state } = queryString.parse(router.asPath.split('?')[1]);
-
-  const [integrationAuth, setIntegrationAuth] = useState<IntegrationAuth | null>(null);
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
-
-  const [vaultBaseUrl, setVaultBaseUrl] = useState('');
-  const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
-
-  const [isLoading, setIsLoading] = useState(false);
-  
-  useEffect(() => {
-    (async () => {
-      try {
-        if (state !== localStorage.getItem('latestCSRFToken')) return;
-        localStorage.removeItem('latestCSRFToken');
-
-        setIntegrationAuth(await AuthorizeIntegration({
-          workspaceId: localStorage.getItem('projectData.id') as string,
-          code: code as string,
-          integration: 'azure-key-vault',
-        }));
-      } catch (error) {
-        console.error('Azure Key Vault integration error: ', error);
-      }
-    })();
-  }, []);
-  
-  useEffect(() => {
-    if (workspaceResult && workspaceResult.data) {
-      setSelectedSourceEnvironment(workspaceResult.data.environments[0].slug);
-    }
-  }, [workspaceResult]);
-
-  const handleButtonClick = async () => {
-    try {
-      if (vaultBaseUrl.length === 0) {
-        setVaultBaseUrlErrorText('Vault URI cannot be blank');
-        return;
-      }
-      
-      if (
-        !vaultBaseUrl.startsWith('https://') 
-        || !vaultBaseUrl.endsWith('vault.azure.net')
-      ) {
-        setVaultBaseUrlErrorText('Vault URI must be like https://<vault_name>.vault.azure.net');
-        return;
-      }
-      
-      if (!integrationAuth?._id) return;
-      
-      setIsLoading(true);
-      await createIntegration({
-        integrationAuthId: integrationAuth?._id,
-        isActive: true,
-        app: vaultBaseUrl
-      });
-      setIsLoading(false);
-      
-      router.push(
-        `/integrations/${localStorage.getItem('projectData.id')}`
-      );
-      
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  if (!workspaceResult) return <div />
-  
-  const { data: w } = workspaceResult;
-
-  return (integrationAuth && w && selectedSourceEnvironment) ? (
-    <div className="h-full w-full flex justify-center items-center">
-      <Card className="max-w-md p-8 rounded-md">
-        <CardTitle className='text-center'>Azure Key Vault Integration</CardTitle>
-        <FormControl
-          label="Project Environment"
-          className='mt-4'
-        >
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className='w-full border border-mineshaft-500'
-          >
-            {w?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl
-          label="Vault URI"
-          errorText={vaultBaseUrlErrorText}
-          isError={vaultBaseUrlErrorText !== '' ?? false}
-        >
-          <Input
-            placeholder='https://example.vault.azure.net'
-            value={vaultBaseUrl}
-            onChange={(e) => setVaultBaseUrl(e.target.value)}
-          />
-        </FormControl>
-          <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
-          >
-            Create Integration
-          </Button>
-      </Card>
-    </div>
-  ) : <div />
-}
-
-AzureKeyVault.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/[id].tsx b/frontend/src/pages/integrations/[id].tsx
index f065494cd..ac2669de8 100644
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -7,7 +7,6 @@ import { useTranslation } from 'next-i18next';
 import frameworkIntegrationOptions from 'public/json/frameworkIntegrations.json';
 
 import ActivateBotDialog from '@app/components/basic/dialog/ActivateBotDialog';
-import IntegrationAccessTokenDialog from '@app/components/basic/dialog/IntegrationAccessTokenDialog';
 import CloudIntegrationSection from '@app/components/integrations/CloudIntegrationSection';
 import FrameworkIntegrationSection from '@app/components/integrations/FrameworkIntegrationSection';
 import IntegrationSection from '@app/components/integrations/IntegrationSection';
@@ -20,12 +19,10 @@ import {
 } from '../../components/utilities/cryptography/crypto';
 import getBot from '../api/bot/getBot';
 import setBotActiveStatus from '../api/bot/setBotActiveStatus';
-import createIntegration from '../api/integrations/createIntegration';
 import deleteIntegration from '../api/integrations/DeleteIntegration';
 import getIntegrationOptions from '../api/integrations/GetIntegrationOptions';
 import getWorkspaceAuthorizations from '../api/integrations/getWorkspaceAuthorizations';
 import getWorkspaceIntegrations from '../api/integrations/getWorkspaceIntegrations';
-import saveIntegrationAccessToken from '../api/integrations/saveIntegrationAccessToken';
 import getAWorkspace from '../api/workspace/getAWorkspace';
 import getLatestFileKey from '../api/workspace/getLatestFileKey';
 
@@ -75,7 +72,6 @@ export default function Integrations() {
   // TODO: These will have its type when migratiing towards react-query
   const [bot, setBot] = useState<any>(null);
   const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
-  const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(false);
   const [selectedIntegrationOption, setSelectedIntegrationOption] = useState<IntegrationOption | null>(null);
 
   const router = useRouter();
@@ -166,87 +162,83 @@ export default function Integrations() {
     }
   };
   
-  /**
-   * Handle integration option authorization for a given integration option [integrationOption]
-   * @param {Object} obj
-   * @param {Object} obj.integrationOption - an integration option
-   * @param {String} obj.name
-   * @param {String} obj.type
-   * @param {String} obj.docsLink
-   * @returns
-   */
-  const handleIntegrationOption = async ({
-    integrationOption,
-    accessToken
-  }: { 
-    integrationOption: IntegrationOption,
-    accessToken?: string;
-  }) => {
+  const handleUnauthorizedIntegrationOptionPress = (integrationOption: IntegrationOption) => {
     try {
-      if (!bot.isActive) {
-        await handleBotActivate();
+      // generate CSRF token for OAuth2 code-token exchange integrations
+      const state = crypto.randomBytes(16).toString('hex');
+      localStorage.setItem('latestCSRFToken', state);
+
+      let link = '';
+      switch (integrationOption.slug) {
+        case 'azure-key-vault':
+          link = `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
+          break;
+        case 'heroku':
+          link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
+          break;
+        case 'vercel':
+          link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`;
+          break;
+        case 'netlify':
+          link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
+          break;
+        case 'github':
+          link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
+          break;
+        case 'render':
+          link = `${window.location.origin}/integrations/render/authorize`
+          break;
+        case 'flyio':
+          link = `${window.location.origin}/integrations/flyio/authorize`
+          break;
+        default:
+          break;
       }
-      
-      if (integrationOption.type === 'oauth') {
-        // integration is of type OAuth
 
-        // generate CSRF token for OAuth2 code-token exchange integrations
-        const state = crypto.randomBytes(16).toString('hex');
-        localStorage.setItem('latestCSRFToken', state);
-
-        switch (integrationOption.slug) {
-          case 'azure-key-vault':
-            window.location.assign(
-              `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/azure-key-vault&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`
-            );
-            break;
-          case 'heroku':
-            window.location.assign(
-              `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`
-            );
-            break;
-          case 'vercel':
-            window.location.assign(
-              `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`
-            );
-            break;
-          case 'netlify':
-            window.location.assign(
-              `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/netlify`
-            );
-            break;
-          case 'github':
-            window.location.assign(
-              `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/github&state=${state}`
-            );
-            break;
-          default:
-            break;
-        }
-        return;
-      } if (integrationOption.type === 'pat') {
-        // integration is of type personal access token
-        const integrationAuth = await saveIntegrationAccessToken({
-            workspaceId: localStorage.getItem('projectData.id'),
-            integration: integrationOption.slug,
-            accessToken: accessToken ?? ''
-        });
-
-        setIntegrationAuths([...integrationAuths, integrationAuth])
-
-        const integration = await createIntegration({
-          integrationAuthId: integrationAuth._id,
-          isActive: false,
-          app: null
-        });
-        
-        setIntegrations([...integrations, integration]); 
-        return;
+      if (link !== '') {
+        window.location.assign(link);
       }
     } catch (err) {
       console.error(err);
     }
-  };
+  }
+  
+  const handleAuthorizedIntegrationOptionPress = (integrationAuth: IntegrationAuth) => {
+    try {
+      let link = '';
+      switch (integrationAuth.integration) {
+        case 'azure-key-vault':
+          link = `${window.location.origin}/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'heroku':
+          link = `${window.location.origin}/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'vercel':
+          link = `${window.location.origin}/integrations/vercel/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'netlify':
+          link = `${window.location.origin}/integrations/netlify/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'github':
+          link = `${window.location.origin}/integrations/github/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'render':
+          link = `${window.location.origin}/integrations/render/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'flyio':
+          link = `${window.location.origin}/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        default:
+          break;
+      }
+
+      if (link !== '') {
+        window.location.assign(link);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
   
   /**
    * Open dialog to activate bot if bot is not active.
@@ -258,39 +250,20 @@ export default function Integrations() {
    * @returns
    */
   const integrationOptionPress = async (integrationOption: IntegrationOption) => {
-    // consider: don't start integration until at [handleIntegrationOption] step
     try {
       const integrationAuthX = integrationAuths.find((integrationAuth) => integrationAuth.integration === integrationOption.slug);
-      
-      if (!integrationAuthX) {
-        // case: integration has not been authorized before
-        
-        if (integrationOption.type === 'pat') {
-          // case: integration requires user to input their personal access token for that integration
-          setIntegrationAccessTokenDialogOpen(true);
-          return;
-        }
-        
-        // case: integration does not require user to input their personal access token (i.e. it's an OAuth2 integration)
-        handleIntegrationOption({ integrationOption });
-        return;
-      }
-      
+
       if (!bot.isActive) {
         await handleBotActivate();
       }
       
-      // case: integration has been authorized before
-      // -> create new integration
-      
-      if (!['azure-key-vault'].includes(integrationOption.slug)) {
-        const integration = await createIntegration({
-          integrationAuthId: integrationAuthX._id
-        });
-        setIntegrations([...integrations, integration]);
-      } else {
-        handleIntegrationOption({ integrationOption });
+      if (!integrationAuthX) {
+        // case: integration has not been authorized
+        handleUnauthorizedIntegrationOptionPress(integrationOption);
+        return;
       }
+
+      handleAuthorizedIntegrationOptionPress(integrationAuthX);
     } catch (err) {
       console.error(err);
     }
@@ -372,12 +345,6 @@ export default function Integrations() {
           selectedIntegrationOption={selectedIntegrationOption}
           integrationOptionPress={integrationOptionPress}
         />
-        <IntegrationAccessTokenDialog
-          isOpen={isIntegrationAccessTokenDialogOpen}
-          closeModal={() => setIntegrationAccessTokenDialogOpen(false)}
-          selectedIntegrationOption={selectedIntegrationOption}
-          handleIntegrationOption={handleIntegrationOption}
-        />
         <IntegrationSection 
           integrations={integrations} 
           setIntegrations={setIntegrations}
diff --git a/frontend/src/pages/integrations/azure-key-vault/create.tsx b/frontend/src/pages/integrations/azure-key-vault/create.tsx
new file mode 100644
index 000000000..d70ada635
--- /dev/null
+++ b/frontend/src/pages/integrations/azure-key-vault/create.tsx
@@ -0,0 +1,124 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function AzureKeyVaultCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    
+    const [vaultBaseUrl, setVaultBaseUrl] = useState('');
+    const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+        
+    const handleButtonClick = async () => {
+        try {
+        if (vaultBaseUrl.length === 0) {
+            setVaultBaseUrlErrorText('Vault URI cannot be blank');
+            return;
+        }
+        
+        if (
+            !vaultBaseUrl.startsWith('https://') 
+            || !vaultBaseUrl.endsWith('vault.azure.net')
+        ) {
+            setVaultBaseUrlErrorText('Vault URI must be like https://<vault_name>.vault.azure.net');
+            return;
+        }
+        
+        if (!integrationAuth?._id) return;
+        
+        setIsLoading(true);
+        await createIntegration({
+            integrationAuthId: integrationAuth?._id,
+            isActive: true,
+            app: vaultBaseUrl,
+            appId: null,
+            sourceEnvironment: selectedSourceEnvironment,
+            targetEnvironment: null,
+            owner: null
+        });
+        setIsLoading(false);
+        
+        router.push(
+            `/integrations/${localStorage.getItem('projectData.id')}`
+        );
+        
+        } catch (err) {
+        console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Azure Key Vault Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Vault URI"
+          errorText={vaultBaseUrlErrorText}
+          isError={vaultBaseUrlErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder='https://example.vault.azure.net'
+            value={vaultBaseUrl}
+            onChange={(e) => setVaultBaseUrl(e.target.value)}
+          />
+        </FormControl>
+          <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+          >
+            Create Integration
+          </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+AzureKeyVaultCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/azure-key-vault/oauth2/callback.tsx b/frontend/src/pages/integrations/azure-key-vault/oauth2/callback.tsx
new file mode 100644
index 000000000..14d92d9c2
--- /dev/null
+++ b/frontend/src/pages/integrations/azure-key-vault/oauth2/callback.tsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function AzureKeyVaultOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'azure-key-vault'
+                });
+
+                router.push(
+                    `/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+AzureKeyVaultOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/flyio/authorize.tsx b/frontend/src/pages/integrations/flyio/authorize.tsx
new file mode 100644
index 000000000..5b00e562a
--- /dev/null
+++ b/frontend/src/pages/integrations/flyio/authorize.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input,
+} from '../../../components/v2';
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function FlyioCreateIntegrationPage() {
+    const router = useRouter();
+    const [accessToken, setAccessToken] = useState('');
+    const [accessTokenErrorText, setAccessTokenErrorText] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+        
+    const handleButtonClick = async () => {
+        try {
+            setAccessTokenErrorText('');
+            if (accessToken.length === 0) {
+                setAccessTokenErrorText('Access token cannot be blank');
+                return;
+            }
+
+            setIsLoading(true);
+
+            const integrationAuth = await saveIntegrationAccessToken({
+                workspaceId: localStorage.getItem('projectData.id'),
+                integration: 'flyio',
+                accessToken
+            });
+
+            setIsLoading(false);
+            
+            router.push(
+                `/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Render Integration</CardTitle>
+         <FormControl
+          label="Fly.io Access Token"
+          errorText={accessTokenErrorText}
+          isError={accessTokenErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder=''
+            value={accessToken}
+            onChange={(e) => setAccessToken(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Connect to Fly.io
+        </Button>
+      </Card>
+    </div>
+  )
+}
+
+FlyioCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/flyio/create.tsx b/frontend/src/pages/integrations/flyio/create.tsx
new file mode 100644
index 000000000..7f9d079ae
--- /dev/null
+++ b/frontend/src/pages/integrations/flyio/create.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function FlyioCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Fly.io Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`flyio-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Fly.io App"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+FlyioCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/github/create.tsx b/frontend/src/pages/integrations/github/create.tsx
new file mode 100644
index 000000000..324ef5715
--- /dev/null
+++ b/frontend/src/pages/integrations/github/create.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function GitHubCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [owner, setOwner] = useState<string | null>(null);
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+            setOwner(integrationAuthApps[0]?.owner ?? null);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+
+            if (!integrationAuth?._id) return;
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>GitHub Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="GitHub Repo"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`github-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+GitHubCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/github/oauth2/callback.tsx b/frontend/src/pages/integrations/github/oauth2/callback.tsx
new file mode 100644
index 000000000..ab2bb18c8
--- /dev/null
+++ b/frontend/src/pages/integrations/github/oauth2/callback.tsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function GitHubOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'github'
+                });
+
+                router.push(
+                    `/integrations/github/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+GitHubOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/heroku/create.tsx b/frontend/src/pages/integrations/heroku/create.tsx
new file mode 100644
index 000000000..6d3c805d5
--- /dev/null
+++ b/frontend/src/pages/integrations/heroku/create.tsx
@@ -0,0 +1,121 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function HerokuCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+
+            if (!integrationAuth?._id) return;
+
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Heroku Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Heroku App"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+HerokuCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/heroku/oauth2/callback.tsx b/frontend/src/pages/integrations/heroku/oauth2/callback.tsx
new file mode 100644
index 000000000..c5846170b
--- /dev/null
+++ b/frontend/src/pages/integrations/heroku/oauth2/callback.tsx
@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function HerokuOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                console.log('A');
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                console.log('B');
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'heroku'
+                });
+
+                console.log('C');
+                router.push(
+                    `/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+            console.log('D');
+        })();
+    }, []);
+    
+    return <div />
+}
+
+HerokuOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/netlify/create.tsx b/frontend/src/pages/integrations/netlify/create.tsx
new file mode 100644
index 000000000..6ec6469ab
--- /dev/null
+++ b/frontend/src/pages/integrations/netlify/create.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+const netlifyEnvironments = [
+    { name: 'Local development', slug: 'dev' },
+    { name: 'Branch deploys', slug: 'branch-deploy' },
+    { name: 'Deploy previews', slug: 'deploy-preview' },
+    { name: 'Production', slug: 'production' }
+]
+
+export default function NetlifyCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    const [targetEnvironment, setTargetEnvironment] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+            setTargetEnvironment(netlifyEnvironments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            console.log(integrationAuthApps)
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+
+            if (!integrationAuth?._id) return;
+
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp && targetEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Netlify Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Netlify Site"
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Netlify Context"
+        >
+          <Select
+            value={targetEnvironment}
+            onValueChange={(val) => setTargetEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {netlifyEnvironments.map((netlifyEnvironment) => (
+              <SelectItem value={netlifyEnvironment.slug} key={`netlify-environment-${netlifyEnvironment.slug}`}>
+                {netlifyEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+NetlifyCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/netlify/oauth2/callback.tsx b/frontend/src/pages/integrations/netlify/oauth2/callback.tsx
new file mode 100644
index 000000000..db884282a
--- /dev/null
+++ b/frontend/src/pages/integrations/netlify/oauth2/callback.tsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function NetlifyOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'netlify'
+                });
+
+                router.push(
+                    `/integrations/netlify/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+NetlifyOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/render/authorize.tsx b/frontend/src/pages/integrations/render/authorize.tsx
new file mode 100644
index 000000000..bd7a877c3
--- /dev/null
+++ b/frontend/src/pages/integrations/render/authorize.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input,
+} from '../../../components/v2';
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function RenderCreateIntegrationPage() {
+    const router = useRouter();
+    const [apiKey, setApiKey] = useState('');
+    const [apiKeyErrorText, setApiKeyErrorText] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+        
+    const handleButtonClick = async () => {
+        try {
+            setApiKeyErrorText('');
+            if (apiKey.length === 0) {
+                setApiKeyErrorText('API Key cannot be blank');
+                return;
+            }
+
+            setIsLoading(true);
+
+            const integrationAuth = await saveIntegrationAccessToken({
+                workspaceId: localStorage.getItem('projectData.id'),
+                integration: 'render',
+                accessToken: apiKey
+            });
+
+            setIsLoading(false);
+            
+            router.push(
+                `/integrations/render/create?integrationAuthId=${integrationAuth._id}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Render Integration</CardTitle>
+         <FormControl
+          label="Render API Key"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder='rnd_xxx'
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Connect to Render
+        </Button>
+      </Card>
+    </div>
+  )
+}
+
+RenderCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/render/create.tsx b/frontend/src/pages/integrations/render/create.tsx
new file mode 100644
index 000000000..2f02408d9
--- /dev/null
+++ b/frontend/src/pages/integrations/render/create.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function RenderCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Render Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Render Service"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+RenderCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/vercel/create.tsx b/frontend/src/pages/integrations/vercel/create.tsx
new file mode 100644
index 000000000..5a3249378
--- /dev/null
+++ b/frontend/src/pages/integrations/vercel/create.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+const vercelEnvironments = [
+    { name: 'Development', slug: 'development' },
+    { name: 'Preview', slug: 'preview' },
+    { name: 'Production', slug: 'production' }
+]
+
+export default function VercelCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    const [targetEnvironment, setTargetEnvironemnt] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+            setTargetEnvironemnt(vercelEnvironments[0].slug);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp && targetEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Vercel Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Vercel App"
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Vercel App Environment"
+        >
+          <Select
+            value={targetEnvironment}
+            onValueChange={(val) => setTargetEnvironemnt(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {vercelEnvironments.map((vercelEnvironment) => (
+              <SelectItem value={vercelEnvironment.slug} key={`vercel-environment-${vercelEnvironment.slug}`}>
+                {vercelEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+VercelCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/vercel/oauth2/callback.tsx b/frontend/src/pages/integrations/vercel/oauth2/callback.tsx
new file mode 100644
index 000000000..1acf01b02
--- /dev/null
+++ b/frontend/src/pages/integrations/vercel/oauth2/callback.tsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function VercelOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'vercel'
+                });
+
+                router.push(
+                    `/integrations/vercel/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+VercelOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file

From db05412865294652bc280eda2ea73563e93f10db Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 7 Feb 2023 23:27:21 +0700
Subject: [PATCH 36/52] Fix incorrect imports, build errors

---
 frontend/src/pages/github.tsx                 |  41 -----
 frontend/src/pages/heroku.tsx                 | 159 ------------------
 frontend/src/pages/integrations/[id].tsx      |   1 +
 .../src/pages/integrations/flyio/create.tsx   |   2 +-
 .../src/pages/integrations/github/create.tsx  |   2 +-
 .../src/pages/integrations/heroku/create.tsx  |   2 +-
 .../integrations/heroku/oauth2/callback.tsx   |   4 -
 .../src/pages/integrations/netlify/create.tsx |   2 +-
 .../src/pages/integrations/render/create.tsx  |   2 +-
 .../src/pages/integrations/vercel/create.tsx  |   2 +-
 frontend/src/pages/netlify.tsx                |  46 -----
 frontend/src/pages/vercel.tsx                 |  46 -----
 12 files changed, 7 insertions(+), 302 deletions(-)
 delete mode 100644 frontend/src/pages/github.tsx
 delete mode 100644 frontend/src/pages/heroku.tsx
 delete mode 100644 frontend/src/pages/netlify.tsx
 delete mode 100644 frontend/src/pages/vercel.tsx

diff --git a/frontend/src/pages/github.tsx b/frontend/src/pages/github.tsx
deleted file mode 100644
index 37c35b194..000000000
--- a/frontend/src/pages/github.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-
-export default function Github() {
-  const router = useRouter();
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const {code} = parsedUrl;
-  const {state} = parsedUrl;
-
-  /**
-   * Here we forward to the default workspace if a user opens this url
-   */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    (async () => {
-      try {
-        if (state === localStorage.getItem('latestCSRFToken')) {
-          localStorage.removeItem('latestCSRFToken');
-          await AuthorizeIntegration({
-            workspaceId: localStorage.getItem('projectData.id') as string,
-            code: code as string,
-            integration: 'github',
-          });
-          router.push(
-            `/integrations/${localStorage.getItem('projectData.id')}`
-          );
-        }
-      } catch (error) {
-        console.error('Github integration error: ', error);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <div />;
-}
-
-Github.requireAuth = true;
diff --git a/frontend/src/pages/heroku.tsx b/frontend/src/pages/heroku.tsx
deleted file mode 100644
index 66facdc06..000000000
--- a/frontend/src/pages/heroku.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-
-import {
-  Button,
-  Card,
-  CardTitle,
-  FormControl,
-  Select,
-  SelectItem
-} from '../components/v2';
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-import getIntegrationApps from './api/integrations/GetIntegrationApps';
-import getAWorkspace from './api/workspace/getAWorkspace';
-
-interface Integration {
-  _id: string;
-  isActive: boolean;
-  app: string | null;
-  appId: string | null;
-  createdAt: string;
-  updatedAt: string;
-  environment: string;
-  integration: string;
-  targetEnvironment: string;
-  workspace: string;
-  integrationAuth: string;
-}
-
-interface IntegrationApp {
-  name: string;
-  appId?: string;
-  owner?: string;
-}
-
-export default function Heroku() {
-  const router = useRouter();
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const { code } = parsedUrl;
-  const { state } = parsedUrl;
-
-  const [integration, setIntegration] = useState<Integration | null>(null);
-  const [environments, setEnvironments] = useState<
-    {
-      name: string;
-      slug: string;
-    }[]
-  >([]);
-  const [environment, setEnvironment] = useState('');
-  const [app, setApp] = useState('');
-  const [apps, setApps] = useState<IntegrationApp[]>([]);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        if (state === localStorage.getItem('latestCSRFToken')) {
-          localStorage.removeItem('latestCSRFToken');
-          const integrationDetails = await AuthorizeIntegration({
-            workspaceId: localStorage.getItem('projectData.id') as string,
-            code: code as string,
-            integration: 'heroku',
-          });
-
-          setIntegration(integrationDetails.integration);
-
-          const workspaceId = localStorage.getItem('projectData.id');
-          if (!workspaceId) return;
-
-          const workspace = await getAWorkspace(workspaceId);
-          setEnvironment(workspace.environments[0].slug);
-          setEnvironments(workspace.environments);
-
-          const tempApps: [IntegrationApp] = await getIntegrationApps({
-            integrationAuthId: integrationDetails.integration.integrationAuth
-          });
-          
-          console.log('tempApps: ', tempApps);
-          setApp(tempApps[0].name);
-          setApps(tempApps);
-          
-          // router.push(
-          //   `/integrations/${  localStorage.getItem('projectData.id')}`
-          // );
-        }
-      } catch (error) {
-        console.error('Heroku integration error: ', error);
-      }
-    })();
-  }, []);
-  
-  const handleButtonClick = async () => {
-    try {
-      console.log('handleButtonClick');
-      console.log('project environment: ', environment);
-      console.log('app', app);
-    } catch (err) {
-      console.error(err);
-    }
-  }
-  
-  console.log('integration: ', integration);
-  console.log('environments: ', environments);
-  console.log('apps: ', apps);
-
-  return (integration && environments.length > 0 && apps.length > 0) ? (
-    <div className="h-full w-full flex justify-center items-center">
-      <Card className="max-w-md p-8 rounded-md">
-        <CardTitle className='text-center'>Heroku Integration</CardTitle>
-        <FormControl
-          label="Project Environment"
-          className='mt-4'
-        >
-          <Select
-            value={environment}
-            onValueChange={(val) => setEnvironment(val)}
-            className='w-full border border-mineshaft-500'
-          >
-            {environments.map((e) => (
-              <SelectItem value={e.slug} key={`heroku-environment-${e.slug}`}>
-                {e.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl
-          label="Heroku App"
-          className='mt-4'
-        >
-          <Select
-            value={app}
-            onValueChange={(val) => setApp(val)}
-            className='w-full border border-mineshaft-500'
-          >
-            {apps.map((a) => (
-              <SelectItem value={a.name} key={`heroku-environment-${a.name}`}>
-                {a.name}
-              </SelectItem> 
-            ))}
-          </Select>
-        </FormControl>
-          <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
-          >
-            Create Integration
-          </Button>
-      </Card>
-    </div>
-  ) : <div>Hello</div>
-}
-
-Heroku.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
\ No newline at end of file
diff --git a/frontend/src/pages/integrations/[id].tsx b/frontend/src/pages/integrations/[id].tsx
index ac2669de8..e6bc784f6 100644
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -49,6 +49,7 @@ interface Integration {
 }
 
 interface IntegrationOption {
+  tenantId?: string;
   clientId: string;
   clientSlug?: string; // vercel-integration specific
   docsLink: string;
diff --git a/frontend/src/pages/integrations/flyio/create.tsx b/frontend/src/pages/integrations/flyio/create.tsx
index 7f9d079ae..2e185d9fe 100644
--- a/frontend/src/pages/integrations/flyio/create.tsx
+++ b/frontend/src/pages/integrations/flyio/create.tsx
@@ -11,7 +11,7 @@ import {
     Select, 
     SelectItem 
 } from '../../../components/v2';
-import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
diff --git a/frontend/src/pages/integrations/github/create.tsx b/frontend/src/pages/integrations/github/create.tsx
index 324ef5715..3b39fa2d1 100644
--- a/frontend/src/pages/integrations/github/create.tsx
+++ b/frontend/src/pages/integrations/github/create.tsx
@@ -11,7 +11,7 @@ import {
     Select, 
     SelectItem 
 } from '../../../components/v2';
-import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
diff --git a/frontend/src/pages/integrations/heroku/create.tsx b/frontend/src/pages/integrations/heroku/create.tsx
index 6d3c805d5..46e379462 100644
--- a/frontend/src/pages/integrations/heroku/create.tsx
+++ b/frontend/src/pages/integrations/heroku/create.tsx
@@ -11,7 +11,7 @@ import {
     Select, 
     SelectItem 
 } from '../../../components/v2';
-import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
diff --git a/frontend/src/pages/integrations/heroku/oauth2/callback.tsx b/frontend/src/pages/integrations/heroku/oauth2/callback.tsx
index c5846170b..321255c9f 100644
--- a/frontend/src/pages/integrations/heroku/oauth2/callback.tsx
+++ b/frontend/src/pages/integrations/heroku/oauth2/callback.tsx
@@ -14,17 +14,14 @@ export default function HerokuOAuth2CallbackPage() {
         (async () => {
             try {
                 // validate state
-                console.log('A');
                 if (state !== localStorage.getItem('latestCSRFToken')) return;
                 localStorage.removeItem('latestCSRFToken');
-                console.log('B');
                 const integrationAuth = await AuthorizeIntegration({
                     workspaceId: localStorage.getItem('projectData.id') as string,
                     code: code as string,
                     integration: 'heroku'
                 });
 
-                console.log('C');
                 router.push(
                     `/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`
                 );
@@ -32,7 +29,6 @@ export default function HerokuOAuth2CallbackPage() {
             } catch (err) {
                 console.error(err);
             }
-            console.log('D');
         })();
     }, []);
     
diff --git a/frontend/src/pages/integrations/netlify/create.tsx b/frontend/src/pages/integrations/netlify/create.tsx
index 6ec6469ab..a8b6bcd05 100644
--- a/frontend/src/pages/integrations/netlify/create.tsx
+++ b/frontend/src/pages/integrations/netlify/create.tsx
@@ -11,7 +11,7 @@ import {
     Select, 
     SelectItem 
 } from '../../../components/v2';
-import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
diff --git a/frontend/src/pages/integrations/render/create.tsx b/frontend/src/pages/integrations/render/create.tsx
index 2f02408d9..3429def89 100644
--- a/frontend/src/pages/integrations/render/create.tsx
+++ b/frontend/src/pages/integrations/render/create.tsx
@@ -11,7 +11,7 @@ import {
     Select, 
     SelectItem 
 } from '../../../components/v2';
-import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
diff --git a/frontend/src/pages/integrations/vercel/create.tsx b/frontend/src/pages/integrations/vercel/create.tsx
index 5a3249378..5e0e8ad7e 100644
--- a/frontend/src/pages/integrations/vercel/create.tsx
+++ b/frontend/src/pages/integrations/vercel/create.tsx
@@ -11,7 +11,7 @@ import {
     Select, 
     SelectItem 
 } from '../../../components/v2';
-import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
diff --git a/frontend/src/pages/netlify.tsx b/frontend/src/pages/netlify.tsx
deleted file mode 100644
index 532d6044a..000000000
--- a/frontend/src/pages/netlify.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-
-export default function Netlify() {
-  const router = useRouter();
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const {code} = parsedUrl;
-  const {state} = parsedUrl;
-  // modify comment here
-
-  /**
-   * Here we forward to the default workspace if a user opens this url
-   */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!code) throw new Error('Code not found');
-
-        if (state === localStorage.getItem('latestCSRFToken')) {
-          localStorage.removeItem('latestCSRFToken');
-
-          await AuthorizeIntegration({
-            workspaceId: localStorage.getItem('projectData.id') as string,
-            code: code as string,
-            integration: 'netlify',
-          });
-
-          router.push(
-            `/integrations/${  localStorage.getItem('projectData.id')}`
-          );
-        }
-      } catch (err) {
-        console.error('Netlify integration error: ', err);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <div />;
-}
-
-Netlify.requireAuth = true;
diff --git a/frontend/src/pages/vercel.tsx b/frontend/src/pages/vercel.tsx
deleted file mode 100644
index 8e8245736..000000000
--- a/frontend/src/pages/vercel.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-
-export default function Vercel() {
-  const router = useRouter();
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const {code} = parsedUrl;
-  const {state} = parsedUrl;
-
-  /**
-   * Here we forward to the default workspace if a user opens this url
-   */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    (async () => {
-      try {
-        // type check
-        if (!code) throw new Error('Code not found');
-
-        if (state === localStorage.getItem('latestCSRFToken')) {
-          localStorage.removeItem('latestCSRFToken');
-
-          await AuthorizeIntegration({
-            workspaceId: localStorage.getItem('projectData.id') as string,
-            code: code as string,
-            integration: 'vercel',
-          });
-
-          router.push(
-            `/integrations/${  localStorage.getItem('projectData.id')}`
-          );
-        }
-      } catch (err) {
-        console.error('Vercel integration error: ', err);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <div />;
-}
-
-Vercel.requireAuth = true;

From aba8feb98507cd763ac438c69cf3dd00f5a39c47 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Wed, 8 Feb 2023 01:28:46 +0700
Subject: [PATCH 37/52] Patch encoding header issue for some integrations for
 getting their apps

---
 backend/src/integrations/apps.ts                         | 9 +++++++--
 backend/src/integrations/exchange.ts                     | 3 ++-
 frontend/src/pages/integrations/[id].tsx                 | 2 +-
 .../src/pages/integrations/github/oauth2/callback.tsx    | 1 -
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/backend/src/integrations/apps.ts b/backend/src/integrations/apps.ts
index 50f146be5..3d834d876 100644
--- a/backend/src/integrations/apps.ts
+++ b/backend/src/integrations/apps.ts
@@ -262,7 +262,9 @@ const getAppsRender = async ({
     const res = (
       await axios.get(`${INTEGRATION_RENDER_API_URL}/v1/services`, {
         headers: {
-          Authorization: `Bearer ${accessToken}`
+          Authorization: `Bearer ${accessToken}`,
+          Accept: 'application/json',
+          'Accept-Encoding': 'application/json'
         }
       })
     ).data;
@@ -272,6 +274,7 @@ const getAppsRender = async ({
         name: a.service.name,
         appId: a.service.id
       })); 
+    
   } catch (err) {
     Sentry.setUser(null);
     Sentry.captureException(err);
@@ -311,7 +314,9 @@ const getAppsFlyio = async ({
       url: INTEGRATION_FLYIO_API_URL,
       method: 'post',
       headers: {
-        'Authorization': 'Bearer ' + accessToken
+        'Authorization': 'Bearer ' + accessToken,
+        'Accept': 'application/json',
+        'Accept-Encoding': 'application/json'
       },
       data: {
         query,
diff --git a/backend/src/integrations/exchange.ts b/backend/src/integrations/exchange.ts
index 846c9e7db..8650b31a0 100644
--- a/backend/src/integrations/exchange.ts
+++ b/backend/src/integrations/exchange.ts
@@ -322,7 +322,8 @@ const exchangeCodeGithub = async ({ code }: { code: string }) => {
           redirect_uri: `${SITE_URL}/integrations/github/oauth2/callback`
         },
         headers: {
-          Accept: 'application/json'
+          'Accept': 'application/json',
+          'Accept-Encoding': 'application/json'
         }
       })
     ).data;
diff --git a/frontend/src/pages/integrations/[id].tsx b/frontend/src/pages/integrations/[id].tsx
index e6bc784f6..d802e81a8 100644
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -253,7 +253,7 @@ export default function Integrations() {
   const integrationOptionPress = async (integrationOption: IntegrationOption) => {
     try {
       const integrationAuthX = integrationAuths.find((integrationAuth) => integrationAuth.integration === integrationOption.slug);
-
+      
       if (!bot.isActive) {
         await handleBotActivate();
       }
diff --git a/frontend/src/pages/integrations/github/oauth2/callback.tsx b/frontend/src/pages/integrations/github/oauth2/callback.tsx
index ab2bb18c8..a3fd7e84c 100644
--- a/frontend/src/pages/integrations/github/oauth2/callback.tsx
+++ b/frontend/src/pages/integrations/github/oauth2/callback.tsx
@@ -7,7 +7,6 @@ import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration
 
 export default function GitHubOAuth2CallbackPage() {
     const router = useRouter();
-
     const { code, state } = queryString.parse(router.asPath.split('?')[1]);
     
     useEffect(() => {

From 8b23e89a6451a846c29312ac04014051273fc582 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Tue, 7 Feb 2023 12:38:43 -0800
Subject: [PATCH 38/52] add k8 diagram

---
 docs/images/k8-diagram.png                 | Bin 0 -> 134131 bytes
 docs/integrations/platforms/kubernetes.mdx |   3 +++
 2 files changed, 3 insertions(+)
 create mode 100644 docs/images/k8-diagram.png

diff --git a/docs/images/k8-diagram.png b/docs/images/k8-diagram.png
new file mode 100644
index 0000000000000000000000000000000000000000..f45d301bc2d2daa4a88fcee185b83ebeccb1a143
GIT binary patch
literal 134131
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

literal 0
HcmV?d00001

diff --git a/docs/integrations/platforms/kubernetes.mdx b/docs/integrations/platforms/kubernetes.mdx
index 189dc9d7b..1bc90a540 100644
--- a/docs/integrations/platforms/kubernetes.mdx
+++ b/docs/integrations/platforms/kubernetes.mdx
@@ -3,6 +3,9 @@ title: 'Kubernetes'
 description: "This page explains how to use Infisical to inject secrets into Kubernetes clusters."
 ---
 
+![title](../../images/k8-diagram.png)
+
+
 The Infisical Secrets Operator is a custom Kubernetes controller that helps keep secrets in a cluster up to date by synchronizing them.
 It is installed in its own namespace within the cluster and follows strict RBAC policies.
 The operator uses InfisicalSecret custom resources to identify which secrets to sync and where to store them.

From 6e67304e924b607af5cb60d15ffb6d2c2c2d86aa Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Tue, 7 Feb 2023 12:54:09 -0800
Subject: [PATCH 39/52] Update wording of k8

---
 docs/integrations/platforms/kubernetes.mdx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/integrations/platforms/kubernetes.mdx b/docs/integrations/platforms/kubernetes.mdx
index 1bc90a540..07ce0aae3 100644
--- a/docs/integrations/platforms/kubernetes.mdx
+++ b/docs/integrations/platforms/kubernetes.mdx
@@ -6,10 +6,9 @@ description: "This page explains how to use Infisical to inject secrets into Kub
 ![title](../../images/k8-diagram.png)
 
 
-The Infisical Secrets Operator is a custom Kubernetes controller that helps keep secrets in a cluster up to date by synchronizing them.
-It is installed in its own namespace within the cluster and follows strict RBAC policies.
-The operator uses InfisicalSecret custom resources to identify which secrets to sync and where to store them.
-It is responsible for continuously updating managed secrets, and in the future may also automatically reload deployments that use them as needed.
+The Infisical Secrets Operator is a Kubernetes controller that retrieves secrets from Infisical and stores them in a designated cluster. 
+It uses an `InfisicalSecret` resource to specify authentication and storage methods.
+The operator continuously updates secrets and can also reload dependent deployments automatically.
 
 ## Install Operator
 

From d8889beaf7e86803c4494a21a8d4b652425792b9 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Tue, 7 Feb 2023 12:58:39 -0800
Subject: [PATCH 40/52] mark gitlab as complete

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1ec8cff50..64d643e7f 100644
--- a/README.md
+++ b/README.md
@@ -171,7 +171,9 @@ We're currently setting the foundation and building [integrations](https://infis
         🔜 GCP SM (https://github.com/Infisical/infisical/issues/285)
       </td>
       <td align="left" valign="middle">
-        🔜 GitLab CI/CD (https://github.com/Infisical/infisical/issues/134)
+        <a href="https://infisical.com/docs/integrations/cicd/gitlab">
+          ✔️ GitLab CI/CD 
+        </a>
       </td>
       <td align="left" valign="middle">
         🔜 CircleCI (https://github.com/Infisical/infisical/issues/91)

From 78926247091a9404e62f5a8ef2bf40f1b4f3a267 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Tue, 7 Feb 2023 16:29:15 -0800
Subject: [PATCH 41/52] Added tags to secrets in the dashboard

---
 .../src/controllers/v2/secretsController.ts   |  15 ++
 backend/src/controllers/v2/tagController.ts   |   4 +-
 .../v1/secretSnapshotController.ts            |   8 +-
 frontend/public/data/frequentInterfaces.ts    |  10 +
 .../basic/dialog/AddWorkspaceDialog.tsx       |   8 +-
 .../basic/table/EnvironmentsTable.tsx         |   2 +-
 .../src/components/dashboard/AddTagsMenu.tsx  |  61 ++++++
 .../dashboard/DashboardInputField.tsx         |   7 +-
 .../dashboard/DeleteActionButton.tsx          |   2 +-
 .../src/components/dashboard/DropZone.tsx     |   6 +-
 frontend/src/components/dashboard/KeyPair.tsx |  91 +++++++--
 frontend/src/components/dashboard/SideBar.tsx |   2 +-
 .../utilities/secrets/encryptSecrets.ts       |   6 +-
 .../utilities/secrets/getSecretsForProject.ts |  12 +-
 .../DeleteActionModal/DeleteActionModal.tsx   |   2 +-
 frontend/src/components/v2/Select/Select.tsx  |   2 +-
 .../src/ee/components/PITRecoverySidebar.tsx  |   8 +-
 frontend/src/hooks/api/index.tsx              |   1 +
 frontend/src/hooks/api/tags/index.tsx         |   3 +
 frontend/src/hooks/api/tags/queries.tsx       |  62 ++++++
 frontend/src/hooks/api/tags/types.ts          |  39 ++++
 frontend/src/hooks/api/types.ts               |   3 +-
 frontend/src/hooks/api/workspace/index.tsx    |   3 +-
 frontend/src/hooks/api/workspace/types.ts     |   1 +
 .../pages/api/workspace/getWorkspaceTags.ts   |  22 +++
 frontend/src/pages/dashboard/[id].tsx         | 171 +++++++++++-----
 .../ProjectSettingsPage.tsx                   |  56 +++++-
 .../EnvironmentSection/EnvironmentSection.tsx |   2 +-
 .../SecretTagsSection/SecretTagsSection.tsx   | 186 ++++++++++++++++++
 .../components/SecretTagsSection/index.tsx    |   1 +
 .../ProjectSettingsPage/components/index.tsx  |   1 +
 31 files changed, 695 insertions(+), 102 deletions(-)
 create mode 100644 frontend/src/components/dashboard/AddTagsMenu.tsx
 create mode 100644 frontend/src/hooks/api/tags/index.tsx
 create mode 100644 frontend/src/hooks/api/tags/queries.tsx
 create mode 100644 frontend/src/hooks/api/tags/types.ts
 create mode 100644 frontend/src/pages/api/workspace/getWorkspaceTags.ts
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx

diff --git a/backend/src/controllers/v2/secretsController.ts b/backend/src/controllers/v2/secretsController.ts
index 5ac86e903..ff39791ac 100644
--- a/backend/src/controllers/v2/secretsController.ts
+++ b/backend/src/controllers/v2/secretsController.ts
@@ -103,6 +103,9 @@ export const createSecrets = async (req: Request, res: Response) => {
         secretValueCiphertext: string;
         secretValueIV: string;
         secretValueTag: string;
+        secretCommentCiphertext: string;
+        secretCommentIV: string;
+        secretCommentTag: string;
         tags: string[]
     }
 
@@ -115,6 +118,9 @@ export const createSecrets = async (req: Request, res: Response) => {
             secretValueCiphertext,
             secretValueIV,
             secretValueTag,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
             tags
         }: secretsToCreateType) => {
             return ({
@@ -129,6 +135,9 @@ export const createSecrets = async (req: Request, res: Response) => {
                 secretValueCiphertext,
                 secretValueIV,
                 secretValueTag,
+                secretCommentCiphertext,
+                secretCommentIV,
+                secretCommentTag,
                 tags
             });
         })
@@ -160,6 +169,9 @@ export const createSecrets = async (req: Request, res: Response) => {
             secretValueIV,
             secretValueTag,
             secretValueHash,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
             tags
         }) => ({
             _id: new Types.ObjectId(),
@@ -178,6 +190,9 @@ export const createSecrets = async (req: Request, res: Response) => {
             secretValueIV,
             secretValueTag,
             secretValueHash,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
             tags
         }))
     });
diff --git a/backend/src/controllers/v2/tagController.ts b/backend/src/controllers/v2/tagController.ts
index 250ee08a5..b737eb41a 100644
--- a/backend/src/controllers/v2/tagController.ts
+++ b/backend/src/controllers/v2/tagController.ts
@@ -52,9 +52,9 @@ export const deleteWorkspaceTag = async (req: Request, res: Response) => {
 		UnauthorizedRequestError({ message: 'Failed to validate membership' });
 	}
 
-	await Tag.findByIdAndDelete(tagId)
+	const result = await Tag.findByIdAndDelete(tagId);
 
-	res.sendStatus(200)
+	res.json(result);
 }
 
 export const getWorkspaceTags = async (req: Request, res: Response) => {
diff --git a/backend/src/ee/controllers/v1/secretSnapshotController.ts b/backend/src/ee/controllers/v1/secretSnapshotController.ts
index 6e8605c2f..ae3af7958 100644
--- a/backend/src/ee/controllers/v1/secretSnapshotController.ts
+++ b/backend/src/ee/controllers/v1/secretSnapshotController.ts
@@ -15,7 +15,13 @@ export const getSecretSnapshot = async (req: Request, res: Response) => {
 
         secretSnapshot = await SecretSnapshot
             .findById(secretSnapshotId)
-            .populate('secretVersions');
+            .populate({
+                path: 'secretVersions',
+                populate: {
+                    path: 'tags',
+                    model: 'Tag',
+                }
+            });
         
         if (!secretSnapshot) throw new Error('Failed to find secret snapshot');
         
diff --git a/frontend/public/data/frequentInterfaces.ts b/frontend/public/data/frequentInterfaces.ts
index c2fa797fd..9865d9909 100644
--- a/frontend/public/data/frequentInterfaces.ts
+++ b/frontend/public/data/frequentInterfaces.ts
@@ -1,3 +1,12 @@
+export interface Tag {
+  _id: string; 
+  name: string;
+  slug: string;
+  user: string;
+  workspace: string;
+  createdAt: string;
+}
+
 export interface SecretDataProps {
   pos: number;
   key: string;
@@ -5,4 +14,5 @@ export interface SecretDataProps {
   valueOverride: string | undefined;
   id: string;
   comment: string;
+  tags: Tag[];
 }
\ No newline at end of file
diff --git a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
index d9cf17645..88dc7cb78 100644
--- a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
+++ b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
@@ -36,7 +36,7 @@ const AddWorkspaceDialog = ({
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={closeModal}>
+        <Dialog as="div" className="relative z-[100]" onClose={closeModal}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -49,7 +49,7 @@ const AddWorkspaceDialog = ({
             <div className="fixed inset-0 bg-black bg-opacity-70" />
           </Transition.Child>
 
-          <div className="fixed inset-0 overflow-y-auto z-50">
+          <div className="fixed inset-0 overflow-y-auto">
             <div className="flex min-h-full items-center justify-center p-4 text-center">
               <Transition.Child
                 as={Fragment}
@@ -60,7 +60,7 @@ const AddWorkspaceDialog = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-400"
@@ -69,7 +69,7 @@ const AddWorkspaceDialog = ({
                   </Dialog.Title>
                   <div className="mt-2">
                     <p className="text-sm text-gray-500">
-                      This project will contain your environmental variables.
+                      This project will contain your secrets and configs.
                     </p>
                   </div>
                   <div className="max-h-28 mt-4">
diff --git a/frontend/src/components/basic/table/EnvironmentsTable.tsx b/frontend/src/components/basic/table/EnvironmentsTable.tsx
index 37411c366..f4e02a3bb 100644
--- a/frontend/src/components/basic/table/EnvironmentsTable.tsx
+++ b/frontend/src/components/basic/table/EnvironmentsTable.tsx
@@ -83,7 +83,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
         </div>
         <div className="w-48">
           <Button
-            text="Add New Env"
+            text="Add New Environment"
             onButtonPressed={() => {
               if (plan !== plans.starter || host !== 'https://app.infisical.com') {
                 handlePopUpOpen('createUpdateEnv');
diff --git a/frontend/src/components/dashboard/AddTagsMenu.tsx b/frontend/src/components/dashboard/AddTagsMenu.tsx
new file mode 100644
index 000000000..1b0790079
--- /dev/null
+++ b/frontend/src/components/dashboard/AddTagsMenu.tsx
@@ -0,0 +1,61 @@
+import { Fragment } from 'react';
+import { useRouter } from 'next/router';
+import { faCheckSquare, faPlus, faSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Menu, Transition } from '@headlessui/react';
+import { Tag } from 'public/data/frequentInterfaces';
+
+/**
+ * This is the menu that is used to download secrets as .env ad .yml files (in future we may have more options)
+ * @param {object} obj
+ * @param {SecretDataProps[]} obj.data - 
+ * 
+ */
+const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags: Tag[]; currentTags: Tag[]; modifyTags: (value: Tag[], position: number) => void; position: number; }) => {
+  const router = useRouter();
+  return (
+    <Menu as="div" className="ml-2 relative inline-block text-left">
+      <Menu.Button
+        as="div"
+        className="flex justify-center items-center font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+      >
+        <div className='bg-mineshaft/30 cursor-pointer rounded-sm text-sm text-mineshaft-200/50 hover:bg-mineshaft/70 duration-200 flex items-center'>
+          <FontAwesomeIcon icon={faPlus} className="p-[0.28rem]"/>
+          {currentTags.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
+        </div>
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute z-[90] text-sm drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-mineshaft-600 border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-1 space-y-1">
+          {allTags?.map((tag) => { return (
+            <Menu.Item key={tag._id}>
+              <button
+                type="button"
+                className={`${currentTags.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
+                onClick={() => {if (!currentTags.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
+              >
+                {currentTags.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
+              </button>
+            </Menu.Item>
+          )})}
+          <button
+            type="button"
+            className='w-full text-left bg-mineshaft-800 hover:bg-primary hover:text-black duration-200 px-2 py-0.5 text-bunker-200 rounded-sm'
+            onClick={() => router.push(`/settings/project/${String(router.query.id)}`)}
+          >
+            <FontAwesomeIcon icon={faPlus} className="mr-2 text-xs" />Add more tags
+          </button>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default AddTagsMenu;
diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend/src/components/dashboard/DashboardInputField.tsx
index c3f7e9a65..5b8cf9b69 100644
--- a/frontend/src/components/dashboard/DashboardInputField.tsx
+++ b/frontend/src/components/dashboard/DashboardInputField.tsx
@@ -3,7 +3,6 @@ import { faCircle, faExclamationCircle, faEye, faLayerGroup } from '@fortawesome
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import guidGenerator from '../utilities/randomId';
-import { Button } from '../v2';
 import { HoverObject } from '../v2/HoverCard';
 
 const REGEX = /([$]{.*?})/g;
@@ -99,8 +98,8 @@ const DashboardInputField = ({
         )}
         {!error && <div className={`absolute right-0 top-0 text-red z-50 ${
           overrideEnabled ? 'visible group-hover:bg-mineshaft-700' : 'invisible group-hover:visible bg-mineshaft-700'
-        } cursor-pointer duration-0`}>
-          <Button variant="plain" onClick={() => {
+        } cursor-pointer duration-0 h-10 flex items-center px-2`}>
+          <button type="button" onClick={() => {
             if (modifyValueOverride) {
               if (overrideEnabled === false) {
                 modifyValueOverride('', position);
@@ -114,7 +113,7 @@ const DashboardInputField = ({
               icon={faLayerGroup}
               color={overrideEnabled ? 'primary' : 'bunker-400'}
             />
-          </Button>
+          </button>
         </div>}
       </div>
     );
diff --git a/frontend/src/components/dashboard/DeleteActionButton.tsx b/frontend/src/components/dashboard/DeleteActionButton.tsx
index d0708f239..91819b43c 100644
--- a/frontend/src/components/dashboard/DeleteActionButton.tsx
+++ b/frontend/src/components/dashboard/DeleteActionButton.tsx
@@ -19,7 +19,7 @@ export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
     <div className={`${
       !isPlain 
       ? 'bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2'
-      : 'cursor-pointer w-[2.35rem] h-[2.35rem] flex items-center justfy-center'}`}>
+      : 'cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'}`}>
       {isPlain 
       ? <div
         onKeyDown={() => null}
diff --git a/frontend/src/components/dashboard/DropZone.tsx b/frontend/src/components/dashboard/DropZone.tsx
index 5b1c0cd45..cd6d8650b 100644
--- a/frontend/src/components/dashboard/DropZone.tsx
+++ b/frontend/src/components/dashboard/DropZone.tsx
@@ -64,7 +64,8 @@ const DropZone = ({
           key,
           value: keyPairs[key as keyof typeof keyPairs].value,
           comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
-          type: 'shared'
+          type: 'shared',
+          tags: []
         }));
         break;
       }
@@ -86,7 +87,8 @@ const DropZone = ({
             key,
             value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
             comment,
-            type: 'shared'
+            type: 'shared',
+            tags: []
           };
         });
         break;
diff --git a/frontend/src/components/dashboard/KeyPair.tsx b/frontend/src/components/dashboard/KeyPair.tsx
index c87dd7f96..27409a57a 100644
--- a/frontend/src/components/dashboard/KeyPair.tsx
+++ b/frontend/src/components/dashboard/KeyPair.tsx
@@ -1,7 +1,8 @@
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsis, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';
 
+import AddTagsMenu from './AddTagsMenu';
 import DashboardInputField from './DashboardInputField';
 import { DeleteActionButton } from './DeleteActionButton';
 
@@ -11,12 +12,15 @@ interface KeyPairProps {
   modifyValue: (value: string, position: number) => void;
   modifyValueOverride: (value: string | undefined, position: number) => void;
   modifyComment: (value: string, position: number) => void;
+  modifyTags: (value: Tag[], position: number) => void;
   isBlurred: boolean;
   isDuplicate: boolean;
   toggleSidebar: (id: string) => void;
   sidebarSecretId: string;
   isSnapshot: boolean;
   deleteRow?: (props: DeleteRowFunctionProps) => void;
+  tags: Tag[];
+  togglePITSidebar?: (value: boolean) => void;
 }
 
 export interface DeleteRowFunctionProps {
@@ -24,6 +28,23 @@ export interface DeleteRowFunctionProps {
   secretName: string;
 }
 
+const colors = [
+  'bg-[#f1c40f]/40',
+  'bg-[#cb1c8d]/40',
+  'bg-[#badc58]/40',
+  'bg-[#ff5400]/40',
+  'bg-[#00bbf9]/40'
+]
+
+
+const colorsText = [
+  'text-[#fcf0c3]/70',
+  'text-[#f2c6e3]/70',
+  'text-[#eef6d5]/70',
+  'text-[#ffddcc]/70',
+  'text-[#f0fffd]/70'
+]
+
 /**
  * This component represent a single row for an environemnt variable on the dashboard
  * @param {object} obj
@@ -32,12 +53,15 @@ export interface DeleteRowFunctionProps {
  * @param {function} obj.modifyValue - modify the value of a certain environment variable
  * @param {function} obj.modifyValueOverride - modify the value of a certain environment variable if it is overriden
  * @param {function} obj.modifyComment - modify the comment of a certain environment variable
+ * @param {function} obj.modifyTags - modify the tags of a certain environment variable
  * @param {boolean} obj.isBlurred - if the blurring setting is turned on
  * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
  * @param {function} obj.toggleSidebar - open/close/switch sidebar
  * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
  * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar
  * @param {function} obj.deleteRow - a function to delete a certain keyPair
+ * @param {function} obj.togglePITSidebar - open or close the Point-in-time recovery sidebar
+ * @param {Tag[]} obj.tags - tags for a certain secret
  * @returns
  */
 const KeyPair = ({
@@ -46,21 +70,31 @@ const KeyPair = ({
   modifyValue,
   modifyValueOverride,
   modifyComment,
+  modifyTags,
   isBlurred,
   isDuplicate,
   toggleSidebar,
   sidebarSecretId,
   isSnapshot, 
-  deleteRow
-}: KeyPairProps) => (
+  deleteRow,
+  togglePITSidebar,
+  tags
+}: KeyPairProps) => {
+  const tagData = (tags.map((tag, index) => {return {
+    ...tag, 
+    color: colors[index%colors.length], 
+    colorText: colorsText[index%colorsText.length]
+  }}));
+
+  return (
   <div
     className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && 'pointer-events-none'} ${
       keyPair.id === sidebarSecretId && 'bg-mineshaft-700 duration-200'
     }`}
   >
     <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-      <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
-      <div className="w-80 border-r border-mineshaft-600">
+      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+        <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
         <div className="flex items-center max-h-16">
           <DashboardInputField
             onChangeHandler={modifyKey}
@@ -74,7 +108,7 @@ const KeyPair = ({
           />
         </div>
       </div>
-      <div className="w-full border-r border-mineshaft-600">
+      <div className="w-5/12 border-r border-mineshaft-600">
         <div
           className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
         >
@@ -89,7 +123,7 @@ const KeyPair = ({
           />
         </div>
       </div>
-      <div className="w-96 border-r border-mineshaft-600">
+      <div className="w-2/12 border-r border-mineshaft-600">
         <div className="flex items-center max-h-16">
           <DashboardInputField
             onChangeHandler={modifyComment}
@@ -101,27 +135,42 @@ const KeyPair = ({
           />
         </div>
       </div>
-      {!isSnapshot && (
-        <div
-          onKeyDown={() => null}
-          role="button"
-          tabIndex={0}
-          onClick={() => toggleSidebar(keyPair.id)}
-          className="cursor-pointer w-[2.35rem] h-[2.35rem] px-6 rounded-md invisible group-hover:visible flex flex-row justify-center items-center"
-        >
-          <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
+      <div className="w-2/12 h-10 flex items-center overflow-visible overflow-r-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+        <div className="flex items-center max-h-16">
+          {keyPair.tags.map((tag, index) => (
+            index < 2 && <div key={keyPair.pos} className={`ml-2 px-1.5 ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.color} rounded-sm text-sm ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.colorText} flex items-center`}>
+              <span className='mb-0.5 cursor-default'>{tag.name}</span>
+              <FontAwesomeIcon icon={faXmark} className="ml-1 cursor-pointer p-1" onClick={() => modifyTags(keyPair.tags.filter(ttag => ttag._id !== tag._id), keyPair.pos)}/>
+            </div>
+          ))}
+          
+          <AddTagsMenu allTags={tags} currentTags={keyPair.tags} modifyTags={modifyTags} position={keyPair.pos} />
         </div>
-      )}
-      {!isSnapshot && (
+      </div>
+      <div
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+        onClick={() => {
+          if (togglePITSidebar) {
+            togglePITSidebar(false);
+          }
+          toggleSidebar(keyPair.id)
+        }}
+        className={`cursor-pointer w-[1.5rem] h-[2.35rem] ml-auto group-hover:bg-mineshaft-700 z-50 rounded-md invisible group-hover:visible flex flex-row justify-center items-center ${isSnapshot ?? 'invisible'}`}
+      >
+        <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
+      </div>
+      <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? 'invisible'}`}>
         <DeleteActionButton
           onSubmit={() => { if (deleteRow) {
             deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
           }}}
           isPlain
         />
-      )}
+      </div>
     </div>
   </div>
-);
+)};
 
 export default KeyPair;
diff --git a/frontend/src/components/dashboard/SideBar.tsx b/frontend/src/components/dashboard/SideBar.tsx
index a40dc1634..1d0996376 100644
--- a/frontend/src/components/dashboard/SideBar.tsx
+++ b/frontend/src/components/dashboard/SideBar.tsx
@@ -80,7 +80,7 @@ const SideBar = ({
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 right-0 z-[70] shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-[28rem] sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
       {isLoading ? (
         <div className="flex items-center justify-center h-full">
           <Image
diff --git a/frontend/src/components/utilities/secrets/encryptSecrets.ts b/frontend/src/components/utilities/secrets/encryptSecrets.ts
index 53ce0066d..11d9e8d22 100644
--- a/frontend/src/components/utilities/secrets/encryptSecrets.ts
+++ b/frontend/src/components/utilities/secrets/encryptSecrets.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 
-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';
 
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 
@@ -20,6 +20,7 @@ interface EncryptedSecretProps {
   secretValueIV: string;
   secretValueTag: string;
   type: 'personal' | 'shared';
+  tags: Tag[];
 }
 
 /**
@@ -105,7 +106,8 @@ const encryptSecrets = async ({
         type:
           secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
             ? 'shared'
-            : 'personal'
+            : 'personal',
+        tags: secret.tags
       };
 
       return result;
diff --git a/frontend/src/components/utilities/secrets/getSecretsForProject.ts b/frontend/src/components/utilities/secrets/getSecretsForProject.ts
index 62c1e2e2d..28491a3e4 100644
--- a/frontend/src/components/utilities/secrets/getSecretsForProject.ts
+++ b/frontend/src/components/utilities/secrets/getSecretsForProject.ts
@@ -1,3 +1,5 @@
+import { Tag } from 'public/data/frequentInterfaces';
+
 import getSecrets from '@app/pages/api/files/GetSecrets';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 
@@ -17,6 +19,7 @@ interface EncryptedSecretProps {
   secretValueIV: string;
   secretValueTag: string;
   type: 'personal' | 'shared';
+  tags: Tag[];
 }
 
 interface SecretProps {
@@ -25,6 +28,7 @@ interface SecretProps {
   type: 'personal' | 'shared';
   comment: string;
   id: string;
+  tags: Tag[];
 }
 
 interface FunctionProps {
@@ -107,7 +111,8 @@ const getSecretsForProject = async ({
           key: plainTextKey,
           value: plainTextValue,
           type: secret.type,
-          comment: plainTextComment
+          comment: plainTextComment,
+          tags: secret.tags
         });
       });
     }
@@ -130,7 +135,10 @@ const getSecretsForProject = async ({
       )[0]?.value,
       comment: tempDecryptedSecrets.filter(
         (secret) => secret.key === key && secret.type === 'shared'
-      )[0]?.comment
+      )[0]?.comment,
+      tags: tempDecryptedSecrets.filter(
+        (secret) => secret.key === key && secret.type === 'shared'
+      )[0]?.tags
     }));
 
     if (typeof setData === 'function') {
diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
index 7678af3cf..1d072cc89 100644
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -52,7 +52,7 @@ export const DeleteActionModal = ({
     >
       <ModalContent
         title={title}
-        subTitle="This action is irreversible!!!"
+        subTitle="This action is irreversible!"
         footerContent={
           <div className="flex items-center">
             <Button
diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index 0a691e9eb..86ccc1079 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -41,7 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md',
+              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
               dropdownContainerClassName
             )}
           >
diff --git a/frontend/src/ee/components/PITRecoverySidebar.tsx b/frontend/src/ee/components/PITRecoverySidebar.tsx
index b13e3b66a..204973228 100644
--- a/frontend/src/ee/components/PITRecoverySidebar.tsx
+++ b/frontend/src/ee/components/PITRecoverySidebar.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tag } from 'public/data/frequentInterfaces';
 
 import Button from '@app/components/basic/buttons/Button';
 import {
@@ -48,6 +49,7 @@ interface EncrypetedSecretVersionListProps {
   secretKeyTag: string;
   environment: string;
   type: 'personal' | 'shared';
+  tags: Tag[];
 }
 
 /**
@@ -106,6 +108,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
         pos,
         type: encryptedSecretVersion.type,
         environment: encryptedSecretVersion.environment,
+        tags: encryptedSecretVersion.tags,
         key: decryptSymmetric({
           ciphertext: encryptedSecretVersion.secretKeyCiphertext,
           iv: encryptedSecretVersion.secretKeyIV,
@@ -134,6 +137,9 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
       environment: decryptedSecretVersions.filter(
         (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
       )[0].environment,
+      tags: decryptedSecretVersions.filter(
+        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
+      )[0].tags,
       value: decryptedSecretVersions.filter(
         (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
       )[0]?.value,
@@ -155,7 +161,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
     <div
       className={`absolute border-l border-mineshaft-500 ${
         isLoading ? 'bg-bunker-800' : 'bg-bunker'
-      } fixed h-full w-96 right-0 z-[70] shadow-xl flex flex-col justify-between`}
+      } fixed h-full w-[28rem] right-0 z-[70] shadow-xl flex flex-col justify-between sticky top-0`}
     >
       {isLoading ? (
         <div className="flex items-center justify-center h-full mb-8">
diff --git a/frontend/src/hooks/api/index.tsx b/frontend/src/hooks/api/index.tsx
index 424fb514a..263f7e152 100644
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -2,4 +2,5 @@ export * from './auth';
 export * from './keys';
 export * from './serviceTokens';
 export * from './subscriptions';
+export * from './tags';
 export * from './workspace';
diff --git a/frontend/src/hooks/api/tags/index.tsx b/frontend/src/hooks/api/tags/index.tsx
new file mode 100644
index 000000000..c37b75a2c
--- /dev/null
+++ b/frontend/src/hooks/api/tags/index.tsx
@@ -0,0 +1,3 @@
+export { useGetWsTags } from './queries';
+export { useCreateWsTag } from './queries';
+export { useDeleteWsTag } from './queries';
diff --git a/frontend/src/hooks/api/tags/queries.tsx b/frontend/src/hooks/api/tags/queries.tsx
new file mode 100644
index 000000000..17bd8092a
--- /dev/null
+++ b/frontend/src/hooks/api/tags/queries.tsx
@@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateTagDTO,
+  CreateTagRes,
+  DeleteTagDTO,
+  DeleteWsTagRes,
+  UserWsTags
+} from './types';
+
+
+const workspaceTags = {
+  getWsTags: (workspaceID: string) => ['workspace-tags', { workspaceID }] as const
+};
+
+const fetchWsTag = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ workspaceTags: UserWsTags }>(
+    `/api/v2/workspace/${workspaceID}/tags`
+  );
+
+  return data.workspaceTags;
+};
+
+export const useGetWsTags = (workspaceID: string) =>
+  useQuery({
+    queryKey: workspaceTags.getWsTags(workspaceID),
+    queryFn: () => fetchWsTag(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
+
+export const useCreateWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<CreateTagRes, {}, CreateTagDTO>({
+    mutationFn: async ({ workspaceID, tagName, tagSlug }) => {
+      const { data } = await apiRequest.post(`/api/v2/workspace/${workspaceID}/tags`, {
+        name: tagName,
+        slug: tagSlug
+      })
+      return data;
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};
+
+export const useDeleteWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteWsTagRes, {}, DeleteTagDTO>({
+    mutationFn: async ({ tagID }) => {
+      const { data } = await apiRequest.delete(`/api/v2/workspace/tags/${tagID}`);
+      return data
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/tags/types.ts b/frontend/src/hooks/api/tags/types.ts
new file mode 100644
index 000000000..56b7171bf
--- /dev/null
+++ b/frontend/src/hooks/api/tags/types.ts
@@ -0,0 +1,39 @@
+export type UserWsTags = WsTag[];
+
+export type WsTag = {
+  _id: string;
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
+export type WorkspaceTag = { _id: string; name: string; slug: string };
+
+export type CreateTagDTO = {
+  workspaceID: string;
+  tagSlug: string;
+  tagName: string;
+};
+
+export type CreateTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};
+
+export type DeleteTagDTO = { tagID: string; };
+
+export type DeleteWsTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/api/types.ts b/frontend/src/hooks/api/types.ts
index cc7498b72..a0475e24e 100644
--- a/frontend/src/hooks/api/types.ts
+++ b/frontend/src/hooks/api/types.ts
@@ -9,5 +9,6 @@ export type {
   RenameWorkspaceDTO,
   UpdateEnvironmentDTO,
   Workspace,
-  WorkspaceEnv
+  WorkspaceEnv,
+  WorkspaceTag
 } from './workspace/types';
diff --git a/frontend/src/hooks/api/workspace/index.tsx b/frontend/src/hooks/api/workspace/index.tsx
index 5de95ab05..a31cd1517 100644
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -4,5 +4,4 @@ export {
   useDeleteWsEnvironment,
   useGetUserWorkspaces,
   useRenameWorkspace,
-  useUpdateWsEnvironment
-} from './queries';
+  useUpdateWsEnvironment} from './queries';
diff --git a/frontend/src/hooks/api/workspace/types.ts b/frontend/src/hooks/api/workspace/types.ts
index cc4709477..acca75dab 100644
--- a/frontend/src/hooks/api/workspace/types.ts
+++ b/frontend/src/hooks/api/workspace/types.ts
@@ -7,6 +7,7 @@ export type Workspace = {
 };
 
 export type WorkspaceEnv = { name: string; slug: string };
+export type WorkspaceTag = { _id: string; name: string; slug: string };
 
 // mutation dto
 export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
diff --git a/frontend/src/pages/api/workspace/getWorkspaceTags.ts b/frontend/src/pages/api/workspace/getWorkspaceTags.ts
new file mode 100644
index 000000000..9a27a8f90
--- /dev/null
+++ b/frontend/src/pages/api/workspace/getWorkspaceTags.ts
@@ -0,0 +1,22 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+/**
+ * This route lets us get the tags for a certain project
+ * @param {string} workspaceId
+ * @returns
+ */
+const getWorkspaceTags = ({ workspaceId }: { workspaceId: string }) =>
+  SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/tags`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }).then(async (res) => {
+    if (res?.status === 200) {
+      return (await res.json()).workspaceTags;
+    }
+    console.log('Failed to get the tags available in a certain project');
+    return undefined;
+  });
+
+export default getWorkspaceTags;
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index d5b26c2f5..2fbcaa7da 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -14,9 +14,11 @@ import {
   faEyeSlash,
   faFolderOpen,
   faMagnifyingGlass,
-  faPlus
+  faPlus,
+  faXmark
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tag } from 'public/data/frequentInterfaces';
 
 import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
@@ -44,6 +46,7 @@ import checkUserAction from '../api/userActions/checkUserAction';
 import registerUserAction from '../api/userActions/registerUserAction';
 import getWorkspaceEnvironments from '../api/workspace/getWorkspaceEnvironments';
 import getWorkspaces from '../api/workspace/getWorkspaces';
+import getWorkspaceTags from '../api/workspace/getWorkspaceTags';
 
 type WorkspaceEnv = {
   name: string;
@@ -59,6 +62,7 @@ interface SecretDataProps {
   id: string;
   idOverride: string | undefined;
   comment: string;
+  tags: Tag[];
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -82,6 +86,7 @@ interface SnapshotProps {
     value: string;
     valueOverride: string;
     comment: string;
+    tags: Tag[];
   }[];
 }
 
@@ -126,6 +131,7 @@ export default function Dashboard() {
   const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
   const [numSnapshots, setNumSnapshots] = useState<number>();
   const [saveLoading, setSaveLoading] = useState(false);
+  const [projectTags, setProjectTags] = useState<Tag[]>([]);
 
   const { t } = useTranslation();
   const { createNotification } = useNotificationContext();
@@ -233,6 +239,8 @@ export default function Dashboard() {
           action: 'first_time_secrets_pushed'
         });
         setHasUserEverPushed(!!userAction);
+
+        setProjectTags(await getWorkspaceTags({ workspaceId }));
       } catch (error) {
         console.log('Error', error);
         setData(undefined);
@@ -275,7 +283,8 @@ export default function Dashboard() {
         key: '',
         value: '',
         valueOverride: undefined,
-        comment: ''
+        comment: '',
+        tags: []
       },
       ...data!
     ]);
@@ -295,7 +304,8 @@ export default function Dashboard() {
         key: '',
         value: '',
         valueOverride: undefined,
-        comment: ''
+        comment: '',
+        tags: []
       },
     ]);
   };
@@ -333,6 +343,11 @@ export default function Dashboard() {
     setButtonReady(true);
   };
 
+  const modifyTags = (tags: Tag[], pos: number) => {
+    setData((oldData) => oldData?.map((e) => (e.pos === pos ? { ...e, tags } : e)));
+    setButtonReady(true);
+  };
+
   // For speed purposes and better perforamance, we are using useCallback
   const listenChangeValue = useCallback((value: string, pos: number) => {
     modifyValue(value, pos);
@@ -350,6 +365,10 @@ export default function Dashboard() {
     modifyComment(value, pos);
   }, []);
 
+  const listenChangeTags = useCallback((value: Tag[], pos: number) => {
+    modifyTags(value, pos);
+  }, []);
+
   /**
    * Save the changes of environment variables and push them to the database
    */
@@ -422,7 +441,9 @@ export default function Dashboard() {
               newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
                 initDataPoint.key ||
               newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].comment !==
-                initDataPoint.comment)
+                initDataPoint.comment) ||
+              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].tags !==
+                initDataPoint.tags
         )
         .map((secret) => secret.id)
         .includes(newDataPoint.id)
@@ -456,7 +477,8 @@ export default function Dashboard() {
         valueOverride: override.valueOverride,
         comment: '',
         id: String(override.idOverride),
-        idOverride: String(override.idOverride)
+        idOverride: String(override.idOverride),
+        tags: override.tags
       }));
     console.log('override add', overridesToBeAdded.length);
 
@@ -471,7 +493,9 @@ export default function Dashboard() {
                 newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
                   initDataPoint.key ||
                 newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
-                  .comment !== initDataPoint.comment)
+                  .comment !== initDataPoint.comment ||
+                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
+                  .tags !== initDataPoint.tags)
           )
           .map((secret) => secret.id)
           .includes(newDataPoint.id)
@@ -483,7 +507,8 @@ export default function Dashboard() {
         valueOverride: override.valueOverride,
         comment: '',
         id: String(override.idOverride),
-        idOverride: String(override.idOverride)
+        idOverride: String(override.idOverride),
+        tags: override.tags
       }));
     console.log('override update', overridesToBeUpdated.length);
 
@@ -544,34 +569,6 @@ export default function Dashboard() {
         <meta name="og:description" content={String(t('dashboard:og-description'))} />
       </Head>
       <div className="flex flex-row h-full dark:[color-scheme:dark]">
-        {sidebarSecretId !== 'None' && (
-          <SideBar
-            toggleSidebar={toggleSidebar}
-            data={data.filter(
-              (row: SecretDataProps) =>
-                row.key === data.filter((r) => r.id === sidebarSecretId)[0]?.key
-            )}
-            modifyKey={listenChangeKey}
-            modifyValue={listenChangeValue}
-            modifyValueOverride={listenChangeValueOverride}
-            modifyComment={listenChangeComment}
-            buttonReady={buttonReady}
-            workspaceEnvs={workspaceEnvs}
-            selectedEnv={selectedEnv!}
-            workspaceId={workspaceId}
-            savePush={savePush}
-            sharedToHide={sharedToHide}
-            setSharedToHide={setSharedToHide}
-            deleteRow={deleteCertainRow}
-          />
-        )}
-        {PITSidebarOpen && (
-          <PITRecoverySidebar
-            toggleSidebar={togglePITSidebar}
-            chosenSnapshot={String(snapshotData?.id ? snapshotData.id : '')}
-            setSnapshotData={setSnapshotData}
-          />
-        )}
         <div className="w-full max-h-96 pb-2 dark:[color-scheme:dark]">
           <NavHeader pageName={t('dashboard:title')} isProjectRelated />
           {checkDocsPopUpVisible && (
@@ -626,7 +623,10 @@ export default function Dashboard() {
               <div className="flex justify-start max-w-sm mt-1 mr-2">
                 <Button
                   text={String(`${numSnapshots} ${t('Commits')}`)}
-                  onButtonPressed={() => togglePITSidebar(true)}
+                  onButtonPressed={() => {
+                    toggleSidebar('None');
+                    togglePITSidebar(true)
+                  }}
                   color="mineshaft"
                   size="md"
                   icon={faClockRotateLeft}
@@ -661,7 +661,8 @@ export default function Dashboard() {
                           valueOverride: sv.valueOverride,
                           key: sv.key,
                           value: sv.value,
-                          comment: ''
+                          comment: '',
+                          tags: sv.tags
                         }));
                       setData(rolledBackSecrets);
 
@@ -779,27 +780,58 @@ export default function Dashboard() {
                   className="mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar border border-mineshaft-600 rounded-md"
                 >
                   <div ref={secretsTop} />
-                  <div className='bg-mineshaft-800 text-sm rounded-t-md h-10 w-full flex flex-row items-center border-b-2 border-mineshaft-500 sticky top-0 z-[60]'>
-                    <div className='w-14'/>
-                    <div className='text-bunker-300 relative font-semibold h-10 flex items-center w-80 pl-2 border-r border-mineshaft-600'>
-                      <span>Key</span>
-                      {!snapshotData && <IconButton 
-                        ariaLabel="copy icon"
-                        variant="plain"
-                        className="group relative ml-2"
-                        onClick={() => reorderRows(1)}
-                      >
-                          {sortMethod === 'alphabetical' ? <FontAwesomeIcon icon={faArrowUp} /> : <FontAwesomeIcon icon={faArrowDown} />}
-                      </IconButton>}
+                  <div
+                    className='group flex flex-col items-center bg-mineshaft-800 border-b-2 border-mineshaft-500 duration-100 sticky top-0 z-[60]'
+                  >
+                    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
+                      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+                        <div className='text-transparent text-xs flex items-center justify-center w-14 h-10 cursor-default'>0</div>
+                        <span className='px-2 text-bunker-300 font-semibold'>Key</span>
+                        {!snapshotData && <IconButton 
+                          ariaLabel="copy icon"
+                          variant="plain"
+                          className="group relative ml-2"
+                          onClick={() => reorderRows(1)}
+                        >
+                            {sortMethod === 'alphabetical' ? <FontAwesomeIcon icon={faArrowUp} /> : <FontAwesomeIcon icon={faArrowDown} />}
+                        </IconButton>}
+                      </div>
+                      <div className="w-5/12 border-r border-mineshaft-600">
+                        <div
+                          className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
+                        >
+                          <div className='text-bunker-300 px-2 font-semibold h-10 flex items-center w-7/12'>Value</div>
+                        </div>
+                      </div>
+                      <div className="w-2/12 border-r border-mineshaft-600">
+                        <div className="flex items-center max-h-16">
+                          <div className='text-bunker-300 px-2 font-semibold h-10 flex items-center w-3/12'>Comment</div>
+                        </div>
+                      </div>
+                      <div className="w-2/12">
+                        <div className="flex items-center max-h-16">
+                          <div className='text-bunker-300 px-2 font-semibold h-10 flex items-center w-3/12'>Tags</div>
+                        </div>
+                      </div>
+                      <div
+                        className="w-[1.5rem] h-[2.35rem] ml-auto rounded-md flex flex-row justify-center items-center"
+                      />
+                      <div className='w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'>
+                        <div
+                          onKeyDown={() => null}
+                          role="none"
+                          onClick={() => {}}
+                          className="invisible group-hover:visible"
+                        >
+                          <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5 invisible" icon={faXmark} />
+                        </div>
+                      </div>
                     </div>
-                    <div className='text-bunker-300 pl-2 font-semibold h-10 flex items-center w-full border-r border-mineshaft-600'>Value</div>
-                    <div className='text-bunker-300 pl-2 font-semibold h-10 flex items-center w-96'>Comment</div>
-                    {!snapshotData && <div className='w-[9.3rem]'/>}
                   </div>
                   <div className="bg-mineshaft-800 rounded-b-md border-bunker-600">
                     {!snapshotData &&
                       data
-                        ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()))
+                        ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()) || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase()))
                         .filter((row) => !sharedToHide.includes(row.id))
                         .map((keyPair) => (
                           <KeyPair
@@ -809,14 +841,17 @@ export default function Dashboard() {
                             modifyValueOverride={listenChangeValueOverride}
                             modifyKey={listenChangeKey}
                             modifyComment={listenChangeComment}
+                            modifyTags={listenChangeTags}
                             isBlurred={blurred}
                             isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
                               keyPair.key
                             )}
                             toggleSidebar={toggleSidebar}
+                            togglePITSidebar={togglePITSidebar}
                             sidebarSecretId={sidebarSecretId}
                             isSnapshot={false}
                             deleteRow={deleteCertainRow}
+                            tags={projectTags}
                           />
                         ))}
                     {snapshotData &&
@@ -848,6 +883,7 @@ export default function Dashboard() {
                             modifyValueOverride={listenChangeValueOverride}
                             modifyKey={listenChangeKey}
                             modifyComment={listenChangeComment}
+                            modifyTags={listenChangeTags}
                             isBlurred={blurred}
                             isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
                               keyPair.key
@@ -855,6 +891,7 @@ export default function Dashboard() {
                             toggleSidebar={toggleSidebar}
                             sidebarSecretId={sidebarSecretId}
                             isSnapshot
+                            tags={projectTags}
                           />
                         ))}
                     <div className='bg-mineshaft-800 text-sm rounded-t-md hover:bg-mineshaft-700 h-10 w-full flex flex-row items-center border-b-2 border-mineshaft-500 sticky top-0 z-[60]'>
@@ -908,6 +945,34 @@ export default function Dashboard() {
             )}
           </div>
         </div>
+        {sidebarSecretId !== 'None' && (
+          <SideBar
+            toggleSidebar={toggleSidebar}
+            data={data.filter(
+              (row: SecretDataProps) =>
+                row.key === data.filter((r) => r.id === sidebarSecretId)[0]?.key
+            )}
+            modifyKey={listenChangeKey}
+            modifyValue={listenChangeValue}
+            modifyValueOverride={listenChangeValueOverride}
+            modifyComment={listenChangeComment}
+            buttonReady={buttonReady}
+            workspaceEnvs={workspaceEnvs}
+            selectedEnv={selectedEnv!}
+            workspaceId={workspaceId}
+            savePush={savePush}
+            sharedToHide={sharedToHide}
+            setSharedToHide={setSharedToHide}
+            deleteRow={deleteCertainRow}
+          />
+        )}
+        {PITSidebarOpen && (
+          <PITRecoverySidebar
+            toggleSidebar={togglePITSidebar}
+            chosenSnapshot={String(snapshotData?.id ? snapshotData.id : '')}
+            setSnapshotData={setSnapshotData}
+          />
+        )}
       </div>
     </div>
   ) : (
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index 953a3d140..6de068ec5 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -18,19 +18,24 @@ import { useToggle } from '@app/hooks';
 import {
   useCreateServiceToken,
   useCreateWsEnvironment,
+  useCreateWsTag,
   useDeleteServiceToken,
   useDeleteWorkspace,
   useDeleteWsEnvironment,
+  useDeleteWsTag,
   useGetUserWsKey,
   useGetUserWsServiceTokens,
+  useGetWsTags,
   useRenameWorkspace,
   useUpdateWsEnvironment
 } from '@app/hooks/api';
 
+import { SecretTagsSection } from './components/SecretTagsSection';
 import {
   CopyProjectIDSection,
   CreateServiceToken,
   CreateUpdateEnvFormData,
+  CreateWsTag,
   EnvironmentSection,
   ProjectNameChangeSection,
   ServiceTokenSection
@@ -61,6 +66,11 @@ export const ProjectSettingsPage = () => {
   const createServiceToken = useCreateServiceToken();
   const deleteServiceToken = useDeleteServiceToken();
 
+  // tag
+  const { data: wsTags } = useGetWsTags(workspaceID);
+  const createWsTag = useCreateWsTag();
+  const deleteWsTag = useDeleteWsTag();
+
   // get user subscription
   const { subscriptionPlan } = useSubscription();
   const host = window.location.origin;
@@ -207,6 +217,44 @@ export const ProjectSettingsPage = () => {
     return '';
   };
 
+  const onCreateWsTag = async ({ name }: CreateWsTag) => {
+    try {
+      const res = await createWsTag.mutateAsync({
+        workspaceID,
+        tagName: name,
+        tagSlug: name.replace(" ", "_")
+      });
+      createNotification({
+        text: 'Successfully created a tag',
+        type: 'success'
+      });
+      return res?.data?.name;
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create a tag',
+        type: 'error'
+      });
+    }
+    return '';
+  };
+
+  const onDeleteTag = async (tagID: string) => {
+    try {
+      await deleteWsTag.mutateAsync({ tagID });
+      createNotification({
+        text: 'Successfully deleted tag',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete the tag',
+        type: 'error'
+      });
+    }
+  };
+
   const onDeleteServiceToken = async (tokenID: string) => {
     try {
       await deleteServiceToken.mutateAsync(tokenID);
@@ -224,7 +272,7 @@ export const ProjectSettingsPage = () => {
   };
 
   return (
-    <div className="container mx-auto flex flex-col px-8 text-mineshaft-50">
+    <div className="container mx-auto flex flex-col px-8 text-mineshaft-50 dark dark:[color-scheme:dark]">
       {/* TODO(akhilmhdh): Remove this right when layout is refactored  */}
       <div className="relative right-5">
         <NavHeader pageName={t('settings-project:title')} isProjectRelated />
@@ -256,6 +304,12 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name || ''}
         onCreateToken={onCreateServiceToken}
       />
+      <SecretTagsSection
+        tags={wsTags || []}
+        onDeleteTag={onDeleteTag}
+        workspaceName={currentWorkspace?.name || ''}
+        onCreateTag={onCreateWsTag}
+      />
       <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-4">
         <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
         <p className="text-md mt-2 text-gray-400">{t('settings-project:danger-zone-note')}</p>
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
index 521394f9f..ddcf7f4b3 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
@@ -102,7 +102,7 @@ export const EnvironmentSection = ({
             colorSchema="primary"
             leftIcon={<FontAwesomeIcon icon={faPlus} />}
           >
-            Add New Env
+            Add New Environment
           </Button>
         </div>
       </div>
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
new file mode 100644
index 000000000..6aa4d26be
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
@@ -0,0 +1,186 @@
+import { Controller, useForm } from 'react-hook-form';
+import { faPlus, faTrashCan } 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,
+  DeleteActionModal,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalTrigger,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+} from '@app/components/v2';
+import { usePopUp } from '@app/hooks';
+import { WorkspaceTag } from '@app/hooks/api/types';
+
+const createTagSchema = yup.object({
+  name: yup.string().required().label('Tag Name'),
+});
+
+export type CreateWsTag = yup.InferType<typeof createTagSchema>;
+
+type Props = {
+  tags: WorkspaceTag[];
+  workspaceName: string;
+  onDeleteTag: (tagID: string) => Promise<void>;
+  onCreateTag: (data: CreateWsTag) => Promise<string>;
+};
+
+type DeleteModalData = { name: string; id: string };
+
+export const SecretTagsSection = ({
+  tags = [],
+  onDeleteTag,
+  workspaceName,
+  onCreateTag
+}: Props): JSX.Element => {
+  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    'CreateSecretTag',
+    'deleteTagConfirmation'
+  ] as const);
+
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<CreateWsTag>({
+    resolver: yupResolver(createTagSchema)
+  });
+
+  const onFormSubmit = async (data: CreateWsTag) => {
+    console.log(19191, data);
+    await onCreateTag(data);
+    handlePopUpClose('CreateSecretTag');
+  };
+
+  const onDeleteApproved = async () => {
+    await onDeleteTag((popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id);
+    handlePopUpClose('deleteTagConfirmation');
+  };
+
+  return (
+    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 p-6">
+      <div className="flex w-full flex-row justify-between">
+        <div className="flex w-full flex-col">
+          <p className="mb-3 text-xl font-semibold">Secret Tags</p>
+          <p className="text-sm text-gray-400">Every secret can be assigned to one or more tags. Here you can add and remove tags for the current project.</p>
+        </div>
+        <div>
+          <Modal
+            isOpen={popUp?.CreateSecretTag?.isOpen}
+            onOpenChange={(open) => {
+              handlePopUpToggle('CreateSecretTag', open);
+              reset();
+            }}
+          >
+            <ModalTrigger asChild>
+              <Button color="mineshaft" leftIcon={<FontAwesomeIcon icon={faPlus} />}>
+                Add New Tag
+              </Button>
+            </ModalTrigger>
+            <ModalContent
+              title={`Add a tag for ${  workspaceName}`}
+              subTitle='Specify your tag name, and the slug will be created automatically.'
+            >
+              <form onSubmit={handleSubmit(onFormSubmit)}>
+                <Controller
+                  control={control}
+                  name="name"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label='Tag Name'
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} placeholder="Type your tag name" />
+                    </FormControl>
+                  )}
+                />
+                <div className="mt-8 flex items-center">
+                  <Button
+                    className="mr-4"
+                    type="submit"
+                    isDisabled={isSubmitting}
+                    isLoading={isSubmitting}
+                  >
+                    Create
+                  </Button>
+                  <ModalClose asChild>
+                    <Button variant="plain" colorSchema="secondary">
+                      Cancel
+                    </Button>
+                  </ModalClose>
+                </div>
+              </form>
+            </ModalContent>
+          </Modal>
+        </div>
+      </div>
+      <TableContainer className='mt-4'>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Tag</Th>
+              <Th>Slug</Th>
+              <Th aria-label="button" />
+            </Tr>
+          </THead>
+          <TBody>
+            {tags?.length > 0 ? (
+              tags.map(({ _id, name, slug }) => (
+                <Tr key={name}>
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td className="flex items-center justify-end">
+                    <IconButton
+                      onClick={() =>
+                        handlePopUpOpen('deleteTagConfirmation', {
+                          name, 
+                          id: _id
+                        })
+                      }
+                      colorSchema="danger"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr>
+                <Td colSpan={4} className="py-6 text-center text-bunker-400">
+                  No tags found for this project
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <DeleteActionModal
+        isOpen={popUp.deleteTagConfirmation.isOpen}
+        title={`Delete ${
+          (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name || ' '
+        } api key?`}
+        onChange={(isOpen) => handlePopUpToggle('deleteTagConfirmation', isOpen)}
+        deleteKey={(popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name}
+        onClose={() => handlePopUpClose('deleteTagConfirmation')}
+        onDeleteApproved={onDeleteApproved}
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx
new file mode 100644
index 000000000..0d0615293
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx
@@ -0,0 +1 @@
+export {SecretTagsSection} from './SecretTagsSection'
\ No newline at end of file
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
index 163483278..98160b5b7 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
@@ -2,5 +2,6 @@ export { CopyProjectIDSection } from './CopyProjectIDSection';
 export { EnvironmentSection } from './EnvironmentSection';
 export type { CreateUpdateEnvFormData } from './EnvironmentSection/EnvironmentSection';
 export { ProjectNameChangeSection } from './ProjectNameChangeSection';
+export type { CreateWsTag } from './SecretTagsSection/SecretTagsSection';
 export { ServiceTokenSection } from './ServiceTokenSection';
 export type { CreateServiceToken } from './ServiceTokenSection/ServiceTokenSection';

From 498705f33044acc536b693b37d3947cc6955b659 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Tue, 7 Feb 2023 16:47:05 -0800
Subject: [PATCH 42/52] Fixed the login error with tags

---
 .../src/components/utilities/attemptLogin.ts  | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/utilities/attemptLogin.ts b/frontend/src/components/utilities/attemptLogin.ts
index acc2b67fe..a47b2c1f0 100644
--- a/frontend/src/components/utilities/attemptLogin.ts
+++ b/frontend/src/components/utilities/attemptLogin.ts
@@ -138,7 +138,8 @@ const attemptLogin = async (
                 value: 'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
                 valueOverride: undefined,
                 comment: 'This is an example of secret referencing.',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 1,
@@ -147,7 +148,8 @@ const attemptLogin = async (
                 valueOverride: undefined,
                 comment:
                   'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 2,
@@ -156,7 +158,8 @@ const attemptLogin = async (
                 valueOverride: undefined,
                 comment:
                   'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 3,
@@ -164,7 +167,8 @@ const attemptLogin = async (
                 value: 'user1234',
                 valueOverride: 'user1234',
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 4,
@@ -172,7 +176,8 @@ const attemptLogin = async (
                 value: 'example_password',
                 valueOverride: 'example_password',
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 5,
@@ -180,7 +185,8 @@ const attemptLogin = async (
                 value: 'example_twillio_token',
                 valueOverride: undefined,
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 6,
@@ -188,7 +194,8 @@ const attemptLogin = async (
                 value: 'http://localhost:3000',
                 valueOverride: undefined,
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               }
             ];
             const secrets = await encryptSecrets({

From ace0e9c56fbb97f8fbcead74126f49d40b498b1b Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Tue, 7 Feb 2023 16:54:13 -0800
Subject: [PATCH 43/52] Fixed the bug of wrong data structure

---
 .../views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index 6de068ec5..9c08e2bcd 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -228,7 +228,7 @@ export const ProjectSettingsPage = () => {
         text: 'Successfully created a tag',
         type: 'success'
       });
-      return res?.data?.name;
+      return res.name;
     } catch (error) {
       console.error(error);
       createNotification({

From f58e1e1d6ce6135b40ac24c142a40adfa8fa11a3 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Tue, 7 Feb 2023 21:27:21 -0800
Subject: [PATCH 44/52] Minor style changes

---
 .../src/components/dashboard/ConfirmEnvOverwriteModal.tsx     | 4 ++--
 frontend/src/components/dashboard/DashboardInputField.tsx     | 3 ++-
 frontend/src/components/v2/Button/Button.tsx                  | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
index 1494fa84f..d3fad6511 100644
--- a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
+++ b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
@@ -29,8 +29,8 @@ const ConfirmEnvOverwriteModal = ({
         }
         onClose={onClose}
       >
-        <div className="mx-1 flex flex-col gap-2">
-          <p className='text-gray-400'>File contains following duplicate secrets:</p>
+        <div className="flex flex-col gap-2">
+          <p className='text-gray-400'>Your file contains the following duplicate secrets:</p>
           <p className="text-sm text-gray-500">{duplicateKeys.join(', ')}</p>
           <p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
         </div>
diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend/src/components/dashboard/DashboardInputField.tsx
index 5b8cf9b69..d64658b67 100644
--- a/frontend/src/components/dashboard/DashboardInputField.tsx
+++ b/frontend/src/components/dashboard/DashboardInputField.tsx
@@ -231,7 +231,8 @@ function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInput
     prev.position === next.position &&
     prev.blurred === next.blurred &&
     prev.overrideEnabled === next.overrideEnabled &&
-    prev.isDuplicate === next.isDuplicate 
+    prev.isDuplicate === next.isDuplicate &&
+    prev.isSideBarOpen === next.isSideBarOpen
   );
 }
 
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index e16e09128..df12c25f7 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -158,7 +158,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           className={twMerge(
             'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
-            size === 'xs' ? 'ml-1' : 'ml-2'
+            size === 'xs' ? 'ml-1' : 'ml-3'
           )}
         >
           {rightIcon}

From 72f7d81b804d858ceac1dec8afff767726e3aa48 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Wed, 8 Feb 2023 12:38:15 +0700
Subject: [PATCH 45/52] Fix more encoding issues with integrations

---
 backend/src/integrations/sync.ts              |  5 +++--
 backend/src/variables/integration.ts          | 20 +++++++++----------
 .../src/pages/integrations/netlify/create.tsx |  1 -
 .../src/pages/integrations/render/create.tsx  |  4 ++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/backend/src/integrations/sync.ts b/backend/src/integrations/sync.ts
index 401c7f9a1..8e44d591d 100644
--- a/backend/src/integrations/sync.ts
+++ b/backend/src/integrations/sync.ts
@@ -886,8 +886,9 @@ const syncSecretsFlyio = async ({
         method: 'post',
         url: INTEGRATION_FLYIO_API_URL,
         headers: {
-            'Authorization': 'Bearer ' + accessToken,
-            'Content-Type': 'application/json'
+          'Authorization': 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+          'Accept-Encoding': 'application/json'
         },
         data: {
           query: GetSecrets,
diff --git a/backend/src/variables/integration.ts b/backend/src/variables/integration.ts
index 0cac80984..f084f54b4 100644
--- a/backend/src/variables/integration.ts
+++ b/backend/src/variables/integration.ts
@@ -47,16 +47,6 @@ const INTEGRATION_RENDER_API_URL = 'https://api.render.com';
 const INTEGRATION_FLYIO_API_URL = 'https://api.fly.io/graphql';
 
 const INTEGRATION_OPTIONS = [
-    {
-        name: 'Azure Key Vault',
-        slug: 'azure-key-vault',
-        image: 'Microsoft Azure.png',
-        isAvailable: true,
-        type: 'oauth',
-        clientId: CLIENT_ID_AZURE,
-        tenantId: TENANT_ID_AZURE,
-        docsLink: ''
-    },
     {
         name: 'Heroku',
         slug: 'heroku',
@@ -112,6 +102,16 @@ const INTEGRATION_OPTIONS = [
         clientId: '',
         docsLink: ''
     },
+    {
+        name: 'Azure Key Vault',
+        slug: 'azure-key-vault',
+        image: 'Microsoft Azure.png',
+        isAvailable: false,
+        type: 'oauth',
+        clientId: CLIENT_ID_AZURE,
+        tenantId: TENANT_ID_AZURE,
+        docsLink: ''
+    },
     {
         name: 'Google Cloud Platform',
         slug: 'gcp',
diff --git a/frontend/src/pages/integrations/netlify/create.tsx b/frontend/src/pages/integrations/netlify/create.tsx
index a8b6bcd05..7f00394d7 100644
--- a/frontend/src/pages/integrations/netlify/create.tsx
+++ b/frontend/src/pages/integrations/netlify/create.tsx
@@ -47,7 +47,6 @@ export default function NetlifyCreateIntegrationPage() {
     useEffect(() => {
         // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
-            console.log(integrationAuthApps)
             setTargetApp(integrationAuthApps[0].name);
         }
     }, [integrationAuthApps]);
diff --git a/frontend/src/pages/integrations/render/create.tsx b/frontend/src/pages/integrations/render/create.tsx
index 3429def89..b37319312 100644
--- a/frontend/src/pages/integrations/render/create.tsx
+++ b/frontend/src/pages/integrations/render/create.tsx
@@ -38,7 +38,7 @@ export default function RenderCreateIntegrationPage() {
     useEffect(() => {
         // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
-            setTargetApp(integrationAuthApps[0].name);
+          setTargetApp(integrationAuthApps[0].name);
         }
     }, [integrationAuthApps]);
         
@@ -52,7 +52,7 @@ export default function RenderCreateIntegrationPage() {
                 integrationAuthId: integrationAuth?._id,
                 isActive: true,
                 app: targetApp,
-                appId: null,
+                appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
                 sourceEnvironment: selectedSourceEnvironment,
                 targetEnvironment: null,
                 owner: null

From 8ba4f964d4cf22b078487f360d91cc24f37bb195 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Wed, 8 Feb 2023 13:42:49 +0700
Subject: [PATCH 46/52] Switch Azure KV integration on

---
 backend/src/variables/integration.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/backend/src/variables/integration.ts b/backend/src/variables/integration.ts
index f084f54b4..0cac80984 100644
--- a/backend/src/variables/integration.ts
+++ b/backend/src/variables/integration.ts
@@ -47,6 +47,16 @@ const INTEGRATION_RENDER_API_URL = 'https://api.render.com';
 const INTEGRATION_FLYIO_API_URL = 'https://api.fly.io/graphql';
 
 const INTEGRATION_OPTIONS = [
+    {
+        name: 'Azure Key Vault',
+        slug: 'azure-key-vault',
+        image: 'Microsoft Azure.png',
+        isAvailable: true,
+        type: 'oauth',
+        clientId: CLIENT_ID_AZURE,
+        tenantId: TENANT_ID_AZURE,
+        docsLink: ''
+    },
     {
         name: 'Heroku',
         slug: 'heroku',
@@ -102,16 +112,6 @@ const INTEGRATION_OPTIONS = [
         clientId: '',
         docsLink: ''
     },
-    {
-        name: 'Azure Key Vault',
-        slug: 'azure-key-vault',
-        image: 'Microsoft Azure.png',
-        isAvailable: false,
-        type: 'oauth',
-        clientId: CLIENT_ID_AZURE,
-        tenantId: TENANT_ID_AZURE,
-        docsLink: ''
-    },
     {
         name: 'Google Cloud Platform',
         slug: 'gcp',

From 6188b04544fc4c7546d99f9ffbb184101daf5712 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Wed, 8 Feb 2023 13:53:12 +0700
Subject: [PATCH 47/52] Switch azure integration off

---
 backend/src/variables/integration.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/variables/integration.ts b/backend/src/variables/integration.ts
index 0cac80984..d1ad078ea 100644
--- a/backend/src/variables/integration.ts
+++ b/backend/src/variables/integration.ts
@@ -51,7 +51,7 @@ const INTEGRATION_OPTIONS = [
         name: 'Azure Key Vault',
         slug: 'azure-key-vault',
         image: 'Microsoft Azure.png',
-        isAvailable: true,
+        isAvailable: false,
         type: 'oauth',
         clientId: CLIENT_ID_AZURE,
         tenantId: TENANT_ID_AZURE,

From b0c541f8dc07d518065e194b0c1478e79c11ddee Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Wed, 8 Feb 2023 13:46:57 -0800
Subject: [PATCH 48/52] generate example .env file command

---
 cli/packages/api/model.go    |  39 +++++---
 cli/packages/cmd/secrets.go  | 183 ++++++++++++++++++++++++++++++++++-
 cli/packages/models/cli.go   |  11 ++-
 cli/packages/util/helper.go  |  12 +++
 cli/packages/util/log.go     |   2 +-
 cli/packages/util/secrets.go |  31 +++++-
 6 files changed, 256 insertions(+), 22 deletions(-)

diff --git a/cli/packages/api/model.go b/cli/packages/api/model.go
index 698d41408..8f929bf69 100644
--- a/cli/packages/api/model.go
+++ b/cli/packages/api/model.go
@@ -201,21 +201,30 @@ type GetEncryptedSecretsV2Request struct {
 
 type GetEncryptedSecretsV2Response struct {
 	Secrets []struct {
-		ID                    string    `json:"_id"`
-		Version               int       `json:"version"`
-		Workspace             string    `json:"workspace"`
-		Type                  string    `json:"type"`
-		Environment           string    `json:"environment"`
-		SecretKeyCiphertext   string    `json:"secretKeyCiphertext"`
-		SecretKeyIV           string    `json:"secretKeyIV"`
-		SecretKeyTag          string    `json:"secretKeyTag"`
-		SecretValueCiphertext string    `json:"secretValueCiphertext"`
-		SecretValueIV         string    `json:"secretValueIV"`
-		SecretValueTag        string    `json:"secretValueTag"`
-		V                     int       `json:"__v"`
-		CreatedAt             time.Time `json:"createdAt"`
-		UpdatedAt             time.Time `json:"updatedAt"`
-		User                  string    `json:"user,omitempty"`
+		ID                      string    `json:"_id"`
+		Version                 int       `json:"version"`
+		Workspace               string    `json:"workspace"`
+		Type                    string    `json:"type"`
+		Environment             string    `json:"environment"`
+		SecretKeyCiphertext     string    `json:"secretKeyCiphertext"`
+		SecretKeyIV             string    `json:"secretKeyIV"`
+		SecretKeyTag            string    `json:"secretKeyTag"`
+		SecretValueCiphertext   string    `json:"secretValueCiphertext"`
+		SecretValueIV           string    `json:"secretValueIV"`
+		SecretValueTag          string    `json:"secretValueTag"`
+		SecretCommentCiphertext string    `json:"secretCommentCiphertext"`
+		SecretCommentIV         string    `json:"secretCommentIV"`
+		SecretCommentTag        string    `json:"secretCommentTag"`
+		V                       int       `json:"__v"`
+		CreatedAt               time.Time `json:"createdAt"`
+		UpdatedAt               time.Time `json:"updatedAt"`
+		User                    string    `json:"user,omitempty"`
+		Tags                    []struct {
+			ID        string `json:"_id"`
+			Name      string `json:"name"`
+			Slug      string `json:"slug"`
+			Workspace string `json:"workspace"`
+		} `json:"tags"`
 	} `json:"secrets"`
 }
 
diff --git a/cli/packages/cmd/secrets.go b/cli/packages/cmd/secrets.go
index c5fb11c1e..a1a8916fd 100644
--- a/cli/packages/cmd/secrets.go
+++ b/cli/packages/cmd/secrets.go
@@ -6,6 +6,8 @@ package cmd
 import (
 	"encoding/base64"
 	"fmt"
+	"regexp"
+	"sort"
 	"strings"
 	"unicode"
 
@@ -22,7 +24,7 @@ import (
 )
 
 var secretsCmd = &cobra.Command{
-	Example:               `infisical secrets"`,
+	Example:               `infisical secrets`,
 	Short:                 "Used to create, read update and delete secrets",
 	Use:                   "secrets",
 	DisableFlagsInUseLine: true,
@@ -67,6 +69,16 @@ var secretsGetCmd = &cobra.Command{
 	Run:                   getSecretsByNames,
 }
 
+var secretsGenerateExampleEnvCmd = &cobra.Command{
+	Example:               `secrets generate-example-env > .example-env`,
+	Short:                 "Used to generate a example .env file",
+	Use:                   "generate-example-env",
+	DisableFlagsInUseLine: true,
+	Args:                  cobra.NoArgs,
+	PreRun:                toggleDebug,
+	Run:                   generateExampleEnv,
+}
+
 var secretsSetCmd = &cobra.Command{
 	Example:               `secrets set <secretName=secretValue> <secretName=secretValue>..."`,
 	Short:                 "Used set secrets",
@@ -357,6 +369,171 @@ func getSecretsByNames(cmd *cobra.Command, args []string) {
 	visualize.PrintAllSecretDetails(requestedSecrets)
 }
 
+func generateExampleEnv(cmd *cobra.Command, args []string) {
+	environmentName, err := cmd.Flags().GetString("env")
+	if err != nil {
+		util.HandleError(err, "Unable to parse flag")
+	}
+
+	workspaceFileExists := util.WorkspaceConfigFileExistsInCurrentPath()
+	if !workspaceFileExists {
+		util.HandleError(err, "Unable to parse flag")
+	}
+
+	infisicalToken, err := cmd.Flags().GetString("token")
+	if err != nil {
+		util.HandleError(err, "Unable to parse flag")
+	}
+
+	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken})
+	if err != nil {
+		util.HandleError(err, "To fetch all secrets")
+	}
+
+	tagsHashToSecretKey := make(map[string]int)
+
+	type TagsAndSecrets struct {
+		Secrets []models.SingleEnvironmentVariable
+		Tags    []struct {
+			ID        string `json:"_id"`
+			Name      string `json:"name"`
+			Slug      string `json:"slug"`
+			Workspace string `json:"workspace"`
+		}
+	}
+
+	// sort secrets by associated tags (most number of tags to least tags)
+	sort.Slice(secrets, func(i, j int) bool {
+		return len(secrets[i].Tags) > len(secrets[j].Tags)
+	})
+
+	for _, secret := range secrets {
+		listOfTagSlugs := []string{}
+
+		for _, tag := range secret.Tags {
+			listOfTagSlugs = append(listOfTagSlugs, tag.Slug)
+		}
+		sort.Strings(listOfTagSlugs)
+
+		tagsHash := util.GetHashFromStringList(listOfTagSlugs)
+
+		tagsHashToSecretKey[tagsHash] += 1
+	}
+
+	finalTagHashToSecretKey := make(map[string]TagsAndSecrets)
+
+	for _, secret := range secrets {
+		listOfTagSlugs := []string{}
+		for _, tag := range secret.Tags {
+			listOfTagSlugs = append(listOfTagSlugs, tag.Slug)
+		}
+
+		// sort the slug so we get the same hash each time
+		sort.Strings(listOfTagSlugs)
+
+		tagsHash := util.GetHashFromStringList(listOfTagSlugs)
+		occurrence, exists := tagsHashToSecretKey[tagsHash]
+		if exists && occurrence > 0 {
+
+			value, exists2 := finalTagHashToSecretKey[tagsHash]
+			allSecretsForTags := append(value.Secrets, secret)
+
+			// sort the the secrets by keys so that they can later be sorted by the first item in the secrets array
+			sort.Slice(allSecretsForTags, func(i, j int) bool {
+				return allSecretsForTags[i].Key < allSecretsForTags[j].Key
+			})
+
+			if exists2 {
+				finalTagHashToSecretKey[tagsHash] = TagsAndSecrets{
+					Tags:    secret.Tags,
+					Secrets: allSecretsForTags,
+				}
+			} else {
+				finalTagHashToSecretKey[tagsHash] = TagsAndSecrets{
+					Tags:    secret.Tags,
+					Secrets: []models.SingleEnvironmentVariable{secret},
+				}
+			}
+
+			tagsHashToSecretKey[tagsHash] -= 1
+		}
+	}
+
+	// sort the fianl result by secret key fo consistent print order
+	listOfsecretDetails := make([]TagsAndSecrets, 0, len(finalTagHashToSecretKey))
+	for _, secretDetails := range finalTagHashToSecretKey {
+		listOfsecretDetails = append(listOfsecretDetails, secretDetails)
+	}
+
+	// sort the order of the headings by the order of the secrets
+	sort.Slice(listOfsecretDetails, func(i, j int) bool {
+		return len(listOfsecretDetails[i].Tags) < len(listOfsecretDetails[j].Tags)
+	})
+
+	for _, secretDetails := range listOfsecretDetails {
+		listOfKeyValue := []string{}
+
+		for _, secret := range secretDetails.Secrets {
+			re := regexp.MustCompile(`(.*)DEFAULT:(.*)`)
+			match := re.FindStringSubmatch(secret.Comment)
+			defaultValue := ""
+			comment := secret.Comment
+
+			// Case: Only has default value
+			if len(match) == 2 {
+				defaultValue = strings.TrimSpace(match[1])
+			}
+
+			// Case: has a comment and a default value
+			if len(match) == 3 {
+				comment = match[1]
+				defaultValue = match[2]
+			}
+
+			row := ""
+			if comment != "" {
+				comment = addHash(comment)
+				row = fmt.Sprintf("%s \n%s=%s", strings.TrimSpace(comment), strings.TrimSpace(secret.Key), strings.TrimSpace(defaultValue))
+			} else {
+				row = fmt.Sprintf("%s=%s", strings.TrimSpace(secret.Key), strings.TrimSpace(defaultValue))
+			}
+
+			// each secret row to be added to the file
+			listOfKeyValue = append(listOfKeyValue, row)
+		}
+
+		listOfTagNames := []string{}
+		for _, tag := range secretDetails.Tags {
+			listOfTagNames = append(listOfTagNames, tag.Name)
+		}
+
+		heading := CenterString(strings.Join(listOfTagNames, " & "), 80)
+
+		if len(listOfTagNames) == 0 {
+			fmt.Printf("\n%s \n", strings.Join(listOfKeyValue, "\n \n"))
+		} else {
+			fmt.Printf("\n\n\n%s\n \n%s \n", heading, strings.Join(listOfKeyValue, "\n \n"))
+		}
+	}
+}
+
+func CenterString(s string, numStars int) string {
+	stars := strings.Repeat("*", numStars)
+	padding := (numStars - len(s)) / 2
+	cenetredTextWithStar := stars[:padding] + " " + strings.ToUpper(s) + " " + stars[padding:]
+
+	hashes := strings.Repeat("#", len(cenetredTextWithStar)+2)
+	return fmt.Sprintf("%s \n# %s \n%s", hashes, cenetredTextWithStar, hashes)
+}
+
+func addHash(input string) string {
+	lines := strings.Split(input, "\n")
+	for i, line := range lines {
+		lines[i] = "# " + line
+	}
+	return strings.Join(lines, "\n")
+}
+
 func getSecretsByKeys(secrets []models.SingleEnvironmentVariable) map[string]models.SingleEnvironmentVariable {
 	secretMapByName := make(map[string]models.SingleEnvironmentVariable)
 
@@ -368,6 +545,10 @@ func getSecretsByKeys(secrets []models.SingleEnvironmentVariable) map[string]mod
 }
 
 func init() {
+
+	secretsGenerateExampleEnvCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
+	secretsCmd.AddCommand(secretsGenerateExampleEnvCmd)
+
 	secretsGetCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
 	secretsCmd.AddCommand(secretsGetCmd)
 
diff --git a/cli/packages/models/cli.go b/cli/packages/models/cli.go
index 67b89b27f..3ffc1cc20 100644
--- a/cli/packages/models/cli.go
+++ b/cli/packages/models/cli.go
@@ -1,6 +1,8 @@
 package models
 
-import "github.com/99designs/keyring"
+import (
+	"github.com/99designs/keyring"
+)
 
 type UserCredentials struct {
 	Email      string `json:"email"`
@@ -19,6 +21,13 @@ type SingleEnvironmentVariable struct {
 	Value string `json:"value"`
 	Type  string `json:"type"`
 	ID    string `json:"_id"`
+	Tags  []struct {
+		ID        string `json:"_id"`
+		Name      string `json:"name"`
+		Slug      string `json:"slug"`
+		Workspace string `json:"workspace"`
+	} `json:"tags"`
+	Comment string `json:"comment"`
 }
 
 type Workspace struct {
diff --git a/cli/packages/util/helper.go b/cli/packages/util/helper.go
index a6e7e35fc..3fd8853c4 100644
--- a/cli/packages/util/helper.go
+++ b/cli/packages/util/helper.go
@@ -1,6 +1,7 @@
 package util
 
 import (
+	"crypto/sha256"
 	"encoding/base64"
 	"fmt"
 	"os"
@@ -98,3 +99,14 @@ func RequireLocalWorkspaceFile() {
 		PrintMessageAndExit("Your project id is missing in your local config file. Please add it or run again [infisical init]")
 	}
 }
+
+func GetHashFromStringList(list []string) string {
+	hash := sha256.New()
+
+	for _, item := range list {
+		hash.Write([]byte(item))
+	}
+
+	sum := sha256.Sum256(hash.Sum(nil))
+	return fmt.Sprintf("%x", sum)
+}
diff --git a/cli/packages/util/log.go b/cli/packages/util/log.go
index a701987fc..b191f33c8 100644
--- a/cli/packages/util/log.go
+++ b/cli/packages/util/log.go
@@ -24,7 +24,7 @@ func PrintErrorAndExit(exitCode int, err error, messages ...string) {
 }
 
 func PrintWarning(message string) {
-	color.Yellow("Warning: %v", message)
+	color.New(color.FgYellow).Fprintf(os.Stderr, "Warning: %v \n", message)
 }
 
 func PrintMessageAndExit(messages ...string) {
diff --git a/cli/packages/util/secrets.go b/cli/packages/util/secrets.go
index 86f4a5e05..7a4bc09db 100644
--- a/cli/packages/util/secrets.go
+++ b/cli/packages/util/secrets.go
@@ -315,11 +315,34 @@ func GetPlainTextSecrets(key []byte, encryptedSecrets api.GetEncryptedSecretsV2R
 			return nil, fmt.Errorf("unable to symmetrically decrypt secret value")
 		}
 
+		// Decrypt comment
+		comment_iv, err := base64.StdEncoding.DecodeString(secret.SecretCommentIV)
+		if err != nil {
+			return nil, fmt.Errorf("unable to decode secret IV for secret value")
+		}
+
+		comment_tag, err := base64.StdEncoding.DecodeString(secret.SecretCommentTag)
+		if err != nil {
+			return nil, fmt.Errorf("unable to decode secret authentication tag for secret value")
+		}
+
+		comment_ciphertext, _ := base64.StdEncoding.DecodeString(secret.SecretCommentCiphertext)
+		if err != nil {
+			return nil, fmt.Errorf("unable to decode secret cipher text for secret key")
+		}
+
+		plainTextComment, err := crypto.DecryptSymmetric(key, comment_ciphertext, comment_tag, comment_iv)
+		if err != nil {
+			return nil, fmt.Errorf("unable to symmetrically decrypt secret comment")
+		}
+
 		plainTextSecret := models.SingleEnvironmentVariable{
-			Key:   string(plainTextKey),
-			Value: string(plainTextValue),
-			Type:  string(secret.Type),
-			ID:    secret.ID,
+			Key:     string(plainTextKey),
+			Value:   string(plainTextValue),
+			Type:    string(secret.Type),
+			ID:      secret.ID,
+			Tags:    secret.Tags,
+			Comment: string(plainTextComment),
 		}
 
 		plainTextSecrets = append(plainTextSecrets, plainTextSecret)

From 80a3c196aea705fccc5b19d8d3f698b1391c1195 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Wed, 8 Feb 2023 14:32:57 -0800
Subject: [PATCH 49/52] Fixed errors with undefined tags

---
 .../src/components/dashboard/AddTagsMenu.tsx     | 16 +++++++++-------
 frontend/src/components/dashboard/KeyPair.tsx    |  2 +-
 frontend/src/pages/dashboard/[id].tsx            |  9 ++++-----
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/dashboard/AddTagsMenu.tsx b/frontend/src/components/dashboard/AddTagsMenu.tsx
index 1b0790079..b0f6b1a22 100644
--- a/frontend/src/components/dashboard/AddTagsMenu.tsx
+++ b/frontend/src/components/dashboard/AddTagsMenu.tsx
@@ -6,10 +6,12 @@ import { Menu, Transition } from '@headlessui/react';
 import { Tag } from 'public/data/frequentInterfaces';
 
 /**
- * This is the menu that is used to download secrets as .env ad .yml files (in future we may have more options)
+ * This is the menu that is used to add more tags to a secret
  * @param {object} obj
- * @param {SecretDataProps[]} obj.data - 
- * 
+ * @param {Tag[]} obj.allTags - all available tags for a vertain project
+ * @param {Tag[]} obj.currentTags - currently selected tags for a certain secret
+ * @param {function} obj.modifyTags - modify tags for a certain secret
+ * @param {Tag[]} obj.position - currently selected tags for a certain secret
  */
 const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags: Tag[]; currentTags: Tag[]; modifyTags: (value: Tag[], position: number) => void; position: number; }) => {
   const router = useRouter();
@@ -21,7 +23,7 @@ const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags:
       >
         <div className='bg-mineshaft/30 cursor-pointer rounded-sm text-sm text-mineshaft-200/50 hover:bg-mineshaft/70 duration-200 flex items-center'>
           <FontAwesomeIcon icon={faPlus} className="p-[0.28rem]"/>
-          {currentTags.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
+          {currentTags?.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
         </div>
       </Menu.Button>
       <Transition
@@ -38,10 +40,10 @@ const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags:
             <Menu.Item key={tag._id}>
               <button
                 type="button"
-                className={`${currentTags.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
-                onClick={() => {if (!currentTags.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
+                className={`${currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
+                onClick={() => {if (!currentTags?.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
               >
-                {currentTags.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
+                {currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
               </button>
             </Menu.Item>
           )})}
diff --git a/frontend/src/components/dashboard/KeyPair.tsx b/frontend/src/components/dashboard/KeyPair.tsx
index 03d22d39c..f5559046b 100644
--- a/frontend/src/components/dashboard/KeyPair.tsx
+++ b/frontend/src/components/dashboard/KeyPair.tsx
@@ -140,7 +140,7 @@ const KeyPair = ({
       </div>
       <div className="w-2/12 h-10 flex items-center overflow-visible overflow-r-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
         <div className="flex items-center max-h-16">
-          {keyPair.tags.map((tag, index) => (
+          {keyPair.tags?.map((tag, index) => (
             index < 2 && <div key={keyPair.pos} className={`ml-2 px-1.5 ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.color} rounded-sm text-sm ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.colorText} flex items-center`}>
               <span className='mb-0.5 cursor-default'>{tag.name}</span>
               <FontAwesomeIcon icon={faXmark} className="ml-1 cursor-pointer p-1" onClick={() => modifyTags(keyPair.tags.filter(ttag => ttag._id !== tag._id), keyPair.pos)}/>
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index a4204a441..8951004ce 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -446,8 +446,8 @@ export default function Dashboard() {
                 initDataPoint.key ||
               newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].comment !==
                 initDataPoint.comment) ||
-              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].tags !==
-                initDataPoint.tags
+              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags !==
+                initDataPoint?.tags
         )
         .map((secret) => secret.id)
         .includes(newDataPoint.id)
@@ -498,8 +498,7 @@ export default function Dashboard() {
                   initDataPoint.key ||
                 newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
                   .comment !== initDataPoint.comment ||
-                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
-                  .tags !== initDataPoint.tags)
+                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags !== initDataPoint?.tags)
           )
           .map((secret) => secret.id)
           .includes(newDataPoint.id)
@@ -877,7 +876,7 @@ export default function Dashboard() {
                         .map((keyPair) => (
                           <KeyPair
                             isCapitalized={autoCapitalization}
-                            key={keyPair.id}
+                            key={keyPair.id ? keyPair.id : keyPair.idOverride}
                             keyPair={keyPair}
                             modifyValue={listenChangeValue}
                             modifyValueOverride={listenChangeValueOverride}

From cd0b2e3a265bc503f408b3820cb66074d4603ebb Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Wed, 8 Feb 2023 14:36:56 -0800
Subject: [PATCH 50/52] Change default secret comments

---
 frontend/src/components/utilities/attemptLogin.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/utilities/attemptLogin.ts b/frontend/src/components/utilities/attemptLogin.ts
index a47b2c1f0..e1a95381e 100644
--- a/frontend/src/components/utilities/attemptLogin.ts
+++ b/frontend/src/components/utilities/attemptLogin.ts
@@ -137,7 +137,7 @@ const attemptLogin = async (
                 // eslint-disable-next-line no-template-curly-in-string
                 value: 'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
                 valueOverride: undefined,
-                comment: 'This is an example of secret referencing.',
+                comment: 'Secret referencing example',
                 id: '',
                 tags: []
               },
@@ -147,7 +147,7 @@ const attemptLogin = async (
                 value: 'OVERRIDE_THIS',
                 valueOverride: undefined,
                 comment:
-                  'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
+                  'Override secrets with personal value',
                 id: '',
                 tags: []
               },
@@ -157,7 +157,7 @@ const attemptLogin = async (
                 value: 'OVERRIDE_THIS',
                 valueOverride: undefined,
                 comment:
-                  'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
+                  'Another secret override',
                 id: '',
                 tags: []
               },

From 9a2297573273ff91f85bcfc49ca3194dec2bf29e Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Wed, 8 Feb 2023 17:29:35 -0800
Subject: [PATCH 51/52] When comments are empty, return empty byte

---
 cli/packages/crypto/crypto.go | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/cli/packages/crypto/crypto.go b/cli/packages/crypto/crypto.go
index f9589347a..2f507ed4c 100644
--- a/cli/packages/crypto/crypto.go
+++ b/cli/packages/crypto/crypto.go
@@ -12,6 +12,11 @@ import (
 
 // will decrypt cipher text to plain text using iv and tag
 func DecryptSymmetric(key []byte, cipherText []byte, tag []byte, iv []byte) ([]byte, error) {
+	// Case: empty string
+	if len(cipherText) == 0 && len(tag) == 0 && len(iv) == 0 {
+		return []byte{}, nil
+	}
+
 	block, err := aes.NewCipher(key)
 	if err != nil {
 		return nil, err

From a685ac3e73ecc7be67462627bdc4fe287ff5bef5 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Wed, 8 Feb 2023 18:48:45 -0800
Subject: [PATCH 52/52] update regex to capature comment

---
 cli/packages/cmd/secrets.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/packages/cmd/secrets.go b/cli/packages/cmd/secrets.go
index a1a8916fd..a00cacaea 100644
--- a/cli/packages/cmd/secrets.go
+++ b/cli/packages/cmd/secrets.go
@@ -474,7 +474,7 @@ func generateExampleEnv(cmd *cobra.Command, args []string) {
 		listOfKeyValue := []string{}
 
 		for _, secret := range secretDetails.Secrets {
-			re := regexp.MustCompile(`(.*)DEFAULT:(.*)`)
+			re := regexp.MustCompile(`(?s)(.*)DEFAULT:(.*)`)
 			match := re.FindStringSubmatch(secret.Comment)
 			defaultValue := ""
 			comment := secret.Comment