[7.x] [Maps] expand/collapse Layer TOC (#34506)

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));
 

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));
   };

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;
 }
 
 

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;
+}

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));
+    },
   };
 }