DataSource: Default data source is no longer a persisted state but just the default data source for new panels (#45132)

* PanelEdit: Change the meaning of default data source to be just that the default for new panels

* Added migration, and also migration for annotation datasource prop to data source refs

* fix

* Fixing tests

* Fixes to annotation

* Fixing unit test

public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx

@@ -6,79 +6,46 @@ import userEvent from '@testing-library/user-event';
 import { selectors } from '@grafana/e2e-selectors';
 import { setAngularLoader, setDataSourceSrv } from '@grafana/runtime';
 import { AnnotationsSettings } from './AnnotationsSettings';
+import { mockDataSource, MockDataSourceSrv } from 'app/features/alerting/unified/mocks';
 
 describe('AnnotationsSettings', () => {
   let dashboard: any;
-  const datasources: Record<string, any> = {
-    Grafana: {
-      name: 'Grafana',
-      meta: {
-        type: 'datasource',
+
+  const dataSources = {
+    grafana: mockDataSource(
+      {
         name: 'Grafana',
-        id: 'grafana',
-        info: {
-          logos: {
-            small: 'public/img/icn-datasource.svg',
-          },
-        },
+        uid: 'Grafana',
+        type: 'grafana',
+        isDefault: true,
       },
-    },
-    Testdata: {
-      name: 'Testdata',
-      id: 4,
-      meta: {
-        type: 'datasource',
-        name: 'TestData',
-        id: 'testdata',
-        info: {
-          logos: {
-            small: 'public/app/plugins/datasource/testdata/img/testdata.svg',
-          },
-        },
+      { annotations: true }
+    ),
+    Testdata: mockDataSource(
+      {
+        name: 'Testdata',
+        uid: 'Testdata',
+        type: 'testdata',
+        isDefault: true,
       },
-    },
-    Prometheus: {
-      name: 'Prometheus',
-      id: 33,
-      meta: {
-        type: 'datasource',
+      { annotations: true }
+    ),
+    Prometheus: mockDataSource(
+      {
         name: 'Prometheus',
-        id: 'prometheus',
-        info: {
-          logos: {
-            small: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg',
-          },
-        },
+        uid: 'Prometheus',
+        type: 'prometheus',
       },
-    },
+      { annotations: true }
+    ),
   };
 
+  setDataSourceSrv(new MockDataSourceSrv(dataSources));
+
   const getTableBody = () => screen.getAllByRole('rowgroup')[1];
   const getTableBodyRows = () => within(getTableBody()).getAllByRole('row');
 
   beforeAll(() => {
-    setDataSourceSrv({
-      getList() {
-        return Object.values(datasources).map((d) => d);
-      },
-      getInstanceSettings(name: string) {
-        return name
-          ? {
-              name: datasources[name].name,
-              value: datasources[name].name,
-              meta: datasources[name].meta,
-            }
-          : {
-              name: datasources.Testdata.name,
-              value: datasources.Testdata.name,
-              meta: datasources.Testdata.meta,
-            };
-      },
-      get(name: string) {
-        return Promise.resolve(name ? datasources[name] : datasources.Testdata);
-      },
-    } as any);
-
     setAngularLoader({
       load: () => ({
         destroy: jest.fn(),
@@ -96,7 +63,7 @@ describe('AnnotationsSettings', () => {
         list: [
           {
             builtIn: 1,
-            datasource: 'Grafana',
+            datasource: { uid: 'Grafana', type: 'grafana' },
             enable: true,
             hide: true,
             iconColor: 'rgba(0, 211, 255, 1)',
@@ -158,7 +125,7 @@ describe('AnnotationsSettings', () => {
       ...dashboard.annotations.list,
       {
         builtIn: 0,
-        datasource: 'Prometheus',
+        datasource: { uid: 'Prometheus', type: 'prometheus' },
         enable: true,
         hide: true,
         iconColor: 'rgba(0, 211, 255, 1)',
@@ -167,7 +134,7 @@ describe('AnnotationsSettings', () => {
       },
       {
         builtIn: 0,
-        datasource: 'Prometheus',
+        datasource: { uid: 'Prometheus', type: 'prometheus' },
         enable: true,
         hide: true,
         iconColor: 'rgba(0, 211, 255, 1)',
@@ -207,7 +174,7 @@ describe('AnnotationsSettings', () => {
     expect(within(getTableBodyRows()[2]).queryByText(/annotations & alerts/i)).toBeInTheDocument();
   });
 
-  test('it renders a form for adding/editing annotations', () => {
+  test('it renders a form for adding/editing annotations', async () => {
     render(<AnnotationsSettings dashboard={dashboard} />);
 
     userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')));
@@ -224,7 +191,7 @@ describe('AnnotationsSettings', () => {
 
     userEvent.click(screen.getByText(/testdata/i));
 
-    expect(screen.queryByText(/prometheus/i)).toBeVisible();
+    expect(await screen.findByText(/Prometheus/i)).toBeVisible();
     expect(screen.queryAllByText(/testdata/i)).toHaveLength(2);
 
     userEvent.click(screen.getByText(/prometheus/i));

public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx

@@ -1,7 +1,8 @@
+import { AnnotationQuery, getDataSourceRef } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
 import React, { useState } from 'react';
 import { DashboardModel } from '../../state/DashboardModel';
-import { AnnotationSettingsEdit, AnnotationSettingsList } from '../AnnotationSettings';
-import { newAnnotation } from '../AnnotationSettings/AnnotationSettingsEdit';
+import { AnnotationSettingsEdit, AnnotationSettingsList, newAnnotationName } from '../AnnotationSettings';
 import { DashboardSettingsHeader } from './DashboardSettingsHeader';
 
 interface Props {
@@ -16,6 +17,13 @@ export const AnnotationsSettings: React.FC<Props> = ({ dashboard }) => {
   };
 
   const onNew = () => {
+    const newAnnotation: AnnotationQuery = {
+      name: newAnnotationName,
+      enable: true,
+      datasource: getDataSourceRef(getDataSourceSrv().getInstanceSettings(null)!),
+      iconColor: 'red',
+    };
+
     dashboard.annotations.list = [...dashboard.annotations.list, { ...newAnnotation }];
     setEditIdx(dashboard.annotations.list.length - 1);
   };