Prevent colors sorting when editing value

ui/src/dashboards/components/SingleStatOptions.js

@@ -67,18 +67,23 @@ class SingleStatOptions extends Component {
       name: GAUGE_COLORS[randomColor].name,
     }
 
-    handleUpdateSingleStatColors([...singleStatColors, newThreshold])
+    const updatedColors = _.sortBy(
+      [...singleStatColors, newThreshold],
+      color => color.value
+    )
+
+    handleUpdateSingleStatColors(updatedColors)
     onResetFocus()
   }
 
   handleDeleteThreshold = threshold => () => {
     const {handleUpdateSingleStatColors, onResetFocus} = this.props
-
     const singleStatColors = this.props.singleStatColors.filter(
       color => color.id !== threshold.id
     )
+    const sortedColors = _.sortBy(singleStatColors, color => color.value)
 
-    handleUpdateSingleStatColors(singleStatColors)
+    handleUpdateSingleStatColors(sortedColors)
     onResetFocus()
   }
 
@@ -126,6 +131,13 @@ class SingleStatOptions extends Component {
     handleUpdateAxes(newAxes)
   }
 
+  handleSortColors = () => {
+    const {singleStatColors, handleUpdateSingleStatColors} = this.props
+    const sortedColors = _.sortBy(singleStatColors, color => color.value)
+
+    handleUpdateSingleStatColors(sortedColors)
+  }
+
   render() {
     const {
       singleStatColors,
@@ -135,8 +147,6 @@ class SingleStatOptions extends Component {
 
     const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS
 
-    const sortedColors = _.sortBy(singleStatColors, color => color.value)
-
     return (
       <FancyScrollbar
         className="display-options--cell y-axis-controls"
@@ -152,7 +162,7 @@ class SingleStatOptions extends Component {
             >
               <span className="icon plus" /> Add Threshold
             </button>
-            {sortedColors.map(
+            {singleStatColors.map(
               color =>
                 color.id === SINGLE_STAT_BASE
                   ? <div className="gauge-controls--section" key={color.id}>
@@ -172,6 +182,7 @@ class SingleStatOptions extends Component {
                       onValidateColorValue={this.handleValidateColorValue}
                       onUpdateColorValue={this.handleUpdateColorValue}
                       onDeleteThreshold={this.handleDeleteThreshold}
+                      onSortColors={this.handleSortColors}
                     />
             )}
           </div>