More datasource funcs poc (#21047)

* remove anon funcs, removed options from state, removed update method, static selects as constants

* cancellable promise

* cancel promise on unmount

* use new datasource funcs for dryer component

* event handler funcs

* updated funcs and moved to utils, updating config editors

* S has no keys. never will never work

* remove report json

* update azure snapshot

* DataSourceSettings keyof

* rename reset funcs

packages/grafana-data/src/types/datasource.ts

@@ -279,64 +279,6 @@ export abstract class DataSourceApi<
   interpolateVariablesInQueries?(queries: TQuery[]): TQuery[];
 }
 
-export function updateDatasourcePluginOption(props: DataSourcePluginOptionsEditorProps, key: string, val: any) {
-  let config = props.options;
-
-  config = {
-    ...config,
-    [key]: val,
-  };
-
-  props.onOptionsChange(config);
-}
-
-export function updateDatasourcePluginJsonDataOption(
-  props: DataSourcePluginOptionsEditorProps,
-  key: string,
-  val: any,
-  secure: boolean
-) {
-  let config = props.options;
-
-  if (secure) {
-    config = {
-      ...config,
-      secureJsonData: {
-        ...config.secureJsonData,
-        [key]: val,
-      },
-    };
-  } else {
-    config = {
-      ...config,
-      jsonData: {
-        ...config.jsonData,
-        [key]: val,
-      },
-    };
-  }
-
-  props.onOptionsChange(config);
-}
-
-export function updateDatasourcePluginResetKeyOption(props: DataSourcePluginOptionsEditorProps, key: string) {
-  let config = props.options;
-
-  config = {
-    ...config,
-    secureJsonData: {
-      ...config.secureJsonData,
-      [key]: '',
-    },
-    secureJsonFields: {
-      ...config.secureJsonFields,
-      [key]: false,
-    },
-  };
-
-  props.onOptionsChange(config);
-}
-
 export interface MetadataInspectorProps<
   DSType extends DataSourceApi<TQuery, TOptions>,
   TQuery extends DataQuery = DataQuery,

packages/grafana-data/src/utils/datasource.ts

@@ -0,0 +1,102 @@
+import { DataSourcePluginOptionsEditorProps, SelectableValue, KeyValue, DataSourceSettings } from '../types';
+
+export const onUpdateDatasourceOption = (props: DataSourcePluginOptionsEditorProps, key: keyof DataSourceSettings) => (
+  event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>
+) => {
+  updateDatasourcePluginOption(props, key, event.currentTarget.value);
+};
+
+export const onUpdateDatasourceJsonDataOption = <J, S, K extends keyof J>(
+  props: DataSourcePluginOptionsEditorProps<J, S>,
+  key: K
+) => (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
+  updateDatasourcePluginJsonDataOption(props, key, event.currentTarget.value);
+};
+
+export const onUpdateDatasourceSecureJsonDataOption = <J, S extends {} = KeyValue>(
+  props: DataSourcePluginOptionsEditorProps<J, S>,
+  key: string
+) => (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
+  updateDatasourcePluginSecureJsonDataOption(props, key, event.currentTarget.value);
+};
+
+export const onUpdateDatasourceJsonDataOptionSelect = <J, S, K extends keyof J>(
+  props: DataSourcePluginOptionsEditorProps<J, S>,
+  key: K
+) => (selected: SelectableValue) => {
+  updateDatasourcePluginJsonDataOption(props, key, selected.value);
+};
+
+export const onUpdateDatasourceSecureJsonDataOptionSelect = <J, S extends {} = KeyValue>(
+  props: DataSourcePluginOptionsEditorProps<J, S>,
+  key: string
+) => (selected: SelectableValue) => {
+  updateDatasourcePluginSecureJsonDataOption(props, key, selected.value);
+};
+
+export const onUpdateDatasourceResetOption = (props: DataSourcePluginOptionsEditorProps, key: string) => (
+  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+) => {
+  updateDatasourcePluginResetOption(props, key);
+};
+
+export function updateDatasourcePluginOption(
+  props: DataSourcePluginOptionsEditorProps,
+  key: keyof DataSourceSettings,
+  val: any
+) {
+  const config = props.options;
+
+  props.onOptionsChange({
+    ...config,
+    [key]: val,
+  });
+}
+
+export const updateDatasourcePluginJsonDataOption = <J, S, K extends keyof J>(
+  props: DataSourcePluginOptionsEditorProps<J, S>,
+  key: K,
+  val: any
+) => {
+  const config = props.options;
+
+  props.onOptionsChange({
+    ...config,
+    jsonData: {
+      ...config.jsonData,
+      [key]: val,
+    },
+  });
+};
+
+export const updateDatasourcePluginSecureJsonDataOption = <J, S extends {} = KeyValue>(
+  props: DataSourcePluginOptionsEditorProps<J, S>,
+  key: string,
+  val: any
+) => {
+  const config = props.options;
+
+  props.onOptionsChange({
+    ...config,
+    secureJsonData: {
+      ...config.secureJsonData!,
+      [key]: val,
+    },
+  });
+};
+
+export function updateDatasourcePluginResetOption(props: DataSourcePluginOptionsEditorProps, key: string) {
+  const config = props.options;
+
+  props.onOptionsChange({
+    ...config,
+    secureJsonData: {
+      ...config.secureJsonData,
+      [key]: '',
+    },
+    secureJsonFields: {
+      ...config.secureJsonFields,
+      [key]: false,
+    },
+  });
+}

