refactor: Replace usages of Popover from react-bootstrap with Antd (#11163)

* New popover component

* LimitControl

* Moar components migrated

* TimeSeriesColumnControl

* Hotkeys

* ColorPicker

* FilterBoxItemCOntrol

* AdhocFilterEditPopover

* AdhocMetric

* AnnotationLayerControl

* DateFilterControl

* Tests fix

* Fix linting issue

* Fix tests

* Bug fix

* Test fix

* Remove Antd global stylesheet

* Fix linting

* Fix test

* Fix test

* Fix test

* Fix test

* Fix test

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

@@ -20,7 +20,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Popover, Tab, Tabs } from 'react-bootstrap';
+import { Tab, Tabs } from 'react-bootstrap';
 import Button from 'src/components/Button';
 
 import AdhocFilter, {
@@ -81,7 +81,6 @@ function setup(overrides) {
 describe('AdhocFilterEditPopover', () => {
   it('renders simple tab content by default', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(Popover)).toExist();
     expect(wrapper.find(Tabs)).toExist();
     expect(wrapper.find(Tab)).toHaveLength(2);
     expect(wrapper.find(Button)).toHaveLength(2);
@@ -92,7 +91,6 @@ describe('AdhocFilterEditPopover', () => {
 
   it('renders sql tab content when the adhoc filter expressionType is sql', () => {
     const { wrapper } = setup({ adhocFilter: sqlAdhocFilter });
-    expect(wrapper.find(Popover)).toExist();
     expect(wrapper.find(Tabs)).toExist();
     expect(wrapper.find(Tab)).toHaveLength(2);
     expect(wrapper.find(Button)).toHaveLength(2);

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

@@ -20,7 +20,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { styledShallow as shallow } from 'spec/helpers/theming';
-import { OverlayTrigger } from 'react-bootstrap';
+import Popover from 'src/common/components/Popover';
 
 import Label from 'src/components/Label';
 import AdhocFilter, {
@@ -53,15 +53,15 @@ function setup(overrides) {
 describe('AdhocFilterOption', () => {
   it('renders an overlay trigger wrapper for the label', () => {
     const { wrapper } = setup();
-    const overlay = wrapper.find(OverlayTrigger);
+    const overlay = wrapper.find(Popover);
     expect(overlay).toHaveLength(1);
-    expect(overlay.props().defaultOverlayShown).toBe(false);
+    expect(overlay.props().defaultVisible).toBe(false);
     expect(wrapper.find(Label)).toExist();
   });
   it('should open new filter popup by default', () => {
     const { wrapper } = setup({
       adhocFilter: simpleAdhocFilter.duplicateWith({ isNew: true }),
     });
-    expect(wrapper.find(OverlayTrigger).props().defaultOverlayShown).toBe(true);
+    expect(wrapper.find(Popover).props().defaultVisible).toBe(true);
   });
 });

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

@@ -22,25 +22,17 @@ import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { OverlayTrigger } from 'react-bootstrap';
 
-import AdhocMetric from 'src/explore/AdhocMetric';
 import AdhocMetricEditPopoverTitle from 'src/explore/components/AdhocMetricEditPopoverTitle';
-import { AGGREGATES } from 'src/explore/constants';
 
-const columns = [
-  { type: 'VARCHAR(255)', column_name: 'source' },
-  { type: 'VARCHAR(255)', column_name: 'target' },
-  { type: 'DOUBLE', column_name: 'value' },
-];
-
-const sumValueAdhocMetric = new AdhocMetric({
-  column: columns[2],
-  aggregate: AGGREGATES.SUM,
-});
+const title = {
+  label: 'Title',
+  hasCustomLabel: false,
+};
 
 function setup(overrides) {
   const onChange = sinon.spy();
   const props = {
-    adhocMetric: sumValueAdhocMetric,
+    title,
     onChange,
     ...overrides,
   };

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

@@ -20,7 +20,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { FormGroup, Popover } from 'react-bootstrap';
+import { FormGroup } from 'react-bootstrap';
 import Button from 'src/components/Button';
 
 import AdhocMetric, { EXPRESSION_TYPES } from 'src/explore/AdhocMetric';
@@ -62,7 +62,6 @@ function setup(overrides) {
 describe('AdhocMetricEditPopover', () => {
   it('renders a popover with edit metric form contents', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(Popover)).toExist();
     expect(wrapper.find(FormGroup)).toHaveLength(3);
     expect(wrapper.find(Button)).toHaveLength(2);
   });
@@ -91,21 +90,6 @@ describe('AdhocMetricEditPopover', () => {
     );
   });
 
-  it('overwrites the adhocMetric in state with onLabelChange', () => {
-    const { wrapper } = setup();
-    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
-    expect(wrapper.state('adhocMetric').label).toBe('new label');
-    expect(wrapper.state('adhocMetric').hasCustomLabel).toBe(true);
-  });
-
-  it('returns to default labels when the custom label is cleared', () => {
-    const { wrapper } = setup();
-    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
-    wrapper.instance().onLabelChange({ target: { value: '' } });
-    expect(wrapper.state('adhocMetric').label).toBe('SUM(value)');
-    expect(wrapper.state('adhocMetric').hasCustomLabel).toBe(false);
-  });
-
   it('prevents saving if no column or aggregate is chosen', () => {
     const { wrapper } = setup();
     expect(wrapper.find(Button).find({ disabled: true })).not.toExist();

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

@@ -20,8 +20,8 @@
 import React from 'react';
 import sinon from 'sinon';
 import { styledShallow as shallow } from 'spec/helpers/theming';
-import { OverlayTrigger } from 'react-bootstrap';
 
+import Popover from 'src/common/components/Popover';
 import Label from 'src/components/Label';
 import AdhocMetric from 'src/explore/AdhocMetric';
 import AdhocMetricOption from 'src/explore/components/AdhocMetricOption';
@@ -53,7 +53,7 @@ function setup(overrides) {
 describe('AdhocMetricOption', () => {
   it('renders an overlay trigger wrapper for the label', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(OverlayTrigger)).toExist();
+    expect(wrapper.find(Popover)).toExist();
     expect(wrapper.find(Label)).toExist();
   });
 
@@ -61,6 +61,24 @@ describe('AdhocMetricOption', () => {
     const { wrapper } = setup({
       adhocMetric: sumValueAdhocMetric.duplicateWith({ isNew: true }),
     });
-    expect(wrapper.find(OverlayTrigger).props().defaultOverlayShown).toBe(true);
+    expect(wrapper.find(Popover).props().defaultVisible).toBe(true);
+  });
+
+  it('overwrites the adhocMetric in state with onLabelChange', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
+    expect(wrapper.state('title').label).toBe('new label');
+    expect(wrapper.state('title').hasCustomLabel).toBe(true);
+  });
+
+  it('returns to default labels when the custom label is cleared', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
+    wrapper.instance().onLabelChange({ target: { value: '' } });
+    // close and open the popover
+    wrapper.instance().closeMetricEditOverlay();
+    wrapper.instance().onOverlayEntered();
+    expect(wrapper.state('title').label).toBe('SUM(value)');
+    expect(wrapper.state('title').hasCustomLabel).toBe(false);
   });
 });

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

@@ -16,16 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-/* eslint-disable no-unused-expressions */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { OverlayTrigger } from 'react-bootstrap';
 import { SketchPicker } from 'react-color';
 import {
   CategoricalScheme,
   getCategoricalSchemeRegistry,
 } from '@superset-ui/core';
-
+import Popover from 'src/common/components/Popover';
 import ColorPickerControl from 'src/explore/components/controls/ColorPickerControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
 
@@ -53,7 +51,7 @@ describe('ColorPickerControl', () => {
   it('renders a OverlayTrigger', () => {
     const controlHeader = wrapper.find(ControlHeader);
     expect(controlHeader).toHaveLength(1);
-    expect(wrapper.find(OverlayTrigger)).toExist();
+    expect(wrapper.find(Popover)).toExist();
   });
 
   it('renders a Popover with a SketchPicker', () => {

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

@@ -18,10 +18,11 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { OverlayTrigger, Popover, Tab, Tabs, Radio } from 'react-bootstrap';
+import { OverlayTrigger, Tab, Tabs, Radio } from 'react-bootstrap';
 import sinon from 'sinon';
 import { styledMount as mount } from 'spec/helpers/theming';
 
+import Popover from 'src/common/components/Popover';
 import Label from 'src/components/Label';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
@@ -57,15 +58,8 @@ describe('DateFilterControl', () => {
     expect(controlHeader).toHaveLength(1);
   });
 
-  it('renders an OverlayTrigger', () => {
-    expect(wrapper.find(OverlayTrigger)).toExist();
-  });
-
-  it('renders a popover', () => {
-    const { overlay } = wrapper.find(OverlayTrigger).first().props();
-    const overlayWrapper = mount(overlay);
-
-    expect(overlayWrapper.find(Popover)).toExist();
+  it('renders an Popover', () => {
+    expect(wrapper.find(Popover)).toExist();
   });
 
   it('calls open/close methods on trigger click', () => {
@@ -87,27 +81,26 @@ describe('DateFilterControl', () => {
   });
 
   it('renders two tabs in popover', () => {
-    const { overlay } = wrapper.find(OverlayTrigger).first().props();
-    const overlayWrapper = mount(overlay);
-    const popover = overlayWrapper.find(Popover).first();
+    const popoverContent = wrapper.find(Popover).first().props().content;
+    const popoverContentWrapper = mount(popoverContent);
 
-    expect(popover.find(Tabs)).toExist();
-    expect(popover.find(Tab)).toHaveLength(2);
+    expect(popoverContentWrapper.find(Tabs)).toExist();
+    expect(popoverContentWrapper.find(Tab)).toHaveLength(2);
   });
 
   it('renders default time options', () => {
-    const { overlay } = wrapper.find(OverlayTrigger).first().props();
-    const overlayWrapper = mount(overlay);
-    const defaultTab = overlayWrapper.find(Tab).first();
+    const popoverContent = wrapper.find(Popover).first().props().content;
+    const popoverContentWrapper = mount(popoverContent);
+    const defaultTab = popoverContentWrapper.find(Tab).first();
 
     expect(defaultTab.find(Radio)).toExist();
     expect(defaultTab.find(Radio)).toHaveLength(6);
   });
 
   it('renders tooltips over timeframe options', () => {
-    const { overlay } = wrapper.find(OverlayTrigger).first().props();
-    const overlayWrapper = mount(overlay);
-    const defaultTab = overlayWrapper.find(Tab).first();
+    const popoverContent = wrapper.find(Popover).first().props().content;
+    const popoverContentWrapper = mount(popoverContent);
+    const defaultTab = popoverContentWrapper.find(Tab).first();
     const radioTrigger = defaultTab.find(OverlayTrigger);
 
     expect(radioTrigger).toExist();
@@ -115,9 +108,9 @@ describe('DateFilterControl', () => {
   });
 
   it('renders the correct time range in tooltip', () => {
-    const { overlay } = wrapper.find(OverlayTrigger).first().props();
-    const overlayWrapper = mount(overlay);
-    const defaultTab = overlayWrapper.find(Tab).first();
+    const popoverContent = wrapper.find(Popover).first().props().content;
+    const popoverContentWrapper = mount(popoverContent);
+    const defaultTab = popoverContentWrapper.find(Tab).first();
     const triggers = defaultTab.find(OverlayTrigger);
 
     const expectedLabels = {

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

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { OverlayTrigger } from 'react-bootstrap';
+import Popover from 'src/common/components/Popover';
 import sinon from 'sinon';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
@@ -43,7 +43,7 @@ describe('EmbedCodeButton', () => {
 
   it('renders overlay trigger', () => {
     const wrapper = shallow(<EmbedCodeButton {...defaultProps} />);
-    expect(wrapper.find(OverlayTrigger)).toExist();
+    expect(wrapper.find(Popover)).toExist();
   });
 
   it('should create a short, standalone, explore url', () => {
@@ -62,7 +62,7 @@ describe('EmbedCodeButton', () => {
       shortUrlId: 100,
     });
 
-    const trigger = wrapper.find(OverlayTrigger);
+    const trigger = wrapper.find(Popover);
     trigger.simulate('click');
     expect(spy1.callCount).toBe(1);
     expect(spy2.callCount).toBe(1);

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

@@ -20,8 +20,8 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { OverlayTrigger } from 'react-bootstrap';
 
+import Popover from 'src/common/components/Popover';
 import FilterBoxItemControl from 'src/explore/components/controls/FilterBoxItemControl';
 import FormRow from 'src/components/FormRow';
 import datasources from '../../../fixtures/mockDatasource';
@@ -45,8 +45,8 @@ describe('FilterBoxItemControl', () => {
     inst = wrapper.instance();
   });
 
-  it('renders an OverlayTrigger', () => {
-    expect(wrapper.find(OverlayTrigger)).toExist();
+  it('renders a Popover', () => {
+    expect(wrapper.find(Popover)).toExist();
   });
 
   it('renderForms does the job', () => {

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

@@ -18,10 +18,10 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { FormControl, OverlayTrigger } from 'react-bootstrap';
+import { FormControl } from 'react-bootstrap';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-
+import Popover from 'src/common/components/Popover';
 import TimeSeriesColumnControl from 'src/explore/components/controls/TimeSeriesColumnControl';
 
 const defaultProps = {
@@ -39,7 +39,7 @@ describe('SelectControl', () => {
   });
 
   it('renders an OverlayTrigger', () => {
-    expect(wrapper.find(OverlayTrigger)).toExist();
+    expect(wrapper.find(Popover)).toExist();
   });
 
   it('renders an Popover', () => {

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

@@ -19,7 +19,7 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
-import { OverlayTrigger } from 'react-bootstrap';
+import Popover from 'src/common/components/Popover';
 
 import Label from 'src/components/Label';
 import ViewportControl from 'src/explore/components/controls/ViewportControl';
@@ -48,7 +48,7 @@ describe('ViewportControl', () => {
   it('renders a OverlayTrigger', () => {
     const controlHeader = wrapper.find(ControlHeader);
     expect(controlHeader).toHaveLength(1);
-    expect(wrapper.find(OverlayTrigger)).toExist();
+    expect(wrapper.find(Popover)).toExist();
   });
 
   it('renders a Popover with 5 TextControl', () => {