Add on datasource change to optional components -- alt -- (#40239)

* Add onDataSourceChange to optional components

- Fixes a bug where the user can select  twice and overwrite all queries
- Adds handler to control main datasoruce selection to the optional components.

* only pass onDatasource change when necessary

public/app/core/utils/query.ts

@@ -1,4 +1,4 @@
-import { DataQuery } from '@grafana/data';
+import { DataQuery, DataSourceInstanceSettings } from '@grafana/data';
 
 export const getNextRefIdChar = (queries: DataQuery[]): string => {
   for (let num = 0; ; num++) {
@@ -9,13 +9,39 @@ export const getNextRefIdChar = (queries: DataQuery[]): string => {
   }
 };
 
-export function addQuery(queries: DataQuery[], query?: Partial<DataQuery>): DataQuery[] {
+export function addQuery(queries: DataQuery[], query?: Partial<DataQuery>, datasource?: string): DataQuery[] {
   const q = query || {};
   q.refId = getNextRefIdChar(queries);
   q.hide = false;
+
+  if (!q.datasource && datasource) {
+    q.datasource = datasource;
+  }
+
   return [...queries, q as DataQuery];
 }
 
+export function updateQueries(
+  newSettings: DataSourceInstanceSettings,
+  queries: DataQuery[],
+  extensionID: string, // pass this in because importing it creates a circular dependency
+  dsSettings?: DataSourceInstanceSettings
+): DataQuery[] {
+  if (!newSettings.meta.mixed && dsSettings?.meta.mixed) {
+    return queries.map((q) => {
+      if (q.datasource !== extensionID) {
+        q.datasource = newSettings.name;
+      }
+      return q;
+    });
+  } else if (!newSettings.meta.mixed && dsSettings?.meta.id !== newSettings.meta.id) {
+    // we are changing data source type, clear queries
+    return [{ refId: 'A', datasource: newSettings.name }];
+  }
+
+  return queries;
+}
+
 export function isDataQuery(url: string): boolean {
   if (
     url.indexOf('api/datasources/proxy') !== -1 ||