refactor: Use Modals from Antd instead of react-bootstrap (#11330)

* Refactor ModalTrigger to use antd modal

* Refactor a few components

* dynamic width

* Fix unit tests

* Use i18n for button text

superset-frontend/spec/javascripts/dashboard/components/CssEditor_spec.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
-
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import CssEditor from 'src/dashboard/components/CssEditor';
 
 describe('CssEditor', () => {
@@ -29,7 +29,12 @@ describe('CssEditor', () => {
     expect(React.isValidElement(<CssEditor {...mockedProps} />)).toBe(true);
   });
   it('renders the trigger node', () => {
-    const wrapper = mount(<CssEditor {...mockedProps} />);
+    const wrapper = mount(<CssEditor {...mockedProps} />, {
+      wrappingComponent: ThemeProvider,
+      wrappingComponentProps: {
+        theme: supersetTheme,
+      },
+    });
     expect(wrapper.find('.fa-edit')).toExist();
   });
 });

superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx

@@ -22,6 +22,15 @@ import { mount, shallow } from 'enzyme';
 import ModalTrigger from 'src/components/ModalTrigger';
 import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
 import { Alert } from 'react-bootstrap';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+
+const getMountWrapper = props =>
+  mount(<RefreshIntervalModal {...props} />, {
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: {
+      theme: supersetTheme,
+    },
+  });
 
 describe('RefreshIntervalModal', () => {
   const mockedProps = {
@@ -36,15 +45,15 @@ describe('RefreshIntervalModal', () => {
     ).toBe(true);
   });
   it('renders the trigger node', () => {
-    const wrapper = mount(<RefreshIntervalModal {...mockedProps} />);
+    const wrapper = getMountWrapper(mockedProps);
     expect(wrapper.find('.fa-edit')).toExist();
   });
   it('should render a interval seconds', () => {
-    const wrapper = mount(<RefreshIntervalModal {...mockedProps} />);
+    const wrapper = getMountWrapper(mockedProps);
     expect(wrapper.prop('refreshFrequency')).toEqual(10);
   });
   it('should change refreshFrequency with edit mode', () => {
-    const wrapper = mount(<RefreshIntervalModal {...mockedProps} />);
+    const wrapper = getMountWrapper(mockedProps);
     wrapper.instance().handleFrequencyChange({ value: 30 });
     wrapper.instance().onSave();
     expect(mockedProps.onChange).toHaveBeenCalled();

superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx

@@ -126,7 +126,7 @@ describe('Tabs', () => {
       wrapper.find(WithPopoverMenu).simulate('click'); // focus
       wrapper.find('.icon-button').simulate('click');
 
-      const modal = document.getElementsByClassName('modal');
+      const modal = document.getElementsByClassName('ant-modal');
       expect(modal).toHaveLength(1);
       expect(deleteComponent.callCount).toBe(0);
     });