superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From maximebeauche...@apache.org
Subject [incubator-superset] branch master updated: Revert "[sql lab] Make sql editor resizable (#3242)" (#3360)
Date Wed, 23 Aug 2017 21:40:10 GMT
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 46d6088  Revert "[sql lab] Make sql editor resizable (#3242)" (#3360)
46d6088 is described below

commit 46d60880ebb0c717e16cd81aef7a9ad15a6d966c
Author: Maxime Beauchemin <maximebeauchemin@gmail.com>
AuthorDate: Wed Aug 23 14:40:08 2017 -0700

    Revert "[sql lab] Make sql editor resizable (#3242)" (#3360)
    
    This reverts commit 75e69f02e8bb701f22390f42a43ed1931e951b90.
---
 .../SqlLab/components/AceEditorWrapper.jsx         |   6 +-
 .../javascripts/SqlLab/components/ResultSet.jsx    |   6 +-
 .../javascripts/SqlLab/components/SouthPane.jsx    |  65 +++------
 .../javascripts/SqlLab/components/SplitPane.jsx    | 146 ---------------------
 .../javascripts/SqlLab/components/SqlEditor.jsx    |  55 +++-----
 superset/assets/javascripts/SqlLab/main.less       |  42 +-----
 superset/assets/package.json                       |   3 +-
 .../spec/javascripts/sqllab/SplitPane_spec.jsx     |  66 ----------
 .../spec/javascripts/sqllab/SqlEditor_spec.jsx     |   5 -
 superset/assets/utils/common.js                    |   5 -
 10 files changed, 40 insertions(+), 359 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
index 925e8fd..15adf0b 100644
--- a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
+++ b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
@@ -32,7 +32,6 @@ const propTypes = {
   sql: PropTypes.string.isRequired,
   tables: PropTypes.array,
   queryEditor: PropTypes.object.isRequired,
-  height: PropTypes.string,
 };
 
 const defaultProps = {
@@ -120,15 +119,14 @@ class AceEditorWrapper extends React.PureComponent {
     this.setState({ sql: text });
   }
   render() {
-    const { height } = this.props;
     return (
       <AceEditor
-        ref="editor"
         mode="sql"
         theme="github"
         onLoad={this.onEditorLoad.bind(this)}
         onBlur={this.onBlur.bind(this)}
-        height={height}
+        minLines={12}
+        maxLines={12}
         onChange={this.textChange.bind(this)}
         width="100%"
         editorProps={{ $blockScrolling: true }}
diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
index 78dd95b..79c6d9c 100644
--- a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
+++ b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
@@ -36,6 +36,7 @@ export default class ResultSet extends React.PureComponent {
       searchText: '',
       showModal: false,
       data: null,
+      height: props.search ? props.height - RESULT_SET_CONTROLS_HEIGHT : props.height,
     };
   }
   componentDidMount() {
@@ -142,8 +143,7 @@ export default class ResultSet extends React.PureComponent {
     }
   }
   render() {
-    const { query, search, height } = this.props;
-    const tableHeight = search ? height - RESULT_SET_CONTROLS_HEIGHT : height;
+    const query = this.props.query;
     let sql;
 
     if (this.props.showSql) {
@@ -190,7 +190,7 @@ export default class ResultSet extends React.PureComponent {
             <FilterableTable
               data={data}
               orderedColumnKeys={results.columns.map(col => col.name)}
-              height={tableHeight}
+              height={this.state.height}
               filterText={this.state.searchText}
             />
           </div>
diff --git a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
index 50502d1..6773ac7 100644
--- a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
@@ -4,7 +4,6 @@ import shortid from 'shortid';
 import { Alert, Tab, Tabs } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { AutoSizer } from 'react-virtualized';
 
 import * as Actions from '../actions';
 import QueryHistory from './QueryHistory';
@@ -56,7 +55,6 @@ class SouthPane extends React.PureComponent {
 
     return window.innerHeight - sum - 95;
   }
-
   switchTab(id) {
     this.props.actions.setActiveSouthPaneTab(id);
   }
@@ -69,28 +67,13 @@ class SouthPane extends React.PureComponent {
     let results;
     if (latestQuery) {
       results = (
-        <AutoSizer
-          disableWidth
-        >
-          {({ height }) => {
-            /*
-             checking of the height probably won't be necessary
-             after release of react-virtualized v10
-            */
-            if (height !== 0) {
-              return (
-                <ResultSet
-                  showControls
-                  search
-                  query={latestQuery}
-                  actions={props.actions}
-                  height={height}
-                />
-              );
-            }
-            return <div />;
-          }}
-        </AutoSizer>
+        <ResultSet
+          showControls
+          search
+          query={latestQuery}
+          actions={props.actions}
+          height={this.state.innerTabHeight}
+        />
       );
     } else {
       results = <Alert bsStyle="info">Run a query to display results here</Alert>;
@@ -102,36 +85,20 @@ class SouthPane extends React.PureComponent {
         eventKey={query.id}
         key={query.id}
       >
-        <AutoSizer
-          disableWidth
-        >
-          {({ height }) => {
-            /*
-             checking of the height probably won't be necessary
-             after release of react-virtualized v10
-            */
-            if (height !== 0) {
-              return (
-                <ResultSet
-                  query={query}
-                  visualize={false}
-                  csv={false}
-                  actions={props.actions}
-                  cache
-                  height={height}
-                />
-              );
-            }
-            return <div />;
-          }}
-        </AutoSizer>
+        <ResultSet
+          query={query}
+          visualize={false}
+          csv={false}
+          actions={props.actions}
+          cache
+          height={this.state.innerTabHeight}
+        />
       </Tab>
     ));
 
     return (
       <div className="SouthPane">
         <Tabs
-          className="Tabs"
           bsStyle="tabs"
           id={shortid.generate()}
           activeKey={this.props.activeSouthPaneTab}
@@ -147,7 +114,7 @@ class SouthPane extends React.PureComponent {
             title="Query History"
             eventKey="History"
           >
-            <div className="QueryHistoryWrapper">
+            <div style={{ height: `${this.state.innerTabHeight}px`, overflow: 'scroll'
}}>
               <QueryHistory queries={props.editorQueries} actions={props.actions} />
             </div>
           </Tab>
diff --git a/superset/assets/javascripts/SqlLab/components/SplitPane.jsx b/superset/assets/javascripts/SqlLab/components/SplitPane.jsx
deleted file mode 100644
index d751e97..0000000
--- a/superset/assets/javascripts/SqlLab/components/SplitPane.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import delay from 'lodash.delay';
-import { getTopOffset } from '../../../utils/common';
-
-
-const propTypes = {
-  north: PropTypes.object.isRequired,
-  south: PropTypes.object.isRequired,
-  minHeight: PropTypes.number,
-  onSizeChange: PropTypes.func,
-};
-
-class SplitPane extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dragging: false,
-    };
-
-    this.handleDraggingStart = this.handleDraggingStart.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleResize = this.handleResize.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener('mouseup', this.handleMouseUp);
-    window.addEventListener('mousemove', this.handleMouseMove);
-    window.addEventListener('resize', this.handleResize);
-
-    this.initSize();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('mouseup', this.handleMouseUp);
-    window.removeEventListener('mousemove', this.handleMouseMove);
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  setSize(northInPercent, southInPercent) {
-    const totalHeight = this.refs.splitter.clientHeight - this.refs.dragBar.clientHeight;
-
-    const heightNorthInPixels = northInPercent * totalHeight / 100;
-    const heightSouthInPixels = southInPercent * totalHeight / 100;
-
-    if (this.props.onSizeChange) {
-      this.props.onSizeChange({
-        north: heightNorthInPixels,
-        south: heightSouthInPixels,
-      });
-    }
-  }
-
-  initSize() {
-    const totalHeight = this.refs.splitter.clientHeight;
-    const dragBarHeight = this.refs.dragBar.clientHeight;
-
-    const heightInPixels = (totalHeight - dragBarHeight) / 2;
-    const heightInPercent = heightInPixels * 100 / totalHeight;
-
-    this.setState({
-      ...this.state,
-      heightNorth: heightInPercent,
-      heightSouth: heightInPercent,
-    });
-    this.setSize(heightInPercent, heightInPercent);
-  }
-
-  handleMouseMove(e) {
-    if (!this.state.dragging) {
-      return;
-    }
-
-    const minHeight = this.props.minHeight || 0;
-
-    const offset = getTopOffset(this.refs.splitter);
-    const totalHeight = this.refs.splitter.clientHeight;
-    const dragBarHeight = this.refs.dragBar.clientHeight;
-
-    const heightNorthInPixels = e.pageY - offset;
-    const heightSouthInPixels = totalHeight - heightNorthInPixels - dragBarHeight;
-
-    const heightNorthInPercent = 100 * heightNorthInPixels / totalHeight;
-    const heightSouthInPercent = 100 * heightSouthInPixels / totalHeight;
-
-    if (heightNorthInPercent >= minHeight
-      && heightSouthInPercent >= minHeight) {
-      this.setState({
-        ...this.state,
-        heightNorth: heightNorthInPercent,
-        heightSouth: heightSouthInPercent,
-      });
-
-      this.setSize(heightNorthInPercent, heightSouthInPercent);
-    }
-  }
-
-  handleDraggingStart() {
-    this.setState({ ...this.state, dragging: true });
-  }
-
-  handleResize() {
-    const { heightNorth, heightSouth } = this.state;
-    /*
-    The `delay` is needed since some events like 'onresize' happen before rendering.
-    That means that we can't calculate the sizes right.
-     */
-    delay(() => {
-      this.setSize(heightNorth, heightSouth);
-    }, 100);
-  }
-
-  handleMouseUp() {
-    if (this.state.dragging) {
-      this.setState({ ...this.state, dragging: false });
-    }
-  }
-
-  render() {
-    return (
-      <div ref="splitter" className="Splitter">
-        <div
-          style={{ height: this.state.heightNorth + '%' }}
-        >
-          {this.props.north}
-        </div>
-        <div
-          ref="dragBar"
-          className="DragBar"
-          onMouseDown={this.handleDraggingStart}
-        >
-          <div className="DragBarVisible" />
-        </div>
-        <div
-          style={{ height: this.state.heightSouth + '%' }}
-        >
-          {this.props.south}
-        </div>
-      </div>
-    );
-  }
-}
-SplitPane.propTypes = propTypes;
-
-export default SplitPane;
diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
index 79e70a1..f96d788 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -15,16 +15,14 @@ import {
 
 import Button from '../../components/Button';
 
-import AceEditorWrapper from './AceEditorWrapper';
 import SouthPane from './SouthPane';
-import SplitPane from './SplitPane';
 import SaveQuery from './SaveQuery';
 import Timer from '../../components/Timer';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
+import AceEditorWrapper from './AceEditorWrapper';
 import { STATE_BSSTYLE_MAP } from '../constants';
 import RunQueryActionButton from './RunQueryActionButton';
 
-
 const propTypes = {
   actions: PropTypes.object.isRequired,
   height: PropTypes.string.isRequired,
@@ -51,7 +49,6 @@ class SqlEditor extends React.PureComponent {
       autorun: props.queryEditor.autorun,
       ctas: '',
     };
-    this.onSizeChange = this.onSizeChange.bind(this);
   }
   componentDidMount() {
     this.onMount();
@@ -63,13 +60,6 @@ class SqlEditor extends React.PureComponent {
       this.startQuery();
     }
   }
-  onSizeChange(newSizes) {
-    const bottomBarHeight = this.refs.editorBottomBar.clientHeight;
-    this.setState({
-      ...this.state,
-      editorHeight: newSizes.north - bottomBarHeight,
-    });
-  }
   setQueryEditorSql(sql) {
     this.props.actions.queryEditorSetSql(this.props.queryEditor, sql);
   }
@@ -157,7 +147,7 @@ class SqlEditor extends React.PureComponent {
       );
     }
     const editorBottomBar = (
-      <div ref="editorBottomBar" className="sql-toolbar clearfix" id="js-sql-toolbar">
+      <div className="sql-toolbar clearfix" id="js-sql-toolbar">
         <div className="pull-left">
           <Form inline>
             <RunQueryActionButton
@@ -222,34 +212,21 @@ class SqlEditor extends React.PureComponent {
             sm={this.props.hideLeftBar ? 12 : 7}
             md={this.props.hideLeftBar ? 12 : 8}
             lg={this.props.hideLeftBar ? 12 : 9}
-            style={{
-              height: this.sqlEditorHeight(),
-            }}
           >
-            <SplitPane
-              onSizeChange={this.onSizeChange}
-              minHeight={25}
-              north={
-                <div>
-                  <AceEditorWrapper
-                    actions={this.props.actions}
-                    onBlur={this.setQueryEditorSql.bind(this)}
-                    queryEditor={this.props.queryEditor}
-                    onAltEnter={this.runQuery.bind(this)}
-                    sql={this.props.queryEditor.sql}
-                    tables={this.props.tables}
-                    height={this.state.editorHeight + 'px'}
-                  />
-                  {editorBottomBar}
-                </div>
-              }
-              south={
-                <SouthPane
-                  editorQueries={this.props.editorQueries}
-                  dataPreviewQueries={this.props.dataPreviewQueries}
-                  actions={this.props.actions}
-                />
-              }
+            <AceEditorWrapper
+              actions={this.props.actions}
+              onBlur={this.setQueryEditorSql.bind(this)}
+              queryEditor={this.props.queryEditor}
+              onAltEnter={this.runQuery.bind(this)}
+              sql={this.props.queryEditor.sql}
+              tables={this.props.tables}
+            />
+            {editorBottomBar}
+            <br />
+            <SouthPane
+              editorQueries={this.props.editorQueries}
+              dataPreviewQueries={this.props.dataPreviewQueries}
+              actions={this.props.actions}
             />
           </Col>
         </Row>
diff --git a/superset/assets/javascripts/SqlLab/main.less b/superset/assets/javascripts/SqlLab/main.less
index be147a4..d5dab4c 100644
--- a/superset/assets/javascripts/SqlLab/main.less
+++ b/superset/assets/javascripts/SqlLab/main.less
@@ -31,40 +31,6 @@ body {
     padding-top: 5px;
     padding-bottom: 5px;
 }
-.DragBar {
-    padding: 10px 0;
-    text-align: center;
-    width: 100%;
-}
-.DragBarVisible {
-    width: 100%;
-    height: 3px;
-    background-color: #ccc;
-    cursor: row-resize;
-}
-.Splitter {
-    height: 100%;
-}
-.SqlEditor .SouthPane{
-    height:100%;
-}
-.SqlEditor .SouthPane .Tabs{
-    height:100%;
-    display: flex;
-    flex-direction: column;
-}
-.SqlEditor .SouthPane .Tabs .tab-content{
-    height:100%;
-    display: flex;
-    flex: 1 1;
-}
-.SqlEditor .SouthPane .Tabs .tab-pane{
-    width:100%;
-}
-.SqlEditor .QueryHistoryWrapper{
-    height: 100%;
-    overflow: scroll;
-}
 
 .scrollbar-container {
   position: relative;
@@ -271,8 +237,8 @@ div.tablePopover:hover {
     padding-top: 3px;
 }
 .ace_editor {
-    border: 1px solid #ccc;
-    margin: 0px 0px 10px 0px;
+  border: 1px solid #ccc;
+  margin: 0px 0px 10px 0px;
 }
 
 .Select-menu-outer {
@@ -287,10 +253,6 @@ div.tablePopover:hover {
     padding-top: 10px;
 }
 
-.NorthPane {
-    width: 100%;
-}
-
 .TableElement {
     margin-right: 10px;
 }
diff --git a/superset/assets/package.json b/superset/assets/package.json
index 9cf9673..638b39d 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -55,14 +55,13 @@
     "datatables.net-bs": "^1.10.12",
     "immutable": "^3.8.1",
     "jquery": "^3.2.1",
-    "lodash.delay": "^4.1.1",
     "lodash.throttle": "^4.1.1",
     "moment": "^2.14.1",
     "mustache": "^2.2.1",
     "nvd3": "1.8.5",
     "prop-types": "^15.5.8",
     "react": "^15.5.1",
-    "react-ace": "^5.1.2",
+    "react-ace": "^5.0.1",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-shallow-compare": "^15.4.2",
     "react-alert": "^1.0.14",
diff --git a/superset/assets/spec/javascripts/sqllab/SplitPane_spec.jsx b/superset/assets/spec/javascripts/sqllab/SplitPane_spec.jsx
deleted file mode 100644
index d9de0ab..0000000
--- a/superset/assets/spec/javascripts/sqllab/SplitPane_spec.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { describe, it } from 'mocha';
-import { expect } from 'chai';
-import sinon from 'sinon';
-
-import SplitPane from '../../../javascripts/SqlLab/components/SplitPane';
-
-function simulateWindowEvent(eventName, customProps) {
-  const evt = document.createEvent('Event');
-  evt.initEvent(eventName, true, true);
-  global.window.dispatchEvent(Object.assign(evt, customProps));
-}
-
-const TestComponent = () => (<div className="test" />);
-
-describe('ResizableAceEditor', () => {
-  const mockedProps = {
-    north: () => <div className="stub north" />,
-    south: () => <div className="stub south" />,
-  };
-  let clock;
-
-  beforeEach(() => {
-    clock = sinon.useFakeTimers();
-  });
-  afterEach(() => {
-    clock.restore();
-  });
-
-
-  it('is valid', () => {
-    expect(
-      React.isValidElement(<SplitPane {...mockedProps} />),
-    ).to.equal(true);
-  });
-  it('renders what you provide in north', () => {
-    const wrapper = shallow(<SplitPane {...mockedProps} north={<TestComponent />}
/>);
-    expect(wrapper.find(TestComponent)).to.have.length(1);
-  });
-  it('renders what you provide in south', () => {
-    const wrapper = shallow(<SplitPane {...mockedProps} south={<TestComponent />}
/>);
-    expect(wrapper.find(TestComponent)).to.have.length(1);
-  });
-  it('render a DragBar', () => {
-    const wrapper = shallow(<SplitPane {...mockedProps} />);
-    expect(wrapper.find('.DragBar')).to.have.length(1);
-  });
-  it('has dragging set to false by default', () => {
-    const wrapper = shallow(<SplitPane {...mockedProps} />);
-    expect(wrapper.state().dragging).to.be.equal(false);
-  });
-  it('has dragging set to true when dragged', () => {
-    const wrapper = shallow(<SplitPane {...mockedProps} />);
-    const dragbar = wrapper.find('.DragBar');
-    dragbar.simulate('mouseDown');
-    expect(wrapper.state().dragging).to.be.equal(true);
-  });
-  it('has dragging set to false when dropped', () => {
-    const wrapper = mount(<SplitPane {...mockedProps} />);
-    const dragbar = wrapper.find('.DragBar');
-    dragbar.simulate('mouseDown');
-    simulateWindowEvent('mouseup');
-    expect(wrapper.state().dragging).to.be.equal(false);
-  });
-});
diff --git a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
index 2bb335c..ab00ee6 100644
--- a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
+++ b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
@@ -6,7 +6,6 @@ import { expect } from 'chai';
 import { initialState, queries, table } from './fixtures';
 import SqlEditor from '../../../javascripts/SqlLab/components/SqlEditor';
 import SqlEditorLeftBar from '../../../javascripts/SqlLab/components/SqlEditorLeftBar';
-import SplitPane from '../../../javascripts/SqlLab/components/SplitPane';
 
 describe('SqlEditor', () => {
   const mockedProps = {
@@ -29,8 +28,4 @@ describe('SqlEditor', () => {
     const wrapper = shallow(<SqlEditor {...mockedProps} />);
     expect(wrapper.find(SqlEditorLeftBar)).to.have.length(1);
   });
-  it('render a SplitPane', () => {
-    const wrapper = shallow(<SqlEditor {...mockedProps} />);
-    expect(wrapper.find(SplitPane)).to.have.length(1);
-  });
 });
diff --git a/superset/assets/utils/common.js b/superset/assets/utils/common.js
index 05b33fb..2e143a1 100644
--- a/superset/assets/utils/common.js
+++ b/superset/assets/utils/common.js
@@ -86,8 +86,3 @@ export function getShortUrl(longUrl, callback) {
     },
   });
 }
-
-export function getTopOffset(element) {
-  const box = element.getBoundingClientRect();
-  return box.top + window.pageYOffset - document.documentElement.clientTop;
-}

-- 
To stop receiving notification emails like this one, please contact
['"commits@superset.apache.org" <commits@superset.apache.org>'].

Mime
View raw message