ODC-7789: Remove react-router 5.x

package.json

@@ -57,7 +57,6 @@
     "@types/react": "^17.0.37",
     "@types/react-helmet": "^6.1.4",
     "@types/react-redux": "6.0.2",
-    "@types/react-router-dom": "^5.3.2",
     "@types/react-transition-group": "2.x",
     "@types/react-virtualized": "9.x",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
@@ -107,9 +106,7 @@
     "react-linkify": "^0.2.2",
     "react-monaco-editor": "0.46.x",
     "react-rnd": "^10.3.4",
-    "react-router": "5.3.x",
-    "react-router-dom": "5.3.x",
-    "react-router-dom-v5-compat": "^6.11.2",
+    "react-router-dom-v5-compat": "^6.30.0",
     "react-transition-group": "2.3.x",
     "react-virtualized": "9.x",
     "resolve-url-loader": "5.0.0",

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
 type BreadCrumbsProps = {

src/components/pipeline-builder/PipelineBuilderEditPage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Alert } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom-v5-compat';
 import { PipelineModel } from '../../models';
 import { PipelineKind } from '../../types';
 import PipelineBuilderPage from './PipelineBuilderPage';
@@ -10,16 +10,8 @@ import { LoadingBox } from '../status/status-box';
 import { k8sGet } from '@openshift-console/dynamic-plugin-sdk';
 
 import './PipelineBuilderEditPage.scss';
-import { useParams } from 'react-router-dom-v5-compat';
 
