Eslint Config for jsx

frontend/eslint.config.js

@@ -1,26 +1,35 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import reactPlugin from "eslint-plugin-react";
 
 export default [
   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  pluginReactConfig,
+  reactPlugin.configs.flat["jsx-runtime"],
   {
+    files: [
+      "**/*.js",
+      "**/*.cjs",
+      "**/*.mjs",
+      "**/*.jsx",
+      "**/*.ts",
+      "**/*.tsx",
+      "**/*.json",
+    ],
     rules: {
       "no-control-regex": 0,
     },
   },
   {
     ignores: [
-      "core/*",
-      "dist/*",
-      "dist-electron/*",
-      "electron/*",
-      "release/*",
-      "utils/schema/*",
+      "core/",
+      "dist/",
+      "dist-electron/",
+      "electron/",
+      "release/",
+      "utils/schema/",
     ],
   },
 ];

frontend/package.json

@@ -23,6 +23,7 @@
     "preview": "vite preview",
     "pree2e": "vite build --mode=test",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "test": "vitest run",
@@ -81,7 +82,7 @@
     "electron": "^28.1.0",
     "electron-builder": "^24.6.3",
     "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.35.2",
     "express": "^4.18.2",
     "globals": "^15.3.0",
     "immer": "^10.0.3",

frontend/src/atoms/pipelineAtom.js

