From adea3d0f13f2e0e27181acb27722974d17ec75be Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 17 Feb 2020 13:19:26 +0000
Subject: [PATCH] Added ability to switch to layer from global error panel.

---
 src/components/App.jsx          |  1 +
 src/components/MessagePanel.jsx | 14 +++++++++++++-
 src/styles/_components.scss     |  6 ++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index dc870b95..3e0158c8 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -732,6 +732,7 @@ export default class App extends React.Component {
     /> : null
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
+      onLayerSelect={this.onLayerSelect}
       mapStyle={this.state.mapStyle}
       errors={this.state.errors}
       infos={this.state.infos}
diff --git a/src/components/MessagePanel.jsx b/src/components/MessagePanel.jsx
index 1433b57b..373691eb 100644
--- a/src/components/MessagePanel.jsx
+++ b/src/components/MessagePanel.jsx
@@ -6,6 +6,11 @@ class MessagePanel extends React.Component {
     errors: PropTypes.array,
     infos: PropTypes.array,
     mapStyle: PropTypes.object,
+    onLayerSelect: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onLayerSelect: () => {},
   }
 
   render() {
@@ -14,9 +19,16 @@ class MessagePanel extends React.Component {
       if (error.parsed && error.parsed.type === "layer") {
         const {parsed} = error;
         const {mapStyle} = this.props;
+        const layerId = mapStyle.layers[parsed.data.index].id;
         content = (
           <>
-            Layer <span>&apos;{mapStyle.layers[parsed.data.index].id}&apos;</span>: {parsed.data.message}
+            Layer <span>&apos;{layerId}&apos;</span>: {parsed.data.message} &mdash;&nbsp;
+            <button
+              className="maputnik-message-panel__switch-button"
+              onClick={() => this.props.onLayerSelect(layerId)}
+            >
+              switch to layer
+            </button>
           </>
         );
       }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 620228fd..87128e95 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -212,6 +212,12 @@
   &-error {
     color: $color-red;
   }
+
+  &__switch-button {
+    all: unset;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }
 
 .maputnik-dialog {