Update build-staging-and-deploy.yml

Fix: UI indicator for imports

.github/workflows/build-staging-and-deploy.yml

@@ -8,6 +8,15 @@ jobs:
     steps:
       - name: ☁️ Checkout source
         uses: actions/checkout@v3
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_FOR_ECR }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_FOR_ECR }}
+          aws-region: us-east-1
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v1
       - name: 📦 Install dependencies to test all dependencies
         run: npm ci --only-production
         working-directory: backend
@@ -35,16 +44,7 @@ jobs:
           context: .
           file: Dockerfile.standalone-infisical
           tags: infisical/infisical:test
-      # - name: ⏻ Spawn backend container and dependencies
+      - name: 🏗️ Build backend and push to docker hub
-      #   run: |
-      #     docker compose -f .github/resources/docker-compose.be-test.yml up --wait --quiet-pull
-      # - name: 🧪 Test backend image
-      #   run: |
-      #     ./.github/resources/healthcheck.sh infisical-backend-test
-      # - name: ⏻ Shut down backend container and dependencies
-      #   run: |
-      #     docker compose -f .github/resources/docker-compose.be-test.yml down
-      - name: 🏗️ Build backend and push
         uses: depot/build-push-action@v1
         with:
           project: 64mmf0n610
@@ -59,6 +59,8 @@ jobs:
           build-args: |
             POSTHOG_API_KEY=${{ secrets.PUBLIC_POSTHOG_API_KEY }}
             INFISICAL_PLATFORM_VERSION=${{ steps.extract_version.outputs.version }}
+    
+    
   postgres-migration:
     name: Run latest migration files
     runs-on: ubuntu-latest

Dockerfile.standalone-infisical

@@ -118,9 +118,6 @@ WORKDIR /backend
 
 ENV TELEMETRY_ENABLED true
 
-HEALTHCHECK --interval=10s --timeout=3s --start-period=10s \  
-  CMD node healthcheck.js
-
 EXPOSE 8080
 EXPOSE 443
 

README.md

@@ -10,7 +10,8 @@
   <a href="https://infisical.com/">Infisical Cloud</a> |
   <a href="https://infisical.com/docs/self-hosting/overview">Self-Hosting</a> |
   <a href="https://infisical.com/docs/documentation/getting-started/introduction">Docs</a> |
-  <a href="https://www.infisical.com">Website</a>
+  <a href="https://www.infisical.com">Website</a> |
+  <a href="https://infisical.com/careers">Hiring (Remote/SF)</a>
 </h4>
 
 <p align="center">

backend/src/ee/routes/v1/org-role-router.ts

