From 56b4ebfd64fa138754d4d277f4e9c0c180f7916d Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 1 Apr 2020 09:29:48 -0400
Subject: [PATCH] [Maps] Highlight selected layer in TOC (#61510)

---
 .../toc_entry/__snapshots__/view.test.js.snap | 134 ++++++++++++++++++
 .../layer_toc/toc_entry/_toc_entry.scss       |   5 +
 .../layer_control/layer_toc/toc_entry/view.js |   2 +
 .../layer_toc/toc_entry/view.test.js          |  31 +++-
 4 files changed, 169 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
index 2ca994647e1dac..27ea52bfed0440 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
@@ -67,6 +67,140 @@ exports[`TOCEntry is rendered 1`] = `
 </div>
 `;
 
+exports[`TOCEntry props Should shade background when not selected layer 1`] = `
+<div
+  className="mapTocEntry"
+  data-layerid="1"
+  id="1"
+>
+  <div
+    className="mapTocEntry-visible"
+  >
+    <LayerTocActions
+      cloneLayer={[Function]}
+      displayName="layer 1"
+      editLayer={[Function]}
+      escapedDisplayName="layer_1"
+      fitToBounds={[Function]}
+      layer={
+        Object {
+          "getDisplayName": [Function],
+          "getId": [Function],
+          "hasErrors": [Function],
+          "hasLegendDetails": [Function],
+          "isVisible": [Function],
+          "renderLegendDetails": [Function],
+          "showAtZoomLevel": [Function],
+        }
+      }
+      removeLayer={[Function]}
+      toggleVisible={[Function]}
+      zoom={0}
+    />
+    <div
+      className="mapTocEntry__layerIcons"
+    >
+      <EuiButtonIcon
+        aria-label="Edit layer"
+        iconType="pencil"
+        onClick={[Function]}
+        title="Edit layer"
+      />
+      <EuiButtonIcon
+        aria-label="Reorder layer"
+        className="mapTocEntry__grab"
+        color="subdued"
+        iconType="grab"
+        title="Reorder layer"
+      />
+    </div>
+  </div>
+  <span
+    className="mapTocEntry__detailsToggle"
+  >
+    <button
+      aria-label="Show layer details"
+      className="mapTocEntry__detailsToggleButton"
+      onClick={[Function]}
+      title="Show layer details"
+    >
+      <EuiIcon
+        className="eui-alignBaseline"
+        size="s"
+        type="arrowDown"
+      />
+    </button>
+  </span>
+</div>
+`;
+
+exports[`TOCEntry props Should shade background when selected layer 1`] = `
+<div
+  className="mapTocEntry mapTocEntry-isSelected"
+  data-layerid="1"
+  id="1"
+>
+  <div
+    className="mapTocEntry-visible"
+  >
+    <LayerTocActions
+      cloneLayer={[Function]}
+      displayName="layer 1"
+      editLayer={[Function]}
+      escapedDisplayName="layer_1"
+      fitToBounds={[Function]}
+      layer={
+        Object {
+          "getDisplayName": [Function],
+          "getId": [Function],
+          "hasErrors": [Function],
+          "hasLegendDetails": [Function],
+          "isVisible": [Function],
+          "renderLegendDetails": [Function],
+          "showAtZoomLevel": [Function],
+        }
+      }
+      removeLayer={[Function]}
+      toggleVisible={[Function]}
+      zoom={0}
+    />
+    <div
+      className="mapTocEntry__layerIcons"
+    >
+      <EuiButtonIcon
+        aria-label="Edit layer"
+        iconType="pencil"
+        onClick={[Function]}
+        title="Edit layer"
+      />
+      <EuiButtonIcon
+        aria-label="Reorder layer"
+        className="mapTocEntry__grab"
+        color="subdued"
+        iconType="grab"
+        title="Reorder layer"
+      />
+    </div>
+  </div>
+  <span
+    className="mapTocEntry__detailsToggle"
+  >
+    <button
+      aria-label="Show layer details"
+      className="mapTocEntry__detailsToggleButton"
+      onClick={[Function]}
+      title="Show layer details"
+    >
+      <EuiIcon
+        className="eui-alignBaseline"
+        size="s"
+        type="arrowDown"
+      />
+    </button>
+  </span>
+</div>
+`;
+
 exports[`TOCEntry props isReadOnly 1`] = `
 <div
   className="mapTocEntry"
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss
index 9ac9b436071218..764bf841f62072 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss
@@ -41,6 +41,11 @@
   pointer-events: none !important;
 }
 
+.mapTocEntry-isSelected {
+  background-color: tintOrShade($euiColorLightShade, 60%, 20%);
+}
+
+
 .mapTocEntry-visible,
 .mapTocEntry-notVisible {
   display: flex;
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
index c9f115c1ba4cce..fe56523fb25807 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
@@ -261,6 +261,8 @@ export class TOCEntry extends React.Component {
     const classes = classNames('mapTocEntry', {
       'mapTocEntry-isDragging': this.props.isDragging,
       'mapTocEntry-isDraggingOver': this.props.isDraggingOver,
+      'mapTocEntry-isSelected':
+        this.props.selectedLayer && this.props.selectedLayer.getId() === this.props.layer.getId(),
     });
 
     return (
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.test.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.test.js
index e865242c6fb06a..fa200660d8e4c7 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.test.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.test.js
@@ -15,9 +15,6 @@ const mockLayer = {
   getId: () => {
     return LAYER_ID;
   },
-  hasLegendDetails: async () => {
-    return true;
-  },
   renderLegendDetails: () => {
     return <div>TOC details mock</div>;
   },
@@ -83,5 +80,33 @@ describe('TOCEntry', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('Should shade background when selected layer', async () => {
+      const component = shallowWithIntl(<TOCEntry {...defaultProps} selectedLayer={mockLayer} />);
+
+      // Ensure all promises resolve
+      await new Promise(resolve => process.nextTick(resolve));
+      // Ensure the state changes are reflected
+      component.update();
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('Should shade background when not selected layer', async () => {
+      const differentLayer = Object.create(mockLayer);
+      differentLayer.getId = () => {
+        return 'foobar';
+      };
+      const component = shallowWithIntl(
+        <TOCEntry {...defaultProps} selectedLayer={differentLayer} />
+      );
+
+      // Ensure all promises resolve
+      await new Promise(resolve => process.nextTick(resolve));
+      // Ensure the state changes are reflected
+      component.update();
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });