[Revert] Allow resizing width of SQL Lab left bar / editor apache#8099

airbnb · Aug 29, 2019 · 47e588b · 47e588b
1 parent 56566c2
commit 47e588b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 74 deletions.
diff --git a/superset/assets/package-lock.json b/superset/assets/package-lock.json
diff --git a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx b/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_VERTICAL_GUTTER_HEIGHT,
-  SQL_EDITOR_VERTICAL_GUTTER_MARGIN,
+  SQL_EDITOR_GUTTER_HEIGHT,
+  SQL_EDITOR_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_VERTICAL_GUTTER_MARGIN * 2)
-      + SQL_EDITOR_VERTICAL_GUTTER_HEIGHT;
+      + (SQL_EDITOR_GUTTER_MARGIN * 2)
+      + SQL_EDITOR_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_VERTICAL_GUTTER_MARGIN * 2)
-      + SQL_EDITOR_VERTICAL_GUTTER_HEIGHT;
+      + (SQL_EDITOR_GUTTER_MARGIN * 2)
+      + SQL_EDITOR_GUTTER_HEIGHT;
     expect(totalSize).toEqual(450);
   });
   it('render a LimitControl with default limit', () => {

diff --git a/superset/assets/src/SqlLab/components/SqlEditor.jsx b/superset/assets/src/SqlLab/components/SqlEditor.jsx
@@ -46,22 +46,18 @@ import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
 import {
   STATE_BSSTYLE_MAP,
-  SQL_EDITOR_VERTICAL_GUTTER_HEIGHT,
-  SQL_EDITOR_VERTICAL_GUTTER_MARGIN,
+  SQL_EDITOR_GUTTER_HEIGHT,
+  SQL_EDITOR_GUTTER_MARGIN,
   SQL_TOOLBAR_HEIGHT,
-  SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH,
 } from '../constants';
 import RunQueryActionButton from './RunQueryActionButton';
 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,
@@ -107,7 +103,6 @@ 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(
@@ -169,10 +164,10 @@ class SqlEditor extends React.PureComponent {
   getAceEditorAndSouthPaneHeights(height, northPercent, southPercent) {
     return {
       aceEditorHeight: height * northPercent / 100
-        - (SQL_EDITOR_VERTICAL_GUTTER_HEIGHT / 2 + SQL_EDITOR_VERTICAL_GUTTER_MARGIN)
+        - (SQL_EDITOR_GUTTER_HEIGHT / 2 + SQL_EDITOR_GUTTER_MARGIN)
         - SQL_TOOLBAR_HEIGHT,
       southPaneHeight: height * southPercent / 100
-        - (SQL_EDITOR_VERTICAL_GUTTER_HEIGHT / 2 + SQL_EDITOR_VERTICAL_GUTTER_MARGIN),
+        - (SQL_EDITOR_GUTTER_HEIGHT / 2 + SQL_EDITOR_GUTTER_MARGIN),
     };
   }
   getHotkeyConfig() {
@@ -220,7 +215,7 @@ class SqlEditor extends React.PureComponent {
   }
   elementStyle(dimension, elementSize, gutterSize) {
     return {
-      [dimension]: `calc(${elementSize}% - ${gutterSize + SQL_EDITOR_VERTICAL_GUTTER_MARGIN}px)`,
+      [dimension]: `calc(${elementSize}% - ${gutterSize + SQL_EDITOR_GUTTER_MARGIN}px)`,
     };
   }
   requestValidation() {
@@ -292,7 +287,7 @@ class SqlEditor extends React.PureComponent {
         elementStyle={this.elementStyle}
         minSize={200}
         direction="vertical"
-        gutterSize={SQL_EDITOR_VERTICAL_GUTTER_HEIGHT}
+        gutterSize={SQL_EDITOR_GUTTER_HEIGHT}
         onDragStart={this.onResizeStart}
         onDragEnd={this.onResizeEnd}
       >
@@ -321,22 +316,6 @@ 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) {
@@ -476,18 +455,23 @@ class SqlEditor extends React.PureComponent {
   }
   render() {
     return (
-      <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()}
+      <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>
         {this.queryPane()}
-      </Split>
+      </div>
     );
   }
 }

diff --git a/superset/assets/src/SqlLab/constants.js b/superset/assets/src/SqlLab/constants.js
@@ -45,10 +45,9 @@ export const TIME_OPTIONS = [
 ];
 
 // SqlEditor layout constants
-export const SQL_EDITOR_VERTICAL_GUTTER_HEIGHT = 5;
-export const SQL_EDITOR_VERTICAL_GUTTER_MARGIN = 3;
+export const SQL_EDITOR_GUTTER_HEIGHT = 5;
+export const SQL_EDITOR_GUTTER_MARGIN = 3;
 export const SQL_TOOLBAR_HEIGHT = 51;
-export const SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH = 5;
 
 // kilobyte storage
 export const KB_STORAGE = 1024;

diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less
@@ -229,7 +229,7 @@ div.Workspace {
     }
 }
 
-.SqlEditor, .SqlEditor-expanded {
+.SqlEditor {
     display: flex;
     flex-direction: row;
     height: 100%;
@@ -241,11 +241,14 @@ 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 {
@@ -270,29 +273,19 @@ div.Workspace {
     .schemaPane-exit-done + .queryPane {
         margin-left: 0;
     }
-}
-
-.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;
-}
+    .gutter {
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        width: 3%;
+        margin: 3px 47%;
+    }
 
-.queryPane .gutter-vertical {
-    border-top: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    width: 3%;
-    margin: 3px 47%;
-    cursor: row-resize;
+    .gutter.gutter-vertical {
+        cursor: row-resize;
+    }
 }
 
-
 .SqlEditorLeftBar {
     height: 100%;
     display: flex;