Add eslint rule and fix as many issues as possible

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>
   );