fix (SQL Lab): disappearing results on tab switch (#12472)

* fix (SQL Lab): disappearing results on tab switch

* Remove state

* Fix test

superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx

@@ -20,7 +20,7 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { styledShallow as shallow } from 'spec/helpers/theming';
-import SouthPaneContainer, { SouthPane } from 'src/SqlLab/components/SouthPane';
+import SouthPaneContainer from 'src/SqlLab/components/SouthPane';
 import ResultSet from 'src/SqlLab/components/ResultSet';
 import { STATUS_OPTIONS } from 'src/SqlLab/constants';
 import { initialState } from './fixtures';
@@ -80,12 +80,6 @@ describe('SouthPane', () => {
 
   let wrapper;
 
-  beforeAll(() => {
-    jest
-      .spyOn(SouthPane.prototype, 'getSouthPaneHeight')
-      .mockImplementation(() => 500);
-  });
-
   it('should render offline when the state is offline', () => {
     wrapper = getWrapper();
     wrapper.setProps({ offline: true });

superset-frontend/src/SqlLab/components/SouthPane.jsx

@@ -86,26 +86,10 @@ const StyledPane = styled.div`
 export class SouthPane extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = {
-      height: props.height,
-    };
     this.southPaneRef = React.createRef();
-    this.getSouthPaneHeight = this.getSouthPaneHeight.bind(this);
     this.switchTab = this.switchTab.bind(this);
   }
 
-  UNSAFE_componentWillReceiveProps() {
-    // south pane expands the entire height of the tab content on mount
-    this.setState({ height: this.getSouthPaneHeight() });
-  }
-
-  // One layer of abstraction for easy spying in unit tests
-  getSouthPaneHeight() {
-    return this.southPaneRef.current
-      ? this.southPaneRef.current.clientHeight
-      : 0;
-  }
-
   switchTab(id) {
     this.props.actions.setActiveSouthPaneTab(id);
   }
@@ -121,7 +105,7 @@ export class SouthPane extends React.PureComponent {
         </Label>
       );
     }
-    const innerTabContentHeight = this.state.height - TAB_HEIGHT;
+    const innerTabContentHeight = this.props.height - TAB_HEIGHT;
     let latestQuery;
     const { props } = this;
     if (props.editorQueries.length > 0) {