Annotations: Fixes data source showing as a uid in annotation settings (#48073)

public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx

@@ -4,6 +4,7 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { DashboardModel } from '../../state/DashboardModel';
 import { ListNewButton } from '../DashboardSettings/ListNewButton';
 import { arrayUtils } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
 
 type Props = {
   dashboard: DashboardModel;
@@ -26,6 +27,7 @@ export const AnnotationSettingsList: React.FC<Props> = ({ dashboard, onNew, onEd
 
   const showEmptyListCTA = annotations.length === 0 || (annotations.length === 1 && annotations[0].builtIn);
 
+  const dataSourceSrv = getDataSourceSrv();
   return (
     <VerticalGroup>
       {annotations.length > 0 && (
@@ -50,7 +52,7 @@ export const AnnotationSettingsList: React.FC<Props> = ({ dashboard, onNew, onEd
                   </td>
                 )}
                 <td className="pointer" onClick={() => onEdit(idx)}>
-                  {annotation.datasource?.uid}
+                  {dataSourceSrv.getInstanceSettings(annotation.datasource)?.name || annotation.datasource?.uid}
                 </td>
                 <td style={{ width: '1%' }}>
                   {idx !== 0 && (

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

@@ -15,7 +15,7 @@ describe('AnnotationsSettings', () => {
     grafana: mockDataSource(
       {
         name: 'Grafana',
-        uid: 'Grafana',
+        uid: 'uid1',
         type: 'grafana',
         isDefault: true,
       },
@@ -24,7 +24,7 @@ describe('AnnotationsSettings', () => {
     Testdata: mockDataSource(
       {
         name: 'Testdata',
-        uid: 'Testdata',
+        uid: 'uid2',
         type: 'testdata',
         isDefault: true,
       },
@@ -33,7 +33,7 @@ describe('AnnotationsSettings', () => {
     Prometheus: mockDataSource(
       {
         name: 'Prometheus',
-        uid: 'Prometheus',
+        uid: 'uid3',
         type: 'prometheus',
       },
       { annotations: true }
@@ -63,7 +63,7 @@ describe('AnnotationsSettings', () => {
         list: [
           {
             builtIn: 1,
-            datasource: { uid: 'Grafana', type: 'grafana' },
+            datasource: { uid: 'uid1', type: 'grafana' },
             enable: true,
             hide: true,
             iconColor: 'rgba(0, 211, 255, 1)',
@@ -120,12 +120,46 @@ describe('AnnotationsSettings', () => {
     ).toBeInTheDocument();
   });
 
+  test('it renders the anotation names or uid if annotation doesnt exist', async () => {
+    const annotationsList = [
+      ...dashboard.annotations.list,
+      {
+        builtIn: 0,
+        datasource: { uid: 'uid3', type: 'prometheus' },
+        enable: true,
+        hide: true,
+        iconColor: 'rgba(0, 211, 255, 1)',
+        name: 'Annotation 2',
+        type: 'dashboard',
+      },
+      {
+        builtIn: 0,
+        datasource: { uid: 'deletedAnnotationId', type: 'prometheus' },
+        enable: true,
+        hide: true,
+        iconColor: 'rgba(0, 211, 255, 1)',
+        name: 'Annotation 2',
+        type: 'dashboard',
+      },
+    ];
+    const dashboardWithAnnotations = {
+      ...dashboard,
+      annotations: {
+        list: [...annotationsList],
+      },
+    };
+    render(<AnnotationsSettings dashboard={dashboardWithAnnotations} />);
+    // Check that we have the correct annotations
+    expect(screen.queryByText(/prometheus/i)).toBeInTheDocument();
+    expect(screen.queryByText(/deletedAnnotationId/i)).toBeInTheDocument();
+  });
+
   test('it renders a sortable table of annotations', async () => {
     const annotationsList = [
       ...dashboard.annotations.list,
       {
         builtIn: 0,
-        datasource: { uid: 'Prometheus', type: 'prometheus' },
+        datasource: { uid: 'uid3', type: 'prometheus' },
         enable: true,
         hide: true,
         iconColor: 'rgba(0, 211, 255, 1)',
@@ -134,7 +168,7 @@ describe('AnnotationsSettings', () => {
       },
       {
         builtIn: 0,
-        datasource: { uid: 'Prometheus', type: 'prometheus' },
+        datasource: { uid: 'uid3', type: 'prometheus' },
         enable: true,
         hide: true,
         iconColor: 'rgba(0, 211, 255, 1)',