Replace react-router-redux with redux-first-history (#1826)

## Which problem is this PR solving? - related to: #1825 - The `react-router-redux` is a dead project and is not compatible with `react-router-dom` `v5` and `v6`. - The whole react-router community suggested using `redux-first-history` which is compatible with `v4`, `v5` and `v6` both. ## How was this change tested? - Manually along with redux dev toolkit and automated testing ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
jaegertracing · Sep 27, 2023 · 066dd4b · 066dd4b
1 parent e6422e3
commit 066dd4b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 37 deletions.
diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
@@ -84,12 +84,12 @@
     "react-json-view-lite": "1.0.0",
     "react-redux": "^8.1.2",
     "react-router-dom": "4.3.1",
-    "react-router-redux": "5.0.0-alpha.8",
     "react-vis": "^1.7.2",
     "react-vis-force": "^0.3.1",
     "react-window": "^1.8.3",
     "redux": "^4.2.1",
     "redux-actions": "2.6.5",
+    "redux-first-history": "^5.1.1",
     "redux-form": "^8.3.10",
     "redux-promise-middleware": "^6.1.3",
     "reselect": "^4.1.6",

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
@@ -12,17 +12,20 @@ exports[`JaegerUIApp does not explode 1`] = `
     }
   }
 >
-  <ConnectedRouter
+  <Router
     history={
       Object {
         "action": "POP",
+        "back": [Function],
         "block": [Function],
         "createHref": [Function],
+        "forward": [Function],
         "go": [Function],
         "goBack": [Function],
         "goForward": [Function],
         "length": 1,
         "listen": [Function],
+        "listenObject": false,
         "location": Object {
           "hash": "",
           "pathname": "/",
@@ -33,15 +36,6 @@ exports[`JaegerUIApp does not explode 1`] = `
         "replace": [Function],
       }
     }
-    store={
-      Object {
-        "@@observable": [Function],
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
   >
     <withRouter(Connect(PageImpl))>
       <Switch>
@@ -138,6 +132,6 @@ exports[`JaegerUIApp does not explode 1`] = `
         />
       </Switch>
     </withRouter(Connect(PageImpl))>
-  </ConnectedRouter>
+  </Router>
 </Provider>
 `;
diff --git a/packages/jaeger-ui/src/components/App/index.jsx b/packages/jaeger-ui/src/components/App/index.jsx
@@ -13,10 +13,8 @@
 // limitations under the License.
 
 import React, { Component } from 'react';
-import createHistory from 'history/createBrowserHistory';
 import { Provider } from 'react-redux';
-import { Route, Redirect, Switch } from 'react-router-dom';
-import { ConnectedRouter } from 'react-router-redux';
+import { Route, Redirect, Switch, Router } from 'react-router-dom';
 
 import NotFound from './NotFound';
 import Page from './Page';
@@ -35,28 +33,25 @@ import { ROUTE_PATH as tracePath } from '../TracePage/url';
 import MonitorATMPage from '../Monitor';
 import { ROUTE_PATH as monitorATMPath } from '../Monitor/url';
 import JaegerAPI, { DEFAULT_API_ROOT } from '../../api/jaeger';
-import configureStore from '../../utils/configure-store';
 import processScripts from '../../utils/config/process-scripts';
 import prefixUrl from '../../utils/prefix-url';
 
 import '../common/vars.css';
 import '../common/utils.css';
 import './index.css';
-
-const history = createHistory();
+import { history, store } from '../../utils/configure-store';
 
 export default class JaegerUIApp extends Component {
   constructor(props) {
     super(props);
-    this.store = configureStore(history);
     JaegerAPI.apiRoot = DEFAULT_API_ROOT;
     processScripts();
   }
 
   render() {
     return (
-      <Provider store={this.store}>
-        <ConnectedRouter store={this.store} history={history}>
+      <Provider store={store}>
+        <Router history={history}>
           <Page>
             <Switch>
               <Route path={searchPath} component={SearchTracePage} />
@@ -74,7 +69,7 @@ export default class JaegerUIApp extends Component {
               <Route component={NotFound} />
             </Switch>
           </Page>
-        </ConnectedRouter>
+        </Router>
       </Provider>
     );
   }

diff --git a/packages/jaeger-ui/src/middlewares/index.js b/packages/jaeger-ui/src/middlewares/index.js
@@ -14,7 +14,7 @@
 
 import promiseMiddleware from 'redux-promise-middleware';
 import { change } from 'redux-form';
-import { replace } from 'react-router-redux';
+import { replace } from 'redux-first-history';
 
 import { searchTraces, fetchServiceOperations } from '../actions/jaeger-api';
 import { getUrl as getSearchUrl } from '../components/SearchTracePage/url';

diff --git a/packages/jaeger-ui/src/utils/configure-store.js b/packages/jaeger-ui/src/utils/configure-store.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,7 +14,8 @@
 // limitations under the License.
 
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
-import { routerReducer, routerMiddleware } from 'react-router-redux';
+import { createReduxHistoryContext } from 'redux-first-history';
+import { createBrowserHistory } from 'history';
 
 import traceDiff from '../components/TraceDiff/duck';
 import archive from '../components/TracePage/ArchiveNotifier/duck';
@@ -22,7 +24,11 @@ import jaegerReducers from '../reducers';
 import * as jaegerMiddlewares from '../middlewares';
 import { getAppEnvironment } from './constants';
 
-export default function configureStore(history) {
+const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
+  history: createBrowserHistory(),
+});
+
+export default function configureStore() {
   return createStore(
     combineReducers({
       ...jaegerReducers,
@@ -36,11 +42,14 @@ export default function configureStore(history) {
         ...Object.keys(jaegerMiddlewares)
           .map(key => jaegerMiddlewares[key])
           .filter(Boolean),
-        routerMiddleware(history)
+        routerMiddleware
       ),
       getAppEnvironment() !== 'production' && window && window.__REDUX_DEVTOOLS_EXTENSION__
         ? window.__REDUX_DEVTOOLS_EXTENSION__()
         : noop => noop
     )
   );
 }
+
+export const store = configureStore();
+export const history = createReduxHistory(store);
diff --git a/yarn.lock b/yarn.lock
@@ -9876,7 +9876,7 @@ promzard@^1.0.0:
   dependencies:
     read "^2.0.0"
 
-prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10538,16 +10538,7 @@ react-router-dom@4.3.1:
     react-router "^4.3.1"
     warning "^4.0.1"
 
-react-router-redux@5.0.0-alpha.8:
-  version "5.0.0-alpha.8"
-  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-5.0.0-alpha.8.tgz#5242c705730b2ac862aff7a8e90f870d0cf45e12"
-  integrity sha512-R/Cw62KtlMIifIjLF/xyiVOdHsooXK4uUW/ycX+jYfy1haKqmeY/N/bBiwRFNrMBat1Bn30ynDlgckwFcXLmIQ==
-  dependencies:
-    history "^4.7.2"
-    prop-types "^15.6.0"
-    react-router "^4.2.0"
-
-react-router@^4.2.0, react-router@^4.3.1:
+react-router@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
   dependencies:
@@ -10770,6 +10761,11 @@ redux-actions@2.6.5:
     reduce-reducers "^0.4.3"
     to-camel-case "^1.0.0"
 
+redux-first-history@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/redux-first-history/-/redux-first-history-5.1.1.tgz#6aec4a3eaa52dbaaf2683776324d9219b182fab4"
+  integrity sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw==
+
 redux-form@^8.3.10:
   version "8.3.10"
   resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-8.3.10.tgz#335657fafd4b26b91b4ce65371cd9dabe3648158"