Explore: Fix import of queries between SQL data sources (#36210)

* Remove datasource property when importing same ds type queries

* Refactor imported queries

* Update public/app/features/explore/state/query.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

public/app/features/explore/state/datasource.ts

@@ -51,9 +51,8 @@ export function changeDatasource(
       })
     );
 
-    const queries = getState().explore[exploreId]!.queries;
-
     if (options?.importQueries) {
+      const queries = getState().explore[exploreId]!.queries;
       await dispatch(importQueries(exploreId, queries, currentDataSourceInstance, instance));
     }
 

public/app/features/explore/state/query.test.ts

@@ -6,6 +6,7 @@ import {
   cancelQueriesAction,
   queryReducer,
   removeQueryRowAction,
+  importQueries,
   runQueries,
   scanStartAction,
   scanStopAction,
@@ -22,6 +23,9 @@ import {
   PanelData,
   DataFrame,
   LoadingState,
+  DataSourceApi,
+  DataSourceJsonData,
+  DataQuery,
 } from '@grafana/data';
 import { thunkTester } from 'test/core/thunk/thunkTester';
 import { makeExplorePaneState } from './utils';
@@ -124,6 +128,39 @@ describe('running queries', () => {
   });
 });
 
+describe('importing queries', () => {
+  describe('when importing queries between the same type of data source', () => {
+    it('remove datasource property from all of the queries', async () => {
+      const store = configureStore({
+        ...(defaultInitialState as any),
+        explore: {
+          [ExploreId.left]: {
+            ...defaultInitialState.explore[ExploreId.left],
+            datasourceInstance: { name: 'testDs', type: 'postgres' },
+          },
+        },
+      });
+
+      await store.dispatch(
+        importQueries(
+          ExploreId.left,
+          [
+            { datasource: 'postgres1', refId: 'refId_A' },
+            { datasource: 'postgres1', refId: 'refId_B' },
+          ],
+          { name: 'Postgres1', type: 'postgres' } as DataSourceApi<DataQuery, DataSourceJsonData, {}>,
+          { name: 'Postgres2', type: 'postgres' } as DataSourceApi<DataQuery, DataSourceJsonData, {}>
+        )
+      );
+
+      expect(store.getState().explore[ExploreId.left].queries[0]).toHaveProperty('refId', 'refId_A');
+      expect(store.getState().explore[ExploreId.left].queries[1]).toHaveProperty('refId', 'refId_B');
+      expect(store.getState().explore[ExploreId.left].queries[0]).not.toHaveProperty('datasource');
+      expect(store.getState().explore[ExploreId.left].queries[1]).not.toHaveProperty('datasource');
+    });
+  });
+});
+
 describe('reducer', () => {
   describe('scanning', () => {
     it('should start scanning', () => {

public/app/features/explore/state/query.ts

@@ -264,8 +264,8 @@ export const importQueries = (
     let importedQueries = queries;
     // Check if queries can be imported from previously selected datasource
     if (sourceDataSource.meta?.id === targetDataSource.meta?.id) {
-      // Keep same queries if same type of datasource
+      // Keep same queries if same type of datasource, but delete datasource query property to prevent mismatch of new and old data source instance
-      importedQueries = [...queries];
+      importedQueries = queries.map(({ datasource, ...query }) => query);
     } else if (targetDataSource.importQueries) {
       // Datasource-specific importers
       importedQueries = await targetDataSource.importQueries(queries, sourceDataSource);
@@ -340,7 +340,7 @@ export const runQueries = (exploreId: ExploreId, options?: { replaceUrl?: boolea
           dispatch(queryStreamUpdatedAction({ exploreId, response: data }));
         });
 
-      // If we don't have resuls saved in cache, run new queries
+      // If we don't have results saved in cache, run new queries
     } else {
       if (!hasNonEmptyQuery(queries)) {
         dispatch(clearQueriesAction({ exploreId }));