Merge pull request #1124 from akhilmhdh/fix/folder-create-overview

fix:resolved overview page add secret not working when folder not exist in one level deep

backend/src/controllers/v3/index.ts

@@ -1,9 +1,11 @@
+import * as usersController from "./usersController";
 import * as secretsController from "./secretsController";
 import * as workspacesController from "./workspacesController";
 import * as authController from "./authController";
 import * as signupController from "./signupController";
 
 export {
+    usersController,
     authController,
     secretsController,
     signupController,

backend/src/controllers/v3/secretsController.ts

@@ -963,6 +963,14 @@ export const deleteSecretByNameBatch = async (req: Request, res: Response) => {
     authData: req.authData
   });
 
+  await EventService.handleEvent({
+    event: eventPushSecrets({
+      workspaceId: new Types.ObjectId(workspaceId),
+      environment,
+      secretPath
+    })
+  });
+
   return res.status(200).send({
     secrets: deletedSecrets
   });

backend/src/controllers/v3/usersController.ts

@@ -0,0 +1,18 @@
+import { Request, Response } from "express";
+import { APIKeyDataV2 } from "../../models";
+
+/**
+ * Return API keys belonging to current user.
+ * @param req
+ * @param res
+ * @returns
+ */
+export const getMyAPIKeys = async (req: Request, res: Response) => {
+    const apiKeyData = await APIKeyDataV2.find({
+        user: req.user._id
+    });
+
+    return res.status(200).send({
+        apiKeyData
+    });
+}

backend/src/ee/controllers/v3/apiKeyDataController.ts

@@ -0,0 +1,101 @@
+import { Request, Response } from "express";
+import { Types } from "mongoose";
+import { APIKeyDataV2 } from "../../../models/apiKeyDataV2";
+import { validateRequest } from "../../../helpers/validation";
+import { BadRequestError } from "../../../utils/errors";
+import * as reqValidator from "../../../validation";
+import { createToken } from "../../../helpers";
+import { AuthTokenType } from "../../../variables";
+import { getAuthSecret } from "../../../config";
+
+/**
+ * Create API key data v2
+ * @param req 
+ * @param res 
+ */
+export const createAPIKeyData = async (req: Request, res: Response) => {
+    const {
+        body: {
+            name
+        }
+    } = await validateRequest(reqValidator.CreateAPIKeyV3, req);
+
+    const apiKeyData = await new APIKeyDataV2({
+        name,
+        user: req.user._id,
+        usageCount: 0,
+    }).save();
+    
+    const apiKey = createToken({
+        payload: {
+            authTokenType: AuthTokenType.API_KEY,
+            apiKeyDataId: apiKeyData._id.toString(),
+            userId: req.user._id.toString()
+        },
+        secret: await getAuthSecret()
+    });
+
+    return res.status(200).send({
+        apiKeyData,
+        apiKey
+    });
+}
+
+/**
+ * Update API key data v2 with id [apiKeyDataId]
+ * @param req 
+ * @param res 
+ */
+ export const updateAPIKeyData = async (req: Request, res: Response) => {
+    const {
+        params: { apiKeyDataId },
+        body: { 
+            name, 
+        }
+    } = await validateRequest(reqValidator.UpdateAPIKeyV3, req);
+
+    const apiKeyData = await APIKeyDataV2.findOneAndUpdate(
+        {
+            _id: new Types.ObjectId(apiKeyDataId),
+            user: req.user._id
+        },
+        {
+            name
+        },
+        {
+            new: true
+        }
+    );
+    
+    if (!apiKeyData) throw BadRequestError({
+        message: "Failed to update API key"
+    });
+
+    return res.status(200).send({
+        apiKeyData
+    });
+}
+
+/**
+ * Delete API key data v2 with id [apiKeyDataId]
+ * @param req 
+ * @param res 
+ */
+ export const deleteAPIKeyData = async (req: Request, res: Response) => {
+    const {
+        params: { apiKeyDataId }
+    } = await validateRequest(reqValidator.DeleteAPIKeyV3, req);
+
+    const apiKeyData = await APIKeyDataV2.findOneAndDelete({
+        _id: new Types.ObjectId(apiKeyDataId),
+        user: req.user._id
+    });
+
+    if (!apiKeyData) throw BadRequestError({
+        message: "Failed to delete API key"
+    });
+    
+    return res.status(200).send({
+        apiKeyData
+    });
+}

backend/src/ee/controllers/v3/index.ts

@@ -1,5 +1,7 @@
 import * as serviceTokenDataController from "./serviceTokenDataController";
+import * as apiKeyDataController from "./apiKeyDataController";
 
 export {
-    serviceTokenDataController 
+    serviceTokenDataController,
+    apiKeyDataController
 }

backend/src/ee/controllers/v3/serviceTokenDataController.ts

@@ -30,7 +30,7 @@ import { EEAuditLogService, EELicenseService } from "../../services";
 import { getJwtServiceTokenSecret } from "../../../config";
 
 /**
- * Return project key for service token
+ * Return project key for service token V3
  * @param req 
  * @param res 
  */
@@ -57,7 +57,7 @@ export const getServiceTokenDataKey = async (req: Request, res: Response) => {
 }
 
 /**
- * Create service token data
+ * Create service token data V3
  * @param req 
  * @param res 
  * @returns 
@@ -165,7 +165,7 @@ export const createServiceTokenData = async (req: Request, res: Response) => {
 }
 
 /**
- * Update service token data with id [serviceTokenDataId]
+ * Update service token V3 data with id [serviceTokenDataId]
  * @param req 
  * @param res 
  * @returns 

backend/src/ee/routes/v3/apiKeyData.ts

@@ -0,0 +1,31 @@
+import express from "express";
+const router = express.Router();
+import { requireAuth } from "../../../middleware";
+import { AuthMode } from "../../../variables";
+import { apiKeyDataController } from "../../controllers/v3";
+
+router.post(
+    "/",
+    requireAuth({
+        acceptedAuthModes: [AuthMode.JWT]
+    }),
+    apiKeyDataController.createAPIKeyData
+);
+
+router.patch(
+    "/:apiKeyDataId",
+    requireAuth({
+        acceptedAuthModes: [AuthMode.JWT]
+    }),
+    apiKeyDataController.updateAPIKeyData
+);
+
+router.delete(
+    "/:apiKeyDataId",
+    requireAuth({
+        acceptedAuthModes: [AuthMode.JWT]
+    }),
+    apiKeyDataController.deleteAPIKeyData
+);
+
+export default router;

backend/src/ee/routes/v3/index.ts

@@ -1,5 +1,7 @@
 import serviceTokenData from "./serviceTokenData";
+import apiKeyData from "./apiKeyData";
 
 export {
-    serviceTokenData
+    serviceTokenData,
+    apiKeyData
 }

backend/src/helpers/auth.ts

@@ -4,6 +4,7 @@ import jwt from "jsonwebtoken";
 import bcrypt from "bcrypt";
 import {
 	APIKeyData,
+	APIKeyDataV2,
 	ITokenVersion,
 	IUser,
 	ServiceTokenData,
@@ -105,6 +106,7 @@ export const validateAuthMode = ({
 
 /**
  * Return user payload corresponding to JWT token [authTokenValue]
+ * that is either for browser / CLI or API Key
  * @param {Object} obj
  * @param {String} obj.authTokenValue - JWT token value
  * @returns {User} user - user corresponding to JWT token
@@ -120,7 +122,41 @@ export const getAuthUserPayload = async ({
 		jwt.verify(authTokenValue, await getAuthSecret())
 	);
 
-	if (decodedToken.authTokenType !== AuthTokenType.ACCESS_TOKEN) throw UnauthorizedRequestError();
+	if (
+		decodedToken.authTokenType !== AuthTokenType.ACCESS_TOKEN &&
+		decodedToken.authTokenType !== AuthTokenType.API_KEY
+	) {
+		throw UnauthorizedRequestError();
+	}
+	
+	if (decodedToken.authTokenType === AuthTokenType.ACCESS_TOKEN) {
+		const tokenVersion = await TokenVersion.findOneAndUpdate({
+			_id: new Types.ObjectId(decodedToken.tokenVersionId),
+			user: decodedToken.userId
+		}, {
+			lastUsed: new Date(),
+		});
+	
+		if (!tokenVersion) throw UnauthorizedRequestError();
+	
+		if (decodedToken.accessVersion !== tokenVersion.accessVersion) throw UnauthorizedRequestError();
+	} else if (decodedToken.authTokenType === AuthTokenType.API_KEY) {
+		const apiKeyData = await APIKeyDataV2.findOneAndUpdate(
+			{
+				_id: new Types.ObjectId(decodedToken.apiKeyDataId),
+				user: new Types.ObjectId(decodedToken.userId)
+			},
+			{
+				lastUsed: new Date(),
+				$inc: { usageCount: 1 }
+			},
+			{
+				new: true
+			}
+		);
+		
+		if (!apiKeyData) throw UnauthorizedRequestError();
+	}
 
 	const user = await User.findOne({
 		_id: new Types.ObjectId(decodedToken.userId),
@@ -130,21 +166,6 @@ export const getAuthUserPayload = async ({
 
 	if (!user?.publicKey) throw UnauthorizedRequestError({ message: "Failed to authenticate user with partially set up account" });
 
-	const tokenVersion = await TokenVersion.findOneAndUpdate({
-		_id: new Types.ObjectId(decodedToken.tokenVersionId),
-		user: user._id,
-	}, {
-		lastUsed: new Date(),
-	});
-
-	if (!tokenVersion) throw UnauthorizedRequestError({
-		message: "Failed to validate access token",
-	});
-
-	if (decodedToken.accessVersion !== tokenVersion.accessVersion) throw UnauthorizedRequestError({
-		message: "Failed to validate access token",
-	});
-	
 	return {
 		actor: {
 			type: ActorType.USER,

backend/src/helpers/secrets.ts

@@ -1761,6 +1761,22 @@ export const deleteSecretBatchHelper = async ({
     secretIds: deletedSecrets.map((secret) => secret._id)
   });
 
+  const action = await EELogService.createAction({
+    name: ACTION_DELETE_SECRETS,
+    ...getAuthDataPayloadIdObj(authData),
+    workspaceId,
+    secretIds: deletedSecrets.map((secret) => secret._id)
+  });
+
+  action &&
+    (await EELogService.createLog({
+      ...getAuthDataPayloadIdObj(authData),
+      workspaceId,
+      actions: [action],
+      channel: authData.userAgentType,
+      ipAddress: authData.ipAddress
+    }));
+
   await EEAuditLogService.createAuditLog(
     authData,
     {

backend/src/index.ts

@@ -29,6 +29,7 @@ import {
   secretApprovalRequest as v1SecretApprovalRequest,
   secretScanning as v1SecretScanningRouter
 } from "./ee/routes/v1";
+import { apiKeyData as v3apiKeyDataRouter } from "./ee/routes/v3";
 import { serviceTokenData as v3ServiceTokenDataRouter } from "./ee/routes/v3";
 import {
   auth as v1AuthRouter,
@@ -68,6 +69,7 @@ import {
   auth as v3AuthRouter,
   secrets as v3SecretsRouter,
   signup as v3SignupRouter,
+  users as v3UsersRouter,
   workspaces as v3WorkspacesRouter
 } from "./routes/v3";
 import { healthCheck } from "./routes/status";
@@ -180,7 +182,8 @@ const main = async () => {
   app.use("/api/v1/organizations", eeOrganizationsRouter);
   app.use("/api/v1/sso", eeSSORouter);
   app.use("/api/v1/cloud-products", eeCloudProductsRouter);
-  app.use("/api/v3/service-token", v3ServiceTokenDataRouter);
+  app.use("/api/v3/api-key", v3apiKeyDataRouter); // new
+  app.use("/api/v3/service-token", v3ServiceTokenDataRouter); // new
 
   // v1 routes
   app.use("/api/v1/signup", v1SignupRouter);
@@ -226,6 +229,7 @@ const main = async () => {
   app.use("/api/v3/secrets", v3SecretsRouter);
   app.use("/api/v3/workspaces", v3WorkspacesRouter);
   app.use("/api/v3/signup", v3SignupRouter);
+  app.use("/api/v3/users", v3UsersRouter);
 
   // api docs
   app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerFile));

backend/src/integrations/sync.ts

@@ -32,6 +32,8 @@ import {
   INTEGRATION_GITLAB,
   INTEGRATION_GITLAB_API_URL,
   INTEGRATION_HASHICORP_VAULT,
+  INTEGRATION_HASURA_CLOUD,
+  INTEGRATION_HASURA_CLOUD_API_URL,
   INTEGRATION_HEROKU,
   INTEGRATION_HEROKU_API_URL,
   INTEGRATION_LARAVELFORGE,
@@ -63,6 +65,10 @@ import { Octokit } from "@octokit/rest";
 import _ from "lodash";
 import sodium from "libsodium-wrappers";
 import { standardRequest } from "../config/request";
+import {
+  ZGetTenantEnv,
+  ZUpdateTenantEnv
+} from "../validation/hasuraCloudIntegration";
 
 const getSecretKeyValuePair = (
   secrets: Record<string, { value: string | null; comment?: string } | null>
@@ -95,7 +101,7 @@ const syncSecrets = async ({
   secrets: Record<string, { value: string; comment?: string }>;
   accessId: string | null;
   accessToken: string;
-  appendices?: { prefix: string, suffix: string };
+  appendices?: { prefix: string; suffix: string };
 }) => {
   switch (integration.integration) {
     case INTEGRATION_GCP_SECRET_MANAGER:
@@ -306,6 +312,14 @@ const syncSecrets = async ({
         accessToken
       });
       break;
+
+    case INTEGRATION_HASURA_CLOUD:
+      await syncSecretsHasuraCloud({
+        integration,
+        secrets,
+        accessToken
+      });
+      break;
   }
 };
 
@@ -963,8 +977,9 @@ const syncSecretsVercel = async ({
       : {}),
     ...(integration?.path
       ? {
-        gitBranch: integration?.path
-      } : {})
+          gitBranch: integration?.path
+        }
+      : {})
   };
 
   const vercelSecrets: VercelSecret[] = (
@@ -992,7 +1007,7 @@ const syncSecretsVercel = async ({
 
     return true;
   });
-  
+
   const res: { [key: string]: VercelSecret } = {};
 
   for await (const vercelSecret of vercelSecrets) {
@@ -1352,7 +1367,7 @@ const syncSecretsGitHub = async ({
   integration: IIntegration;
   secrets: Record<string, { value: string; comment?: string }>;
   accessToken: string;
-  appendices?: { prefix: string, suffix: string };
+  appendices?: { prefix: string; suffix: string };
 }) => {
   interface GitHubRepoKey {
     key_id: string;
@@ -1395,14 +1410,23 @@ const syncSecretsGitHub = async ({
     {}
   );
 
-  encryptedSecrets = Object.keys(encryptedSecrets).reduce((result: {
-    [key: string]: GitHubSecret;
-  }, key) => {
-    if ((appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) && (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)) {
-      result[key] = encryptedSecrets[key];
-    }
-    return result;
-  }, {});
+  encryptedSecrets = Object.keys(encryptedSecrets).reduce(
+    (
+      result: {
+        [key: string]: GitHubSecret;
+      },
+      key
+    ) => {
+      if (
+        (appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) &&
+        (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)
+      ) {
+        result[key] = encryptedSecrets[key];
+      }
+      return result;
+    },
+    {}
+  );
 
   Object.keys(encryptedSecrets).map(async (key) => {
     if (!(key in secrets)) {
@@ -2095,7 +2119,7 @@ const syncSecretsCheckly = async ({
   integration: IIntegration;
   secrets: Record<string, { value: string; comment?: string }>;
   accessToken: string;
-  appendices?: { prefix: string, suffix: string };
+  appendices?: { prefix: string; suffix: string };
 }) => {
   let getSecretsRes = (
     await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/variables`, {
@@ -2113,14 +2137,23 @@ const syncSecretsCheckly = async ({
     {}
   );
 
-  getSecretsRes = Object.keys(getSecretsRes).reduce((result: {
-    [key: string]: string;
-  }, key) => {
-    if ((appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) && (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)) {
-      result[key] = getSecretsRes[key];
-    }
-    return result;
-  }, {});
+  getSecretsRes = Object.keys(getSecretsRes).reduce(
+    (
+      result: {
+        [key: string]: string;
+      },
+      key
+    ) => {
+      if (
+        (appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) &&
+        (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)
+      ) {
+        result[key] = getSecretsRes[key];
+      }
+      return result;
+    },
+    {}
+  );
 
   // add secrets
   for await (const key of Object.keys(secrets)) {
@@ -2195,18 +2228,20 @@ const syncSecretsQovery = async ({
   secrets: Record<string, { value: string; comment?: string }>;
   accessToken: string;
 }) => {
-  
   const getSecretsRes = (
-    await standardRequest.get(`${INTEGRATION_QOVERY_API_URL}/${integration.scope}/${integration.appId}/environmentVariable`, {
-      headers: {
-        Authorization: `Token ${accessToken}`,
-        "Accept-Encoding": "application/json"
+    await standardRequest.get(
+      `${INTEGRATION_QOVERY_API_URL}/${integration.scope}/${integration.appId}/environmentVariable`,
+      {
+        headers: {
+          Authorization: `Token ${accessToken}`,
+          "Accept-Encoding": "application/json"
+        }
       }
-    })
+    )
   ).data.results.reduce(
     (obj: any, secret: any) => ({
       ...obj,
-      [secret.key]: {"id": secret.id, "value": secret.value}
+      [secret.key]: { id: secret.id, value: secret.value }
     }),
     {}
   );
@@ -3076,4 +3111,111 @@ const syncSecretsNorthflank = async ({
   );
 };
 
+/** Sync/push [secrets] to Hasura Cloud
+ * @param {Object} obj
+ * @param {IIntegration} obj.integration - integration details
+ * @param {Object} obj.secrets - secrets to push to integration (object where keys are secret keys and values are secret values)
+ * @param {String} obj.accessToken - access token for Hasura Cloud integration
+ */
+const syncSecretsHasuraCloud = async ({
+  integration,
+  secrets,
+  accessToken
+}: {
+  integration: IIntegration;
+  secrets: Record<string, { value: string; comment?: string }>;
+  accessToken: string;
+}) => {
+  const res = await standardRequest.post(
+    INTEGRATION_HASURA_CLOUD_API_URL,
+    {
+      query:
+        "query MyQuery($tenantId: uuid!) { getTenantEnv(tenantId: $tenantId) { hash envVars } }",
+      variables: {
+        tenantId: integration.appId
+      }
+    },
+    {
+      headers: {
+        Authorization: `pat ${accessToken}`,
+        "Content-Type": "application/json"
+      }
+    }
+  );
+
+  const {
+    data: {
+      getTenantEnv: { hash, envVars }
+    }
+  } = ZGetTenantEnv.parse(res.data);
+
+  let currentHash = hash;
+
+  const secretsToUpdate = Object.keys(secrets).map((key) => {
+    return ({
+      key,
+      value: secrets[key].value
+    });
+  });
+
+  if (secretsToUpdate.length) {
+    // update secrets
+    
+    const addRequest = await standardRequest.post(
+      INTEGRATION_HASURA_CLOUD_API_URL,
+      {
+        query:
+          "mutation MyQuery($currentHash: String!, $envs: [UpdateEnvObject!]!, $tenantId: uuid!) { updateTenantEnv(currentHash: $currentHash, envs: $envs, tenantId: $tenantId) { hash envVars} }",
+        variables: {
+          currentHash,
+          envs: secretsToUpdate,
+          tenantId: integration.appId
+        }
+      },
+      {
+        headers: {
+          Authorization: `pat ${accessToken}`,
+          "Content-Type": "application/json"
+        }
+      }
+    );
+
+    const addRequestResponse = ZUpdateTenantEnv.safeParse(addRequest.data);
+    if (addRequestResponse.success) {
+      currentHash = addRequestResponse.data.data.updateTenantEnv.hash;
+    }
+  }
+  
+  const secretsToDelete = envVars.environment 
+    ? Object.keys(envVars.environment).filter((key) => !(key in secrets))
+    : [];
+    
+  if (secretsToDelete.length) {
+    await standardRequest.post(
+      INTEGRATION_HASURA_CLOUD_API_URL,
+      {
+        query: `
+        mutation deleteTenantEnv($id: uuid!, $currentHash: String!, $env: [String!]!) {
+          deleteTenantEnv(tenantId: $id, currentHash: $currentHash, deleteEnvs: $env) {
+            hash
+            envVars
+          }
+        }
+        `,
+        variables: {
+          id: integration.appId,
+          currentHash,
+          env: secretsToDelete
+        }
+      },
+      {
+        headers: {
+          Authorization: `pat ${accessToken}`,
+          "Content-Type": "application/json"
+        }
+      }
+    );
+  }
+};
+
 export { syncSecrets };

