Dependency and node version bump

.github/workflows/tests.yml

@@ -60,10 +60,10 @@ jobs:
         run: poetry install --no-interaction --no-root --no-plugins
 
       # Install node and yarn in order to build the front end during packaging  
-      - name: Set Node.js 20.x
+      - name: Set Node.js 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           cache: 'yarn'
           cache-dependency-path: locust/webui/yarn.lock
       - name: Install Yarn
@@ -246,10 +246,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Set Node.js 20.x
+      - name: Set Node.js 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           cache: 'yarn'
           cache-dependency-path: locust/webui/yarn.lock
       - uses: borales/actions-yarn@v5

Dockerfile

@@ -1,7 +1,7 @@
 # This is a local-use Docker image which illustrates the end-to-end build process for Locust
 
 # Stage 1: Build web front end
-FROM node:20.0.0-alpine AS webui-builder
+FROM node:22.0.0-alpine AS webui-builder
 
 ADD locust/webui locust/webui
 ADD package.json .

locust/webui/eslint.config.mjs

@@ -0,0 +1,83 @@
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import prettier from 'eslint-plugin-prettier';
+import unusedImports from 'eslint-plugin-unused-imports';
+import _import from 'eslint-plugin-import';
+import { fixupPluginRules } from '@eslint/compat';
+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 [
+  ...compat.extends('plugin:@typescript-eslint/recommended'),
+  {
+    plugins: {
+      react,
+      'react-hooks': fixupPluginRules(reactHooks),
+      '@typescript-eslint': typescriptEslint,
+      prettier,
+      'unused-imports': unusedImports,
+      import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    rules: {
+      'react/display-name': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      'no-console': 'error',
+      'react/jsx-sort-props': 2,
+      'react/sort-prop-types': 2,
+      'import/order': [
+        'error',
+        {
+          groups: ['external', 'internal'],
+          'newlines-between': 'always',
+
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+
+          pathGroups: [
+            {
+              pattern: 'react',
+              group: 'external',
+              position: 'before',
+            },
+            {
+              pattern: 'App',
+              group: 'internal',
+            },
+            {
+              pattern: 'Report',
+              group: 'internal',
+            },
+            {
+              pattern:
+                '{api,assets,components,constants,hooks,pages,redux,styles,test,types,utils}/**',
+              group: 'internal',
+            },
+          ],
+
+          distinctGroup: false,
+          pathGroupsExcludedImportTypes: ['internal'],
+        },
+      ],
+    },
+  },
+];

locust/webui/package.json

@@ -22,7 +22,7 @@
     "build:report": "vite build --config vite.report.config.ts",
     "watch:ui": "vite build --watch",
     "watch:report": "vite build --config vite.lib.config.ts --watch",
-    "build": "yarn clean && npm-run-all --parallel build:ui build:report",
+    "build": "yarn clean && yarn build:ui & yarn build:report",
     "clean": "rimraf dist",
     "lint": "eslint './src/**/*.{ts,tsx}'",
     "format": "prettier --write '**/**/*.{ts,tsx}'",
@@ -56,30 +56,34 @@
     "react-markdown": "^9.0.0",
     "react-redux": "^9.1.2",
     "rimraf": "^6.0.1",
-    "vite": "^5.4.8",
+    "vite": "^6.0.1",
     "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-dts": "^4.2.2",
-    "vite-plugin-singlefile": "^2.0.2",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-singlefile": "^2.0.3",
+    "vite-tsconfig-paths": "^5.1.3"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@testing-library/react": "^14.1.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "eslint": "^8.50.0",
-    "eslint-plugin-import": "^2.28.1",
+    "@types/node": "^22.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.1",
+    "@typescript-eslint/parser": "^8.12.1",
+    "eslint": "^9.15.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-unused-imports": "^3.0.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "jsdom": "^25.0.1",
-    "msw": "^2.4.9",
+    "msw": "^2.6.6",
     "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
-    "vitest": "^0.34.6",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.6",
     "vitest-webgl-canvas-mock": "^1.1.0"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=21.1.0"
   }
 }

locust/webui/src/components/SwarmForm/tests/SwarmUserClassPicker.test.tsx

@@ -66,7 +66,9 @@ describe('SwarmUserClassPicker', () => {
     });
 
     Object.entries(mockUsers).forEach(([key, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       expect(getByText(key)).to.be.ok;
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       expect(getByText(value.host)).to.be.ok;
     });
   });