From 122642a6d7672aa86cd1fda8a0682de4605c68af Mon Sep 17 00:00:00 2001 From: "grafana-delivery-bot[bot]" <132647405+grafana-delivery-bot[bot]@users.noreply.github.com> Date: Fri, 17 Jan 2025 17:34:15 +0200 Subject: [PATCH] [v11.4.x] QueryVariable: Default query is not set when creating a new variable (#99197) 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 (cherry picked from commit feae06d81cf9c1a300a9faa446da4cf0f1ee6e24) Co-authored-by: Ivan Ortega Alba --- .../components/QueryVariableForm.tsx | 7 +++++ .../editors/QueryVariableEditor.test.tsx | 31 +++++++++++++++++-- .../variables/editors/QueryVariableEditor.tsx | 2 +- .../query/QueryVariableEditor.test.tsx | 7 ++--- 4 files changed, 39 insertions(+), 8 deletions(-) diff --git a/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx index 9a8e0c73078..e5e3a12b4b6 100644 --- a/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx +++ b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx @@ -63,6 +63,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]); 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 d96bb9516ca..ec91f15b41e 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 @@ -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(); + return render(); }), variable, user: userEvent.setup(), @@ -135,6 +136,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, @@ -152,8 +177,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 () => { 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 05ea0873e91..ed1f889796e 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx @@ -38,7 +38,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; } diff --git a/public/app/features/variables/query/QueryVariableEditor.test.tsx b/public/app/features/variables/query/QueryVariableEditor.test.tsx index a621722e2bd..01e51aaf132 100644 --- a/public/app/features/variables/query/QueryVariableEditor.test.tsx +++ b/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); }); });