Annotations: Fix so adds, updates and deletes are shown correctly (#35184)

* Annotations: Fix for update/save/delete annotation not appearing/disappearing

* Annotations: Fix so adds, updates and deletes are shown correctly

* Chore: updates after PR comments

public/app/features/annotations/event_editor.ts

@@ -3,6 +3,7 @@ import { coreModule } from 'app/core/core';
 import { AnnotationEvent, dateTime } from '@grafana/data';
 import { MetricsPanelCtrl } from '../panel/metrics_panel_ctrl';
 import { deleteAnnotation, saveAnnotation, updateAnnotation } from './api';
+import { getDashboardQueryRunner } from '../query/state/DashboardQueryRunner/DashboardQueryRunner';
 
 export class EventEditorCtrl {
   // @ts-ignore initialized through Angular not constructor
@@ -18,7 +19,7 @@ export class EventEditorCtrl {
   constructor() {}
 
   $onInit() {
-    this.event.panelId = this.panelCtrl.panel.id;
+    this.event.panelId = this.panelCtrl.panel.editSourceId ?? this.panelCtrl.panel.id; // set correct id if in panel edit
     this.event.dashboardId = this.panelCtrl.dashboard.id;
 
     // Annotations query returns time as Unix timestamp in milliseconds
@@ -30,7 +31,7 @@ export class EventEditorCtrl {
     this.timeFormated = this.panelCtrl.dashboard.formatDate(this.event.time!);
   }
 
-  save() {
+  async save(): Promise<void> {
     if (!this.form.$valid) {
       return;
     }
@@ -48,39 +49,30 @@ export class EventEditorCtrl {
       }
     }
 
+    let crudFunction = saveAnnotation;
     if (saveModel.id) {
-      updateAnnotation(saveModel)
-        .then(() => {
-          this.panelCtrl.refresh();
-          this.close();
-        })
-        .catch(() => {
-          this.panelCtrl.refresh();
-          this.close();
-        });
-    } else {
-      saveAnnotation(saveModel)
-        .then(() => {
-          this.panelCtrl.refresh();
-          this.close();
-        })
-        .catch(() => {
-          this.panelCtrl.refresh();
-          this.close();
-        });
+      crudFunction = updateAnnotation;
+    }
+
+    try {
+      await crudFunction(saveModel);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      this.close();
+      getDashboardQueryRunner().run({ dashboard: this.panelCtrl.dashboard, range: this.panelCtrl.range });
     }
   }
 
-  delete() {
-    return deleteAnnotation(this.event)
-      .then(() => {
-        this.panelCtrl.refresh();
-        this.close();
-      })
-      .catch(() => {
-        this.panelCtrl.refresh();
-        this.close();
-      });
+  async delete(): Promise<void> {
+    try {
+      await deleteAnnotation(this.event);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      this.close();
+      getDashboardQueryRunner().run({ dashboard: this.panelCtrl.dashboard, range: this.panelCtrl.range });
+    }
   }
 }