refactor: Replace react-bootstrap tooltips with Antd tooltips (#11737)

* Refactor tooltip in ColumnElement

* Refactor tooltip for Button 

* Remove redundant import

* Refactor tooltip in SqlEditor

* Increase line height in tooltip so that the text is centered

* Refactor tooltip in Link

* Refactor tooltip in AdhocMetricEditPopoverTitle

* Refactor tooltip from ControlHeader

* Refactor tooltip in DateFilterControl

* Refactor tooltip in VizTypeControl

* fixup! Refactor tooltip in AdhocMetricEditPopoverTitle

* Refactor tooltip in QueryAndSaveBtns

* fixup! Refactor tooltip in DateFilterControl

* Refactor tooltip in CopyToClipboard, fix cursor pointer

* Refactor tooltip in TooltipWrapper

* Refactor tooltip in Field/DatasourceEditor

* Remove redundant import

* Fix typing for placement prop

* Decrease margin in ColumnElement divider

* Change default export to named

* Move SqlLab Tooltip styles to Emotion

* Fix tests

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

@@ -20,7 +20,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { OverlayTrigger } from 'react-bootstrap';
+import { Tooltip } from 'src/common/components/Tooltip';
 
 import AdhocMetricEditPopoverTitle from 'src/explore/components/AdhocMetricEditPopoverTitle';
 
@@ -43,16 +43,18 @@ function setup(overrides) {
 describe('AdhocMetricEditPopoverTitle', () => {
   it('renders an OverlayTrigger wrapper with the title', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(OverlayTrigger)).toExist();
-    expect(wrapper.find(OverlayTrigger).find('span').text()).toBe(
-      'My Metric\xa0',
-    );
+    expect(wrapper.find(Tooltip)).toExist();
+    expect(
+      wrapper.find('[data-test="AdhocMetricEditTitle#trigger"]').text(),
+    ).toBe('My Metric\xa0');
   });
 
   it('transfers to edit mode when clicked', () => {
     const { wrapper } = setup();
     expect(wrapper.state('isEditable')).toBe(false);
-    wrapper.simulate('click');
+    wrapper
+      .find('[data-test="AdhocMetricEditTitle#trigger"]')
+      .simulate('click');
     expect(wrapper.state('isEditable')).toBe(true);
   });
 });

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

@@ -18,10 +18,11 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { OverlayTrigger, Radio } from 'react-bootstrap';
+import { Radio } from 'react-bootstrap';
 import sinon from 'sinon';
 import { styledMount as mount } from 'spec/helpers/theming';
 
+import { Tooltip } from 'src/common/components/Tooltip';
 import Popover from 'src/common/components/Popover';
 import Tabs from 'src/common/components/Tabs';
 import Label from 'src/components/Label';
@@ -115,17 +116,19 @@ describe('DateFilterControl', () => {
     const popoverContent = wrapper.find(Popover).first().props().content;
     const popoverContentWrapper = mount(popoverContent);
     const defaultTab = popoverContentWrapper.find(Tabs.TabPane).first();
-    const radioTrigger = defaultTab.find(OverlayTrigger);
+    const radioTooltip = defaultTab.find(Tooltip);
 
-    expect(radioTrigger).toExist();
-    expect(radioTrigger).toHaveLength(6);
+    expect(radioTooltip).toExist();
+    expect(radioTooltip).toHaveLength(6);
   });
 
   it('renders the correct time range in tooltip', () => {
     const popoverContent = wrapper.find(Popover).first().props().content;
     const popoverContentWrapper = mount(popoverContent);
     const defaultTab = popoverContentWrapper.find(Tabs.TabPane).first();
-    const triggers = defaultTab.find(OverlayTrigger);
+    const tooltips = defaultTab.find(Tooltip);
+
+    expect(tooltips).toHaveLength(6);
 
     const expectedLabels = {
       'Last day': '2020-09-06 < col < 2020-09-07',
@@ -136,13 +139,10 @@ describe('DateFilterControl', () => {
       'No filter': '-∞ < col < ∞',
     };
 
-    triggers.forEach(trigger => {
-      const { props } = trigger.props().overlay;
-      const label = props.id.split('tooltip-')[1];
+    tooltips.forEach(tooltip => {
+      const label = tooltip.props().id.split('tooltip-')[1];
 
-      expect(trigger.props().overlay.props.children).toEqual(
-        expectedLabels[label],
-      );
+      expect(tooltip.props().title).toEqual(expectedLabels[label]);
     });
   });
 });

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

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import Popover from 'src/common/components/Popover';
 import sinon from 'sinon';
 import { Provider } from 'react-redux';
@@ -50,12 +51,17 @@ describe('EmbedCodeButton', () => {
     const spy1 = sinon.spy(exploreUtils, 'getExploreLongUrl');
     const spy2 = sinon.spy(common, 'getShortUrl');
 
-    const wrapper = mount(<EmbedCodeButton {...defaultProps} />, {
-      wrappingComponent: Provider,
-      wrappingComponentProps: {
-        store,
+    const wrapper = mount(
+      <ThemeProvider theme={supersetTheme}>
+        <EmbedCodeButton {...defaultProps} />
+      </ThemeProvider>,
+      {
+        wrappingComponent: Provider,
+        wrappingComponentProps: {
+          store,
+        },
       },
-    });
+    ).find(EmbedCodeButton);
     wrapper.setState({
       height: '1000',
       width: '2000',