From 9f7ddf1f0b5234a1fd82e1f92d1444f81a794e45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 26 Jan 2023 11:07:17 +0100
Subject: [PATCH] QueryEditorRow: Fixes issue loading query editor when data
 source variable selected (#61927)

* QueryEditorRow: Fixes issue loading query editor when data source variable selected

* Fix func name

* Removed wait

* restore waiting for with better check

* restore waiting for with better check
---
 public/api-merged.json                                 |  1 +
 public/app/features/explore/spec/helper/setup.tsx      | 10 ++++++++--
 .../app/features/query/components/QueryEditorRow.tsx   | 10 ++++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/public/api-merged.json b/public/api-merged.json
index d1ab3d0d23d..8f18508d55e 100644
--- a/public/api-merged.json
+++ b/public/api-merged.json
@@ -19094,6 +19094,7 @@
       }
     },
     "receiver": {
+      "description": "Receiver receiver",
       "type": "object",
       "required": [
         "active",
diff --git a/public/app/features/explore/spec/helper/setup.tsx b/public/app/features/explore/spec/helper/setup.tsx
index 88a041a7bb1..1c163dcbeda 100644
--- a/public/app/features/explore/spec/helper/setup.tsx
+++ b/public/app/features/explore/spec/helper/setup.tsx
@@ -6,9 +6,15 @@ import { Provider } from 'react-redux';
 import { Route, Router } from 'react-router-dom';
 import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
 
-import { DataSourceApi, DataSourceInstanceSettings, QueryEditorProps, ScopedVars, UrlQueryValue } from '@grafana/data';
+import {
+  DataSourceApi,
+  DataSourceInstanceSettings,
+  DataSourceRef,
+  QueryEditorProps,
+  ScopedVars,
+  UrlQueryValue,
+} from '@grafana/data';
 import { locationSearchToObject, locationService, setDataSourceSrv, setEchoSrv, config } from '@grafana/runtime';
-import { DataSourceRef } from '@grafana/schema';
 import { GrafanaContext } from 'app/core/context/GrafanaContext';
 import { GrafanaRoute } from 'app/core/navigation/GrafanaRoute';
 import { Echo } from 'app/core/services/echo/Echo';
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index ac028cac25d..ccf32ab5d08 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -63,8 +63,10 @@ interface Props<TQuery extends DataQuery> {
 }
 
 interface State<TQuery extends DataQuery> {
+  /** DatasourceUid or ds variable expression used to resolve current datasource */
   loadedDataSourceIdentifier?: string | null;
   datasource: DataSourceApi<TQuery> | null;
+  datasourceUid?: string | null;
   hasTextEditMode: boolean;
   data?: PanelData;
   isOpen?: boolean;
@@ -238,17 +240,17 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     }
   }
 
-  waitingForDatasourceToLoad = (): boolean => {
+  isWaitingForDatasourceToLoad(): boolean {
     // if we not yet have loaded the datasource in state the
     // ds in props and the ds in state will have different values.
-    return this.props.dataSource.uid !== this.state.datasource?.uid;
-  };
+    return this.props.dataSource.uid !== this.state.loadedDataSourceIdentifier;
+  }
 
   renderPluginEditor = () => {
     const { query, onChange, queries, onRunQuery, onAddQuery, app = CoreApp.PanelEditor, history } = this.props;
     const { datasource, data } = this.state;
 
-    if (this.waitingForDatasourceToLoad()) {
+    if (this.isWaitingForDatasourceToLoad()) {
       return null;
     }