You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by gr...@apache.org on 2020/07/08 23:22:37 UTC
[incubator-superset] 01/01: Revert "feat: minor reorder SQL Lab Tab
controls (#10257)"
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 <gr...@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;