From c0d0f13a8d12f3cbf35c8bde4a33521adfe52026 Mon Sep 17 00:00:00 2001
From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com>
Date: Wed, 13 Mar 2024 15:41:03 +0200
Subject: [PATCH] DashboardScene: Reset query variable query and definition on
 datasource change (#84347)

reset query variable query and definition on datasource change
---
 .../settings/variables/editors/QueryVariableEditor.test.tsx | 2 ++
 .../settings/variables/editors/QueryVariableEditor.tsx      | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
index 6187525e22c..10b7832ff05 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
@@ -152,6 +152,8 @@ describe('QueryVariableEditor', () => {
     });
 
     expect(variable.state.datasource).toEqual({ uid: 'mock-ds-3', type: 'prometheus' });
+    expect(variable.state.query).toBe('');
+    expect(variable.state.definition).toBe('');
   });
 
   it('should update the variable state when changing the query', async () => {
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
index 2a164aa9f0c..c0f64a0cb52 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
@@ -36,6 +36,12 @@ export function QueryVariableEditor({ variable, onRunQuery }: QueryVariableEdito
   };
   const onDataSourceChange = (dsInstanceSettings: DataSourceInstanceSettings) => {
     const datasource: DataSourceRef = { uid: dsInstanceSettings.uid, type: dsInstanceSettings.type };
+
+    if (variable.state.datasource && variable.state.datasource.type !== datasource.type) {
+      variable.setState({ datasource, query: '', definition: '' });
+      return;
+    }
+
     variable.setState({ datasource });
   };
   const onQueryChange = (query: VariableQueryType) => {