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>

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