Merge pull request #554 from akhilmhdh/feat/dashboard-v2

feat(ui): fixed lagging issues with new dashboard

.env.example

@@ -1,5 +1,6 @@
 # Keys
 # Required key for platform encryption/decryption ops
+# THIS IS A SAMPLE ENCRYPTION KEY AND SHOULD NOT BE USED FOR PRODUCTION
 ENCRYPTION_KEY=6c1fe4e407b8911c104518103505b218
 
 # JWT
@@ -30,14 +31,12 @@ MONGO_PASSWORD=example
 # Required
 SITE_URL=http://localhost:8080
 
-# Mail/SMTP
-SMTP_HOST= 
-SMTP_USERNAME= 
-SMTP_PASSWORD= 
-SMTP_PORT=587
-SMTP_SECURE=false
-SMTP_FROM_ADDRESS= 
-SMTP_FROM_NAME=Infisical
+# Mail/SMTP 
+SMTP_HOST=
+SMTP_PORT=
+SMTP_NAME=
+SMTP_USERNAME=
+SMTP_PASSWORD=
 
 # Integration
 # Optional only if integration is used

.github/workflows/release-standalone-docker-img.yml

@@ -0,0 +1,45 @@
+name: Release standalone docker image
+on:
+  push:
+    tags:
+      - "infisical-standalone/v*.*.*"
+
+jobs:
+  infisical-standalone:
+    name: Build infisical standalone image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Extract version from tag
+        id: extract_version
+        run: echo "::set-output name=version::${GITHUB_REF_NAME#infisical/}"
+      - name: ☁️ Checkout source
+        uses: actions/checkout@v3
+      - name: 📦 Install dependencies to test all dependencies
+        run: npm ci --only-production
+        working-directory: backend
+      - name: 🧪 Run tests
+        run: npm run test:ci
+        working-directory: backend
+      - name: Save commit hashes for tag
+        id: commit
+        uses: pr-mpt/actions-commit-hash@v2
+      - name: 🔧 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: 🐋 Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Set up Depot CLI
+        uses: depot/setup-action@v1
+      - name: 📦 Build backend and export to Docker
+        uses: depot/build-push-action@v1
+        with:
+          project: 64mmf0n610
+          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          push: true
+          context: .
+          tags: |
+            infisical/standalone-infisical:latest
+          platforms: linux/amd64,linux/arm64
+          file: Dockerfile.standalone-infisical

.goreleaser.yaml

@@ -30,7 +30,7 @@ builds:
     ignore:
       - goos: darwin
         goarch: "386"
-    # dir: ./cli
+    dir: ./cli
 
   - id: all-other-builds
     env:
@@ -98,12 +98,12 @@ brews:
     folder: Formula
     homepage: "https://infisical.com"
     description: "The official Infisical CLI"
-    install: |-
-      bin.install "infisical"
-      bash_completion.install "completions/infisical.bash" => "infisical"
-      zsh_completion.install "completions/infisical.zsh" => "_infisical"
-      fish_completion.install "completions/infisical.fish"
-      man1.install "manpages/infisical.1.gz"
+    # install: |-
+    #   bin.install "infisical"
+    #   bash_completion.install "completions/infisical.bash" => "infisical"
+    #   zsh_completion.install "completions/infisical.zsh" => "_infisical"
+    #   fish_completion.install "completions/infisical.fish"
+    #   man1.install "manpages/infisical.1.gz"
 
 nfpms:
   - id: infisical

Dockerfile.standalone-infisical

@@ -0,0 +1,102 @@
+ARG POSTHOG_HOST=https://app.posthog.com
+ARG POSTHOG_API_KEY=posthog-api-key
+
+FROM node:16-alpine AS frontend-dependencies
+
+WORKDIR /app
+
+COPY frontend/package.json frontend/package-lock.json frontend/next.config.js ./
+
+# Install dependencies
+RUN npm ci --only-production --ignore-scripts
+
+# Rebuild the source code only when needed
+FROM node:16-alpine AS frontend-builder
+WORKDIR /app
+
+# Copy dependencies
+COPY --from=frontend-dependencies /app/node_modules ./node_modules
+# Copy all files 
+COPY /frontend .
+
+ENV NODE_ENV production
+ENV NEXT_PUBLIC_ENV production
+ARG POSTHOG_HOST
+ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
+ARG POSTHOG_API_KEY
+ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
+
+# Build
+RUN npm run build
+
+# Production image
+FROM node:16-alpine AS frontend-runner
+WORKDIR /app
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+RUN mkdir -p /app/.next/cache/images && chown nextjs:nodejs /app/.next/cache/images
+VOLUME /app/.next/cache/images
+
+ARG POSTHOG_API_KEY
+ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
+  BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
+
+COPY --chown=nextjs:nodejs --chmod=555 frontend/scripts ./scripts
+COPY --from=frontend-builder /app/public ./public
+RUN chown nextjs:nodejs ./public/data
+COPY --from=frontend-builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=frontend-builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+##
+## BACKEND
+##
+FROM node:16-alpine AS backend-build
+
+WORKDIR /app
+
+COPY backend/package*.json ./
+RUN npm ci --only-production
+
+COPY /backend .
+RUN npm run build
+
+# Production stage
+FROM node:16-alpine AS backend-runner
+
+WORKDIR /app
+
+COPY backend/package*.json ./
+RUN npm ci --only-production
+
+COPY --from=backend-build /app .
+
+# Production stage
+FROM node:14-alpine AS production
+
+WORKDIR / 
+
+# Install PM2
+RUN npm install -g pm2
+# Copy ecosystem.config.js
+COPY ecosystem.config.js .
+
+RUN apk add --no-cache nginx
+
+COPY nginx/default-stand-alone-docker.conf /etc/nginx/nginx.conf
+
+COPY --from=backend-runner /app /backend
+
+COPY --from=frontend-runner /app/ /app/
+
+EXPOSE 80
+ENV HTTPS_ENABLED false 
+
+CMD ["pm2-runtime", "start", "ecosystem.config.js"]
+
+

README.md

@@ -10,7 +10,7 @@
   <a href="https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g">Slack</a> |
   <a href="https://infisical.com/">Infisical Cloud</a> |
   <a href="https://infisical.com/docs/self-hosting/overview">Self-Hosting</a> |
-  <a href="https://infisical.com/docs/getting-started/introduction">Docs</a> |
+  <a href="https://infisical.com/docs/documentation/getting-started/introduction">Docs</a> |
   <a href="https://www.infisical.com">Website</a>
 </h4>
 
@@ -37,17 +37,6 @@
 
 <img src="/img/infisical_github_repo.png" width="100%" alt="Dashboard" />
 
