[7.x] [Maps] Add filter actions to tooltips (#33635)

x-pack/plugins/maps/public/components/layer_panel/filter_editor/filter_editor.js

@@ -174,9 +174,7 @@ export class FilterEditor extends Component {
             />
           </h5>
         </EuiTitle>
-
         {this._renderQuery()}
-
         {this._renderQueryPopover()}
       </Fragment>
     );

x-pack/plugins/maps/public/components/map/feature_tooltip.js

@@ -11,52 +11,93 @@ import { i18n } from '@kbn/i18n';
 
 export class FeatureTooltip extends React.Component {
 
+  _renderFilterButton(tooltipProperty) {
+    if (!this.props.showFilterButtons || !tooltipProperty.isFilterable())  {
+      return null;
+    }
 
-  _renderProperties() {
-    return Object.keys(this.props.properties).map(propertyName => {
+    return (
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          iconType="plusInCircle"
+          title={i18n.translate('xpack.maps.tooltip.filterOnPropertyTitle', {
+            defaultMessage: 'Filter on property'
+          })}
+          onClick={() => {
+            this.props.closeTooltip();
+            const filterAction = tooltipProperty.getFilterAction();
+            filterAction();
+          }}
+          aria-label={i18n.translate('xpack.maps.tooltip.filterOnPropertyAriaLabel', {
+            defaultMessage: 'Filter on property'
+          })}
+          className="mapFeatureTooltipFilterButton"
+        />
+      </EuiFlexItem>
+    );
+  }
+
+  _renderProperties(hasFilters) {
+    return this.props.properties.map((tooltipProperty, index) => {
       /*
        * Justification for dangerouslySetInnerHTML:
-       * Propery value contains value generated by Field formatter
+       * Property value contains value generated by Field formatter
        * Since these formatters produce raw HTML, this component needs to be able to render them as-is, relying
        * on the field formatter to only produce safe HTML.
        */
-
       const htmlValue = (<span
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
-          __html: this.props.properties[propertyName]
+          __html: tooltipProperty.getHtmlDisplayValue()
         }}
       />);
+
       return (
-        <div key={propertyName}>
-          <span><strong>{propertyName}</strong></span>
-          <span>{' '}</span>
-          {htmlValue}
-        </div>
+        <EuiFlexGroup key={index}>
+          <EuiFlexItem grow={4}>
+            <strong>{tooltipProperty.getPropertyName()}</strong>
+          </EuiFlexItem>
+          <EuiFlexItem grow={6}>
+            {htmlValue}
+          </EuiFlexItem>
+          {this._renderFilterButton(tooltipProperty, hasFilters)}
+        </EuiFlexGroup>
       );
     });
   }
 
+  _renderCloseButton() {
+    if (!this.props.showCloseButton) {
+      return null;
+    }
+    return (
+      <EuiFlexGroup direction="column" gutterSize="none">
+        <EuiFlexItem grow={true}>
+          <EuiFlexGroup alignItems="flexEnd" direction="row" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                onClick={this.props.closeTooltip}
+                iconType="cross"
+                aria-label={i18n.translate('xpack.maps.tooltip.closeAriaLabel', {
+                  defaultMessage: 'Close tooltip'
+                })}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
   render() {
     return (
       <Fragment>
         <EuiFlexGroup direction="column" gutterSize="none">
-          <EuiFlexItem grow={true}>
-            <EuiFlexGroup alignItems="flexEnd" direction="row" justifyContent="spaceBetween">
-              <EuiFlexItem>&nbsp;</EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButtonIcon
-                  onClick={this.props.onCloseClick}
-                  iconType="cross"
-                  aria-label={i18n.translate('xpack.maps.tooltip.closeAreaLabel', {
-                    defaultMessage: 'Close tooltip'
-                  })}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
+          {this._renderCloseButton()}
           <EuiFlexItem>
-            {this._renderProperties()}
+            <EuiFlexGroup direction="column" gutterSize="none">
+              {this._renderProperties()}
+            </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
       </Fragment>