updating state and save

public/app/features/datasources/settings/DataSourceSettings.tsx

@@ -7,11 +7,11 @@ import PageLoader from '../../../core/components/PageLoader/PageLoader';
 import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
+import appEvents from '../../../core/app_events';
 import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
 import { getNavModel } from '../../../core/selectors/navModel';
 import { getRouteParamsId } from '../../../core/selectors/location';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
-import appEvents from '../../../core/app_events';
 
 export interface Props {
   navModel: NavModel;
@@ -24,8 +24,7 @@ export interface Props {
   updateDataSource: typeof updateDataSource;
 }
 interface State {
-  name: string;
-  showNamePopover: boolean;
+  dataSource: DataSource;
 }
 
 enum DataSourceStates {
@@ -34,6 +33,10 @@ enum DataSourceStates {
 }
 
 export class DataSourceSettings extends PureComponent<Props, State> {
+  state = {
+    dataSource: {} as DataSource,
+  };
+
   async componentDidMount() {
     const { loadDataSource, pageId } = this.props;
 
@@ -43,7 +46,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   onSubmit = event => {
     event.preventDefault();
 
-    this.props.updateDataSource();
+    this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name });
   };
 
   onDelete = () => {
@@ -62,6 +65,12 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     this.props.deleteDataSource();
   };
 
+  onModelChange = dataSource => {
+    this.setState({
+      dataSource: dataSource,
+    });
+  };
+
   isReadOnly() {
     return this.props.dataSource.readOnly === true;
   }
@@ -120,10 +129,14 @@ export class DataSourceSettings extends PureComponent<Props, State> {
 
                 {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
 
-                {this.isReadOnly()
-                  ? this.renderIsReadOnlyMessage()
-                  : dataSourceMeta.module && <PluginSettings dataSource={dataSource} dataSourceMeta={dataSourceMeta} />}
-
+                {this.isReadOnly() && this.renderIsReadOnlyMessage()}
+                {dataSourceMeta.module && (
+                  <PluginSettings
+                    dataSource={dataSource}
+                    dataSourceMeta={dataSourceMeta}
+                    onModelChange={this.onModelChange}
+                  />
+                )}
                 <ButtonRow
                   onSubmit={event => this.onSubmit(event)}
                   isReadOnly={this.isReadOnly()}

public/app/features/datasources/settings/PluginSettings.tsx

@@ -1,35 +1,46 @@
-import _ from 'lodash';
 import React, { PureComponent } from 'react';
+import _ from 'lodash';
 import { DataSource, Plugin } from 'app/types/';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 
 interface Props {
   dataSource: DataSource;
   dataSourceMeta: Plugin;
+  onModelChange: (dataSource: DataSource) => void;
 }
 
 export class PluginSettings extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
+  scopeProps: {
+    ctrl: { datasourceMeta: Plugin; current: DataSource };
+    onModelChanged: (dataSource: DataSource) => void;
+  };
 
-  componentDidMount() {
-    const { dataSource, dataSourceMeta } = this.props;
+  constructor(props) {
+    super(props);
+
+    this.scopeProps = {
+      ctrl: { datasourceMeta: props.dataSourceMeta, current: _.cloneDeep(props.dataSource) },
+      onModelChanged: this.onModelChanged,
+    };
+  }
 
+  componentDidMount() {
     if (!this.element) {
       return;
     }
 
     const loader = getAngularLoader();
     const template = '<plugin-component type="datasource-config-ctrl" />';
-    const scopeProps = {
-      ctrl: {
-        datasourceMeta: dataSourceMeta,
-        current: _.cloneDeep(dataSource),
-      },
-      onModelChanged: this.onModelChanged,
-    };
 
-    this.component = loader.load(this.element, scopeProps, template);
+    this.component = loader.load(this.element, this.scopeProps, template);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.dataSource !== prevProps.dataSource) {
+      this.scopeProps.ctrl.current = _.cloneDeep(this.props.dataSource);
+    }
   }
 
   componentWillUnmount() {
@@ -38,9 +49,9 @@ export class PluginSettings extends PureComponent<Props> {
     }
   }
 
-  onModelChanged(dataSource: DataSource) {
-    console.log(dataSource);
-  }
+  onModelChanged = (dataSource: DataSource) => {
+    this.props.onModelChange(dataSource);
+  };
 
   render() {
     return <div ref={element => (this.element = element)} />;

public/app/features/datasources/state/actions.ts

@@ -157,10 +157,8 @@ export function loadDataSourceTypes(): ThunkResult<void> {
   };
 }
 
-export function updateDataSource(): ThunkResult<void> {
-  return async (dispatch, getStore) => {
-    const dataSource = getStore().dataSources.dataSource;
-
+export function updateDataSource(dataSource: DataSource): ThunkResult<void> {
+  return async dispatch => {
     await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource);
     dispatch(loadDataSource(dataSource.id));
   };