NewPanelEdit: Fixes issue with angular panel clean up, and cleanup after leaving edit mode (#24224)

public/app/features/dashboard/components/PanelEditor/state/actions.test.ts

@@ -33,7 +33,7 @@ describe('panelEditor actions', () => {
         panels: [{ id: 12, type: 'graph' }],
         panels: [{ id: 12, type: 'graph' }],
       });
       });
 
 
-      const panel = sourcePanel.getEditClone();
+      const panel = dashboard.initEditPanel(sourcePanel);
       panel.updateOptions({ prop: true });
       panel.updateOptions({ prop: true });
 
 
       const state: PanelEditorState = {
       const state: PanelEditorState = {
@@ -65,7 +65,7 @@ describe('panelEditor actions', () => {
         panels: [{ id: 12, type: 'graph' }],
         panels: [{ id: 12, type: 'graph' }],
       });
       });
 
 
-      const panel = sourcePanel.getEditClone();
+      const panel = dashboard.initEditPanel(sourcePanel);
       panel.type = 'table';
       panel.type = 'table';
       panel.plugin = getPanelPlugin({ id: 'table' });
       panel.plugin = getPanelPlugin({ id: 'table' });
       panel.updateOptions({ prop: true });
       panel.updateOptions({ prop: true });
@@ -77,6 +77,8 @@ describe('panelEditor actions', () => {
         querySubscription: { unsubscribe: jest.fn() },
         querySubscription: { unsubscribe: jest.fn() },
       };
       };
 
 
+      const panelDestroy = (panel.destroy = jest.fn());
+
       const dispatchedActions = await thunkTester({
       const dispatchedActions = await thunkTester({
         panelEditor: state,
         panelEditor: state,
         dashboard: {
         dashboard: {
@@ -89,6 +91,7 @@ describe('panelEditor actions', () => {
       expect(dispatchedActions.length).toBe(3);
       expect(dispatchedActions.length).toBe(3);
       expect(dispatchedActions[0].type).toBe(panelModelAndPluginReady.type);
       expect(dispatchedActions[0].type).toBe(panelModelAndPluginReady.type);
       expect(sourcePanel.plugin).toEqual(panel.plugin);
       expect(sourcePanel.plugin).toEqual(panel.plugin);
+      expect(panelDestroy.mock.calls.length).toEqual(1);
     });
     });
 
 
     it('should discard changes when shouldDiscardChanges is true', async () => {
     it('should discard changes when shouldDiscardChanges is true', async () => {
@@ -101,7 +104,7 @@ describe('panelEditor actions', () => {
         panels: [{ id: 12, type: 'graph' }],
         panels: [{ id: 12, type: 'graph' }],
       });
       });
 
 
-      const panel = sourcePanel.getEditClone();
+      const panel = dashboard.initEditPanel(sourcePanel);
       panel.updateOptions({ prop: true });
       panel.updateOptions({ prop: true });
 
 
       const state: PanelEditorState = {
       const state: PanelEditorState = {

public/app/features/dashboard/state/DashboardModel.ts

@@ -341,6 +341,7 @@ export class DashboardModel {
   }
   }
 
 
   exitPanelEditor() {
   exitPanelEditor() {
+    this.panelInEdit.destroy();
     this.panelInEdit = undefined;
     this.panelInEdit = undefined;
   }
   }
 
 

public/app/features/panel/panel_directive.ts

@@ -82,6 +82,9 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       scope.$on('$destroy', () => {
       scope.$on('$destroy', () => {
         elem.off();
         elem.off();
 
 
+        panel.events.emit(PanelEvents.panelTeardown);
+        panel.events.removeAllListeners();
+
         if (panelScrollbar) {
         if (panelScrollbar) {
           panelScrollbar.dispose();
           panelScrollbar.dispose();
         }
         }