packages/grafana-data/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './Registry';
+export * from './datasource';
 export * from './deprecationWarning';
 export * from './csv';
 export * from './logs';

public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx

@@ -1,10 +1,12 @@
-import React, { PureComponent, ChangeEvent } from 'react';
+import React, { PureComponent } from 'react';
 import { FormLabel, Select, Input, Button } from '@grafana/ui';
 import {
   DataSourcePluginOptionsEditorProps,
-  updateDatasourcePluginJsonDataOption,
+  onUpdateDatasourceJsonDataOptionSelect,
-  updateDatasourcePluginResetKeyOption,
+  onUpdateDatasourceOption,
-  updateDatasourcePluginOption,
+  onUpdateDatasourceResetOption,
+  onUpdateDatasourceJsonDataOption,
+  onUpdateDatasourceSecureJsonDataOption,
 } from '@grafana/data';
 import { SelectableValue } from '@grafana/data';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -50,14 +52,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
     }
   }
 
-  onUpdateOption = (key: string, val: any, secure: boolean) => {
-    updateDatasourcePluginJsonDataOption(this.props, key, val, secure);
-  };
-
-  onResetKey = (key: string) => {
-    updateDatasourcePluginResetKeyOption(this.props, key);
-  };
-
   async loadRegions() {
     await getDatasourceSrv()
       .loadDatasource(this.props.options.name)
@@ -119,42 +113,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
       );
   }
 
-  onAuthProviderChange = (authType: SelectableValue<string>) => {
-    this.onUpdateOption('authType', authType.value, false);
-  };
-
-  onRegionChange = (defaultRegion: SelectableValue<string>) => {
-    this.onUpdateOption('defaultRegion', defaultRegion.value, false);
-  };
-
-  onResetAccessKey = () => {
-    this.onResetKey('accessKey');
-  };
-
-  onAccessKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateOption('accessKey', event.target.value, true);
-  };
-
-  onResetSecretKey = () => {
-    this.onResetKey('secretKey');
-  };
-
-  onSecretKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateOption('secretKey', event.target.value, true);
-  };
-
-  onCredentialProfileNameChange = (event: ChangeEvent<HTMLInputElement>) => {
-    updateDatasourcePluginOption(this.props, 'database', event.target.value);
-  };
-
-  onArnAssumeRoleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateOption('assumeRoleArn', event.target.value, false);
-  };
-
-  onCustomMetricsNamespacesChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateOption('customMetricsNamespaces', event.target.value, false);
-  };
-
   render() {
     const { regions } = this.state;
     const { options } = this.props;
@@ -172,7 +130,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                 value={authProviderOptions.find(authProvider => authProvider.value === options.jsonData.authType)}
                 options={authProviderOptions}
                 defaultValue={options.jsonData.authType}
-                onChange={this.onAuthProviderChange}
+                onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'authType')}
               />
             </div>
           </div>
