Node 20, ESLint 9

.github/workflows/tests.yaml

@@ -27,7 +27,7 @@ jobs:
           node-version-file: 'frontend/.nvmrc'
           cache: 'yarn'
           cache-dependency-path: 'frontend/yarn.lock'
-      - run: yarn install --frozen-lockfile
+      - run: yarn install
         working-directory: ./frontend
       - run: yarn lint
         working-directory: ./frontend

.gitignore

@@ -80,6 +80,7 @@ package-lock.json
 
 # Frontend
 frontend/public/version.json
+frontend/cypress/screenshots/*
 
 # Settings
 backend/settings.yaml

frontend/.nvmrc

@@ -1 +1 @@
-v18
+v20

frontend/.yarnclean

@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+#assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md

frontend/cypress.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
       framework: "create-react-app",
       bundler: "webpack",
     },
-    specPattern: "src/**/*.cy.{js,jsx,ts,tsx}",
+    specPattern: "src/**/*.cy.{js,jsx,cjs,mjs,ts,tsx}",
     excludeSpecPattern: "**/node_modules/**",
     viewportHeight: 660,
     viewportWidth: 1000

frontend/docker/Dockerfile.frontend

@@ -1,24 +1,21 @@
-# hadolint global ignore=DL3041,DL4006
+# hadolint global ignore=DL3041,DL4006,SC2046
 # Build the image first
 FROM registry.access.redhat.com/ubi9/ubi-minimal:9.4 AS builder
 
-ARG NODEJS_VERSION=18
 ENV NODE_ENV=production
 
 WORKDIR /app
+COPY . /app
 
 RUN microdnf module disable nodejs -y && \
-    microdnf module enable nodejs:$NODEJS_VERSION -y && \
+    microdnf module enable nodejs:$(cut -d "v" -f 2 < .nvmrc) -y && \
     microdnf install --nodocs -y --disableplugin=subscription-manager \
         nodejs nodejs-nodemon npm findutils tar && \
-    node -v | grep -qe "^v$NODEJS_VERSION\." && \
-    echo "Found VERSION $NODEJS_VERSION" && \
     microdnf clean all && \
