check for duplicate signal names

fixes #70

src/components/AddSignals.js

@@ -507,9 +507,13 @@ export default class AddSignals extends Component {
     this.setState({ signals });
   };
 
-  onSignalChange = (signal, oldSignal) => {
+  onSignalChange = (signal) => {
     const { signals } = this.state;
 
+    if (signal.name in signals && signals[signal.name].uid !== signal.uid) {
+      return false;
+    }
+
     for (const signalName in signals) {
       if (signals[signalName].uid === signal.uid) {
         delete signals[signalName];
@@ -518,6 +522,7 @@ export default class AddSignals extends Component {
     signals[signal.name] = signal;
 
     this.setState({ signals }, this.propagateUpSignalChange);
+    return true;
   };
 
   onSignalRemove = (signal) => {

src/components/SignalLegend/signalLegend.scss

@@ -95,6 +95,15 @@
   }
   &-form {
     &-field {
+      &-error {
+        input,
+        select {
+          border-color: rgb(220, 0, 0);
+          &:focus {
+            border-color: rgb(220, 0, 0);
+          }
+        }
+      }
       min-height: $input-height;
       padding: 1px 0;
       @extend %clearfix;

src/components/SignalLegendEntry/SignalForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 
 import FIELDS from './FIELDS';
 import NumberField from './NumberField';
@@ -16,13 +17,15 @@ export default ({
   onSignalRemove,
   isExpanded,
   getSignalEdited,
+  fieldError,
   update
 }) => (
   <div className="signals-legend-entry-form">
     {FIELDS.map((field) => {
       const Node = FieldMap[field.type];
+      const errorClass = fieldError === field.field ? 'signals-legend-entry-form-field-error' : null;
       return (
-        <div className="signals-legend-entry-form-field" key={field.field}>
+        <div className={cx("signals-legend-entry-form-field", errorClass)} key={field.field}>
           <Node
             fieldSpec={field}
             signal={signal}

src/components/SignalLegendEntry/index.js

@@ -29,6 +29,7 @@ export default class SignalLegendEntry extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      fieldError: null,
       signalEdited: Object.assign(Object.create(props.signal), props.signal)
     };
   }
@@ -36,6 +37,7 @@ export default class SignalLegendEntry extends Component {
   componentDidUpdate(prevProps) {
     if (!this.props.signal.equals(prevProps.signal)) {
       this.setState({
+        fieldError: null,
         signalEdited: Object.assign(
           Object.create(this.props.signal),
           this.props.signal
@@ -60,7 +62,9 @@ export default class SignalLegendEntry extends Component {
     Object.entries(signalEdited).forEach(([field, value]) => {
       signalCopy[field] = value;
     });
-    this.props.onSignalChange(signalCopy, signal);
+
+    const updated = this.props.onSignalChange(signalCopy);
+    this.setState({ fieldError: !updated ? fieldSpec.field : null });
   };
 
   toggleEditing = (e) => {
@@ -87,14 +91,15 @@ export default class SignalLegendEntry extends Component {
 
         signalCopy[field] = value;
       });
-      this.props.onSignalChange(signalCopy, signal);
+      this.props.onSignalChange(signalCopy);
     } else {
       signalEdited = signalCopy;
     }
 
     // Expand and enable signal editing
     this.setState({
-      signalEdited
+      fieldError: null,
+      signalEdited,
     });
     this.props.toggleExpandSignal(signal);
     e.stopPropagation();
@@ -148,6 +153,7 @@ export default class SignalLegendEntry extends Component {
               onSignalRemove={this.props.onSignalRemove}
               isExpanded={isExpanded}
               getSignalEdited={this.getSignalEdited}
+              fieldError={this.state.fieldError}
               update={this.updateField}
             />
           )}