@@ -190,7 +148,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                     className="width-30"
                     placeholder="default"
                     value={options.jsonData.database}
-                    onChange={this.onCredentialProfileNameChange}
+                    onChange={onUpdateDatasourceOption(this.props, 'database')}
                   />
                 </div>
               </div>
@@ -206,7 +164,11 @@ export class ConfigEditor extends PureComponent<Props, State> {
                   </div>
                   <div className="gf-form">
                     <div className="max-width-30 gf-form-inline">
-                      <Button variant="secondary" type="button" onClick={this.onResetAccessKey}>
+                      <Button
+                        variant="secondary"
+                        type="button"
+                        onClick={onUpdateDatasourceResetOption(this.props, 'accessKey')}
+                      >
                         Reset
                       </Button>
                     </div>
@@ -220,7 +182,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                       <Input
                         className="width-30"
                         value={secureJsonData.accessKey || ''}
-                        onChange={this.onAccessKeyChange}
+                        onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'accessKey')}
                       />
                     </div>
                   </div>
@@ -234,7 +196,11 @@ export class ConfigEditor extends PureComponent<Props, State> {
                   </div>
                   <div className="gf-form">
                     <div className="max-width-30 gf-form-inline">
-                      <Button variant="secondary" type="button" onClick={this.onResetSecretKey}>
+                      <Button
+                        variant="secondary"
+                        type="button"
+                        onClick={onUpdateDatasourceResetOption(this.props, 'secretKey')}
+                      >
                         Reset
                       </Button>
                     </div>
@@ -248,7 +214,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                       <Input
                         className="width-30"
                         value={secureJsonData.secretKey || ''}
-                        onChange={this.onSecretKeyChange}
+                        onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'secretKey')}
                       />
                     </div>
                   </div>
@@ -267,7 +233,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                     className="width-30"
                     placeholder="arn:aws:iam:*"
                     value={options.jsonData.assumeRoleArn || ''}
-                    onChange={this.onArnAssumeRoleChange}
+                    onChange={onUpdateDatasourceJsonDataOption(this.props, 'assumeRoleArn')}
                   />
                 </div>
               </div>
@@ -286,7 +252,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                 value={regions.find(region => region.value === options.jsonData.defaultRegion)}
                 options={regions}
                 defaultValue={options.jsonData.defaultRegion}
-                onChange={this.onRegionChange}
+                onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'defaultRegion')}
               />
             </div>
           </div>
@@ -299,7 +265,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                 className="width-30"
                 placeholder="Namespace1,Namespace2"
                 value={options.jsonData.customMetricsNamespaces || ''}
-                onChange={this.onCustomMetricsNamespacesChange}
+                onChange={onUpdateDatasourceJsonDataOption(this.props, 'customMetricsNamespaces')}
               />
             </div>
           </div>

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx

