Scenes/LibraryPanels: Fixes issue where repeat panel would disappear if dashboard didn't have variable used by lib panel (#83780)

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

@@ -84,15 +84,16 @@ export class LibraryVizPanel extends SceneObjectBase<LibraryVizPanelState> {
 
       const panel = new VizPanel(vizPanelState);
       const gridItem = this.parent;
+
       if (libPanelModel.repeat && gridItem instanceof SceneGridItem && gridItem.parent instanceof SceneGridLayout) {
         this._parent = undefined;
         const repeater = new PanelRepeaterGridItem({
           key: gridItem.state.key,
-          x: libPanelModel.gridPos.x,
-          y: libPanelModel.gridPos.y,
-          width: libPanelModel.repeatDirection === 'h' ? 24 : libPanelModel.gridPos.w,
-          height: libPanelModel.gridPos.h,
-          itemHeight: libPanelModel.gridPos.h,
+          x: gridItem.state.x,
+          y: gridItem.state.y,
+          width: libPanelModel.repeatDirection === 'h' ? 24 : gridItem.state.width,
+          height: gridItem.state.height,
+          itemHeight: gridItem.state.height,
           source: this,
           variableName: libPanelModel.repeat,
           repeatedPanels: [],

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

@@ -98,7 +98,7 @@ describe('PanelRepeaterGridItem', () => {
     expect(repeater.state.itemHeight).toBe(5);
   });
 
-  it('When updating variable should update repeats', async () => {
+  it('Should update repeats when updating variable', async () => {
     const { scene, repeater, variable } = buildPanelRepeaterScene({ variableQueryTime: 0 });
 
     activateFullSceneTree(scene);
@@ -107,4 +107,13 @@ describe('PanelRepeaterGridItem', () => {
 
     expect(repeater.state.repeatedPanels?.length).toBe(2);
   });
+
+  it('Should fall back to default variable if specified variable cannot be found', () => {
+    const { scene, repeater } = buildPanelRepeaterScene({ variableQueryTime: 0 });
+    scene.setState({ $variables: undefined });
+    activateFullSceneTree(scene);
+    expect(repeater.state.repeatedPanels?.[0].state.$variables?.state.variables[0].state.name).toBe(
+      '_____default_sys_repeat_var_____'
+    );
+  });
 });

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

@@ -14,6 +14,7 @@ import {
   sceneGraph,
   MultiValueVariable,
   LocalValueVariable,
+  CustomVariable,
 } from '@grafana/scenes';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
 
@@ -84,11 +85,15 @@ export class PanelRepeaterGridItem extends SceneObjectBase<PanelRepeaterGridItem
       return;
     }
 
-    const variable = sceneGraph.lookupVariable(this.state.variableName, this);
-    if (!variable) {
-      console.error('SceneGridItemRepeater: Variable not found');
-      return;
-    }
+    const variable =
+      sceneGraph.lookupVariable(this.state.variableName, this) ??
+      new CustomVariable({
+        name: '_____default_sys_repeat_var_____',
+        options: [],
+        value: '',
+        text: '',
+        query: 'A',
+      });
 
     if (!(variable instanceof MultiValueVariable)) {
       console.error('PanelRepeaterGridItem: Variable is not a MultiValueVariable');

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

@@ -1,6 +1,7 @@
 import { getDataSourceRef, IntervalVariableModel } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import {
+  CustomVariable,
   MultiValueVariable,
   SceneDataTransformer,
   sceneGraph,
@@ -93,7 +94,7 @@ export function forceRenderChildren(model: SceneObject, recursive?: boolean) {
   });
 }
 
-export function getMultiVariableValues(variable: MultiValueVariable) {
+export function getMultiVariableValues(variable: MultiValueVariable | CustomVariable) {
   const { value, text, options } = variable.state;
 
   if (variable.hasAllValue()) {