move to react-router v7

Move to node 20, react-router 7 split splat routes Set global.TextEncoder for react-scripts test
ibutsu · Dec 18, 2024 · 5a231d8 · 5a231d8
1 parent cf19201
commit 5a231d8
Show file tree

Hide file tree

Showing 35 changed files with 763 additions and 408 deletions.
diff --git a/frontend/.nvmrc b/frontend/.nvmrc
@@ -1 +1 @@
-v18
+v20
diff --git a/frontend/cypress.config.ts b/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

diff --git a/frontend/jest.polyfills.js b/frontend/jest.polyfills.js
@@ -0,0 +1,2 @@
+// jest.polyfills.js
+global.TextEncoder = require('util').TextEncoder;
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,7 +6,6 @@
     "@babel/core": "^7.24.7",
     "@babel/eslint-parser": "7.25.9",
     "@babel/helper-call-delegate": "^7.12.13",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-flow": "^7.14.5",
     "@babel/plugin-transform-class-properties": "^7.24.7",
     "@babel/plugin-transform-private-methods": "^7.24.7",
@@ -17,36 +16,36 @@
     "@greatsumini/react-facebook-login": "^3.3.3",
     "@monaco-editor/react": "^4.6.0",
     "@patternfly/patternfly": "^5.2.1",
-    "@patternfly/react-charts": "^8.0.0",
-    "@patternfly/react-core": "^6.0.0",
-    "@patternfly/react-icons": "^6.0.0",
-    "@patternfly/react-styles": "^6.0.0",
-    "@patternfly/react-table": "^6.0.0",
+    "@patternfly/react-charts": "^7.4.7",
+    "@patternfly/react-icons": "^5.4.2",
+    "@patternfly/react-styles": "^5.4.1",
+    "@patternfly/react-table": "5.4.12",
     "@react-oauth/google": "^0.12.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/react": "^16.1.0",
-    "@types/react": "18",
-    "cypress": "^13.16.1",
+    "@types/react": "^18.3.12",
     "enzyme": "^3.11.0",
     "fs-extra": "^11.2.0",
     "globals": "^15.13.0",
     "keycloak-js": "^26.0.7",
     "monaco-editor": "^0.47.0",
     "prop-types": "^15.8.1",
-    "react": "18",
-    "react-dom": "18",
+    "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": "5.3.4",
+    "react-router": "^7.0.2",
     "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",
+    "cypress": "^13.17.0",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^4.1.0",

diff --git a/frontend/src/admin.js b/frontend/src/admin.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 import EventEmitter from 'wolfy87-eventemitter';
 import ElementWrapper from './components/elementWrapper';
 

diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -3,7 +3,7 @@ import React from 'react';
 import EventEmitter from 'wolfy87-eventemitter';
 import ElementWrapper from './components/elementWrapper';
 
-import { Navigate, Route, Routes } from 'react-router-dom';
+import {Route, Routes } from 'react-router';
 
 import { Dashboard } from './dashboard';
 import { ReportBuilder } from './report-builder';
