feat: use rison for list view filters stateful urls

superset-frontend/package.json

@@ -125,6 +125,7 @@
     "omnibar": "^2.1.1",
     "polished": "^3.6.5",
     "prop-types": "^15.7.2",
+    "query-string": "^6.13.7",
     "re-resizable": "^6.6.1",
     "react": "^16.13.1",
     "react-ace": "^5.10.0",
@@ -166,7 +167,7 @@
     "rison": "^0.1.1",
     "shortid": "^2.2.6",
     "urijs": "^1.18.10",
-    "use-query-params": "^0.4.5"
+    "use-query-params": "^1.1.9"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.5",

superset-frontend/spec/helpers/ProviderWrapper.tsx

@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { ThemeProvider } from '@superset-ui/core';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { QueryParamProvider } from 'use-query-params';
+
+// Wrapper component for mounting TODO: move to util file
+export function ProviderWrapper(props: any) {
+  const { children, theme } = props;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Router>
+        <QueryParamProvider
+          ReactRouterRoute={Route}
+          stringifyOptions={{ encode: false }}
+        >
+          {children}
+        </QueryParamProvider>
+      </Router>
+    </ThemeProvider>
+  );
+}

superset-frontend/spec/helpers/theming.ts

@@ -17,8 +17,9 @@
  * under the License.
  */
 import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { supersetTheme } from '@superset-ui/core';
 import { ReactElement } from 'react';
