console/frontend: update eslint

Also fix some of the reported problems, but delegate the
"no-explicit-any" to later.

console/frontend/.eslintrc.cjs

@@ -1,22 +0,0 @@
-// SPDX-FileCopyrightText: 2022 Free Mobile
-// SPDX-License-Identifier: AGPL-3.0-only
-
-module.exports = {
-  env: {
-    node: true,
-    "vue/setup-compiler-macros": true,
-  },
-  parserOptions: {
-    ecmaVersion: 2021,
-  },
-  extends: [
-    "plugin:vue/vue3-recommended",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript",
-    "@vue/eslint-config-prettier",
-  ],
-  rules: {
-    "vue/no-unused-vars": "error",
-    "vue/no-v-html": "off",
-  },
-};

console/frontend/eslint.config.mjs

@@ -0,0 +1,16 @@
+import pluginJs from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
+import vueTypescriptEslintConfig from "@vue/eslint-config-typescript";
+import vuePrettierEslintConfig from "@vue/eslint-config-prettier";
+
+export default [
+  {
+    languageOptions: {
+      ecmaVersion: 2021,
+    },
+  },
+  pluginJs.configs.recommended,
+  ...pluginVue.configs["flat/recommended"],
+  ...vueTypescriptEslintConfig(),
+  vuePrettierEslintConfig,
+];

console/frontend/package.json

@@ -38,6 +38,8 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@headlessui/tailwindcss": "^0.2.0",
     "@tailwindcss/typography": "^0.5.2",
     "@tsconfig/node18": "^18.2.0",
@@ -46,15 +48,15 @@
     "@types/lz-string": "^1.3.34",
     "@types/node": "^22.0.2",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitest/coverage-v8": "^2.0.5",
     "@volar/vue-language-server": "^1.0.9",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/eslint-config-prettier": "^10.0.0",
+    "@vue/eslint-config-typescript": "^14.0.0",
     "@vue/tsconfig": "^0.6.0",
     "autoprefixer": "^10.4.7",
-    "eslint": "^8.57.0",
+    "eslint": "^9.10.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.2.0",
     "license-compliance": "^3.0.0",

console/frontend/src/components/InputListBox.vue

@@ -111,9 +111,11 @@ import InputBase from "@/components/InputBase.vue";
 
 const props = withDefaults(
   defineProps<{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     modelValue: any; // vue is not smart enough to use any | any[]
     multiple?: boolean;
     filter?: string | null; // should be keyof items
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     items: Array<{ id: number; [n: string]: any }>;
     error?: string;
   }>(),
@@ -157,7 +159,6 @@ const filteredItems = computed(() => {
   );
 });
 const otherAttrs = computed(() => {
-  // eslint-disable-next-line no-unused-vars
   const { class: _, ...others } = attrs;
   return others;
 });

console/frontend/src/views/DocumentationPage.vue

@@ -63,10 +63,12 @@
           <strong>Unable to fetch documentation page!</strong>
           {{ errorMessage }}
         </InfoBox>
+        <!-- eslint-disable vue/no-v-html -->
         <div
           class="prose-img:center prose prose-sm mx-auto dark:prose-invert md:prose-base prose-h1:border-b-2 prose-pre:whitespace-pre-wrap prose-pre:break-all prose-pre:rounded dark:prose-h1:border-gray-700"
           v-html="markdown"
         ></div>
+        <!-- eslint-enable -->
       </div>
     </div>
   </div>

console/frontend/src/views/VisualizePage.vue

@@ -128,11 +128,13 @@ const encodedState = computed(() => encodeState(state.value));
 const fetchedData = ref<
   GraphLineHandlerResult | GraphSankeyHandlerResult | null
 >(null);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const orderedJSONPayload = <T extends Record<string, any>>(input: T): T => {
   return Object.keys(input)
     .sort()
     .reduce(
       (o, k) => ((o[k] = input[k]), o),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       {} as { [key: string]: any },
     ) as T;
 };

console/frontend/src/views/VisualizePage/DataGraphLine.vue

@@ -172,7 +172,7 @@ const graph = computed((): ECOption => {
         // We will use a custom formatter, notably to handle bidirectional tooltips.
         if (!Array.isArray(params) || params.length === 0) return "";
 
-        let table: {
+        const table: {
           key: string;
           seriesName: string;
           marker: (typeof params)[0]["marker"];
@@ -332,20 +332,18 @@ const graph = computed((): ECOption => {
         .map((row, idx) => (row.some((name) => name === "Other") ? idx : -1))
         .filter((idx) => idx >= 0),
       somethingY = (fn: (...n: number[]) => number) =>
-        fn.apply(
-          null,
-          dataset.source.map((row) => {
+        fn(
+          ...dataset.source.map((row) => {
             const [, ...cdr] = row;
-            return fn.apply(
-              null,
-              cdr.filter((_, idx) => !otherIndexes.includes(idx + 1)),
+            return fn(
+              ...cdr.filter((_, idx) => !otherIndexes.includes(idx + 1)),
             );
           }),
         ),
       maxY = somethingY(Math.max),
       minY = somethingY(Math.min);
-    let rowNumber = Math.ceil(Math.sqrt(uniqRows.length)),
-      colNumber = rowNumber;
+    let rowNumber = Math.ceil(Math.sqrt(uniqRows.length));
+    const colNumber = rowNumber;
     if ((rowNumber - 1) * colNumber >= uniqRows.length) {
       rowNumber--;
     }
@@ -391,7 +389,7 @@ const graph = computed((): ECOption => {
       dataset,
       series: data.rows
         .map((row, idx) => {
-          let serie: LineSeriesOption = {
+          const serie: LineSeriesOption = {
             type: "line",
             symbol: "none",
             xAxisIndex: uniqRowIndex(row),