backend/src/models/apiKeyDataV2.ts

@@ -0,0 +1,38 @@
+import { Document, Schema, Types, model } from "mongoose";
+
+export interface IAPIKeyDataV2 extends Document {
+    _id: Types.ObjectId;
+    name: string;
+    user: Types.ObjectId;
+    lastUsed?: Date
+    usageCount: number;
+    expiresAt?: Date;
+}
+
+const apiKeyDataV2Schema  = new Schema(
+    {
+        name: {
+            type: String,
+            required: true
+        },
+        user: {
+            type: Schema.Types.ObjectId,
+            ref: "User",
+            required: true
+        },
+        lastUsed: {
+            type: Date,
+            required: false
+        },
+        usageCount: {
+            type: Number,
+            default: 0,
+            required: true
+        }
+    },
+    {
+        timestamps: true
+    }
+);
+
+export const APIKeyDataV2 = model<IAPIKeyDataV2>("APIKeyDataV2", apiKeyDataV2Schema);

backend/src/models/index.ts

@@ -24,9 +24,10 @@ export * from "./user";
 export * from "./userAction";
 export * from "./workspace";
 export * from "./serviceTokenData"; // TODO: deprecate
-export * from "./apiKeyData";
+export * from "./serviceTokenDataV3";
+export * from "./serviceTokenDataV3Key";
+export * from "./apiKeyData"; // TODO: deprecate
+export * from "./apiKeyDataV2";
 export * from "./loginSRPDetail";
 export * from "./tokenVersion";
 export * from "./webhooks";
-export * from "./serviceTokenDataV3";
-export * from "./serviceTokenDataV3Key";

backend/src/models/integration/integration.ts

