use updateOptions rather than onChange

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

@@ -22,7 +22,7 @@ export interface PanelData {
 
 
 export interface PanelEditorProps<T = any> {
 export interface PanelEditorProps<T = any> {
   options: T;
   options: T;
-  onChange: (options: T) => void;
+  updateOptions: (options: T) => void;
 }
 }
 
 
 export class ReactPanelPlugin<TOptions = any> {
 export class ReactPanelPlugin<TOptions = any> {

public/app/features/dashboard/panel_editor/VisualizationTab.tsx

@@ -66,7 +66,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       const PanelEditor = plugin.exports.reactPanel.editor;
       const PanelEditor = plugin.exports.reactPanel.editor;
 
 
       if (PanelEditor) {
       if (PanelEditor) {
-        return <PanelEditor options={this.getReactPanelOptions()} onChange={this.onPanelOptionsChanged} />;
+        return <PanelEditor options={this.getReactPanelOptions()} updateOptions={this.onPanelOptionsChanged} />;
       }
       }
     }
     }
 
 

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

@@ -10,14 +10,14 @@ import { GaugeOptions } from './types';
 
 
 export class GaugeOptionsBox extends PureComponent<PanelEditorProps<GaugeOptions>> {
 export class GaugeOptionsBox extends PureComponent<PanelEditorProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
   onToggleThresholdLabels = () =>
-    this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
+    this.props.updateOptions({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
 
   onToggleThresholdMarkers = () =>
   onToggleThresholdMarkers = () =>
-    this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
+    this.props.updateOptions({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
 
 
-  onMinValueChange = ({ target }) => this.props.onChange({ ...this.props.options, minValue: target.value });
+  onMinValueChange = ({ target }) => this.props.updateOptions({ ...this.props.options, minValue: target.value });
 
 
-  onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
+  onMaxValueChange = ({ target }) => this.props.updateOptions({ ...this.props.options, maxValue: target.value });
 
 
   render() {
   render() {
     const { options } = this.props;
     const { options } = this.props;

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

@@ -14,31 +14,31 @@ import { GaugeOptions, SingleStatValueOptions } from './types';
 
 
 export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
 export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
   onThresholdsChanged = (thresholds: Threshold[]) =>
   onThresholdsChanged = (thresholds: Threshold[]) =>
-    this.props.onChange({
+    this.props.updateOptions({
       ...this.props.options,
       ...this.props.options,
       thresholds,
       thresholds,
     });
     });
 
 
   onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
   onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
-    this.props.onChange({
+    this.props.updateOptions({
       ...this.props.options,
       ...this.props.options,
       valueMappings,
       valueMappings,
     });
     });
 
 
   onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
   onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
-    this.props.onChange({
+    this.props.updateOptions({
       ...this.props.options,
       ...this.props.options,
       valueOptions,
       valueOptions,
     });
     });
 
 
   render() {
   render() {
-    const { onChange, options } = this.props;
+    const { updateOptions, options } = this.props;
 
 
     return (
     return (
       <>
       <>
         <PanelOptionsGrid>
         <PanelOptionsGrid>
           <SingleStatValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
           <SingleStatValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
-          <GaugeOptionsBox onChange={onChange} options={options} />
+          <GaugeOptionsBox updateOptions={updateOptions} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </PanelOptionsGrid>
         </PanelOptionsGrid>
 
 

public/app/plugins/panel/graph2/GraphPanelEditor.tsx

@@ -8,15 +8,15 @@ import { Options } from './types';
 
 
 export class GraphPanelEditor extends PureComponent<PanelEditorProps<Options>> {
 export class GraphPanelEditor extends PureComponent<PanelEditorProps<Options>> {
   onToggleLines = () => {
   onToggleLines = () => {
-    this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
+    this.props.updateOptions({ ...this.props.options, showLines: !this.props.options.showLines });
   };
   };
 
 
   onToggleBars = () => {
   onToggleBars = () => {
-    this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
+    this.props.updateOptions({ ...this.props.options, showBars: !this.props.options.showBars });
   };
   };
 
 
   onTogglePoints = () => {
   onTogglePoints = () => {
-    this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
+    this.props.updateOptions({ ...this.props.options, showPoints: !this.props.options.showPoints });
   };
   };
 
 
   render() {
   render() {