-type PipelineBuilderEditPageProps = RouteComponentProps<{
-  ns: string;
-  pipelineName: string;
-}>;
-
-const PipelineBuilderEditPage: React.FC<PipelineBuilderEditPageProps> = (
-  props,
-) => {
+const PipelineBuilderEditPage: React.FC = (props) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const [editPipeline, setEditPipeline] = React.useState<PipelineKind>(null);
   const [error, setError] = React.useState<string>(null);

src/components/pipeline-builder/PipelineBuilderPage.tsx

@@ -3,7 +3,6 @@ import { Formik, FormikBag } from 'formik';
 import { load } from 'js-yaml';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
 import { PipelineKind } from '../../types';
 import { initialPipelineFormData } from './const';
 import { sanitizeToYaml } from './form-switcher-validation';
@@ -21,7 +20,7 @@ import { validationSchema } from './validation-utils';
 import { k8sCreate, k8sUpdate } from '@openshift-console/dynamic-plugin-sdk';
 import { returnValidPipelineModel } from '../utils/pipeline-utils';
 import { getReferenceForModel } from '../pipelines-overview/utils';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom-v5-compat';
 
 import './PipelineBuilderPage.scss';
 
@@ -31,7 +30,7 @@ type PipelineBuilderPageProps = {
 
 const PipelineBuilderPage: React.FC<PipelineBuilderPageProps> = (props) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
-  const history = useHistory();
+  const navigate = useNavigate();
   const { ns } = useParams();
   const { existingPipeline } = props;
 
@@ -87,7 +86,7 @@ const PipelineBuilderPage: React.FC<PipelineBuilderPageProps> = (props) => {
 
     return resourceCall
       .then(() => {
-        history.push(
+        navigate(
           `/k8s/ns/${ns}/${getReferenceForModel(pipelineModel)}/${
             pipeline.metadata.name
           }`,
@@ -106,7 +105,7 @@ const PipelineBuilderPage: React.FC<PipelineBuilderPageProps> = (props) => {
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmit}
-        onReset={history.goBack}
+        onReset={() => navigate(-1)}
         validationSchema={validationSchema(t)}
       >
         {(formikProps) => (

src/components/pipelineRuns-details/PipelineRunCustomDetails.tsx

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

src/components/pipelineRuns-details/PipelineRunDetailsPage.tsx

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

src/components/pipelines-details/PipelineDetailsPage.tsx

@@ -1,7 +1,6 @@
 import { BreadcrumbItem, Text, TextVariants } from '@patternfly/react-core';
-import { Link, useHistory } from 'react-router-dom';
 import * as React from 'react';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { Link, useNavigate, useParams } from 'react-router-dom-v5-compat';
 import { useTranslation } from 'react-i18next';
 import {
   getGroupVersionKindForModel,
@@ -38,7 +37,6 @@ import { ErrorPage404 } from '../common/error';
 const PipelineDetailsPage = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const params = useParams();
-  const history = useHistory();
   const navigate = useNavigate();
   const { name, ns: namespace } = params;
   const [pipeline, loaded, loadError] = useK8sWatchResource<PipelineKind>({
@@ -205,7 +203,7 @@ const PipelineDetailsPage = () => {
           label: t('Edit {{resourceKind}}', {
             resourceKind: PipelineModel.kind,
           }),
-          onClick: () => history.push(editURL),
+          onClick: () => navigate(editURL),
           disabled: !canEditResource[0],
         },
         {

src/components/pipelines-list/PipelineKebab.tsx

@@ -35,7 +35,6 @@ import {
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { errorModal } from '../modals/error-modal';
 import { getPipelineRunData } from '../start-pipeline/utils';
-import { useHistory } from 'react-router-dom';
 import { getReferenceForModel } from '../pipelines-overview/utils';
 import { rerunPipeline } from '../utils/pipelines-actions';
 import { usePipelineTriggerTemplateNames } from '../utils/triggers';
@@ -62,7 +61,6 @@ const PipelineKebab: React.FC<PipelineKebabProps> = ({ pipeline }) => {
   const launchLabelsModal = useLabelsModal(pipeline);
   const launchModal = useModal();
   const navigate = useNavigate();
-  const history = useHistory();
   const [isOpen, setIsOpen] = React.useState(false);
   const templateNames = usePipelineTriggerTemplateNames(name, namespace) || [];
   const onToggle = () => {
@@ -215,7 +213,7 @@ const PipelineKebab: React.FC<PipelineKebabProps> = ({ pipeline }) => {
     <DropdownItem
       key={KEBAB_ACTION_EDIT_ID}
       component="button"
-      onClick={() => history.push(editURL)}
+      onClick={() => navigate(editURL)}
       isDisabled={!canEditResource}
       data-test-action={KEBAB_ACTION_EDIT_ID}
     >

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 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 * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { PipelineRunModel } from '../../../models';
 import { PipelineRunKind, TaskRunKind } from '../../../types';
 import PipelineResourceStatus from './PipelineResourceStatus';

src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRow.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import {
   SummaryProps,
   getReferenceForModel,

src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRowK8s.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from '@patternfly/react-core';
 import {

src/components/pipelines-overview/list-pages/PipelineRunsForRepositoriesRow.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import {
   ResourceLink,
   RowProps,

src/components/pipelines-overview/utils.ts

@@ -6,7 +6,7 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { ALL_NAMESPACES_KEY } from '../../consts';
 import { adjustToStartOfWeek } from '../pipelines-metrics/utils';
 
@@ -287,9 +287,10 @@ export const useQueryParams = (param) => {
     value,
   } = param;
   const [isLoaded, setIsLoaded] = React.useState(0);
-  const history = useHistory();
+  const navigate = useNavigate();
+  const location = useLocation();
   const queryParams = {};
-  history.location.search
+  location.search
     .substring(1)
     ?.split('&')
     .forEach((_) => {
@@ -298,10 +299,10 @@ export const useQueryParams = (param) => {
     });
 
   function setQueryParams(key?: string, value?: string) {
-    const path = history.location.pathname;
+    const path = location.pathname;
 
     if (key && value) queryParams[key] = value;
-    history.push(
+    navigate(
       `${path}?${Object.keys(queryParams)
         .map((k) => {
           const v = queryParams[k];

src/components/pipelines-tasks/TaskRunStatus.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { TaskRunKind } from '../../types';
 import PipelineResourceStatus from '../status/PipelineResourceStatus';
 import { taskRunFilterTitleReducer } from '../utils/pipeline-filter-reducer';

src/components/pipelines-tasks/TasksNavigationPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useTranslation } from 'react-i18next';
 import {
   HorizontalNav,
@@ -23,7 +23,7 @@ const taskRunModelRef = getReferenceForModel(TaskRunModel);
 const TasksNavigationPage = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const [activeNamespace] = useActiveNamespace();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const createItems = {
     tasks: TaskModel.labelKey || TaskModel.label,
@@ -32,14 +32,14 @@ const TasksNavigationPage = () => {
 
   const onCreate = (type: string) => {
     return type === 'tasks'
-      ? history.push(
+      ? navigate(
           `/k8s/ns/${
             activeNamespace === ALL_NAMESPACES_KEY
               ? DEFAULT_NAMESPACE
               : activeNamespace
           }/${taskModelRef}/~new`,
         )
-      : history.push(
+      : navigate(
           `/k8s/ns/${
             activeNamespace === ALL_NAMESPACES_KEY
               ? DEFAULT_NAMESPACE

src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx

@@ -4,7 +4,7 @@ import {
   TextVariants,
   Tooltip,
 } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import * as React from 'react';
 import { useParams } from 'react-router-dom-v5-compat';
 import { ArchiveIcon } from '@patternfly/react-icons';

src/components/repositories-list/RepositoriesRow.tsx

@@ -8,7 +8,7 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import * as React from 'react';
 import { PipelineRunKind, RepositoryKind, TaskRunKind } from '../../types';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { PipelineRunModel, RepositoryModel } from '../../models';
 import { getLatestRun } from '../utils/pipeline-augment';
 import { getTaskRunsOfPipelineRun } from '../hooks/useTaskRuns';

src/components/utils/k8s-common-kebab-menu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useTranslation } from 'react-i18next';
 import { DropdownItem } from '@patternfly/react-core';
 import {
@@ -23,7 +23,7 @@ export const K8sCommonKebabMenu = (obj: K8sResourceCommon, model: K8sModel) => {
   const launchDeleteModal = useDeleteModal(obj);
   const launchAnnotationsModal = useAnnotationsModal(obj);
   const launchLabelsModal = useLabelsModal(obj);
-  const history = useHistory();
+  const navigate = useNavigate();
   const { name, namespace } = obj.metadata;
 
   const canEditResource = useAccessReview({
@@ -71,7 +71,7 @@ export const K8sCommonKebabMenu = (obj: K8sResourceCommon, model: K8sModel) => {
     <DropdownItem
       key={KEBAB_ACTION_EDIT_ID}
       component="button"
-      onClick={() => history.push(editURL)}
+      onClick={() => navigate(editURL)}
       isDisabled={!canEditResource[0]}
       data-test-action={KEBAB_ACTION_EDIT_ID}
     >

src/components/utils/resource-link.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import cx from 'classnames';
 import { getReference } from '../pipelines-overview/utils';
 import {

yarn.lock

@@ -2730,11 +2730,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/history@^4.7.11":
-  version "4.7.11"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz#6bba74383cdab98e8db4e20ce5b4a6b98caed010"
@@ -2901,23 +2896,6 @@
     "@types/react" "*"
     redux "^4.0.0"
 
-"@types/react-router-dom@^5.3.2":
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*":
-  version "5.1.20"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
-  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-
 "@types/react-transition-group@2.x":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
@@ -10698,7 +10676,7 @@ react-rnd@^10.3.4:
     react-draggable "4.4.6"
     tslib "2.6.2"
 
-react-router-dom-v5-compat@^6.11.2:
+react-router-dom-v5-compat@^6.11.2, react-router-dom-v5-compat@^6.30.0:
   version "6.30.0"
   resolved "https://registry.yarnpkg.com/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.30.0.tgz#d089e7b8dc964ade2480467aa77381647b10a78b"
   integrity sha512-MAVRASbdQ3+ZOTPPjAa7jKcF0F9LkHWKB/iib3hf+jzzIazL4GEpMDDdTswCsqRQNU+zNnT3qD0WiNbzJ6ncPw==