@@ -41,6 +41,7 @@ const setup = (propOverrides?: object) => {
     makeSameAs: jest.fn(),
     onUpdateOptions: jest.fn(),
     onUpdateOption: jest.fn(),
+    onUpdateSecureOption: jest.fn(),
     onResetOptionKey: jest.fn(),
     onLoadSubscriptions: jest.fn(),
     onLoadWorkspaces: jest.fn(),

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx

@@ -10,30 +10,31 @@ export interface Props {
   workspaces: SelectableValue[];
   makeSameAs: () => void;
   onUpdateOptions: (options: AzureDataSourceSettings) => void;
-  onUpdateOption: (key: string, val: any, secure: boolean) => void;
+  onUpdateOption: (key: string, val: any) => void;
+  onUpdateSecureOption: (key: string, val: any) => void;
   onResetOptionKey: (key: string) => void;
   onLoadSubscriptions: (type?: string) => void;
   onLoadWorkspaces: (type?: string) => void;
 }
 export class AnalyticsConfig extends PureComponent<Props> {
   onLogAnalyticsTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.onUpdateOption('logAnalyticsTenantId', event.target.value, false);
+    this.props.onUpdateOption('logAnalyticsTenantId', event.target.value);
   };
 
   onLogAnalyticsClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.onUpdateOption('logAnalyticsClientId', event.target.value, false);
+    this.props.onUpdateOption('logAnalyticsClientId', event.target.value);
   };
 
   onLogAnalyticsClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.onUpdateOption('logAnalyticsClientSecret', event.target.value, true);
+    this.props.onUpdateSecureOption('logAnalyticsClientSecret', event.target.value);
   };
 
   onLogAnalyticsSubscriptionSelect = (logAnalyticsSubscription: SelectableValue<string>) => {
-    this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value, false);
+    this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value);
   };
 
   onWorkspaceSelectChange = (logAnalyticsDefaultWorkspace: SelectableValue<string>) => {
-    this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value, false);
+    this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value);
   };
 
   onAzureLogAnalyticsSameAsChange = () => {
@@ -58,7 +59,7 @@ export class AnalyticsConfig extends PureComponent<Props> {
         },
       });
     } else {
-      this.props.onUpdateOption('azureLogAnalyticsSameAs', !options.jsonData.azureLogAnalyticsSameAs, false);
+      this.props.onUpdateOption('azureLogAnalyticsSameAs', !options.jsonData.azureLogAnalyticsSameAs);
     }
 
     // init popover to warn secret needs to be re-entered

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx

@@ -3,8 +3,9 @@ import {
   SelectableValue,
   DataSourcePluginOptionsEditorProps,
   updateDatasourcePluginOption,
-  updateDatasourcePluginResetKeyOption,
+  updateDatasourcePluginResetOption,
   updateDatasourcePluginJsonDataOption,
+  updateDatasourcePluginSecureJsonDataOption,
 } from '@grafana/data';
 import { MonitorConfig } from './MonitorConfig';
 import { AnalyticsConfig } from './AnalyticsConfig';
@@ -69,12 +70,16 @@ export class ConfigEditor extends PureComponent<Props, State> {
     }
   };
 
-  updateOption = (key: string, val: any, secure: boolean) => {
+  updateOption = (key: keyof AzureDataSourceJsonData, val: any) => {
-    updateDatasourcePluginJsonDataOption(this.props, key, val, secure);
+    updateDatasourcePluginJsonDataOption(this.props, key, val);
+  };
+
+  updateSecureOption = (key: keyof AzureDataSourceSecureJsonData, val: any) => {
+    updateDatasourcePluginSecureJsonDataOption(this.props, key, val);
   };
 
   resetKey = (key: string) => {
-    updateDatasourcePluginResetKeyOption(this.props, key);
+    updateDatasourcePluginResetOption(this.props, key);
   };
 
   makeSameAs = (updatedClientSecret?: string) => {
@@ -211,7 +216,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
     if (subscriptions && subscriptions.length > 0) {
       this.setState({ subscriptions });
 
-      this.updateOption('subscriptionId', this.props.options.jsonData.subscriptionId || subscriptions[0].value, false);
+      this.updateOption('subscriptionId', this.props.options.jsonData.subscriptionId || subscriptions[0].value);
     }
 
     if (this.props.options.jsonData.subscriptionId && this.props.options.jsonData.azureLogAnalyticsSameAs) {
@@ -232,8 +237,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
       this.updateOption(
         'logAnalyticsSubscriptionId',
-        this.props.options.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value,
+        this.props.options.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value
-        false
       );
     }
 
@@ -257,8 +261,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
       this.updateOption(
         'logAnalyticsDefaultWorkspace',
-        this.props.options.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value,
+        this.props.options.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value
-        false
       );
     }
   };
