chore: clean up mountedTab (#11569)

superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx

@@ -67,7 +67,6 @@ describe('DashboardBuilder', () => {
     colorScheme: undefined,
     handleComponentDrop() {},
     setDirectPathToChild: sinon.spy(),
-    setMountedTab() {},
   };
 
   function setup(overrideProps, useProvider = false, store = mockStore) {

superset-frontend/spec/javascripts/dashboard/components/gridComponents/Chart_spec.jsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
-import { ChartUnconnected as Chart } from 'src/dashboard/components/gridComponents/Chart';
+import Chart from 'src/dashboard/components/gridComponents/Chart';
 import SliceHeader from 'src/dashboard/components/SliceHeader';
 import ChartContainer from 'src/chart/ChartContainer';
 

superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tabs_spec.jsx

@@ -55,7 +55,6 @@ describe('Tabs', () => {
     deleteComponent() {},
     updateComponents() {},
     logEvent() {},
-    setMountedTab() {},
   };
 
   function setup(overrideProps) {

superset-frontend/src/chart/Chart.jsx

@@ -65,8 +65,6 @@ const propTypes = {
   onQuery: PropTypes.func,
   onFilterMenuOpen: PropTypes.func,
   onFilterMenuClose: PropTypes.func,
-  // id of the last mounted parent tab
-  mountedParent: PropTypes.string,
 };
 
 const BLANK = {};

superset-frontend/src/common/components/Tabs/Tabs.tsx

@@ -127,7 +127,7 @@ const StyledEditableTabs = styled(StyledTabs)`
     `}
 `;
 
-const EditableTabs = Object.assign(StyledEditableTabs, {
+export const EditableTabs = Object.assign(StyledEditableTabs, {
   TabPane: StyledTabPane,
 });
 
@@ -142,7 +142,7 @@ EditableTabs.TabPane.defaultProps = {
   ),
 };
 
-const StyledLineEditableTabs = styled(EditableTabs)`
+export const StyledLineEditableTabs = styled(EditableTabs)`
   &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
     margin: 0 ${({ theme }) => theme.gridUnit * 4}px;
     padding: ${({ theme }) => `${theme.gridUnit * 3}px ${theme.gridUnit}px`};
@@ -170,9 +170,8 @@ const StyledLineEditableTabs = styled(EditableTabs)`
   }
 `;
 
-const LineEditableTabs = Object.assign(StyledLineEditableTabs, {
+export const LineEditableTabs = Object.assign(StyledLineEditableTabs, {
   TabPane: StyledTabPane,
 });
 
 export default Tabs;
-export { EditableTabs, LineEditableTabs };

superset-frontend/src/components/Menu/Menu.tsx

@@ -191,7 +191,7 @@ export function Menu({
                   </DropdownMenu.ItemGroup>,
                 ]}
                 {(navbarRight.version_string || navbarRight.version_sha) && [
-                  <DropdownMenu.Divider key="navbar-divider" />,
+                  <DropdownMenu.Divider key="version-info-divider" />,
                   <DropdownMenu.ItemGroup
                     key="about-section"
                     title={t('About')}

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -320,14 +320,6 @@ export function setDirectPathToChild(path) {
   return { type: SET_DIRECT_PATH, path };
 }
 
-export const SET_MOUNTED_TAB = 'SET_MOUNTED_TAB';
-/**
- * Set if tab switch animation is in progress
- */
-export function setMountedTab(mountedTab) {
-  return { type: SET_MOUNTED_TAB, mountedTab };
-}
-
 export const SET_FOCUSED_FILTER_FIELD = 'SET_FOCUSED_FILTER_FIELD';
 export function setFocusedFilterField(chartId, column) {
   return { type: SET_FOCUSED_FILTER_FIELD, chartId, column };

superset-frontend/src/dashboard/components/DashboardBuilder.jsx

@@ -276,12 +276,6 @@ class DashboardBuilder extends React.Component {
                       <TabPane
                         key={index === 0 ? DASHBOARD_GRID_ID : id}
                         eventKey={index}
-                        mountOnEnter
-                        unmountOnExit={false}
-                        onEntering={() => {
-                          // Entering current tab, DOM is visible and has dimension
-                          this.props.setMountedTab(id);
-                        }}
                       >
                         <DashboardGrid
                           gridComponent={dashboardLayout[id]}

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -18,7 +18,6 @@
  */
 import cx from 'classnames';
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { exploreChart, exportChart } from '../../../explore/exploreUtils';
 import SliceHeader from '../SliceHeader';
@@ -42,8 +41,6 @@ const propTypes = {
   height: PropTypes.number.isRequired,
   updateSliceName: PropTypes.func.isRequired,
   isComponentVisible: PropTypes.bool,
-  // last switched tab
-  mountedParent: PropTypes.string,
   handleToggleFullSize: PropTypes.func.isRequired,
 
   // from redux
@@ -73,7 +70,6 @@ const propTypes = {
 const defaultProps = {
   isCached: false,
   isComponentVisible: true,
-  mountedParent: 'ROOT',
 };
 
 // we use state + shouldComponentUpdate() logic to prevent perf-wrecking
@@ -85,7 +81,7 @@ const SHOULD_UPDATE_ON_PROP_CHANGES = Object.keys(propTypes).filter(
 const OVERFLOWABLE_VIZ_TYPES = new Set(['filter_box']);
 const DEFAULT_HEADER_HEIGHT = 22;
 
-class Chart extends React.Component {
+export default class Chart extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -118,9 +114,6 @@ class Chart extends React.Component {
     // allow chart update/re-render only if visible:
     // under selected tab or no tab layout
     if (nextProps.isComponentVisible) {
-      if (nextProps.mountedParent === null) {
-        return false;
-      }
       if (nextProps.chart.triggerQuery) {
         return true;
       }
@@ -354,21 +347,3 @@ class Chart extends React.Component {
 
 Chart.propTypes = propTypes;
 Chart.defaultProps = defaultProps;
-
-function mapStateToProps({ dashboardState }) {
-  return {
-    // needed to prevent chart from rendering while tab switch animation in progress
-    // when undefined, default to have mounted the root tab
-    mountedParent: dashboardState?.mountedTab,
-  };
-}
-
-/**
- * The original Chart component not connected to state.
- */
-export const ChartUnconnected = Chart;
-
-/**
- * Redux connected Chart component.
- */
-export default connect(mapStateToProps, null)(Chart);

superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx

@@ -51,7 +51,6 @@ const propTypes = {
 
   // actions (from DashboardComponent.jsx)
   logEvent: PropTypes.func.isRequired,
-  setMountedTab: PropTypes.func.isRequired,
 
   // grid related
   availableColumnCount: PropTypes.number,
@@ -202,7 +201,7 @@ class Tabs extends React.PureComponent {
   };
 
   handleClickTab(tabIndex) {
-    const { component, renderTabContent } = this.props;
+    const { component } = this.props;
 
     if (tabIndex !== this.state.tabIndex) {
       const pathToTabIndex = getDirectPathToTabIndex(component, tabIndex);
@@ -214,11 +213,6 @@ class Tabs extends React.PureComponent {
 
       this.props.onChangeTab({ pathToTabIndex });
     }
-    if (renderTabContent) {
-      const tabIds = component.children;
-      const activeKey = tabIds[this.state.tabIndex];
-      this.props.setMountedTab(activeKey);
-    }
   }
 
   handleDeleteComponent() {

superset-frontend/src/dashboard/containers/DashboardBuilder.jsx

@@ -24,7 +24,6 @@ import {
   setColorSchemeAndUnsavedChanges,
   showBuilderPane,
   setDirectPathToChild,
-  setMountedTab,
 } from '../actions/dashboardState';
 import {
   deleteTopLevelTabs,
@@ -50,7 +49,6 @@ function mapDispatchToProps(dispatch) {
       showBuilderPane,
       setColorSchemeAndUnsavedChanges,
       setDirectPathToChild,
-      setMountedTab,
     },
     dispatch,
   );

superset-frontend/src/dashboard/containers/DashboardComponent.jsx

@@ -35,7 +35,7 @@ import {
   updateComponents,
   handleComponentDrop,
 } from '../actions/dashboardLayout';
-import { setDirectPathToChild, setMountedTab } from '../actions/dashboardState';
+import { setDirectPathToChild } from '../actions/dashboardState';
 
 const propTypes = {
   component: componentShape.isRequired,
@@ -127,7 +127,6 @@ function mapDispatchToProps(dispatch) {
       updateComponents,
       handleComponentDrop,
       setDirectPathToChild,
-      setMountedTab,
       logEvent,
     },
     dispatch,

superset-frontend/src/dashboard/reducers/dashboardState.js

@@ -33,7 +33,6 @@ import {
   UPDATE_CSS,
   SET_REFRESH_FREQUENCY,
   SET_DIRECT_PATH,
-  SET_MOUNTED_TAB,
   SET_FOCUSED_FILTER_FIELD,
   UNSET_FOCUSED_FILTER_FIELD,
 } from '../actions/dashboardState';
@@ -124,23 +123,11 @@ export default function dashboardStateReducer(state = {}, action) {
       };
     },
     [SET_DIRECT_PATH]() {
-      const newState = {
+      return {
         ...state,
         directPathToChild: action.path,
         directPathLastUpdated: Date.now(),
       };
-      // change of direct path (tabs) will reset current mounted tab
-      // cannot just set mountedTab to null,
-      // as that is used when transitioning between tabs.
-      delete newState.mountedTab;
-      return newState;
-    },
-    [SET_MOUNTED_TAB]() {
-      // set current mounted tab after tab is really mounted to DOM
-      return {
-        ...state,
-        mountedTab: action.mountedTab,
-      };
     },
     [SET_FOCUSED_FILTER_FIELD]() {
       return {