iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "[sql lab] Make sql editor resizable (#3242)" (#3360) 

This reverts commit 75e69f02e8.
This commit is contained in:
Maxime Beauchemin 2017-08-23 14:40:08 -07:00 committed by GitHub
parent 0c36827368
commit 46d60880eb
10 changed files with 40 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
View File

@ -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 }}

6
superset/assets/javascripts/SqlLab/components/ResultSet.jsx
View File

@ -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>

65
superset/assets/javascripts/SqlLab/components/SouthPane.jsx
View File

@ -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>

146
superset/assets/javascripts/SqlLab/components/SplitPane.jsx
View File

@ -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;

55
superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
View File

@ -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>

42
superset/assets/javascripts/SqlLab/main.less
View File

@ -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;
}

3
superset/assets/package.json
View File

@ -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",

66
superset/assets/spec/javascripts/sqllab/SplitPane_spec.jsx
View File

@ -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);
});
});

5
superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
View File

@ -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);
});
});

5
superset/assets/utils/common.js
View File

@ -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;
}