DashboardScene: Fixes issue with height of repeated panels inside row (#76189)

DashboardScene: Fixes issue with height in panel repeat inside row repeat

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

@@ -1,14 +1,30 @@
-import { EmbeddedScene, SceneTimeRange, SceneVariableSet, TestVariable, VizPanel } from '@grafana/scenes';
+import { getPanelPlugin } from '@grafana/data/test/__mocks__/pluginMocks';
+import { setPluginImportUtils } from '@grafana/runtime';
+import {
+  EmbeddedScene,
+  SceneGridLayout,
+  SceneGridRow,
+  SceneTimeRange,
+  SceneVariableSet,
+  TestVariable,
+  VizPanel,
+} from '@grafana/scenes';
 import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/constants';
 
+import { activateFullSceneTree } from '../utils/test-utils';
+
 import { PanelRepeaterGridItem, RepeatDirection } from './PanelRepeaterGridItem';
 
+setPluginImportUtils({
+  importPanelPlugin: (id: string) => Promise.resolve(getPanelPlugin({})),
+  getPanelPluginFromCache: (id: string) => undefined,
+});
+
 describe('PanelRepeaterGridItem', () => {
   it('Given scene with variable with 2 values', async () => {
     const { scene, repeater } = buildScene({ variableQueryTime: 0 });
 
-    scene.activate();
-    repeater.activate();
+    activateFullSceneTree(scene);
 
     expect(repeater.state.repeatedPanels?.length).toBe(5);
 
@@ -24,8 +40,7 @@ describe('PanelRepeaterGridItem', () => {
   it('Should wait for variable to load', async () => {
     const { scene, repeater } = buildScene({ variableQueryTime: 1 });
 
-    scene.activate();
-    repeater.activate();
+    activateFullSceneTree(scene);
 
     expect(repeater.state.repeatedPanels?.length).toBe(0);
 
@@ -37,18 +52,21 @@ describe('PanelRepeaterGridItem', () => {
   it('Should adjust container height to fit panels direction is horizontal', async () => {
     const { scene, repeater } = buildScene({ variableQueryTime: 0, maxPerRow: 2, itemHeight: 10 });
 
-    scene.activate();
-    repeater.activate();
+    const layoutForceRender = jest.fn();
+    (scene.state.body as SceneGridLayout).forceRender = layoutForceRender;
+
+    activateFullSceneTree(scene);
 
     // panels require 3 rows so total height should be 30
     expect(repeater.state.height).toBe(30);
+    // Should update layout state by force re-render
+    expect(layoutForceRender.mock.calls.length).toBe(1);
   });
 
   it('Should adjust container height to fit panels when direction is vertical', async () => {
     const { scene, repeater } = buildScene({ variableQueryTime: 0, itemHeight: 10, repeatDirection: 'v' });
 
-    scene.activate();
-    repeater.activate();
+    activateFullSceneTree(scene);
 
     // In vertical direction height itemCount * itemHeight
     expect(repeater.state.height).toBe(50);
@@ -62,8 +80,7 @@ describe('PanelRepeaterGridItem', () => {
       maxPerRow: 4,
     });
 
-    scene.activate();
-    repeater.activate();
+    activateFullSceneTree(scene);
 
     // Sould be two rows (5 panels and maxPerRow 5)
     expect(repeater.state.height).toBe(20);
@@ -81,8 +98,7 @@ describe('PanelRepeaterGridItem', () => {
       repeatDirection: 'v',
     });
 
-    scene.activate();
-    repeater.activate();
+    activateFullSceneTree(scene);
 
     // In vertical direction height itemCount * itemHeight
     expect(repeater.state.height).toBe(50);
@@ -136,7 +152,13 @@ function buildScene(options: SceneOptions) {
         }),
       ],
     }),
-    body: repeater,
+    body: new SceneGridLayout({
+      children: [
+        new SceneGridRow({
+          children: [repeater],
+        }),
+      ],
+    }),
   });
 
   return { scene, repeater };

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

@@ -127,6 +127,7 @@ export class PanelRepeaterGridItem extends SceneObjectBase<PanelRepeaterGridItem
     const direction = this.getRepeatDirection();
     const stateChange: Partial<PanelRepeaterGridItemState> = { repeatedPanels: repeatedPanels };
     const itemHeight = this.state.itemHeight ?? 10;
+    const prevHeight = this.state.height;
     const maxPerRow = this.getMaxPerRow();
 
     if (direction === 'h') {
@@ -139,8 +140,11 @@ export class PanelRepeaterGridItem extends SceneObjectBase<PanelRepeaterGridItem
     this.setState(stateChange);
 
     // In case we updated our height the grid layout needs to be update
-    if (this.parent instanceof SceneGridLayout) {
-      this.parent!.forceRender();
+    if (prevHeight !== this.state.height) {
+      const layout = sceneGraph.getLayout(this);
+      if (layout instanceof SceneGridLayout) {
+        layout.forceRender();
+      }
     }
   }