[Maps] refactor filter actions to use embeddable actions

x-pack/legacy/plugins/maps/public/actions/ui_actions.js

@@ -10,7 +10,6 @@ export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
 export const SET_IS_LAYER_TOC_OPEN = 'SET_IS_LAYER_TOC_OPEN';
 export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
 export const SET_READ_ONLY = 'SET_READ_ONLY';
-export const SET_FILTERABLE = 'IS_FILTERABLE';
 export const SET_OPEN_TOC_DETAILS = 'SET_OPEN_TOC_DETAILS';
 export const SHOW_TOC_DETAILS = 'SHOW_TOC_DETAILS';
 export const HIDE_TOC_DETAILS = 'HIDE_TOC_DETAILS';
@@ -57,13 +56,6 @@ export function setReadOnly(isReadOnly) {
   };
 }
 
-export function setFilterable(isFilterable) {
-  return {
-    type: SET_FILTERABLE,
-    isFilterable
-  };
-}
-
 export function setOpenTOCDetails(layerIds) {
   return {
     type: SET_OPEN_TOC_DETAILS,

x-pack/legacy/plugins/maps/public/connected_components/gis_map/view.js

@@ -83,6 +83,7 @@ export class GisMap extends Component {
 
   render() {
     const {
+      addFilters,
       layerDetailsVisible,
       addLayerVisible,
       noFlyoutVisible,
@@ -139,8 +140,8 @@ export class GisMap extends Component {
         data-shared-item
       >
         <EuiFlexItem className="mapMapWrapper">
-          <MBMapContainer/>
-          <ToolbarOverlay />
+          <MBMapContainer addFilters={addFilters}/>
+          <ToolbarOverlay addFilters={addFilters}/>
           <WidgetOverlay/>
         </EuiFlexItem>
 

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

@@ -81,7 +81,6 @@ export class FeatureProperties extends React.Component {
     }
   };
 
-
   _renderFilterCell(tooltipProperty) {
     if (!this.props.showFilterButtons || !tooltipProperty.isFilterable()) {
       return null;
@@ -95,10 +94,10 @@ export class FeatureProperties extends React.Component {
           title={i18n.translate('xpack.maps.tooltip.filterOnPropertyTitle', {
             defaultMessage: 'Filter on property'
           })}
-          onClick={() => {
+          onClick={async () => {
             this.props.onCloseTooltip();
-            const filterAction = tooltipProperty.getFilterAction();
-            filterAction();
+            const filters = await tooltipProperty.getESFilters();
+            this.props.addFilters(filters);
           }}
           aria-label={i18n.translate('xpack.maps.tooltip.filterOnPropertyAriaLabel', {
             defaultMessage: 'Filter on property'

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

@@ -19,10 +19,6 @@ class MockTooltipProperty {
     return this._isFilterable;
   }
 
-  getFilterAction() {
-    return () => {};
-  }
-
   getHtmlDisplayValue() {
     return this._value;
   }

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

@@ -128,6 +128,7 @@ export class FeatureTooltip extends React.Component {
         loadFeatureProperties={this.props.loadFeatureProperties}
         showFilterButtons={this.props.showFilterButtons}
         onCloseTooltip={this._onCloseTooltip}
+        addFilters={this.props.addFilters}
       />
     );
   }

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

@@ -25,12 +25,10 @@ import {
   getDrawState,
   getScrollZoom
 } from '../../../selectors/map_selectors';
-import { getIsFilterable } from '../../../selectors/ui_selectors';
 import { getInspectorAdapters } from '../../../reducers/non_serializable_instances';
 
 function mapStateToProps(state = {}) {
   return {
-    isFilterable: getIsFilterable(state),
     isMapReady: getMapReady(state),
     layerList: getLayerList(state),
     goto: getGoto(state),

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

@@ -19,7 +19,6 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw-unminified';
 import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';
 import { FeatureTooltip } from '../feature_tooltip';
 import { DRAW_TYPE } from '../../../actions/map_actions';
-import { filterBarQueryFilter } from '../../../kibana_services';
 import { createShapeFilterWithMeta, createExtentFilterWithMeta } from '../../../elasticsearch_geo_utils';
 
 const mbDrawModes = MapboxDraw.modes;
@@ -109,7 +108,7 @@ export class MBMapContainer extends React.Component {
       return;
     }
 
-    filterBarQueryFilter.addFilters([filter]);
+    this.props.addFilters([filter]);
   };
 
   _debouncedSync = _.debounce(() => {
@@ -415,8 +414,9 @@ export class MBMapContainer extends React.Component {
         loadFeatureProperties={this._loadFeatureProperties}
         findLayerById={this._findLayerById}
         closeTooltip={this._onTooltipClose}
-        showFilterButtons={this.props.isFilterable && isLocked}
+        showFilterButtons={!!this.props.addFilters && isLocked}
         isLocked={isLocked}
+        addFilters={this.props.addFilters}
       />
     ), this._tooltipContainer);
 

x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/index.js

@@ -7,11 +7,9 @@
 import { connect } from 'react-redux';
 import { ToolbarOverlay } from './toolbar_overlay';
 import { getUniqueIndexPatternIds } from '../../selectors/map_selectors';
-import { getIsFilterable } from '../../selectors/ui_selectors';
 
 function mapStateToProps(state = {}) {
   return {
-    isFilterable: getIsFilterable(state),
     uniqueIndexPatternIds: getUniqueIndexPatternIds(state)
   };
 }

x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.js

@@ -31,7 +31,7 @@ export class ToolbarOverlay extends React.Component {
   }
 
   componentDidUpdate() {
-    if (this.props.isFilterable) {
+    if (!!this.props.addFilters) {
       const nextUniqueIndexPatternIds = _.get(this.props, 'uniqueIndexPatternIds', []);
       this._loadUniqueIndexPatternAndFieldCombos(nextUniqueIndexPatternIds);
     }
@@ -77,7 +77,7 @@ export class ToolbarOverlay extends React.Component {
   _renderToolsControl() {
     const { uniqueIndexPatternsAndGeoFields } = this.state;
     if (
-      !this.props.isFilterable ||
+      !this.props.addFilters ||
       !uniqueIndexPatternsAndGeoFields.length
     ) {
       return null;

x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js

@@ -10,7 +10,11 @@ import { Provider } from 'react-redux';
 import { render, unmountComponentAtNode } from 'react-dom';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
-import { Embeddable } from '../../../../../../src/legacy/core_plugins/embeddable_api/public/index';
+import {
+  APPLY_FILTER_TRIGGER,
+  Embeddable,
+  executeTriggerActions
+} from '../../../../../../src/legacy/core_plugins/embeddable_api/public/index';
 import { I18nContext } from 'ui/i18n';
 
 import { GisMap } from '../connected_components/gis_map';
@@ -26,7 +30,6 @@ import {
 import { DEFAULT_IS_LAYER_TOC_OPEN } from '../reducers/ui';
 import {
   setReadOnly,
-  setFilterable,
   setIsLayerTOCOpen,
   setOpenTOCDetails,
 } from '../actions/ui_actions';
@@ -97,7 +100,6 @@ export class MapEmbeddable extends Embeddable {
    */
   render(domNode) {
     this._store.dispatch(setReadOnly(true));
-    this._store.dispatch(setFilterable(true));
     this._store.dispatch(disableScrollZoom());
 
     if (_.has(this.input, 'isLayerTOCOpen')) {
@@ -136,7 +138,7 @@ export class MapEmbeddable extends Embeddable {
     render(
       <Provider store={this._store}>
         <I18nContext>
-          <GisMap/>
+          <GisMap addFilters={this.addFilters}/>
         </I18nContext>
       </Provider>,
       domNode
@@ -147,6 +149,15 @@ export class MapEmbeddable extends Embeddable {
     });
   }
 
+  addFilters = filters => {
+    executeTriggerActions(APPLY_FILTER_TRIGGER, {
+      embeddable: this,
+      triggerContext: {
+        filters,
+      },
+    });
+  }
+
   destroy() {
     super.destroy();
     if (this._unsubscribeFromStore) {

x-pack/legacy/plugins/maps/public/kibana_services.js

@@ -6,15 +6,13 @@
 
 import { uiModules } from 'ui/modules';
 import { SearchSourceProvider } from 'ui/courier';
-import { FilterBarQueryFilterProvider } from 'ui/filter_manager/query_filter';
 import { getRequestInspectorStats, getResponseInspectorStats } from 'ui/courier/utils/courier_inspector_utils';
 export { xpackInfo } from 'plugins/xpack_main/services/xpack_info';
 import { data } from 'plugins/data/setup';
 
 export const indexPatternService = data.indexPatterns.indexPatterns;
 
 export let SearchSource;
-export let filterBarQueryFilter;
 
 export async function fetchSearchSourceAndRecordWithInspector({ searchSource, requestId, requestName, requestDesc, inspectorAdapters }) {
   const inspectorRequest = inspectorAdapters.requests.start(
@@ -41,5 +39,4 @@ export async function fetchSearchSourceAndRecordWithInspector({ searchSource, re
 uiModules.get('app/maps').run(($injector) => {
   const Private = $injector.get('Private');
   SearchSource = Private(SearchSourceProvider);
-  filterBarQueryFilter = Private(FilterBarQueryFilterProvider);
 });

x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.js

@@ -5,7 +5,6 @@
  */
 
 import { buildPhraseFilter } from '@kbn/es-query';
-import { filterBarQueryFilter } from '../../kibana_services';
 import { TooltipProperty } from './tooltip_property';
 import _ from 'lodash';
 
@@ -35,17 +34,12 @@ export class ESTooltipProperty extends TooltipProperty {
     return field && (field.type === 'string' || field.type === 'date' || field.type === 'ip' || field.type === 'number');
   }
 
-  getESFilter() {
-    return buildPhraseFilter(
-      this._indexPattern.fields.byName[this._propertyName],
-      this._rawValue,
-      this._indexPattern);
-  }
-
-  getFilterAction() {
-    return () => {
-      const phraseFilter = this.getESFilter();
-      filterBarQueryFilter.addFilters([phraseFilter]);
-    };
+  async getESFilters() {
+    return [
+      buildPhraseFilter(
+        this._indexPattern.fields.byName[this._propertyName],
+        this._rawValue,
+        this._indexPattern)
+    ];
   }
 }

x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.js

@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-import { filterBarQueryFilter } from '../../kibana_services';
 import { TooltipProperty } from './tooltip_property';
 
 export class JoinTooltipProperty extends TooltipProperty {
@@ -32,29 +30,23 @@ export class JoinTooltipProperty extends TooltipProperty {
     return this._tooltipProperty.getHtmlDisplayValue();
   }
 
-  getFilterAction() {
-    //dispatch all the filter actions to the query bar
-    //this relies on the de-duping of filterBarQueryFilter
-    return async () => {
-      const esFilters = [];
-      if (this._tooltipProperty.isFilterable()) {
-        esFilters.push(this._tooltipProperty.getESFilter());
+  async getESFilters() {
+    const esFilters = [];
+    if (this._tooltipProperty.isFilterable()) {
+      esFilters.push(...(await this._tooltipProperty.getESFilters()));
+    }
+
+    for (let i = 0; i < this._leftInnerJoins.length; i++) {
+      const rightSource =  this._leftInnerJoins[i].getRightJoinSource();
+      const esTooltipProperty = await rightSource.createESTooltipProperty(
+        rightSource.getTerm(),
+        this._tooltipProperty.getRawValue()
+      );
+      if (esTooltipProperty) {
+        esFilters.push(...(await esTooltipProperty.getESFilters()));
       }
+    }
 
-      for (let i = 0; i < this._leftInnerJoins.length; i++) {
-        const rightSource =  this._leftInnerJoins[i].getRightJoinSource();
-        const esTooltipProperty = await rightSource.createESTooltipProperty(
-          rightSource.getTerm(),
-          this._tooltipProperty.getRawValue()
-        );
-        if (esTooltipProperty) {
-          const filter = esTooltipProperty.getESFilter();
-          esFilters.push(filter);
-        }
-      }
-      filterBarQueryFilter.addFilters(esFilters);
-    };
+    return esFilters;
   }
-
-
 }

x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.js

@@ -34,7 +34,7 @@ export class TooltipProperty {
     return false;
   }
 
-  getFilterAction() {
-    throw new Error('This property is not filterable');
+  async getESFilters() {
+    return [];
   }
 }

x-pack/legacy/plugins/maps/public/reducers/ui.js

@@ -11,7 +11,6 @@ import {
   SET_IS_LAYER_TOC_OPEN,
   SET_FULL_SCREEN,
   SET_READ_ONLY,
-  SET_FILTERABLE,
   SET_OPEN_TOC_DETAILS,
   SHOW_TOC_DETAILS,
   HIDE_TOC_DETAILS,
@@ -38,7 +37,6 @@ const INITIAL_STATE = {
   isFullScreen: false,
   isReadOnly: false,
   isLayerTOCOpen: DEFAULT_IS_LAYER_TOC_OPEN,
-  isFilterable: false,
   isSetViewOpen: false,
   // storing TOC detail visibility outside of map.layerList because its UI state and not map rendering state.
   // This also makes for easy read/write access for embeddables.
@@ -61,8 +59,6 @@ export function ui(state = INITIAL_STATE, action) {
       return { ...state, isFullScreen: action.isFullScreen };
     case SET_READ_ONLY:
       return { ...state, isReadOnly: action.isReadOnly };
-    case SET_FILTERABLE:
-      return { ...state, isFilterable: action.isFilterable };
     case SET_OPEN_TOC_DETAILS:
       return { ...state, openTOCDetails: action.layerIds };
     case SHOW_TOC_DETAILS:

x-pack/legacy/plugins/maps/public/selectors/ui_selectors.js

@@ -10,5 +10,4 @@ export const getIsLayerTOCOpen = ({ ui }) => ui.isLayerTOCOpen;
 export const getOpenTOCDetails = ({ ui }) => ui.openTOCDetails;
 export const getIsFullScreen = ({ ui }) => ui.isFullScreen;
 export const getIsReadOnly = ({ ui }) => ui.isReadOnly;
-export const getIsFilterable = ({ ui }) => ui.isFilterable;
 export const getIndexingStage = ({ ui }) => ui.importIndexingStage;