diff --git a/x-pack/plugins/maps/public/angular/map_controller.js b/x-pack/plugins/maps/public/angular/map_controller.js
index 6ea9e984785c14..c611cd8f0c2714 100644
--- a/x-pack/plugins/maps/public/angular/map_controller.js
+++ b/x-pack/plugins/maps/public/angular/map_controller.js
@@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
+import _ from 'lodash';
import chrome from 'ui/chrome';
import 'ui/listen';
import React from 'react';
@@ -25,10 +26,12 @@ import {
clearTransientLayerStateAndCloseFlyout,
} from '../actions/store_actions';
import {
+ DEFAULT_IS_LAYER_TOC_OPEN,
enableFullScreen,
getIsFullScreen,
updateFlyout,
- FLYOUT_STATE
+ FLYOUT_STATE,
+ setIsLayerTOCOpen
} from '../store/ui';
import { getUniqueIndexPatternIds } from '../selectors/map_selectors';
import { getInspectorAdapters } from '../store/non_serializable_instances';
@@ -138,6 +141,11 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
}));
}
+ if (savedMap.uiStateJSON) {
+ const uiState = JSON.parse(savedMap.uiStateJSON);
+ store.dispatch(setIsLayerTOCOpen(_.get(uiState, 'isLayerTOCOpen', DEFAULT_IS_LAYER_TOC_OPEN)));
+ }
+
const layerList = getInitialLayers(savedMap.layerListJSON);
store.dispatch(replaceLayerList(layerList));
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 98b725e7997df3..9c2f4426961e96 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
@@ -17,6 +17,7 @@ import {
getRefreshConfig,
getQuery,
} from '../../selectors/map_selectors';
+import { getIsLayerTOCOpen } from '../../store/ui';
import { convertMapExtentToPolygon } from '../../elasticsearch_geo_utils';
import { copyPersistentState } from '../../store/util';
import { extractReferences, injectReferences } from '../../../common/migrations/references';
@@ -99,7 +100,9 @@ module.factory('SavedGisMap', function (Private) {
query: _.omit(getQuery(state), 'queryLastTriggeredAt'),
});
- this.uiStateJSON = JSON.stringify({});
+ this.uiStateJSON = JSON.stringify({
+ isLayerTOCOpen: getIsLayerTOCOpen(state)
+ });
this.bounds = convertMapExtentToPolygon(getMapExtent(state));
};
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
index 9eae0f3ee046f5..433509a0060e0f 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
+++ b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
@@ -18,8 +18,13 @@
max-width: 24rem;
}
+.mapWidgetOverlay__layerWrapper {
+ align-items: flex-end;
+}
+
.mapWidgetControl {
max-height: 100%;
+ width: 100%;
overflow: hidden;
padding-bottom: $euiSizeS; // ensures the scrollbar doesn't appear unnecessarily because of flex group negative margins
border-color: transparent !important;
@@ -30,11 +35,12 @@
&.mapWidgetControl-hasShadow {
@include euiBottomShadowLarge;
}
+}
- .mapWidgetControl__header {
- padding: $euiSizeS $euiSize;
- flex-shrink: 0;
- }
+.mapWidgetControl__header {
+ padding: 0 $euiSize;
+ flex-shrink: 0;
+ text-transform: uppercase;
}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
index 435cfc123033f3..f46356ae3e0bbb 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
@@ -1,102 +1,163 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LayerControl is rendered 1`] = `
-
-
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
`;
-exports[`LayerControl props isReadOnly 1`] = `
-
-
+
+`;
+
+exports[`LayerControl props isReadOnly 1`] = `
+
+
-
-
-
+
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
`;
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
index 9f07b295a4e3c4..381d4b24f8e457 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
@@ -3,3 +3,20 @@
overflow-y: auto;
flex-basis: auto !important; // Fixes IE and ensures the layer items are visible
}
+
+.mapLayerControl__addLayerButton,
+.mapLayerControl__openLayerTOCButton {
+ pointer-events: all;
+
+ &:enabled,
+ &:enabled:hover,
+ &:enabled:focus {
+ @include euiBottomShadowLarge;
+ }
+}
+
+.mapLayerControl__openLayerTOCButton,
+.mapLayerControl__closeLayerTOCButton {
+ @include size($euiSizeXL);
+ background-color: $euiColorEmptyShade;
+}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/index.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/index.js
index efe88a4f35703f..5314b78b467136 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/index.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/index.js
@@ -8,13 +8,16 @@ import { connect } from 'react-redux';
import { LayerControl } from './view';
import {
getIsReadOnly,
+ getIsLayerTOCOpen,
updateFlyout,
FLYOUT_STATE,
+ setIsLayerTOCOpen,
} from '../../../store/ui';
function mapStateToProps(state = {}) {
return {
isReadOnly: getIsReadOnly(state),
+ isLayerTOCOpen: getIsLayerTOCOpen(state),
};
}
@@ -23,6 +26,12 @@ function mapDispatchToProps(dispatch) {
showAddLayerWizard: () => {
dispatch(updateFlyout(FLYOUT_STATE.ADD_LAYER_WIZARD));
},
+ closeLayerTOC: () => {
+ dispatch(setIsLayerTOCOpen(false));
+ },
+ openLayerTOC: () => {
+ dispatch(setIsLayerTOCOpen(true));
+ },
};
}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
index fe5442f1940327..8dd7e1ac29870d 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
@@ -4,25 +4,53 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
+import React, { Fragment } from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
- EuiButtonEmpty,
+ EuiButton,
EuiTitle,
+ EuiSpacer,
+ EuiButtonIcon,
+ EuiToolTip,
} from '@elastic/eui';
import { LayerTOC } from './layer_toc';
import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+
+export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, closeLayerTOC, openLayerTOC }) {
+ if (!isLayerTOCOpen) {
+ return (
+
+
+
+ );
+ }
-export function LayerControl({ isReadOnly, showAddLayerWizard }) {
let addLayer;
if (!isReadOnly) {
addLayer = (
-
-
+
+
@@ -30,37 +58,59 @@ export function LayerControl({ isReadOnly, showAddLayerWizard }) {
id="xpack.maps.layerControl.addLayerButtonLabel"
defaultMessage="Add layer"
/>
-
-
+
+
);
}
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- {addLayer}
-
-
+
+
+
+
+
+
+
+
+
+
+ {addLayer}
-
-
-
-
+
);
}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.test.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.test.js
index aba7733dd8ed66..e4369140d8162e 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.test.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.test.js
@@ -16,7 +16,10 @@ import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { LayerControl } from './view';
const defaultProps = {
- showAddLayerWizard: () => {}
+ showAddLayerWizard: () => {},
+ closeLayerTOC: () => {},
+ openLayerTOC: () => {},
+ isLayerTOCOpen: true,
};
describe('LayerControl', () => {
@@ -43,5 +46,17 @@ describe('LayerControl', () => {
expect(component)
.toMatchSnapshot();
});
+
+ test('Should not render LayerTOC when isLayerTOCOpen is false', () => {
+ const component = shallowWithIntl(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
});
});
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
index 3974737664ac72..ea858ba8997d81 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
@@ -23,7 +23,7 @@ export function WidgetOverlay() {
justifyContent="spaceBetween"
responsive={false}
>
-
+
diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.js b/x-pack/plugins/maps/public/embeddable/map_embeddable.js
index 5227b53f052731..02d133bf42dc44 100644
--- a/x-pack/plugins/maps/public/embeddable/map_embeddable.js
+++ b/x-pack/plugins/maps/public/embeddable/map_embeddable.js
@@ -22,7 +22,13 @@ import {
setQuery,
setRefreshConfig
} from '../actions/store_actions';
-import { setReadOnly, setFilterable } from '../store/ui';
+import {
+ DEFAULT_IS_LAYER_TOC_OPEN,
+ getIsLayerTOCOpen,
+ setReadOnly,
+ setFilterable,
+ setIsLayerTOCOpen
+} from '../store/ui';
import { getInspectorAdapters } from '../store/non_serializable_instances';
import { getMapCenter, getMapZoom } from '../selectors/map_selectors';
@@ -84,6 +90,13 @@ export class MapEmbeddable extends Embeddable {
this._store.dispatch(setReadOnly(true));
this._store.dispatch(setFilterable(true));
+ if (_.has(this._embeddableConfig, 'isLayerTOCOpen')) {
+ this._store.dispatch(setIsLayerTOCOpen(this._embeddableConfig.isLayerTOCOpen));
+ } else if (this._savedMap.uiStateJSON) {
+ const uiState = JSON.parse(this._savedMap.uiStateJSON);
+ this._store.dispatch(setIsLayerTOCOpen(_.get(uiState, 'isLayerTOCOpen', DEFAULT_IS_LAYER_TOC_OPEN)));
+ }
+
if (this._embeddableConfig.mapCenter) {
this._store.dispatch(setGotoWithCenter({
lat: this._embeddableConfig.mapCenter.lat,
@@ -136,18 +149,30 @@ export class MapEmbeddable extends Embeddable {
}
_handleStoreChanges() {
+ let embeddableConfigChanged = false;
+
const center = getMapCenter(this._store.getState());
const zoom = getMapZoom(this._store.getState());
-
if (!this._embeddableConfig.mapCenter
|| this._embeddableConfig.mapCenter.lat !== center.lat
|| this._embeddableConfig.mapCenter.lon !== center.lon
|| this._embeddableConfig.mapCenter.zoom !== zoom) {
+ embeddableConfigChanged = true;
this._embeddableConfig.mapCenter = {
lat: center.lat,
lon: center.lon,
zoom: zoom,
};
+ }
+
+ const isLayerTOCOpen = getIsLayerTOCOpen(this._store.getState());
+ if (!this._embeddableConfig.isLayerTOCOpen
+ || this._embeddableConfig.isLayerTOCOpen !== isLayerTOCOpen) {
+ embeddableConfigChanged = true;
+ this._embeddableConfig.isLayerTOCOpen = isLayerTOCOpen;
+ }
+
+ if (embeddableConfigChanged) {
this._onEmbeddableStateChanged({
customization: this._embeddableConfig
});
diff --git a/x-pack/plugins/maps/public/store/ui.js b/x-pack/plugins/maps/public/store/ui.js
index 6334d49b0a3201..408df7ed673886 100644
--- a/x-pack/plugins/maps/public/store/ui.js
+++ b/x-pack/plugins/maps/public/store/ui.js
@@ -6,6 +6,7 @@
export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
+export const SET_IS_LAYER_TOC_OPEN = 'SET_IS_LAYER_TOC_OPEN';
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
export const SET_READ_ONLY = 'SET_READ_ONLY';
export const SET_FILTERABLE = 'IS_FILTERABLE';
@@ -15,10 +16,13 @@ export const FLYOUT_STATE = {
ADD_LAYER_WIZARD: 'ADD_LAYER_WIZARD'
};
+export const DEFAULT_IS_LAYER_TOC_OPEN = true;
+
const INITIAL_STATE = {
flyoutDisplay: FLYOUT_STATE.NONE,
isFullScreen: false,
isReadOnly: false,
+ isLayerTOCOpen: DEFAULT_IS_LAYER_TOC_OPEN,
isFilterable: false
};
@@ -31,6 +35,8 @@ export function ui(state = INITIAL_STATE, action) {
return { ...state, isSetViewOpen: false };
case OPEN_SET_VIEW:
return { ...state, isSetViewOpen: true };
+ case SET_IS_LAYER_TOC_OPEN:
+ return { ...state, isLayerTOCOpen: action.isLayerTOCOpen };
case SET_FULL_SCREEN:
return { ...state, isFullScreen: action.isFullScreen };
case SET_READ_ONLY:
@@ -59,6 +65,12 @@ export function openSetView() {
type: OPEN_SET_VIEW,
};
}
+export function setIsLayerTOCOpen(isLayerTOCOpen) {
+ return {
+ type: SET_IS_LAYER_TOC_OPEN,
+ isLayerTOCOpen
+ };
+}
export function exitFullScreen() {
return {
type: SET_FULL_SCREEN,
@@ -89,6 +101,7 @@ export function setFilterable(isFilterable) {
export const getFlyoutDisplay = ({ ui }) => ui && ui.flyoutDisplay
|| INITIAL_STATE.flyoutDisplay;
export const getIsSetViewOpen = ({ ui }) => ui.isSetViewOpen;
+export const getIsLayerTOCOpen = ({ ui }) => ui.isLayerTOCOpen;
export const getIsFullScreen = ({ ui }) => ui.isFullScreen;
export const getIsReadOnly = ({ ui }) => ui.isReadOnly;
export const getIsFilterable = ({ ui }) => ui.isFilterable;