From a306205a583e86efcf86a4d17223a00b81475bac Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 2 Nov 2021 10:04:29 -0600
Subject: [PATCH] Annotations: Ensure legacy annotation editors are cleaned up
 properly when switching datasource (#41115) (#41208)

* Annotations: Ensure Angular-based annotation editors are cleaned up properly

* Annotations: Remove ng-if instead of wrapping in div

(cherry picked from commit e0b2e0b152618676e09625624214dcc991e0b5fe)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../components/AnnotationSettings/AngularEditorLoader.tsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
index b01dec61cee..0ef7279c43c 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
@@ -52,7 +52,10 @@ export class AngularEditorLoader extends React.PureComponent<Props> {
     }
 
     const loader = getAngularLoader();
-    const template = `<plugin-component ng-if="!ctrl.currentDatasource.annotations" type="annotations-query-ctrl"> </plugin-component>`;
+    // NOTE: BE CAREFUL HERE
+    // If this template contains an ng-if, then it won't be removed correctly by AngularLoader.
+    // The compiledElem will only contain the single comment node (e.g. <!-- ngIf !ctrl.currentDatasource.annotations -->)
+    const template = `<plugin-component type="annotations-query-ctrl"> </plugin-component>`;
     const scopeProps = {
       ctrl: {
         currentDatasource: this.props.datasource,