@@ -14,6 +14,7 @@ import {
   INTEGRATION_GITHUB,
   INTEGRATION_GITLAB,
   INTEGRATION_HASHICORP_VAULT,
+  INTEGRATION_HASURA_CLOUD,
   INTEGRATION_HEROKU,
   INTEGRATION_LARAVELFORGE,
   INTEGRATION_NETLIFY,
@@ -76,7 +77,8 @@ export interface IIntegration {
     | "cloud-66"
     | "northflank"
     | "windmill"
-    | "gcp-secret-manager";
+    | "gcp-secret-manager"
+    | "hasura-cloud";
   integrationAuth: Types.ObjectId;
   metadata: Metadata;
 }
@@ -86,67 +88,67 @@ const integrationSchema = new Schema<IIntegration>(
     workspace: {
       type: Schema.Types.ObjectId,
       ref: "Workspace",
-      required: true,
+      required: true
     },
     environment: {
       type: String,
-      required: true,
+      required: true
     },
     isActive: {
       type: Boolean,
-      required: true,
+      required: true
     },
     url: {
       // for custom self-hosted integrations (e.g. self-hosted GitHub enterprise)
       type: String,
-      default: null,
+      default: null
     },
     app: {
       // name of app in provider
       type: String,
-      default: null,
+      default: null
     },
     appId: {
       // id of app in provider
       type: String,
-      default: null,
+      default: null
     },
     targetEnvironment: {
       // target environment
       type: String,
-      default: null,
+      default: null
     },
     targetEnvironmentId: {
       type: String,
-      default: null,
+      default: null
     },
     targetService: {
       // railway-specific service
       // qovery-specific project
       type: String,
-      default: null,
+      default: null
     },
     targetServiceId: {
       // railway-specific service
       // qovery specific project
       type: String,
-      default: null,
+      default: null
     },
     owner: {
       // github-specific repo owner-login
       type: String,
-      default: null,
+      default: null
     },
     path: {
       // aws-parameter-store-specific path
       // (also) vercel preview-branch
       type: String,
-      default: null,
+      default: null
     },
     region: {
       // aws-parameter-store-specific path
       type: String,
-      default: null,
+      default: null
     },
     scope: {
       // qovery-specific scope
@@ -183,19 +185,20 @@ const integrationSchema = new Schema<IIntegration>(
         INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
         INTEGRATION_CLOUD_66,
         INTEGRATION_NORTHFLANK,
-        INTEGRATION_GCP_SECRET_MANAGER
+        INTEGRATION_GCP_SECRET_MANAGER,
+        INTEGRATION_HASURA_CLOUD
       ],
-      required: true,
+      required: true
     },
     integrationAuth: {
       type: Schema.Types.ObjectId,
       ref: "IntegrationAuth",
-      required: true,
+      required: true
     },
     secretPath: {
       type: String,
       required: true,
-      default: "/",
+      default: "/"
     },
     metadata: {
       type: Schema.Types.Mixed,
@@ -203,8 +206,8 @@ const integrationSchema = new Schema<IIntegration>(
     }
   },
   {
-    timestamps: true,
+    timestamps: true
   }
 );
 
-export const Integration = model<IIntegration>("Integration", integrationSchema);
+export const Integration = model<IIntegration>("Integration", integrationSchema);

backend/src/models/integrationAuth/integrationAuth.ts

@@ -1,205 +1,203 @@
 import {
-    ALGORITHM_AES_256_GCM,
-    ENCODING_SCHEME_BASE64,
-    ENCODING_SCHEME_UTF8,
-    INTEGRATION_AWS_PARAMETER_STORE,
-    INTEGRATION_AWS_SECRET_MANAGER,
-    INTEGRATION_AZURE_KEY_VAULT,
-    INTEGRATION_BITBUCKET,
-    INTEGRATION_CIRCLECI,
-    INTEGRATION_CLOUDFLARE_PAGES,
-    INTEGRATION_CLOUD_66,
-    INTEGRATION_CODEFRESH,
-    INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
-    INTEGRATION_FLYIO,
-    INTEGRATION_GCP_SECRET_MANAGER,
-    INTEGRATION_GITHUB,
-    INTEGRATION_GITLAB,
-    INTEGRATION_HASHICORP_VAULT,
-    INTEGRATION_HEROKU,
-    INTEGRATION_LARAVELFORGE,
-    INTEGRATION_NETLIFY,
-    INTEGRATION_NORTHFLANK,
-    INTEGRATION_RAILWAY,
-    INTEGRATION_RENDER,
-    INTEGRATION_SUPABASE,
-    INTEGRATION_TEAMCITY,
-    INTEGRATION_TERRAFORM_CLOUD,
-    INTEGRATION_TRAVISCI,
-    INTEGRATION_VERCEL,
-    INTEGRATION_WINDMILL
-  } from "../../variables";
-  import { Document, Schema, Types, model } from "mongoose";
-  import { IntegrationAuthMetadata } from "./types";
-  
-  export interface IIntegrationAuth extends Document {
-    _id: Types.ObjectId;
-    workspace: Types.ObjectId;
-    integration:
-      | "heroku"
-      | "vercel"
-      | "netlify"
-      | "github"
-      | "gitlab"
-      | "render"
-      | "railway"
-      | "flyio"
-      | "azure-key-vault"
-      | "laravel-forge"
-      | "circleci"
-      | "travisci"
-      | "supabase"
-      | "aws-parameter-store"
-      | "aws-secret-manager"
-      | "checkly"
-      | "qovery"
-      | "cloudflare-pages"
-      | "codefresh"
-      | "digital-ocean-app-platform"
-      | "bitbucket"
-      | "cloud-66"
-      | "terraform-cloud"
-      | "teamcity"
-      | "northflank"
-      | "windmill"
-      | "gcp-secret-manager";
-    teamId: string;
-    accountId: string;
-    url: string;
-    namespace: string;
-    refreshCiphertext?: string;
-    refreshIV?: string;
-    refreshTag?: string;
-    accessIdCiphertext?: string;
-    accessIdIV?: string;
-    accessIdTag?: string;
-    accessCiphertext?: string;
-    accessIV?: string;
-    accessTag?: string;
-    algorithm?: "aes-256-gcm";
-    keyEncoding?: "utf8" | "base64";
-    accessExpiresAt?: Date;
-    metadata?: IntegrationAuthMetadata;
-  }
-  
-  const integrationAuthSchema = new Schema<IIntegrationAuth>(
-    {
-      workspace: {
-        type: Schema.Types.ObjectId,
-        ref: "Workspace",
-        required: true,
-      },
-      integration: {
-        type: String,
-        enum: [
-          INTEGRATION_AZURE_KEY_VAULT,
-          INTEGRATION_AWS_PARAMETER_STORE,
-          INTEGRATION_AWS_SECRET_MANAGER,
-          INTEGRATION_HEROKU,
-          INTEGRATION_VERCEL,
-          INTEGRATION_NETLIFY,
-          INTEGRATION_GITHUB,
-          INTEGRATION_GITLAB,
-          INTEGRATION_RENDER,
-          INTEGRATION_RAILWAY,
-          INTEGRATION_FLYIO,
-          INTEGRATION_CIRCLECI,
-          INTEGRATION_LARAVELFORGE,
-          INTEGRATION_TRAVISCI,
-          INTEGRATION_TEAMCITY,
-          INTEGRATION_SUPABASE,
-          INTEGRATION_TERRAFORM_CLOUD,
-          INTEGRATION_HASHICORP_VAULT,
-          INTEGRATION_CLOUDFLARE_PAGES,
-          INTEGRATION_CODEFRESH,
-          INTEGRATION_WINDMILL,
-          INTEGRATION_BITBUCKET,
-          INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
-          INTEGRATION_CLOUD_66,
-          INTEGRATION_NORTHFLANK,
-          INTEGRATION_GCP_SECRET_MANAGER
-        ],
-        required: true,
-      },
-      teamId: {
-        // vercel-specific integration param
-        type: String,
-      },
-      url: {
-        // for any self-hosted integrations (e.g. self-hosted hashicorp-vault)
-        type: String,
-      },
-      namespace: {
-        // hashicorp-vault-specific integration param
-        type: String,
-      },
-      accountId: {
-        // netlify-specific integration param
-        type: String,
-      },
-      refreshCiphertext: {
-        type: String,
-        select: false,
-      },
-      refreshIV: {
-        type: String,
-        select: false,
-      },
-      refreshTag: {
-        type: String,
-        select: false,
-      },
-      accessIdCiphertext: {
-        type: String,
-        select: false,
-      },
-      accessIdIV: {
-        type: String,
-        select: false,
-      },
-      accessIdTag: {
-        type: String,
-        select: false,
-      },
-      accessCiphertext: {
-        type: String,
-        select: false,
-      },
-      accessIV: {
-        type: String,
-        select: false,
-      },
-      accessTag: {
-        type: String,
-        select: false,
-      },
-      accessExpiresAt: {
-        type: Date,
-        select: false,
-      },
-      algorithm: { // the encryption algorithm used
-        type: String,
-        enum: [ALGORITHM_AES_256_GCM],
-        required: true,
-      },
-      keyEncoding: {
-          type: String,
-          enum: [
-              ENCODING_SCHEME_UTF8,
-              ENCODING_SCHEME_BASE64,
-          ],
-          required: true,
-      },
-      metadata: {
-        type: Schema.Types.Mixed
-      }
+  ALGORITHM_AES_256_GCM,
+  ENCODING_SCHEME_BASE64,
+  ENCODING_SCHEME_UTF8,
+  INTEGRATION_AWS_PARAMETER_STORE,
+  INTEGRATION_AWS_SECRET_MANAGER,
+  INTEGRATION_AZURE_KEY_VAULT,
+  INTEGRATION_BITBUCKET,
+  INTEGRATION_CIRCLECI,
+  INTEGRATION_CLOUDFLARE_PAGES,
+  INTEGRATION_CLOUD_66,
+  INTEGRATION_CODEFRESH,
+  INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
+  INTEGRATION_FLYIO,
+  INTEGRATION_GCP_SECRET_MANAGER,
+  INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
+  INTEGRATION_HASHICORP_VAULT,
+  INTEGRATION_HASURA_CLOUD,
+  INTEGRATION_HEROKU,
+  INTEGRATION_LARAVELFORGE,
+  INTEGRATION_NETLIFY,
+  INTEGRATION_NORTHFLANK,
+  INTEGRATION_RAILWAY,
+  INTEGRATION_RENDER,
+  INTEGRATION_SUPABASE,
+  INTEGRATION_TEAMCITY,
+  INTEGRATION_TERRAFORM_CLOUD,
+  INTEGRATION_TRAVISCI,
+  INTEGRATION_VERCEL,
+  INTEGRATION_WINDMILL
+} from "../../variables";
+import { Document, Schema, Types, model } from "mongoose";
+import { IntegrationAuthMetadata } from "./types";
+
+export interface IIntegrationAuth extends Document {
+  _id: Types.ObjectId;
+  workspace: Types.ObjectId;
+  integration:
+    | "heroku"
+    | "vercel"
+    | "netlify"
+    | "github"
+    | "gitlab"
+    | "render"
+    | "railway"
+    | "flyio"
+    | "azure-key-vault"
+    | "laravel-forge"
+    | "circleci"
+    | "travisci"
+    | "supabase"
+    | "aws-parameter-store"
+    | "aws-secret-manager"
+    | "checkly"
+    | "qovery"
+    | "cloudflare-pages"
+    | "codefresh"
+    | "digital-ocean-app-platform"
+    | "bitbucket"
+    | "cloud-66"
+    | "terraform-cloud"
+    | "teamcity"
+    | "northflank"
+    | "windmill"
+    | "gcp-secret-manager"
+    | "hasura-cloud";
+  teamId: string;
+  accountId: string;
+  url: string;
+  namespace: string;
+  refreshCiphertext?: string;
+  refreshIV?: string;
+  refreshTag?: string;
+  accessIdCiphertext?: string;
+  accessIdIV?: string;
+  accessIdTag?: string;
+  accessCiphertext?: string;
+  accessIV?: string;
+  accessTag?: string;
+  algorithm?: "aes-256-gcm";
+  keyEncoding?: "utf8" | "base64";
+  accessExpiresAt?: Date;
+  metadata?: IntegrationAuthMetadata;
+}
+
+const integrationAuthSchema = new Schema<IIntegrationAuth>(
+  {
+    workspace: {
+      type: Schema.Types.ObjectId,
+      ref: "Workspace",
+      required: true
     },
-    {
-      timestamps: true,
+    integration: {
+      type: String,
+      enum: [
+        INTEGRATION_AZURE_KEY_VAULT,
+        INTEGRATION_AWS_PARAMETER_STORE,
+        INTEGRATION_AWS_SECRET_MANAGER,
+        INTEGRATION_HEROKU,
+        INTEGRATION_VERCEL,
+        INTEGRATION_NETLIFY,
+        INTEGRATION_GITHUB,
+        INTEGRATION_GITLAB,
+        INTEGRATION_RENDER,
+        INTEGRATION_RAILWAY,
+        INTEGRATION_FLYIO,
+        INTEGRATION_CIRCLECI,
+        INTEGRATION_LARAVELFORGE,
+        INTEGRATION_TRAVISCI,
+        INTEGRATION_TEAMCITY,
+        INTEGRATION_SUPABASE,
+        INTEGRATION_TERRAFORM_CLOUD,
+        INTEGRATION_HASHICORP_VAULT,
+        INTEGRATION_CLOUDFLARE_PAGES,
+        INTEGRATION_CODEFRESH,
+        INTEGRATION_WINDMILL,
+        INTEGRATION_BITBUCKET,
+        INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
+        INTEGRATION_CLOUD_66,
+        INTEGRATION_NORTHFLANK,
+        INTEGRATION_GCP_SECRET_MANAGER,
+        INTEGRATION_HASURA_CLOUD
+      ],
+      required: true
+    },
+    teamId: {
+      // vercel-specific integration param
+      type: String
+    },
+    url: {
+      // for any self-hosted integrations (e.g. self-hosted hashicorp-vault)
+      type: String
+    },
+    namespace: {
+      // hashicorp-vault-specific integration param
+      type: String
+    },
+    accountId: {
+      // netlify-specific integration param
+      type: String
+    },
+    refreshCiphertext: {
+      type: String,
+      select: false
+    },
+    refreshIV: {
+      type: String,
+      select: false
+    },
+    refreshTag: {
+      type: String,
+      select: false
+    },
+    accessIdCiphertext: {
+      type: String,
+      select: false
+    },
+    accessIdIV: {
+      type: String,
+      select: false
+    },
+    accessIdTag: {
+      type: String,
+      select: false
+    },
+    accessCiphertext: {
+      type: String,
+      select: false
+    },
+    accessIV: {
+      type: String,
+      select: false
+    },
+    accessTag: {
+      type: String,
+      select: false
+    },
+    accessExpiresAt: {
+      type: Date,
+      select: false
+    },
+    algorithm: {
+      // the encryption algorithm used
+      type: String,
+      enum: [ALGORITHM_AES_256_GCM],
+      required: true
+    },
+    keyEncoding: {
+      type: String,
+      enum: [ENCODING_SCHEME_UTF8, ENCODING_SCHEME_BASE64],
+      required: true
+    },
+    metadata: {
+      type: Schema.Types.Mixed
     }
-  );
-  
-  export const IntegrationAuth = model<IIntegrationAuth>(
-    "IntegrationAuth",
-    integrationAuthSchema
-  );
+  },
+  {
+    timestamps: true
+  }
+);
+
+export const IntegrationAuth = model<IIntegrationAuth>("IntegrationAuth", integrationAuthSchema);

backend/src/models/serviceTokenDataV3.ts

@@ -54,6 +54,7 @@ const serviceTokenDataV3Schema = new Schema(
         },
         isActive: {
             type: Boolean,
+            default: true,
             required: true
         },
         lastUsed: {

backend/src/routes/v2/serviceTokenData.ts

@@ -6,7 +6,7 @@ import {
 import { AuthMode } from "../../variables";
 import { serviceTokenDataController } from "../../controllers/v2";
 
-router.get(
+router.get( // TODO: deprecate (moving to ST V3)
   "/",
   requireAuth({
     acceptedAuthModes: [AuthMode.SERVICE_TOKEN]
@@ -14,7 +14,7 @@ router.get(
   serviceTokenDataController.getServiceTokenData
 );
 
-router.post(
+router.post( // TODO: deprecate (moving to ST V3)
   "/",
   requireAuth({
     acceptedAuthModes: [AuthMode.JWT]
@@ -22,7 +22,7 @@ router.post(
   serviceTokenDataController.createServiceTokenData
 );
 
-router.delete(
+router.delete( // TODO: deprecate (moving to ST V3)
   "/:serviceTokenDataId",
   requireAuth({
     acceptedAuthModes: [AuthMode.JWT]
@@ -30,4 +30,4 @@ router.delete(
   serviceTokenDataController.deleteServiceTokenData
 );
 
-export default router;
+export default router;

backend/src/routes/v2/users.ts

@@ -36,7 +36,7 @@ router.get(
   usersController.getMyOrganizations
 );
 
-router.get(
+router.get( // TODO: deprecate (moving to API Key V2)
   "/me/api-keys",
   requireAuth({
     acceptedAuthModes: [AuthMode.JWT]

backend/src/routes/v3/index.ts

@@ -1,10 +1,12 @@
 import auth from "./auth";
+import users from "./users";
 import secrets from "./secrets";
 import workspaces from "./workspaces";
 import signup from "./signup";
 
 export {
     auth,
+    users,
     secrets,
     signup,
     workspaces

backend/src/routes/v3/users.ts

@@ -0,0 +1,15 @@
+import express from "express";
+const router = express.Router();
+import { requireAuth } from "../../middleware";
+import { AuthMode } from "../../variables";
+import { usersController } from "../../controllers/v3";
+
+router.get(
+  "/me/api-keys",
+  requireAuth({
+    acceptedAuthModes: [AuthMode.JWT]
+  }),
+  usersController.getMyAPIKeys
+);
+
+export default router;

backend/src/validation/apiKeyDataV3.ts

@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+export const CreateAPIKeyV3 = z.object({
+    body: z.object({
+        name: z.string().trim()
+    })
+});
+
+export const UpdateAPIKeyV3 = z.object({
+    params: z.object({
+        apiKeyDataId: z.string().trim()
+    }),
+    body: z.object({
+        name: z.string().trim()
+    })
+});
+
+export const DeleteAPIKeyV3 = z.object({
+    params: z.object({
+        apiKeyDataId: z.string().trim()
+    })
+});

backend/src/validation/hasuraCloudIntegration.ts

@@ -0,0 +1,21 @@
+import * as z from "zod";
+
+export const ZGetTenantEnv = z.object({
+  data: z.object({
+    getTenantEnv: z.object({
+      hash: z.string(),
+      envVars: z.object({
+        environment: z.record(z.any()).optional()
+      })
+    })
+  })
+});
+
+export const ZUpdateTenantEnv = z.object({
+  data: z.object({
+    updateTenantEnv: z.object({
+      hash: z.string(),
+      envVars: z.record(z.any())
+    })
+  })
+});

backend/src/validation/index.ts

@@ -10,3 +10,4 @@ export * from "./secrets";
 export * from "./serviceAccount";
 export * from "./serviceTokenData";
 export * from "./serviceTokenDataV3";
+export * from "./apiKeyDataV3";

backend/src/variables/authentication.ts

@@ -3,7 +3,8 @@ export enum AuthTokenType {
     REFRESH_TOKEN = "refreshToken",
     SIGNUP_TOKEN = "signupToken",
     MFA_TOKEN = "mfaToken",
-    PROVIDER_TOKEN = "providerToken"
+    PROVIDER_TOKEN = "providerToken",
+    API_KEY = "apiKey"
 }
 
 export enum AuthMode {

backend/src/variables/integration.ts

@@ -1,12 +1,12 @@
 import {
-    getClientIdAzure,
-    getClientIdBitBucket,
-    getClientIdGCPSecretManager,
-    getClientIdGitHub,
-    getClientIdGitLab,
-    getClientIdHeroku,
-    getClientIdNetlify,
-    getClientSlugVercel
+  getClientIdAzure,
+  getClientIdBitBucket,
+  getClientIdGCPSecretManager,
+  getClientIdGitHub,
+  getClientIdGitLab,
+  getClientIdHeroku,
+  getClientIdNetlify,
+  getClientSlugVercel
 } from "../config";
 
 // integrations
@@ -22,7 +22,7 @@ export const INTEGRATION_GITLAB = "gitlab";
 export const INTEGRATION_RENDER = "render";
 export const INTEGRATION_RAILWAY = "railway";
 export const INTEGRATION_FLYIO = "flyio";
-export const INTEGRATION_LARAVELFORGE = "laravel-forge"
+export const INTEGRATION_LARAVELFORGE = "laravel-forge";
 export const INTEGRATION_CIRCLECI = "circleci";
 export const INTEGRATION_TRAVISCI = "travisci";
 export const INTEGRATION_TEAMCITY = "teamcity";
@@ -38,32 +38,34 @@ export const INTEGRATION_WINDMILL = "windmill";
 export const INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM = "digital-ocean-app-platform";
 export const INTEGRATION_CLOUD_66 = "cloud-66";
 export const INTEGRATION_NORTHFLANK = "northflank";
+export const INTEGRATION_HASURA_CLOUD = "hasura-cloud";
 export const INTEGRATION_SET = new Set([
-    INTEGRATION_GCP_SECRET_MANAGER,
-    INTEGRATION_AZURE_KEY_VAULT,
-    INTEGRATION_HEROKU,
-    INTEGRATION_VERCEL,
-    INTEGRATION_NETLIFY,
-    INTEGRATION_GITHUB,
-    INTEGRATION_GITLAB,
-    INTEGRATION_RENDER,
-    INTEGRATION_FLYIO,
-    INTEGRATION_CIRCLECI,
-    INTEGRATION_LARAVELFORGE,
-    INTEGRATION_TRAVISCI,
-    INTEGRATION_TEAMCITY,
-    INTEGRATION_SUPABASE,
-    INTEGRATION_CHECKLY,
-    INTEGRATION_QOVERY,
-    INTEGRATION_TERRAFORM_CLOUD,
-    INTEGRATION_HASHICORP_VAULT,
-    INTEGRATION_CLOUDFLARE_PAGES,
-    INTEGRATION_CODEFRESH,
-    INTEGRATION_WINDMILL,
-    INTEGRATION_BITBUCKET,
-    INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
-    INTEGRATION_CLOUD_66,
-    INTEGRATION_NORTHFLANK
+  INTEGRATION_GCP_SECRET_MANAGER,
+  INTEGRATION_AZURE_KEY_VAULT,
+  INTEGRATION_HEROKU,
+  INTEGRATION_VERCEL,
+  INTEGRATION_NETLIFY,
+  INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
+  INTEGRATION_RENDER,
+  INTEGRATION_FLYIO,
+  INTEGRATION_CIRCLECI,
+  INTEGRATION_LARAVELFORGE,
+  INTEGRATION_TRAVISCI,
+  INTEGRATION_TEAMCITY,
+  INTEGRATION_SUPABASE,
+  INTEGRATION_CHECKLY,
+  INTEGRATION_QOVERY,
+  INTEGRATION_TERRAFORM_CLOUD,
+  INTEGRATION_HASHICORP_VAULT,
+  INTEGRATION_CLOUDFLARE_PAGES,
+  INTEGRATION_CODEFRESH,
+  INTEGRATION_WINDMILL,
+  INTEGRATION_BITBUCKET,
+  INTEGRATION_DIGITAL_OCEAN_APP_PLATFORM,
+  INTEGRATION_CLOUD_66,
+  INTEGRATION_NORTHFLANK,
+  INTEGRATION_HASURA_CLOUD
 ]);
 
 // integration types
@@ -71,15 +73,14 @@ export const INTEGRATION_OAUTH2 = "oauth2";
 
 // integration oauth endpoints
 export const INTEGRATION_GCP_TOKEN_URL = "https://oauth2.googleapis.com/token";
-export const INTEGRATION_AZURE_TOKEN_URL = "https://login.microsoftonline.com/common/oauth2/v2.0/token";
+export const INTEGRATION_AZURE_TOKEN_URL =
+  "https://login.microsoftonline.com/common/oauth2/v2.0/token";
 export const INTEGRATION_HEROKU_TOKEN_URL = "https://id.heroku.com/oauth/token";
-export const INTEGRATION_VERCEL_TOKEN_URL =
-  "https://api.vercel.com/v2/oauth/access_token";
+export const INTEGRATION_VERCEL_TOKEN_URL = "https://api.vercel.com/v2/oauth/access_token";
 export const INTEGRATION_NETLIFY_TOKEN_URL = "https://api.netlify.com/oauth/token";
-export const INTEGRATION_GITHUB_TOKEN_URL =
-  "https://github.com/login/oauth/access_token";
+export const INTEGRATION_GITHUB_TOKEN_URL = "https://github.com/login/oauth/access_token";
 export const INTEGRATION_GITLAB_TOKEN_URL = "https://gitlab.com/oauth/token";
-export const INTEGRATION_BITBUCKET_TOKEN_URL = "https://bitbucket.org/site/oauth2/access_token"
+export const INTEGRATION_BITBUCKET_TOKEN_URL = "https://bitbucket.org/site/oauth2/access_token";
 
 // integration apps endpoints
 export const INTEGRATION_GCP_API_URL = "https://cloudresourcemanager.googleapis.com";
@@ -106,268 +107,279 @@ export const INTEGRATION_WINDMILL_API_URL = "https://app.windmill.dev/api";
 export const INTEGRATION_DIGITAL_OCEAN_API_URL = "https://api.digitalocean.com";
 export const INTEGRATION_CLOUD_66_API_URL = "https://app.cloud66.com/api";
 export const INTEGRATION_NORTHFLANK_API_URL = "https://api.northflank.com";
+export const INTEGRATION_HASURA_CLOUD_API_URL = "https://data.pro.hasura.io/v1/graphql";
 
-export const INTEGRATION_GCP_SECRET_MANAGER_SERVICE_NAME = "secretmanager.googleapis.com"
+export const INTEGRATION_GCP_SECRET_MANAGER_SERVICE_NAME = "secretmanager.googleapis.com";
 export const INTEGRATION_GCP_SECRET_MANAGER_URL = `https://${INTEGRATION_GCP_SECRET_MANAGER_SERVICE_NAME}`;
 export const INTEGRATION_GCP_SERVICE_USAGE_URL = "https://serviceusage.googleapis.com";
-export const INTEGRATION_GCP_CLOUD_PLATFORM_SCOPE = "https://www.googleapis.com/auth/cloud-platform";
+export const INTEGRATION_GCP_CLOUD_PLATFORM_SCOPE =
+  "https://www.googleapis.com/auth/cloud-platform";
 
 export const getIntegrationOptions = async () => {
-    const INTEGRATION_OPTIONS = [
-        {
-            name: "Heroku",
-            slug: "heroku",
-            image: "Heroku.png",
-            isAvailable: true,
-            type: "oauth",
-            clientId: await getClientIdHeroku(),
-            docsLink: "",
-        },
-        {
-            name: "Vercel",
-            slug: "vercel",
-            image: "Vercel.png",
-            isAvailable: true,
-            type: "oauth",
-            clientId: "",
-            clientSlug: await getClientSlugVercel(),
-            docsLink: "",
-        },
-        {
-            name: "Netlify",
-            slug: "netlify",
-            image: "Netlify.png",
-            isAvailable: true,
-            type: "oauth",
-            clientId: await getClientIdNetlify(),
-            docsLink: "",
-        },
-        {
-            name: "GitHub",
-            slug: "github",
-            image: "GitHub.png",
-            isAvailable: true,
-            type: "oauth",
-            clientId: await getClientIdGitHub(),
-            docsLink: "",
-        },
-        {
-            name: "Render",
-            slug: "render",
-            image: "Render.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Railway",
-            slug: "railway",
-            image: "Railway.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Fly.io",
-            slug: "flyio",
-            image: "Flyio.svg",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "AWS Parameter Store",
-            slug: "aws-parameter-store",
-            image: "Amazon Web Services.png",
-            isAvailable: true,
-            type: "custom",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Laravel Forge",
-            slug: "laravel-forge",
-            image: "Laravel Forge.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "AWS Secrets Manager",
-            slug: "aws-secret-manager",
-            image: "Amazon Web Services.png",
-            isAvailable: true,
-            type: "custom",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Azure Key Vault",
-            slug: "azure-key-vault",
-            image: "Microsoft Azure.png",
-            isAvailable: true,
-            type: "oauth",
-            clientId: await getClientIdAzure(),
-            docsLink: "",
-        },
-        {
-            name: "Circle CI",
-            slug: "circleci",
-            image: "Circle CI.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "GitLab",
-            slug: "gitlab",
-            image: "GitLab.png",
-            isAvailable: true,
-            type: "custom",
-            clientId: await getClientIdGitLab(),
-            docsLink: "",
-        },
-        {
-            name: "Terraform Cloud",
-            slug: "terraform-cloud",
-            image: "Terraform Cloud.png",
-            isAvailable: true,
-            type: "pat",
-            cliendId: "",
-            docsLink: "",
-        },
-        {
-            name: "Travis CI",
-            slug: "travisci",
-            image: "Travis CI.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "TeamCity",
-            slug: "teamcity",
-            image: "TeamCity.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Supabase",
-            slug: "supabase",
-            image: "Supabase.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Checkly",
-            slug: "checkly",
-            image: "Checkly.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Qovery",
-            slug: "qovery",
-            image: "Qovery.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "HashiCorp Vault",
-            slug: "hashicorp-vault",
-            image: "Vault.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "GCP Secret Manager",
-            slug: "gcp-secret-manager",
-            image: "Google Cloud Platform.png",
-            isAvailable: true,
-            type: "oauth",
-            clientId: await getClientIdGCPSecretManager(),
-            docsLink: ""
-        },
-        {
-            name: "Cloudflare Pages",
-            slug: "cloudflare-pages",
-            image: "Cloudflare.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: ""
-        },
-        {
-          name: "BitBucket",
-          slug: "bitbucket",
-          image: "BitBucket.png",
-          isAvailable: true,
-          type: "oauth",
-          clientId: await getClientIdBitBucket(),
-          docsLink: ""
-        },
-        {
-            name: "Codefresh",
-            slug: "codefresh",
-            image: "Codefresh.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Windmill",
-            slug: "windmill",
-            image: "Windmill.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Digital Ocean App Platform",
-            slug: "digital-ocean-app-platform",
-            image: "Digital Ocean.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Cloud 66",
-            slug: "cloud-66",
-            image: "Cloud 66.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: "",
-        },
-        {
-            name: "Northflank",
-            slug: "northflank",
-            image: "Northflank.png",
-            isAvailable: true,
-            type: "pat",
-            clientId: "",
-            docsLink: ""
-        },
-    ]
-    
-    return INTEGRATION_OPTIONS;
-}
+  const INTEGRATION_OPTIONS = [
+    {
+      name: "Heroku",
+      slug: "heroku",
+      image: "Heroku.png",
+      isAvailable: true,
+      type: "oauth",
+      clientId: await getClientIdHeroku(),
+      docsLink: ""
+    },
+    {
+      name: "Vercel",
+      slug: "vercel",
+      image: "Vercel.png",
+      isAvailable: true,
+      type: "oauth",
+      clientId: "",
+      clientSlug: await getClientSlugVercel(),
+      docsLink: ""
+    },
+    {
+      name: "Netlify",
+      slug: "netlify",
+      image: "Netlify.png",
+      isAvailable: true,
+      type: "oauth",
+      clientId: await getClientIdNetlify(),
+      docsLink: ""
+    },
+    {
+      name: "GitHub",
+      slug: "github",
+      image: "GitHub.png",
+      isAvailable: true,
+      type: "oauth",
+      clientId: await getClientIdGitHub(),
+      docsLink: ""
+    },
+    {
+      name: "Render",
+      slug: "render",
+      image: "Render.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Railway",
+      slug: "railway",
+      image: "Railway.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Fly.io",
+      slug: "flyio",
+      image: "Flyio.svg",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "AWS Parameter Store",
+      slug: "aws-parameter-store",
+      image: "Amazon Web Services.png",
+      isAvailable: true,
+      type: "custom",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Laravel Forge",
+      slug: "laravel-forge",
+      image: "Laravel Forge.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "AWS Secrets Manager",
+      slug: "aws-secret-manager",
+      image: "Amazon Web Services.png",
+      isAvailable: true,
+      type: "custom",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Azure Key Vault",
+      slug: "azure-key-vault",
+      image: "Microsoft Azure.png",
+      isAvailable: true,
+      type: "oauth",
+      clientId: await getClientIdAzure(),
+      docsLink: ""
+    },
+    {
+      name: "Circle CI",
+      slug: "circleci",
+      image: "Circle CI.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "GitLab",
+      slug: "gitlab",
+      image: "GitLab.png",
+      isAvailable: true,
+      type: "custom",
+      clientId: await getClientIdGitLab(),
+      docsLink: ""
+    },
+    {
+      name: "Terraform Cloud",
+      slug: "terraform-cloud",
+      image: "Terraform Cloud.png",
+      isAvailable: true,
+      type: "pat",
+      cliendId: "",
+      docsLink: ""
+    },
+    {
+      name: "Travis CI",
+      slug: "travisci",
+      image: "Travis CI.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "TeamCity",
+      slug: "teamcity",
+      image: "TeamCity.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Supabase",
+      slug: "supabase",
+      image: "Supabase.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Checkly",
+      slug: "checkly",
+      image: "Checkly.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Qovery",
+      slug: "qovery",
+      image: "Qovery.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "HashiCorp Vault",
+      slug: "hashicorp-vault",
+      image: "Vault.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "GCP Secret Manager",
+      slug: "gcp-secret-manager",
+      image: "Google Cloud Platform.png",
+      isAvailable: true,
+      type: "oauth",
+      clientId: await getClientIdGCPSecretManager(),
+      docsLink: ""
+    },
+    {
+      name: "Cloudflare Pages",
+      slug: "cloudflare-pages",
+      image: "Cloudflare.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "BitBucket",
+      slug: "bitbucket",
+      image: "BitBucket.png",
+      isAvailable: true,
+      type: "oauth",
+      clientId: await getClientIdBitBucket(),
+      docsLink: ""
+    },
+    {
+      name: "Codefresh",
+      slug: "codefresh",
+      image: "Codefresh.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Windmill",
+      slug: "windmill",
+      image: "Windmill.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Digital Ocean App Platform",
+      slug: "digital-ocean-app-platform",
+      image: "Digital Ocean.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Cloud 66",
+      slug: "cloud-66",
+      image: "Cloud 66.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Northflank",
+      slug: "northflank",
+      image: "Northflank.png",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    },
+    {
+      name: "Hasura Cloud",
+      slug: "hasura-cloud",
+      image: "Hasura.svg",
+      isAvailable: true,
+      type: "pat",
+      clientId: "",
+      docsLink: ""
+    }
+  ];
+
+  return INTEGRATION_OPTIONS;
+};

cypress.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    viewportWidth: 1480,
+    viewportHeight: 920,
+  },
+};

docs/CONTRIBUTING.MD

@@ -0,0 +1,24 @@
+# Contributing to the documentation
+
+## Getting familiar with Mintlify
+New to Mintlify. [Start Here](https://mintlify.com/docs/quickstart)
+
+
+## 👩‍💻 Development
+
+Install the [Mintlify CLI](https://www.npmjs.com/package/mintlify) to preview the documentation changes locally. To install, use the following command
+
+```
+npm i -g mintlify
+```
+
+Run the following command at the root of your documentation (where mint.json is)
+
+```
+mintlify dev
+```
+
+## Troubleshooting
+
+- Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
+- Page loads as a 404 - Make sure you are running in a folder with `mint.json`. Check the `/docs` folder

docs/integrations/cloud/hasura-cloud.mdx

@@ -0,0 +1,36 @@
+---
+title: "Hasura Cloud"
+description: "How to sync secrets from Infisical to Hasura Cloud"
+---
+
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+
+## Navigate to your project's integrations tab
+
+![integrations](../../images/integrations.png)
+
+## Enter your Hasura Cloud Access Token
+
+Obtain a Hasura Cloud Access Token in My Account > Access Tokens
+
+![integrations hasura cloud tokens](../../images/integrations/hasura-cloud/integrations-hasura-cloud-tokens.png)
+
+Press on the Hasura Cloud tile and input your Hasura Cloud access token to grant Infisical access to your Hasura Cloud account.
+
+![integrations hasura cloud authorization](../../images/integrations/hasura-cloud/integrations-hasura-cloud-auth.png)
+
+<Info>
+  If this is your project's first cloud integration, then you'll have to grant
+  Infisical access to your project's environment variables. Although this step
+  breaks E2EE, it's necessary for Infisical to sync the environment variables to
+  the cloud platform.
+</Info>
+
+## Start integration
+
+Select which Infisical environment secrets you want to sync to which Hasura Cloud project and press create integration to start syncing secrets to Hasura Cloud.
+
+![integrations hasura cloud](../../images/integrations/hasura-cloud/integrations-hasura-cloud-create.png)
+![integrations hasura cloud](../../images/integrations/hasura-cloud/integrations-hasura-cloud.png)

docs/mint.json

@@ -141,10 +141,10 @@
           "group": "Deployment options",
           "pages": [
             "self-hosting/overview",
+            "self-hosting/deployment-options/standalone-infisical",
             "self-hosting/deployment-options/kubernetes-helm",
             "self-hosting/deployment-options/aws-ec2",
             "self-hosting/deployment-options/docker-compose",
-            "self-hosting/deployment-options/standalone-infisical",
             "self-hosting/deployment-options/digital-ocean-marketplace"
           ]
         },
@@ -189,9 +189,7 @@
     },
     {
       "group": "Integrations",
-      "pages": [
-        "integrations/overview"
-      ]
+      "pages": ["integrations/overview"]
     },
     {
       "group": "Infrastructure Integrations",
@@ -221,9 +219,7 @@
         },
         {
           "group": "Digital Ocean",
-          "pages": [
-            "integrations/cloud/digital-ocean-app-platform"
-          ]
+          "pages": ["integrations/cloud/digital-ocean-app-platform"]
         },
         "integrations/cloud/heroku",
         "integrations/cloud/vercel",
@@ -234,6 +230,7 @@
         "integrations/cloud/laravel-forge",
         "integrations/cloud/supabase",
         "integrations/cloud/northflank",
+        "integrations/cloud/hasura-cloud",
         "integrations/cloud/terraform-cloud",
         "integrations/cloud/teamcity",
         "integrations/cloud/cloudflare-pages",
@@ -277,9 +274,7 @@
     },
     {
       "group": "Build Tool Integrations",
-      "pages": [
-        "integrations/build-tools/gradle"
-      ]
+      "pages": ["integrations/build-tools/gradle"]
     },
     {
       "group": "Overview",

docs/self-hosting/deployment-options/standalone-infisical.mdx

@@ -3,11 +3,15 @@ title: "Docker"
 description: "Learn to install Infisical purely on docker"
 ---
 
-The Infisical standalone version combines all the essential components of the application into a single container, making deployment and management more straightforward than using Kubernetes or Docker Compose. 
+The Infisical standalone version combines all the essential components into a single container, making deployment and management more straightforward than other methods. 
 
-Since all the components are bundled into one image, running this version of Infisical requires a minimum of **230MB of memory**.
+## Prerequisites
 
-This guide assumes you have basic knowledge of Docker and have it installed on your system. If you don't have Docker installed, please follow the official installation guide: https://docs.docker.com/get-docker/
+This guide assumes you have basic knowledge of Docker and have it installed on your system. If you don't have Docker installed, please follow the official installation guide [here](https://docs.docker.com/get-docker/).
+
+#### System requirements
+To have a functional deployment, we recommended compute with **2GB of RAM** and **1 CPU**.
+However, depending on your usage, you may need to further scale up system resources to meet demand.
 
 ## Pull the Infisical Docker image
 
@@ -18,59 +22,39 @@ docker pull infisical/infisical:latest
 ```
 
 ## Run with docker 
-The Infisical Docker image requires several required environment variables. 
-Add the required environment variables listed below to your docker run command. View [all configurable environment variables](../configuration/envars)
-
+To run Infisical, we'll need to configure the required configs listed below.
+Other configs can be found [here](../configuration/envars)
 
 <ParamField query="ENCRYPTION_KEY" type="string" default="none" required>
   Must be a random 16 byte hex string. Can be generated with `openssl rand -hex 16`
 </ParamField>
 
-<ParamField query="JWT_SIGNUP_SECRET" type="string" default="none" required>
+<ParamField query="AUTH_SECRET" type="string" default="none" required>
   Must be a random 16 byte hex string. Can be generated with `openssl rand -hex 16`
 </ParamField>
 
-<ParamField query="JWT_REFRESH_SECRET" type="string" default="none" required>
-  Must be a random 16 byte hex string. Can be generated with `openssl rand -hex 16`
-</ParamField>
-
-<ParamField query="JWT_AUTH_SECRET" type="string" default="none" required>
-  Must be a random 16 byte hex string. Can be generated with `openssl rand -hex 16`
-</ParamField>
-
-<ParamField query="JWT_MFA_SECRET" type="string" default="none" required>
-  Must be a random 16 byte hex string. Can be generated with `openssl rand -hex 16`
-</ParamField>
-
-<ParamField query="JWT_SERVICE_SECRET" type="string" default="none" required>
-  Must be a random 16 byte hex string. Can be generated with `openssl rand -hex 16`
-</ParamField>
-
-<ParamField query="REDIS_URL" type="string" default="none" required>
-  Redis connection string
-</ParamField>
-
 <ParamField query="MONGO_URL" type="string" default="none" required>
+  A MongoDB connection string. Can use any MongoDB PaaS such as Mongo Atlas, AWS Document DB, etc. 
   *TLS based connection string is not yet supported
 </ParamField>
 
+<ParamField query="REDIS_URL" type="string" default="none">
+  Redis connection string. Only required if you plan to use web integrations.
+</ParamField>
+
 
 Once you have added the required environment variables to your docker run command, execute it in your terminal.
 
 ```bash
 docker run -p 80:8080  \
 -e ENCRYPTION_KEY=f40c9178624764ad85a6830b37ce239a \
--e JWT_SIGNUP_SECRET=38ea90fb7998b92176080f457d890392 \
--e JWT_REFRESH_SECRET=7764c7bbf3928ad501591a3e005eb364 \
--e JWT_AUTH_SECRET=5239fea3a4720c0e524f814a540e14a2 \
--e JWT_SERVICE_SECRET=8509fb8b90c9b53e9e61d1e35826dcb5  \
+-e AUTH_SECRET=5239fea3a4720c0e524f814a540e14a2 \
 -e MONGO_URL="<>" \
--e REDIS_URL="<>" \
 infisical/infisical:latest
 ```
 
 <Warning>
-  The sample environment variables listed above are only to be used as an example and should not be used in production 
+  The above environment variable values are only to be used as an example and should not be used in production 
 </Warning>
 
 ## Verify the installation:

docs/self-hosting/overview.mdx

@@ -8,11 +8,11 @@ Self-hosted Infisical allows you to maintain your sensitive information within y
 Choose from a variety of deployment options listed below to get started.
 
 <Card
-  title="Kubernetes (recommended)"
-  color="#ea5a0c"
-  href="deployment-options/kubernetes-helm"
+  title="Docker"
+  color="#0285c7"
+  href="deployment-options/standalone-infisical"
 >
-  Use our Helm chart to Install Infisical on your Kubernetes cluster
+  Use the fully packaged docker image to deploy Infisical anywhere
 </Card>
 <CardGroup cols={2}>
   <Card
@@ -33,10 +33,10 @@ Choose from a variety of deployment options listed below to get started.
     Install Infisical using our Docker Compose template
   </Card>
   <Card
-    title="Docker"
-    color="#0285c7"
-    href="deployment-options/standalone-infisical"
-  >
-    Use the fully packaged, single docker image Infisical to deploy anywhere
-  </Card>
+  title="Kubernetes"
+  color="#ea5a0c"
+  href="deployment-options/kubernetes-helm"
+>
+  Use our Helm chart to Install Infisical on your Kubernetes cluster
+</Card>
 </CardGroup>

frontend/.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    "es6": true
+    es6: true
   },
   extends: [
     "airbnb",
@@ -96,7 +96,7 @@ module.exports = {
       }
     ]
   },
-  ignorePatterns: ["next.config.js"],
+  ignorePatterns: ["next.config.js", "cypress/**/*.js", "cypress.config.js"],
   settings: {
     "import/resolver": {
       typescript: {

frontend/cypress.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    viewportWidth: 1480,
+    viewportHeight: 920,
+  },
+};

frontend/cypress/e2e/org-overview.cy.js

@@ -0,0 +1,47 @@
+/// <reference types="cypress" />
+
+describe('organization Overview', () => {
+  beforeEach(() => {
+    cy.login(`test@localhost.local`, `testInfisical1`)
+  })
+
+  const projectName = "projectY"
+
+  it('can`t create projects with empty names', () => {
+    cy.get('.button').click()
+    cy.get('input[placeholder="Type your project name"]').type('abc').clear()
+    cy.intercept('*').as('anyRequest');
+    cy.get('@anyRequest').should('not.exist');
+  })
+
+  it('can delete a newly-created project', () => {
+    // Create a project
+    cy.get('.button').click()
+    cy.get('input[placeholder="Type your project name"]').type(`${projectName}`)
+    cy.contains('button', 'Create Project').click()
+    cy.url().should('include', '/project')
+
+    // Delete a project
+    cy.get(`[href^="/project/"][href$="/settings"] > a > .group`).click()
+    cy.contains('button', `Delete ${projectName}`).click()
+    cy.contains('button', 'Delete Project').should('have.attr', 'disabled')
+    cy.get('input[placeholder="Type to delete..."]').type('confirm')
+    cy.contains('button', 'Delete Project').should('not.have.attr', 'disabled')
+    cy.url().then((currentUrl) => {
+      let projectId = currentUrl.split("/")[4]
+      cy.intercept('DELETE', `/api/v1/workspace/${projectId}`).as('deleteProject');
+      cy.contains('button', 'Delete Project').click();
+      cy.get('@deleteProject').should('have.property', 'response').and('have.property', 'statusCode', 200);
+    })
+  })  
+
+  it('can display no projects', () => {
+    cy.intercept('/api/v1/workspace', {
+      body: {
+        "workspaces": []
+      },
+    })
+    cy.get('.border-mineshaft-700 > :nth-child(2)').should('have.text', 'You are not part of any projects in this organization yet. When you are, they will appear here.')
+  })
+
+})

frontend/cypress/e2e/org-settings.cy.js

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+
+describe('Organization Settings', () => {
+  let orgId; 
+
+  beforeEach(() => {
+    cy.login(`test@localhost.local`, `testInfisical1`)
+    cy.url().then((currentUrl) => {
+      orgId = currentUrl.split("/")[4]
+      cy.visit(`org/${orgId}/settings`)
+    })
+  })
+
+  it('can rename org', () => {
+    cy.get('input[placeholder="Acme Corp"]').clear().type('ABC')
+
+    cy.intercept('PATCH', `/api/v1/organization/${orgId}/name`).as('renameOrg');
+    cy.get('form.p-4 > .button').click()
+    cy.get('@renameOrg').should('have.property', 'response').and('have.property', 'statusCode', 200);
+    
+    cy.get('.pl-3').should("have.text", "ABC ")
+  })
+
+})

frontend/cypress/e2e/project-secret-operations.cy.js

@@ -0,0 +1,84 @@
+/// <reference types="cypress" />
+
+describe('Project Overview', () => {
+  const projectName = "projectY"
+  let projectId;
+  let isFirstTest = true;
+
+  before(() => {
+    cy.login(`test@localhost.local`, `testInfisical1`)
+
+    // Create a project
+    cy.get('.button').click()
+    cy.get('input[placeholder="Type your project name"]').type(`${projectName}`)
+    cy.contains('button', 'Create Project').click()
+    cy.url().should('include', '/project').then((currentUrl) => {
+      projectId = currentUrl.split("/")[4]
+    })
+  })
+
+  beforeEach(() => {
+    if (isFirstTest) {
+      isFirstTest = false;
+      return;  // Skip the rest of the beforeEach for the first test
+    }
+    cy.login(`test@localhost.local`, `testInfisical1`)
+    cy.visit(`/project/${projectId}/secrets/overview`)
+  })
+
+  it('can create secrets', () => {
+    cy.contains('button', 'Go to Development').click()
+    cy.contains('button', 'Add a new secret').click()
+    cy.get('input[placeholder="Type your secret name"]').type('SECRET_A')
+    cy.contains('button', 'Create Secret').click()
+    cy.get('.w-80 > .inline-flex > .input').should('have.value', 'SECRET_A')
+    cy.get(':nth-child(6) > .button > .w-min').should('have.text', '1 Commit')
+  })
+
+  it('can update secrets', () => {
+    cy.get(':nth-child(2) > .flex > .button').click()
+    cy.get('.overflow-auto > .relative > .absolute').type('VALUE_A')
+    cy.get('.button.text-primary > .svg-inline--fa').click()
+    cy.get(':nth-child(6) > .button > .w-min').should('have.text', '2 Commits')
+  })
+
+  it('can`t create duplicate-name secrets', () => {
+    cy.get(':nth-child(2) > .flex > .button').click()
+    cy.contains('button', 'Add Secret').click()
+    cy.get('input[placeholder="Type your secret name"]').type('SECRET_A')
+    cy.intercept('POST', `/api/v3/secrets/SECRET_A`).as('createSecret');
+    cy.contains('button', 'Create Secret').click()
+    cy.get('@createSecret').should('have.property', 'response').and('have.property', 'statusCode', 400);
+  })
+
+  it('can add another secret', () => {
+    cy.get(':nth-child(2) > .flex > .button').click()
+    cy.contains('button', 'Add Secret').click()
+    cy.get('input[placeholder="Type your secret name"]').type('SECRET_B')
+    cy.contains('button', 'Create Secret').click()
+    cy.get(':nth-child(6) > .button > .w-min').should('have.text', '3 Commits')
+  })
+
+  it('can delete a secret', () => {
+    cy.get(':nth-child(2) > .flex > .button').click()
+    // cy.get(':nth-child(3) > .shadow-none').trigger('mouseover')
+    cy.get(':nth-child(3) > .shadow-none > .group > .h-10 > .border-red').click()
+    cy.contains('button', 'Delete Secret').should('have.attr', 'disabled')
+    cy.get('input[placeholder="Type to delete..."]').type('SECRET_B')
+    cy.intercept('DELETE', `/api/v3/secrets/SECRET_B`).as('deleteSecret');
+    cy.contains('button', 'Delete Secret').should('not.have.attr', 'disabled')
+    cy.contains('button', 'Delete Secret').click();
+    cy.get('@deleteSecret').should('have.property', 'response').and('have.property', 'statusCode', 200);
+  })
+
+  it('can add a comment', () => {
+    return;
+    cy.get(':nth-child(2) > .flex > .button').click()
+    // for some reason this hover does not want to work
+    cy.get('.overflow-auto').trigger('mouseover').then(() => {
+      cy.get('.shadow-none > .group > .pl-4 > .h-8 > button[aria-label="add-comment"]').should('be.visible').click()
+    });
+    
+  })
+
+})

frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

frontend/cypress/support/commands.js

@@ -0,0 +1,19 @@
+
+Cypress.Commands.add('login', (username, password) => {
+    cy.visit('/login')
+    cy.get('input[placeholder="Enter your email..."]').type(username)
+    cy.get('input[placeholder="Enter your password..."]').type(password)
+    cy.contains('Continue with Email').click()
+    cy.url().should('include', '/overview')
+})
+
+// Cypress.Commands.add('login', (username, password) => {
+//     cy.session([username, password], () => {
+//         cy.visit('/login')
+//         cy.get('input[placeholder="Enter your email..."]').type(username)
+//         cy.get('input[placeholder="Enter your password..."]').type(password)
+//         cy.contains('Continue with Email').click()
+//         cy.url().should('include', '/overview')
+//         cy.wait(2000);
+//     })
+// })

frontend/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/package.json

@@ -124,6 +124,7 @@
     "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.7",
+    "cypress": "^13.3.2",
     "eslint": "^8.32.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

frontend/public/data/frequentConstants.ts

@@ -6,74 +6,75 @@ const integrationSlugNameMapping: Mapping = {
   "azure-key-vault": "Azure Key Vault",
   "aws-parameter-store": "AWS Parameter Store",
   "aws-secret-manager": "AWS Secrets Manager",
-  "heroku": "Heroku",
-  "vercel": "Vercel",
-  "netlify": "Netlify",
-  "github": "GitHub",
-  "gitlab": "GitLab",
-  "render": "Render",
+  heroku: "Heroku",
+  vercel: "Vercel",
+  netlify: "Netlify",
+  github: "GitHub",
+  gitlab: "GitLab",
+  render: "Render",
   "laravel-forge": "Laravel Forge",
-  "railway": "Railway",
-  "flyio": "Fly.io",
-  "circleci": "CircleCI",
-  "travisci": "TravisCI",
-  "supabase": "Supabase",
-  "checkly": "Checkly",
-  "qovery": "Qovery",
+  railway: "Railway",
+  flyio: "Fly.io",
+  circleci: "CircleCI",
+  travisci: "TravisCI",
+  supabase: "Supabase",
+  checkly: "Checkly",
+  qovery: "Qovery",
   "terraform-cloud": "Terraform Cloud",
-  "teamcity": "TeamCity",
+  teamcity: "TeamCity",
   "hashicorp-vault": "Vault",
   "cloudflare-pages": "Cloudflare Pages",
-  "codefresh": "Codefresh",
+  codefresh: "Codefresh",
   "digital-ocean-app-platform": "Digital Ocean App Platform",
-  "bitbucket": "BitBucket",
+  bitbucket: "BitBucket",
   "cloud-66": "Cloud 66",
-  "northflank": "Northflank",
-  "windmill": "Windmill",
-  "gcp-secret-manager": "GCP Secret Manager"
-}
+  northflank: "Northflank",
+  windmill: "Windmill",
+  "gcp-secret-manager": "GCP Secret Manager",
+  "hasura-cloud": "Hasura Cloud"
+};
 
 const envMapping: Mapping = {
   Development: "dev",
   Staging: "staging",
   Production: "prod",
-  Testing: "test",
+  Testing: "test"
 };
 
 const reverseEnvMapping: Mapping = {
   dev: "Development",
   staging: "Staging",
   prod: "Production",
-  test: "Testing",
+  test: "Testing"
 };
 
 const contextNetlifyMapping: Mapping = {
-  "dev": "Local development",
+  dev: "Local development",
   "branch-deploy": "Branch deploys",
   "deploy-preview": "Deploy Previews",
-  "production": "Production"
-}
+  production: "Production"
+};
 
 const reverseContextNetlifyMapping: Mapping = {
   "Local development": "dev",
   "Branch deploys": "branch-deploy",
   "Deploy Previews": "deploy-preview",
-  "Production": "production"
-}
+  Production: "production"
+};
 
 const plansDev: Mapping = {
-  "starter": "prod_Mb4ATFT5QAHoPM",
-  "team": "prod_NEpD2WMXUS2eDn",
-  "professional": "prod_Mb4CetZ2jE7jdl",
-  "enterprise": "licence_key_required"
-}
+  starter: "prod_Mb4ATFT5QAHoPM",
+  team: "prod_NEpD2WMXUS2eDn",
+  professional: "prod_Mb4CetZ2jE7jdl",
+  enterprise: "licence_key_required"
+};
 
 const plansProd: Mapping = {
-  "starter": "prod_Mb8oR5XNwyFTul",
-  "team": "prod_NEp7fAB3UJWK6A",
-  "professional": "prod_Mb8pUIpA0OUi5N",
-  "enterprise": "licence_key_required"
-}
+  starter: "prod_Mb8oR5XNwyFTul",
+  team: "prod_NEp7fAB3UJWK6A",
+  professional: "prod_Mb8pUIpA0OUi5N",
+  enterprise: "licence_key_required"
+};
 
 const plans = plansProd || plansDev;
 
@@ -83,4 +84,5 @@ export {
   integrationSlugNameMapping,
   plans,
   reverseContextNetlifyMapping,
-  reverseEnvMapping}
+  reverseEnvMapping
+};

frontend/public/images/integrations/Hasura.svg

@@ -0,0 +1,11 @@
+<svg width="81" height="84" viewBox="-20 -20 121 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5273_21928)">
+<path d="M79.7186 28.6019C82.1218 21.073 80.6778 6.03601 76.0158 0.487861C75.4073 -0.238064 74.2624 -0.134361 73.757 0.664158L68.0121 9.72786C66.5887 11.5427 64.0308 11.9575 62.1124 10.6923C55.8827 6.59601 48.4359 4.21082 40.4322 4.21082C32.4285 4.21082 24.9817 6.59601 18.752 10.6923C16.8336 11.9575 14.2757 11.5323 12.8523 9.72786L7.10738 0.664158C6.60199 -0.134361 5.45712 -0.238064 4.84859 0.487861C0.186621 6.03601 -1.25735 21.073 1.14583 28.6019C1.94002 31.1012 2.16693 33.7456 1.69248 36.3279C1.22834 38.879 0.753897 41.9693 0.753897 44.1056C0.753897 66.1323 18.5251 84.0004 40.4322 84.0004C62.3497 84.0004 80.1105 66.1427 80.1105 44.1056C80.1105 41.959 79.6464 38.879 79.1719 36.3279C78.6975 33.7456 78.9244 31.1012 79.7186 28.6019ZM40.4322 75.0819C23.4965 75.0819 9.71684 61.2271 9.71684 44.199C9.71684 43.639 9.73747 43.0893 9.7581 42.5397C10.3769 30.9353 17.3802 21.0108 27.3024 16.2819C31.2836 14.3738 35.7393 13.316 40.4322 13.316C45.1251 13.316 49.5808 14.3842 53.5724 16.2923C63.4945 21.0212 70.4978 30.9456 71.1166 42.5397C71.1476 43.0893 71.1579 43.639 71.1579 44.199C71.1476 61.2271 57.3679 75.0819 40.4322 75.0819Z" fill="#1EB4D4"/>
+<path d="M53.7371 56.083L45.8881 42.4044L39.153 30.997C38.9983 30.7274 38.7095 30.5615 38.3898 30.5615H31.9538C31.634 30.5615 31.3452 30.7378 31.1905 31.0074C31.0358 31.2874 31.0358 31.6296 31.2008 31.8993L37.6368 42.7881L28.9936 56.0415C28.8183 56.3111 28.7977 56.6637 28.9524 56.9541C29.1071 57.2444 29.4062 57.4207 29.7259 57.4207H36.2032C36.5023 57.4207 36.7808 57.2652 36.9458 57.0163L41.6181 49.6741L45.8056 56.9748C45.9603 57.2548 46.2594 57.4207 46.5688 57.4207H52.9533C53.273 57.4207 53.5618 57.2548 53.7165 56.9748C53.9022 56.6948 53.9022 56.363 53.7371 56.083Z" fill="#1EB4D4"/>
+</g>
+<defs>
+<clipPath id="clip0_5273_21928">
+<rect width="81" height="84" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/components/v2/Alert/Alert.stories.tsx

@@ -0,0 +1,61 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert, AlertDescription } from "./Alert";
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+  tags: ["v2"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+const ExampleComponent = () => <AlertDescription>this is a description</AlertDescription>;
+
+export const Default: Story = {
+  args: {
+    children: <ExampleComponent />
+  }
+};
+
+export const Warning: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning"
+  }
+};
+
+export const Danger: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "danger"
+  }
+};
+
+export const WithCustomIcon: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning",
+    icon: <FontAwesomeIcon icon={faPlus} />
+  }
+};
+
+export const WithOutIcon: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning",
+    icon: null
+  }
+};
+
+export const WithOutTitle: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning",
+    hideTitle: true
+  }
+};

