strictNullChecks: First batch (#18390)

* First batch of strictNullChecks

* Remove undefined

* Check an alternative solution

* Fix strict nullChecks

* Low hanging strictNullChecks

* Fixing strict nulls issues and more

* Minor change

* fixed unit test

* Fix feedback

* Update public/vendor/ansicolor/ansicolor.ts

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Update public/vendor/ansicolor/ansicolor.ts

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Update public/vendor/ansicolor/ansicolor.ts

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Fix build errors

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

@@ -27,7 +27,6 @@ function getCurrentThresholds(editor: ThresholdsEditor) {
 describe('Render', () => {
   it('should render with base threshold', () => {
     const { wrapper } = setup();
-
     expect(wrapper).toMatchSnapshot();
   });
 });
@@ -35,8 +34,7 @@ describe('Render', () => {
 describe('Initialization', () => {
   it('should add a base threshold if missing', () => {
     const { instance } = setup();
-
-    expect(getCurrentThresholds(instance)).toEqual([{ value: -Infinity, color: colors[0] }]);
+    expect(getCurrentThresholds(instance)).toEqual([{ value: -Infinity, color: 'green' }]);
   });
 });
 
@@ -47,8 +45,8 @@ describe('Add threshold', () => {
     instance.onAddThresholdAfter(instance.state.thresholds[0]);
 
     expect(getCurrentThresholds(instance)).toEqual([
-      { value: -Infinity, color: colors[0] }, // 0
-      { value: 50, color: colors[2] }, // 1
+      { value: -Infinity, color: 'green' }, // 0
+      { value: 50, color: colors[1] }, // 1
     ]);
   });
 

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

@@ -8,7 +8,7 @@ import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
 export interface Props {
-  thresholds: Threshold[];
+  thresholds?: Threshold[];
   onChange: (thresholds: Threshold[]) => void;
 }
 
@@ -22,35 +22,28 @@ interface ThresholdWithKey extends Threshold {
 
 let counter = 100;
 
+function toThresholdsWithKey(thresholds?: Threshold[]): ThresholdWithKey[] {
+  if (!thresholds || thresholds.length === 0) {
+    thresholds = [{ value: -Infinity, color: 'green' }];
+  }
+
+  return thresholds.map(t => {
+    return {
+      color: t.color,
+      value: t.value === null ? -Infinity : t.value,
+      key: counter++,
+    };
+  });
+}
+
 export class ThresholdsEditor extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    const thresholds = props.thresholds
-      ? props.thresholds.map(t => {
-          return {
-            color: t.color,
-            value: t.value === null ? -Infinity : t.value,
-            key: counter++,
-          };
-        })
-      : ([] as ThresholdWithKey[]);
+    const thresholds = toThresholdsWithKey(props.thresholds);
+    thresholds[0].value = -Infinity;
 
-    let needsCallback = false;
-    if (!thresholds.length) {
-      thresholds.push({ value: -Infinity, color: colors[0], key: counter++ });
-      needsCallback = true;
-    } else {
-      // First value is always base
-      thresholds[0].value = -Infinity;
-    }
-
-    // Update the state
     this.state = { thresholds };
-
-    if (needsCallback) {
-      this.onChange();
-    }
   }
 
   onAddThresholdAfter = (threshold: ThresholdWithKey) => {

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

@@ -2,26 +2,7 @@
 
 exports[`Render should render with base threshold 1`] = `
 <ThresholdsEditor
-  onChange={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          Array [
-            Object {
-              "color": "#7EB26D",
-              "value": -Infinity,
-            },
-          ],
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
+  onChange={[MockFunction]}
   thresholds={Array []}
 >
   <Component
@@ -61,7 +42,7 @@ exports[`Render should render with base threshold 1`] = `
               className="thresholds-row-color-indicator"
               style={
                 Object {
-                  "backgroundColor": "#7EB26D",
+                  "backgroundColor": "#73BF69",
                 }
               }
             />
@@ -81,12 +62,12 @@ exports[`Render should render with base threshold 1`] = `
                     className="thresholds-row-input-inner-color-colorpicker"
                   >
                     <WithTheme(ColorPicker)
-                      color="#7EB26D"
+                      color="green"
                       enableNamedColors={true}
                       onChange={[Function]}
                     >
                       <ColorPicker
-                        color="#7EB26D"
+                        color="green"
                         enableNamedColors={true}
                         onChange={[Function]}
                         theme={
@@ -247,7 +228,7 @@ exports[`Render should render with base threshold 1`] = `
                         <PopperController
                           content={
                             <ColorPickerPopover
-                              color="#7EB26D"
+                              color="green"
                               enableNamedColors={true}
                               onChange={[Function]}
                               theme={
@@ -409,7 +390,7 @@ exports[`Render should render with base threshold 1`] = `
                           hideAfter={300}
                         >
                           <ForwardRef(ColorPickerTrigger)
-                            color="#7EB26D"
+                            color="#73BF69"
                             onClick={[Function]}
                             onMouseLeave={[Function]}
                           >
@@ -445,7 +426,7 @@ exports[`Render should render with base threshold 1`] = `
                                 <div
                                   style={
                                     Object {
-                                      "backgroundColor": "#7EB26D",
+                                      "backgroundColor": "#73BF69",
                                       "bottom": 0,
                                       "display": "block",
                                       "left": 0,

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

@@ -5,7 +5,7 @@ import { MappingType, ValueMapping } from '@grafana/data';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
 export interface Props {
-  valueMappings: ValueMapping[];
+  valueMappings?: ValueMapping[];
   onChange: (valueMappings: ValueMapping[]) => void;
 }