Relayout SQL Editor (#6872)

* Relayout SQL Editor

- Refactor SQL editor to remove usage of bootstrap col, row and collapse to simplify the layout
- Replace the react-split-pane libraray with react-split to allow custom styling of the gutter area without sacrifice correctness of the ace editor height calculation
- Rewrite the left pane animation via plain css transition and animate it to slide in and out
- General code and css clean up

* Smooth out the visual transition during dragging

(cherry picked from commit 19f82b729c7a939f12b1c5da6022c0fd76fa3ec9)

* Adjust how the height of the south pane is computed, fixing cypress tests

superset/assets/package.json

@@ -123,9 +123,10 @@
     "react-select": "1.2.1",
     "react-select-fast-filter-options": "^0.2.1",
     "react-sortable-hoc": "^0.8.3",
-    "react-split-pane": "^0.1.66",
+    "react-split": "^2.0.4",
     "react-sticky": "^6.0.2",
     "react-syntax-highlighter": "^7.0.4",
+    "react-transition-group": "^2.5.3",
     "react-virtualized": "9.19.1",
     "react-virtualized-select": "^3.1.3",
     "reactable-arc": "0.14.42",

superset/assets/spec/javascripts/sqllab/SouthPane_spec.jsx

@@ -24,7 +24,7 @@ import { shallow } from 'enzyme';
 
 import { STATUS_OPTIONS } from '../../../src/SqlLab/constants';
 import { initialState } from './fixtures';
-import SouthPane from '../../../src/SqlLab/components/SouthPane';
+import SouthPaneContainer, { SouthPane } from '../../../src/SqlLab/components/SouthPane';
 
 describe('SouthPane', () => {
   const middlewares = [thunk];
@@ -42,11 +42,16 @@ describe('SouthPane', () => {
   };
 
   const getWrapper = () => (
-    shallow(<SouthPane {...mockedProps} />, {
+    shallow(<SouthPaneContainer {...mockedProps} />, {
       context: { store },
     }).dive());
 
   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/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx

@@ -38,6 +38,11 @@ describe('SqlEditor', () => {
     defaultQueryLimit: 1000,
     maxRow: 100000,
   };
+
+  beforeAll(() => {
+    jest.spyOn(SqlEditor.prototype, 'getSqlEditorHeight').mockImplementation(() => 500);
+  });
+
   it('is valid', () => {
     expect(
       React.isValidElement(<SqlEditor {...mockedProps} />),

superset/assets/src/SqlLab/components/App.jsx

@@ -84,7 +84,7 @@ class App extends React.PureComponent {
       content = (
         <div>
           <QueryAutoRefresh />
-          <TabbedSqlEditors getHeight={this.getHeight} />
+          <TabbedSqlEditors />
         </div>
       );
     }

superset/assets/src/SqlLab/components/SouthPane.jsx

@@ -48,7 +48,24 @@ const defaultProps = {
   offline: false,
 };
 
-class SouthPane extends React.PureComponent {
+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);
+  }
+  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.clientHeight;
+  }
   switchTab(id) {
     this.props.actions.setActiveSouthPaneTab(id);
   }
@@ -59,7 +76,7 @@ class SouthPane extends React.PureComponent {
           { STATUS_OPTIONS.offline }
         </Label>);
     }
-    const innerTabHeight = this.props.height - 55;
+    const innerTabHeight = this.state.height - 55;
     let latestQuery;
     const props = this.props;
     if (props.editorQueries.length > 0) {
@@ -98,12 +115,12 @@ class SouthPane extends React.PureComponent {
     ));
 
     return (
-      <div className="SouthPane">
+      <div className="SouthPane" ref={this.southPaneRef}>
         <Tabs
           bsStyle="tabs"
           id={shortid.generate()}
           activeKey={this.props.activeSouthPaneTab}
-          onSelect={this.switchTab.bind(this)}
+          onSelect={this.switchTab}
         >
           <Tab
             title={t('Results')}