Start adopting React Router v6 API using compatibility layer

.storybook/Container.js

@@ -14,7 +14,8 @@ limitations under the License.
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { createMemoryHistory } from 'history';
-import { Router, Route } from 'react-router-dom';
+import { Router, Switch } from 'react-router-dom';
+import { CompatRoute, CompatRouter } from 'react-router-dom-v5-compat';
 
 import messages from '../src/nls/messages_en.json';
 
@@ -31,11 +32,15 @@ export default function Container({
       {notes && <p>{notes}</p>}
       <div data-floating-menu-container role="main">
         <Router history={createMemoryHistory({ initialEntries: [route] })}>
-          <Route path={path}>
-            <React.StrictMode>
-              <Story />
-            </React.StrictMode>
-          </Route>
+          <CompatRouter>
+            <Switch>
+              <CompatRoute path={path}>
+                <React.StrictMode>
+                  <Story />
+                </React.StrictMode>
+              </CompatRoute>
+            </Switch>
+          </CompatRouter>
         </Router>
       </div>
     </IntlProvider>

package.json

@@ -41,6 +41,7 @@
     "react-hot-loader": "^4.13.0",
     "react-intl": "^6.2.0",
     "react-router-dom": "^5.3.4",
+    "react-router-dom-v5-compat": "^6.4.2",
     "reconnecting-websocket": "^4.4.0"
   },
   "devDependencies": {

packages/components/src/components/PageErrorBoundary/PageErrorBoundary.js

@@ -13,7 +13,7 @@ limitations under the License.
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { ErrorBoundary } from '..';
 

packages/components/src/utils/test.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -12,18 +12,23 @@ limitations under the License.
 */
 /* istanbul ignore file */
 import React from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Switch } from 'react-router-dom';
+import { CompatRoute, CompatRouter } from 'react-router-dom-v5-compat';
 import { render as baseRender } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 
 function RouterWrapper({ children, path }) {
   return (
     <BrowserRouter>
-      <Route path={path}>
-        <IntlProvider locale="en" defaultLocale="en" messages={{}}>
-          {children}
-        </IntlProvider>
-      </Route>
+      <CompatRouter>
+        <Switch>
+          <CompatRoute path={path}>
+            <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+              {children}
+            </IntlProvider>
+          </CompatRoute>
+        </Switch>
+      </CompatRouter>
     </BrowserRouter>
   );
 }

packages/utils/src/utils/index.js

@@ -243,16 +243,16 @@ export function getFilters({ search }) {
   return filters;
 }
 
-export function getAddFilterHandler({ history, location }) {
+export function getAddFilterHandler({ location, navigate }) {
   return function handleAddFilter(labelFilters) {
     const queryParams = new URLSearchParams(location.search);
     queryParams.set('labelSelector', labelFilters);
     const browserURL = location.pathname.concat(`?${queryParams.toString()}`);
-    history.push(browserURL);
+    navigate(browserURL);
   };
 }
 
-export function getDeleteFilterHandler({ history, location }) {
+export function getDeleteFilterHandler({ location, navigate }) {
   return function handleDeleteFilter(filter) {
     const queryParams = new URLSearchParams(location.search);
     const labelFilters = queryParams.getAll('labelSelector');
@@ -269,16 +269,16 @@ export function getDeleteFilterHandler({ history, location }) {
     const browserURL = location.pathname.concat(
       queryString ? `?${queryString}` : ''
     );
-    history.push(browserURL);
+    navigate(browserURL);
   };
 }
 
-export function getClearFiltersHandler({ history, location }) {
+export function getClearFiltersHandler({ location, navigate }) {
   return function handleClearFilters() {
     const queryParams = new URLSearchParams(location.search);
     queryParams.delete('labelSelector');
     const browserURL = location.pathname.concat(`?${queryParams.toString()}`);
-    history.push(browserURL);
+    navigate(browserURL);
   };
 }
 
@@ -299,7 +299,7 @@ export function getStatusFilter({ search }) {
   return status;
 }
 
-export function getStatusFilterHandler({ history, location }) {
+export function getStatusFilterHandler({ location, navigate }) {
   return function setStatusFilter(statusFilter) {
     const queryParams = new URLSearchParams(location.search);
     if (!statusFilter) {
@@ -308,7 +308,7 @@ export function getStatusFilterHandler({ history, location }) {
       queryParams.set('status', statusFilter);
     }
     const browserURL = location.pathname.concat(`?${queryParams.toString()}`);
-    history.push(browserURL);
+    navigate(browserURL);
   };
 }
 

packages/utils/src/utils/index.test.js

@@ -218,12 +218,12 @@ it('getFilters', () => {
 
 it('getAddFilterHandler', () => {
   const url = 'someURL';
-  const history = { push: jest.fn() };
+  const navigate = jest.fn();
   const location = { pathname: url, search: '?nonFilterQueryParam=someValue' };
-  const handleAddFilter = getAddFilterHandler({ history, location });
+  const handleAddFilter = getAddFilterHandler({ location, navigate });
   const labelFilters = ['foo1=bar1', 'foo2=bar2'];
   handleAddFilter(labelFilters);
-  expect(history.push).toHaveBeenCalledWith(
+  expect(navigate).toHaveBeenCalledWith(
     `${url}?nonFilterQueryParam=someValue&labelSelector=${encodeURIComponent(
       'foo1=bar1,foo2=bar2'
     )}`
@@ -234,29 +234,29 @@ describe('getDeleteFilterHandler', () => {
   it('should redirect to unfiltered URL if no filters remain', () => {
     const search = `?labelSelector=${encodeURIComponent('foo=bar')}`;
     const url = 'someURL';
-    const history = { push: jest.fn() };
+    const navigate = jest.fn();
     const location = { pathname: url, search };
     const handleDeleteFilter = getDeleteFilterHandler({
-      history,
-      location
+      location,
+      navigate
     });
     handleDeleteFilter('foo=bar');
-    expect(history.push).toHaveBeenCalledWith(url);
+    expect(navigate).toHaveBeenCalledWith(url);
   });
 
   it('should correctly remove a filter from the URL', () => {
     const search = `?labelSelector=${encodeURIComponent(
       'foo1=bar1,foo2=bar2'
     )}`;
     const url = 'someURL';
-    const history = { push: jest.fn() };
+    const navigate = jest.fn();
     const location = { pathname: url, search };
     const handleDeleteFilter = getDeleteFilterHandler({
-      history,
-      location
+      location,
+      navigate
     });
     handleDeleteFilter('foo1=bar1');
-    expect(history.push).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       `${url}?labelSelector=${encodeURIComponent('foo2=bar2')}`
     );
   });
@@ -490,14 +490,14 @@ describe('getStatusFilter', () => {
       'foo1=bar1,foo2=bar2'
     )}`;
     const url = 'someURL';
-    const history = { push: jest.fn() };
+    const navigate = jest.fn();
     const location = { pathname: url, search };
     const handleDeleteFilter = getDeleteFilterHandler({
-      history,
-      location
+      location,
+      navigate
     });
     handleDeleteFilter('foo1=bar1');
-    expect(history.push).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       `${url}?labelSelector=${encodeURIComponent('foo2=bar2')}`
     );
   });
@@ -507,47 +507,47 @@ describe('getStatusFilterHandler', () => {
   it('should redirect to unfiltered URL if no status specified', () => {
     const search = '?nonFilterQueryParam=someValue&status=cancelled';
     const url = 'someURL';
-    const history = { push: jest.fn() };
+    const navigate = jest.fn();
     const location = { pathname: url, search };
     const setStatusFilter = getStatusFilterHandler({
-      history,
-      location
+      location,
+      navigate
     });
     setStatusFilter('');
-    expect(history.push).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       `${url}?nonFilterQueryParam=someValue`
     );
   });
 
   it('should set a valid status filter in the URL', () => {
     const url = 'someURL';
-    const history = { push: jest.fn() };
+    const navigate = jest.fn();
     const location = {
       pathname: url,
       search: '?nonFilterQueryParam=someValue'
     };
     const setStatusFilter = getStatusFilterHandler({
-      history,
-      location
+      location,
+      navigate
     });
     const statusFilter = 'cancelled';
     setStatusFilter(statusFilter);
-    expect(history.push).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       `${url}?nonFilterQueryParam=someValue&status=${statusFilter}`
     );
   });
 
   it('should update the status filter in the URL', () => {
     const url = 'someURL';
-    const history = { push: jest.fn() };
+    const navigate = jest.fn();
     const location = { pathname: url, search: '?status=cancelled' };
     const setStatusFilter = getStatusFilterHandler({
-      history,
-      location
+      location,
+      navigate
     });
     const statusFilter = 'completed';
     setStatusFilter(statusFilter);
-    expect(history.push).toHaveBeenCalledWith(`${url}?status=${statusFilter}`);
+    expect(navigate).toHaveBeenCalledWith(`${url}?status=${statusFilter}`);
   });
 });