fix(integrations-page): eslint fixes to the new upstream changes made

frontend/package.json

@@ -7,7 +7,7 @@
     "start": "next start",
     "start:docker": "next build && next start",
     "lint": "eslint --ext js,ts,tsx ./src",
-    "lint-and-fix": "eslint --fix --ext js,ts,tsx ./src",
+    "lint:fix": "eslint --fix --ext js,ts,tsx ./src",
     "type-check": "tsc --project tsconfig.json",
     "storybook": "storybook dev -p 6006 -s ./public",
     "build-storybook": "storybook build"

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -24,7 +24,7 @@ export const DeleteActionModal = ({
   deleteKey,
   onDeleteApproved,
   title,
-  subTitle = 'This action is irreversible!'
+  subTitle = "This action is irreversible!"
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();

frontend/src/hooks/api/bots/index.tsx

@@ -1 +1 @@
-export { useGetWorkspaceBot, useUpdateBotActiveStatus } from './queries';
+export { useGetWorkspaceBot, useUpdateBotActiveStatus } from "./queries";

frontend/src/hooks/api/bots/queries.tsx

@@ -1,11 +1,11 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { apiRequest } from '@app/config/request';
+import { apiRequest } from "@app/config/request";
 
-import { TBot, TSetBotActiveStatusDto } from './types';
+import { TBot, TSetBotActiveStatusDto } from "./types";
 
 const queryKeys = {
-  getBot: (workspaceId: string) => [{ workspaceId }, 'bot'] as const
+  getBot: (workspaceId: string) => [{ workspaceId }, "bot"] as const
 };
 
 const fetchWorkspaceBot = async (workspaceId: string) => {

frontend/src/hooks/api/integrations/index.tsx

@@ -1 +1 @@
-export { useDeleteIntegration,useGetCloudIntegrations } from './queries';
+export { useDeleteIntegration,useGetCloudIntegrations } from "./queries";

frontend/src/hooks/api/integrations/queries.tsx

@@ -1,17 +1,17 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { apiRequest } from '@app/config/request';
+import { apiRequest } from "@app/config/request";
 
-import { workspaceKeys } from '../workspace/queries';
-import { TCloudIntegration } from './types';
+import { workspaceKeys } from "../workspace/queries";
+import { TCloudIntegration } from "./types";
 
 export const integrationQueryKeys = {
-  getIntegrations: () => ['integrations'] as const
+  getIntegrations: () => ["integrations"] as const
 };
 
 const fetchIntegrations = async () => {
   const { data } = await apiRequest.get<{ integrationOptions: TCloudIntegration[] }>(
-    '/api/v1/integration-auth/integration-options'
+    "/api/v1/integration-auth/integration-options"
   );
 
   return data.integrationOptions;

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -1,6 +1,6 @@
 import crypto from "crypto";
 
-import { UserWsKeyPair, TCloudIntegration } from "@app/hooks/api/types";
+import { TCloudIntegration,UserWsKeyPair } from "@app/hooks/api/types";
 
 import {
   decryptAssymmetric,

frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx

@@ -1,10 +1,10 @@
-import { useTranslation } from 'react-i18next';
-import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useTranslation } from "react-i18next";
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { DeleteActionModal,Skeleton, Tooltip } from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
-import { IntegrationAuth, TCloudIntegration } from '@app/hooks/api/types';
+import { DeleteActionModal,Skeleton, Tooltip } from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { IntegrationAuth, TCloudIntegration } from "@app/hooks/api/types";
 
 type Props = {
   isLoading?: boolean;
@@ -26,7 +26,7 @@ export const CloudIntegrationSection = ({
 }: Props) => {
   const { t } = useTranslation();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    'deleteConfirmation'
+    "deleteConfirmation"
   ] as const);
 
   const isEmpty = !isLoading && !cloudIntegrations?.length;
@@ -34,12 +34,12 @@ export const CloudIntegrationSection = ({
   return (
     <div>
       <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 grid-flow-dense gap-4"
-        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))' }}
+        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(256px, 1fr))" }}
       >
         {isLoading &&
           Array.from({ length: 12 }).map((_, index) => (
@@ -53,8 +53,8 @@ export const CloudIntegrationSection = ({
               tabIndex={0}
               className={`group relative ${
                 cloudIntegration.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 border border-mineshaft-600 bg-mineshaft-800 p-4`}
               onClick={() => {
                 if (!cloudIntegration.isAvailable) return;
@@ -68,11 +68,11 @@ export const CloudIntegrationSection = ({
                 width={70}
                 alt="integration logo"
               />
-              {cloudIntegration.name.split(' ').length > 2 ? (
+              {cloudIntegration.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>{cloudIntegration.name.split(' ')[0]}</div>
+                  <div>{cloudIntegration.name.split(" ")[0]}</div>
                   <div className="text-base">
-                    {cloudIntegration.name.split(' ')[1]} {cloudIntegration.name.split(' ')[2]}
+                    {cloudIntegration.name.split(" ")[1]} {cloudIntegration.name.split(" ")[2]}
                   </div>
                 </div>
               ) : (
@@ -95,7 +95,7 @@ export const CloudIntegrationSection = ({
                           tabIndex={0}
                           onClick={async (event) => {
                             event.stopPropagation();
-                            handlePopUpOpen('deleteConfirmation', {
+                            handlePopUpOpen("deleteConfirmation", {
                               provider: cloudIntegration.slug
                             });
                           }}
@@ -123,15 +123,15 @@ export const CloudIntegrationSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteConfirmation.isOpen}
         title={`Are you sure want to revoke access ${
-          (popUp?.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider || ' '
+          (popUp?.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider || " "
         }?`}
         subTitle="This will remove all the secret integration of this provider!!!"
-        onChange={(isOpen) => handlePopUpToggle('deleteConfirmation', isOpen)}
-        deleteKey={(popUp?.deleteConfirmation?.data as TRevokeIntegrationPopUp)?.provider || ''}
+        onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
+        deleteKey={(popUp?.deleteConfirmation?.data as TRevokeIntegrationPopUp)?.provider || ""}
         onDeleteApproved={async () => {
           onIntegrationRevoke(
             (popUp.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider,
-            () => handlePopUpClose('deleteConfirmation')
+            () => handlePopUpClose("deleteConfirmation")
           );
         }}
       />

frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx

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

frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 type Props = {
   frameworks: Array<{
@@ -15,12 +15,12 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
   return (
     <>
       <div className="mx-4 mt-12 mb-4 flex 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 grid-flow-dense gap-4"
-        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))' }}
+        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))" }}
       >
         {frameworks.map((framework) => (
           <a
@@ -32,7 +32,7 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
           >
             <div
               className={`flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 font-semibold text-gray-300 duration-200 hover:bg-mineshaft-700 group-hover:text-gray-200 ${
-                framework?.name?.split(' ').length > 1 ? 'px-1 text-sm' : 'px-2 text-xl'
+                framework?.name?.split(" ").length > 1 ? "px-1 text-sm" : "px-2 text-xl"
               } w-full max-w-xs text-center`}
             >
               {framework?.image && (

frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx

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

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -1,6 +1,6 @@
-import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { integrationSlugNameMapping } from 'public/data/frequentConstants';
+import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
 import {
   DeleteActionModal,
@@ -11,9 +11,9 @@ import {
   Select,
   SelectItem,
   Skeleton
-} from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
-import { TIntegration } from '@app/hooks/api/types';
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { TIntegration } from "@app/hooks/api/types";
 
 type Props = {
   environments: Array<{ name: string; slug: string }>;
@@ -29,7 +29,7 @@ export const IntegrationsSection = ({
   onIntegrationDelete
 }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    'deleteConfirmation'
+    "deleteConfirmation"
   ] as const);
 
   return (
@@ -95,15 +95,15 @@ export const IntegrationsSection = ({
                 <div className="ml-2 flex flex-col">
                   <FormLabel label="App" />
                   <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                    {integration.integration === 'hashicorp-vault'
+                    {integration.integration === "hashicorp-vault"
                       ? `${integration.app} - path: ${integration.path}`
                       : integration.app}
                   </div>
                 </div>
-                {(integration.integration === 'vercel' ||
-                  integration.integration === 'netlify' ||
-                  integration.integration === 'railway' ||
-                  integration.integration === 'gitlab') && (
+                {(integration.integration === "vercel" ||
+                  integration.integration === "netlify" ||
+                  integration.integration === "railway" ||
+                  integration.integration === "gitlab") && (
                   <div className="ml-4 flex flex-col">
                     <FormLabel label="Target Environment" />
                     <div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
@@ -115,7 +115,7 @@ export const IntegrationsSection = ({
               <div className="flex cursor-default items-center">
                 <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
                   <IconButton
-                    onClick={() => handlePopUpOpen('deleteConfirmation', integration)}
+                    onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
                     ariaLabel="delete"
                     colorSchema="danger"
                   >
@@ -130,13 +130,13 @@ export const IntegrationsSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteConfirmation.isOpen}
         title={`Are you sure want to remove ${
-          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || ' '
-        } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || ' '}?`}
-        onChange={(isOpen) => handlePopUpToggle('deleteConfirmation', isOpen)}
-        deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ''}
+          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || " "
+        } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
+        deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""}
         onDeleteApproved={async () =>
           onIntegrationDelete(popUp?.deleteConfirmation.data as TIntegration, () =>
-            handlePopUpClose('deleteConfirmation')
+            handlePopUpClose("deleteConfirmation")
           )
         }
       />

frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx

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

frontend/src/views/IntegrationsPage/index.tsx

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