Add eslint rule and fix as many issues as possible

frontend/src/components/integrations/CloudIntegration.tsx

@@ -1,8 +1,8 @@
-import Image from 'next/image';
-import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Image from "next/image";
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import deleteIntegrationAuth from '../../pages/api/integrations/DeleteIntegrationAuth';
+import deleteIntegrationAuth from "../../pages/api/integrations/DeleteIntegrationAuth";
 
 interface IntegrationOption {
   clientId: string;
@@ -44,8 +44,8 @@ const CloudIntegration = ({
       tabIndex={0}
       className={`relative ${
         cloudIntegrationOption.isAvailable
-          ? 'cursor-pointer duration-200 hover:bg-mineshaft-700'
-          : 'opacity-50'
+          ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
+          : "opacity-50"
       } flex h-32 flex-row items-center rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4`}
       onClick={() => {
         if (!cloudIntegrationOption.isAvailable) return;
@@ -60,11 +60,11 @@ const CloudIntegration = ({
         width={70}
         alt="integration logo"
       />
-      {cloudIntegrationOption.name.split(' ').length > 2 ? (
+      {cloudIntegrationOption.name.split(" ").length > 2 ? (
         <div className="ml-4 max-w-xs text-3xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
-          <div>{cloudIntegrationOption.name.split(' ')[0]}</div>
+          <div>{cloudIntegrationOption.name.split(" ")[0]}</div>
           <div className="text-base">
-            {cloudIntegrationOption.name.split(' ')[1]} {cloudIntegrationOption.name.split(' ')[2]}
+            {cloudIntegrationOption.name.split(" ")[1]} {cloudIntegrationOption.name.split(" ")[2]}
           </div>
         </div>
       ) : (

frontend/src/components/integrations/CloudIntegrationSection.tsx

@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
-import CloudIntegration from './CloudIntegration';
+import CloudIntegration from "./CloudIntegration";
 
 interface IntegrationOption {
   clientId: string;
@@ -41,8 +41,8 @@ const CloudIntegrationSection = ({
   return (
     <>
       <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
-        <h1 className="text-3xl font-semibold">{t('integrations.cloud-integrations')}</h1>
-        <p className="text-base text-gray-400">{t('integrations.click-to-start')}</p>
+        <h1 className="text-3xl font-semibold">{t("integrations.cloud-integrations")}</h1>
+        <p className="text-base text-gray-400">{t("integrations.click-to-start")}</p>
       </div>
       <div className="mx-6 grid max-w-5xl grid-cols-4 grid-rows-2 gap-4">
         {cloudIntegrationOptions.map((cloudIntegrationOption) => (

frontend/src/components/integrations/FrameworkIntegration.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from "next/image";
 
 interface Framework {
   name: string;
@@ -16,7 +16,7 @@ const FrameworkIntegration = ({ framework }: { framework: Framework }) => (
   >
     <div
       className={`hover:bg-mineshaft-700 cursor-pointer font-semibold bg-mineshaft-800 border border-mineshaft-600 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${
-        framework?.name?.split(' ').length > 1 ? 'text-sm px-1' : 'text-xl px-2'
+        framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"
       } text-center w-full max-w-xs`}
     >
       {framework?.image && (

frontend/src/components/integrations/FrameworkIntegrationSection.tsx

@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
-import FrameworkIntegration from './FrameworkIntegration';
+import FrameworkIntegration from "./FrameworkIntegration";
 
 interface Framework {
   name: string;
@@ -20,8 +20,8 @@ const FrameworkIntegrationSection = ({ frameworks }: Props) => {
   return (
     <>
       <div className="mx-4 mt-12 mb-4 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
-        <h1 className="text-3xl font-semibold">{t('integrations.framework-integrations')}</h1>
-        <p className="text-base text-gray-400">{t('integrations.click-to-setup')}</p>
+        <h1 className="text-3xl font-semibold">{t("integrations.framework-integrations")}</h1>
+        <p className="text-base text-gray-400">{t("integrations.click-to-setup")}</p>
       </div>
       <div className="mx-6 mt-4 grid max-w-5xl grid-cols-7 grid-rows-2 gap-4">
         {frameworks.map((framework) => (

frontend/src/components/integrations/Integration.tsx

@@ -1,21 +1,21 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import { faArrowRight, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { faArrowRight, faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // TODO: This needs to be moved from public folder
 import {
   contextNetlifyMapping,
   integrationSlugNameMapping,
   reverseContextNetlifyMapping
-} from 'public/data/frequentConstants';
+} from "public/data/frequentConstants";
 
-import Button from '@app/components/basic/buttons/Button';
-import ListBox from '@app/components/basic/Listbox';
+import Button from "@app/components/basic/buttons/Button";
+import ListBox from "@app/components/basic/Listbox";
 
-import deleteIntegration from '../../pages/api/integrations/DeleteIntegration';
-import getIntegrationApps from '../../pages/api/integrations/GetIntegrationApps';
-import updateIntegration from '../../pages/api/integrations/updateIntegration';
+import deleteIntegration from "../../pages/api/integrations/DeleteIntegration";
+import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps";
+import updateIntegration from "../../pages/api/integrations/updateIntegration";
 
 interface Integration {
   _id: string;
@@ -60,16 +60,16 @@ const IntegrationTile = ({
   environments = [],
   handleDeleteIntegration
 }: Props) => {
-  const [integrationEnvironment, setIntegrationEnvironment] = useState<Props['environments'][0]>(
+  const [integrationEnvironment, setIntegrationEnvironment] = useState<Props["environments"][0]>(
     environments.find(({ slug }) => slug === integration?.environment) || {
-      name: '',
-      slug: ''
+      name: "",
+      slug: ""
     }
   );
   const router = useRouter();
   const [apps, setApps] = useState<IntegrationApp[]>([]); // integration app objects
-  const [integrationApp, setIntegrationApp] = useState(''); // integration app name
-  const [integrationTargetEnvironment, setIntegrationTargetEnvironment] = useState('');
+  const [integrationApp, setIntegrationApp] = useState(""); // integration app name
+  const [integrationTargetEnvironment, setIntegrationTargetEnvironment] = useState("");
 
   useEffect(() => {
     const loadIntegration = async () => {
@@ -86,23 +86,23 @@ const IntegrationTile = ({
       } else if (tempApps.length > 0) {
         setIntegrationApp(tempApps[0].name);
       } else {
-        setIntegrationApp('');
+        setIntegrationApp("");
       }
 
       switch (integration.integration) {
-        case 'vercel':
+        case "vercel":
           setIntegrationTargetEnvironment(
             integration?.targetEnvironment
               ? integration.targetEnvironment.charAt(0).toUpperCase() +
                   integration.targetEnvironment.substring(1)
-              : 'Development'
+              : "Development"
           );
           break;
-        case 'netlify':
+        case "netlify":
           setIntegrationTargetEnvironment(
             integration?.targetEnvironment
               ? contextNetlifyMapping[integration.targetEnvironment]
-              : 'Local development'
+              : "Local development"
           );
           break;
         default:
@@ -116,9 +116,9 @@ const IntegrationTile = ({
   const handleStartIntegration = async () => {
     const reformatTargetEnvironment = (targetEnvironment: string) => {
       switch (integration.integration) {
-        case 'vercel':
+        case "vercel":
           return targetEnvironment.toLowerCase();
-        case 'netlify':
+        case "netlify":
           return reverseContextNetlifyMapping[targetEnvironment];
         default:
           return null;
@@ -153,26 +153,26 @@ const IntegrationTile = ({
   const renderIntegrationSpecificParams = (integration: Integration) => {
     try {
       switch (integration.integration) {
-        case 'vercel':
+        case "vercel":
           return (
             <div>
               <div className="mb-2 w-60 text-xs font-semibold text-gray-400">ENVIRONMENT</div>
               <ListBox
-                data={!integration.isActive ? ['Development', 'Preview', 'Production'] : null}
+                data={!integration.isActive ? ["Development", "Preview", "Production"] : null}
                 isSelected={integrationTargetEnvironment}
                 onChange={setIntegrationTargetEnvironment}
                 isFull
               />
             </div>
           );
-        case 'netlify':
+        case "netlify":
           return (
             <div>
               <div className="mb-2 text-xs font-semibold text-gray-400">CONTEXT</div>
               <ListBox
                 data={
                   !integration.isActive
-                    ? ['Production', 'Deploy previews', 'Branch deploys', 'Local development']
+                    ? ["Production", "Deploy previews", "Branch deploys", "Local development"]
                     : null
                 }
                 isSelected={integrationTargetEnvironment}
@@ -180,14 +180,14 @@ const IntegrationTile = ({
               />
             </div>
           );
-        case 'railway':
+        case "railway":
           return (
             <div>
               <div className="mb-2 text-xs font-semibold text-gray-400">ENVIRONMENT</div>
               <ListBox
                 data={
                   !integration.isActive
-                    ? ['Production', 'Deploy previews', 'Branch deploys', 'Local development']
+                    ? ["Production", "Deploy previews", "Branch deploys", "Local development"]
                     : null
                 }
                 isSelected={integration.targetEnvironment}
@@ -195,7 +195,7 @@ const IntegrationTile = ({
               />
             </div>
           );
-        case 'gitlab':
+        case "gitlab":
           return (
             <div>
               <div className="mb-2 text-xs font-semibold text-gray-400">ENVIRONMENT</div>
@@ -216,10 +216,10 @@ const IntegrationTile = ({
     return <div />;
   };
 
-  if (!integrationApp && integration.integration !== 'checkly') return <div />;
+  if (!integrationApp && integration.integration !== "checkly") return <div />;
 
   const isSelected =
-    integration.integration === 'hashicorp-vault'
+    integration.integration === "hashicorp-vault"
       ? `${integration.app} - path: ${integration.path}`
       : integrationApp;
 
@@ -234,8 +234,8 @@ const IntegrationTile = ({
             onChange={(envName) =>
               setIntegrationEnvironment(
                 environments.find(({ name }) => envName === name) || {
-                  name: 'unknown',
-                  slug: 'unknown'
+                  name: "unknown",
+                  slug: "unknown"
                 }
               )
             }

frontend/src/components/integrations/IntegrationSection.tsx

@@ -1,4 +1,4 @@
-import IntegrationTile from './Integration';
+import IntegrationTile from "./Integration";
 
 interface Props {
   integrations: any;