From 61ba399e1c3804531e634f3405dcf9af45f172ab Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 30 Mar 2020 09:47:46 +0100
Subject: [PATCH] Duplicate layer ids now show errors inline.

---
 src/components/App.jsx                 | 36 +++++++++++++++++---------
 src/components/MessagePanel.jsx        |  6 +++--
 src/components/layers/LayerEditor.jsx  |  3 ++-
 src/components/layers/LayerIdBlock.jsx |  1 +
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index d1e3902..aabc06d 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -335,22 +335,33 @@ export default class App extends React.Component {
       newStyle.layers.forEach((layer, index) => {
         if (layer.id === "" && foundLayers.has(layer.id)) {
           const message = `Duplicate layer: ${formatLayerId(layer.id)}`;
-          layerErrors.push({
-            message,
-            parsed: {
-              type: "layer",
-              data: {
-                index,
-                message,
-              }
-            }
-          });
+          const error = new Error(
+            `layers[${index}]: duplicate layer id [empty_string], previously used`
+          );
+          layerErrors.push(error);
         }
         foundLayers.set(layer.id, true);
       });
     }
 
-    const mappedErrors = errors.map(error => {
+    const mappedErrors = layerErrors.concat(errors).map(error => {
+      const dupMatch = error.message.match(/layers\[(\d+)\]: (duplicate layer id "?(.*)"?, previously used)/);
+      if (dupMatch) {
+        const [matchStr, index, message] = dupMatch;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index,
+              key: "id",
+              message,
+            }
+          }
+        }
+      }
+
+      // duplicate layer id
       const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
       if (layerMatch) {
         const [matchStr, index, group, property, message] = layerMatch;
@@ -372,7 +383,7 @@ export default class App extends React.Component {
           message: error.message,
         };
       }
-    }).concat(layerErrors);
+    });
 
     let dirtyMapStyle = undefined;
     if (errors.length > 0) {
@@ -753,6 +764,7 @@ export default class App extends React.Component {
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
       currentLayer={selectedLayer}
+      selectedLayerIndex={this.state.selectedLayerIndex}
       onLayerSelect={this.onLayerSelect}
       mapStyle={this.state.mapStyle}
       errors={this.state.errors}
diff --git a/src/components/MessagePanel.jsx b/src/components/MessagePanel.jsx
index 105eeb3..86a6b8a 100644
--- a/src/components/MessagePanel.jsx
+++ b/src/components/MessagePanel.jsx
@@ -9,6 +9,7 @@ class MessagePanel extends React.Component {
     mapStyle: PropTypes.object,
     onLayerSelect: PropTypes.func,
     currentLayer: PropTypes.object,
+    selectedLayerIndex: PropTypes.number,
   }
 
   static defaultProps = {
@@ -16,6 +17,7 @@ class MessagePanel extends React.Component {
   }
 
   render() {
+    const {selectedLayerIndex} = this.props;
     const errors = this.props.errors.map((error, idx) => {
       let content;
       if (error.parsed && error.parsed.type === "layer") {
@@ -25,12 +27,12 @@ class MessagePanel extends React.Component {
         content = (
           <>
             Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
-            {currentLayer.id !== layerId &&
+            {selectedLayerIndex !== parsed.data.index &&
               <>
                 &nbsp;&mdash;&nbsp;
                 <button
                   className="maputnik-message-panel__switch-button"
-                  onClick={() => this.props.onLayerSelect(layerId)}
+                  onClick={() => this.props.onLayerSelect(parsed.data.index)}
                 >
                   switch to layer
                 </button>
diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index bc0150e..7ee3ff4 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -19,6 +19,7 @@ import {MdMoreVert} from 'react-icons/md'
 
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
+import {formatLayerId} from '../util/format';
 
 
 function getLayoutForType (type) {
@@ -292,7 +293,7 @@ export default class LayerEditor extends React.Component {
       <header>
         <div className="layer-header">
           <h2 className="layer-header__title">
-            Layer: {this.props.layer.id}
+            Layer: {formatLayerId(this.props.layer.id)}
           </h2>
           <div className="layer-header__info">
             <Wrapper
diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx
index 81504f6..98321a5 100644
--- a/src/components/layers/LayerIdBlock.jsx
+++ b/src/components/layers/LayerIdBlock.jsx
@@ -15,6 +15,7 @@ class LayerIdBlock extends React.Component {
   render() {
     return <InputBlock label={"ID"} fieldSpec={latest.layer.id}
       data-wd-key={this.props.wdKey}
+      error={this.props.error}
     >
       <StringInput
         value={this.props.value}