[v9.4.x] CloudMonitor: Fix query migration (#63519)

CloudMonitor: Fix query migration (#63491)

* Update query and set required fields for explore queries

* Update test case

- Validate onChange is called with the new query

(cherry picked from commit 20591cc42b)

Co-authored-by: Andreas Christou <andreas.christou@grafana.com>

public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx

@@ -27,10 +27,13 @@ const defaultProps = {
 describe('QueryEditor', () => {
   it('should migrate the given query', async () => {
     const datasource = createMockDatasource();
+    const onChange = jest.fn();
     datasource.migrateQuery = jest.fn().mockReturnValue(defaultProps.query);
 
-    render(<QueryEditor {...defaultProps} datasource={datasource} />);
+    render(<QueryEditor {...defaultProps} datasource={datasource} onChange={onChange} />);
     await waitFor(() => expect(datasource.migrateQuery).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith(defaultProps.query));
   });
 
   it('should set a known query type', async () => {

public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx

@@ -20,10 +20,13 @@ export const QueryEditor = (props: Props) => {
   const query = useMemo(() => {
     if (!migrated) {
       setMigrated(true);
-      return datasource.migrateQuery(oldQ);
+      const migratedQuery = datasource.migrateQuery(oldQ);
+      // Update the query once the migrations have been completed.
+      onChange({ ...migratedQuery });
+      return migratedQuery;
     }
     return oldQ;
-  }, [oldQ, datasource, migrated]);
+  }, [oldQ, datasource, onChange, migrated]);
 
   const sloQuery = { ...defaultSLOQuery(datasource), ...query.sloQuery };
   const onSLOQueryChange = (q: SLOQuery) => {

public/app/plugins/datasource/cloud-monitoring/datasource.ts

@@ -223,14 +223,16 @@ export default class CloudMonitoringDatasource extends DataSourceWithBackend<
   // This is a manual port of the migration code in cloudmonitoring.go
   // DO NOT UPDATE THIS CODE WITHOUT UPDATING THE BACKEND CODE
   migrateQuery(query: CloudMonitoringQuery): CloudMonitoringQuery {
+    const { hide, refId, datasource, key, queryType, maxLines, metric, intervalMs, type, ...rest } = query as any;
     if (
       !query.hasOwnProperty('metricQuery') &&
       !query.hasOwnProperty('sloQuery') &&
       !query.hasOwnProperty('timeSeriesQuery') &&
       !query.hasOwnProperty('timeSeriesList')
     ) {
-      const { hide, refId, datasource, key, queryType, maxLines, metric, intervalMs, type, ...rest } = query as any;
       return {
+        datasource,
+        key,
         refId,
         intervalMs,
         hide,