[Maps] Highlight selected layer in TOC (elastic#61510)

thomasneirynck · Apr 1, 2020 · 56b4ebf · 56b4ebf
1 parent 710615b
commit 56b4ebf
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 3 deletions.
diff --git a/...mponents/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap b/...mponents/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
diff --git a/...lic/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss b/...lic/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/...maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js b/...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/...public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.test.js b/...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();
+    });
   });
 });