From 46d60880ebb0c717e16cd81aef7a9ad15a6d966c Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Wed, 23 Aug 2017 14:40:08 -0700 Subject: [PATCH] Revert "[sql lab] Make sql editor resizable (#3242)" (#3360) This reverts commit 75e69f02e8bb701f22390f42a43ed1931e951b90. --- .../SqlLab/components/AceEditorWrapper.jsx | 6 +- .../SqlLab/components/ResultSet.jsx | 6 +- .../SqlLab/components/SouthPane.jsx | 65 ++------ .../SqlLab/components/SplitPane.jsx | 146 ------------------ .../SqlLab/components/SqlEditor.jsx | 55 ++----- superset/assets/javascripts/SqlLab/main.less | 42 +---- superset/assets/package.json | 3 +- .../javascripts/sqllab/SplitPane_spec.jsx | 66 -------- .../javascripts/sqllab/SqlEditor_spec.jsx | 5 - superset/assets/utils/common.js | 5 - 10 files changed, 40 insertions(+), 359 deletions(-) delete mode 100644 superset/assets/javascripts/SqlLab/components/SplitPane.jsx delete mode 100644 superset/assets/spec/javascripts/sqllab/SplitPane_spec.jsx diff --git a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx index 925e8fd80..15adf0b80 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 ( col.name)} - height={tableHeight} + height={this.state.height} filterText={this.state.searchText} /> diff --git a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx index 50502d165..6773ac782 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 = ( - - {({ height }) => { - /* - checking of the height probably won't be necessary - after release of react-virtualized v10 - */ - if (height !== 0) { - return ( - - ); - } - return
; - }} - + ); } else { results = Run a query to display results here; @@ -102,36 +85,20 @@ class SouthPane extends React.PureComponent { eventKey={query.id} key={query.id} > - - {({ height }) => { - /* - checking of the height probably won't be necessary - after release of react-virtualized v10 - */ - if (height !== 0) { - return ( - - ); - } - return
; - }} - + )); return (
-
+
diff --git a/superset/assets/javascripts/SqlLab/components/SplitPane.jsx b/superset/assets/javascripts/SqlLab/components/SplitPane.jsx deleted file mode 100644 index d751e973a..000000000 --- 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 ( -
-
- {this.props.north} -
-
-
-
-
- {this.props.south} -
-
- ); - } -} -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 79e70a17e..f96d7882f 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 = ( -
+
- - - {editorBottomBar} -
- } - south={ - - } + + {editorBottomBar} +
+ diff --git a/superset/assets/javascripts/SqlLab/main.less b/superset/assets/javascripts/SqlLab/main.less index be147a483..d5dab4c03 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 9cf9673ad..638b39dd4 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 d9de0ab7c..000000000 --- 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 = () => (
); - -describe('ResizableAceEditor', () => { - const mockedProps = { - north: () =>
, - south: () =>
, - }; - let clock; - - beforeEach(() => { - clock = sinon.useFakeTimers(); - }); - afterEach(() => { - clock.restore(); - }); - - - it('is valid', () => { - expect( - React.isValidElement(), - ).to.equal(true); - }); - it('renders what you provide in north', () => { - const wrapper = shallow(} />); - expect(wrapper.find(TestComponent)).to.have.length(1); - }); - it('renders what you provide in south', () => { - const wrapper = shallow(} />); - expect(wrapper.find(TestComponent)).to.have.length(1); - }); - it('render a DragBar', () => { - const wrapper = shallow(); - expect(wrapper.find('.DragBar')).to.have.length(1); - }); - it('has dragging set to false by default', () => { - const wrapper = shallow(); - expect(wrapper.state().dragging).to.be.equal(false); - }); - it('has dragging set to true when dragged', () => { - const wrapper = shallow(); - 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(); - 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 2bb335c31..ab00ee627 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(); expect(wrapper.find(SqlEditorLeftBar)).to.have.length(1); }); - it('render a SplitPane', () => { - const wrapper = shallow(); - expect(wrapper.find(SplitPane)).to.have.length(1); - }); }); diff --git a/superset/assets/utils/common.js b/superset/assets/utils/common.js index 05b33fb22..2e143a12c 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; -}