Upgrade Eslint to v9

.pre-commit-config.yaml

@@ -4,7 +4,7 @@ repos:
     hooks:
       - id: shellcheck
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.2.1
+    rev: v2.5.0
     hooks:
       - id: prettier
   - repo: https://github.com/igorshubovych/markdownlint-cli

eslint.config.mjs

@@ -0,0 +1,76 @@
+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 [
+  {
+    ignores: ['ui/glean/generated/*.js'],
+  },
+  ...compat.extends(
+    'plugin:prettier/recommended',
+    'prettier',
+    'plugin:jest/recommended',
+    'plugin:jest/style',
+  ),
+  {
+    files: ['**/*.js', '**.*.jsx'],
+    languageOptions: {
+      globals: {
+        page: true,
+        browser: true,
+        jestPuppeteer: true,
+      },
+      parser: babelParser,
+    },
+
+    settings: {
+      react: {
+        version: '18.3',
+      },
+    },
+
+    ignores: ['ui/glean/generated/*.js'],
+
+    rules: {
+      'class-methods-use-this': 'off',
+      'consistent-return': 'off',
+      'default-case': 'off',
+      'default-param-last': '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, {}],
+    },
+  },
+];

package.json

@@ -75,7 +75,7 @@
     "victory": "36.6.12"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.22.15",
+    "@babel/eslint-parser": "7.24.7",
     "@babel/plugin-proposal-class-properties": "7.17.12",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.17.12",
@@ -91,14 +91,12 @@
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "12.0.2",
     "css-loader": "7.1.2",
-    "eslint": "8.21.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "27.1.7",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.16.0",
+    "eslint": "9.5.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-jest": "28.6.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.34.3",
     "fetch-mock": "9.4.0",
     "html-loader": "4.2.0",
     "html-webpack-plugin": "5.5.4",
@@ -108,7 +106,7 @@
     "markdownlint-cli": "0.32.2",
     "mini-css-extract-plugin": "2.6.1",
     "path": "0.12.7",
-    "prettier": "2.0.5",
+    "prettier": "3.0.0",
     "puppeteer": "21.10.0",
     "setup-polly-jest": "0.9.1",
     "style-loader": "3.3.4",
@@ -123,8 +121,8 @@
     "build:glean": "node ./node_modules/@mozilla/glean/dist/cli/cli.js translate ui/glean/metrics.yaml ui/glean/pings.yaml -f javascript -o ui/glean/generated",
     "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/",
     "lint:glean": "node ./node_modules/@mozilla/glean/dist/cli/cli.js glinter ui/glean/metrics.yaml ui/glean/pings.yaml",
     "markdownlint": "node ./node_modules/markdownlint-cli/markdownlint.js -c .markdownlint.json -p .markdownlintignore .",
     "prettier": "npx prettier --check .",

tests/ui/job-view/Filtering_test.jsx

