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 9522fd12ad37d1..1b1fbf111fe04b 100644 --- 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 index debead3ad5c45d..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,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 index 572385d628b16a..da6ba6b481054b 100644 --- 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 index e087dc70256f06..43cdcff7d2d697 100644 --- 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 index 77fdf6b0f12d23..e2a36e33e7db09 100644 --- 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 index 1c47e0ab7dc2a4..1a58b0cefaed97 100644 --- 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 index c825fdab75ca74..f8769d0bb898ad 100644 --- 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 index 28ad12133d6118..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 @@ -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 = ; - } else if (layerDetailsVisible) { - currentPanelClassName = 'mapMapLayerPanel-isVisible'; - currentPanel = ; + let flyoutPanel = null; + if (flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD) { + flyoutPanel = ; + } else if (flyoutDisplay === FLYOUT_STATE.LAYER_PANEL) { + flyoutPanel = ; + } else if (flyoutDisplay === FLYOUT_STATE.MAP_SETTINGS_PANEL) { + flyoutPanel = ; } let exitFullScreenButton; @@ -210,8 +208,13 @@ export class GisMap extends Component { - - {currentPanel} + + {flyoutPanel} {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 index d864b60eb433bf..459b38d4226948 100644 --- 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,6 +23,7 @@ import { isInteractiveDisabled, isTooltipControlDisabled, isViewControlHidden, + getMapSettings, } from '../../../selectors/map_selectors'; import { getInspectorAdapters } from '../../../reducers/non_serializable_instances'; @@ -30,6 +31,7 @@ import { getInspectorAdapters } from '../../../reducers/non_serializable_instanc function mapStateToProps(state = {}) { return { isMapReady: getMapReady(state), + settings: getMapSettings(state), layerList: getLayerList(state), goto: getGoto(state), inspectorAdapters: getInspectorAdapters(state), 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 2d95de184f0f4e..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 @@ -12,14 +12,8 @@ import { removeOrphanedSourcesAndLayers, addSpritesheetToMap, } from './utils'; - import { getGlyphUrl, isRetina } from '../../../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'; @@ -80,7 +74,7 @@ export class MBMapContainer extends React.Component { } _debouncedSync = _.debounce(() => { - if (this._isMounted) { + if (this._isMounted || !this.props.isMapReady) { if (!this.state.hasSyncedLayerList) { this.setState( { @@ -92,6 +86,7 @@ export class MBMapContainer extends React.Component { } ); } + this._syncSettings(); } }, 256); @@ -133,8 +128,8 @@ export class MBMapContainer extends React.Component { scrollZoom: this.props.scrollZoom, preserveDrawingBuffer: getInjectedVarFunc()('preserveDrawingBuffer', false), interactive: !this.props.disableInteractive, - minZoom: MIN_ZOOM, - maxZoom: MAX_ZOOM, + maxZoom: this.props.settings.maxZoom, + minZoom: this.props.settings.minZoom, }; const initialView = _.get(this.props.goto, 'center'); if (initialView) { @@ -265,17 +260,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; } @@ -289,6 +280,27 @@ export class MBMapContainer extends React.Component { }); }; + _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; let tooltipControl; diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts new file mode 100644 index 00000000000000..329fac28d7d2ee --- /dev/null +++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts @@ -0,0 +1,39 @@ +/* + * 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 { AnyAction, Dispatch } from 'redux'; +import { connect } from 'react-redux'; +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'; +import { updateFlyout } from '../../actions/ui_actions'; + +function mapStateToProps(state: MapStoreState) { + return { + settings: getMapSettings(state), + hasMapSettingsChanges: hasMapSettingsChanges(state), + }; +} + +function mapDispatchToProps(dispatch: Dispatch) { + return { + cancelChanges: () => { + dispatch(rollbackMapSettings()); + dispatch(updateFlyout(FLYOUT_STATE.NONE)); + }, + keepChanges: () => { + dispatch(updateFlyout(FLYOUT_STATE.NONE)); + }, + updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => { + dispatch(updateMapSetting(settingKey, settingValue)); + }, + }; +} + +const connectedMapSettingsPanel = connect(mapStateToProps, mapDispatchToProps)(MapSettingsPanel); +export { connectedMapSettingsPanel as MapSettingsPanel }; diff --git a/x-pack/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 new file mode 100644 index 00000000000000..36ed29e92cf69a --- /dev/null +++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx @@ -0,0 +1,97 @@ +/* + * 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 { + EuiButton, + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiFlyoutFooter, + EuiFlyoutHeader, + EuiSpacer, + EuiTitle, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { MapSettings } from '../../reducers/map'; +import { NavigationPanel } from './navigation_panel'; + +interface Props { + cancelChanges: () => void; + hasMapSettingsChanges: boolean; + keepChanges: () => void; + settings: MapSettings; + updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void; +} + +export function MapSettingsPanel({ + cancelChanges, + hasMapSettingsChanges, + keepChanges, + settings, + updateMapSetting, +}: Props) { + // 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 ( + + + +

+ +

+
+
+ +
+
+ +
+
+ + + + + + {closeBtnLabel} + + + + + + + + + + + + +
+ ); +} 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 new file mode 100644 index 00000000000000..ed83e838f44f6f --- /dev/null +++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx @@ -0,0 +1,55 @@ +/* + * 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'; +import { MapSettings } from '../../reducers/map'; +import { ValidatedDualRange, Value } from '../../../../../../src/plugins/kibana_react/public'; +import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants'; + +interface Props { + settings: MapSettings; + updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void; +} + +export function NavigationPanel({ settings, updateMapSetting }: Props) { + const onZoomChange = (value: Value) => { + 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/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', diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap index 560ebad89c50ea..0af4eb0793f035 100644 --- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap +++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap @@ -65,7 +65,7 @@ exports[`LayerControl is rendered 1`] = ` data-test-subj="addLayerButton" fill={true} fullWidth={true} - isDisabled={true} + isDisabled={false} onClick={[Function]} > `; + +exports[`LayerControl should disable buttons when flyout is open 1`] = ` + + + + + + +

+ +

+
+
+ + + + + +
+
+ + + +
+ + + + +
+`; diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js index 8780bac59e4b72..915f808b8e3589 100644 --- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js +++ b/x-pack/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, }; } diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js index 537a676287042f..180dc2e3933c36 100644 --- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js +++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js @@ -57,7 +57,7 @@ export function LayerControl({ closeLayerTOC, openLayerTOC, layerList, - isAddButtonActive, + isFlyoutOpen, }) { if (!isLayerTOCOpen) { const hasErrors = layerList.some(layer => { @@ -86,7 +86,7 @@ export function LayerControl({ {}, isLayerTOCOpen: true, layerList: [], + isFlyoutOpen: false, }; describe('LayerControl', () => { @@ -30,6 +31,12 @@ describe('LayerControl', () => { expect(component).toMatchSnapshot(); }); + test('should disable buttons when flyout is open', () => { + const component = shallow(); + + expect(component).toMatchSnapshot(); + }); + test('isReadOnly', () => { const component = shallow(); 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 this.onContainerStateChanged(input)); @@ -194,6 +199,10 @@ export class MapEmbeddable extends Embeddable 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 : []; };