ref(frontend): fix file or disable eslint rules

frontend/.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react-hooks/exhaustive-deps": "off"
+  }
 }

frontend/components/RouteGuard.js

@@ -11,9 +11,11 @@ export default function RouteGuard({ children }) {
 	const router = useRouter();
 	const [authorized, setAuthorized] = useState(false);
 
-	useEffect(async () => {
+	useEffect(() => {
 		// on initial load - run auth check
+		(async () => {
 			await authCheck(router.asPath);
+		})();
 
 		// on route change start - hide page content by setting authorized to false
 		// #TODO: add the loading page when not yet authorized.
@@ -31,7 +33,6 @@ export default function RouteGuard({ children }) {
 			router.events.off("routeChangeComplete", authCheck);
 			// router.events.off("routeChangeError", onError);
 		};
-
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

frontend/components/basic/layout.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";

frontend/components/basic/popups/BottomRightPopup.js

@@ -1,8 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
-	faXmark,
-} from "@fortawesome/free-solid-svg-icons";
 
 export default function BottonRightPopup({
 	buttonText,
@@ -11,22 +9,34 @@ export default function BottonRightPopup({
 	emoji,
 	textLine1,
 	textLine2,
-	setCheckDocsPopUpVisible
+	setCheckDocsPopUpVisible,
 }) {
 	return (
-		<div class="z-50 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-xl absolute bottom-0 right-0 mr-6 mb-6" role="alert">
+		<div
+			class="z-50 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-xl absolute bottom-0 right-0 mr-6 mb-6"
+			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="font-bold text-xl mr-2 mt-0.5 flex flex-row">
 					<div>{titleText}</div>
 					<div class="ml-2.5">{emoji}</div>
 				</div>
-				<button className="mt-1" onClick={() => setCheckDocsPopUpVisible(false)}>
+				<button
-					<FontAwesomeIcon icon={faXmark} className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer" />
+					className="mt-1"
+					onClick={() => setCheckDocsPopUpVisible(false)}
+				>
+					<FontAwesomeIcon
+						icon={faXmark}
+						className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer"
+					/>
 				</button>
 			</div>
-			<div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">{textLine1}</div>
+			<div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
+				{textLine1}
+			</div>
 			<div class="block sm:inline mb-4 px-6">{textLine2}</div>
 			<div className="flex flex-row px-6 w-full">
+				{/*eslint-disable-next-line react/jsx-no-target-blank */}
 				<a
 					class="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
 					href={buttonLink}

frontend/components/basic/table/UserTable.js

@@ -81,7 +81,7 @@ const UserTable = ({
 		]);
 	};
 
-	useEffect(async () => {
+	useEffect(() => {
 		setMyRole(userData.filter((user) => user.email == myUser)[0]?.role);
 	}, [userData, myUser]);
 

frontend/components/billing/Card.js

@@ -37,24 +37,27 @@ export default function Card({ card, changeSelectedCard, selected }) {
 				<div className="flex flex-row items-center justify-between w-full">
 					<div className="flex flex-row items-center">
 						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
+							{"****".split("").map((_, index) => (
 								<FontAwesomeIcon
+									key={index}
 									className="text-xxxs mr-0.5"
 									icon={faCircle}
 								/>
 							))}
 						</p>
 						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
+							{"****".split("").map((_, index) => (
 								<FontAwesomeIcon
+									key={index}
 									className="text-xxxs mr-0.5"
 									icon={faCircle}
 								/>
 							))}
 						</p>
 						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
+							{"****".split("").map((_, index) => (
 								<FontAwesomeIcon
+									key={index}
 									className="text-xxxs mr-0.5"
 									icon={faCircle}
 								/>

frontend/components/dashboard/DashboardInputField.js

@@ -1,27 +1,26 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import guidGenerator from "../utilities/randomId";
 
-
 /**
  * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
  * @param {string} text - the value of the input in the Dashboard Input Field
  * @returns
  */
 const findReferences = (text) => {
-	var splitText = text.split('${');
+	var splitText = text.split("${");
 	let textArray = [splitText[0]];
 	for (var i = 1; i < splitText.length; i++) {
-		let insideBrackets = "${" + splitText[i].split('}')[0]
+		let insideBrackets = "${" + splitText[i].split("}")[0];
-		if (splitText[i].includes('}')) {
+		if (splitText[i].includes("}")) {
-			insideBrackets += "}"
+			insideBrackets += "}";
 		}
-		textArray.push(insideBrackets)
+		textArray.push(insideBrackets);
-		textArray.push(splitText[i].split('}')[1])
+		textArray.push(splitText[i].split("}")[1]);
 	}
 	return textArray;
-}
+};
 
 /**
  * This component renders the input fields on the dashboard
@@ -33,7 +32,13 @@ const findReferences = (text) => {
  * @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
  * @returns
  */
-const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) => {
+const DashboardInputField = ({
+	index,
+	onChangeHandler,
+	type,
+	value,
+	blurred,
+}) => {
 	if (type === "varName") {
 		return (
 			<div className="flex-col w-full">
@@ -74,25 +79,51 @@ const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) =>
 								: ""
 						} flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-100`}
 					>
-						{findReferences(value).map((text, id) => 
+						{findReferences(value).map((texts, id) => {
-							id % 2 == 0 || text.length <= 2
+							if (id % 2 == 0 || texts.length <= 2) {
-							? <span className="ph-no-capture">{text}</span> 
+								return (
-							: <span className="ph-no-capture text-yellow">
+									<span className="ph-no-capture" key={id}>
-								{text.slice(0, 2)}
+										{texts}
-								<span className="ph-no-capture text-yellow-200/80">
-									{text.slice(2, text.length - 1)}
 									</span>
-								{text.slice(text.length - 1, text.length) == "}" 
+								);
-								? <span className="ph-no-capture text-yellow">{text.slice(text.length - 1, text.length)} </span> 
+							}
-								: <span className="ph-no-capture text-yellow-400">{text.slice(text.length - 1, text.length)} </span>}
+							return (
-							</span>)}
+								<span
+									className="ph-no-capture text-yellow"
+									key={id}
+								>
+									{texts.slice(0, 2)}
+									<span className="ph-no-capture text-yellow-200/80">
+										{texts.slice(2, texts.length - 1)}
+									</span>
+									{texts.slice(
+										texts.length - 1,
+										texts.length
+									) == "}" ? (
+										<span className="ph-no-capture text-yellow">
+											{texts.slice(
+												texts.length - 1,
+												texts.length
+											)}{" "}
+										</span>
+									) : (
+										<span className="ph-no-capture text-yellow-400">
+											{texts.slice(
+												texts.length - 1,
+												texts.length
+											)}{" "}
+										</span>
+									)}
+								</span>
+							);
+						})}
 					</div>
 					{blurred && (
 						<div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
 							<p className="ml-2"></p>
 							{value
 								.split("")
-								.slice(0,42)
+								.slice(0, 42)
 								.map(() => (
 									<FontAwesomeIcon
 										key={guidGenerator()}

frontend/components/navigation/NavBarDashboard.js

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/jsx-key */
 import React, { useState, Fragment, useEffect } from "react";
 import { useRouter } from "next/router";
 
@@ -106,6 +108,7 @@ export default function Navbar({ onButtonPressed }) {
 					>
 						<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-2 py-1.5">
 							{supportOptions.map((option) => (
+								// eslint-disable-next-line react/jsx-no-target-blank
 								<a
 									key={guidGenerator()}
 									target="_blank"

frontend/components/navigation/NavHeader.js

@@ -15,7 +15,8 @@ export default function NavHeader({ pageName, isProjectRelated }) {
 	const [workspaceName, setWorkspaceName] = useState("");
 	const router = useRouter();
 
-	useEffect(async () => {
+	useEffect(() => {
+		(async () => {
 			let org = await getOrganization({
 				orgId: localStorage.getItem("orgData.id"),
 			});
@@ -24,6 +25,8 @@ export default function NavHeader({ pageName, isProjectRelated }) {
 				workspaceId: router.query.id,
 			});
 			setWorkspaceName(workspace.name);
+		})();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	return (

frontend/pages/dashboard.js

@@ -10,11 +10,14 @@ export default function DashboardRedirect() {
 	/**
 	 * Here we forward to the default workspace if a user opens this url
 	 */
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(async () => {
 		let userWorkspace;
 		try {
 			if (localStorage.getItem("projectData.id")) {
-				router.push("/dashboard/" + localStorage.getItem("projectData.id"));
+				router.push(
+					"/dashboard/" + localStorage.getItem("projectData.id")
+				);
 			} else {
 				const userWorkspaces = await getWorkspaces();
 				userWorkspace = userWorkspaces[0]._id;
@@ -23,9 +26,10 @@ export default function DashboardRedirect() {
 		} catch (error) {
 			console.log("Error - Not logged in yet");
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	return <div></div>
+	return <div></div>;
 }
 
 DashboardRedirect.requireAuth = true;

frontend/pages/dashboard/[id].js

@@ -201,7 +201,8 @@ export default function Dashboard() {
 		);
 	};
 
-	useEffect(async () => {
+	useEffect(() => {
+		(async () => {
 			try {
 				let userWorkspaces = await getWorkspaces();
 				const listWorkspaces = userWorkspaces.map(
@@ -231,7 +232,8 @@ export default function Dashboard() {
 
 				const user = await getUser();
 				setIsNew(
-				(Date.parse(new Date()) - Date.parse(user.createdAt)) / 60000 <
+					(Date.parse(new Date()) - Date.parse(user.createdAt)) /
+						60000 <
 						3
 						? true
 						: false
@@ -245,6 +247,8 @@ export default function Dashboard() {
 				console.log("Error", error);
 				setData([]);
 			}
+		})();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [env]);
 
 	const addRow = () => {

frontend/pages/heroku.js

@@ -4,7 +4,6 @@ import { useRouter } from "next/router";
 const queryString = require("query-string");
 import AuthorizeIntegration from "./api/integrations/authorizeIntegration";
 
-
 export default function Heroku() {
 	const router = useRouter();
 	const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
@@ -14,22 +13,26 @@ export default function Heroku() {
 	/**
 	 * Here we forward to the default workspace if a user opens this url
 	 */
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(async () => {
 		try {
 			if (state == localStorage.getItem("latestCSRFToken")) {
 				await AuthorizeIntegration({
 					workspaceId: localStorage.getItem("projectData.id"),
 					code,
-					integration: "heroku"
+					integration: "heroku",
-				})
+				});
-				router.push("/integrations/" + localStorage.getItem("projectData.id"));
+				router.push(
+					"/integrations/" + localStorage.getItem("projectData.id")
+				);
 			}
 		} catch (error) {
 			console.log("Error - Not logged in yet");
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	return <div></div>
+	return <div></div>;
 }
 
 Heroku.requireAuth = true;

frontend/pages/index.js

@@ -4,12 +4,10 @@ import { useRouter } from "next/router";
 export default function Home() {
 	const router = useRouter();
 
-	useEffect(async () => {
+	useEffect(() => {
 		router.push("/login");
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	return (
+	return <div className="bg-bunker-800 w-screen"></div>;
-		<div className="bg-bunker-800 w-screen">
-		</div>
-	);
 }

frontend/pages/integrations/[id].js

@@ -251,8 +251,8 @@ export default function Integrations() {
 						<div className="flex flex-col max-w-5xl justify-center bg-white/5 p-6 rounded-md mx-6 mt-8">
 							<div className="relative px-4 flex flex-col text-gray-400 items-center justify-center">
 								<div className="mb-1">
-									You don't have any integrations set up yet.
+									You {"don't"} have any integrations set up
-									When you do, they will appear here.
+									yet. When you do, they will appear here.
 								</div>
 								<div className="">
 									To start, click on any of the options below.

frontend/pages/requestnewinvite.js

@@ -13,8 +13,8 @@ export default function Activity() {
 				<p className="mt-2 mb-1 text-xl">Your invite has expired. </p>
 				<p className="text-xl">Ask the administrator for a new one.</p>
 				<p className="text-md mt-8 text-gray-600 max-w-sm text-center">
-					Note: If it still doesn't work, please reach out to us at
+					Note: If it still {"doesn't work"}, please reach out to us
-					support@infisical.com
+					at support@infisical.com
 				</p>
 			</div>
 		</div>

frontend/pages/settings/billing/[id].js

@@ -70,8 +70,8 @@ export default function SettingsBilling() {
 								Usage & Billing
 							</p>
 							<p className="font-normal mr-4 text-gray-400 text-base">
-								View and manage your organization's subscription
+								View and manage your {"organization's"}{" "}
-								here.
+								subscription here.
 							</p>
 						</div>
 					</div>

frontend/pages/settings/project/[id].js

@@ -165,6 +165,7 @@ export default function SettingsBasic() {
 										For more guidance, including code
 										snipets for various languages and
 										frameworks, see{" "}
+										{/* eslint-disable-next-line react/jsx-no-target-blank */}
 										<a
 											href="https://infisical.com/docs/getting-started/introduction"
 											target="_blank"

frontend/pages/signup.js

@@ -253,7 +253,7 @@ export default function SignUp() {
 	const step1 = (
 		<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl">
 			<p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-				Let's get started
+				{"Let'"}s get started
 			</p>
 			<div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2">
 				<Link href="/login">
@@ -300,7 +300,7 @@ export default function SignUp() {
 	const step2 = (
 		<div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
 			<p className="text-l flex justify-center text-gray-400">
-				We've sent a verification email to{" "}
+				{"We've"} sent a verification email to{" "}
 			</p>
 			<p className="text-l flex justify-center font-semibold my-2 text-gray-400">
 				{email}{" "}
@@ -326,7 +326,7 @@ export default function SignUp() {
 			{codeError && (
 				<Error text="Oops. Your code is wrong. Please try again." />
 			)}
-			<div className="flex max-w-min flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-4 mb-2">
+			<div className="flex flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-4 mb-2">
 				<Button
 					text="Verify"
 					onButtonPressed={incrementStep}

frontend/pages/users/[id].js

@@ -85,6 +85,7 @@ export default function Users() {
 
 	const [userList, setUserList] = useState();
 	const [orgUserList, setOrgUserList] = useState([]);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(async () => {
 		const user = await getUser();
 		setPersonalEmail(user.email);