From a23e1e3ed10aea3130b345210427c5711edc2511 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 15 Apr 2020 12:34:43 -0600
Subject: [PATCH 01/17] [Maps] Map settings: min and max zoom

---
 .../maps/public/actions/map_actions.js        | 27 ++++++++++++++
 .../public/actions/map_settings_actions.ts    |  8 +++++
 .../maps/public/actions/ui_actions.d.ts       |  3 ++
 .../connected_components/gis_map/index.js     |  7 +---
 .../connected_components/gis_map/view.js      | 34 ++++++++++--------
 .../map_settings_panel/index.ts               | 36 +++++++++++++++++++
 .../map_settings_panel/map_settings_panel.tsx | 23 ++++++++++++
 .../layer_control/_layer_control.scss         |  1 +
 .../widget_overlay/layer_control/index.js     |  7 +++-
 .../widget_overlay/layer_control/view.js      | 20 +++++++++++
 .../maps/public/selectors/map_selectors.d.ts  |  4 ++-
 .../maps/public/selectors/map_selectors.js    |  2 ++
 .../maps/public/actions/map_actions.d.ts      |  8 +++++
 .../maps/public/actions/map_actions.js        |  5 +++
 .../public/reducers/default_map_settings.ts   | 15 ++++++++
 x-pack/plugins/maps/public/reducers/map.d.ts  |  7 ++++
 x-pack/plugins/maps/public/reducers/map.js    | 33 +++++++++++++++++
 x-pack/plugins/maps/public/reducers/ui.ts     |  1 +
 18 files changed, 218 insertions(+), 23 deletions(-)
 create mode 100644 x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts
 create mode 100644 x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
 create mode 100644 x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
 create mode 100644 x-pack/plugins/maps/public/reducers/default_map_settings.ts

diff --git a/x-pack/legacy/plugins/maps/public/actions/map_actions.js b/x-pack/legacy/plugins/maps/public/actions/map_actions.js
index 7bfbf5761c5b8c..a271a4dae4a5e4 100644
--- a/x-pack/legacy/plugins/maps/public/actions/map_actions.js
+++ b/x-pack/legacy/plugins/maps/public/actions/map_actions.js
@@ -78,6 +78,10 @@ import {
   HIDE_LAYER_CONTROL,
   HIDE_VIEW_CONTROL,
   SET_WAITING_FOR_READY_HIDDEN_LAYERS,
+  SET_MAP_SETTINGS,
+  ROLLBACK_MAP_SETTINGS,
+  TRACK_MAP_SETTINGS,
+  UPDATE_MAP_SETTING,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../plugins/maps/public/actions/map_actions';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
@@ -151,6 +155,29 @@ export function setMapInitError(errorMessage) {
   };
 }
 
