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/src/explore/components/controls/AnnotationLayerControl.jsx

@@ -18,15 +18,11 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  OverlayTrigger,
-  Popover,
-  ListGroup,
-  ListGroupItem,
-} from 'react-bootstrap';
+import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { t, withTheme } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import Popover from 'src/common/components/Popover';
 import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
 import { getChartKey } from 'src/explore/exploreUtils';
 import { runAnnotationQuery } from 'src/chart/chartAction';
@@ -62,8 +58,10 @@ const defaultProps = {
 class AnnotationLayerControl extends React.PureComponent {
   constructor(props) {
     super(props);
+    this.state = { popoverVisible: false };
     this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
     this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
+    this.handleVisibleChange = this.handleVisibleChange.bind(this);
   }
 
   componentDidMount() {
@@ -101,6 +99,12 @@ class AnnotationLayerControl extends React.PureComponent {
     this.props.onChange(annotations);
   }
 
+  handleVisibleChange(visible, popoverKey) {
+    this.setState(prevState => ({
+      popoverVisible: { ...prevState, [popoverKey]: visible },
+    }));
+  }
+
   removeAnnotationLayer(annotation) {
     const annotations = this.props.value
       .slice()
@@ -108,18 +112,10 @@ class AnnotationLayerControl extends React.PureComponent {
     this.props.onChange(annotations);
   }
 
-  renderPopover(parent, annotation, error) {
+  renderPopover(parent, popoverKey, annotation, error) {
     const id = !annotation ? '_new' : annotation.name;
-    const { theme } = this.props;
     return (
-      <Popover
-        data-test="annotation-popover"
-        style={{ maxWidth: 'none' }}
-        title={
-          annotation ? t('Edit Annotation Layer') : t('Add Annotation Layer')
-        }
-        id={`annotation-pop-${id}`}
-      >
+      <div id={`annotation-pop-${id}`} data-test="popover-content">
         <AnnotationLayer
           {...annotation}
           parent={this.refs[parent]}
@@ -128,10 +124,9 @@ class AnnotationLayerControl extends React.PureComponent {
           vizType={this.props.vizType}
           addAnnotationLayer={this.addAnnotationLayer}
           removeAnnotationLayer={this.removeAnnotationLayer}
-          close={() => this.refs[parent].hide()}
-          theme={theme}
+          close={() => this.handleVisibleChange(false, popoverKey)}
         />
-      </Popover>
+      </div>
     );
   }
 
@@ -159,34 +154,41 @@ class AnnotationLayerControl extends React.PureComponent {
 
   render() {
     const annotations = this.props.value.map((anno, i) => (
-      <OverlayTrigger
+      <Popover
         key={i}
         trigger="click"
-        rootClose
-        ref={`overlay-${i}`}
         placement="right"
-        overlay={this.renderPopover(
+        title={t('Edit Annotation Layer')}
+        content={this.renderPopover(
           `overlay-${i}`,
+          i,
           anno,
           this.props.annotationError[anno.name],
         )}
+        visible={this.state.popoverVisible[i]}
+        onVisibleChange={visible => this.handleVisibleChange(visible, i)}
       >
         <ListGroupItem>
           <span>{anno.name}</span>
           <span style={{ float: 'right' }}>{this.renderInfo(anno)}</span>
         </ListGroupItem>
-      </OverlayTrigger>
+      </Popover>
     ));
+
+    const addLayerPopoverKey = 'add';
     return (
       <div>
         <ListGroup>
           {annotations}
-          <OverlayTrigger
+          <Popover
             trigger="click"
-            rootClose
-            ref="overlay-new"
             placement="right"
-            overlay={this.renderPopover('overlay-new')}
+            content={this.renderPopover('overlay-new', addLayerPopoverKey)}
+            title={t('Add Annotation Layer')}
+            visible={this.state.popoverVisible[addLayerPopoverKey]}
+            onVisibleChange={visible =>
+              this.handleVisibleChange(visible, addLayerPopoverKey)
+            }
           >
             <ListGroupItem>
               <i
@@ -195,7 +197,7 @@ class AnnotationLayerControl extends React.PureComponent {
               />{' '}
               &nbsp; {t('Add Annotation Layer')}
             </ListGroupItem>
-          </OverlayTrigger>
+          </Popover>
         </ListGroup>
       </div>
     );