DashboardScene: prevent panel hovel header crop with scenes (#85869)

* add behaviour that adjusts hoverHeaderOffset

* clean up behaviour logic

* optimise and extract behaviour to separate file

* fix hoverHeaderOffsetBehavior unsubscribe

* update to latest scenes version

* Fix PanelOptionsTest

* fix: test value for adhoc filter url param

* Fix transformation tab tests

* bump scenes version

* Revert "Fix transformation tab tests"

This reverts commit 3ec9f5b226.

---------

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
Co-authored-by: Darren Janeczek <darren.janeczek@grafana.com>
Co-authored-by: oscarkilhed <oscar.kilhed@grafana.com>

package.json

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

public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx

@@ -22,6 +22,13 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getPluginImportUtils: () => ({
+    getPanelPluginFromCache: jest.fn(),
+  }),
+}));
+
 // Needed when the panel is not part of an DashboardScene
 jest.spyOn(utils, 'getDashboardSceneFor').mockReturnValue(new DashboardScene({}));
 

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

@@ -0,0 +1,18 @@
+import { VizPanel } from '@grafana/scenes';
+
+import { DashboardGridItem } from './DashboardGridItem';
+
+export const hoverHeaderOffsetBehavior = (grid: DashboardGridItem) => {
+  const sub = grid.subscribeToState((newState, prevState) => {
+    if ([newState.y, prevState.y].includes(0) && newState.y !== prevState.y) {
+      grid.forEachChild((child) => {
+        if (child instanceof VizPanel && child.state.hoverHeader) {
+          child.setState({ hoverHeaderOffset: grid.state.y === 0 ? 0 : undefined });
+        }
+      });
+    }
+  });
+  return () => {
+    sub.unsubscribe();
+  };
+};

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

@@ -47,6 +47,7 @@ import { panelLinksBehavior, panelMenuBehavior } from '../scene/PanelMenuBehavio
 import { PanelNotices } from '../scene/PanelNotices';
 import { PanelTimeRange } from '../scene/PanelTimeRange';
 import { RowRepeaterBehavior } from '../scene/RowRepeaterBehavior';
+import { hoverHeaderOffsetBehavior } from '../scene/hoverHeaderOffsetBehavior';
 import { RowActions } from '../scene/row-actions/RowActions';
 import { setDashboardPanelContext } from '../scene/setDashboardPanelContext';
 import { createPanelDataProvider } from '../utils/createPanelDataProvider';
@@ -506,6 +507,7 @@ export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem {
     displayMode: panel.transparent ? 'transparent' : undefined,
     // To be replaced with it's own option persited option instead derived
     hoverHeader: !panel.title && !panel.timeFrom && !panel.timeShift,
+    hoverHeaderOffset: (panel.gridPos?.y ?? 0) === 0 ? 0 : undefined,
     $data: createPanelDataProvider(panel),
     titleItems,
 
@@ -539,6 +541,7 @@ export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem {
     body,
     maxPerRow: panel.maxPerRow,
     ...repeatOptions,
+    $behaviors: [hoverHeaderOffsetBehavior],
   });
 }
 

public/app/features/trails/TrailStore/TrailStore.test.ts

@@ -136,7 +136,7 @@ describe('TrailStore', () => {
       ['to', 'now-30m'],
       ['var-ds', '1234'],
       ['var-groupby', 'job'],
-      ['var-filters', 'test'],
+      ['var-filters', 'cluster|=|dev-eu-west-2'],
     ])(`new recent trails with a different '%p' value should insert new entry`, (key, differentValue) => {
       const store = getTrailStore();
       // We expect the initialized trail to be there

yarn.lock

@@ -4183,9 +4183,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:^4.5.4":
-  version: 4.5.4
-  resolution: "@grafana/scenes@npm:4.5.4"
+"@grafana/scenes@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "@grafana/scenes@npm:4.6.0"
   dependencies:
     "@grafana/e2e-selectors": "npm:10.3.3"
     react-grid-layout: "npm:1.3.4"
@@ -4199,7 +4199,7 @@ __metadata:
     "@grafana/ui": ^10.0.3
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10/db483dfd204b5b3f2d61b72e1a4209137734ed20d860f823e48a549fee2f2ef490ab26ed239a13aed095d74f929200cb18a666bb995aad6ef785fb806cac65ce
+  checksum: 10/72682ce36cd505b7d0842f19e5e433b3dcb1675111c78b29d5c18761316e0e80c128e03cb0f72db72c6a9cde502915cb78751c2c13fc70412a0bead5d76fb050
   languageName: node
   linkType: hard
 
@@ -18671,7 +18671,7 @@ __metadata:
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
     "@grafana/saga-icons": "workspace:*"
-    "@grafana/scenes": "npm:^4.5.4"
+    "@grafana/scenes": "npm:^4.6.0"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"