Add eslint rule and fix as many issues as possible

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

@@ -1,20 +1,20 @@
-import crypto from 'crypto';
+import crypto from "crypto";
 
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRouter } from 'next/router';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
 
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
-import NavHeader from '@app/components/navigation/NavHeader';
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import NavHeader from "@app/components/navigation/NavHeader";
 // TODO(akhilmhdh):Refactor this into a better utility module package
 import {
   decryptAssymmetric,
   decryptSymmetric,
   encryptSymmetric
-} from '@app/components/utilities/cryptography/crypto';
-import { Button, FormControl, Input } from '@app/components/v2';
-import { useSubscription, useWorkspace } from '@app/context';
-import { useToggle } from '@app/hooks';
+} from "@app/components/utilities/cryptography/crypto";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useSubscription, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
 import {
   useCreateServiceToken,
   useCreateWsEnvironment,
@@ -32,10 +32,10 @@ import {
   useRenameWorkspace,
   useToggleAutoCapitalization,
   useUpdateWsEnvironment
-} from '@app/hooks/api';
+} from "@app/hooks/api";
 
-import { AutoCapitalizationSection } from './components/AutoCapitalizationSection/AutoCapitalizationSection';
-import { SecretTagsSection } from './components/SecretTagsSection';
+import { AutoCapitalizationSection } from "./components/AutoCapitalizationSection/AutoCapitalizationSection";
+import { SecretTagsSection } from "./components/SecretTagsSection";
 import {
   CopyProjectIDSection,
   CreateServiceToken,
@@ -45,17 +45,17 @@ import {
   EnvironmentSection,
   ProjectIndexSecretsSection,
   ProjectNameChangeSection,
-  ServiceTokenSection} from './components';
+  ServiceTokenSection} from "./components";
 
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   const { currentWorkspace, workspaces, isLoading: isWorkspaceLoading } = useWorkspace();
   const router = useRouter();
 
-  const workspaceID = currentWorkspace?._id || '';
+  const workspaceID = currentWorkspace?._id || "";
   const { createNotification } = useNotificationContext();
   // delete action worksapce
-  const [deleteProjectInput, setDeleteProjectInput] = useState('');
+  const [deleteProjectInput, setDeleteProjectInput] = useState("");
   const [isDeleting, setIsDeleting] = useToggle();
 
   const renameWorkspace = useRenameWorkspace();
@@ -73,7 +73,7 @@ export const ProjectSettingsPage = () => {
 
   // service token
   const { data: serviceTokens, isLoading: isServiceTokenLoading } = useGetUserWsServiceTokens({
-    workspaceID: currentWorkspace?._id || ''
+    workspaceID: currentWorkspace?._id || ""
   });
 
   const { data: latestFileKey } = useGetUserWsKey(workspaceID);
@@ -96,14 +96,14 @@ export const ProjectSettingsPage = () => {
     try {
       await renameWorkspace.mutateAsync({ workspaceID, newWorkspaceName: name });
       createNotification({
-        text: 'Successfully renamed workspace',
-        type: 'success'
+        text: "Successfully renamed workspace",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to rename workspace',
-        type: 'error'
+        text: "Failed to rename workspace",
+        type: "error"
       });
     }
   };
@@ -114,16 +114,16 @@ export const ProjectSettingsPage = () => {
         workspaceID,
         state
       });
-      const text = `Successfully ${state ? 'enabled' : 'disabled'} auto capitalization`;
+      const text = `Successfully ${state ? "enabled" : "disabled"} auto capitalization`;
       createNotification({
         text,
-        type: 'success'
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to update auto capitalization',
-        type: 'error'
+        text: "Failed to update auto capitalization",
+        type: "error"
       });
     }
   };
