upgrade eslint packages (#2054)

eslint.config.mjs

@@ -0,0 +1,101 @@
+
+import jest from "eslint-plugin-jest";
+import react from "eslint-plugin-react";
+import prettier from "eslint-plugin-prettier";
+import globals from "globals";
+import babelParser from "@babel/eslint-parser";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-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: [
+            "static/js/publisher-pages/pages/Releases",
+            "static/js/publisher-pages/pages/Metrics/metrics",
+            "static/js/public/snap-details/publicise.ts",
+            "static/js/modules",
+            "static/js/dist",
+            "node_modules/*",
+        ],
+    },
+    ...compat.extends(
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended",
+    ),
+    {
+        plugins: {
+            jest,
+            react,
+            prettier,
+        },
+        languageOptions: {
+            globals: Object.fromEntries(
+                Object.entries({
+                    ...globals.browser,
+                    ...globals.node,
+                    ...jest.environments.globals.globals,
+                }).map(([key, value]) => [key.trim(), value])
+            ),
+            parser: babelParser,
+            ecmaVersion: 2020,
+            sourceType: "module",
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+                requireConfigFile: false,
+            },
+        },
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+        rules: {
+            "linebreak-style": ["error", "unix"],
+            semi: ["error", "always"],
+            "object-curly-spacing": ["error", "always"],
+            "prettier/prettier": "error",
+            "react/react-in-jsx-scope": "off",
+            "react/no-unescaped-entities": "off",
+            "react/display-name": "off",
+        },
+    },
+    {
+        files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
+        plugins: {
+            "@typescript-eslint": typescriptEslint,
+        },
+        languageOptions: {
+            parser: tsParser,
+             ecmaVersion: 2020, 
+        },
+        rules: {
+            ...compat.extends("plugin:@typescript-eslint/recommended").reduce(
+                (rules, config) => ({ ...rules, ...config.rules }),
+                {}
+            ),
+            "@typescript-eslint/no-unused-expressions": ["error", { allowTernary: true }],
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                     "argsIgnorePattern": "^_", // Ignore variables starting with an underscore
+                    "caughtErrorsIgnorePattern": "^_" // Ignore `catch` block errors starting with an underscore
+                }
+            ]
+        },
+    },
+];

package.json

@@ -11,7 +11,7 @@
     "build-js": "webpack",
     "format-python": "black --line-length 79 webapp",
     "lint-python": "flake8 --extend-ignore=E203 webapp tests && black --check --line-length 79 webapp tests",
-    "lint-js": "eslint --ext=.jsx,.js,.tsx,.ts  static/js/src/",
+    "lint-js": "eslint static/js/src",
     "lint-scss": "stylelint static/**/*.scss",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "start": "yarn run build && concurrently --raw 'yarn run watch-scss' 'yarn run watch-js' 'yarn run serve'",
@@ -76,17 +76,17 @@
     "babel-jest": "29.7.0",
     "babel-plugin-prismjs": "2.1.0",
     "concurrently": "8.2.2",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jest": "27.9.0",
+    "eslint-plugin-jest": "28.10.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "sass-loader": "16.0.4",
     "stylelint": "16.12.0",
-    "stylelint-config-standard-scss": "13.1.0",
+    "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "undici": "6.21.0"
   }

requirements.txt

@@ -16,6 +16,6 @@ ruamel.yaml.clib==0.2.12
 ruamel.yaml==0.18.9
 PyGithub==2.5.0
 black==24.10.0
-flake8==6.1.0
+flake8==7.1.1
 Flask-Caching==2.3.0
 responses==0.25.3

static/js/src/base/tooltip-icon-modal.js

@@ -14,7 +14,7 @@ export function toggleModal(modal) {
 
 // Add click handler for clicks on elements with aria-controls
 document.addEventListener("click", function (event) {
-  var targetControls = event.target.getAttribute("aria-controls");
+  const targetControls = event.target.getAttribute("aria-controls");
   if (targetControls) {
     toggleModal(document.getElementById(targetControls));
   }

static/js/src/libs/debounce.js

@@ -7,9 +7,8 @@
 export default function debounce(func, wait, immediate) {
   let timeout;
 
-  const debounced = function () {
-    const args = arguments;
-    let later = () => {
+  const debounced = function (...args) {
+    const later = () => {
       timeout = null;
       if (!immediate) func.apply(this, args);
     };

static/js/src/libs/notification-close.js

@@ -5,8 +5,8 @@ export default function initCloseButton() {
 */
   function setupCloseButton(closeButton) {
     closeButton.addEventListener("click", function (event) {
-      var target = event.target.getAttribute("aria-controls");
-      var notification = document.getElementById(target);
+      const target = event.target.getAttribute("aria-controls");
+      const notification = document.getElementById(target);
 
       if (notification) {
         notification.classList.add("u-hide");
@@ -15,11 +15,11 @@ export default function initCloseButton() {
   }
 
   // Set up all notification close buttons.
-  var closeButtons = document.querySelectorAll(
+  const closeButtons = document.querySelectorAll(
     ".p-notification [aria-controls]"
   );
 
-  for (var i = 0, l = closeButtons.length; i < l; i++) {
+  for (let i = 0, l = closeButtons.length; i < l; i++) {
     setupCloseButton(closeButtons[i]);
   }
 }

static/js/src/public/docs/docs-side-navigation.js

@@ -1,10 +1,10 @@
 function initSideNav() {
-  var sideNav = document.getElementById("drawer");
-  var path = window.location.pathname;
+  const sideNav = document.getElementById("drawer");
+  const path = window.location.pathname;
   if (!sideNav) {
     return;
   }
-  var active = sideNav.querySelector(`a[href="${path}"]`);
+  const active = sideNav.querySelector(`a[href="${path}"]`);
 
   if (active) {
     active.setAttribute("aria-current", "page");
@@ -32,14 +32,14 @@ function initSideNav() {
     @param {HTMLElement} sideNavigation The side navigation element.
   */
   function setupSideNavigation(sideNavigation) {
-    var toggles = [].slice.call(
+    const toggles = [].slice.call(
       sideNavigation.querySelectorAll(".js-drawer-toggle")
     );
 
     toggles.forEach(function (toggle) {
       toggle.addEventListener("click", function (event) {
         event.preventDefault();
-        var sideNav = document.getElementById(
+        const sideNav = document.getElementById(
           toggle.getAttribute("aria-controls")
         );
 
@@ -53,12 +53,12 @@ function initSideNav() {
   setupSideNavigation(sideNav);
 
   // scroll active side navigation item into view (without scrolling whole page)
-  var currentItem = sideNav.querySelector('[aria-current="page"]');
+  const currentItem = sideNav.querySelector('[aria-current="page"]');
 
   if (sideNav && currentItem) {
     // calculate scroll by comparing top of side nav and top of active item
-    var currentItemOffset = currentItem.getBoundingClientRect().top;
-    var offset = currentItemOffset - sideNav.getBoundingClientRect().top;
+    const currentItemOffset = currentItem.getBoundingClientRect().top;
+    const offset = currentItemOffset - sideNav.getBoundingClientRect().top;
 
     // only scroll if active link is off screen or close to bottom of the window
     setTimeout(function () {