@@ -468,12 +468,8 @@ describe('Filtering', () => {
     });
 
     test('Filters | Reset should get back to original set of jobs', async () => {
-      const {
-        getAllByText,
-        findAllByText,
-        findByText,
-        queryAllByText,
-      } = render(testApp());
+      const { getAllByText, findAllByText, findByText, queryAllByText } =
+        render(testApp());
       const symbolToRemove = 'yaml';
 
       await findAllByText('B');

tests/ui/job-view/Push_test.jsx

@@ -71,8 +71,7 @@ describe('Transformations', () => {
         expected: 'devtools/client/framework/browser-toolbox/test/browser.ini',
       },
       {
-        path:
-          'devtools/client/framework/browser-toolbox/test/browser_browser_toolbox.js',
+        path: 'devtools/client/framework/browser-toolbox/test/browser_browser_toolbox.js',
         expected:
           'devtools/client/framework/browser-toolbox/test/browser_browser_toolbox.js',
       },

tests/ui/job-view/details/PinBoard_test.jsx

@@ -262,12 +262,8 @@ describe('DetailsPanel', () => {
   });
 
   test('classify and unclassify all jobs', async () => {
-    const {
-      getByPlaceholderText,
-      getByText,
-      getByTitle,
-      queryAllByTitle,
-    } = render(testDetailsPanel());
+    const { getByPlaceholderText, getByText, getByTitle, queryAllByTitle } =
+      render(testDetailsPanel());
 
     store.dispatch(pinJobs(jobList.data));
     store.dispatch(setSelectedJob(jobList.data[1], true));

tests/ui/perfherder/alerts-view/alerts_test.jsx

@@ -467,11 +467,8 @@ test("'Take' button hides when clicking on 'Unassigned' badge", async () => {
   alertSummary.assignee_email = '[email protected]';
   alertSummary.assignee_username = 'mozilla-ldap/[email protected]';
 
-  const {
-    getByText,
-    queryByText,
-    queryByPlaceholderText,
-  } = alertsViewControls();
+  const { getByText, queryByText, queryByPlaceholderText } =
+    alertsViewControls();
 
   const unassignedBadge = await waitFor(() => getByText('Unassigned'));
 
@@ -659,11 +656,8 @@ const assertAlertsAreInOrder = async (alertsInOrder, alertTableRows) => {
 };
 
 test(`table data can be sorted in descending order by 'Test'`, async () => {
-  const {
-    getAllByLabelText,
-    getByTestId,
-    getAllByTitle,
-  } = alertsViewControls();
+  const { getAllByLabelText, getByTestId, getAllByTitle } =
+    alertsViewControls();
 
   let alertTableRows = await waitFor(() =>
     getAllByLabelText('Alert table row'),
@@ -698,11 +692,8 @@ test(`table data can be sorted in descending order by 'Test'`, async () => {
 });
 
 test(`table data can be sorted in ascending order by 'Platform'`, async () => {
-  const {
-    getByTestId,
-    getAllByLabelText,
-    getAllByTitle,
-  } = alertsViewControls();
+  const { getByTestId, getAllByLabelText, getAllByTitle } =
+    alertsViewControls();
 
   let alertTableRows = await waitFor(() =>
     getAllByLabelText('Alert table row'),
@@ -744,11 +735,8 @@ test(`table data cannot be sorted by 'Tags & Options'`, async () => {
 });
 
 test(`table data can be sorted in ascending order by 'Confidence'`, async () => {
-  const {
-    getAllByLabelText,
-    getByTestId,
-    getAllByTitle,
-  } = alertsViewControls();
+  const { getAllByLabelText, getByTestId, getAllByTitle } =
+    alertsViewControls();
 
   let alertTableRows = await waitFor(() =>
     getAllByLabelText('Alert table row'),
@@ -780,11 +768,8 @@ test(`table data can be sorted in ascending order by 'Confidence'`, async () =>
 });
 
 test(`table data can be sorted in ascending order by 'Magnitude of Change'`, async () => {
-  const {
-    getAllByLabelText,
-    getByTestId,
-    getAllByTitle,
-  } = alertsViewControls();
+  const { getAllByLabelText, getByTestId, getAllByTitle } =
+    alertsViewControls();
 
   let alertTableRows = await waitFor(() =>
     getAllByLabelText('Alert table row'),
@@ -817,11 +802,8 @@ test(`table data can be sorted in ascending order by 'Magnitude of Change'`, asy
 });
 
 test('Data can be sorted only by one column', async () => {
-  const {
-    getAllByLabelText,
-    getByTestId,
-    getAllByTitle,
-  } = alertsViewControls();
+  const { getAllByLabelText, getByTestId, getAllByTitle } =
+    alertsViewControls();
 
   let alertTableRows = await waitFor(() =>
     getAllByLabelText('Alert table row'),

tests/ui/perfherder/compare-view/compare_table_test.jsx

@@ -343,9 +343,8 @@ test('filters that are not enabled are removed from URL params', async () => {
 });
 
 test('page parameter updates with value 2 when clicking on the second page', async () => {
-  const { getByText, findAllByLabelText } = compareTableControls(
-    compareResults,
-  );
+  const { getByText, findAllByLabelText } =
+    compareTableControls(compareResults);
 
   const result1 = await waitFor(() =>
     getByText(compareTablesControlsResults[0].name),
@@ -374,11 +373,8 @@ test('page parameter updates with value 2 when clicking on the second page', asy
 });
 
 test('text input filter results should differ when filter button(s) are selected', async () => {
-  const {
-    getByText,
-    getByPlaceholderText,
-    queryByText,
-  } = compareTableControls();
+  const { getByText, getByPlaceholderText, queryByText } =
+    compareTableControls();
 
   const result1 = await waitFor(() => getByText(result[0].name));
   const result2 = await waitFor(() => getByText(result[1].name));

tests/ui/perfherder/graphs-view/graphs_view_test.jsx

@@ -278,12 +278,8 @@ test('Using select query param displays tooltip for correct datapoint with repli
 });
 
 test('InputFilter from TestDataModal can filter by application name', async () => {
-  const {
-    getByText,
-    getByTestId,
-    getByPlaceholderText,
-    getByTitle,
-  } = graphsViewControls();
+  const { getByText, getByTestId, getByPlaceholderText, getByTitle } =
+    graphsViewControls();
 
   const { name, application, projectName, platform } = seriesData[0];
   const fullTestName = projectName.concat(
@@ -313,12 +309,8 @@ test('InputFilter from TestDataModal can filter by application name', async () =
 
 test('Changing the platform dropdown while filtered by text in the Test Data Modal displays expected tests', async () => {
   mockShowModal.mockClear();
-  const {
-    getByText,
-    getByPlaceholderText,
-    getByTitle,
-    getByTestId,
-  } = graphsViewControls();
+  const { getByText, getByPlaceholderText, getByTitle, getByTestId } =
+    graphsViewControls();
 
   fireEvent.click(getByText('Add test data'));