[Maps] add drilldown support map embeddable (#75598) (#76236)

* [Maps] add drilldown support

* filter actions view

* use i18n getter

* remove unused changed

* tslint fixes

* more tslint changes

* clean-up and API doc changes

* update snapshots

* do not show first drilldown in tooltip

* add light grey line to seperate feature property rows

* Improving tooltip row styles (#36)

* Improving tooltip actions row styles

* Removind unecessary comment

* update snapshot and add functional test

* switch UiActionsActionDefinition to Action and remove unneeded checks

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

Author: 3 people

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.action_global_apply_filter.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [ACTION\_GLOBAL\_APPLY\_FILTER](./kibana-plugin-plugins-data-public.action_global_apply_filter.md)
+
+## ACTION\_GLOBAL\_APPLY\_FILTER variable
+
+<b>Signature:</b>
+
+```typescript
+ACTION_GLOBAL_APPLY_FILTER = "ACTION_GLOBAL_APPLY_FILTER"
+```

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md

@@ -89,6 +89,7 @@
 
 |  Variable | Description |
 |  --- | --- |
+|  [ACTION\_GLOBAL\_APPLY\_FILTER](./kibana-plugin-plugins-data-public.action_global_apply_filter.md) |  |
 |  [AggGroupLabels](./kibana-plugin-plugins-data-public.agggrouplabels.md) |  |
 |  [AggGroupNames](./kibana-plugin-plugins-data-public.agggroupnames.md) |  |
 |  [baseFormattersPublic](./kibana-plugin-plugins-data-public.baseformatterspublic.md) |  |

src/plugins/data/public/index.ts

@@ -440,7 +440,7 @@ export {
 
 export { isTimeRange, isQuery, isFilter, isFilters } from '../common';
 
-export { ApplyGlobalFilterActionContext } from './actions';
+export { ACTION_GLOBAL_APPLY_FILTER, ApplyGlobalFilterActionContext } from './actions';
 
 export * from '../common/field_mapping';
 

src/plugins/data/public/public.api.md

@@ -78,6 +78,11 @@ import { UnregisterCallback } from 'history';
 import { UnwrapPromiseOrReturn } from '@kbn/utility-types';
 import { UserProvidedValues } from 'src/core/server/types';
 
+// Warning: (ae-missing-release-tag) "ACTION_GLOBAL_APPLY_FILTER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const ACTION_GLOBAL_APPLY_FILTER = "ACTION_GLOBAL_APPLY_FILTER";
+
 // Warning: (ae-forgotten-export) The symbol "AggConfigSerialized" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "AggConfigOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts

@@ -53,6 +53,7 @@ export type TooltipState = {
 };
 
 export type DrawState = {
+  actionId: string;
   drawType: DRAW_TYPE;
   filterLabel?: string; // point radius filter alias
   geoFieldName?: string;

x-pack/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap

@@ -0,0 +1,3 @@
+.mapActionSelectIcon {
+  margin-right: $euiSizeS;
+}

x-pack/plugins/maps/public/components/_action_select.scss

@@ -1,3 +1,4 @@
+@import 'action_select';
 @import 'metric_editors';
 @import './geometry_filter';
 @import 'tooltip_selector/tooltip_selector';

x-pack/plugins/maps/public/components/_index.scss

@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Component } from 'react';
+import { EuiFormRow, EuiSuperSelect, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
+
+interface Props {
+  value?: string;
+  onChange: (value: string) => void;
+  getFilterActions?: () => Promise<Action[]>;
+  getActionContext?: () => ActionExecutionContext;
+}
+
+interface State {
+  actions: Action[];
+}
+
+export class ActionSelect extends Component<Props, State> {
+  private _isMounted = false;
+  state: State = {
+    actions: [],
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadActions();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  async _loadActions() {
+    if (!this.props.getFilterActions || !this.props.getActionContext) {
+      return;
+    }
+    const actions = await this.props.getFilterActions();
+    if (this._isMounted) {
+      this.setState({ actions });
+    }
+  }
+
+  render() {
+    if (this.state.actions.length === 0 || !this.props.getActionContext) {
+      return null;
+    }
+
+    if (this.state.actions.length === 1 && this.props.value === this.state.actions[0].id) {
+      return null;
+    }
+
+    const actionContext = this.props.getActionContext();
+    const options = this.state.actions.map((action) => {
+      const iconType = action.getIconType(actionContext);
+      return {
+        value: action.id,
+        inputDisplay: (
+          <div>
+            {iconType ? <EuiIcon className="mapActionSelectIcon" type={iconType} /> : null}
+            {action.getDisplayName(actionContext)}
+          </div>
+        ),
+      };
+    });
+
+    return (
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.actionSelect.label', {
+          defaultMessage: 'Action',
+        })}
+        display="rowCompressed"
+      >
+        <EuiSuperSelect
+          compressed
+          options={options}
+          valueOfSelected={this.props.value ? this.props.value : ''}
+          onChange={this.props.onChange}
+        />
+      </EuiFormRow>
+    );
+  }
+}

x-pack/plugins/maps/public/components/action_select.tsx

@@ -14,31 +14,40 @@ import {
   EuiTextAlign,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { MultiIndexGeoFieldSelect } from './multi_index_geo_field_select';
 import { GeoFieldWithIndex } from './geo_field_with_index';
+import { ActionSelect } from './action_select';
+import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../src/plugins/data/public';
 
 interface Props {
   className?: string;
   buttonLabel: string;
   geoFields: GeoFieldWithIndex[];
+  getFilterActions?: () => Promise<Action[]>;
+  getActionContext?: () => ActionExecutionContext;
   onSubmit: ({
+    actionId,
     filterLabel,
     indexPatternId,
     geoFieldName,
   }: {
+    actionId: string;
     filterLabel: string;
     indexPatternId: string;
     geoFieldName: string;
   }) => void;
 }
 
 interface State {
+  actionId: string;
   selectedField: GeoFieldWithIndex | undefined;
   filterLabel: string;
 }
 
 export class DistanceFilterForm extends Component<Props, State> {
-  state = {
+  state: State = {
+    actionId: ACTION_GLOBAL_APPLY_FILTER,
     selectedField: this.props.geoFields.length ? this.props.geoFields[0] : undefined,
     filterLabel: '',
   };
@@ -53,11 +62,16 @@ export class DistanceFilterForm extends Component<Props, State> {
     });
   };
 
+  _onActionIdChange = (value: string) => {
+    this.setState({ actionId: value });
+  };
+
   _onSubmit = () => {
     if (!this.state.selectedField) {
       return;
     }
     this.props.onSubmit({
+      actionId: this.state.actionId,
       filterLabel: this.state.filterLabel,
       indexPatternId: this.state.selectedField.indexPatternId,
       geoFieldName: this.state.selectedField.geoFieldName,
@@ -86,6 +100,13 @@ export class DistanceFilterForm extends Component<Props, State> {
           onChange={this._onGeoFieldChange}
         />
 
+        <ActionSelect
+          getFilterActions={this.props.getFilterActions}
+          getActionContext={this.props.getActionContext}
+          value={this.state.actionId}
+          onChange={this._onActionIdChange}
+        />
+
         <EuiSpacer size="m" />
 
         <EuiTextAlign textAlign="right">