Datasource/CloudWatch: Handle invalidation of log groups when switching datasources (#24703)

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -56,7 +56,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     datasource: null,
     loadedDataSourceValue: undefined,
     hasTextEditMode: false,
-    data: null,
+    data: undefined,
     isOpen: true,
   };
 
@@ -163,15 +163,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     const { query, onChange } = this.props;
     const { datasource, data } = this.state;
 
-    if (datasource.components.QueryCtrl) {
+    if (datasource?.components?.QueryCtrl) {
       return <div ref={element => (this.element = element)} />;
     }
 
-    if (datasource.components.QueryEditor) {
+    if (datasource?.components?.QueryEditor) {
       const QueryEditor = datasource.components.QueryEditor;
 
       return (
         <QueryEditor
+          key={datasource?.name}
           query={query}
           datasource={datasource}
           onChange={onChange}
@@ -188,7 +189,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     e.stopPropagation();
     if (this.angularScope && this.angularScope.toggleEditorMode) {
       this.angularScope.toggleEditorMode();
-      this.angularQueryEditor.digest();
+      this.angularQueryEditor?.digest();
       if (!isOpen) {
         openRow();
       }
@@ -212,7 +213,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
   renderCollapsedText(): string | null {
     const { datasource } = this.state;
-    if (datasource.getQueryDisplayText) {
+    if (datasource?.getQueryDisplayText) {
       return datasource.getQueryDisplayText(this.props.query);
     }
 
@@ -302,7 +303,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
 // To avoid sending duplicate events for each row we have this global cached object here
 // So we can check if we already emitted this legacy data event
-let globalLastPanelDataCache: PanelData = null;
+let globalLastPanelDataCache: PanelData | null = null;
 
 function notifyAngularQueryEditorsOfData(panel: PanelModel, data: PanelData, editor: AngularComponent) {
   if (data === globalLastPanelDataCache) {

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx

@@ -56,6 +56,6 @@ describe('CloudWatchLogsQueryField', () => {
     // We clear the select
     expect(getLogGroupSelect().props.value.length).toBe(0);
     // Make sure we correctly updated the upstream state
-    expect(onChange.mock.calls[1][0]).toEqual({ region: 'region2', logGroupNames: [] });
+    expect(onChange.mock.calls[onChange.mock.calls.length - 1][0]).toEqual({ region: 'region2', logGroupNames: [] });
   });
 });

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { ReactNode } from 'react';
-import intersection from 'lodash/intersection';
+import intersectionBy from 'lodash/intersectionBy';
 import debounce from 'lodash/debounce';
 
 import {
@@ -122,16 +122,29 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
   };
 
   componentWillMount = () => {
-    const { datasource, query } = this.props;
+    const { datasource, query, onChange } = this.props;
 
     this.setState({
       loadingLogGroups: true,
     });
 
     this.fetchLogGroupOptions(query.region).then(logGroups => {
-      this.setState({
+      this.setState(state => {
+        const selectedLogGroups = intersectionBy(state.selectedLogGroups, logGroups, 'value');
+        if (onChange) {
+          const nextQuery = {
+            ...query,
+            logGroupNames: selectedLogGroups.map(group => group.value!),
+          };
+
+          onChange(nextQuery);
+        }
+
+        return {
           loadingLogGroups: false,
           availableLogGroups: logGroups,
+          selectedLogGroups,
+        };
       });
     });
 
@@ -184,7 +197,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
     const logGroups = await this.fetchLogGroupOptions(v.value!);
 
     this.setState(state => {
-      const selectedLogGroups = intersection(state.selectedLogGroups, logGroups);
+      const selectedLogGroups = intersectionBy(state.selectedLogGroups, logGroups, 'value');
 
       const { onChange, query } = this.props;
       if (onChange) {