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) {