Add eslint rule and fix as many issues as possible

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

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { plans } from 'public/data/frequentConstants';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { plans } from "public/data/frequentConstants";
 
-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";
 import {
   decryptAssymmetric,
   encryptAssymmetric
-} from '@app/components/utilities/cryptography/crypto';
-import { useOrganization, useSubscription, useUser, useWorkspace } from '@app/context';
+} from "@app/components/utilities/cryptography/crypto";
+import { useOrganization, useSubscription, useUser, useWorkspace } from "@app/context";
 import {
   useAddIncidentContact,
   useAddUserToOrg,
@@ -22,14 +22,14 @@ import {
   useRenameOrg,
   useUpdateOrgUserRole,
   useUploadWsKey
-} from '@app/hooks/api';
+} from "@app/hooks/api";
 
 import {
   OrgIncidentContactsTable,
   OrgMembersTable,
   OrgNameChangeSection,
   OrgServiceAccountsTable
-} from './components';
+} from "./components";
 
 export const OrgSettingsPage = () => {
   const host = window.location.origin;
@@ -41,12 +41,12 @@ export const OrgSettingsPage = () => {
   const { subscription } = useSubscription();
   const { createNotification } = useNotificationContext();
 
-  const orgId = currentOrg?._id || '';
+  const orgId = currentOrg?._id || "";
 
   const { data: orgUsers, isLoading: isOrgUserLoading } = useGetOrgUsers(orgId);
   const { data: workspaceMemberships, isLoading: IsWsMembershipLoading } =
     useGetUserWorkspaceMemberships(orgId);
-  const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id || '');
+  const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id || "");
   const { data: incidentContact, isLoading: IsIncidentContactLoading } =
     useGetOrgIncidentContact(orgId);
 
@@ -58,7 +58,7 @@ export const OrgSettingsPage = () => {
   const addIncidentContact = useAddIncidentContact();
   const removeIncidentContact = useDeleteIncidentContact();
 
-  const [completeInviteLink, setcompleteInviteLink] = useState<string | undefined>('');
+  const [completeInviteLink, setcompleteInviteLink] = useState<string | undefined>("");
 
   const isMoreUsersNotAllowed = subscription?.memberLimit ? (subscription.membersUsed >= subscription.memberLimit) : false;
 
@@ -68,14 +68,14 @@ export const OrgSettingsPage = () => {
     try {
       await renameOrg.mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
       createNotification({
-        text: 'Successfully renamed organization',
-        type: 'success'
+        text: "Successfully renamed organization",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to rename organization',
-        type: 'error'
+        text: "Failed to rename organization",
+        type: "error"
       });
     }
   };
@@ -86,14 +86,14 @@ export const OrgSettingsPage = () => {
     try {
       await removeUserOrgMembership.mutateAsync({ orgId: currentOrg?._id, membershipId });
       createNotification({
-        text: 'Successfully removed user from org',
-        type: 'success'
+        text: "Successfully removed user from org",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to remove user from the organization',
-        type: 'error'
+        text: "Failed to remove user from the organization",
+        type: "error"
       });
     }
   };
@@ -110,15 +110,15 @@ export const OrgSettingsPage = () => {
       // only show this notification when email is configured. A [completeInviteLink] will not be sent if smtp is configured
       if (!data.completeInviteLink) {
         createNotification({
-          text: 'Successfully invited user to the organization.',
-          type: 'success'
+          text: "Successfully invited user to the organization.",
+          type: "success"
         });
       }
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to invite user to org',
-        type: 'error'
+        text: "Failed to invite user to org",
+        type: "error"
       });
     }
   };
@@ -129,21 +129,21 @@ export const OrgSettingsPage = () => {
     try {
       await updateOrgUserRole.mutateAsync({ organizationId: currentOrg?._id, membershipId, role });
       createNotification({
-        text: 'Successfully updated user role',
-        type: 'success'
+        text: "Successfully updated user role",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to update user role',
-        type: 'error'
+        text: "Failed to update user role",
+        type: "error"
       });
     }
   };
 
   const onGrantUserAccess = async (userId: string, publicKey: string) => {
     try {
-      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
+      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
       if (!PRIVATE_KEY || !wsKey) return;
 
       // assymmetrically decrypt symmetric key with local private key
@@ -164,13 +164,13 @@ export const OrgSettingsPage = () => {
         userId,
         nonce,
         encryptedKey: ciphertext,
-        workspaceId: currentWorkspace?._id || ''
+        workspaceId: currentWorkspace?._id || ""
       });
     } catch (err) {
       console.error(err);
       createNotification({
-        text: 'Failed to grant access to user',
-        type: 'error'
+        text: "Failed to grant access to user",
+        type: "error"
       });
     }
   };
