[maps] Make default EMS tile layer auto select light or dark tiles ba…

…sed on isDark mode advanced setting (#40892) * [maps] Make default EMS tile layer auto select light or dark tiles based on isDark mode advanced setting * clean up * remove console statements * review feedback
elastic · Jul 12, 2019 · 5b5cc55 · 5b5cc55
1 parent b19c24f
commit 5b5cc55
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 54 deletions.
diff --git a/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.js b/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.js
@@ -9,7 +9,7 @@ import { EMSTMSSource } from '../shared/layers/sources/ems_tms_source';
 import chrome from 'ui/chrome';
 import { getKibanaTileMap } from '../meta';
 
-export function getInitialLayers(savedMapLayerListJSON, isDarkMode) {
+export function getInitialLayers(savedMapLayerListJSON) {
 
   if (savedMapLayerListJSON) {
     return JSON.parse(savedMapLayerListJSON);
@@ -27,11 +27,7 @@ export function getInitialLayers(savedMapLayerListJSON, isDarkMode) {
 
   const isEmsEnabled = chrome.getInjected('isEmsEnabled', true);
   if (isEmsEnabled) {
-    const emsTileLayerId = chrome.getInjected('emsTileLayerId', true);
-    const defaultEmsTileLayer = isDarkMode
-      ? emsTileLayerId.dark
-      : emsTileLayerId.bright;
-    const descriptor = EMSTMSSource.createDescriptor(defaultEmsTileLayer);
+    const descriptor = EMSTMSSource.createDescriptor({ isAutoSelect: true });
     const source = new EMSTMSSource(descriptor);
     const layer = source.createDefaultLayer();
     return [

diff --git a/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.test.js b/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.test.js
@@ -84,8 +84,8 @@ describe('EMS is enabled', () => {
     };
   });
 
-  it('Should get initial layer from EMS data source', () => {
-    const layers = getInitialLayers(layerListNotProvided, false);
+  it('Should get initial layer with EMS tile source', () => {
+    const layers = getInitialLayers(layerListNotProvided);
     expect(layers).toEqual([{
       alpha: 1,
       __dataRequests: [],
@@ -96,7 +96,7 @@ describe('EMS is enabled', () => {
       minZoom: 0,
       source: undefined,
       sourceDescriptor: {
-        id: 'road_map',
+        isAutoSelect: true,
         type: 'EMS_TMS'
       },
       style: {
@@ -107,29 +107,6 @@ describe('EMS is enabled', () => {
       visible: true,
     }]);
   });
-
-  it('Should use the default dark EMS layer when Kibana dark theme is set', () => {
-    const layers = getInitialLayers(layerListNotProvided, true);
-    expect(layers).toEqual([{
-      alpha: 1,
-      __dataRequests: [],
-      id: layers[0].id,
-      applyGlobalQuery: true,
-      label: null,
-      maxZoom: 24,
-      minZoom: 0,
-      sourceDescriptor: {
-        type: 'EMS_TMS',
-        id: 'dark_map',
-      },
-      style: {
-        properties: {},
-        type: 'TILE',
-      },
-      type: 'TILE',
-      visible: true,
-    }]);
-  });
 });
 
 describe('EMS is not enabled', () => {

diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
@@ -58,7 +58,7 @@ const REACT_ANCHOR_DOM_ELEMENT_ID = 'react-maps-root';
 
 const app = uiModules.get(MAP_APP_PATH, []);
 
-app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage, AppState, globalState) => {
+app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppState, globalState) => {
 
   const savedMap = $route.current.locals.map;
   let unsubscribe;
@@ -185,8 +185,7 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
       store.dispatch(setOpenTOCDetails(_.get(uiState, 'openTOCDetails', [])));
     }
 
-    const isDarkMode = config.get('theme:darkMode', false);
-    const layerList = getInitialLayers(savedMap.layerListJSON, isDarkMode);
+    const layerList = getInitialLayers(savedMap.layerListJSON);
     initialLayerListConfig = copyPersistentState(layerList);
     store.dispatch(replaceLayerList(layerList));
     store.dispatch(setRefreshConfig($scope.refreshConfig));

diff --git a/x-pack/legacy/plugins/maps/public/meta.js b/x-pack/legacy/plugins/maps/public/meta.js
@@ -67,7 +67,8 @@ export async function getEmsVectorFilesMeta() {
 
 export async function getEmsTMSServices() {
   const dataSource = await getEMSDataSources();
-  return _.get(dataSource, 'ems.tms', []);
+  const tmsServices = _.get(dataSource, 'ems.tms', []);
+  return [...tmsServices];
 }
 
 export function getKibanaRegionList() {

diff --git a/...k/legacy/plugins/maps/public/shared/layers/sources/ems_tms_source/create_source_editor.js b/...k/legacy/plugins/maps/public/shared/layers/sources/ems_tms_source/create_source_editor.js
@@ -15,6 +15,8 @@ import { getEmsTMSServices } from '../../../../meta';
 import { getEmsUnavailableMessage } from '../ems_unavailable_message';
 import { i18n } from '@kbn/i18n';
 
+export const AUTO_SELECT = 'auto_select';
+
 export class EMSTMSCreateSourceEditor extends React.Component {
 
   state = {
@@ -23,13 +25,28 @@ export class EMSTMSCreateSourceEditor extends React.Component {
 
   _loadTmsOptions = async () => {
     const options = await getEmsTMSServices();
+    options.unshift({
+      id: AUTO_SELECT,
+      name: i18n.translate('xpack.maps.source.emsTile.autoLabel', {
+        defaultMessage: 'Autoselect based on Kibana theme',
+      })
+    });
     if (this._isMounted) {
       this.setState({
         emsTmsOptionsRaw: options
       });
     }
   }
 
+  _onEmsTileServiceChange = e => {
+    const value = e.target.value;
+    const isAutoSelect = value === AUTO_SELECT;
+    this.props.onSourceConfigChange({
+      id: isAutoSelect ? null : value,
+      isAutoSelect
+    });
+  }
+
   componentWillUnmount() {
     this._isMounted = false;
   }
@@ -62,7 +79,7 @@ export class EMSTMSCreateSourceEditor extends React.Component {
         <EuiSelect
           hasNoInitialSelection
           options={emsTileOptions}
-          onChange={this.props.onChange}
+          onChange={this._onEmsTileServiceChange}
           disabled={this.state.emsTmsOptionsRaw.length === 0}
         />
       </EuiFormRow>

diff --git a/x-pack/legacy/plugins/maps/public/shared/layers/sources/ems_tms_source/ems_tms_source.js b/x-pack/legacy/plugins/maps/public/shared/layers/sources/ems_tms_source/ems_tms_source.js
@@ -3,6 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
+import _ from 'lodash';
+import chrome from 'ui/chrome';
 import React from 'react';
 import { AbstractTMSSource } from '../tms_source';
 import { TileLayer } from '../../tile_layer';
@@ -12,7 +15,6 @@ import { EMSTMSCreateSourceEditor } from './create_source_editor';
 import { i18n } from '@kbn/i18n';
 import { getDataSourceLabel } from '../../../../../common/i18n_getters';
 
-
 export class EMSTMSSource extends AbstractTMSSource {
 
   static type = 'EMS_TMS';
@@ -24,26 +26,38 @@ export class EMSTMSSource extends AbstractTMSSource {
   });
   static icon = 'emsApp';
 
-  static createDescriptor(serviceId) {
+  static createDescriptor(sourceConfig) {
     return {
       type: EMSTMSSource.type,
-      id: serviceId
+      id: sourceConfig.id,
+      isAutoSelect: sourceConfig.isAutoSelect
     };
   }
 
   static renderEditor({ onPreviewSource, inspectorAdapters }) {
-
-    const onChange = ({ target }) => {
-      const selectedId = target.options[target.selectedIndex].value;
-      const emsTMSSourceDescriptor = EMSTMSSource.createDescriptor(selectedId);
-      const emsTMSSource = new EMSTMSSource(emsTMSSourceDescriptor, inspectorAdapters);
-      onPreviewSource(emsTMSSource);
+    const onSourceConfigChange = (sourceConfig) => {
+      const descriptor = EMSTMSSource.createDescriptor(sourceConfig);
+      const source = new EMSTMSSource(descriptor, inspectorAdapters);
+      onPreviewSource(source);
     };
 
-    return <EMSTMSCreateSourceEditor onChange={onChange}/>;
+    return <EMSTMSCreateSourceEditor onSourceConfigChange={onSourceConfigChange}/>;
+  }
+
+  constructor(descriptor, inspectorAdapters) {
+    super({
+      id: descriptor.id,
+      type: EMSTMSSource.type,
+      isAutoSelect: _.get(descriptor, 'isAutoSelect', false),
+    }, inspectorAdapters);
   }
 
   async getImmutableProperties() {
+    const displayName = await this.getDisplayName();
+    const autoSelectMsg = i18n.translate('xpack.maps.source.emsTile.isAutoSelectLabel', {
+      defaultMessage: 'autoselect based on Kibana theme',
+    });
+
     return [
       {
         label: getDataSourceLabel(),
@@ -53,20 +67,23 @@ export class EMSTMSSource extends AbstractTMSSource {
         label: i18n.translate('xpack.maps.source.emsTile.serviceId', {
           defaultMessage: `Tile service`,
         }),
-        value: this._descriptor.id
+        value: this._descriptor.isAutoSelect
+          ? `${displayName} - ${autoSelectMsg}`
+          : displayName
       }
     ];
   }
 
   async _getEmsTmsMeta() {
     const emsTileServices = await getEmsTMSServices();
+    const emsTileLayerId = this._getEmsTileLayerId();
     const meta = emsTileServices.find(service => {
-      return service.id === this._descriptor.id;
+      return service.id === emsTileLayerId;
     });
     if (!meta) {
       throw new Error(i18n.translate('xpack.maps.source.emsTile.errorMessage', {
         defaultMessage: `Unable to find EMS tile configuration for id: {id}`,
-        values: { id: this._descriptor.id }
+        values: { id: emsTileLayerId }
       }));
     }
     return meta;
@@ -91,7 +108,7 @@ export class EMSTMSSource extends AbstractTMSSource {
       const emsTmsMeta = await this._getEmsTmsMeta();
       return emsTmsMeta.name;
     } catch (error) {
-      return this._descriptor.id;
+      return this._getEmsTileLayerId();
     }
   }
 
@@ -117,4 +134,16 @@ export class EMSTMSSource extends AbstractTMSSource {
     const emsTmsMeta = await this._getEmsTmsMeta();
     return emsTmsMeta.url;
   }
+
+  _getEmsTileLayerId() {
+    if (!this._descriptor.isAutoSelect) {
+      return this._descriptor.id;
+    }
+
+    const isDarkMode = chrome.getUiSettingsClient().get('theme:darkMode', false);
+    const emsTileLayerId = chrome.getInjected('emsTileLayerId');
+    return isDarkMode
+      ? emsTileLayerId.dark
+      : emsTileLayerId.bright;
+  }
 }
diff --git a/x-pack/legacy/plugins/maps/server/sample_data/ecommerce_saved_objects.js b/x-pack/legacy/plugins/maps/server/sample_data/ecommerce_saved_objects.js
@@ -13,7 +13,7 @@ const layerList = [
     'alpha': 1,
     'sourceDescriptor': {
       'type': 'EMS_TMS',
-      'id': 'road_map'
+      'isAutoSelect': true
     },
     'visible': true,
     'style': {

diff --git a/x-pack/legacy/plugins/maps/server/sample_data/flights_saved_objects.js b/x-pack/legacy/plugins/maps/server/sample_data/flights_saved_objects.js
@@ -13,7 +13,7 @@ const layerList = [
     'alpha': 1,
     'sourceDescriptor': {
       'type': 'EMS_TMS',
-      'id': 'road_map'
+      'isAutoSelect': true
     },
     'visible': true,
     'style': {

diff --git a/x-pack/legacy/plugins/maps/server/sample_data/web_logs_saved_objects.js b/x-pack/legacy/plugins/maps/server/sample_data/web_logs_saved_objects.js
@@ -13,7 +13,7 @@ const layerList = [
     'alpha': 1,
     'sourceDescriptor': {
       'type': 'EMS_TMS',
-      'id': 'road_map'
+      'isAutoSelect': true
     },
     'visible': true,
     'style': {