Merge pull request #15521 from grafana/hugoh/bug-type-error-in-thresholds

Fixes #15505

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

@@ -159,8 +159,6 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
   };
   };
 
 
   renderInput = (threshold: Threshold) => {
   renderInput = (threshold: Threshold) => {
-    const value = threshold.index === 0 ? 'Base' : threshold.value;
-
     return (
     return (
       <div className="thresholds-row-input-inner">
       <div className="thresholds-row-input-inner">
         <span className="thresholds-row-input-inner-arrow" />
         <span className="thresholds-row-input-inner-arrow" />
@@ -171,21 +169,28 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             </div>
             </div>
           )}
           )}
         </div>
         </div>
-        <div className="thresholds-row-input-inner-value">
-          <input
-            type="number"
-            step="0.0001"
-            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" />
+        {threshold.index === 0 && (
+          <div className="thresholds-row-input-inner-value">
+            <input type="text" value="Base" readOnly />
           </div>
           </div>
         )}
         )}
+        {threshold.index > 0 && (
+          <>
+            <div className="thresholds-row-input-inner-value">
+              <input
+                type="number"
+                step="0.0001"
+                onChange={event => this.onChangeThresholdValue(event, threshold)}
+                value={threshold.value}
+                onBlur={this.onBlur}
+                readOnly={threshold.index === 0}
+              />
+            </div>
+            <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
+              <i className="fa fa-times" />
+            </div>
+          </>
+        )}
       </div>
       </div>
     );
     );
   };
   };

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

@@ -43,7 +43,7 @@
 }
 }
 
 
 .thresholds-row-input {
 .thresholds-row-input {
-  margin-top: 49px;
+  margin-top: 44px;
   margin-left: 2px;
   margin-left: 2px;
 }
 }