@@ -278,6 +281,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
           makeSameAs={this.makeSameAs}
           onLoadSubscriptions={this.onLoadSubscriptions}
           onUpdateOption={this.updateOption}
+          onUpdateSecureOption={this.updateSecureOption}
           onResetOptionKey={this.resetKey}
         />
 
@@ -288,6 +292,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
           makeSameAs={this.makeSameAs}
           onUpdateOptions={this.updateOptions}
           onUpdateOption={this.updateOption}
+          onUpdateSecureOption={this.updateSecureOption}
           onResetOptionKey={this.resetKey}
           onLoadSubscriptions={this.onLoadSubscriptions}
           onLoadWorkspaces={this.getWorkspaces}

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MonitorConfig.tsx

@@ -14,22 +14,23 @@ export interface Props {
   options: AzureDataSourceSettings;
   subscriptions: SelectableValue[];
   makeSameAs: (updatedClientSecret?: string) => void;
-  onUpdateOption: (key: string, val: any, secure: boolean) => void;
+  onUpdateOption: (key: string, val: any) => void;
+  onUpdateSecureOption: (key: string, val: any) => void;
   onResetOptionKey: (key: string) => void;
   onLoadSubscriptions: () => void;
 }
 
 export class MonitorConfig extends PureComponent<Props> {
   onAzureCloudSelect = (cloudName: SelectableValue<string>) => {
-    this.props.onUpdateOption('cloudName', cloudName.value, false);
+    this.props.onUpdateOption('cloudName', cloudName.value);
   };
 
   onTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.onUpdateOption('tenantId', event.target.value, false);
+    this.props.onUpdateOption('tenantId', event.target.value);
   };
 
   onClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.onUpdateOption('clientId', event.target.value, false);
+    this.props.onUpdateOption('clientId', event.target.value);
   };
 
   onClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -38,7 +39,7 @@ export class MonitorConfig extends PureComponent<Props> {
     if (options.jsonData.azureLogAnalyticsSameAs && event.target.value) {
       makeSameAs(event.target.value);
     } else {
-      this.props.onUpdateOption('clientSecret', event.target.value, true);
+      this.props.onUpdateSecureOption('clientSecret', event.target.value);
     }
   };
 
@@ -47,7 +48,7 @@ export class MonitorConfig extends PureComponent<Props> {
   };
 
   onSubscriptionSelect = (subscription: SelectableValue<string>) => {
-    this.props.onUpdateOption('subscriptionId', subscription.value, false);
+    this.props.onUpdateOption('subscriptionId', subscription.value);
   };
 
   render() {

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/ConfigEditor.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`Render should render component 1`] = `
     onLoadSubscriptions={[Function]}
     onResetOptionKey={[Function]}
     onUpdateOption={[Function]}
+    onUpdateSecureOption={[Function]}
     options={
       Object {
         "access": "proxy",
@@ -44,6 +45,7 @@ exports[`Render should render component 1`] = `
     onResetOptionKey={[Function]}
     onUpdateOption={[Function]}
     onUpdateOptions={[Function]}