@@ -135,18 +135,18 @@ export const ProjectSettingsPage = () => {
       // redirect user to first workspace user is part of
       const ws = workspaces.find(({ _id }) => _id !== workspaceID);
       if (!ws) {
-        router.push('/noprojects');
+        router.push("/noprojects");
       }
       router.push(`/dashboard/${ws?._id}`);
       createNotification({
-        text: 'Successfully deleted workspace',
-        type: 'success'
+        text: "Successfully deleted workspace",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to delete workspace',
-        type: 'error'
+        text: "Failed to delete workspace",
+        type: "error"
       });
     } finally {
       setIsDeleting.off();
@@ -158,14 +158,14 @@ export const ProjectSettingsPage = () => {
     try {
       await createWsEnv.mutateAsync({ workspaceID, environmentName, environmentSlug });
       createNotification({
-        text: 'Successfully created environment',
-        type: 'success'
+        text: "Successfully created environment",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to create environment',
-        type: 'error'
+        text: "Failed to create environment",
+        type: "error"
       });
     }
   };
@@ -182,14 +182,14 @@ export const ProjectSettingsPage = () => {
         oldEnvironmentSlug
       });
       createNotification({
-        text: 'Successfully updated environment',
-        type: 'success'
+        text: "Successfully updated environment",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to update environment',
-        type: 'error'
+        text: "Failed to update environment",
+        type: "error"
       });
     }
   };
@@ -201,14 +201,14 @@ export const ProjectSettingsPage = () => {
         environmentSlug
       });
       createNotification({
-        text: 'Successfully deleted environment',
-        type: 'success'
+        text: "Successfully deleted environment",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to delete environment',
-        type: 'error'
+        text: "Failed to delete environment",
+        type: "error"
       });
     }
   };
@@ -221,16 +221,16 @@ export const ProjectSettingsPage = () => {
     secretPath
   }: CreateServiceToken) => {
     // type guard
-    if (!latestFileKey) return '';
+    if (!latestFileKey) return "";
     try {
       const key = decryptAssymmetric({
         ciphertext: latestFileKey.encryptedKey,
         nonce: latestFileKey.nonce,
         publicKey: latestFileKey.sender.publicKey,
-        privateKey: localStorage.getItem('PRIVATE_KEY') as string
+        privateKey: localStorage.getItem("PRIVATE_KEY") as string
       });
 
-      const randomBytes = crypto.randomBytes(16).toString('hex');
+      const randomBytes = crypto.randomBytes(16).toString("hex");
 
       const { ciphertext, iv, tag } = encryptSymmetric({
         plaintext: key,
@@ -253,18 +253,18 @@ export const ProjectSettingsPage = () => {
       });
 
       createNotification({
-        text: 'Successfully created a service token',
-        type: 'success'
+        text: "Successfully created a service token",
+        type: "success"
       });
       return res.serviceToken;
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to create a service token',
-        type: 'error'
+        text: "Failed to create a service token",
+        type: "error"
       });
     }
-    return '';
+    return "";
   };
 
   const onCreateWsTag = async ({ name }: CreateWsTag) => {
@@ -272,35 +272,35 @@ export const ProjectSettingsPage = () => {
       const res = await createWsTag.mutateAsync({
         workspaceID,
         tagName: name,
-        tagSlug: name.replace(' ', '_')
+        tagSlug: name.replace(" ", "_")
       });
       createNotification({
-        text: 'Successfully created a tag',
-        type: 'success'
+        text: "Successfully created a tag",
+        type: "success"
       });
       return res.name;
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to create a tag',
-        type: 'error'
+        text: "Failed to create a tag",
+        type: "error"
       });
     }
-    return '';
+    return "";
   };
 
   const onDeleteTag = async (tagID: string) => {
     try {
       await deleteWsTag.mutateAsync({ tagID });
       createNotification({
-        text: 'Successfully deleted tag',
-        type: 'success'
+        text: "Successfully deleted tag",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to delete the tag',
-        type: 'error'
+        text: "Failed to delete the tag",
+        type: "error"
       });
     }
   };
@@ -309,14 +309,14 @@ export const ProjectSettingsPage = () => {
     try {
       await deleteServiceToken.mutateAsync(tokenID);
       createNotification({
-        text: 'Successfully revoked service token',
-        type: 'success'
+        text: "Successfully revoked service token",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to delete service token',
-        type: 'error'
+        text: "Failed to delete service token",
+        type: "error"
       });
     }
   };
@@ -330,7 +330,7 @@ export const ProjectSettingsPage = () => {
       ciphertext: latestFileKey.encryptedKey,
       nonce: latestFileKey.nonce,
       publicKey: latestFileKey.sender.publicKey,
-      privateKey: localStorage.getItem('PRIVATE_KEY') as string
+      privateKey: localStorage.getItem("PRIVATE_KEY") as string
     });
 
     const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
