DashboardScene: Implement autofit panels (#85221)

package.json

@@ -255,7 +255,7 @@
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
     "@grafana/saga-icons": "workspace:*",
-    "@grafana/scenes": "4.1.2",
+    "@grafana/scenes": "^4.2.0",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",

public/app/features/dashboard-scene/embedding/EmbeddedDashboardTestPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { PageLayoutType } from '@grafana/data';
 import { Box } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
@@ -12,6 +13,7 @@ export function EmbeddedDashboardTestPage() {
     <Page
       navId="dashboards/browse"
       pageNav={{ text: 'Embedding dashboard', subTitle: 'Showing dashboard: Panel Tests - Pie chart' }}
+      layout={PageLayoutType.Canvas}
     >
       <Box paddingY={2}>Internal url state: {state}</Box>
       <EmbeddedDashboard uid="lVE-2YFMz" initialState={state} onStateChange={setState} />

public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.test.ts

@@ -25,6 +25,20 @@ describe('DashboardSceneUrlSync', () => {
       scene.urlSync?.updateFromUrl({ viewPanel: '2' });
       expect(scene.state.viewPanelScene!.getUrlKey()).toBe('panel-2');
     });
+
+    it('Should set UNSAFE_fitPanels when url has autofitpanels', () => {
+      const scene = buildTestScene();
+      scene.urlSync?.updateFromUrl({ autofitpanels: '' });
+      expect((scene.state.body as SceneGridLayout).state.UNSAFE_fitPanels).toBe(true);
+    });
+
+    it('Should get the autofitpanels from the scene state', () => {
+      const scene = buildTestScene();
+
+      expect(scene.urlSync?.getUrlState().autofitpanels).toBeUndefined();
+      (scene.state.body as SceneGridLayout).setState({ UNSAFE_fitPanels: true });
+      expect(scene.urlSync?.getUrlState().autofitpanels).toBe('true');
+    });
   });
 
   describe('Given a viewPanelKey with clone that is not found', () => {

public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts

@@ -3,6 +3,7 @@ import { Unsubscribable } from 'rxjs';
 import { AppEvents } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import {
+  SceneGridLayout,
   SceneObjectBase,
   SceneObjectState,
   SceneObjectUrlSyncHandler,
@@ -27,13 +28,14 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
   constructor(private _scene: DashboardScene) {}
 
   getKeys(): string[] {
-    return ['inspect', 'viewPanel', 'editPanel', 'editview'];
+    return ['inspect', 'viewPanel', 'editPanel', 'editview', 'autofitpanels'];
   }
 
   getUrlState(): SceneObjectUrlValues {
     const state = this._scene.state;
     return {
       inspect: state.inspectPanelKey,
+      autofitpanels: state.body instanceof SceneGridLayout && !!state.body.state.UNSAFE_fitPanels ? 'true' : undefined,
       viewPanel: state.viewPanelScene?.getUrlKey(),
       editview: state.editview?.getUrlKey(),
       editPanel: state.editPanel?.getUrlKey() || undefined,
@@ -138,6 +140,14 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
       update.editPanel = undefined;
     }
 
+    if (this._scene.state.body instanceof SceneGridLayout) {
+      const UNSAFE_fitPanels = typeof values.autofitpanels === 'string';
+
+      if (!!this._scene.state.body.state.UNSAFE_fitPanels !== UNSAFE_fitPanels) {
+        this._scene.state.body.setState({ UNSAFE_fitPanels });
+      }
+    }
+
     if (Object.keys(update).length > 0) {
       this._scene.setState(update);
     }

yarn.lock

@@ -4170,9 +4170,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:4.1.2":
-  version: 4.1.2
-  resolution: "@grafana/scenes@npm:4.1.2"
+"@grafana/scenes@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "@grafana/scenes@npm:4.2.0"
   dependencies:
     "@grafana/e2e-selectors": "npm:10.3.3"
     react-grid-layout: "npm:1.3.4"
@@ -4186,7 +4186,7 @@ __metadata:
     "@grafana/ui": ^10.0.3
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10/3627d1f200b30872615d9427af3bdac534f8a39a5dd1ba1b3a55b9e6664cf5f0e9750fd9c0d36d1e54d7dd20f7e74a8f5e56f3e145e02f315bd9f104cdb448bd
+  checksum: 10/546bc27da9bde69dce23da4907014b8e0ff630a1dd43c87152f6537cebfeb31c4b3c475d05db7a93d241f7c9865cc0b1a16cc068c48dac2f4d589ecca11362de
   languageName: node
   linkType: hard
 
@@ -18652,7 +18652,7 @@ __metadata:
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
     "@grafana/saga-icons": "workspace:*"
-    "@grafana/scenes": "npm:4.1.2"
+    "@grafana/scenes": "npm:^4.2.0"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"
@@ -23550,7 +23550,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^2.0.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
+"node-fetch@npm:^2.0.0, node-fetch@npm:^2.6.7":
+  version: 2.6.12
+  resolution: "node-fetch@npm:2.6.12"
+  dependencies:
+    whatwg-url: "npm:^5.0.0"
+  peerDependencies:
+    encoding: ^0.1.0
+  peerDependenciesMeta:
+    encoding:
+      optional: true
+  checksum: 10/370ed4d906edad9709a81b54a0141d37d2973a27dc80c723d8ac14afcec6dc67bc6c70986a96992b64ec75d08159cc4b65ce6aa9063941168ea5ac73b24df9f8
+  languageName: node
+  linkType: hard
+
+"node-fetch@npm:^2.6.1":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
   dependencies: