refactor: Use Antd Dropdown instead of react-bootstrap in DatasourceControl (#11395)

* Create Tooltip component * Refactor DatasourceControl * Bug fix * Lint fix * E2E test fix * Move menu item keys to constants * Remove LESS file * Test fix * Test fix * Lint fix
2020-10-23 18:08:35 +02:00 · 2020-10-23 18:08:35 +02:00 · ad88a06d61
parent 6f69212f28
commit ad88a06d61
5 changed files with 118 additions and 98 deletions
--- a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts
@ -34,13 +34,13 @@ describe('Datasource control', () => {
    cy.visitChartByName('Num Births Trend');
    cy.verifySliceSuccess({ waitAlias: '@postJson' });

-    cy.get('#datasource_menu').click();
+    cy.get('[data-test="datasource-menu-trigger"]').click();

    cy.get('script').then(nodes => {
      numScripts = nodes.length;
    });

-    cy.get('a').contains('Edit Dataset').click();
+    cy.get('[data-test="edit-dataset"]').click();

    // should load additional scripts for the modal
    cy.get('script').then(nodes => {
@ -65,8 +65,8 @@ describe('Datasource control', () => {
      .focus()
      .type(newMetricName, { force: true });
    // delete metric
-    cy.get('#datasource_menu').click();
-    cy.get('a').contains('Edit Dataset').click();
+    cy.get('[data-test="datasource-menu-trigger"]').click();
+    cy.get('[data-test="edit-dataset"]').click();
    cy.get('.modal-content').within(() => {
      cy.get('a[role="tab"]').contains('Metrics').click();
    });
--- a/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx
@ -20,7 +20,7 @@ import React from 'react';
 import sinon from 'sinon';
 import configureStore from 'redux-mock-store';
 import { shallow } from 'enzyme';
-import { MenuItem } from 'react-bootstrap';
+import { Menu } from 'src/common/components';
 import DatasourceModal from 'src/datasource/DatasourceModal';
 import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal';
 import DatasourceControl from 'src/explore/components/controls/DatasourceControl';
@ -72,17 +72,23 @@ describe('DatasourceControl', () => {

  it('show or hide Edit Datasource option', () => {
    let wrapper = setup();
-    expect(wrapper.find('#datasource_menu')).toExist();
-    expect(wrapper.find('#datasource_menu').dive().find(MenuItem)).toHaveLength(
-      3,
+    expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
+    let menuWrapper = shallow(
+      <div>
+        {wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
+      </div>,
    );
+    expect(menuWrapper.find(Menu.Item)).toHaveLength(3);

    wrapper = setup({
      isEditable: false,
    });
-    expect(wrapper.find('#datasource_menu')).toExist();
-    expect(wrapper.find('#datasource_menu').dive().find(MenuItem)).toHaveLength(
-      2,
+    expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
+    menuWrapper = shallow(
+      <div>
+        {wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
+      </div>,
    );
+    expect(menuWrapper.find(Menu.Item)).toHaveLength(2);
  });
 });
--- a/superset-frontend/src/explore/components/controls/DatasourceControl.less
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl.less
@ -16,33 +16,12 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-@import '../../../../stylesheets/less/variables.less';
+import React from 'react';
+import { Tooltip as BaseTooltip } from 'src/common/components';
+import { TooltipProps } from 'antd/lib/tooltip';

-#datasource_menu {
-  border-radius: @border-radius-normal;
-  padding: 0px;
-  border: none;
-}
+const Tooltip = (props: TooltipProps) => (
+  <BaseTooltip overlayStyle={{ fontSize: '12px' }} {...props} />
+);

-#datasource_menu .caret {
-  position: relative;
-  padding-right: 8px;
-  margin-left: 4px;
-  color: @lightest;
-  top: -8px;
-}
-
-#datasource_menu .caret {
-  display: none;
-}
-#datasource_menu:hover {
-  background-color: transparent;
-}
-.DatasourceControl svg {
-  vertical-align: middle;
-  color: @brand-primary;
-  cursor: pointer;
-}
-.DatasourceControl .angle {
-  color: @brand-primary;
-}
+export default Tooltip;
--- a/superset-frontend/src/common/components/common.stories.tsx
+++ b/superset-frontend/src/common/components/common.stories.tsx
@ -19,12 +19,13 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select } from '@storybook/addon-knobs';
+import Button from 'src/components/Button';
 import Modal from './Modal';
 import Tabs, { EditableTabs } from './Tabs';
 import AntdPopover from './Popover';
+import AntdTooltip from './Tooltip';
 import { Menu } from '.';
 import { Dropdown } from './Dropdown';
-import Button from '../../components/Button';

 export default {
  title: 'Common Components',
@ -146,3 +147,31 @@ export const Popover = () => (
    <Button>TRIGGER</Button>
  </AntdPopover>
 );
+
+export const Tooltip = () => (
+  <AntdTooltip
+    title="This is a Tooltip"
+    trigger={select('Trigger', ['click', 'hover', 'focus'], 'click')}
+    placement={select(
+      'Placement',
+      [
+        'topLeft',
+        'top',
+        'topRight',
+        'leftTop',
+        'left',
+        'leftBottom',
+        'rightTop',
+        'right',
+        'rightBottom',
+        'bottomLeft',
+        'bottom',
+        'bottomRight',
+      ],
+      'topLeft',
+    )}
+    arrowPointAtCenter={boolean('Arrow point at center', false)}
+  >
+    <Button>A button with tooltip</Button>
+  </AntdTooltip>
+);
--- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
@ -18,28 +18,18 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Col,
-  Collapse,
-  DropdownButton,
-  MenuItem,
-  OverlayTrigger,
-  Row,
-  Tooltip,
-  Well,
-} from 'react-bootstrap';
+import { Col, Collapse, Row, Well } from 'react-bootstrap';
 import { t, styled } from '@superset-ui/core';
 import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';

-import TooltipWrapper from 'src/components/TooltipWrapper';
-
+import { Dropdown, Menu } from 'src/common/components';
+import Tooltip from 'src/common/components/Tooltip';
 import Icon from 'src/components/Icon';
 import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal';
 import DatasourceModal from 'src/datasource/DatasourceModal';
 import Label from 'src/components/Label';

 import ControlHeader from '../ControlHeader';
-import './DatasourceControl.less';

 const propTypes = {
  actions: PropTypes.object.isRequired,
@ -58,19 +48,30 @@ const defaultProps = {
 };

 const Styles = styled.div`
-  #datasource_menu {
+  .ant-dropdown-trigger {
    margin-left: ${({ theme }) => theme.gridUnit}px;
    box-shadow: none;
    &:active {
      box-shadow: none;
    }
  }
+
  .btn-group .open .dropdown-toggle {
    box-shadow: none;
    &.button-default {
      background: none;
    }
  }
+
+  i.angle {
+    color: ${({ theme }) => theme.colors.primary.base};
+  }
+
+  svg.datasource-modal-trigger {
+    color: ${({ theme }) => theme.colors.primary.base};
+    vertical-align: middle;
+    cursor: pointer;
+  }
 `;

 /**
@ -84,6 +85,10 @@ const ColumnsCol = styled(Col)`
  }
 `;

+const CHANGE_DATASET = 'change_dataset';
+const EXPLORE_IN_SQL_LAB = 'explore_in_sql_lab';
+const EDIT_DATASET = 'edit_dataset';
+
 class DatasourceControl extends React.PureComponent {
  constructor(props) {
    super(props);
@ -98,6 +103,7 @@ class DatasourceControl extends React.PureComponent {
    this.toggleEditDatasourceModal = this.toggleEditDatasourceModal.bind(this);
    this.toggleShowDatasource = this.toggleShowDatasource.bind(this);
    this.renderDatasource = this.renderDatasource.bind(this);
+    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
  }

  onDatasourceSave(datasource) {
@ -125,6 +131,15 @@ class DatasourceControl extends React.PureComponent {
    }));
  }

+  handleMenuItemClick({ key }) {
+    if (key === CHANGE_DATASET) {
+      this.toggleChangeDatasourceModal();
+    }
+    if (key === EDIT_DATASET) {
+      this.toggleEditDatasourceModal();
+    }
+  }
+
  renderDatasource() {
    const { datasource } = this.props;
    const { showDatasource } = this.state;
@ -176,18 +191,32 @@ class DatasourceControl extends React.PureComponent {
      showDatasource,
    } = this.state;
    const { datasource, onChange, value } = this.props;
+
+    const datasourceMenu = (
+      <Menu onClick={this.handleMenuItemClick}>
+        <Menu.Item key={CHANGE_DATASET}>{t('Change Dataset')}</Menu.Item>
+        <Menu.Item key={EXPLORE_IN_SQL_LAB}>
+          <a
+            href={`/superset/sqllab?datasourceKey=${value}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t('Explore in SQL Lab')}
+          </a>
+        </Menu.Item>
+        {this.props.isEditable && (
+          <Menu.Item key={EDIT_DATASET} data-test="edit-dataset">
+            {t('Edit Dataset')}
+          </Menu.Item>
+        )}
+      </Menu>
+    );
+
    return (
      <Styles className="DatasourceControl">
        <ControlHeader {...this.props} />
        <div>
-          <OverlayTrigger
-            placement="top"
-            overlay={
-              <Tooltip id="toggle-dataset-tooltip">
-                {t('Expand/collapse dataset configuration')}
-              </Tooltip>
-            }
-          >
+          <Tooltip title={t('Expand/collapse dataset configuration')}>
            <Label
              style={{ textTransform: 'none' }}
              onClick={this.toggleShowDatasource}
@ -199,43 +228,20 @@ class DatasourceControl extends React.PureComponent {
                }`}
              />
            </Label>
-          </OverlayTrigger>
-          <TooltipWrapper
-            label="change-datasource"
-            tooltip={t('More dataset related options')}
-            trigger={['hover']}
+          </Tooltip>
+          <Dropdown
+            overlay={datasourceMenu}
+            trigger={['click']}
+            data-test="datasource-menu"
          >
-            <DropdownButton
-              title={<Icon name="more-horiz" />}
-              className=""
-              bsSize="sm"
-              id="datasource_menu"
-              data-test="datasource-menu"
-            >
-              <MenuItem eventKey="3" onClick={this.toggleChangeDatasourceModal}>
-                {t('Change Dataset')}
-              </MenuItem>
-              {datasource.type === 'table' && (
-                <MenuItem
-                  eventKey="3"
-                  href={`/superset/sqllab?datasourceKey=${value}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {t('Explore in SQL Lab')}
-                </MenuItem>
-              )}
-              {this.props.isEditable && (
-                <MenuItem
-                  data-test="edit-dataset"
-                  eventKey="3"
-                  onClick={this.toggleEditDatasourceModal}
-                >
-                  {t('Edit Dataset')}
-                </MenuItem>
-              )}
-            </DropdownButton>
-          </TooltipWrapper>
+            <Tooltip title={t('More dataset related options')}>
+              <Icon
+                className="datasource-modal-trigger"
+                data-test="datasource-menu-trigger"
+                name="more-horiz"
+              />
+            </Tooltip>
+          </Dropdown>
        </div>
        <Collapse in={this.state.showDatasource}>
          {this.renderDatasource()}