[Maps][Vega] Update default basemaps to adapt to the Borealis theme r…

…efresh (elastic#208114)

Fixes elastic#201269

## Summary

* Extracts the usage of the EMS styles identifiers to always refer to
the constants at `ems_defaults.ts`
* Adds logic in the Vega and Maps plugins to resolve different styles
depending on the theme, bringing the new `road_map_desaturated_v9` and
`dar_kmap_v9` styles when Borealis theme is enabled.


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
  - Screenshots will be updated as a larger effort afterwards. 
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
  - Changes were small enough for this to not require new tests. 
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

## Release note

Elastic Maps Service basemaps shown in the Custom Visualization
component (Vega) and in the Maps application and components alighn with
the new dark and light theme.

---------

Co-authored-by: Nick Partridge <[email protected]>

docs/user/dashboard/vega-reference.asciidoc

@@ -278,7 +278,7 @@ experimental[] To enable *Maps*, the graph must specify `type=map` in the host c
       "mapStyle": false,
 
       // When 'mapStyle' is 'undefined' or 'true', sets the EMS-layer for the map.
-      // May either be: "road_map", "road_map_desaturated", "dark_map".
+      // May either be: "road_map", "road_map_desaturated", "dark_map", "road_map_desaturated_v9", "dark_map_v9".
       // If 'emsTileServiceId' is 'undefined', it falls back to the auto-switch-dark-light behavior.
       "emsTileServiceId": "road_map",
 

src/platform/plugins/private/maps_ems/common/ems_defaults.ts

@@ -13,9 +13,18 @@ export const DEFAULT_EMS_LANDING_PAGE_URL = 'https://maps.elastic.co';
 export const DEFAULT_EMS_FONT_LIBRARY_URL =
   'https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf';
 
+// Theme-bound style identifiers
+export const EMS_ROADMAP_BOREALIS_DESATURATED_ID = 'road_map_desaturated_v9';
+export const EMS_DARKMAP_BOREALIS_ID = 'dark_map_v9';
+export const EMS_ROADMAP_AMSTERDAM_DESATURATED_ID = 'road_map_desaturated';
+export const EMS_DARKMAP_AMSTERDAM_ID = 'dark_map';
+
+// Default identifiers
 export const DEFAULT_EMS_ROADMAP_ID = 'road_map';
-export const DEFAULT_EMS_ROADMAP_DESATURATED_ID = 'road_map_desaturated';
-export const DEFAULT_EMS_DARKMAP_ID = 'dark_map';
+
+// To be updated when Kibana only ships the Borealis tehem
+export const DEFAULT_EMS_ROADMAP_DESATURATED_ID = EMS_ROADMAP_AMSTERDAM_DESATURATED_ID;
+export const DEFAULT_EMS_DARKMAP_ID = EMS_DARKMAP_AMSTERDAM_ID;
 
 export const EMS_APP_NAME = 'kibana'; // app-name submitted as the `app`-param to EMS
 

src/platform/plugins/private/maps_ems/common/index.ts

@@ -17,6 +17,9 @@ export {
   DEFAULT_EMS_DARKMAP_ID,
   DEFAULT_EMS_REST_VERSION,
   EMS_APP_NAME,
+  // these two variables should not be exported after Borealis is the only theme
+  EMS_DARKMAP_BOREALIS_ID,
+  EMS_ROADMAP_BOREALIS_DESATURATED_ID,
 } from './ems_defaults';
 
 export { EMSSettings } from './ems_settings';

src/platform/plugins/private/vis_types/vega/public/data_model/vega_parser.test.js

@@ -14,6 +14,7 @@ import { TimeCache } from './time_cache';
 import { VegaParser } from './vega_parser';
 import { bypassExternalUrlCheck } from '../vega_view/vega_base_view';
 import { VegaThemeColors } from './utils';
+import { DEFAULT_EMS_DARKMAP_ID } from '@kbn/maps-ems-plugin/common';
 
 jest.mock('../services');
 
@@ -404,14 +405,14 @@ describe('VegaParser._parseMapConfig', () => {
     check(
       {
         mapStyle: true,
-        emsTileServiceId: 'dark_map',
+        emsTileServiceId: DEFAULT_EMS_DARKMAP_ID,
       },
       {
         delayRepaint: true,
         latitude: 0,
         longitude: 0,
         mapStyle: true,
-        emsTileServiceId: 'dark_map',
+        emsTileServiceId: DEFAULT_EMS_DARKMAP_ID,
         zoomControl: true,
         scrollWheelZoom: false,
       },

src/platform/plugins/private/vis_types/vega/public/vega_view/vega_map_view/service_settings/service_settings.test.js

@@ -7,6 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import {
+  DEFAULT_EMS_DARKMAP_ID,
+  DEFAULT_EMS_ROADMAP_DESATURATED_ID,
+  DEFAULT_EMS_ROADMAP_ID,
+} from '@kbn/maps-ems-plugin/common';
 import { ServiceSettings } from './service_settings';
 
 function makeMockLayer({ id, min, max, attributions, url }) {
@@ -62,21 +67,21 @@ function createMockEMSClient() {
     getTMSServices() {
       return [
         makeMockLayer({
-          id: 'road_map',
+          id: DEFAULT_EMS_ROADMAP_ID,
           min: 0,
           max: 10,
           attributions: [{ url: 'https://foobar.com', label: 'foobar' }],
           url: 'https://tiles.foobar/raster/styles/osm-bright/{z}/{x}/{y}.png?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=1.2.3&license=sspl',
         }),
         makeMockLayer({
-          id: 'road_map_desaturated',
+          id: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
           min: 0,
           max: 18,
           attributions: [{ url: 'https://foobar.com', label: 'foobar' }],
           url: 'https://tiles.foobar/raster/styles/osm-bright-desaturated/{z}/{x}/{y}.png?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=1.2.3&license=sspl',
         }),
         makeMockLayer({
-          id: 'dark_map',
+          id: DEFAULT_EMS_DARKMAP_ID,
           min: 0,
           max: 22,
           attributions: [{ url: 'https://foobar.com', label: 'foobar' }],
@@ -96,9 +101,9 @@ describe('service_settings (FKA tile_map test)', function () {
     emsTileApiUrl,
     includeElasticMapsService: true,
     emsTileLayerId: {
-      bright: 'road_map',
-      desaturated: 'road_map_desaturated',
-      dark: 'dark_map',
+      bright: DEFAULT_EMS_ROADMAP_ID,
+      desaturated: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
+      dark: DEFAULT_EMS_DARKMAP_ID,
     },
   };
 
@@ -134,7 +139,7 @@ describe('service_settings (FKA tile_map test)', function () {
           id: 'TMS in config/kibana.yml',
         },
         {
-          id: 'road_map',
+          id: DEFAULT_EMS_ROADMAP_ID,
           name: 'Road Map - Bright',
           url: 'https://tiles.foobar/raster/styles/osm-bright/{z}/{x}/{y}.png?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=1.2.3&license=sspl',
           minZoom: 0,
@@ -160,7 +165,9 @@ describe('service_settings (FKA tile_map test)', function () {
     it('should load appropriate EMS attributes for desaturated and dark theme', async () => {
       serviceSettings = makeServiceSettings();
       const tilemapServices = await serviceSettings.getTMSServices();
-      const roadMapService = tilemapServices.find((service) => service.id === 'road_map');
+      const roadMapService = tilemapServices.find(
+        (service) => service.id === DEFAULT_EMS_ROADMAP_ID
+      );
 
       const desaturationFalse = await serviceSettings.getAttributesForTMSLayer(
         roadMapService,

src/platform/plugins/private/vis_types/vega/public/vega_view/vega_map_view/service_settings/service_settings.ts

@@ -11,6 +11,10 @@ import _ from 'lodash';
 import MarkdownIt from 'markdown-it';
 import type { EMSClient, FileLayer as EMSFileLayer, TMSService } from '@elastic/ems-client';
 import type { MapConfig, TileMapConfig } from '@kbn/maps-ems-plugin/public';
+import {
+  EMS_DARKMAP_BOREALIS_ID,
+  EMS_ROADMAP_BOREALIS_DESATURATED_ID,
+} from '@kbn/maps-ems-plugin/common';
 import type { FileLayer, IServiceSettings, TmsLayer } from './service_settings_types';
 import { ORIGIN_LEGACY, TMS_IN_YML_ID } from './service_settings_types';
 /**
@@ -120,13 +124,18 @@ export class ServiceSettings implements IServiceSettings {
     return this._emsClient.findTMSServiceById(id);
   }
 
-  async getDefaultTmsLayer(isDarkMode: boolean): Promise<string> {
+  async getDefaultTmsLayer(isDarkMode: boolean, themeName: string): Promise<string> {
     const { dark, desaturated } = this._mapConfig.emsTileLayerId;
 
     if (hasUserConfiguredTmsLayer(this._mapConfig)) {
       return TMS_IN_YML_ID;
     }
 
+    // To be removed once Borealis is the only theme available
+    if (themeName === 'borealis') {
+      return isDarkMode ? EMS_DARKMAP_BOREALIS_ID : EMS_ROADMAP_BOREALIS_DESATURATED_ID;
+    }
+
     return isDarkMode ? dark : desaturated;
   }
 

src/platform/plugins/private/vis_types/vega/public/vega_view/vega_map_view/service_settings/service_settings_types.ts

@@ -61,7 +61,7 @@ export interface IServiceSettings {
     isDarkMode: boolean
   ): any;
 
-  getDefaultTmsLayer(isDarkMode: boolean): Promise<string>;
+  getDefaultTmsLayer(isDarkMode: boolean, themeName: string): Promise<string>;
   getTmsService(id: string): Promise<TMSService | undefined>;
   getMapConfig(): MapConfig;
   getTileMapConfig(): TileMapConfig;

src/platform/plugins/private/vis_types/vega/public/vega_view/vega_map_view/view.test.ts

@@ -31,6 +31,7 @@ import {
 import { initVegaLayer, initTmsRasterLayer } from './layers';
 
 import { maplibregl } from '@kbn/mapbox-gl';
+import { DEFAULT_EMS_ROADMAP_DESATURATED_ID } from '@kbn/maps-ems-plugin/common';
 
 jest.mock('@kbn/mapbox-gl', () => {
   const zoomTo = jest.fn();
@@ -110,7 +111,7 @@ describe('vega_map_view/view', () => {
           };
         },
         getDefaultTmsLayer() {
-          return isUserProvided ? 'TMS in config/kibana.yml' : 'road_map_desaturated';
+          return isUserProvided ? 'TMS in config/kibana.yml' : DEFAULT_EMS_ROADMAP_DESATURATED_ID;
         },
       } as unknown as IServiceSettings;
     };

src/platform/plugins/private/vis_types/vega/public/vega_view/vega_map_view/view.ts

@@ -99,10 +99,10 @@ export class VegaMapView extends VegaBaseView {
     const { mapStyle, emsTileServiceId } = this._parser.mapConfig;
     //
     if (mapStyle) {
-      const isDarkMode: boolean = getThemeService().getTheme().darkMode;
+      const { darkMode, name } = getThemeService().getTheme();
       return emsTileServiceId
         ? emsTileServiceId
-        : await this._serviceSettings.getDefaultTmsLayer(isDarkMode);
+        : await this._serviceSettings.getDefaultTmsLayer(darkMode, name);
     }
   }
 

x-pack/platform/plugins/shared/maps/common/migrations/set_ems_tms_default_modes.test.ts

@@ -5,6 +5,10 @@
  * 2.0.
  */
 
+import {
+  DEFAULT_EMS_ROADMAP_DESATURATED_ID,
+  DEFAULT_EMS_ROADMAP_ID,
+} from '@kbn/maps-ems-plugin/common';
 import { setEmsTmsDefaultModes } from './set_ems_tms_default_modes';
 
 describe('setEmsTmsDefaultModes', () => {
@@ -31,7 +35,7 @@ describe('setEmsTmsDefaultModes', () => {
     };
     expect(setEmsTmsDefaultModes({ attributes })).toEqual({
       title: 'my map',
-      layerListJSON: '[{"sourceDescriptor":{"type":"EMS_TMS","lightModeDefault":"road_map"}}]',
+      layerListJSON: `[{"sourceDescriptor":{"type":"EMS_TMS","lightModeDefault":"${DEFAULT_EMS_ROADMAP_ID}"}}]`,
     });
   });
 
@@ -41,7 +45,7 @@ describe('setEmsTmsDefaultModes', () => {
       {
         sourceDescriptor: {
           type: 'EMS_TMS',
-          lightModeDefault: 'road_map_desaturated',
+          lightModeDefault: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
         },
       },
     ]);
@@ -51,8 +55,7 @@ describe('setEmsTmsDefaultModes', () => {
     };
     expect(setEmsTmsDefaultModes({ attributes })).toEqual({
       title: 'my map',
-      layerListJSON:
-        '[{"sourceDescriptor":{"type":"EMS_TMS","lightModeDefault":"road_map_desaturated"}}]',
+      layerListJSON: `[{"sourceDescriptor":{"type":"EMS_TMS","lightModeDefault":"${DEFAULT_EMS_ROADMAP_DESATURATED_ID}"}}]`,
     });
   });
 });

x-pack/platform/plugins/shared/maps/common/migrations/set_ems_tms_default_modes.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { DEFAULT_EMS_ROADMAP_ID } from '@kbn/maps-ems-plugin/common';
 import { SOURCE_TYPES } from '../constants';
 import { LayerDescriptor, EMSTMSSourceDescriptor } from '../descriptor_types';
 import type { MapAttributes } from '../content_management';
@@ -34,7 +35,7 @@ export function setEmsTmsDefaultModes({
       const sourceDescriptor = layerDescriptor.sourceDescriptor as EMSTMSSourceDescriptor;
       // auto select bright tiles for EMS_TMS layers created before 8.0.0
       if (!sourceDescriptor.lightModeDefault) {
-        sourceDescriptor.lightModeDefault = 'road_map';
+        sourceDescriptor.lightModeDefault = DEFAULT_EMS_ROADMAP_ID;
       }
     }
   });

x-pack/platform/plugins/shared/maps/public/classes/layers/create_basemap_layer_descriptor.test.ts

@@ -26,6 +26,11 @@ jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('12345'),
 }));
 
+import {
+  DEFAULT_EMS_DARKMAP_ID,
+  DEFAULT_EMS_ROADMAP_DESATURATED_ID,
+  DEFAULT_EMS_ROADMAP_ID,
+} from '@kbn/maps-ems-plugin/common';
 import { createBasemapLayerDescriptor } from './create_basemap_layer_descriptor';
 
 describe('kibana.yml configured with map.tilemap.url', () => {
@@ -65,9 +70,9 @@ describe('EMS is enabled', () => {
     };
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     require('../../kibana_services').getEmsTileLayerId = () => ({
-      bright: 'road_map',
-      desaturated: 'road_map_desaturated',
-      dark: 'dark_map',
+      bright: DEFAULT_EMS_ROADMAP_ID,
+      desaturated: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
+      dark: DEFAULT_EMS_DARKMAP_ID,
     });
   });
 
@@ -84,7 +89,7 @@ describe('EMS is enabled', () => {
       sourceDescriptor: {
         id: undefined,
         isAutoSelect: true,
-        lightModeDefault: 'road_map_desaturated',
+        lightModeDefault: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
         type: 'EMS_TMS',
       },
       style: { type: 'EMS_VECTOR_TILE', color: '' },

x-pack/platform/plugins/shared/maps/public/classes/sources/ems_tms_source/ems_tms_source.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { DEFAULT_EMS_ROADMAP_ID } from '@kbn/maps-ems-plugin/common';
 import { AbstractSource, SourceEditorArgs } from '../source';
 import { ITMSSource } from '../tms_source';
 import { getEmsTmsServices } from '../../../util';
@@ -46,9 +47,10 @@ export class EMSTMSSource extends AbstractSource implements ITMSSource {
       isAutoSelect:
         typeof descriptor.isAutoSelect !== 'undefined' ? descriptor.isAutoSelect : false,
       lightModeDefault:
-        typeof descriptor.lightModeDefault !== 'undefined'
-          ? descriptor.lightModeDefault
-          : getEmsTileLayerId().desaturated,
+        descriptor.lightModeDefault === undefined ||
+        descriptor.lightModeDefault !== DEFAULT_EMS_ROADMAP_ID
+          ? getEmsTileLayerId().desaturated
+          : DEFAULT_EMS_ROADMAP_ID,
     };
   }
 

x-pack/platform/plugins/shared/maps/public/kibana_services.ts

@@ -9,6 +9,10 @@ import type { CoreStart } from '@kbn/core/public';
 import type { EMSSettings } from '@kbn/maps-ems-plugin/common/ems_settings';
 import { MapsEmsPluginPublicStart } from '@kbn/maps-ems-plugin/public';
 import { BehaviorSubject } from 'rxjs';
+import {
+  EMS_DARKMAP_BOREALIS_ID,
+  EMS_ROADMAP_BOREALIS_DESATURATED_ID,
+} from '@kbn/maps-ems-plugin/common';
 import type { MapsConfigType } from '../server/config';
 import type { MapsPluginStartDependencies } from './plugin';
 
@@ -116,6 +120,17 @@ export const getEMSSettings: () => EMSSettings = () => {
   return emsSettings;
 };
 
-export const getEmsTileLayerId = () => mapsEms.config.emsTileLayerId;
+export const getEmsTileLayerId = () => {
+  // To be updated unce Borealis is the only theme available
+  if (coreStart.theme.getTheme().name !== 'borealis') {
+    return mapsEms.config.emsTileLayerId;
+  } else {
+    return {
+      ...mapsEms.config.emsTileLayerId,
+      dark: EMS_DARKMAP_BOREALIS_ID,
+      desaturated: EMS_ROADMAP_BOREALIS_DESATURATED_ID,
+    };
+  }
+};
 
 export const getShareService = () => pluginsStart.share;

x-pack/platform/plugins/shared/maps/server/sample_data/ecommerce_saved_objects.js

@@ -7,6 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { emsWorldLayerId } from '../../common/constants';
+import { DEFAULT_EMS_ROADMAP_DESATURATED_ID } from '@kbn/maps-ems-plugin/common';
 
 const layerList = [
   {
@@ -15,7 +16,7 @@ const layerList = [
     sourceDescriptor: {
       type: 'EMS_TMS',
       isAutoSelect: true,
-      lightModeDefault: 'road_map_desaturated',
+      lightModeDefault: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
     },
     visible: true,
     style: {},

x-pack/platform/plugins/shared/maps/server/sample_data/flights_saved_objects.js

@@ -6,6 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { DEFAULT_EMS_ROADMAP_DESATURATED_ID } from '@kbn/maps-ems-plugin/common';
 
 const layerList = [
   {
@@ -14,7 +15,7 @@ const layerList = [
     sourceDescriptor: {
       type: 'EMS_TMS',
       isAutoSelect: true,
-      lightModeDefault: 'road_map_desaturated',
+      lightModeDefault: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
     },
     visible: true,
     style: {},

x-pack/platform/plugins/shared/maps/server/sample_data/web_logs_saved_objects.js

@@ -7,6 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { emsWorldLayerId } from '../../common/constants';
+import { DEFAULT_EMS_ROADMAP_DESATURATED_ID } from '@kbn/maps-ems-plugin/common';
 
 const layerList = [
   {
@@ -15,7 +16,7 @@ const layerList = [
     sourceDescriptor: {
       type: 'EMS_TMS',
       isAutoSelect: true,
-      lightModeDefault: 'road_map_desaturated',
+      lightModeDefault: DEFAULT_EMS_ROADMAP_DESATURATED_ID,
     },
     visible: true,
     style: {},