+import { ProviderWrapper } from './ProviderWrapper';
 
 type optionsType = {
   wrappingComponentProps?: any;
@@ -32,7 +33,7 @@ export function styledMount(
 ) {
   return enzymeMount(component, {
     ...options,
-    wrappingComponent: ThemeProvider,
+    wrappingComponent: ProviderWrapper,
     wrappingComponentProps: {
       theme: supersetTheme,
       ...options?.wrappingComponentProps,
@@ -46,7 +47,7 @@ export function styledShallow(
 ) {
   return enzymeShallow(component, {
     ...options,
-    wrappingComponent: ThemeProvider,
+    wrappingComponent: ProviderWrapper,
     wrappingComponentProps: {
       theme: supersetTheme,
       ...options?.wrappingComponentProps,

superset-frontend/spec/javascripts/components/AlteredSliceTag_spec.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import { getChartControlPanelRegistry } from '@superset-ui/core';
 
 import AlteredSliceTag from 'src/components/AlteredSliceTag';
@@ -34,7 +34,7 @@ import {
 } from './fixtures/AlteredSliceTag';
 
 const getTableWrapperFromModalBody = modalBody =>
-  modalBody.find(ListView).shallow().find(TableCollection).shallow();
+  modalBody.find(ListView).find(TableCollection);
 
 describe('AlteredSliceTag', () => {
   let wrapper;
@@ -47,7 +47,7 @@ describe('AlteredSliceTag', () => {
       fakePluginControls,
     );
     props = { ...defaultProps };
-    wrapper = shallow(<AlteredSliceTag {...props} />);
+    wrapper = mount(<AlteredSliceTag {...props} />);
     ({ controlsMap } = wrapper.instance().state);
   });
 
@@ -63,7 +63,7 @@ describe('AlteredSliceTag', () => {
       origFormData: props.origFormData,
       currentFormData: props.origFormData,
     };
-    wrapper = shallow(<AlteredSliceTag {...props} />);
+    wrapper = mount(<AlteredSliceTag {...props} />);
     expect(wrapper.instance().state.rows).toEqual([]);
     expect(wrapper.instance().state.hasDiffs).toBe(false);
     expect(wrapper.instance().render()).toBeNull();
@@ -78,7 +78,7 @@ describe('AlteredSliceTag', () => {
       currentFormData: { ...props.currentFormData },
       origFormData: { ...props.origFormData },
     };
-    wrapper = shallow(<AlteredSliceTag {...props} />);
+    wrapper = mount(<AlteredSliceTag {...props} />);
     const wrapperInstance = wrapper.instance();
     wrapperInstance.UNSAFE_componentWillReceiveProps(newProps);
     expect(getRowsFromDiffsStub).toHaveBeenCalled();
@@ -98,7 +98,7 @@ describe('AlteredSliceTag', () => {
 
   describe('renderTriggerNode', () => {
     it('renders a TooltipWrapper', () => {
-      const triggerNode = shallow(
+      const triggerNode = mount(
         <div>{wrapper.instance().renderTriggerNode()}</div>,
       );
       expect(triggerNode.find(TooltipWrapper)).toHaveLength(1);
@@ -107,14 +107,14 @@ describe('AlteredSliceTag', () => {
 
   describe('renderModalBody', () => {
     it('renders a Table', () => {
-      const modalBody = shallow(
+      const modalBody = mount(
         <div>{wrapper.instance().renderModalBody()}</div>,
       );
       expect(modalBody.find(ListView)).toHaveLength(1);
     });
 
     it('renders a thead', () => {
-      const modalBody = shallow(
+      const modalBody = mount(
         <div>{wrapper.instance().renderModalBody()}</div>,
       );
       expect(
@@ -123,7 +123,7 @@ describe('AlteredSliceTag', () => {
     });
 
     it('renders th', () => {
-      const modalBody = shallow(
+      const modalBody = mount(
         <div>{wrapper.instance().renderModalBody()}</div>,
       );
       const th = getTableWrapperFromModalBody(modalBody).find('th');
@@ -134,15 +134,15 @@ describe('AlteredSliceTag', () => {
     });
 
     it('renders the correct number of Tr', () => {
-      const modalBody = shallow(
+      const modalBody = mount(
         <div>{wrapper.instance().renderModalBody()}</div>,
       );
       const tr = getTableWrapperFromModalBody(modalBody).find('tr');
       expect(tr).toHaveLength(8);
     });
 
     it('renders the correct number of td', () => {
-      const modalBody = shallow(
+      const modalBody = mount(
         <div>{wrapper.instance().renderModalBody()}</div>,
       );
       const td = getTableWrapperFromModalBody(modalBody).find('td');
@@ -155,12 +155,12 @@ describe('AlteredSliceTag', () => {
 
   describe('renderRows', () => {
     it('returns an array of rows with one tr and three td', () => {
-      const modalBody = shallow(
+      const modalBody = mount(
         <div>{wrapper.instance().renderModalBody()}</div>,
       );
       const rows = getTableWrapperFromModalBody(modalBody).find('tr');
       expect(rows).toHaveLength(8);
-      const fakeRow = shallow(<div>{rows.get(1)}</div>);
+      const fakeRow = mount(<div>{rows.get(1)}</div>);
       expect(fakeRow.find('tr')).toHaveLength(1);
       expect(fakeRow.find('td')).toHaveLength(3);
     });

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import { act } from 'react-dom/test-utils';
 import { QueryParamProvider } from 'use-query-params';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
@@ -338,7 +338,7 @@ describe('ListView', () => {
       filters: [...mockedProps.filters, { id: 'some_column' }],
     };
     expect(() => {
-      shallow(<ListView {...props} />, {
+      mount(<ListView {...props} />, {
         wrappingComponent: ThemeProvider,
         wrappingComponentProps: { theme: supersetTheme },
       });

superset-frontend/src/components/ListView/Filters.tsx

@@ -87,8 +87,18 @@ function SelectFilter({
   };
 
   const options = [clearFilterSelect, ...selects];
+  let initialOption = clearFilterSelect;
 
-  const [selectedOption, setSelectedOption] = useState(clearFilterSelect);
+  // Set initial value if not async
+  if (!fetchSelects) {
+    const matchingOption = options.find(x => x.value === initialValue);
+
+    if (matchingOption) {
+      initialOption = matchingOption;
+    }
+  }
+
+  const [selectedOption, setSelectedOption] = useState(initialOption);
   const onChange = (selected: SelectOption | null) => {
     if (selected === null) return;
     onSelect(