refactor: Upgrade Redux (#11967)

* upgrade redux and react-redux, adjust types * first round of test fixes * fix rest of unit tests * lint Co-authored-by: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
apache · Dec 9, 2020 · 6270fa2 · 6270fa2
1 parent 9121482
commit 6270fa2
Show file tree

Hide file tree

Showing 41 changed files with 354 additions and 253 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -145,7 +145,7 @@
     "react-jsonschema-form": "^1.2.0",
     "react-loadable": "^5.5.0",
     "react-markdown": "^4.3.1",
-    "react-redux": "^5.1.2",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-search-input": "^0.11.3",
     "react-select": "^3.1.0",
@@ -161,7 +161,7 @@
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-virtualized-select": "^3.1.3",
     "react-window": "^1.8.5",
-    "redux": "^3.5.2",
+    "redux": "^4.0.5",
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^2.1.0",
     "redux-undo": "^1.0.0-beta9-9-7",
@@ -210,7 +210,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-gravatar": "^2.6.8",
     "@types/react-json-tree": "^0.6.11",
-    "@types/react-redux": "^5.0.2",
+    "@types/react-redux": "^7.1.10",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-select": "^3.0.19",
     "@types/react-table": "^7.0.19",

diff --git a/superset-frontend/spec/javascripts/components/URLShortLinkButton_spec.jsx b/superset-frontend/spec/javascripts/components/URLShortLinkButton_spec.jsx
@@ -33,9 +33,9 @@ describe('URLShortLinkButton', () => {
   function setup() {
     const mockStore = configureStore([]);
     const store = mockStore({});
-    return shallow(<URLShortLinkButton {...defaultProps} />, {
-      context: { store },
-    }).dive();
+    return shallow(
+      <URLShortLinkButton store={store} {...defaultProps} />,
+    ).dive();
   }
 
   it('renders OverlayTrigger', () => {

diff --git a/superset-frontend/spec/javascripts/components/URLShortLinkModal_spec.jsx b/superset-frontend/spec/javascripts/components/URLShortLinkModal_spec.jsx
@@ -34,9 +34,9 @@ describe('URLShortLinkModal', () => {
   function setup() {
     const mockStore = configureStore([]);
     const store = mockStore({});
-    return shallow(<URLShortLinkModal {...defaultProps} />, {
-      context: { store },
-    }).dive();
+    return shallow(
+      <URLShortLinkModal store={store} {...defaultProps} />,
+    ).dive();
   }
 
   it('renders ModalTrigger', () => {

diff --git a/superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx b/superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { supersetTheme } from '@superset-ui/core';
+import { Provider } from 'react-redux';
 import * as SupersetUI from '@superset-ui/core';
 import { CHART_UPDATE_SUCCEEDED } from 'src/chart/chartAction';
 import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
@@ -57,7 +58,11 @@ describe('FiltersBadge', () => {
       },
       dashboardFilters,
     });
-    const wrapper = shallow(<FiltersBadge {...{ store }} chartId={sliceId} />);
+    const wrapper = shallow(
+      <Provider store={store}>
+        <FiltersBadge chartId={sliceId} />,
+      </Provider>,
+    );
     expect(
       wrapper.dive().find('[data-test="applied-filter-count"]'),
     ).not.toExist();
@@ -76,7 +81,9 @@ describe('FiltersBadge', () => {
       },
       dashboardFilters,
     });
-    const wrapper = shallow(<FiltersBadge {...{ store }} chartId={sliceId} />);
+    const wrapper = shallow(
+      <FiltersBadge {...{ store }} chartId={sliceId} />,
+    ).dive();
     expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
     expect(
       wrapper.dive().find('[data-test="applied-filter-count"]'),
@@ -97,7 +104,9 @@ describe('FiltersBadge', () => {
       },
       dashboardFilters,
     });
-    const wrapper = shallow(<FiltersBadge {...{ store }} chartId={sliceId} />);
+    const wrapper = shallow(
+      <FiltersBadge {...{ store }} chartId={sliceId} />,
+    ).dive();
     expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
     expect(
       wrapper.dive().find('[data-test="applied-filter-count"]'),

diff --git a/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx b/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx
@@ -55,8 +55,7 @@ fetchMock.get(DATASOURCES_ENDPOINT, [mockDatasource['7__table']]);
 fetchMock.get(DATASOURCE_ENDPOINT, DATASOURCE_PAYLOAD);
 
 async function mountAndWait(props = mockedProps) {
-  const mounted = mount(<ChangeDatasourceModal {...props} />, {
-    context: { store },
+  const mounted = mount(<ChangeDatasourceModal store={store} {...props} />, {
     wrappingComponent: ThemeProvider,
     wrappingComponentProps: { theme: supersetTheme },
   });

diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
@@ -51,8 +51,8 @@ describe('DatasourceEditor', () => {
   let isFeatureEnabledMock;
 
   beforeEach(() => {
-    el = <DatasourceEditor {...props} />;
-    wrapper = shallow(el, { context: { store } }).dive();
+    el = <DatasourceEditor {...props} store={store} />;
+    wrapper = shallow(el).dive();
     inst = wrapper.instance();
   });
 

diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceModal_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceModal_spec.jsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import configureStore from 'redux-mock-store';
 import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
 import thunk from 'redux-thunk';
 import sinon from 'sinon';
@@ -50,11 +51,15 @@ const mockedProps = {
 };
 
 async function mountAndWait(props = mockedProps) {
-  const mounted = mount(<DatasourceModal {...props} />, {
-    context: { store },
-    wrappingComponent: ThemeProvider,
-    wrappingComponentProps: { theme: supersetTheme },
-  });
+  const mounted = mount(
+    <Provider store={store}>
+      <DatasourceModal {...props} />
+    </Provider>,
+    {
+      wrappingComponent: ThemeProvider,
+      wrappingComponentProps: { theme: supersetTheme },
+    },
+  );
   await waitForComponentToPaint(mounted);
 
   return mounted;

diff --git a/superset-frontend/spec/javascripts/explore/components/ExploreViewContainer_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ExploreViewContainer_spec.jsx
@@ -17,9 +17,11 @@
  * under the License.
  */
 import React from 'react';
+import * as ReactAll from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import sinon from 'sinon';
+import { Subscription } from 'react-redux';
 import { shallow } from 'enzyme';
 
 import getInitialState from 'src/explore/reducers/getInitialState';
@@ -36,6 +38,13 @@ describe('ExploreViewContainer', () => {
   let wrapper;
   let isFeatureEnabledMock;
 
+  jest.spyOn(ReactAll, 'useContext').mockImplementation(() => {
+    return {
+      store,
+      subscription: new Subscription(store),
+    };
+  });
+
   beforeAll(() => {
     isFeatureEnabledMock = jest
       .spyOn(featureFlags, 'isFeatureEnabled')
@@ -57,10 +66,11 @@ describe('ExploreViewContainer', () => {
   });
 
   beforeEach(() => {
-    wrapper = shallow(<ExploreViewContainer />, {
-      context: { store },
+    wrapper = shallow(<ExploreViewContainer store={store} />, {
       disableLifecycleMethods: true,
-    }).dive();
+    })
+      .dive()
+      .dive();
   });
 
   it('renders', () => {

diff --git a/superset-frontend/spec/javascripts/explore/components/MetricDefinitionOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/MetricDefinitionOption_spec.jsx
@@ -29,9 +29,7 @@ describe('MetricDefinitionOption', () => {
   const store = mockStore({});
 
   function setup(props) {
-    return shallow(<MetricDefinitionOption {...props} />, {
-      context: { store },
-    }).dive();
+    return shallow(<MetricDefinitionOption store={store} {...props} />).dive();
   }
 
   it('renders a MetricOption given a saved metric', () => {

diff --git a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx b/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
@@ -20,6 +20,7 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { bindActionCreators } from 'redux';
+import { Provider } from 'react-redux';
 
 import { shallow } from 'enzyme';
 import { styledMount as mount } from 'spec/helpers/theming';
@@ -72,9 +73,9 @@ describe('SaveModal', () => {
   };
 
   const getWrapper = () =>
-    shallow(<SaveModal {...defaultProps} />, {
-      context: { store },
-    }).dive();
+    shallow(<SaveModal {...defaultProps} store={store} />)
+      .dive()
+      .dive();
 
   it('renders a Modal with the right set of components', () => {
     const wrapper = getWrapper();
@@ -117,15 +118,14 @@ describe('SaveModal', () => {
   });
 
   it('componentDidMount', () => {
-    sinon.spy(SaveModal.prototype, 'componentDidMount');
     sinon.spy(defaultProps.actions, 'fetchDashboards');
-    mount(<SaveModal {...defaultProps} />, {
-      context: { store },
-    });
-    expect(SaveModal.prototype.componentDidMount.calledOnce).toBe(true);
+    mount(
+      <Provider store={store}>
+        <SaveModal {...defaultProps} />
+      </Provider>,
+    );
     expect(defaultProps.actions.fetchDashboards.calledOnce).toBe(true);
 
-    SaveModal.prototype.componentDidMount.restore();
     defaultProps.actions.fetchDashboards.restore();
   });
 

diff --git a/superset-frontend/spec/javascripts/sqllab/App_spec.jsx b/superset-frontend/spec/javascripts/sqllab/App_spec.jsx
@@ -33,7 +33,7 @@ describe('SqlLab App', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallow(<App />, { context: { store } });
+    wrapper = shallow(<App store={store} />).dive();
   });
 
   it('is valid', () => {

diff --git a/superset-frontend/spec/javascripts/sqllab/ExploreResultsButton_spec.jsx b/superset-frontend/spec/javascripts/sqllab/ExploreResultsButton_spec.jsx
@@ -71,9 +71,9 @@ describe('ExploreResultsButton', () => {
     value: 'bar',
   };
   const getExploreResultsButtonWrapper = (props = mockedProps) =>
-    shallow(<ExploreResultsButton {...props} />, {
-      context: { store },
-    }).dive();
+    shallow(<ExploreResultsButton store={store} {...props} />)
+      .dive()
+      .dive();
 
   it('renders', () => {
     expect(React.isValidElement(<ExploreResultsButton />)).toBe(true);
@@ -148,9 +148,11 @@ describe('ExploreResultsButton', () => {
       query: longQuery,
       database,
     };
-    const longQueryWrapper = shallow(<ExploreResultsButton {...props} />, {
-      context: { store },
-    }).dive();
+    const longQueryWrapper = shallow(
+      <ExploreResultsButton store={store} {...props} />,
+    )
+      .dive()
+      .dive();
     const inst = longQueryWrapper.instance();
     expect(inst.getQueryDuration()).toBe(100.7050400390625);
   });

diff --git a/superset-frontend/spec/javascripts/sqllab/QueryAutoRefresh_spec.jsx b/superset-frontend/spec/javascripts/sqllab/QueryAutoRefresh_spec.jsx
@@ -39,12 +39,10 @@ describe('QueryAutoRefresh', () => {
     sqlLab,
   };
   const store = mockStore(state);
-
   const getWrapper = () =>
-    shallow(<QueryAutoRefresh />, {
-      context: { store },
-    }).dive();
-
+    shallow(<QueryAutoRefresh store={store} />)
+      .dive()
+      .dive();
   let wrapper;
 
   it('shouldCheckForQueries', () => {

diff --git a/superset-frontend/spec/javascripts/sqllab/ShareSqlLabQuery_spec.jsx b/superset-frontend/spec/javascripts/sqllab/ShareSqlLabQuery_spec.jsx
@@ -66,10 +66,7 @@ describe('ShareSqlLabQuery via /kv/store', () => {
 
   function setup(overrideProps) {
     const wrapper = shallow(
-      <ShareSqlLabQuery {...defaultProps} {...overrideProps} />,
-      {
-        context: { store },
-      },
+      <ShareSqlLabQuery store={store} {...defaultProps} {...overrideProps} />,
     ).dive(); // wrapped in withToasts HOC
 
     return wrapper;

diff --git a/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx
@@ -76,9 +76,7 @@ describe('SouthPane', () => {
   };
 
   const getWrapper = () =>
-    shallow(<SouthPaneContainer {...mockedProps} />, {
-      context: { store },
-    });
+    shallow(<SouthPaneContainer store={store} {...mockedProps} />).dive();
 
   let wrapper;