This is an automated email from the ASF dual-hosted git repository. graceguo pushed a commit to branch revert-10257-gg-SQLLabTabIcons in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit d27863ec17493158189492a878c70a9230dbfcfa Author: Grace Guo <grace....@airbnb.com> AuthorDate: Wed Jul 8 16:22:26 2020 -0700 Revert "feat: minor reorder SQL Lab Tab controls (#10257)" This reverts commit 6690963ec2649feb5f86479231a170e9efbef609. --- .../cypress/integration/sqllab/tabs.test.js | 6 +-- .../spec/javascripts/sqllab/TabStatusIcon_spec.jsx | 14 +++++++ .../src/SqlLab/components/TabStatusIcon.jsx | 42 ++++++++++++++++--- .../src/SqlLab/components/TabbedSqlEditors.jsx | 21 +++++----- superset-frontend/src/SqlLab/main.less | 49 ---------------------- 5 files changed, 64 insertions(+), 68 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js index 8f52946..d876ef6 100644 --- a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js +++ b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js @@ -40,12 +40,10 @@ describe('SqlLab query tabs', () => { const initialTabCount = tabListA.length; // open the tab dropdown to remove - cy.get('.SqlEditorTabs > ul > li .dropdown-toggle').click({ - force: true, - }); + cy.get('.SqlEditorTabs > ul > li .dropdown-toggle').click(); // first item is close - cy.get('.SqlEditorTabs .ddbtn-tab .close').first().click(); + cy.get('.SqlEditorTabs .close-btn a').click(); cy.get('.SqlEditorTabs > ul > li').should( 'have.length', diff --git a/superset-frontend/spec/javascripts/sqllab/TabStatusIcon_spec.jsx b/superset-frontend/spec/javascripts/sqllab/TabStatusIcon_spec.jsx index 4241353..4db08f8 100644 --- a/superset-frontend/spec/javascripts/sqllab/TabStatusIcon_spec.jsx +++ b/superset-frontend/spec/javascripts/sqllab/TabStatusIcon_spec.jsx @@ -36,4 +36,18 @@ describe('TabStatusIcon', () => { expect(wrapper.find('div.circle')).toHaveLength(1); expect(wrapper.text()).toBe(''); }); + + it('renders a circle with an x when hovered', () => { + const { wrapper } = setup(); + wrapper.simulate('mouseOver'); + expect(wrapper.find('div.circle')).toHaveLength(1); + expect(wrapper.text()).toBe('×'); + }); + + it('calls onClose from props when clicked', () => { + const { wrapper, onClose } = setup(); + wrapper.simulate('click'); + // eslint-disable-next-line no-unused-expressions + expect(onClose.calledOnce).toBe(true); + }); }); diff --git a/superset-frontend/src/SqlLab/components/TabStatusIcon.jsx b/superset-frontend/src/SqlLab/components/TabStatusIcon.jsx index 1eeedd1..ec8a3f2 100644 --- a/superset-frontend/src/SqlLab/components/TabStatusIcon.jsx +++ b/superset-frontend/src/SqlLab/components/TabStatusIcon.jsx @@ -19,10 +19,42 @@ import React from 'react'; import PropTypes from 'prop-types'; -export default function TabStatusIcon(props) { - return <div className={'circle ' + props.tabState} />; -} - -TabStatusIcon.propTypes = { +const propTypes = { + onClose: PropTypes.func.isRequired, tabState: PropTypes.string.isRequired, }; + +class TabStatusIcon extends React.Component { + constructor(props) { + super(props); + this.onMouseOver = this.onMouseOver.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + + this.state = { isHovered: false }; + } + + onMouseOver() { + this.setState({ isHovered: true }); + } + + onMouseOut() { + this.setState({ isHovered: false }); + } + + render() { + return ( + <span + onMouseOver={this.onMouseOver} + onMouseOut={this.onMouseOut} + onClick={this.props.onClose} + > + <div className={'circle ' + this.props.tabState}> + {this.state.isHovered ? '×' : null} + </div> + </span> + ); + } +} + +TabStatusIcon.propTypes = propTypes; +export default TabStatusIcon; diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx index ce1fbc5..6fda416 100644 --- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx +++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { MenuItem, DropdownButton, Tab, Tabs } from 'react-bootstrap'; +import { MenuItem, SplitButton, Tab, Tabs } from 'react-bootstrap'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import URI from 'urijs'; @@ -288,20 +288,22 @@ class TabbedSqlEditors extends React.PureComponent { const title = ( <> - {qe.title} <TabStatusIcon tabState={state} />{' '} - <span className="close" onClick={() => this.removeQueryEditor(qe)}> - {'×'} - </span> + <TabStatusIcon + onClose={() => this.removeQueryEditor(qe)} + tabState={state} + />{' '} + {qe.title}{' '} </> ); const tabTitle = ( <> + <span className="ddbtn-tab">{title}</span> {isSelected && ( - <DropdownButton + <SplitButton bsSize="small" id={'ddbtn-tab-' + i} - title={' '} - noCaret + className="ddbtn-tab" + title=" " > <MenuItem className="close-btn" @@ -345,9 +347,8 @@ class TabbedSqlEditors extends React.PureComponent { </div> {t('Duplicate tab')} </MenuItem> - </DropdownButton> + </SplitButton> )} - <span className="ddbtn-tab">{title}</span> </> ); return ( diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index d6672e5..de24ece 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -261,56 +261,9 @@ div.Workspace { } } - .dropdown.btn-group.btn-group-sm { - width: 3px; - height: 3px; - border-radius: 1.5px; - background: #bababa; - margin-right: 8px; - font-weight: @font-weight-normal; - display: inline-flex; - - &:hover { - background-color: @primary-color; - - &:before, - &:after { - background-color: @primary-color; - } - } - - &:before, - &:after { - position: absolute; - content: ' '; - width: 3px; - height: 3px; - border-radius: 1.5px; - background-color: #bababa; - } - &:before { - transform: translateY(-5px); - } - &:after { - transform: translateY(5px); - } - } - - ul.dropdown-menu { - margin-top: 10px; - } - .dropdown-toggle { padding-top: 2px; } - - .close { - opacity: 1; - color: @almost-black; - position: relative; - top: -2px; - right: -4px; - } } .SqlEditor { @@ -509,8 +462,6 @@ a.Link { padding: 0; border: none; background: none; - position: relative; - top: 2px; &:focus { outline: 0;