You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2017/08/23 21:40:10 UTC
[incubator-superset] branch master updated: Revert "[sql lab] Make
sql editor resizable (#3242)" (#3360)
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 <ma...@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" <co...@superset.apache.org>'].