Annotations: fixing so when changing annotations query links submenu will be updated. (#28990)

* fixing so changes to annotations query links will update submenu.

* Refactored so we dont use the events to trigger a refresh but instead recreating the annotations list instead of mutating the existing list.

* updated snapshot.

* uppdates according to feedback.

* fixed so it also works to update a annotation.

public/app/features/dashboard/components/SubMenu/Annotations.tsx

@@ -1,9 +1,10 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { LegacyForms } from '@grafana/ui';
+import { AnnotationQuery } from '@grafana/data';
 const { Switch } = LegacyForms;
 
 interface Props {
-  annotations: any[];
+  annotations: AnnotationQuery[];
   onAnnotationChanged: (annotation: any) => void;
 }
 

public/app/features/dashboard/components/SubMenu/SubMenu.tsx

@@ -8,10 +8,12 @@ import { DashboardLinks } from './DashboardLinks';
 import { Annotations } from './Annotations';
 import { SubMenuItems } from './SubMenuItems';
 import { DashboardLink } from '../../state/DashboardModel';
+import { AnnotationQuery } from '@grafana/data';
 
 interface OwnProps {
   dashboard: DashboardModel;
   links: DashboardLink[];
+  annotations: AnnotationQuery[];
 }
 
 interface ConnectedProps {
@@ -51,7 +53,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
   };
 
   render() {
-    const { dashboard, variables, links } = this.props;
+    const { dashboard, variables, links, annotations } = this.props;
 
     if (!this.isSubMenuVisible()) {
       return null;
@@ -60,7 +62,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
     return (
       <div className="submenu-controls">
         <SubMenuItems variables={variables} />
-        <Annotations annotations={dashboard.annotations.list} onAnnotationChanged={this.onAnnotationStateChanged} />
+        <Annotations annotations={annotations} onAnnotationChanged={this.onAnnotationStateChanged} />
         <div className="gf-form gf-form--grow" />
         {dashboard && <DashboardLinks dashboard={dashboard} links={links} />}
         <div className="clearfix" />