SRVKP-10306: Upgrade react-router from v5 to v7 to align with console

__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(),
+};

src/components/details-page/selector.tsx

@@ -1,7 +1,7 @@
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { selectorToString } from '../utils/k8s-utils';
 

src/components/hooks/useDataViewFilter.ts

@@ -4,7 +4,7 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom-v5-compat';
+import { useSearchParams } from 'react-router';
 import { FLAG_PIPELINE_TEKTON_RESULT_INSTALLED } from '../../consts';
 import type {
   CheckboxFilterConfig,

src/components/hooks/usePersistedFiltersForPipelineOverview.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom-v5-compat';
+import { useLocation } from 'react-router';
 import {
   setInterval as setIntervalAction,
   setTimespan as setTimespanAction,

src/components/multi-tab-list/MultiTabListPage.tsx

@@ -1,13 +1,17 @@
 import type { ReactNode, FC } from 'react';
-import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
+import {
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Button,
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { Link, useParams } from 'react-router-dom-v5-compat';
+import { Link, useParams, useNavigate } from 'react-router';
 import {
   MenuActions,
   MenuAction,
   SecondaryButtonAction,
 } from './multi-tab-list-page-types';
-import { useNavigate } from 'react-router-dom-v5-compat';
 import { getReferenceForModel } from '../pipelines-overview/utils';
 import {
   HorizontalNav,

src/components/pac/PacPage.tsx

@@ -4,7 +4,7 @@ import {
   useParams,
   useLocation,
   useNavigate,
-} from 'react-router-dom-v5-compat';
+} from 'react-router';
 
 import { usePacData } from './hooks/usePacData';
 import PacForm from './PacForm';

src/components/pac/__tests__/PacForm.spec.tsx

@@ -1,5 +1,5 @@
 import { configure, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 
 import { usePacGHManifest } from '../hooks/usePacGHManifest';
 import PacForm from '../PacForm';

src/components/pac/__tests__/PacPage.spec.tsx

@@ -5,7 +5,7 @@ import {
   useFlag,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { usePacData } from '../hooks/usePacData';
-import { MemoryRouter } from 'react-router-dom-v5-compat';
+import { MemoryRouter } from 'react-router';
 import { sampleSecretData } from '../../../test-data/pac-data';
 
 // Mocks
@@ -15,8 +15,8 @@ jest.mock('@openshift-console/dynamic-plugin-sdk', () => ({
   useAccessReview: jest.fn(),
   useFlag: jest.fn(),
 }));
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom-v5-compat'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useParams: () => ({ ns: 'openshift-pipelines' }),
   useLocation: () => ({
     pathname: '/pac/ns/openshift-pipelines',

src/components/pipeline-builder/PipelineBuilderEditPage.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { useState, useEffect } from 'react';
 import { Alert } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { Link, useParams } from 'react-router-dom-v5-compat';
+import { Link, useParams } from 'react-router';
 import { PipelineModel } from '../../models';
 import { PipelineKind } from '../../types';
 import PipelineBuilderPage from './PipelineBuilderPage';

src/components/pipeline-builder/PipelineBuilderPage.tsx

@@ -19,7 +19,7 @@ import { validationSchema } from './validation-utils';
 import { DocumentTitle, k8sCreate, k8sUpdate } from '@openshift-console/dynamic-plugin-sdk';
 import { returnValidPipelineModel } from '../utils/pipeline-utils';
 import { getReferenceForModel } from '../pipelines-overview/utils';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router';
 
 import './PipelineBuilderPage.scss';
 

src/components/pipeline-overview/PipelineOverview.spec.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 
 import { setPipelineNotStarted } from './pipeline-overview-utils';
 import PipelinesOverview from './PipelineOverview';

src/components/pipeline-overview/PipelineOverview.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { Flex, FlexItem } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   isPipelineNotStarted,
   removePipelineNotStarted,

src/components/pipeline-overview/PipelineRunItem.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { useTaskRuns } from '../hooks/useTaskRuns';
 import { useMultiClusterProxyService } from '../hooks/useMultiClusterProxyService';
 import { resourcePath } from '../utils/resource-link';

src/components/pipeline-topology/ApprovalTaskNode.tsx

@@ -3,7 +3,7 @@ import { useRef, useMemo, memo } from 'react';
 import classnames from 'classnames';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { Tooltip } from '@patternfly/react-core';
 import {
   observer,

src/components/pipeline-topology/CustomTaskNode.tsx

@@ -3,7 +3,7 @@ import { useRef, useMemo, memo } from 'react';
 import cx from 'classnames';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { Tooltip } from '@patternfly/react-core';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
 import { t_chart_color_black_500 as customTaskColor } from "@patternfly/react-tokens/dist/js/t_chart_color_black_500";

src/components/pipeline-topology/PipelineTaskNode.tsx

@@ -18,7 +18,7 @@ import {
 } from '@patternfly/react-topology';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { NodeType } from './const';
 import { PipelineRunModel, TaskModel } from '../../models';
 import { getReferenceForModel } from '../pipelines-overview/utils';

src/components/pipelineRuns-details/LogURLRedirect.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Navigate, useLocation, useParams } from 'react-router-dom-v5-compat';
+import { Navigate, useLocation, useParams } from 'react-router';
 
 const createLogURL = (pathname: string, taskName: string): string => {
   const basePath = pathname.replace(/\/$/, '');

src/components/pipelineRuns-details/PipelineRunCustomDetails.tsx

@@ -7,7 +7,7 @@ import {
   DescriptionListTerm,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { getPLRLogSnippet } from '../logs/pipelineRunLogSnippet';
 import RunDetailsErrorLog from '../logs/RunDetailsErrorLog';
 import { getReferenceForModel } from '../pipelines-overview/utils';

src/components/pipelineRuns-details/PipelineRunDetailsPage.tsx

@@ -10,7 +10,7 @@ import {
   ContentVariants,
   Tooltip,
 } from '@patternfly/react-core';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { navFactory } from '../utils/horizontal-nav';
 import PipelineRunDetails from './PipelineRunDetails';

src/components/pipelineRuns-details/PipelineRunEvents.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useParams } from 'react-router';
 import { PipelineRunKind } from '../../types';
 import { ResourcesEventStream } from '../pipelines-tasks/tasks-details-pages/events/events';
 import { usePipelineRunFilters } from '../pipelines-tasks/tasks-details-pages/events/event-utils';

src/components/pipelineRuns-details/PipelineRunLogs.tsx

@@ -4,7 +4,7 @@ import { Nav, NavItem, NavList, Alert, Banner } from '@patternfly/react-core';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom-v5-compat';
+import { Link, useLocation } from 'react-router';
 import {
   WatchK8sResource,
   useOverlay,

src/components/pipelineRuns-details/RepositoryLinkList.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import {
   ClipboardCopy,
   ClipboardCopyVariant,

src/components/pipelineRuns-list/PipelineRunsList.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom-v5-compat';
+import { useParams, useSearchParams } from 'react-router';
 import { ListPageBody } from '@openshift-console/dynamic-plugin-sdk';
 import usePipelineRunsColumns from './usePipelineRunsColumns';
 import { PipelineRunKind } from '../../types';

src/components/pipelines-details/PipelineDetailsPage.tsx

@@ -4,7 +4,7 @@ import {
   ContentVariants,
 } from '@patternfly/react-core';
 import { useMemo, useCallback } from 'react';
-import { Link, useParams } from 'react-router-dom-v5-compat';
+import { Link, useParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   getGroupVersionKindForModel,

src/components/pipelines-details/PipelineVisualizationTask.tsx

@@ -6,7 +6,7 @@ import { Tooltip } from '@patternfly/react-core';
 import { createSvgIdUrl, useHover } from '@patternfly/react-topology';
 import cx from 'classnames';
 import * as _ from 'lodash';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 
 import {
   createStepStatus,

src/components/pipelines-list/PipelinesList.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom-v5-compat';
+import { useParams, useSearchParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   ListPageBody,

src/components/pipelines-list/PipelinesTabbedPage.tsx

@@ -27,7 +27,7 @@ import {
 } from '../multi-tab-list/multi-tab-list-page-types';
 import { MultiTabListPage } from '../multi-tab-list';
 import AllProjectsPage from '../projects-list/AllProjectsPage';
-import { useLocation, useParams } from 'react-router-dom-v5-compat';
+import { useLocation, useParams } from 'react-router';
 import { ApprovalTasksList } from '../approval-tasks';
 import { useK8sGet } from '../hooks/use-k8sGet-hook';
 import { SecretKind } from '../../types';

src/components/pipelines-list/status/LinkedPipelineRunTaskStatus.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { PipelineRunKind, TaskRunKind } from '../../../types';
 import { PipelineBars, PipelineBarsForTaskRunsStatus } from './PipelineBars';
 import { LoadingInline } from '../../Loading';

src/components/pipelines-list/status/PipelineRunStatus.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { PipelineRunModel } from '../../../models';
 import { PipelineRunKind, TaskRunKind } from '../../../types';
 import PipelineResourceStatus from './PipelineResourceStatus';