From 3669eb99f298a520dc3b3e725aa0658dcaa12660 Mon Sep 17 00:00:00 2001
From: Meenal Trivedi <79007582+meenal06@users.noreply.github.com>
Date: Wed, 14 Apr 2021 10:32:03 +0530
Subject: [PATCH] Upgrade to react-router-dom v5.2.0 (#727)

* feat: upgrade to react-router-dom v5.2.0

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>

* fix: lint

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>

* fix

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>

* update snapshots to accomodate latest changes

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>

* fix

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>

* fix: object only has getter

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>

* fix: tests

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>
Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
---
 packages/jaeger-ui/package.json                   |  2 +-
 .../jaeger-ui/src/components/App/TopNav.test.js   |  7 +++----
 .../App/__snapshots__/index.test.js.snap          |  3 ---
 .../src/components/DeepDependencies/url.test.js   |  4 ++++
 .../src/components/QualityMetrics/url.test.js     |  4 ++++
 .../__snapshots__/DiffSelection.test.js.snap      |  1 -
 .../__snapshots__/ResultItemTitle.test.js.snap    |  1 -
 .../src/components/SearchTracePage/url.test.js    |  4 ++++
 .../src/components/TraceDiff/url.test.js          |  4 ++++
 .../__snapshots__/AltViewOptions.test.js.snap     | 10 ++++------
 packages/jaeger-ui/src/index.js                   | 15 +++++++++++++--
 11 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
index 7a007c61ff..991a3f3b3d 100644
--- a/packages/jaeger-ui/package.json
+++ b/packages/jaeger-ui/package.json
@@ -87,7 +87,7 @@
     "react-icons": "2.2.7",
     "react-metrics": "^2.3.2",
     "react-redux": "^5.0.6",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.2.0",
     "react-router-redux": "5.0.0-alpha.6",
     "react-virtualized-select": "^3.1.0",
     "react-vis": "^1.7.2",
diff --git a/packages/jaeger-ui/src/components/App/TopNav.test.js b/packages/jaeger-ui/src/components/App/TopNav.test.js
index 4b0c778e34..cfe770afd0 100644
--- a/packages/jaeger-ui/src/components/App/TopNav.test.js
+++ b/packages/jaeger-ui/src/components/App/TopNav.test.js
@@ -72,17 +72,16 @@ describe('<TopNav>', () => {
 
   describe('renders the default menu options', () => {
     it('renders the "JAEGER UI" link', () => {
-      const items = wrapper.find(Link).findWhere(link => /JAEGER UI/.test(link.text()));
+      const items = wrapper.find(Link).findWhere(link => link.prop('to') === '/');
       expect(items.length).toBe(1);
     });
-
     it('renders the "Search" button', () => {
-      const items = wrapper.find(Link).findWhere(link => /Search/.test(link.text()));
+      const items = wrapper.find(Link).findWhere(link => link.prop('to') === '/search');
       expect(items.length).toBe(1);
     });
 
     it('renders the "System Architecture" button', () => {
-      const items = wrapper.find(Link).findWhere(link => /System Architecture/.test(link.text()));
+      const items = wrapper.find(Link).findWhere(link => link.prop('to') === '/dependencies');
       expect(items.length).toBe(1);
     });
   });
diff --git a/packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap
index 601feb1701..541c5f172f 100644
--- a/packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap
+++ b/packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap
@@ -63,19 +63,16 @@ exports[`JaegerUIApp does not explode 1`] = `
         <Redirect
           exact={true}
           path="/"
-          push={false}
           to="/search"
         />
         <Redirect
           exact={true}
           path=""
-          push={false}
           to="/search"
         />
         <Redirect
           exact={true}
           path="/"
-          push={false}
           to="/search"
         />
         <Route
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/url.test.js b/packages/jaeger-ui/src/components/DeepDependencies/url.test.js
index 81ab2f25f8..adbb3eed0a 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/url.test.js
+++ b/packages/jaeger-ui/src/components/DeepDependencies/url.test.js
@@ -17,6 +17,10 @@ import * as reactRouterDom from 'react-router-dom';
 
 import { ROUTE_PATH, matches, getUrl, getUrlState, sanitizeUrlState } from './url';
 
+jest.mock('react-router-dom', () => ({
+  matchPath: jest.fn(),
+}));
+
 describe('DeepDependencyGraph/url', () => {
   describe('matches', () => {
     const path = 'path argument';
diff --git a/packages/jaeger-ui/src/components/QualityMetrics/url.test.js b/packages/jaeger-ui/src/components/QualityMetrics/url.test.js
index 2a8d777010..e3ebf4e470 100644
--- a/packages/jaeger-ui/src/components/QualityMetrics/url.test.js
+++ b/packages/jaeger-ui/src/components/QualityMetrics/url.test.js
@@ -16,6 +16,10 @@ import * as reactRouterDom from 'react-router-dom';
 
 import { ROUTE_PATH, matches, getUrl, getUrlState } from './url';
 
+jest.mock('react-router-dom', () => ({
+  matchPath: jest.fn(),
+}));
+
 describe('TraceDiff/url', () => {
   const lookback = 42;
   const service = 'test-service';
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap
index 166db898e7..4d0d064ad4 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap
@@ -97,7 +97,6 @@ exports[`DiffSelection renders multiple traces as expected 1`] = `
     className="DiffSelection--message"
   >
     <Link
-      replace={false}
       to="/trace/trace-id-0...trace-id-1?cohort=trace-id-0&cohort=trace-id-1"
     >
       <Button
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/ResultItemTitle.test.js.snap b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/ResultItemTitle.test.js.snap
index e66277341a..abf6c44390 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/ResultItemTitle.test.js.snap
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/ResultItemTitle.test.js.snap
@@ -15,7 +15,6 @@ exports[`ResultItemTitle renders as expected 1`] = `
   />
   <Link
     className="ResultItemTitle--item ub-flex-auto"
-    replace={false}
     to="linkToValue"
   >
     <span
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/url.test.js b/packages/jaeger-ui/src/components/SearchTracePage/url.test.js
index d1143b16c7..ccacc155d9 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/url.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/url.test.js
@@ -17,6 +17,10 @@ import * as reactRouterDom from 'react-router-dom';
 import { MAX_LENGTH } from '../DeepDependencies/Graph/DdgNodeContent/constants';
 import { ROUTE_PATH, getUrl, getUrlState, isSameQuery, matches } from './url';
 
+jest.mock('react-router-dom', () => ({
+  matchPath: jest.fn(),
+}));
+
 describe('SearchTracePage/url', () => {
   const span0 = 'span-0';
   const span1 = 'span-1';
diff --git a/packages/jaeger-ui/src/components/TraceDiff/url.test.js b/packages/jaeger-ui/src/components/TraceDiff/url.test.js
index 9d6a4cf4a2..05743a5bdc 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/url.test.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/url.test.js
@@ -16,6 +16,10 @@ import * as reactRouterDom from 'react-router-dom';
 
 import { ROUTE_PATH, matches, getUrl } from './url';
 
+jest.mock('react-router-dom', () => ({
+  matchPath: jest.fn(),
+}));
+
 describe('TraceDiff/url', () => {
   describe('matches', () => {
     const path = 'path argument';
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap
index 11c0ae3b33..9ee4763e14 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap
@@ -28,26 +28,24 @@ exports[`AltViewOptions renders correctly 1`] = `
         </a>
       </MenuItem>
       <MenuItem>
-        <Link
+        <ForwardRef
           onClick={[MockFunction]}
           rel="noopener noreferrer"
-          replace={false}
           target="_blank"
           to="/api/traces/test trace ID?prettyPrint=true"
         >
           Trace JSON
-        </Link>
+        </ForwardRef>
       </MenuItem>
       <MenuItem>
-        <Link
+        <ForwardRef
           onClick={[MockFunction]}
           rel="noopener noreferrer"
-          replace={false}
           target="_blank"
           to="/api/traces/test trace ID?raw=true&prettyPrint=true"
         >
           Trace JSON (unadjusted)
-        </Link>
+        </ForwardRef>
       </MenuItem>
     </Menu>
   }
diff --git a/packages/jaeger-ui/src/index.js b/packages/jaeger-ui/src/index.js
index f8da2bfb77..6a8ae2e997 100644
--- a/packages/jaeger-ui/src/index.js
+++ b/packages/jaeger-ui/src/index.js
@@ -18,6 +18,7 @@
 import './site-prefix';
 
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import ReactDOM from 'react-dom';
 import { document } from 'global';
 
@@ -37,8 +38,18 @@ const UI_ROOT_ID = 'jaeger-ui-root';
 
 if (trackingContext) {
   trackingContext.context(() => {
-    ReactDOM.render(<JaegerUIApp />, document.getElementById(UI_ROOT_ID));
+    ReactDOM.render(
+      <BrowserRouter>
+        <JaegerUIApp />
+      </BrowserRouter>,
+      document.getElementById(UI_ROOT_ID)
+    );
   });
 } else {
-  ReactDOM.render(<JaegerUIApp />, document.getElementById(UI_ROOT_ID));
+  ReactDOM.render(
+    <BrowserRouter>
+      <JaegerUIApp />
+    </BrowserRouter>,
+    document.getElementById(UI_ROOT_ID)
+  );
 }