[Feature Branch] React Functional Conversions

.sourcery.yaml

@@ -0,0 +1,45 @@
+ignore:
+    - .git
+    - venv
+    - .venv
+    - .ibutsu-env
+    - env
+    - .env
+    - .tox
+    - frontend/node_modules
+    - vendor
+    - .postgres-data
+    - .redis-data
+    - .ruff_cache
+    - .jwtsecret
+    - .pytest_cache
+    - .mypy_cache
+
+rule_settings:
+  enable: [default]
+  disable: []
+  rule_types:
+    - refactoring
+    - suggestion
+    - comment
+  python_version: '3.9'
+
+rules: []
+
+metrics:
+  quality_threshold: 25.0
+
+github:
+  labels: []
+  ignore_labels:
+    - sourcery-ignore
+  request_review: author
+  sourcery_branch: sourcery/{base_branch}
+
+clone_detection:
+  min_lines: 4
+  min_duplicates: 3
+  identical_clones_only: false
+
+proxy:
+  no_ssl_verify: false

frontend/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+node_modules

frontend/.prettierrc

@@ -0,0 +1,3 @@
+{
+   "singleQuote": true
+}

frontend/bin/write-version-file.cjs

@@ -1,6 +1,9 @@
 #!/usr/bin/env node
 
-const fse = require('fs-extra')
+const fse = require('fs-extra');
 
 let packageData = JSON.parse(fse.readFileSync('package.json'));
-fse.writeFileSync('public/version.json', JSON.stringify({'version': packageData.version}));
+fse.writeFileSync(
+  'public/version.json',
+  JSON.stringify({ version: packageData.version }),
+);

frontend/eslint.config.mjs

@@ -1,103 +1,90 @@
 // eslint.config.mjs
-import cypress from 'eslint-plugin-cypress';
-import react from 'eslint-plugin-react';
-import prettier from 'eslint-plugin-prettier';
+import reactPlugin from 'eslint-plugin-react';
 import unusedImports from 'eslint-plugin-unused-imports';
-import { fileURLToPath } from 'node:url';
 import globals from 'globals';
-import path from 'node:path';
+import babelParser from '@babel/eslint-parser';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import js from '@eslint/js';
-import { FlatCompat } from '@eslint/eslintrc';
-import hooksPlugin from 'eslint-plugin-react-hooks';
-import pkg from '@babel/eslint-parser';
+import pluginCypress from 'eslint-plugin-cypress/flat';
+import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 
-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/*'],
+export default defineConfig([
+  globalIgnores(
+    ['build/**/*', 'node_modules/'],
+    'Ignore build dir and node_modules',
+  ),
+  pluginCypress.configs.recommended,
+  reactHooksPlugin.configs['recommended-latest'],
+  reactPlugin.configs.flat.recommended,
+  reactPlugin.configs.flat['jsx-runtime'],
+  js.configs.recommended,
+  pluginCypress.configs.recommended,
+  eslintPluginJsxA11y.flatConfigs.recommended,
+  {
+    files: ['src/*', 'cypress/*', 'bin/*'],
+    plugins: {
+      'unused-imports': unusedImports, // not flat config compatible
+      reactPlugin,
+      reactHooksPlugin,
+      eslintPluginJsxA11y,
+      pluginCypress,
     },
-    ...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',
-                    ]
-                },
-            },
+    linterOptions: {
+      reportUnusedDisableDirectives: 'error',
+    },
+    languageOptions: {
+      ...reactPlugin.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.cypress,
+        es2020: true,
+      },
+      parser: babelParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
         },
-        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'],
+        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',
+          ],
         },
-        settings: {
-            react:{
-                version: 'detect',
-            }
+      },
+    },
+    rules: {
+      'react/jsx-curly-brace-presence': [
+        'error',
+        {
+          props: 'never',
+          children: 'never',
         },
-    }
-]
+      ],
+      'react/react-in-jsx-scope': 'off',
+      camelcase: 'off',
+      quotes: ['warn', 'single'],
+      'no-duplicate-imports': 'error',
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': ['warn'],
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  eslintPluginPrettierRecommended,
+]);

frontend/jest.polyfills.js → frontend/jest.polyfills.cjs

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

frontend/package.json

@@ -8,30 +8,32 @@
     "@monaco-editor/react": "^4.6.0",
     "@patternfly/patternfly": "^5.2.1",
     "@patternfly/react-charts": "^7.2.2",
+    "@patternfly/react-code-editor": "5.4.18",
     "@patternfly/react-core": "^5.2.3",
     "@patternfly/react-icons": "^5.2.1",
     "@patternfly/react-styles": "^5.2.1",
     "@patternfly/react-table": "^5.2.4",
     "@react-oauth/google": "^0.12.1",
     "@types/react": "^18.0.0",
     "enzyme": "^3.11.0",
+    "eslint-config": "^0.3.0",
     "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.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "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.28.0",
     "react-scripts": "^5.0.1",
     "react-simple-oauth2-login": "^0.5.4",
+    "react-toastify": "^11.0.2",
     "serve": "^12.0.1",
-    "typescript": "^4.9.5",
-    "wolfy87-eventemitter": "^5.2.9"
+    "typescript": "^4.9.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -43,27 +45,33 @@
     "@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-env": "^7.26.9",
     "@babel/preset-flow": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.25.0",
     "@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-config-prettier": "^10.1.2",
     "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "prettier": "^3.4.2"
+    "prettier": "^3.5.3"
   },
   "scripts": {
-    "start": "serve -s build -l tcp://0.0.0.0:8080",
-    "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",
+    "start": "serve -s build -l tcp://0.0.0.0:3000",
+    "build": "./bin/write-version-file.cjs && DISABLE_ESLINT_PLUGIN=true react-scripts build",
+    "test": "./bin/write-version-file.cjs && react-scripts test --transformIgnorePatterns \"node_modules/(?!@patternfly)/\"",
     "eject": "react-scripts eject",
-    "devserver": "./bin/write-version-file.cjs && CI=true react-scripts start",
-    "lint": "eslint"
+    "devserver": "./bin/write-version-file.cjs && CI=true DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "lint": "eslint",
+    "format": "prettier \"src/**/*.{js,html}\" --write",
+    "format-check": "prettier \"src/**/*.{js,html}\" --check"
   },
   "browserslist": {
     "production": [
@@ -79,5 +87,8 @@
   },
   "bin": {
     "write-version-file": "./bin/write-version-file.cjs"
+  },
+  "jest": {
+    "resetMocks": false
   }
 }

frontend/public/settings.js

@@ -2,5 +2,5 @@
 // at container runtime with ENV variables.
 window.settings = {
   serverUrl: 'http://127.0.0.1:8080/api',
-  environment: 'development'
-}
+  environment: 'development',
+};