refactor: Replace react-bootstrap MenuItems with Antd Menu (#11554)

* Refactor SliceHeaderControls * Refactor DisplayQueryButton * Fix duplicate keys * Refactor SliceAdder * Move css from styles to Emotion * Fix e2e test
apache · Nov 5, 2020 · 1490f30 · 1490f30
1 parent 091432e
commit 1490f30
Show file tree

Hide file tree

Showing 11 changed files with 291 additions and 272 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/controls.test.js b/superset-frontend/cypress-base/cypress/integration/dashboard/controls.test.js
@@ -81,8 +81,7 @@ describe('Dashboard top-level controls', () => {
       .next()
       .find('[data-test="dashboard-slice-refresh-tooltip"]')
       .parent()
-      .parent()
-      .should('have.class', 'disabled');
+      .should('have.class', 'ant-menu-item-disabled');
 
     cy.wait(`@postJson_${mapId}_force`);
     cy.get('[data-test="refresh-dashboard-menu-item"]').should(

diff --git a/superset-frontend/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx
@@ -18,10 +18,10 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { Menu } from 'src/common/components';
 import ModalTrigger from 'src/components/ModalTrigger';
 import { DisplayQueryButton } from 'src/explore/components/DisplayQueryButton';
-import { MenuItem } from 'react-bootstrap';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 
 describe('DisplayQueryButton', () => {
   const defaultProps = {
@@ -51,6 +51,6 @@ describe('DisplayQueryButton', () => {
       },
     });
     expect(wrapper.find(ModalTrigger)).toHaveLength(3);
-    expect(wrapper.find(MenuItem)).toHaveLength(5);
+    expect(wrapper.find(Menu.Item)).toHaveLength(5);
   });
 });
diff --git a/superset-frontend/src/components/Menu/Menu.tsx b/superset-frontend/src/components/Menu/Menu.tsx
@@ -191,7 +191,7 @@ export function Menu({
                   </DropdownMenu.ItemGroup>,
                 ]}
                 {(navbarRight.version_string || navbarRight.version_sha) && [
-                  <DropdownMenu.Divider key="user-divider" />,
+                  <DropdownMenu.Divider key="navbar-divider" />,
                   <DropdownMenu.ItemGroup
                     key="about-section"
                     title={t('About')}

diff --git a/superset-frontend/src/components/ModalTrigger.jsx b/superset-frontend/src/components/ModalTrigger.jsx
@@ -18,7 +18,6 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MenuItem } from 'react-bootstrap';
 import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 
@@ -31,7 +30,6 @@ const propTypes = {
   beforeOpen: PropTypes.func,
   onExit: PropTypes.func,
   isButton: PropTypes.bool,
-  isMenuItem: PropTypes.bool,
   className: PropTypes.string,
   tooltip: PropTypes.string,
   width: PropTypes.string,
@@ -43,7 +41,6 @@ const defaultProps = {
   beforeOpen: () => {},
   onExit: () => {},
   isButton: false,
-  isMenuItem: false,
   className: '',
   modalTitle: '',
 };
@@ -102,14 +99,6 @@ export default class ModalTrigger extends React.Component {
         </>
       );
     }
-    if (this.props.isMenuItem) {
-      return (
-        <>
-          <MenuItem onClick={this.open}>{this.props.triggerNode}</MenuItem>
-          {this.renderModal()}
-        </>
-      );
-    }
     /* eslint-disable jsx-a11y/interactive-supports-focus */
     return (
       <>

diff --git a/superset-frontend/src/components/URLShortLinkModal.jsx b/superset-frontend/src/components/URLShortLinkModal.jsx
@@ -29,7 +29,6 @@ const propTypes = {
   emailSubject: PropTypes.string,
   emailContent: PropTypes.string,
   addDangerToast: PropTypes.func.isRequired,
-  isMenuItem: PropTypes.bool,
   title: PropTypes.string,
   triggerNode: PropTypes.node.isRequired,
 };
@@ -65,7 +64,6 @@ class URLShortLinkModal extends React.Component {
     return (
       <ModalTrigger
         ref={this.setModalRef}
-        isMenuItem={this.props.isMenuItem}
         triggerNode={this.props.triggerNode}
         beforeOpen={this.getCopyUrl}
         modalTitle={this.props.title || t('Share Dashboard')}

diff --git a/superset-frontend/src/dashboard/components/SliceAdder.jsx b/superset-frontend/src/dashboard/components/SliceAdder.jsx
@@ -19,11 +19,11 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
 import { List } from 'react-virtualized';
 import SearchInput, { createFilter } from 'react-search-input';
 import { t } from '@superset-ui/core';
 
+import { Select } from 'src/common/components';
 import AddSliceCard from './AddSliceCard';
 import AddSliceDragPreview from './dnd/AddSliceDragPreview';
 import DragDroppable from './dnd/DragDroppable';
@@ -52,12 +52,14 @@ const defaultProps = {
 };
 
 const KEYS_TO_FILTERS = ['slice_name', 'viz_type', 'datasource_name'];
-const KEYS_TO_SORT = [
-  { key: 'slice_name', label: 'Name' },
-  { key: 'viz_type', label: 'Vis type' },
-  { key: 'datasource_name', label: 'Dataset' },
-  { key: 'changed_on', label: 'Recent' },
-];
+const KEYS_TO_SORT = {
+  slice_name: 'Name',
+  viz_type: 'Vis type',
+  datasource_name: 'Dataset',
+  changed_on: 'Recent',
+};
+
+const DEFAULT_SORT_KEY = 'changed_on';
 
 const MARGIN_BOTTOM = 16;
 const SIDEPANE_HEADER_HEIGHT = 30;
@@ -84,7 +86,7 @@ class SliceAdder extends React.Component {
     this.state = {
       filteredSlices: [],
       searchTerm: '',
-      sortBy: KEYS_TO_SORT.findIndex(item => item.key === 'changed_on'),
+      sortBy: DEFAULT_SORT_KEY,
       selectedSliceIdsSet: new Set(props.selectedSliceIds),
     };
     this.rowRenderer = this.rowRenderer.bind(this);
@@ -102,7 +104,7 @@ class SliceAdder extends React.Component {
     if (nextProps.lastUpdated !== this.props.lastUpdated) {
       nextState.filteredSlices = Object.values(nextProps.slices)
         .filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
-        .sort(SliceAdder.sortByComparator(KEYS_TO_SORT[this.state.sortBy].key));
+        .sort(SliceAdder.sortByComparator(this.state.sortBy));
     }
 
     if (nextProps.selectedSliceIds !== this.props.selectedSliceIds) {
@@ -123,7 +125,7 @@ class SliceAdder extends React.Component {
   getFilteredSortedSlices(searchTerm, sortBy) {
     return Object.values(this.props.slices)
       .filter(createFilter(searchTerm, KEYS_TO_FILTERS))
-      .sort(SliceAdder.sortByComparator(KEYS_TO_SORT[sortBy].key));
+      .sort(SliceAdder.sortByComparator(sortBy));
   }
 
   handleKeyPress(ev) {
@@ -216,17 +218,17 @@ class SliceAdder extends React.Component {
             onKeyPress={this.handleKeyPress}
             data-test="dashboard-charts-filter-search-input"
           />
-          <DropdownButton
-            title={`Sort by ${KEYS_TO_SORT[this.state.sortBy].label}`}
-            onSelect={this.handleSelect}
+          <Select
             id="slice-adder-sortby"
+            defaultValue={DEFAULT_SORT_KEY}
+            onChange={this.handleSelect}
           >
-            {KEYS_TO_SORT.map((item, index) => (
-              <MenuItem key={item.key} eventKey={index}>
-                Sort by {item.label}
-              </MenuItem>
+            {Object.entries(KEYS_TO_SORT).map(([key, label]) => (
+              <Select.Option key={key} value={key}>
+                Sort by {label}
+              </Select.Option>
             ))}
-          </DropdownButton>
+          </Select>
         </div>
         {this.props.isLoading && <Loading />}
         {!this.props.isLoading && this.state.filteredSlices.length > 0 && (