[7.x] [Maps] store mapCenter in embeddable config (#33902)

test/functional/services/dashboard/add_panel.js

@@ -148,15 +148,7 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) {
     }
 
     async addSavedSearch(searchName) {
-      log.debug(`addSavedSearch(${searchName})`);
-
-      await this.ensureAddPanelIsShowing();
-      await this.toggleFilter('search');
-      await this.filterEmbeddableNames(searchName);
-
-      await testSubjects.click(`savedObjectTitle${searchName.split(' ').join('-')}`);
-      await testSubjects.exists('addObjectToDashboardSuccess');
-      await this.closeAddPanel();
+      return this.addEmbeddable(searchName, 'search');
     }
 
     async addSavedSearches(searches) {
@@ -176,14 +168,18 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) {
     }
 
     async addVisualization(vizName) {
-      log.debug(`DashboardAddPanel.addVisualization(${vizName})`);
+      return this.addEmbeddable(vizName, 'visualization');
+    }
+
+    async addEmbeddable(embeddableName, embeddableType) {
+      log.debug(`DashboardAddPanel.addEmbeddable, name: ${embeddableName}, type: ${embeddableType}`);
       await this.ensureAddPanelIsShowing();
-      await this.toggleFilter('visualization');
-      await this.filterEmbeddableNames(`"${vizName.replace('-', ' ')}"`);
-      await testSubjects.click(`savedObjectTitle${vizName.split(' ').join('-')}`);
+      await this.toggleFilter(embeddableType);
+      await this.filterEmbeddableNames(`"${embeddableName.replace('-', ' ')}"`);
+      await testSubjects.click(`savedObjectTitle${embeddableName.split(' ').join('-')}`);
       await testSubjects.exists('addObjectToDashboardSuccess');
       await this.closeAddPanel();
-      return vizName;
+      return embeddableName;
     }
 
     async filterEmbeddableNames(name) {

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

@@ -24,12 +24,21 @@ import {
 } from '../actions/store_actions';
 import { setReadOnly } from '../store/ui';
 import { getInspectorAdapters } from '../store/non_serializable_instances';
+import { getMapCenter, getMapZoom } from '../selectors/map_selectors';
 
 export class MapEmbeddable extends Embeddable {
 
-  constructor({ savedMap, editUrl, indexPatterns = [] }) {
+  constructor({
+    onEmbeddableStateChanged,
+    embeddableConfig,
+    savedMap,
+    editUrl,
+    indexPatterns = []
+  }) {
     super({ title: savedMap.title, editUrl, indexPatterns });
 
+    this._onEmbeddableStateChanged = onEmbeddableStateChanged;
+    this._embeddableConfig = _.cloneDeep(embeddableConfig);
     this._savedMap = savedMap;
     this._store = createMapStore();
   }
@@ -73,8 +82,14 @@ export class MapEmbeddable extends Embeddable {
    */
   render(domNode, containerState) {
     this._store.dispatch(setReadOnly(true));
-    // todo get center and zoom from embeddable UI state
-    if (this._savedMap.mapStateJSON) {
+
+    if (this._embeddableConfig.mapCenter) {
+      this._store.dispatch(setGotoWithCenter({
+        lat: this._embeddableConfig.mapCenter.lat,
+        lon: this._embeddableConfig.mapCenter.lon,
+        zoom: this._embeddableConfig.mapCenter.zoom,
+      }));
+    } else if (this._savedMap.mapStateJSON) {
       const mapState = JSON.parse(this._savedMap.mapStateJSON);
       this._store.dispatch(setGotoWithCenter({
         lat: mapState.center.lat,
@@ -95,9 +110,16 @@ export class MapEmbeddable extends Embeddable {
       </Provider>,
       domNode
     );
+
+    this._unsubscribeFromStore = this._store.subscribe(() => {
+      this._handleStoreChanges();
+    });
   }
 
   destroy() {
+    if (this._unsubscribeFromStore) {
+      this._unsubscribeFromStore();
+    }
     this._savedMap.destroy();
     if (this._domNode) {
       unmountComponentAtNode(this._domNode);
@@ -111,4 +133,23 @@ export class MapEmbeddable extends Embeddable {
       filters: this._prevFilters
     });
   }
+
+  _handleStoreChanges() {
+    const center = getMapCenter(this._store.getState());
+    const zoom = getMapZoom(this._store.getState());
+
+    if (!this._embeddableConfig.mapCenter
+      || this._embeddableConfig.mapCenter.lat !== center.lat
+      || this._embeddableConfig.mapCenter.lon !== center.lon
+      || this._embeddableConfig.mapCenter.zoom !== zoom) {
+      this._embeddableConfig.mapCenter = {
+        lat: center.lat,
+        lon: center.lon,
+        zoom: zoom,
+      };
+      this._onEmbeddableStateChanged({
+        customization: this._embeddableConfig
+      });
+    }
+  }
 }

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

@@ -48,6 +48,7 @@ export class MapEmbeddableFactory extends EmbeddableFactory {
 
     return new MapEmbeddable({
       onEmbeddableStateChanged,
+      embeddableConfig: panelMetadata.embeddableConfig,
       savedMap,
       editUrl: chrome.addBasePath(createMapPath(panelMetadata.id)),
       indexPatterns,

x-pack/test/functional/apps/maps/embeddable/embeddable_state.js

@@ -0,0 +1,38 @@
+/*
+ * 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 expect from '@kbn/expect';
+
+export default function ({ getPageObjects, getService }) {
+  const PageObjects = getPageObjects(['common', 'dashboard', 'maps']);
+  const kibanaServer = getService('kibanaServer');
+  const dashboardAddPanel = getService('dashboardAddPanel');
+  const DASHBOARD_NAME = 'verify_map_embeddable_state';
+
+  describe('embeddable state', () => {
+
+    before(async () => {
+      await kibanaServer.uiSettings.replace({
+        'defaultIndex': 'c698b940-e149-11e8-a35a-370a8516603a'
+      });
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.clickNewDashboard();
+      await dashboardAddPanel.addEmbeddable('document example', 'map');
+
+      await PageObjects.maps.setView(0.0, 0.0, 10);
+      await PageObjects.dashboard.saveDashboard(DASHBOARD_NAME);
+      await PageObjects.dashboard.loadSavedDashboard(DASHBOARD_NAME);
+    });
+
+    it('should render map with center and zoom from embeddable state', async () => {
+      const { lat, lon, zoom } = await PageObjects.maps.getView();
+      expect(Math.round(lat)).to.equal(0);
+      expect(Math.round(lon)).to.equal(0);
+      expect(Math.round(zoom)).to.equal(10);
+    });
+
+  });
+}

x-pack/test/functional/apps/maps/index.js

@@ -10,8 +10,6 @@ export default function ({ loadTestFile, getService }) {
   const browser = getService('browser');
 
   describe('maps app', function () {
-    this.tags('ciGroup3');
-
     before(async () => {
       await esArchiver.loadIfNeeded('logstash_functional');
       await esArchiver.load('maps/data');
@@ -29,12 +27,21 @@ export default function ({ loadTestFile, getService }) {
       await esArchiver.unload('maps/kibana');
     });
 
-    loadTestFile(require.resolve('./sample_data'));
-    loadTestFile(require.resolve('./es_search_source'));
-    loadTestFile(require.resolve('./es_geo_grid_source'));
-    loadTestFile(require.resolve('./joins'));
-    loadTestFile(require.resolve('./add_layer_panel'));
-    loadTestFile(require.resolve('./layer_errors'));
-    loadTestFile(require.resolve('./embeddable/dashboard'));
+    describe('', function () {
+      this.tags('ciGroup7');
+      loadTestFile(require.resolve('./saved_object_management'));
+      loadTestFile(require.resolve('./sample_data'));
+    });
+
+    describe('', function () {
+      this.tags('ciGroup3');
+      loadTestFile(require.resolve('./es_search_source'));
+      loadTestFile(require.resolve('./es_geo_grid_source'));
+      loadTestFile(require.resolve('./joins'));
+      loadTestFile(require.resolve('./add_layer_panel'));
+      loadTestFile(require.resolve('./layer_errors'));
+      loadTestFile(require.resolve('./embeddable/dashboard'));
+      loadTestFile(require.resolve('./embeddable/embeddable_state'));
+    });
   });
 }