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>

superset-frontend/spec/javascripts/views/CRUD/alert/AlertList_spec.jsx

@@ -78,9 +78,7 @@ fetchMock.put(alertEndpoint, { ...mockalerts[0], active: false });
 fetchMock.put(alertsEndpoint, { ...mockalerts[0], active: false });
 
 async function mountAndWait(props) {
-  const mounted = mount(<AlertList {...props} user={mockUser} />, {
-    context: { store },
-  });
+  const mounted = mount(<AlertList {...props} user={mockUser} store={store} />);
   await waitForComponentToPaint(mounted);
 
   return mounted;

superset-frontend/spec/javascripts/views/CRUD/annotation/AnnotationList_spec.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
 
 import AnnotationList from 'src/views/CRUD/annotation/AnnotationList';
@@ -74,9 +75,11 @@ jest.mock('react-router-dom', () => ({
 }));
 
 async function mountAndWait(props) {
-  const mounted = mount(<AnnotationList {...props} />, {
-    context: { store },
-  });
+  const mounted = mount(
+    <Provider store={store}>
+      <AnnotationList {...props} />
+    </Provider>,
+  );
   await waitForComponentToPaint(mounted);
 
   return mounted;

superset-frontend/spec/javascripts/views/CRUD/annotation/AnnotationModal_spec.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
 import AnnotationModal from 'src/views/CRUD/annotation/AnnotationModal';
 import Modal from 'src/common/components/Modal';
@@ -51,11 +52,12 @@ const mockedProps = {
 };
 
 async function mountAndWait(props = mockedProps) {
-  const mounted = mount(<AnnotationModal show {...props} />, {
-    context: { store },
-  });
+  const mounted = mount(
+    <Provider store={store}>
+      <AnnotationModal show {...props} />
+    </Provider>,
+  );
   await waitForComponentToPaint(mounted);
-
   return mounted;
 }
 

superset-frontend/spec/javascripts/views/CRUD/annotationlayers/AnnotationLayerModal_spec.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
 import AnnotationLayerModal from 'src/views/CRUD/annotationlayers/AnnotationLayerModal';
 import Modal from 'src/common/components/Modal';
@@ -43,9 +44,11 @@ const mockedProps = {
 };
 
 async function mountAndWait(props = mockedProps) {
-  const mounted = mount(<AnnotationLayerModal show {...props} />, {
-    context: { store },
-  });
+  const mounted = mount(
+    <Provider store={store}>
+      <AnnotationLayerModal show {...props} />
+    </Provider>,
+  );
   await waitForComponentToPaint(mounted);
 
   return mounted;

superset-frontend/spec/javascripts/views/CRUD/annotationlayers/AnnotationLayersList_spec.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
 
 import AnnotationLayersList from 'src/views/CRUD/annotationlayers/AnnotationLayersList';
@@ -78,10 +79,11 @@ fetchMock.get(layersRelatedEndpoint, {
 });
 
 describe('AnnotationLayersList', () => {
-  const wrapper = mount(<AnnotationLayersList user={mockUser} />, {
-    context: { store },
-  });
-
+  const wrapper = mount(
+    <Provider store={store}>
+      <AnnotationLayersList store={store} user={mockUser} />
+    </Provider>,
+  );
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);
   });

superset-frontend/spec/javascripts/views/CRUD/chart/ChartList_spec.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
 import * as featureFlags from 'src/featureFlags';
 
@@ -97,9 +98,11 @@ describe('ChartList', () => {
     isFeatureEnabledMock.restore();
   });
   const mockedProps = {};
-  const wrapper = mount(<ChartList {...mockedProps} user={mockUser} />, {
-    context: { store },
-  });
+  const wrapper = mount(
+    <Provider store={store}>
+      <ChartList {...mockedProps} user={mockUser} />
+    </Provider>,
+  );
 
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);

superset-frontend/spec/javascripts/views/CRUD/csstemplates/CssTemplateModal_spec.jsx

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import CssTemplateModal from 'src/views/CRUD/csstemplates/CssTemplateModal';
@@ -44,9 +45,11 @@ const mockedProps = {
 };
 
 async function mountAndWait(props = mockedProps) {
-  const mounted = mount(<CssTemplateModal show {...props} />, {
-    context: { store },
-  });
+  const mounted = mount(
+    <Provider store={store}>
+      <CssTemplateModal show {...props} />
+    </Provider>,
+  );
   await waitForComponentToPaint(mounted);
 
   return mounted;

superset-frontend/spec/javascripts/views/CRUD/csstemplates/CssTemplatesList_spec.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
 import { styledMount as mount } from 'spec/helpers/theming';
 
@@ -76,9 +77,11 @@ fetchMock.get(templatesRelatedEndpoint, {
 });
 
 describe('CssTemplatesList', () => {
-  const wrapper = mount(<CssTemplatesList user={mockUser} />, {
-    context: { store },
-  });
+  const wrapper = mount(
+    <Provider store={store}>
+      <CssTemplatesList store={store} user={mockUser} />
+    </Provider>,
+  );
 
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);

superset-frontend/spec/javascripts/views/CRUD/dashboard/DashboardList_spec.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import { Provider } from 'react-redux';
 import * as featureFlags from 'src/featureFlags';
 
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
@@ -92,9 +93,11 @@ describe('DashboardList', () => {
   });
 
   const mockedProps = {};
-  const wrapper = mount(<DashboardList {...mockedProps} user={mockUser} />, {
-    context: { store },
-  });
+  const wrapper = mount(
+    <Provider store={store}>
+      <DashboardList {...mockedProps} user={mockUser} />
+    </Provider>,
+  );
 
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseList_spec.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
 
 import DatabaseList from 'src/views/CRUD/data/database/DatabaseList';
@@ -81,10 +82,11 @@ fetchMock.get(databaseRelatedEndpoint, {
 });
 
 describe('DatabaseList', () => {
-  const wrapper = mount(<DatabaseList user={mockUser} />, {
-    context: { store },
-  });
-
+  const wrapper = mount(
+    <Provider store={store}>
+      <DatabaseList user={mockUser} />
+    </Provider>,
+  );
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);
   });

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx

@@ -43,12 +43,8 @@ const dbProps = {
 };
 
 describe('DatabaseModal', () => {
-  const wrapper = mount(<DatabaseModal {...mockedProps} />, {
-    context: { store },
-  });
-  const editWrapper = mount(<DatabaseModal {...dbProps} />, {
-    context: { store },
-  });
+  const wrapper = mount(<DatabaseModal store={store} {...mockedProps} />);
+  const editWrapper = mount(<DatabaseModal store={store} {...dbProps} />);
 
   it('renders', () => {
     expect(wrapper.find(DatabaseModal)).toExist();

superset-frontend/spec/javascripts/views/CRUD/data/dataset/DatasetList_spec.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
 
 import DatasetList from 'src/views/CRUD/data/dataset/DatasetList';
@@ -74,9 +75,11 @@ fetchMock.get(databaseEndpoint, {
 });
 
 async function mountAndWait(props) {
-  const mounted = mount(<DatasetList {...props} user={mockUser} />, {
-    context: { store },
-  });
+  const mounted = mount(
+    <Provider store={store}>
+      <DatasetList {...props} user={mockUser} />
+    </Provider>,
+  );
   await waitForComponentToPaint(mounted);
 
   return mounted;

superset-frontend/spec/javascripts/views/CRUD/data/savedquery/SavedQueryList_spec.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
 import { styledMount as mount } from 'spec/helpers/theming';
 import SavedQueryList from 'src/views/CRUD/data/savedquery/SavedQueryList';
@@ -91,9 +92,11 @@ fetchMock.get(queriesDistinctEndpoint, {
 });
 
 describe('SavedQueryList', () => {
-  const wrapper = mount(<SavedQueryList />, {
-    context: { store },
-  });
+  const wrapper = mount(
+    <Provider store={store}>
+      <SavedQueryList />
+    </Provider>,
+  );
 
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);

superset-frontend/spec/javascripts/views/CRUD/data/savedquery/SavedQueryPreviewModal_spec.jsx

@@ -73,9 +73,7 @@ const SAVED_QUERY_PAYLOAD = { result: mockqueries[1] };
 fetchMock.get(FETCH_SAVED_QUERY_ENDPOINT, SAVED_QUERY_PAYLOAD);
 
 async function mountAndWait(props = mockedProps) {
-  const mounted = mount(<SavedQueryPreviewModal {...props} />, {
-    context: { store },
-  });
+  const mounted = mount(<SavedQueryPreviewModal store={store} {...props} />);
   await waitForComponentToPaint(mounted);
 
   return mounted;

superset-frontend/spec/javascripts/views/CRUD/welcome/ChartTable_spec.tsx

@@ -57,9 +57,7 @@ describe('ChartTable', () => {
       userId: '2',
     },
   };
-  const wrapper = mount(<ChartTable {...mockedProps} />, {
-    context: { store },
-  });
+  const wrapper = mount(<ChartTable store={store} {...mockedProps} />);
   it('it renders', () => {
     expect(wrapper.find(ChartTable)).toExist();
   });
@@ -78,9 +76,7 @@ describe('ChartTable', () => {
 
   it('display EmptyState if there is no data', () => {
     fetchMock.resetHistory();
-    const wrapper = mount(<ChartTable {...mockedProps} />, {
-      context: { store },
-    });
+    const wrapper = mount(<ChartTable store={store} {...mockedProps} />);
     expect(wrapper.find('EmptyState')).toExist();
   });
 });

superset-frontend/spec/javascripts/views/CRUD/welcome/DashboardTable_spec.tsx

@@ -59,9 +59,7 @@ describe('DashboardTable', () => {
     },
     mine: mockDashboards,
   };
-  const wrapper = mount(<DashboardTable {...dashboardProps} />, {
-    context: { store },
-  });
+  const wrapper = mount(<DashboardTable store={store} {...dashboardProps} />);
 
   beforeAll(async () => {
     await waitForComponentToPaint(wrapper);
@@ -95,10 +93,8 @@ describe('DashboardTable', () => {
         dashboardFilter="Mine"
         user={{ userId: '2' }}
         mine={[]}
+        store={store}
       />,
-      {
-        context: { store },
-      },
     );
     expect(wrapper.find('EmptyState')).toExist();
   });

superset-frontend/spec/javascripts/views/CRUD/welcome/SavedQueries_spec.tsx

@@ -77,9 +77,7 @@ describe('SavedQueries', () => {
     mine: mockqueries,
   };
 
-  const wrapper = mount(<SavedQueries {...savedQueryProps} />, {
-    context: { store },
-  });
+  const wrapper = mount(<SavedQueries store={store} {...savedQueryProps} />);
 
   const clickTab = (idx: number) => {
     act(() => {

superset-frontend/spec/javascripts/views/CRUD/welcome/Welcome_spec.tsx

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
+import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import fetchMock from 'fetch-mock';
 import configureStore from 'redux-mock-store';
@@ -69,9 +70,11 @@ describe('Welcome', () => {
       isActive: true,
     },
   };
-  const wrapper = mount(<Welcome {...mockedProps} />, {
-    context: { store },
-  });
+  const wrapper = mount(
+    <Provider store={store}>
+      <Welcome {...mockedProps} />
+    </Provider>,
+  );
 
   it('renders', () => {
     expect(wrapper).toExist();