DashboardScene: Fix explore to dashboard flow (#85140)

* DashboardScene: Fix explore to dashboard flow

* Tests

* Make sure dashboard is in edit mode when adding from explore

* Allow discarding changes when coming from explore

* Tests

public/app/features/dashboard-scene/scene/DashboardScene.test.tsx

@@ -863,6 +863,53 @@ describe('DashboardScene', () => {
       }
     });
   });
+
+  describe('When coming from explore', () => {
+    // When coming from Explore the first panel in a dashboard is a temporary panel
+    it('should remove first panel from the grid when discarding changes', () => {
+      const scene = new DashboardScene({
+        title: 'hello',
+        uid: 'dash-1',
+        description: 'hello description',
+        editable: true,
+        $timeRange: new SceneTimeRange({
+          timeZone: 'browser',
+        }),
+        controls: new DashboardControls({}),
+        $behaviors: [new behaviors.CursorSync({})],
+        body: new SceneGridLayout({
+          children: [
+            new DashboardGridItem({
+              key: 'griditem-1',
+              x: 0,
+              body: new VizPanel({
+                title: 'Panel A',
+                key: 'panel-1',
+                pluginId: 'table',
+                $data: new SceneQueryRunner({ key: 'data-query-runner', queries: [{ refId: 'A' }] }),
+              }),
+            }),
+            new DashboardGridItem({
+              key: 'griditem-2',
+              body: new VizPanel({
+                title: 'Panel B',
+                key: 'panel-2',
+                pluginId: 'table',
+              }),
+            }),
+          ],
+        }),
+      });
+
+      scene.onEnterEditMode(true);
+      expect(scene.state.isEditing).toBe(true);
+      expect((scene.state.body as SceneGridLayout).state.children.length).toBe(2);
+
+      scene.exitEditMode({ skipConfirm: true });
+      expect(scene.state.isEditing).toBe(false);
+      expect((scene.state.body as SceneGridLayout).state.children.length).toBe(1);
+    });
+  });
 });
 
 function buildTestScene(overrides?: Partial<DashboardSceneState>) {

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -145,6 +145,11 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
    */
   private _changeTracker: DashboardSceneChangeTracker;
 
+  /**
+   * Flag to indicate if the user came from Explore
+   */
+  private _fromExplore = false;
+
   public constructor(state: Partial<DashboardSceneState>) {
     super({
       title: 'Dashboard',
@@ -211,9 +216,11 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
     getUrlSyncManager().cleanUp(this);
   }
 
-  public onEnterEditMode = () => {
+  public onEnterEditMode = (fromExplore = false) => {
+    this._fromExplore = fromExplore;
     // Save this state
     this._initialState = sceneUtils.cloneSceneObjectState(this.state);
+
     this._initialUrlState = locationService.getLocation();
 
     // Switch to edit mode
@@ -299,6 +306,10 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
       })
     );
 
+    if (this._fromExplore) {
+      this.cleanupStateFromExplore();
+    }
+
     if (restoreInitialState) {
       //  Restore initial state and disable editing
       this.setState({ ...this._initialState, isEditing: false });
@@ -312,6 +323,20 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
     this.propagateEditModeChange();
   }
 
+  private cleanupStateFromExplore() {
+    this._fromExplore = false;
+    // When coming from explore but discarding changes, remove the panel that explore is potentially adding.
+    if (this._initialSaveModel?.panels) {
+      this._initialSaveModel.panels = this._initialSaveModel.panels.slice(1);
+    }
+
+    if (this._initialState && this._initialState.body instanceof SceneGridLayout) {
+      this._initialState.body.setState({
+        children: this._initialState.body.state.children.slice(1),
+      });
+    }
+  }
+
   public canDiscard() {
     return this._initialState !== undefined;
   }