feat: upgrading react-router

Author: anwesha-palit-redhat

__mocks__/textEncoderDecoder.ts

@@ -0,0 +1,14 @@
+// See https://github.com/jsdom/jsdom/issues/2524
+
+import { TextEncoder, TextDecoder } from 'util';
+
+if (
+  typeof global.TextEncoder !== 'undefined' ||
+  typeof global.TextDecoder !== 'undefined'
+) {
+  throw new Error(
+    'Hello future me. Remove __mocks__/textEncoderDecoder.ts now please',
+  );
+}
+
+Object.assign(global, { TextDecoder, TextEncoder });

jest.config.ts

@@ -129,7 +129,11 @@ const config: Config.InitialOptions = {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  setupFiles: ['./__mocks__/serverFlags.js', 'jest-canvas-mock'],
+  setupFiles: [
+    './__mocks__/textEncoderDecoder.ts',
+    './__mocks__/serverFlags.js',
+    'jest-canvas-mock',
+  ],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],
@@ -174,7 +178,7 @@ const config: Config.InitialOptions = {
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!(@patternfly(-\\S+)?|d3(-\\S+)?|delaunator|robust-predicates|internmap|cheerio|lodash-es|@openshift-console|@novnc|@spice-project|@popperjs|i18next(-\\S+)?|@babel/runtime)/.*)',
+    '<rootDir>/node_modules/(?!(@patternfly(-\\S+)?|d3(-\\S+)?|delaunator|robust-predicates|internmap|cheerio|lodash-es|@openshift-console|@novnc|@spice-project|@popperjs|i18next(-\\S+)?|@babel/runtime|react-router|cookie|set-cookie-parser)/.*)',
   ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them

package.json

@@ -104,8 +104,6 @@
     "react-redux": "~9.2.0",
     "react-rnd": "^10.3.4",
     "react-router": "~7.13.1",
-    "react-router-dom": "5.3.x",
-    "react-router-dom-v5-compat": "^6.11.2",
     "react-transition-group": "2.3.x",
     "react-virtualized": "9.x",
     "resolve-url-loader": "5.0.0",

src/components/approval-tasks/ApprovalTasksList.tsx

@@ -15,7 +15,7 @@ import {
 } from '../utils/pipeline-approval-utils';
 import { ApprovalStatus } from '../../types';
 import { useApprovalTasks, usePipelineRuns } from '../hooks/useTaskRuns';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useParams } from 'react-router';
 import useApprovalsColumns from './useApprovalsColumns';
 import ApprovalRow from './ApprovalRow';
 import { ListPageFilter } from '../list-pages/ListPageFilter';

src/components/approval-tasks/modal/Approval.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Formik, FormikValues, FormikHelpers } from 'formik';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import {
   Modal,
   ModalHeader,

src/components/approval-tasks/modal/__tests__/Approval.spec.tsx

@@ -28,8 +28,8 @@ jest.mock('react-i18next', () => ({
   }),
 }));
 
-// Mock react-router-dom-v5-compat
-jest.mock('react-router-dom-v5-compat', () => ({
+// Mock react-router
+jest.mock('react-router', () => ({
   Link: ({ children, to }: { children: ReactNode; to: string }) => (
     <a href={to}>{children}</a>
   ),

src/components/common/LinkTo.tsx

@@ -1,12 +1,12 @@
-import { Link, LinkProps } from 'react-router-dom-v5-compat';
+import { Link, LinkProps } from 'react-router';
 
 /**
  * A helper which creates a `Link` component that **only**
  * links to a specific location in the console.
  *
  * This is needed to bypass PatternFly `DropdownItem`
  * forcing the `to` prop to pass as `href`, which breaks
- * `react-router-dom` routing and causes a hard reload.
+ * `react-router` routing and causes a hard reload.
  *
  * @param href - The location to link to.
  * @param extraLinkProps - Any additional props to pass to the `Link` component.

src/components/details-page/breadcrumbs/BreadCrumbs.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, PropsWithChildren, FC } from 'react';
 import { isValidElement, Fragment } from 'react';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
 type BreadCrumbsProps = {

src/components/details-page/label-list.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { Component } from 'react';
 import { withTranslation, WithTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import classNames from 'classnames';
 import * as _ from 'lodash-es';
 import {

src/components/details-page/router.ts

@@ -1,19 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createBrowserHistory, createMemoryHistory, History } from 'history';
-
-let createHistory;
-
-try {
-  if (process.env.NODE_ENV === 'test') {
-    // Running in node. Can't use browser history
-    createHistory = createMemoryHistory;
-  } else {
-    createHistory = createBrowserHistory;
-  }
-} catch (unused) {
-  createHistory = createBrowserHistory;
-}
-
-export const history: History = createHistory({
-  basename: (window as any).SERVER_FLAGS.basePath,
-});
+export const history = {
+  push: (url: string) => {
+    window.history.pushState(window.history.state, '', url);
+  },
+  replace: (url: string) => {
+    window.history.replaceState(window.history.state, '', url);
+  },
+  back: () => window.history.back(),
+};