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: [],
-  },
-};

public/app/plugins/panel/gauge/GaugePanelOptions.tsx

@@ -1,12 +1,31 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, GaugePanelOptionsDefaultProps, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
+import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import GaugeOptionsEditor from './GaugeOptionsEditor';
 
+export const defaultProps = {
+  options: {
+    baseColor: BasicGaugeColor.Green,
+    minValue: 0,
+    maxValue: 100,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+    decimals: 0,
+    stat: 'avg',
+    unit: 'none',
+    mappings: [],
+    thresholds: [],
+  },
+};
+
 export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
-  static defaultProps = GaugePanelOptionsDefaultProps;
+  static defaultProps = defaultProps;
+
+  onThresholdsChanged = (thresholds: Threshold[]) => this.props.onChange({ ...this.props.options, thresholds });
 
   render() {
     const { onChange, options } = this.props;
@@ -15,7 +34,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
         <div className="form-section">
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptionsEditor onChange={onChange} options={options} />
-          <ThresholdsEditor onChange={onChange} options={options} />
+          <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </div>
 
         <div className="form-section">

public/app/plugins/panel/gauge/ValueMappings.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
-import { GaugePanelOptionsDefaultProps } from '@grafana/ui/src/types/gauge';
+import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 
 import ValueMappings from './ValueMappings';
 
@@ -9,7 +9,7 @@ const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<GaugeOptions> = {
     onChange: jest.fn(),
     options: {
-      ...GaugePanelOptionsDefaultProps.options,
+      ...defaultProps.options,
       mappings: [
         { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
         { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
@@ -67,7 +67,7 @@ describe('Next id to add', () => {
   });
 
   it('should default to 1', () => {
-    const { instance } = setup({ options: { ...GaugePanelOptionsDefaultProps.options } });
+    const { instance } = setup({ options: { ...defaultProps.options } });
 
     expect(instance.state.nextIdToAdd).toEqual(1);
   });

public/app/plugins/panel/gauge/module.tsx

@@ -1,6 +1,4 @@
-import { GaugePanelOptionsDefaultProps } from '@grafana/ui';
-
-import GaugePanelOptions from './GaugePanelOptions';
+import GaugePanelOptions, { defaultProps } from './GaugePanelOptions';
 import { GaugePanel } from './GaugePanel';
 
-export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, GaugePanelOptionsDefaultProps as PanelDefaults };
+export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };