fix(frontend): keep query param when changing routes (#674)

* add tests for changing routes and maintaining query params

* fix(frontend): rollback to Router to maintain queryParams sync with store

cypress/integration/webapp/routes.ts

@@ -0,0 +1,33 @@
+describe('QueryParams', () => {
+  // on smaller screens component will be collapsed by default
+  beforeEach(() => {
+    cy.viewport(1440, 900);
+  });
+
+  // type a tag so that it's synced to the URL
+  // IMPORTANT! don't access the url directly since it will render this test useless
+  // since we are testing populating the queryParams and maintaining between routes
+  it('maintains queryParams when changing route', () => {
+    const myTag = 'myrandomtag{}';
+    const validate = () => {
+      cy.location().then((loc) => {
+        const urlParams = new URLSearchParams(loc.search);
+        expect(urlParams.get('query')).to.eq(myTag);
+      });
+    };
+
+    cy.visit('/');
+    cy.get('.tags-input').clear().type(myTag);
+    cy.get('.tags-query button').click();
+    validate();
+
+    cy.findByTestId('sidebar-continuous-comparison').click();
+    validate();
+
+    cy.findByTestId('sidebar-continuous-diff').click();
+    validate();
+
+    cy.findByTestId('sidebar-continuous-single').click();
+    validate();
+  });
+});

webapp/javascript/index.jsx

@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 
 import { Provider } from 'react-redux';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { Router, BrowserRouter, Switch, Route } from 'react-router-dom';
 import FPSStats from 'react-fps-stats';
 import { isExperimentalAdhocUIEnabled } from '@utils/features';
 import Notifications from '@ui/Notifications';
@@ -17,7 +17,6 @@ import AdhocComparison from './components/AdhocComparison';
 import ServerNotifications from './components/ServerNotifications';
 
 import history from './util/history';
-import basename from './util/baseurl';
 
 let showFps = false;
 try {
@@ -30,7 +29,7 @@ try {
 
 ReactDOM.render(
   <Provider store={store}>
-    <BrowserRouter history={history} basename={basename()}>
+    <Router history={history}>
       <ServerNotifications />
       <Notifications />
       <div className="app">
@@ -57,7 +56,7 @@ ReactDOM.render(
           )}
         </Switch>
       </div>
-    </BrowserRouter>
+    </Router>
     {showFps ? <FPSStats left="auto" top="auto" bottom={2} right={2} /> : ''}
   </Provider>,
   document.getElementById('root')

webapp/javascript/util/history.js

@@ -1,4 +1,8 @@
 // src/myHistory.js
 import { createBrowserHistory } from 'history';
-const history = createBrowserHistory();
+import basename from './baseurl';
+
+const history = createBrowserHistory({
+  basename: basename(),
+});
 export default history;