@@ -38,23 +38,19 @@ export class App extends React.Component {
           path=""
           element={<ElementWrapper routeElement={IbutsuPage} eventEmitter={this.eventEmitter} />}
         />
-        <Route
-          path=":project_id/*"
-          element={<ElementWrapper routeElement={IbutsuPage} eventEmitter={this.eventEmitter} />}
-        >
-
-          {/* Nested project routes */}
-          <Route
-            path="dashboard/:dashboard_id"
-            element={
-              <ElementWrapper routeElement={Dashboard} eventEmitter={this.eventEmitter} />
-            }
-          />
-          <Route
-            path="dashboard/*"
-            element={<ElementWrapper routeElement={Dashboard} eventEmitter={this.eventEmitter} />}
-          />
-
+        <Route path=":project_id">
+          <Route path="dashboard">
+            <Route path=':dashboard_id' element={
+                <ElementWrapper routeElement={Dashboard}
+                eventEmitter={this.eventEmitter} />}>
+            </Route>
+            <Route
+              path="*"
+              element={
+                <ElementWrapper routeElement={Dashboard}
+                eventEmitter={this.eventEmitter} />}>
+            </Route>
+          </Route>
 
           <Route
             path="runs"
@@ -66,7 +62,6 @@ export class App extends React.Component {
             path="runs/:run_id"
             element={<ElementWrapper routeElement={Run} />}
           />
-
           <Route
             path="results"
             element={<ElementWrapper routeElement={ResultList} eventEmitter={this.eventEmitter} />}
@@ -85,7 +80,13 @@ export class App extends React.Component {
             path="view/:view_id"
             element={<ElementWrapper routeElement={View} />}
           />
-        <Route path="*" element={<Navigate to="dashboard" replace />} />
+
+          <Route
+            path="*"
+            element={<ElementWrapper routeElement={IbutsuPage}
+            eventEmitter={this.eventEmitter} />}
+          >
+          </Route>
         </Route>
       </Routes>
     );

diff --git a/frontend/src/base.js b/frontend/src/base.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router';
 import { App } from './app';
 import { Admin } from './admin';
 import Profile from './profile';
@@ -14,26 +14,28 @@ import { IbutsuContextProvider } from './services/context';
 
 export const Base = () => (
     <IbutsuContextProvider>
-      <Router>
+      <BrowserRouter future={{v7_relativeSplatPath: true}}>
         <Routes>
           <Route path="login" element={<ElementWrapper routeElement={Login} />} />
           <Route path="sign-up" element={<ElementWrapper routeElement={SignUp} />} />
           <Route path="forgot-password" element={<ElementWrapper routeElement={ForgotPassword} />} />
           <Route path="reset-password/:activationCode" element={<ElementWrapper routeElement={ResetPassword} />} />
-          <Route
-            path="profile/*"
-            element={AuthService.isLoggedIn() ? <Profile /> : <Navigate to="/login" />}
-          />
-          <Route
-            path="admin/*"
+          <Route path="profile">
+            <Route path="*"
+              element={AuthService.isLoggedIn() ? <Profile /> : <Navigate to="/login" />}
+            />
+          </Route>
+          <Route path="admin">
+            <Route path="*"
             element={AuthService.isLoggedIn() && AuthService.isSuperAdmin() ? <Admin /> : <Navigate to="/login" />}
           />
-          <Route
-            path="project/*"
-            element={AuthService.isLoggedIn() ? <App /> : <Navigate to="/login" />}
-          />
+          </Route>
+
+          <Route path="project"
+            element={AuthService.isLoggedIn() ? <App /> : <Navigate to="/login" />}/>
+
           <Route path="*" element={<Navigate to="project" replace />} />
         </Routes>
-      </Router>
+      </BrowserRouter>
     </IbutsuContextProvider>
   );
diff --git a/frontend/src/components/admin-page.js b/frontend/src/components/admin-page.js
@@ -8,7 +8,7 @@ import {
   PageSidebarBody
 } from '@patternfly/react-core';
 
-import { Link, Outlet } from 'react-router-dom';
+import { Link, Outlet } from 'react-router';
 import ElementWrapper from './elementWrapper';
 
 import { IbutsuHeader } from './ibutsu-header';

diff --git a/frontend/src/components/elementWrapper.js b/frontend/src/components/elementWrapper.js
@@ -1,6 +1,6 @@
 // Wrapper
 import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router';
 import PropTypes from 'prop-types';
 
 

diff --git a/frontend/src/components/empty-object.js b/frontend/src/components/empty-object.js
@@ -14,7 +14,7 @@ import {
   SearchIcon
 } from '@patternfly/react-icons';
 
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 export class EmptyObject extends React.Component {
   static propTypes = {

diff --git a/frontend/src/components/ibutsu-page.js b/frontend/src/components/ibutsu-page.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import {
   Alert,

diff --git a/frontend/src/components/profile-page.js b/frontend/src/components/profile-page.js
@@ -8,7 +8,7 @@ import {
   PageSidebarBody
 } from '@patternfly/react-core';
 
-import { NavLink, Outlet} from 'react-router-dom';
+import { NavLink, Outlet} from 'react-router';
 
 
 import ElementWrapper from './elementWrapper';

diff --git a/frontend/src/components/result.js b/frontend/src/components/result.js
@@ -17,7 +17,7 @@ import {
   Tab
 } from '@patternfly/react-core';
 import { FileAltIcon, FileImageIcon, InfoCircleIcon, CodeIcon, SearchIcon } from '@patternfly/react-icons';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Linkify from 'react-linkify';
 import { JSONTree } from 'react-json-tree';
 import Editor from '@monaco-editor/react';

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
@@ -2,7 +2,7 @@
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { IbutsuContext } from '../services/context';
 import {  PageSidebar,
     PageSidebarBody,
@@ -58,21 +58,21 @@ const IbutsuSidebar = (props) => {
                 <Nav theme="dark" aria-label="Nav">
                     <NavList>
                         <li className="pf-v5-c-nav__item">
-                            <Link to="dashboard" className="pf-v5-c-nav__link">Dashboard</Link>
+                            <Link to="../dashboard" className="pf-v5-c-nav__link">Dashboard</Link>
                         </li>
                         <li className="pf-v5-c-nav__item">
-                            <Link to="runs/" className="pf-v5-c-nav__link">Runs</Link>
+                            <Link to="../runs/" className="pf-v5-c-nav__link">Runs</Link>
                         </li>
                         <li className="pf-v5-c-nav__item">
-                            <Link to="results/" className="pf-v5-c-nav__link">Test Results</Link>
+                            <Link to="../results/" className="pf-v5-c-nav__link">Test Results</Link>
                         </li>
                         <li className="pf-v5-c-nav__item">
-                            <Link to="reports/" className="pf-v5-c-nav__link">Report Builder</Link>
+                            <Link to="../reports/" className="pf-v5-c-nav__link">Report Builder</Link>
                         </li>
                         {views && views.map(view => (
                             view.widget !== 'jenkins-analysis-view' && (
                             <li className="pf-v5-c-nav__item" key={view.id}>
-                            <Link to={`view/${view.id}`} className="pf-v5-c-nav__link">{view.title}</Link>
+                            <Link to={`../view/${view.id}`} className="pf-v5-c-nav__link">{view.title}</Link>
                             </li>
                             )
                         ))}

diff --git a/frontend/src/components/test-history.js b/frontend/src/components/test-history.js
@@ -20,7 +20,7 @@ import {
   TableVariant,
   expandable
 } from '@patternfly/react-table';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';

diff --git a/frontend/src/components/user-dropdown.js b/frontend/src/components/user-dropdown.js
@@ -8,7 +8,7 @@ import {
   MenuToggle
 } from '@patternfly/react-core';
 import { UserIcon } from '@patternfly/react-icons';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { AuthService } from '../services/auth';
 import { IbutsuContext } from '../services/context';

diff --git a/frontend/src/forgot-password.js b/frontend/src/forgot-password.js
@@ -14,7 +14,7 @@ import {
   LoginPage,
   TextInput
 } from '@patternfly/react-core';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { AuthService } from './services/auth';
 

diff --git a/frontend/src/login.js b/frontend/src/login.js
@@ -15,7 +15,7 @@ import {
   TextInput
 } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon, GoogleIcon, FacebookIcon, GithubIcon, GitlabIcon, RedhatIcon, KeyIcon } from '@patternfly/react-icons';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import { GoogleLogin } from '@react-oauth/google';
 import OAuth2Login from 'react-simple-oauth2-login';
 import FacebookLogin from '@greatsumini/react-facebook-login';

diff --git a/frontend/src/pages/admin/project-edit.js b/frontend/src/pages/admin/project-edit.js
@@ -24,7 +24,7 @@ import {
   TextInputGroupUtilities,
   Title
 } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { TimesIcon } from '@patternfly/react-icons';
 
@@ -464,7 +464,7 @@ export class ProjectEdit extends React.Component {
                   <Button
                     variant="secondary"
                     ouiaId="admin-project-edit-cancel"
-                    component={(props: any) => <Link {...props} to="/admin/projects" />}
+                    component={(props) => <Link {...props} to="/admin/projects" />}
                   >
                     Cancel
                   </Button>

diff --git a/frontend/src/pages/admin/project-list.js b/frontend/src/pages/admin/project-list.js
@@ -15,7 +15,7 @@ import {
   TextInput
 } from '@patternfly/react-core';
 import { PencilAltIcon, PlusCircleIcon, TrashIcon } from '@patternfly/react-icons';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { HttpClient } from '../../services/http';
 import { Settings } from '../../settings';

diff --git a/frontend/src/pages/admin/user-list.js b/frontend/src/pages/admin/user-list.js
@@ -14,7 +14,7 @@ import {
   TextInput
 } from '@patternfly/react-core';
 import { PencilAltIcon, TrashIcon } from '@patternfly/react-icons';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { HttpClient } from '../../services/http';
 import { Settings } from '../../settings';

diff --git a/frontend/src/profile.js b/frontend/src/profile.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 import EventEmitter from 'wolfy87-eventemitter';
 
 import { UserProfile } from './pages/profile/user';

diff --git a/frontend/src/reset-password.js b/frontend/src/reset-password.js
@@ -17,7 +17,7 @@ import {
   TextInput
 } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { AuthService } from './services/auth';
 

diff --git a/frontend/src/run-list.js b/frontend/src/run-list.js
@@ -21,7 +21,7 @@ import {
 } from '@patternfly/react-core';
 import { ChevronRightIcon, TimesIcon } from '@patternfly/react-icons';
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { HttpClient } from './services/http';
 import { Settings } from './settings';

diff --git a/frontend/src/run.js b/frontend/src/run.js
@@ -46,7 +46,7 @@ import {
   TimesCircleIcon
 } from '@patternfly/react-icons';
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { JSONTree } from 'react-json-tree';
 import Editor from '@monaco-editor/react';
 

diff --git a/frontend/src/services/context.js b/frontend/src/services/context.js
@@ -1,4 +1,4 @@
-import {createContext, useState} from 'react';
+import React, {createContext, useState} from 'react';
 import PropTypes from 'prop-types';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// jest.polyfills.js
		global.TextEncoder = require('util').TextEncoder;