@@ -106,7 +106,7 @@ export const lineageAtom = atom((get) => {
 
   // Filter out pipelines with empty .record fields
   const validPipelines = Object.entries(workspace?.pipelines).filter(
-    ([_, pipeline]) =>
+    ([, pipeline]) =>
       pipeline.record && Object.keys(pipeline.record).length > 0,
   );
 

frontend/src/client/anvil.js

@@ -63,7 +63,7 @@ export async function terminateExecution(configuration, executionId) {
   return body;
 }
 
-export async function getAllPipelines(configuration, limit, offset) {
+export async function getAllPipelines(configuration) {
   const response = await handleRequest(
     buildUrl(
       getScheme(configuration.anvil.host),

frontend/src/components/ServiceInitializer.jsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useSetAtom } from "jotai";
 import { mixpanelAtom } from "@/atoms/mixpanelAtom";
-import { initializeWorkspaceAtom, pipelineFactory } from "@/atoms/pipelineAtom";
+import { initializeWorkspaceAtom } from "@/atoms/pipelineAtom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ipcLink } from "electron-trpc/renderer";
 import { trpc } from "@/utils/trpc";

frontend/src/components/ZetaneDrawflowEditor.js

@@ -78,7 +78,7 @@ export default class Drawflow {
     this.container.addEventListener("mouseup", this.dragEnd.bind(this));
     this.container.addEventListener("mousemove", this.position.bind(this));
     this.container.addEventListener("mousedown", this.click.bind(this));
-    this.container.addEventListener("mouseleave", (_) => {
+    this.container.addEventListener("mouseleave", () => {
       this.editor_selected = false;
     });
 

frontend/src/components/ui/DeployedPipelineActions.jsx

@@ -1,6 +1,5 @@
-import { useState } from "react";
-import { ComboButton, MenuItem, Modal, CodeSnippet } from "@carbon/react";
-import { Application, TrashCan } from "@carbon/icons-react";
+import { ComboButton, MenuItem, CodeSnippet } from "@carbon/react";
+import { TrashCan } from "@carbon/icons-react";
 import { modalContentAtom } from "@/atoms/modalAtom";
 import { useAtom } from "jotai";
 import ClosableModal from "./modal/ClosableModal";
@@ -16,7 +15,7 @@ export const DeployedPipelineActions = ({
   const generatePostPayload = () => {
     // Generate input structure based on the pipeline graph
     const inputs = {};
-    Object.entries(pipelineData.pipeline).forEach(([nodeId, node]) => {
+    Object.entries(pipelineData.pipeline).forEach(([, node]) => {
       if (node.inputs) {
         Object.entries(node.inputs).forEach(([inputName, input]) => {
           if (input.connections && input.connections.length > 0) {
@@ -75,22 +74,6 @@ print('Pipeline execution result:', result)
     // For now, we'll just log the action
   };
 
-  const items = [
-    {
-      id: "get-payload",
-      text: "Get POST Payload",
-      onClick: generatePostPayload,
-      icon: Application,
-    },
-    {
-      id: "undeploy",
-      text: "Undeploy",
-      onClick: handleUndeploy,
-      icon: TrashCan,
-      isDanger: true,
-    },
-  ];
-
   return (
     <ComboButton size="sm" label="Payload" onClick={generatePostPayload}>
       <MenuItem

frontend/src/components/ui/DrawflowWrapper.jsx

@@ -1,6 +1,6 @@
 import { drawflowEditorAtom } from "@/atoms/drawflowAtom";
 import { blockEditorIdAtom, isBlockEditorOpenAtom } from "@/atoms/editorAtom";
-import { pipelineAtom, workspaceAtom } from "@/atoms/pipelineAtom";
+import { pipelineAtom } from "@/atoms/pipelineAtom";
 import { pipelineConnectionsAtom } from "@/atoms/pipelineConnectionsAtom";
 import Drawflow from "@/components/ZetaneDrawflowEditor";
 import BlockGenerator from "@/components/ui/blockGenerator/BlockGenerator";
@@ -77,7 +77,6 @@ export default function DrawflowWrapper() {
   pipelineRef.current = pipeline;
 
   const copyPipeline = trpc.copyPipeline.useMutation();
-  const getBlockPath = trpc.getBlockPath.useMutation();
 
   const handleDrawflow = useCallback((node) => {
     if (!node) {
@@ -140,7 +139,7 @@ export default function DrawflowWrapper() {
     if (editor) {
       editor.syncConnections(newConnections);
     }
-    setPipelineConnections((draft) => (draft = newConnections));
+    setPipelineConnections(() => newConnections);
 
     const syncData = async () => {
       try {

frontend/src/components/ui/ExecutionCardGrid.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { Grid, Column, Pagination, Tag, Button } from "@carbon/react";
-import { Launch, Code, View, CloudLogging } from "@carbon/icons-react";
+import { useState } from "react";
+import { Grid, Column, Tag, Button } from "@carbon/react";
+import { Launch } from "@carbon/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { fetchExecutionDetails } from "@/client/anvil";
 import { activeConfigurationAtom } from "@/atoms/anvilConfigurationsAtom";
@@ -9,12 +9,7 @@ import { useAtom } from "jotai";
 const ExecutionCard = ({ execution, onSelect }) => {
   const [configuration] = useAtom(activeConfigurationAtom);
 
-  const {
-    data: executionDetails,
-    refetch,
-    isLoading,
-    isError,
-  } = useQuery({
+  const { refetch, isError } = useQuery({
     queryKey: ["execution", execution.id],
     queryFn: () => fetchExecutionDetails(configuration, execution.id),
     enabled: false,
@@ -75,7 +70,7 @@ const ExecutionCard = ({ execution, onSelect }) => {
 };
 
 export const ExecutionCardGrid = ({ executions, selectExecution }) => {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage] = useState(1);
   const itemsPerPage = 36;
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;

frontend/src/components/ui/ExecutionDataGrid.jsx

@@ -15,7 +15,6 @@ import {
   TableExpandRow,
   TableExpandedRow,
   TableExpandHeader,
-  Tag,
 } from "@carbon/react";
 import { ExecutionCardGrid } from "./ExecutionCardGrid";
 import { DeployedPipelineActions } from "./DeployedPipelineActions";
@@ -35,7 +34,7 @@ export const PipelineTableRow = ({ row, getRowProps }) => {
 };
 
 export const ExecutionDataGrid = ({ closeModal }) => {
-  const [workspace, setWorkspace] = useImmerAtom(workspaceAtom);
+  const [, setWorkspace] = useImmerAtom(workspaceAtom);
   const [lineage] = useAtom(lineageAtom);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(15);

frontend/src/components/ui/ExecutionTable.jsx

@@ -11,9 +11,12 @@ import {
 import { PipelineStopButton } from "./PipelineStopButton";
 import { useAtom } from "jotai";
 import { activeConfigurationAtom } from "@/atoms/anvilConfigurationsAtom";
+import { useImmerAtom } from "jotai-immer";
+import { workspaceAtom } from "@/atoms/pipelineAtom";
 
 export const ExecutionTable = ({ executions, closeModal }) => {
   const [configuration] = useAtom(activeConfigurationAtom);
+  const [, setWorkspace] = useImmerAtom(workspaceAtom);
   const selectExecution = (execution) => {
     const key = execution.pipeline + "." + execution.id;
 
@@ -32,7 +35,7 @@ export const ExecutionTable = ({ executions, closeModal }) => {
     { key: "actions", header: "Actions" },
   ];
 
-  const rows = Array.from(executions.entries()).map(([id, execution]) => ({
+  const rows = Array.from(executions.entries()).map(([, execution]) => ({
     id: execution.id,
     created: execution.created,
     status: execution.status,

frontend/src/components/ui/LoadBlockButton.jsx

@@ -42,18 +42,20 @@ export default function LoadBlockButton() {
       blockPath: path,
       pipelinePath: pipeline.path,
     };
-    const res = await saveBlockMutation.mutateAsync(cacheData);
+    await saveBlockMutation.mutateAsync(cacheData);
 
     setPipeline((draft) => {
       draft.data[id] = block;
     });
     return id;
   };
 
-  const loadBlock = async (pipeline) => {
+  const loadBlock = async () => {
     try {
       mixpanelService.trackEvent("Load Block");
-    } catch (err) {}
+    } catch (err) {
+      console.error(err);
+    }
     const files = fileInput.current.files;
     for (let i = 0; i < files.length; i++) {
       const file = files.item(i);
@@ -109,9 +111,7 @@ export default function LoadBlockButton() {
         webkitdirectory=""
         directory=""
         ref={fileInput}
-        onChange={(e) => {
-          loadBlock(pipeline);
-        }}
+        onChange={loadBlock}
         hidden
       />
     </div>

frontend/src/components/ui/LoadPipelineButton.jsx

@@ -19,7 +19,9 @@ export default function LoadPipelineButton() {
   const handleFileChange = async (event) => {
     try {
       mixpanelService.trackEvent("Load Pipeline");
-    } catch (err) {}
+    } catch (err) {
+      console.error(err);
+    }
     const files = event.target.files;
     for (const key in files) {
       const file = files[key];

frontend/src/components/ui/LogsButton.jsx

@@ -7,7 +7,7 @@ import { logsAtom } from "@/atoms/logsAtom";
 
 export default function LogsButton() {
   const [modalContent, setModalContent] = useAtom(modalContentAtom);
-  const [logs, _] = useAtom(logsAtom);
+  const [logs] = useAtom(logsAtom);
 
   const modalPopper = (content) => {
     setModalContent({

frontend/src/components/ui/LogsFetcher.jsx

@@ -1,10 +1,9 @@
-import { socketUrlAtom, pipelineAtom } from "@/atoms/pipelineAtom";
+import { pipelineAtom } from "@/atoms/pipelineAtom";
 import { useSyncExecutionResults } from "@/hooks/useExecutionResults";
-import { useStableWebSocket } from "@/hooks/useStableWebsocket";
 import { enableMapSet } from "immer";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { useImmerAtom } from "jotai-immer";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 import { logsAtom, parseLogLine } from "@/atoms/logsAtom";
 import { useQuery } from "@tanstack/react-query";
 import { activeConfigurationAtom } from "@/atoms/anvilConfigurationsAtom";
@@ -44,11 +43,9 @@ async function fetchLogData(logPath, configuration) {
 }
 
 export default function LogsFetcher() {
-  const [socketUrl] = useAtom(socketUrlAtom);
   const [pipeline, setPipeline] = useImmerAtom(pipelineAtom);
-  //const { lastMessage, readyState, wsError } = useStableWebSocket(socketUrl);
   const syncResults = useSyncExecutionResults();
-  const [logs, setLogs] = useImmerAtom(logsAtom);
+  const [, setLogs] = useImmerAtom(logsAtom);
   const configuration = useAtomValue(activeConfigurationAtom);
 
   const updateLogs = useCallback((newEntries) => {

frontend/src/components/ui/MixpanelService.js

@@ -57,7 +57,9 @@ class MixpanelService {
         distinct_id: this.distinctId,
         is_dev: this.isDev,
       });
-    } catch (err) {}
+    } catch (err) {
+      console.error(err);
+    }
   }
 }
 

frontend/src/components/ui/Navbar.jsx

@@ -29,7 +29,7 @@ import { PipelineStopButton } from "./PipelineStopButton";
 export default function Navbar({ children }) {
   const [darkMode, setDarkMode] = useAtom(darkModeAtom);
   const [modalContent, setModalContent] = useAtom(modalContentAtom);
-  const [pipeline, setPipeline] = useImmerAtom(pipelineAtom);
+  const [pipeline] = useImmerAtom(pipelineAtom);
   const [configuration] = useAtom(activeConfigurationAtom);
 
   const modalPopper = (content) => {

frontend/src/components/ui/NewButton.jsx

@@ -1,19 +1,15 @@
-import { drawflowEditorAtom } from "@/atoms/drawflowAtom";
 import {
-  pipelineAtom,
   workspaceAtom,
   pipelineFactory,
   pipelineKey,
 } from "@/atoms/pipelineAtom";
 import { HeaderMenuItem } from "@carbon/react";
-import { useAtom } from "jotai";
 import { useImmerAtom } from "jotai-immer";
 
 export default function NewButton() {
-  const [editor] = useAtom(drawflowEditorAtom);
-  const [workspace, setWorkspace] = useImmerAtom(workspaceAtom);
+  const [, setWorkspace] = useImmerAtom(workspaceAtom);
 
-  const handleClick = async (editor, pipeline) => {
+  const handleClick = async () => {
     const newPipeline = pipelineFactory(await window.cache.local());
     const key = pipelineKey(newPipeline.id, null);
     setWorkspace((draft) => {
@@ -25,7 +21,7 @@ export default function NewButton() {
 
   return (
     <div>
-      <HeaderMenuItem onClick={() => handleClick(editor)}>New</HeaderMenuItem>
+      <HeaderMenuItem onClick={handleClick}>New</HeaderMenuItem>
     </div>
   );
 }