Reordered the input row

packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx

@@ -69,6 +69,26 @@ describe('Add threshold', () => {
   });
 });
 
+describe('Remove threshold', () => {
+  it('should remove threshold', () => {
+    const thresholds = [
+      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
+    ];
+    const instance = setup({
+      thresholds,
+    });
+
+    instance.onRemoveThreshold(thresholds[1]);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 1, value: 75, color: '#6ED0E0' },
+    ]);
+  });
+});
+
 describe('change threshold value', () => {
   it('should update value and resort rows', () => {
     const instance = setup();

packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx

@@ -69,7 +69,19 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   onRemoveThreshold = (threshold: Threshold) => {
     this.setState(
-      prevState => ({ thresholds: prevState.thresholds.filter(t => t !== threshold) }),
+      prevState => {
+        const newThresholds = prevState.thresholds.map(t => {
+          if (t.index > threshold.index) {
+            const index = t.index - 1;
+            t = { ...t, index };
+          }
+          return t;
+        });
+
+        return {
+          thresholds: newThresholds.filter(t => t !== threshold),
+        };
+      },
       () => this.updateGauge()
     );
   };
@@ -128,15 +140,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     const value = threshold.index === 0 ? 'Base' : threshold.value;
     return (
       <div className="thresholds-row-input-inner">
-        <div className="thresholds-row-input-inner-arrow" />
-        <input
-          className="thresholds-row-input-inner-value"
-          type="text"
-          onChange={event => this.onChangeThresholdValue(event, threshold)}
-          value={value}
-          onBlur={this.onBlur}
-          readOnly={threshold.index === 0}
-        />
+        <span className="thresholds-row-input-inner-arrow" />
         <div className="thresholds-row-input-inner-color">
           {threshold.color && (
             <div className="thresholds-row-input-inner-color-colorpicker">
@@ -144,6 +148,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             </div>
           )}
         </div>
+        <div className="thresholds-row-input-inner-value">
+          <input
+            type="text"
+            onChange={event => this.onChangeThresholdValue(event, threshold)}
+            value={value}
+            onBlur={this.onBlur}
+            readOnly={threshold.index === 0}
+          />
+        </div>
         {threshold.index > 0 && (
           <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
             <i className="fa fa-times" />

packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss

@@ -48,7 +48,18 @@
   height: 37px;
 }
 
-.thresholds-row-input-inner > div:last-child {
+.thresholds-row-input-inner > div {
+  border-left: 1px solid $input-label-border-color;
+  border-top: 1px solid $input-label-border-color;
+  border-bottom: 1px solid $input-label-border-color;
+}
+
+.thresholds-row-input-inner > *:nth-child(2) {
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+}
+
+.thresholds-row-input-inner > *:last-child {
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
 }
@@ -57,24 +68,18 @@
   align-self: center;
   width: 0;
   height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid $input-label-border-color;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid $input-label-border-color;
 }
 
-.thresholds-row-input-inner-value {
-  border: 1px solid $input-label-border-color;
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
+.thresholds-row-input-inner-value > input {
   padding: 8px 10px;
   width: 150px;
 }
 
 .thresholds-row-input-inner-color {
   width: 37px;
-  border-top: 1px solid $input-label-border-color;
-  border-bottom: 1px solid $input-label-border-color;
-  border-right: 1px solid $input-label-border-color;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -96,8 +101,5 @@
   height: 37px;
   width: 37px;
   background-color: $input-label-border-color;
-  border-top: 1px solid $input-label-border-color;
-  border-bottom: 1px solid $input-label-border-color;
-  border-right: 1px solid $input-label-border-color;
   cursor: pointer;
 }