DataSourceSettings: Fixed issue changing data source name, fixes #18660 (#18826)

public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx

@@ -5,7 +5,7 @@ import { DataSourceSettings, DataSourcePlugin, DataSourceConstructor } from '@gr
 import { NavModel } from '@grafana/data';
 import { NavModel } from '@grafana/data';
 import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
-import { setDataSourceName, setIsDefault } from '../state/actions';
+import { setDataSourceName, setIsDefault, dataSourceLoaded } from '../state/actions';
 
 
 const pluginMock = new DataSourcePlugin({} as DataSourceConstructor<any>);
 const pluginMock = new DataSourcePlugin({} as DataSourceConstructor<any>);
 
 
@@ -26,6 +26,7 @@ const setup = (propOverrides?: object) => {
     setDataSourceName,
     setDataSourceName,
     updateDataSource: jest.fn(),
     updateDataSource: jest.fn(),
     setIsDefault,
     setIsDefault,
+    dataSourceLoaded,
     query: {},
     query: {},
     ...propOverrides,
     ...propOverrides,
   };
   };

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

@@ -17,7 +17,14 @@ import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 
 // Actions & selectors
 // Actions & selectors
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
-import { deleteDataSource, loadDataSource, setDataSourceName, setIsDefault, updateDataSource } from '../state/actions';
+import {
+  deleteDataSource,
+  loadDataSource,
+  setDataSourceName,
+  setIsDefault,
+  updateDataSource,
+  dataSourceLoaded,
+} from '../state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId } from 'app/core/selectors/location';
 import { getRouteParamsId } from 'app/core/selectors/location';
 
 
@@ -40,13 +47,13 @@ export interface Props {
   setDataSourceName: typeof setDataSourceName;
   setDataSourceName: typeof setDataSourceName;
   updateDataSource: typeof updateDataSource;
   updateDataSource: typeof updateDataSource;
   setIsDefault: typeof setIsDefault;
   setIsDefault: typeof setIsDefault;
+  dataSourceLoaded: typeof dataSourceLoaded;
   plugin?: GenericDataSourcePlugin;
   plugin?: GenericDataSourcePlugin;
   query: UrlQueryMap;
   query: UrlQueryMap;
   page?: string;
   page?: string;
 }
 }
 
 
 interface State {
 interface State {
-  dataSource: DataSourceSettings;
   plugin?: GenericDataSourcePlugin;
   plugin?: GenericDataSourcePlugin;
   isTesting?: boolean;
   isTesting?: boolean;
   testingMessage?: string;
   testingMessage?: string;
@@ -59,7 +66,6 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     super(props);
     super(props);
 
 
     this.state = {
     this.state = {
-      dataSource: props.dataSource,
       plugin: props.plugin,
       plugin: props.plugin,
     };
     };
   }
   }
@@ -93,18 +99,10 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     }
     }
   }
   }
 
 
-  componentDidUpdate(prevProps: Props) {
-    const { dataSource } = this.props;
-
-    if (prevProps.dataSource !== dataSource) {
-      this.setState({ dataSource });
-    }
-  }
-
   onSubmit = async (evt: React.FormEvent<HTMLFormElement>) => {
   onSubmit = async (evt: React.FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     evt.preventDefault();
 
 
-    await this.props.updateDataSource({ ...this.state.dataSource });
+    await this.props.updateDataSource({ ...this.props.dataSource });
 
 
     this.testDataSource();
     this.testDataSource();
   };
   };
@@ -132,7 +130,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
   };
   };
 
 
   onModelChange = (dataSource: DataSourceSettings) => {
   onModelChange = (dataSource: DataSourceSettings) => {
-    this.setState({ dataSource });
+    this.props.dataSourceLoaded(dataSource);
   };
   };
 
 
   isReadOnly() {
   isReadOnly() {
@@ -149,7 +147,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
   }
   }
 
 
   async testDataSource() {
   async testDataSource() {
-    const dsApi = await getDatasourceSrv().get(this.state.dataSource.name);
+    const dsApi = await getDatasourceSrv().get(this.props.dataSource.name);
 
 
     if (!dsApi.testDatasource) {
     if (!dsApi.testDatasource) {
       return;
       return;
@@ -185,7 +183,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
   }
   }
 
 
   get hasDataSource() {
   get hasDataSource() {
-    return this.state.dataSource.id > 0;
+    return this.props.dataSource.id > 0;
   }
   }
 
 
   renderLoadError(loadError: any) {
   renderLoadError(loadError: any) {
@@ -245,8 +243,8 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
   }
   }
 
 
   renderSettings() {
   renderSettings() {
-    const { dataSourceMeta, setDataSourceName, setIsDefault } = this.props;
-    const { testingMessage, testingStatus, dataSource, plugin } = this.state;
+    const { dataSourceMeta, setDataSourceName, setIsDefault, dataSource } = this.props;
+    const { testingMessage, testingStatus, plugin } = this.state;
 
 
     return (
     return (
       <form onSubmit={this.onSubmit}>
       <form onSubmit={this.onSubmit}>
@@ -270,7 +268,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
         {plugin && (
         {plugin && (
           <PluginSettings
           <PluginSettings
             plugin={plugin}
             plugin={plugin}
-            dataSource={this.state.dataSource}
+            dataSource={dataSource}
             dataSourceMeta={dataSourceMeta}
             dataSourceMeta={dataSourceMeta}
             onModelChange={this.onModelChange}
             onModelChange={this.onModelChange}
           />
           />
@@ -348,6 +346,7 @@ const mapDispatchToProps = {
   setDataSourceName,
   setDataSourceName,
   updateDataSource,
   updateDataSource,
   setIsDefault,
   setIsDefault,
+  dataSourceLoaded,
 };
 };
 
 
 export default hot(module)(
 export default hot(module)(