From d371fae3c81f073746ad23cc2a4ca0deae20d150 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 25 Sep 2024 11:04:20 +0200
Subject: [PATCH] DashboardScene: Fixes issue with updating repeated panels
 after coming back from panel edit (#93716)

---
 .../panel-edit/PanelEditor.tsx                |  6 +++++-
 .../scene/DashboardGridItem.test.tsx          |  9 +++++----
 .../scene/DashboardGridItem.tsx               | 19 ++++++-------------
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx b/public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx
index 3a696e97749..ed0b3f624ae 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx
@@ -54,6 +54,7 @@ export class PanelEditor extends SceneObjectBase<PanelEditorState> {
   private _originalLayoutElementState!: DashboardGridItemState;
   private _layoutElement!: DashboardGridItem;
   private _originalSaveModel!: Panel;
+  private _changesHaveBeenMade = false;
 
   public constructor(state: PanelEditorState) {
     super(state);
@@ -71,7 +72,7 @@ export class PanelEditor extends SceneObjectBase<PanelEditorState> {
 
     return () => {
       if (layoutElement instanceof DashboardGridItem) {
-        layoutElement.editingCompleted();
+        layoutElement.editingCompleted(this.state.isDirty || this._changesHaveBeenMade);
       }
       if (deactivateParents) {
         deactivateParents();
@@ -227,6 +228,9 @@ export class PanelEditor extends SceneObjectBase<PanelEditorState> {
   public dashboardSaved() {
     this.setOriginalState(this.state.panelRef);
     this.setState({ isDirty: false });
+
+    // Remember that we have done changes
+    this._changesHaveBeenMade = false;
   }
 
   public onSaveLibraryPanel = () => {
diff --git a/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx b/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx
index e6d202b0801..de74e9934a7 100644
--- a/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx
@@ -143,8 +143,8 @@ describe('PanelRepeaterGridItem', () => {
     await new Promise((r) => setTimeout(r, 10));
 
     vizPanel.setState({ title: 'Changed' });
-    //mimic returning to dashboard from panel edit cloning panel
-    panel.setState({ body: vizPanel.clone() });
+
+    panel.editingCompleted(true);
 
     // mimic returning to dashboard
     activateFullSceneTree(scene);
@@ -214,10 +214,11 @@ describe('PanelRepeaterGridItem', () => {
     await new Promise((r) => setTimeout(r, 10));
 
     vizPanel.setState({ title: 'Changed' });
-    //mimic returning to dashboard from panel edit cloning panel
-    panel.setState({ body: vizPanel.clone() });
+
+    panel.editingCompleted(true);
 
     const performRepeatMock = jest.spyOn(panel, 'performRepeat');
+
     // mimic returning to dashboard
     activateFullSceneTree(scene);
 
diff --git a/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx b/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx
index 2dad7ee9618..5845f40e03d 100644
--- a/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx
@@ -41,8 +41,6 @@ export type RepeatDirection = 'v' | 'h';
 
 export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> implements SceneGridItemLike {
   private _prevRepeatValues?: VariableValueSingle[];
-  private _prevPanelState: VizPanelState | undefined;
-  private _prevGridItemState: DashboardGridItemState | undefined;
 
   protected _variableDependency = new DashboardGridItemVariableDependencyHandler(this);
 
@@ -55,17 +53,10 @@ export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> i
   private _activationHandler() {
     if (this.state.variableName) {
       this._subs.add(this.subscribeToState((newState, prevState) => this._handleGridResize(newState, prevState)));
-      this.clearCachedStateIfBodyOrOptionsChanged();
       this.performRepeat();
     }
   }
 
-  private clearCachedStateIfBodyOrOptionsChanged() {
-    if (this._prevGridItemState !== this.state || this._prevPanelState !== this.state.body.state) {
-      this._prevRepeatValues = undefined;
-    }
-  }
-
   /**
    * Uses the current repeat item count to calculate the user intended desired itemHeight
    */
@@ -179,8 +170,6 @@ export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> i
       }
     }
 
-    this._prevGridItemState = this.state;
-    this._prevPanelState = this.state.body.state;
     this._prevRepeatValues = values;
 
     // Used from dashboard url sync
@@ -214,14 +203,18 @@ export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> i
         $variables: this.state.repeatedPanels![0].state.$variables?.clone(),
         $data: this.state.repeatedPanels![0].state.$data?.clone(),
       });
-      this._prevPanelState = this.state.body.state;
     }
   }
 
   /**
    * Going back to dashboards logic
+   * withChanges true if there where changes made while in panel edit
    */
-  public editingCompleted() {
+  public editingCompleted(withChanges: boolean) {
+    if (withChanges) {
+      this._prevRepeatValues = undefined;
+    }
+
     if (this.state.variableName && this.state.repeatDirection === 'h' && this.state.width !== GRID_COLUMN_COUNT) {
       this.setState({ width: GRID_COLUMN_COUNT });
     }