Fixed issue with changing value not changing index

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

@@ -24,6 +24,14 @@ describe('Initialization', () => {
 });
 
 describe('Add threshold', () => {
+  it('should not add threshold at index 0', () => {
+    const instance = setup();
+
+    instance.onAddThreshold(0);
+
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
+  });
+
   it('should add threshold', () => {
     const instance = setup();
 
@@ -70,6 +78,19 @@ describe('Add threshold', () => {
 });
 
 describe('Remove threshold', () => {
+  it('should not remove threshold at index 0', () => {
+    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[0]);
+
+    expect(instance.state.thresholds).toEqual(thresholds);
+  });
+
   it('should remove threshold', () => {
     const thresholds = [
       { index: 0, value: -Infinity, color: '#299c46' },
@@ -90,7 +111,7 @@ describe('Remove threshold', () => {
 });
 
 describe('change threshold value', () => {
-  it('should update value and resort rows', () => {
+  it('should update value', () => {
     const instance = setup();
     const thresholds = [
       { index: 0, value: -Infinity, color: '#299c46' },
@@ -114,3 +135,27 @@ describe('change threshold value', () => {
     ]);
   });
 });
+
+describe('on blur threshold value', () => {
+  it('should resort rows and update indexes', () => {
+    const instance = setup();
+    const thresholds = [
+      { index: 0, value: -Infinity, color: '#299c46' },
+      { index: 1, value: 78, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
+    ];
+
+    instance.state = {
+      baseColor: BasicGaugeColor.Green,
+      thresholds,
+    };
+
+    instance.onBlur();
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 2, value: 78, color: '#EAB839' },
+      { index: 1, value: 75, color: '#6ED0E0' },
+      { index: 0, value: -Infinity, color: '#299c46' },
+    ]);
+  });
+});

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

@@ -68,6 +68,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
   };
 
   onRemoveThreshold = (threshold: Threshold) => {
+    if (threshold.index === 0) {
+      return;
+    }
+
     this.setState(
       prevState => {
         const newThresholds = prevState.thresholds.map(t => {
@@ -91,7 +95,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
     const newThresholds = thresholds.map(t => {
       if (t === threshold) {
-        t = { ...t, value: event.target.value };
+        t = { ...t, value: parseInt(event.target.value, 10) };
       }
 
       return t;
@@ -121,7 +125,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
   onBlur = () => {
-    this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
+    this.setState(prevState => {
+      const sortThresholds = this.sortThresholds([...prevState.thresholds]);
+      let index = sortThresholds.length - 1;
+      sortThresholds.forEach(t => {
+        t.index = index--;
+      });
+      return { thresholds: sortThresholds };
+    });
 
     this.updateGauge();
   };