From 8880cbd7f68e6df7a23363798b3f9be66597c89d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 24 Aug 2022 08:35:44 +0200
Subject: [PATCH] AngularPanels: Fixing changing angular panel options not
 taking having affect when coming back from panel edit (#54087)

---
 .../PanelEditor/state/actions.test.ts         | 36 +++++++++++++++++++
 .../components/PanelEditor/state/actions.ts   |  5 ++-
 .../features/dashboard/state/PanelModel.ts    |  1 +
 3 files changed, 41 insertions(+), 1 deletion(-)

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 6ea4ca3ff9f..64881c59fa4 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
@@ -138,6 +138,7 @@ describe('panelEditor actions', () => {
     it('should not increment configRev when no changes made and leaving panel edit', async () => {
       const sourcePanel = new PanelModel({ id: 12, type: 'graph' });
       sourcePanel.plugin = getPanelPlugin({});
+      sourcePanel.plugin.angularPanelCtrl = undefined;
 
       const dashboard = new DashboardModel({
         panels: [{ id: 12, type: 'graph' }],
@@ -163,6 +164,41 @@ describe('panelEditor actions', () => {
 
       expect(sourcePanel.configRev).toEqual(0);
     });
+
+    it('should apply changes when leaving panel edit with angular panel', async () => {
+      const sourcePanel = new PanelModel({ id: 12, type: 'graph' });
+      sourcePanel.plugin = getPanelPlugin({});
+      sourcePanel.plugin.angularPanelCtrl = {};
+
+      const dashboard = new DashboardModel({
+        panels: [{ id: 12, type: 'graph' }],
+      });
+
+      const panel = dashboard.initEditPanel(sourcePanel);
+
+      const state: PanelEditorState = {
+        ...initialState(),
+        getPanel: () => panel,
+        getSourcePanel: () => sourcePanel,
+      };
+
+      // not using panel.setProperty here to simulate any prop change done from angular
+      panel.title = 'Changed title';
+
+      await thunkTester({
+        panelEditor: state,
+        panels: {},
+        dashboard: {
+          getModel: () => dashboard,
+        },
+      })
+        .givenThunk(exitPanelEditor)
+        .whenThunkIsDispatched();
+
+      expect(sourcePanel.isAngularPlugin()).toBe(true);
+      expect(sourcePanel.title).toEqual('Changed title');
+      expect(sourcePanel.configRev).toEqual(1);
+    });
   });
 
   describe('skipPanelUpdate', () => {
diff --git a/public/app/features/dashboard/components/PanelEditor/state/actions.ts b/public/app/features/dashboard/components/PanelEditor/state/actions.ts
index fca553ea7da..3290ce66189 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/actions.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/actions.ts
@@ -116,7 +116,10 @@ export function exitPanelEditor(): ThunkResult<void> {
       dashboard.exitPanelEditor();
     }
 
-    if (panel.hasChanged && !shouldDiscardChanges) {
+    // For angular panels we always commit as panel.hasChanged will not have picked up changes done from angular
+    const commitChanges = !shouldDiscardChanges && (panel.hasChanged || panel.isAngularPlugin());
+
+    if (commitChanges) {
       const modifiedSaveModel = panel.getSaveModel();
       const sourcePanel = getSourcePanel();
       const panelTypeChanged = sourcePanel.type !== panel.type;
diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts
index 48b8ebe051f..e78d6942544 100644
--- a/public/app/features/dashboard/state/PanelModel.ts
+++ b/public/app/features/dashboard/state/PanelModel.ts
@@ -544,6 +544,7 @@ export class PanelModel implements DataConfigSource, IPanelModel {
 
     const clone = new PanelModel(sourceModel);
     clone.isEditing = true;
+    clone.plugin = this.plugin;
 
     const sourceQueryRunner = this.getQueryRunner();