AngularPanels: Fixing changing angular panel options not taking having affect when coming back from panel edit (#54087)

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', () => {

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;

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();