Scenes: Persist changes made in edit mode to save model (#84320)

.betterer.results

@@ -2499,7 +2499,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "9"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "11"]
     ],
     "public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],

public/app/features/dashboard-scene/panel-edit/VizPanelManager.tsx

@@ -387,7 +387,10 @@ export class VizPanelManager extends SceneObjectBase<VizPanelManagerState> {
 
   public commitChanges() {
     const sourcePanel = this.state.sourcePanel.resolve();
+    this.commitChangesTo(sourcePanel);
+  }
 
+  public commitChangesTo(sourcePanel: VizPanel) {
     const repeatUpdate = {
       variableName: this.state.repeat,
       repeatDirection: this.state.repeatDirection,

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts

@@ -23,13 +23,14 @@ import { getTimeRange } from 'app/features/dashboard/utils/timeRange';
 import { reduceTransformRegistryItem } from 'app/features/transformers/editors/ReduceTransformerEditor';
 import { SHARED_DASHBOARD_QUERY } from 'app/plugins/datasource/dashboard';
 
+import { buildPanelEditScene } from '../panel-edit/PanelEditor';
 import { DashboardDataLayerSet } from '../scene/DashboardDataLayerSet';
 import { DashboardGridItem } from '../scene/DashboardGridItem';
 import { LibraryVizPanel } from '../scene/LibraryVizPanel';
 import { RowRepeaterBehavior } from '../scene/RowRepeaterBehavior';
 import { NEW_LINK } from '../settings/links/utils';
 import { activateFullSceneTree, buildPanelRepeaterScene } from '../utils/test-utils';
-import { getVizPanelKeyForPanelId } from '../utils/utils';
+import { findVizPanelByKey, getVizPanelKeyForPanelId } from '../utils/utils';
 
 import { GRAFANA_DATASOURCE_REF } from './const';
 import dashboard_to_load1 from './testfiles/dashboard_to_load1.json';
@@ -982,6 +983,28 @@ describe('transformSceneToSaveModel', () => {
       });
     });
   });
+
+  describe('Given a scene with an open panel editor', () => {
+    it('should persist changes to panel model', async () => {
+      const scene = transformSaveModelToScene({ dashboard: repeatingRowsAndPanelsDashboardJson as any, meta: {} });
+      activateFullSceneTree(scene);
+      await new Promise((r) => setTimeout(r, 1));
+      scene.onEnterEditMode();
+      const panel = findVizPanelByKey(scene, '15')!;
+      scene.setState({ editPanel: buildPanelEditScene(panel) });
+      panel.onOptionsChange({
+        mode: 'markdown',
+        code: {
+          language: 'plaintext',
+          showLineNumbers: false,
+          showMiniMap: false,
+        },
+        content: 'new content',
+      });
+      const saveModel = transformSceneToSaveModel(scene);
+      expect((saveModel.panels![1] as any).options.content).toBe('new content');
+    });
+  });
 });
 
 export function buildGridItemFromPanelSchema(panel: Partial<Panel>) {

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.ts

@@ -58,11 +58,25 @@ export function transformSceneToSaveModel(scene: DashboardScene, isSnapshot = fa
   if (body instanceof SceneGridLayout) {
     for (const child of body.state.children) {
       if (child instanceof DashboardGridItem) {
-        // handle panel repeater scenatio
+        let child_ = child;
-        if (child.state.variableName) {
+        // If we're saving while the panel editor is open, we need to persist those changes in the panel model
-          panels = panels.concat(panelRepeaterToPanels(child, isSnapshot));
+        if (
+          child.state.body instanceof VizPanel &&
+          state.editPanel?.state.vizManager &&
+          state.editPanel.state.vizManager.state.sourcePanel.resolve() === child.state.body
+        ) {
+          const childClone = child.clone();
+          if (childClone.state.body instanceof VizPanel) {
+            state.editPanel.state.vizManager.commitChangesTo(childClone.state.body);
+            child_ = childClone;
+          }
+        }
+
+        // handle panel repeater scenario
+        if (child_.state.variableName) {
+          panels = panels.concat(panelRepeaterToPanels(child_, isSnapshot));
         } else {
-          panels.push(gridItemToPanel(child, isSnapshot));
+          panels.push(gridItemToPanel(child_, isSnapshot));
         }
       }