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/SqlLab/components/LimitControl.tsx

@@ -17,16 +17,11 @@
  * under the License.
  */
 import React from 'react';
-import {
-  FormGroup,
-  FormControl,
-  Overlay,
-  Popover,
-  FormControlProps,
-} from 'react-bootstrap';
-import Button from 'src/components/Button';
+import { FormGroup, FormControl, FormControlProps } from 'react-bootstrap';
 import { t, styled } from '@superset-ui/core';
 
+import Popover from 'src/common/components/Popover';
+import Button from 'src/components/Button';
 import Label from 'src/components/Label';
 import ControlHeader from '../../explore/components/ControlHeader';
 
@@ -57,7 +52,7 @@ export default class LimitControl extends React.PureComponent<
       textValue: (value || defaultQueryLimit).toString(),
       showOverlay: false,
     };
-    this.handleHide = this.handleHide.bind(this);
+    this.handleVisibleChange = this.handleVisibleChange.bind(this);
     this.handleToggle = this.handleToggle.bind(this);
     this.submitAndClose = this.submitAndClose.bind(this);
   }
@@ -86,8 +81,8 @@ export default class LimitControl extends React.PureComponent<
     this.setState(prevState => ({ showOverlay: !prevState.showOverlay }));
   }
 
-  handleHide() {
-    this.setState({ showOverlay: false });
+  handleVisibleChange(visible: boolean) {
+    this.setState({ showOverlay: visible });
   }
 
   renderPopover() {
@@ -99,68 +94,65 @@ export default class LimitControl extends React.PureComponent<
         ? t(' and not greater than %s', this.props.maxRow)
         : '');
     return (
-      <Popover id="sqllab-limit-results">
-        <StyledPopoverContent>
-          <ControlHeader
-            label={t('Row limit')}
-            validationErrors={!isValid ? [errorMsg] : []}
+      <StyledPopoverContent id="sqllab-limit-results">
+        <ControlHeader
+          label={t('Row limit')}
+          validationErrors={!isValid ? [errorMsg] : []}
+        />
+        <FormGroup>
+          <FormControl
+            type="text"
+            value={textValue}
+            placeholder={t(`Max: ${this.props.maxRow}`)}
+            bsSize="small"
+            onChange={(
+              event: React.FormEvent<FormControl & FormControlProps>,
+            ) =>
+              this.setState({
+                textValue: (event.currentTarget?.value as string) ?? '',
+              })
+            }
           />
-          <FormGroup>
-            <FormControl
-              type="text"
-              value={textValue}
-              placeholder={t(`Max: ${this.props.maxRow}`)}
-              bsSize="small"
-              onChange={(
-                event: React.FormEvent<FormControl & FormControlProps>,
-              ) =>
-                this.setState({
-                  textValue: (event.currentTarget?.value as string) ?? '',
-                })
-              }
-            />
-          </FormGroup>
-          <div className="clearfix">
-            <Button
-              buttonSize="small"
-              buttonStyle="primary"
-              className="float-right ok m-l-5"
-              disabled={!isValid}
-              onClick={this.submitAndClose}
-            >
-              {t('Ok')}
-            </Button>
-            <Button
-              buttonSize="small"
-              className="float-right reset"
-              onClick={this.setValueAndClose.bind(
-                this,
-                this.props.defaultQueryLimit.toString(),
-              )}
-            >
-              {t('Cancel')}
-            </Button>
-          </div>
-        </StyledPopoverContent>
-      </Popover>
+        </FormGroup>
+        <div className="clearfix">
+          <Button
+            buttonSize="small"
+            buttonStyle="primary"
+            className="float-right ok"
+            disabled={!isValid}
+            onClick={this.submitAndClose}
+          >
+            {t('Ok')}
+          </Button>
+          <Button
+            buttonSize="small"
+            className="float-right reset"
+            onClick={this.setValueAndClose.bind(
+              this,
+              this.props.defaultQueryLimit.toString(),
+            )}
+          >
+            {t('Cancel')}
+          </Button>
+        </div>
+      </StyledPopoverContent>
     );
   }
 
   render() {
     return (
       <div>
-        <Label onClick={this.handleToggle}>
-          LIMIT {this.props.value || this.props.maxRow}
-        </Label>
-        <Overlay
-          rootClose
-          show={this.state.showOverlay}
-          onHide={this.handleHide}
+        <Popover
+          content={this.renderPopover()}
+          visible={this.state.showOverlay}
           placement="right"
-          target={this}
+          onVisibleChange={this.handleVisibleChange}
+          trigger="click"
         >
-          {this.renderPopover()}
-        </Overlay>
+          <Label onClick={this.handleToggle}>
+            LIMIT {this.props.value || this.props.maxRow}
+          </Label>
+        </Popover>
       </div>
     );
   }

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

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Popover, OverlayTrigger } from 'react-bootstrap';
+import Popover from 'src/common/components/Popover';
 import { t } from '@superset-ui/core';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
@@ -89,31 +89,29 @@ class ShareSqlLabQuery extends React.Component {
 
   renderPopover() {
     return (
-      <Popover id="sqllab-shareurl-popover">
+      <div id="sqllab-shareurl-popover">
         <CopyToClipboard
           text={this.state.shortUrl || t('Loading ...')}
           copyNode={
             <i className="fa fa-clipboard" title={t('Copy to clipboard')} />
           }
         />
-      </Popover>
+      </div>
     );
   }
 
   render() {
     return (
-      <OverlayTrigger
+      <Popover
         trigger="click"
         placement="top"
-        onEnter={this.getCopyUrl}
-        rootClose
-        shouldUpdatePosition
-        overlay={this.renderPopover()}
+        onClick={this.getCopyUrl}
+        content={this.renderPopover()}
       >
         <Button buttonSize="small" className="toggleSave">
           <i className="fa fa-share" /> {t('Share')}
         </Button>
-      </OverlayTrigger>
+      </Popover>
     );
   }
 }

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

@@ -109,10 +109,6 @@ export default class SqlEditorLeftBar extends React.PureComponent {
     this.props.actions.addTable(this.props.queryEditor, tableName, schemaName);
   }
 
-  closePopover(ref) {
-    this.refs[ref].hide();
-  }
-
   render() {
     const shouldShowReset = window.location.search === '?reset=1';
     const tableMetaDataHeight = this.props.height - 130; // 130 is the height of the selects above