@@ -357,13 +357,13 @@ export const ProjectSettingsPage = () => {
     <div className="dark container mx-auto flex flex-col px-8 text-mineshaft-50 dark:[color-scheme:dark]">
       {/* TODO(akhilmhdh): Remove this right when layout is refactored  */}
       <div className="relative right-5">
-        <NavHeader pageName={t('settings.project.title')} isProjectRelated />
+        <NavHeader pageName={t("settings.project.title")} isProjectRelated />
       </div>
       <div className="my-8 flex max-w-5xl flex-row items-center justify-between text-xl">
         <div className="flex flex-col items-start justify-start text-3xl">
-          <p className="mr-4 font-semibold text-gray-200">{t('settings.project.title')}</p>
+          <p className="mr-4 font-semibold text-gray-200">{t("settings.project.title")}</p>
           <p className="mr-4 text-base font-normal text-gray-400">
-            {t('settings.project.description')}
+            {t("settings.project.description")}
           </p>
         </div>
       </div>
@@ -371,7 +371,7 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name}
         onProjectNameChange={onRenameWorkspace}
       />
-      <CopyProjectIDSection workspaceID={currentWorkspace?._id || ''} />
+      <CopyProjectIDSection workspaceID={currentWorkspace?._id || ""} />
       <EnvironmentSection
         isLoading={isWorkspaceLoading}
         environments={currentWorkspace?.environments || []}
@@ -385,14 +385,14 @@ export const ProjectSettingsPage = () => {
         tokens={serviceTokens || []}
         environments={currentWorkspace?.environments || []}
         onDeleteToken={onDeleteServiceToken}
-        workspaceName={currentWorkspace?.name || ''}
+        workspaceName={currentWorkspace?.name || ""}
         onCreateToken={onCreateServiceToken}
       />
       <SecretTagsSection
         isLoading={isTagLoading}
         tags={wsTags || []}
         onDeleteTag={onDeleteTag}
-        workspaceName={currentWorkspace?.name || ''}
+        workspaceName={currentWorkspace?.name || ""}
         onCreateTag={onCreateWsTag}
       />
       <AutoCapitalizationSection
@@ -405,11 +405,11 @@ export const ProjectSettingsPage = () => {
         />
       )}
       <E2EESection 
-        workspaceId={currentWorkspace?._id || ''}
+        workspaceId={currentWorkspace?._id || ""}
       />
       <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-mineshaft-900 px-6 pl-6 pb-4 pt-4">
