[Maps] Map settings: min and max zoom (#63714)

* [Maps] Map settings: min and max zoom * eslint * header and footer * zoom range UI * save session state in mapStateJSON * disable button when flyout is open * tslint * update layer_control jest test * tslint * move settings button to top map chrome * move map_settings_panel to NP * remove merge conflict artifact * fix import for NP migration * remove unused CSS class * fix path from NP move * review feedback * load map settings in embeddable
elastic · Apr 21, 2020 · ea4eb33 · ea4eb33
1 parent f254ee6
commit ea4eb33
Show file tree

Hide file tree

Showing 27 changed files with 516 additions and 47 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
@@ -39,6 +39,7 @@ import {
   replaceLayerList,
   setQuery,
   clearTransientLayerStateAndCloseFlyout,
+  setMapSettings,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../plugins/maps/public/actions/map_actions';
 import {
@@ -52,10 +53,14 @@ import {
   setReadOnly,
   setIsLayerTOCOpen,
   setOpenTOCDetails,
+  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 } 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 {
@@ -395,6 +400,9 @@ app.controller(
         if (mapState.filters) {
           savedObjectFilters = mapState.filters;
         }
+        if (mapState.settings) {
+          store.dispatch(setMapSettings(mapState.settings));
+        }
       }
 
       if (savedMap.uiStateJSON) {
@@ -453,6 +461,7 @@ app.controller(
 
     $scope.isFullScreen = false;
     $scope.isSaveDisabled = false;
+    $scope.isOpenSettingsDisabled = false;
     function handleStoreChanges(store) {
       const nextIsFullScreen = getIsFullScreen(store.getState());
       if (nextIsFullScreen !== $scope.isFullScreen) {
@@ -474,6 +483,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', () => {
@@ -591,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
         ? [
             {

diff --git 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,7 @@ import {
   MapCenterAndZoom,
   MapRefreshConfig,
 } from '../../common/descriptor_types';
+import { MapSettings } from '../reducers/map';
 
 export type SyncContext = {
   startLoading(dataId: string, requestToken: symbol, meta: DataMeta): void;
@@ -62,3 +63,14 @@ 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
@@ -76,6 +76,10 @@ 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';
 
 function getLayerLoadingCallbacks(dispatch, getState, layerId) {
   return {
@@ -145,6 +149,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/plugins/maps/public/actions/ui_actions.d.ts b/x-pack/plugins/maps/public/actions/ui_actions.d.ts
@@ -5,6 +5,7 @@
  */
 
 import { AnyAction } from 'redux';
+import { FLYOUT_STATE } from '../reducers/ui';
 
 export const UPDATE_FLYOUT: string;
 export const CLOSE_SET_VIEW: string;
@@ -17,6 +18,8 @@ export const SHOW_TOC_DETAILS: string;
 export const HIDE_TOC_DETAILS: string;
 export const UPDATE_INDEXING_STAGE: string;
 
+export function updateFlyout(display: FLYOUT_STATE): AnyAction;
+
 export function setOpenTOCDetails(layerIds?: string[]): AnyAction;
 
 export function setIsLayerTOCOpen(open: boolean): AnyAction;

diff --git a/x-pack/plugins/maps/public/actions/ui_actions.js b/x-pack/plugins/maps/public/actions/ui_actions.js
@@ -4,6 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { getFlyoutDisplay } from '../selectors/ui_selectors';
+import { FLYOUT_STATE } from '../reducers/ui';
+import { setSelectedLayer, trackMapSettings } from './map_actions';
+
 export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
 export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
 export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
@@ -28,6 +32,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/plugins/maps/public/angular/services/saved_gis_map.js b/x-pack/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';
 
@@ -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/plugins/maps/public/connected_components/gis_map/index.js b/x-pack/plugins/maps/public/connected_components/gis_map/index.js
@@ -6,8 +6,6 @@
 
 import { connect } from 'react-redux';
 import { GisMap } from './view';
-
-import { FLYOUT_STATE } from '../../reducers/ui';
 import { exitFullScreen } from '../../actions/ui_actions';
 import { getFlyoutDisplay, getIsFullScreen } from '../../selectors/ui_selectors';
 import { triggerRefreshTimer, cancelAllInFlightRequests } from '../../actions/map_actions';
@@ -22,12 +20,9 @@ import {
 import { getCoreChrome } from '../../kibana_services';
 
 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/plugins/maps/public/connected_components/gis_map/view.js b/x-pack/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';
 import { ToolbarOverlay } from '../toolbar_overlay';
@@ -19,6 +20,8 @@ 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';
+import { FLYOUT_STATE } from '../../reducers/ui';
+import { MapSettingsPanel } from '../map_settings_panel';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';
 
@@ -147,9 +150,7 @@ export class GisMap extends Component {
   render() {
     const {
       addFilters,
-      layerDetailsVisible,
-      addLayerVisible,
-      noFlyoutVisible,
+      flyoutDisplay,
       isFullScreen,
       exitFullScreen,
       mapInitError,
@@ -174,16 +175,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 +208,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/plugins/maps/public/connected_components/map/mb/index.js b/x-pack/plugins/maps/public/connected_components/map/mb/index.js
@@ -23,13 +23,15 @@ import {
   isInteractiveDisabled,
   isTooltipControlDisabled,
   isViewControlHidden,
+  getMapSettings,
 } from '../../../selectors/map_selectors';
 
 import { getInspectorAdapters } from '../../../reducers/non_serializable_instances';
 
 function mapStateToProps(state = {}) {
   return {
     isMapReady: getMapReady(state),
+    settings: getMapSettings(state),
     layerList: getLayerList(state),
     goto: getGoto(state),
     inspectorAdapters: getInspectorAdapters(state),