[Maps] use EuiPopover instead of mapbox tooltip (#45938)

* [Maps] use EuiPopover instead of mapbox tooltip

* update draw tooltip to use EuiPopover, remove mapbox popup css hacks

* use anchor size of 26px to fix positioning calculations

* close tooltip when position is no longer visible

* remove reevaluateTooltipPosition, its no longer needed

* fix problem with map move and hover tooltip location not also moving

Author: nreese

x-pack/legacy/plugins/maps/public/_mapbox_hacks.scss

@@ -3,22 +3,6 @@
 .mapContainer {
   flex-grow: 1;
 
-  .mapboxgl-popup {
-    z-index: $euiZLevel2;
-    border-color: $euiColorEmptyShade;
-  }
-
-  .mapboxgl-popup-content {
-    @include euiBottomShadow($color: #000);
-    background-color: $euiColorEmptyShade;
-    padding: $euiSizeS;
-    overflow: hidden;
-  }
-
-  .mapboxgl-popup-tip {
-    border-top-color: $euiColorEmptyShade !important;
-  }
-
   .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
     margin-left: $euiSizeM;
     margin-top: $euiSizeM;

x-pack/legacy/plugins/maps/public/connected_components/map/feature_geometry_filter_form.js

@@ -16,14 +16,6 @@ import { GeometryFilterForm } from '../../components/geometry_filter_form';
 
 export class FeatureGeometryFilterForm extends Component {
 
-  componentDidMount() {
-    this.props.reevaluateTooltipPosition();
-  }
-
-  componentDidUpdate() {
-    this.props.reevaluateTooltipPosition();
-  }
-
   _createFilter = ({ geometryLabel, indexPatternId, geoFieldName, geoFieldType, relation }) => {
     const filter = createSpatialFilterWithGeometry({
       geometry: this.props.feature.geometry,

x-pack/legacy/plugins/maps/public/connected_components/map/feature_properties.js

@@ -30,7 +30,6 @@ export class FeatureProperties extends React.Component {
 
   componentDidUpdate() {
     this._loadProperties();
-    this.props.reevaluateTooltipPosition();
   }
 
   componentWillUnmount() {

x-pack/legacy/plugins/maps/public/connected_components/map/feature_properties.test.js

@@ -34,7 +34,6 @@ const defaultProps = {
   layerId: `layer`,
   onCloseTooltip: () => {},
   showFilterButtons: false,
-  reevaluateTooltipPosition: () => {},
 };
 
 const mockTooltipProperties = [

x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.js

@@ -154,7 +154,6 @@ export class FeatureTooltip extends React.Component {
         showFilterButtons={this.props.showFilterButtons}
         onCloseTooltip={this._onCloseTooltip}
         addFilters={this.props.addFilters}
-        reevaluateTooltipPosition={this.props.reevaluateTooltipPosition}
       />
     );
   }
@@ -352,7 +351,6 @@ export class FeatureTooltip extends React.Component {
           feature={currentFeature}
           geoFields={filteredGeoFields}
           addFilters={this.props.addFilters}
-          reevaluateTooltipPosition={this.props.reevaluateTooltipPosition}
         />
       );
     }

x-pack/legacy/plugins/maps/public/connected_components/map/mb/draw_control/draw_tooltip.js

@@ -6,76 +6,84 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { EuiText } from '@elastic/eui';
+import { EuiPopover, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DRAW_TYPE } from '../../../../../common/constants';
-import mapboxgl from 'mapbox-gl';
-import { I18nProvider } from '@kbn/i18n/react';
+
+const noop = () => {};
 
 export class DrawTooltip extends Component {
 
+  state = {
+    x: undefined,
+    y: undefined,
+    isOpen: false,
+  };
+
   constructor(props) {
     super(props);
-    this._tooltipContainer = document.createElement('div');
-    this._mbPopup = new mapboxgl.Popup({
-      closeButton: false,
-      closeOnClick: false,
-      offset: 12,
-      anchor: 'left',
-      maxWidth: '300px',
-    });
+    this._popoverRef = React.createRef();
   }
 
   componentDidMount() {
-    this._showTooltip();
     this.props.mbMap.on('mousemove', this._updateTooltipLocation);
     this.props.mbMap.on('mouseout', this._hideTooltip);
   }
 
+  componentDidUpdate() {
+    if (this._popoverRef.current) {
+      this._popoverRef.current.positionPopoverFluid();
+    }
+  }
+
   componentWillUnmount() {
     this.props.mbMap.off('mousemove', this._updateTooltipLocation);
     this.props.mbMap.off('mouseout', this._hideTooltip);
-    this._hideTooltip();
+    this._updateTooltipLocation.cancel();
   }
 
   render() {
-    return null;
-  }
-
-  _showTooltip = () => {
     const instructions = this.props.drawState.drawType === DRAW_TYPE.BOUNDS
       ? i18n.translate('xpack.maps.drawTooltip.boundsInstructions', {
         defaultMessage: 'Click to start rectangle. Click again to finish.'
       })
       : i18n.translate('xpack.maps.drawTooltip.polygonInstructions', {
         defaultMessage: 'Click to add vertex. Double click to finish.'
       });
-    ReactDOM.render((
-      <I18nProvider>
-        <div>
-          <EuiText color="subdued" size="xs">
-            {instructions}
-          </EuiText>
-        </div>
-      </I18nProvider>
-    ), this._tooltipContainer);
 
-    this._mbPopup.setDOMContent(this._tooltipContainer)
-      .addTo(this.props.mbMap);
+    const tooltipAnchor = <div style={{ height: '26px', width: '26px', background: 'transparent' }}/>;
+
+    return (
+      <EuiPopover
+        id="drawInstructionsTooltip"
+        button={tooltipAnchor}
+        anchorPosition="rightCenter"
+        isOpen={this.state.isOpen}
+        closePopover={noop}
+        ref={this._popoverRef}
+        style={{
+          pointerEvents: 'none',
+          transform: `translate(${this.state.x - 13}px, ${this.state.y - 13}px)`
+        }}
+      >
+        <EuiText color="subdued" size="xs">
+          {instructions}
+        </EuiText>
+      </EuiPopover>
+    );
   }
 
   _hideTooltip = () => {
-    if (this._mbPopup.isOpen()) {
-      this._mbPopup.remove();
-      ReactDOM.unmountComponentAtNode(this._tooltipContainer);
-    }
+    this._updateTooltipLocation.cancel();
+    this.setState({ isOpen: false });
   }
 
   _updateTooltipLocation = _.throttle(({ lngLat }) => {
-    if (!this._mbPopup.isOpen()) {
-      this._showTooltip();
-    }
-    this._mbPopup.setLngLat(lngLat);
+    const mouseLocation = this.props.mbMap.project(lngLat);
+    this.setState({
+      isOpen: true,
+      x: mouseLocation.x,
+      y: mouseLocation.y,
+    });
   }, 100)
 }