Upgrade lint libs (#8493)

* feat: upgrade prettier

* perf: use moment-locales-webpack-plugin

This plugin doesnt install useless locales files

* perf: lazy load of redoc app

* feat: upgrade some libs

* feat: upgrade eslint

---------

Co-authored-by: Olivier Giorgis <[email protected]>

Author: djangoliv

Diff for: .eslintrc.js

@@ -0,0 +1,75 @@
+import globals from 'globals';
+import babelParser from '@babel/eslint-parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends(
+    'eslint-config-airbnb',
+    'plugin:prettier/recommended',
+    'prettier',
+    'plugin:jest/recommended',
+    'plugin:jest/style',
+  ),
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        page: true,
+        browser: true,
+        jestPuppeteer: true,
+      },
+
+      parser: babelParser,
+    },
+    files: ['**/*.js', '**/*.jsx'],
+    rules: {
+      'class-methods-use-this': 'off',
+      'consistent-return': 'off',
+      'default-case': 'off',
+      'default-param-last': 'off',
+      'import/extensions': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'no-alert': 'off',
+      'no-continue': 'off',
+      'no-param-reassign': 'off',
+      'no-plusplus': 'off',
+      'no-restricted-syntax': 'off',
+      'no-shadow': 'off',
+      'no-underscore-dangle': 'off',
+      'prefer-promise-reject-errors': 'off',
+      'react/destructuring-assignment': 'off',
+      'react/function-component-definition': 'off',
+      'react/jsx-fragments': 'off',
+      'react/jsx-no-constructed-context-values': 'off',
+      'react/jsx-no-script-url': 'off',
+      'react/jsx-no-useless-fragment': 'off',
+      'react/jsx-props-no-spreading': 'off',
+      'react/no-arrow-function-lifecycle': 'off',
+      'react/no-invalid-html-attribute': 'off',
+      'react/no-namespace': 'off',
+      'react/no-unstable-nested-components': 'off',
+      'react/no-unused-class-component-methods': 'off',
+      'react/prefer-exact-props': 'off',
+      'react/prop-types': 'off',
+      'react/sort-comp': [0, {}],
+
+      'import/order': [
+        'error',
+        {
+          'newlines-between': 'always',
+        },
+      ],
+    },
+  },
+];

Diff for: eslint.config.mjs

@@ -11,7 +11,7 @@
     "yarn": "1.22.22"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
@@ -29,6 +29,7 @@
     "d3-scale": "4.0.2",
     "eslint-formatter-codeframe": "7.32.1",
     "fuse.js": "6.0.4",
+    "globals": "15.15.0",
     "history": "4.10.1",
     "js-cookie": "3.0.5",
     "js-yaml": "4.1.0",
@@ -46,7 +47,7 @@
     "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-highlight-words": "0.20.0",
-    "react-hot-keys": "2.6.2",
+    "react-hot-keys": "2.7.3",
     "react-hot-loader": "4.13.1",
     "react-lazylog": "4.5.3",
     "react-linkify": "0.2.2",
@@ -57,13 +58,13 @@
     "react-table-6": "6.11.0",
     "react-tabs": "6.1.0",
     "reactstrap": "8.10.1",
-    "redoc": "2.2.0",
+    "redoc": "2.4.0",
     "redux": "4.2.1",
     "redux-debounce": "1.0.1",
     "redux-mock-store": "1.5.5",
     "redux-thunk": "2.4.2",
     "stream-browserify": "3.0.0",
-    "styled-components": "6.1.14",
+    "styled-components": "6.1.15",
     "taskcluster-client-web": "77.0.0",
     "taskcluster-lib-scopes": "11.0.0",
     "taskcluster-lib-urls": "13.0.1",