-        <p className="text-xl font-bold text-red">{t('settings.project.danger-zone')}</p>
-        <p className="text-md mt-2 text-gray-400">{t('settings.project.danger-zone-note')}</p>
+        <p className="text-xl font-bold text-red">{t("settings.project.danger-zone")}</p>
+        <p className="text-md mt-2 text-gray-400">{t("settings.project.danger-zone-note")}</p>
         <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
           <FormControl
             label={
@@ -433,10 +433,10 @@ export const ProjectSettingsPage = () => {
           isDisabled={deleteProjectInput !== currentWorkspace?.name || isDeleting}
           isLoading={isDeleting}
         >
-          {t('settings.project.delete-project')}
+          {t("settings.project.delete-project")}
         </Button>
         <p className="mt-3 ml-0.5 text-xs text-gray-500">
-          {t('settings.project.delete-project-note')}
+          {t("settings.project.delete-project-note")}
         </p>
       </div>
     </div>

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

@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
-import { Checkbox } from '@app/components/v2';
+import { Checkbox } from "@app/components/v2";
 
 type Props = {
   workspaceAutoCapitalization?: boolean;
@@ -14,7 +14,7 @@ export const AutoCapitalizationSection = ({
   const { t } = useTranslation();
   return (
     <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pb-6 pt-2">
-      <p className="mb-4 mt-2 text-xl font-semibold">{t('settings.project.auto-capitalization')}</p>
+      <p className="mb-4 mt-2 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
       <Checkbox
         className="data-[state=checked]:bg-primary"
         id="autoCapitalization"
@@ -23,7 +23,7 @@ export const AutoCapitalizationSection = ({
           onAutoCapitalizationChange(state as boolean);
         }}
       >
-        {t('settings.project.auto-capitalization-description')}
+        {t("settings.project.auto-capitalization-description")}
       </Checkbox>
     </div>
   );

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx

@@ -1 +1 @@
-export { AutoCapitalizationSection } from './AutoCapitalizationSection';
+export { AutoCapitalizationSection } from "./AutoCapitalizationSection";

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

@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { IconButton } from '@app/components/v2';
-import { useToggle } from '@app/hooks';
+import { IconButton } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
 
 type Props = {
   workspaceID: string;
@@ -29,10 +29,10 @@ export const CopyProjectIDSection = ({ workspaceID }: Props): JSX.Element => {
 
   return (
     <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pt-4 pb-2">
-      <p className="self-start text-xl font-semibold">{t('common.project-id')}</p>
-      <p className="mt-4 text-sm text-bunker-300 mb-2">{t('settings.project.auto-generated')}</p>
+      <p className="self-start text-xl font-semibold">{t("common.project-id")}</p>
+      <p className="mt-4 text-sm text-bunker-300 mb-2">{t("settings.project.auto-generated")}</p>
       <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400">
-        <p className="mr-2 pl-4 font-bold">{`${t('common.project-id')}:`}</p>
+        <p className="mr-2 pl-4 font-bold">{`${t("common.project-id")}:`}</p>
         <p className="mr-4">{workspaceID}</p>
         <IconButton
           ariaLabel="copy icon"
@@ -42,7 +42,7 @@ export const CopyProjectIDSection = ({ workspaceID }: Props): JSX.Element => {
         >
           <FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />
           <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-            {t('common.click-to-copy')}
+            {t("common.click-to-copy")}
           </span>
         </IconButton>
       </div>

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

@@ -1 +1 @@
-export { CopyProjectIDSection } from './CopyProjectIDSection';
+export { CopyProjectIDSection } from "./CopyProjectIDSection";

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

@@ -8,9 +8,9 @@ import {
     Checkbox
 } from "@app/components/v2";
 
-import getBot from '../../../../../pages/api/bot/getBot';
-import setBotActiveStatus from '../../../../../pages/api/bot/setBotActiveStatus';
-import getLatestFileKey from '../../../../../pages/api/workspace/getLatestFileKey';
+import getBot from "../../../../../pages/api/bot/getBot";
+import setBotActiveStatus from "../../../../../pages/api/bot/setBotActiveStatus";
+import getLatestFileKey from "../../../../../pages/api/workspace/getLatestFileKey";
 
 type Props = {
     workspaceId: string;
@@ -44,10 +44,10 @@ export const E2EESection = ({
                 if (!bot.isActive) {
                     // bot is not active -> activate bot
                     const key = await getLatestFileKey({ workspaceId });
-                    const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
+                    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
 
                     if (!PRIVATE_KEY) {
-                        throw new Error('Private Key missing');
+                        throw new Error("Private Key missing");
                     }
 
                     const WORKSPACE_KEY = decryptAssymmetric({

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

@@ -1,3 +1,3 @@
 export {
     E2EESection
-} from './E2EESection';
+} from "./E2EESection";

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

@@ -1,8 +1,8 @@
-import { Controller, useForm } from 'react-hook-form';
-import { faPencil, faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { Controller, useForm } from "react-hook-form";
+import { faPencil, faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 import {
   Button,
@@ -22,8 +22,8 @@ import {
   THead,
   Tr,
   UpgradePlanModal
-} from '@app/components/v2';
-import { usePopUp } from '@app/hooks/usePopUp';
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks/usePopUp";
 
 type Props = {
   environments: Array<{ name: string; slug: string }>;
@@ -35,8 +35,8 @@ type Props = {
 };
 
 const createUpdateEnvSchema = yup.object({
-  environmentName: yup.string().label('Environment Name').required(),
-  environmentSlug: yup.string().label('Environment Slug').required()
+  environmentName: yup.string().label("Environment Name").required(),
+  environmentSlug: yup.string().label("Environment Slug").required()
 });
 
 export type CreateUpdateEnvFormData = yup.InferType<typeof createUpdateEnvSchema>;
@@ -50,9 +50,9 @@ export const EnvironmentSection = ({
   onUpdate
 }: Props): JSX.Element => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    'createUpdateEnv',
-    'deleteEnv',
-    'upgradePlan'
+    "createUpdateEnv",
+    "deleteEnv",
+    "upgradePlan"
   ] as const);
 
   const {
@@ -73,12 +73,12 @@ export const EnvironmentSection = ({
     } else {
       await onCreate(data);
     }
-    handlePopUpClose('createUpdateEnv');
+    handlePopUpClose("createUpdateEnv");
   };
 
   const onEnvDeleteSubmit = async (envSlug: string) => {
     await onDelete(envSlug);
-    handlePopUpClose('deleteEnv');
+    handlePopUpClose("deleteEnv");
   };
 
   return (
@@ -98,9 +98,9 @@ export const EnvironmentSection = ({
           <Button
             onClick={() => {
               if (isEnvServiceAllowed) {
-                handlePopUpOpen('createUpdateEnv');
+                handlePopUpOpen("createUpdateEnv");
               } else {
-                handlePopUpOpen('upgradePlan');
+                handlePopUpOpen("upgradePlan");
               }
             }}
             colorSchema="primary"
@@ -130,7 +130,7 @@ export const EnvironmentSection = ({
                     <IconButton
                       className="mr-3 py-2"
                       onClick={() => {
-                        handlePopUpOpen('createUpdateEnv', { name, slug });
+                        handlePopUpOpen("createUpdateEnv", { name, slug });
                         reset({ environmentName: name, environmentSlug: slug });
                       }}
                       colorSchema="primary"
@@ -141,7 +141,7 @@ export const EnvironmentSection = ({
                     </IconButton>
                     <IconButton
                       onClick={() => {
-                        handlePopUpOpen('deleteEnv', { name, slug });
+                        handlePopUpOpen("deleteEnv", { name, slug });
                       }}
                       size="lg"
                       colorSchema="danger"
@@ -166,11 +166,11 @@ export const EnvironmentSection = ({
       <Modal
         isOpen={popUp?.createUpdateEnv?.isOpen}
         onOpenChange={(isOpen) => {
-          handlePopUpToggle('createUpdateEnv', isOpen);
+          handlePopUpToggle("createUpdateEnv", isOpen);
           reset();
         }}
       >
-        <ModalContent title={isEnvUpdate ? 'Update environment' : 'Create a new environment'}>
+        <ModalContent title={isEnvUpdate ? "Update environment" : "Create a new environment"}>
           <form onSubmit={handleSubmit(onEnvModalSubmit)}>
             <Controller
               control={control}
@@ -209,7 +209,7 @@ export const EnvironmentSection = ({
                 isLoading={isSubmitting}
                 isDisabled={isSubmitting}
               >
-                {isEnvUpdate ? 'Update' : 'Create'}
+                {isEnvUpdate ? "Update" : "Create"}
               </Button>
 
               <Button colorSchema="secondary" variant="plain">
@@ -222,17 +222,17 @@ export const EnvironmentSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteEnv.isOpen}
         title={`Are you sure want to delete ${
-          (popUp?.deleteEnv?.data as { name: string })?.name || ' '
+          (popUp?.deleteEnv?.data as { name: string })?.name || " "
         }?`}
-        onChange={(isOpen) => handlePopUpToggle('deleteEnv', isOpen)}
-        deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ''}
+        onChange={(isOpen) => handlePopUpToggle("deleteEnv", isOpen)}
+        deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ""}
         onDeleteApproved={() =>
           onEnvDeleteSubmit((popUp?.deleteEnv?.data as { slug: string })?.slug)
         }
       />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle('upgradePlan', isOpen)}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can add custom environments if you switch to Infisical's Team plan."
       />
     </div>

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/index.tsx

@@ -1 +1 @@
-export { EnvironmentSection } from './EnvironmentSection';
+export { EnvironmentSection } from "./EnvironmentSection";

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

@@ -1,4 +1,4 @@
-import { Button } from '@app/components/v2';
+import { Button } from "@app/components/v2";
 
 // TODO: add check so that this only shows up if user is
 // an admin in the workspace

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

@@ -1 +1 @@
-export { ProjectIndexSecretsSection } from './ProjectIndexSecretsSection';
+export { ProjectIndexSecretsSection } from "./ProjectIndexSecretsSection";

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

@@ -1,12 +1,12 @@
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
-import { Button, FormControl, Input } from '@app/components/v2';
+import { Button, FormControl, Input } from "@app/components/v2";
 
 type Props = {
   workspaceName?: string;
@@ -14,7 +14,7 @@ type Props = {
 };
 
 const formSchema = yup.object({
-  name: yup.string().required().label('Project Name')
+  name: yup.string().required().label("Project Name")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -42,7 +42,7 @@ export const ProjectNameChangeSection = ({
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
       <div className="mb-6 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pb-6 pt-3">
-        <p className="mb-4 mt-2 text-xl font-semibold">{t('common.display-name')}</p>
+        <p className="mb-4 mt-2 text-xl font-semibold">{t("common.display-name")}</p>
         <div className="mb-2 w-full max-w-lg">
           <Controller
             defaultValue=""
@@ -64,7 +64,7 @@ export const ProjectNameChangeSection = ({
           isDisabled={!isDirty || isSubmitting}
           leftIcon={<FontAwesomeIcon icon={faCheck} />}
         >
-          {t('common.save-changes')}
+          {t("common.save-changes")}
         </Button>
       </div>
     </form>

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/index.tsx

@@ -1 +1 @@
-export { ProjectNameChangeSection } from './ProjectNameChangeSection';
+export { ProjectNameChangeSection } from "./ProjectNameChangeSection";

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

@@ -1,8 +1,8 @@
-import { Controller, useForm } from 'react-hook-form';
-import { faPlus, faTags, faTrashCan } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { Controller, useForm } from "react-hook-form";
+import { faPlus, faTags, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 import {
   Button,
@@ -22,12 +22,12 @@ import {
   Td,
   Th,
   THead,
-  Tr} from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
-import { WorkspaceTag } from '@app/hooks/api/types';
+  Tr} from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { WorkspaceTag } from "@app/hooks/api/types";
 
 const createTagSchema = yup.object({
-  name: yup.string().required().label('Tag Name')
+  name: yup.string().required().label("Tag Name")
 });
 
 export type CreateWsTag = yup.InferType<typeof createTagSchema>;
@@ -50,8 +50,8 @@ export const SecretTagsSection = ({
   onCreateTag
 }: Props): JSX.Element => {
   const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
-    'CreateSecretTag',
-    'deleteTagConfirmation'
+    "CreateSecretTag",
+    "deleteTagConfirmation"
   ] as const);
 
   const {
@@ -65,12 +65,12 @@ export const SecretTagsSection = ({
 
   const onFormSubmit = async (data: CreateWsTag) => {
     await onCreateTag(data);
-    handlePopUpClose('CreateSecretTag');
+    handlePopUpClose("CreateSecretTag");
   };
 
   const onDeleteApproved = async () => {
     await onDeleteTag((popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id);
-    handlePopUpClose('deleteTagConfirmation');
+    handlePopUpClose("deleteTagConfirmation");
   };
 
   return (
@@ -87,7 +87,7 @@ export const SecretTagsSection = ({
           <Modal
             isOpen={popUp?.CreateSecretTag?.isOpen}
             onOpenChange={(open) => {
-              handlePopUpToggle('CreateSecretTag', open);
+              handlePopUpToggle("CreateSecretTag", open);
               reset();
             }}
           >
@@ -154,7 +154,7 @@ export const SecretTagsSection = ({
                   <Td className="flex items-center justify-end">
                     <IconButton
                       onClick={() =>
-                        handlePopUpOpen('deleteTagConfirmation', {
+                        handlePopUpOpen("deleteTagConfirmation", {
                           name,
                           id: _id
                         })
@@ -180,11 +180,11 @@ export const SecretTagsSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteTagConfirmation.isOpen}
         title={`Delete ${
-          (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name || ' '
+          (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name || " "
         } api key?`}
-        onChange={(isOpen) => handlePopUpToggle('deleteTagConfirmation', isOpen)}
+        onChange={(isOpen) => handlePopUpToggle("deleteTagConfirmation", isOpen)}
         deleteKey={(popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name}
-        onClose={() => handlePopUpClose('deleteTagConfirmation')}
+        onClose={() => handlePopUpClose("deleteTagConfirmation")}
         onDeleteApproved={onDeleteApproved}
       />
     </div>

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

@@ -1 +1 @@
-export {SecretTagsSection} from './SecretTagsSection'
+export {SecretTagsSection} from "./SecretTagsSection"

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

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { faCheck, faCopy, faKey, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { faCheck, faCopy, faKey, faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 import {
   Button,
@@ -28,24 +28,24 @@ import {
   Th,
   THead,
   Tr
-} from '@app/components/v2';
-import { usePopUp, useToggle } from '@app/hooks';
-import { ServiceToken, WorkspaceEnv } from '@app/hooks/api/types';
+} from "@app/components/v2";
+import { usePopUp, useToggle } from "@app/hooks";
+import { ServiceToken, WorkspaceEnv } from "@app/hooks/api/types";
 
 const apiTokenExpiry = [
-  { label: '1 Day', value: 86400 },
-  { label: '7 Days', value: 604800 },
-  { label: '1 Month', value: 2592000 },
-  { label: '6 months', value: 15552000 },
-  { label: '12 months', value: 31104000 },
-  { label: 'Never', value: null }
+  { label: "1 Day", value: 86400 },
+  { label: "7 Days", value: 604800 },
+  { label: "1 Month", value: 2592000 },
+  { label: "6 months", value: 15552000 },
+  { label: "12 months", value: 31104000 },
+  { label: "Never", value: null }
 ];
 
 const createServiceTokenSchema = yup.object({
-  name: yup.string().max(100).required().label('Service Token Name'),
-  environment: yup.string().max(50).required().label('Environment'),
-  secretPath: yup.string().required().default('/').label('Secret Path'),
-  expiresIn: yup.string().optional().label('Service Token Expiration'),
+  name: yup.string().max(100).required().label("Service Token Name"),
+  environment: yup.string().max(50).required().label("Environment"),
+  secretPath: yup.string().required().default("/").label("Secret Path"),
+  expiresIn: yup.string().optional().label("Service Token Expiration"),
   permissions: yup
     .object()
     .shape({
@@ -77,7 +77,7 @@ export const ServiceTokenSection = ({
   environments = [],
   onCreateToken
 }: Props): JSX.Element => {
-  const [newToken, setToken] = useState('');
+  const [newToken, setToken] = useState("");
   const { t } = useTranslation();
   const [isTokenCopied, setIsTokenCopied] = useToggle(false);
 
@@ -95,8 +95,8 @@ export const ServiceTokenSection = ({
   };
 
   const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
-    'createAPIToken',
-    'deleteAPITokenConfirmation'
+    "createAPIToken",
+    "deleteAPITokenConfirmation"
   ] as const);
 
   const {
@@ -117,37 +117,37 @@ export const ServiceTokenSection = ({
 
   const onDeleteApproved = async () => {
     await onDeleteToken((popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id);
-    handlePopUpClose('deleteAPITokenConfirmation');
+    handlePopUpClose("deleteAPITokenConfirmation");
   };
 
   return (
     <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 p-6">
       <div className="flex w-full flex-row justify-between">
         <div className="flex w-full flex-col">
-          <p className="mb-3 text-xl font-semibold">{t('section.token.service-tokens')}</p>
-          <p className="text-sm text-gray-400 mb-4">{t('section.token.service-tokens-description')}</p>
+          <p className="mb-3 text-xl font-semibold">{t("section.token.service-tokens")}</p>
+          <p className="text-sm text-gray-400 mb-4">{t("section.token.service-tokens-description")}</p>
         </div>
         <div>
           <Modal
             isOpen={popUp?.createAPIToken?.isOpen}
             onOpenChange={(open) => {
-              handlePopUpToggle('createAPIToken', open);
+              handlePopUpToggle("createAPIToken", open);
               reset();
-              setToken('');
+              setToken("");
             }}
           >
             <ModalTrigger asChild>
               <Button color="mineshaft" leftIcon={<FontAwesomeIcon icon={faPlus} />}>
-                {t('section.token.add-new')}
+                {t("section.token.add-new")}
               </Button>
             </ModalTrigger>
             <ModalContent
               title={
-                t('section.token.add-dialog.title', {
+                t("section.token.add-dialog.title", {
                   target: workspaceName
                 }) as string
               }
-              subTitle={t('section.token.add-dialog.description') as string}
+              subTitle={t("section.token.add-dialog.description") as string}
             >
               {!hasServiceToken ? (
                 <form onSubmit={handleSubmit(onFormSubmit)}>
@@ -157,7 +157,7 @@ export const ServiceTokenSection = ({
                     defaultValue=""
                     render={({ field, fieldState: { error } }) => (
                       <FormControl
-                        label={t('section.token.add-dialog.name')}
+                        label={t("section.token.add-dialog.name")}
                         isError={Boolean(error)}
                         errorText={error?.message}
                       >
@@ -223,7 +223,7 @@ export const ServiceTokenSection = ({
                           className="w-full"
                         >
                           {apiTokenExpiry.map(({ label, value }) => (
-                            <SelectItem value={String(value || '')} key={label}>
+                            <SelectItem value={String(value || "")} key={label}>
                               {label}
                             </SelectItem>
                           ))}
@@ -241,12 +241,12 @@ export const ServiceTokenSection = ({
                     render={({ field: { onChange, value }, fieldState: { error } }) => {
                       const options = [
                         {
-                          label: 'Read (default)',
-                          value: 'read'
+                          label: "Read (default)",
+                          value: "read"
                         },
                         {
-                          label: 'Write (optional)',
-                          value: 'write'
+                          label: "Write (optional)",
+                          value: "write"
                         }
                       ];
 
@@ -265,7 +265,7 @@ export const ServiceTokenSection = ({
                                   key={optionValue}
                                   className="data-[state=checked]:bg-primary"
                                   isChecked={value[optionValue]}
-                                  isDisabled={optionValue === 'read'}
+                                  isDisabled={optionValue === "read"}
                                   onCheckedChange={(state) => {
                                     onChange({
                                       ...value,
@@ -309,7 +309,7 @@ export const ServiceTokenSection = ({
                   >
                     <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
                     <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                      {t('common.click-to-copy')}
+                      {t("common.click-to-copy")}
                     </span>
                   </IconButton>
                 </div>
@@ -321,11 +321,11 @@ export const ServiceTokenSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteAPITokenConfirmation.isOpen}
         title={`Delete ${
-          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || ' '
+          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || " "
         } service token?`}
-        onChange={(isOpen) => handlePopUpToggle('deleteAPITokenConfirmation', isOpen)}
+        onChange={(isOpen) => handlePopUpToggle("deleteAPITokenConfirmation", isOpen)}
         deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
-        onClose={() => handlePopUpClose('deleteAPITokenConfirmation')}
+        onClose={() => handlePopUpClose("deleteAPITokenConfirmation")}
         onDeleteApproved={onDeleteApproved}
       />
       <TableContainer>
@@ -351,7 +351,7 @@ export const ServiceTokenSection = ({
                   <Td className="flex items-center justify-end">
                     <IconButton
                       onClick={() =>
-                        handlePopUpOpen('deleteAPITokenConfirmation', {
+                        handlePopUpOpen("deleteAPITokenConfirmation", {
                           name: row.name,
                           id: row._id
                         })

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/index.tsx

@@ -1 +1 @@
-export {ServiceTokenSection} from './ServiceTokenSection'
+export {ServiceTokenSection} from "./ServiceTokenSection"

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

@@ -1,9 +1,9 @@
-export { CopyProjectIDSection } from './CopyProjectIDSection';
-export { EnvironmentSection } from './EnvironmentSection';
-export type { CreateUpdateEnvFormData } from './EnvironmentSection/EnvironmentSection';
-export { ProjectIndexSecretsSection } from './ProjectIndexSecretsSection';
-export { ProjectNameChangeSection } from './ProjectNameChangeSection';
-export type { CreateWsTag } from './SecretTagsSection/SecretTagsSection';
-export { ServiceTokenSection } from './ServiceTokenSection';
-export type { CreateServiceToken } from './ServiceTokenSection/ServiceTokenSection';
-export { E2EESection } from './E2EESection';
+export { CopyProjectIDSection } from "./CopyProjectIDSection";
+export { E2EESection } from "./E2EESection";
+export { EnvironmentSection } from "./EnvironmentSection";
+export type { CreateUpdateEnvFormData } from "./EnvironmentSection/EnvironmentSection";
+export { ProjectIndexSecretsSection } from "./ProjectIndexSecretsSection";
+export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
+export type { CreateWsTag } from "./SecretTagsSection/SecretTagsSection";
+export { ServiceTokenSection } from "./ServiceTokenSection";
+export type { CreateServiceToken } from "./ServiceTokenSection/ServiceTokenSection";

frontend/src/views/Settings/ProjectSettingsPage/index.tsx

@@ -1 +1 @@
-export { ProjectSettingsPage } from './ProjectSettingsPage';
+export { ProjectSettingsPage } from "./ProjectSettingsPage";