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

## Description
<!---Describe your changes in detail-->
For developer + codebase life improvements, adding ESLint with prettier,
react + react hooks, and flow plugins.

## Motivation and Context
<!---Why is this change required? What problem does it solve?-->
<!---If it fixes an open issue, please link to the issue here.-->
* Improve the code quality and consistency, improves developer QOL
* Implements feature mentioned in
#21062 (comment)

## Impact
<!---Describe any public API or user-facing feature change or any
performance impact-->
* There will be a large number of line changes once all files are
linted, but no functional impact.
> Note: All lint rules are up for discussion if folks on the project
have strong feelings about tab spacing, semicolons, etc. This mostly
implements the "recommended" rules for react, hooks, prettier
formatting, and flow
* Only impacts dev dependencies
* Adds commands to package.json to lint, lint+fix, format, format+fix

## Follow up
1. Add ESLint + prettier config/packages (this PR)
2. Format all UI files, add eslint to CI build process
3. Convert flow -> typescript, add typescript-eslint, remove flow eslint
plugins

## Test Plan
<!---Please fill in how you tested your change-->
For now this simply adds the dependencies, and implements an
eslint/prettier configuration that works. No files have been linted or
formatted yet. I plan to do this in a follow up to keep this PR
manageable, first draft of linting all files here:
#25726

Test the eslint config by running `yarn run lint` for eslint changes, or
`yarn run format` for just prettier formatting changes

## Contributor checklist

- [x] Please make sure your submission complies with our [contributing
guide](https://github.com/prestodb/presto/blob/master/CONTRIBUTING.md),
in particular [code
style](https://github.com/prestodb/presto/blob/master/CONTRIBUTING.md#code-style)
and [commit
standards](https://github.com/prestodb/presto/blob/master/CONTRIBUTING.md#commit-standards).
- [x] PR description addresses the issue accurately and concisely. If
the change is non-trivial, a GitHub Issue is referenced.
- [ ] Documented new properties (with its default value), SQL syntax,
functions, or other functionality.
- [ ] If release notes are required, they follow the [release notes
guidelines](https://github.com/prestodb/presto/wiki/Release-Notes-Guidelines).
- [ ] Adequate tests were added if applicable.
- [ ] CI passed.

## Release Notes
Please follow [release notes
guidelines](https://github.com/prestodb/presto/wiki/Release-Notes-Guidelines)
and fill in the release notes below.

```
== NO RELEASE NOTE ==
```

Author: johallar

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"
   }
-}
+}