@@ -19,7 +19,7 @@ export const registerOrgRoleRouter = async (server: FastifyZodProvider) => {
           .min(1)
           .trim()
           .refine(
-            (val) => Object.keys(OrgMembershipRole).includes(val),
+            (val) => !Object.keys(OrgMembershipRole).includes(val),
             "Please choose a different slug, the slug you have entered is reserved"
           )
           .refine((v) => slugify(v) === v, {

backend/src/ee/services/secret-rotation/secret-rotation-queue/secret-rotation-queue-fn.ts

@@ -9,6 +9,7 @@ import jmespath from "jmespath";
 import knex from "knex";
 
 import { getConfig } from "@app/lib/config/env";
+import { getDbConnectionHost } from "@app/lib/knex";
 import { alphaNumericNanoId } from "@app/lib/nanoid";
 
 import { TAssignOp, TDbProviderClients, TDirectAssignOp, THttpProviderFunction } from "../templates/types";
@@ -89,7 +90,7 @@ export const secretRotationDbFn = async ({
   const appCfg = getConfig();
 
   const ssl = ca ? { rejectUnauthorized: false, ca } : undefined;
-  if (host === "localhost" || host === "127.0.0.1" || appCfg.DB_CONNECTION_URI.includes(host))
+  if (host === "localhost" || host === "127.0.0.1" || getDbConnectionHost(appCfg.DB_CONNECTION_URI) === host)
     throw new Error("Invalid db host");
 
   const db = knex({

backend/src/lib/knex/connection.ts

@@ -0,0 +1,11 @@
+import { URL } from "url"; // Import the URL class
+
+export const getDbConnectionHost = (urlString: string) => {
+  try {
+    const url = new URL(urlString);
+    // Split hostname and port (if provided)
+    return url.hostname.split(":")[0];
+  } catch (error) {
+    return null;
+  }
+};

backend/src/lib/knex/index.ts

@@ -4,6 +4,7 @@ import { Tables } from "knex/types/tables";
 
 import { DatabaseError } from "../errors";
 
+export * from "./connection";
 export * from "./join";
 export * from "./select";
 

backend/src/server/plugins/swagger.ts

@@ -14,13 +14,13 @@ export const fastifySwagger = fp(async (fastify) => {
         version: "0.0.1"
       },
       servers: [
-        {
-          url: "http://localhost:8080",
-          description: "Local server"
-        },
         {
           url: "https://app.infisical.com",
           description: "Production server"
+        },
+        {
+          url: "http://localhost:8080",
+          description: "Local server"
         }
       ],
       components: {

backend/src/server/routes/v2/project-router.ts

@@ -150,8 +150,7 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
             message: "Slug must be a valid slug"
           })
           .optional()
-          .describe(PROJECTS.CREATE.slug),
+          .describe(PROJECTS.CREATE.slug)
-        organizationSlug: z.string().trim().describe(PROJECTS.CREATE.organizationSlug)
       }),
       response: {
         200: z.object({
@@ -166,7 +165,6 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
         actor: req.permission.type,
         actorOrgId: req.permission.orgId,
         actorAuthMethod: req.permission.authMethod,
-        orgSlug: req.body.organizationSlug,
         workspaceName: req.body.projectName,
         slug: req.body.slug
       });

backend/src/services/project/project-service.ts

@@ -92,7 +92,6 @@ export const projectServiceFactory = ({
    * Create workspace. Make user the admin
    * */
   const createProject = async ({
-    orgSlug,
     actor,
     actorId,
     actorOrgId,
@@ -100,13 +99,7 @@ export const projectServiceFactory = ({
     workspaceName,
     slug: projectSlug
   }: TCreateProjectDTO) => {
-    if (!orgSlug) {
+    const organization = await orgDAL.findOne({ id: actorOrgId });
-      throw new BadRequestError({
-        message: "Must provide organization slug to create project"
-      });
-    }
-
-    const organization = await orgDAL.findOne({ slug: orgSlug });
 
     const { permission, membership: orgMembership } = await permissionService.getOrgPermission(
       actor,

backend/src/services/project/project-types.ts

@@ -24,7 +24,6 @@ export type TCreateProjectDTO = {
   actorAuthMethod: ActorAuthMethod;
   actorId: string;
   actorOrgId?: string;
-  orgSlug: string;
   workspaceName: string;
   slug?: string;
 };

backend/src/services/secret-folder/secret-folder-service.ts

@@ -232,6 +232,7 @@ export const secretFolderServiceFactory = ({
     if (!parentFolder) return [];
 
     const folders = await folderDAL.find({ envId: env.id, parentId: parentFolder.id });
+
     return folders;
   };
 

cli/packages/cmd/secrets.go

@@ -419,7 +419,7 @@ func getSecretsByNames(cmd *cobra.Command, args []string) {
 		util.HandleError(err, "Unable to parse path flag")
 	}
 
-	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath}, "")
+	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath, IncludeImport: true}, "")
 	if err != nil {
 		util.HandleError(err, "To fetch all secrets")
 	}
@@ -477,7 +477,7 @@ func generateExampleEnv(cmd *cobra.Command, args []string) {
 		util.HandleError(err, "Unable to parse flag")
 	}
 
-	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath}, "")
+	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken, TagSlugs: tagSlugs, SecretsPath: secretsPath, IncludeImport: true}, "")
 	if err != nil {
 		util.HandleError(err, "To fetch all secrets")
 	}

docs/self-hosting/ee.mdx

@@ -9,7 +9,7 @@ This guide walks through how you can use these paid features in Infisical.
 
 <Steps>
     <Step title="Purchase a license">
-        Start by either signing up for a free demo [here](https://infisical.com/schedule-demo) or contacting team@infisical.com to purchase a license.
+        Start by either signing up for a free demo [here](https://infisical.com/schedule-demo) or contacting sales@infisical.com to purchase a license.
 
         Once purchased, you will be issued a license key.
     </Step>
@@ -25,4 +25,4 @@ This guide walks through how you can use these paid features in Infisical.
             Once the license expires, Infisical will continue to run, but EE features will be disabled until the license is renewed or a new one is purchased.
         </Note>
     </Step>
-</Steps>
+</Steps>

frontend/.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
   },
   plugins: ["react", "prettier", "simple-import-sort", "import"],
   rules: {
+    "@typescript-eslint/no-empty-function": "off",
     quotes: ["error", "double", { avoidEscape: true }],
     "comma-dangle": ["error", "only-multiline"],
     "react/react-in-jsx-scope": "off",
@@ -72,7 +73,6 @@ module.exports = {
     ],
     "@typescript-eslint/no-non-null-assertion": "off",
     "simple-import-sort/exports": "warn",
-    "@typescript-eslint/no-empty-function": "off",
     "simple-import-sort/imports": [
       "warn",
       {

frontend/.storybook/main.js

@@ -1,28 +1,28 @@
-const path = require('path');
+const path = require("path");
 module.exports = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
-    '@storybook/addon-links',
+    "@storybook/addon-links",
-    '@storybook/addon-essentials',
+    "@storybook/addon-essentials",
-    '@storybook/addon-interactions',
+    "@storybook/addon-interactions",
-    'storybook-dark-mode',
+    "storybook-dark-mode",
     {
-      name: '@storybook/addon-styling',
+      name: "@storybook/addon-styling",
       options: {
         postCss: {
-          implementation: require('postcss')
+          implementation: require("postcss")
         }
       }
     }
   ],
   framework: {
-    name: '@storybook/nextjs',
+    name: "@storybook/nextjs",
     options: {}
   },
   core: {
     disableTelemetry: true
   },
   docs: {
-    autodocs: 'tag'
+    autodocs: "tag"
   }
 };

frontend/src/components/analytics/posthog.ts

@@ -6,7 +6,7 @@ import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from "../utilities/config";
 
 export const initPostHog = () => {
   // @ts-ignore
-  console.log("Hi there 👋")
+  console.log("Hi there 👋");
   try {
     if (typeof window !== "undefined") {
       // @ts-ignore
@@ -19,7 +19,7 @@ export const initPostHog = () => {
 
     return posthog;
   } catch (e) {
-    console.log("posthog err", e)
+    console.log("posthog err", e);
   }
 
   return undefined;

frontend/src/components/basic/Error.tsx

@@ -3,9 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const Error = ({ text }: { text: string }): JSX.Element => {
   return (
-    <div className="relative flex flex-row justify-center m-auto items-center w-fit rounded-full">
+    <div className="relative m-auto flex w-fit flex-row items-center justify-center rounded-full">
-      <FontAwesomeIcon icon={faExclamationTriangle} className="text-red mt-1.5 mb-2 mx-2" />
+      <FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mt-1.5 mb-2 text-red" />
-      {text && <p className="relative top-0 text-red mr-2 text-sm py-1">{text}</p>}
+      {text && <p className="relative top-0 mr-2 py-1 text-sm text-red">{text}</p>}
     </div>
   );
 };

frontend/src/components/basic/InputField.tsx

@@ -39,16 +39,16 @@ const InputField = ({
 
   if (isStatic === true) {
     return (
-      <div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
+      <div className="my-2 flex w-full max-w-md flex-col justify-center md:my-4">
-        <p className="text-sm font-semibold text-gray-400 mb-0.5">{label}</p>
+        <p className="mb-0.5 text-sm font-semibold text-gray-400">{label}</p>
-        {text && <p className="text-xs text-gray-400 mb-2">{text}</p>}
+        {text && <p className="mb-2 text-xs text-gray-400">{text}</p>}
         <input
           onChange={(e) => onChangeHandler(e.target.value)}
           type={type}
           placeholder={placeholder}
           value={value}
           required={isRequired}
-          className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
+          className="text-md min-w-16 w-full rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none"
           name={name}
           readOnly
           autoComplete={autoComplete}
@@ -58,12 +58,12 @@ const InputField = ({
     );
   }
   return (
-    <div className="flex-col w-full">
+    <div className="w-full flex-col">
-      <div className="flex flex-row text-mineshaft-300 items-center mb-0.5">
+      <div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
-        <p className="text-sm font-semibold mr-1">{label}</p>
+        <p className="mr-1 text-sm font-semibold">{label}</p>
       </div>
       <div
-        className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
+        className={`group relative flex w-full max-w-2xl flex-col justify-center border ${
           error ? "border-red" : "border-mineshaft-500"
         } rounded-md`}
       >
@@ -75,11 +75,11 @@ const InputField = ({
           required={isRequired}
           className={`${
             blurred
-              ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
+              ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
               : ""
           } ${
             error ? "focus:ring-red/50" : "focus:ring-primary/50"
-          } relative peer bg-mineshaft-900 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
+          } text-md min-w-16 peer relative w-full rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`}
           name={name}
           spellCheck="false"
           autoComplete={autoComplete}
@@ -91,7 +91,7 @@ const InputField = ({
             onClick={() => {
               setPasswordVisible(!passwordVisible);
             }}
-            className="absolute self-end mr-3 text-gray-400 cursor-pointer"
+            className="absolute mr-3 cursor-pointer self-end text-gray-400"
           >
             {passwordVisible ? (
               <FontAwesomeIcon icon={faEyeSlash} />
@@ -101,7 +101,7 @@ const InputField = ({
           </button>
         )}
         {blurred && (
-          <div className="peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
+          <div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden text-clip rounded-md text-gray-400/50 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible">
             <p className="ml-2" />
             {value
               .split("")
@@ -109,7 +109,7 @@ const InputField = ({
               .map(() => (
                 <FontAwesomeIcon
                   key={guidGenerator()}
-                  className="text-xxs mx-0.5"
+                  className="mx-0.5 text-xxs"
                   icon={faCircle}
                 />
               ))}
@@ -121,7 +121,7 @@ const InputField = ({
 						</div>
 					)} */}
       </div>
-      {error && <p className="text-red text-xs mt-0.5 mx-0 mb-2 max-w-xs">{errorText}</p>}
+      {error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
     </div>
   );
 };

frontend/src/components/basic/Listbox.tsx

@@ -34,19 +34,19 @@ const ListBox = ({
     <Listbox value={isSelected} onChange={onChange}>
       <div className="relative">
         <Listbox.Button
-          className={`text-gray-400 relative ${
+          className={`relative text-gray-400 ${
             isFull ? "w-full" : "w-52"
-          } cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
+          } focus-visible:ring-offset-orange-300 cursor-default rounded-md bg-white/[0.07] py-2.5 pl-3 pr-10 text-left shadow-md duration-200 hover:bg-white/[0.11] focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 sm:text-sm`}
         >
           <div className="flex flex-row">
             {text}
-            <span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300">
+            <span className="ml-1 block cursor-pointer truncate font-semibold text-gray-300">
               {" "}
               {isSelected}
             </span>
           </div>
           {data && (
-            <div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <div className="pointer-events-none absolute inset-y-0 right-0 flex cursor-pointer items-center pr-2">
               <FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5" />
             </div>
           )}
@@ -58,16 +58,16 @@ const ListBox = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="border border-mineshaft-700 z-[70] p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm no-scrollbar no-scrollbar::-webkit-scrollbar">
+            <Listbox.Options className="no-scrollbar::-webkit-scrollbar absolute z-[70] mt-1 max-h-60 w-full overflow-auto rounded-md border border-mineshaft-700 bg-bunker p-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 no-scrollbar focus:outline-none sm:text-sm">
               {data.map((person, personIdx) => (
                 <Listbox.Option
                   key={`${person}.${personIdx + 1}`}
                   className={({ active, selected }) =>
-                    `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
+                    `relative my-0.5 cursor-default select-none rounded-md py-2 pl-10 pr-4 ${
-                      selected ? "bg-white/10 text-gray-400 font-bold" : ""
+                      selected ? "bg-white/10 font-bold text-gray-400" : ""
                     } ${
                       active && !selected
-                        ? "bg-white/5 text-mineshaft-200 cursor-pointer"
+                        ? "cursor-pointer bg-white/5 text-mineshaft-200"
                         : "text-gray-400"
                     } `
                   }
@@ -83,7 +83,7 @@ const ListBox = ({
                         {person}
                       </span>
                       {selected ? (
-                        <span className="text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3">
+                        <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 text-primary">
                           <FontAwesomeIcon icon={faCheck} className="text-md ml-1" />
                         </span>
                       ) : null}
@@ -92,9 +92,9 @@ const ListBox = ({
                 </Listbox.Option>
               ))}
               {buttonAction && (
-                <button type="button" onClick={buttonAction} className="cursor-pointer w-full">
+                <button type="button" onClick={buttonAction} className="w-full cursor-pointer">
-                  <div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
+                  <div className="relative my-0.5 mt-2 flex cursor-pointer select-none justify-start rounded-md py-2 pl-10 pr-4 text-gray-400 duration-200 hover:bg-lime-300 hover:font-semibold hover:text-black">
-                    <span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
+                    <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 pr-4">
                       <FontAwesomeIcon icon={faPlus} className="text-lg" />
                     </span>
                     Add Project

frontend/src/components/basic/buttons/Button.tsx

@@ -43,7 +43,7 @@ const Button = ({
   loading,
   icon,
   iconDisabled,
-  type = "button",
+  type = "button"
 }: ButtonProps): JSX.Element => {
   // Check if the button show always be 'active' - then true;
   // or if it should switch between 'active' and 'disabled' - then give the status
@@ -53,9 +53,13 @@ const Button = ({
     "group m-auto md:m-0 inline-block rounded-md duration-200",
 
     // Setting background colors and hover modes
-    color === "mineshaft" && activityStatus && "bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60",
+    color === "mineshaft" &&
+      activityStatus &&
+      "bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60",
     color === "mineshaft" && !activityStatus && "bg-mineshaft",
-    (color === "primary" || !color) && activityStatus && "bg-primary border border-primary-400 opacity-80 hover:opacity-100",
+    (color === "primary" || !color) &&
+      activityStatus &&
+      "bg-primary border border-primary-400 opacity-80 hover:opacity-100",
     (color === "primary" || !color) && !activityStatus && "bg-primary",
     color === "red" && "bg-red-800 border border-red",
 
@@ -78,7 +82,9 @@ const Button = ({
     color !== "mineshaft" && color !== "red" && color !== "none" && "text-black",
     color === "red" && "text-gray-200",
     color === "none" && "text-gray-200 text-xl",
-    activityStatus && color !== "red" && color !== "mineshaft" && color !== "none" ? "group-hover:text-black" : "",
+    activityStatus && color !== "red" && color !== "mineshaft" && color !== "none"
+      ? "group-hover:text-black"
+      : "",
 
     size === "icon" && "flex items-center justify-center"
   );
@@ -103,7 +109,7 @@ const Button = ({
         <div
           className={`${
             loading === true ? "opacity-100" : "opacity-0"
-          } absolute flex items-center px-3 bg-primary duration-200 w-full`}
+          } absolute flex w-full items-center bg-primary px-3 duration-200`}
         >
           <Image
             src="/images/loading/loadingblack.gif"
@@ -116,7 +122,7 @@ const Button = ({
         {icon && (
           <FontAwesomeIcon
             icon={icon}
-            className={`flex my-auto font-extrabold ${size === "icon-sm" ? "text-sm" : "text-sm"} ${
+            className={`my-auto flex font-extrabold ${size === "icon-sm" ? "text-sm" : "text-sm"} ${
               (text || textDisabled) && "mr-2"
             }`}
           />
@@ -124,7 +130,7 @@ const Button = ({
         {iconDisabled && (
           <FontAwesomeIcon
             icon={iconDisabled as IconProp}
-            className={`flex my-auto font-extrabold ${size === "icon-sm" ? "text-sm" : "text-md"} ${
+            className={`my-auto flex font-extrabold ${size === "icon-sm" ? "text-sm" : "text-md"} ${
               (text || textDisabled) && "mr-2"
             }`}
           />

frontend/src/components/basic/dialog/AddProjectMemberDialog.tsx

@@ -64,7 +64,7 @@ const AddProjectMemberDialog = ({
                   ) : (
                     <Dialog.Title
                       as="h3"
-                      className="z-50 text-lg font-medium text-mineshaft-300 mb-4"
+                      className="z-50 mb-4 text-lg font-medium text-mineshaft-300"
                     >
                       {t("section.members.add-dialog.already-all-invited")}
                     </Dialog.Title>
@@ -127,7 +127,9 @@ const AddProjectMemberDialog = ({
                       </div>
                     ) : (
                       <Button
-                        onButtonPressed={() => router.push(`/org/${localStorage.getItem("orgData.id")}/members`)}
+                        onButtonPressed={() =>
+                          router.push(`/org/${localStorage.getItem("orgData.id")}/members`)
+                        }
                         color="mineshaft"
                         text={t("section.members.add-dialog.add-user-to-org") as string}
                         size="md"

frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx

@@ -28,11 +28,11 @@ export const AddUpdateEnvironmentDialog = ({
   onCreateSubmit,
   onEditSubmit,
   initialValues,
-  isEditMode,
+  isEditMode
 }: Props) => {
   const [formInput, setFormInput] = useState<FormFields>({
     name: "",
-    slug: "",
+    slug: ""
   });
 
   // This use effect can be removed when the unmount is happening from outside the component
@@ -50,7 +50,7 @@ export const AddUpdateEnvironmentDialog = ({
     e.preventDefault();
     const data = {
       name: formInput.name,
-      slug: formInput.slug.toLowerCase(),
+      slug: formInput.slug.toLowerCase()
     };
     if (isEditMode) {
       onEditSubmit(data);
@@ -62,75 +62,70 @@ export const AddUpdateEnvironmentDialog = ({
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative z-20' onClose={onClose}>
+        <Dialog as="div" className="relative z-20" onClose={onClose}>
           <Transition.Child
             as={Fragment}
-            enter='ease-out duration-300'
+            enter="ease-out duration-300"
-            enterFrom='opacity-0'
+            enterFrom="opacity-0"
-            enterTo='opacity-100'
+            enterTo="opacity-100"
-            leave='ease-out duration-150'
+            leave="ease-out duration-150"
-            leaveFrom='opacity-100'
+            leaveFrom="opacity-100"
-            leaveTo='opacity-0'
+            leaveTo="opacity-0"
           >
-            <div className='fixed inset-0 bg-black bg-opacity-70' />
+            <div className="fixed inset-0 bg-black bg-opacity-70" />
           </Transition.Child>
 
-          <div className='fixed inset-0 overflow-y-auto z-50'>
+          <div className="fixed inset-0 z-50 overflow-y-auto">
-            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
               <Transition.Child
                 as={Fragment}
-                enter='ease-out duration-300'
+                enter="ease-out duration-300"
-                enterFrom='opacity-0 scale-95'
+                enterFrom="opacity-0 scale-95"
-                enterTo='opacity-100 scale-100'
+                enterTo="opacity-100 scale-100"
-                leave='ease-in duration-200'
+                leave="ease-in duration-200"
-                leaveFrom='opacity-100 scale-100'
+                leaveFrom="opacity-100 scale-100"
-                leaveTo='opacity-0 scale-95'
+                leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    as='h3'
+                    {isEditMode ? "Update environment" : "Create a new environment"}
-                    className='text-lg font-medium leading-6 text-gray-400'
-                  >
-                    {isEditMode
-                      ? "Update environment"
-                      : "Create a new environment"}
                   </Dialog.Title>
                   <form onSubmit={onFormSubmit}>
-                    <div className='max-h-28 mt-4'>
+                    <div className="mt-4 max-h-28">
                       <InputField
-                        label='Environment Name'
+                        label="Environment Name"
                         onChangeHandler={(val) => onInputChange("name", val)}
-                        type='varName'
+                        type="varName"
                         value={formInput.name}
-                        placeholder=''
+                        placeholder=""
                         isRequired
                         // error={error.length > 0}
                         // errorText={error}
                       />
                     </div>
-                    <div className='max-h-28 mt-4'>
+                    <div className="mt-4 max-h-28">
                       <InputField
-                        label='Environment Slug'
+                        label="Environment Slug"
                         onChangeHandler={(val) => onInputChange("slug", val)}
-                        type='varName'
+                        type="varName"
                         value={formInput.slug}
-                        placeholder=''
+                        placeholder=""
                         isRequired
                         // error={error.length > 0}
                         // errorText={error}
                       />
                     </div>
-                    <p className='text-xs text-gray-500 mt-2'>
+                    <p className="mt-2 text-xs text-gray-500">
                       Slugs are shorthands used in cli to access environment
                     </p>
-                    <div className='mt-4 max-w-min'>
+                    <div className="mt-4 max-w-min">
                       <Button
                         onButtonPressed={() => null}
-                        type='submit'
+                        type="submit"
-                        color='mineshaft'
+                        color="mineshaft"
                         text={isEditMode ? "Update" : "Create"}
                         active={formInput.name !== "" && formInput.slug !== ""}
-                        size='md'
+                        size="md"
                       />
                     </div>
                   </form>

frontend/src/components/basic/dialog/AddUserDialog.tsx

@@ -13,76 +13,63 @@ type Props = {
   orgName: string;
 };
 
-const AddUserDialog = ({
+const AddUserDialog = ({ isOpen, closeModal, submitModal, email, setEmail, orgName }: Props) => {
-  isOpen,
-  closeModal,
-  submitModal,
-  email,
-  setEmail,
-  orgName,
-}: Props) => {
   const submit = () => {
     submitModal(email);
   };
 
   return (
-    <div className='z-50'>
+    <div className="z-50">
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative' onClose={closeModal}>
+        <Dialog as="div" className="relative" onClose={closeModal}>
           <Transition.Child
             as={Fragment}
-            enter='ease-out duration-300'
+            enter="ease-out duration-300"
-            enterFrom='opacity-0'
+            enterFrom="opacity-0"
-            enterTo='opacity-100'
+            enterTo="opacity-100"
-            leave='ease-in duration-200'
+            leave="ease-in duration-200"
-            leaveFrom='opacity-100'
+            leaveFrom="opacity-100"
-            leaveTo='opacity-0'
+            leaveTo="opacity-0"
           >
-            <div className='fixed inset-0 bg-black bg-opacity-70' />
+            <div className="fixed inset-0 bg-black bg-opacity-70" />
           </Transition.Child>
 
-          <div className='fixed inset-0 overflow-y-auto'>
+          <div className="fixed inset-0 overflow-y-auto">
-            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
               <Transition.Child
                 as={Fragment}
-                enter='ease-out duration-300'
+                enter="ease-out duration-300"
-                enterFrom='opacity-0 scale-95'
+                enterFrom="opacity-0 scale-95"
-                enterTo='opacity-100 scale-100'
+                enterTo="opacity-100 scale-100"
-                leave='ease-in duration-200'
+                leave="ease-in duration-200"
-                leaveFrom='opacity-100 scale-100'
+                leaveFrom="opacity-100 scale-100"
-                leaveTo='opacity-0 scale-95'
+                leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className='w-full max-w-lg transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-md border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title
-                    as='h3'
+                    as="h3"
-                    className='text-lg font-medium leading-6 text-gray-400 z-50'
+                    className="z-50 text-lg font-medium leading-6 text-gray-400"
                   >
                     Invite others to {orgName}
                   </Dialog.Title>
-                  <div className='mt-2 mb-4'>
+                  <div className="mt-2 mb-4">
-                    <p className='text-sm text-gray-500'>
+                    <p className="text-sm text-gray-500">
-                      An invite is specific to an email address and expires
+                      An invite is specific to an email address and expires after 1 day. For
-                      after 1 day. For security reasons, you will need to
+                      security reasons, you will need to separately add members to projects.
-                      separately add members to projects.
                     </p>
                   </div>
-                  <div className='max-h-28'>
+                  <div className="max-h-28">
                     <InputField
-                      label='Email'
+                      label="Email"
                       onChangeHandler={setEmail}
-                      type='varName'
+                      type="varName"
                       value={email}
-                      placeholder=''
+                      placeholder=""
                       isRequired
                     />
                   </div>
-                  <div className='mt-4 max-w-max'>
+                  <div className="mt-4 max-w-max">
-                    <Button
+                    <Button onButtonPressed={submit} color="mineshaft" text="Invite" size="md" />
-                      onButtonPressed={submit}
-                      color='mineshaft'
-                      text='Invite'
-                      size='md'
-                    />
                   </div>
                 </Dialog.Panel>
                 {/* <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">

frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx

@@ -5,7 +5,6 @@ import Button from "../buttons/Button";
 import InputField from "../InputField";
 import { Checkbox } from "../table/Checkbox";
 
-
 type Props = {
   isOpen: boolean;
   closeModal: () => void;
@@ -26,8 +25,8 @@ const AddWorkspaceDialog = ({
   workspaceName,
   setWorkspaceName,
   error,
-  loading,
+  loading
-}:Props) => {
+}: Props) => {
   const [addAllUsers, setAddAllUsers] = useState(true);
   const submit = () => {
     submitModal(workspaceName, addAllUsers);
@@ -60,11 +59,8 @@ const AddWorkspaceDialog = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-400"
-                  >
                     Create a new project
                   </Dialog.Title>
                   <div className="mt-2">
@@ -72,7 +68,7 @@ const AddWorkspaceDialog = ({
                       This project will contain your secrets and configs.
                     </p>
                   </div>
-                  <div className="max-h-28 mt-4">
+                  <div className="mt-4 max-h-28">
                     <InputField
                       label="Project Name"
                       onChangeHandler={setWorkspaceName}
@@ -84,10 +80,7 @@ const AddWorkspaceDialog = ({
                     />
                   </div>
                   <div className="mt-4 ml-1">
-                    <Checkbox
+                    <Checkbox addAllUsers={addAllUsers} setAddAllUsers={setAddAllUsers} />
-                      addAllUsers={addAllUsers}
-                      setAddAllUsers={setAddAllUsers}
-                    />
                   </div>
                   <div className="mt-4 max-w-min">
                     <Button

frontend/src/components/basic/dialog/DeleteActionModal.tsx

@@ -3,89 +3,76 @@ import { Dialog, Transition } from "@headlessui/react";
 
 import InputField from "../InputField";
 
-// REFACTOR: Move all these modals into one reusable one 
+// REFACTOR: Move all these modals into one reusable one
 type Props = {
   isOpen?: boolean;
-  onClose: ()=>void;
+  onClose: () => void;
   title: string;
-  onSubmit:()=>void;
+  onSubmit: () => void;
-  deleteKey?:string;
+  deleteKey?: string;
-}
+};
 
-const DeleteActionModal = ({
+const DeleteActionModal = ({ isOpen, onClose, title, onSubmit, deleteKey }: Props) => {
-  isOpen,
+  const [deleteInputField, setDeleteInputField] = useState("");
-  onClose,
-  title,
-  onSubmit,
-  deleteKey
-}:Props) => {
-  const [deleteInputField, setDeleteInputField] = useState("")
 
-    useEffect(() => {
+  useEffect(() => {
-      setDeleteInputField("");
+    setDeleteInputField("");
-    }, [isOpen]);
+  }, [isOpen]);
 
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative z-10' onClose={onClose}>
+        <Dialog as="div" className="relative z-10" onClose={onClose}>
           <Transition.Child
             as={Fragment}
-            enter='ease-out duration-300'
+            enter="ease-out duration-300"
-            enterFrom='opacity-0'
+            enterFrom="opacity-0"
-            enterTo='opacity-100'
+            enterTo="opacity-100"
-            leave='ease-in duration-150'
+            leave="ease-in duration-150"
-            leaveFrom='opacity-100'
+            leaveFrom="opacity-100"
-            leaveTo='opacity-0'
+            leaveTo="opacity-0"
           >
-            <div className='fixed inset-0 bg-black bg-opacity-70' />
+            <div className="fixed inset-0 bg-black bg-opacity-70" />
           </Transition.Child>
-          <div className='fixed inset-0 overflow-y-auto'>
+          <div className="fixed inset-0 overflow-y-auto">
-            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
               <Transition.Child
                 as={Fragment}
-                enter='ease-out duration-300'
+                enter="ease-out duration-300"
-                enterFrom='opacity-0 scale-95'
+                enterFrom="opacity-0 scale-95"
-                enterTo='opacity-100 scale-100'
+                enterTo="opacity-100 scale-100"
-                leave='ease-in duration-200'
+                leave="ease-in duration-200"
-                leaveFrom='opacity-100 scale-100'
+                leaveFrom="opacity-100 scale-100"
-                leaveTo='opacity-0 scale-95'
+                leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-gray-700 bg-grey p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    as='h3'
-                    className='text-lg font-medium leading-6 text-gray-400'
-                  >
                     {title}
                   </Dialog.Title>
-                  <div className='mt-2'>
+                  <div className="mt-2">
-                    <p className='text-sm text-gray-500'>
+                    <p className="text-sm text-gray-500">This action is irrevertible.</p>
-                      This action is irrevertible.
-                    </p>
                   </div>
-                  <div className='mt-2'>
+                  <div className="mt-2">
                     <InputField
                       isRequired
                       label={`Type ${deleteKey} to delete the resource`}
                       onChangeHandler={(val) => setDeleteInputField(val)}
                       value={deleteInputField}
-                      type='text'
+                      type="text"
                     />
                   </div>
-                  <div className='mt-6'>
+                  <div className="mt-6">
                     <button
-                      type='button'
+                      type="button"
-                      className='inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      className="hover:bg-alizarin hover:text-semibold inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                       onClick={onSubmit}
-                      disabled={
+                      disabled={Boolean(deleteKey) && deleteInputField !== deleteKey}
-                        Boolean(deleteKey) && deleteInputField !== deleteKey
-                      }
                     >
                       Delete
                     </button>
                     <button
-                      type='button'
+                      type="button"
-                      className='ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      className="hover:text-semibold ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:border-white hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                       onClick={onClose}
                     >
                       Cancel

frontend/src/components/basic/dialog/DeleteEnvVar.tsx

@@ -5,13 +5,13 @@ import { Dialog, Transition } from "@headlessui/react";
 // #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
 
 type Props = {
-  isOpen: boolean
+  isOpen: boolean;
-  onClose: () => void
+  onClose: () => void;
-  onSubmit: () => void 
+  onSubmit: () => void;
-}
+};
 
 export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
@@ -45,7 +45,7 @@ export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker border border-mineshaft-600 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-mineshaft-600 bg-bunker p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-bunker-200">
                     {t("dashboard:sidebar.delete-key-dialog.title")}
                   </Dialog.Title>
@@ -57,14 +57,14 @@ export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
                   <div className="mt-6 flex justify-start">
                     <button
                       type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-red-500 opacity-80 hover:opacity-100 px-4 py-2 text-sm font-medium text-bunker-100 text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      className="text-semibold inline-flex justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-sm font-medium text-bunker-100 opacity-80 duration-200 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                       onClick={onSubmit}
                     >
                       Delete
                     </button>
                     <button
                       type="button"
-                      className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-bunker-500 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-mineshaft-500 hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      className="hover:text-semibold ml-2 inline-flex justify-center rounded-md border border-transparent bg-bunker-500 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:bg-mineshaft-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                       onClick={onClose}
                     >
                       Cancel

frontend/src/components/basic/dialog/DeleteUserDialog.tsx

@@ -10,66 +10,55 @@ type Props = {
   userIdToBeDeleted: string;
 };
 
-const DeleteUserDialog = ({
+const DeleteUserDialog = ({ isOpen, closeModal, submitModal, userIdToBeDeleted }: Props) => {
-  isOpen,
-  closeModal,
-  submitModal,
-  userIdToBeDeleted,
-}: Props) => {
   const submit = () => {
     submitModal(userIdToBeDeleted);
   };
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative z-10' onClose={closeModal}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
           <Transition.Child
             as={Fragment}
-            enter='ease-out duration-300'
+            enter="ease-out duration-300"
-            enterFrom='opacity-0'
+            enterFrom="opacity-0"
-            enterTo='opacity-100'
+            enterTo="opacity-100"
-            leave='ease-in duration-200'
+            leave="ease-in duration-200"
-            leaveFrom='opacity-100'
+            leaveFrom="opacity-100"
-            leaveTo='opacity-0'
+            leaveTo="opacity-0"
           >
-            <div className='fixed inset-0 bg-black bg-opacity-25' />
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
           </Transition.Child>
 
-          <div className='fixed inset-0 overflow-y-auto'>
+          <div className="fixed inset-0 overflow-y-auto">
-            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
               <Transition.Child
                 as={Fragment}
-                enter='ease-out duration-300'
+                enter="ease-out duration-300"
-                enterFrom='opacity-0 scale-95'
+                enterFrom="opacity-0 scale-95"
-                enterTo='opacity-100 scale-100'
+                enterTo="opacity-100 scale-100"
-                leave='ease-in duration-200'
+                leave="ease-in duration-200"
-                leaveFrom='opacity-100 scale-100'
+                leaveFrom="opacity-100 scale-100"
-                leaveTo='opacity-0 scale-95'
+                leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl border border-gray-700 bg-grey p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    as='h3'
+                    Are you sure you want to remove this user from the workspace?
-                    className='text-lg font-medium leading-6 text-gray-400'
-                  >
-                    Are you sure you want to remove this user from the
-                    workspace?
                   </Dialog.Title>
-                  <div className='mt-2'>
+                  <div className="mt-2">
-                    <p className='text-sm text-gray-500'>
+                    <p className="text-sm text-gray-500">This action is irrevertible.</p>
-                      This action is irrevertible.
-                    </p>
                   </div>
-                  <div className='mt-6'>
+                  <div className="mt-6">
                     <button
-                      type='button'
+                      type="button"
-                      className='inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      className="hover:bg-alizarin hover:text-semibold inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                       onClick={submit}
                     >
                       Delete
                     </button>
                     <button
-                      type='button'
+                      type="button"
-                      className='ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      className="hover:text-semibold ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:border-white hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                       onClick={submit}
                     >
                       Cancel

frontend/src/components/basic/popups/BottomRightPopup.tsx

@@ -34,27 +34,27 @@ const BottonRightPopup = ({
 }: PopupProps): JSX.Element => {
   return (
     <div
-      className="z-[100] drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
+      className="absolute bottom-0 right-0 z-[100] mr-6 mb-6 flex max-w-xl flex-col items-start rounded-md border border-gray-600/50 bg-bunker pt-3 pb-4 text-gray-200 drop-shadow-xl"
       role="alert"
     >
-      <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
+      <div className="flex w-full flex-row items-center justify-between border-b border-gray-600/70 px-6 pb-3">
-        <div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
+        <div className="mr-2 mt-0.5 flex flex-row text-xl font-bold">
           <div>{titleText}</div>
           <div className="ml-2.5">{emoji}</div>
         </div>
         <button className="mt-1" onClick={() => setCheckDocsPopUpVisible(false)} type="button">
           <FontAwesomeIcon
             icon={faXmark}
-            className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer"
+            className="cursor-pointer text-2xl text-gray-400 duration-200 hover:text-red"
           />
         </button>
       </div>
-      <div className="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">{textLine1}</div>
+      <div className="mt-4 mb-0.5 block px-6 text-gray-300 sm:inline">{textLine1}</div>
-      <div className="block sm:inline mb-4 px-6">{textLine2}</div>
+      <div className="mb-4 block px-6 sm:inline">{textLine2}</div>
-      <div className="flex flex-row px-6 w-full">
+      <div className="flex w-full flex-row px-6">
         {/* eslint-disable-next-line react/jsx-no-target-blank */}
         <a
-          className="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
+          className="flex w-full justify-center rounded-md bg-white/10 p-2 font-bold duration-200 hover:bg-primary hover:text-black"
           href={buttonLink}
           target="_blank"
           rel="noopener"

frontend/src/components/basic/table/Checkbox.tsx

@@ -9,7 +9,7 @@ export const Checkbox = ({ addAllUsers, setAddAllUsers }: Props) => (
     {addAllUsers === true ? (
       <input
         type="checkbox"
-        className="accent-primary h-4 w-4"
+        className="h-4 w-4 accent-primary"
         checked
         readOnly
         onClick={() => setAddAllUsers(!addAllUsers)}
@@ -20,12 +20,12 @@ export const Checkbox = ({ addAllUsers, setAddAllUsers }: Props) => (
         role="button"
         tabIndex={0}
         aria-label="add all users"
-        className="h-4 w-4 bg-bunker border border-gray-600 rounded-sm"
+        className="h-4 w-4 rounded-sm border border-gray-600 bg-bunker"
         onClick={() => setAddAllUsers(!addAllUsers)}
       />
     )}
 
-    <label className="ml-2 text-gray-500 text-sm">
+    <label className="ml-2 text-sm text-gray-500">
       Add all members of my organization to this project.
     </label>
   </div>

frontend/src/components/context/Notifications/Notification.tsx

@@ -36,25 +36,28 @@ const Notification = ({ notification, clearNotification }: NotificationProps) =>
 
   return (
     <div
-      className="relative w-full flex items-center justify-between px-6 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-mineshaft-700 mb-3 right-3"
+      className="pointer-events-auto relative right-3 mb-3 flex w-full items-center justify-between rounded-md border border-bunker-500 bg-mineshaft-700 px-6 py-4"
       role="alert"
     >
       {notification.type === "error" && (
-        <div className="absolute w-full h-1 bg-red top-0 left-0 rounded-t-md" />
+        <div className="absolute top-0 left-0 h-1 w-full rounded-t-md bg-red" />
       )}
       {notification.type === "success" && (
-        <div className="absolute w-full h-1 bg-green top-0 left-0 rounded-t-md" />
+        <div className="absolute top-0 left-0 h-1 w-full rounded-t-md bg-green" />
       )}
       {notification.type === "info" && (
-        <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md" />
+        <div className="absolute top-0 left-0 h-1 w-full rounded-t-md bg-yellow" />
       )}
-      <p className="text-bunker-200 text-md font-base mt-0.5">{notification.text}</p>
+      <p className="text-md font-base mt-0.5 text-bunker-200">{notification.text}</p>
       <button
         type="button"
         className="rounded-lg"
         onClick={() => clearNotification(notification.text)}
       >
-        <FontAwesomeIcon className="absolute right-2 top-3 text-bunker-300 pl-2 w-4 h-4 hover:text-white" icon={faXmark} />
+        <FontAwesomeIcon
+          className="absolute right-2 top-3 h-4 w-4 pl-2 text-bunker-300 hover:text-white"
+          icon={faXmark}
+        />
       </button>
     </div>
   );

frontend/src/components/context/Notifications/Notifications.tsx

@@ -11,7 +11,7 @@ const Notifications = ({ notifications, clearNotification }: NoticationsProps) =
   }
 
   return (
-    <div className="hidden fixed z-50 md:flex md:flex-col-reverse gap-y-2 w-96 h-full right-2 bottom-2 pointer-events-none">
+    <div className="pointer-events-none fixed right-2 bottom-2 z-[100] hidden h-full w-96 gap-y-2 md:flex md:flex-col-reverse">
       {notifications.map((notif) => (
         <Notification key={notif.text} notification={notif} clearNotification={clearNotification} />
       ))}

frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx

@@ -30,9 +30,9 @@ const ConfirmEnvOverwriteModal = ({
         onClose={onClose}
       >
         <div className="flex flex-col gap-2">
-          <p className='text-gray-400'>Your file contains the following duplicate secrets:</p>
+          <p className="text-gray-400">Your file contains the following duplicate secrets:</p>
           <p className="text-sm text-gray-500">{duplicateKeys.join(", ")}</p>
-          <p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
+          <p className="text-md text-gray-400">Are you sure you want to overwrite these secrets?</p>
         </div>
       </ModalContent>
     </Modal>

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -1,5 +1,10 @@
 import { memo, SyntheticEvent, useRef } from "react";
-import { faCircle, faCodeBranch, faExclamationCircle, faEye } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCircle,
+  faCodeBranch,
+  faExclamationCircle,
+  faEye
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import guidGenerator from "../utilities/randomId";
@@ -31,8 +36,8 @@ interface DashboardInputFieldProps {
  * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
  * @param {boolean} obj.isDuplicate - if the key name is duplicated
  * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
- * 
+ *
- * 
+ *
  * @returns
  */
 
@@ -61,29 +66,31 @@ const DashboardInputField = ({
     const error = startsWithNumber || isDuplicate;
 
     return (
-      <div className={`relative flex-col w-full h-10 ${
+      <div
-        error && value !== "" ? "bg-red/[0.15]" : ""
+        className={`relative h-10 w-full flex-col ${error && value !== "" ? "bg-red/[0.15]" : ""} ${
-      } ${
+          isSideBarOpen && "bg-mineshaft-700 duration-200"
-        isSideBarOpen && "bg-mineshaft-700 duration-200"
+        }`}
-      }`}>
+      >
         <div
-          className={`group relative flex flex-col justify-center items-center h-full ${
+          className={`group relative flex h-full flex-col items-center justify-center ${
             error ? "w-max" : "w-full"
           }`}
         >
           <input
-            onChange={(e) => onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)}
+            onChange={(e) =>
+              onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)
+            }
             type={type}
             value={value}
-            className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${
+            className={`ph-no-capture min-w-16 peer z-10 h-full w-full bg-transparent px-2 font-mono text-sm caret-bunker-200 outline-none ${
               error ? "text-red-600 focus:text-red-500" : "text-bunker-300 focus:text-bunker-100"
             } duration-200`}
             spellCheck="false"
           />
         </div>
         {startsWithNumber && (
-          <div className='absolute right-2 top-2 text-red z-50'>
+          <div className="absolute right-2 top-2 z-50 text-red">
-            <HoverObject 
+            <HoverObject
               text="Secret names should not start with a number"
               icon={faExclamationCircle}
               color="red"
@@ -91,33 +98,44 @@ const DashboardInputField = ({
           </div>
         )}
         {isDuplicate && value !== "" && !startsWithNumber && (
-          <div className='absolute right-2 top-2 text-red z-50'>
+          <div className="absolute right-2 top-2 z-50 text-red">
-            <HoverObject 
+            <HoverObject
               text="Secret names should be unique"
               icon={faExclamationCircle}
               color="red"
             />
           </div>
         )}
-        {!error && <div className={`absolute right-0 top-0 text-red z-50 bg-mineshaft-800 group-hover:bg-mineshaft-700 ${
+        {!error && (
-          overrideEnabled ? "visible" : "invisible group-hover:visible"
+          <div
-        } cursor-pointer duration-0 h-10 flex items-center px-2`}>
+            className={`absolute right-0 top-0 z-50 bg-mineshaft-800 text-red group-hover:bg-mineshaft-700 ${
-          <button type="button" onClick={() => {
+              overrideEnabled ? "visible" : "invisible group-hover:visible"
-            if (modifyValueOverride) {
+            } duration-0 flex h-10 cursor-pointer items-center px-2`}
-              if (overrideEnabled === false) {
+          >
-                modifyValueOverride("", id);
+            <button
-              } else {
+              type="button"
-                modifyValueOverride(undefined, id);
+              onClick={() => {
-              }
+                if (modifyValueOverride) {
-            }
+                  if (overrideEnabled === false) {
-          }}>
+                    modifyValueOverride("", id);
-            <HoverObject 
+                  } else {
-              text={overrideEnabled ? "This secret is overriden with your personal value" : "You can override this secret with a personal value"}
+                    modifyValueOverride(undefined, id);
-              icon={faCodeBranch}
+                  }
-              color={overrideEnabled ? "primary" : "bunker-400"}
+                }
-            />
+              }}
-          </button>
+            >
-        </div>}
+              <HoverObject
+                text={
+                  overrideEnabled
+                    ? "This secret is overriden with your personal value"
+                    : "You can override this secret with a personal value"
+                }
+                icon={faCodeBranch}
+                color={overrideEnabled ? "primary" : "bunker-400"}
+              />
+            </button>
+          </div>
+        )}
       </div>
     );
   }
@@ -127,20 +145,29 @@ const DashboardInputField = ({
 
     return (
       <PopoverObject text={value || ""} onChangeHandler={onChangeHandler} id={id}>
-        <div title={value} className={`relative flex-col w-full h-10 overflow-hidden ${
+        <div
-          isSideBarOpen && "bg-mineshaft-700 duration-200"
+          title={value}
-        }`}>
+          className={`relative h-10 w-full flex-col overflow-hidden ${
+            isSideBarOpen && "bg-mineshaft-700 duration-200"
+          }`}
+        >
           <div
-            className={`group relative flex flex-col justify-center items-center h-full ${
+            className={`group relative flex h-full flex-col items-center justify-center ${
               error ? "w-max" : "w-full"
             }`}
           >
-            {value?.split("\n")[0] ? <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
+            {value?.split("\n")[0] ? (
-              {value?.split("\n")[0]}
+              <span className="ph-no-capture min-w-16 placeholder w-full truncate break-all bg-transparent px-2 text-xs leading-tight text-bunker-300 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent">
-            </span> : <span className='text-bunker-400'>-</span> }
+                {value?.split("\n")[0]}
-            {value?.split("\n")[1] && <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
+              </span>
-              {value?.split("\n")[1]}
+            ) : (
-            </span>}
+              <span className="text-bunker-400">-</span>
+            )}
+            {value?.split("\n")[1] && (
+              <span className="ph-no-capture min-w-16 placeholder w-full truncate break-all bg-transparent px-2 text-xs leading-tight text-bunker-300 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent">
+                {value?.split("\n")[1]}
+              </span>
+            )}
           </div>
         </div>
       </PopoverObject>
@@ -148,10 +175,10 @@ const DashboardInputField = ({
   }
   if (type === "value") {
     return (
-      <div className="flex-col w-full">
+      <div className="w-full flex-col">
-        <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
+        <div className="group relative flex	w-full flex-col justify-center whitespace-pre">
           {overrideEnabled === true && (
-            <div className="bg-primary-500 rounded-sm absolute top-[0.1rem] right-[0.1rem] z-0 w-min text-xxs px-1 text-black opacity-80">
+            <div className="absolute top-[0.1rem] right-[0.1rem] z-0 w-min rounded-sm bg-primary-500 px-1 text-xxs text-black opacity-80">
               Override enabled
             </div>
           )}
@@ -160,20 +187,20 @@ const DashboardInputField = ({
             onChange={(e) => onChangeHandler(e.target.value, id)}
             onScroll={syncScroll}
             className={`${
-              blurred
+              blurred ? "text-transparent focus:text-transparent active:text-transparent" : ""
-                ? "text-transparent focus:text-transparent active:text-transparent"
+            } ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none duration-200 no-scrollbar`}
-                : ""
-            } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
             spellCheck="false"
           />
           <div
             ref={ref}
             className={`${
               blurred && !overrideEnabled
-                ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200"
+                ? "text-bunker-800 duration-200 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400"
                 : ""
             } ${overrideEnabled ? "text-primary-300" : "text-gray-400"}
-            absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? "invisible" : "visible"} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            absolute z-0 flex flex-row whitespace-pre font-mono ${
+              blurred ? "invisible" : "visible"
+            } ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar mt-0.5 h-10 w-full overflow-x-scroll bg-transparent px-2 py-2 text-sm outline-none duration-100 no-scrollbar peer-focus:visible`}
           >
             {value?.split(REGEX).map((word) => {
               if (word.match(REGEX) !== null) {
@@ -203,20 +230,24 @@ const DashboardInputField = ({
             })}
           </div>
           {blurred && (
-            <div className={`absolute flex flex-row justify-between items-center z-0 peer pr-2 ${
+            <div
-              isSideBarOpen ? "bg-mineshaft-700 duration-200" : "bg-mineshaft-800"
+              className={`peer absolute z-0 flex flex-row items-center justify-between pr-2 ${
-            } peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip`}>
+                isSideBarOpen ? "bg-mineshaft-700 duration-200" : "bg-mineshaft-800"
-              <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+              } h-10 w-full text-clip text-bunker-400 duration-100 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden`}
+            >
+              <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
                 {value?.split("").map(() => (
                   <FontAwesomeIcon
                     key={guidGenerator()}
-                    className="text-xxs mr-0.5"
+                    className="mr-0.5 text-xxs"
                     icon={faCircle}
                   />
                 ))}
-                {value?.split("").length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
+                {value?.split("").length === 0 && <span className="text-bunker-400/80">EMPTY</span>}
+              </div>
+              <div className="invisible z-[100] cursor-default group-hover:visible">
+                <FontAwesomeIcon icon={faEye} />
               </div>
-              <div className='invisible group-hover:visible cursor-default z-[100]'><FontAwesomeIcon icon={faEye} /></div>
             </div>
           )}
         </div>

frontend/src/components/dashboard/DeleteActionButton.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,32 +8,35 @@ import Button from "../basic/buttons/Button";
 type Props = {
   onSubmit: () => void;
   isPlain?: boolean;
-}
+};
 
 export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
   const { t } = useTranslation();
 
   return (
-    <div className={`${
+    <div
-      !isPlain 
+      className={`${
-      ? "bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2"
+        !isPlain
-      : "cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center"}`}>
+          ? "ml-2 h-[2.5rem] w-[4.5rem] rounded-md bg-[#9B3535] opacity-70 duration-200 hover:opacity-100"
-      {isPlain 
+          : "justfy-center mr-2 flex h-[2.35rem] w-[1.5rem] cursor-pointer items-center"
-      ? <div
+      }`}
-        onKeyDown={() => null}
+    >
-        role="button"
+      {isPlain ? (
-        tabIndex={0}
+        <div
-        onClick={onSubmit}
+          onKeyDown={() => null}
-        className="invisible group-hover:visible"
+          role="button"
-      >
+          tabIndex={0}
-        <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
+          onClick={onSubmit}
-      </div>
+          className="invisible group-hover:visible"
-      : <Button
+        >
-        text={String(t("Delete"))}
+          <FontAwesomeIcon
-        color="red"
+            className="mt-0.5 pl-2 pr-6 text-lg text-bunker-300 hover:text-red"
-        size="md"
+            icon={faXmark}
-        onButtonPressed={onSubmit}
+          />
-      />}
+        </div>
+      ) : (
+        <Button text={String(t("Delete"))} color="red" size="md" onButtonPressed={onSubmit} />
+      )}
     </div>
-  )
+  );
-}
+};

frontend/src/components/dashboard/DownloadSecretsMenu.tsx

@@ -18,7 +18,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
     <Menu as="div" className="relative inline-block text-left">
       <Menu.Button
         as="div"
-        className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+        className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
       >
         <Button color="mineshaft" size="icon-md" icon={faDownload} onButtonPressed={() => {}} />
       </Menu.Button>
@@ -31,7 +31,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute z-[90] drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
+        <Menu.Items className="absolute right-0 z-[90] mt-0.5 w-[12rem] origin-top-right space-y-2 rounded-md border border-mineshaft-500 bg-bunker p-2 shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-xl focus:outline-none">
           <Menu.Item>
             <Button
               color="mineshaft"

frontend/src/components/navigation/NavHeader.tsx

@@ -56,7 +56,7 @@ export default function NavHeader({
 
   return (
     <div className="flex flex-row items-center pt-6">
-      <div className="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm text-black min-w-[1.25rem]">
+      <div className="mr-2 flex h-5 w-5 min-w-[1.25rem] items-center justify-center rounded-md bg-primary text-sm text-black">
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link passHref legacyBehavior href={`/org/${currentOrg?.id}/overview`}>

frontend/src/components/navigation/NavHeaderSecrets.tsx

@@ -6,7 +6,6 @@ import { useOrganization, useWorkspace } from "@app/context";
 
 import { Select, SelectItem, Tooltip } from "../v2";
 
-
 /**
  * This is the component at the top of almost every page.
  * It shows how to navigate to a certain page.
@@ -39,10 +38,12 @@ export default function NavHeaderSecrets({
 }): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
-  const router = useRouter()
+  const router = useRouter();
 
   return (
-    <div className={`${!isSnapshot && "absolute"} ml-6 flex flex-row items-center pt-6 cursor-default`}>
+    <div
+      className={`${!isSnapshot && "absolute"} ml-6 flex cursor-default flex-row items-center pt-6`}
+    >
       <div className="mr-3 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
         {currentOrg?.name?.charAt(0)}
       </div>
@@ -60,31 +61,39 @@ export default function NavHeaderSecrets({
         </>
       )}
       <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-      {pageName === "Secrets"
+      {pageName === "Secrets" ? (
-      ? <a className="text-md font-medium text-primary/80 hover:text-primary" href={`${router.asPath.split("?")[0]}`}>{pageName}</a>
+        <a
-      : <div className="text-md text-gray-400">{pageName}</div>}
+          className="text-md font-medium text-primary/80 hover:text-primary"
-      {currentEnv &&
+          href={`${router.asPath.split("?")[0]}`}
-      <>
+        >
-        <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-sm text-gray-400" />
+          {pageName}
-        <div className='pl-3 rounded-md hover:bg-bunker-100/10'>
+        </a>
-          <Tooltip content="Select environment">
+      ) : (
-            <Select
+        <div className="text-md text-gray-400">{pageName}</div>
-              value={userAvailableEnvs?.filter(uae => uae.name === currentEnv)[0]?.slug}
+      )}
-              onValueChange={(value) => {
+      {currentEnv && (
-                if (value && onEnvChange) onEnvChange(value);
+        <>
-              }}
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-sm text-gray-400" />
-              className="text-md pl-0 font-medium text-primary/80 hover:text-primary bg-transparent"
+          <div className="rounded-md pl-3 hover:bg-bunker-100/10">
-              dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
+            <Tooltip content="Select environment">
-            >
+              <Select
-              {userAvailableEnvs?.map(({ name, slug }) => (
+                value={userAvailableEnvs?.filter((uae) => uae.name === currentEnv)[0]?.slug}
-                <SelectItem value={slug} key={slug}>
+                onValueChange={(value) => {
-                  {name}
+                  if (value && onEnvChange) onEnvChange(value);
-                </SelectItem>
+                }}
-              ))}
+                className="text-md bg-transparent pl-0 font-medium text-primary/80 hover:text-primary"
-            </Select>
+                dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
-          </Tooltip>
+              >
-        </div>
+                {userAvailableEnvs?.map(({ name, slug }) => (
-      </>}
+                  <SelectItem value={slug} key={slug}>
+                    {name}
+                  </SelectItem>
+                ))}
+              </Select>
+            </Tooltip>
+          </div>
+        </>
+      )}
     </div>
   );
 }

frontend/src/components/signup/CodeInputStep.tsx

@@ -3,9 +3,7 @@ import React, { useState } from "react";
 import ReactCodeInput from "react-code-input";
 import { useTranslation } from "react-i18next";
 
-import {
+import { useSendVerificationEmail } from "@app/hooks/api";
-  useSendVerificationEmail
-} from "@app/hooks/api";
 
 import Error from "../basic/Error";
 import { Button } from "../v2";
@@ -90,8 +88,8 @@ export default function CodeInputStep({
   return (
     <div className="mx-auto h-full w-full pb-4 md:px-8">
       <p className="text-md flex justify-center text-bunker-200">{t("signup.step2-message")}</p>
-      <p className="text-md flex justify-center font-semibold my-1 text-bunker-200">{email} </p>
+      <p className="text-md my-1 flex justify-center font-semibold text-bunker-200">{email} </p>
-      <div className="hidden md:block w-max min-w-[20rem] mx-auto">
+      <div className="mx-auto hidden w-max min-w-[20rem] md:block">
         <ReactCodeInput
           name=""
           inputMode="tel"
@@ -102,7 +100,7 @@ export default function CodeInputStep({
           className="mt-6 mb-2"
         />
       </div>
-      <div className="block md:hidden w-max mt-4 mx-auto">
+      <div className="mx-auto mt-4 block w-max md:hidden">
         <ReactCodeInput
           name=""
           inputMode="tel"
@@ -114,26 +112,29 @@ export default function CodeInputStep({
         />
       </div>
       {codeError && <Error text={t("signup.step2-code-error")} />}
-      <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+      <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
-        <div className="text-l py-1 text-lg w-full">
+        <div className="text-l w-full py-1 text-lg">
           <Button
             type="submit"
             onClick={incrementStep}
             size="sm"
             isFullWidth
-            className='h-14'
+            className="h-14"
             colorSchema="primary"
             variant="outline_bg"
             isLoading={isCodeInputCheckLoading}
-          > {String(t("signup.verify"))} </Button>
+          >
+            {" "}
+            {String(t("signup.verify"))}{" "}
+          </Button>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
+      <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
         <div className="flex flex-row items-baseline gap-1 text-sm">
           <span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
-          <div className="mt-2 text-bunker-400 text-md flex flex-row">
+          <div className="text-md mt-2 flex flex-row text-bunker-400">
             <button disabled={isLoading} onClick={resendVerificationEmail} type="button">
-              <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
                 {isResendingVerificationEmail
                   ? t("signup.step2-resend-progress")
                   : t("signup.step2-resend-submit")}
@@ -141,7 +142,7 @@ export default function CodeInputStep({
             </button>
           </div>
         </div>
-        <p className="text-sm text-bunker-400 pb-2">{t("signup.step2-spam-alert")}</p>
+        <p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
       </div>
     </div>
   );

frontend/src/components/signup/DonwloadBackupPDFStep.tsx

@@ -57,19 +57,22 @@ export default function DonwloadBackupPDFStep({
   };
 
   return (
-    <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
+    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
-      <p className="text-xl text-center font-medium flex flex-col justify-center items-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+      <p className="flex flex-col items-center justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 mb-6 text-6xl text-bunker-200" />
+        <FontAwesomeIcon
+          icon={faWarning}
+          className="ml-2 mr-3 mb-6 pt-1 text-6xl text-bunker-200"
+        />
         {t("signup.step4-message")}
       </p>
-      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
+      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
-        <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 lg:w-1/6 w-full md:min-w-[23rem] px-3 mx-auto">
+        <div className="m-2 mx-auto mt-4 flex w-full w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6 lg:w-1/6">
           <span className="mb-2">
             {t("signup.step4-description1")} {t("signup.step4-description3")}
           </span>
         </div>
-        <div className="flex flex-col items-center px-3 justify-center mt-0 md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
+        <div className="mx-auto mt-0 mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mt-4 md:mb-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
-          <div className="text-l py-1 text-lg w-full">
+          <div className="text-l w-full py-1 text-lg">
             <Button
               onClick={handleBackupKeyGenerate}
               size="sm"

frontend/src/components/signup/EnterEmailStep.tsx

@@ -52,13 +52,13 @@ export default function EnterEmailStep({
       try {
         await mutateAsync({ email });
         incrementStep();
-      } catch(e) {
+      } catch (e) {
         if (axios.isAxiosError(e)) {
-          const { message = "Something went wrong" } = e.response?.data as { message: string};
+          const { message = "Something went wrong" } = e.response?.data as { message: string };
           createNotification({
             type: "error",
-            text:  message
+            text: message
-          })
+          });
         }
       }
     }
@@ -66,11 +66,11 @@ export default function EnterEmailStep({
 
   return (
     <div>
-      <div className="w-full md:px-6 mx-auto">
+      <div className="mx-auto w-full md:px-6">
-        <p className="text-xl font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+        <p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent">
           {t("signup.step1-start")}
         </p>
-        <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] m-auto rounded-lg mt-8">
+        <div className="m-auto mt-8 flex w-1/4 min-w-[20rem] flex-col items-center justify-center rounded-lg lg:w-1/6">
           <Input
             placeholder="Enter your email address..."
             onChange={(e) => setEmail(e.target.value)}
@@ -79,28 +79,35 @@ export default function EnterEmailStep({
             autoComplete="username"
             className="h-12"
           />
-          {emailError && <p className="text-red-600 text-xs text-left w-full ml-1.5 mt-1.5">Please enter a valid email.</p>}
+          {emailError && (
+            <p className="ml-1.5 mt-1.5 w-full text-left text-xs text-red-600">
+              Please enter a valid email.
+            </p>
+          )}
         </div>
-        <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
-          <div className="text-l py-1 text-lg w-full">
+          <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"
               onClick={emailCheck}
               size="sm"
               isFullWidth
-              className='h-14'
+              className="h-14"
               colorSchema="primary"
               variant="outline_bg"
               isLoading={isLoading}
               isDisabled={isLoading}
-            > {String(t("signup.step1-submit"))} </Button>
+            >
+              {" "}
+              {String(t("signup.step1-submit"))}{" "}
+            </Button>
           </div>
         </div>
       </div>
       <div className="mx-auto mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
         <Link href="/login">
           <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
-            <span className="text-sm text-mineshaft-400 hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer">
+            <span className="cursor-pointer text-sm text-mineshaft-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
               {t("signup.already-have-account")}
             </span>
           </button>

frontend/src/components/signup/TeamInviteStep.tsx

@@ -16,7 +16,7 @@ export default function TeamInviteStep(): JSX.Element {
   const router = useRouter();
   const [emails, setEmails] = useState("");
   const { data: serverDetails } = useFetchServerStatus();
-  
+
   const { mutateAsync } = useAddUserToOrg();
   const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const);
 
@@ -40,55 +40,61 @@ export default function TeamInviteStep(): JSX.Element {
   };
 
   return (
-    <div className="w-max mx-auto min-w-lg h-full pb-4 px-8 mb-64 md:mb-32">
+    <div className="min-w-lg mx-auto mb-64 h-full w-max px-8 pb-4 md:mb-32">
-      <p className="text-2xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+      <p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-2xl font-semibold text-transparent">
         {t("signup.step5-invite-team")}
       </p>
-      <p className="text-center flex justify-center text-bunker-400 md:mx-8 mb-6 mt-4">
+      <p className="mb-6 mt-4 flex justify-center text-center text-bunker-400 md:mx-8">
         {t("signup.step5-subtitle")}
       </p>
-      <div className="bg-mineshaft-800 border border-mineshaft-500 w-max mx-auto pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-6">
+      <div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pt-6 pb-4 drop-shadow-xl">
         <div>
-          <div className="text-bunker-300 font-medium pl-1 pb-1 text-sm">
+          <div className="pl-1 pb-1 text-sm font-medium text-bunker-300">
             <span>Emails</span>
           </div>
           <textarea
-            className="bg-mineshaft-900/70 min-w-[30rem] h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+            className="h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 py-1 px-2 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2"
             value={emails}
             onChange={(e) => setEmails(e.target.value)}
             placeholder="email@example.com, email2@example.com..."
           />
         </div>
-        <div className="flex flex-row items-end justify-end mt-0 md:mt-4 md:mb-2 w-full md:min-w-[30rem] mt-2 md:max-w-md mx-auto text-sm">
+        <div className="mx-auto mt-0 mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:min-w-[30rem] md:max-w-md">
           <Button
             onClick={() => {
               if (serverDetails?.emailConfigured) {
-                inviteUsers({ emails })
+                inviteUsers({ emails });
               } else {
                 handlePopUpOpen("setUpEmail");
               }
             }}
             size="sm"
             // isFullWidth
-            className='h-10'
+            className="h-10"
             colorSchema="primary"
             variant="solid"
-          > {t("signup.step5-send-invites") ?? ""} </Button>
+          >
+            {" "}
+            {t("signup.step5-send-invites") ?? ""}{" "}
+          </Button>
         </div>
         <EmailServiceSetupModal
           isOpen={popUp.setUpEmail?.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
         />
       </div>
-      <div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 min-w-[20rem] max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+      <div className="min-w-28 mx-auto mt-4 mb-2 flex max-h-24 min-w-[20rem] max-w-max flex-row items-center justify-center px-4 text-lg md:p-2">
         <Button
           onClick={redirectToHome}
           size="sm"
           isFullWidth
-          className='h-12'
+          className="h-12"
           colorSchema="secondary"
           variant="outline"
-        > {t("signup.step5-skip") ?? "Skip"} </Button>
+        >
+          {" "}
+          {t("signup.step5-skip") ?? "Skip"}{" "}
+        </Button>
       </div>
     </div>
   );

frontend/src/components/signup/UserInfoStep.tsx

@@ -196,10 +196,8 @@ export default function UserInfoStep({
 
               const userOrgs = await fetchOrganizations();
 
-              const orgSlug = userOrgs[0]?.slug;
               const orgId = userOrgs[0]?.id;
               const project = await ProjectService.initProject({
-                organizationSlug: orgSlug,
                 projectName: "Example Project"
               });
 

frontend/src/components/utilities/SecurityClient.ts

@@ -1,17 +1,11 @@
-import {
+import { getAuthToken, setAuthToken, setMfaTempToken, setSignupTempToken } from "@app/reactQuery";
-  getAuthToken, 
-  setAuthToken,
-  setMfaTempToken,
-  setSignupTempToken} from "@app/reactQuery";
-
 
 export const PROVIDER_AUTH_TOKEN_KEY = "infisical__provider-auth-token";
 
 // depreciated: go for apiRequest module in config/api
 export default class SecurityClient {
-
   static setProviderAuthToken(tokenStr: string) {
-    localStorage.setItem(PROVIDER_AUTH_TOKEN_KEY, tokenStr || "")
+    localStorage.setItem(PROVIDER_AUTH_TOKEN_KEY, tokenStr || "");
   }
 
   static getProviderAuthToken() {

frontend/src/components/utilities/attemptChangePassword.ts

@@ -3,9 +3,7 @@ import crypto from "crypto";
 
 import jsrp from "jsrp";
 
-import {
+import { changePassword, srp1 } from "@app/hooks/api/auth/queries";
-changePassword,
-    srp1} from "@app/hooks/api/auth/queries";
 
 import Aes256Gcm from "./cryptography/aes-256-gcm";
 import { deriveArgonKey } from "./cryptography/crypto";
@@ -15,95 +13,95 @@ const clientOldPassword = new jsrp.client();
 const clientNewPassword = new jsrp.client();
 
 type Params = {
-    email: string;
+  email: string;
-    currentPassword: string;
+  currentPassword: string;
-    newPassword: string;
+  newPassword: string;
-}
+};
 
 const attemptChangePassword = ({ email, currentPassword, newPassword }: Params): Promise<void> => {
-    return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
-        clientOldPassword.init({ username: email, password: currentPassword }, async () => {
+    clientOldPassword.init({ username: email, password: currentPassword }, async () => {
-            let serverPublicKey; let salt;
+      let serverPublicKey;
+      let salt;
 
+      try {
+        const clientPublicKey = clientOldPassword.getPublicKey();
+
+        const res = await srp1({ clientPublicKey });
+
+        serverPublicKey = res.serverPublicKey;
+        salt = res.salt;
+
+        clientOldPassword.setSalt(salt);
+        clientOldPassword.setServerPublicKey(serverPublicKey);
+
+        const clientProof = clientOldPassword.getProof();
+
+        clientNewPassword.init({ username: email, password: newPassword }, async () => {
+          clientNewPassword.createVerifier(async (err, result) => {
             try {
-                const clientPublicKey = clientOldPassword.getPublicKey();
+              const derivedKey = await deriveArgonKey({
+                password: newPassword,
+                salt: result.salt,
+                mem: 65536,
+                time: 3,
+                parallelism: 1,
+                hashLen: 32
+              });
 
-                const res = await srp1({ clientPublicKey });
+              if (!derivedKey) throw new Error("Failed to derive key from password");
 
-                serverPublicKey = res.serverPublicKey;
+              const key = crypto.randomBytes(32);
-                salt = res.salt;
 
-                clientOldPassword.setSalt(salt);
+              const {
-                clientOldPassword.setServerPublicKey(serverPublicKey);
+                ciphertext: encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              } = Aes256Gcm.encrypt({
+                text: localStorage.getItem("PRIVATE_KEY") as string,
+                secret: key
+              });
 
-                const clientProof = clientOldPassword.getProof();
+              const {
+                ciphertext: protectedKey,
+                iv: protectedKeyIV,
+                tag: protectedKeyTag
+              } = Aes256Gcm.encrypt({
+                text: key.toString("hex"),
+                secret: Buffer.from(derivedKey.hash)
+              });
 
-                clientNewPassword.init({ username: email, password: newPassword }, async () => {
+              await changePassword({
-                    clientNewPassword.createVerifier(async (err, result) => {
+                clientProof,
-                        try {
+                protectedKey,
-                            const derivedKey = await deriveArgonKey({
+                protectedKeyIV,
-                                password: newPassword,
+                protectedKeyTag,
-                                salt: result.salt,
+                encryptedPrivateKey,
-                                mem: 65536,
+                encryptedPrivateKeyIV,
-                                time: 3,
+                encryptedPrivateKeyTag,
-                                parallelism: 1,
+                salt: result.salt,
-                                hashLen: 32
+                verifier: result.verifier
-                            });
+              });
 
-                            if (!derivedKey) throw new Error("Failed to derive key from password");
+              saveTokenToLocalStorage({
+                encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              });
 
-                            const key = crypto.randomBytes(32);
+              resolve();
-
+            } catch (err2) {
-                            const {
+              console.error(err2);
-                                ciphertext: encryptedPrivateKey,
+              reject(err2);
-                                iv: encryptedPrivateKeyIV,
-                                tag: encryptedPrivateKeyTag
-                            } = Aes256Gcm.encrypt({
-                                text: localStorage.getItem("PRIVATE_KEY") as string,
-                                secret: key
-                            });
-
-                            const {
-                                ciphertext: protectedKey,
-                                iv: protectedKeyIV,
-                                tag: protectedKeyTag
-                            } = Aes256Gcm.encrypt({
-                                text: key.toString("hex"),
-                                secret: Buffer.from(derivedKey.hash)
-                            });
-
-                            await changePassword({
-                                clientProof,
-                                protectedKey,
-                                protectedKeyIV,
-                                protectedKeyTag,
-                                encryptedPrivateKey,
-                                encryptedPrivateKeyIV,
-                                encryptedPrivateKeyTag,
-                                salt: result.salt,
-                                verifier: result.verifier
-                            });
-
-                            saveTokenToLocalStorage({
-                                encryptedPrivateKey,
-                                iv: encryptedPrivateKeyIV,
-                                tag: encryptedPrivateKeyTag
-                            });
-
-                            resolve();
-                        } catch (err2) {
-                            console.error(err2);
-                            reject(err2);
-                        }
-
-                    });
-                });
-            } catch (err) {
-                console.error(err);
-                reject(err);
             }
+          });
         });
+      } catch (err) {
+        console.error(err);
+        reject(err);
+      }
     });
-}
+  });
+};
 
-export default attemptChangePassword;
+export default attemptChangePassword;

frontend/src/components/utilities/attemptCliLoginMfa.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import jsrp from "jsrp";
 
-import { login1 , verifyMfaToken } from "@app/hooks/api/auth/queries";
+import { login1, verifyMfaToken } from "@app/hooks/api/auth/queries";
 import KeyService from "@app/services/KeyService";
 
 import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
@@ -11,11 +11,11 @@ import SecurityClient from "./SecurityClient";
 const client = new jsrp.client();
 
 interface IsMfaLoginSuccessful {
-    success: boolean;
+  success: boolean;
-    loginResponse:{ 
+  loginResponse: {
-        privateKey: string;
+    privateKey: string;
-        JTWToken: string;
+    JTWToken: string;
-    }
+  };
 }
 
 /**
@@ -26,81 +26,84 @@ interface IsMfaLoginSuccessful {
  * @param {String} obj.mfaToken - MFA code/token
  */
 const attemptLoginMfa = async ({
-    email,
+  email,
-    password,
+  password,
-    providerAuthToken,
+  providerAuthToken,
-    mfaToken
+  mfaToken
 }: {
-    email: string;
+  email: string;
-    password: string;
+  password: string;
-    providerAuthToken?: string,
+  providerAuthToken?: string;
-    mfaToken: string;
+  mfaToken: string;
 }): Promise<IsMfaLoginSuccessful> => {
-    return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
-        client.init({
+    client.init(
-            username: email,
+      {
-            password
+        username: email,
-        }, async () => {
+        password
-            try {
+      },
-                const clientPublicKey = client.getPublicKey();
+      async () => {
-                const { salt } = await login1({
+        try {
-                    email,
+          const clientPublicKey = client.getPublicKey();
-                    clientPublicKey,
+          const { salt } = await login1({
-                    providerAuthToken,
+            email,
-                });
+            clientPublicKey,
+            providerAuthToken
+          });
 
-                const {
+          const {
-                    encryptionVersion,
+            encryptionVersion,
-                    protectedKey,
+            protectedKey,
-                    protectedKeyIV,
+            protectedKeyIV,
-                    protectedKeyTag,
+            protectedKeyTag,
-                    token,
+            token,
-                    publicKey,
+            publicKey,
-                    encryptedPrivateKey,
+            encryptedPrivateKey,
-                    iv,
+            iv,
-                    tag
+            tag
-                } = await verifyMfaToken({
+          } = await verifyMfaToken({
-                    email,
+            email,
-                    mfaCode: mfaToken
+            mfaCode: mfaToken
-                });
+          });
 
-                // unset temporary (MFA) JWT token and set JWT token
+          // unset temporary (MFA) JWT token and set JWT token
-                SecurityClient.setMfaToken("");
+          SecurityClient.setMfaToken("");
-                SecurityClient.setToken(token);
+          SecurityClient.setToken(token);
-                SecurityClient.setProviderAuthToken("");
+          SecurityClient.setProviderAuthToken("");
 
-                const privateKey = await KeyService.decryptPrivateKey({
+          const privateKey = await KeyService.decryptPrivateKey({
-                    encryptionVersion,
+            encryptionVersion,
-                    encryptedPrivateKey,
+            encryptedPrivateKey,
-                    iv,
+            iv,
-                    tag,
+            tag,
-                    password,
+            password,
-                    salt,
+            salt,
-                    protectedKey,
+            protectedKey,
-                    protectedKeyIV,
+            protectedKeyIV,
-                    protectedKeyTag
+            protectedKeyTag
-                });
+          });
 
-                saveTokenToLocalStorage({
+          saveTokenToLocalStorage({
-                    publicKey,
+            publicKey,
-                    encryptedPrivateKey,
+            encryptedPrivateKey,
-                    iv,
+            iv,
-                    tag,
+            tag,
-                    privateKey
+            privateKey
-                });
+          });
 
-                resolve({
+          resolve({
-                    success: true,
+            success: true,
-                    loginResponse:{
+            loginResponse: {
-                        privateKey,
+              privateKey,
-                        JTWToken: token
+              JTWToken: token
-                    }
-                });
-            } catch (err) {
-                reject(err);
             }
-        });
+          });
-    });
+        } catch (err) {
-}
+          reject(err);
+        }
+      }
+    );
+  });
+};
 
-export default attemptLoginMfa;
+export default attemptLoginMfa;

frontend/src/components/utilities/attemptLoginMfa.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import jsrp from "jsrp";
 
-import { login1 , verifyMfaToken } from "@app/hooks/api/auth/queries";
+import { login1, verifyMfaToken } from "@app/hooks/api/auth/queries";
 import KeyService from "@app/services/KeyService";
 
 import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
@@ -18,75 +18,78 @@ const client = new jsrp.client();
  * @param {String} obj.mfaToken - MFA code/token
  */
 const attemptLoginMfa = async ({
-    email,
+  email,
-    password,
+  password,
-    providerAuthToken,
+  providerAuthToken,
-    mfaToken
+  mfaToken
 }: {
-    email: string;
+  email: string;
-    password: string;
+  password: string;
-    providerAuthToken?: string,
+  providerAuthToken?: string;
-    mfaToken: string;
+  mfaToken: string;
 }): Promise<Boolean> => {
-    return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
-        client.init({
+    client.init(
-            username: email,
+      {
-            password
+        username: email,
-        }, async () => {
+        password
-            try {
+      },
-                const clientPublicKey = client.getPublicKey();
+      async () => {
-                const { salt } = await login1({
+        try {
-                    email,
+          const clientPublicKey = client.getPublicKey();
-                    clientPublicKey,
+          const { salt } = await login1({
-                    providerAuthToken,
+            email,
-                });
+            clientPublicKey,
-                
+            providerAuthToken
-                const {
+          });
-                    encryptionVersion,
-                    protectedKey,
-                    protectedKeyIV,
-                    protectedKeyTag,
-                    token, 
-                    publicKey, 
-                    encryptedPrivateKey, 
-                    iv, 
-                    tag
-                } = await verifyMfaToken({
-                    email,
-                    mfaCode: mfaToken
-                });
 
-                // unset temporary (MFA) JWT token and set JWT token
+          const {
-                SecurityClient.setMfaToken("");
+            encryptionVersion,
-                SecurityClient.setToken(token);
+            protectedKey,
-                SecurityClient.setProviderAuthToken("");
+            protectedKeyIV,
+            protectedKeyTag,
+            token,
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag
+          } = await verifyMfaToken({
+            email,
+            mfaCode: mfaToken
+          });
 
-                const privateKey = await KeyService.decryptPrivateKey({
+          // unset temporary (MFA) JWT token and set JWT token
-                    encryptionVersion,
+          SecurityClient.setMfaToken("");
-                    encryptedPrivateKey,
+          SecurityClient.setToken(token);
-                    iv,
+          SecurityClient.setProviderAuthToken("");
-                    tag,
-                    password,
-                    salt,
-                    protectedKey,
-                    protectedKeyIV,
-                    protectedKeyTag
-                });
-                
-                saveTokenToLocalStorage({
-                    publicKey,
-                    encryptedPrivateKey,
-                    iv,
-                    tag,
-                    privateKey
-                });
 
-                resolve(true);
+          const privateKey = await KeyService.decryptPrivateKey({
-            } catch (err) {
+            encryptionVersion,
-                reject(err);
+            encryptedPrivateKey,
-            }
+            iv,
-        });
+            tag,
-    });
+            password,
-}
+            salt,
+            protectedKey,
+            protectedKeyIV,
+            protectedKeyTag
+          });
 
-export default attemptLoginMfa;
+          saveTokenToLocalStorage({
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            privateKey
+          });
+
+          resolve(true);
+        } catch (err) {
+          reject(err);
+        }
+      }
+    );
+  });
+};
+
+export default attemptLoginMfa;

frontend/src/components/utilities/checks/password/PasswordCheck.ts

@@ -1,5 +1,11 @@
 import { checkIsPasswordBreached } from "./checkIsPasswordBreached";
-import { escapeCharRegex, letterCharRegex, lowEntropyRegexes,numAndSpecialCharRegex, repeatedCharRegex } from "./passwordRegexes";
+import {
+  escapeCharRegex,
+  letterCharRegex,
+  lowEntropyRegexes,
+  numAndSpecialCharRegex,
+  repeatedCharRegex
+} from "./passwordRegexes";
 
 interface PasswordCheckProps {
   password: string;
@@ -29,40 +35,38 @@ const passwordCheck = async ({
     {
       name: "tooShort",
       validator: (pwd: string) => pwd.length >= 14,
-      setError: setPasswordErrorTooShort,
+      setError: setPasswordErrorTooShort
     },
     {
       name: "tooLong",
       validator: (pwd: string) => pwd.length < 101,
-      setError: setPasswordErrorTooLong,
+      setError: setPasswordErrorTooLong
     },
     {
       name: "noLetterChar",
       validator: (pwd: string) => letterCharRegex.test(pwd),
-      setError: setPasswordErrorNoLetterChar,
+      setError: setPasswordErrorNoLetterChar
     },
     {
       name: "noNumOrSpecialChar",
       validator: (pwd: string) => numAndSpecialCharRegex.test(pwd),
-      setError: setPasswordErrorNoNumOrSpecialChar,
+      setError: setPasswordErrorNoNumOrSpecialChar
     },
     {
       name: "repeatedChar",
       validator: (pwd: string) => !repeatedCharRegex.test(pwd),
-      setError: setPasswordErrorRepeatedChar,
+      setError: setPasswordErrorRepeatedChar
     },
     {
       name: "escapeChar",
       validator: (pwd: string) => !escapeCharRegex.test(pwd),
-      setError: setPasswordErrorEscapeChar,
+      setError: setPasswordErrorEscapeChar
     },
     {
       name: "lowEntropy",
-      validator: (pwd: string) => (
+      validator: (pwd: string) => !lowEntropyRegexes.some((regex) => regex.test(pwd)),
-        !lowEntropyRegexes.some(regex => regex.test(pwd))
+      setError: setPasswordErrorLowEntropy
-      ),
+    }
-       setError: setPasswordErrorLowEntropy,
-    },
   ];
 
   const isBreached = await checkIsPasswordBreached(password);
@@ -73,7 +77,7 @@ const passwordCheck = async ({
   } else {
     setPasswordErrorBreached(false);
   }
-  
+
   tests.forEach((test) => {
     if (!test.validator(password)) {
       errorCheck = true;
@@ -81,7 +85,7 @@ const passwordCheck = async ({
     } else {
       test.setError(false);
     }
-  })
+  });
 
   return errorCheck;
 };

frontend/src/components/utilities/checks/password/checkIsPasswordBreached.ts

@@ -17,25 +17,25 @@ function bufferToHex(buffer: ArrayBuffer): string {
   return hexParts.join("");
 }
 
-  // see API details here: https://haveibeenpwned.com/API/v3#SearchingPwnedPasswordsByRange
+// see API details here: https://haveibeenpwned.com/API/v3#SearchingPwnedPasswordsByRange
-  // in short, the pending password is hashed (SHA-1), the first 5 chars are sliced and compared against a ranged hash table
+// in short, the pending password is hashed (SHA-1), the first 5 chars are sliced and compared against a ranged hash table
-  // this hash table is formed from the 5 char hash prefix (ie. 00000-FFFFF) so 16^5 results
+// this hash table is formed from the 5 char hash prefix (ie. 00000-FFFFF) so 16^5 results
-  // returns a hash table of 800-1000 results
+// returns a hash table of 800-1000 results
-  // padding has been added to prevent MitM attacker determining which hash table was called by the response size
+// padding has been added to prevent MitM attacker determining which hash table was called by the response size
-  // the last 35 chars of the password hash are compared client-side against the table
+// the last 35 chars of the password hash are compared client-side against the table
-  // if there is a match, that password has been involved in a password breach (ie. pwnd) and should NOT be accepted
+// if there is a match, that password has been involved in a password breach (ie. pwnd) and should NOT be accepted
-  // the database consists of ~700 mln breached passwords and is continuously updated, including with law enforcement ingestion
+// the database consists of ~700 mln breached passwords and is continuously updated, including with law enforcement ingestion
-  // https://www.troyhunt.com/open-source-pwned-passwords-with-fbi-feed-and-225m-new-nca-passwords-is-now-live/
+// https://www.troyhunt.com/open-source-pwned-passwords-with-fbi-feed-and-225m-new-nca-passwords-is-now-live/
 
-  // The HIBP API follows NIST guidance (pg.14) https://nvlpubs.nist.gov/nistpubs/SpecialPublications/NIST.SP.800-63b.pdf
+// The HIBP API follows NIST guidance (pg.14) https://nvlpubs.nist.gov/nistpubs/SpecialPublications/NIST.SP.800-63b.pdf
-  // "When processing requests to establish and change memorized secrets, verifiers SHALL compare
+// "When processing requests to establish and change memorized secrets, verifiers SHALL compare
-  // the prospective secrets against a list that contains values known to be commonly-used, expected,
+// the prospective secrets against a list that contains values known to be commonly-used, expected,
-  // or compromised. For example, the list MAY include, but is not limited to:
+// or compromised. For example, the list MAY include, but is not limited to:
-  // • Passwords obtained from previous breach corpuses.
+// • Passwords obtained from previous breach corpuses.
-  // • Dictionary words.
+// • Dictionary words.
-  // • Repetitive or sequential characters (e.g. ‘aaaaaa’, ‘1234abcd’).
+// • Repetitive or sequential characters (e.g. ‘aaaaaa’, ‘1234abcd’).
-  // • Context-specific words, such as the name of the service, the username, and derivatives
+// • Context-specific words, such as the name of the service, the username, and derivatives
-  //   thereof."
+//   thereof."
 
 export const checkIsPasswordBreached = async (password: string): Promise<boolean> => {
   const HAVE_I_BEEN_PWNED_API_URL = "https://api.pwnedpasswords.com";
@@ -66,8 +66,8 @@ export const checkIsPasswordBreached = async (password: string): Promise<boolean
         response = await axios.get(rangedHashTableUri, {
           headers: {
             "Add-Padding": "true", // see https://www.troyhunt.com/enhancing-pwned-passwords-privacy-with-padding/
-            "Content-Type": "text/plain",
+            "Content-Type": "text/plain"
-          },
+          }
         });
 
         if (response.status === 200) {
@@ -76,9 +76,8 @@ export const checkIsPasswordBreached = async (password: string): Promise<boolean
           // check the last 35 hash chars to see if there's a match
           const isBreachedPassword: boolean = responseData.includes(hashedPwd.slice(5, 40));
           return isBreachedPassword;
-        } 
+        }
-          retryAttempt += 1;
+        retryAttempt += 1;
-        
       } catch (err) {
         if (!axios.isAxiosError(err)) {
           throw err;
@@ -88,14 +87,15 @@ export const checkIsPasswordBreached = async (password: string): Promise<boolean
     }
 
     console.error(
-      `Received a non-200 response (${response ? response.status : "unknown"}) from the Pwnd Passwords API`
+      `Received a non-200 response (${
+        response ? response.status : "unknown"
+      }) from the Pwnd Passwords API`
     );
     return false;
   } catch (err: any) {
     console.error("An unexpected error has occurred:", err.message);
     return false;
   } finally {
-
     // Clear the UTF-8 encoded password from memory
 
     if (encodedPwd) {

frontend/src/components/utilities/checks/password/checkPassword.ts

@@ -1,5 +1,11 @@
 import { checkIsPasswordBreached } from "./checkIsPasswordBreached";
-import { escapeCharRegex, letterCharRegex, lowEntropyRegexes,numAndSpecialCharRegex, repeatedCharRegex } from "./passwordRegexes";
+import {
+  escapeCharRegex,
+  letterCharRegex,
+  lowEntropyRegexes,
+  numAndSpecialCharRegex,
+  repeatedCharRegex
+} from "./passwordRegexes";
 
 type Errors = {
   tooShort?: string;
@@ -44,40 +50,38 @@ const checkPassword = async ({ password, setErrors }: CheckPasswordParams): Prom
     {
       name: "tooShort",
       validator: (pwd: string) => pwd.length >= 14,
-      errorText: "at least 14 characters",
+      errorText: "at least 14 characters"
     },
     {
       name: "tooLong",
       validator: (pwd: string) => pwd.length < 101,
-      errorText: "at most 100 characters",
+      errorText: "at most 100 characters"
     },
     {
       name: "noLetterChar",
       validator: (pwd: string) => letterCharRegex.test(pwd),
-      errorText: "at least 1 letter character",
+      errorText: "at least 1 letter character"
     },
     {
       name: "noNumOrSpecialChar",
       validator: (pwd: string) => numAndSpecialCharRegex.test(pwd),
-      errorText: "at least 1 number or special character",
+      errorText: "at least 1 number or special character"
     },
     {
       name: "repeatedChar",
       validator: (pwd: string) => !repeatedCharRegex.test(pwd),
-      errorText: "at most 3 repeated, consecutive characters",
+      errorText: "at most 3 repeated, consecutive characters"
     },
     {
       name: "escapeChar",
       validator: (pwd: string) => !escapeCharRegex.test(pwd),
-      errorText: "No escape characters allowed.",
+      errorText: "No escape characters allowed."
     },
     {
       name: "lowEntropy",
-      validator: (pwd: string) => (
+      validator: (pwd: string) => !lowEntropyRegexes.some((regex) => regex.test(pwd)),
-        !lowEntropyRegexes.some(regex => regex.test(pwd))
+      errorText: "Password contains personal info."
-      ),
+    }
-      errorText: "Password contains personal info.",
-    },
   ];
 
   const isBreached = await checkIsPasswordBreached(password);
@@ -96,4 +100,4 @@ const checkPassword = async ({ password, setErrors }: CheckPasswordParams): Prom
   return Object.keys(errors).length > 0;
 };
 
-export default checkPassword;
+export default checkPassword;

frontend/src/components/utilities/checks/password/passwordRegexes.ts

@@ -1,6 +1,7 @@
 // This regex covers letters (case insensitive) for the top 50 most spoken languages
 /* eslint-disable no-misleading-character-class */
-export const letterCharRegex = /[A-Za-z\u00C0-\u00D6\u00D8-\u00DE\u00DF-\u00F6\u00F8-\u00FF\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FFF\u0600-\u06FF\u0400-\u04FF\u0500-\u052F\u2DE0-\u2DFF\uA640-\uA69F\u05B0-\u05FF\u0980-\u09FF\u1F00-\u1FFF\u0130\u015E\u011E\u00C7\u00FC\u00FB\u00EB\u00E7]/u;
+export const letterCharRegex =
+  /[A-Za-z\u00C0-\u00D6\u00D8-\u00DE\u00DF-\u00F6\u00F8-\u00FF\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FFF\u0600-\u06FF\u0400-\u04FF\u0500-\u052F\u2DE0-\u2DFF\uA640-\uA69F\u05B0-\u05FF\u0980-\u09FF\u1F00-\u1FFF\u0130\u015E\u011E\u00C7\u00FC\u00FB\u00EB\u00E7]/u;
 
 // This regex covers digits, special characters, symbols, and emojis.
 export const numAndSpecialCharRegex = /[\d!@#$%^&*(),.?":{}|<>]|[^\p{L}\p{N}\s]/u;
@@ -32,5 +33,5 @@ export const lowEntropyRegexes = [
   /\b(?:[A-Z0-9]{7,10}|[A-Z0-9]{10,11}|[A-Z0-9]{7,10})\b/,
 
   // US social security number
-  /\b\d{3}[-\s]?\d{2}[-\s]?\d{4}\b/,
+  /\b\d{3}[-\s]?\d{2}[-\s]?\d{4}\b/
-];
+];

frontend/src/components/utilities/cryptography/issueBackupKey.ts

@@ -3,9 +3,7 @@ import crypto from "crypto";
 
 import jsrp from "jsrp";
 
-import { issueBackupPrivateKey ,
+import { issueBackupPrivateKey, srp1 } from "@app/hooks/api/auth/queries";
-  srp1
-} from "@app/hooks/api/auth/queries";
 
 import generateBackupPDF from "../generateBackupPDF";
 import Aes256Gcm from "./aes-256-gcm";
@@ -97,7 +95,6 @@ const issueBackupKey = async ({
                     generatedKey
                   });
                   setBackupKeyIssued(true);
-              
                 } catch {
                   setBackupKeyError(true);
                 }

frontend/src/components/utilities/intercom/intercom.ts

@@ -7,6 +7,7 @@
 /* eslint-disable vars-on-top */
 /* eslint-disable no-var */
 /* eslint-disable func-names */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
 import { INTERCOMid as APPid } from "@app/components/utilities/config";

frontend/src/components/utilities/intercom/intercomProvider.ts

@@ -3,11 +3,7 @@ import { useRouter } from "next/router";
 
 import { useUser } from "@app/context";
 
-import {
+import { boot as bootIntercom, load as loadIntercom, update as updateIntercom } from "./intercom";
-  boot as bootIntercom,
-  load as loadIntercom,
-  update as updateIntercom,
-} from "./intercom";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const IntercomProvider = ({ children }: { children: any }) => {
@@ -16,7 +12,11 @@ export const IntercomProvider = ({ children }: { children: any }) => {
 
   if (typeof window !== "undefined") {
     loadIntercom();
-    bootIntercom({name: `${user?.firstName || ""} ${user?.lastName || ""}`, email: user?.email || "", created_at: Math.floor(((new Date(user?.createdAt))?.getTime() || 0) / 1000)});
+    bootIntercom({
+      name: `${user?.firstName || ""} ${user?.lastName || ""}`,
+      email: user?.email || "",
+      created_at: Math.floor((new Date(user?.createdAt)?.getTime() || 0) / 1000)
+    });
   }
 
   useEffect(() => {
@@ -37,4 +37,4 @@ export const IntercomProvider = ({ children }: { children: any }) => {
   }, [router.events]);
 
   return children;
-};
+};

frontend/src/components/utilities/isValidHexColor.ts

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

frontend/src/components/utilities/saveTokenToLocalStorage.ts

@@ -17,10 +17,9 @@ export const saveTokenToLocalStorage = ({
   encryptedPrivateKey,
   iv,
   tag,
-  privateKey,
+  privateKey
 }: Props) => {
   try {
-    
     if (protectedKey) {
       localStorage.removeItem("protectedKey");
       localStorage.setItem("protectedKey", protectedKey);
@@ -62,9 +61,7 @@ export const saveTokenToLocalStorage = ({
     }
   } catch (err) {
     if (err instanceof Error) {
-      throw new Error(
+      throw new Error(`Unable to send the tokens in local storage:${err.message}`);
-        `Unable to send the tokens in local storage:${  err.message}`
-      );
     }
   }
 };

frontend/src/components/utilities/telemetry/Telemetry.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
-import { PostHog } from 'posthog-js';
+import { PostHog } from "posthog-js";
-import { initPostHog } from '@app/components/analytics/posthog';
+import { initPostHog } from "@app/components/analytics/posthog";
-import { ENV } from '@app/components/utilities/config';
+import { ENV } from "@app/components/utilities/config";
 
 declare let TELEMETRY_CAPTURING_ENABLED: any;
 
@@ -13,23 +13,23 @@ class Capturer {
   }
 
   capture(item: string) {
-    if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
+    if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
       try {
         this.api.capture(item);
       } catch (error) {
-        console.error('PostHog', error);
+        console.error("PostHog", error);
       }
     }
   }
 
   identify(id: string, email?: string) {
-    if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
+    if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
       try {
         this.api.identify(id, {
           email: email
         });
       } catch (error) {
-        console.error('PostHog', error);
+        console.error("PostHog", error);
       }
     }
   }

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

@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Accordion>;
 
 export const Basic: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <Accordion {...args}>
         <AccordionItem value="section-1">
           <AccordionTrigger>Section 1</AccordionTrigger>

frontend/src/components/v2/Accordion/Accordion.tsx

@@ -8,7 +8,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.Accor
   ({ children, className, ...props }, forwardedRef) => (
     <AccordionPrimitive.Item
       className={twMerge(
-        "mt-px overflow-hidden first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary transition-all border-transparent",
+        "mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={twMerge(
-        "py-2 px-4 group data-[state=open]:text-primary h-11 hover:text-primary flex flex-1 outline-none items-center justify-between ",
+        "group flex h-11 flex-1 items-center justify-between py-2 px-4 outline-none hover:text-primary data-[state=open]:text-primary ",
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
       {children}
       <FontAwesomeIcon
         icon={faChevronDown}
-        className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 text-sm"
+        className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
         aria-hidden
       />
     </AccordionPrimitive.Trigger>
@@ -51,13 +51,13 @@ export const AccordionContent = forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
     className={twMerge(
-      "data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden",
+      "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp",
       className
     )}
     {...props}
     ref={forwardedRef}
   >
-    <div className="text-sm py-2 px-4">{children}</div>
+    <div className="py-2 px-4 text-sm">{children}</div>
   </AccordionPrimitive.Content>
 ));
 

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

@@ -1 +1 @@
-export { Accordion, AccordionContent, AccordionItem,AccordionTrigger } from "./Accordion";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";

frontend/src/components/v2/Card/Card.tsx

@@ -10,7 +10,7 @@ export type CardTitleProps = {
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
   <div
     className={twMerge(
-      "px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600 break-words",
+      "mb-5 break-words border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal",
       className
     )}
   >

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

@@ -30,7 +30,7 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          "flex items-center flex-shrink-0 justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
+          "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
           isChecked && "bg-primary hover:bg-primary",
           Boolean(children) && "mr-3",
@@ -46,7 +46,7 @@ export const Checkbox = ({
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <label className="text-sm whitespace-nowrap truncate" htmlFor={id}>
+      <label className="truncate whitespace-nowrap text-sm" htmlFor={id}>
         {children}
         {isRequired && <span className="pl-1 text-red">*</span>}
       </label>

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

@@ -58,7 +58,7 @@ export const DeleteActionModal = ({
         title={title}
         subTitle={subTitle}
         footerContent={
-          <div className="flex items-center mx-2">
+          <div className="mx-2 flex items-center">
             <Button
               className="mr-4"
               colorSchema="danger"
@@ -91,7 +91,11 @@ export const DeleteActionModal = ({
             }
             className="mb-0"
           >
-            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} placeholder="Type to delete..." />
+            <Input
+              value={inputData}
+              onChange={(e) => setInputData(e.target.value)}
+              placeholder="Type to delete..."
+            />
           </FormControl>
         </form>
       </ModalContent>

frontend/src/components/v2/Drawer/Drawer.tsx

@@ -45,7 +45,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         ref={forwardedRef}
         className={twMerge(drawerContentVariation({ direction, className }))}
       >
-        <Card isRounded={false} className="h-full w-full dark">
+        <Card isRounded={false} className="dark h-full w-full">
           {title && (
             <CardTitle subTitle={subTitle} className="px-4">
               {title}

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

@@ -1 +1 @@
-export { Drawer, DrawerClose,DrawerContent, DrawerTrigger } from "./Drawer";
+export { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from "./Drawer";

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

@@ -25,7 +25,7 @@ type Story = StoryObj<typeof DropdownMenuContent>;
 
 export const Basic: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -43,7 +43,7 @@ export const Basic: Story = {
 
 export const Icons: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -65,7 +65,7 @@ export const Icons: Story = {
 
 export const WithDivider: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -86,7 +86,7 @@ export const WithDivider: Story = {
 
 export const Group: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            "z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            "z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
 export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
   <DropdownMenuPrimitive.Label
     {...props}
-    className={twMerge("text-xs text-bunker-400 px-4 pt-2 pb-1", className)}
+    className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
   />
 );
 
@@ -91,14 +91,14 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
+      "block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
       className
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
-      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
+      {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.Item>
 );
@@ -124,14 +124,14 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.SubTrigger
     {...props}
     className={twMerge(
-      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
+      "block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
       className
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
-      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
+      {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.SubTrigger>
 );
@@ -143,7 +143,7 @@ export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupPro
   ({ ...props }, ref) => (
     <DropdownMenuPrimitive.Group
       {...props}
-      className={twMerge("text-xs py-2 pl-3", props.className)}
+      className={twMerge("py-2 pl-3 text-xs", props.className)}
       ref={ref}
     />
   )
@@ -159,7 +159,7 @@ export const DropdownMenuSeparator = forwardRef<
   <DropdownMenuPrimitive.Separator
     ref={ref}
     {...props}
-    className={twMerge("h-[1px] bg-gray-700 m-1", className)}
+    className={twMerge("m-1 h-[1px] bg-gray-700", className)}
   />
 ));
 

frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx

@@ -10,9 +10,10 @@ export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Ele
   <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
     <ModalContent title="Email service not configured">
       <p className="mb-4 text-bunker-300">
-        The administrators of this Infisical instance have not yet set up an email service provider required to perform this action
+        The administrators of this Infisical instance have not yet set up an email service provider
+        required to perform this action
       </p>
-      
+
       <a href="https://infisical.com/docs/self-hosting/configuration/email">
         <Button className="mr-4">Learn more</Button>
       </a>

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -23,7 +23,7 @@ export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelP
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
     {icon && (
-      <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
+      <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
         {icon}
       </span>
     )}

frontend/src/components/v2/HoverCard/HoverCard.tsx

@@ -10,22 +10,16 @@ type Props = {
 
 export type HoverCardProps = Props;
 
-export const HoverObject = ({
+export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
-    text,
-    icon,
-    color
-  }: Props): JSX.Element => (
   <HoverCard.Root openDelay={50}>
     <HoverCard.Trigger asChild>
-      <a
+      <a className="ImageTrigger z-20">
-        className="ImageTrigger z-20"
-      >
         <FontAwesomeIcon icon={icon} className={`text-${color}`} />
       </a>
     </HoverCard.Trigger>
     <HoverCard.Portal>
       <HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
-        <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
+        <div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
           <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
             <div>
               <div className="Text bold">{text}</div>

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

@@ -1 +1 @@
-export { HoverCard,HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
+export { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCardv2";

frontend/src/components/v2/Menu/Menu.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable global-require */

frontend/src/components/v2/Modal/Modal.tsx

@@ -29,7 +29,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "fixed top-1/2 left-1/2 z-30 dark:[color-scheme:dark] max-h-screen thin-scrollbar max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
+            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-h-screen max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
             className
           )}
         >

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -44,7 +44,7 @@ export const Pagination = ({
   return (
     <div
       className={twMerge(
-        "flex items-center justify-end text-white w-full py-3 px-4 bg-mineshaft-800",
+        "flex w-full items-center justify-end bg-mineshaft-800 py-3 px-4 text-white",
         className
       )}
     >

frontend/src/components/v2/Popover/Popover.tsx

@@ -3,39 +3,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Popover from "@radix-ui/react-popover";
 
 type Props = {
-  children: any; 
+  children: any;
-  text: string; 
+  text: string;
-  onChangeHandler: (value: string, id: string) => void; 
+  onChangeHandler: (value: string, id: string) => void;
   id: string;
 };
 
 export type PopoverProps = Props;
 
-export const PopoverObject = ({children, text, onChangeHandler, id}: Props) => (
+export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) => (
   <Popover.Root>
-    <Popover.Trigger asChild className='data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400'>
+    <Popover.Trigger
+      asChild
+      className="data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400"
+    >
       {children}
     </Popover.Trigger>
     <Popover.Portal>
       <Popover.Content
-        className="rounded z-[100] p-3 w-[460px] min-h-fit border border-chicago-700 bg-mineshaft-600 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        className="z-[100] min-h-fit w-[460px] rounded border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
         sideOffset={5}
         hideWhenDetached
         side="left"
       >
-        <div className="flex flex-col pt-2 dark">
+        <div className="dark flex flex-col pt-2">
-          <p className="text-bunker-200 text-[15px] leading-[0px] font-medium mb-5">Comment</p>
+          <p className="mb-5 text-[15px] font-medium leading-[0px] text-bunker-200">Comment</p>
           <textarea
             onChange={(e) => onChangeHandler(e.target.value, id)}
             // type={type}
             value={text}
-            className='z-10 dark:[color-scheme:dark] peer h-[20rem] ph-no-capture bg-bunker-600 border border-mineshaft-500 rounded-md py-2.5 caret-bunker-200 text-sm px-2 w-full outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            className="ph-no-capture placeholder peer z-10 h-[20rem] w-full rounded-md border border-mineshaft-500 bg-bunker-600 py-2.5 px-2 text-sm text-bunker-300 caret-bunker-200 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent dark:[color-scheme:dark]"
             spellCheck="false"
-            placeholder='–'
+            placeholder="–"
           />
         </div>
         <Popover.Close
-          className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-bunker-300 hover:text-white absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
+          className="hover:bg-violet4 focus:shadow-violet7 absolute top-[5px] right-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-none hover:text-white focus:shadow-[0_0_0_2px]"
           aria-label="Close"
         >
           <FontAwesomeIcon icon={faXmark} />

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

@@ -1 +1 @@
-export { Popover,PopoverContent, PopoverTrigger } from "./Popoverv2";
+export { Popover, PopoverContent, PopoverTrigger } from "./Popoverv2";

frontend/src/components/v2/RadioGroup/RadioGroup.tsx

@@ -6,35 +6,35 @@ export type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
 
 // Note this component is not customizable (Heroku integration and potentially other pages depend on it)
 export const RadioGroup = ({ className, children, ...props }: RadioGroupProps) => (
-  <RadioGroupPrimitive.Root 
+  <RadioGroupPrimitive.Root
-    className={twMerge("flex flex-row gap-5 px-6 mb-6", className)}
+    className={twMerge("mb-6 flex flex-row gap-5 px-6", className)}
     defaultValue="App"
     aria-label="View density"
     {...props}
-  >  
+  >
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="bg-bunker-400/20 w-[20px] h-[20px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        className="h-[20px] w-[20px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
         value="App"
         id="r1"
       >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-primary" />
+        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-primary after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r1">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r1">
         App
       </label>
     </div>
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="bg-bunker-400/20 w-[22px] h-[22px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        className="h-[22px] w-[22px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
         value="Pipeline"
         id="r2"
       >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[13px] after:h-[13px] after:rounded-[50%] after:bg-primary" />
+        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[13px] after:w-[13px] after:rounded-[50%] after:bg-primary after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r2">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r2">
         Pipeline
       </label>
     </div>
   </RadioGroupPrimitive.Root>
-);
+);

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

@@ -14,7 +14,8 @@ const replaceContentWithDot = (str: string) => {
   return finalStr;
 };
 
-const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
+const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
+  if (isImport) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);
@@ -46,6 +47,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
+  isImport?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
   containerClassName?: string;
@@ -55,7 +57,17 @@ const commonClassName = "font-mono text-sm caret-white border-none outline-none
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   (
-    { value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
+    {
+      value,
+      isVisible,
+      isImport,
+      containerClassName,
+      onBlur,
+      isDisabled,
+      isReadOnly,
+      onFocus,
+      ...props
+    },
     ref
   ) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
@@ -69,7 +81,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
           <pre aria-hidden className="m-0 ">
             <code className={`inline-block w-full  ${commonClassName}`}>
               <span style={{ whiteSpace: "break-spaces" }}>
-                {syntaxHighlight(value, isVisible || isSecretFocused)}
+                {syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
               </span>
             </code>
           </pre>

frontend/src/components/v2/Select/Select.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from "react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretUp,faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { twMerge } from "tailwind-merge";
@@ -57,7 +57,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              "relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md",
+              "relative top-1 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
               dropdownContainerClassName
             )}
             position={position}

frontend/src/components/v2/Spinner/Spinner.tsx

@@ -20,7 +20,7 @@ export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
       <svg
         aria-hidden="true"
         className={twMerge(
-          "text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
+          "m-1 animate-spin fill-primary text-gray-200 dark:text-gray-600",
           sizeChart[size],
           className
         )}

frontend/src/components/v2/Stepper/Stepper.tsx

@@ -14,7 +14,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
   return (
     <div
       className={twMerge(
-        "flex items-center w-full space-x-3 p-2 border border-bunker-300/30 rounded-md",
+        "flex w-full items-center space-x-3 rounded-md border border-bunker-300/30 p-2",
         className
       )}
     >
@@ -25,15 +25,15 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
         return (
           <div
             className={twMerge(
-              "flex items-center space-x-3 flex-shrink-0",
+              "flex flex-shrink-0 items-center space-x-3",
               isNotLast && "flex-grow"
             )}
           >
-            <div className="flex items-center space-x-2 flex-shrink-0">
+            <div className="flex flex-shrink-0 items-center space-x-2">
               <div
                 className={twMerge(
-                  "w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
+                  "flex h-7 w-7 items-center justify-center rounded-full text-sm font-medium text-mineshaft-800 transition-all",
-                  isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
+                  isCompleted ? "bg-primary" : "border border-primary/30 text-bunker-300",
                   isActive && "bg-primary text-mineshaft-800"
                 )}
               >
@@ -71,7 +71,7 @@ export type StepProps = {
 export const Step = ({ title, description }: StepProps) => {
   return (
     <div className="flex flex-col text-gray-300">
-      <div className="font-medium text-sm">{title}</div>
+      <div className="text-sm font-medium">{title}</div>
       {description && <div className="text-xs">{description}</div>}
     </div>
   );

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

@@ -1,2 +1,2 @@
-export type { StepperProps,StepProps } from "./Stepper";
+export type { StepperProps, StepProps } from "./Stepper";
-export { Step,Stepper } from "./Stepper";
+export { Step, Stepper } from "./Stepper";

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

@@ -6,5 +6,6 @@ export type {
   TFootProps,
   THeadProps,
   ThProps,
-  TrProps} from "./Table";
+  TrProps
-export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot,Th, THead, Tr } from "./Table";
+} from "./Table";
+export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot, Th, THead, Tr } from "./Table";

frontend/src/components/v2/Tabs/Tabs.tsx

@@ -13,7 +13,7 @@ export type TabListProps = TabsPrimitive.TabsListProps;
 
 export const TabList = ({ className, children, ...props }: TabListProps) => (
   <TabsPrimitive.List
-    className={twMerge("flex-shrink-0 flex  border-b-2 border-mineshaft-800", className)}
+    className={twMerge("flex flex-shrink-0  border-b-2 border-mineshaft-800", className)}
     {...props}
   >
     {children}
@@ -25,7 +25,7 @@ export type TabProps = TabsPrimitive.TabsTriggerProps;
 export const Tab = ({ className, children, ...props }: TabProps) => (
   <TabsPrimitive.Trigger
     className={twMerge(
-      "px-3 h-10 font-medium text-sm flex items-center justify-center select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 text-mineshaft-400 transition-all data-[state=active]:text-white data-[state=active]:border-b data-[state=active]:border-primary",
+      "flex h-10 select-none items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ export type TabPanelProps = TabsPrimitive.TabsContentProps;
 
 export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
   <TabsPrimitive.Content
-    className={twMerge("outline-none flex-grow py-5 rounded-bl-md rounded-br-md", className)}
+    className={twMerge("flex-grow rounded-bl-md rounded-br-md py-5 outline-none", className)}
     {...props}
   >
     {children}

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

@@ -1,2 +1,2 @@
-export type { TabListProps,TabPanelProps, TabProps, TabsProps } from "./Tabs";
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from "./Tabs";
 export { Tab, TabList, TabPanel, Tabs } from "./Tabs";

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -11,6 +11,8 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
   position?: "top" | "bottom" | "left" | "right";
+  isDisabled?: boolean;
+  center?: boolean;
 };
 
 export const Tooltip = ({
@@ -20,7 +22,9 @@ export const Tooltip = ({
   onOpenChange,
   defaultOpen,
   className,
+  center,
   asChild = true,
+  isDisabled,
   position = "top",
   ...props
 }: TooltipProps) => (
@@ -38,11 +42,13 @@ export const Tooltip = ({
       {...props}
       className={twMerge(
         `z-50 max-w-[15rem] select-none rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-sm font-light text-bunker-200 shadow-md 
-data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
+        data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
-data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
+        data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
-data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
+        data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
-data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
+        data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
-`,
+      `,
+        isDisabled && "!hidden",
+        center && "text-center",
         className
       )}
     >

frontend/src/context/AuthContext/AuthContext.tsx

@@ -39,7 +39,7 @@ export const AuthProvider = ({ children }: Props): JSX.Element => {
   // wait for app to load the auth state
   if (isLoading || !isReady) {
     return (
-      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+      <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
         <img
           src="/images/loading/loading.gif"
           height={70}

frontend/src/context/ProjectPermissionContext/index.tsx

@@ -1,3 +1,3 @@
 export { ProjectPermissionProvider, useProjectPermission } from "./ProjectPermissionContext";
 export type { ProjectPermissionSet, TProjectPermission } from "./types";
-export { ProjectPermissionActions,ProjectPermissionSub } from "./types";
+export { ProjectPermissionActions, ProjectPermissionSub } from "./types";

frontend/src/context/ServerConfigContext/ServerConfigContext.tsx

@@ -38,22 +38,31 @@ export const ServerConfigProvider = ({ children }: Props): JSX.Element => {
       <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 bg-bunker-800 px-8 text-mineshaft-50 dark:[color-scheme:dark]">
         <Head>
           <title>Infisical Maintenance Mode</title>
-          <link rel='icon' href='/infisical.ico' />
+          <link rel="icon" href="/infisical.ico" />
         </Head>
-        <img src="/images/maintenance.png" height={175} width={300} alt="maintenance mode" className="w-[40rem]"/>
+        <img
+          src="/images/maintenance.png"
+          height={175}
+          width={300}
+          alt="maintenance mode"
+          className="w-[40rem]"
+        />
         <p className="mx-8 mb-4 flex justify-center bg-gradient-to-tr from-mineshaft-300 to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
           Scheduled Maintenance
         </p>
         <div className="mt-2 text-center text-lg text-bunker-300">
-          Infisical is undergoing planned maintenance. <br /> No action is required on your end — your applications will continue to fetch secrets. 
+          Infisical is undergoing planned maintenance. <br /> No action is required on your end —
-          <br /> If you have questions, please <a
+          your applications will continue to fetch secrets.
-            className="text-bunker-300 underline underline-offset-4 decoration-primary-800 hover:decoration-primary-600 hover:text-mineshaft-100 duration-200"
+          <br /> If you have questions, please{" "}
+          <a
+            className="text-bunker-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
             href="https://infisical.com/slack"
             target="_blank"
             rel="noopener noreferrer"
           >
             join our Slack community
-          </a>.
+          </a>
+          .
         </div>
       </div>
     );

frontend/src/context/ServerConfigContext/index.tsx

@@ -1 +1 @@
-export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
+export { ServerConfigProvider, useServerConfig } from "./ServerConfigContext";

frontend/src/context/index.tsx

@@ -14,7 +14,7 @@ export {
   ProjectPermissionSub,
   useProjectPermission
 } from "./ProjectPermissionContext";
-export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
+export { ServerConfigProvider, useServerConfig } from "./ServerConfigContext";
 export { SubscriptionProvider, useSubscription } from "./SubscriptionContext";
 export { UserProvider, useUser } from "./UserContext";
 export { useWorkspace, WorkspaceProvider } from "./WorkspaceContext";

frontend/src/ee/api/memberships/UpdateUserProjectPermission.ts

@@ -15,7 +15,7 @@ const updateUserProjectPermission = async ({
   denials: {
     ability: string;
     environmentSlug: string;
-  }[]
+  }[];
 }) =>
   SecurityClient.fetchCall(`/api/v1/membership/${membershipId}/deny-permissions`, {
     method: "POST",

frontend/src/ee/utilities/timeSince.ts

@@ -4,32 +4,30 @@
  * @returns {String} text - how much time has passed since a certain timestamp
  */
 function timeSince(date: Date) {
-  const seconds = Math.floor(
+  const seconds = Math.floor(((new Date() as any) - (date as any)) / 1000) as number;
-    ((new Date() as any) - (date as any)) / 1000
-  ) as number;
 
   let interval = seconds / 31536000;
 
   if (interval > 1) {
-    return `${Math.floor(interval)  } years ago`;
+    return `${Math.floor(interval)} years ago`;
   }
   interval = seconds / 2592000;
   if (interval > 1) {
-    return `${Math.floor(interval)  } months ago`;
+    return `${Math.floor(interval)} months ago`;
   }
   interval = seconds / 86400;
   if (interval > 1) {
-    return `${Math.floor(interval)  } days ago`;
+    return `${Math.floor(interval)} days ago`;
   }
   interval = seconds / 3600;
   if (interval > 1) {
-    return `${Math.floor(interval)  } hours ago`;
+    return `${Math.floor(interval)} hours ago`;
   }
   interval = seconds / 60;
   if (interval > 1) {
-    return `${Math.floor(interval)  } minutes ago`;
+    return `${Math.floor(interval)} minutes ago`;
   }
-  return `${Math.floor(seconds)  } seconds ago`;
+  return `${Math.floor(seconds)} seconds ago`;
 }
 
 export default timeSince;

frontend/src/helpers/key.ts

@@ -14,73 +14,71 @@ import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
  * @param {String} obj.protectedKeyTag
  */
 const decryptPrivateKeyHelper = async ({
-    encryptionVersion,
+  encryptionVersion,
-    encryptedPrivateKey,
+  encryptedPrivateKey,
-    iv,
+  iv,
-    tag,
+  tag,
-    password,
+  password,
-    salt,
+  salt,
-    protectedKey,
+  protectedKey,
-    protectedKeyIV,
+  protectedKeyIV,
-    protectedKeyTag,
+  protectedKeyTag
 }: {
-    encryptionVersion: number;
+  encryptionVersion: number;
-    encryptedPrivateKey: string;
+  encryptedPrivateKey: string;
-    iv: string;
+  iv: string;
-    tag: string;
+  tag: string;
-    password: string;
+  password: string;
-    salt: string;
+  salt: string;
-    protectedKey?: string;
+  protectedKey?: string;
-    protectedKeyIV?: string;
+  protectedKeyIV?: string;
-    protectedKeyTag?: string;
+  protectedKeyTag?: string;
 }) => {
-let privateKey;
+  let privateKey;
-    try {
+  try {
-        if (encryptionVersion === 1) {
+    if (encryptionVersion === 1) {
-            privateKey = Aes256Gcm.decrypt({
+      privateKey = Aes256Gcm.decrypt({
-                ciphertext: encryptedPrivateKey,
+        ciphertext: encryptedPrivateKey,
-                iv,
+        iv,
-                tag,
+        tag,
-                secret: password
+        secret: password
-                .slice(0, 32)
+          .slice(0, 32)
-                .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
+          .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
-            });
+      });
-        } else if (encryptionVersion === 2 && protectedKey && protectedKeyIV && protectedKeyTag) {
+    } else if (encryptionVersion === 2 && protectedKey && protectedKeyIV && protectedKeyTag) {
-            const derivedKey = await deriveArgonKey({
+      const derivedKey = await deriveArgonKey({
-                password,
+        password,
-                salt,
+        salt,
-                mem: 65536,
+        mem: 65536,
-                time: 3,
+        time: 3,
-                parallelism: 1,
+        parallelism: 1,
-                hashLen: 32
+        hashLen: 32
-            });
+      });
-            
-            if (!derivedKey) throw new Error("Failed to generate derived key");
 
-            const key = Aes256Gcm.decrypt({
+      if (!derivedKey) throw new Error("Failed to generate derived key");
-                ciphertext: protectedKey,
+
-                iv: protectedKeyIV,
+      const key = Aes256Gcm.decrypt({
-                tag: protectedKeyTag,
+        ciphertext: protectedKey,
-                secret: Buffer.from(derivedKey.hash)
+        iv: protectedKeyIV,
-            });
+        tag: protectedKeyTag,
-            
+        secret: Buffer.from(derivedKey.hash)
-            // decrypt back the private key
+      });
-            privateKey = Aes256Gcm.decrypt({
+
-                ciphertext: encryptedPrivateKey,
+      // decrypt back the private key
-                iv,
+      privateKey = Aes256Gcm.decrypt({
-                tag,
+        ciphertext: encryptedPrivateKey,
-                secret: Buffer.from(key, "hex")
+        iv,
-            });
+        tag,
-        } else {
+        secret: Buffer.from(key, "hex")
-            throw new Error("Insufficient details to decrypt private key");
+      });
-        }
+    } else {
-    } catch (err) {
+      throw new Error("Insufficient details to decrypt private key");
-        throw new Error("Failed to decrypt private key");
     }
+  } catch (err) {
+    throw new Error("Failed to decrypt private key");
+  }
 
-    return privateKey;
+  return privateKey;
-}
+};
 
-export {
+export { decryptPrivateKeyHelper };
-    decryptPrivateKeyHelper
-};

frontend/src/helpers/project.ts

@@ -77,18 +77,11 @@ const secretsToBeAdded = [
  * @param {String} obj.projectName - name of new project
  * @returns {Project} project - new project
  */
-const initProjectHelper = async ({
+const initProjectHelper = async ({ projectName }: { projectName: string }) => {
-  organizationSlug,
-  projectName
-}: {
-  organizationSlug: string;
-  projectName: string;
-}) => {
   // create new project
   const {
     data: { project }
   } = await createWorkspace({
-    organizationSlug,
     projectName
   });
 

frontend/src/hoc/withPermission/withPermission.tsx

@@ -29,13 +29,13 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
       return (
         <div
           className={twMerge(
-            "container h-full mx-auto flex justify-center items-center",
+            "container mx-auto flex h-full items-center justify-center",
             containerClassName
           )}
         >
           <div
             className={twMerge(
-              "rounded-md bg-mineshaft-800 text-bunker-300 p-16 flex space-x-12 items-end",
+              "flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300",
               className
             )}
           >
@@ -43,7 +43,7 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
               <FontAwesomeIcon icon={faLock} size="6x" />
             </div>
             <div>
-              <div className="text-4xl font-medium mb-2">Access Restricted</div>
+              <div className="mb-2 text-4xl font-medium">Access Restricted</div>
               <div className="text-sm">
                 Your role has limited permissions, please <br /> contact your admin to gain access
               </div>

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

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

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

@@ -8,14 +8,13 @@ import {
   CreateAPIKeyDataV2DTO,
   CreateServiceTokenDataV3Res,
   DeleteAPIKeyDataV2DTO,
-  UpdateAPIKeyDataV2DTO} from "./types";
+  UpdateAPIKeyDataV2DTO
+} from "./types";
 
 export const useCreateAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<CreateServiceTokenDataV3Res, {}, CreateAPIKeyDataV2DTO>({
-    mutationFn: async ({
+    mutationFn: async ({ name }) => {
-      name
-    }) => {
       const { data } = await apiRequest.post("/api/v3/api-key", {
         name
       });
@@ -31,11 +30,10 @@ export const useCreateAPIKeyV2 = () => {
 export const useUpdateAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<APIKeyDataV2, {}, UpdateAPIKeyDataV2DTO>({
-    mutationFn: async ({
+    mutationFn: async ({ apiKeyDataId, name }) => {
-      apiKeyDataId,
+      const {
-      name
+        data: { apiKeyData }
-    }) => {
+      } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
-      const { data: { apiKeyData } } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
         name
       });
       return apiKeyData;
@@ -49,14 +47,14 @@ export const useUpdateAPIKeyV2 = () => {
 export const useDeleteAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<APIKeyDataV2, {}, DeleteAPIKeyDataV2DTO>({
-    mutationFn: async ({
+    mutationFn: async ({ apiKeyDataId }) => {
-      apiKeyDataId
+      const {
-    }) => {
+        data: { apiKeyData }
-      const { data: { apiKeyData } } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
+      } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
       return apiKeyData;
     },
     onSuccess: () => {
       queryClient.invalidateQueries(userKeys.myAPIKeysV2);
     }
   });
-};
+};

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -1,57 +1,57 @@
 import { EventType, UserAgentType } from "./enums";
 
 export const eventToNameMap: { [K in EventType]: string } = {
-    [EventType.GET_SECRETS]: "List secrets",
+  [EventType.GET_SECRETS]: "List secrets",
-    [EventType.GET_SECRET]: "Read secret",
+  [EventType.GET_SECRET]: "Read secret",
-    [EventType.CREATE_SECRET]: "Create secret",
+  [EventType.CREATE_SECRET]: "Create secret",
-    [EventType.UPDATE_SECRET]: "Update secret",
+  [EventType.UPDATE_SECRET]: "Update secret",
-    [EventType.DELETE_SECRET]: "Delete secret",
+  [EventType.DELETE_SECRET]: "Delete secret",
-    [EventType.GET_WORKSPACE_KEY]: "Read project key",
+  [EventType.GET_WORKSPACE_KEY]: "Read project key",
-    [EventType.AUTHORIZE_INTEGRATION]: "Authorize integration",
+  [EventType.AUTHORIZE_INTEGRATION]: "Authorize integration",
-    [EventType.UNAUTHORIZE_INTEGRATION]: "Unauthorize integration",
+  [EventType.UNAUTHORIZE_INTEGRATION]: "Unauthorize integration",
-    [EventType.CREATE_INTEGRATION]: "Create integration",
+  [EventType.CREATE_INTEGRATION]: "Create integration",
-    [EventType.DELETE_INTEGRATION]: "Delete integration",
+  [EventType.DELETE_INTEGRATION]: "Delete integration",
-    [EventType.ADD_TRUSTED_IP]: "Add trusted IP",
+  [EventType.ADD_TRUSTED_IP]: "Add trusted IP",
-    [EventType.UPDATE_TRUSTED_IP]: "Update trusted IP",
+  [EventType.UPDATE_TRUSTED_IP]: "Update trusted IP",
-    [EventType.DELETE_TRUSTED_IP]: "Delete trusted IP",
+  [EventType.DELETE_TRUSTED_IP]: "Delete trusted IP",
-    [EventType.CREATE_SERVICE_TOKEN]: "Create service token",
+  [EventType.CREATE_SERVICE_TOKEN]: "Create service token",
-    [EventType.DELETE_SERVICE_TOKEN]: "Delete service token",
+  [EventType.DELETE_SERVICE_TOKEN]: "Delete service token",
-    [EventType.CREATE_IDENTITY]: "Create identity",
+  [EventType.CREATE_IDENTITY]: "Create identity",
-    [EventType.UPDATE_IDENTITY]: "Update identity",
+  [EventType.UPDATE_IDENTITY]: "Update identity",
-    [EventType.DELETE_IDENTITY]: "Delete identity",
+  [EventType.DELETE_IDENTITY]: "Delete identity",
-    [EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH]: "Login via universal auth",
+  [EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH]: "Login via universal auth",
-    [EventType.ADD_IDENTITY_UNIVERSAL_AUTH]: "Add universal auth",
+  [EventType.ADD_IDENTITY_UNIVERSAL_AUTH]: "Add universal auth",
-    [EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH]: "Update universal auth",
+  [EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH]: "Update universal auth",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
-    [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
+  [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
-    [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
+  [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
-    [EventType.CREATE_ENVIRONMENT]: "Create environment",
+  [EventType.CREATE_ENVIRONMENT]: "Create environment",
-    [EventType.UPDATE_ENVIRONMENT]: "Update environment",
+  [EventType.UPDATE_ENVIRONMENT]: "Update environment",
-    [EventType.DELETE_ENVIRONMENT]: "Delete environment",
+  [EventType.DELETE_ENVIRONMENT]: "Delete environment",
-    [EventType.ADD_WORKSPACE_MEMBER]: "Add member",
+  [EventType.ADD_WORKSPACE_MEMBER]: "Add member",
-    [EventType.REMOVE_WORKSPACE_MEMBER]: "Remove member",
+  [EventType.REMOVE_WORKSPACE_MEMBER]: "Remove member",
-    [EventType.CREATE_FOLDER]: "Create folder",
+  [EventType.CREATE_FOLDER]: "Create folder",
-    [EventType.UPDATE_FOLDER]: "Update folder",
+  [EventType.UPDATE_FOLDER]: "Update folder",
-    [EventType.DELETE_FOLDER]: "Delete folder",
+  [EventType.DELETE_FOLDER]: "Delete folder",
-    [EventType.CREATE_WEBHOOK]: "Create webhook",
+  [EventType.CREATE_WEBHOOK]: "Create webhook",
-    [EventType.UPDATE_WEBHOOK_STATUS]: "Update webhook status",
+  [EventType.UPDATE_WEBHOOK_STATUS]: "Update webhook status",
-    [EventType.DELETE_WEBHOOK]: "Delete webhook",
+  [EventType.DELETE_WEBHOOK]: "Delete webhook",
-    [EventType.GET_SECRET_IMPORTS]: "List secret imports",
+  [EventType.GET_SECRET_IMPORTS]: "List secret imports",
-    [EventType.CREATE_SECRET_IMPORT]: "Create secret import",
+  [EventType.CREATE_SECRET_IMPORT]: "Create secret import",
-    [EventType.UPDATE_SECRET_IMPORT]: "Update secret import",
+  [EventType.UPDATE_SECRET_IMPORT]: "Update secret import",
-    [EventType.DELETE_SECRET_IMPORT]: "Delete secret import",
+  [EventType.DELETE_SECRET_IMPORT]: "Delete secret import",
-    [EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS]: "Update denied permissions",
+  [EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS]: "Update denied permissions",
-    [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role"
+  [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {
-    [UserAgentType.WEB]: "Web",
+  [UserAgentType.WEB]: "Web",
-    [UserAgentType.CLI]: "CLI",
+  [UserAgentType.CLI]: "CLI",
-    [UserAgentType.K8_OPERATOR]: "K8s operator",
+  [UserAgentType.K8_OPERATOR]: "K8s operator",
-    [UserAgentType.TERRAFORM]: "Terraform",
+  [UserAgentType.TERRAFORM]: "Terraform",
-    [UserAgentType.NODE_SDK]: "InfisicalNodeSDK",
+  [UserAgentType.NODE_SDK]: "InfisicalNodeSDK",
-    [UserAgentType.PYTHON_SDK]: "InfisicalPythonSDK",
+  [UserAgentType.PYTHON_SDK]: "InfisicalPythonSDK",
-    [UserAgentType.OTHER]: "Other",
+  [UserAgentType.OTHER]: "Other"
-};
+};