+    npm install --global yarn@^1.22.22 && \
     rm -rf /mnt/rootfs/var/cache/* /mnt/rootfs/var/log/dnf* /mnt/rootfs/var/log/yum.*
 
-COPY . /app
-
-RUN npm install --global yarn@^1.22.22 && yarn install && yarn build
+RUN yarn install && yarn build
 
 # Deploy it using nginx
 FROM registry.access.redhat.com/ubi8/ubi-minimal:8.10

frontend/eslint.config.mjs

@@ -0,0 +1,103 @@
+// eslint.config.mjs
+import cypress from 'eslint-plugin-cypress';
+import react from 'eslint-plugin-react';
+import prettier from 'eslint-plugin-prettier';
+import unusedImports from 'eslint-plugin-unused-imports';
+import { fileURLToPath } from 'node:url';
+import globals from 'globals';
+import path from 'node:path';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import pkg from '@babel/eslint-parser';
+
+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 [
+    {
+        files: ['src/*', 'cypress/*'],
+        ignores: ['node_modules/*'],
+    },
+    ...compat.extends(
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:cypress/recommended',
+        'prettier',
+    ),
+    {
+        plugins: {
+            cypress,
+            prettier,
+            react,
+            'unused-imports': unusedImports,
+            'react-hooks': hooksPlugin,
+        },
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.cypress,
+                es202: true,
+            },
+            parser: pkg,
+            parserOptions: {
+                ecmaVersion: 2020,
+                sourceType: 'module',
+                ecmaFeatures: {
+                    jsx: true,
+                },
+                requireConfigFile: false,
+                plugins: [
+                    '@babel/plugin-transform-class-properties',
+                    '@babel/plugin-transform-private-methods',
+                    '@babel/plugin-syntax-jsx',
+                    '@babel/plugin-syntax-flow'
+                ],
+                babelOptions: {
+                    presets: [
+                        '@babel/preset-flow',
+                        '@babel/preset-env',
+                        '@babel/preset-react',
+                    ]
+                },
+            },
+        },
+        rules: {
+            'cypress/no-assigning-return-values': 'error',
+            'cypress/no-unnecessary-waiting': 'error',
+            'cypress/assertion-before-screenshot': 'warn',
+            'cypress/no-force': 'warn',
+            'cypress/no-async-tests': 'error',
+            'cypress/no-async-before': 'error',
+            'cypress/no-pause': 'error',
+            'react/jsx-curly-brace-presence': [
+                'error',
+                {
+                  props: 'never',
+                  children: 'never',
+                },
+              ],
+
+              'arrow-body-style': ['error', 'as-needed'],
+              'react/react-in-jsx-scope': 'off',
+              camelcase: 'off',
+              'spaced-comment': 'error',
+              quotes: ['warn', 'single'],
+              'no-duplicate-imports': 'error',
+              'unused-imports/no-unused-imports': 'error',
+              'unused-imports/no-unused-vars': ['warn'],
+        },
+        settings: {
+            react:{
+                version: 'detect',
+            }
+        },
+    }
+]

frontend/jest.polyfills.js

@@ -0,0 +1,2 @@
+// jest.polyfills.js
+global.TextEncoder = require('util').TextEncoder;

frontend/package.json

@@ -3,16 +3,7 @@
   "version": "2.5.11",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
-    "@babel/helper-call-delegate": "^7.12.13",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-syntax-jsx": "^7.24.7",
-    "@babel/plugin-transform-class-properties": "^7.24.7",
-    "@babel/plugin-transform-private-methods": "^7.24.7",
-    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
-    "@babel/preset-flow": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
     "@greatsumini/react-facebook-login": "^3.3.3",
     "@monaco-editor/react": "^4.6.0",
     "@patternfly/patternfly": "^5.2.1",
@@ -22,77 +13,57 @@
     "@patternfly/react-styles": "^5.2.1",
     "@patternfly/react-table": "^5.2.4",
     "@react-oauth/google": "^0.12.1",
-    "@testing-library/react": "^14.3.1",
-    "cypress": "^10.11.0",
+    "@types/react": "^18.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-cypress": "^2.15.2",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.34.2",
     "fs-extra": "^11.2.0",
+    "globals": "^15.14.0",
     "keycloak-js": "^19.0.3",
     "monaco-editor": "^0.47.0",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-heatmap-grid": "^0.9.0",
     "react-json-tree": "^0.19.0",
     "react-linkify": "^1.0.0-alpha",
     "react-password-strength-bar": "^0.4.1",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.28.0",
     "react-scripts": "^5.0.1",
     "react-simple-oauth2-login": "^0.5.4",
     "serve": "^12.0.1",
     "typescript": "^4.9.5",
     "wolfy87-eventemitter": "^5.2.9"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/helper-call-delegate": "^7.12.13",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-syntax-jsx": "^7.24.7",
+    "@babel/plugin-transform-class-properties": "^7.24.7",
+    "@babel/plugin-transform-private-methods": "^7.24.7",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@babel/preset-flow": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^14.3.1",
+    "cypress": "^10.11.0",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "prettier": "^3.4.2"
   },
   "scripts": {
     "start": "serve -s build -l tcp://0.0.0.0:8080",
-    "build": "./bin/write-version-file.js && react-scripts build",
-    "test": "./bin/write-version-file.js && react-scripts test --transformIgnorePatterns \"node_modules/(?!@patternfly)/\" && cypress run --component",
+    "build": "./bin/write-version-file.cjs && react-scripts build",
+    "test": "./bin/write-version-file.cjs && react-scripts test --transformIgnorePatterns \"node_modules/(?!@patternfly)/\" && cypress run --component",
     "eject": "react-scripts eject",
-    "devserver": "./bin/write-version-file.js && CI=true react-scripts start",
-    "lint": "eslint --ext=js --ext=jsx ./src"
-  },
-  "eslintConfig": {
-    "env": {
-      "browser": true,
-      "node": true,
-      "es2017": true,
-      "jest": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:cypress/recommended",
-      "plugin:react/recommended"
-    ],
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-      "sourceType": "module",
-      "requireConfigFile": false,
-      "babelOptions": {
-        "plugins": [
-          "@babel/plugin-transform-class-properties",
-          "@babel/plugin-transform-private-methods",
-          "@babel/plugin-syntax-jsx"
-        ],
-        "presets": [
-          "@babel/preset-flow"
-        ]
-      }
-    },
-    "plugins": [
-      "react",
-      "import"
-    ],
-    "settings": {
-      "react": {
-        "version": "16.0"
-      }
-    }
+    "devserver": "./bin/write-version-file.cjs && CI=true react-scripts start",
+    "lint": "eslint"
   },
   "browserslist": {
     "production": [
@@ -107,6 +78,6 @@
     ]
   },
   "bin": {
-    "write-version-file": "./bin/write-version-file.js"
+    "write-version-file": "./bin/write-version-file.cjs"
   }
 }