React 18 & Patternfly 5 Upgrades (#494)

- Upgrade Patternfly from v4 to v5 - Upgrade React from 17 to 18 - Upgrade react router from v5 to v6 - Upgrade packages & replace some unrelevant - Fix stylings - Make linter happy - Make tests work - Format code for better visibility - Create elementWrapper helper component to make router v6 work - Fix some warnings - Some bugfixes to already existing issues - Minor backend issue fix - Make filtering work for ibutsu projects on backend side - Remove unused components
ibutsu · Jun 10, 2024 · 367f293 · 367f293
1 parent be116c3
commit 367f293
Show file tree

Hide file tree

Showing 63 changed files with 2,810 additions and 1,299 deletions.
diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
@@ -52,7 +52,7 @@ jobs:
         run: yarn test
 
   build-backend:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     needs: test-backend
     strategy:
       matrix:
@@ -68,7 +68,7 @@ jobs:
             ./backend/docker/Dockerfile.${{ matrix.app }}
 
   build-frontend:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     needs: test-frontend
     steps:
       - uses: actions/checkout@v2
@@ -79,3 +79,5 @@ jobs:
           image: ibutsu-frontend
           dockerfiles: |
             ./frontend/docker/Dockerfile.frontend
+          extra-args: |
+            --ulimit nofile=8192:8192
diff --git a/.gitignore b/.gitignore
@@ -65,10 +65,12 @@ target/
 
 # Editors
 .vscode
+.idea/
 
 # NodeJS stuff
 node_modules
 package-lock.json
+yarn.lock
 
 # Virtual environment
 .ibutsu-env

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -35,8 +35,8 @@ repos:
     - eslint-plugin-react
     - eslint-plugin-import
     - "@babel/eslint-parser"
-    - "@babel/plugin-proposal-class-properties"
-    - "@babel/plugin-proposal-private-methods"
+    - "@babel/plugin-transform-class-properties"
+    - "@babel/plugin-transform-private-methods"
     - "@babel/plugin-syntax-jsx"
     - "@babel/preset-flow"
     - "@babel/core"

diff --git a/backend/ibutsu_server/controllers/login_controller.py b/backend/ibutsu_server/controllers/login_controller.py
@@ -214,7 +214,7 @@ def register(email=None, password=None):
     user = User(
         email=details["email"], password=details["password"], activation_code=activation_code
     )
-    user_exists = User.query.filter_by(email=user.email)
+    user_exists = User.query.filter_by(email=user.email).first()
     if user_exists:
         return f"The user with email {user.email} already exists", 400
     session.add(user)

diff --git a/backend/ibutsu_server/controllers/project_controller.py b/backend/ibutsu_server/controllers/project_controller.py
@@ -4,6 +4,7 @@
 from ibutsu_server.db.models import Project
 from ibutsu_server.db.models import Result
 from ibutsu_server.db.models import User
+from ibutsu_server.filters import convert_filter
 from ibutsu_server.util.projects import add_user_filter
 from ibutsu_server.util.projects import project_has_user
 from ibutsu_server.util.query import get_offset
@@ -77,6 +78,13 @@ def get_project_list(
         query = query.filter(Project.owner_id == owner_id)
     if group_id:
         query = query.filter(Project.group_id == group_id)
+
+    if filter_:
+        for filter_string in filter_:
+            filter_clause = convert_filter(filter_string, Project)
+            if filter_clause is not None:
+                query = query.filter(filter_clause)
+
     offset = get_offset(page, page_size)
     total_items = query.count()
     total_pages = (total_items // page_size) + (1 if total_items % page_size > 0 else 0)

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -4,7 +4,7 @@ services:
     environment:
       NODE_ENV: production
       REACT_APP_SERVER_URL: http://localhost:8080/api
-    image: node:14
+    image: node:18
     command: /bin/bash -c 'yarn install && yarn run devserver'
     working_dir: /mnt
     user: ${UID:-1000}

diff --git a/frontend/bin/write-version-file.js b/frontend/bin/write-version-file.js
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
+const fse = require('fs-extra')
 
-let packageData = JSON.parse(fs.readFileSync('package.json'));
-fs.writeFileSync('public/version.json', JSON.stringify({'version': packageData.version}));
+let packageData = JSON.parse(fse.readFileSync('package.json'));
+fse.writeFileSync('public/version.json', JSON.stringify({'version': packageData.version}));
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,74 +3,51 @@
   "version": "2.5.8",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.21.3",
-    "@babel/eslint-parser": "^7.21.3",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
     "@babel/helper-call-delegate": "^7.12.13",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-syntax-jsx": "^7.18.6",
-    "@babel/preset-flow": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
-    "@greatsumini/react-facebook-login": "^2.1.5",
-    "@monaco-editor/react": "4.4.6",
-    "@patternfly/patternfly": "^4.224.2",
-    "@patternfly/react-charts": "^6.94.18",
-    "@patternfly/react-core": "^4.276.9",
-    "@patternfly/react-icons": "^4.93.6",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.112.39",
-    "@react-keycloak/web": "^3.4.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@babel/plugin-syntax-jsx": "^7.24.7",
+    "@babel/plugin-transform-class-properties": "^7.24.7",
+    "@babel/plugin-transform-private-methods": "^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",
+    "@patternfly/react-charts": "^7.2.2",
+    "@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",
+    "@testing-library/react": "^14.3.1",
     "cypress": "^10.11.0",
     "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-cypress": "^2.15.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.2",
+    "fs-extra": "^11.2.0",
     "keycloak-js": "^19.0.3",
+    "monaco-editor": "^0.47.0",
     "prop-types": "^15.8.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.2",
-    "react-google-login": "^5.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-heatmap-grid": "^0.9.0",
-    "react-json-view": "^1.21.3",
+    "react-json-tree": "^0.19.0",
     "react-linkify": "^1.0.0-alpha",
-    "react-password-strength-bar": "^0.3.5",
-    "react-router-dom": "^5.3.4",
-    "react-scripts": "^4.0.3",
+    "react-password-strength-bar": "^0.4.1",
+    "react-router-dom": "^6.22.3",
+    "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"
   },
-  "resolutions": {
-    "victory-core": "~36.8.6",
-    "victory-legend": "~36.8.6",
-    "victory-pie": "~36.8.6",
-    "victory-tooltip": "~36.8.6",
-    "victory-chart": "~36.8.6",
-    "victory-axis": "~36.8.6",
-    "victory-bar": "~36.8.6",
-    "victory-stack": "~36.8.6",
-    "victory-area": "~36.8.6",
-    "victory-create-container": "~36.8.6"
-  },
-  "overrides": {
-    "victory-core": "~36.8.6",
-    "victory-legend": "~36.8.6",
-    "victory-pie": "~36.8.6",
-    "victory-tooltip": "~36.8.6",
-    "victory-chart": "~36.8.6",
-    "victory-axis": "~36.8.6",
-    "victory-bar": "~36.8.6",
-    "victory-stack": "~36.8.6",
-    "victory-area": "~36.8.6",
-    "victory-create-container": "~36.8.6"
-  },
   "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 && cypress run --component",
+    "test": "./bin/write-version-file.js && 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"
@@ -93,8 +70,8 @@
       "requireConfigFile": false,
       "babelOptions": {
         "plugins": [
-          "@babel/plugin-proposal-class-properties",
-          "@babel/plugin-proposal-private-methods",
+          "@babel/plugin-transform-class-properties",
+          "@babel/plugin-transform-private-methods",
           "@babel/plugin-syntax-jsx"
         ],
         "presets": [

diff --git a/frontend/src/admin.js b/frontend/src/admin.js
@@ -5,8 +5,9 @@ import {
   NavList
 } from '@patternfly/react-core';
 
-import { NavLink, Route, Switch } from 'react-router-dom';
+import { NavLink, Route, Routes } from 'react-router-dom';
 import EventEmitter from 'wolfy87-eventemitter';
+import ElementWrapper from './components/elementWrapper';
 
 import { IbutsuPage } from './components';
 import { AdminHome } from './pages/admin/home';
@@ -36,14 +37,14 @@ export class Admin extends React.Component {
     const navigation = (
       <Nav onSelect={this.onNavSelect} theme="dark" aria-label="Nav">
         <NavList>
-          <li className="pf-c-nav__item">
-            <NavLink to="/admin" className="pf-c-nav__link" activeClassName="pf-m-active" exact>Admin Home</NavLink>
+          <li className="pf-v5-c-nav__item">
+            <NavLink to="/admin" className="pf-v5-c-nav__link">Admin Home</NavLink>
           </li>
-          <li className="pf-c-nav__item">
-            <NavLink to="/admin/users" className="pf-c-nav__link" activeClassName="pf-m-active">Users</NavLink>
+          <li className="pf-v5-c-nav__item">
+            <NavLink to="/admin/users" className="pf-v5-c-nav__link">Users</NavLink>
           </li>
-          <li className="pf-c-nav__item">
-            <NavLink to="/admin/projects" className="pf-c-nav__link" activeClassName="pf-m-active">Projects</NavLink>
+          <li className="pf-v5-c-nav__item">
+            <NavLink to="/admin/projects" className="pf-v5-c-nav__link">Projects</NavLink>
           </li>
         </NavList>
       </Nav>
@@ -52,13 +53,13 @@ export class Admin extends React.Component {
     return (
       <React.Fragment>
         <IbutsuPage eventEmitter={this.eventEmitter} navigation={navigation} title="Administration | Ibutsu">
-          <Switch>
-            <Route path="/admin" component={AdminHome} exact />
-            <Route path="/admin/users" component={UserList} exact />
-            <Route path="/admin/users/:id" component={UserEdit} />
-            <Route path="/admin/projects" component={ProjectList} exact />
-            <Route path="/admin/projects/:id" component={ProjectEdit} exact />
-          </Switch>
+          <Routes>
+            <Route path="*" element={<AdminHome />}/>
+            <Route path="/users" element={<ElementWrapper routeElement={UserList} />} />
+            <Route path="/users/:id" element={<ElementWrapper routeElement={UserEdit} />} />
+            <Route path="/projects" element={<ElementWrapper routeElement={ProjectList} />} />
+            <Route path="/projects/:id" element={<ElementWrapper routeElement={ProjectEdit} />} />
+          </Routes>
         </IbutsuPage>
       </React.Fragment>
     );

diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -5,8 +5,9 @@ import {
   NavList
 } from '@patternfly/react-core';
 import EventEmitter from 'wolfy87-eventemitter';
+import ElementWrapper from './components/elementWrapper';
 
-import { NavLink, Route, Switch } from 'react-router-dom';
+import { NavLink, Route, Routes } from 'react-router-dom';
 
 import { Dashboard } from './dashboard';
 import { ReportBuilder } from './report-builder';
@@ -68,22 +69,24 @@ export class App extends React.Component {
     const navigation = (
       <Nav onSelect={this.onNavSelect} theme="dark" aria-label="Nav">
         <NavList>
-          <li className="pf-c-nav__item">
-            <NavLink to="/" className="pf-c-nav__link" activeClassName="pf-m-active" exact>Dashboard</NavLink>
+          <li className="pf-v5-c-nav__item">
+            <NavLink to="/" className="pf-v5-c-nav__link">Dashboard</NavLink>
           </li>
-          <li className="pf-c-nav__item">
-            <NavLink to="/runs" className="pf-c-nav__link" activeClassName="pf-m-active">Runs</NavLink>
+          <li className="pf-v5-c-nav__item">
+            <NavLink to="/runs" className="pf-v5-c-nav__link">Runs</NavLink>
           </li>
-          <li className="pf-c-nav__item">
-            <NavLink to="/results" className="pf-c-nav__link" activeClassName="pf-m-active">Test Results</NavLink>
+          <li className="pf-v5-c-nav__item">
+            <NavLink to="/results" className="pf-v5-c-nav__link">Test Results</NavLink>
           </li>
-          <li className="pf-c-nav__item">
-            <NavLink to="/reports" className="pf-c-nav__link" activeClassName="pf-m-active">Report Builder</NavLink>
+          <li className="pf-v5-c-nav__item">
+            <NavLink to="/reports" className="pf-v5-c-nav__link">Report Builder</NavLink>
           </li>
           {views && views.map(view => (
-            <li className="pf-c-nav__item" key={view.id}>
-              <NavLink to={`/view/${view.id}`} className="pf-c-nav__link" activeClassName="pf-m-active">{view.title}</NavLink>
+            view.widget !== "jenkins-analysis-view" && (
+            <li className="pf-v5-c-nav__item" key={view.id}>
+              <NavLink to={`/view/${view.id}`} className="pf-v5-c-nav__link">{view.title}</NavLink>
             </li>
+            )
           ))}
         </NavList>
       </Nav>
@@ -92,39 +95,15 @@ export class App extends React.Component {
     return (
       <React.Fragment>
         <IbutsuPage eventEmitter={this.eventEmitter} navigation={navigation}>
-          <Switch>
-            <Route
-              path="/"
-              exact
-              render={routerProps => (
-                <Dashboard eventEmitter={this.eventEmitter} {...routerProps} />
-              )}
-            />
-            <Route
-              path="/runs"
-              exact
-              render={routerProps => (
-                <RunList eventEmitter={this.eventEmitter} {...routerProps} />
-              )}
-            />
-            <Route
-              path="/results"
-              exact
-              render={routerProps => (
-                <ResultList eventEmitter={this.eventEmitter} {...routerProps} />
-              )}
-            />
-            <Route
-              path="/reports"
-              exact
-              render={routerProps => (
-                <ReportBuilder eventEmitter={this.eventEmitter} {...routerProps} />
-              )}
-            />
-            <Route path="/runs/:id" component={Run} />
-            <Route path="/results/:id" component={Result} />
-            <Route path="/view/:id" component={View} />
-          </Switch>
+          <Routes>
+            <Route path="*" element={<Dashboard eventEmitter={this.eventEmitter} />} />
+            <Route path="/runs" element={<ElementWrapper routeElement={RunList} eventEmitter={this.eventEmitter} />} />
+            <Route path="/results" element={<ElementWrapper routeElement={ResultList} eventEmitter={this.eventEmitter} />} />
+            <Route path="/reports" element={<ElementWrapper routeElement={ReportBuilder} eventEmitter={this.eventEmitter} />} />
+            <Route path="/runs/:id" element={<ElementWrapper routeElement={Run} />} />
+            <Route path="/results/:id" element={<ElementWrapper routeElement={Result} />} />
+            <Route path="/view/:id" element={<ElementWrapper routeElement={View} />} />
+          </Routes>
         </IbutsuPage>
       </React.Fragment>
     );

diff --git a/frontend/src/app.test.js b/frontend/src/app.test.js
@@ -1,9 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { Base } from './base';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<Base />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  render(<Base />);
 });