QueryVariable: Default query is not set when creating a new variable (#99029)

* QueryVariable: Default query is not set when creating a new variable

* use correct getDefaultQuery

---------

Co-authored-by: Sergej-Vlasov <sergej.s.vlasov@gmail.com>

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

@@ -67,6 +67,13 @@ export function QueryVariableEditorForm({
   const { value: dsConfig } = useAsync(async () => {
     const datasource = await getDataSourceSrv().get(datasourceRef ?? '');
     const VariableQueryEditor = await getVariableQueryEditor(datasource);
+    const defaultQuery = datasource?.variables?.getDefaultQuery?.();
+
+    if (!query && defaultQuery) {
+      const query =
+        typeof defaultQuery === 'string' ? defaultQuery : { ...defaultQuery, refId: defaultQuery.refId ?? 'A' };
+      onQueryChange(query);
+    }
 
     return { datasource, VariableQueryEditor };
   }, [datasourceRef]);

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

@@ -39,6 +39,7 @@ jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => ({
         getType: () => VariableSupportType.Custom,
         query: jest.fn(),
         editor: jest.fn().mockImplementation(LegacyVariableQueryEditor),
+        getDefaultQuery: () => 'default-query',
       },
     }),
     getList: () => [defaultDatasource, promDatasource],
@@ -80,7 +81,7 @@ describe('QueryVariableEditor', () => {
 
     return {
       renderer: await act(() => {
-        return render(<QueryVariableEditor variable={variable} onRunQuery={onRunQueryMock} />);
+        return render(<QueryVariableEditor variable={variable} onRunQuery={onRunQueryMock} {...props} />);
       }),
       variable,
       user: userEvent.setup(),
@@ -141,6 +142,30 @@ describe('QueryVariableEditor', () => {
     expect(allValueInput).toHaveValue('custom all value');
   });
 
+  it('should update the variable with default query for the selected DS', async () => {
+    const onRunQueryMock = jest.fn();
+    const variable = new QueryVariable({ datasource: { uid: 'mock-ds-2', type: 'test' }, query: '' });
+
+    const {
+      renderer: { getByTestId },
+    } = await setup({
+      variable,
+      onRunQuery: onRunQueryMock,
+    });
+
+    const queryInput = getByTestId(
+      selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput
+    );
+
+    await waitFor(async () => {
+      expect(onRunQueryMock).toHaveBeenCalledTimes(1);
+      expect(queryInput).toHaveValue('default-query');
+
+      await lastValueFrom(variable.validateAndUpdate());
+      expect(variable.state.query).toBe('default-query');
+    });
+  });
+
   it('should update variable state when changing the datasource', async () => {
     const {
       variable,
@@ -158,8 +183,8 @@ describe('QueryVariableEditor', () => {
     });
 
     expect(variable.state.datasource).toEqual({ uid: 'mock-ds-3', type: 'prometheus' });
-    expect(variable.state.query).toBe('');
-    expect(variable.state.definition).toBe('');
+    expect(variable.state.query).toBe('default-query');
+    expect(variable.state.definition).toBe('default-query');
   });
 
   it('should update the variable state when changing the query', async () => {

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

@@ -42,7 +42,7 @@ export function QueryVariableEditor({ variable, onRunQuery }: QueryVariableEdito
   const onDataSourceChange = (dsInstanceSettings: DataSourceInstanceSettings) => {
     const datasource = getDataSourceRef(dsInstanceSettings);
 
-    if (variable.state.datasource && variable.state.datasource.type !== datasource.type) {
+    if ((variable.state.datasource?.type || '') !== datasource.type) {
       variable.setState({ datasource, query: '', definition: '' });
       return;
     }

public/app/features/variables/query/QueryVariableEditor.test.tsx

@@ -79,12 +79,11 @@ describe('QueryVariableEditor', () => {
     });
 
     it('should pass down the query with default values if the datasource config defines it', async () => {
-      ds.variables!.getDefaultQuery = jest.fn().mockImplementationOnce(() => 'some default query');
-
       await setupTestContext({});
       expect(ds.variables?.getDefaultQuery).toBeDefined();
-      expect(ds.variables?.getDefaultQuery).toHaveBeenCalledTimes(1);
-      expect(editor.mock.calls[0][0].query).toBe('some default query');
+      // getDefaultQuery is called twice: once in QueryEditor to account for old arch
+      //   and once in QueryVariableForm for new scenes arch logic
+      expect(ds.variables?.getDefaultQuery).toHaveBeenCalledTimes(2);
     });
   });