Reverted move of defaults for GaugePanelOptions

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

@@ -1,33 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { ThresholdsEditor } from './ThresholdsEditor';
-import { BasicGaugeColor, PanelOptionsProps, GaugeOptions } from '../../types';
-
-const defaultProps = {
-  options: {
-    baseColor: BasicGaugeColor.Green,
-    minValue: 0,
-    maxValue: 100,
-    prefix: '',
-    showThresholdMarkers: true,
-    showThresholdLabels: false,
-    suffix: '',
-    decimals: 0,
-    stat: 'avg',
-    unit: 'none',
-    mappings: [],
-    thresholds: [],
-  },
-};
+import { ThresholdsEditor, Props } from './ThresholdsEditor';
+import { BasicGaugeColor } from '../../types';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<GaugeOptions> = {
+  const props: Props = {
     onChange: jest.fn(),
-    options: {
-      ...defaultProps.options,
-      thresholds: [],
-    },
+    thresholds: [],
   };
 
   Object.assign(props, propOverrides);
@@ -46,10 +26,7 @@ describe('Add threshold', () => {
 
   it('should add another threshold above a first', () => {
     const instance = setup({
-      options: {
-        ...defaultProps.options,
-        thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
-      },
+      thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
     });
 
     instance.onAddThreshold(1);

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

@@ -1,28 +1,37 @@
 import React, { PureComponent } from 'react';
 import tinycolor, { ColorInput } from 'tinycolor2';
 
-import { Threshold, PanelOptionsProps, GaugeOptions, BasicGaugeColor } from '../../types';
+import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 
+export interface Props {
+  thresholds: Threshold[];
+  onChange: (thresholds: Threshold[]) => void;
+}
+
 interface State {
   thresholds: Threshold[];
   baseColor: string;
 }
 
-export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
-  constructor(props: PanelOptionsProps<GaugeOptions>) {
+export class ThresholdsEditor extends PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
 
-    this.state = { thresholds: props.options.thresholds, baseColor: props.options.baseColor };
+    this.state = { thresholds: props.thresholds, baseColor: BasicGaugeColor.Green };
   }
 
   onAddThreshold = (index: number) => {
-    const { maxValue, minValue } = this.props.options;
+    const maxValue = 100; // hardcoded for now before we add the base threshold
+    const minValue = 0; // hardcoded for now before we add the base threshold
     const { thresholds } = this.state;
 
     const newThresholds = thresholds.map(threshold => {
       if (threshold.index >= index) {
-        threshold = { ...threshold, index: threshold.index + 1 };
+        threshold = {
+          ...threshold,
+          index: threshold.index + 1,
+        };
       }
 
       return threshold;
@@ -49,7 +58,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
 
     this.setState(
       {
-        thresholds: this.sortThresholds([...newThresholds, { index, value: value as number, color }]),
+        thresholds: this.sortThresholds([
+          ...newThresholds,
+          {
+            index,
+            value: value as number,
+            color,
+          },
+        ]),
       },
       () => this.updateGauge()
     );
@@ -95,7 +111,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
     );
   };
 
-  onChangeBaseColor = (color: string) => this.props.onChange({ ...this.props.options, baseColor: color });
+  onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
   onBlur = () => {
     this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
 
@@ -103,7 +119,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
   };
 
   updateGauge = () => {
-    this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
+    this.props.onChange(this.state.thresholds);
   };
 
   sortThresholds = (thresholds: Threshold[]) => {
@@ -163,14 +179,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
       <div className="indicator-section" style={{ height: '100%' }}>
         <div
           onClick={() => this.onAddThreshold(0)}
-          style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
+          style={{ height: '100%', backgroundColor: BasicGaugeColor.Green }}
         />
       </div>
     );
   }
 
   renderBase() {
-    const { baseColor } = this.props.options;
+    const baseColor = BasicGaugeColor.Green;
 
     return (
       <div className="threshold-row threshold-row-base">

packages/grafana-ui/src/types/gauge.ts

@@ -1,4 +1,4 @@
-import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from './panel';
+import { RangeMap, Threshold, ValueMap } from './panel';
 
 export interface GaugeOptions {
   baseColor: string;
@@ -14,20 +14,3 @@ export interface GaugeOptions {
   thresholds: Threshold[];
   unit: string;
 }
-
-export const GaugePanelOptionsDefaultProps = {
-  options: {
-    baseColor: BasicGaugeColor.Green,
-    minValue: 0,
-    maxValue: 100,
-    prefix: '',
-    showThresholdMarkers: true,
-    showThresholdLabels: false,
-    suffix: '',
-    decimals: 0,
-    stat: 'avg',
-    unit: 'none',
-    mappings: [],
-    thresholds: [],
-  },
-};