[Maps] ignore global query layer setting (#35542) (#35694)

* [Maps] ignore global query layer setting

* do not include index pattern id in query bar indexPatterns when applyGlobalQuery is disabled

* update how embeddable factory extracts indexPatterns so only queryable index patterns are included in list

* support applyGlobalQuery for heatmap and getBounds

* add functional tests to join layer

* show filter section when layer has join

* move checkbox to layer settings panel

* text review

* set checkbox to false when disabled

* do not trigger refetch when global query and global filter changes and applyGlobalQuery is disabled

* rename applyGlobalQuery to getApplyGlobalQuery

* throw error in map embeddable factory if layerListJSON can not be parsed

* remove extra space

* update zoom range slider label and remove nested EuiFormRow

x-pack/plugins/maps/public/actions/store_actions.js

@@ -156,6 +156,15 @@ export function addLayer(layerDescriptor) {
   };
 }
 
+// Do not use when rendering a map. Method exists to enable selectors for getLayerList when
+// rendering is not needed.
+export function addLayerWithoutDataSync(layerDescriptor) {
+  return {
+    type: ADD_LAYER,
+    layer: layerDescriptor,
+  };
+}
+
 function setLayerDataLoadErrorStatus(layerId, errorMessage) {
   return dispatch => {
     dispatch({
@@ -511,6 +520,19 @@ export function setLayerQuery(id, query) {
   };
 }
 
+export function setLayerApplyGlobalQuery(id, applyGlobalQuery) {
+  return (dispatch) => {
+    dispatch({
+      type: UPDATE_LAYER_PROP,
+      id,
+      propName: 'applyGlobalQuery',
+      newValue: applyGlobalQuery,
+    });
+
+    dispatch(syncDataForLayer(id));
+  };
+}
+
 export function removeSelectedLayer() {
   return (dispatch, getState) => {
     const state = getState();

x-pack/plugins/maps/public/angular/get_initial_layers.test.js

@@ -62,22 +62,23 @@ describe('Saved object does not have layer list', () => {
     };
     const layers = getInitialLayers(null);
     expect(layers).toEqual([{
-      'alpha': 1,
-      '__dataRequests': [],
-      'id': layers[0].id,
-      'label': null,
-      'maxZoom': 24,
-      'minZoom': 0,
-      'sourceDescriptor': {
-        'type': 'EMS_TMS',
-        'id': 'road_map',
+      alpha: 1,
+      __dataRequests: [],
+      id: layers[0].id,
+      applyGlobalQuery: true,
+      label: null,
+      maxZoom: 24,
+      minZoom: 0,
+      sourceDescriptor: {
+        type: 'EMS_TMS',
+        id: 'road_map',
       },
-      'style': {
-        'properties': {},
-        'type': 'TILE',
+      style: {
+        properties: {},
+        type: 'TILE',
       },
-      'type': 'TILE',
-      'visible': true,
+      type: 'TILE',
+      visible: true,
     }]);
   });
 
@@ -91,9 +92,10 @@ describe('Saved object does not have layer list', () => {
 
     const layers = getInitialLayers(null);
     expect(layers).toEqual([{
-      'alpha': 1,
+      alpha: 1,
       __dataRequests: [],
       id: layers[0].id,
+      applyGlobalQuery: true,
       label: null,
       maxZoom: 24,
       minZoom: 0,
@@ -117,9 +119,10 @@ describe('Saved object does not have layer list', () => {
 
     const layers = getInitialLayers(null);
     expect(layers).toEqual([{
-      'alpha': 1,
+      alpha: 1,
       __dataRequests: [],
       id: layers[0].id,
+      applyGlobalQuery: true,
       label: null,
       maxZoom: 24,
       minZoom: 0,

x-pack/plugins/maps/public/angular/map_controller.js

@@ -35,7 +35,7 @@ import {
   setReadOnly,
   setIsLayerTOCOpen
 } from '../store/ui';
-import { getUniqueIndexPatternIds } from '../selectors/map_selectors';
+import { getQueryableUniqueIndexPatternIds } from '../selectors/map_selectors';
 import { getInspectorAdapters } from '../store/non_serializable_instances';
 import { Inspector } from 'ui/inspector';
 import { DocTitleProvider } from 'ui/doc_title';
@@ -197,7 +197,7 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
       });
     }
 
-    const nextIndexPatternIds = getUniqueIndexPatternIds(store.getState());
+    const nextIndexPatternIds = getQueryableUniqueIndexPatternIds(store.getState());
     if (nextIndexPatternIds !== prevIndexPatternIds) {
       prevIndexPatternIds = nextIndexPatternIds;
       updateIndexPatterns(nextIndexPatternIds);

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

@@ -128,6 +128,7 @@ export class FilterEditor extends Component {
             </EuiTextColor>
           </p>
         </EuiText>
+
       );
     }
 
@@ -174,8 +175,13 @@ export class FilterEditor extends Component {
             />
           </h5>
         </EuiTitle>
+
+        <EuiSpacer size="m"/>
+
         {this._renderQuery()}
+
         {this._renderQueryPopover()}
+
       </Fragment>
     );
   }

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

@@ -31,7 +31,7 @@ export function LayerErrors({ layer }) {
           {layer.getErrors()}
         </p>
       </EuiCallOut>
-      <EuiSpacer margin="m"/>
+      <EuiSpacer size="m"/>
     </Fragment>
   );
 }

x-pack/plugins/maps/public/components/layer_panel/layer_settings/index.js

@@ -12,12 +12,14 @@ import {
   updateLayerMaxZoom,
   updateLayerMinZoom,
   updateLayerAlpha,
+  setLayerApplyGlobalQuery,
 } from '../../../actions/store_actions';
 
 function mapStateToProps(state = {}) {
   const selectedLayer = getSelectedLayer(state);
   return {
     alpha: selectedLayer.getAlpha(),
+    applyGlobalQuery: selectedLayer.getApplyGlobalQuery(),
     label: selectedLayer.getLabel(),
     layerId: selectedLayer.getId(),
     maxZoom: selectedLayer.getMaxZoom(),
@@ -32,6 +34,9 @@ function mapDispatchToProps(dispatch) {
     updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
     updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
     updateAlpha: (id, alpha) => dispatch(updateLayerAlpha(id, alpha)),
+    setLayerApplyGlobalQuery: (layerId, applyGlobalQuery) => {
+      dispatch(setLayerApplyGlobalQuery(layerId, applyGlobalQuery));
+    }
   };
 }
 

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

@@ -14,6 +14,8 @@ import {
   EuiFormRow,
   EuiFieldText,
   EuiSpacer,
+  EuiSwitch,
+  EuiToolTip,
 } from '@elastic/eui';
 
 import { ValidatedRange } from '../../../shared/components/validated_range';
@@ -40,35 +42,26 @@ export function LayerSettings(props) {
     props.updateAlpha(props.layerId, alpha);
   };
 
+  const onApplyGlobalQueryChange = event => {
+    props.setLayerApplyGlobalQuery(props.layerId, event.target.checked);
+  };
+
   const renderZoomSliders = () => {
     return (
       <EuiFormRow
-        helpText={
-          i18n.translate('xpack.maps.layerPanel.settingsPanel.zoomFeedbackHelptext', {
-            defaultMessage: 'Display layer when map is in zoom range.'
-          })
-        }
+        label={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoomLabel', {
+          defaultMessage: 'Zoom range for layer visibility'
+        })}
       >
-        <EuiFlexGroup>
-          <EuiFlexItem>
-
-            <EuiFormRow
-              label={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoomLabel', {
-                defaultMessage: 'Visible zoom range'
-              })}
-            >
-              <ValidatedDualRange
-                min={MIN_ZOOM}
-                max={MAX_ZOOM}
-                value={[props.minZoom, props.maxZoom]}
-                showInput
-                showRange
-                onChange={onZoomChange}
-                allowEmptyRange={false}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <ValidatedDualRange
+          min={MIN_ZOOM}
+          max={MAX_ZOOM}
+          value={[props.minZoom, props.maxZoom]}
+          showInput
+          showRange
+          onChange={onZoomChange}
+          allowEmptyRange={false}
+        />
       </EuiFormRow>
     );
   };
@@ -115,6 +108,43 @@ export function LayerSettings(props) {
     );
   };
 
+  const renderApplyGlobalQueryCheckbox = () => {
+    const layerSupportsGlobalQuery = props.layer.getIndexPatternIds().length;
+
+    const applyGlobalQueryCheckbox = (
+      <EuiFormRow>
+        <EuiSwitch
+          label={
+            i18n.translate('xpack.maps.layerPanel.applyGlobalQueryCheckboxLabel', {
+              defaultMessage: `Apply global filter to layer`
+            })
+          }
+          checked={layerSupportsGlobalQuery ? props.applyGlobalQuery : false}
+          onChange={onApplyGlobalQueryChange}
+          disabled={!layerSupportsGlobalQuery}
+          data-test-subj="mapLayerPanelApplyGlobalQueryCheckbox"
+        />
+      </EuiFormRow>
+    );
+
+    if (layerSupportsGlobalQuery) {
+      return applyGlobalQueryCheckbox;
+    }
+
+    return (
+      <EuiToolTip
+        position="top"
+        content={
+          i18n.translate('xpack.maps.layerPanel.applyGlobalQueryCheckbox.disableTooltip', {
+            defaultMessage: `Layer does not support filtering.`
+          })
+        }
+      >
+        {applyGlobalQueryCheckbox}
+      </EuiToolTip>
+    );
+  };
+
   return (
     <Fragment>
       <EuiPanel>
@@ -131,13 +161,15 @@ export function LayerSettings(props) {
           </EuiFlexItem>
         </EuiFlexGroup>
 
-        <EuiSpacer margin="m"/>
+        <EuiSpacer size="m"/>
 
         {renderLabel()}
 
         {renderZoomSliders()}
 
         {renderAlphaSlider()}
+
+        {renderApplyGlobalQueryCheckbox()}
       </EuiPanel>
 
       <EuiSpacer size="s" />

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

@@ -44,7 +44,7 @@ export function SourceSettings({ layer, updateSourceProp }) {
           </EuiFlexItem>
         </EuiFlexGroup>
 
-        <EuiSpacer margin="m"/>
+        <EuiSpacer size="m"/>
 
         {sourceSettingsEditor}
       </EuiPanel>

x-pack/plugins/maps/public/components/layer_panel/style_tabs/view.js

@@ -40,7 +40,7 @@ export function StyleTabs({ layer, updateStyle }) {
       <EuiPanel key={index}>
         <EuiTitle size="xs"><h5>{Style.getDisplayName()}</h5></EuiTitle>
         {description}
-        <EuiSpacer margin="m"/>
+        <EuiSpacer size="m"/>
         {styleEditor}
       </EuiPanel>
     );

x-pack/plugins/maps/public/embeddable/map_embeddable_factory.js

@@ -11,6 +11,9 @@ import { MapEmbeddable } from './map_embeddable';
 import { indexPatternService } from '../kibana_services';
 import { i18n } from '@kbn/i18n';
 import { createMapPath, MAP_SAVED_OBJECT_TYPE, APP_ICON } from '../../common/constants';
+import { createMapStore } from '../store/store';
+import { addLayerWithoutDataSync } from '../actions/store_actions';
+import { getQueryableUniqueIndexPatternIds } from '../selectors/map_selectors';
 
 export class MapEmbeddableFactory extends EmbeddableFactory {
 
@@ -28,8 +31,21 @@ export class MapEmbeddableFactory extends EmbeddableFactory {
     this._savedObjectLoader = gisMapSavedObjectLoader;
   }
 
-  async _getIndexPatterns(indexPatternIds = []) {
-    const promises = indexPatternIds.map(async (indexPatternId) => {
+  async _getIndexPatterns(layerListJSON) {
+    // Need to extract layerList from store to get queryable index pattern ids
+    const store = createMapStore();
+    try {
+      JSON.parse(layerListJSON).forEach(layerDescriptor => {
+        store.dispatch(addLayerWithoutDataSync(layerDescriptor));
+      });
+    } catch (error) {
+      throw new Error(i18n.translate('xpack.maps.mapEmbeddableFactory', {
+        defaultMessage: 'Unable to load map, malformed saved object',
+      }));
+    }
+    const queryableIndexPatternIds = getQueryableUniqueIndexPatternIds(store.getState());
+
+    const promises = queryableIndexPatternIds.map(async (indexPatternId) => {
       try {
         return await indexPatternService.get(indexPatternId);
       } catch (error) {
@@ -44,7 +60,8 @@ export class MapEmbeddableFactory extends EmbeddableFactory {
 
   async create(panelMetadata, onEmbeddableStateChanged) {
     const savedMap = await this._savedObjectLoader.get(panelMetadata.id);
-    const indexPatterns = await this._getIndexPatterns(savedMap.indexPatternIds);
+
+    const indexPatterns = await this._getIndexPatterns(savedMap.layerListJSON);
 
     return new MapEmbeddable({
       onEmbeddableStateChanged,