Allow resizing width of SQL Lab left bar / editor (#8099)

* wip

* Finish PR

* Remove annoying snap

* Fix lint

* Fix js tests

superset/assets/package-lock.json

@@ -3488,6 +3488,13 @@
       "requires": {
         "@babel/runtime": "^7.1.2",
         "whatwg-fetch": "^3.0.0"
+      },
+      "dependencies": {
+        "whatwg-fetch": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+          "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
+        }
       }
     },
     "@superset-ui/core": {

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

@@ -21,8 +21,8 @@ import { shallow } from 'enzyme';
 
 import { defaultQueryEditor, initialState, queries, table } from './fixtures';
 import {
-  SQL_EDITOR_GUTTER_HEIGHT,
-  SQL_EDITOR_GUTTER_MARGIN,
+  SQL_EDITOR_VERTICAL_GUTTER_HEIGHT,
+  SQL_EDITOR_VERTICAL_GUTTER_MARGIN,
   SQL_TOOLBAR_HEIGHT,
 } from '../../../src/SqlLab/constants';
 import AceEditorWrapper from '../../../src/SqlLab/components/AceEditorWrapper';
@@ -73,8 +73,8 @@ describe('SqlEditor', () => {
     const totalSize = parseFloat(wrapper.find(AceEditorWrapper).props().height)
       + wrapper.find(SouthPane).props().height
       + SQL_TOOLBAR_HEIGHT
-      + (SQL_EDITOR_GUTTER_MARGIN * 2)
-      + SQL_EDITOR_GUTTER_HEIGHT;
+      + (SQL_EDITOR_VERTICAL_GUTTER_MARGIN * 2)
+      + SQL_EDITOR_VERTICAL_GUTTER_HEIGHT;
     expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT);
   });
   it('does not overflow the editor window after resizing', () => {
@@ -83,8 +83,8 @@ describe('SqlEditor', () => {
     const totalSize = parseFloat(wrapper.find(AceEditorWrapper).props().height)
       + wrapper.find(SouthPane).props().height
       + SQL_TOOLBAR_HEIGHT
-      + (SQL_EDITOR_GUTTER_MARGIN * 2)
-      + SQL_EDITOR_GUTTER_HEIGHT;
+      + (SQL_EDITOR_VERTICAL_GUTTER_MARGIN * 2)
+      + SQL_EDITOR_VERTICAL_GUTTER_HEIGHT;
     expect(totalSize).toEqual(450);
   });
   it('render a LimitControl with default limit', () => {

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

@@ -46,9 +46,10 @@ import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
 import {
   STATE_BSSTYLE_MAP,
-  SQL_EDITOR_GUTTER_HEIGHT,
-  SQL_EDITOR_GUTTER_MARGIN,
+  SQL_EDITOR_VERTICAL_GUTTER_HEIGHT,
+  SQL_EDITOR_VERTICAL_GUTTER_MARGIN,
   SQL_TOOLBAR_HEIGHT,
+  SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH,
 } from '../constants';
 import RunQueryActionButton from './RunQueryActionButton';
 import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
@@ -56,8 +57,11 @@ import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
 const SQL_EDITOR_PADDING = 10;
 const INITIAL_NORTH_PERCENT = 30;
 const INITIAL_SOUTH_PERCENT = 70;
+const INITIAL_WEST_PERCENT = 20;
+const INITIAL_EAST_PERCENT = 80;
 const VALIDATION_DEBOUNCE_MS = 600;
 const WINDOW_RESIZE_THROTTLE_MS = 100;
+const SQL_EDITOR_MIN_SIZE = 300;
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -103,6 +107,7 @@ class SqlEditor extends React.PureComponent {
     this.onSqlChanged = this.onSqlChanged.bind(this);
     this.setQueryEditorSql = this.setQueryEditorSql.bind(this);
     this.queryPane = this.queryPane.bind(this);
+    this.leftBar = this.leftBar.bind(this);
     this.getAceEditorAndSouthPaneHeights = this.getAceEditorAndSouthPaneHeights.bind(this);
     this.getSqlEditorHeight = this.getSqlEditorHeight.bind(this);
     this.requestValidation = debounce(
@@ -164,10 +169,10 @@ class SqlEditor extends React.PureComponent {
   getAceEditorAndSouthPaneHeights(height, northPercent, southPercent) {
     return {
       aceEditorHeight: height * northPercent / 100
-        - (SQL_EDITOR_GUTTER_HEIGHT / 2 + SQL_EDITOR_GUTTER_MARGIN)
+        - (SQL_EDITOR_VERTICAL_GUTTER_HEIGHT / 2 + SQL_EDITOR_VERTICAL_GUTTER_MARGIN)
         - SQL_TOOLBAR_HEIGHT,
       southPaneHeight: height * southPercent / 100
-        - (SQL_EDITOR_GUTTER_HEIGHT / 2 + SQL_EDITOR_GUTTER_MARGIN),
+        - (SQL_EDITOR_VERTICAL_GUTTER_HEIGHT / 2 + SQL_EDITOR_VERTICAL_GUTTER_MARGIN),
     };
   }
   getHotkeyConfig() {
@@ -215,7 +220,7 @@ class SqlEditor extends React.PureComponent {
   }
   elementStyle(dimension, elementSize, gutterSize) {
     return {
-      [dimension]: `calc(${elementSize}% - ${gutterSize + SQL_EDITOR_GUTTER_MARGIN}px)`,
+      [dimension]: `calc(${elementSize}% - ${gutterSize + SQL_EDITOR_VERTICAL_GUTTER_MARGIN}px)`,
     };
   }
   requestValidation() {
@@ -287,7 +292,7 @@ class SqlEditor extends React.PureComponent {
         elementStyle={this.elementStyle}
         minSize={200}
         direction="vertical"
-        gutterSize={SQL_EDITOR_GUTTER_HEIGHT}
+        gutterSize={SQL_EDITOR_VERTICAL_GUTTER_HEIGHT}
         onDragStart={this.onResizeStart}
         onDragEnd={this.onResizeEnd}
       >
@@ -316,6 +321,22 @@ class SqlEditor extends React.PureComponent {
       </Split>
     );
   }
+  leftBar() {
+    return (
+      <CSSTransition
+        classNames="schemaPane"
+        in={!this.props.hideLeftBar}
+        timeout={300}
+      >
+        <SqlEditorLeftBar
+          database={this.props.database}
+          queryEditor={this.props.queryEditor}
+          tables={this.props.tables}
+          actions={this.props.actions}
+        />
+      </CSSTransition>
+    );
+  }
   renderEditorBottomBar(hotkeys) {
     let ctasControls;
     if (this.props.database && this.props.database.allow_ctas) {
@@ -455,23 +476,18 @@ class SqlEditor extends React.PureComponent {
   }
   render() {
     return (
-      <div ref={this.sqlEditorRef} className="SqlEditor">
-        <CSSTransition
-          classNames="schemaPane"
-          in={!this.props.hideLeftBar}
-          timeout={300}
-        >
-          <div className="schemaPane">
-            <SqlEditorLeftBar
-              database={this.props.database}
-              queryEditor={this.props.queryEditor}
-              tables={this.props.tables}
-              actions={this.props.actions}
-            />
-          </div>
-        </CSSTransition>
+      <Split
+        ref={this.sqlEditorRef}
+        className={this.props.hideLeftBar ? 'SqlEditor-expanded' : 'SqlEditor'}
+        sizes={[INITIAL_WEST_PERCENT, INITIAL_EAST_PERCENT]}
+        direction="horizontal"
+        minSize={SQL_EDITOR_MIN_SIZE}
+        gutterSize={SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH}
+        snapOffset={0}
+      >
+        {this.leftBar()}
         {this.queryPane()}
-      </div>
+      </Split>
     );
   }
 }

superset/assets/src/SqlLab/constants.js

@@ -45,9 +45,10 @@ export const TIME_OPTIONS = [
 ];
 
 // SqlEditor layout constants
-export const SQL_EDITOR_GUTTER_HEIGHT = 5;
-export const SQL_EDITOR_GUTTER_MARGIN = 3;
+export const SQL_EDITOR_VERTICAL_GUTTER_HEIGHT = 5;
+export const SQL_EDITOR_VERTICAL_GUTTER_MARGIN = 3;
 export const SQL_TOOLBAR_HEIGHT = 51;
+export const SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH = 5;
 
 // kilobyte storage
 export const KB_STORAGE = 1024;

superset/assets/src/SqlLab/main.less

@@ -229,7 +229,7 @@ div.Workspace {
     }
 }
 
-.SqlEditor {
+.SqlEditor, .SqlEditor-expanded {
     display: flex;
     flex-direction: row;
     height: 100%;
@@ -241,14 +241,11 @@ div.Workspace {
     }
 
     .schemaPane {
-        flex: 0 0 300px;
-        max-width: 300px;
         transition: transform .3s ease-in-out;
     }
 
     .queryPane {
         flex: 1 1 auto;
-        padding-left: 10px;
     }
 
     .schemaPane-enter-done, .schemaPane-exit {
@@ -273,19 +270,29 @@ div.Workspace {
     .schemaPane-exit-done + .queryPane {
         margin-left: 0;
     }
-
-    .gutter {
-        border-top: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
-        width: 3%;
-        margin: 3px 47%;
-    }
-
-    .gutter.gutter-vertical {
-        cursor: row-resize;
-    }
 }
 
+.SqlEditor .gutter-horizontal {
+    border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+    height: 40px;
+    cursor: col-resize;
+    margin-right: 10px;
+}
+
+.SqlEditor-expanded .gutter-horizontal {
+    display: none;
+}
+
+.queryPane .gutter-vertical {
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    width: 3%;
+    margin: 3px 47%;
+    cursor: row-resize;
+}
+
+
 .SqlEditorLeftBar {
     height: 100%;
     display: flex;