[Maps] show dynamic style ranges in legend (#35417) (#36229)

* show grab and edit buttons when hovering over layer name

* display layer details when layer name is clicked

* add range to dynamic style property state

* render dynamic ranges in TOC details

* render symbol size and border width header in legend

* simplify VectorStyle.getIcon

* removed unused component

* open TOC details on map load

* save open TOC details state in embeddable config

* show gradients for dynmaic fill color icon

* round corners of dynamic icon if points only

* add tooltip to legend label

* add edit panel action to action panel

* add functional test for details in legend

* fix broken gis_page function doesLayerExist

* add unit tests for VectorStyle.getDescriptorWithDynamicRanges

* open actions menu on layer title click, add arrow up/down for togging layer details

* Design cleanup of layers panel (#31)

* fix functional test

* update jest snapshots

* refactor StylePropertyLegendRow to use same function to render lineWidth and iconSize legends

* fix functional test

* fix another functional test

* make escapeLayerName function instead of instance method

* move _isLayerDetailsOpen into prop from redux connector

* remove index.js file

* do not show legend details toggle when layer has not legend details

* rename FillableVector to FillableRectangle

* use mixin pattern instead of encapulated function call

x-pack/plugins/maps/public/angular/map_controller.js

@@ -33,7 +33,8 @@ import {
   updateFlyout,
   FLYOUT_STATE,
   setReadOnly,
-  setIsLayerTOCOpen
+  setIsLayerTOCOpen,
+  setOpenTOCDetails,
 } from '../store/ui';
 import { getQueryableUniqueIndexPatternIds } from '../selectors/map_selectors';
 import { getInspectorAdapters } from '../store/non_serializable_instances';
@@ -147,6 +148,7 @@ 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)));
+      store.dispatch(setOpenTOCDetails(_.get(uiState, 'openTOCDetails', [])));
     }
 
     const layerList = getInitialLayers(savedMap.layerListJSON);

x-pack/plugins/maps/public/angular/services/saved_gis_map.js

@@ -17,7 +17,7 @@ import {
   getRefreshConfig,
   getQuery,
 } from '../../selectors/map_selectors';
-import { getIsLayerTOCOpen } from '../../store/ui';
+import { getIsLayerTOCOpen, getOpenTOCDetails } from '../../store/ui';
 import { convertMapExtentToPolygon } from '../../elasticsearch_geo_utils';
 import { copyPersistentState } from '../../store/util';
 import { extractReferences, injectReferences } from '../../../common/migrations/references';
@@ -101,7 +101,8 @@ module.factory('SavedGisMap', function (Private) {
     });
 
     this.uiStateJSON = JSON.stringify({
-      isLayerTOCOpen: getIsLayerTOCOpen(state)
+      isLayerTOCOpen: getIsLayerTOCOpen(state),
+      openTOCDetails: getOpenTOCDetails(state),
     });
 
     this.bounds = convertMapExtentToPolygon(getMapExtent(state));

x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss

@@ -13,9 +13,12 @@
   pointer-events: none; /* 1 */
 }
 
+.mapWidgetOverlay__rightSideWrapper {
+  overflow: hidden; // Fixes Chrome overflow
+}
+
 .mapWidgetOverlay__rightSide {
-  min-width: 19rem;
-  max-width: 24rem;
+  width: $euiSize * 20;
 }
 
 .mapWidgetOverlay__layerWrapper {

x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss

@@ -2,6 +2,8 @@
   @include euiScrollBar;
   overflow-y: auto;
   flex-basis: auto !important; // Fixes IE and ensures the layer items are visible
+  padding-bottom: $euiSizeS + 1px;
+  border-top: 1px solid $euiColorLightestShade;
 }
 
 .mapLayerControl__addLayerButton,
@@ -18,5 +20,5 @@
 .mapLayerControl__openLayerTOCButton,
 .mapLayerControl__closeLayerTOCButton {
   @include size($euiSizeXL);
-  background-color: $euiColorEmptyShade;
+  background-color: $euiColorEmptyShade !important; // During all states
 }