feat(ui): Add ESLint with plugins for react/hooks, prettier, flow

presto-ui/src/.prettierignore

@@ -0,0 +1,9 @@
+*.css
+*.map
+*.lock
+yarn.lock
+package-lock.json
+node_modules/
+target/
+static/
+

presto-ui/src/.prettierrc.json

@@ -0,0 +1,18 @@
+{
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "printWidth": 120,
+    "overrides": [
+        {
+            "files": [
+                "*.js",
+                "*.jsx"
+            ],
+            "options": {
+                "parser": "flow"
+            }
+        }
+    ]
+}

presto-ui/src/d3utils.js

@@ -18,14 +18,14 @@ import * as d3 from "d3";
 // DagreD3 Graph-related functions
 // ===============================
 
-export function initializeGraph(): any
+export function initializeGraph()
 {
     return new dagreD3.graphlib.Graph({compound: true})
         .setGraph({rankdir: 'BT'})
         .setDefaultEdgeLabel(function () { return {}; });
 }
 
-export function initializeSvg(selector: any): any
+export function initializeSvg(selector)
 {
     const svg = d3.select(selector);
     svg.append("g");

presto-ui/src/eslint.config.mjs

@@ -0,0 +1,65 @@
+import ftFlow from "eslint-plugin-ft-flow";
+import js from "@eslint/js";
+import hermes from "hermes-eslint";
+import globals from "globals";
+import prettierEslint from "eslint-plugin-prettier/recommended";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+
+export default [
+  js.configs.recommended,
+  prettierEslint,
+  reactHooks.configs["recommended-latest"],
+  {
+    ignores: [
+      "**/vendor/**",
+      "**/node_modules/**",
+      "**/sql-parser/**",
+      "webpack.config.js",
+    ],
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.jquery,
+      },
+    },
+  },
+  // Flow
+  {
+    languageOptions: {
+      parser: hermes,
+    },
+    plugins: {
+      "ft-flow": ftFlow,
+    },
+    settings: {
+      flowtype: {
+        onlyFilesWithFlowAnnotation: true,
+      },
+    },
+    rules: {
+      // Disable flow rules, but keep the plugin so files are parseable by eslint
+      "flowtype/*": "off"
+    },
+  },
+  // React
+  {
+    files: ["**/*.jsx"],
+    plugins: {
+      react,
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ["react/prop-types"]: "warn",
+      ["react/no-deprecated"]: "warn",
+      ["no-prototype-builtins"]: "warn",
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+];

presto-ui/src/package.json

@@ -13,9 +13,18 @@
     "@babel/preset-react": "^7.24.1",
     "babel-loader": "9.1.3",
     "css-loader": "^7.1.1",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "flow-bin": "^0.236.0",
+    "globals": "^16.3.0",
+    "hermes-eslint": "^0.31.0",
     "html-inline-script-webpack-plugin": "^3.2.1",
     "html-webpack-plugin": "^5.6.0",
+    "prettier": "^3.6.2",
     "style-loader": "^4.0.0",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
@@ -44,9 +53,13 @@
     "build:spa": "webpack --config webpack.config.js --env production --env config=spa",
     "serve:spa": "webpack serve --config webpack.config.js --env config=spa",
     "watch:spa": "webpack --config webpack.config.js --env config=spa --watch",
-    "analyze": "webpack --env=production --config webpack.config.js --profile --json > stats.json && mv stats.json ../target/webapp/ && npx webpack-bundle-analyzer ../target/webapp/stats.json"
+    "analyze": "webpack --env=production --config webpack.config.js --profile --json > stats.json && mv stats.json ../target/webapp/ && npx webpack-bundle-analyzer ../target/webapp/stats.json",
+    "lint": "eslint . --ext .js,.jsx,.json,.html",
+    "lint:fix": "eslint . --ext .js,.jsx,.json,.html --fix",
+    "format": "prettier \"**/*.{js,jsx,json,html}\"",
+    "format:fix": "prettier --write \"**/*.{js,jsx,json,html}\""
   },
   "resolutions": {
     "d3-color": "3.1.0"
   }
-}
+}