-**Read this in other languages**: <kbd>[<img title="English" alt="English language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/us.svg" width="22">](i18n/README.en.md)</kbd>
-<kbd>[<img title="Spanish" alt="Spanish language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/es.svg" width="22">](i18n/README.es.md)</kbd>
-<kbd>[<img title="German" alt="German language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/de.svg" width="22">](i18n/README.de.md)</kbd>
-<kbd>[<img title="Korean" alt="Korean language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/kr.svg" width="22">](i18n/README.ko.md)</kbd>
-<kbd>[<img title="Turkish" alt="Turkish language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/tr.svg" width="22">](i18n/README.tr.md)</kbd>
-<kbd>[<img title="Bahasa Indonesia" alt="Bahasa Indonesia language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/id.svg" width="22">](i18n/README.id.md)</kbd>
-<kbd>[<img title="Portuguese - Brazil" alt="Portuguese - Brazil" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/br.svg" width="22">](i18n/README.pt-br.md)</kbd>
-<kbd>[<img title="Japanese" alt="Japanese language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/jp.svg" width="22">](i18n/README.ja.md)</kbd>
-<kbd>[<img title="Italian" alt="Italian language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/it.svg" width="22">](i18n/README.it.md)</kbd>
-<kbd>[<img title="Indian" alt="Hindi language" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/in.svg" width="22">](i18n/README.hi.md)</kbd>
-
 ## Introduction
 
 **[Infisical](https://infisical.com)** is an open source, end-to-end encrypted secret management platform that teams use to centralize their secrets like API keys, database credentials, and configurations.
@@ -56,17 +45,17 @@ We're on a mission to make secret management more accessible to everyone, not ju
 
 ## Features
 
--   **[User-friendly dashboard](https://infisical.com/docs/getting-started/dashboard/project)** to manage secrets across projects and environments (e.g. development, production, etc.)
+-   **[User-friendly dashboard](https://infisical.com/docs/documentation/platform/project)** to manage secrets across projects and environments (e.g. development, production, etc.)
 - **[Client SDKs](https://infisical.com/docs/sdks/overview)** to fetch secrets for your apps and infrastructure on demand
 -   **[Infisical CLI](https://infisical.com/docs/cli/overview)** to fetch and inject secrets into any framework in local development
 -   **[Native integrations](https://infisical.com/docs/integrations/overview)** with platforms like GitHub, Vercel, Netlify, and more
-- [**Automatic Kubernetes deployment secret reloads**](https://infisical.com/docs/getting-started/quickstarts/kubernetes)
+- [**Automatic Kubernetes deployment secret reloads**](https://infisical.com/docs/documentation/getting-started/kubernetes)
 -   **[Complete control over your data](https://infisical.com/docs/self-hosting/overview)** - host it yourself on any infrastructure
--   **[Secret versioning](https://infisical.com/docs/getting-started/dashboard/versioning)** and **[Point-in-Time Recovery]()** to version every secret and project state
--   **[Audit logs](https://infisical.com/docs/getting-started/dashboard/audit-logs)** to record every action taken in a project
+-   **[Secret versioning](https://infisical.com/docs/documentation/platform/secret-versioning)** and **[Point-in-Time Recovery]()** to version every secret and project state
+-   **[Audit logs](https://infisical.com/docs/documentation/platform/audit-logs)** to record every action taken in a project
 -   **Role-based Access Controls** per environment
 -   [**Simple on-premise deployments** to AWS and Digital Ocean](https://infisical.com/docs/self-hosting/overview)
-- [**2FA**](https://infisical.com/docs/getting-started/dashboard/mfa) with more options coming soon
+- [**2FA**](https://infisical.com/docs/documentation/platform/mfa) with more options coming soon
 
 And much more.
 
@@ -89,15 +78,16 @@ To set up and run Infisical locally, make sure you have Git and Docker installed
 Linux/macOS:
 
 ```console
-git clone https://github.com/Infisical/infisical && cd "$(basename $_ .git)" && cp .env.example .env && docker-compose -f docker-compose.dev.yml up --build
+git clone https://github.com/Infisical/infisical && cd "$(basename $_ .git)" && cp .env.example .env && docker-compose -f docker-compose.yml up 
 ```
 
 Windows Command Prompt:
 
 ```console
-git clone https://github.com/Infisical/infisical && cd infisical && copy .env.example .env && docker-compose -f docker-compose.dev.yml up --build
+git clone https://github.com/Infisical/infisical && cd infisical && copy .env.example .env && docker-compose -f docker-compose.yml up
 ```
 
+Create an account at `http://localhost:80`
 
 ## Open-source vs. paid
 
@@ -122,7 +112,7 @@ Not sure where to get started? You can:
 
 ## Resources
 
-- [Docs](https://infisical.com/docs/getting-started/introduction) for comprehensive documentation and guides
+- [Docs](https://infisical.com/docs/documentation/getting-started/introduction) for comprehensive documentation and guides
 - [Slack](https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g) for discussion with the community and Infisical team.
 - [GitHub](https://github.com/Infisical/infisical) for code, issues, and pull requests
 - [Twitter](https://twitter.com/infisical) for fast news

backend/package-lock.json

@@ -22,7 +22,7 @@
         "axios": "^1.3.5",
         "axios-retry": "^3.4.0",
         "bcrypt": "^5.1.0",
-        "bigint-conversion": "^2.2.2",
+        "bigint-conversion": "^2.4.0",
         "builder-pattern": "^2.2.0",
         "cookie-parser": "^1.4.6",
         "cors": "^2.8.5",
@@ -39,7 +39,7 @@
         "jsrp": "^0.2.4",
         "libsodium-wrappers": "^0.7.10",
         "lodash": "^4.17.21",
-        "mongoose": "^6.10.4",
+        "mongoose": "^6.10.5",
         "nodemailer": "^6.8.0",
         "posthog-node": "^2.6.0",
         "query-string": "^7.1.3",
@@ -3171,9 +3171,9 @@
       }
     },
     "node_modules/@juanelas/base64": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@juanelas/base64/-/base64-1.0.5.tgz",
-      "integrity": "sha512-gTIElNo4ohMcYUZzol/Hb6DYJzphxl0b1B4egJJ+JiqxqcOcWx4XLMAB+lhWuMsMX3uR1oc5hwPusU3lgc1FkQ=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@juanelas/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-mr2pfRQpWap0Uq4tlrCgp3W+Yjx1/Bpq4QJsYeAQUh1mExgyQvXz7xUhmYT2HcLLspuAL5dpnos8P2QhaCSXsQ=="
     },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.10",
@@ -4942,11 +4942,11 @@
       "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
     },
     "node_modules/bigint-conversion": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bigint-conversion/-/bigint-conversion-2.3.0.tgz",
-      "integrity": "sha512-U4Yzg8ygZ3m78n9weKP/6NMxN/98Pdsw6YdnDYgQO8fffL7ila31fCZIy5lCMswr4kEcyl8bGHltcHT0QdG/MQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/bigint-conversion/-/bigint-conversion-2.4.0.tgz",
+      "integrity": "sha512-PApDhrpW5qjdK8ecsBgcJ08pNMt8nNsnPxlw9a9PVPeF01tzBaeV66ogu3L9i/tEz5WhD8IvSf9ipQILujThzA==",
       "dependencies": {
-        "@juanelas/base64": "^1.0.1"
+        "@juanelas/base64": "^1.1.0"
       }
     },
     "node_modules/binary-extensions": {
@@ -8325,9 +8325,9 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "6.10.4",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.10.4.tgz",
-      "integrity": "sha512-xCHVVEaOuhZxbthsKYxvHexWafJqWsl03sD7y7uyyt3euLd1sQoDI8DKueeJq9+hrbWkMkAGbGzgFPTIRqenPg==",
+      "version": "6.10.5",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.10.5.tgz",
+      "integrity": "sha512-y4HL4/9EySec7L0gJ+pCm9heLSF45uIIvRS4fSeAFWDfe4vXW1vRZJwTz7OGkra3ZoSfRnFTo9bNZkuggDVlVA==",
       "dependencies": {
         "bson": "^4.7.0",
         "kareem": "2.5.1",
@@ -15685,9 +15685,9 @@
       }
     },
     "@juanelas/base64": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@juanelas/base64/-/base64-1.0.5.tgz",
-      "integrity": "sha512-gTIElNo4ohMcYUZzol/Hb6DYJzphxl0b1B4egJJ+JiqxqcOcWx4XLMAB+lhWuMsMX3uR1oc5hwPusU3lgc1FkQ=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@juanelas/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-mr2pfRQpWap0Uq4tlrCgp3W+Yjx1/Bpq4QJsYeAQUh1mExgyQvXz7xUhmYT2HcLLspuAL5dpnos8P2QhaCSXsQ=="
     },
     "@mapbox/node-pre-gyp": {
       "version": "1.0.10",
@@ -16992,11 +16992,11 @@
       "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
     },
     "bigint-conversion": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bigint-conversion/-/bigint-conversion-2.3.0.tgz",
-      "integrity": "sha512-U4Yzg8ygZ3m78n9weKP/6NMxN/98Pdsw6YdnDYgQO8fffL7ila31fCZIy5lCMswr4kEcyl8bGHltcHT0QdG/MQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/bigint-conversion/-/bigint-conversion-2.4.0.tgz",
+      "integrity": "sha512-PApDhrpW5qjdK8ecsBgcJ08pNMt8nNsnPxlw9a9PVPeF01tzBaeV66ogu3L9i/tEz5WhD8IvSf9ipQILujThzA==",
       "requires": {
-        "@juanelas/base64": "^1.0.1"
+        "@juanelas/base64": "^1.1.0"
       }
     },
     "binary-extensions": {
@@ -19550,9 +19550,9 @@
       }
     },
     "mongoose": {
-      "version": "6.10.4",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.10.4.tgz",
-      "integrity": "sha512-xCHVVEaOuhZxbthsKYxvHexWafJqWsl03sD7y7uyyt3euLd1sQoDI8DKueeJq9+hrbWkMkAGbGzgFPTIRqenPg==",
+      "version": "6.10.5",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.10.5.tgz",
+      "integrity": "sha512-y4HL4/9EySec7L0gJ+pCm9heLSF45uIIvRS4fSeAFWDfe4vXW1vRZJwTz7OGkra3ZoSfRnFTo9bNZkuggDVlVA==",
       "requires": {
         "bson": "^4.7.0",
         "kareem": "2.5.1",

backend/package.json

@@ -13,7 +13,7 @@
     "axios": "^1.3.5",
     "axios-retry": "^3.4.0",
     "bcrypt": "^5.1.0",
-    "bigint-conversion": "^2.2.2",
+    "bigint-conversion": "^2.4.0",
     "builder-pattern": "^2.2.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
@@ -30,7 +30,7 @@
     "jsrp": "^0.2.4",
     "libsodium-wrappers": "^0.7.10",
     "lodash": "^4.17.21",
-    "mongoose": "^6.10.4",
+    "mongoose": "^6.10.5",
     "nodemailer": "^6.8.0",
     "posthog-node": "^2.6.0",
     "query-string": "^7.1.3",

backend/src/controllers/v1/membershipOrgController.ts

@@ -188,7 +188,7 @@ export const inviteUserToOrganization = async (req: Request, res: Response) => {
 			});
 
 			if (!(await getSmtpConfigured())) {
-				completeInviteLink = `${siteUrl + '/signupinvite'}?token=${token}&to=${inviteeEmail}`
+				completeInviteLink = `${siteUrl + '/signupinvite'}?token=${token}&to=${inviteeEmail}&organization_id=${organization._id}`
 			}
 		}
 
@@ -217,10 +217,10 @@ export const inviteUserToOrganization = async (req: Request, res: Response) => {
 export const verifyUserToOrganization = async (req: Request, res: Response) => {
 	let user, token;
 	try {
-		const { 
-			email, 
+		const {
+			email,
 			organizationId,
-			code 
+			code
 		} = req.body;
 
 		user = await User.findOne({ email }).select('+publicKey');

backend/src/ee/helpers/action.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
 import { Action } from '../models';
 import { 
@@ -36,33 +35,25 @@ const createActionUpdateSecret = async ({
     workspaceId: Types.ObjectId;
     secretIds: Types.ObjectId[];
 }) => {
-    let action;
-    try {
-        const latestSecretVersions = (await getLatestNSecretSecretVersionIds({
-                secretIds,
-                n: 2
-            }))
-            .map((s) => ({
-                oldSecretVersion: s.versions[0]._id,
-                newSecretVersion: s.versions[1]._id
-            }));
-        
-        action = await new Action({
-            name,
-            user: userId,
-            serviceAccount: serviceAccountId,
-            serviceTokenData: serviceTokenDataId,
-            workspace: workspaceId,
-            payload: {
-                secretVersions: latestSecretVersions
-            }
-        }).save();
-
-    } catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-        throw new Error('Failed to create update secret action');
-    }
+    const latestSecretVersions = (await getLatestNSecretSecretVersionIds({
+            secretIds,
+            n: 2
+        }))
+        .map((s) => ({
+            oldSecretVersion: s.versions[0]._id,
+            newSecretVersion: s.versions[1]._id
+        }));
+    
+    const action = await new Action({
+        name,
+        user: userId,
+        serviceAccount: serviceAccountId,
+        serviceTokenData: serviceTokenDataId,
+        workspace: workspaceId,
+        payload: {
+            secretVersions: latestSecretVersions
+        }
+    }).save();
     
     return action;
 }
@@ -90,33 +81,25 @@ const createActionSecret = async ({
     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,
-            serviceAccount: serviceAccountId,
-            serviceTokenData: serviceTokenDataId,
-            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');
-    }
+    // case: action is adding, deleting, or reading secrets
+    // -> add new secret versions
+    const latestSecretVersions = (await getLatestSecretVersionIds({
+        secretIds
+    }))
+    .map((s) => ({
+        newSecretVersion: s.versionId
+    }));
+    
+   const action = await new Action({
+        name,
+        user: userId,
+        serviceAccount: serviceAccountId,
+        serviceTokenData: serviceTokenDataId,
+        workspace: workspaceId,
+        payload: {
+            secretVersions: latestSecretVersions
+        }
+    }).save(); 
     
     return action;
 }
@@ -140,19 +123,12 @@ const createActionClient = ({
     serviceAccountId?: Types.ObjectId;
     serviceTokenDataId?: Types.ObjectId;
 }) => {
-    let action;
-    try {
-        action = new Action({
-            name,
-            user: userId,
-            serviceAccount: serviceAccountId,
-            serviceTokenData: serviceTokenDataId
-        }).save();
-    } catch (err) {
-        Sentry.setUser(null);
-        Sentry.captureException(err);
-        throw new Error('Failed to create client action');
-    }
+    const action = new Action({
+        name,
+        user: userId,
+        serviceAccount: serviceAccountId,
+        serviceTokenData: serviceTokenDataId
+    }).save();
 
     return action; 
 }
@@ -181,40 +157,34 @@ const createActionHelper = async ({
     secretIds?: Types.ObjectId[];
 }) => {
     let action;
-    try {
-        switch (name) {
-            case ACTION_LOGIN:
-            case ACTION_LOGOUT:
-                action = await createActionClient({
-                    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');
+    switch (name) {
+        case ACTION_LOGIN:
+        case ACTION_LOGOUT:
+            action = await createActionClient({
+                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;
     }
     
     return action;
@@ -222,4 +192,4 @@ const createActionHelper = async ({
 
 export { 
     createActionHelper
-};
+};

backend/src/ee/helpers/log.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
 import { 
     Log,
@@ -32,27 +31,20 @@ const createLogHelper = async ({
     channel: string;
     ipAddress: string;
 }) => {
-    let log;
-    try {
-        log = await new Log({
-            user: userId,
-            serviceAccount: serviceAccountId,
-            serviceTokenData: serviceTokenDataId,
-            workspace: workspaceId ?? undefined,
-            actionNames: actions.map((a) => a.name),
-            actions,
-            channel,
-            ipAddress
-        }).save();
-    } catch (err) {
-        Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to create log');
-    }
+    const log = await new Log({
+        user: userId,
+        serviceAccount: serviceAccountId,
+        serviceTokenData: serviceTokenDataId,
+        workspace: workspaceId ?? undefined,
+        actionNames: actions.map((a) => a.name),
+        actions,
+        channel,
+        ipAddress
+    }).save();
 
     return log;
 }
 
 export {
     createLogHelper
-}
+}

backend/src/ee/helpers/secret.ts

@@ -1,14 +1,6 @@
-import { Types } from 'mongoose';
-import * as Sentry from '@sentry/node';
-import {
-	Secret,
-	ISecret,
-} from '../../models';
-import {
-	SecretSnapshot,
-	SecretVersion,
-	ISecretVersion
-} from '../models';
+import { Types } from "mongoose";
+import { Secret, ISecret } from "../../models";
+import { SecretSnapshot, SecretVersion, ISecretVersion } from "../models";
 
 /**
  * Save a secret snapshot that is a copy of the current state of secrets in workspace with id
@@ -19,56 +11,53 @@ import {
  * @returns {SecretSnapshot} secretSnapshot - new secret snapshot
  */
 const takeSecretSnapshotHelper = async ({
-	workspaceId
+  workspaceId,
 }: {
-	workspaceId: Types.ObjectId;
+  workspaceId: Types.ObjectId;
 }) => {
+  const secretIds = (
+    await Secret.find(
+      {
+        workspace: workspaceId,
+      },
+      "_id"
+    )
+  ).map((s) => s._id);
 
-	let secretSnapshot;
-	try {
-		const secretIds = (await Secret.find({
-			workspace: workspaceId
-		}, '_id')).map((s) => s._id);
+  const latestSecretVersions = (
+    await SecretVersion.aggregate([
+      {
+        $match: {
+          secret: {
+            $in: secretIds,
+          },
+        },
+      },
+      {
+        $group: {
+          _id: "$secret",
+          version: { $max: "$version" },
+          versionId: { $max: "$_id" }, // secret version id
+        },
+      },
+      {
+        $sort: { version: -1 },
+      },
+    ]).exec()
+  ).map((s) => s.versionId);
 
-		const latestSecretVersions = (await SecretVersion.aggregate([
-			{
-				$match: {
-					secret: {
-						$in: secretIds
-					}
-				}
-			},
-			{
-				$group: {
-					_id: '$secret',
-					version: { $max: '$version' },
-					versionId: { $max: '$_id' } // secret version id
-				}
-			},
-			{
-				$sort: { version: -1 }
-			}
-		])
-			.exec())
-			.map((s) => s.versionId);
+  const latestSecretSnapshot = await SecretSnapshot.findOne({
+    workspace: workspaceId,
+  }).sort({ version: -1 });
 
-		const latestSecretSnapshot = await SecretSnapshot.findOne({
-			workspace: workspaceId
-		}).sort({ version: -1 });
+  const secretSnapshot = await new SecretSnapshot({
+    workspace: workspaceId,
+    version: latestSecretSnapshot ? latestSecretSnapshot.version + 1 : 1,
+    secretVersions: latestSecretVersions,
+  }).save();
 
-		secretSnapshot = await new SecretSnapshot({
-			workspace: workspaceId,
-			version: latestSecretSnapshot ? latestSecretSnapshot.version + 1 : 1,
-			secretVersions: latestSecretVersions
-		}).save();
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to take a secret snapshot');
-	}
-
-	return secretSnapshot;
-}
+  return secretSnapshot;
+};
 
 /**
  * Add secret versions [secretVersions] to the SecretVersion collection.
@@ -77,93 +66,79 @@ const takeSecretSnapshotHelper = async ({
  * @returns {SecretVersion[]} newSecretVersions - new secret versions
  */
 const addSecretVersionsHelper = async ({
-	secretVersions
+  secretVersions,
 }: {
-	secretVersions: ISecretVersion[]
+  secretVersions: ISecretVersion[];
 }) => {
-	let newSecretVersions;
-	try {
-		newSecretVersions = await SecretVersion.insertMany(secretVersions);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error(`Failed to add secret versions [err=${err}]`);
-	}
+  const newSecretVersions = await SecretVersion.insertMany(secretVersions);
 
-	return newSecretVersions;
-}
+  return newSecretVersions;
+};
 
 const markDeletedSecretVersionsHelper = async ({
-	secretIds
+  secretIds,
 }: {
-	secretIds: Types.ObjectId[];
+  secretIds: Types.ObjectId[];
 }) => {
-	try {
-		await SecretVersion.updateMany({
-			secret: { $in: secretIds }
-		}, {
-			isDeleted: true
-		}, {
-			new: true
-		});
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to mark secret versions as deleted');
-	}
-}
+  await SecretVersion.updateMany(
+    {
+      secret: { $in: secretIds },
+    },
+    {
+      isDeleted: true,
+    },
+    {
+      new: true,
+    }
+  );
+};
 
 /**
  * Initialize secret versioning by setting previously unversioned
  * secrets to version 1 and begin populating secret versions.
  */
 const initSecretVersioningHelper = async () => {
-	try {
+  await Secret.updateMany(
+    { version: { $exists: false } },
+    { $set: { version: 1 } }
+  );
 
-		await Secret.updateMany(
-			{ version: { $exists: false } },
-			{ $set: { version: 1 } }
-		);
+  const unversionedSecrets: ISecret[] = await Secret.aggregate([
+    {
+      $lookup: {
+        from: "secretversions",
+        localField: "_id",
+        foreignField: "secret",
+        as: "versions",
+      },
+    },
+    {
+      $match: {
+        versions: { $size: 0 },
+      },
+    },
+  ]);
 
-		const unversionedSecrets: ISecret[] = await Secret.aggregate([
-			{
-				$lookup: {
-					from: 'secretversions',
-					localField: '_id',
-					foreignField: 'secret',
-					as: 'versions',
-				},
-			},
-			{
-				$match: {
-					versions: { $size: 0 },
-				},
-			},
-		]);
-
-		if (unversionedSecrets.length > 0) {
-			await addSecretVersionsHelper({
-				secretVersions: unversionedSecrets.map((s, idx) => new SecretVersion({
-					...s,
-					secret: s._id,
-					version: s.version ? s.version : 1,
-					isDeleted: false,
-					workspace: s.workspace,
-					environment: s.environment
-				}))
-			});
-		}
-
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to ensure that secrets are versioned');
-	}
-}
+  if (unversionedSecrets.length > 0) {
+    await addSecretVersionsHelper({
+      secretVersions: unversionedSecrets.map(
+        (s, idx) =>
+          new SecretVersion({
+            ...s,
+            secret: s._id,
+            version: s.version ? s.version : 1,
+            isDeleted: false,
+            workspace: s.workspace,
+            environment: s.environment,
+          })
+      ),
+    });
+  }
+};
 
 export {
-	takeSecretSnapshotHelper,
-	addSecretVersionsHelper,
-	markDeletedSecretVersionsHelper,
-	initSecretVersioningHelper
-}
+  takeSecretSnapshotHelper,
+  addSecretVersionsHelper,
+  markDeletedSecretVersionsHelper,
+  initSecretVersioningHelper,
+};

backend/src/ee/helpers/secretVersion.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
 import { SecretVersion } from '../models';
 
@@ -13,41 +12,32 @@ const getLatestSecretVersionIds = async ({
 }: {
     secretIds: Types.ObjectId[];
 }) => {
-    
     interface LatestSecretVersionId {
         _id: Types.ObjectId;
         version: number;
         versionId: Types.ObjectId;
     }
     
-    let latestSecretVersionIds: LatestSecretVersionId[];
-    try {
-        latestSecretVersionIds = (await SecretVersion.aggregate([
-            {
-                $match: { 
-                    secret: { 
-                        $in: secretIds 
-                    } 
-                }
-            },
-            {
-                $group: {
-                    _id: '$secret',
-                    version: { $max: '$version' },
-                    versionId: { $max: '$_id' } // id of latest secret version
-                }
-            },
-            {
-                $sort: { version: -1 }
+    const latestSecretVersionIds = (await SecretVersion.aggregate([
+        {
+            $match: { 
+                secret: { 
+                    $in: secretIds 
+                } 
             }
-            ])
-            .exec());
-            
-    } catch (err) {
-        Sentry.setUser(null);
-		Sentry.captureException(err);
-        throw new Error('Failed to get latest secret versions');
-    }
+        },
+        {
+            $group: {
+                _id: '$secret',
+                version: { $max: '$version' },
+                versionId: { $max: '$_id' } // id of latest secret version
+            }
+        },
+        {
+            $sort: { version: -1 }
+        }
+        ])
+        .exec());
     
     return latestSecretVersionIds;
 }
@@ -66,40 +56,32 @@ const getLatestNSecretSecretVersionIds = async ({
     secretIds: Types.ObjectId[];
     n: number;
 }) => {
-    
     // TODO: optimize query
-    let latestNSecretVersions;
-    try {
-        latestNSecretVersions = (await SecretVersion.aggregate([
-            {
-                $match: {
-                secret: {
-                    $in: secretIds,
-                },
-                },
+    const latestNSecretVersions = (await SecretVersion.aggregate([
+        {
+            $match: {
+            secret: {
+                $in: secretIds,
             },
-            {
-                $sort: { version: -1 },
             },
-            {
-                $group: {
-                _id: "$secret",
-                versions: { $push: "$$ROOT" },
-                },
+        },
+        {
+            $sort: { version: -1 },
+        },
+        {
+            $group: {
+            _id: "$secret",
+            versions: { $push: "$$ROOT" },
             },
-            {
-                $project: {
-                _id: 0,
-                secret: "$_id",
-                versions: { $slice: ["$versions", n] },
-                },
-            }
-        ]));
-    } catch (err) {
-        Sentry.setUser(null);
-		Sentry.captureException(err);
-        throw new Error('Failed to get latest n secret versions');
-    }
+        },
+        {
+            $project: {
+            _id: 0,
+            secret: "$_id",
+            versions: { $slice: ["$versions", n] },
+            },
+        }
+    ]));
     
     return latestNSecretVersions;
 }

backend/src/helpers/auth.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
 import jwt from 'jsonwebtoken';
 import bcrypt from 'bcrypt';

backend/src/helpers/bot.ts

@@ -1,41 +1,34 @@
-import * as Sentry from '@sentry/node';
-import { Types } from 'mongoose';
+import { Types } from "mongoose";
 import {
-    Bot,
-    BotKey,
-    Secret,
-    ISecret,
-    IUser,
-    User,
-    IServiceAccount,
-    ServiceAccount,
-    IServiceTokenData,
-    ServiceTokenData
-} from '../models';
-import { 
-    generateKeyPair, 
-    encryptSymmetric,
-    decryptSymmetric,
-    decryptAsymmetric
-} from '../utils/crypto';
+  Bot,
+  BotKey,
+  Secret,
+  ISecret,
+  IUser,
+  User,
+  IServiceAccount,
+  ServiceAccount,
+  IServiceTokenData,
+  ServiceTokenData,
+} from "../models";
 import {
-    SECRET_SHARED,
-    AUTH_MODE_JWT,
-    AUTH_MODE_SERVICE_ACCOUNT,
-    AUTH_MODE_SERVICE_TOKEN,
-    AUTH_MODE_API_KEY
-} from '../variables';
-import { getEncryptionKey } from '../config';
-import { BotNotFoundError, UnauthorizedRequestError } from '../utils/errors';
+  generateKeyPair,
+  encryptSymmetric,
+  decryptSymmetric,
+  decryptAsymmetric,
+} from "../utils/crypto";
 import {
-    validateMembership
-} from '../helpers/membership';
-import {
-    validateUserClientForWorkspace
-} from '../helpers/user';
-import {
-    validateServiceAccountClientForWorkspace
-} from '../helpers/serviceAccount';
+  SECRET_SHARED,
+  AUTH_MODE_JWT,
+  AUTH_MODE_SERVICE_ACCOUNT,
+  AUTH_MODE_SERVICE_TOKEN,
+  AUTH_MODE_API_KEY,
+} from "../variables";
+import { getEncryptionKey } from "../config";
+import { BotNotFoundError, UnauthorizedRequestError } from "../utils/errors";
+import { validateMembership } from "../helpers/membership";
+import { validateUserClientForWorkspace } from "../helpers/user";
+import { validateServiceAccountClientForWorkspace } from "../helpers/serviceAccount";
 
 /**
  * Validate authenticated clients for bot with id [botId] based
@@ -46,99 +39,104 @@ import {
  * @param {Array<'admin' | 'member'>} obj.acceptedRoles - accepted workspace roles
  */
 const validateClientForBot = async ({
-    authData,
-    botId,
-    acceptedRoles
+  authData,
+  botId,
+  acceptedRoles,
 }: {
-    authData: {
-		authMode: string;
-		authPayload: IUser | IServiceAccount | IServiceTokenData;
-	};
-    botId: Types.ObjectId;
-    acceptedRoles: Array<'admin' | 'member'>;
+  authData: {
+    authMode: string;
+    authPayload: IUser | IServiceAccount | IServiceTokenData;
+  };
+  botId: Types.ObjectId;
+  acceptedRoles: Array<"admin" | "member">;
 }) => {
-    const bot = await Bot.findById(botId);
-    
-    if (!bot) throw BotNotFoundError();
-    
-    if (authData.authMode === AUTH_MODE_JWT && authData.authPayload instanceof User) {
-        await validateUserClientForWorkspace({
-            user: authData.authPayload,
-            workspaceId: bot.workspace,
-            acceptedRoles
-        });
-        
-        return bot;
-    }
+  const bot = await Bot.findById(botId);
 
-    if (authData.authMode === AUTH_MODE_SERVICE_ACCOUNT && authData.authPayload instanceof ServiceAccount) {
-        await validateServiceAccountClientForWorkspace({
-            serviceAccount: authData.authPayload,
-            workspaceId: bot.workspace
-        });
+  if (!bot) throw BotNotFoundError();
 
-        return bot;
-    }
-
-    if (authData.authMode === AUTH_MODE_SERVICE_TOKEN && authData.authPayload instanceof ServiceTokenData) {
-        throw UnauthorizedRequestError({
-            message: 'Failed service token authorization for bot'
-        });
-    }
-
-    if (authData.authMode === AUTH_MODE_API_KEY && authData.authPayload instanceof User) {
-        await validateUserClientForWorkspace({
-            user: authData.authPayload,
-            workspaceId: bot.workspace,
-            acceptedRoles
-        });
-        
-        return bot;
-    }
-    
-    throw BotNotFoundError({
-        message: 'Failed client authorization for bot'
+  if (
+    authData.authMode === AUTH_MODE_JWT &&
+    authData.authPayload instanceof User
+  ) {
+    await validateUserClientForWorkspace({
+      user: authData.authPayload,
+      workspaceId: bot.workspace,
+      acceptedRoles,
     });
-}
+
+    return bot;
+  }
+
+  if (
+    authData.authMode === AUTH_MODE_SERVICE_ACCOUNT &&
+    authData.authPayload instanceof ServiceAccount
+  ) {
+    await validateServiceAccountClientForWorkspace({
+      serviceAccount: authData.authPayload,
+      workspaceId: bot.workspace,
+    });
+
+    return bot;
+  }
+
+  if (
+    authData.authMode === AUTH_MODE_SERVICE_TOKEN &&
+    authData.authPayload instanceof ServiceTokenData
+  ) {
+    throw UnauthorizedRequestError({
+      message: "Failed service token authorization for bot",
+    });
+  }
+
+  if (
+    authData.authMode === AUTH_MODE_API_KEY &&
+    authData.authPayload instanceof User
+  ) {
+    await validateUserClientForWorkspace({
+      user: authData.authPayload,
+      workspaceId: bot.workspace,
+      acceptedRoles,
+    });
+
+    return bot;
+  }
+
+  throw BotNotFoundError({
+    message: "Failed client authorization for bot",
+  });
+};
 
 /**
  * Create an inactive bot with name [name] for workspace with id [workspaceId]
- * @param {Object} obj 
+ * @param {Object} obj
  * @param {String} obj.name - name of bot
  * @param {String} obj.workspaceId - id of workspace that bot belongs to
  */
 const createBot = async ({
-    name,
-    workspaceId,
+  name,
+  workspaceId,
 }: {
-    name: string;
-    workspaceId: Types.ObjectId;
+  name: string;
+  workspaceId: Types.ObjectId;
 }) => {
-    let bot;
-    try {
-        const { publicKey, privateKey } = generateKeyPair();
-        const { ciphertext, iv, tag } = encryptSymmetric({
-            plaintext: privateKey,
-            key: await getEncryptionKey()
-        });
+  const { publicKey, privateKey } = generateKeyPair();
+  const { ciphertext, iv, tag } = encryptSymmetric({
+    plaintext: privateKey,
+    key: await getEncryptionKey(),
+  });
 
-        bot = await new Bot({
-            name,
-            workspace: workspaceId,
-            isActive: false,
-            publicKey,
-            encryptedPrivateKey: ciphertext,
-            iv,
-            tag
-        }).save();
-    } catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to create bot');
-    }
-    
-    return bot;
-}
+  const bot = await new Bot({
+    name,
+    workspace: workspaceId,
+    isActive: false,
+    publicKey,
+    encryptedPrivateKey: ciphertext,
+    iv,
+    tag,
+  }).save();
+
+  return bot;
+};
 
 /**
  * Return decrypted secrets for workspace with id [workspaceId]
@@ -148,125 +146,105 @@ const createBot = async ({
  * @param {String} obj.environment - environment
  */
 const getSecretsHelper = async ({
-    workspaceId,
-    environment
+  workspaceId,
+  environment,
 }: {
-    workspaceId: Types.ObjectId;
-    environment: string;
+  workspaceId: Types.ObjectId;
+  environment: string;
 }) => {
-    const content = {} as any;
-    try {
-        const key = await getKey({ workspaceId });
-        const secrets = await Secret.find({
-            workspace: workspaceId,
-            environment,
-            type: SECRET_SHARED
-        });
-        
-        secrets.forEach((secret: ISecret) => {
-            const secretKey = decryptSymmetric({
-                ciphertext: secret.secretKeyCiphertext,
-                iv: secret.secretKeyIV,
-                tag: secret.secretKeyTag,
-                key
-            });
+  const content = {} as any;
+  const key = await getKey({ workspaceId: workspaceId.toString() });
+  const secrets = await Secret.find({
+    workspace: workspaceId,
+    environment,
+    type: SECRET_SHARED,
+  });
 
-            const secretValue = decryptSymmetric({
-                ciphertext: secret.secretValueCiphertext,
-                iv: secret.secretValueIV,
-                tag: secret.secretValueTag,
-                key
-            });
+  secrets.forEach((secret: ISecret) => {
+    const secretKey = decryptSymmetric({
+      ciphertext: secret.secretKeyCiphertext,
+      iv: secret.secretKeyIV,
+      tag: secret.secretKeyTag,
+      key,
+    });
 
-            content[secretKey] = secretValue;
-        });
-    } catch (err) {
-        Sentry.setUser(null);
-        Sentry.captureException(err);
-        throw new Error('Failed to get secrets');
-    }
+    const secretValue = decryptSymmetric({
+      ciphertext: secret.secretValueCiphertext,
+      iv: secret.secretValueIV,
+      tag: secret.secretValueTag,
+      key,
+    });
 
-    return content;
-}
+    content[secretKey] = secretValue;
+  });
+
+  return content;
+};
 
 /**
- * Return bot's copy of the workspace key for workspace 
+ * Return bot's copy of the workspace key for workspace
  * with id [workspaceId]
  * @param {Object} obj
  * @param {String} obj.workspaceId - id of workspace
  * @returns {String} key - decrypted workspace key
  */
-const getKey = async ({ workspaceId }: { workspaceId: Types.ObjectId }) => {
-    let key;
-    try {
-        const botKey = await BotKey.findOne({
-            workspace: workspaceId
-        }).populate<{ sender: IUser }>('sender', 'publicKey');
-        
-        if (!botKey) throw new Error('Failed to find bot key');
-        
-        const bot = await Bot.findOne({
-            workspace: workspaceId
-        }).select('+encryptedPrivateKey +iv +tag');
-        
-        if (!bot) throw new Error('Failed to find bot');
-        if (!bot.isActive) throw new Error('Bot is not active');
-        
-        const privateKeyBot = decryptSymmetric({
-            ciphertext: bot.encryptedPrivateKey,
-            iv: bot.iv,
-            tag: bot.tag,
-            key: await getEncryptionKey()
-        });
-        
-        key = decryptAsymmetric({
-            ciphertext: botKey.encryptedKey,
-            nonce: botKey.nonce,
-            publicKey: botKey.sender.publicKey as string,
-            privateKey: privateKeyBot
-        });
-    } catch (err) {
-        Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to get workspace key');
-    }
-    
-    return key;
-}
+const getKey = async ({ workspaceId }: { workspaceId: string }) => {
+  const botKey = await BotKey.findOne({
+    workspace: workspaceId,
+  }).populate<{ sender: IUser }>("sender", "publicKey");
+
+  if (!botKey) throw new Error("Failed to find bot key");
+
+  const bot = await Bot.findOne({
+    workspace: workspaceId,
+  }).select("+encryptedPrivateKey +iv +tag");
+
+  if (!bot) throw new Error("Failed to find bot");
+  if (!bot.isActive) throw new Error("Bot is not active");
+
+  const privateKeyBot = decryptSymmetric({
+    ciphertext: bot.encryptedPrivateKey,
+    iv: bot.iv,
+    tag: bot.tag,
+    key: await getEncryptionKey(),
+  });
+
+  const key = decryptAsymmetric({
+    ciphertext: botKey.encryptedKey,
+    nonce: botKey.nonce,
+    publicKey: botKey.sender.publicKey as string,
+    privateKey: privateKeyBot,
+  });
+
+  return key;
+};
 
 /**
  * Return symmetrically encrypted [plaintext] using the
- * key for workspace with id [workspaceId] 
+ * key for workspace with id [workspaceId]
  * @param {Object} obj1
  * @param {String} obj1.workspaceId - id of workspace
  * @param {String} obj1.plaintext - plaintext to encrypt
  */
 const encryptSymmetricHelper = async ({
-    workspaceId,
-    plaintext
+  workspaceId,
+  plaintext,
 }: {
-    workspaceId: Types.ObjectId;
-    plaintext: string;
+  workspaceId: Types.ObjectId;
+  plaintext: string;
 }) => {
-    
-    try {
-        const key = await getKey({ workspaceId });
-        const { ciphertext, iv, tag } = encryptSymmetric({
-            plaintext,
-            key
-        });
-        
-        return ({
-            ciphertext,
-            iv,
-            tag
-        });
-    } catch (err) {
-        Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to perform symmetric encryption with bot');
-    }
-}
+  const key = await getKey({ workspaceId: workspaceId.toString() });
+  const { ciphertext, iv, tag } = encryptSymmetric({
+    plaintext,
+    key,
+  });
+
+  return {
+    ciphertext,
+    iv,
+    tag,
+  };
+};
 /**
  * Return symmetrically decrypted [ciphertext] using the
  * key for workspace with id [workspaceId]
@@ -277,40 +255,31 @@ const encryptSymmetricHelper = async ({
  * @param {String} obj.tag - tag
  */
 const decryptSymmetricHelper = async ({
-    workspaceId,
+  workspaceId,
+  ciphertext,
+  iv,
+  tag,
+}: {
+  workspaceId: Types.ObjectId;
+  ciphertext: string;
+  iv: string;
+  tag: string;
+}) => {
+  const key = await getKey({ workspaceId: workspaceId.toString() });
+  const plaintext = decryptSymmetric({
     ciphertext,
     iv,
-    tag
-}: {
-    workspaceId: Types.ObjectId;
-    ciphertext: string;
-    iv: string;
-    tag: string;
-}) => {
-    let plaintext;
-    try {
-        const key = await getKey({ workspaceId });
-        const plaintext = decryptSymmetric({
-            ciphertext,
-            iv,
-            tag,
-            key
-        });
-        
-        return plaintext;
-    } catch (err) {
-        Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to perform symmetric decryption with bot');
-    }
-    
-    return plaintext;
-}
+    tag,
+    key,
+  });
+
+  return plaintext;
+};
 
 export {
-    validateClientForBot,
-    createBot,
-    getSecretsHelper,
-    encryptSymmetricHelper,
-    decryptSymmetricHelper
-}
+  validateClientForBot,
+  createBot,
+  getSecretsHelper,
+  encryptSymmetricHelper,
+  decryptSymmetricHelper,
+};

backend/src/helpers/event.ts

@@ -1,14 +1,13 @@
-import { Types } from 'mongoose';
-import * as Sentry from '@sentry/node';
-import { Bot, IBot } from '../models';
-import { EVENT_PUSH_SECRETS } from '../variables';
-import { IntegrationService } from '../services';
+import { Types } from "mongoose";
+import { Bot, IBot } from "../models";
+import { EVENT_PUSH_SECRETS } from "../variables";
+import { IntegrationService } from "../services";
 
 interface Event {
-    name: string;
-    workspaceId: Types.ObjectId;
-    environment?: string;
-    payload: any;
+  name: string;
+  workspaceId: Types.ObjectId;
+  environment?: string;
+  payload: any;
 }
 
 /**
@@ -19,39 +18,25 @@ interface Event {
  * @param {String} obj.event.workspaceId - id of workspace that event is part of
  * @param {Object} obj.event.payload - payload of event (depends on event)
  */
-const handleEventHelper = async ({
-    event
-}: {
-    event: Event;
-}) => {
-    const { 
-        workspaceId,
-        environment
-    } = event;
-    
-    // TODO: moduralize bot check into separate function
-    const bot = await Bot.findOne({
-        workspace: workspaceId,
-        isActive: true
-    });
-    
-    if (!bot) return;
-    
-    try {
-        switch (event.name) {
-            case EVENT_PUSH_SECRETS:
-                IntegrationService.syncIntegrations({
-                    workspaceId,
-                    environment
-                });
-                break;
-        }
-    } catch (err) {
-        Sentry.setUser(null);
-        Sentry.captureException(err);
-    }
-}
+const handleEventHelper = async ({ event }: { event: Event }) => {
+  const { workspaceId, environment } = event;
 
-export {
-    handleEventHelper
-}
+  // TODO: moduralize bot check into separate function
+  const bot = await Bot.findOne({
+    workspace: workspaceId,
+    isActive: true,
+  });
+
+  if (!bot) return;
+
+  switch (event.name) {
+    case EVENT_PUSH_SECRETS:
+      IntegrationService.syncIntegrations({
+        workspaceId,
+        environment,
+      });
+      break;
+  }
+};
+
+export { handleEventHelper };

backend/src/helpers/integration.ts

@@ -256,7 +256,7 @@ const syncIntegrationsHelper = async ({
                 integration,
                 integrationAuth,
                 secrets,
-                accessId: access.accessId,
+                accessId: access.accessId === undefined ? null : access.accessId,
                 accessToken: access.accessToken
             });
         }
@@ -482,4 +482,4 @@ export {
     getIntegrationAuthAccessHelper,
     setIntegrationAuthRefreshHelper,
     setIntegrationAuthAccessHelper
-}
+}

backend/src/helpers/key.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Key, IKey } from '../models';
 
 interface Key {
@@ -27,36 +26,30 @@ const pushKeys = async ({
 	workspaceId: string;
 	keys: Key[];
 }): Promise<void> => {
-	try {
-		// filter out already-inserted keys
-		const keysSet = new Set(
-			(
-				await Key.find(
-					{
-						workspace: workspaceId
-					},
-					'receiver'
-				)
-			).map((k: IKey) => k.receiver.toString())
-		);
+  // filter out already-inserted keys
+  const keysSet = new Set(
+    (
+      await Key.find(
+        {
+          workspace: workspaceId
+        },
+        'receiver'
+      )
+    ).map((k: IKey) => k.receiver.toString())
+  );
 
-		keys = keys.filter((key) => !keysSet.has(key.userId));
+  keys = keys.filter((key) => !keysSet.has(key.userId));
 
-		// add new shared keys only
-		await Key.insertMany(
-			keys.map((k) => ({
-				encryptedKey: k.encryptedKey,
-				nonce: k.nonce,
-				sender: userId,
-				receiver: k.userId,
-				workspace: workspaceId
-			}))
-		);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to push access keys');
-	}
+  // add new shared keys only
+  await Key.insertMany(
+    keys.map((k) => ({
+      encryptedKey: k.encryptedKey,
+      nonce: k.nonce,
+      sender: userId,
+      receiver: k.userId,
+      workspace: workspaceId
+    }))
+  );
 };
 
 export { pushKeys };

backend/src/helpers/membershipOrg.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
 import { 
 	MembershipOrg, 
@@ -144,15 +143,7 @@ const validateMembershipOrg = async ({
  * @return {Object} membershipOrg - membership
  */
 const findMembershipOrg = (queryObj: any) => {
-	let membershipOrg;
-	try {
-		membershipOrg = MembershipOrg.findOne(queryObj);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to find organization membership');
-	}
-
+	const membershipOrg = MembershipOrg.findOne(queryObj);
 	return membershipOrg;
 };
 
@@ -175,33 +166,27 @@ const addMembershipsOrg = async ({
 	roles: string[];
 	statuses: string[];
 }) => {
-	try {
-		const operations = userIds.map((userId, idx) => {
-			return {
-				updateOne: {
-					filter: {
-						user: userId,
-						organization: organizationId,
-						role: roles[idx],
-						status: statuses[idx]
-					},
-					update: {
-						user: userId,
-						organization: organizationId,
-						role: roles[idx],
-						status: statuses[idx]
-					},
-					upsert: true
-				}
-			};
-		});
+  const operations = userIds.map((userId, idx) => {
+    return {
+      updateOne: {
+        filter: {
+          user: userId,
+          organization: organizationId,
+          role: roles[idx],
+          status: statuses[idx]
+        },
+        update: {
+          user: userId,
+          organization: organizationId,
+          role: roles[idx],
+          status: statuses[idx]
+        },
+        upsert: true
+      }
+    };
+  });
 
-		await MembershipOrg.bulkWrite(operations as any);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to add users to organization');
-	}
+  await MembershipOrg.bulkWrite(operations as any);
 };
 
 /**
@@ -214,43 +199,36 @@ const deleteMembershipOrg = async ({
 }: {
 	membershipOrgId: string;
 }) => {
-	let deletedMembershipOrg;
-	try {
-		deletedMembershipOrg = await MembershipOrg.findOneAndDelete({
-			_id: membershipOrgId
-		});
+  const deletedMembershipOrg = await MembershipOrg.findOneAndDelete({
+    _id: membershipOrgId
+  });
 
-		if (!deletedMembershipOrg) throw new Error('Failed to delete organization membership');
+  if (!deletedMembershipOrg) throw new Error('Failed to delete organization membership');
 
-		// delete keys associated with organization membership
-		if (deletedMembershipOrg?.user) {
-			// case: organization membership had a registered user
+  // delete keys associated with organization membership
+  if (deletedMembershipOrg?.user) {
+    // case: organization membership had a registered user
 
-			const workspaces = (
-				await Workspace.find({
-					organization: deletedMembershipOrg.organization
-				})
-			).map((w) => w._id.toString());
+    const workspaces = (
+      await Workspace.find({
+        organization: deletedMembershipOrg.organization
+      })
+    ).map((w) => w._id.toString());
 
-			await Membership.deleteMany({
-				user: deletedMembershipOrg.user,
-				workspace: {
-					$in: workspaces
-				}
-			});
+    await Membership.deleteMany({
+      user: deletedMembershipOrg.user,
+      workspace: {
+        $in: workspaces
+      }
+    });
 
-			await Key.deleteMany({
-				receiver: deletedMembershipOrg.user,
-				workspace: {
-					$in: workspaces
-				}
-			});
-		}
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to delete organization membership');
-	}
+    await Key.deleteMany({
+      receiver: deletedMembershipOrg.user,
+      workspace: {
+        $in: workspaces
+      }
+    });
+  }
 
 	return deletedMembershipOrg;
 };

backend/src/helpers/organization.ts

@@ -1,39 +1,34 @@
-import * as Sentry from '@sentry/node';
-import Stripe from 'stripe';
-import { Types } from 'mongoose';
+import Stripe from "stripe";
+import { Types } from "mongoose";
 import {
-	IUser,
-	User,
-	IServiceAccount,
-	ServiceAccount,
-	IServiceTokenData,
-	ServiceTokenData
-} from '../models';
-import { Organization, MembershipOrg } from '../models';
-import { 
-	ACCEPTED,
-	AUTH_MODE_JWT,
-	AUTH_MODE_SERVICE_ACCOUNT,
-	AUTH_MODE_SERVICE_TOKEN,
-	AUTH_MODE_API_KEY,
-	OWNER
-} from '../variables';
-import { 
-	getStripeSecretKey,
-	getStripeProductPro,
-	getStripeProductTeam,
-	getStripeProductStarter
-} from '../config';
+  IUser,
+  User,
+  IServiceAccount,
+  ServiceAccount,
+  IServiceTokenData,
+  ServiceTokenData,
+} from "../models";
+import { Organization, MembershipOrg } from "../models";
 import {
-	UnauthorizedRequestError,
-	OrganizationNotFoundError
-} from '../utils/errors';
+  ACCEPTED,
+  AUTH_MODE_JWT,
+  AUTH_MODE_SERVICE_ACCOUNT,
+  AUTH_MODE_SERVICE_TOKEN,
+  AUTH_MODE_API_KEY,
+  OWNER,
+} from "../variables";
 import {
-	validateUserClientForOrganization
-} from '../helpers/user';
+  getStripeSecretKey,
+  getStripeProductPro,
+  getStripeProductTeam,
+  getStripeProductStarter,
+} from "../config";
 import {
-	validateServiceAccountClientForOrganization
-} from '../helpers/serviceAccount';
+  UnauthorizedRequestError,
+  OrganizationNotFoundError,
+} from "../utils/errors";
+import { validateUserClientForOrganization } from "../helpers/user";
+import { validateServiceAccountClientForOrganization } from "../helpers/serviceAccount";
 
 /**
  * Validate accepted clients for organization with id [organizationId]
@@ -42,69 +37,80 @@ import {
  * @param {Types.ObjectId} obj.organizationId - id of organization to validate against
  */
 const validateClientForOrganization = async ({
-	authData,
-	organizationId,
-	acceptedRoles,
-	acceptedStatuses
+  authData,
+  organizationId,
+  acceptedRoles,
+  acceptedStatuses,
 }: {
-	authData: {
-		authMode: string;
-		authPayload: IUser | IServiceAccount | IServiceTokenData;
-	},
-	organizationId: Types.ObjectId;
-	acceptedRoles: Array<'owner' | 'admin' | 'member'>;
-	acceptedStatuses: Array<'invited' | 'accepted'>;
+  authData: {
+    authMode: string;
+    authPayload: IUser | IServiceAccount | IServiceTokenData;
+  };
+  organizationId: Types.ObjectId;
+  acceptedRoles: Array<"owner" | "admin" | "member">;
+  acceptedStatuses: Array<"invited" | "accepted">;
 }) => {
-	
-	const organization = await Organization.findById(organizationId);
-	
-	if (!organization) {
-		throw OrganizationNotFoundError({
-			message: 'Failed to find organization'
-		});
-	}
-	
-	if (authData.authMode === AUTH_MODE_JWT && authData.authPayload instanceof User) {
-		const membershipOrg = await validateUserClientForOrganization({
-			user: authData.authPayload,
-			organization,
-			acceptedRoles,
-			acceptedStatuses
-		});
-		
-		return ({ organization, membershipOrg });
-	}
+  const organization = await Organization.findById(organizationId);
 
-	if (authData.authMode === AUTH_MODE_SERVICE_ACCOUNT && authData.authPayload instanceof ServiceAccount) {
-		await validateServiceAccountClientForOrganization({
-			serviceAccount: authData.authPayload,
-			organization
-		});
-		
-		return ({ organization });
-	}
+  if (!organization) {
+    throw OrganizationNotFoundError({
+      message: "Failed to find organization",
+    });
+  }
 
-	if (authData.authMode === AUTH_MODE_SERVICE_TOKEN && authData.authPayload instanceof ServiceTokenData) {
-		throw UnauthorizedRequestError({
-			message: 'Failed service token authorization for organization'
-		});
-	}
+  if (
+    authData.authMode === AUTH_MODE_JWT &&
+    authData.authPayload instanceof User
+  ) {
+    const membershipOrg = await validateUserClientForOrganization({
+      user: authData.authPayload,
+      organization,
+      acceptedRoles,
+      acceptedStatuses,
+    });
 
-	if (authData.authMode === AUTH_MODE_API_KEY && authData.authPayload instanceof User) {
-		const membershipOrg = await validateUserClientForOrganization({
-			user: authData.authPayload,
-			organization,
-			acceptedRoles,
-			acceptedStatuses
-		});
-		
-		return ({ organization, membershipOrg });
-	}
-	
-	throw UnauthorizedRequestError({
-		message: 'Failed client authorization for organization'
-	});
-}
+    return { organization, membershipOrg };
+  }
+
+  if (
+    authData.authMode === AUTH_MODE_SERVICE_ACCOUNT &&
+    authData.authPayload instanceof ServiceAccount
+  ) {
+    await validateServiceAccountClientForOrganization({
+      serviceAccount: authData.authPayload,
+      organization,
+    });
+
+    return { organization };
+  }
+
+  if (
+    authData.authMode === AUTH_MODE_SERVICE_TOKEN &&
+    authData.authPayload instanceof ServiceTokenData
+  ) {
+    throw UnauthorizedRequestError({
+      message: "Failed service token authorization for organization",
+    });
+  }
+
+  if (
+    authData.authMode === AUTH_MODE_API_KEY &&
+    authData.authPayload instanceof User
+  ) {
+    const membershipOrg = await validateUserClientForOrganization({
+      user: authData.authPayload,
+      organization,
+      acceptedRoles,
+      acceptedStatuses,
+    });
+
+    return { organization, membershipOrg };
+  }
+
+  throw UnauthorizedRequestError({
+    message: "Failed client authorization for organization",
+  });
+};
 
 /**
  * Create an organization with name [name]
@@ -114,43 +120,37 @@ const validateClientForOrganization = async ({
  * @param {Object} organization - new organization
  */
 const createOrganization = async ({
-	name,
-	email
+  name,
+  email,
 }: {
-	name: string;
-	email: string;
+  name: string;
+  email: string;
 }) => {
-	let organization;
-	try {
-		// register stripe account
-		const stripe = new Stripe(await getStripeSecretKey(), {
-			apiVersion: '2022-08-01'
-		});
+  let organization;
+  // register stripe account
+  const stripe = new Stripe(await getStripeSecretKey(), {
+    apiVersion: "2022-08-01",
+  });
 
-		if (await getStripeSecretKey()) {
-			const customer = await stripe.customers.create({
-				email,
-				description: name
-			});
+  if (await getStripeSecretKey()) {
+    const customer = await stripe.customers.create({
+      email,
+      description: name,
+    });
 
-			organization = await new Organization({
-				name,
-				customerId: customer.id
-			}).save();
-		} else {
-			organization = await new Organization({
-				name
-			}).save();
-		}
+    organization = await new Organization({
+      name,
+      customerId: customer.id,
+    }).save();
+  } else {
+    organization = await new Organization({
+      name,
+    }).save();
+  }
 
-		await initSubscriptionOrg({ organizationId: organization._id });
-	} catch (err) {
-		Sentry.setUser({ email });
-		Sentry.captureException(err);
-		throw new Error(`Failed to create organization [err=${err}]`);
-	}
+  await initSubscriptionOrg({ organizationId: organization._id });
 
-	return organization;
+  return organization;
 };
 
 /**
@@ -162,57 +162,52 @@ const createOrganization = async ({
  * @return {Subscription} obj.subscription - new subscription
  */
 const initSubscriptionOrg = async ({
-	organizationId
+  organizationId,
 }: {
-	organizationId: Types.ObjectId;
+  organizationId: Types.ObjectId;
 }) => {
-	let stripeSubscription;
-	let subscription;
-	try {
-		// find organization
-		const organization = await Organization.findOne({
-			_id: organizationId
-		});
+  let stripeSubscription;
+  let subscription;
 
-		if (organization) {
-			if (organization.customerId) {
-				// initialize starter subscription with quantity of 0
-				const stripe = new Stripe(await getStripeSecretKey(), {
-					apiVersion: '2022-08-01'
-				});
+  // find organization
+  const organization = await Organization.findOne({
+    _id: organizationId,
+  });
 
-				const productToPriceMap = {
-					starter: await getStripeProductStarter(),
-					team: await getStripeProductTeam(),
-					pro: await getStripeProductPro()
-				};
+  if (organization) {
+    if (organization.customerId) {
+      // initialize starter subscription with quantity of 0
+      const stripe = new Stripe(await getStripeSecretKey(), {
+        apiVersion: "2022-08-01",
+      });
 
-				stripeSubscription = await stripe.subscriptions.create({
-					customer: organization.customerId,
-					items: [
-						{
-							price: productToPriceMap['starter'],
-							quantity: 1
-						}
-					],
-					payment_behavior: 'default_incomplete',
-					proration_behavior: 'none',
-					expand: ['latest_invoice.payment_intent']
-				});
-			}
-		} else {
-			throw new Error('Failed to initialize free organization subscription');
-		}
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to initialize free organization subscription');
-	}
+      const productToPriceMap = {
+        starter: await getStripeProductStarter(),
+        team: await getStripeProductTeam(),
+        pro: await getStripeProductPro(),
+      };
 
-	return {
-		stripeSubscription,
-		subscription
-	};
+      stripeSubscription = await stripe.subscriptions.create({
+        customer: organization.customerId,
+        items: [
+          {
+            price: productToPriceMap["starter"],
+            quantity: 1,
+          },
+        ],
+        payment_behavior: "default_incomplete",
+        proration_behavior: "none",
+        expand: ["latest_invoice.payment_intent"],
+      });
+    }
+  } else {
+    throw new Error("Failed to initialize free organization subscription");
+  }
+
+  return {
+    stripeSubscription,
+    subscription,
+  };
 };
 
 /**
@@ -222,54 +217,49 @@ const initSubscriptionOrg = async ({
  * @param {Number} obj.organizationId - id of subscription's organization
  */
 const updateSubscriptionOrgQuantity = async ({
-	organizationId
+  organizationId,
 }: {
-	organizationId: string;
+  organizationId: string;
 }) => {
-	let stripeSubscription;
-	try {
-		// find organization
-		const organization = await Organization.findOne({
-			_id: organizationId
-		});
+  let stripeSubscription;
+  // find organization
+  const organization = await Organization.findOne({
+    _id: organizationId,
+  });
 
-		if (organization && organization.customerId) {
-			const quantity = await MembershipOrg.countDocuments({
-				organization: organizationId,
-				status: ACCEPTED
-			});
+  if (organization && organization.customerId) {
+    const quantity = await MembershipOrg.countDocuments({
+      organization: organizationId,
+      status: ACCEPTED,
+    });
 
-			const stripe = new Stripe(await getStripeSecretKey(), {
-				apiVersion: '2022-08-01'
-			});
+    const stripe = new Stripe(await getStripeSecretKey(), {
+      apiVersion: "2022-08-01",
+    });
 
-			const subscription = (
-				await stripe.subscriptions.list({
-					customer: organization.customerId
-				})
-			).data[0];
+    const subscription = (
+      await stripe.subscriptions.list({
+        customer: organization.customerId,
+      })
+    ).data[0];
 
-			stripeSubscription = await stripe.subscriptions.update(subscription.id, {
-				items: [
-					{
-						id: subscription.items.data[0].id,
-						price: subscription.items.data[0].price.id,
-						quantity
-					}
-				]
-			});
-		}
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-	}
+    stripeSubscription = await stripe.subscriptions.update(subscription.id, {
+      items: [
+        {
+          id: subscription.items.data[0].id,
+          price: subscription.items.data[0].price.id,
+          quantity,
+        },
+      ],
+    });
+  }
 
-	return stripeSubscription;
+  return stripeSubscription;
 };
 
 export {
-	validateClientForOrganization,
-	createOrganization,
-	initSubscriptionOrg,
-	updateSubscriptionOrgQuantity
-};
+  validateClientForOrganization,
+  createOrganization,
+  initSubscriptionOrg,
+  updateSubscriptionOrgQuantity,
+};

backend/src/helpers/token.ts

@@ -1,16 +1,15 @@
-import * as Sentry from '@sentry/node';
-import { Types } from 'mongoose';
-import { TokenData } from '../models';
-import crypto from 'crypto';
-import bcrypt from 'bcrypt';
+import { Types } from "mongoose";
+import { TokenData } from "../models";
+import crypto from "crypto";
+import bcrypt from "bcrypt";
 import {
-    TOKEN_EMAIL_CONFIRMATION,
-    TOKEN_EMAIL_MFA,
-    TOKEN_EMAIL_ORG_INVITATION,
-    TOKEN_EMAIL_PASSWORD_RESET
-} from '../variables';
-import { UnauthorizedRequestError } from '../utils/errors';
-import { getSaltRounds } from '../config';
+  TOKEN_EMAIL_CONFIRMATION,
+  TOKEN_EMAIL_MFA,
+  TOKEN_EMAIL_ORG_INVITATION,
+  TOKEN_EMAIL_PASSWORD_RESET,
+} from "../variables";
+import { UnauthorizedRequestError } from "../utils/errors";
+import { getSaltRounds } from "../config";
 
 /**
  * Create and store a token in the database for purpose [type]
@@ -22,194 +21,197 @@ import { getSaltRounds } from '../config';
  * @returns {String} token - the created token
  */
 const createTokenHelper = async ({
-    type,
-    email,
-    phoneNumber,
-    organizationId
+  type,
+  email,
+  phoneNumber,
+  organizationId,
 }: {
-    type: 'emailConfirmation' | 'emailMfa' | 'organizationInvitation' | 'passwordReset';
+  type:
+    | "emailConfirmation"
+    | "emailMfa"
+    | "organizationInvitation"
+    | "passwordReset";
+  email?: string;
+  phoneNumber?: string;
+  organizationId?: Types.ObjectId;
+}) => {
+  let token, expiresAt, triesLeft;
+  // generate random token based on specified token use-case
+  // type [type]
+  switch (type) {
+    case TOKEN_EMAIL_CONFIRMATION:
+      // generate random 6-digit code
+      token = String(crypto.randomInt(Math.pow(10, 5), Math.pow(10, 6) - 1));
+      expiresAt = new Date(new Date().getTime() + 86400000);
+      break;
+    case TOKEN_EMAIL_MFA:
+      // generate random 6-digit code
+      token = String(crypto.randomInt(Math.pow(10, 5), Math.pow(10, 6) - 1));
+      triesLeft = 5;
+      expiresAt = new Date(new Date().getTime() + 300000);
+      break;
+    case TOKEN_EMAIL_ORG_INVITATION:
+      // generate random hex
+      token = crypto.randomBytes(16).toString("hex");
+      expiresAt = new Date(new Date().getTime() + 259200000);
+      break;
+    case TOKEN_EMAIL_PASSWORD_RESET:
+      // generate random hex
+      token = crypto.randomBytes(16).toString("hex");
+      expiresAt = new Date(new Date().getTime() + 86400000);
+      break;
+    default:
+      token = crypto.randomBytes(16).toString("hex");
+      expiresAt = new Date();
+      break;
+  }
+
+  interface TokenDataQuery {
+    type: string;
     email?: string;
     phoneNumber?: string;
-    organizationId?: Types.ObjectId
-}) => {
-    let token, expiresAt, triesLeft;
-    try {
-        // generate random token based on specified token use-case
-        // type [type]
-        switch (type) {
-            case TOKEN_EMAIL_CONFIRMATION:
-                // generate random 6-digit code
-                token = String(crypto.randomInt(Math.pow(10, 5), Math.pow(10, 6) - 1));
-                expiresAt = new Date((new Date()).getTime() + 86400000);
-                break;
-            case TOKEN_EMAIL_MFA:
-                // generate random 6-digit code
-                token = String(crypto.randomInt(Math.pow(10, 5), Math.pow(10, 6) - 1));
-                triesLeft = 5;
-                expiresAt = new Date((new Date()).getTime() + 300000);
-                break;
-            case TOKEN_EMAIL_ORG_INVITATION:
-                // generate random hex
-                token = crypto.randomBytes(16).toString('hex');
-                expiresAt = new Date((new Date()).getTime() + 259200000);
-                break;
-            case TOKEN_EMAIL_PASSWORD_RESET:
-                // generate random hex
-                token = crypto.randomBytes(16).toString('hex');
-                expiresAt = new Date((new Date()).getTime() + 86400000); 
-                break;
-            default:
-                token = crypto.randomBytes(16).toString('hex');
-                expiresAt = new Date();
-                break;
-        }
-        
-       interface TokenDataQuery {
-            type: string;
-            email?: string;
-            phoneNumber?: string;
-            organization?: Types.ObjectId;
-        }
-        
-        interface TokenDataUpdate {
-            type: string;
-            email?: string;
-            phoneNumber?: string;
-            organization?: Types.ObjectId;
-            tokenHash: string;
-            triesLeft?: number;
-            expiresAt: Date;
-        }
+    organization?: Types.ObjectId;
+  }
 
-        const query: TokenDataQuery = { type };
-        const update: TokenDataUpdate = {
-            type,
-            tokenHash: await bcrypt.hash(token, await getSaltRounds()),
-            expiresAt
-        }
+  interface TokenDataUpdate {
+    type: string;
+    email?: string;
+    phoneNumber?: string;
+    organization?: Types.ObjectId;
+    tokenHash: string;
+    triesLeft?: number;
+    expiresAt: Date;
+  }
 
-        if (email) {
-            query.email = email; 
-            update.email = email; 
-        }
-        if (phoneNumber) { 
-            query.phoneNumber = phoneNumber; 
-            update.phoneNumber = phoneNumber; 
-        }
-        if (organizationId) { 
-            query.organization = organizationId 
-            update.organization = organizationId 
-        } 
-        
-        if (triesLeft) {
-            update.triesLeft = triesLeft;
-        }
-       
-        await TokenData.findOneAndUpdate(
-            query,
-            update,
-            {
-                new: true,
-                upsert: true
-            }
-        );
-    } catch (err) {
-        Sentry.setUser(null);
-        Sentry.captureException(err);
-        throw new Error(
-            "Failed to create token"
-        ); 
-    }
-    
-    return token;
-}
+  const query: TokenDataQuery = { type };
+  const update: TokenDataUpdate = {
+    type,
+    tokenHash: await bcrypt.hash(token, await getSaltRounds()),
+    expiresAt,
+  };
+
+  if (email) {
+    query.email = email;
+    update.email = email;
+  }
+  if (phoneNumber) {
+    query.phoneNumber = phoneNumber;
+    update.phoneNumber = phoneNumber;
+  }
+  if (organizationId) {
+    query.organization = organizationId;
+    update.organization = organizationId;
+  }
+
+  if (triesLeft) {
+    update.triesLeft = triesLeft;
+  }
+
+  await TokenData.findOneAndUpdate(query, update, {
+    new: true,
+    upsert: true,
+  });
+
+  return token;
+};
 
 /**
- * 
+ *
  * @param {Object} obj
  * @param {String} obj.email - email associated with the token
  * @param {String} obj.token - value of the token
  */
 const validateTokenHelper = async ({
-    type,
-    email,
-    phoneNumber,
-    organizationId,
-    token
+  type,
+  email,
+  phoneNumber,
+  organizationId,
+  token,
 }: {
-    type: 'emailConfirmation' | 'emailMfa' | 'organizationInvitation' | 'passwordReset';
+  type:
+    | "emailConfirmation"
+    | "emailMfa"
+    | "organizationInvitation"
+    | "passwordReset";
+  email?: string;
+  phoneNumber?: string;
+  organizationId?: Types.ObjectId;
+  token: string;
+}) => {
+  interface Query {
+    type: string;
     email?: string;
     phoneNumber?: string;
-    organizationId?: Types.ObjectId;
-    token: string;
-}) => {
-    interface Query {
-        type: string;
-        email?: string;
-        phoneNumber?: string;
-        organization?: Types.ObjectId;
-    }
+    organization?: Types.ObjectId;
+  }
 
-    const query: Query = { type };
+  const query: Query = { type };
 
-    if (email) { query.email = email; }
-    if (phoneNumber) { query.phoneNumber = phoneNumber; }
-    if (organizationId) { query.organization = organizationId; }
+  if (email) {
+    query.email = email;
+  }
+  if (phoneNumber) {
+    query.phoneNumber = phoneNumber;
+  }
+  if (organizationId) {
+    query.organization = organizationId;
+  }
 
-    const tokenData = await TokenData.findOne(query).select('+tokenHash');
-    
-    if (!tokenData) throw new Error('Failed to find token to validate');
-    
-    if (tokenData.expiresAt < new Date()) {
-        // case: token expired
-        await TokenData.findByIdAndDelete(tokenData._id);
-        throw UnauthorizedRequestError({
-            message: 'MFA session expired. Please log in again',
-            context: {
-                code: 'mfa_expired'
-            }
-        });
-    }
+  const tokenData = await TokenData.findOne(query).select("+tokenHash");
 
-    const isValid = await bcrypt.compare(token, tokenData.tokenHash);
-    if (!isValid) {
-        // case: token is not valid
-        if (tokenData?.triesLeft !== undefined) {
-            // case: token has a try-limit
-            if (tokenData.triesLeft === 1) {
-                // case: token is out of tries
-                await TokenData.findByIdAndDelete(tokenData._id);
-            } else {
-                // case: token has more than 1 try left
-                await TokenData.findByIdAndUpdate(tokenData._id, {
-                    triesLeft: tokenData.triesLeft - 1
-                }, {
-                    new: true
-                });
-            }
+  if (!tokenData) throw new Error("Failed to find token to validate");
 
-            throw UnauthorizedRequestError({
-                message: 'MFA code is invalid',
-                context: {
-                    code: 'mfa_invalid',
-                    triesLeft: tokenData.triesLeft - 1
-                }
-            });
-        }
-
-        throw UnauthorizedRequestError({
-            message: 'MFA code is invalid',
-            context: {
-                code: 'mfa_invalid'
-            }
-        });
-    }
-
-    // case: token is valid
+  if (tokenData.expiresAt < new Date()) {
+    // case: token expired
     await TokenData.findByIdAndDelete(tokenData._id);
-}
+    throw UnauthorizedRequestError({
+      message: "MFA session expired. Please log in again",
+      context: {
+        code: "mfa_expired",
+      },
+    });
+  }
 
-export {
-    createTokenHelper,
-    validateTokenHelper
-}
+  const isValid = await bcrypt.compare(token, tokenData.tokenHash);
+  if (!isValid) {
+    // case: token is not valid
+    if (tokenData?.triesLeft !== undefined) {
+      // case: token has a try-limit
+      if (tokenData.triesLeft === 1) {
+        // case: token is out of tries
+        await TokenData.findByIdAndDelete(tokenData._id);
+      } else {
+        // case: token has more than 1 try left
+        await TokenData.findByIdAndUpdate(
+          tokenData._id,
+          {
+            triesLeft: tokenData.triesLeft - 1,
+          },
+          {
+            new: true,
+          }
+        );
+      }
+
+      throw UnauthorizedRequestError({
+        message: "MFA code is invalid",
+        context: {
+          code: "mfa_invalid",
+          triesLeft: tokenData.triesLeft - 1,
+        },
+      });
+    }
+
+    throw UnauthorizedRequestError({
+      message: "MFA code is invalid",
+      context: {
+        code: "mfa_invalid",
+      },
+    });
+  }
+
+  // case: token is valid
+  await TokenData.findByIdAndDelete(tokenData._id);
+};
+
+export { createTokenHelper, validateTokenHelper };

backend/src/helpers/user.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
 import {
 	IUser, 
@@ -28,16 +27,9 @@ import {
  * @returns {Object} user - the initialized user
  */
 const setupAccount = async ({ email }: { email: string }) => {
-	let user;
-	try {
-		user = await new User({
-			email
-		}).save();
-	} catch (err) {
-		Sentry.setUser({ email });
-		Sentry.captureException(err);
-		throw new Error('Failed to set up account');
-	}
+  const user = await new User({
+    email
+  }).save();
 
 	return user;
 };
@@ -89,34 +81,27 @@ const completeAccount = async ({
 	salt: string;
 	verifier: string;
 }) => {
-	let user;
-	try {
-		const options = {
-			new: true
-		};
-		user = await User.findByIdAndUpdate(
-			userId,
-			{
-				firstName,
-				lastName,
-				encryptionVersion,
-				protectedKey,
-				protectedKeyIV,
-				protectedKeyTag,
-				publicKey,
-				encryptedPrivateKey,
-				iv: encryptedPrivateKeyIV,
-				tag: encryptedPrivateKeyTag,
-				salt,
-				verifier
-			},
-			options
-		);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to complete account set up');
-	}
+  const options = {
+    new: true
+  };
+  const user = await User.findByIdAndUpdate(
+    userId,
+    {
+      firstName,
+      lastName,
+      encryptionVersion,
+      protectedKey,
+      protectedKeyIV,
+      protectedKeyTag,
+      publicKey,
+      encryptedPrivateKey,
+      iv: encryptedPrivateKeyIV,
+      tag: encryptedPrivateKeyTag,
+      salt,
+      verifier
+    },
+    options
+  );
 
 	return user;
 };

backend/src/integrations/apps.ts

@@ -1,7 +1,6 @@
-import * as Sentry from "@sentry/node";
 import { Octokit } from "@octokit/rest";
 import { IIntegrationAuth } from "../models";
-import request from '../config/request';
+import request from "../config/request";
 import {
   INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_AWS_PARAMETER_STORE,
@@ -26,7 +25,7 @@ import {
   INTEGRATION_FLYIO_API_URL,
   INTEGRATION_CIRCLECI_API_URL,
   INTEGRATION_TRAVISCI_API_URL,
-  INTEGRATION_SUPABASE_API_URL
+  INTEGRATION_SUPABASE_API_URL,
 } from "../variables";
 
 interface App {
@@ -47,87 +46,80 @@ interface App {
 const getApps = async ({
   integrationAuth,
   accessToken,
-  teamId
+  teamId,
 }: {
   integrationAuth: IIntegrationAuth;
   accessToken: string;
   teamId?: string;
 }) => {
-
   let apps: App[] = [];
-  try {
-    switch (integrationAuth.integration) {
-      case INTEGRATION_AZURE_KEY_VAULT:
-        apps = [];
-        break;
-      case INTEGRATION_AWS_PARAMETER_STORE:
-        apps = [];
-        break;
-      case INTEGRATION_AWS_SECRET_MANAGER:
-        apps = [];
-        break;
-      case INTEGRATION_HEROKU:
-        apps = await getAppsHeroku({
-          accessToken,
-        });
-        break;
-      case INTEGRATION_VERCEL:
-        apps = await getAppsVercel({
-          integrationAuth,
-          accessToken,
-        });
-        break;
-      case INTEGRATION_NETLIFY:
-        apps = await getAppsNetlify({
-          accessToken,
-        });
-        break;
-      case INTEGRATION_GITHUB:
-        apps = await getAppsGithub({
-          accessToken,
-        });
-        break;
-      case INTEGRATION_GITLAB:
-        apps = await getAppsGitlab({
-          accessToken,
-          teamId
-        });
-        break;
-      case INTEGRATION_RENDER:
-        apps = await getAppsRender({
-          accessToken,
-        });
-        break;
-      case INTEGRATION_RAILWAY:
-        apps = await getAppsRailway({
-          accessToken 
-        });
-        break;
-      case INTEGRATION_FLYIO:
-        apps = await getAppsFlyio({
-          accessToken,
-        });
-        break;
-      case INTEGRATION_CIRCLECI:
-        apps = await getAppsCircleCI({
-          accessToken,
-        });
-        break;
-      case INTEGRATION_TRAVISCI:
-        apps = await getAppsTravisCI({
-          accessToken,
-        })
-        break;
-      case INTEGRATION_SUPABASE:
-        apps = await getAppsSupabase({
-            accessToken
-        });
-        break;
-    }
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get integration apps");
+  switch (integrationAuth.integration) {
+    case INTEGRATION_AZURE_KEY_VAULT:
+      apps = [];
+      break;
+    case INTEGRATION_AWS_PARAMETER_STORE:
+      apps = [];
+      break;
+    case INTEGRATION_AWS_SECRET_MANAGER:
+      apps = [];
+      break;
+    case INTEGRATION_HEROKU:
+      apps = await getAppsHeroku({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_VERCEL:
+      apps = await getAppsVercel({
+        integrationAuth,
+        accessToken,
+      });
+      break;
+    case INTEGRATION_NETLIFY:
+      apps = await getAppsNetlify({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_GITHUB:
+      apps = await getAppsGithub({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_GITLAB:
+      apps = await getAppsGitlab({
+        accessToken,
+        teamId,
+      });
+      break;
+    case INTEGRATION_RENDER:
+      apps = await getAppsRender({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_RAILWAY:
+      apps = await getAppsRailway({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_FLYIO:
+      apps = await getAppsFlyio({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_CIRCLECI:
+      apps = await getAppsCircleCI({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_TRAVISCI:
+      apps = await getAppsTravisCI({
+        accessToken,
+      });
+      break;
+    case INTEGRATION_SUPABASE:
+      apps = await getAppsSupabase({
+        accessToken,
+      });
+      break;
   }
 
   return apps;
@@ -141,25 +133,18 @@ const getApps = async ({
  * @returns {String} apps.name - name of Heroku app
  */
 const getAppsHeroku = async ({ accessToken }: { accessToken: string }) => {
-  let apps;
-  try {
-    const res = (
-      await request.get(`${INTEGRATION_HEROKU_API_URL}/apps`, {
-        headers: {
-          Accept: "application/vnd.heroku+json; version=3",
-          Authorization: `Bearer ${accessToken}`,
-        },
-      })
-    ).data;
+  const res = (
+    await request.get(`${INTEGRATION_HEROKU_API_URL}/apps`, {
+      headers: {
+        Accept: "application/vnd.heroku+json; version=3",
+        Authorization: `Bearer ${accessToken}`,
+      },
+    })
+  ).data;
 
-    apps = res.map((a: any) => ({
-      name: a.name,
-    }));
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get Heroku integration apps");
-  }
+  const apps = res.map((a: any) => ({
+    name: a.name,
+  }));
 
   return apps;
 };
@@ -178,33 +163,26 @@ const getAppsVercel = async ({
   integrationAuth: IIntegrationAuth;
   accessToken: string;
 }) => {
-  let apps;
-  try {
-    const res = (
-      await request.get(`${INTEGRATION_VERCEL_API_URL}/v9/projects`, {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          'Accept-Encoding': 'application/json'
-        },
-        ...(integrationAuth?.teamId
-          ? {
-              params: {
-                teamId: integrationAuth.teamId,
-              },
-            }
-          : {}),
-      })
-    ).data;
+  const res = (
+    await request.get(`${INTEGRATION_VERCEL_API_URL}/v9/projects`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Accept-Encoding": "application/json",
+      },
+      ...(integrationAuth?.teamId
+        ? {
+            params: {
+              teamId: integrationAuth.teamId,
+            },
+          }
+        : {}),
+    })
+  ).data;
 
-    apps = res.projects.map((a: any) => ({
-      name: a.name,
-      appId: a.id
-    }));
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get Vercel integration apps");
-  }
+  const apps = res.projects.map((a: any) => ({
+    name: a.name,
+    appId: a.id,
+  }));
 
   return apps;
 };
@@ -218,43 +196,40 @@ const getAppsVercel = async ({
  */
 const getAppsNetlify = async ({ accessToken }: { accessToken: string }) => {
   const apps: any = [];
-  try {
-    let page = 1;
-    const perPage = 10;
-    let hasMorePages = true;
-    
-    // paginate through all sites
-    while (hasMorePages) {
-      const params = new URLSearchParams({
-        page: String(page),
-        per_page: String(perPage)
-      });
+  let page = 1;
+  const perPage = 10;
+  let hasMorePages = true;
 
-      const { data } = await request.get(`${INTEGRATION_NETLIFY_API_URL}/api/v1/sites`, {
+  // paginate through all sites
+  while (hasMorePages) {
+    const params = new URLSearchParams({
+      page: String(page),
+      per_page: String(perPage),
+    });
+
+    const { data } = await request.get(
+      `${INTEGRATION_NETLIFY_API_URL}/api/v1/sites`,
+      {
         params,
         headers: {
           Authorization: `Bearer ${accessToken}`,
-          'Accept-Encoding': 'application/json'
-        }
-      });
-      
-      data.map((a: any) => {
-        apps.push({
-          name: a.name,
-          appId: a.site_id
-        });
-      });
-      
-      if (data.length < perPage) {
-        hasMorePages = false;
+          "Accept-Encoding": "application/json",
+        },
       }
+    );
 
-      page++;
+    data.map((a: any) => {
+      apps.push({
+        name: a.name,
+        appId: a.site_id,
+      });
+    });
+
+    if (data.length < perPage) {
+      hasMorePages = false;
     }
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get Netlify integration apps");
+
+    page++;
   }
 
   return apps;
@@ -268,67 +243,59 @@ const getAppsNetlify = async ({ accessToken }: { accessToken: string }) => {
  * @returns {String} apps.name - name of Github site
  */
 const getAppsGithub = async ({ accessToken }: { accessToken: string }) => {
-  let apps;
-  try {
-    interface GitHubApp {
-      id: string;
-      name: string;
-      permissions: {
-        admin: boolean;
-      };
-      owner: {
-        login: string;
+  interface GitHubApp {
+    id: string;
+    name: string;
+    permissions: {
+      admin: boolean;
+    };
+    owner: {
+      login: string;
+    };
+  }
+
+  const octokit = new Octokit({
+    auth: accessToken,
+  });
+
+  const getAllRepos = async () => {
+    let repos: GitHubApp[] = [];
+    let page = 1;
+    const per_page = 100;
+    let hasMore = true;
+
+    while (hasMore) {
+      const response = await octokit.request(
+        "GET /user/repos{?visibility,affiliation,type,sort,direction,per_page,page,since,before}",
+        {
+          per_page,
+          page,
+        }
+      );
+
+      if (response.data.length > 0) {
+        repos = repos.concat(response.data);
+        page++;
+      } else {
+        hasMore = false;
       }
     }
 
-    const octokit = new Octokit({
-      auth: accessToken,
+    return repos;
+  };
+
+  const repos = await getAllRepos();
+
+  const apps = repos
+    .filter((a: GitHubApp) => a.permissions.admin === true)
+    .map((a: GitHubApp) => {
+      return {
+        appId: a.id,
+        name: a.name,
+        owner: a.owner.login,
+      };
     });
 
-    const getAllRepos = async () => {
-      let repos: GitHubApp[] = [];
-      let page = 1;
-      const per_page = 100;
-      let hasMore = true;
-
-      while (hasMore) {
-        const response = await octokit.request(
-          "GET /user/repos{?visibility,affiliation,type,sort,direction,per_page,page,since,before}",
-          {
-            per_page,
-            page,
-          }
-        );
-        
-        if (response.data.length > 0) {
-          repos = repos.concat(response.data);
-          page++;
-        } else {
-          hasMore = false;
-        }
-      }
-
-      return repos;
-    };
-
-    const repos = await getAllRepos();
-
-    apps = repos
-      .filter((a: GitHubApp) => a.permissions.admin === true)
-      .map((a: GitHubApp) => {
-        return {
-          appId: a.id,
-          name: a.name,
-          owner: a.owner.login,
-        };
-      });
-    
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get Github repos");
-  }
-
   return apps;
 };
 
@@ -341,29 +308,20 @@ const getAppsGithub = async ({ accessToken }: { accessToken: string }) => {
  * @returns {String} apps.appId - id of Render service
  */
 const getAppsRender = async ({ accessToken }: { accessToken: string }) => {
-  let apps: any;
-  try {
-    const res = (
-      await request.get(`${INTEGRATION_RENDER_API_URL}/v1/services`, {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          Accept: 'application/json',
-          'Accept-Encoding': 'application/json',
-        },
-      })
-    ).data;
-    
-    apps = res
-      .map((a: any) => ({
-        name: a.service.name,
-        appId: a.service.id
-      })); 
-    
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get Render services");
-  }
+  const res = (
+    await request.get(`${INTEGRATION_RENDER_API_URL}/v1/services`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        Accept: "application/json",
+        "Accept-Encoding": "application/json",
+      },
+    })
+  ).data;
+
+  const apps = res.map((a: any) => ({
+    name: a.service.name,
+    appId: a.service.id,
+  }));
 
   return apps;
 };
@@ -376,49 +334,51 @@ const getAppsRender = async ({ accessToken }: { accessToken: string }) => {
  * @returns {String} apps.name - name of Railway project
  * @returns {String} apps.appId - id of Railway project
  *
-*/
+ */
 const getAppsRailway = async ({ accessToken }: { accessToken: string }) => {
-  let apps: any[] = [];
-  try {
-    const query = `
-      query GetProjects($userId: String, $teamId: String) {
-        projects(userId: $userId, teamId: $teamId) {
-          edges {
-            node {
-              id
-              name
-            }
+  const query = `
+    query GetProjects($userId: String, $teamId: String) {
+      projects(userId: $userId, teamId: $teamId) {
+        edges {
+          node {
+            id
+            name
           }
         }
       }
-    `;
+    }
+  `;
 
-    const variables = {};
+  const variables = {};
 
-    const { data: { data: { projects: { edges }}} } = await request.post(INTEGRATION_RAILWAY_API_URL, {
+  const {
+    data: {
+      data: {
+        projects: { edges },
+      },
+    },
+  } = await request.post(
+    INTEGRATION_RAILWAY_API_URL,
+    {
       query,
       variables,
-    }, {
+    },
+    {
       headers: {
-        'Authorization': `Bearer ${accessToken}`,
-        'Content-Type': 'application/json',
-        'Accept-Encoding': 'application/json'
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+        "Accept-Encoding": "application/json",
       },
-    });
-    
-    apps = edges.map((e: any) => ({
-      name: e.node.name,
-      appId: e.node.id
-    }));
+    }
+  );
+
+  const apps = edges.map((e: any) => ({
+    name: e.node.name,
+    appId: e.node.id,
+  }));
 
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get Railway services");
-  }
-  
   return apps;
-}
+};
 
 /**
  * Return list of apps for Fly.io integration
@@ -428,41 +388,40 @@ const getAppsRailway = async ({ accessToken }: { accessToken: string }) => {
  * @returns {String} apps.name - name of Fly.io apps
  */
 const getAppsFlyio = async ({ accessToken }: { accessToken: string }) => {
-  let apps;
-  try {
-    const query = `
-      query($role: String) {
-        apps(type: "container", first: 400, role: $role) {
-          nodes {
-            id
-            name
-            hostname
-          }
+  const query = `
+    query($role: String) {
+      apps(type: "container", first: 400, role: $role) {
+        nodes {
+          id
+          name
+          hostname
         }
       }
-    `;
+    }
+  `;
 
-    const res = (await request.post(INTEGRATION_FLYIO_API_URL, {
-      query,
-      variables: {
-        role: null,
+  const res = (
+    await request.post(
+      INTEGRATION_FLYIO_API_URL,
+      {
+        query,
+        variables: {
+          role: null,
+        },
       },
-    }, {
-      headers: {
-        Authorization: "Bearer " + accessToken,
-        'Accept': 'application/json',
-        'Accept-Encoding': 'application/json',
-      },
-    })).data.data.apps.nodes;
+      {
+        headers: {
+          Authorization: "Bearer " + accessToken,
+          Accept: "application/json",
+          "Accept-Encoding": "application/json",
+        },
+      }
+    )
+  ).data.data.apps.nodes;
 
-    apps = res.map((a: any) => ({
-      name: a.name,
-    }));
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get Fly.io apps");
-  }
+  const apps = res.map((a: any) => ({
+    name: a.name,
+  }));
 
   return apps;
 };
@@ -475,63 +434,43 @@ const getAppsFlyio = async ({ accessToken }: { accessToken: string }) => {
  * @returns {String} apps.name - name of CircleCI apps
  */
 const getAppsCircleCI = async ({ accessToken }: { accessToken: string }) => {
-  let apps: any;
-  try {    
-    const res = (
-      await request.get(
-        `${INTEGRATION_CIRCLECI_API_URL}/v1.1/projects`,
-        {
-          headers: {
-            "Circle-Token": accessToken,
-            "Accept-Encoding": "application/json",
-          },
-        }
-      )
-    ).data
+  const res = (
+    await request.get(`${INTEGRATION_CIRCLECI_API_URL}/v1.1/projects`, {
+      headers: {
+        "Circle-Token": accessToken,
+        "Accept-Encoding": "application/json",
+      },
+    })
+  ).data;
+
+  const apps = res?.map((a: any) => {
+    return {
+      name: a?.reponame,
+    };
+  });
 
-    apps = res?.map((a: any) => {
-      return {
-        name: a?.reponame
-      }
-    });
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get CircleCI projects");
-  }
-  
   return apps;
 };
 
 const getAppsTravisCI = async ({ accessToken }: { accessToken: string }) => {
-  let apps: any;
-  try {
-    const res = (
-      await request.get(
-        `${INTEGRATION_TRAVISCI_API_URL}/repos`,
-        {
-          headers: {
-            "Authorization": `token ${accessToken}`,
-            "Accept-Encoding": "application/json",
-          },
-        }
-      )
-    ).data;
+  const res = (
+    await request.get(`${INTEGRATION_TRAVISCI_API_URL}/repos`, {
+      headers: {
+        Authorization: `token ${accessToken}`,
+        "Accept-Encoding": "application/json",
+      },
+    })
+  ).data;
+
+  const apps = res?.map((a: any) => {
+    return {
+      name: a?.slug?.split("/")[1],
+      appId: a?.id,
+    };
+  });
 
-    apps = res?.map((a: any) => {
-      return {
-        name: a?.slug?.split("/")[1],
-        appId: a?.id,
-      }
-    });
-  }catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get TravisCI projects");
-  }
-  
   return apps;
-}
+};
 
 /**
  * Return list of repositories for GitLab integration
@@ -540,112 +479,98 @@ const getAppsTravisCI = async ({ accessToken }: { accessToken: string }) => {
  * @returns {Object[]} apps - names of GitLab sites
  * @returns {String} apps.name - name of GitLab site
  */
-const getAppsGitlab = async ({ 
+const getAppsGitlab = async ({
   accessToken,
-  teamId
+  teamId,
 }: {
   accessToken: string;
   teamId?: string;
 }) => {
   const apps: App[] = [];
-  
+
   let page = 1;
   const perPage = 10;
   let hasMorePages = true;
-  try {
 
-    if (teamId) {
-      // case: fetch projects for group with id [teamId] in GitLab
-      
-      while (hasMorePages) {
-        const params = new URLSearchParams({
-          page: String(page),
-          per_page: String(perPage)
-        });
+  if (teamId) {
+    // case: fetch projects for group with id [teamId] in GitLab
 
-        const { data } = (
-          await request.get(
-            `${INTEGRATION_GITLAB_API_URL}/v4/groups/${teamId}/projects`,
-            {
-              params,
-              headers: {
-                "Authorization": `Bearer ${accessToken}`,
-                "Accept-Encoding": "application/json",
-              },
-            }
-          )
-        );
+    while (hasMorePages) {
+      const params = new URLSearchParams({
+        page: String(page),
+        per_page: String(perPage),
+      });
 
-        data.map((a: any) => {
-          apps.push({
-            name: a.name,
-            appId: a.id
-          });
-        });
-        
-        if (data.length < perPage) {
-          hasMorePages = false;
+      const { data } = await request.get(
+        `${INTEGRATION_GITLAB_API_URL}/v4/groups/${teamId}/projects`,
+        {
+          params,
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json",
+          },
         }
-        
-        page++;
-      }
-    } else {
-      // case: fetch projects for individual in GitLab
-      
-      const { id } = (
-        await request.get(
-          `${INTEGRATION_GITLAB_API_URL}/v4/user`,
-          {
-            headers: {
-              "Authorization": `Bearer ${accessToken}`,
-              "Accept-Encoding": "application/json",
-            },
-          }
-        )
-      ).data;
-      
-      while (hasMorePages) {
-        const params = new URLSearchParams({
-          page: String(page),
-          per_page: String(perPage)
+      );
+
+      data.map((a: any) => {
+        apps.push({
+          name: a.name,
+          appId: a.id,
         });
+      });
 
-        const { data } = (
-          await request.get(
-            `${INTEGRATION_GITLAB_API_URL}/v4/users/${id}/projects`,
-            {
-              params,
-              headers: {
-                "Authorization": `Bearer ${accessToken}`,
-                "Accept-Encoding": "application/json",
-              },
-            }
-          )
-        );
-
-        data.map((a: any) => {
-          apps.push({
-            name: a.name,
-            appId: a.id
-          });
-        });
-
-        if (data.length < perPage) {
-          hasMorePages = false;
-        }
-        
-        page++;
+      if (data.length < perPage) {
+        hasMorePages = false;
       }
+
+      page++;
     }
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error("Failed to get GitLab projects");
-  }
-  
-  return apps;
-}
+  } else {
+    // case: fetch projects for individual in GitLab
 
+    const { id } = (
+      await request.get(`${INTEGRATION_GITLAB_API_URL}/v4/user`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Accept-Encoding": "application/json",
+        },
+      })
+    ).data;
+
+    while (hasMorePages) {
+      const params = new URLSearchParams({
+        page: String(page),
+        per_page: String(perPage),
+      });
+
+      const { data } = await request.get(
+        `${INTEGRATION_GITLAB_API_URL}/v4/users/${id}/projects`,
+        {
+          params,
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json",
+          },
+        }
+      );
+
+      data.map((a: any) => {
+        apps.push({
+          name: a.name,
+          appId: a.id,
+        });
+      });
+
+      if (data.length < perPage) {
+        hasMorePages = false;
+      }
+
+      page++;
+    }
+  }
+
+  return apps;
+};
 
 /**
  * Return list of projects for Supabase integration
@@ -655,30 +580,23 @@ const getAppsGitlab = async ({
  * @returns {String} apps.name - name of Supabase app
  */
 const getAppsSupabase = async ({ accessToken }: { accessToken: string }) => {
-  let apps: any;
-  try {
-      const { data } = await request.get(
-        `${INTEGRATION_SUPABASE_API_URL}/v1/projects`,
-        {
-          headers: {
-          Authorization: `Bearer ${accessToken}`,
-          'Accept-Encoding': 'application/json'
-          }
-        }
-      );
+  const { data } = await request.get(
+    `${INTEGRATION_SUPABASE_API_URL}/v1/projects`,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Accept-Encoding": "application/json",
+      },
+    }
+  );
+
+  const apps = data.map((a: any) => {
+    return {
+      name: a.name,
+      appId: a.id,
+    };
+  });
 
-      apps = data.map((a: any) => {
-        return {
-            name: a.name,
-            appId: a.id
-        };
-    });
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed to get Supabase projects');
-  }
-  
   return apps;
 };
 

backend/src/integrations/exchange.ts

@@ -1,5 +1,4 @@
-import * as Sentry from '@sentry/node';
-import request from '../config/request';
+import request from "../config/request";
 import {
   INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
@@ -12,8 +11,8 @@ import {
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
   INTEGRATION_GITHUB_TOKEN_URL,
-  INTEGRATION_GITLAB_TOKEN_URL
-} from '../variables';
+  INTEGRATION_GITLAB_TOKEN_URL,
+} from "../variables";
 import {
   getSiteURL,
   getClientIdAzure,
@@ -26,8 +25,8 @@ import {
   getClientIdGitHub,
   getClientSecretGitHub,
   getClientIdGitLab,
-  getClientSecretGitLab
-} from '../config';
+  getClientSecretGitLab,
+} from "../config";
 
 interface ExchangeCodeAzureResponse {
   token_type: string;
@@ -93,49 +92,43 @@ interface ExchangeCodeGitlabResponse {
  */
 const exchangeCode = async ({
   integration,
-  code
+  code,
 }: {
   integration: string;
   code: string;
 }) => {
   let obj = {} as any;
 
-  try {
-    switch (integration) {
-      case INTEGRATION_AZURE_KEY_VAULT:
-        obj = await exchangeCodeAzure({
-          code
-        });
-        break;
-      case INTEGRATION_HEROKU:
-        obj = await exchangeCodeHeroku({
-          code
-        });
-        break;
-      case INTEGRATION_VERCEL:
-        obj = await exchangeCodeVercel({
-          code
-        });
-        break;
-      case INTEGRATION_NETLIFY:
-        obj = await exchangeCodeNetlify({
-          code
-        });
-        break;
-      case INTEGRATION_GITHUB:
-        obj = await exchangeCodeGithub({
-          code
-        });
-        break;
-      case INTEGRATION_GITLAB:
-        obj = await exchangeCodeGitlab({
-          code
-        });
-    }
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed OAuth2 code-token exchange');
+  switch (integration) {
+    case INTEGRATION_AZURE_KEY_VAULT:
+      obj = await exchangeCodeAzure({
+        code,
+      });
+      break;
+    case INTEGRATION_HEROKU:
+      obj = await exchangeCodeHeroku({
+        code,
+      });
+      break;
+    case INTEGRATION_VERCEL:
+      obj = await exchangeCodeVercel({
+        code,
+      });
+      break;
+    case INTEGRATION_NETLIFY:
+      obj = await exchangeCodeNetlify({
+        code,
+      });
+      break;
+    case INTEGRATION_GITHUB:
+      obj = await exchangeCodeGithub({
+        code,
+      });
+      break;
+    case INTEGRATION_GITLAB:
+      obj = await exchangeCodeGitlab({
+        code,
+      });
   }
 
   return obj;
@@ -143,43 +136,33 @@ const exchangeCode = async ({
 
 /**
  * Return [accessToken] for Azure OAuth2 code-token exchange
- * @param param0 
+ * @param param0
  */
-const exchangeCodeAzure = async ({
-  code
-}: {
-  code: string;
-}) => {
+const exchangeCodeAzure = async ({ code }: { code: string }) => {
   const accessExpiresAt = new Date();
-  let res: ExchangeCodeAzureResponse;
-  try {
-    res = (await request.post(
+
+  const res: ExchangeCodeAzureResponse = (
+    await request.post(
       INTEGRATION_AZURE_TOKEN_URL,
       new URLSearchParams({
-        grant_type: 'authorization_code',
+        grant_type: "authorization_code",
         code: code,
-        scope: 'https://vault.azure.net/.default openid offline_access',
+        scope: "https://vault.azure.net/.default openid offline_access",
         client_id: await getClientIdAzure(),
         client_secret: await getClientSecretAzure(),
-        redirect_uri: `${await getSiteURL()}/integrations/azure-key-vault/oauth2/callback`
+        redirect_uri: `${await getSiteURL()}/integrations/azure-key-vault/oauth2/callback`,
       } as any)
-    )).data;
+    )
+  ).data;
 
-    accessExpiresAt.setSeconds(
-      accessExpiresAt.getSeconds() + res.expires_in
-    );
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed OAuth2 code-token exchange with Azure');
-  }
+  accessExpiresAt.setSeconds(accessExpiresAt.getSeconds() + res.expires_in);
 
-  return ({
+  return {
     accessToken: res.access_token,
     refreshToken: res.refresh_token,
-    accessExpiresAt
-  });
-}
+    accessExpiresAt,
+  };
+};
 
 /**
  * Return [accessToken], [accessExpiresAt], and [refreshToken] for Heroku
@@ -191,38 +174,28 @@ const exchangeCodeAzure = async ({
  * @returns {String} obj2.refreshToken - refresh token for Heroku API
  * @returns {Date} obj2.accessExpiresAt - date of expiration for access token
  */
-const exchangeCodeHeroku = async ({
-  code
-}: {
-  code: string;
-}) => {
-  let res: ExchangeCodeHerokuResponse;
+const exchangeCodeHeroku = async ({ code }: { code: string }) => {
   const accessExpiresAt = new Date();
-  try {
-    res = (await request.post(
+
+  const res: ExchangeCodeHerokuResponse = (
+    await request.post(
       INTEGRATION_HEROKU_TOKEN_URL,
       new URLSearchParams({
-        grant_type: 'authorization_code',
+        grant_type: "authorization_code",
         code: code,
-        client_secret: await getClientSecretHeroku()
+        client_secret: await getClientSecretHeroku(),
       } as any)
-    )).data;
+    )
+  ).data;
 
-    accessExpiresAt.setSeconds(
-      accessExpiresAt.getSeconds() + res.expires_in
-    );
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed OAuth2 code-token exchange with Heroku');
-  }
+  accessExpiresAt.setSeconds(accessExpiresAt.getSeconds() + res.expires_in);
 
-  return ({
+  return {
     accessToken: res.access_token,
     refreshToken: res.refresh_token,
-    accessExpiresAt
-  });
-}
+    accessExpiresAt,
+  };
+};
 
 /**
  * Return [accessToken], [accessExpiresAt], and [refreshToken] for Vercel
@@ -235,30 +208,23 @@ const exchangeCodeHeroku = async ({
  * @returns {Date} obj2.accessExpiresAt - date of expiration for access token
  */
 const exchangeCodeVercel = async ({ code }: { code: string }) => {
-  let res: ExchangeCodeVercelResponse;
-  try {
-    res = (
-      await request.post(
-        INTEGRATION_VERCEL_TOKEN_URL,
-        new URLSearchParams({
-          code: code,
-          client_id: await getClientIdVercel(),
-          client_secret: await getClientSecretVercel(),
-          redirect_uri: `${await getSiteURL()}/integrations/vercel/oauth2/callback`
-        } as any)
-      )
-    ).data;
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error(`Failed OAuth2 code-token exchange with Vercel [err=${err}]`);
-  }
+  const res: ExchangeCodeVercelResponse = (
+    await request.post(
+      INTEGRATION_VERCEL_TOKEN_URL,
+      new URLSearchParams({
+        code: code,
+        client_id: await getClientIdVercel(),
+        client_secret: await getClientSecretVercel(),
+        redirect_uri: `${await getSiteURL()}/integrations/vercel/oauth2/callback`,
+      } as any)
+    )
+  ).data;
 
   return {
     accessToken: res.access_token,
     refreshToken: null,
     accessExpiresAt: null,
-    teamId: res.team_id
+    teamId: res.team_id,
   };
 };
 
@@ -273,47 +239,39 @@ const exchangeCodeVercel = async ({ code }: { code: string }) => {
  * @returns {Date} obj2.accessExpiresAt - date of expiration for access token
  */
 const exchangeCodeNetlify = async ({ code }: { code: string }) => {
-  let res: ExchangeCodeNetlifyResponse;
-  let accountId;
-  try {
-    res = (
-      await request.post(
-        INTEGRATION_NETLIFY_TOKEN_URL,
-        new URLSearchParams({
-          grant_type: 'authorization_code',
-          code: code,
-          client_id: await getClientIdNetlify(),
-          client_secret: await getClientSecretNetlify(),
-          redirect_uri: `${await getSiteURL()}/integrations/netlify/oauth2/callback`
-        } as any)
-      )
-    ).data;
+  const res: ExchangeCodeNetlifyResponse = (
+    await request.post(
+      INTEGRATION_NETLIFY_TOKEN_URL,
+      new URLSearchParams({
+        grant_type: "authorization_code",
+        code: code,
+        client_id: await getClientIdNetlify(),
+        client_secret: await getClientSecretNetlify(),
+        redirect_uri: `${await getSiteURL()}/integrations/netlify/oauth2/callback`,
+      } as any)
+    )
+  ).data;
 
-    const res2 = await request.get('https://api.netlify.com/api/v1/sites', {
+  const res2 = await request.get("https://api.netlify.com/api/v1/sites", {
+    headers: {
+      Authorization: `Bearer ${res.access_token}`,
+    },
+  });
+
+  const res3 = (
+    await request.get("https://api.netlify.com/api/v1/accounts", {
       headers: {
-        Authorization: `Bearer ${res.access_token}`
-      }
-    });
+        Authorization: `Bearer ${res.access_token}`,
+      },
+    })
+  ).data;
 
-    const res3 = (
-      await request.get('https://api.netlify.com/api/v1/accounts', {
-        headers: {
-          Authorization: `Bearer ${res.access_token}`
-        }
-      })
-    ).data;
-
-    accountId = res3[0].id;
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed OAuth2 code-token exchange with Netlify');
-  }
+  const accountId = res3[0].id;
 
   return {
     accessToken: res.access_token,
     refreshToken: res.refresh_token,
-    accountId
+    accountId,
   };
 };
 
@@ -328,33 +286,25 @@ const exchangeCodeNetlify = async ({ code }: { code: string }) => {
  * @returns {Date} obj2.accessExpiresAt - date of expiration for access token
  */
 const exchangeCodeGithub = async ({ code }: { code: string }) => {
-  let res: ExchangeCodeGithubResponse;
-  try {
-    res = (
-      await request.get(INTEGRATION_GITHUB_TOKEN_URL, {
-        params: {
-          client_id: await getClientIdGitHub(),
-          client_secret: await getClientSecretGitHub(),
-          code: code,
-          redirect_uri: `${await getSiteURL()}/integrations/github/oauth2/callback`
-        },
-        headers: {
-          'Accept': 'application/json',
-          'Accept-Encoding': 'application/json'
-        }
-      })
-    ).data;
-
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed OAuth2 code-token exchange with Github');
-  }
+  const res: ExchangeCodeGithubResponse = (
+    await request.get(INTEGRATION_GITHUB_TOKEN_URL, {
+      params: {
+        client_id: await getClientIdGitHub(),
+        client_secret: await getClientSecretGitHub(),
+        code: code,
+        redirect_uri: `${await getSiteURL()}/integrations/github/oauth2/callback`,
+      },
+      headers: {
+        Accept: "application/json",
+        "Accept-Encoding": "application/json",
+      },
+    })
+  ).data;
 
   return {
     accessToken: res.access_token,
     refreshToken: null,
-    accessExpiresAt: null
+    accessExpiresAt: null,
   };
 };
 
@@ -369,42 +319,32 @@ const exchangeCodeGithub = async ({ code }: { code: string }) => {
  * @returns {Date} obj2.accessExpiresAt - date of expiration for access token
  */
 const exchangeCodeGitlab = async ({ code }: { code: string }) => {
-  let res: ExchangeCodeGitlabResponse; 
   const accessExpiresAt = new Date();
-  
-  try {
-    res = (
-      await request.post(
-        INTEGRATION_GITLAB_TOKEN_URL,
-        new URLSearchParams({
-          grant_type: 'authorization_code',
-          code: code,
-          client_id: await getClientIdGitLab(),
-          client_secret: await getClientSecretGitLab(),
-          redirect_uri: `${await getSiteURL()}/integrations/gitlab/oauth2/callback`
-        } as any),
-        {
-          headers: {
-            "Accept-Encoding": "application/json",
-          }
-        }
-      )
-    ).data;
-    
-    accessExpiresAt.setSeconds(
-      accessExpiresAt.getSeconds() + res.expires_in
-    );
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed OAuth2 code-token exchange with Gitlab');
-  }
+  const res: ExchangeCodeGitlabResponse = (
+    await request.post(
+      INTEGRATION_GITLAB_TOKEN_URL,
+      new URLSearchParams({
+        grant_type: "authorization_code",
+        code: code,
+        client_id: await getClientIdGitLab(),
+        client_secret: await getClientSecretGitLab(),
+        redirect_uri: `${await getSiteURL()}/integrations/gitlab/oauth2/callback`,
+      } as any),
+      {
+        headers: {
+          "Accept-Encoding": "application/json",
+        },
+      }
+    )
+  ).data;
+
+  accessExpiresAt.setSeconds(accessExpiresAt.getSeconds() + res.expires_in);
 
   return {
     accessToken: res.access_token,
     refreshToken: res.refresh_token,
-    accessExpiresAt
+    accessExpiresAt,
   };
-}
+};
 
 export { exchangeCode };

backend/src/integrations/refresh.ts

@@ -1,29 +1,24 @@
-import * as Sentry from '@sentry/node';
-import request from '../config/request';
+import request from "../config/request";
+import { IIntegrationAuth } from "../models";
 import {
-  IIntegrationAuth
-} from '../models';
-import {
-  INTEGRATION_AZURE_KEY_VAULT, 
+  INTEGRATION_AZURE_KEY_VAULT,
   INTEGRATION_HEROKU,
   INTEGRATION_GITLAB,
-} from '../variables';
+} from "../variables";
 import {
   INTEGRATION_AZURE_TOKEN_URL,
   INTEGRATION_HEROKU_TOKEN_URL,
-  INTEGRATION_GITLAB_TOKEN_URL
-} from '../variables';
-import {
-  IntegrationService
-} from '../services';
+  INTEGRATION_GITLAB_TOKEN_URL,
+} from "../variables";
+import { IntegrationService } from "../services";
 import {
   getSiteURL,
   getClientIdAzure,
   getClientSecretAzure,
   getClientSecretHeroku,
   getClientIdGitLab,
-  getClientSecretGitLab
-} from '../config';
+  getClientSecretGitLab,
+} from "../config";
 
 interface RefreshTokenAzureResponse {
   token_type: string;
@@ -60,60 +55,57 @@ interface RefreshTokenGitLabResponse {
  */
 const exchangeRefresh = async ({
   integrationAuth,
-  refreshToken
+  refreshToken,
 }: {
   integrationAuth: IIntegrationAuth;
   refreshToken: string;
 }) => {
-  
   interface TokenDetails {
     accessToken: string;
     refreshToken: string;
     accessExpiresAt: Date;
   }
-  
+
   let tokenDetails: TokenDetails;
-  try {
-    switch (integrationAuth.integration) {
-      case INTEGRATION_AZURE_KEY_VAULT:
-        tokenDetails = await exchangeRefreshAzure({
-          refreshToken
-        });
-        break;
-      case INTEGRATION_HEROKU:
-        tokenDetails = await exchangeRefreshHeroku({
-          refreshToken
-        });
-        break;
-      case INTEGRATION_GITLAB:
-        tokenDetails = await exchangeRefreshGitLab({
-          refreshToken
-        });
-        break;
-      default:
-        throw new Error('Failed to exchange token for incompatible integration');
-    }
-
-    if (tokenDetails?.accessToken && tokenDetails?.refreshToken && tokenDetails?.accessExpiresAt) {
-      await IntegrationService.setIntegrationAuthAccess({
-        integrationAuthId: integrationAuth._id.toString(),
-        accessId: null,
-        accessToken: tokenDetails.accessToken,
-        accessExpiresAt: tokenDetails.accessExpiresAt
+  switch (integrationAuth.integration) {
+    case INTEGRATION_AZURE_KEY_VAULT:
+      tokenDetails = await exchangeRefreshAzure({
+        refreshToken,
       });
-
-      await IntegrationService.setIntegrationAuthRefresh({
-        integrationAuthId: integrationAuth._id.toString(),
-        refreshToken: tokenDetails.refreshToken
+      break;
+    case INTEGRATION_HEROKU:
+      tokenDetails = await exchangeRefreshHeroku({
+        refreshToken,
       });
-    }
-
-    return tokenDetails.accessToken;
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed to get new OAuth2 access token');
+      break;
+    case INTEGRATION_GITLAB:
+      tokenDetails = await exchangeRefreshGitLab({
+        refreshToken,
+      });
+      break;
+    default:
+      throw new Error("Failed to exchange token for incompatible integration");
   }
+
+  if (
+    tokenDetails?.accessToken &&
+    tokenDetails?.refreshToken &&
+    tokenDetails?.accessExpiresAt
+  ) {
+    await IntegrationService.setIntegrationAuthAccess({
+      integrationAuthId: integrationAuth._id.toString(),
+      accessId: null,
+      accessToken: tokenDetails.accessToken,
+      accessExpiresAt: tokenDetails.accessExpiresAt,
+    });
+
+    await IntegrationService.setIntegrationAuthRefresh({
+      integrationAuthId: integrationAuth._id.toString(),
+      refreshToken: tokenDetails.refreshToken,
+    });
+  }
+
+  return tokenDetails.accessToken;
 };
 
 /**
@@ -124,38 +116,30 @@ const exchangeRefresh = async ({
  * @returns
  */
 const exchangeRefreshAzure = async ({
-  refreshToken
+  refreshToken,
 }: {
   refreshToken: string;
 }) => {
-  try {
-    const accessExpiresAt = new Date();
-    const { data }: { data: RefreshTokenAzureResponse } = await request.post(
-      INTEGRATION_AZURE_TOKEN_URL,
-       new URLSearchParams({
-        client_id: await getClientIdAzure(),
-        scope: 'openid offline_access',
-        refresh_token: refreshToken,
-        grant_type: 'refresh_token',
-        client_secret: await getClientSecretAzure()
-      } as any)
-    );
-    
-    accessExpiresAt.setSeconds(
-      accessExpiresAt.getSeconds() + data.expires_in
-    );
+  const accessExpiresAt = new Date();
+  const { data }: { data: RefreshTokenAzureResponse } = await request.post(
+    INTEGRATION_AZURE_TOKEN_URL,
+    new URLSearchParams({
+      client_id: await getClientIdAzure(),
+      scope: "openid offline_access",
+      refresh_token: refreshToken,
+      grant_type: "refresh_token",
+      client_secret: await getClientSecretAzure(),
+    } as any)
+  );
 
-    return ({
-      accessToken: data.access_token,
-      refreshToken: data.refresh_token,
-      accessExpiresAt
-    });
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed to get refresh OAuth2 access token for Azure'); 
-  }
-}
+  accessExpiresAt.setSeconds(accessExpiresAt.getSeconds() + data.expires_in);
+
+  return {
+    accessToken: data.access_token,
+    refreshToken: data.refresh_token,
+    accessExpiresAt,
+  };
+};
 
 /**
  * Return new access token by exchanging refresh token [refreshToken] for the
@@ -165,39 +149,31 @@ const exchangeRefreshAzure = async ({
  * @returns
  */
 const exchangeRefreshHeroku = async ({
-  refreshToken
+  refreshToken,
 }: {
   refreshToken: string;
 }) => {
-  try {
-    const accessExpiresAt = new Date();
-    const { 
-      data 
-    }: { 
-      data: RefreshTokenHerokuResponse 
-    } = await request.post(
-        INTEGRATION_HEROKU_TOKEN_URL,
-        new URLSearchParams({
-            grant_type: 'refresh_token',
-            refresh_token: refreshToken,
-            client_secret: await getClientSecretHeroku()
-        } as any)
-    );
+  const accessExpiresAt = new Date();
+  const {
+    data,
+  }: {
+    data: RefreshTokenHerokuResponse;
+  } = await request.post(
+    INTEGRATION_HEROKU_TOKEN_URL,
+    new URLSearchParams({
+      grant_type: "refresh_token",
+      refresh_token: refreshToken,
+      client_secret: await getClientSecretHeroku(),
+    } as any)
+  );
 
-    accessExpiresAt.setSeconds(
-      accessExpiresAt.getSeconds() + data.expires_in
-    );
+  accessExpiresAt.setSeconds(accessExpiresAt.getSeconds() + data.expires_in);
 
-    return ({
-      accessToken: data.access_token,
-      refreshToken: data.refresh_token,
-      accessExpiresAt
-    });
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed to refresh OAuth2 access token for Heroku');
-  }
+  return {
+    accessToken: data.access_token,
+    refreshToken: data.refresh_token,
+    accessExpiresAt,
+  };
 };
 
 /**
@@ -208,45 +184,38 @@ const exchangeRefreshHeroku = async ({
  * @returns
  */
 const exchangeRefreshGitLab = async ({
-  refreshToken
+  refreshToken,
 }: {
   refreshToken: string;
 }) => {
-  try {
-    const accessExpiresAt = new Date();
-    const { 
-      data
-    }: { 
-      data: RefreshTokenGitLabResponse 
-    } = await request.post(
-      INTEGRATION_GITLAB_TOKEN_URL,
-      new URLSearchParams({
-        grant_type: 'refresh_token',
-        refresh_token: refreshToken,
-        client_id: await getClientIdGitLab,
-        client_secret: await getClientSecretGitLab(),
-        redirect_uri: `${await getSiteURL()}/integrations/gitlab/oauth2/callback`
-      } as any),
-      {
-        headers: {
-          "Accept-Encoding": "application/json",
-        }
-      });
+  const accessExpiresAt = new Date();
+  const {
+    data,
+  }: {
+    data: RefreshTokenGitLabResponse;
+  } = await request.post(
+    INTEGRATION_GITLAB_TOKEN_URL,
+    new URLSearchParams({
+      grant_type: "refresh_token",
+      refresh_token: refreshToken,
+      client_id: await getClientIdGitLab(),
+      client_secret: await getClientSecretGitLab(),
+      redirect_uri: `${await getSiteURL()}/integrations/gitlab/oauth2/callback`,
+    } as any),
+    {
+      headers: {
+        "Accept-Encoding": "application/json",
+      },
+    }
+  );
 
-    accessExpiresAt.setSeconds(
-      accessExpiresAt.getSeconds() + data.expires_in
-    );
+  accessExpiresAt.setSeconds(accessExpiresAt.getSeconds() + data.expires_in);
 
-    return ({
-      accessToken: data.access_token,
-      refreshToken: data.refresh_token,
-      accessExpiresAt
-    });
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed to refresh OAuth2 access token for GitLab');
-  }
+  return {
+    accessToken: data.access_token,
+    refreshToken: data.refresh_token,
+    accessExpiresAt,
+  };
 };
 
 export { exchangeRefresh };

backend/src/integrations/revoke.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { 
   IIntegrationAuth, 
   IntegrationAuth, 
@@ -22,34 +21,28 @@ const revokeAccess = async ({
   accessToken: string;
 }) => {
   let deletedIntegrationAuth;
-  try {
-    // add any integration-specific revocation logic
-    switch (integrationAuth.integration) {
-      case INTEGRATION_HEROKU:
-        break;
-      case INTEGRATION_VERCEL:
-        break;
-      case INTEGRATION_NETLIFY:
-        break;
-      case INTEGRATION_GITHUB:
-        break;
-      case INTEGRATION_GITLAB:
-        break;
-    }
+  // add any integration-specific revocation logic
+  switch (integrationAuth.integration) {
+    case INTEGRATION_HEROKU:
+      break;
+    case INTEGRATION_VERCEL:
+      break;
+    case INTEGRATION_NETLIFY:
+      break;
+    case INTEGRATION_GITHUB:
+      break;
+    case INTEGRATION_GITLAB:
+      break;
+  }
 
-    deletedIntegrationAuth = await IntegrationAuth.findOneAndDelete({
-      _id: integrationAuth._id
+  deletedIntegrationAuth = await IntegrationAuth.findOneAndDelete({
+    _id: integrationAuth._id
+  });
+
+  if (deletedIntegrationAuth) {
+    await Integration.deleteMany({
+      integrationAuth: deletedIntegrationAuth._id
     });
-
-    if (deletedIntegrationAuth) {
-      await Integration.deleteMany({
-        integrationAuth: deletedIntegrationAuth._id
-      });
-    }
-  } catch (err) {
-    Sentry.setUser(null);
-    Sentry.captureException(err);
-    throw new Error('Failed to delete integration authorization');
   }
   
   return deletedIntegrationAuth;

backend/src/integrations/teams.ts

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/node";
 import {
     IIntegrationAuth
 } from '../models';
@@ -31,21 +30,15 @@ const getTeams = async ({
 }) => {
     
     let teams: Team[] = [];
-    try {
-        switch (integrationAuth.integration) {
-            case INTEGRATION_GITLAB:
-                teams = await getTeamsGitLab({
-                    accessToken
-                });
-                break;
-        }
-    } catch (err) {
-        Sentry.setUser(null);
-        Sentry.captureException(err);
-        throw new Error('Failed to get integration teams');
+
+    switch (integrationAuth.integration) {
+        case INTEGRATION_GITLAB:
+            teams = await getTeamsGitLab({
+                accessToken
+            });
+            break;
     }
     
-    
     return teams;
 }
 
@@ -63,30 +56,24 @@ const getTeamsGitLab = async ({
     accessToken: string;
 }) => {
     let teams: Team[] = [];
-    try {
-        const res = (await request.get(
-            `${INTEGRATION_GITLAB_API_URL}/v4/groups`,
-            {
-                headers: {
-                Authorization: `Bearer ${accessToken}`,
-                "Accept-Encoding": "application/json"
-                }
+    const res = (await request.get(
+        `${INTEGRATION_GITLAB_API_URL}/v4/groups`,
+        {
+            headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json"
             }
-        )).data; 
-    
-      teams = res.map((t: any) => ({
-        name: t.name,
-        teamId: t.id
-      }));
-    } catch (err) {
-        Sentry.setUser(null);
-        Sentry.captureException(err);
-        throw new Error("Failed to get GitLab integration teams");
-    }
+        }
+    )).data; 
+
+    teams = res.map((t: any) => ({
+      name: t.name,
+      teamId: t.id
+    }));
     
     return teams;
 }
 
 export {
     getTeams
-}
+}

backend/src/middleware/requireIntegrationAuthorizationAuth.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/node';
 import { Types } from 'mongoose';
 import { Request, Response, NextFunction } from 'express';
 import { IntegrationAuth, IWorkspace } from '../models';

backend/src/services/smtp.ts

@@ -3,7 +3,8 @@ import {
   SMTP_HOST_SENDGRID, 
   SMTP_HOST_MAILGUN,
   SMTP_HOST_SOCKETLABS,
-  SMTP_HOST_ZOHOMAIL
+  SMTP_HOST_ZOHOMAIL,
+  SMTP_HOST_GMAIL
 } from '../variables';
 import SMTPConnection from 'nodemailer/lib/smtp-connection';
 import * as Sentry from '@sentry/node';
@@ -46,6 +47,12 @@ export const initSmtp = async () => {
         }
         break;
       case SMTP_HOST_ZOHOMAIL:
+        mailOpts.requireTLS = true; 
+        mailOpts.tls = {
+          ciphers: 'TLSv1.2'
+        }
+        break;
+      case SMTP_HOST_GMAIL:
         mailOpts.requireTLS = true; 
         mailOpts.tls = {
           ciphers: 'TLSv1.2'

backend/src/utils/crypto.ts

@@ -1,7 +1,6 @@
 import nacl from 'tweetnacl';
 import util from 'tweetnacl-util';
 import AesGCM from './aes-gcm';
-import * as Sentry from '@sentry/node';
 
 /**
  * Return new base64, NaCl, public-private key pair.
@@ -38,20 +37,13 @@ const encryptAsymmetric = ({
 	publicKey: string;
 	privateKey: string;
 }) => {
-	let nonce, ciphertext;
-	try {
-		nonce = nacl.randomBytes(24);
-		ciphertext = nacl.box(
-			util.decodeUTF8(plaintext),
-			nonce,
-			util.decodeBase64(publicKey),
-			util.decodeBase64(privateKey)
-		);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to perform asymmetric encryption');
-	}
+  const nonce = nacl.randomBytes(24);
+  const ciphertext = nacl.box(
+    util.decodeUTF8(plaintext),
+    nonce,
+    util.decodeBase64(publicKey),
+    util.decodeBase64(privateKey)
+  );
 
 	return {
 		ciphertext: util.encodeBase64(ciphertext),
@@ -80,19 +72,12 @@ const decryptAsymmetric = ({
 	publicKey: string;
 	privateKey: string;
 }): string => {
-	let plaintext: any;
-	try {
-		plaintext = nacl.box.open(
-			util.decodeBase64(ciphertext),
-			util.decodeBase64(nonce),
-			util.decodeBase64(publicKey),
-			util.decodeBase64(privateKey)
-		);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to perform asymmetric decryption');
-	}
+  const plaintext: any = nacl.box.open(
+    util.decodeBase64(ciphertext),
+    util.decodeBase64(nonce),
+    util.decodeBase64(publicKey),
+    util.decodeBase64(privateKey)
+  );
 
 	return util.encodeUTF8(plaintext);
 };
@@ -110,17 +95,8 @@ const encryptSymmetric = ({
 	plaintext: string;
 	key: string;
 }) => {
-	let ciphertext, iv, tag;
-	try {
-		const obj = AesGCM.encrypt(plaintext, key);
-		ciphertext = obj.ciphertext;
-		iv = obj.iv;
-		tag = obj.tag;
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to perform symmetric encryption');
-	}
+  const obj = AesGCM.encrypt(plaintext, key);
+  const { ciphertext, iv, tag } = obj;
 
 	return {
 		ciphertext,
@@ -150,15 +126,7 @@ const decryptSymmetric = ({
 	tag: string;
 	key: string;
 }): string => {
-	let plaintext;
-	try {
-		plaintext = AesGCM.decrypt(ciphertext, iv, tag, key);
-	} catch (err) {
-		Sentry.setUser(null);
-		Sentry.captureException(err);
-		throw new Error('Failed to perform symmetric decryption');
-	}
-
+  const plaintext = AesGCM.decrypt(ciphertext, iv, tag, key);
 	return plaintext;
 };
 

backend/src/variables/index.ts

@@ -55,7 +55,8 @@ import {
   SMTP_HOST_SENDGRID, 
   SMTP_HOST_MAILGUN,
   SMTP_HOST_SOCKETLABS,
-  SMTP_HOST_ZOHOMAIL
+  SMTP_HOST_ZOHOMAIL,
+  SMTP_HOST_GMAIL
 } from './smtp';
 import { PLAN_STARTER, PLAN_PRO } from './stripe';
 import {
@@ -138,6 +139,7 @@ export {
   SMTP_HOST_MAILGUN,
   SMTP_HOST_SOCKETLABS,
   SMTP_HOST_ZOHOMAIL,
+  SMTP_HOST_GMAIL,
   PLAN_STARTER,
   PLAN_PRO,
   MFA_METHOD_EMAIL,

backend/src/variables/smtp.ts

@@ -2,10 +2,12 @@ const SMTP_HOST_SENDGRID = 'smtp.sendgrid.net';
 const SMTP_HOST_MAILGUN = 'smtp.mailgun.org';
 const SMTP_HOST_SOCKETLABS = 'smtp.socketlabs.com';
 const SMTP_HOST_ZOHOMAIL = 'smtp.zoho.com';
+const SMTP_HOST_GMAIL = 'smtp.gmail.com';
 
 export {
     SMTP_HOST_SENDGRID,
     SMTP_HOST_MAILGUN,
     SMTP_HOST_SOCKETLABS,
-    SMTP_HOST_ZOHOMAIL
+    SMTP_HOST_ZOHOMAIL,
+    SMTP_HOST_GMAIL
 }

backend/tests/unit-tests/utils/crypto.test.ts

@@ -28,14 +28,14 @@ describe('Crypto', () => {
       test('should throw error if publicKey is undefined', () => {
         expect(() => {
           encryptAsymmetric({ plaintext, publicKey, privateKey });
-        }).toThrowError('Failed to perform asymmetric encryption');
+        }).toThrowError('invalid encoding');
       });
 
       test('should throw error if publicKey is empty string', () => {
         publicKey = '';
         expect(() => {
           encryptAsymmetric({ plaintext, publicKey, privateKey });
-        }).toThrowError('Failed to perform asymmetric encryption');
+        }).toThrowError('bad public key size');
       });
     });
 
@@ -47,14 +47,14 @@ describe('Crypto', () => {
       test('should throw error if privateKey is undefined', () => {
         expect(() => {
           encryptAsymmetric({ plaintext, publicKey, privateKey });
-        }).toThrowError('Failed to perform asymmetric encryption');
+        }).toThrowError('invalid encoding');
       });
 
       test('should throw error if privateKey is empty string', () => {
         privateKey = '';
         expect(() => {
           encryptAsymmetric({ plaintext, publicKey, privateKey });
-        }).toThrowError('Failed to perform asymmetric encryption');
+        }).toThrowError('bad secret key size');
       });
     });
 
@@ -66,7 +66,7 @@ describe('Crypto', () => {
       test('should throw error if plaintext is undefined', () => {
         expect(() => {
           encryptAsymmetric({ plaintext, publicKey, privateKey });
-        }).toThrowError('Failed to perform asymmetric encryption');
+        }).toThrowError('expected string');
       });
 
       test('should encrypt plaintext containing special characters', () => {
@@ -130,7 +130,7 @@ describe('Crypto', () => {
             publicKey,
             privateKey
           });
-        }).toThrowError('Failed to perform asymmetric decryption');
+        }).toThrowError('invalid encoding');
       });
 
       test('should throw error if nonce is modified', () => {
@@ -149,7 +149,7 @@ describe('Crypto', () => {
             publicKey,
             privateKey
           });
-        }).toThrowError('Failed to perform asymmetric decryption');
+        }).toThrowError('invalid encoding');
       });
     });
   });
@@ -170,7 +170,7 @@ describe('Crypto', () => {
       const invalidKey = 'invalid-key';
       expect(() => {
         encryptSymmetric({ plaintext, key: invalidKey });
-      }).toThrowError('Failed to perform symmetric encryption');
+      }).toThrowError('Invalid key length');
     });
 
     test('should throw an error when invalid key is provided', () => {
@@ -179,7 +179,7 @@ describe('Crypto', () => {
 
       expect(() => {
         encryptSymmetric({ plaintext, key: invalidKey });
-      }).toThrowError('Failed to perform symmetric encryption');
+      }).toThrowError('Invalid key length');
     });
   });
 
@@ -209,7 +209,7 @@ describe('Crypto', () => {
           tag,
           key
         });
-      }).toThrowError('Failed to perform symmetric decryption');
+      }).toThrowError('Unsupported state or unable to authenticate data');
     });
 
     test('should fail if iv is modified', () => {
@@ -221,7 +221,7 @@ describe('Crypto', () => {
           tag,
           key
         });
-      }).toThrowError('Failed to perform symmetric decryption');
+      }).toThrowError('Unsupported state or unable to authenticate data');
     });
 
     test('should fail if tag is modified', () => {
@@ -233,7 +233,7 @@ describe('Crypto', () => {
           tag: modifiedTag,
           key
         });
-      }).toThrowError('Failed to perform symmetric decryption');
+      }).toThrowError(/Invalid authentication tag length: \d+/);
     });
 
     test('should throw an error when decryption fails', () => {
@@ -245,7 +245,7 @@ describe('Crypto', () => {
           tag,
           key: invalidKey
         });
-      }).toThrowError('Failed to perform symmetric decryption');
+      }).toThrowError('Invalid key length');
     });
   });
 });

docs/api-reference/overview/authentication.mdx

@@ -5,11 +5,11 @@ description: "How to authenticate with the Infisical Public API"
 
 ## Essentials
 
-The Public API accepts multiple modes of authentication being via API Key, Service Account credentials, or [Infisical Token](../../getting-started/dashboard/token).
+The Public API accepts multiple modes of authentication being via API Key, Service Account credentials, or [Infisical Token](/documentation/platform/token).
 
 - API Key: Provides full access to all endpoints representing the user.
-- [Service Account](): Provides scoped access to an organization and select projects representing a machine such as a VM or application client. 
-- [Infisical Token](../../getting-started/dashboard/token): Provides short-lived, scoped CRUD access to the secrets of a specific project and environment.
+- Service Account: Provides scoped access to an organization and select projects representing a machine such as a VM or application client. 
+- [Infisical Token](/documentation/platform/token): Provides short-lived, scoped CRUD access to the secrets of a specific project and environment.
 
 <AccordionGroup>
 <Accordion title="API Key">

docs/api-reference/overview/examples/create-secret.mdx

@@ -6,7 +6,7 @@ description: "How to add a secret using an Infisical Token scoped to a project a
 Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com).
-- Create an [Infisical Token](../../../getting-started/dashboard/token) for your project and environment with write access enabled.
+- Create an [Infisical Token](/documentation/platform/token) for your project and environment with write access enabled.
 - Grasp a basic understanding of the system and its underlying cryptography [here](/api-reference/overview/introduction).
 - [Ensure that your project is blind-indexed](../blind-indices).
 

docs/api-reference/overview/examples/delete-secret.mdx

@@ -6,7 +6,7 @@ description: "How to delete a secret using an Infisical Token scoped to a projec
 Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com).
-- Create either an [API Key](/api-reference/overview/authentication) or [Infisical Token](../../../getting-started/dashboard/token) for your project and environment with write access enabled.
+- Create either an [API Key](/api-reference/overview/authentication) or [Infisical Token](/documentation/platform/token) for your project and environment with write access enabled.
 - Grasp a basic understanding of the system and its underlying cryptography [here](/api-reference/overview/introduction).
 - [Ensure that your project is blind-indexed](../blind-indices).
 

docs/api-reference/overview/examples/retrieve-secret.mdx

@@ -6,7 +6,7 @@ description: "How to get a secret using an Infisical Token scoped to a project a
 Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com).
-- Create an [Infisical Token](../../../getting-started/dashboard/token) for your project and environment.
+- Create an [Infisical Token](/documentation/platform/token) for your project and environment.
 - Grasp a basic understanding of the system and its underlying cryptography [here](/api-reference/overview/introduction).
 - [Ensure that your project is blind-indexed](../blind-indices).
 

docs/api-reference/overview/examples/retrieve-secrets.mdx

@@ -6,7 +6,7 @@ description: "How to get all secrets using an Infisical Token scoped to a projec
 Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com).
-- Create an [Infisical Token](../../../getting-started/dashboard/token) for your project and environment.
+- Create an [Infisical Token](/documentation/platform/token) for your project and environment.
 - Grasp a basic understanding of the system and its underlying cryptography [here](/api-reference/overview/introduction).
 - [Ensure that your project is blind-indexed](../blind-indices).
 

docs/api-reference/overview/examples/update-secret.mdx

@@ -6,7 +6,7 @@ description: "How to update a secret using an Infisical Token scoped to a projec
 Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com).
-- Create an [Infisical Token](../../../getting-started/dashboard/token) for your project and environment with write access enabled.
+- Create an [Infisical Token](/documentation/platform/token) for your project and environment with write access enabled.
 - Grasp a basic understanding of the system and its underlying cryptography [here](/api-reference/overview/introduction).
 - [Ensure that your project is blind-indexed](../blind-indices).
 

docs/cli/commands/export.mdx

@@ -37,7 +37,7 @@ Export environment variables from the platform into a file format.
 
   ### Environment variables
   <Accordion title="INFISICAL_TOKEN">
-    Used to fetch secrets via a [service token](/getting-started/dashboard/token) apposed to logged in credentials. Simply, export this variable in the terminal before running this command.
+    Used to fetch secrets via a [service token](/documentation/platform/token) apposed to logged in credentials. Simply, export this variable in the terminal before running this command.
 
     ```bash
     # Example 

docs/cli/commands/run.mdx

@@ -42,7 +42,7 @@ Inject secrets from Infisical into your application process.
 
   ### Environment variables
   <Accordion title="INFISICAL_TOKEN">
-    Used to fetch secrets via a [service token](/getting-started/dashboard/token) apposed to logged in credentials. Simply, export this variable in the terminal before running this command.
+    Used to fetch secrets via a [service token](/documentation/platform/token) apposed to logged in credentials. Simply, export this variable in the terminal before running this command.
 
     ```bash
     # Example 
@@ -72,7 +72,7 @@ Inject secrets from Infisical into your application process.
   </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
+    If you are using a [service token](/documentation/platform/token) to authenticate, you can pass the token as a flag
 
     ```bash
     # Example 

docs/cli/commands/secrets.mdx

@@ -20,7 +20,7 @@ This command enables you to perform CRUD (create, read, update, delete) operatio
 
   ### Environment variables
   <Accordion title="INFISICAL_TOKEN">
-    Used to fetch secrets via a [service token](/getting-started/dashboard/token) apposed to logged in credentials. Simply, export this variable in the terminal before running this command.
+    Used to fetch secrets via a [service token](/documentation/platform/token) apposed to logged in credentials. Simply, export this variable in the terminal before running this command.
 
     ```bash
     # Example 

docs/cli/token.mdx

@@ -3,7 +3,7 @@ title: "Infisical Token"
 description: "How to use Infical service token within the CLI."
 ---
 
-Prerequisite: [Infisical Token and How to Generate One](../../getting-started/dashboard/token).
+Prerequisite: [Infisical Token and How to Generate One](/documentation/platform/token).
 
 It's possible to use the CLI to sync environment varialbes without manually entering login credentials by using a service token in the prerequisite link above.
 

docs/cli/usage.mdx

@@ -18,7 +18,7 @@ Prerequisite: [Install the CLI](/cli/overview)
 
   <Tab title="Infisical Token">
     To use Infisical CLI in environments where you cannot run the `infisical login` command, you can authenticate via a
-    Infisical Token instead. Learn more about [Infisical Token](../getting-started/dashboard/token).
+    Infisical Token instead. Learn more about [Infisical Token](/documentation/platform/token).
   </Tab>
 </Tabs>
 

docs/documentation/getting-started/cli.mdx

@@ -4,7 +4,7 @@ title: "CLI"
 
 The Infisical CLI can be used to inject secrets into any framework like Next.js, Express, Django and more in local development.
 
-It can also be used to expose secrets from Infisical as environment variables in CI/CD pipelines and [Docker containers](/getting-started/quickstarts/docker)
+It can also be used to expose secrets from Infisical as environment variables in CI/CD pipelines and [Docker containers](/documentation/getting-started/docker)
 
 Prerequisites: 
 
@@ -123,6 +123,6 @@ $ infisical run -- ./your_bash_script.sh
 
 Your app should now be running with the secrets from Infisical injected as environment variables.
 
-Resources:
+See also:
 
-- [Documentation for the CLI](/cli/overview)
+- [Full documentation for the Infisical CLI](/cli/overview)

docs/documentation/getting-started/docker.mdx

@@ -7,7 +7,7 @@ The [Infisical CLI](/cli/overview) can be added to Dockerfiles to fetch secrets
 Prerequisites:
 
 - Have a project with secrets ready in [Infisical Cloud](https://app.infisical.com).
-- Create an [Infisical Token](/getting-started/dashboard/token) scoped to an environment in your project in Infisical.
+- Create an [Infisical Token](/documentation/platform/token) scoped to an environment in your project in Infisical.
 
 
 <Tabs>
@@ -179,7 +179,7 @@ Prerequisites:
     </Tab>
 </Tabs>
 
-Resources:
+See also:
 
 - [Documentation for Docker](/integrations/platforms/docker)
 - [Documentation for Docker Compose](/integrations/platforms/docker-compose)

docs/documentation/getting-started/introduction.mdx

@@ -9,7 +9,7 @@ Start syncing environment variables with [Infisical Cloud](https://app.infisical
 ## Learn about Infisical
 
 <Card
-    href="/getting-started/quickstarts/platform"
+    href="/documentation/getting-started/platform"
     title="Platform"
     icon="laptop"
     color="#dc2626"
@@ -22,20 +22,20 @@ Start syncing environment variables with [Infisical Cloud](https://app.infisical
 <CardGroup cols={2}>
   <Card
     title="SDKs"
-    href="/getting-started/quickstarts/sdks"
+    href="/documentation/getting-started/sdks"
     icon="boxes-stacked"
     color="#3c8639"
   >
     Fetch secrets with any programming language on demand
   </Card>
-  <Card href="/getting-started/quickstarts/cli" title="Command Line Interface" icon="square-terminal" color="#3775a9">
+  <Card href="/documentation/getting-started/cli" title="Command Line Interface" icon="square-terminal" color="#3775a9">
     Inject secrets into any application process/environment
   </Card>
-  <Card href="/getting-started/quickstarts/docker" title="Docker" icon="docker" color="#0078d3">
+  <Card href="/documentation/getting-started/docker" title="Docker" icon="docker" color="#0078d3">
     Inject secrets into Docker containers
   </Card>
   <Card
-    href="/getting-started/quickstarts/kubernetes"
+    href="/documentation/getting-started/kubernetes"
     title="Kubernetes"
     icon="server"
     color="#3775a9"
@@ -46,23 +46,30 @@ Start syncing environment variables with [Infisical Cloud](https://app.infisical
 
 ## Resources
 
-<Card
-  href="/self-hosting/overview"
-  title="Self-hosting"
-  icon="server"
-  color="#0285c7"
->
-  Learn how to configure and deploy Infisical.
-</Card>
-
 <CardGroup cols={2}>
+  <Card
+    href="/self-hosting/overview"
+    title="Self-hosting"
+    icon="server"
+    color="#0285c7"
+  >
+    Learn how to configure and deploy Infisical
+  </Card>
+  <Card
+    href="/documentation/guides/introduction"
+    title="Guide"
+    icon="book-open"
+    color="#dc2626"
+  >
+    Explore guides for every language and stack
+  </Card>
   <Card
     href="/integrations/overview"
     title="Native Integrations"
     icon="clouds"
     color="#dc2626"
   >
-    Explore integrations for GitHub, Vercel, Netlify, and more.
+    Explore integrations for GitHub, Vercel, Netlify, and more
   </Card>
   <Card
     href="/integrations/overview"
@@ -70,6 +77,14 @@ Start syncing environment variables with [Infisical Cloud](https://app.infisical
     icon="plug"
     color="#dc2626"
   >
-    Explore integrations for Next.js, Express, Django, and more.
+    Explore integrations for Next.js, Express, Django, and more
+  </Card>
+  <Card
+    href="https://calendly.com/team-infisical/infisical-demo"
+    title="Contact Us"
+    icon="user-headset"
+    color="#0285c7"
+  >
+    Questions? Need help setting up? Book a 1x1 meeting with us
   </Card>
 </CardGroup>

docs/documentation/getting-started/kubernetes.mdx

@@ -9,7 +9,7 @@ Prerequisites:
 
 - Connected to your cluster via kubectl
 - Have a project with secrets ready in [Infisical Cloud](https://app.infisical.com).
-- Create an [Infisical Token](/getting-started/dashboard/token) scoped to an environment in your project in Infisical.
+- Create an [Infisical Token](/documentation/platform/token) scoped to an environment in your project in Infisical.
 
 ## Installation
 
@@ -77,5 +77,7 @@ kubectl apply -f infisical-secrets-config.yaml
 
 You should now see a new kubernetes secret automatically created in the namespace you defined in the `managedSecretReference` property above. 
 
-For a comprehensive guide on managing secrets in Kubernetes with Infisical, including all available options of the operator, please refer to this [link](../../integrations/platforms/kubernetes).
+See also:
+
+- [Documentation for the Infisical Kubernetes Operator](../../integrations/platforms/kubernetes)
 

docs/documentation/getting-started/platform.mdx

@@ -19,7 +19,7 @@ The secrets overview provides a bird's-eye view of all the secrets in a project
 ### Secrets Dashboard
 
 The secrets dashboard lets you manage secrets for a specific environment in a project. 
-Here, developers can [override secrets](/getting-started/dashboard/project#personal-overrides), [version secrets](/getting-started/dashboard/secret-versioning), [rollback projects to any point in time](/getting-started/dashboard/pit-recovery), and much more.
+Here, developers can [override secrets](//project#personal-overrides), [version secrets](/documentation/platform/secret-versioning), [rollback projects to any point in time](/documentation/platform/pit-recovery), and much more.
 
 ![dashboard](../../images/dashboard.png)
 
@@ -54,4 +54,4 @@ At the organization-level, you can add/remove members and manage their access to
 
 That's it for the platform quickstart! — We encourage you to continue exploring the documentation to gain a deeper understanding of the extensive features and functionalities that Infisical has to offer.
 
-Next, head back to [Quickstart > Overview](/getting-started/quickstarts/overview) to explore ways to fetch secrets from Infisical to your apps and infrastructure.
+Next, head back to [Getting Started > Introduction](/documentation/getting-started/overview) to explore ways to fetch secrets from Infisical to your apps and infrastructure.

docs/documentation/getting-started/sdks.mdx

@@ -7,13 +7,14 @@ From local development to production, Infisical's language-specific SDKs provide
 Prerequisites:
 
 - Have a project with secrets ready in [Infisical Cloud](https://app.infisical.com).
-- Create an [Infisical Token](/getting-started/dashboard/token) scoped to an environment in your project in Infisical.
+- Create an [Infisical Token](/documentation/platform/token) scoped to an environment in your project in Infisical.
+
+## Installation
+
+Follow the instructions for your language to install the SDK for it.
 
 <Tabs>
     <Tab title="Node">
-    
-
-        ## Installation
 
         Run `npm` to add [infisical-node](https://github.com/Infisical/infisical-node) to your project.
 
@@ -23,7 +24,7 @@ Prerequisites:
 
         ## Configuration
 
-        Import the SDK and create a client instance with your [Infisical Token](/getting-started/dashboard/token).
+        Import the SDK and create a client instance with your [Infisical Token](/documentation/platform/token).
 
         <Tabs>
             <Tab title="ES6">
@@ -92,7 +93,7 @@ Prerequisites:
 
         ## Configuration
 
-        Import the SDK and create a client instance with your [Infisical Token](/getting-started/dashboard/token).
+        Import the SDK and create a client instance with your [Infisical Token](/documentation/platform/token).
 
         ```py
         from infisical import InfisicalClient
@@ -134,11 +135,11 @@ Prerequisites:
         - [Rust](https://github.com/Infisical/infisical/issues/437)
         - [PHP](https://github.com/Infisical/infisical/issues/531)
 
-        Missing a language? Throw in a [request](https://github.com/Infisical/infisical/issues).
+        Missing a language? [Throw in a request](https://github.com/Infisical/infisical/issues).
     </Tab>
 </Tabs>
 
-Resources:
+See also:
 
-- [Documentation for Node](https://github.com/Infisical/infisical-node)
-- [Documentation for Python](https://github.com/Infisical/infisical-python)
+- Explore the [Node SDK](https://github.com/Infisical/infisical-node)
+- Explore the [Python SDK](https://github.com/Infisical/infisical-python)

docs/documentation/guides/introduction.mdx

@@ -0,0 +1,41 @@
+---
+title: "Introduction"
+---
+
+Whether you're running a Node application on Heroku, Next.js application with Vercel, or Kubernetes on AWS, Infisical has a secret management strategy from local development to production ready for you.
+
+## Guides by Language
+
+<CardGroup cols={2}>
+  <Card
+    title="Node"
+    href="/documentation/guides/node"
+    icon="node"
+    color="#3c8639"
+  >
+    Manage secrets across your Node stack
+  </Card>
+  <Card 
+    href="/documentation/guides/python" 
+    title="Python" 
+    icon="python" 
+    color="#3775a9"
+    >
+    Manage secrets across your Python stack
+  </Card>
+</CardGroup>
+
+## Guides by Stack
+
+<CardGroup cols={2}>
+  <Card
+    title="Next.js + Vercel"
+    href="/documentation/guides/nextjs-vercel"
+    icon="cloud"
+    color="#3c8639"
+  >
+    Manage secrets for your Next.js + Vercel stack
+  </Card>
+</CardGroup>
+
+Want a guide? [Throw in a request](https://github.com/Infisical/infisical/issues).

docs/documentation/guides/nextjs-vercel.mdx

@@ -0,0 +1,254 @@
+---
+title: "Next.js + Vercel"
+---
+
+
+This guide demonstrates how to use Infisical to manage secrets for your Next.js + Vercel stack from local development to production. It uses:
+
+- Infisical (you can use [Infisical Cloud](https://app.infisical.com) or a [self-hosted instance of Infisical](https://infisical.com/docs/self-hosting/overview)) to store your secrets.
+
+## Project Setup
+
+To begin, we need to set up a project in Infisical and add secrets to an environment in it.
+
+### Create a project
+
+1. Create a new project in [Infisical](https://app.infisical.com/).
+
+2. Add a secret to the development environment of this project so we can pull it back for local development. In the **Secrets Overview** page, press **Explore Development** and add a secret with the key `NEXT_PUBLIC_NAME` and value `YOUR_NAME`.
+
+3. Add a secret to the production environment of this project so we can sync it to Vercel. Switch to the **Production** environment and add a secret with the key `NEXT_PUBLIC_NAME` and value `ANOTHER_NAME`.
+
+## Create a Next.js app
+
+Initialize a new Node.js app.
+
+We can use `create-next-app` to initialize an app called `infisical-nextjs`.
+
+<Tabs>
+    <Tab title="JavaScript">
+        ```console
+        npx create-next-app@latest --use-npm infisical-nextjs
+        cd infisical-nextjs
+        ```
+    </Tab>
+    <Tab title="TypeScript">
+        ```console
+        npx create-next-app@latest --ts --use-npm infisical-nextjs
+        cd infisical-nextjs
+        ```
+    </Tab>
+</Tabs>
+
+Next, inside `pages/_app.js`, lets add a `console.log()` to print out the environment variable in the browser console.
+
+<Tabs>
+    <Tab title="JavaScript">
+    ```js
+    import '@/styles/globals.css'
+
+    export default function App({ Component, pageProps }) {
+        console.log('Hello, ', process.env.NEXT_PUBLIC_NAME);
+        return <Component {...pageProps} />
+    }
+    ```
+    </Tab>
+    <Tab title="TypeScript">
+    ```tsx
+    import '@/styles/globals.css'
+    import type { AppProps } from 'next/app'
+
+    export default function App({ Component, pageProps }: AppProps) {
+        console.log('Hello, ', process.env.NEXT_PUBLIC_NAME);
+        return <Component {...pageProps} />
+    }
+    ```
+    </Tab>
+</Tabs>
+
+## Infisical CLI for local development environment variables
+
+We'll now use the Infisical CLI to fetch secrets from Infisical into your Next.js app for local development.
+
+### CLI Installation
+
+Follow the instructions for your operating system to install the Infisical CLI.
+
+<Tabs>
+   <Tab title="MacOS">
+  	Use [brew](https://brew.sh/) package manager
+
+    	```console
+    	$ brew install infisical/get-cli/infisical
+    	```
+   </Tab>
+   <Tab title="Windows">
+      Use [Scoop](https://scoop.sh/) package manager
+
+        ```console
+        $ scoop bucket add org https://github.com/Infisical/scoop-infisical.git
+        ```
+
+        ```console
+        $ scoop install infisical
+        ```
+   </Tab>
+	 <Tab title="Alpine">
+	 Install prerequisite
+		```console
+		$ apk add --no-cache bash sudo
+		```
+
+    	Add Infisical repository
+    	```console
+    	$ curl -1sLf \
+    		'https://dl.cloudsmith.io/public/infisical/infisical-cli/setup.alpine.sh' \
+    		| bash
+    	```
+
+    	Then install CLI
+    	```console
+    	$ apk update && sudo apk add infisical
+    	```
+
+   </Tab>
+	 <Tab title="RedHat/CentOs/Amazon">
+	 Add Infisical repository
+		```console
+		$ curl -1sLf \
+		'https://dl.cloudsmith.io/public/infisical/infisical-cli/setup.rpm.sh' \
+		| sudo -E bash
+		```
+
+    	Then install CLI
+    	```console
+    	$ sudo yum install infisical
+    	```
+
+   </Tab>
+	 <Tab title="Debian/Ubuntu">
+	 	Add Infisical repository 
+			
+		```console
+		$ curl -1sLf \
+		'https://dl.cloudsmith.io/public/infisical/infisical-cli/setup.deb.sh' \
+		| sudo -E bash
+		```
+
+    	Then install CLI
+    	```console
+    	$ sudo apt-get update && sudo apt-get install -y infisical
+    	```
+
+   </Tab>
+	<Tab title="Arch Linux">
+		Use the `yay` package manager to install from the [Arch User Repository](https://aur.archlinux.org/packages/infisical-bin)
+			
+		```console
+		$ yay -S infisical-bin
+		```
+
+   </Tab>
+</Tabs>
+
+### Login
+
+Authenticate the CLI with the Infisical platform using your email and password.
+
+```console
+$ infisical login
+```
+
+### Initialization
+
+Run the `init` command at the root of the Next.js app. This step connects your local project to the project on the Infisical platform and creates a `infisical.json` file containing a reference to that latter project.
+
+```console
+$ infisical init
+```
+
+### Start the Next.js app with secrets injected as environment variables
+
+```console
+$ infisical run -- npm run dev
+```
+
+If you open your browser console, **Hello, YOUR_NAME** should be printed out.
+
+Here, the CLI fetched the secret from Infisical and injected it into the Next.js app upon starting up. By default,
+the CLI fetches secrets from the development environment which has the slug `dev`; you can inject secrets from different
+environments by modifying the `env` flag as per the [CLI documentation](/cli/usage).
+
+At this stage, you know how to use the Infisical CLI to inject secrets into your Next.js app for local development.
+
+## Infisical-Vercel integration for production environment variables
+
+We'll now use the Infisical-Vercel integration send secrets from Infisical to Vercel as production environment variables.
+
+### Infisical-Vercel integration
+
+To begin we have to import the Next.js app into Vercel as a project. [Follow these instructions](https://nextjs.org/learn/basics/deploying-nextjs-app/deploy) to deploy the Next.js app to Vercel.
+
+Next, navigate to your project's integrations tab in Infisical and press on the Vercel tile to grant Infisical access to your Vercel account.
+
+![integrations](../../images/integrations.png)
+
+![integrations vercel authorization](../../images/integrations-vercel-auth.png)
+
+<Note>
+    Opting in for the Infisical-Vercel integration will break end-to-end encryption since Infisical will be able to read
+    your secrets. This is, however, necessary for Infisical to sync the secrets to Vercel.
+
+    Your secrets remain encrypted at rest following our [security guide mechanics](/security/mechanics).
+</Note>
+
+Now select **Production** for (the source) **Environment** and sync it to the **Production Environment** of the (target) application in Vercel.
+Lastly, press create integration to start syncing secrets to Vercel.
+
+![integrations vercel](../../images/integrations-vercel-create.png)
+![integrations vercel](../../images/integrations-vercel.png)
+
+You should now see your secret from Infisical appear as production environment variables in your Vercel project.
+
+At this stage, you know how to use the Infisical-Vercel integration to sync production secrets from Infisical to Vercel.
+
+<Warning>
+  The following environment variable names are reserved by Vercel and cannot be
+  synced: `AWS_SECRET_KEY`, `AWS_EXECUTION_ENV`, `AWS_LAMBDA_LOG_GROUP_NAME`,
+  `AWS_LAMBDA_LOG_STREAM_NAME`, `AWS_LAMBDA_FUNCTION_NAME`,
+  `AWS_LAMBDA_FUNCTION_MEMORY_SIZE`, `AWS_LAMBDA_FUNCTION_VERSION`,
+  `NOW_REGION`, `TZ`, `LAMBDA_TASK_ROOT`, `LAMBDA_RUNTIME_DIR`,
+  `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_SESSION_TOKEN`,
+  `AWS_REGION`, and `AWS_DEFAULT_REGION`.
+</Warning>
+
+## FAQ
+
+<AccordionGroup>
+    <Accordion title="Why should I use Infisical if I can centralize all my Next.js + Vercel environment variables across all environments directly in Vercel?">
+        Vercel does not specialize in secret management which means it lacks many useful features for effectively managing environment variables.
+        Here are some features that teams benefit from by using Infisical together with Vercel:
+
+        - Audit logs: See which team members are creating, reading, updating, and deleting environment variables across all environments.
+        - Versioning and point in time recovery: Rolling back secrets and an entire project state.
+        - Overriding secrets that should be unique amongst team members.
+
+        And much more.
+    </Accordion>
+    <Accordion title="Is opting out of end-to-end encryption for the Infisical-Vercel integration safe?">
+        Yes. Your secrets are still encrypted at rest. To note, most secret managers actually don't support end-to-end encryption.
+        
+        Check out the [security guide](/security/overview).
+    </Accordion>
+    <Accordion title="Is there way to retain end-to-end encryption for syncing production secrets to Vercel?">
+        Yes. You can also use the Infisical [Node SDK](https://github.com/Infisical/infisical-node) to fetch secrets back to your Next.js app
+        in both development and production.
+
+        Depending on how you use it, however, it may require certain pages to be server-side rendered.  
+    </Accordion>
+</AccordionGroup>
+
+See also:
+
+- [Documentation for the Infisical CLI](/cli/overview)
+- [Documentation for the Vercel integration](/integrations/cloud/vercel)

docs/documentation/guides/node.mdx

@@ -0,0 +1,121 @@
+---
+title: "Node"
+---
+
+This guide demonstrates how to use Infisical to manage secrets for your Node stack from local development to production. It uses:
+
+- Infisical (you can use [Infisical Cloud](https://app.infisical.com) or a [self-hosted instance of Infisical](https://infisical.com/docs/self-hosting/overview)) to store your secrets.
+- The [infisical-node](https://github.com/Infisical/infisical-node) client SDK to fetch secrets back to your Node application on demand.
+
+## Project Setup
+
+To begin, we need to set up a project in Infisical and add secrets to an environment in it.
+
+### Create a project
+
+1. Create a new project in [Infisical](https://app.infisical.com/).
+
+2. Add a secret to the development environment of this project so we can pull it back for local development. In the **Secrets Overview** page, press **Explore Development** and add a secret with the key `NAME` and value `YOUR_NAME`.
+
+### Create an Infisical Token
+
+Now that we've created a project and added a secret to its development environment, we need to provision an Infisical Token that our Node application can use to access the secret.
+
+1. Head to the **Project Settings > Service Tokens** and press **Add New Token**. 
+2. Call the token anything like **My App Token** and select **Development** under **Environment**.
+3. Copy the token and keep it handy.
+
+
+## Create a Node app
+
+For this demonstration, we use a minimal Express application. However, the same principles will apply for any Node application such as those built on Koa or Fastify.
+
+### Create an Express app
+
+Initialize a new Node.js project with a default `package.json` file.
+
+```console
+npm init -y
+```
+
+Install `express` and [infisical-node](https://github.com/Infisical/infisical-node), the client Node SDK for Infisical.
+
+```console
+npm install express infisical-node
+```
+
+Finally, create an index.js file containing the application code.
+
+```js
+const express = require("express");
+const app = express();
+const PORT = 3000;
+
+const client = new InfisicalClient({
+    token: "YOUR_INFISICAL_TOKEN"
+});
+
+app.get("/", async (req, res) => {
+    const name = (await client.getSecret("NAME")).secretValue;
+    res.send(`Hello, ${name}!`);
+});
+
+app.listen(PORT, () => {
+    console.log(`Example app listening on port ${PORT}`);
+});
+```
+
+Here, we initialized a `client` instance of the Infisical Node SDK with the Infisical Token
+that we created earlier, giving access to the secrets in the development environment of the
+project in Infisical that we created earlier.
+
+Finally, start the app and head to `http://localhost:3000` to see the message **Hello, Your Name**.
+
+```console
+node index.js
+```
+
+The client fetched the secret with the key `NAME` from Infisical that we returned in the response of the endpoint.
+
+At this stage, you know how to fetch secrets from Infisical back to your Node application. By using Infisical Tokens scoped to different environments, you can easily manage secrets across various stages of your project in Infisical, from local development to production.
+
+## FAQ
+
+<AccordionGroup>
+    <Accordion title="Are my secrets exposed in transit every time the SDK fetches them?">
+        No. Infisical uses end-to-end encryption which ensures that secrets are always encrypted in transit
+        and decrypted on the client side. In fact, not even the server can decrypt your secrets (unless 
+        that permission is explicitly granted from within the platform).
+
+        Check out the [security guide](/security/overview).
+    </Accordion>
+    <Accordion title="Isn't it inefficient if my app makes a request every time it needs a secret?">
+        The client SDK caches every secret and implements a 5-minute waiting period before
+        re-requesting it. The waiting period can be controlled by setting the `cacheTTL` parameter at
+        the time of initializing the client.
+    </Accordion>
+    <Accordion title="What if a request for a secret fails?">
+        The SDK caches every secret and falls back to the cached value if a request fails. If no cached
+        value ever-existed, the SDK falls back to whatever value is on `process.env`.
+    </Accordion>
+    <Accordion title="Can I still use process.env with the SDK?">
+        Yes. If no `token` parameter is passed in at the time of initializing the client or nothing is found when requesting for a secret,
+        then the SDK falls back to whatever value is on `process.env`.
+    </Accordion>
+    <Accordion title="What's the point if I still have to manage a token for the SDK?">
+        The token enables the SDK to authenticate with Infisical to fetch back your secrets.
+        Although the SDK requires you to pass in a token, it enables greater efficiency and security
+        than if you managed dozens of secrets yourself without it. Here're some benefits:
+
+        - You always pull in the right secrets because they're fetched on demand from a centralize source that is Infisical.
+        - You can use the Infisical which comes with tons of benefits like secret versioning, access controls, audit logs, etc.
+        - You now risk leaking one token that can be revoked instead of dozens of raw secrets.
+        
+        And much more.
+    </Accordion>
+    
+</AccordionGroup>
+
+See also:
+
+- Explore the [Node SDK](https://github.com/Infisical/infisical-node)

docs/documentation/guides/python.mdx

@@ -0,0 +1,119 @@
+---
+title: "Python"
+---
+
+This guide demonstrates how to use Infisical to manage secrets for your Python stack from local development to production. It uses:
+
+- Infisical (you can use [Infisical Cloud](https://app.infisical.com) or a [self-hosted instance of Infisical](https://infisical.com/docs/self-hosting/overview)) to store your secrets.
+- The [infisical-python](https://github.com/Infisical/infisical-python) client SDK to fetch secrets back to your Python application on demand.
+
+## Project Setup
+
+To begin, we need to set up a project in Infisical and add secrets to an environment in it.
+
+### Create a project
+
+1. Create a new project in [Infisical](https://app.infisical.com/).
+
+2. Add a secret to the development environment of this project so we can pull it back for local development. In the **Secrets Overview** page, press **Explore Development** and add a secret with the key `NAME` and value `YOUR_NAME`.
+
+### Create an Infisical Token
+
+Now that we've created a project and added a secret to its development environment, we need to provision an Infisical Token that our Node application can use to access the secret.
+
+1. Head to the **Project Settings > Service Tokens** and press **Add New Token**. 
+2. Call the token anything like **My App Token** and select **Development** under **Environment**.
+3. Copy the token and keep it handy.
+
+## Create a Python app
+
+For this demonstration, we use a minimal Flask application. However, the same principles will apply for any Python application such as those built with Django.
+
+### Create a Flask app
+
+First, create a virtual environment and activate it.
+
+```console
+python3 -m venv env
+source env/bin/activate
+```
+
+Install Flask and [infisical-python](https://github.com/Infisical/infisical-python), the client Python SDK for Infisical.
+
+```console
+pip install Flask infisical
+```
+
+Finally, create an `app.py` file containing the application code.
+
+```python
+from flask import Flask
+from infisical import InfisicalClient
+
+app = Flask(__name__)
+
+client = InfisicalClient(token="your_infisical_token")
+
+@app.route("/")
+def hello_world():
+    # access value
+    name = client.get_secret("NAME")
+    return f"Hello, {name.secret_value}!"
+```
+
+Here, we initialized a `client` instance of the Infisical Python SDK with the Infisical Token
+that we created earlier, giving access to the secrets in the development environment of the
+project in Infisical that we created earlier.
+
+Finally, start the app and head to `http://localhost:5000` to see the message **Hello, Your Name**.
+
+```console
+flask run
+```
+
+The client fetched the secret with the key `NAME` from Infisical that we returned in the response of the endpoint.
+
+At this stage, you know how to fetch secrets from Infisical back to your Python application. By using Infisical Tokens scoped to different environments, you can easily manage secrets across various stages of your project in Infisical, from local development to production.
+
+## FAQ
+
+<AccordionGroup>
+    <Accordion title="Are my secrets exposed in transit every time the SDK fetches them?">
+        No. Infisical uses end-to-end encryption which ensures that secrets are always encrypted in transit
+        and decrypted on the client side. In fact, not even the server can decrypt your secrets (unless 
+        that permission is explicitly granted from within the platform).
+
+        Check out the [security guide](/security/overview).
+    </Accordion>
+    <Accordion title="Isn't it inefficient if my app makes a request every time it needs a secret?">
+        The client SDK caches every secret and implements a 5-minute waiting period before
+        re-requesting it. The waiting period can be controlled by setting the `cacheTTL` parameter at
+        the time of initializing the client.
+    </Accordion>
+    <Accordion title="What if a request for a secret fails?">
+        The SDK caches every secret and falls back to the cached value if a request fails. If no cached
+        value ever-existed, the SDK falls back to whatever value is on `process.env`.
+    </Accordion>
+    <Accordion title="Can I still use process.env with the SDK?">
+        Yes. If no `token` parameter is passed in at the time of initializing the client or nothing is found when requesting for a secret,
+        then the SDK falls back to whatever value is on `process.env`.
+    </Accordion>
+    <Accordion title="What's the point if I still have to manage a token for the SDK?">
+        The token enables the SDK to authenticate with Infisical to fetch back your secrets.
+        Although the SDK requires you to pass in a token, it enables greater efficiency and security
+        than if you managed dozens of secrets yourself without it. Here're some benefits:
+
+        - You always pull in the right secrets because they're fetched on demand from a centralize source that is Infisical.
+        - You can use the Infisical which comes with tons of benefits like secret versioning, access controls, audit logs, etc.
+        - You now risk leaking one token that can be revoked instead of dozens of raw secrets.
+        
+        And much more.
+    </Accordion>
+    
+</AccordionGroup>
+
+See also:
+
+- Explore the [Python SDK](https://github.com/Infisical/infisical-python)
+
+

docs/getting-started/features.mdx

@@ -1,30 +0,0 @@
----
-title: "Features"
-description: "A non-exhaustive list of features that Infisical has to offer."
----
-
-## Platform
-
-- Provision members access to organizations and projects.
-- Manage secrets by adding, deleting, updating them across environments; search, sort, hide/un-hide, export/import them.
-- Sync secrets to platforms via integrations to platforms like GitHub, Vercel, and Netlify.
-- Rollback secrets to any point in time.
-- Rollback each secrets to any version.
-- Track actions through audit logs.
-
-## CLI
-
-The [CLI](/cli/overview) is used to inject environment variables into applications and infrastructure.
-
-- Inject environment variables.
-- Inject environment variables into containers via service tokens for Docker.
-
-## SDKs
-
-[SDKs](/sdks/overview) enable apps to fetch back secrets using an [Infisical Token](/getting-started/dashboard/token) scoped to a project and environment.
-
-## Roadmap
-
-We're building the future of secret management, one that's comprehensive and accessible to all. Check out our [roadmap](https://www.notion.so/infisical/be2d2585a6694e40889b03aef96ea36b?v=5b19a8127d1a4060b54769567a8785fa).
-
-Interested in contributing? Check out the [guide](/contributing/overview).

docs/getting-started/quickstart.mdx

@@ -1,116 +0,0 @@
----
-title: "Quickstarts"
-description: "Start managing developer secrets and configs with Infisical in minutes."
----
-
-These examples demonstrate how to store and fetch environment variables from [Infisical Cloud](https://app.infisical.com) into your application.
-
-## Set up Infisical Cloud
-
-1. Login or create an account at `app.infisical.com`.
-2. Create a new project.
-3. Keep the default environment variables or populate them as in the image below.
-
-![project quickstart](../images/project-quickstart.png)
-
-## Fetch Secrets for Your App
-
-<Tabs>
-  <Tab title="CLI">
-  
-    The Infisical CLI is platform-agnostic and enables you to inject environment variables into your app across many tech stacks and frameworks.
-
-    ### Set up the CLI
-
-    1. Follow the instructions to [install our platform-agnostic CLI](/cli/overview).
-
-    2. Initialize Infisical for your project.
-
-    ```bash
-    # move to your project
-    cd /path/to/project
-
-    # initialize infisical
-    infisical init
-    ```
-
-    ### Start your app with environment variables injected
-
-    ```bash
-    # inject environment variables into app
-    infisical run -- [your application start command]
-    ```
-
-    Your app should now be running with the environment variables injected.
-
-    Check out our [integrations](/integrations/overview) for injecting environment variables into frameworks and platforms like Docker.
-
-  </Tab>
-  <Tab title="SDK">
-    [Infisical SDKs](/sdks/overview) let your app fetch back secrets using an [Infisical Token](/getting-started/dashboard/token) that is scoped to a project and environment in Infisical. In this example, we demonstrate how to use the [Node SDK](/sdks/languages/node).
-    
-    Using Python? We have a [Python SDK](/sdks/languages/python) as well.
-    
-    ### Obtain an [Infisical Token](/getting-started/dashboard/token)
-    
-    Head to your project settings to create a token scoped to the project and environment you wish to fetch secrets from.
-
-    ![token add](../images/project-token-add.png)
-
-    ### Install the SDK
-
-    ```bash
-    npm install infisical-node --save
-    ```
-
-    ### Initialize the Infisical client
-
-    ```js
-    import InfisicalClient from "infisical-node";
-    
-    const client = new InfisicalClient({
-      token: "your_infisical_token",
-    });
-    ```
-
-    ### Get a value
-
-    ```js
-    const value = await client.getSecret("SOME_KEY");
-    ```
-
-    ### Example with Express
-
-    ```js
-    import InfisicalClient from "infisical-node";
-    import express from "express";
-    const app = express();
-    const PORT = 3000;
-
-    const client = InfisicalClient({
-      token: "st.xxx.xxx",
-    });
-
-    // your application logic
-
-    app.get("/", async (req, res) => {
-      const name = await client.getSecret("NAME");
-      res.send(`Hello! My name is: ${name.secretValue}`);
-    });
-
-    app.listen(PORT, async () => {
-      console.log(`App listening on port ${port}`);
-    });
-    ```
-
-    <Warning>
-      We do not recommend hardcoding your [Infisical
-      Token](/getting-started/dashboard/token). Setting it as an environment
-      variable would be best.
-
-  </Warning>
-  
-  Check out our [SDKs](/sdks/overview) for other language SDKs.
-
-</Tab>
-</Tabs>

docs/integrations/cicd/gitlab.mdx

@@ -37,7 +37,7 @@ Select which Infisical environment secrets you want to sync to which GitLab repo
 
 ## Generate service token
 
-Generate an [Infisical Token](../../getting-started/dashboard/token) for the specific project and environment in Infisical.
+Generate an [Infisical Token](/documentation/platform/token) for the specific project and environment in Infisical.
 
 ## Set the Infisical Token in Gitlab
 

docs/integrations/overview.mdx

@@ -5,7 +5,7 @@ description: "How to use Infisical to inject secrets and configs into various 3-
 
 Integrations allow environment variables to be synced from Infisical into your local development workflow, CI/CD pipelines, and production infrastructure.
 
-Missing an integration? Throw in a [request](https://github.com/Infisical/infisical/issues).
+Missing an integration? [Throw in a request](https://github.com/Infisical/infisical/issues).
 
 | Integration                                                    | Type      | Status      |
 | -------------------------------------------------------------- | --------- | ----------- |

docs/integrations/platforms/docker-compose.mdx

@@ -13,7 +13,7 @@ Follow this [guide](./docker) to configure the Infisical CLI for each service th
 
 ## Generate Infisical Tokens
 
-Generate a unique [Infisical Token](https://infisical.com/docs/getting-started/dashboard/token) for each service.
+Generate a unique [Infisical Token](/documentation/platform/token) for each service.
 
 ## Add Infisical Tokens to your Docker Compose file
 

docs/integrations/platforms/docker.mdx

@@ -50,7 +50,7 @@ CMD ["infisical", "run", "--command", "npm run start && ..."]
 
 ## 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).
+Head to your project settings in Infisical Cloud to generate an [Infisical Token](/documentation/platform/token).
 
 ## Feed Docker your Infisical Token
 

docs/mint.json

@@ -82,12 +82,21 @@
         {
           "group": "Getting Started",
           "pages": [
-            "getting-started/introduction",
-            "getting-started/quickstarts/platform",
-            "getting-started/quickstarts/sdks",
-            "getting-started/quickstarts/cli",
-            "getting-started/quickstarts/docker",
-            "getting-started/quickstarts/kubernetes"
+            "documentation/getting-started/introduction",
+            "documentation/getting-started/platform",
+            "documentation/getting-started/sdks",
+            "documentation/getting-started/cli",
+            "documentation/getting-started/docker",
+            "documentation/getting-started/kubernetes"
+          ]
+        },
+        {
+          "group": "Guides",
+          "pages": [
+            "documentation/guides/introduction",
+            "documentation/guides/node",
+            "documentation/guides/python",
+            "documentation/guides/nextjs-vercel"
           ]
         }
       ]
@@ -95,17 +104,17 @@
     {
       "group": "Platform",
       "pages": [
-        "getting-started/dashboard/organization",
-        "getting-started/dashboard/project",
-        "getting-started/dashboard/pit-recovery",
-        "getting-started/dashboard/secret-versioning",
-        "getting-started/dashboard/audit-logs",
-        "getting-started/dashboard/mfa",
-        "getting-started/dashboard/token"
+        "documentation/platform/organization",
+        "documentation/platform/project",
+        "documentation/platform/pit-recovery",
+        "documentation/platform/secret-versioning",
+        "documentation/platform/audit-logs",
+        "documentation/platform/mfa",
+        "documentation/platform/token"
       ]
     },
     {
-      "group": "Self-hosting",
+      "group": "Self-host Infisical",
       "pages": [
         "self-hosting/overview",
         "self-hosting/configuration/envars",

docs/sdks/languages/node.mdx

@@ -32,7 +32,7 @@ This example demonstrates how to use the Infisical Node SDK with an Express appl
 
 <Warning>
   We do not recommend hardcoding your [Infisical
-  Token](/getting-started/dashboard/token). Setting it as an environment
+  Token](/documentation/platform/token). Setting it as an environment
   variable would be best.
 </Warning>
 
@@ -46,7 +46,7 @@ $ npm install infisical-node --save
 
 ## Configuration
 
-Import the SDK and create a client instance with your [Infisical Token](/getting-started/dashboard/token).
+Import the SDK and create a client instance with your [Infisical Token](/documentation/platform/token).
 
 <Tabs>
   <Tab title="ES6">
@@ -76,7 +76,7 @@ Import the SDK and create a client instance with your [Infisical Token](/getting
 <ParamField query="options" type="object">
   <Expandable title="properties">
     <ParamField query="token" type="string" optional>
-      An [Infisical Token](/getting-started/dashboard/token) scoped to a project
+      An [Infisical Token](/documentation/platform/token) scoped to a project
       and environment
     </ParamField>
     <ParamField

docs/sdks/languages/python.mdx

@@ -26,7 +26,7 @@ This example demonstrates how to use the Infisical Python SDK with a Flask appli
 
 <Warning>
   We do not recommend hardcoding your [Infisical
-  Token](/getting-started/dashboard/token). Setting it as an environment
+  Token](/documentation/platform/token). Setting it as an environment
   variable would be best.
 </Warning>
 
@@ -42,7 +42,7 @@ Note: You need Python 3.7+.
 
 ## Configuration
 
-Import the SDK and create a client instance with your [Infisical Token](/getting-started/dashboard/token).
+Import the SDK and create a client instance with your [Infisical Token](/documentation/platform/token).
 
 ```py
 from infisical import InfisicalClient
@@ -53,7 +53,7 @@ client = InfisicalClient(token="your_infisical_token")
 ### Parameters
 
     <ParamField query="token" type="string" optional>
-      An [Infisical Token](/getting-started/dashboard/token) scoped to a project
+      An [Infisical Token](/documentation/platform/token) scoped to a project
       and environment
     </ParamField>
     <ParamField

docs/sdks/overview.mdx

@@ -1,16 +1,105 @@
 ---
-title: "Overview"
-description: "How to use Infisical SDKs to fetch back secrets for your app"
+title: "Introduction"
 ---
 
-Whether it be for local development or production, Infisical SDKs provide the easiest way for your app to fetch back secrets using an [Infisical Token](/getting-started/dashboard/token).
+From local development to production, Infisical SDKs provide the easiest way for your app to fetch back secrets from Infisical on demand. 
 
-We currently have the [Node SDK](https://github.com/Infisical/infisical-node) and [Python SDK](https://github.com/Infisical/infisical-python) available with more language SDKs coming out soon:
+- Install and initialize a language-specific client SDK into your application
+- Provision the client scoped-access to a project and environment in Infisical
+- Fetch secrets on demand
 
-- [Node](https://github.com/Infisical/infisical-node)
-- [Python](https://github.com/Infisical/infisical-python)
-- [Java](/sdks/languages/java)
-- [Ruby](/sdks/languages/ruby)
-- [Go](/sdks/languages/go)
-- [Rust](/sdks/languages/rust)
-- [PHP](/sdks/languages/php)
+<CardGroup cols={2}>
+  <Card
+    title="Node"
+    href="https://github.com/Infisical/infisical-node"
+    icon="node"
+    color="#68a063"
+  >
+    Manage secrets for your Node application on demand
+  </Card>
+  <Card 
+    href="https://github.com/Infisical/infisical-python" 
+    title="Python" 
+    icon="python" 
+    color="#4c8abe"
+    >
+    Manage secrets for your Python application on demand
+  </Card>
+  <Card 
+    href="/sdks/languages/java" 
+    title="Java" 
+    icon="java"
+    color="#e41f23"
+>
+    Manage secrets for your Java application on demand
+  </Card>
+  <Card
+    href="/sdks/languages/ruby"
+    title="Ruby"
+    icon="gem"
+    color="#ac0d01"
+  >
+    Manage secrets for your Ruby application on demand
+  </Card>
+  <Card
+    href="/sdks/languages/go"
+    title="Golang"
+    icon="golang"
+    color="#00add8"
+  >
+    Manage secrets for your Go application on demand
+  </Card>
+  <Card
+    href="/sdks/languages/rust"
+    title="Rust"
+    icon="rust"
+    color="#cd412b"
+  >
+    Manage secrets for your Rust application on demand
+  </Card>
+  <Card
+    href="/sdks/languages/php"
+    title="PHP"
+    icon="php"
+    color="#787cb4"
+  >
+    Manage secrets for your PHP application on demand
+  </Card>
+</CardGroup>
+
+## FAQ
+
+<AccordionGroup>
+    <Accordion title="Are my secrets exposed in transit every time the SDK fetches them?">
+        No. Infisical uses end-to-end encryption which ensures that secrets are always encrypted in transit
+        and decrypted on the client side. In fact, not even the server can decrypt your secrets (unless 
+        that permission is explicitly granted from within the platform).
+
+        Check out the [security guide](/security/overview).
+    </Accordion>
+    <Accordion title="Isn't it inefficient if my app makes a request every time it needs a secret?">
+        The client SDK caches every secret and implements a 5-minute waiting period before
+        re-requesting it. The waiting period can be controlled by setting the `cacheTTL` parameter at
+        the time of initializing the client.
+    </Accordion>
+    <Accordion title="What if a request for a secret fails?">
+        The SDK caches every secret and falls back to the cached value if a request fails. If no cached
+        value ever-existed, the SDK falls back to whatever value is on `process.env`.
+    </Accordion>
+    <Accordion title="Can I still use process.env with the SDK?">
+        Yes. If no `token` parameter is passed in at the time of initializing the client or nothing is found when requesting for a secret,
+        then the SDK falls back to whatever value is on `process.env`.
+    </Accordion>
+    <Accordion title="What's the point if I still have to manage a token for the SDK?">
+        The token enables the SDK to authenticate with Infisical to fetch back your secrets.
+        Although the SDK requires you to pass in a token, it enables greater efficiency and security
+        than if you managed dozens of secrets yourself without it. Here're some benefits:
+
+        - You always pull in the right secrets because they're fetched on demand from a centralize source that is Infisical.
+        - You can use the Infisical which comes with tons of benefits like secret versioning, access controls, audit logs, etc.
+        - You now risk leaking one token that can be revoked instead of dozens of raw secrets.
+        
+        And much more.
+    </Accordion>
+    
+</AccordionGroup>

docs/self-hosting/configuration/email.mdx

@@ -23,7 +23,7 @@ By default, you need to configure the following SMTP [environment variables](htt
 - `SMTP_FROM_ADDRESS`: Email address to be used for sending emails (e.g. team@infisical.com).
 - `SMTP_FROM_NAME`: Name label to be used in `From` field (e.g. Team).
 
-Below you will find details on how to configure common email providers (not in any particular order).
+Below you will find details on how to configure common email providers:
 
 <AccordionGroup>
 <Accordion title="Twilio SendGrid">
@@ -135,6 +135,34 @@ SMTP_FROM_NAME=Infisical
 </Info>
 </Accordion>
 
+<Accordion title="Gmail">
+
+Create an account and enable "less secure app access" in Gmail Account Settings > Security. This will allow
+applications like Infisical to authenticate with Gmail via your username and password.
+
+![Gmail secure app access](../../images/email-gmail-app-access.png)
+
+With your Gmail username and password, you can set your SMTP environment variables:
+
+```
+SMTP_HOST=smtp.gmail.com
+SMTP_USERNAME=hey@gmail.com # your email
+SMTP_PASSWORD=password # your password
+SMTP_PORT=587
+SMTP_SECURE=true
+SMTP_FROM_ADDRESS=hey@gmail.com
+SMTP_FROM_NAME=Infisical
+```
+
+<Warning>
+  As per the [notice](https://support.google.com/accounts/answer/6010255?hl=en) by Google, you should note that using Gmail credentials for SMTP configuration
+  will only work for Google Workspace or Google Cloud Identity customers as of May 30, 2022.
+
+  Put differently, the SMTP configuration is only possible with business (not personal) Gmail credentials.
+</Warning>
+
+</Accordion>
+
 <Accordion title="Zoho Mail">
 
 1. Create an account and configure [Zoho Mail](https://www.zoho.com/mail/) to send emails.

docs/self-hosting/overview.mdx

@@ -7,6 +7,44 @@ To meet various compliance requirements, you may want to self-host Infisical ins
 Self-hosted Infisical allows you to maintain your sensitive information within your own infrastructure and network, ensuring complete control over your data.
 
 <Tabs>
+  <Tab title="Local machine">
+    ## Setup and launch Infisical
+    
+    Make sure you have Git and Docker installed and follow the instructions for your system.
+    
+    <Tabs>
+      <Tab title="Linux/macOS">
+        Run the following command to clone, prepare, and start up Infisical:
+        
+        ```console
+        git clone https://github.com/Infisical/infisical && cd "$(basename $_ .git)" && cp .env.example .env && docker-compose -f docker-compose.dev.yml up --build
+        ```
+      </Tab>
+      <Tab title="Windows Command Prompt">
+        Run the following command to clone, prepare, and start up Infisical:
+
+        ```console
+        git clone https://github.com/Infisical/infisical && cd infisical && copy .env.example .env && docker-compose -f docker-compose.dev.yml up --build
+        ```
+      </Tab>
+      <Tab title="Other">
+        Clone the repository back to your machine.
+        
+        ```console
+        git clone https://github.com/Infisical/infisical
+        ```
+      
+        Navigate into the root of the repository create a new `.env` file containing the contents of the [.env.example file](https://github.com/Infisical/infisical/blob/main/.env.example).
+        
+        Finally run `docker-compose up` to start up Infisical.
+
+        ```console
+        docker-compose -f docker-compose.dev.yml up --build
+        ```
+      </Tab>
+    </Tabs>
+    Login to the web app at `http://localhost:8080` by entering the test user email `test@localhost.local` and password `testInfisical1`.
+  </Tab>
   <Tab title="Quick deploy AWS">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/jR-gM7vIY2c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     This deployment option will use AWS Cloudformation to auto deploy an instance of Infisical on a single EC2 via Docker Compose.
@@ -32,7 +70,7 @@ Self-hosted Infisical allows you to maintain your sensitive information within y
     
   **Prerequisites**
   - You have understanding of [Kubernetes](https://kubernetes.io/)
-  - You have understanding of [Helm package manager](https://helm.sh/) 
+  - Installed [Helm package manager](https://helm.sh/) version v3.11.3 or greater
   - You have [kubectl](https://kubernetes.io/docs/reference/kubectl/kubectl/) installed and connected to your kubernetes cluster
 
 

ecosystem.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  apps: [
+    {
+      name: 'frontend',
+      script: "./scripts/start.sh",
+      instances: 1,
+      cwd: "./app",
+      interpreter: 'sh',
+      exec_mode: "fork",
+      autorestart: true,
+      watch: false,
+      max_memory_restart: '500M',
+    },
+    {
+      name: 'backend',
+      script: 'npm',
+      args: 'run start',
+      cwd: "./backend",
+      instances: 1,
+      exec_mode: "fork",
+      autorestart: true,
+      watch: false,
+      max_memory_restart: '500M',
+    },
+    {
+      name: "nginx",
+      script: "nginx",
+      args: "-g 'daemon off;'",
+      exec_interpreter: "none",
+    },
+  ],
+};

frontend/src/components/navigation/NavBarDashboard.tsx

@@ -34,7 +34,7 @@ const supportOptions = (t: TFunction) => [
   [
     <FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faBook} />,
     t('nav:support.docs'),
-    'https://infisical.com/docs/getting-started/introduction'
+    'https://infisical.com/docs/documentation/getting-started/introduction'
   ],
   [
     <FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faGithub} />,
@@ -105,7 +105,7 @@ export default function Navbar() {
       </div>
       <div className="relative flex justify-start items-center mx-2 z-40">
         <a
-          href="https://infisical.com/docs/getting-started/introduction"
+          href="https://infisical.com/docs/documentation/getting-started/introduction"
           target="_blank"
           rel="noopener noreferrer"
           className="text-gray-200 hover:bg-white/10 px-3 rounded-md duration-200 text-sm mr-4 py-2 flex items-center"

frontend/src/components/navigation/NavHeader.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -21,6 +22,7 @@ import { Select, SelectItem, Tooltip } from '../v2';
  * @param {string} obj.onEnvChange - the action that happens when an env is changed
  * @returns
  */
+// TODO(akhilmhdh): simply this header and nav system later
 export default function NavHeader({
   pageName,
   isProjectRelated,
@@ -38,7 +40,7 @@ export default function NavHeader({
 }): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <div className="ml-6 flex flex-row items-center pt-8">
@@ -59,31 +61,40 @@ export default function NavHeader({
         </>
       )}
       <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-      {pageName === 'Secrets'
-      ? <a className="text-sm font-semibold text-primary/80 hover:text-primary" href={`${router.asPath.split("?")[0]}`}>{pageName}</a>
-      : <div className="text-sm text-gray-400">{pageName}</div>}
-      {currentEnv &&
-      <>
-        <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
-        <div className='pl-3 rounded-md hover:bg-bunker-100/10'>
-          <Tooltip content="Select environment">
-            <Select
-              value={userAvailableEnvs?.filter(uae => uae.name === currentEnv)[0]?.slug}
-              onValueChange={(value) => {
-                if (value && onEnvChange) onEnvChange(value);
-              }}
-              className="text-sm pl-0 font-medium text-primary/80 hover:text-primary bg-transparent"
-              dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
-            >
-              {userAvailableEnvs?.map(({ name, slug }) => (
-                <SelectItem value={slug} key={slug}>
-                  {name}
-                </SelectItem>
-              ))}
-            </Select>
-          </Tooltip>
-        </div>
-      </>}
+      {pageName === 'Secrets' ? (
+        <Link
+          passHref
+          legacyBehavior
+          href={{ pathname: '/dashboard/[id]', query: { id: router.query.id } }}
+        >
+          <a className="text-sm font-semibold text-primary/80 hover:text-primary">{pageName}</a>
+        </Link>
+      ) : (
+        <div className="text-sm text-gray-400">{pageName}</div>
+      )}
+      {currentEnv && (
+        <>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+          <div className="rounded-md pl-3 hover:bg-bunker-100/10">
+            <Tooltip content="Select environment">
+              <Select
+                value={userAvailableEnvs?.filter((uae) => uae.name === currentEnv)[0]?.slug}
+                onValueChange={(value) => {
+                  if (value && onEnvChange) onEnvChange(value);
+                }}
+                className="bg-transparent pl-0 text-sm font-medium text-primary/80 hover:text-primary"
+                dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
+              >
+                {userAvailableEnvs?.map(({ name, slug }) => (
+                  <SelectItem value={slug} key={slug}>
+                    {name}
+                  </SelectItem>
+                ))}
+              </Select>
+            </Tooltip>
+          </div>
+        </>
+      )}
     </div>
   );
 }

frontend/src/hooks/api/secrets/index.ts

@@ -1 +1,6 @@
-export { useBatchSecretsOp, useGetProjectSecrets, useGetSecretVersion } from './queries';
+export {
+  useBatchSecretsOp,
+  useGetProjectSecrets,
+  useGetProjectSecretsByKey,
+  useGetSecretVersion
+} from './queries';

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

@@ -19,7 +19,10 @@ import {
 
 export const secretKeys = {
   // this is also used in secretSnapshot part
-  getProjectSecret: (workspaceId: string, env: string | string[]) => [{ workspaceId, env }, 'secrets'],
+  getProjectSecret: (workspaceId: string, env: string | string[]) => [
+    { workspaceId, env },
+    'secrets'
+  ],
   getSecretVersion: (secretId: string) => [{ secretId }, 'secret-versions']
 };
 
@@ -32,11 +35,11 @@ const fetchProjectEncryptedSecrets = async (workspaceId: string, env: string | s
       }
     });
     return data.secrets;
-  }  
-  
+  }
+
   if (typeof env === 'object') {
     let allEnvData: any = [];
-    
+
     // eslint-disable-next-line no-restricted-syntax
     for (const envPoint of env) {
       // eslint-disable-next-line no-await-in-loop
@@ -48,13 +51,12 @@ const fetchProjectEncryptedSecrets = async (workspaceId: string, env: string | s
       });
       allEnvData = allEnvData.concat(data.secrets);
     }
-    
+
     return allEnvData;
-  // eslint-disable-next-line no-else-return
+    // eslint-disable-next-line no-else-return
   } else {
     return null;
   }
-
 };
 
 export const useGetProjectSecrets = ({
@@ -117,7 +119,10 @@ export const useGetProjectSecrets = ({
         };
 
         if (encSecret.type === 'personal') {
-          personalSecrets[`${decryptedSecret.key}-${decryptedSecret.env}`] = { id: encSecret._id, value: secretValue };
+          personalSecrets[`${decryptedSecret.key}-${decryptedSecret.env}`] = {
+            id: encSecret._id,
+            value: secretValue
+          };
         } else {
           if (!duplicateSecretKey?.[`${decryptedSecret.key}-${decryptedSecret.env}`]) {
             sharedSecrets.push(decryptedSecret);
@@ -126,17 +131,106 @@ export const useGetProjectSecrets = ({
         }
       });
       sharedSecrets.forEach((val) => {
-        if (personalSecrets?.[val.key]) {
-          val.idOverride = personalSecrets[val.key].id;
-          val.valueOverride = personalSecrets[val.key].value;
+        const dupKey = `${val.key}-${val.env}`;
+        if (personalSecrets?.[dupKey]) {
+          val.idOverride = personalSecrets[dupKey].id;
+          val.valueOverride = personalSecrets[dupKey].value;
           val.overrideAction = 'modified';
         }
       });
-
       return { secrets: sharedSecrets };
     }
   });
 
+export const useGetProjectSecretsByKey = ({
+  workspaceId,
+  env,
+  decryptFileKey,
+  isPaused
+}: GetProjectSecretsDTO) =>
+  useQuery({
+    // wait for all values to be available
+    enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
+    queryKey: secretKeys.getProjectSecret(workspaceId, env),
+    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env),
+    select: (data) => {
+      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
+      const latestKey = decryptFileKey;
+      const key = decryptAssymmetric({
+        ciphertext: latestKey.encryptedKey,
+        nonce: latestKey.nonce,
+        publicKey: latestKey.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      const sharedSecrets: Record<string, DecryptedSecret[]> = {};
+      const personalSecrets: Record<string, { id: string; value: string }> = {};
+      // this used for add-only mode in dashboard
+      // type won't be there thus only one key is shown
+      const duplicateSecretKey: Record<string, boolean> = {};
+      const uniqSecKeys: Record<string, boolean> = {};
+      data.forEach((encSecret: EncryptedSecret) => {
+        const secretKey = decryptSymmetric({
+          ciphertext: encSecret.secretKeyCiphertext,
+          iv: encSecret.secretKeyIV,
+          tag: encSecret.secretKeyTag,
+          key
+        });
+        if (!uniqSecKeys?.[secretKey]) uniqSecKeys[secretKey] = true;
+
+        const secretValue = decryptSymmetric({
+          ciphertext: encSecret.secretValueCiphertext,
+          iv: encSecret.secretValueIV,
+          tag: encSecret.secretValueTag,
+          key
+        });
+
+        const secretComment = decryptSymmetric({
+          ciphertext: encSecret.secretCommentCiphertext,
+          iv: encSecret.secretCommentIV,
+          tag: encSecret.secretCommentTag,
+          key
+        });
+
+        const decryptedSecret = {
+          _id: encSecret._id,
+          env: encSecret.environment,
+          key: secretKey,
+          value: secretValue,
+          tags: encSecret.tags,
+          comment: secretComment,
+          createdAt: encSecret.createdAt,
+          updatedAt: encSecret.updatedAt
+        };
+
+        if (encSecret.type === 'personal') {
+          personalSecrets[`${decryptedSecret.key}-${decryptedSecret.env}`] = {
+            id: encSecret._id,
+            value: secretValue
+          };
+        } else {
+          if (!duplicateSecretKey?.[`${decryptedSecret.key}-${decryptedSecret.env}`]) {
+            if (!sharedSecrets?.[secretKey]) sharedSecrets[secretKey] = [];
+            sharedSecrets[secretKey].push(decryptedSecret);
+          }
+          duplicateSecretKey[`${decryptedSecret.key}-${decryptedSecret.env}`] = true;
+        }
+      });
+      Object.keys(sharedSecrets).forEach((secName) => {
+        sharedSecrets[secName].forEach((val) => {
+          const dupKey = `${val.key}-${val.env}`;
+          if (personalSecrets?.[dupKey]) {
+            val.idOverride = personalSecrets[dupKey].id;
+            val.valueOverride = personalSecrets[dupKey].value;
+            val.overrideAction = 'modified';
+          }
+        });
+      });
+
+      return { secrets: sharedSecrets, uniqueSecCount: Object.keys(uniqSecKeys).length };
+    }
+  });
+
 const fetchEncryptedSecretVersion = async (secretId: string, offset: number, limit: number) => {
   const { data } = await apiRequest.get<{ secretVersions: EncryptedSecretVersion[] }>(
     `/api/v1/secret/${secretId}/secret-versions`,

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

@@ -62,6 +62,7 @@ type SecretTagArg = { _id: string; name: string; slug: string };
 export type UpdateSecretArg = {
   _id: string;
   type: 'shared' | 'personal';
+  secretName: string;
   secretKeyCiphertext: string;
   secretKeyIV: string;
   secretKeyTag: string;

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -8,11 +8,7 @@ import { Controller, useForm } from 'react-hook-form';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import {
-  faBookOpen,
-  faMobile,
-  faPlus,
-} from '@fortawesome/free-solid-svg-icons';
+import { faBookOpen, faMobile, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
 import queryString from 'query-string';
@@ -110,7 +106,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
       ) {
         router.push('/noprojects');
       } else if (router.asPath !== '/noprojects') {
-        
         // const pathSegments = router.asPath.split('/').filter(segment => segment.length > 0);
 
         // let intendedWorkspaceId;
@@ -123,8 +118,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
         //     .split('/')
         //     [router.asPath.split('/').length - 1].split('?')[0];
         // }
-        
-        const pathSegments = router.asPath.split('/').filter(segment => segment.length > 0);
+
+        const pathSegments = router.asPath.split('/').filter((segment) => segment.length > 0);
 
         let intendedWorkspaceId;
         if (pathSegments.length >= 2 && pathSegments[0] === 'dashboard') {
@@ -140,7 +135,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
           // const lastPathSegment = router.asPath.split('/').pop().split('?');
           // [intendedWorkspaceId] = lastPathSegment;
         }
-        
+
         if (!intendedWorkspaceId) return;
 
         if (!['callback', 'create', 'authorize'].includes(intendedWorkspaceId)) {
@@ -149,7 +144,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
         // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
         if (
-          !['callback', 'create', 'authorize'].includes(intendedWorkspaceId) && userWorkspaces[0]?._id !== undefined &&
+          !['callback', 'create', 'authorize'].includes(intendedWorkspaceId) &&
+          userWorkspaces[0]?._id !== undefined &&
           !userWorkspaces
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)
@@ -240,21 +236,21 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   return (
     <>
-      <div className="hidden h-screen w-full flex-col overflow-x-hidden md:flex dark">
+      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
         <Navbar />
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <aside className="w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
             <nav className="items-between flex h-full flex-col justify-between">
               <div>
                 {currentWorkspace ? (
-                  <div className="w-full p-4 mt-3 mb-4">
-                    <p className="text-xs font-semibold ml-1.5 mb-1 uppercase text-gray-400">
+                  <div className="mt-3 mb-4 w-full p-4">
+                    <p className="ml-1.5 mb-1 text-xs font-semibold uppercase text-gray-400">
                       Project
                     </p>
                     <Select
                       defaultValue={currentWorkspace?._id}
                       value={currentWorkspace?._id}
-                      className="w-full py-2.5 bg-mineshaft-600 font-medium truncate"
+                      className="w-full truncate bg-mineshaft-600 py-2.5 font-medium"
                       onValueChange={(value) => {
                         router.push(`/dashboard/${value}`);
                       }}
@@ -273,7 +269,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       {/* <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" /> */}
                       <div className="w-full">
                         <Button
-                          className="w-full py-2 text-bunker-200 bg-mineshaft-700"
+                          className="w-full bg-mineshaft-700 py-2 text-bunker-200"
                           colorSchema="primary"
                           variant="outline_bg"
                           size="sm"
@@ -286,9 +282,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     </Select>
                   </div>
                 ) : (
-                  <div className="w-full p-4 mt-3 mb-4">
+                  <div className="mt-3 mb-4 w-full p-4">
                     <Button
-                      className="w-full py-2 text-bunker-200 bg-mineshaft-500 hover:bg-primary/90 hover:text-black"
+                      className="w-full bg-mineshaft-500 py-2 text-bunker-200 hover:bg-primary/90 hover:text-black"
                       color="mineshaft"
                       size="sm"
                       onClick={() => handlePopUpOpen('addNewWs')}
@@ -331,13 +327,13 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       </a>
                     </Link>
                     <Link href={`/activity/${currentWorkspace?._id}`} passHref>
-                        <MenuItem
-                          isSelected={router.asPath === `/activity/${currentWorkspace?._id}`}
-                          // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
-                          icon="system-outline-168-view-headline"
-                        >
-                          Audit Logs
-                        </MenuItem>
+                      <MenuItem
+                        isSelected={router.asPath === `/activity/${currentWorkspace?._id}`}
+                        // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
+                        icon="system-outline-168-view-headline"
+                      >
+                        Audit Logs
+                      </MenuItem>
                     </Link>
                     <Link href={`/settings/project/${currentWorkspace?._id}`} passHref>
                       <a>
@@ -428,7 +424,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     </FormControl>
                   )}
                 />
-                <div className="pl-1 mt-4">
+                <div className="mt-4 pl-1">
                   <Controller
                     control={control}
                     name="addMembers"

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -31,7 +31,7 @@ const supportOptions = (t: TFunction) => [
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faBook} />,
     t('nav:support.docs'),
-    'https://infisical.com/docs/getting-started/introduction'
+    'https://infisical.com/docs/documentation/getting-started/introduction'
   ],
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faGithub} />,
@@ -107,7 +107,7 @@ export const Navbar = () => {
       </div>
       <div className="relative z-40 mx-2 flex items-center justify-start">
         <a
-          href="https://infisical.com/docs/getting-started/introduction"
+          href="https://infisical.com/docs/documentation/getting-started/introduction"
           target="_blank"
           rel="noopener noreferrer"
           className="mr-4 flex items-center rounded-md px-3 py-2 text-sm text-gray-200 duration-200 hover:bg-white/10"

frontend/src/reactQuery.ts

@@ -9,7 +9,8 @@ export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
-      retry: 1
+      retry: 1, 
+      cacheTime: 1200000
     }
   }
 });

frontend/src/views/DashboardPage/DashboardEnvOverview.tsx

@@ -1,50 +1,26 @@
-import { useEffect, useState } from 'react';
-import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { useEffect, useMemo, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/router';
 import { yupResolver } from '@hookform/resolvers/yup';
 
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import NavHeader from '@app/components/navigation/NavHeader';
-import {
-  Button,
-  Modal,
-  ModalContent,
-  TableContainer,
-  Tooltip
-} from '@app/components/v2';
+import { Button, TableContainer, Tooltip } from '@app/components/v2';
 import { useWorkspace } from '@app/context';
-import { usePopUp } from '@app/hooks';
 import {
-  useCreateWsTag,
-  useGetProjectSecrets,
+  useGetProjectSecretsByKey,
   useGetUserWsEnvironments,
-  useGetUserWsKey,
+  useGetUserWsKey
 } from '@app/hooks/api';
 import { WorkspaceEnv } from '@app/hooks/api/types';
 
-import { CreateTagModal } from './components/CreateTagModal';
 import { EnvComparisonRow } from './components/EnvComparisonRow';
-import {
-  FormData,
-  schema
-} from './DashboardPage.utils';
+import { FormData, schema } from './DashboardPage.utils';
 
-
-export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
+export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
   const { t } = useTranslation();
   const router = useRouter();
-  const { createNotification } = useNotificationContext();
 
-  const { popUp
-    // , handlePopUpOpen
-    , handlePopUpToggle, handlePopUpClose } = usePopUp([
-    'secretDetails',
-    'addTag',
-    'secretSnapshots',
-    'uploadedSecOpts',
-    'compareSecrets'
-  ] as const);
   const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
 
   const { currentWorkspace, isLoading } = useWorkspace();
@@ -68,20 +44,15 @@ export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
     }
   });
 
-  const userAvailableEnvs = wsEnv?.filter(
-    ({ isReadDenied }) => !isReadDenied
-  );
-  
-  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
+  const userAvailableEnvs = wsEnv?.filter(({ isReadDenied }) => !isReadDenied);
+
+  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecretsByKey({
     workspaceId,
-    env: userAvailableEnvs?.map(env => env.slug) ?? [],
+    env: userAvailableEnvs?.map((env) => env.slug) ?? [],
     decryptFileKey: latestFileKey!,
     isPaused: false
   });
 
-  // mutation calls
-  const { mutateAsync: createWsTag } = useCreateWsTag();
-
   const method = useForm<FormData>({
     // why any: well yup inferred ts expects other keys to defined as undefined
     defaultValues: secrets as any,
@@ -90,39 +61,24 @@ export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
     resolver: yupResolver(schema)
   });
 
-  const {
-    control,
-    // handleSubmit,
-    // getValues,
-    // setValue,
-    // formState: { isSubmitting, dirtyFields },
-    // reset
-  } = method;
-  const formSecrets = useWatch({ control, name: 'secrets' });
+  const numSecretsMissingPerEnv = useMemo(() => {
+    // first get all sec in the env then subtract with total to get missing ones
+    const secPerEnvMissing: Record<string, number> = Object.fromEntries(
+      (userAvailableEnvs || [])?.map(({ slug }) => [slug, 0])
+    );
+    Object.keys(secrets?.secrets || {}).forEach((key) =>
+      secrets?.secrets?.[key].forEach((val) => {
+        secPerEnvMissing[val.env] += 1;
+      })
+    );
+    Object.keys(secPerEnvMissing).forEach((k) => {
+      secPerEnvMissing[k] = (secrets?.uniqueSecCount || 0) - secPerEnvMissing[k];
+    });
+    return secPerEnvMissing;
+  }, [secrets, userAvailableEnvs]);
 
   const isReadOnly = selectedEnv?.isWriteDenied;
 
-  const onCreateWsTag = async (tagName: string) => {
-    try {
-      await createWsTag({
-        workspaceID: workspaceId,
-        tagName,
-        tagSlug: tagName.replace(' ', '_')
-      });
-      handlePopUpClose('addTag');
-      createNotification({
-        text: 'Successfully created a tag',
-        type: 'success'
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: 'Failed to create a tag',
-        type: 'error'
-      });
-    }
-  };
-
   if (isSecretsLoading || isEnvListLoading) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
@@ -132,9 +88,7 @@ export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
   }
 
   // when secrets is not loading and secrets list is empty
-  const isDashboardSecretEmpty = !isSecretsLoading && !formSecrets?.length;
-
-  const numSecretsMissingPerEnv = userAvailableEnvs?.map(envir => ({[envir.slug]: [... new Set(secrets?.secrets.map((secret: any) => secret.key))].length - [... new Set(secrets?.secrets.filter(s => s.env === envir.slug).map((secret: any) => secret.key))].length})).reduce((acc, cur) => ({ ...acc, ...cur }), {})
+  const isDashboardSecretEmpty = !isSecretsLoading && !Object.keys(secrets?.secrets || {})?.length;
 
   return (
     <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
@@ -146,55 +100,77 @@ export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
           </div>
           <div className="mt-6 ml-1">
             <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
-            <p className="text-md text-bunker-300">Inject your secrets using 
-              <a 
-                className="text-primary/80 hover:text-primary mx-1" 
-                href="https://infisical.com/docs/cli/overview" 
+            <p className="text-md text-bunker-300">
+              Inject your secrets using
+              <a
+                className="mx-1 text-primary/80 hover:text-primary"
+                href="https://infisical.com/docs/cli/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Infisical CLI
-              </a> 
-              or 
-              <a 
-                className="text-primary/80 hover:text-primary mx-1" 
-                href="https://infisical.com/docs/sdks/overview" 
+              </a>
+              or
+              <a
+                className="mx-1 text-primary/80 hover:text-primary"
+                href="https://infisical.com/docs/sdks/overview"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Infisical SDKs
-              </a> </p>
+              </a>
+            </p>
           </div>
           <div className="overflow-y-auto">
-            <div className="sticky top-0 absolute flex flex-row h-10 bg-mineshaft-800 border border-mineshaft-600 rounded-md mt-8 min-w-[60.3rem]">
-              <div className="sticky top-0 w-10 px-4 flex items-center justify-center border-none">
-                <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+            <div className="sticky top-0 mt-8 flex h-10 min-w-[60.3rem] flex-row rounded-md border border-mineshaft-600 bg-mineshaft-800">
+              <div className="sticky top-0 flex w-10 items-center justify-center border-none px-4">
+                <div className="w-10 text-center text-xs text-transparent">{0}</div>
               </div>
               <div className="sticky top-0 border-none">
-                <div className="min-w-[200px] lg:min-w-[220px] xl:min-w-[250px] relative flex items-center justify-start h-full w-full">
+                <div className="relative flex h-full w-full min-w-[200px] items-center justify-start lg:min-w-[220px] xl:min-w-[250px]">
                   <div className="text-sm font-medium ">Secret</div>
                 </div>
               </div>
-              {numSecretsMissingPerEnv && userAvailableEnvs?.map(env => {
-                return <div key={`header-${env.slug}`} className="flex flex-row w-full bg-mineshaft-800 rounded-md items-center border-none min-w-[11rem]">
-                  <div className="text-sm font-medium w-full text-center text-bunker-200/[.99] flex flex-row justify-center">
-                    {env.name}
-                    {numSecretsMissingPerEnv[env.slug] > 0 && <div className="bg-red rounded-sm h-[1.1rem] w-[1.1rem] mt-0.5 text-bunker-100 ml-2.5 text-xs border border-red-400 flex items-center justify-center cursor-default">
-                      <Tooltip content={`${numSecretsMissingPerEnv[env.slug]} secrets missing compared to other environments`}><span className="text-bunker-100">{numSecretsMissingPerEnv[env.slug]}</span></Tooltip>
-                    </div>}
-                  </div>
-                </div>
-              })}
+              {numSecretsMissingPerEnv &&
+                userAvailableEnvs?.map((env) => {
+                  return (
+                    <div
+                      key={`header-${env.slug}`}
+                      className="flex w-full min-w-[11rem] flex-row items-center rounded-md border-none bg-mineshaft-800"
+                    >
+                      <div className="flex w-full flex-row justify-center text-center text-sm font-medium text-bunker-200/[.99]">
+                        {env.name}
+                        {numSecretsMissingPerEnv[env.slug] > 0 && (
+                          <div className="mt-0.5 ml-2.5 flex h-[1.1rem] w-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red text-xs text-bunker-100">
+                            <Tooltip
+                              content={`${
+                                numSecretsMissingPerEnv[env.slug]
+                              } secrets missing compared to other environments`}
+                            >
+                              <span className="text-bunker-100">
+                                {numSecretsMissingPerEnv[env.slug]}
+                              </span>
+                            </Tooltip>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
             </div>
-            <div className={`${isDashboardSecretEmpty ? "" : ""} flex flex-row items-start justify-center mt-3 h-full max-h-[calc(100vh-370px)] min-w-[60.3rem] flex-grow w-full overflow-x-hidden no-scrollbar no-scrollbar::-webkit-scrollbar`}>
+            <div
+              className={`${
+                isDashboardSecretEmpty ? '' : ''
+              } no-scrollbar::-webkit-scrollbar mt-3 border rounded-md border-mineshaft-600 flex h-full max-h-[calc(100vh-370px)] w-full min-w-[60.3rem] flex-grow flex-row items-start justify-center overflow-x-hidden no-scrollbar`}
+            >
               {!isDashboardSecretEmpty && (
-                <TableContainer className='border-none'>
-                  <table className="relative secret-table w-full relative bg-bunker-800">
-                    <tbody className="overflow-y-auto max-h-screen">
-                      {[... new Set(secrets?.secrets.map((secret: any) => secret.key))].map((key, index) => (
+                <TableContainer className="border-none">
+                  <table className="secret-table relative w-full bg-mineshaft-900">
+                    <tbody className="max-h-screen overflow-y-auto">
+                      {Object.keys(secrets?.secrets || {}).map((key, index) => (
                         <EnvComparisonRow
                           key={`row-${key}`}
-                          secrets={secrets?.secrets.filter(secret => secret.key === key)}
+                          secrets={secrets?.secrets?.[key]}
                           isReadOnly={isReadOnly}
                           index={index}
                           isSecretValueHidden
@@ -205,22 +181,23 @@ export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
                   </table>
                 </TableContainer>
               )}
-              {isDashboardSecretEmpty &&
-                <div className='flex flex-row h-40 rounded-md mt-1 w-full'>
-                  <div className="sticky top-0 w-10 px-4 flex items-center justify-center border-none">
-                    <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+              {isDashboardSecretEmpty && (
+                <div className="mt-1 flex h-40 w-full flex-row rounded-md">
+                  <div className="sticky top-0 flex w-10 items-center justify-center border-none px-4">
+                    <div className="w-10 text-center text-xs text-transparent">{0}</div>
                   </div>
                   <div className="sticky top-0 border-none">
-                    <div className="min-w-[200px] lg:min-w-[220px] xl:min-w-[250px] relative flex items-center justify-start h-full w-full">
+                    <div className="relative flex h-full w-full min-w-[200px] items-center justify-start lg:min-w-[220px] xl:min-w-[250px]">
                       <div className="text-sm font-medium text-transparent">Secret</div>
                     </div>
                   </div>
-                  <div className="flex flex-col w-full bg-mineshaft-800 text-bunker-300 rounded-md items-center justify-center border-none mx-2 min-w-[11rem]">
+                  <div className="mx-2 flex w-full min-w-[11rem] flex-col items-center justify-center rounded-md border-none bg-mineshaft-800 text-bunker-300">
                     <span className="mb-1">No secrets are available in this project yet.</span>
                     <span>You can go into any environment to add secrets there.</span>
                   </div>
-                </div>}
-                {/* In future, we should add an option to add environments here
+                </div>
+              )}
+              {/* In future, we should add an option to add environments here
                 <div className="ml-10 h-full flex items-start justify-center">
                   <Button
                     leftIcon={<FontAwesomeIcon icon={faPlus}/>}
@@ -234,14 +211,22 @@ export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
                   </Button>
                 </div> */}
             </div>
-            <div className="group flex flex-row items-center mt-4 min-w-[60.3rem]">
-              <div className="w-10 h-10 px-4 flex items-center justify-center border-none"><div className='text-center w-10 text-xs text-transparent'>0</div></div>
-              <div className="flex flex-row justify-between items-center min-w-[200px] lg:min-w-[220px] xl:min-w-[250px]">
-                <span className="text-transparent">0</span>
-                <button type="button" className='mr-2 text-transparent'>1</button>
+            <div className="group mt-4 flex min-w-[60.3rem] flex-row items-center">
+              <div className="flex h-10 w-10 items-center justify-center border-none px-4">
+                <div className="w-10 text-center text-xs text-transparent">0</div>
               </div>
-              {userAvailableEnvs?.map(env => {
-                return <div key={`button-${env.slug}`} className="flex flex-row w-full justify-center h-10 items-center border-none mb-1 mx-2 min-w-[11rem]">
+              <div className="flex min-w-[200px] flex-row items-center justify-between lg:min-w-[220px] xl:min-w-[250px]">
+                <span className="text-transparent">0</span>
+                <button type="button" className="mr-2 text-transparent">
+                  1
+                </button>
+              </div>
+              {userAvailableEnvs?.map((env) => {
+                return (
+                  <div
+                    key={`button-${env.slug}`}
+                    className="mx-2 mb-1 flex h-10 w-full min-w-[11rem] flex-row items-center justify-center border-none"
+                  >
                     <Button
                       onClick={() => onEnvChange(env.slug)}
                       // router.push(`${router.asPath  }?env=${env.slug}`)
@@ -253,23 +238,11 @@ export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
                       Explore {env.name}
                     </Button>
                   </div>
+                );
               })}
-            </div>  
+            </div>
           </div>
         </form>
-        <Modal
-          isOpen={popUp?.addTag?.isOpen}
-          onOpenChange={(open) => {
-            handlePopUpToggle('addTag', open);
-          }}
-        >
-          <ModalContent
-            title="Create tag"
-            subTitle="Specify your tag name, and the slug will be created automatically."
-          >
-            <CreateTagModal onCreateTag={onCreateWsTag} />
-          </ModalContent>
-        </Modal>
       </FormProvider>
     </div>
   );

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { FormProvider, useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { useEffect, useRef, useState } from 'react';
+import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/router';
 import {
@@ -90,6 +90,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   const { createNotification } = useNotificationContext();
   const queryClient = useQueryClient();
 
+  const secretContainer = useRef<HTMLDivElement | null>(null);
   const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
     'secretDetails',
     'addTag',
@@ -102,7 +103,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   const [snapshotId, setSnaphotId] = useState<string | null>(null);
   const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
-  const [deletedSecretIds, setDeletedSecretIds] = useState<string[]>([]);
+  const deletedSecretIds = useRef<string[]>([]);
   const { hasUnsavedChanges, setHasUnsavedChanges } = useLeaveConfirm({ initialValue: false });
 
   const { currentWorkspace, isLoading } = useWorkspace();
@@ -124,8 +125,8 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     onSuccess: (data) => {
       // get an env with one of the access available
       const env = data.find(({ isReadDenied, isWriteDenied }) => !isWriteDenied || !isReadDenied);
-      if (env && data?.map(wsenv => wsenv.slug).includes(envFromTop)) {
-        setSelectedEnv(data?.filter(dp => dp.slug === envFromTop)[0]);
+      if (env && data?.map((wsenv) => wsenv.slug).includes(envFromTop)) {
+        setSelectedEnv(data?.filter((dp) => dp.slug === envFromTop)[0]);
       }
     }
   });
@@ -187,23 +188,15 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     handleSubmit,
     getValues,
     setValue,
-    formState: { isSubmitting, dirtyFields },
+    formState: { isSubmitting, isDirty },
     reset
   } = method;
-  const formSecrets = useWatch({ control, name: 'secrets' });
-  const { fields, prepend, append, remove, update } = useFieldArray({ control, name: 'secrets' });
-
+  const { fields, prepend, append, remove } = useFieldArray({ control, name: 'secrets' });
   const isRollbackMode = Boolean(snapshotId);
   const isReadOnly = selectedEnv?.isWriteDenied;
   const isAddOnly = selectedEnv?.isReadDenied && !selectedEnv?.isWriteDenied;
   const canDoRollback = !isReadOnly && !isAddOnly;
-  const isSubmitDisabled =
-    isReadOnly ||
-    // on add only mode the formstate becomes dirty due to secrets missing some items
-    // to avoid this we check dirtyFields in isAddOnly Mode
-    (isAddOnly && Object.keys(dirtyFields).length === 0) ||
-    (!isRollbackMode && !isAddOnly && Object.keys(dirtyFields).length === 0) ||
-    isSubmitting;
+  const isSubmitDisabled = isReadOnly || (!isRollbackMode && !isDirty) || isAddOnly || isSubmitting;
 
   useEffect(() => {
     if (!isSnapshotChanging && Boolean(snapshotId)) {
@@ -240,15 +233,16 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     // append non conflicting ones
     Object.keys(uploadedSec).forEach((key) => {
       if (!conflictingSecIds?.[key]) {
-        append({
+        delete conflictingUploadedSec[key];
+        sec.push({
           ...DEFAULT_SECRET_VALUE,
           key,
           value: uploadedSec[key].value,
           comment: uploadedSec[key].comments.join(',')
         });
-        delete conflictingUploadedSec[key];
       }
     });
+    setValue('secrets', sec, { shouldDirty: true });
     if (conflictingSec.length > 0) {
       handlePopUpOpen('uploadedSecOpts', { secrets: conflictingUploadedSec });
     }
@@ -264,14 +258,15 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     data.forEach(({ key, index }) => {
       const { value, comments } = uploadedSec[key];
       const comment = comments.join(', ');
-      update(index, {
+      sec[index] = {
         ...DEFAULT_SECRET_VALUE,
         key,
         value,
         comment,
         tags: sec[index].tags
-      });
+      };
     });
+    setValue('secrets', sec, { shouldDirty: true });
     handlePopUpClose('uploadedSecOpts');
   };
 
@@ -319,7 +314,12 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     const sec = isAddOnly ? userSec.filter(({ _id }) => !_id) : userSec;
     // encrypt and format the secrets to batch api format
     // requests = [ {method:"", secret:""} ]
-    const batchedSecret = transformSecretsToBatchSecretReq(deletedSecretIds, latestFileKey, sec);
+    const batchedSecret = transformSecretsToBatchSecretReq(
+      deletedSecretIds.current,
+      latestFileKey,
+      sec,
+      secrets?.secrets
+    );
     // type check
     if (!selectedEnv?.slug) return;
     try {
@@ -332,6 +332,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
         text: 'Successfully saved changes',
         type: 'success'
       });
+      deletedSecretIds.current = [];
       if (!hasUserPushed) {
         await registerUserAction(USER_ACTION_PUSH);
       }
@@ -355,16 +356,17 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     }
     const env = wsEnv?.find((el) => el.slug === slug);
     if (env) setSelectedEnv(env);
-    router.push(`${router.asPath.split("?")[0]}?env=${slug}`)
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query, env: slug }
+    });
   };
 
   // record all deleted ids
   // This will make final deletion easier
   const onSecretDelete = (index: number, id?: string, overrideId?: string) => {
-    const ids: string[] = [];
-    if (id) ids.push(id);
-    if (overrideId) ids.push(overrideId);
-    setDeletedSecretIds((state) => [...state, ...ids]);
+    if (id) deletedSecretIds.current.push(id);
+    if (overrideId) deletedSecretIds.current.push(overrideId);
     remove(index);
     // just the case if this is called from drawer
     handlePopUpClose('secretDetails');
@@ -400,7 +402,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   }
 
   // when secrets is not loading and secrets list is empty
-  const isDashboardSecretEmpty = !isSecretsLoading && !formSecrets?.length;
+  const isDashboardSecretEmpty = !isSecretsLoading && false;
   // when using snapshot mode and snapshot is loading and snapshot list is empty
   const isSnapshotSecretEmtpy =
     isRollbackMode && !isSnapshotSecretsLoading && !snapshotSecret?.secrets?.length;
@@ -411,15 +413,17 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   );
 
   return (
-    <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+    <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
       <FormProvider {...method}>
         <form autoComplete="off">
           {/* breadcrumb row */}
           <div className="relative right-5">
-            <NavHeader 
-              pageName={t('dashboard:title')} 
-              currentEnv={userAvailableEnvs?.filter(envir => envir.slug === envFromTop)[0].name || ''} 
-              isProjectRelated 
+            <NavHeader
+              pageName={t('dashboard:title')}
+              currentEnv={
+                userAvailableEnvs?.filter((envir) => envir.slug === envFromTop)[0].name || ''
+              }
+              isProjectRelated
               userAvailableEnvs={userAvailableEnvs}
               onEnvChange={onEnvChange}
             />
@@ -445,7 +449,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                     setSnaphotId(null);
                     reset({ ...secrets, isSnapshotMode: false });
                   }}
-                  className='h-10'
+                  className="h-10"
                 >
                   Go back
                 </Button>
@@ -456,7 +460,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                 leftIcon={<FontAwesomeIcon icon={faCodeCommit} />}
                 isLoading={isLoadingSnapshotCount}
                 isDisabled={!canDoRollback}
-                className='h-10'
+                className="h-10"
               >
                 {snapshotCount} Commits
               </Button>
@@ -465,7 +469,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                 isLoading={isSubmitting}
                 leftIcon={<FontAwesomeIcon icon={isRollbackMode ? faClockRotateLeft : faCheck} />}
                 onClick={handleSubmit(onSaveSecret)}
-                className='h-10'
+                className="h-10"
               >
                 {isRollbackMode ? 'Rollback' : 'Save Changes'}
               </Button>
@@ -475,7 +479,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
           <div className="mt-4 flex items-center space-x-2">
             <div className="flex-grow">
               <Input
-                className="bg-mineshaft-600 h-[2.3rem] placeholder-mineshaft-50"
+                className="h-[2.3rem] bg-mineshaft-600 placeholder-mineshaft-50"
                 placeholder="Search keys..."
                 value={searchFilter}
                 onChange={(e) => setSearchFilter(e.target.value)}
@@ -490,12 +494,15 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                       <FontAwesomeIcon icon={faDownload} />
                     </IconButton>
                   </PopoverTrigger>
-                  <PopoverContent className="w-auto bg-mineshaft-800 border border-mineshaft-600 p-1" hideCloseBtn>
+                  <PopoverContent
+                    className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-1"
+                    hideCloseBtn
+                  >
                     <div className="flex flex-col space-y-2">
                       <Button
                         onClick={() => downloadSecret(getValues('secrets'), selectedEnv?.slug)}
                         variant="star"
-                        className="bg-bunker-700 h-8"
+                        className="h-8 bg-bunker-700"
                       >
                         Download as .env
                       </Button>
@@ -514,26 +521,38 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                   </IconButton>
                 </Tooltip>
               </div>
-              {!isReadOnly && !isRollbackMode && <Button
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
-                isDisabled={isReadOnly || isRollbackMode}
-                variant="star"
-                className="h-10"
-              >
-                Add Secret
-              </Button>}
+              {!isReadOnly && !isRollbackMode && (
+                <Button
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  onClick={() => {
+                    if (secretContainer.current) {
+                      secretContainer.current.scroll({
+                        top: 0,
+                        behavior: 'smooth'
+                      });
+                    }
+                    prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false });
+                  }}
+                  isDisabled={isReadOnly || isRollbackMode}
+                  variant="star"
+                  className="h-10"
+                >
+                  Add Secret
+                </Button>
+              )}
             </div>
           </div>
-          <div className={`${isSecretEmpty ? "flex flex-col items-center justify-center" : ""} mt-4 h-[calc(100vh-270px)] overflow-y-scroll overflow-x-hidden no-scrollbar no-scrollbar::-webkit-scrollbar`}>
+          <div
+            className={`${
+              isSecretEmpty ? 'flex flex-col items-center justify-center' : ''
+            } no-scrollbar::-webkit-scrollbar mt-4 h-[calc(100vh-270px)] overflow-x-hidden overflow-y-scroll no-scrollbar`}
+            ref={secretContainer}
+          >
             {!isSecretEmpty && (
               <TableContainer>
                 <table className="secret-table relative">
-                  <SecretTableHeader
-                    sortDir={sortDir}
-                    onSort={onSortSecrets}
-                  />
-                  <tbody className="overflow-y-auto max-h-screen">
+                  <SecretTableHeader sortDir={sortDir} onSort={onSortSecrets} />
+                  <tbody className="max-h-screen overflow-y-auto">
                     {fields.map(({ id, _id }, index) => (
                       <SecretInputRow
                         key={id}
@@ -554,11 +573,11 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                         <td colSpan={3} className="hover:bg-mineshaft-700">
                           <button
                             type="button"
-                            className="w-[calc(100vw-400px)] h-8 ml-12 font-normal text-bunker-300 flex justify-start items-center"
+                            className="ml-12 flex h-8 items-center justify-start font-normal text-bunker-300"
                             onClick={onAppendSecret}
                           >
                             <FontAwesomeIcon icon={faPlus} />
-                            <span className="w-20 ml-2">Add Secret</span>
+                            <span className="ml-2 w-20">Add Secret</span>
                           </button>
                         </td>
                       </tr>

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import crypto from 'crypto';
 
 import * as yup from 'yup';
@@ -6,7 +7,7 @@ import {
   decryptAssymmetric,
   encryptSymmetric
 } from '@app/components/utilities/cryptography/crypto';
-import { BatchSecretDTO } from '@app/hooks/api/secrets/types';
+import { BatchSecretDTO, DecryptedSecret } from '@app/hooks/api/secrets/types';
 
 export enum SecretActionType {
   Created = 'created',
@@ -147,10 +148,18 @@ const encryptASecret = (randomBytes: string, key: string, value?: string, commen
   };
 };
 
+const deepCompareSecrets = (lhs: DecryptedSecret, rhs: any) =>
+  lhs.key === rhs.key &&
+  lhs.value === rhs.value &&
+  lhs.comment === rhs.comment &&
+  lhs?.valueOverride === rhs?.valueOverride &&
+  JSON.stringify(lhs.tags) === JSON.stringify(rhs.tags);
+
 export const transformSecretsToBatchSecretReq = (
   deletedSecretIds: string[],
   latestFileKey: any,
-  secrets: FormData['secrets']
+  secrets: FormData['secrets'],
+  intialValues: DecryptedSecret[] = []
 ) => {
   // deleted secrets
   const secretsToBeDeleted: BatchSecretDTO['requests'] = deletedSecretIds.map((id) => ({
@@ -171,61 +180,80 @@ export const transformSecretsToBatchSecretReq = (
       })
     : crypto.randomBytes(16).toString('hex');
 
-  secrets?.forEach(
-    ({ _id, idOverride, value, valueOverride, overrideAction, tags = [], comment, key }) => {
-      if (!idOverride && overrideAction === SecretActionType.Created) {
-        secretsToBeCreated.push({
-          method: 'POST',
-          secret: {
-            type: 'personal',
-            tags,
-            ...encryptASecret(randomBytes, key, valueOverride, comment)
-          }
-        });
-      }
-      // to be created ones as they don't have server generated id
-      if (!_id) {
-        secretsToBeCreated.push({
-          method: 'POST',
-          secret: {
-            type: 'shared',
-            tags,
-            ...encryptASecret(randomBytes, key, value, comment)
-          }
-        });
-        return; // exit as updated and delete case won't happen when created
-      }
-      // has an id means this is updated one
-      if (_id) {
+  secrets?.forEach((secret) => {
+    const {
+      _id,
+      idOverride,
+      value,
+      valueOverride,
+      overrideAction,
+      tags = [],
+      comment,
+      key
+    } = secret;
+    if (!idOverride && overrideAction === SecretActionType.Created) {
+      secretsToBeCreated.push({
+        method: 'POST',
+        secret: {
+          type: 'personal',
+          tags,
+          secretName: key,
+          ...encryptASecret(randomBytes, key, valueOverride, comment)
+        }
+      });
+    }
+    // to be created ones as they don't have server generated id
+    if (!_id) {
+      secretsToBeCreated.push({
+        method: 'POST',
+        secret: {
+          type: 'shared',
+          tags,
+          secretName: key,
+          ...encryptASecret(randomBytes, key, value, comment)
+        }
+      });
+      return; // exit as updated and delete case won't happen when created
+    }
+    // has an id means this is updated one
+    if (_id) {
+      // check value has changed or not
+      const initialSecretValue = intialValues?.find(({ _id: secId }) => secId === _id)!;
+      if (!deepCompareSecrets(initialSecretValue, secret)) {
         secretsToBeUpdated.push({
           method: 'PATCH',
           secret: {
             _id,
             type: 'shared',
             tags,
+            secretName: key,
             ...encryptASecret(randomBytes, key, value, comment)
           }
         });
       }
-      if (idOverride) {
-        // if action is deleted meaning override has been removed but id is kept to collect at this point
-        if (overrideAction === SecretActionType.Deleted) {
-          secretsToBeDeleted.push({ method: 'DELETE', secret: { _id: idOverride } });
-        } else {
-          // if not deleted action then as id is there its an updated
+    }
+    if (idOverride) {
+      // if action is deleted meaning override has been removed but id is kept to collect at this point
+      if (overrideAction === SecretActionType.Deleted) {
+        secretsToBeDeleted.push({ method: 'DELETE', secret: { _id: idOverride } });
+      } else {
+        // if not deleted action then as id is there its an updated
+        const initialSecretValue = intialValues?.find(({ _id: secId }) => secId === _id)!;
+        if (!deepCompareSecrets(initialSecretValue, secret)) {
           secretsToBeUpdated.push({
             method: 'PATCH',
             secret: {
               _id: idOverride,
               type: 'personal',
               tags,
+              secretName: key,
               ...encryptASecret(randomBytes, key, valueOverride, comment)
             }
           });
         }
       }
     }
-  );
+  });
 
   return secretsToBeCreated.concat(secretsToBeUpdated, secretsToBeDeleted);
 };

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

@@ -1,12 +1,8 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { SyntheticEvent, useRef, useState } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useCallback, useState } from 'react';
 import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import guidGenerator from '@app/components/utilities/randomId';
-
-import { FormData } from '../../DashboardPage.utils';
+import { twMerge } from 'tailwind-merge';
 
 type Props = {
   index: number;
@@ -19,84 +15,97 @@ type Props = {
 
 const REGEX = /([$]{.*?})/g;
 
-const DashboardInput = ({ isOverridden, isSecretValueHidden, isReadOnly, secret, index }: { isOverridden: boolean, isSecretValueHidden: boolean, isReadOnly?: boolean, secret: any, index: number } ): JSX.Element => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
-    if (ref.current === null) return;
-
-    ref.current.scrollTop = e.currentTarget.scrollTop;
-    ref.current.scrollLeft = e.currentTarget.scrollLeft;
-  };
-
-  return <td key={`row-${secret?.key || ''}--`} className={`flex cursor-default flex-row w-full justify-center h-10 items-center ${!(secret?.value || secret?.value === '') ? "bg-red-400/10" : "bg-mineshaft-900/30"}`}>
-    <div className="group relative whitespace-pre	flex flex-col justify-center w-full cursor-default">
-      <input
-        // {...register(`secrets.${index}.valueOverride`)}
-        defaultValue={(isOverridden ? secret.valueOverride : secret?.value || '')}
-        onScroll={syncScroll}
-        readOnly={isReadOnly}
-        className={`${
-          isSecretValueHidden
-            ? 'text-transparent focus:text-transparent active:text-transparent'
-            : ''
-        } z-10 peer cursor-default font-mono ph-no-capture bg-transparent caret-transparent text-transparent text-sm px-2 py-2 w-full outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
-        spellCheck="false"
-      />
-      <div
-        ref={ref}
-        className={`${
-          isSecretValueHidden && !isOverridden && secret?.value
-            ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
-            : ''
-        } ${!secret?.value && "text-bunker-400 justify-center"}
-        absolute cursor-default flex flex-row whitespace-pre font-mono z-0 ${isSecretValueHidden && secret?.value ? '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`}
-      >
-        {(secret?.value || secret?.value === '') && (isOverridden ? secret.valueOverride : secret?.value)?.split('').length === 0 && <span className='text-bunker-400/80 font-sans w-full'>EMPTY</span>}
-        {(secret?.value || secret?.value === '') && (isOverridden ? secret.valueOverride : secret?.value)?.split(REGEX).map((word: string) => {
-          if (word.match(REGEX) !== null) {
-            return (
-              <span className="ph-no-capture text-yellow" key={word}>
-                {word.slice(0, 2)}
-                <span className="ph-no-capture text-yellow-200/80">
-                  {word.slice(2, word.length - 1)}
-                </span>
-                {word.slice(word.length - 1, word.length) === '}' ? (
-                  <span className="ph-no-capture text-yellow">
-                    {word.slice(word.length - 1, word.length)}
-                  </span>
-                ) : (
-                  <span className="ph-no-capture text-yellow-400">
-                    {word.slice(word.length - 1, word.length)}
-                  </span>
-                )}
-              </span>
-            );
-          }
-          return (
-            <span key={`${word}_${index + 1}`} className="ph-no-capture">
-              {word}
+const DashboardInput = ({
+  isOverridden,
+  isSecretValueHidden,
+  secret,
+  isReadOnly = true
+}: {
+  isOverridden: boolean;
+  isSecretValueHidden: boolean;
+  isReadOnly?: boolean;
+  secret?: any;
+}): JSX.Element => {
+  const syntaxHighlight = useCallback((val: string) => {
+    if (val === undefined)
+      return (
+        <span className="cursor-default font-sans text-xs italic text-red-500/80">missing</span>
+      );
+    if (val?.length === 0)
+      return <span className="w-full font-sans text-bunker-400/80">EMPTY</span>;
+    return val?.split(REGEX).map((word, index) =>
+      word.match(REGEX) !== null ? (
+        <span className="ph-no-capture text-yellow" key={`${val}-${index + 1}`}>
+          {word.slice(0, 2)}
+          <span className="ph-no-capture text-yellow-200/80">{word.slice(2, word.length - 1)}</span>
+          {word.slice(word.length - 1, word.length) === '}' ? (
+            <span className="ph-no-capture text-yellow">
+              {word.slice(word.length - 1, word.length)}
             </span>
-          );
-        })}
-        {!(secret?.value || secret?.value === '') && <span className='text-red-500/80 cursor-default font-sans text-xs italic'>missing</span>}
-      </div>
-      {(isSecretValueHidden && secret?.value) && (
-        <div className='absolute flex flex-row justify-between items-center z-0 peer pr-2 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">
-            {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').map(() => (
-              <FontAwesomeIcon
-                key={guidGenerator()}
-                className="text-xxs mr-0.5"
-                icon={faCircle}
-              />
-            ))}
-            {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').length === 0 && <span className='text-bunker-400/80 text-sm'>EMPTY</span>}
-          </div>
+          ) : (
+            <span className="ph-no-capture text-yellow-400">
+              {word.slice(word.length - 1, word.length)}
+            </span>
+          )}
+        </span>
+      ) : (
+        <span key={word} className="ph-no-capture">
+          {word}
+        </span>
+      )
+    );
+  }, []);
+
+  return (
+    <td
+      key={`row-${secret?.key || ''}--`}
+      className={`flex h-10 w-full cursor-default flex-row items-center justify-center ${
+        !(secret?.value || secret?.value === '') ? 'bg-red-800/10' : 'bg-mineshaft-900/30'
+      }`}
+    >
+      <div className="group relative flex	w-full cursor-default flex-col justify-center whitespace-pre">
+        <input
+          value={isOverridden ? secret.valueOverride : secret?.value || ''}
+          readOnly={isReadOnly}
+          className={twMerge(
+            'ph-no-capture no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full cursor-default bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-transparent outline-none no-scrollbar',
+            isSecretValueHidden && 'text-transparent focus:text-transparent active:text-transparent'
+          )}
+          spellCheck="false"
+        />
+        <div
+          className={twMerge(
+            'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full cursor-default flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible',
+            isSecretValueHidden && secret?.value ? 'invisible' : 'visible',
+            isSecretValueHidden &&
+              secret?.value &&
+              'duration-50 text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400',
+            !secret?.value && 'justify-center text-bunker-400'
+          )}
+        >
+          {syntaxHighlight(secret?.value)}
         </div>
-      )}
-    </div>
-  </td>
-}
+        {isSecretValueHidden && secret?.value && (
+          <div className="duration-50 peer absolute z-0 flex h-10 w-full flex-row items-center justify-between text-clip pr-2 text-bunker-400 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden">
+            <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
+              {(isOverridden ? secret.valueOverride : secret?.value || '')
+                ?.split('')
+                .map((_a: string, index: number) => (
+                  <FontAwesomeIcon
+                    key={`${secret?.value}_${index + 1}`}
+                    className="mr-0.5 text-xxs"
+                    icon={faCircle}
+                  />
+                ))}
+              {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').length ===
+                0 && <span className="text-sm text-bunker-400/80">EMPTY</span>}
+            </div>
+          </div>
+        )}
+      </div>
+    </td>
+  );
+};
 
 export const EnvComparisonRow = ({
   index,
@@ -105,27 +114,39 @@ export const EnvComparisonRow = ({
   isReadOnly,
   userAvailableEnvs
 }: Props): JSX.Element => {
-  const { 
-    // register, setValue, 
-    control } = useFormContext<FormData>();
-
-  // to get details on a secret
-  const secret = useWatch({ name: `secrets.${index}`, control });
-
   const [areValuesHiddenThisRow, setAreValuesHiddenThisRow] = useState(true);
 
+  const getSecretByEnv = useCallback(
+    (secEnv: string, secs?: any[]) => secs?.find(({ env }) => env === secEnv),
+    []
+  );
+
   return (
-    <tr className="group min-w-full flex flex-row items-center hover:bg-bunker-700">
-      <td className="w-10 h-10 px-4 flex items-center justify-center border-none"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
-      <td className="flex flex-row justify-between items-center h-full min-w-[200px] lg:min-w-[220px] xl:min-w-[250px]">
-        <div className="flex truncate flex-row items-center h-8 cursor-default">{secrets![0].key || ''}</div>
-        <button type="button" className='mr-1 ml-2 text-bunker-400 hover:text-bunker-300 invisible group-hover:visible' onClick={() => setAreValuesHiddenThisRow(!areValuesHiddenThisRow)}>
+    <tr className="group flex min-w-full flex-row items-center hover:bg-mineshaft-800">
+      <td className="flex h-10 w-10 items-center justify-center border-none px-4">
+        <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
+      </td>
+      <td className="flex h-full min-w-[200px] flex-row items-center justify-between lg:min-w-[220px] xl:min-w-[250px]">
+        <div className="flex h-8 cursor-default flex-row items-center truncate">
+          {secrets![0].key || ''}
+        </div>
+        <button
+          type="button"
+          className="invisible mr-1 ml-2 text-bunker-400 hover:text-bunker-300 group-hover:visible"
+          onClick={() => setAreValuesHiddenThisRow(!areValuesHiddenThisRow)}
+        >
           <FontAwesomeIcon icon={areValuesHiddenThisRow ? faEye : faEyeSlash} />
         </button>
       </td>
-      {userAvailableEnvs?.map(env => {
-        return <DashboardInput key={`row-${secret?.key || ''}-${env.slug}`} isOverridden={false} isSecretValueHidden={areValuesHiddenThisRow && isSecretValueHidden} isReadOnly={isReadOnly} secret={secrets?.filter(sec => sec.env === env.slug)[0]} index={index} />
-      })}
+      {userAvailableEnvs?.map(({ slug }) => (
+        <DashboardInput
+          isReadOnly={isReadOnly}
+          key={`row-${secrets![0].key || ''}-${slug}`}
+          isOverridden={false}
+          secret={getSecretByEnv(slug, secrets)}
+          isSecretValueHidden={areValuesHiddenThisRow && isSecretValueHidden}
+        />
+      ))}
     </tr>
   );
 };

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

@@ -1,4 +1,4 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { faCircle, faCircleDot, faShuffle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -44,14 +44,14 @@ export const SecretDetailDrawer = ({
   const [canRevealSecVal, setCanRevealSecVal] = useToggle();
   const [canRevealSecOverride, setCanRevealSecOverride] = useToggle();
 
-  const { register, setValue, watch } = useFormContext<FormData>();
-  const secret = watch(`secrets.${index}`);
+  const { register, setValue, control, getValues } = useFormContext<FormData>();
 
+  const overrideAction = useWatch({ control, name: `secrets.${index}.overrideAction` });
   const isOverridden =
-    secret?.overrideAction === SecretActionType.Created ||
-    secret?.overrideAction === SecretActionType.Modified;
+    overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
 
   const onSecretOverride = () => {
+    const secret = getValues(`secrets.${index}`);
     if (isOverridden) {
       // when user created a new override but then removes
       if (SecretActionType.Created) {
@@ -67,21 +67,17 @@ export const SecretDetailDrawer = ({
     }
   };
 
-  if (!secret) {
-    return <div />;
-  }
-
   return (
     <Drawer onOpenChange={onOpenChange} isOpen={isDrawerOpen}>
       <DrawerContent
-        className="border-l border-mineshaft-500 bg-bunker dark"
+        className="dark border-l border-mineshaft-500 bg-bunker"
         title="Secret"
         footerContent={
           <div className="flex flex-col space-y-2 pt-4 shadow-md">
             <div>
               <Button
                 variant="star"
-                onClick={() => onEnvCompare(secret?.key)}
+                onClick={() => onEnvCompare(getValues(`secrets.${index}.key`))}
                 isFullWidth
                 isDisabled={isReadOnly}
               >
@@ -95,7 +91,10 @@ export const SecretDetailDrawer = ({
               <Button
                 colorSchema="danger"
                 isDisabled={isReadOnly}
-                onClick={() => onSecretDelete(index, secret._id, secret.idOverride)}
+                onClick={() => {
+                  const secret = getValues(`secrets.${index}`);
+                  onSecretDelete(index, secret._id, secret.idOverride);
+                }}
               >
                 Delete
               </Button>
@@ -173,9 +172,9 @@ export const SecretDetailDrawer = ({
               </PopoverContent>
             </Popover>
           </FormControl>
-          <div className="mb-4 text-sm text-bunker-300 dark">
+          <div className="dark mb-4 text-sm text-bunker-300">
             <div className="mb-2">Version History</div>
-            <div className="flex h-48 flex-col space-y-2 border border-mineshaft-600 overflow-y-auto overflow-x-hidden rounded-md bg-bunker-800 p-2 dark:[color-scheme:dark]">
+            <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
               {secretVersion?.map(({ createdAt, value, id }, i) => (
                 <div key={id} className="flex flex-col space-y-1">
                   <div className="flex items-center space-x-2">
@@ -202,7 +201,12 @@ export const SecretDetailDrawer = ({
             </div>
           </div>
           <FormControl label="Comments & Notes">
-            <TextArea className="border border-mineshaft-600 text-sm" isDisabled={isReadOnly} {...register(`secrets.${index}.comment`)} rows={5} />
+            <TextArea
+              className="border border-mineshaft-600 text-sm"
+              isDisabled={isReadOnly}
+              {...register(`secrets.${index}.comment`)}
+              rows={5}
+            />
           </FormControl>
         </div>
       </DrawerContent>

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

@@ -0,0 +1,107 @@
+import { useCallback } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { twMerge } from 'tailwind-merge';
+
+import { FormData } from '../../DashboardPage.utils';
+
+type Props = {
+  isReadOnly?: boolean;
+  isSecretValueHidden?: boolean;
+  isOverridden?: boolean;
+  index: number;
+};
+
+const REGEX = /([$]{.*?})/g;
+
+export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridden }: Props) => {
+  const { register, control } = useFormContext<FormData>();
+
+  const secretValue = useWatch({ control, name: `secrets.${index}.value` });
+  const secretValueOverride = useWatch({ control, name: `secrets.${index}.valueOverride` });
+  const value = isOverridden ? secretValueOverride : secretValue;
+
+  const syntaxHighlight = useCallback((val: string) => {
+    if (val?.length === 0) return <span className="font-sans text-bunker-400/80">EMPTY</span>;
+    return val?.split(REGEX).map((word) =>
+      word.match(REGEX) !== null ? (
+        <span className="ph-no-capture text-yellow" key={`${val}-${index + 1}`}>
+          {word.slice(0, 2)}
+          <span className="ph-no-capture text-yellow-200/80">{word.slice(2, word.length - 1)}</span>
+          {word.slice(word.length - 1, word.length) === '}' ? (
+            <span className="ph-no-capture text-yellow">
+              {word.slice(word.length - 1, word.length)}
+            </span>
+          ) : (
+            <span className="ph-no-capture text-yellow-400">
+              {word.slice(word.length - 1, word.length)}
+            </span>
+          )}
+        </span>
+      ) : (
+        <span key={`${word}_${index + 1}`} className="ph-no-capture">
+          {word}
+        </span>
+      )
+    );
+  }, []);
+
+  return (
+    <div className="group relative flex	w-full flex-col justify-center whitespace-pre px-1.5">
+      {isOverridden ? (
+        <input
+          {...register(`secrets.${index}.valueOverride`)}
+          readOnly={isReadOnly}
+          className={twMerge(
+            'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar',
+            !isSecretValueHidden &&
+              'text-transparent focus:text-transparent active:text-transparent'
+          )}
+          spellCheck="false"
+        />
+      ) : (
+        <input
+          {...register(`secrets.${index}.value`)}
+          readOnly={isReadOnly}
+          className={twMerge(
+            'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar',
+            !isSecretValueHidden &&
+              'text-transparent focus:text-transparent active:text-transparent'
+          )}
+          spellCheck="false"
+        />
+      )}
+      <div
+        className={twMerge(
+          'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible',
+          isSecretValueHidden ? 'invisible' : 'visible',
+          isOverridden
+            ? 'text-primary-300'
+            : 'duration-50 text-gray-400 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400'
+        )}
+      >
+        {syntaxHighlight(value || '')}
+      </div>
+      <div
+        className={twMerge(
+          'duration-50 peer absolute z-0 flex h-10 w-full flex-row items-center justify-between text-clip pr-2 text-bunker-400 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden',
+          !isSecretValueHidden ? 'invisible' : 'visible'
+        )}
+      >
+        <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
+          {value?.split('').map((val, i) => (
+            <FontAwesomeIcon
+              key={`${value}_${val}_${i + 1}`}
+              className="mr-0.5 text-xxs"
+              icon={faCircle}
+            />
+          ))}
+          {value?.split('').length === 0 && (
+            <span className="text-sm text-bunker-400/80">EMPTY</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,8 +1,7 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { SyntheticEvent, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import {
-  faCircle,
   faCodeBranch,
   faComment,
   faEllipsis,
@@ -15,7 +14,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { cx } from 'cva';
 import { twMerge } from 'tailwind-merge';
 
-import guidGenerator from '@app/components/utilities/randomId';
 import {
   Button,
   Checkbox,
@@ -32,10 +30,10 @@ import {
   TextArea,
   Tooltip
 } from '@app/components/v2';
-import { useToggle } from '@app/hooks';
 import { WsTag } from '@app/hooks/api/types';
 
 import { FormData, SecretActionType } from '../../DashboardPage.utils';
+import { MaskedInput } from './MaskedInput';
 
 type Props = {
   index: number;
@@ -64,361 +62,327 @@ const tagColors = [
   { bg: 'bg-[#C40B13]/40', text: 'text-[#FFDEDE]/70' },
   { bg: 'bg-[#332FD0]/40', text: 'text-[#DFF6FF]/70' }
 ];
-const REGEX = /([$]{.*?})/g;
 
-export const SecretInputRow = ({
-  index,
-  isSecretValueHidden,
-  onRowExpand,
-  isReadOnly,
-  isRollbackMode,
-  isAddOnly,
-  wsTags,
-  onCreateTagOpen,
-  onSecretDelete,
-  searchTerm
-}: Props): JSX.Element => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
-    if (ref.current === null) return;
+export const SecretInputRow = memo(
+  ({
+    index,
+    isSecretValueHidden,
+    onRowExpand,
+    isReadOnly,
+    isRollbackMode,
+    isAddOnly,
+    wsTags,
+    onCreateTagOpen,
+    onSecretDelete,
+    searchTerm
+  }: Props): JSX.Element => {
+    const isKeySubDisabled = useRef<boolean>(false);
+    const { register, setValue, control } = useFormContext<FormData>();
+    // comment management in a row
+    const {
+      fields: secretTags,
+      remove,
+      append
+    } = useFieldArray({ control, name: `secrets.${index}.tags` });
 
-    ref.current.scrollTop = e.currentTarget.scrollTop;
-    ref.current.scrollLeft = e.currentTarget.scrollLeft;
-  };
-  const { register, setValue, control } = useFormContext<FormData>();
-  const [canRevealSecret] = useToggle();
-  // comment management in a row
-  const {
-    fields: secretTags,
-    remove,
-    append
-  } = useFieldArray({ control, name: `secrets.${index}.tags` });
+    // to get details on a secret
+    const overrideAction = useWatch({ control, name: `secrets.${index}.overrideAction` });
+    const idOverride = useWatch({ control, name: `secrets.${index}.idOverride` });
+    const secComment = useWatch({ control, name: `secrets.${index}.comment` });
+    const hasComment = Boolean(secComment);
+    const secKey = useWatch({
+      control,
+      name: `secrets.${index}.key`,
+      disabled: isKeySubDisabled.current
+    });
+    const secId = useWatch({ control, name: `secrets.${index}._id` });
 
-  // to get details on a secret
-  const secret = useWatch({ name: `secrets.${index}`, control });
-  const hasComment = Boolean(secret.comment);
-  const tags = secret.tags || [];
-  const selectedTagIds = tags.reduce<Record<string, boolean>>(
-    (prev, curr) => ({ ...prev, [curr.slug]: true }),
-    {}
-  );
+    const tags = useWatch({ control, name: `secrets.${index}.tags`, defaultValue: [] }) || [];
+    const selectedTagIds = tags.reduce<Record<string, boolean>>(
+      (prev, curr) => ({ ...prev, [curr.slug]: true }),
+      {}
+    );
 
-  // when secret is override by personal values
-  const isOverridden =
-    secret.overrideAction === SecretActionType.Created ||
-    secret.overrideAction === SecretActionType.Modified;
+    // when secret is override by personal values
+    const isOverridden =
+      overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
 
-  const onSecretOverride = () => {
-    if (isOverridden) {
-      // when user created a new override but then removes
-      if (secret?.overrideAction === SecretActionType.Created)
+    const onSecretOverride = () => {
+      if (isOverridden) {
+        // when user created a new override but then removes
+        if (overrideAction === SecretActionType.Created)
+          setValue(`secrets.${index}.valueOverride`, '');
+        setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, {
+          shouldDirty: true
+        });
+      } else {
         setValue(`secrets.${index}.valueOverride`, '');
-      setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, { shouldDirty: true });
-    } else {
-      setValue(`secrets.${index}.valueOverride`, '');
-      setValue(
-        `secrets.${index}.overrideAction`,
-        secret?.idOverride ? SecretActionType.Modified : SecretActionType.Created,
-        { shouldDirty: true }
-      );
+        setValue(
+          `secrets.${index}.overrideAction`,
+          idOverride ? SecretActionType.Modified : SecretActionType.Created,
+          { shouldDirty: true }
+        );
+      }
+    };
+
+    const onSelectTag = (selectedTag: WsTag) => {
+      const shouldAppend = !selectedTagIds[selectedTag.slug];
+      if (shouldAppend) {
+        append(selectedTag);
+      } else {
+        const pos = tags.findIndex(({ slug }) => selectedTag.slug === slug);
+        remove(pos);
+      }
+    };
+
+    const isCreatedSecret = !secId;
+    const shouldBeBlockedInAddOnly = !isCreatedSecret && isAddOnly;
+
+    // Why this instead of filter in parent
+    // Because rhf field.map has default values so basically
+    // keys are not updated there and index needs to kept so that we can monitor
+    // values individually here
+    if (
+      !(
+        secKey?.toUpperCase().includes(searchTerm?.toUpperCase()) ||
+        tags
+          ?.map((tag) => tag.name)
+          .join(' ')
+          ?.toUpperCase()
+          .includes(searchTerm?.toUpperCase()) ||
+        secComment?.toUpperCase().includes(searchTerm?.toUpperCase())
+      )
+    ) {
+      return <></>;
     }
-  };
 
-  const onSelectTag = (selectedTag: WsTag) => {
-    const shouldAppend = !selectedTagIds[selectedTag.slug];
-    if (shouldAppend) {
-      append(selectedTag);
-    } else {
-      const pos = tags.findIndex(({ slug }) => selectedTag.slug === slug);
-      remove(pos);
-    }
-  };
-
-  const isCreatedSecret = !secret?._id;
-  const shouldBeBlockedInAddOnly = !isCreatedSecret && isAddOnly;
-
-  // Why this instead of filter in parent
-  // Because rhf field.map has default values so basically
-  // keys are not updated there and index needs to kept so that we can monitor
-  // values individually here
-  if (
-    !(
-      secret.key?.toUpperCase().includes(searchTerm?.toUpperCase()) ||
-      tags
-        ?.map((tag) => tag.name)
-        .join(' ')
-        ?.toUpperCase()
-        .includes(searchTerm?.toUpperCase()) ||
-      secret.comment?.toUpperCase().includes(searchTerm?.toUpperCase())
-    )
-  ) {
-    return <></>;
-  }
-
-  return (
-    <tr className="group min-w-full flex flex-row items-center" key={index}>
-      <td className="w-10 h-10 px-4 flex items-center justify-center"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
-      <Controller
-        control={control}
-        defaultValue=""
-        name={`secrets.${index}.key`}
-        render={({ fieldState: { error }, field }) => (
-          <HoverCard openDelay={0} open={error?.message ? undefined : false}>
-            <HoverCardTrigger asChild>
-              <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
-                <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-end w-full">
-                  <Input
-                    autoComplete="off"
-                    variant="plain"
-                    isDisabled={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
-                    className="w-full focus:text-bunker-100 focus:ring-transparent"
-                    {...field}
-                  />
-                  <div className="w-max flex flex-row items-center justify-end">
-                    <Tooltip content="Comment">
-                      <div className={`${hasComment ? "w-5" : "w-0"} overflow-hidden group-hover:w-5 mt-0.5`}>
-                        <Popover>
-                          <PopoverTrigger asChild>
-                            <IconButton 
+    return (
+      <tr className="group flex flex-row items-center" key={index}>
+        <td className="flex h-10 w-10 items-center justify-center px-4">
+          <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
+        </td>
+        <Controller
+          control={control}
+          defaultValue=""
+          name={`secrets.${index}.key`}
+          render={({ fieldState: { error }, field }) => (
+            <HoverCard openDelay={0} open={error?.message ? undefined : false}>
+              <HoverCardTrigger asChild>
+                <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
+                  <div className="relative flex w-full min-w-[220px] items-center justify-end lg:min-w-[240px] xl:min-w-[280px]">
+                    <Input
+                      autoComplete="off"
+                      onFocus={() => {
+                        isKeySubDisabled.current = true;
+                      }}
+                      variant="plain"
+                      isDisabled={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
+                      className="w-full focus:text-bunker-100 focus:ring-transparent"
+                      {...field}
+                      onBlur={() => {
+                        isKeySubDisabled.current = false;
+                        field.onBlur();
+                      }}
+                    />
+                    <div className="flex w-max flex-row items-center justify-end">
+                      <Tooltip content="Comment">
+                        <div
+                          className={`${
+                            hasComment ? 'w-5' : 'w-0'
+                          } mt-0.5 overflow-hidden group-hover:w-5`}
+                        >
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <IconButton
+                                className={twMerge(
+                                  'w-0 overflow-hidden p-0 group-hover:w-5',
+                                  hasComment && 'w-5 text-primary'
+                                )}
+                                variant="plain"
+                                size="md"
+                                ariaLabel="add-tag"
+                              >
+                                <FontAwesomeIcon icon={faComment} />
+                              </IconButton>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl">
+                              <FormControl label="Comment" className="mb-0">
+                                <TextArea
+                                  isDisabled={
+                                    isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly
+                                  }
+                                  className="border border-mineshaft-600 text-sm"
+                                  {...register(`secrets.${index}.comment`)}
+                                  rows={8}
+                                  cols={30}
+                                />
+                              </FormControl>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                      </Tooltip>
+                      {!isAddOnly && (
+                        <div>
+                          <Tooltip content="Override with a personal value">
+                            <IconButton
+                              variant="plain"
                               className={twMerge(
-                                'w-0 overflow-hidden p-0 group-hover:w-5',
-                                hasComment && 'w-5 text-primary'
+                                'mt-0.5 w-0 overflow-hidden p-0 group-hover:ml-1 group-hover:w-6',
+                                isOverridden && 'ml-1 w-6 text-primary'
                               )}
-                              variant="plain" 
-                              size="md" 
-                              ariaLabel="add-tag"
+                              onClick={onSecretOverride}
+                              size="md"
+                              isDisabled={isRollbackMode || isReadOnly}
+                              ariaLabel="info"
                             >
-                              <FontAwesomeIcon icon={faComment} />
+                              <div className="flex items-center space-x-1">
+                                <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
+                              </div>
                             </IconButton>
-                          </PopoverTrigger>
-                          <PopoverContent className="w-auto bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl p-2">
-                            <FormControl label="Comment" className="mb-0">
-                              <TextArea
-                                isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
-                                className="border border-mineshaft-600 text-sm"
-                                {...register(`secrets.${index}.comment`)}
-                                rows={8}
-                                cols={30}
-                              />
-                            </FormControl>
-                          </PopoverContent>
-                        </Popover>
-                      </div>
-                    </Tooltip>
-                    {!isAddOnly && (
-                      <div>
-                        <Tooltip content="Override with a personal value">
-                          <IconButton
-                            variant="plain"
-                            className={twMerge(
-                              'w-0 overflow-hidden p-0 group-hover:w-6 group-hover:ml-1 mt-0.5',
-                              isOverridden && 'w-6 text-primary ml-1'
-                            )}
-                            onClick={onSecretOverride}
-                            size="md" 
-                            isDisabled={isRollbackMode || isReadOnly}
-                            ariaLabel="info"
-                          >
-                            <div className="flex items-center space-x-1">
-                              <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
-                            </div>
-                          </IconButton>
-                        </Tooltip>
-                      </div>
-                    )}
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
                   </div>
-                </div>
-              </td>
-            </HoverCardTrigger>
-            <HoverCardContent className="w-auto py-2 pt-2">
-              <div className="flex items-center space-x-2">
-                <div>
-                  <FontAwesomeIcon icon={faInfoCircle} className="text-red" />
-                </div>
-                <div className="text-sm">{error?.message}</div>
-              </div>
-            </HoverCardContent>
-          </HoverCard>
-        )}
-      />
-      <td className="flex flex-row w-full justify-center h-8 items-center">
-        <div className="group relative whitespace-pre	flex flex-col justify-center w-full px-1.5">
-          {isOverridden 
-          ? <input
-            {...register(`secrets.${index}.valueOverride`)}
-            onScroll={syncScroll}
-            readOnly={isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)}
-            className={`${
-              (!canRevealSecret && isSecretValueHidden)
-                ? 'text-transparent focus:text-transparent active:text-transparent'
-                : ''
-            } 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"
-          />
-          : <input
-            {...register(`secrets.${index}.value`)}
-            onScroll={syncScroll}
-            readOnly={isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)}
-            className={`${
-              (!canRevealSecret && isSecretValueHidden)
-                ? 'text-transparent focus:text-transparent active:text-transparent'
-                : ''
-            } 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={`${
-              (!canRevealSecret && isSecretValueHidden) && !isOverridden
-                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
-                : ''
-            } ${isOverridden ? 'text-primary-300' : 'text-gray-400'}
-            absolute flex flex-row whitespace-pre font-mono z-0 ${(!canRevealSecret && isSecretValueHidden) ? '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`}
-          >
-            {(isOverridden ? secret.valueOverride : secret.value)?.split('').length === 0 && <span className='text-bunker-400/80 font-sans'>EMPTY</span>}
-            {(isOverridden ? secret.valueOverride : secret.value)?.split(REGEX).map((word) => {
-              if (word.match(REGEX) !== null) {
-                return (
-                  <span className="ph-no-capture text-yellow" key={guidGenerator()}>
-                    {word.slice(0, 2)}
-                    <span className="ph-no-capture text-yellow-200/80">
-                      {word.slice(2, word.length - 1)}
-                    </span>
-                    {word.slice(word.length - 1, word.length) === '}' ? (
-                      <span className="ph-no-capture text-yellow">
-                        {word.slice(word.length - 1, word.length)}
-                      </span>
-                    ) : (
-                      <span className="ph-no-capture text-yellow-400">
-                        {word.slice(word.length - 1, word.length)}
-                      </span>
-                    )}
-                  </span>
-                );
-              }
-              return (
-                <span key={`${word}_${index + 1}`} className="ph-no-capture">
-                  {word}
-                </span>
-              );
-            })}
-          </div>
-          {(!canRevealSecret && isSecretValueHidden) && (
-            <div className='absolute flex flex-row justify-between items-center z-0 peer pr-2 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">
-                {(isOverridden ? secret.valueOverride : secret.value)?.split('').map(() => (
-                  <FontAwesomeIcon
-                    key={guidGenerator()}
-                    className="text-xxs mr-0.5"
-                    icon={faCircle}
-                  />
-                ))}
-                {(isOverridden ? secret.valueOverride : secret.value)?.split('').length === 0 && <span className='text-bunker-400/80 text-sm'>EMPTY</span>}
-              </div>
-            </div>
-          )}
-        </div>
-      </td>
-      <td className="flex items-center min-w-sm h-10">
-        <div className="flex items-center pl-2">
-          {secretTags.map(({ id, slug }, i) => (
-            <Tag
-              className={cx(
-                tagColors[i % tagColors.length].bg,
-                tagColors[i % tagColors.length].text
-              )}
-              isDisabled={isReadOnly || isAddOnly || isRollbackMode}
-              onClose={() => remove(i)}
-              key={id}
-            >
-              {slug}
-            </Tag>
-          ))}
-          {!(isReadOnly || isAddOnly || isRollbackMode) && (
-            <div className="w-0 overflow-hidden group-hover:w-8">
-              <Popover>
-                <PopoverTrigger asChild>
+                </td>
+              </HoverCardTrigger>
+              <HoverCardContent className="w-auto py-2 pt-2">
+                <div className="flex items-center space-x-2">
                   <div>
-                    <Tooltip content="Add tags">
-                      <IconButton variant="star" size="xs" ariaLabel="add-tag" className="py-[0.42rem]">
-                        <FontAwesomeIcon icon={faTags} />
-                      </IconButton>
-                    </Tooltip>
+                    <FontAwesomeIcon icon={faInfoCircle} className="text-red" />
                   </div>
-                </PopoverTrigger>
-                <PopoverContent
-                  side="left"
-                  className="max-h-96 w-auto min-w-[200px] overflow-y-auto overflow-x-hidden p-2 text-bunker-200 bg-mineshaft-800 border border-mineshaft-600"
-                  hideCloseBtn
-                >
-                  <div className="mb-2 text-sm font-medium text-center text-bunker-200 px-2">Add tags to {secret.key || "this secret"}</div>
-                  <div className="flex flex-col space-y-1">
-                    {wsTags?.map((wsTag) => (
-                      <Button
-                        variant="plain"
-                        size="sm"
-                        className={twMerge(
-                          'justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500',
-                          selectedTagIds?.[wsTag.slug] && 'text-primary'
-                        )}
-                        onClick={() => onSelectTag(wsTag)}
-                        leftIcon={
-                          <Checkbox
-                            className="data-[state=checked]:bg-primary mr-0"
-                            id="autoCapitalization"
-                            isChecked={selectedTagIds?.[wsTag.slug]}
-                            onCheckedChange={() => {}}
-                          >
-                            {}
-                          </Checkbox>
-                        }
-                        key={wsTag._id}
-                      >
-                        {wsTag.slug}
-                      </Button>
-                    ))}
-                    <Button
-                      variant="star"
-                      color="primary"
-                      size="sm"
-                      className="mt-4 justify-start bg-mineshaft-600 h-7 px-1"
-                      onClick={onCreateTagOpen}
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    >
-                      Add new tag
-                    </Button>
-                  </div>
-                </PopoverContent>
-              </Popover>
-            </div>
+                  <div className="text-sm">{error?.message}</div>
+                </div>
+              </HoverCardContent>
+            </HoverCard>
           )}
-        </div>
-        <div className="flex w-0 group-hover:w-14 invisible group-hover:visible duration-0 items-center justify-end space-x-2 overflow-hidden transition-all">
-          {!isAddOnly && (
+        />
+        <td className="flex h-8 w-full flex-grow flex-row items-center justify-center">
+          <MaskedInput
+            isReadOnly={
+              isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
+            }
+            isOverridden={isOverridden}
+            isSecretValueHidden={isSecretValueHidden}
+            index={index}
+          />
+        </td>
+        <td className="min-w-sm flex h-10 items-center">
+          <div className="flex items-center pl-2">
+            {secretTags.map(({ id, slug }, i) => (
+              <Tag
+                className={cx(
+                  tagColors[i % tagColors.length].bg,
+                  tagColors[i % tagColors.length].text
+                )}
+                isDisabled={isReadOnly || isAddOnly || isRollbackMode}
+                onClose={() => remove(i)}
+                key={id}
+              >
+                {slug}
+              </Tag>
+            ))}
+            {!(isReadOnly || isAddOnly || isRollbackMode) && (
+              <div className="w-0 overflow-hidden group-hover:w-8">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <div>
+                      <Tooltip content="Add tags">
+                        <IconButton
+                          variant="star"
+                          size="xs"
+                          ariaLabel="add-tag"
+                          className="py-[0.42rem]"
+                        >
+                          <FontAwesomeIcon icon={faTags} />
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    side="left"
+                    className="max-h-96 w-auto min-w-[200px] overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 p-2 text-bunker-200"
+                    hideCloseBtn
+                  >
+                    <div className="mb-2 px-2 text-center text-sm font-medium text-bunker-200">
+                      Add tags to {secKey || 'this secret'}
+                    </div>
+                    <div className="flex flex-col space-y-1">
+                      {wsTags?.map((wsTag) => (
+                        <Button
+                          variant="plain"
+                          size="sm"
+                          className={twMerge(
+                            'justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500',
+                            selectedTagIds?.[wsTag.slug] && 'text-primary'
+                          )}
+                          onClick={() => onSelectTag(wsTag)}
+                          leftIcon={
+                            <Checkbox
+                              className="mr-0 data-[state=checked]:bg-primary"
+                              id="autoCapitalization"
+                              isChecked={selectedTagIds?.[wsTag.slug]}
+                              onCheckedChange={() => {}}
+                            >
+                              {}
+                            </Checkbox>
+                          }
+                          key={wsTag._id}
+                        >
+                          {wsTag.slug}
+                        </Button>
+                      ))}
+                      <Button
+                        variant="star"
+                        color="primary"
+                        size="sm"
+                        className="mt-4 h-7 justify-start bg-mineshaft-600 px-1"
+                        onClick={onCreateTagOpen}
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                      >
+                        Add new tag
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+          </div>
+          <div className="duration-0 invisible flex w-0 items-center justify-end space-x-2 overflow-hidden transition-all group-hover:visible group-hover:w-14">
+            {!isAddOnly && (
+              <div>
+                <Tooltip content="Settings">
+                  <IconButton
+                    size="lg"
+                    colorSchema="primary"
+                    variant="plain"
+                    onClick={onRowExpand}
+                    ariaLabel="expand"
+                  >
+                    <FontAwesomeIcon icon={faEllipsis} />
+                  </IconButton>
+                </Tooltip>
+              </div>
+            )}
             <div>
-              <Tooltip content="Settings">
-                <IconButton size="lg" colorSchema="primary" variant="plain" onClick={onRowExpand} ariaLabel="expand">
-                  <FontAwesomeIcon icon={faEllipsis} />
+              <Tooltip content="Delete">
+                <IconButton
+                  size="md"
+                  variant="plain"
+                  colorSchema="danger"
+                  ariaLabel="delete"
+                  isDisabled={isReadOnly || isRollbackMode}
+                  onClick={() => onSecretDelete(index, secId, idOverride)}
+                >
+                  <FontAwesomeIcon icon={faXmark} />
                 </IconButton>
               </Tooltip>
             </div>
-          )}
-          <div>
-            <Tooltip content="Delete">
-              <IconButton
-                size="md"
-                variant="plain"
-                colorSchema="danger"
-                ariaLabel="delete"
-                isDisabled={isReadOnly || isRollbackMode}
-                onClick={() => onSecretDelete(index, secret._id, secret?.idOverride)}
-              >
-                <FontAwesomeIcon icon={faXmark} />
-              </IconButton>
-            </Tooltip>
           </div>
-        </div>
-      </td>
-    </tr>
-  );
-};
+        </td>
+      </tr>
+    );
+  }
+);
+
+SecretInputRow.displayName = 'SecretInputRow';

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

@@ -1,4 +1,3 @@
-import { Controller } from 'react-hook-form';
 import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -9,36 +8,29 @@ type Props = {
   onSort: () => void;
 };
 
-export const SecretTableHeader = ({
-  sortDir,
-  onSort
-}: Props): JSX.Element => (
+export const SecretTableHeader = ({ sortDir, onSort }: Props): JSX.Element => (
   <thead>
-    <tr className="absolute flex flex-row sticky top-0">
-      <td className="w-10 px-4 flex items-center justify-center">
-        <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+    <tr className="sticky top-0 flex flex-row">
+      <td className="flex w-10 items-center justify-center px-4">
+        <div className="w-10 text-center text-xs text-transparent">{0}</div>
       </td>
-      <Controller
-        defaultValue=""
-        name="na"
-        render={() => (
-          <td className='flex items-center'>
-            <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
-              <div className="inline-flex items-end text-md font-medium">
-                Key
-                <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
-                  <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
-                </IconButton>
-              </div>
-              <div className="w-max flex flex-row items-center justify-end">
-                <div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
-              </div>
-            </div>
-          </td>
-        )}
-      />
-      <th className="flex flex-row w-full"><div className="text-sm font-medium">Value</div></th>
+      <td className="flex items-center">
+        <div className="relative flex w-full min-w-[220px] items-center justify-start pl-2.5 lg:min-w-[240px] xl:min-w-[280px]">
+          <div className="text-md inline-flex items-end font-medium">
+            Key
+            <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
+              <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
+            </IconButton>
+          </div>
+          <div className="flex w-max flex-row items-center justify-end">
+            <div className="mt-1 w-5 overflow-hidden group-hover:w-5" />
+          </div>
+        </div>
+      </td>
+      <th className="flex w-full flex-row">
+        <div className="text-sm font-medium">Value</div>
+      </th>
     </tr>
-    <tr className='h-0 w-full border border-mineshaft-600'/>
+    <tr className="h-0 w-full border border-mineshaft-600" />
   </thead>
 );

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
 import { faCheck, faCopy, faMagnifyingGlass, faPlus, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons';
@@ -27,7 +27,7 @@ import {
   THead,
   Tr,
   UpgradePlanModal} from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
+import { usePopUp, useToggle } from '@app/hooks';
 import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 import { OrgUser, Workspace } from '@app/hooks/api/types';
 
@@ -70,6 +70,7 @@ export const OrgMembersTable = ({
   const router = useRouter();
   const [searchMemberFilter, setSearchMemberFilter] = useState('');
   const {data: serverDetails } = useFetchServerStatus()
+  const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'addMember',
     'removeMember',
@@ -116,9 +117,17 @@ export const OrgMembersTable = ({
     [members, searchMemberFilter]
   );
 
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isInviteLinkCopied) {
+      timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isInviteLinkCopied]);
+
   const copyTokenToClipboard = () => {
     navigator.clipboard.writeText(completeInviteLink as string);
-    // setIsTokenCopied.on();
+    setInviteLinkCopied.on();
   };
 
   return (
@@ -303,7 +312,7 @@ export const OrgMembersTable = ({
               className="group relative"
               onClick={copyTokenToClipboard}
             >
-              <FontAwesomeIcon icon={false ? faCheck : faCopy} />
+              <FontAwesomeIcon icon={isInviteLinkCopied ? 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">click to copy</span>
             </IconButton>
           </div>
@@ -328,4 +337,4 @@ export const OrgMembersTable = ({
       />
     </div>
   );
-};
+};

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

@@ -37,7 +37,7 @@ export const CopyProjectIDSection = ({ workspaceID }: Props): JSX.Element => {
         {t('settings-project:project-id-description2')}
         {/* eslint-disable-next-line react/jsx-no-target-blank */}
         <a
-          href="https://infisical.com/docs/getting-started/introduction"
+          href="https://infisical.com/docs/documentation/getting-started/introduction"
           target="_blank"
           rel="noopener"
           className="text-primary duration-200 hover:opacity-80"