From 2836bc2a13b5e8a11344abfa13167b586c07eb69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 15 Jan 2019 10:52:15 +0100
Subject: [PATCH] Fixed issue with changing value not changing index

---
 .../ThresholdsEditor.test.tsx                 | 47 ++++++++++++++++++-
 .../ThresholdsEditor/ThresholdsEditor.tsx     | 15 +++++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index 304e210d3df..f5a99816c81 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/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' },
+    ]);
+  });
+});
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
index 8c336f38063..0e1b448a95d 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/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();
   };