perf(dashboard): decouple redux props from dashboard components (#16421)

* perf(dashboard): decouple redux props from dashboard components * Lint fix * Dont make copy of filters object * Remove unnecessary exports
apache · Aug 26, 2021 · f422f1e · f422f1e
1 parent 8ad495a
commit f422f1e
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 20 deletions.
diff --git a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/ChartHolder_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/ChartHolder_spec.jsx
@@ -25,7 +25,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import Chart from 'src/dashboard/containers/Chart';
-import ChartHolder from 'src/dashboard/components/gridComponents/ChartHolder';
+import ChartHolderConnected from 'src/dashboard/components/gridComponents/ChartHolder';
 import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
 import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
 import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
@@ -71,7 +71,7 @@ describe('ChartHolder', () => {
     const wrapper = mount(
       <Provider store={mockStore}>
         <DndProvider backend={HTML5Backend}>
-          <ChartHolder {...props} {...overrideProps} />
+          <ChartHolderConnected {...props} {...overrideProps} />
         </DndProvider>
       </Provider>,
       {

diff --git a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Markdown_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Markdown_spec.jsx
@@ -26,7 +26,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import { act } from 'react-dom/test-utils';
 import { MarkdownEditor } from 'src/components/AsyncAceEditor';
-import Markdown from 'src/dashboard/components/gridComponents/Markdown';
+import MarkdownConnected from 'src/dashboard/components/gridComponents/Markdown';
 import MarkdownModeDropdown from 'src/dashboard/components/menu/MarkdownModeDropdown';
 import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
@@ -66,7 +66,7 @@ describe('Markdown', () => {
     const wrapper = mount(
       <Provider store={mockStore}>
         <DndProvider backend={HTML5Backend}>
-          <Markdown {...props} {...overrideProps} />
+          <MarkdownConnected {...props} {...overrideProps} />
         </DndProvider>
       </Provider>,
     );

diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useTheme } from '@superset-ui/core';
-import { useSelector } from 'react-redux';
+import { useSelector, connect } from 'react-redux';
 
 import { getChartIdsInFilterScope } from 'src/dashboard/util/activeDashboardFilters';
 import Chart from '../../containers/Chart';
@@ -381,4 +381,10 @@ class ChartHolder extends React.Component {
 ChartHolder.propTypes = propTypes;
 ChartHolder.defaultProps = defaultProps;
 
-export default ChartHolder;
+function mapStateToProps(state) {
+  return {
+    directPathToChild: state.dashboardState.directPathToChild,
+    directPathLastUpdated: state.dashboardState.directPathLastUpdated,
+  };
+}
+export default connect(mapStateToProps)(ChartHolder);
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx b/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
@@ -18,8 +18,9 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { connect } from 'react-redux';
 import cx from 'classnames';
+
 import { t, SafeMarkdown } from '@superset-ui/core';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
 import { MarkdownEditor } from 'src/components/AsyncAceEditor';
@@ -366,4 +367,10 @@ class Markdown extends React.PureComponent {
 Markdown.propTypes = propTypes;
 Markdown.defaultProps = defaultProps;
 
-export default Markdown;
+function mapStateToProps(state) {
+  return {
+    undoLength: state.dashboardLayout.past.length,
+    redoLength: state.dashboardLayout.future.length,
+  };
+}
+export default connect(mapStateToProps)(Markdown);
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -405,6 +405,10 @@ Tabs.propTypes = propTypes;
 Tabs.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
-  return { nativeFilters: state.nativeFilters };
+  return {
+    nativeFilters: state.nativeFilters,
+    directPathToChild: state.dashboardState.directPathToChild,
+    activeTabs: state.dashboardState.activeTabs,
+  };
 }
 export default connect(mapStateToProps)(Tabs);
diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
@@ -63,8 +63,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-  directPathToChild: [],
-  directPathLastUpdated: 0,
   isComponentVisible: true,
 };
 
@@ -77,15 +75,9 @@ function mapStateToProps(
   const component = dashboardLayout[id];
   const props = {
     component,
-    dashboardLayout,
     parentComponent: dashboardLayout[parentId],
     editMode: dashboardState.editMode,
-    undoLength: undoableLayout.past.length,
-    redoLength: undoableLayout.future.length,
     filters: getActiveFilters(),
-    directPathToChild: dashboardState.directPathToChild,
-    activeTabs: dashboardState.activeTabs,
-    directPathLastUpdated: dashboardState.directPathLastUpdated,
     dashboardId: dashboardInfo.id,
     fullSizeChartId: dashboardState.fullSizeChartId,
   };

diff --git a/superset-frontend/src/dashboard/util/activeDashboardFilters.js b/superset-frontend/src/dashboard/util/activeDashboardFilters.js
@@ -33,9 +33,7 @@ let allComponents = {};
 
 // output: { [id_column]: { values, scope } }
 export function getActiveFilters() {
-  return {
-    ...activeFilters,
-  };
+  return activeFilters;
 }
 
 // currently filter_box is a chart,