QueryVariableForm: Refil query variable query on default data source update (#114491)

* refil qury variable query on default ds update

* refactor datasource update logic

* adjust test

public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.test.tsx

@@ -178,7 +178,7 @@ describe('QueryVariableEditorForm', () => {
     await userEvent.click(screen.getByText(/prometheus/i));
 
     expect(mockOnDataSourceChange).toHaveBeenCalledTimes(1);
-    expect(mockOnDataSourceChange).toHaveBeenCalledWith(promDatasource, undefined);
+    expect(mockOnDataSourceChange).toHaveBeenCalledWith(promDatasource);
   });
 
   it('should call onQueryChange when changing the query', async () => {

public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx

@@ -1,4 +1,4 @@
-import { FormEvent } from 'react';
+import { FormEvent, useCallback } from 'react';
 import { useAsync } from 'react-use';
 
 import { DataSourceInstanceSettings, SelectableValue, TimeRange } from '@grafana/data';
@@ -27,7 +27,7 @@ type VariableQueryType = QueryVariable['state']['query'];
 
 interface QueryVariableEditorFormProps {
   datasource?: DataSourceRef;
-  onDataSourceChange: (dsSettings: DataSourceInstanceSettings) => void;
+  onDataSourceChange: (dsSettings: DataSourceInstanceSettings, preserveQuery?: boolean) => void;
   query: VariableQueryType;
   onQueryChange: (query: VariableQueryType) => void;
   onLegacyQueryChange: (query: VariableQueryType, definition: string) => void;
@@ -89,17 +89,23 @@ export function QueryVariableEditorForm({
       onQueryChange(query);
     }
 
+    // update data source if it is not defined in variable model
     if (!datasourceRef) {
       const instanceSettings = getDataSourceSrv().getInstanceSettings({ type: datasource.type, uid: datasource.uid });
-
       if (instanceSettings) {
-        onDataSourceChange(instanceSettings);
+        onDataSourceChange(instanceSettings, true);
       }
     }
 
     return { datasource, VariableQueryEditor };
   }, [datasourceRef]);
 
+  // adjusting type miss match between DataSourcePicker onChange and onDataSourceChange
+  const datasourceChangeHandler = useCallback(
+    (dsSettings: DataSourceInstanceSettings) => onDataSourceChange(dsSettings),
+    [onDataSourceChange]
+  );
+
   const { datasource, VariableQueryEditor } = dsConfig ?? {};
 
   return (
@@ -111,7 +117,7 @@ export function QueryVariableEditorForm({
         label={t('dashboard-scene.query-variable-editor-form.label-data-source', 'Data source')}
         htmlFor="data-source-picker"
       >
-        <DataSourcePicker current={datasourceRef} onChange={onDataSourceChange} variables={true} width={30} />
+        <DataSourcePicker current={datasourceRef} onChange={datasourceChangeHandler} variables={true} width={30} />
       </Field>
 
       {datasource && VariableQueryEditor && (

public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx

@@ -152,10 +152,12 @@ describe('QueryVariableEditor', () => {
     const onRunQueryMock = jest.fn();
     const variable = new QueryVariable({ datasource: undefined, query: '' });
 
-    await setup({
-      variable,
-      onRunQuery: onRunQueryMock,
-    });
+    await act(() =>
+      setup({
+        variable,
+        onRunQuery: onRunQueryMock,
+      })
+    );
 
     await waitFor(async () => {
       expect(variable.state.datasource).not.toBe(undefined);

public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx

@@ -68,10 +68,10 @@ export function QueryVariableEditor({ variable, onRunQuery }: QueryVariableEdito
   const onAllowCustomValueChange = (event: FormEvent<HTMLInputElement>) => {
     variable.setState({ allowCustomValue: event.currentTarget.checked });
   };
-  const onDataSourceChange = (dsInstanceSettings: DataSourceInstanceSettings) => {
+  const onDataSourceChange = (dsInstanceSettings: DataSourceInstanceSettings, preserveQuery = false) => {
     const datasource = getDataSourceRef(dsInstanceSettings);
 
-    if ((variable.state.datasource?.type || '') !== datasource.type) {
+    if (!preserveQuery && (variable.state.datasource?.type || '') !== datasource.type) {
       variable.setState({ datasource, query: '', definition: '' });
       return;
     }