Alerting: Fix default query's data source when no default datasource specified (#55435)

public/app/features/alerting/unified/RuleEditor.test.tsx

@@ -412,11 +412,14 @@ describe('RuleEditor', () => {
     };
 
     const dataSources = {
-      default: mockDataSource({
-        type: 'prometheus',
-        name: 'Prom',
-        isDefault: true,
-      }),
+      default: mockDataSource(
+        {
+          type: 'prometheus',
+          name: 'Prom',
+          isDefault: true,
+        },
+        { alerting: true }
+      ),
     };
 
     jest.spyOn(backendSrv, 'getFolderByUid').mockResolvedValue({

public/app/features/alerting/unified/components/rule-editor/QueryEditor.test.tsx

@@ -1,7 +1,24 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { byLabelText, byTestId, byText } from 'testing-library-selector';
+
 import { getDefaultRelativeTimeRange } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { setDataSourceSrv } from '@grafana/runtime';
+
+import { MockDataSourceApi } from '../../../../../../test/mocks/datasource_srv';
+import { ExpressionDatasourceUID, instanceSettings } from '../../../../expressions/ExpressionDatasource';
+import { mockDataSource, MockDataSourceSrv } from '../../mocks';
+import { getDefaultQueries } from '../../utils/rule-form';
 
 import { QueryEditor } from './QueryEditor';
 
+const ui = {
+  queryNames: byTestId<HTMLButtonElement>('query-name-div'),
+  dataSourcePicker: byLabelText<HTMLDivElement>(selectors.components.DataSourcePicker.container),
+  noDataSourcesWarning: byText('You appear to have no compatible data sources'),
+};
+
 const onChangeMock = jest.fn();
 describe('Query Editor', () => {
   it('should maintain the original query time range when duplicating it', () => {
@@ -46,4 +63,49 @@ describe('Query Editor', () => {
       { ...query, ...{ refId: 'B', relativeTimeRange: defaultRange, model: { refId: 'B', hide: false } } },
     ]);
   });
+
+  it('should select first data source supporting alerting when there is no default data source', async () => {
+    const dsServer = new MockDataSourceSrv({
+      influx: mockDataSource({ name: 'influx' }, { alerting: true }),
+      postgres: mockDataSource({ name: 'postgres' }, { alerting: true }),
+      [ExpressionDatasourceUID]: instanceSettings,
+    });
+    dsServer.get = () => Promise.resolve(new MockDataSourceApi());
+
+    setDataSourceSrv(dsServer);
+
+    const defaultQueries = getDefaultQueries();
+
+    render(<QueryEditor onChange={() => null} value={defaultQueries} />);
+
+    const queryRef = await ui.queryNames.findAll();
+    const select = await ui.dataSourcePicker.find();
+
+    expect(queryRef).toHaveLength(2);
+    expect(queryRef[0]).toHaveTextContent('A');
+    expect(queryRef[1]).toHaveTextContent('B');
+    expect(select).toHaveTextContent('influx'); // Alphabetical order
+    expect(ui.noDataSourcesWarning.query()).not.toBeInTheDocument();
+  });
+
+  it('should select the default data source when specified', async () => {
+    const dsServer = new MockDataSourceSrv({
+      influx: mockDataSource({ name: 'influx' }, { alerting: true }),
+      postgres: mockDataSource({ name: 'postgres', isDefault: true }, { alerting: true }),
+      [ExpressionDatasourceUID]: instanceSettings,
+    });
+    dsServer.get = () => Promise.resolve(new MockDataSourceApi());
+
+    setDataSourceSrv(dsServer);
+
+    const defaultQueries = getDefaultQueries();
+
+    render(<QueryEditor onChange={() => null} value={defaultQueries} />);
+
+    const queryRef = await ui.queryNames.findAll();
+    const select = await ui.dataSourcePicker.find();
+
+    expect(queryRef).toHaveLength(2);
+    expect(select).toHaveTextContent('postgres'); // Default data source
+  });
 });

public/app/features/alerting/unified/utils/datasource.ts

@@ -182,7 +182,7 @@ export function getDatasourceAPIUid(dataSourceName: string) {
 }
 
 export function getFirstCompatibleDataSource(): DataSourceInstanceSettings<DataSourceJsonData> | undefined {
-  return getRulesDataSources()[0];
+  return getDataSourceSrv().getList({ alerting: true })[0];
 }
 
 export function getDefaultOrFirstCompatibleDataSource(): DataSourceInstanceSettings<DataSourceJsonData> | undefined {