Migrates Button component from Bootstrap to AntD (#12832)

superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx

@@ -17,14 +17,15 @@
  * under the License.
  */
 import React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { ReactWrapper } from 'enzyme';
 import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import AddSliceContainer, {
   AddSliceContainerProps,
   AddSliceContainerState,
 } from 'src/addSlice/AddSliceContainer';
 import VizTypeControl from 'src/explore/components/controls/VizTypeControl';
+import { styledMount as mount } from 'spec/helpers/theming';
 
 const defaultProps = {
   datasources: [
@@ -34,14 +35,18 @@ const defaultProps = {
 };
 
 describe('AddSliceContainer', () => {
-  let wrapper: ShallowWrapper<
+  let wrapper: ReactWrapper<
     AddSliceContainerProps,
     AddSliceContainerState,
     AddSliceContainer
   >;
 
   beforeEach(() => {
-    wrapper = shallow(<AddSliceContainer {...defaultProps} />);
+    wrapper = mount(<AddSliceContainer {...defaultProps} />) as ReactWrapper<
+      AddSliceContainerProps,
+      AddSliceContainerState,
+      AddSliceContainer
+    >;
   });
 
   it('uses table as default visType', () => {
@@ -58,9 +63,9 @@ describe('AddSliceContainer', () => {
   });
 
   it('renders a disabled button if no datasource is selected', () => {
-    expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength(
-      1,
-    );
+    expect(
+      wrapper.find(Button).find({ disabled: true }).hostNodes(),
+    ).toHaveLength(1);
   });
 
   it('renders an enabled button if datasource is selected', () => {
@@ -70,9 +75,9 @@ describe('AddSliceContainer', () => {
       datasourceId: datasourceValue.split('__')[0],
       datasourceType: datasourceValue.split('__')[1],
     });
-    expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength(
-      0,
-    );
+    expect(
+      wrapper.find(Button).find({ disabled: true }).hostNodes(),
+    ).toHaveLength(0);
   });
 
   it('formats explore url', () => {

superset-frontend/spec/javascripts/dashboard/components/nativeFilters/FilterBar_spec.tsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
 import { Provider } from 'react-redux';
 import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
+import Button from 'src/components/Button';
 import { mockStore } from 'spec/fixtures/mockStore';
 
 describe('FilterBar', () => {
@@ -42,7 +43,8 @@ describe('FilterBar', () => {
     expect(wrapper.find({ name: 'collapse' })).toExist();
   });
   it('has apply and reset all buttons', () => {
-    expect(wrapper.find('.btn-primary')).toExist();
-    expect(wrapper.find('.btn-secondary')).toExist();
+    expect(wrapper.find(Button).length).toBe(2);
+    expect(wrapper.find(Button).at(0)).toHaveProp('buttonStyle', 'secondary');
+    expect(wrapper.find(Button).at(1)).toHaveProp('buttonStyle', 'primary');
   });
 });

superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
 
 import QueryAndSaveButtons from 'src/explore/components/QueryAndSaveBtns';
@@ -38,23 +38,21 @@ describe('QueryAndSaveButtons', () => {
 
   // Test the output
   describe('output', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(<QueryAndSaveButtons {...defaultProps} />);
-    });
+    const wrapper = mount(<QueryAndSaveButtons {...defaultProps} />);
 
     it('renders 2 buttons', () => {
       expect(wrapper.find(Button)).toHaveLength(2);
     });
 
     it('renders buttons with correct text', () => {
-      expect(wrapper.find(Button).contains('Run')).toBe(true);
-      expect(wrapper.find(Button).contains('Save')).toBe(true);
+      expect(wrapper.find(Button).at(0).text().trim()).toBe('Run');
+      expect(wrapper.find(Button).at(1).text().trim()).toBe('Save');
     });
 
     it('calls onQuery when query button is clicked', () => {
-      const queryButton = wrapper.find('[data-test="run-query-button"]');
+      const queryButton = wrapper
+        .find('[data-test="run-query-button"]')
+        .hostNodes();
       queryButton.simulate('click');
       expect(defaultProps.onQuery.called).toBe(true);
     });

superset-frontend/src/CRUD/CollectionTable.tsx

@@ -308,7 +308,7 @@ export default class CRUDCollection extends React.PureComponent<
           {this.props.allowAddItem && (
             <span className="m-t-10 m-r-10">
               <Button
-                buttonSize="sm"
+                buttonSize="small"
                 buttonStyle="primary"
                 onClick={this.onAddItem}
                 data-test="add-item-button"

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React, { CSSProperties } from 'react';
-import { Alert, ButtonGroup } from 'react-bootstrap';
+import { Alert } from 'react-bootstrap';
+import ButtonGroup from 'src/components/ButtonGroup';
 import ProgressBar from 'src/common/components/ProgressBar';
 import moment from 'moment';
 import { RadioChangeEvent } from 'antd/lib/radio';
@@ -580,7 +581,7 @@ export default class ResultSet extends React.PureComponent<
       if (query.isDataPreview) {
         return (
           <Button
-            buttonSize="sm"
+            buttonSize="small"
             className="fetch"
             buttonStyle="primary"
             onClick={() =>
@@ -597,7 +598,7 @@ export default class ResultSet extends React.PureComponent<
       if (query.resultsKey) {
         return (
           <Button
-            buttonSize="sm"
+            buttonSize="small"
             className="fetch"
             buttonStyle="primary"
             onClick={() => this.fetchResults(query)}

superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx

@@ -101,7 +101,6 @@ export const SaveDatasetModal: FunctionComponent<SaveDatasetModalProps> = ({
         {!shouldOverwriteDataset && (
           <Button
             disabled={disableSaveAndExploreBtn}
-            buttonSize="medium"
             buttonStyle="primary"
             onClick={onOk}
           >
@@ -110,12 +109,9 @@ export const SaveDatasetModal: FunctionComponent<SaveDatasetModalProps> = ({
         )}
         {shouldOverwriteDataset && (
           <>
-            <Button buttonSize="medium" onClick={handleOverwriteCancel}>
-              Back
-            </Button>
+            <Button onClick={handleOverwriteCancel}>Back</Button>
             <Button
               className="md"
-              buttonSize="medium"
               buttonStyle="primary"
               onClick={handleOverwriteDataset}
               disabled={disableSaveAndExploreBtn}

superset-frontend/src/SqlLab/components/TableElement.jsx

@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Collapse, Well } from 'react-bootstrap';
+import { Collapse, Well } from 'react-bootstrap';
+import ButtonGroup from 'src/components/ButtonGroup';
 import shortid from 'shortid';
 import { t, styled } from '@superset-ui/core';