Revert "feat: minor reorder SQL Lab Tab controls (apache#10257)"

This reverts commit 4525319.
CybercentreCanada · Jul 8, 2020 · 38ca1dd · 38ca1dd
1 parent 4525319
commit 38ca1dd
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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="&nbsp;"
             >
               <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
@@ -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;