frontend/src/components/v2/Alert/Alert.tsx

@@ -0,0 +1,85 @@
+import { forwardRef } from "react";
+import {
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { type VariantProps, cva } from "cva";
+import { twMerge } from "tailwind-merge";
+
+const alertVariants = cva(
+  "w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm flex items-center gap-x-4",
+  {
+    variants: {
+      variant: {
+        default: "",
+        danger: "text-red border-red",
+        warning: "text-yellow border-yellow"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+type AlertProps = {
+  title?: string;
+  hideTitle?: boolean;
+  icon?: React.ReactNode;
+};
+
+const variantTitleMap = {
+  default: "Info",
+  danger: "Danger",
+  warning: "Warning"
+};
+
+const variantIconMap = {
+  default: faInfoCircle,
+  danger: faExclamationCircle,
+  warning: faExclamationTriangle
+};
+
+const Alert = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> & AlertProps
+>(({ className, variant, title, icon, hideTitle = false, children, ...props }, ref) => {
+  const defaultTitle = title ?? variantTitleMap[variant ?? "default"];
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={twMerge(alertVariants({ variant }), className)}
+      {...props}
+    >
+      <div>
+        {typeof icon !== "undefined" ? (
+          <>{icon} </>
+        ) : (
+          <FontAwesomeIcon className="text-lg" icon={variantIconMap[variant ?? "default"]} />
+        )}
+      </div>
+      <div className="flex flex-col gap-y-1">
+        {hideTitle ? null : (
+          <h5 className="font-medium leading-none tracking-tight" {...props}>
+            {defaultTitle}
+          </h5>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+});
+Alert.displayName = "Alert";
+
+const AlertDescription = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={twMerge("text-sm [&_p]:leading-relaxed", className)} {...props} />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertDescription };

frontend/src/components/v2/Alert/index.tsx

@@ -0,0 +1 @@
+export { Alert, AlertDescription } from "./Alert";

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -15,6 +15,7 @@ type Props = {
   title: string;
   subTitle?: string;
   onDeleteApproved: () => Promise<void>;
+  buttonText?: string;
 };
 
 export const DeleteActionModal = ({
@@ -24,7 +25,8 @@ export const DeleteActionModal = ({
   deleteKey,
   onDeleteApproved,
   title,
-  subTitle = "This action is irreversible!"
+  subTitle = "This action is irreversible!",
+  buttonText = "Delete"
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();
@@ -56,7 +58,7 @@ export const DeleteActionModal = ({
         title={title}
         subTitle={subTitle}
         footerContent={
-          <div className="flex items-center">
+          <div className="flex items-center mx-2">
             <Button
               className="mr-4"
               colorSchema="danger"
@@ -64,7 +66,7 @@ export const DeleteActionModal = ({
               onClick={onDelete}
               isLoading={isLoading}
             >
-              Delete
+              {buttonText}
             </Button>
             <ModalClose asChild>
               <Button variant="plain" colorSchema="secondary" onClick={onClose}>
@@ -87,9 +89,9 @@ export const DeleteActionModal = ({
                 Type <span className="font-bold">{deleteKey}</span> to delete the resource
               </div>
             }
-            className="mb-4"
+            className="mb-0"
           >
-            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} />
+            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} placeholder="Type to delete..." />
           </FormControl>
         </form>
       </ModalContent>

frontend/src/components/v2/index.tsx

@@ -1,4 +1,5 @@
 export * from "./Accordion";
+export * from "./Alert";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";

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

@@ -0,0 +1,4 @@
+export {
+  useCreateAPIKeyV2,
+  useDeleteAPIKeyV2,
+  useUpdateAPIKeyV2} from "./queries";

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

@@ -0,0 +1,62 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { userKeys } from "../users/queries";
+import {
+  APIKeyDataV2,
+  CreateAPIKeyDataV2DTO,
+  CreateServiceTokenDataV3Res,
+  DeleteAPIKeyDataV2DTO,
+  UpdateAPIKeyDataV2DTO} from "./types";
+
+export const useCreateAPIKeyV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<CreateServiceTokenDataV3Res, {}, CreateAPIKeyDataV2DTO>({
+    mutationFn: async ({
+      name
+    }) => {
+      const { data } = await apiRequest.post("/api/v3/api-key", {
+        name
+      });
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.myAPIKeysV2);
+    }
+  });
+};
+
+export const useUpdateAPIKeyV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<APIKeyDataV2, {}, UpdateAPIKeyDataV2DTO>({
+    mutationFn: async ({
+      apiKeyDataId,
+      name
+    }) => {
+      const { data: { apiKeyData } } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
+        name
+      });
+      return apiKeyData;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.myAPIKeysV2);
+    }
+  });
+};
+
+export const useDeleteAPIKeyV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<APIKeyDataV2, {}, DeleteAPIKeyDataV2DTO>({
+    mutationFn: async ({
+      apiKeyDataId
+    }) => {
+      const { data: { apiKeyData } } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
+      return apiKeyData;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.myAPIKeysV2);
+    }
+  });
+};

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

@@ -0,0 +1,27 @@
+export type APIKeyDataV2 = {
+    _id: string;
+    name: string;
+    user: string;
+    lastUsed?: string;
+    usageCount: number;
+    createdAt: string;
+    updatedAt: string;
+  };
+
+export type CreateAPIKeyDataV2DTO = {
+    name: string;
+}
+
+export type CreateServiceTokenDataV3Res = {
+    apiKeyData: APIKeyDataV2;
+    apiKey: string;
+}
+
+export type UpdateAPIKeyDataV2DTO = {
+    apiKeyDataId: string;
+    name: string;
+}
+
+export type DeleteAPIKeyDataV2DTO = {
+    apiKeyDataId: string;
+}

frontend/src/hooks/api/index.tsx

@@ -1,3 +1,4 @@
+export * from "./apiKeys";
 export * from "./auditLogs";
 export * from "./auth";
 export * from "./bots";

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

@@ -4,4 +4,5 @@ export {
     useDeleteServiceToken, 
     useDeleteServiceTokenV3,
     useGetUserWsServiceTokens,
-    useUpdateServiceTokenV3} from "./queries";
+    useUpdateServiceTokenV3
+} from "./queries";

frontend/src/hooks/api/users/index.tsx

@@ -7,6 +7,7 @@ export {
   useDeleteOrgMembership,
   useDeleteUser,
   useGetMyAPIKeys,
+  useGetMyAPIKeysV2,
   useGetMyIp,
   useGetMyOrganizationProjects,
   useGetMySessions,

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

@@ -7,6 +7,7 @@ import {
 import { apiRequest } from "@app/config/request";
 import { setAuthToken } from "@app/reactQuery";
 
+import { APIKeyDataV2 } from "../apiKeys/types";
 import { useUploadWsKey } from "../keys/queries";
 import { workspaceKeys } from "../workspace/queries";
 import {
@@ -24,12 +25,13 @@ import {
   User
 } from "./types";
 
-const userKeys = {
+export const userKeys = {
   getUser: ["user"] as const,
   userAction: ["user-action"] as const,
   getOrgUsers: (orgId: string) => [{ orgId }, "user"],
   myIp: ["ip"] as const,
   myAPIKeys: ["api-keys"] as const,
+  myAPIKeysV2: ["api-keys-v2"] as const,
   mySessions: ["sessions"] as const,
   myOrganizationProjects: (orgId: string) => [{ orgId }, "organization-projects"] as const
 };
@@ -270,7 +272,7 @@ export const useGetMyIp = () => {
   });
 };
 
-export const useGetMyAPIKeys = () => {
+export const useGetMyAPIKeys = () => { // TODO: deprecate (moving to API Key V2)
   return useQuery({
     queryKey: userKeys.myAPIKeys,
     queryFn: async () => {
@@ -281,7 +283,18 @@ export const useGetMyAPIKeys = () => {
   });
 };
 
-export const useCreateAPIKey = () => {
+export const useGetMyAPIKeysV2 = () => {
+  return useQuery({
+    queryKey: userKeys.myAPIKeysV2,
+    queryFn: async () => {
+      const { data: { apiKeyData } } = await apiRequest.get<{ apiKeyData: APIKeyDataV2[] }>("/api/v3/users/me/api-keys");
+      return apiKeyData;
+    },
+    enabled: true
+  });
+};
+
+export const useCreateAPIKey = () => { // TODO: deprecate (moving to API Key V2)
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({ name, expiresIn }: { name: string; expiresIn: number }) => {
@@ -298,7 +311,7 @@ export const useCreateAPIKey = () => {
   });
 };
 
-export const useDeleteAPIKey = () => {
+export const useDeleteAPIKey = () => { // TODO: deprecate (moving to API Key V2)
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (apiKeyDataId: string) => {

frontend/src/pages/integrations/flyio/authorize.tsx

@@ -41,7 +41,6 @@ export default function FlyioAuthorizeIntegrationPage() {
   const onFormSubmit = async ({
     accessToken
   }: FormData) => {
-    console.log("onFormSubmit accessToken: ", accessToken);
     try {
       setIsLoading(true);
       

frontend/src/pages/integrations/hasura-cloud/authorize.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { Button, Card, CardTitle, FormControl, Input } from "@app/components/v2";
+import { useSaveIntegrationAccessToken } from "@app/hooks/api";
+
+const schema = yup.object({
+  accessToken: yup.string().trim().required("Hasura Cloud Access Token is required")
+});
+
+type FormData = yup.InferType<typeof schema>;
+
+const APP_NAME = "Hasura Cloud";
+export default function HasuraCloudAuthorizeIntegrationPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
+  const { control, handleSubmit } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      accessToken: ""
+    }
+  });
+
+  const onFormSubmit = async ({ accessToken }: FormData) => {
+    try {
+      setIsLoading(true);
+
+      const integrationAuth = await mutateAsync({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "hasura-cloud",
+        accessToken
+      });
+
+      setIsLoading(false);
+      router.push(`/integrations/hasura-cloud/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      setIsLoading(false);
+      console.error(err);
+    }
+  };
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Authorize {APP_NAME} Integration</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle
+          className="px-6 text-left text-xl"
+          subTitle="After adding your access token, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Hasura.svg"
+                height={30}
+                width={30}
+                alt={`${APP_NAME} logo`}
+              />
+            </div>
+            <span className="ml-2.5">{APP_NAME} Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/hasura-cloud" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="ml-1.5 mb-[0.07rem] text-xxs"
+                  />
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <form onSubmit={handleSubmit(onFormSubmit)} className="px-6 pb-8 text-right">
+          <Controller
+            control={control}
+            name="accessToken"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label={`${APP_NAME} Access Token`}
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input {...field} placeholder="" />
+              </FormControl>
+            )}
+          />
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mt-2 w-min"
+            size="sm"
+            type="submit"
+            isLoading={isLoading}
+          >
+            Connect to {APP_NAME}
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}
+
+HasuraCloudAuthorizeIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/hasura-cloud/create.tsx

@@ -0,0 +1,228 @@
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import queryString from "query-string";
+import * as yup from "yup";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useCreateIntegration } from "@app/hooks/api";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById
+} from "@app/hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "@app/hooks/api/workspace";
+
+const schema = yup.object({
+  secretPath: yup.string().trim().required("Secret path is required"),
+  sourceEnvironment: yup.string().trim().required("Project environment is required"),
+  appId: yup.string().trim().required("Hasura Cloud project is required")
+});
+
+type FormData = yup.InferType<typeof schema>;
+
+const APP_NAME = "Hasura Cloud";
+export default function HasuraCloudCreateIntegrationPage() {
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
+  const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById(
+    (integrationAuthId as string) ?? ""
+  );
+
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } =
+    useGetIntegrationAuthApps({
+      integrationAuthId: (integrationAuthId as string) ?? ""
+    });
+
+  const onFormSubmit = async ({ secretPath, sourceEnvironment, appId }: FormData) => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      const app = integrationAuthApps?.find((data) => data.appId === appId);
+      await mutateAsync({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        sourceEnvironment,
+        secretPath,
+        appId,
+        app: app?.name
+      });
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth && workspace && integrationAuthApps ? (
+    <div className="flex h-full w-full flex-col items-center justify-center">
+      <Head>
+        <title>Set Up {APP_NAME} Integration</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle
+          className="px-6 text-left text-xl"
+          subTitle={`Choose which environment or folder in Infisical you want to sync to ${APP_NAME} environment variables.`}
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Hasura.svg"
+                height={30}
+                width={30}
+                alt={`${APP_NAME} logo`}
+              />
+            </div>
+            <span className="ml-2.5">{APP_NAME} Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/flyio" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="ml-1.5 mb-[0.07rem] text-xxs"
+                  />
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+
+        <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full flex-col px-6">
+          <Controller
+            control={control}
+            name="sourceEnvironment"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Project Environment"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  className="w-full border border-mineshaft-500"
+                  value={field.value}
+                  onValueChange={(val) => {
+                    field.onChange(val);
+                  }}
+                >
+                  {workspace?.environments.map((sourceEnvironment) => (
+                    <SelectItem
+                      value={sourceEnvironment.slug}
+                      key={`source-environment-${sourceEnvironment.slug}`}
+                    >
+                      {sourceEnvironment.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="secretPath"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Secrets Path" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="appId"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Hasura Cloud Project"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  className="w-full border border-mineshaft-500"
+                  value={field.value}
+                  isDisabled={integrationAuthApps?.length === 0}
+                  onValueChange={(val) => {
+                    field.onChange(val);
+                  }}
+                >
+                  {integrationAuthApps?.map((project) => (
+                    <SelectItem value={project.appId ?? ""} key={`project-id-${project.appId}`}>
+                      {project.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+
+          <Button
+            type="submit"
+            color="mineshaft"
+            variant="outline_bg"
+            className="mb-6 mt-2 ml-auto"
+            isLoading={isSubmitting}
+          >
+            Create Integration
+          </Button>
+        </form>
+      </Card>
+    </div>
+  ) : (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up {APP_NAME} Integration</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      {isIntegrationAuthLoading || isIntegrationAuthAppsLoading ? (
+        <img
+          src="/images/loading/loading.gif"
+          height={70}
+          width={120}
+          alt="infisical loading indicator"
+        />
+      ) : (
+        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+          <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
+          <p>
+            Something went wrong. Please contact{" "}
+            <a
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="mailto:support@infisical.com"
+            >
+              support@infisical.com
+            </a>{" "}
+            if the issue persists.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+HasuraCloudCreateIntegrationPage.requireAuth = true;

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -1,6 +1,6 @@
 import crypto from "crypto";
 
-import { TCloudIntegration,UserWsKeyPair } from "@app/hooks/api/types";
+import { TCloudIntegration, UserWsKeyPair } from "@app/hooks/api/types";
 
 import {
   decryptAssymmetric,
@@ -32,11 +32,10 @@ export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) =
 
 export const redirectForProviderAuth = (integrationOption: TCloudIntegration) => {
   try {
-
     // generate CSRF token for OAuth2 code-token exchange integrations
     const state = crypto.randomBytes(16).toString("hex");
     localStorage.setItem("latestCSRFToken", state);
-    
+
     let link = "";
     switch (integrationOption.slug) {
       case "gcp-secret-manager":
@@ -123,6 +122,9 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
       case "teamcity":
         link = `${window.location.origin}/integrations/teamcity/authorize`;
         break;
+      case "hasura-cloud":
+        link = `${window.location.origin}/integrations/hasura-cloud/authorize`;
+        break;
       default:
         break;
     }
@@ -130,7 +132,6 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
     if (link !== "") {
       window.location.assign(link);
     }
-    
   } catch (err) {
     console.error(err);
   }

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -202,6 +202,8 @@ export const IntegrationsPage = withProjectPermission(
           integrations={integrations}
           environments={environments}
           onIntegrationDelete={({ _id: id }, cb) => handleIntegrationDelete(id, cb)}
+          isBotActive={bot?.isActive}
+          workspaceId={workspaceId}
         />
         <CloudIntegrationSection
           isLoading={isCloudIntegrationsLoading || isIntegrationAuthLoading}

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -1,9 +1,12 @@
+import Link from "next/link";
 import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
+  Alert,
+  AlertDescription,
   DeleteActionModal,
   EmptyState,
   FormControl,
@@ -23,17 +26,22 @@ type Props = {
   integrations?: TIntegration[];
   isLoading?: boolean;
   onIntegrationDelete: (integration: TIntegration, cb: () => void) => void;
+  isBotActive: boolean | undefined;
+  workspaceId: string;
 };
 
 export const IntegrationsSection = ({
   integrations = [],
   environments = [],
   isLoading,
-  onIntegrationDelete
+  onIntegrationDelete,
+  isBotActive,
+  workspaceId
 }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteConfirmation"
   ] as const);
+
   return (
     <div className="mb-8">
       <div className="mx-4 mb-4 mt-6 flex flex-col items-start justify-between px-2 text-xl">
@@ -45,7 +53,22 @@ export const IntegrationsSection = ({
           <Skeleton className="h-28" />
         </div>
       )}
-      {!isLoading && !integrations.length && (
+
+      {!isBotActive && (
+        <div className="px-6 py-4">
+          <Alert hideTitle variant="warning">
+            <AlertDescription>
+              All the active integrations will be disabled. Disable End-to-End Encryption in{" "}
+              <Link href={`/project/${workspaceId}/settings`} passHref>
+                <a className="underline underline-offset-2">project settings </a>
+              </Link>
+              to re-enable it .
+            </AlertDescription>
+          </Alert>
+        </div>
+      )}
+
+      {!isLoading && !integrations.length && isBotActive && (
         <div className="mx-6">
           <EmptyState
             className="rounded-md border border-mineshaft-700 pt-8 pb-4"
@@ -53,7 +76,7 @@ export const IntegrationsSection = ({
           />
         </div>
       )}
-      {!isLoading && (
+      {!isLoading && isBotActive && (
         <div className="flex flex-col space-y-4 p-6 pt-0">
           {integrations?.map((integration) => (
             <div

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -239,7 +239,7 @@ export const SecretMainPage = () => {
               onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
             />
             <div className="mt-3 overflow-y-auto overflow-x-hidden thin-scrollbar bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm">
-              <div className="flex flex-col ">
+              <div className="flex flex-col" id="dashboard">
                 {isNotEmtpy && (
                   <div className="flex font-medium border-b border-mineshaft-600">
                     <div style={{ width: "2.8rem" }} className="px-4 py-3 flex-shrink-0" />

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -289,7 +289,7 @@ export const ActionBar = ({
                 className="h-10"
                 isDisabled={!isAllowed}
               >
-                {snapshotCount} Commits
+                {`${snapshotCount} ${snapshotCount === 1 ? "Commit" : "Commits"}`}
               </Button>
             )}
           </ProjectPermissionCan>

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -105,7 +105,7 @@ export const CreateSecretForm = ({
               >
                 <SecretInput
                   {...field}
-                  containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900  px-2 py-1.5"
+                  containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
                 />
               </FormControl>
             )}

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -339,6 +339,7 @@ export const SecretListView = ({
         title="Do you want to delete this secret?"
         onChange={(isOpen) => handlePopUpToggle("deleteSecret", isOpen)}
         onDeleteApproved={handleSecretDelete}
+        buttonText="Delete Secret"
       />
       <SecretDetailSidebar
         environment={environment}

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -111,9 +111,18 @@ export const SecretOverviewPage = () => {
     try {
       // create folder if not existing
       if (secretPath !== "/") {
+        // /hello/world -> ["", "hello","world"]
         const path = secretPath.split("/");
-        const directory = path.slice(0, -1).join("/");
-        const folderName = path.at(-1);
+        // if its empty string on join use and OR gate to convert to /
+        // /hello
+        const directory =
+          path
+            .slice(0, -1)
+            .reduce(
+              (prev, curr, index, arr) => prev + (index + 1 === arr.length ? curr : `/${curr}`),
+              ""
+            ) || "/";
+        const folderName = path.at(-1); // world
         if (folderName && directory) {
           await createFolder({
             workspaceId,

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

@@ -10,7 +10,7 @@ export const OrgGeneralTab = () => {
   const { user } = useUser();
   const { data: members } = useGetOrgUsers(currentOrg?._id ?? "");
 
-  const membershipOrg = members?.find((member) => member.user._id === user._id);
+  const membershipOrg = members?.find((member) => member.user._id === user?._id);
 
   return (
     <div>

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Modal.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    IconButton,
+    Input,
+    Modal,
+    ModalContent} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import {
+    useCreateAPIKeyV2,
+    useUpdateAPIKeyV2
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    name: yup.string().required("API Key V2 name is required")
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+    popUp: UsePopUpState<["apiKeyV2"]>;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["apiKeyV2"]>, state?: boolean) => void;
+};
+
+export const APIKeyV2Modal = ({
+    popUp,
+    handlePopUpToggle
+}: Props) => {
+    const [newAPIKey, setNewAPIKey] = useState("");
+    const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+
+    const { createNotification } = useNotificationContext();
+    
+    const { mutateAsync: createMutateAsync } = useCreateAPIKeyV2();
+    const { mutateAsync: updateMutateAsync } = useUpdateAPIKeyV2();
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema),
+        defaultValues: {
+            name: ""
+        }
+    });
+
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+
+        if (isAPIKeyCopied) {
+            timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+        }
+
+        return () => clearTimeout(timer);
+    }, [setIsAPIKeyCopied]);
+
+    useEffect(() => {
+        const apiKeyData = popUp?.apiKeyV2?.data as { 
+            apiKeyDataId: string;
+            name: string;
+        };
+        
+        if (apiKeyData) {
+            reset({
+                name: apiKeyData.name
+            });
+        } else {
+            reset({
+                name: ""
+            });
+        }
+    }, [popUp?.apiKeyV2?.data]);
+
+    const copyTokenToClipboard = () => {
+        navigator.clipboard.writeText(newAPIKey);
+        setIsAPIKeyCopied.on();
+    };
+
+    const onFormSubmit = async ({
+        name
+    }: FormData) => {
+        try {
+            const apiKeyData = popUp?.apiKeyV2?.data as { 
+                apiKeyDataId: string;
+                name: string;
+            };
+            
+            if (apiKeyData) {
+                // update
+
+                await updateMutateAsync({
+                    apiKeyDataId: apiKeyData.apiKeyDataId,
+                    name
+                });
+
+                handlePopUpToggle("apiKeyV2", false);
+            } else {
+                // create
+
+                const { apiKey } = await createMutateAsync({
+                    name
+                });
+                
+                setNewAPIKey(apiKey);
+            }
+            
+            createNotification({
+                text: `Successfully ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
+                type: "success"
+            });
+        
+            reset();
+            
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
+                type: "error"
+            });
+        }
+    }
+
+    const hasAPIKey = Boolean(newAPIKey);
+
+    return (
+        <Modal
+            isOpen={popUp?.apiKeyV2?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("apiKeyV2", isOpen);
+                reset();
+                setNewAPIKey("");
+            }}
+        >
+            <ModalContent title={`${popUp?.apiKeyV2?.data ? "Update" : "Create"} API Key V2`}>
+                {!hasAPIKey ? (
+                    <form onSubmit={handleSubmit(onFormSubmit)}>
+                        <Controller
+                            control={control}
+                            defaultValue=""
+                            name="name"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Name"
+                                    isError={Boolean(error)}
+                                    errorText={error?.message}
+                                >
+                                <Input 
+                                    {...field} 
+                                    placeholder="My API Key"
+                                />
+                                </FormControl>
+                            )}
+                        />
+                        <div className="mt-8 flex items-center">
+                            <Button
+                                className="mr-4"
+                                size="sm"
+                                type="submit"
+                                isLoading={isSubmitting}
+                                isDisabled={isSubmitting}
+                            >
+                                {popUp?.apiKeyV2?.data ? "Update" : "Create"}
+                            </Button>
+                            <Button colorSchema="secondary" variant="plain">
+                                Cancel
+                            </Button>
+                        </div>
+                    </form>
+                ) : (
+                    <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                        <p className="mr-4 break-all">{newAPIKey}</p>
+                        <IconButton
+                            ariaLabel="copy icon"
+                            colorSchema="secondary"
+                            className="group relative"
+                            onClick={copyTokenToClipboard}
+                        >
+                            <FontAwesomeIcon icon={isAPIKeyCopied ? 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>
+                )}
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Section.tsx

@@ -0,0 +1,81 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    DeleteActionModal
+} from "@app/components/v2";
+import { useDeleteAPIKeyV2 } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { APIKeyV2Modal } from "./APIKeyV2Modal";
+import { APIKeyV2Table } from "./APIKeyV2Table";
+
+export const APIKeyV2Section = () => {
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync: deleteMutateAsync } = useDeleteAPIKeyV2();
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "apiKeyV2",
+        "deleteAPIKeyV2"
+    ] as const);
+    
+    const onDeleteAPIKeyDataSubmit = async (apiKeyDataId: string) => {
+        try {
+            await deleteMutateAsync({
+                apiKeyDataId
+            });
+            
+            createNotification({
+                text: "Successfully deleted API Key V2",
+                type: "success"
+            });
+            
+            handlePopUpClose("deleteAPIKeyV2");
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to delete API Key V2",
+                type: "error"
+            });
+        }
+      }
+
+    return (
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+            <div className="flex justify-between mb-8">
+                <p className="text-xl font-semibold text-mineshaft-100">
+                    API Keys V2 (Beta)
+                </p>
+                <Button
+                    colorSchema="secondary"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={() => handlePopUpOpen("apiKeyV2")}
+                >
+                    Add API Key
+                </Button>
+            </div>
+            <APIKeyV2Table 
+                handlePopUpOpen={handlePopUpOpen}
+            />
+            <APIKeyV2Modal
+                popUp={popUp}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+            <DeleteActionModal
+                isOpen={popUp.deleteAPIKeyV2.isOpen}
+                title={`Are you sure want to delete ${
+                (popUp?.deleteAPIKeyV2?.data as { name: string })?.name || ""
+                }?`}
+                onChange={(isOpen) => handlePopUpToggle("deleteAPIKeyV2", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={() => 
+                    onDeleteAPIKeyDataSubmit(
+                        (popUp?.deleteAPIKeyV2?.data as { apiKeyDataId: string })?.apiKeyDataId
+                    )
+                }
+            />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Table.tsx

@@ -0,0 +1,107 @@
+import { faKey, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import {
+    EmptyState,
+    IconButton,
+    Table,
+    TableContainer,
+    TableSkeleton,
+    TBody,
+    Td,
+    Th,
+    THead,
+    Tr
+} from "@app/components/v2";
+import {
+    useGetMyAPIKeysV2
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    handlePopUpOpen: (
+      popUpName: keyof UsePopUpState<["deleteAPIKeyV2", "apiKeyV2"]>,
+      data?: {
+        apiKeyDataId?: string;
+        name?: string;
+      }
+    ) => void;
+  };
+
+export const APIKeyV2Table = ({
+    handlePopUpOpen
+}: Props) => {
+    const { data, isLoading } = useGetMyAPIKeysV2();
+    return (
+        <TableContainer>
+            <Table>
+                <THead>
+                    <Tr>
+                        <Th className="">Name</Th>
+                        <Th className="">Last Used</Th>
+                        <Th className="">Created At</Th>
+                        <Th className="w-5" />
+                    </Tr>
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={4} innerKey="api-keys-v2" />}
+                    {!isLoading && 
+                    data && 
+                    data.length > 0 && 
+                    data.map(({
+                        _id,
+                        name,
+                        lastUsed,
+                        createdAt
+                    }) => {
+                        return (
+                            <Tr className="h-10" key={`api-key-v2-${_id}`}>
+                                <Td>{name}</Td>
+                                <Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
+                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                                <Td className="flex justify-end">
+                                    <IconButton
+                                        onClick={async () => {
+                                            handlePopUpOpen("apiKeyV2", {
+                                                apiKeyDataId: _id,
+                                                name
+                                            });
+                                        }}
+                                        size="lg"
+                                        colorSchema="primary"
+                                        variant="plain"
+                                        ariaLabel="update"
+                                    >
+                                        <FontAwesomeIcon icon={faPencil} />
+                                    </IconButton>
+                                    <IconButton
+                                        onClick={() => {
+                                            handlePopUpOpen("deleteAPIKeyV2", {
+                                                apiKeyDataId: _id
+                                            });
+                                        }}
+                                        size="lg"
+                                        colorSchema="danger"
+                                        variant="plain"
+                                        ariaLabel="update"
+                                        className="ml-4"
+                                    >
+                                        <FontAwesomeIcon icon={faXmark} />
+                                    </IconButton>
+                                </Td>
+                            </Tr>
+                        );
+                    })}
+                    {!isLoading && data && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={4}>
+                                <EmptyState title="No API key v2 on file" icon={faKey} />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/index.tsx

@@ -0,0 +1 @@
+export { APIKeyV2Section } from "./APIKeyV2Section";

frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx

@@ -1,7 +1,11 @@
+// import { APIKeyV2Section } from "../APIKeyV2Section";
 import { APIKeySection } from "../APIKeySection";
 
 export const PersonalAPIKeyTab = () => {
     return (
-        <APIKeySection />
+        <>
+            {/* <APIKeyV2Section /> */}
+            <APIKeySection />
+        </>
     );
 }

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

@@ -77,9 +77,10 @@ export const DeleteProjectSection = () => {
         <DeleteActionModal
             isOpen={popUp.deleteWorkspace.isOpen}
             title="Are you sure want to delete this project?"
-            subTitle={`Permanently remove ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
+            subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
             onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
             deleteKey="confirm"
+            buttonText="Delete Project"
             onDeleteApproved={handleDeleteWorkspaceSubmit}
         />
     </div>

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

@@ -3,7 +3,7 @@ import {
   decryptAssymmetric,
   encryptAssymmetric
 } from "@app/components/utilities/cryptography/crypto";
-import { Checkbox } from "@app/components/v2";
+import { Alert, AlertDescription, Checkbox } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
 
@@ -76,30 +76,39 @@ export const E2EESection = () => {
   };
 
   return bot ? (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <p className="mb-3 text-xl font-semibold">End-to-End Encryption</p>
-      <p className="text-gray-400 mb-8">
+      <p className="mb-8 text-gray-400">
         Disabling, end-to-end encryption (E2EE) unlocks capabilities like native integrations to
         cloud providers as well as HTTP calls to get secrets back raw but enables the server to
         read/decrypt your secret values.
       </p>
-      <p className="text-gray-400 mb-8">
+      <p className="mb-8 text-gray-400">
         Note that, even with E2EE disabled, your secrets are always encrypted at rest.
       </p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
-          <div className="w-max">
-            <Checkbox
-              className="data-[state=checked]:bg-primary"
-              id="autoCapitalization"
-              isChecked={!bot.isActive}
-              isDisabled={!isAllowed}
-              onCheckedChange={async () => {
-                await toggleBotActivate();
-              }}
-            >
-              End-to-end encryption enabled
-            </Checkbox>
+          <div className="flex w-full flex-col gap-y-3">
+            <div className="w-max">
+              <Checkbox
+                className="data-[state=checked]:bg-primary"
+                id="autoCapitalization"
+                isChecked={!bot.isActive}
+                isDisabled={!isAllowed}
+                onCheckedChange={async () => {
+                  await toggleBotActivate();
+                }}
+              >
+                End-to-end encryption enabled
+              </Checkbox>
+            </div>
+            <div>
+              <Alert variant="warning">
+                <AlertDescription>
+                  Enabling End-to-end encryption disables all the integrations
+                </AlertDescription>
+              </Alert>
+            </div>
           </div>
         )}
       </ProjectPermissionCan>