+    onUpdateSecureOption={[Function]}
     options={
       Object {
         "access": "proxy",

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -1,10 +1,12 @@
-import React, { PureComponent, ChangeEvent } from 'react';
+import React, { PureComponent } from 'react';
 import {
   DataSourcePluginOptionsEditorProps,
   SelectableValue,
-  updateDatasourcePluginJsonDataOption,
+  onUpdateDatasourceOption,
-  updateDatasourcePluginResetKeyOption,
+  updateDatasourcePluginResetOption,
-  updateDatasourcePluginOption,
+  onUpdateDatasourceJsonDataOption,
+  onUpdateDatasourceJsonDataOptionSelect,
+  onUpdateDatasourceSecureJsonDataOption,
 } from '@grafana/data';
 import { DataSourceHttpSettings, FormLabel, Input, SecretFormField, Select } from '@grafana/ui';
 import { InfluxOptions, InfluxSecureJsonData } from '../types';
@@ -17,40 +19,8 @@ const httpModes = [
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions>;
 
 export class ConfigEditor extends PureComponent<Props> {
-  onUpdateOption = (key: string, val: any) => {
-    updateDatasourcePluginOption(this.props, key, val);
-  };
-
-  onUpdateJsonDataOption = (key: string, val: any, secure: boolean) => {
-    updateDatasourcePluginJsonDataOption(this.props, key, val, secure);
-  };
-
-  onResetKey = (key: string) => {
-    updateDatasourcePluginResetKeyOption(this.props, key);
-  };
-
-  onDatabaseChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateOption('database', event.target.value);
-  };
-
-  onUserChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateOption('user', event.target.value);
-  };
-
-  onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateJsonDataOption('password', event.target.value, true);
-  };
-
-  onTimeIntervalChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.onUpdateJsonDataOption('timeInterval', event.target.value, false);
-  };
-
   onResetPassword = () => {
-    this.onResetKey('password');
+    updateDatasourcePluginResetOption(this.props, 'password');
-  };
-
-  onHttpModeSelect = (httpMode: SelectableValue) => {
-    this.onUpdateJsonDataOption('httpMode', httpMode.value, false);
   };
 
   render() {
@@ -72,7 +42,11 @@ export class ConfigEditor extends PureComponent<Props> {
             <div className="gf-form">
               <FormLabel className="width-10">Database</FormLabel>
               <div className="width-20">
-                <Input className="width-20" value={options.database || ''} onChange={this.onDatabaseChange} />
+                <Input
+                  className="width-20"
+                  value={options.database || ''}
+                  onChange={onUpdateDatasourceOption(this.props, 'database')}
+                />
               </div>
             </div>
           </div>
@@ -80,7 +54,11 @@ export class ConfigEditor extends PureComponent<Props> {
             <div className="gf-form">
               <FormLabel className="width-10">User</FormLabel>
               <div className="width-10">
-                <Input className="width-20" value={options.user || ''} onChange={this.onUserChange} />
+                <Input
+                  className="width-20"
+                  value={options.user || ''}
+                  onChange={onUpdateDatasourceOption(this.props, 'user')}
+                />
               </div>
             </div>
           </div>
@@ -93,7 +71,7 @@ export class ConfigEditor extends PureComponent<Props> {
                 labelWidth={10}
                 inputWidth={20}
                 onReset={this.onResetPassword}
-                onChange={this.onPasswordChange}
+                onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'password')}
               />
             </div>
           </div>
@@ -112,7 +90,7 @@ export class ConfigEditor extends PureComponent<Props> {
                 value={httpModes.find(httpMode => httpMode.value === options.jsonData.httpMode)}
                 options={httpModes}
                 defaultValue={options.jsonData.httpMode}
-                onChange={this.onHttpModeSelect}
+                onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'httpMode')}
               />
             </div>
           </div>
@@ -145,7 +123,7 @@ export class ConfigEditor extends PureComponent<Props> {
                   className="width-10"
                   placeholder="10s"
                   value={options.jsonData.timeInterval || ''}
-                  onChange={this.onTimeIntervalChange}
+                  onChange={onUpdateDatasourceJsonDataOption(this.props, 'timeInterval')}
                 />
               </div>
             </div>