@@ -74,13 +75,14 @@
   "devDependencies": {
     "@babel/core": "7.26.10",
     "@babel/eslint-parser": "7.25.9",
+    "@babel/eslint-parser": "7.26.8",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@pollyjs/adapter-fetch": "6.0.6",
     "@pollyjs/adapter-node-http": "6.0.6",
-    "@pollyjs/adapter-puppeteer": "5.1.1",
+    "@pollyjs/adapter-puppeteer": "6.0.6",
     "@pollyjs/core": "6.0.6",
     "@pollyjs/persister-fs": "6.0.6",
     "@testing-library/dom": "10.4.0",
@@ -91,13 +93,13 @@
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "12.0.2",
     "css-loader": "7.1.2",
-    "eslint": "8.21.0",
+    "eslint": "9.20.1",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "9.0.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jest": "27.1.7",
+    "eslint-plugin-jest": "28.11.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "7.37.4",
     "fetch-mock": "9.4.0",
     "html-loader": "5.1.0",
@@ -108,23 +110,24 @@
     "jest-puppeteer": "11.0.0",
     "markdownlint-cli": "0.43.0",
     "mini-css-extract-plugin": "2.9.2",
+    "moment-locales-webpack-plugin": "1.2.0",
     "path": "0.12.7",
-    "prettier": "2.0.5",
-    "puppeteer": "24.1.1",
+    "prettier": "2.2.1",
+    "puppeteer": "24.2.0",
     "setup-polly-jest": "0.11.0",
     "style-loader": "4.0.0",
     "webpack": "5.97.1",
     "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.0",
-    "webpack-merge": "5.8.0"
+    "webpack-merge": "6.0.1"
   },
   "scripts": {
     "build": "node ./node_modules/webpack/bin/webpack.js --mode production",
     "build:dev": "node ./node_modules/webpack/bin/webpack.js --mode development",
     "format": "node ./node_modules/prettier/bin-prettier.js --write \"**/*.{css,html,js,jsx,json,md,yaml,yml}\"",
     "format:check": "node ./node_modules/prettier/bin-prettier.js --check \"**/*.{css,html,js,jsx,json,md,yaml,yml}\"",
-    "lint": "node ./node_modules/eslint/bin/eslint.js --report-unused-disable-directives --max-warnings 0 --format codeframe --ext js,jsx \".*.js\" \"*.js\" ui/ tests/ui/",
-    "lint-with-cache": "node ./node_modules/eslint/bin/eslint.js --cache --report-unused-disable-directives --max-warnings 0 --format codeframe --ext js,jsx \".*.js\" \"*.js\" ui/ tests/ui/",
+    "lint": "node ./node_modules/eslint/bin/eslint.js --report-unused-disable-directives --max-warnings 0 --format codeframe ui/ tests/ui/",
+    "lint-with-cache": "node ./node_modules/eslint/bin/eslint.js --cache --report-unused-disable-directives --max-warnings 0 --format codeframe ui/ tests/ui/",
     "markdownlint": "node ./node_modules/markdownlint-cli/markdownlint.js -c .markdownlint.json -p .markdownlintignore .",
     "prettier": "npx prettier --check .",
     "start": "node ./node_modules/webpack/bin/webpack.js serve --mode development",

Diff for: package.json

@@ -3,7 +3,6 @@ import { Route, Switch } from 'react-router-dom';
 import { hot } from 'react-hot-loader/root';
 import { ConnectedRouter } from 'connected-react-router';
 import { Provider } from 'react-redux';
-import { RedocStandalone } from 'redoc';
 
 import { permaLinkPrefix } from './perfherder/perf-helpers/constants';
 import { configureStore, history } from './job-view/redux/configureStore';
@@ -27,6 +26,8 @@ const JobsViewApp = lazy(() => import('./job-view/App'));
 
 const LogviewerApp = lazy(() => import('./logviewer/App'));
 
+const RedocApp = lazy(() => import('./RedocApp'));
+
 // backwards compatibility for routes like this: treeherder.mozilla.org/perf.html#/alerts?id=26622&hideDwnToInv=0
 const updateOldUrls = () => {
   const { pathname, hash, search } = history.location;
@@ -176,15 +177,7 @@ const App = () => {
                 withFavicon(<PerfherderApp {...props} />, '/perfherder')
               }
             />
-            <Route
-              path="/docs"
-              render={(props) => (
-                <RedocStandalone
-                  specUrl="/api/schema/?format=openapi-json"
-                  {...props}
-                />
-              )}
-            />
+            <Route path="/docs" render={(props) => <RedocApp {...props} />} />
           </Switch>
         </Suspense>
       </ConnectedRouter>

Diff for: ui/App.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RedocStandalone } from 'redoc';
+
+const App = (props) => {
+  return (
+    <RedocStandalone specUrl="/api/schema/?format=openapi-json" {...props} />
+  );
+};
+
+export default App;

Diff for: ui/RedocApp.jsx

@@ -181,7 +181,7 @@ class SecondaryNavBar extends React.PureComponent {
 
       // Re-save the list, in case it has now changed
       this.saveWatchedRepos(watchedRepoNames);
-    } catch (e) {
+    } catch {
       // localStorage is disabled/not supported.
       return [];
     }
@@ -191,7 +191,7 @@ class SecondaryNavBar extends React.PureComponent {
     this.setState({ watchedRepoNames: repos });
     try {
       localStorage.setItem(WATCHED_REPOS_STORAGE_KEY, JSON.stringify(repos));
-    } catch (e) {
+    } catch {
       // localStorage is disabled/not supported.
     }
   }

Diff for: ui/job-view/headerbars/SecondaryNavBar.jsx

@@ -257,7 +257,7 @@ export default class JobModel {
       /* eslint-enable no-await-in-loop */
 
       notify(`Request sent to cancel ${jobTerm} via action.json`, 'success');
-    } catch (e) {
+    } catch {
       notify(`Unable to cancel ${jobTerm}`, 'danger', { sticky: true });
     }
   }

Diff for: ui/models/job.js

@@ -8,6 +8,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { ProvidePlugin } = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
 const commonConfig = {
   target: 'web',
@@ -43,6 +44,7 @@ const commonConfig = {
       vm: require.resolve('vm-browserify'),
       fs: false,
       tls: false,
+      vm: false,
     },
   },
   module: {
@@ -104,6 +106,7 @@ const commonConfig = {
       jQuery: 'jquery',
       'window.jQuery': 'jquery',
     }),
+    new MomentLocalesPlugin(),
   ],
   entry: {
     index: ['./ui/index'],