@@ -181,14 +181,14 @@ export const OrgSettingsPage = () => {
     try {
       await addIncidentContact.mutateAsync({ orgId, email });
       createNotification({
-        text: 'Successfully added incident contact',
-        type: 'success'
+        text: "Successfully added incident contact",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to add incident contact',
-        type: 'error'
+        text: "Failed to add incident contact",
+        type: "error"
       });
     }
   };
@@ -199,14 +199,14 @@ export const OrgSettingsPage = () => {
     try {
       await removeIncidentContact.mutateAsync({ orgId, email });
       createNotification({
-        text: 'Successfully removed incident contact',
-        type: 'success'
+        text: "Successfully removed incident contact",
+        type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: 'Failed to remove incident contact',
-        type: 'error'
+        text: "Failed to remove incident contact",
+        type: "error"
       });
     }
   };
@@ -234,25 +234,25 @@ export const OrgSettingsPage = () => {
   //
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-      <NavHeader pageName={t('settings.org.title')} />
+      <NavHeader pageName={t("settings.org.title")} />
       <div className="my-8 ml-8 max-w-5xl">
-        <p className="text-3xl font-semibold text-gray-200">{t('settings.org.title')}</p>
-        <p className="text-base font-normal text-gray-400">{t('settings.org.description')}</p>
+        <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
+        <p className="text-base font-normal text-gray-400">{t("settings.org.description")}</p>
       </div>
       <div className="max-w-8xl ml-6 mr-6 flex flex-col text-mineshaft-50">
         <OrgNameChangeSection orgName={currentOrg?.name} onOrgNameChange={onRenameOrg} />
         <div className="mb-6 w-full rounded-md bg-white/5 p-6">
           <p className="mr-4 mb-4 text-xl font-semibold text-white">
-            {t('section.members.org-members')}
+            {t("section.members.org-members")}
           </p>
           <OrgMembersTable
             isLoading={isOrgUserLoading || IsWsMembershipLoading}
             isMoreUserNotAllowed={isMoreUsersNotAllowed}
-            orgName={currentOrg?.name || ''}
+            orgName={currentOrg?.name || ""}
             members={orgUsers}
             workspaceMemberships={workspaceMemberships}
             onInviteMember={onAddUserToOrg}
-            userId={user?._id || ''}
+            userId={user?._id || ""}
             onRemoveMember={onRemoveUserOrgMembership}
             onRoleChange={onUpdateOrgUserRole}
             onGrantAccess={onGrantUserAccess}
@@ -268,10 +268,10 @@ export const OrgSettingsPage = () => {
           <div className="flex w-full max-w-5xl flex-row items-center justify-between">
             <div className="flex w-full max-w-3xl flex-col justify-between">
               <p className="mb-3 min-w-max text-xl font-semibold">
-                {t('section.incident.incident-contacts')}
+                {t("section.incident.incident-contacts")}
               </p>
               <p className="mb-2 min-w-max text-xs text-gray-500">
-                {t('section.incident.incident-contacts-description')}
+                {t("section.incident.incident-contacts-description")}
               </p>
             </div>
           </div>

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

@@ -1,14 +1,14 @@
-import { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 import {
   faContactBook,
   faMagnifyingGlass,
   faPlus,
   faTrash
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+} 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,10 +28,10 @@ import {
   Th,
   THead,
   Tr
-} from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
-import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
-import { IncidentContact } from '@app/hooks/api/types';
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { IncidentContact } from "@app/hooks/api/types";
 
 type Props = {
   isLoading?: boolean;
@@ -41,7 +41,7 @@ type Props = {
 };
 
 const addContactFormSchema = yup.object({
-  email: yup.string().email().required().label('Email').trim()
+  email: yup.string().email().required().label("Email").trim()
 });
 
 type TAddContactForm = yup.InferType<typeof addContactFormSchema>;
@@ -52,12 +52,12 @@ export const OrgIncidentContactsTable = ({
   onRemoveContact,
   isLoading
 }: Props) => {
-  const [searchContact, setSearchContact] = useState('');
+  const [searchContact, setSearchContact] = useState("");
   const {data: serverDetails } = useFetchServerStatus()
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    'addContact',
-    'removeContact',
-    'setUpEmail'
+    "addContact",
+    "removeContact",
+    "setUpEmail"
   ] as const);
 
   const {
@@ -69,14 +69,14 @@ export const OrgIncidentContactsTable = ({
 
   const onAddIncidentContact = ({ email }: TAddContactForm) => {
     onAddContact(email);
-    handlePopUpClose('addContact');
+    handlePopUpClose("addContact");
     reset();
   };
 
   const onRemoveIncidentContact = async () => {
     const incidentContactEmail = (popUp?.removeContact?.data as { email: string })?.email;
     await onRemoveContact(incidentContactEmail);
-    handlePopUpClose('removeContact');
+    handlePopUpClose("removeContact");
   };
 
   const filteredContacts = contacts.filter(({ email }) =>
@@ -99,9 +99,9 @@ export const OrgIncidentContactsTable = ({
             leftIcon={<FontAwesomeIcon icon={faPlus} />}
             onClick={() => {
               if (serverDetails?.emailConfigured){
-                handlePopUpOpen('addContact');
+                handlePopUpOpen("addContact");
               } else {
-                handlePopUpOpen('setUpEmail');
+                handlePopUpOpen("setUpEmail");
               }
             }}
           >
@@ -127,7 +127,7 @@ export const OrgIncidentContactsTable = ({
                     <IconButton
                       ariaLabel="delete"
                       colorSchema="danger"
-                      onClick={() => handlePopUpOpen('removeContact', { email })}
+                      onClick={() => handlePopUpOpen("removeContact", { email })}
                     >
                       <FontAwesomeIcon icon={faTrash} />
                     </IconButton>
@@ -144,7 +144,7 @@ export const OrgIncidentContactsTable = ({
       <Modal
         isOpen={popUp?.addContact?.isOpen}
         onOpenChange={(isOpen) => {
-          handlePopUpToggle('addContact', isOpen);
+          handlePopUpToggle("addContact", isOpen);
           reset();
         }}
       >
@@ -176,7 +176,7 @@ export const OrgIncidentContactsTable = ({
               <Button
                 colorSchema="secondary"
                 variant="plain"
-                onClick={() => handlePopUpClose('addContact')}
+                onClick={() => handlePopUpClose("addContact")}
               >
                 Cancel
               </Button>
@@ -188,12 +188,12 @@ export const OrgIncidentContactsTable = ({
         isOpen={popUp.removeContact.isOpen}
         deleteKey="remove"
         title="Do you want to remove this email from incident contact?"
-        onChange={(isOpen) => handlePopUpToggle('removeContact', isOpen)}
+        onChange={(isOpen) => handlePopUpToggle("removeContact", isOpen)}
         onDeleteApproved={onRemoveIncidentContact}
       />
       <EmailServiceSetupModal
         isOpen={popUp.setUpEmail?.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+        onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
       />
     </div>
   );

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsTable/index.tsx

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

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

@@ -1,10 +1,10 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useRouter } from 'next/router';
-import { faCheck, faCopy, faMagnifyingGlass, faPlus, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { faCheck, faCopy, faMagnifyingGlass, faPlus, faTrash, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 import {
   Button,
@@ -26,10 +26,10 @@ import {
   Th,
   THead,
   Tr,
-  UpgradePlanModal} from '@app/components/v2';
-import { usePopUp, useToggle } from '@app/hooks';
-import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
-import { OrgUser, Workspace } from '@app/hooks/api/types';
+  UpgradePlanModal} from "@app/components/v2";
+import { usePopUp, useToggle } from "@app/hooks";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { OrgUser, Workspace } from "@app/hooks/api/types";
 
 type Props = {
   members?: OrgUser[];
@@ -48,7 +48,7 @@ type Props = {
 };
 
 const addMemberFormSchema = yup.object({
-  email: yup.string().email().required().label('Email').trim()
+  email: yup.string().email().required().label("Email").trim()
 });
 
 type TAddMemberForm = yup.InferType<typeof addMemberFormSchema>;
@@ -68,14 +68,14 @@ export const OrgMembersTable = ({
   setCompleteInviteLink
 }: Props) => {
   const router = useRouter();
-  const [searchMemberFilter, setSearchMemberFilter] = useState('');
+  const [searchMemberFilter, setSearchMemberFilter] = useState("");
   const {data: serverDetails } = useFetchServerStatus()
   const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    'addMember',
-    'removeMember',
-    'upgradePlan',
-    'setUpEmail'
+    "addMember",
+    "removeMember",
+    "upgradePlan",
+    "setUpEmail"
   ] as const);
 
   const {
@@ -88,7 +88,7 @@ export const OrgMembersTable = ({
   const onAddMember = async ({ email }: TAddMemberForm) => {
     await onInviteMember(email);
       if (serverDetails?.emailConfigured){
-        handlePopUpClose('addMember');
+        handlePopUpClose("addMember");
       }
       
       reset();
@@ -97,11 +97,11 @@ export const OrgMembersTable = ({
   const onRemoveOrgMemberApproved = async () => {
     const orgMembershipId = (popUp?.removeMember?.data as { id: string })?.id;
     await onRemoveMember(orgMembershipId);
-    handlePopUpClose('removeMember');
+    handlePopUpClose("removeMember");
   };
 
   const isIamOwner = useMemo(
-    () => members.find(({ user }) => userId === user?._id)?.role === 'owner',
+    () => members.find(({ user }) => userId === user?._id)?.role === "owner",
     [userId, members]
   );
   
@@ -145,9 +145,9 @@ export const OrgMembersTable = ({
           leftIcon={<FontAwesomeIcon icon={faPlus} />}
           onClick={() => {
             if (isMoreUserNotAllowed) {
-              handlePopUpOpen('upgradePlan');
+              handlePopUpOpen("upgradePlan");
             } else {
-              handlePopUpOpen('addMember');
+              handlePopUpOpen("addMember");
             }
           }}
         >
@@ -170,7 +170,7 @@ export const OrgMembersTable = ({
               {isLoading && <TableSkeleton columns={5} key="org-members" />}
               {!isLoading &&
                 filterdUser.map(({ user, inviteEmail, role, _id: orgMembershipId, status }) => {
-                  const name = user ? `${user.firstName} ${user.lastName}` : '-';
+                  const name = user ? `${user.firstName} ${user.lastName}` : "-";
                   const email = user?.email || inviteEmail;
                   const userWs = workspaceMemberships?.[user?._id];
 
@@ -179,7 +179,7 @@ export const OrgMembersTable = ({
                       <Td>{name}</Td>
                       <Td>{email}</Td>
                       <Td>
-                        {status === 'accepted' && (
+                        {status === "accepted" && (
                           <Select
                             defaultValue={role}
                             isDisabled={userId === user?._id}
@@ -189,19 +189,19 @@ export const OrgMembersTable = ({
                               onRoleChange(orgMembershipId, selectedRole)
                             }
                           >
-                            {(isIamOwner || role === 'owner') && (
+                            {(isIamOwner || role === "owner") && (
                               <SelectItem value="owner">owner</SelectItem>
                             )}
                             <SelectItem value="admin">admin</SelectItem>
                             <SelectItem value="member">member</SelectItem>
                           </Select>
                         )}
-                        {((status === 'invited' || status === 'verified') && serverDetails?.emailConfigured) && (
+                        {((status === "invited" || status === "verified") && serverDetails?.emailConfigured) && (
                           <Button className='w-40' colorSchema="primary" variant="outline_bg" onClick={() => onInviteMember(email)}>
                             Resend Invite
                           </Button>
                         )}
-                        {status === 'completed' && (
+                        {status === "completed" && (
                           <Button
                             colorSchema="secondary"
                             onClick={() => onGrantAccess(user?._id, user?.publicKey)}
@@ -219,10 +219,10 @@ export const OrgMembersTable = ({
                           ))
                         ) : (
                           <div className='flex flex-row'>
-                            {((status === 'invited' || status === 'verified') && serverDetails?.emailConfigured) 
+                            {((status === "invited" || status === "verified") && serverDetails?.emailConfigured) 
                             ? <Tag colorSchema="red">This user hasn&apos;t accepted the invite yet</Tag>
                             : <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>}
-                            {router.query.id !== 'undefined' && !((status === 'invited' || status === 'verified') && serverDetails?.emailConfigured) && <button 
+                            {router.query.id !== "undefined" && !((status === "invited" || status === "verified") && serverDetails?.emailConfigured) && <button 
                               type="button"
                               onClick={() => router.push(`/users/${router.query.id}`)}
                               className='text-sm bg-mineshaft w-max px-1.5 py-0.5 hover:bg-primary duration-200 hover:text-black cursor-pointer rounded-sm'
@@ -239,7 +239,7 @@ export const OrgMembersTable = ({
                             ariaLabel="delete"
                             colorSchema="danger"
                             isDisabled={userId === user?._id}
-                            onClick={() => handlePopUpOpen('removeMember', { id: orgMembershipId })}
+                            onClick={() => handlePopUpOpen("removeMember", { id: orgMembershipId })}
                           >
                             <FontAwesomeIcon icon={faTrash} />
                           </IconButton>
@@ -258,7 +258,7 @@ export const OrgMembersTable = ({
       <Modal
         isOpen={popUp?.addMember?.isOpen}
         onOpenChange={(isOpen) => {
-          handlePopUpToggle('addMember', isOpen);
+          handlePopUpToggle("addMember", isOpen);
           setCompleteInviteLink(undefined) 
         }}
       >
@@ -299,7 +299,7 @@ export const OrgMembersTable = ({
               <Button
                 colorSchema="secondary"
                 variant="plain"
-                onClick={() => handlePopUpClose('addMember')}
+                onClick={() => handlePopUpClose("addMember")}
               >
                 Cancel
               </Button>
@@ -326,17 +326,17 @@ export const OrgMembersTable = ({
         isOpen={popUp.removeMember.isOpen}
         deleteKey="remove"
         title="Do you want to remove this user from the org?"
-        onChange={(isOpen) => handlePopUpToggle('removeMember', isOpen)}
+        onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
         onDeleteApproved={onRemoveOrgMemberApproved}
       />
       <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."
       />
       <EmailServiceSetupModal
         isOpen={popUp.setUpEmail?.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+        onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
       />
     </div>
   );

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

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

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.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 = {
   orgName?: 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>;
@@ -39,7 +39,7 @@ export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.E
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
       <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-3">
-        <p className="mb-4 mt-2 text-xl font-semibold">{t('common.display-name')}</p>
+        <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=""
@@ -61,7 +61,7 @@ export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.E
           isDisabled={!isDirty || isSubmitting}
           leftIcon={<FontAwesomeIcon icon={faCheck} />}
         >
-          {t('common.save-changes')}
+          {t("common.save-changes")}
         </Button>
       </div>
     </form>

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/index.tsx

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

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

@@ -1,6 +1,6 @@
-import { useEffect, useMemo,useState } from 'react';
-import { Controller,useForm } from 'react-hook-form';
-import { useRouter } from 'next/router';
+import { useEffect, useMemo,useState } from "react";
+import { Controller,useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { 
     faCheck, 
     faCopy, 
@@ -8,12 +8,12 @@ import {
     faPencil,
     faPlus, 
     faServer, 
-    faTrash} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+    faTrash} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
-import { generateKeyPair } from '@app/components/utilities/cryptography/crypto';
+import { generateKeyPair } from "@app/components/utilities/cryptography/crypto";
 import {
   Button,
   DeleteActionModal,
@@ -33,26 +33,26 @@ import {
   Th,
   THead,
   Tr
-} from '@app/components/v2';
-import { useOrganization, useWorkspace } from '@app/context';
-import { usePopUp, useToggle } from '@app/hooks';
+} from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import { usePopUp, useToggle } from "@app/hooks";
 import {
     useCreateServiceAccount,
     useDeleteServiceAccount,
-    useGetServiceAccounts} from '@app/hooks/api';
+    useGetServiceAccounts} from "@app/hooks/api";
 
 const serviceAccountExpiration = [
-  { 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: -1 }
+  { 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: -1 }
 ];
 
 const addServiceAccountFormSchema = yup.object({
-    name: yup.string().required().label('Name').trim(),
-    expiresIn: yup.string().required().label('Service Account Expiration')
+    name: yup.string().required().label("Name").trim(),
+    expiresIn: yup.string().required().label("Service Account Expiration")
 });
 
 type TAddServiceAccountForm = yup.InferType<typeof addServiceAccountFormSchema>;
@@ -62,18 +62,18 @@ export const OrgServiceAccountsTable = () => {
     const { currentOrg } = useOrganization();
     const { currentWorkspace } = useWorkspace();
     
-    const orgId = currentOrg?._id || '';
+    const orgId = currentOrg?._id || "";
     const [step, setStep] = useState(0);
     const [isAccessKeyCopied, setIsAccessKeyCopied] = useToggle(false);
     const [isPublicKeyCopied, setIsPublicKeyCopied] = useToggle(false);
     const [isPrivateKeyCopied, setIsPrivateKeyCopied] = useToggle(false);
-    const [accessKey, setAccessKey] = useState('');
-    const [publicKey, setPublicKey] = useState('');
-    const [privateKey, setPrivateKey] = useState('');
-    const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState('');
+    const [accessKey, setAccessKey] = useState("");
+    const [publicKey, setPublicKey] = useState("");
+    const [privateKey, setPrivateKey] = useState("");
+    const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState("");
     const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-        'addServiceAccount',
-        'removeServiceAccount',
+        "addServiceAccount",
+        "removeServiceAccount",
     ] as const);
 
     const { data: serviceAccounts = [], isLoading: isServiceAccountsLoading } = useGetServiceAccounts(orgId);
@@ -128,7 +128,7 @@ export const OrgServiceAccountsTable = () => {
     const onRemoveServiceAccount = async () => {
         const serviceAccountId = (popUp?.removeServiceAccount?.data as { _id: string })?._id;
         await removeServiceAccount.mutateAsync(serviceAccountId);
-        handlePopUpClose('removeServiceAccount');
+        handlePopUpClose("removeServiceAccount");
     }
     
     const filteredServiceAccounts = useMemo(
@@ -195,7 +195,7 @@ export const OrgServiceAccountsTable = () => {
                             <Button
                                 colorSchema="secondary"
                                 variant="plain"
-                                onClick={() => handlePopUpClose('addServiceAccount')}
+                                onClick={() => handlePopUpClose("addServiceAccount")}
                             >
                                 Cancel
                             </Button>
@@ -283,7 +283,7 @@ export const OrgServiceAccountsTable = () => {
                     onClick={() => {
                         setStep(0);
                         reset();
-                        handlePopUpOpen('addServiceAccount');
+                        handlePopUpOpen("addServiceAccount");
                     }}
                 >
                     Add Service Account
@@ -325,7 +325,7 @@ export const OrgServiceAccountsTable = () => {
                                                 <IconButton
                                                     ariaLabel="delete"
                                                     colorSchema="danger"
-                                                    onClick={() => handlePopUpOpen('removeServiceAccount', { _id: serviceAccountId })}
+                                                    onClick={() => handlePopUpOpen("removeServiceAccount", { _id: serviceAccountId })}
                                                 >
                                                     <FontAwesomeIcon icon={faTrash} />
                                                 </IconButton>
@@ -344,7 +344,7 @@ export const OrgServiceAccountsTable = () => {
             <Modal
                 isOpen={popUp?.addServiceAccount?.isOpen}
                 onOpenChange={(isOpen) => {
-                    handlePopUpToggle('addServiceAccount', isOpen);
+                    handlePopUpToggle("addServiceAccount", isOpen);
                     reset();
                 }}
             >
@@ -359,7 +359,7 @@ export const OrgServiceAccountsTable = () => {
                 isOpen={popUp.removeServiceAccount.isOpen}
                 deleteKey="remove"
                 title="Do you want to remove this service account from the org?"
-                onChange={(isOpen) => handlePopUpToggle('removeServiceAccount', isOpen)}
+                onChange={(isOpen) => handlePopUpToggle("removeServiceAccount", isOpen)}
                 onDeleteApproved={onRemoveServiceAccount}
             />
         </div>

frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/index.tsx

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

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

@@ -1,5 +1,5 @@
-export { OrgIncidentContactsTable } from './OrgIncidentContactsTable';
-export { OrgMembersTable } from './OrgMembersTable';
-export { OrgNameChangeSection } from './OrgNameChangeSection';
-export { OrgServiceAccountsTable } from './OrgServiceAccountsTable';
+export { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
+export { OrgMembersTable } from "./OrgMembersTable";
+export { OrgNameChangeSection } from "./OrgNameChangeSection";
+export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";
 

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

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