QueryEditorRows: Remove double callback from onDataSourceChange (#62172)

* QueryEditorRows: Remove double callbacked from onDataSourceChange

* A few more updates

* Updated

public/app/features/explore/QueryRows.tsx

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import React, { useCallback, useMemo } from 'react';
 
-import { CoreApp, DataSourceInstanceSettings } from '@grafana/data';
+import { CoreApp } from '@grafana/data';
 import { getDataSourceSrv, reportInteraction } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
 import { getNextRefIdChar } from 'app/core/utils/query';
@@ -50,9 +50,19 @@ export const QueryRows = ({ exploreId }: Props) => {
   }, [dispatch, exploreId]);
 
   const onChange = useCallback(
-    (newQueries: DataQuery[]) => {
+    async (newQueries: DataQuery[]) => {
       dispatch(changeQueriesAction({ queries: newQueries, exploreId }));
 
+      for (const newQuery of newQueries) {
+        for (const oldQuery of queries) {
+          if (newQuery.refId === oldQuery.refId && newQuery.datasource?.type !== oldQuery.datasource?.type) {
+            const queryDatasource = await getDataSourceSrv().get(newQuery.datasource);
+            const targetDS = await getDataSourceSrv().get({ uid: newQuery.datasource?.uid });
+            dispatch(importQueries(exploreId, queries, queryDatasource, targetDS, newQuery.refId));
+          }
+        }
+      }
+
       // if we are removing a query we want to run the remaining ones
       if (newQueries.length < queries.length) {
         onRunQueries();
@@ -68,12 +78,6 @@ export const QueryRows = ({ exploreId }: Props) => {
     [onChange, queries]
   );
 
-  const onMixedDataSourceChange = async (ds: DataSourceInstanceSettings, query: DataQuery) => {
-    const queryDatasource = await getDataSourceSrv().get(query.datasource);
-    const targetDS = await getDataSourceSrv().get({ uid: ds.uid });
-    dispatch(importQueries(exploreId, queries, queryDatasource, targetDS, query.refId));
-  };
-
   const onQueryCopied = () => {
     reportInteraction('grafana_explore_query_row_copy');
   };
@@ -89,7 +93,6 @@ export const QueryRows = ({ exploreId }: Props) => {
   return (
     <QueryEditorRows
       dsSettings={dsSettings}
-      onDatasourceChange={(ds: DataSourceInstanceSettings, query: DataQuery) => onMixedDataSourceChange(ds, query)}
       queries={queries}
       onQueriesChange={onChange}
       onAddQuery={onAddQuery}

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

@@ -34,7 +34,6 @@ interface Props {
   onQueryCopied?: () => void;
   onQueryRemoved?: () => void;
   onQueryToggled?: (queryStatus?: boolean | undefined) => void;
-  onDatasourceChange?: (dataSource: DataSourceInstanceSettings, query: DataQuery) => void;
 }
 
 export class QueryEditorRows extends PureComponent<Props> {
@@ -59,10 +58,6 @@ export class QueryEditorRows extends PureComponent<Props> {
   onDataSourceChange(dataSource: DataSourceInstanceSettings, index: number) {
     const { queries, onQueriesChange } = this.props;
 
-    if (this.props.onDatasourceChange) {
-      this.props.onDatasourceChange(dataSource, queries[index]);
-    }
-
     onQueriesChange(
       queries.map((item, itemIndex) => {
         if (itemIndex !== index) {