Bugfix: Prevent previous query editor to set default values when changing data source (#60218)

* Fixed issue where the query editor of the previous ds sets default values on query passed to the query editor of the next ds.

* Fixed issue with changing data source for query in Alerting.

* Will apply default values from DS if available.

* Fix failing tests.

* fixed spell error.

* reverted getDefaultQuery call so it can be added in a separate PR.

public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx

@@ -59,8 +59,15 @@ export class QueryRows extends PureComponent<Props> {
         return item;
       }
 
-      return copyModel(item, settings.uid);
+      const previousSettings = this.getDataSourceSettings(item);
+
+      // Copy model if changing to a datasource of same type.
+      if (settings.type === previousSettings?.type) {
+        return copyModel(item, settings);
+      }
+      return newModel(item, settings);
     });
+
     onQueriesChange(updatedQueries);
   };
 
@@ -181,11 +188,34 @@ export class QueryRows extends PureComponent<Props> {
   }
 }
 
-function copyModel(item: AlertQuery, uid: string): Omit<AlertQuery, 'datasource'> {
+function copyModel(item: AlertQuery, settings: DataSourceInstanceSettings): Omit<AlertQuery, 'datasource'> {
   return {
     ...item,
-    model: omit(item.model, 'datasource'),
-    datasourceUid: uid,
+    model: {
+      ...omit(item.model, 'datasource'),
+      datasource: {
+        type: settings.type,
+        uid: settings.uid,
+      },
+    },
+    datasourceUid: settings.uid,
+  };
+}
+
+function newModel(item: AlertQuery, settings: DataSourceInstanceSettings): Omit<AlertQuery, 'datasource'> {
+  return {
+    refId: item.refId,
+    relativeTimeRange: item.relativeTimeRange,
+    queryType: '',
+    datasourceUid: settings.uid,
+    model: {
+      refId: item.refId,
+      hide: false,
+      datasource: {
+        type: settings.type,
+        uid: settings.uid,
+      },
+    },
   };
 }
 

public/app/features/query/components/QueryEditorRow.tsx

@@ -22,7 +22,7 @@ import {
   toLegacyResponseData,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { AngularComponent, getAngularLoader } from '@grafana/runtime';
+import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
 import { Badge, ErrorBoundaryAlert, HorizontalGroup } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
 import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
@@ -33,7 +33,6 @@ import {
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 import { RowActionComponents } from './QueryActionComponent';
 import { QueryEditorRowHeader } from './QueryEditorRowHeader';
@@ -141,7 +140,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   }
 
   async loadDatasource() {
-    const dataSourceSrv = getDatasourceSrv();
+    const dataSourceSrv = getDataSourceSrv();
     let datasource: DataSourceApi;
     const dataSourceIdentifier = this.getQueryDataSourceIdentifier();
 
@@ -239,10 +238,20 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     }
   }
 
+  waitingForDatasourceToLoad = (): boolean => {
+    // if we not yet have loaded the datasource in state the
+    // ds in props and the ds in state will have different values.
+    return this.props.dataSource.uid !== this.state.datasource?.uid;
+  };
+
   renderPluginEditor = () => {
     const { query, onChange, queries, onRunQuery, onAddQuery, app = CoreApp.PanelEditor, history } = this.props;
     const { datasource, data } = this.state;
 
+    if (this.waitingForDatasourceToLoad()) {
+      return null;
+    }
+
     if (datasource?.components?.QueryCtrl) {
       return <div ref={(element) => (this.element = element)} />;
     }