From 5a207824992d3172c02169f0b96596a76cb0dfb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 4 May 2020 14:11:15 +0200
Subject: [PATCH] NewPanelEdit: Fixes issue with angular panel clean up, and
 cleanup after leaving edit mode (#24224)

---
 .../components/PanelEditor/state/actions.test.ts         | 9 ++++++---
 public/app/features/dashboard/state/DashboardModel.ts    | 1 +
 public/app/features/panel/panel_directive.ts             | 3 +++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts b/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
index 0a17952c866..d124fbb9baf 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
@@ -33,7 +33,7 @@ describe('panelEditor actions', () => {
         panels: [{ id: 12, type: 'graph' }],
       });
 
-      const panel = sourcePanel.getEditClone();
+      const panel = dashboard.initEditPanel(sourcePanel);
       panel.updateOptions({ prop: true });
 
       const state: PanelEditorState = {
@@ -65,7 +65,7 @@ describe('panelEditor actions', () => {
         panels: [{ id: 12, type: 'graph' }],
       });
 
-      const panel = sourcePanel.getEditClone();
+      const panel = dashboard.initEditPanel(sourcePanel);
       panel.type = 'table';
       panel.plugin = getPanelPlugin({ id: 'table' });
       panel.updateOptions({ prop: true });
@@ -77,6 +77,8 @@ describe('panelEditor actions', () => {
         querySubscription: { unsubscribe: jest.fn() },
       };
 
+      const panelDestroy = (panel.destroy = jest.fn());
+
       const dispatchedActions = await thunkTester({
         panelEditor: state,
         dashboard: {
@@ -89,6 +91,7 @@ describe('panelEditor actions', () => {
       expect(dispatchedActions.length).toBe(3);
       expect(dispatchedActions[0].type).toBe(panelModelAndPluginReady.type);
       expect(sourcePanel.plugin).toEqual(panel.plugin);
+      expect(panelDestroy.mock.calls.length).toEqual(1);
     });
 
     it('should discard changes when shouldDiscardChanges is true', async () => {
@@ -101,7 +104,7 @@ describe('panelEditor actions', () => {
         panels: [{ id: 12, type: 'graph' }],
       });
 
-      const panel = sourcePanel.getEditClone();
+      const panel = dashboard.initEditPanel(sourcePanel);
       panel.updateOptions({ prop: true });
 
       const state: PanelEditorState = {
diff --git a/public/app/features/dashboard/state/DashboardModel.ts b/public/app/features/dashboard/state/DashboardModel.ts
index e462b17e805..5c9816c2fac 100644
--- a/public/app/features/dashboard/state/DashboardModel.ts
+++ b/public/app/features/dashboard/state/DashboardModel.ts
@@ -341,6 +341,7 @@ export class DashboardModel {
   }
 
   exitPanelEditor() {
+    this.panelInEdit.destroy();
     this.panelInEdit = undefined;
   }
 
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index e3b54b33e89..07b46b76ee0 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -82,6 +82,9 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       scope.$on('$destroy', () => {
         elem.off();
 
+        panel.events.emit(PanelEvents.panelTeardown);
+        panel.events.removeAllListeners();
+
         if (panelScrollbar) {
           panelScrollbar.dispose();
         }