[fix] Push browser history on pagination in react listviews (#9624)

* improve history for query params

* fix: push browser history on pagination in react listviews

* fix spec

Co-authored-by: Tai Dupree <tdupreetan@gmail.com>

superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx

@@ -21,6 +21,7 @@ import { mount, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { MenuItem, Pagination } from 'react-bootstrap';
 import Select from 'react-select';
+import { QueryParamProvider } from 'use-query-params';
 
 import ListView from 'src/components/ListView/ListView';
 import ListViewFilters from 'src/components/ListView/Filters';
@@ -29,6 +30,16 @@ import { areArraysShallowEqual } from 'src/reduxUtils';
 import { ThemeProvider } from 'emotion-theming';
 import { supersetTheme } from '@superset-ui/style';
 
+export function makeMockLocation(query) {
+  const queryStr = encodeURIComponent(query);
+  return {
+    protocol: 'http:',
+    host: 'localhost',
+    pathname: '/',
+    search: queryStr.length ? `?${queryStr}` : '',
+  };
+}
+
 const mockedProps = {
   title: 'Data Table',
   columns: [
@@ -64,11 +75,19 @@ const mockedProps = {
   bulkActions: [{ name: 'do something', onSelect: jest.fn() }],
 };
 
+const factory = (props = mockedProps) =>
+  mount(
+    <QueryParamProvider location={makeMockLocation()}>
+      <ListView {...props} />
+    </QueryParamProvider>,
+    {
+      wrappingComponent: ThemeProvider,
+      wrappingComponentProps: { theme: supersetTheme },
+    },
+  );
+
 describe('ListView', () => {
-  const wrapper = mount(<ListView {...mockedProps} />, {
-    wrappingComponent: ThemeProvider,
-    wrappingComponentProps: { theme: supersetTheme },
-  });
+  const wrapper = factory();
 
   afterEach(() => {
     mockedProps.fetchData.mockClear();
@@ -327,10 +346,7 @@ describe('ListView with new UI filters', () => {
     ],
   };
 
-  const wrapper = mount(<ListView {...newFiltersProps} />, {
-    wrappingComponent: ThemeProvider,
-    wrappingComponentProps: { theme: supersetTheme },
-  });
+  const wrapper = factory(newFiltersProps);
 
   afterEach(() => {
     mockedProps.fetchData.mockClear();

superset-frontend/src/components/ListView/utils.ts

@@ -33,6 +33,8 @@ import {
   useQueryParams,
 } from 'use-query-params';
 
+import { isEqual } from 'lodash';
+
 import {
   FetchDataConfig,
   Filter,
@@ -191,7 +193,7 @@ export function useListViewState({
   useEffect(() => {
     if (initialFilters.length) {
       setInternalFilters(
-        mergeCreateFilterValues(initialFilters, query.filters),
+        mergeCreateFilterValues(initialFilters, query.filters || []),
       );
     }
   }, [initialFilters]);
@@ -205,10 +207,23 @@ export function useListViewState({
       queryParams.sortColumn = sortBy[0].id;
       queryParams.sortOrder = sortBy[0].desc ? 'desc' : 'asc';
     }
-    setQuery(queryParams);
+
+    const method =
+      typeof query.pageIndex !== 'undefined' &&
+      queryParams.pageIndex !== query.pageIndex
+        ? 'push'
+        : 'replace';
+
+    setQuery(queryParams, method);
     fetchData({ pageIndex, pageSize, sortBy, filters });
   }, [fetchData, pageIndex, pageSize, sortBy, filters]);
 
+  useEffect(() => {
+    if (!isEqual(initialState.pageIndex, pageIndex)) {
+      gotoPage(initialState.pageIndex);
+    }
+  }, [query]);
+
   const filtersApplied = internalFilters.every(
     ({ id, value, operator }, index) =>
       id &&

superset-frontend/src/welcome/App.jsx

@@ -22,6 +22,7 @@ import thunk from 'redux-thunk';
 import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { QueryParamProvider } from 'use-query-params';
 import { ThemeProvider } from 'emotion-theming';
 
 import { initFeatureFlags } from 'src/featureFlags';
@@ -60,22 +61,24 @@ const App = () => (
   <Provider store={store}>
     <ThemeProvider theme={supersetTheme}>
       <Router>
-        <Menu data={menu} />
-        <Switch>
-          <Route path="/superset/welcome/">
-            <Welcome user={user} />
-          </Route>
-          <Route path="/dashboard/list/">
-            <DashboardList user={user} />
-          </Route>
-          <Route path="/chart/list/">
-            <ChartList user={user} />
-          </Route>
-          <Route path="/tablemodelview/list/">
-            <DatasetList user={user} />
-          </Route>
-        </Switch>
-        <ToastPresenter />
+        <QueryParamProvider ReactRouterRoute={Route}>
+          <Menu data={menu} />
+          <Switch>
+            <Route path="/superset/welcome/">
+              <Welcome user={user} />
+            </Route>
+            <Route path="/dashboard/list/">
+              <DashboardList user={user} />
+            </Route>
+            <Route path="/chart/list/">
+              <ChartList user={user} />
+            </Route>
+            <Route path="/tablemodelview/list/">
+              <DatasetList user={user} />
+            </Route>
+          </Switch>
+          <ToastPresenter />
+        </QueryParamProvider>
       </Router>
     </ThemeProvider>
   </Provider>