+export function setMapSettings(settings) {
+  return {
+    type: SET_MAP_SETTINGS,
+    settings
+  }
+}
+
+export function rollbackMapSettings() {
+  return { type: ROLLBACK_MAP_SETTINGS }
+}
+
+export function trackMapSettings() {
+  return { type: TRACK_MAP_SETTINGS }
+}
+
+export function updateMapSetting(settingKey, settingValue) {
+  return {
+    type: UPDATE_MAP_SETTING,
+    settingKey,
+    settingValue,
+  }
+}
+
 export function trackCurrentLayerState(layerId) {
   return {
     type: TRACK_CURRENT_LAYER_STATE,
diff --git a/x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts b/x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts
new file mode 100644
index 00000000000000..a5cac03f2d9031
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { SET_MAP_SETTING } from '../../../../../plugins/maps/public/actions/map_actions';
diff --git a/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts b/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts
index 233918847de08b..203520e2d0a1dc 100644
--- a/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts
+++ b/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts
@@ -5,6 +5,9 @@
  */
 
 import { AnyAction } from 'redux';
+import { FLYOUT_STATE } from '../../../../../plugins/maps/public/reducers/ui';
+
+export function updateFlyout(display: FLYOUT_STATE): AnyAction;
 
 export function setOpenTOCDetails(layerIds?: string[]): AnyAction;
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/gis_map/index.js b/x-pack/legacy/plugins/maps/public/connected_components/gis_map/index.js
index 39cb2c469e0544..114f9dc7995abc 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/gis_map/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/gis_map/index.js
@@ -6,8 +6,6 @@
 
 import { connect } from 'react-redux';
 import { GisMap } from './view';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
 import { exitFullScreen } from '../../actions/ui_actions';
 import { getFlyoutDisplay, getIsFullScreen } from '../../selectors/ui_selectors';
 import { triggerRefreshTimer, cancelAllInFlightRequests } from '../../actions/map_actions';
@@ -20,12 +18,9 @@ import {
 } from '../../selectors/map_selectors';
 
 function mapStateToProps(state = {}) {
-  const flyoutDisplay = getFlyoutDisplay(state);
   return {
     areLayersLoaded: areLayersLoaded(state),
-    layerDetailsVisible: flyoutDisplay === FLYOUT_STATE.LAYER_PANEL,
-    addLayerVisible: flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD,
-    noFlyoutVisible: flyoutDisplay === FLYOUT_STATE.NONE,
+    flyoutDisplay: getFlyoutDisplay(state),
     isFullScreen: getIsFullScreen(state),
     refreshConfig: getRefreshConfig(state),
     mapInitError: getMapInitError(state),
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/gis_map/view.js b/x-pack/legacy/plugins/maps/public/connected_components/gis_map/view.js
index 358313b8f5b6dd..e41fd1cf8bf572 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/gis_map/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/gis_map/view.js
@@ -6,6 +6,7 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import { MBMapContainer } from '../map/mb';
 import { WidgetOverlay } from '../widget_overlay/index';
 import { ToolbarOverlay } from '../toolbar_overlay/index';
@@ -19,6 +20,9 @@ import { ES_GEO_FIELD_TYPE } from '../../../common/constants';
 import { indexPatterns as indexPatternsUtils } from '../../../../../../../src/plugins/data/public';
 import { i18n } from '@kbn/i18n';
 import uuid from 'uuid/v4';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
+import { MapSettingsPanel } from '../map_settings_panel';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';
 
@@ -147,9 +151,7 @@ export class GisMap extends Component {
   render() {
     const {
       addFilters,
-      layerDetailsVisible,
-      addLayerVisible,
-      noFlyoutVisible,
+      flyoutDisplay,
       isFullScreen,
       exitFullScreen,
       mapInitError,
@@ -174,16 +176,13 @@ export class GisMap extends Component {
       );
     }
 
-    let currentPanel;
-    let currentPanelClassName;
-    if (noFlyoutVisible) {
-      currentPanel = null;
-    } else if (addLayerVisible) {
-      currentPanelClassName = 'mapMapLayerPanel-isVisible';
-      currentPanel = <AddLayerPanel />;
-    } else if (layerDetailsVisible) {
-      currentPanelClassName = 'mapMapLayerPanel-isVisible';
-      currentPanel = <LayerPanel />;
+    let flyoutPanel = null;
+    if (flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD) {
+      flyoutPanel = <AddLayerPanel />;
+    } else if (flyoutDisplay === FLYOUT_STATE.LAYER_PANEL) {
+      flyoutPanel = <LayerPanel />;
+    } else if (flyoutDisplay === FLYOUT_STATE.MAP_SETTINGS_PANEL) {
+      flyoutPanel = <MapSettingsPanel />;
     }
 
     let exitFullScreenButton;
@@ -210,8 +209,13 @@ export class GisMap extends Component {
           <WidgetOverlay />
         </EuiFlexItem>
 
-        <EuiFlexItem className={`mapMapLayerPanel ${currentPanelClassName}`} grow={false}>
-          {currentPanel}
+        <EuiFlexItem
+          className={classNames('mapMapLayerPanel', {
+            'mapMapLayerPanel-isVisible': !!flyoutPanel,
+          })}
+          grow={false}
+        >
+          {flyoutPanel}
         </EuiFlexItem>
 
         {exitFullScreenButton}
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
new file mode 100644
index 00000000000000..b2a49dc33fcc02
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
+import { MapSettingsPanel } from './map_settings_panel';
+import { rollbackMapSettings, updateMapSetting } from '../../actions/map_actions';
+import { getMapSettings } from '../../selectors/map_selectors';
+import { updateFlyout } from '../../actions/ui_actions';
+
+function mapStateToProps(state = {}) {
+  return {
+    mapSettings: getMapSettings(state),
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    cancelChanges: () => {
+      dispatch(rollbackMapSettings());
+      dispatch(updateFlyout(FLYOUT_STATE.NONE));
+    },
+    keepChanges: () => {
+      dispatch(updateFlyout(FLYOUT_STATE.NONE));
+    },
+    updateMapSetting: (settingKey, settingValue) => {
+      dispatch(updateMapSetting(settingKey, settingValue))
+    },
+  };
+}
+
+const connectedMapSettingsPanel = connect(mapStateToProps, mapDispatchToProps)(MapSettingsPanel);
+export { connectedMapSettingsPanel as MapSettingsPanel };
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
new file mode 100644
index 00000000000000..f8db57abf6071a
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -0,0 +1,23 @@
+/*
+ * 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 React from 'react';
+import { EuiFormRow, EuiSuperSelect, EuiTextColor, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { MapSettings, MapStoreState } from '../../../../../../plugins/maps/public/reducers/map';
+
+interface Props {
+  cancelChanges: () => void;
+  keepChanges: () => void;
+  mapSettings: MapSettings;
+  updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
+}
+
+export function MapSettingsPanel({ cancelChanges, keepChanges, mapSettings, updateMapSetting }: Props) {
+  return (
+    <div>Map settings</div>
+  );
+}
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss
index 19f70070ef5b2b..b24d5de2824d74 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss
@@ -22,6 +22,7 @@
   }
 }
 
+.mapLayerControl__openMapSettingsButton,
 .mapLayerControl__openLayerTOCButton,
 .mapLayerControl__closeLayerTOCButton {
   @include size($euiSizeXL);
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
index 04de5f71f5bfc4..59dea011bced01 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
@@ -9,7 +9,7 @@ import { LayerControl } from './view';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../../../plugins/maps/public/reducers/ui';
 import { updateFlyout, setIsLayerTOCOpen } from '../../../actions/ui_actions';
-import { setSelectedLayer } from '../../../actions/map_actions';
+import { setSelectedLayer, trackMapSettings } from '../../../actions/map_actions';
 import {
   getIsReadOnly,
   getIsLayerTOCOpen,
@@ -38,6 +38,11 @@ function mapDispatchToProps(dispatch) {
     openLayerTOC: () => {
       dispatch(setIsLayerTOCOpen(true));
     },
+    openMapSettings: async (flyoutDisplay) => {
+      await dispatch(setSelectedLayer(null));
+      dispatch(trackMapSettings());
+      dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
+    },
   };
 }
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
index 537a676287042f..42fa226c269233 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
@@ -58,6 +58,7 @@ export function LayerControl({
   openLayerTOC,
   layerList,
   isAddButtonActive,
+  openMapSettings,
 }) {
   if (!isLayerTOCOpen) {
     const hasErrors = layerList.some(layer => {
@@ -102,6 +103,10 @@ export function LayerControl({
     );
   }
 
+  const openMapSettingsLabel = i18n.translate('xpack.maps.layerControl.openMapSettingsLabel', {
+    defaultMessage: 'Edit map settings',
+  });
+
   return (
     <Fragment>
       <EuiPanel
@@ -126,6 +131,21 @@ export function LayerControl({
                 </h2>
               </EuiTitle>
             </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiToolTip
+                delay="long"
+                content={openMapSettingsLabel}
+              >
+                <EuiButtonIcon
+                  className="mapLayerControl__openMapSettingsButton"
+                  onClick={openMapSettings}
+                  iconType="gear"
+                  color="text"
+                  aria-label={openMapSettingsLabel}
+                  data-test-subj="mapOpenMapSettingsButton"
+                />
+              </EuiToolTip>
+            </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiToolTip
                 delay="long"
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
index 8c99e0adcc14fe..65cc61b8ed7658 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
@@ -7,7 +7,7 @@
 import { AnyAction } from 'redux';
 import { MapCenter } from '../../common/descriptor_types';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapStoreState } from '../../../../../plugins/maps/public/reducers/store';
+import { MapSettings, MapStoreState } from '../../../../../plugins/maps/public/reducers/map';
 
 export function getHiddenLayerIds(state: MapStoreState): string[];
 
@@ -16,3 +16,5 @@ export function getMapZoom(state: MapStoreState): number;
 export function getMapCenter(state: MapStoreState): MapCenter;
 
 export function getQueryableUniqueIndexPatternIds(state: MapStoreState): string[];
+
+export function getMapSettings(state: MapStoreState): MapSettings;
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
index 59346e4c6fb989..ebb9285b9336da 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
@@ -63,6 +63,8 @@ function createSourceInstance(sourceDescriptor, inspectorAdapters) {
   return new source.ConstructorFunction(sourceDescriptor, inspectorAdapters);
 }
 
+export const getMapSettings = ({ map }) => map.settings;
+
 export const getOpenTooltips = ({ map }) => {
   return map && map.openTooltips ? map.openTooltips : [];
 };
diff --git a/x-pack/plugins/maps/public/actions/map_actions.d.ts b/x-pack/plugins/maps/public/actions/map_actions.d.ts
index debead3ad5c45d..4d407eab732a92 100644
--- a/x-pack/plugins/maps/public/actions/map_actions.d.ts
+++ b/x-pack/plugins/maps/public/actions/map_actions.d.ts
@@ -62,3 +62,11 @@ export function hideViewControl(): AnyAction;
 export function setHiddenLayers(hiddenLayerIds: string[]): AnyAction;
 
 export function addLayerWithoutDataSync(layerDescriptor: unknown): AnyAction;
+
+export function setMapSettings(settings: MapSettings): AnyAction;
+
+export function rollbackMapSettings(): AnyAction;
+
+export function trackMapSettings(): AnyAction;
+
+export function updateMapSetting(settingKey: string, settingValue: string | boolean | number): AnyAction;
diff --git a/x-pack/plugins/maps/public/actions/map_actions.js b/x-pack/plugins/maps/public/actions/map_actions.js
index 13cb3d5f898601..04c479d3726616 100644
--- a/x-pack/plugins/maps/public/actions/map_actions.js
+++ b/x-pack/plugins/maps/public/actions/map_actions.js
@@ -45,3 +45,8 @@ export const HIDE_TOOLBAR_OVERLAY = 'HIDE_TOOLBAR_OVERLAY';
 export const HIDE_LAYER_CONTROL = 'HIDE_LAYER_CONTROL';
 export const HIDE_VIEW_CONTROL = 'HIDE_VIEW_CONTROL';
 export const SET_WAITING_FOR_READY_HIDDEN_LAYERS = 'SET_WAITING_FOR_READY_HIDDEN_LAYERS';
+
+export const SET_MAP_SETTINGS = 'SET_MAP_SETTINGS';
+export const ROLLBACK_MAP_SETTINGS = 'ROLLBACK_MAP_SETTINGS';
+export const TRACK_MAP_SETTINGS = 'TRACK_MAP_SETTINGS';
+export const UPDATE_MAP_SETTING = 'UPDATE_MAP_SETTING';
diff --git a/x-pack/plugins/maps/public/reducers/default_map_settings.ts b/x-pack/plugins/maps/public/reducers/default_map_settings.ts
new file mode 100644
index 00000000000000..81622ea9581b0a
--- /dev/null
+++ b/x-pack/plugins/maps/public/reducers/default_map_settings.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 { MAX_ZOOM, MIN_ZOOM } from '../../common/constants';
+import { MapSettings } from './map';
+
+export function getDefaultMapSettings(): MapSettings {
+  return {
+    maxZoom: MAX_ZOOM,
+    minZoom: MIN_ZOOM,
+  };
+}
diff --git a/x-pack/plugins/maps/public/reducers/map.d.ts b/x-pack/plugins/maps/public/reducers/map.d.ts
index 30271d4d5fa8b4..b112da700c1b21 100644
--- a/x-pack/plugins/maps/public/reducers/map.d.ts
+++ b/x-pack/plugins/maps/public/reducers/map.d.ts
@@ -39,6 +39,11 @@ export type MapContext = {
   hideViewControl: boolean;
 };
 
+export type MapSettings = {
+  maxZoom: number;
+  minZoom: number;
+}
+
 export type MapState = {
   ready: boolean;
   mapInitError?: string | null;
@@ -49,4 +54,6 @@ export type MapState = {
   __transientLayerId: string | null;
   layerList: LayerDescriptor[];
   waitingForMapReadyLayerList: LayerDescriptor[];
+  settings: MapSettings;
+  __rollbackSettings: MapSettings | null;
 };
diff --git a/x-pack/plugins/maps/public/reducers/map.js b/x-pack/plugins/maps/public/reducers/map.js
index 251a2304538ed7..e6c5ed55675ab3 100644
--- a/x-pack/plugins/maps/public/reducers/map.js
+++ b/x-pack/plugins/maps/public/reducers/map.js
@@ -46,8 +46,13 @@ import {
   HIDE_LAYER_CONTROL,
   HIDE_VIEW_CONTROL,
   SET_WAITING_FOR_READY_HIDDEN_LAYERS,
+  SET_MAP_SETTINGS,
+  ROLLBACK_MAP_SETTINGS,
+  TRACK_MAP_SETTINGS,
+  UPDATE_MAP_SETTING,
 } from '../actions/map_actions';
 
+import { getDefaultMapSettings } from './default_map_settings';
 import { copyPersistentState, TRACKED_LAYER_DESCRIPTOR } from './util';
 import { SOURCE_DATA_ID_ORIGIN } from '../../common/constants';
 
@@ -124,6 +129,8 @@ const INITIAL_STATE = {
   __transientLayerId: null,
   layerList: [],
   waitingForMapReadyLayerList: [],
+  settings: getDefaultMapSettings(),
+  __rollbackSettings: null,
 };
 
 export function map(state = INITIAL_STATE, action) {
@@ -179,6 +186,32 @@ export function map(state = INITIAL_STATE, action) {
         ...state,
         goto: null,
       };
+    case SET_MAP_SETTINGS:
+      return {
+        ...state,
+        settings: action.settings,
+      };
+    case ROLLBACK_MAP_SETTINGS:
+      return state.__rollbackSettings
+        ? {
+          ...state,
+          settings: { ...state.__rollbackSettings },
+          __rollbackSettings: null,
+        }
+        : state;
+    case TRACK_MAP_SETTINGS:
+      return {
+        ...state,
+        __rollbackSettings: state.settings,
+      };
+    case UPDATE_MAP_SETTING:
+      return {
+        ...state,
+        settings: {
+          ...(state.settings ? state.settings : {}),
+          [action.settingKey]: action.settingValue,
+        }
+      };
     case SET_LAYER_ERROR_STATUS:
       const { layerList } = state;
       const layerIdx = getLayerIndex(layerList, action.layerId);
diff --git a/x-pack/plugins/maps/public/reducers/ui.ts b/x-pack/plugins/maps/public/reducers/ui.ts
index 7429545ec0e46e..3c6db53fd17305 100644
--- a/x-pack/plugins/maps/public/reducers/ui.ts
+++ b/x-pack/plugins/maps/public/reducers/ui.ts
@@ -23,6 +23,7 @@ export enum FLYOUT_STATE {
   NONE = 'NONE',
   LAYER_PANEL = 'LAYER_PANEL',
   ADD_LAYER_WIZARD = 'ADD_LAYER_WIZARD',
+  MAP_SETTINGS_PANEL = 'MAP_SETTINGS_PANEL',
 }
 
 export enum INDEXING_STAGE {

From f1a4ba03d892d844fc79aa4aba6a71bec2e358f9 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 15 Apr 2020 15:35:29 -0600
Subject: [PATCH 02/17] eslint

---
 .../legacy/plugins/maps/public/actions/map_actions.js | 10 +++++-----
 .../connected_components/map_settings_panel/index.ts  |  2 +-
 .../map_settings_panel/map_settings_panel.tsx         | 11 +++++++----
 .../widget_overlay/layer_control/index.js             |  2 +-
 .../widget_overlay/layer_control/view.js              |  5 +----
 x-pack/plugins/maps/public/actions/map_actions.d.ts   |  5 ++++-
 x-pack/plugins/maps/public/reducers/map.d.ts          |  2 +-
 x-pack/plugins/maps/public/reducers/map.js            | 10 +++++-----
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/actions/map_actions.js b/x-pack/legacy/plugins/maps/public/actions/map_actions.js
index a271a4dae4a5e4..21f18d6f42ed00 100644
--- a/x-pack/legacy/plugins/maps/public/actions/map_actions.js
+++ b/x-pack/legacy/plugins/maps/public/actions/map_actions.js
@@ -158,16 +158,16 @@ export function setMapInitError(errorMessage) {
 export function setMapSettings(settings) {
   return {
     type: SET_MAP_SETTINGS,
-    settings
-  }
+    settings,
+  };
 }
 
 export function rollbackMapSettings() {
-  return { type: ROLLBACK_MAP_SETTINGS }
+  return { type: ROLLBACK_MAP_SETTINGS };
 }
 
 export function trackMapSettings() {
-  return { type: TRACK_MAP_SETTINGS }
+  return { type: TRACK_MAP_SETTINGS };
 }
 
 export function updateMapSetting(settingKey, settingValue) {
@@ -175,7 +175,7 @@ export function updateMapSetting(settingKey, settingValue) {
     type: UPDATE_MAP_SETTING,
     settingKey,
     settingValue,
-  }
+  };
 }
 
 export function trackCurrentLayerState(layerId) {
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
index b2a49dc33fcc02..402263076fef5f 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -27,7 +27,7 @@ function mapDispatchToProps(dispatch) {
       dispatch(updateFlyout(FLYOUT_STATE.NONE));
     },
     updateMapSetting: (settingKey, settingValue) => {
-      dispatch(updateMapSetting(settingKey, settingValue))
+      dispatch(updateMapSetting(settingKey, settingValue));
     },
   };
 }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
index f8db57abf6071a..ee18605a74a670 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -16,8 +16,11 @@ interface Props {
   updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
 }
 
-export function MapSettingsPanel({ cancelChanges, keepChanges, mapSettings, updateMapSetting }: Props) {
-  return (
-    <div>Map settings</div>
-  );
+export function MapSettingsPanel({
+  cancelChanges,
+  keepChanges,
+  mapSettings,
+  updateMapSetting,
+}: Props) {
+  return <div>Map settings</div>;
 }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
index 59dea011bced01..21abf186fe7135 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
@@ -38,7 +38,7 @@ function mapDispatchToProps(dispatch) {
     openLayerTOC: () => {
       dispatch(setIsLayerTOCOpen(true));
     },
-    openMapSettings: async (flyoutDisplay) => {
+    openMapSettings: async flyoutDisplay => {
       await dispatch(setSelectedLayer(null));
       dispatch(trackMapSettings());
       dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
index 42fa226c269233..8aabbaee3a69eb 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
@@ -132,10 +132,7 @@ export function LayerControl({
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiToolTip
-                delay="long"
-                content={openMapSettingsLabel}
-              >
+              <EuiToolTip delay="long" content={openMapSettingsLabel}>
                 <EuiButtonIcon
                   className="mapLayerControl__openMapSettingsButton"
                   onClick={openMapSettings}
diff --git a/x-pack/plugins/maps/public/actions/map_actions.d.ts b/x-pack/plugins/maps/public/actions/map_actions.d.ts
index 4d407eab732a92..9d7de58de0e12c 100644
--- a/x-pack/plugins/maps/public/actions/map_actions.d.ts
+++ b/x-pack/plugins/maps/public/actions/map_actions.d.ts
@@ -69,4 +69,7 @@ export function rollbackMapSettings(): AnyAction;
 
 export function trackMapSettings(): AnyAction;
 
-export function updateMapSetting(settingKey: string, settingValue: string | boolean | number): AnyAction;
+export function updateMapSetting(
+  settingKey: string,
+  settingValue: string | boolean | number
+): AnyAction;
diff --git a/x-pack/plugins/maps/public/reducers/map.d.ts b/x-pack/plugins/maps/public/reducers/map.d.ts
index b112da700c1b21..af2d96eb75562b 100644
--- a/x-pack/plugins/maps/public/reducers/map.d.ts
+++ b/x-pack/plugins/maps/public/reducers/map.d.ts
@@ -42,7 +42,7 @@ export type MapContext = {
 export type MapSettings = {
   maxZoom: number;
   minZoom: number;
-}
+};
 
 export type MapState = {
   ready: boolean;
diff --git a/x-pack/plugins/maps/public/reducers/map.js b/x-pack/plugins/maps/public/reducers/map.js
index e6c5ed55675ab3..86775339c66d00 100644
--- a/x-pack/plugins/maps/public/reducers/map.js
+++ b/x-pack/plugins/maps/public/reducers/map.js
@@ -194,10 +194,10 @@ export function map(state = INITIAL_STATE, action) {
     case ROLLBACK_MAP_SETTINGS:
       return state.__rollbackSettings
         ? {
-          ...state,
-          settings: { ...state.__rollbackSettings },
-          __rollbackSettings: null,
-        }
+            ...state,
+            settings: { ...state.__rollbackSettings },
+            __rollbackSettings: null,
+          }
         : state;
     case TRACK_MAP_SETTINGS:
       return {
@@ -210,7 +210,7 @@ export function map(state = INITIAL_STATE, action) {
         settings: {
           ...(state.settings ? state.settings : {}),
           [action.settingKey]: action.settingValue,
-        }
+        },
       };
     case SET_LAYER_ERROR_STATUS:
       const { layerList } = state;

From f45558612f30f6f34e87d8b82d070f15e04021ec Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 15 Apr 2020 16:12:04 -0600
Subject: [PATCH 03/17] header and footer

---
 .../map_settings_panel/index.ts               |  4 +-
 .../map_settings_panel/map_settings_panel.tsx | 71 ++++++++++++++++++-
 .../maps/public/selectors/map_selectors.d.ts  |  2 +
 .../maps/public/selectors/map_selectors.js    | 10 +++
 4 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
index 402263076fef5f..f5da8914452dc4 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -5,15 +5,17 @@
  */
 
 import { connect } from 'react-redux';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
 import { MapSettingsPanel } from './map_settings_panel';
 import { rollbackMapSettings, updateMapSetting } from '../../actions/map_actions';
-import { getMapSettings } from '../../selectors/map_selectors';
+import { getMapSettings, hasMapSettingsChanges } from '../../selectors/map_selectors';
 import { updateFlyout } from '../../actions/ui_actions';
 
 function mapStateToProps(state = {}) {
   return {
     mapSettings: getMapSettings(state),
+    hasMapSettingsChanges: hasMapSettingsChanges(state),
   };
 }
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
index ee18605a74a670..7a2ab7e923c4e9 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -5,12 +5,24 @@
  */
 
 import React from 'react';
-import { EuiFormRow, EuiSuperSelect, EuiTextColor, EuiText } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MapSettings, MapStoreState } from '../../../../../../plugins/maps/public/reducers/map';
 
 interface Props {
   cancelChanges: () => void;
+  hasMapSettingsChanges: boolean;
   keepChanges: () => void;
   mapSettings: MapSettings;
   updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
@@ -18,9 +30,64 @@ interface Props {
 
 export function MapSettingsPanel({
   cancelChanges,
+  hasMapSettingsChanges,
   keepChanges,
   mapSettings,
   updateMapSetting,
 }: Props) {
-  return <div>Map settings</div>;
+  // TODO move common text like Cancel and Close to common i18n translation
+  const closeBtnLabel = hasMapSettingsChanges
+    ? i18n.translate('xpack.maps.mapSettingsPanel.cancelLabel', {
+        defaultMessage: 'Cancel',
+      })
+    : i18n.translate('xpack.maps.mapSettingsPanel.closeLabel', {
+        defaultMessage: 'Close',
+      });
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlyoutHeader hasBorder className="mapLayerPanel__header">
+        <EuiTitle size="s">
+          <h2>
+            <FormattedMessage
+              id="xpack.maps.mapSettingsPanel.title"
+              defaultMessage="Map settings"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <div className="mapLayerPanel__body">form goes here</div>
+
+      <EuiFlyoutFooter className="mapLayerPanel__footer">
+        <EuiFlexGroup responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              onClick={cancelChanges}
+              flush="left"
+              data-test-subj="layerPanelCancelButton"
+            >
+              {closeBtnLabel}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiSpacer />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              disabled={!hasMapSettingsChanges}
+              iconType="check"
+              onClick={keepChanges}
+              fill
+            >
+              <FormattedMessage
+                id="xpack.maps.mapSettingsPanel.keepChangesButtonLabel"
+                defaultMessage="Keep changes"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlexGroup>
+  );
 }
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
index 65cc61b8ed7658..650409e1b027cb 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
@@ -18,3 +18,5 @@ export function getMapCenter(state: MapStoreState): MapCenter;
 export function getQueryableUniqueIndexPatternIds(state: MapStoreState): string[];
 
 export function getMapSettings(state: MapStoreState): MapSettings;
+
+export function hasMapSettingsChanges(state: MapStoreState): boolean;
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
index ebb9285b9336da..47cc393fc74297 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
@@ -65,6 +65,16 @@ function createSourceInstance(sourceDescriptor, inspectorAdapters) {
 
 export const getMapSettings = ({ map }) => map.settings;
 
+const getRollbackMapSettings = ({ map }) => map.__rollBackSettings;
+
+export const hasMapSettingsChanges = createSelector(
+  getMapSettings,
+  getRollbackMapSettings,
+  (settings, rollbackSettings) => {
+    return rollbackSettings ? !_.isEqual(settings, rollbackSettings) : false;
+  }
+);
+
 export const getOpenTooltips = ({ map }) => {
   return map && map.openTooltips ? map.openTooltips : [];
 };

From 29a33a991cd6b8fa8542cef18e8d32185e8b9820 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 15 Apr 2020 16:29:46 -0600
Subject: [PATCH 04/17] zoom range UI

---
 .../map_settings_panel/map_settings_panel.tsx |  7 ++-
 .../map_settings_panel/navigation_panel.tsx   | 56 +++++++++++++++++++
 .../maps/public/selectors/map_selectors.js    |  2 +-
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
index 7a2ab7e923c4e9..e9d61a75725f68 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -19,6 +19,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MapSettings, MapStoreState } from '../../../../../../plugins/maps/public/reducers/map';
+import { NavigationPanel } from './navigation_panel';
 
 interface Props {
   cancelChanges: () => void;
@@ -57,7 +58,11 @@ export function MapSettingsPanel({
         </EuiTitle>
       </EuiFlyoutHeader>
 
-      <div className="mapLayerPanel__body">form goes here</div>
+      <div className="mapLayerPanel__body">
+        <div className="mapLayerPanel__bodyOverflow">
+          <NavigationPanel mapSettings={mapSettings} updateMapSetting={updateMapSetting} />
+        </div>
+      </div>
 
       <EuiFlyoutFooter className="mapLayerPanel__footer">
         <EuiFlexGroup responsive={false}>
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
new file mode 100644
index 00000000000000..a40b53095cef78
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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 React from 'react';
+import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapSettings, MapStoreState } from '../../../../../../plugins/maps/public/reducers/map';
+import { ValidatedDualRange } from '../../../../../../../src/plugins/kibana_react/public';
+import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
+
+interface Props {
+  mapSettings: MapSettings;
+  updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
+}
+
+export function NavigationPanel({ mapSettings, updateMapSetting }: Props) {
+  const onZoomChange = ([min, max]) => {
+    updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(min, 10)));
+    updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(max, 10)));
+  };
+
+  return (
+    <EuiPanel>
+      <EuiTitle size="xs">
+        <h5>
+          <FormattedMessage
+            id="xpack.maps.mapSettingsPanel.navigationTitle"
+            defaultMessage="Navigation"
+          />
+        </h5>
+      </EuiTitle>
+
+      <EuiSpacer size="m" />
+      <ValidatedDualRange
+        label={i18n.translate('xpack.maps.mapSettingsPanel.zoomRangeLabel', {
+          defaultMessage: 'Zoom range',
+        })}
+        formRowDisplay="columnCompressed"
+        min={MIN_ZOOM}
+        max={MAX_ZOOM}
+        value={[mapSettings.minZoom, mapSettings.maxZoom]}
+        showInput="inputWithPopover"
+        showRange
+        showLabels
+        onChange={onZoomChange}
+        allowEmptyRange={false}
+        compressed
+      />
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
index 47cc393fc74297..d4db60f8858d27 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
@@ -65,7 +65,7 @@ function createSourceInstance(sourceDescriptor, inspectorAdapters) {
 
 export const getMapSettings = ({ map }) => map.settings;
 
-const getRollbackMapSettings = ({ map }) => map.__rollBackSettings;
+const getRollbackMapSettings = ({ map }) => map.__rollbackSettings;
 
 export const hasMapSettingsChanges = createSelector(
   getMapSettings,

From 5eaeee087745efa38f65fa718a7edfaa9006b93a Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 16 Apr 2020 07:56:00 -0600
Subject: [PATCH 05/17] save session state in mapStateJSON

---
 .../maps/public/angular/map_controller.js     |  4 +++
 .../public/angular/services/saved_gis_map.js  |  2 ++
 .../connected_components/map/mb/index.js      |  2 ++
 .../connected_components/map/mb/view.js       | 20 +++++++----
 .../map_settings_panel/index.ts               |  2 +-
 .../map_settings_panel/map_settings_panel.tsx |  6 ++--
 .../map_settings_panel/navigation_panel.tsx   |  6 ++--
 .../widget_overlay/layer_control/view.js      | 36 ++++++++++---------
 x-pack/plugins/maps/public/reducers/map.js    |  2 +-
 9 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
index bc97643689e12b..3d5ece9f02b322 100644
--- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js
+++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
@@ -28,6 +28,7 @@ import {
   replaceLayerList,
   setQuery,
   clearTransientLayerStateAndCloseFlyout,
+  setMapSettings,
 } from '../actions/map_actions';
 import {
   DEFAULT_IS_LAYER_TOC_OPEN,
@@ -363,6 +364,9 @@ app.controller(
         if (mapState.filters) {
           savedObjectFilters = mapState.filters;
         }
+        if (mapState.settings) {
+          store.dispatch(setMapSettings(mapState.settings));
+        }
       }
 
       if (savedMap.uiStateJSON) {
diff --git a/x-pack/legacy/plugins/maps/public/angular/services/saved_gis_map.js b/x-pack/legacy/plugins/maps/public/angular/services/saved_gis_map.js
index 990a0613da681c..ec27efebeb44b1 100644
--- a/x-pack/legacy/plugins/maps/public/angular/services/saved_gis_map.js
+++ b/x-pack/legacy/plugins/maps/public/angular/services/saved_gis_map.js
@@ -15,6 +15,7 @@ import {
   getRefreshConfig,
   getQuery,
   getFilters,
+  getMapSettings,
 } from '../../selectors/map_selectors';
 import { getIsLayerTOCOpen, getOpenTOCDetails } from '../../selectors/ui_selectors';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
@@ -98,6 +99,7 @@ export function createSavedGisMapClass(services) {
         refreshConfig: getRefreshConfig(state),
         query: _.omit(getQuery(state), 'queryLastTriggeredAt'),
         filters: getFilters(state),
+        settings: getMapSettings(state),
       });
 
       this.uiStateJSON = JSON.stringify({
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/index.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/index.js
index 350cb7028abee2..360feca6fa19b2 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/index.js
@@ -23,6 +23,7 @@ import {
   isInteractiveDisabled,
   isTooltipControlDisabled,
   isViewControlHidden,
+  getMapSettings,
 } from '../../../selectors/map_selectors';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { getInspectorAdapters } from '../../../../../../../plugins/maps/public/reducers/non_serializable_instances';
@@ -30,6 +31,7 @@ import { getInspectorAdapters } from '../../../../../../../plugins/maps/public/r
 function mapStateToProps(state = {}) {
   return {
     isMapReady: getMapReady(state),
+    settings: getMapSettings(state),
     layerList: getLayerList(state),
     goto: getGoto(state),
     inspectorAdapters: getInspectorAdapters(state),
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js
index fedc1902d80a25..fafa6599e88654 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js
@@ -78,7 +78,7 @@ export class MBMapContainer extends React.Component {
   }
 
   _debouncedSync = _.debounce(() => {
-    if (this._isMounted) {
+    if (this._isMounted || !this.props.isMapReady) {
       if (!this.state.hasSyncedLayerList) {
         this.setState(
           {
@@ -90,6 +90,7 @@ export class MBMapContainer extends React.Component {
           }
         );
       }
+      this._syncSettings();
     }
   }, 256);
 
@@ -131,6 +132,8 @@ export class MBMapContainer extends React.Component {
         scrollZoom: this.props.scrollZoom,
         preserveDrawingBuffer: chrome.getInjected('preserveDrawingBuffer', false),
         interactive: !this.props.disableInteractive,
+        maxZoom: this.props.settings.maxZoom,
+        minZoom: this.props.settings.minZoom,
       };
       const initialView = _.get(this.props.goto, 'center');
       if (initialView) {
@@ -261,17 +264,13 @@ export class MBMapContainer extends React.Component {
   };
 
   _syncMbMapWithLayerList = () => {
-    if (!this.props.isMapReady) {
-      return;
-    }
-
     removeOrphanedSourcesAndLayers(this.state.mbMap, this.props.layerList);
     this.props.layerList.forEach(layer => layer.syncLayerWithMB(this.state.mbMap));
     syncLayerOrderForSingleLayer(this.state.mbMap, this.props.layerList);
   };
 
   _syncMbMapWithInspector = () => {
-    if (!this.props.isMapReady || !this.props.inspectorAdapters.map) {
+    if (!this.props.inspectorAdapters.map) {
       return;
     }
 
@@ -285,6 +284,15 @@ export class MBMapContainer extends React.Component {
     });
   };
 
+  _syncSettings = () => {
+    if (this.props.settings.minZoom !== this.state.mbMap.getMinZoom()) {
+      this.state.mbMap.setMinZoom(this.props.settings.minZoom);
+    }
+    if (this.props.settings.maxZoom !== this.state.mbMap.getMaxZoom()) {
+      this.state.mbMap.setMaxZoom(this.props.settings.maxZoom);
+    }
+  };
+
   render() {
     let drawControl;
     let tooltipControl;
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
index f5da8914452dc4..f31cf3b16e8c39 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -14,7 +14,7 @@ import { updateFlyout } from '../../actions/ui_actions';
 
 function mapStateToProps(state = {}) {
   return {
-    mapSettings: getMapSettings(state),
+    settings: getMapSettings(state),
     hasMapSettingsChanges: hasMapSettingsChanges(state),
   };
 }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
index e9d61a75725f68..1d521239e9a174 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -25,7 +25,7 @@ interface Props {
   cancelChanges: () => void;
   hasMapSettingsChanges: boolean;
   keepChanges: () => void;
-  mapSettings: MapSettings;
+  settings: MapSettings;
   updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
 }
 
@@ -33,7 +33,7 @@ export function MapSettingsPanel({
   cancelChanges,
   hasMapSettingsChanges,
   keepChanges,
-  mapSettings,
+  settings,
   updateMapSetting,
 }: Props) {
   // TODO move common text like Cancel and Close to common i18n translation
@@ -60,7 +60,7 @@ export function MapSettingsPanel({
 
       <div className="mapLayerPanel__body">
         <div className="mapLayerPanel__bodyOverflow">
-          <NavigationPanel mapSettings={mapSettings} updateMapSetting={updateMapSetting} />
+          <NavigationPanel settings={settings} updateMapSetting={updateMapSetting} />
         </div>
       </div>
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
index a40b53095cef78..acf95acff7fdae 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -14,11 +14,11 @@ import { ValidatedDualRange } from '../../../../../../../src/plugins/kibana_reac
 import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 
 interface Props {
-  mapSettings: MapSettings;
+  settings: MapSettings;
   updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
 }
 
-export function NavigationPanel({ mapSettings, updateMapSetting }: Props) {
+export function NavigationPanel({ settings, updateMapSetting }: Props) {
   const onZoomChange = ([min, max]) => {
     updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(min, 10)));
     updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(max, 10)));
@@ -43,7 +43,7 @@ export function NavigationPanel({ mapSettings, updateMapSetting }: Props) {
         formRowDisplay="columnCompressed"
         min={MIN_ZOOM}
         max={MAX_ZOOM}
-        value={[mapSettings.minZoom, mapSettings.maxZoom]}
+        value={[settings.minZoom, settings.maxZoom]}
         showInput="inputWithPopover"
         showRange
         showLabels
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
index 8aabbaee3a69eb..73af229e0e4bd6 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
@@ -81,7 +81,12 @@ export function LayerControl({
     );
   }
 
+  const openMapSettingsLabel = i18n.translate('xpack.maps.layerControl.openMapSettingsLabel', {
+    defaultMessage: 'Edit map settings',
+  });
+
   let addLayer;
+  let mapSettingsBtn;
   if (!isReadOnly) {
     addLayer = (
       <Fragment>
@@ -101,12 +106,22 @@ export function LayerControl({
         </EuiButton>
       </Fragment>
     );
+    mapSettingsBtn = (
+      <EuiFlexItem grow={false}>
+        <EuiToolTip delay="long" content={openMapSettingsLabel}>
+          <EuiButtonIcon
+            className="mapLayerControl__openMapSettingsButton"
+            onClick={openMapSettings}
+            iconType="gear"
+            color="text"
+            aria-label={openMapSettingsLabel}
+            data-test-subj="mapOpenMapSettingsButton"
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
+    );
   }
 
-  const openMapSettingsLabel = i18n.translate('xpack.maps.layerControl.openMapSettingsLabel', {
-    defaultMessage: 'Edit map settings',
-  });
-
   return (
     <Fragment>
       <EuiPanel
@@ -131,18 +146,7 @@ export function LayerControl({
                 </h2>
               </EuiTitle>
             </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiToolTip delay="long" content={openMapSettingsLabel}>
-                <EuiButtonIcon
-                  className="mapLayerControl__openMapSettingsButton"
-                  onClick={openMapSettings}
-                  iconType="gear"
-                  color="text"
-                  aria-label={openMapSettingsLabel}
-                  data-test-subj="mapOpenMapSettingsButton"
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
+            {mapSettingsBtn}
             <EuiFlexItem grow={false}>
               <EuiToolTip
                 delay="long"
diff --git a/x-pack/plugins/maps/public/reducers/map.js b/x-pack/plugins/maps/public/reducers/map.js
index 86775339c66d00..a76267bb7095e0 100644
--- a/x-pack/plugins/maps/public/reducers/map.js
+++ b/x-pack/plugins/maps/public/reducers/map.js
@@ -189,7 +189,7 @@ export function map(state = INITIAL_STATE, action) {
     case SET_MAP_SETTINGS:
       return {
         ...state,
-        settings: action.settings,
+        settings: { ...getDefaultMapSettings(), ...action.settings },
       };
     case ROLLBACK_MAP_SETTINGS:
       return state.__rollbackSettings

From 2d3682f4c9d4c92a6f290328d04350c3c7910cff Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 16 Apr 2020 08:32:23 -0600
Subject: [PATCH 06/17] disable button when flyout is open

---
 .../widget_overlay/layer_control/index.js                    | 4 ++--
 .../widget_overlay/layer_control/view.js                     | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
index 21abf186fe7135..5e42457f6342d2 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
@@ -22,7 +22,7 @@ function mapStateToProps(state = {}) {
     isReadOnly: getIsReadOnly(state),
     isLayerTOCOpen: getIsLayerTOCOpen(state),
     layerList: getLayerList(state),
-    isAddButtonActive: getFlyoutDisplay(state) === FLYOUT_STATE.NONE,
+    isFlyoutOpen: getFlyoutDisplay(state) !== FLYOUT_STATE.NONE,
   };
 }
 
@@ -38,7 +38,7 @@ function mapDispatchToProps(dispatch) {
     openLayerTOC: () => {
       dispatch(setIsLayerTOCOpen(true));
     },
-    openMapSettings: async flyoutDisplay => {
+    openMapSettings: async () => {
       await dispatch(setSelectedLayer(null));
       dispatch(trackMapSettings());
       dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
index 73af229e0e4bd6..b2610c14657504 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
@@ -57,7 +57,7 @@ export function LayerControl({
   closeLayerTOC,
   openLayerTOC,
   layerList,
-  isAddButtonActive,
+  isFlyoutOpen,
   openMapSettings,
 }) {
   if (!isLayerTOCOpen) {
@@ -92,7 +92,7 @@ export function LayerControl({
       <Fragment>
         <EuiSpacer size="s" />
         <EuiButton
-          isDisabled={!isAddButtonActive}
+          isDisabled={isFlyoutOpen}
           className="mapLayerControl__addLayerButton"
           fill
           fullWidth
@@ -110,6 +110,7 @@ export function LayerControl({
       <EuiFlexItem grow={false}>
         <EuiToolTip delay="long" content={openMapSettingsLabel}>
           <EuiButtonIcon
+            isDisabled={isFlyoutOpen}
             className="mapLayerControl__openMapSettingsButton"
             onClick={openMapSettings}
             iconType="gear"

From 982ec5e54c883d64ddcf146993fcf03edf777e11 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 16 Apr 2020 09:12:25 -0600
Subject: [PATCH 07/17] tslint

---
 .../maps/public/actions/map_settings_actions.ts        |  8 --------
 .../connected_components/map_settings_panel/index.ts   |  7 ++++---
 .../map_settings_panel/map_settings_panel.tsx          |  2 +-
 .../map_settings_panel/navigation_panel.tsx            | 10 +++++-----
 .../plugins/maps/public/selectors/map_selectors.d.ts   |  4 +++-
 x-pack/plugins/maps/public/actions/map_actions.d.ts    |  2 ++
 6 files changed, 15 insertions(+), 18 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts

diff --git a/x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts b/x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts
deleted file mode 100644
index a5cac03f2d9031..00000000000000
--- a/x-pack/legacy/plugins/maps/public/actions/map_settings_actions.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * 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.
- */
-
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { SET_MAP_SETTING } from '../../../../../plugins/maps/public/actions/map_actions';
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
index f31cf3b16e8c39..6ec8a1580a60c5 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { AnyAction, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
@@ -12,14 +13,14 @@ import { rollbackMapSettings, updateMapSetting } from '../../actions/map_actions
 import { getMapSettings, hasMapSettingsChanges } from '../../selectors/map_selectors';
 import { updateFlyout } from '../../actions/ui_actions';
 
-function mapStateToProps(state = {}) {
+function mapStateToProps(state) {
   return {
     settings: getMapSettings(state),
     hasMapSettingsChanges: hasMapSettingsChanges(state),
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
   return {
     cancelChanges: () => {
       dispatch(rollbackMapSettings());
@@ -28,7 +29,7 @@ function mapDispatchToProps(dispatch) {
     keepChanges: () => {
       dispatch(updateFlyout(FLYOUT_STATE.NONE));
     },
-    updateMapSetting: (settingKey, settingValue) => {
+    updateMapSetting: (settingKey: string, settingValue: string) => {
       dispatch(updateMapSetting(settingKey, settingValue));
     },
   };
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
index 1d521239e9a174..5356703340ea40 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -18,7 +18,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapSettings, MapStoreState } from '../../../../../../plugins/maps/public/reducers/map';
+import { MapSettings } from '../../../../../../plugins/maps/public/reducers/map';
 import { NavigationPanel } from './navigation_panel';
 
 interface Props {
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
index acf95acff7fdae..8e96a8c42b480d 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -9,8 +9,8 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapSettings, MapStoreState } from '../../../../../../plugins/maps/public/reducers/map';
-import { ValidatedDualRange } from '../../../../../../../src/plugins/kibana_react/public';
+import { MapSettings } from '../../../../../../plugins/maps/public/reducers/map';
+import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 
 interface Props {
@@ -19,9 +19,9 @@ interface Props {
 }
 
 export function NavigationPanel({ settings, updateMapSetting }: Props) {
-  const onZoomChange = ([min, max]) => {
-    updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(min, 10)));
-    updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(max, 10)));
+  const onZoomChange = (value: Value) => {
+    updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(value[0], 10)));
+    updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(value[1], 10)));
   };
 
   return (
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
index 650409e1b027cb..6a2002d0caee95 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts
@@ -7,7 +7,9 @@
 import { AnyAction } from 'redux';
 import { MapCenter } from '../../common/descriptor_types';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapSettings, MapStoreState } from '../../../../../plugins/maps/public/reducers/map';
+import { MapStoreState } from '../../../../../plugins/maps/public/reducers/store';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapSettings } from '../../../../../plugins/maps/public/reducers/map';
 
 export function getHiddenLayerIds(state: MapStoreState): string[];
 
diff --git a/x-pack/plugins/maps/public/actions/map_actions.d.ts b/x-pack/plugins/maps/public/actions/map_actions.d.ts
index 9d7de58de0e12c..44654f426b96f9 100644
--- a/x-pack/plugins/maps/public/actions/map_actions.d.ts
+++ b/x-pack/plugins/maps/public/actions/map_actions.d.ts
@@ -14,6 +14,8 @@ import {
   MapCenterAndZoom,
   MapRefreshConfig,
 } from '../../common/descriptor_types';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapSettings } from '../../../../../plugins/maps/public/reducers/map';
 
 export type SyncContext = {
   startLoading(dataId: string, requestToken: symbol, meta: DataMeta): void;

From c6399e4e238afe03fe26a5bc470636fbc0d1d11e Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 16 Apr 2020 09:50:08 -0600
Subject: [PATCH 08/17] update layer_control jest test

---
 .../map_settings_panel/index.ts               |   6 +-
 .../__snapshots__/view.test.js.snap           | 117 +++++++++++++++++-
 .../widget_overlay/layer_control/view.test.js |   8 ++
 3 files changed, 128 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
index 6ec8a1580a60c5..d64ba77c1f2437 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -8,12 +8,14 @@ import { AnyAction, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapStoreState } from '../../../../../../plugins/maps/public/reducers/store';
 import { MapSettingsPanel } from './map_settings_panel';
 import { rollbackMapSettings, updateMapSetting } from '../../actions/map_actions';
 import { getMapSettings, hasMapSettingsChanges } from '../../selectors/map_selectors';
 import { updateFlyout } from '../../actions/ui_actions';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: MapStoreState) {
   return {
     settings: getMapSettings(state),
     hasMapSettingsChanges: hasMapSettingsChanges(state),
@@ -29,7 +31,7 @@ function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
     keepChanges: () => {
       dispatch(updateFlyout(FLYOUT_STATE.NONE));
     },
-    updateMapSetting: (settingKey: string, settingValue: string) => {
+    updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => {
       dispatch(updateMapSetting(settingKey, settingValue));
     },
   };
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
index 560ebad89c50ea..1a7d72b8abca23 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
@@ -31,6 +31,25 @@ exports[`LayerControl is rendered 1`] = `
             </h2>
           </EuiTitle>
         </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiToolTip
+            content="Edit map settings"
+            delay="long"
+            position="top"
+          >
+            <EuiButtonIcon
+              aria-label="Edit map settings"
+              className="mapLayerControl__openMapSettingsButton"
+              color="text"
+              data-test-subj="mapOpenMapSettingsButton"
+              iconType="gear"
+              isDisabled={false}
+              onClick={[Function]}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
         <EuiFlexItem
           grow={false}
         >
@@ -65,7 +84,7 @@ exports[`LayerControl is rendered 1`] = `
     data-test-subj="addLayerButton"
     fill={true}
     fullWidth={true}
-    isDisabled={true}
+    isDisabled={false}
     onClick={[Function]}
   >
     <FormattedMessage
@@ -187,3 +206,99 @@ exports[`LayerControl isReadOnly 1`] = `
   </EuiPanel>
 </Fragment>
 `;
+
+exports[`LayerControl should disable buttons when flyout is open 1`] = `
+<Fragment>
+  <EuiPanel
+    className="mapWidgetControl mapWidgetControl-hasShadow"
+    grow={false}
+    paddingSize="none"
+  >
+    <EuiFlexItem
+      className="mapWidgetControl__headerFlexItem"
+      grow={false}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="none"
+        justifyContent="spaceBetween"
+        responsive={false}
+      >
+        <EuiFlexItem>
+          <EuiTitle
+            className="mapWidgetControl__header"
+            size="xxxs"
+          >
+            <h2>
+              <FormattedMessage
+                defaultMessage="Layers"
+                id="xpack.maps.layerControl.layersTitle"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiToolTip
+            content="Edit map settings"
+            delay="long"
+            position="top"
+          >
+            <EuiButtonIcon
+              aria-label="Edit map settings"
+              className="mapLayerControl__openMapSettingsButton"
+              color="text"
+              data-test-subj="mapOpenMapSettingsButton"
+              iconType="gear"
+              isDisabled={true}
+              onClick={[Function]}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiToolTip
+            content="Collapse layers panel"
+            delay="long"
+            position="top"
+          >
+            <EuiButtonIcon
+              aria-label="Collapse layers panel"
+              className="mapLayerControl__closeLayerTOCButton"
+              color="text"
+              data-test-subj="mapToggleLegendButton"
+              iconType="menuRight"
+              onClick={[Function]}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="mapLayerControl"
+    >
+      <LayerTOC />
+    </EuiFlexItem>
+  </EuiPanel>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiButton
+    className="mapLayerControl__addLayerButton"
+    data-test-subj="addLayerButton"
+    fill={true}
+    fullWidth={true}
+    isDisabled={true}
+    onClick={[Function]}
+  >
+    <FormattedMessage
+      defaultMessage="Add layer"
+      id="xpack.maps.layerControl.addLayerButtonLabel"
+      values={Object {}}
+    />
+  </EuiButton>
+</Fragment>
+`;
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
index ee5745efe51805..1116bd81bb15c7 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
@@ -19,8 +19,10 @@ const defaultProps = {
   showAddLayerWizard: () => {},
   closeLayerTOC: () => {},
   openLayerTOC: () => {},
+  openMapSettings: () => {},
   isLayerTOCOpen: true,
   layerList: [],
+  isFlyoutOpen: false,
 };
 
 describe('LayerControl', () => {
@@ -30,6 +32,12 @@ describe('LayerControl', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('should disable buttons when flyout is open', () => {
+    const component = shallow(<LayerControl {...defaultProps} isFlyoutOpen={true} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('isReadOnly', () => {
     const component = shallow(<LayerControl {...defaultProps} isReadOnly={true} />);
 

From 1abe6b917464abea99bf1c272cbc75a3405e6452 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 20 Apr 2020 11:50:10 -0600
Subject: [PATCH 09/17] tslint

---
 .../maps/public/connected_components/map/mb/view.js        | 7 +------
 .../map_settings_panel/navigation_panel.tsx                | 4 ++--
 x-pack/plugins/maps/public/actions/map_actions.d.ts        | 3 +--
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js
index 974c7e43c2de4c..dbb32be4948c06 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js
@@ -14,12 +14,7 @@ import {
 } from './utils';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { getGlyphUrl, isRetina } from '../../../../../../../plugins/maps/public/meta';
-import {
-  DECIMAL_DEGREES_PRECISION,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  ZOOM_PRECISION,
-} from '../../../../common/constants';
+import { DECIMAL_DEGREES_PRECISION, ZOOM_PRECISION } from '../../../../common/constants';
 import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
 import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
 import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js';
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
index 8e96a8c42b480d..d1ab3ac7e78f4e 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -20,8 +20,8 @@ interface Props {
 
 export function NavigationPanel({ settings, updateMapSetting }: Props) {
   const onZoomChange = (value: Value) => {
-    updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(value[0], 10)));
-    updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(value[1], 10)));
+    updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(value[0] as string, 10)));
+    updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(value[1] as string, 10)));
   };
 
   return (
diff --git a/x-pack/plugins/maps/public/actions/map_actions.d.ts b/x-pack/plugins/maps/public/actions/map_actions.d.ts
index 44654f426b96f9..c8db284a5c4f1a 100644
--- a/x-pack/plugins/maps/public/actions/map_actions.d.ts
+++ b/x-pack/plugins/maps/public/actions/map_actions.d.ts
@@ -14,8 +14,7 @@ import {
   MapCenterAndZoom,
   MapRefreshConfig,
 } from '../../common/descriptor_types';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapSettings } from '../../../../../plugins/maps/public/reducers/map';
+import { MapSettings } from '../reducers/map';
 
 export type SyncContext = {
   startLoading(dataId: string, requestToken: symbol, meta: DataMeta): void;

From 71e7d7acbc5ff052a3a3a1cc272be008951a6662 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 20 Apr 2020 13:16:30 -0600
Subject: [PATCH 10/17] move settings button to top map chrome

---
 .../maps/public/actions/ui_actions.d.ts       |  1 +
 .../plugins/maps/public/actions/ui_actions.js | 15 ++++++++
 .../maps/public/angular/map_controller.js     | 28 +++++++++++++-
 .../__snapshots__/view.test.js.snap           | 38 -------------------
 .../widget_overlay/layer_control/index.js     |  7 +---
 .../widget_overlay/layer_control/view.js      | 22 -----------
 .../widget_overlay/layer_control/view.test.js |  1 -
 7 files changed, 44 insertions(+), 68 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts b/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts
index 203520e2d0a1dc..680a6b6ea9adc5 100644
--- a/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts
+++ b/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts
@@ -5,6 +5,7 @@
  */
 
 import { AnyAction } from 'redux';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../plugins/maps/public/reducers/ui';
 
 export function updateFlyout(display: FLYOUT_STATE): AnyAction;
diff --git a/x-pack/legacy/plugins/maps/public/actions/ui_actions.js b/x-pack/legacy/plugins/maps/public/actions/ui_actions.js
index 33ab2fd74122a6..6022aa30f441b0 100644
--- a/x-pack/legacy/plugins/maps/public/actions/ui_actions.js
+++ b/x-pack/legacy/plugins/maps/public/actions/ui_actions.js
@@ -19,6 +19,10 @@ import {
 } from '../../../../../plugins/maps/public/actions/ui_actions';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 export * from '../../../../../plugins/maps/public/actions/ui_actions';
+import { getFlyoutDisplay } from '../selectors/ui_selectors';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { FLYOUT_STATE } from '../../../../../plugins/maps/public/reducers/ui';
+import { setSelectedLayer, trackMapSettings } from './map_actions';
 
 export function exitFullScreen() {
   return {
@@ -33,6 +37,17 @@ export function updateFlyout(display) {
     display,
   };
 }
+export function openMapSettings() {
+  return (dispatch, getState) => {
+    const flyoutDisplay = getFlyoutDisplay(getState());
+    if (flyoutDisplay === FLYOUT_STATE.MAP_SETTINGS_PANEL) {
+      return;
+    }
+    dispatch(setSelectedLayer(null));
+    dispatch(trackMapSettings());
+    dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
+  };
+}
 export function closeSetView() {
   return {
     type: CLOSE_SET_VIEW,
diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
index 503a8d67da62a2..cf29a22077398c 100644
--- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js
+++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
@@ -50,8 +50,9 @@ import {
   setReadOnly,
   setIsLayerTOCOpen,
   setOpenTOCDetails,
+  openMapSettings,
 } from '../actions/ui_actions';
-import { getIsFullScreen } from '../selectors/ui_selectors';
+import { getIsFullScreen, getFlyoutDisplay } from '../selectors/ui_selectors';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { copyPersistentState } from '../../../../../plugins/maps/public/reducers/util';
 import {
@@ -447,6 +448,7 @@ app.controller(
 
     $scope.isFullScreen = false;
     $scope.isSaveDisabled = false;
+    $scope.isOpenSettingsDisabled = false;
     function handleStoreChanges(store) {
       const nextIsFullScreen = getIsFullScreen(store.getState());
       if (nextIsFullScreen !== $scope.isFullScreen) {
@@ -468,6 +470,14 @@ app.controller(
           $scope.isSaveDisabled = nextIsSaveDisabled;
         });
       }
+
+      const flyoutDisplay = getFlyoutDisplay(store.getState());
+      const nextIsOpenSettingsDisabled = flyoutDisplay !== FLYOUT_STATE.NONE;
+      if (nextIsOpenSettingsDisabled !== $scope.isOpenSettingsDisabled) {
+        $scope.$evalAsync(() => {
+          $scope.isOpenSettingsDisabled = nextIsOpenSettingsDisabled;
+        });
+      }
     }
 
     $scope.$on('$destroy', () => {
@@ -645,6 +655,22 @@ app.controller(
             },
           ]
         : []),
+      {
+        id: 'mapSettings',
+        label: i18n.translate('xpack.maps.mapController.openSettingsButtonLabel', {
+          defaultMessage: `Settings`,
+        }),
+        description: i18n.translate('xpack.maps.mapController.openSettingsDescription', {
+          defaultMessage: `Open settings`,
+        }),
+        testId: 'openSettingsButton',
+        disableButton() {
+          return $scope.isOpenSettingsDisabled;
+        },
+        run() {
+          store.dispatch(openMapSettings());
+        },
+      },
     ];
   }
 );
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
index 1a7d72b8abca23..0af4eb0793f035 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
@@ -31,25 +31,6 @@ exports[`LayerControl is rendered 1`] = `
             </h2>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <EuiToolTip
-            content="Edit map settings"
-            delay="long"
-            position="top"
-          >
-            <EuiButtonIcon
-              aria-label="Edit map settings"
-              className="mapLayerControl__openMapSettingsButton"
-              color="text"
-              data-test-subj="mapOpenMapSettingsButton"
-              iconType="gear"
-              isDisabled={false}
-              onClick={[Function]}
-            />
-          </EuiToolTip>
-        </EuiFlexItem>
         <EuiFlexItem
           grow={false}
         >
@@ -238,25 +219,6 @@ exports[`LayerControl should disable buttons when flyout is open 1`] = `
             </h2>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <EuiToolTip
-            content="Edit map settings"
-            delay="long"
-            position="top"
-          >
-            <EuiButtonIcon
-              aria-label="Edit map settings"
-              className="mapLayerControl__openMapSettingsButton"
-              color="text"
-              data-test-subj="mapOpenMapSettingsButton"
-              iconType="gear"
-              isDisabled={true}
-              onClick={[Function]}
-            />
-          </EuiToolTip>
-        </EuiFlexItem>
         <EuiFlexItem
           grow={false}
         >
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
index 5e42457f6342d2..2235627808df59 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
@@ -9,7 +9,7 @@ import { LayerControl } from './view';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../../../plugins/maps/public/reducers/ui';
 import { updateFlyout, setIsLayerTOCOpen } from '../../../actions/ui_actions';
-import { setSelectedLayer, trackMapSettings } from '../../../actions/map_actions';
+import { setSelectedLayer } from '../../../actions/map_actions';
 import {
   getIsReadOnly,
   getIsLayerTOCOpen,
@@ -38,11 +38,6 @@ function mapDispatchToProps(dispatch) {
     openLayerTOC: () => {
       dispatch(setIsLayerTOCOpen(true));
     },
-    openMapSettings: async () => {
-      await dispatch(setSelectedLayer(null));
-      dispatch(trackMapSettings());
-      dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
-    },
   };
 }
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
index b2610c14657504..180dc2e3933c36 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
@@ -58,7 +58,6 @@ export function LayerControl({
   openLayerTOC,
   layerList,
   isFlyoutOpen,
-  openMapSettings,
 }) {
   if (!isLayerTOCOpen) {
     const hasErrors = layerList.some(layer => {
@@ -81,12 +80,7 @@ export function LayerControl({
     );
   }
 
-  const openMapSettingsLabel = i18n.translate('xpack.maps.layerControl.openMapSettingsLabel', {
-    defaultMessage: 'Edit map settings',
-  });
-
   let addLayer;
-  let mapSettingsBtn;
   if (!isReadOnly) {
     addLayer = (
       <Fragment>
@@ -106,21 +100,6 @@ export function LayerControl({
         </EuiButton>
       </Fragment>
     );
-    mapSettingsBtn = (
-      <EuiFlexItem grow={false}>
-        <EuiToolTip delay="long" content={openMapSettingsLabel}>
-          <EuiButtonIcon
-            isDisabled={isFlyoutOpen}
-            className="mapLayerControl__openMapSettingsButton"
-            onClick={openMapSettings}
-            iconType="gear"
-            color="text"
-            aria-label={openMapSettingsLabel}
-            data-test-subj="mapOpenMapSettingsButton"
-          />
-        </EuiToolTip>
-      </EuiFlexItem>
-    );
   }
 
   return (
@@ -147,7 +126,6 @@ export function LayerControl({
                 </h2>
               </EuiTitle>
             </EuiFlexItem>
-            {mapSettingsBtn}
             <EuiFlexItem grow={false}>
               <EuiToolTip
                 delay="long"
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
index 1116bd81bb15c7..2f19b1b0c8c45c 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
@@ -19,7 +19,6 @@ const defaultProps = {
   showAddLayerWizard: () => {},
   closeLayerTOC: () => {},
   openLayerTOC: () => {},
-  openMapSettings: () => {},
   isLayerTOCOpen: true,
   layerList: [],
   isFlyoutOpen: false,

From f945d6ad40e8ffaecb28cd1581cf7056561a83a0 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 21 Apr 2020 08:30:11 -0600
Subject: [PATCH 11/17] move map_settings_panel to NP

---
 .../public/connected_components/map_settings_panel/index.ts | 6 ++----
 .../map_settings_panel/map_settings_panel.tsx               | 3 +--
 .../map_settings_panel/navigation_panel.tsx                 | 3 +--
 3 files changed, 4 insertions(+), 8 deletions(-)
 rename x-pack/{legacy => }/plugins/maps/public/connected_components/map_settings_panel/index.ts (82%)
 rename x-pack/{legacy => }/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx (95%)
 rename x-pack/{legacy => }/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx (92%)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts
similarity index 82%
rename from x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
rename to x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts
index d64ba77c1f2437..329fac28d7d2ee 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/index.ts
+++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -6,10 +6,8 @@
 
 import { AnyAction, Dispatch } from 'redux';
 import { connect } from 'react-redux';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapStoreState } from '../../../../../../plugins/maps/public/reducers/store';
+import { FLYOUT_STATE } from '../../reducers/ui';
+import { MapStoreState } from '../../reducers/store';
 import { MapSettingsPanel } from './map_settings_panel';
 import { rollbackMapSettings, updateMapSetting } from '../../actions/map_actions';
 import { getMapSettings, hasMapSettingsChanges } from '../../selectors/map_selectors';
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
similarity index 95%
rename from x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
rename to x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
index 5356703340ea40..36ed29e92cf69a 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
+++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -17,8 +17,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapSettings } from '../../../../../../plugins/maps/public/reducers/map';
+import { MapSettings } from '../../reducers/map';
 import { NavigationPanel } from './navigation_panel';
 
 interface Props {
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
similarity index 92%
rename from x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
rename to x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
index d1ab3ac7e78f4e..b6143881fed4ad 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
+++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -8,8 +8,7 @@ import React from 'react';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MapSettings } from '../../../../../../plugins/maps/public/reducers/map';
+import { MapSettings } from '../../reducers/map';
 import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 

From 07df6d6768c8982016862d5dd43748f61efb13be Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 21 Apr 2020 08:31:37 -0600
Subject: [PATCH 12/17] remove merge conflict artifact

---
 x-pack/plugins/maps/public/actions/map_actions.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/maps/public/actions/map_actions.js b/x-pack/plugins/maps/public/actions/map_actions.js
index 443fc53686b84d..da6ba6b481054b 100644
--- a/x-pack/plugins/maps/public/actions/map_actions.js
+++ b/x-pack/plugins/maps/public/actions/map_actions.js
@@ -997,4 +997,3 @@ export function setHiddenLayers(hiddenLayerIds) {
     }
   };
 }
->>>>>>> f43d555f14e22ca0a6ed91db7ea2af855e62eb1f

From 870d69ebf656f303343be156c2d9bb37e3025875 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 21 Apr 2020 08:33:10 -0600
Subject: [PATCH 13/17] fix import for NP migration

---
 .../plugins/maps/public/connected_components/gis_map/view.js   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/x-pack/plugins/maps/public/connected_components/gis_map/view.js b/x-pack/plugins/maps/public/connected_components/gis_map/view.js
index 68ce057631113a..6eb173a001d018 100644
--- a/x-pack/plugins/maps/public/connected_components/gis_map/view.js
+++ b/x-pack/plugins/maps/public/connected_components/gis_map/view.js
@@ -20,8 +20,7 @@ import { ES_GEO_FIELD_TYPE } from '../../../common/constants';
 import { indexPatterns as indexPatternsUtils } from '../../../../../../src/plugins/data/public';
 import { i18n } from '@kbn/i18n';
 import uuid from 'uuid/v4';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FLYOUT_STATE } from '../../../../../../plugins/maps/public/reducers/ui';
+import { FLYOUT_STATE } from '../../reducers/ui';
 import { MapSettingsPanel } from '../map_settings_panel';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';

From c43bee01d363b38d95c92a3e9753782a557f4ff4 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 21 Apr 2020 08:35:14 -0600
Subject: [PATCH 14/17] remove unused CSS class

---
 .../widget_overlay/layer_control/_layer_control.scss             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss
index b24d5de2824d74..19f70070ef5b2b 100644
--- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss
+++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/_layer_control.scss
@@ -22,7 +22,6 @@
   }
 }
 
-.mapLayerControl__openMapSettingsButton,
 .mapLayerControl__openLayerTOCButton,
 .mapLayerControl__closeLayerTOCButton {
   @include size($euiSizeXL);

From cd47a8bb15ba7af3bbd2c6afdbc6b811af4a8af0 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 21 Apr 2020 08:37:34 -0600
Subject: [PATCH 15/17] fix path from NP move

---
 .../map_settings_panel/navigation_panel.tsx                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
index b6143881fed4ad..ed83e838f44f6f 100644
--- a/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
+++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -9,7 +9,7 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { MapSettings } from '../../reducers/map';
-import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public';
+import { ValidatedDualRange, Value } from '../../../../../../src/plugins/kibana_react/public';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 
 interface Props {

From f8549bf092e504528c73f37a48cb54e985d65e4e Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 21 Apr 2020 10:32:26 -0600
Subject: [PATCH 16/17] review feedback

---
 .../maps/public/angular/map_controller.js     | 39 ++++++++++---------
 .../connected_components/map/mb/view.js       | 16 +++++++-
 .../toolbar_overlay/set_view_control/index.js |  3 +-
 .../set_view_control/set_view_control.js      |  5 +--
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
index 3598198d6f1a36..1b1fbf111fe04b 100644
--- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js
+++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
@@ -56,8 +56,11 @@ import {
   openMapSettings,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../plugins/maps/public/actions/ui_actions';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getIsFullScreen, getFlyoutDisplay } from '../../../../../plugins/maps/public/selectors/ui_selectors';
+import {
+  getIsFullScreen,
+  getFlyoutDisplay,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../plugins/maps/public/selectors/ui_selectors';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { copyPersistentState } from '../../../../../plugins/maps/public/reducers/util';
 import {
@@ -605,6 +608,22 @@ app.controller(
           getInspector().open(inspectorAdapters, {});
         },
       },
+      {
+        id: 'mapSettings',
+        label: i18n.translate('xpack.maps.mapController.openSettingsButtonLabel', {
+          defaultMessage: `Map settings`,
+        }),
+        description: i18n.translate('xpack.maps.mapController.openSettingsDescription', {
+          defaultMessage: `Open map settings`,
+        }),
+        testId: 'openSettingsButton',
+        disableButton() {
+          return $scope.isOpenSettingsDisabled;
+        },
+        run() {
+          store.dispatch(openMapSettings());
+        },
+      },
       ...(getMapsCapabilities().save
         ? [
             {
@@ -665,22 +684,6 @@ app.controller(
             },
           ]
         : []),
-      {
-        id: 'mapSettings',
-        label: i18n.translate('xpack.maps.mapController.openSettingsButtonLabel', {
-          defaultMessage: `Settings`,
-        }),
-        description: i18n.translate('xpack.maps.mapController.openSettingsDescription', {
-          defaultMessage: `Open settings`,
-        }),
-        testId: 'openSettingsButton',
-        disableButton() {
-          return $scope.isOpenSettingsDisabled;
-        },
-        run() {
-          store.dispatch(openMapSettings());
-        },
-      },
     ];
   }
 );
diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/plugins/maps/public/connected_components/map/mb/view.js
index ebe26518036d9a..71c1af44e493bd 100644
--- a/x-pack/plugins/maps/public/connected_components/map/mb/view.js
+++ b/x-pack/plugins/maps/public/connected_components/map/mb/view.js
@@ -280,14 +280,26 @@ export class MBMapContainer extends React.Component {
     });
   };
 
-  _syncSettings = () => {
+  _syncSettings() {
+    let zoomRangeChanged = false;
     if (this.props.settings.minZoom !== this.state.mbMap.getMinZoom()) {
       this.state.mbMap.setMinZoom(this.props.settings.minZoom);
+      zoomRangeChanged = true;
     }
     if (this.props.settings.maxZoom !== this.state.mbMap.getMaxZoom()) {
       this.state.mbMap.setMaxZoom(this.props.settings.maxZoom);
+      zoomRangeChanged = true;
     }
-  };
+
+    // 'moveend' event not fired when map moves from setMinZoom or setMaxZoom
+    // https://github.com/mapbox/mapbox-gl-js/issues/9610
+    // hack to update extent after zoom update finishes moving map.
+    if (zoomRangeChanged) {
+      setTimeout(() => {
+        this.props.extentChanged(this._getMapState());
+      }, 300);
+    }
+  }
 
   render() {
     let drawControl;
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/index.js b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/index.js
index 2b6fae26098beb..c3cc4090ab9522 100644
--- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/index.js
+++ b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/index.js
@@ -7,12 +7,13 @@
 import { connect } from 'react-redux';
 import { SetViewControl } from './set_view_control';
 import { setGotoWithCenter } from '../../../actions/map_actions';
-import { getMapZoom, getMapCenter } from '../../../selectors/map_selectors';
+import { getMapZoom, getMapCenter, getMapSettings } from '../../../selectors/map_selectors';
 import { closeSetView, openSetView } from '../../../actions/ui_actions';
 import { getIsSetViewOpen } from '../../../selectors/ui_selectors';
 
 function mapStateToProps(state = {}) {
   return {
+    settings: getMapSettings(state),
     isSetViewOpen: getIsSetViewOpen(state),
     zoom: getMapZoom(state),
     center: getMapCenter(state),
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
index 9c983447bfbf62..2c10728f78e5c5 100644
--- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
+++ b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
@@ -18,7 +18,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
 
 function getViewString(lat, lon, zoom) {
   return `${lat},${lon},${zoom}`;
@@ -118,8 +117,8 @@ export class SetViewControl extends Component {
 
     const { isInvalid: isZoomInvalid, component: zoomFormRow } = this._renderNumberFormRow({
       value: this.state.zoom,
-      min: MIN_ZOOM,
-      max: MAX_ZOOM,
+      min: this.props.settings.minZoom,
+      max: this.props.settings.maxZoom,
       onChange: this._onZoomChange,
       label: i18n.translate('xpack.maps.setViewControl.zoomLabel', {
         defaultMessage: 'Zoom',

From 5ee2da910ecaa9bb7f08b7379233582b08b368ff Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 21 Apr 2020 13:40:10 -0600
Subject: [PATCH 17/17] load map settings in embeddable

---
 x-pack/plugins/maps/public/embeddable/map_embeddable.tsx | 9 +++++++++
 .../maps/public/embeddable/map_embeddable_factory.ts     | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
index dbd48d614e99b4..467cf4727edb78 100644
--- a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
+++ b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
@@ -28,6 +28,7 @@ import {
 } from '../../../../../src/plugins/data/public';
 import { GisMap } from '../connected_components/gis_map';
 import { createMapStore, MapStore } from '../reducers/store';
+import { MapSettings } from '../reducers/map';
 import {
   setGotoWithCenter,
   replaceLayerList,
@@ -40,6 +41,7 @@ import {
   hideLayerControl,
   hideViewControl,
   setHiddenLayers,
+  setMapSettings,
 } from '../actions/map_actions';
 import { MapCenterAndZoom } from '../../common/descriptor_types';
 import { setReadOnly, setIsLayerTOCOpen, setOpenTOCDetails } from '../actions/ui_actions';
@@ -60,6 +62,7 @@ interface MapEmbeddableConfig {
   editable: boolean;
   title?: string;
   layerList: unknown[];
+  settings?: MapSettings;
 }
 
 export interface MapEmbeddableInput extends EmbeddableInput {
@@ -97,6 +100,7 @@ export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableO
   private _prevFilters?: Filter[];
   private _domNode?: HTMLElement;
   private _unsubscribeFromStore?: Unsubscribe;
+  private _settings?: MapSettings;
 
   constructor(
     config: MapEmbeddableConfig,
@@ -119,6 +123,7 @@ export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableO
     this._renderTooltipContent = renderTooltipContent;
     this._eventHandlers = eventHandlers;
     this._layerList = config.layerList;
+    this._settings = config.settings;
     this._store = createMapStore();
 
     this._subscription = this.getInput$().subscribe(input => this.onContainerStateChanged(input));
@@ -194,6 +199,10 @@ export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableO
     this._store.dispatch(setReadOnly(true));
     this._store.dispatch(disableScrollZoom());
 
+    if (this._settings) {
+      this._store.dispatch(setMapSettings(this._settings));
+    }
+
     if (_.has(this.input, 'isLayerTOCOpen')) {
       this._store.dispatch(setIsLayerTOCOpen(this.input.isLayerTOCOpen));
     }
diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts b/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts
index a99fe63c5f3863..be6c3bf978d82d 100644
--- a/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts
+++ b/x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts
@@ -93,6 +93,14 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
     const layerList = getInitialLayers(savedMap.layerListJSON);
     const indexPatterns = await this._getIndexPatterns(layerList);
 
+    let settings;
+    if (savedMap.mapStateJSON) {
+      const mapState = JSON.parse(savedMap.mapStateJSON);
+      if (mapState.settings) {
+        settings = mapState.settings;
+      }
+    }
+
     const embeddable = new MapEmbeddable(
       {
         layerList,
@@ -100,6 +108,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
         editUrl: getHttp().basePath.prepend(createMapPath(savedObjectId)),
         indexPatterns,
         editable: await this.isEditable(),
+        settings,
       },
       input,
       parent