[v11.1.x] DashboardScene: Fix dashboard clear when row repeating with non-existing variable (#89561)

DashboardScene: Fix dashboard clear when row repeating with non-existing variable (#89559)

---------

Co-authored-by: Sergej-Vlasov <sergej.s.vlasov@gmail.com>
(cherry picked from commit 7feea32602)

Co-authored-by: Alexa V <239999+axelavargas@users.noreply.github.com>

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

@@ -6,6 +6,7 @@ import {
   SceneTimeRange,
   SceneVariableSet,
   TestVariable,
+  VariableValueOption,
 } from '@grafana/scenes';
 import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/constants';
 
@@ -117,6 +118,18 @@ describe('RowRepeaterBehavior', () => {
       expect(row2.state.y).toBe(11);
     });
   });
+
+  describe('Given a scene with empty variable', () => {
+    it('Should preserve repeat row', async () => {
+      const { scene, grid } = buildScene({ variableQueryTime: 0 }, []);
+      activateFullSceneTree(scene);
+      await new Promise((r) => setTimeout(r, 1));
+
+      // Should have 3 rows, two without repeat and one with the dummy row
+      expect(grid.state.children.length).toBe(3);
+      expect(grid.state.children[1].state.$behaviors?.[0]).toBeInstanceOf(RowRepeaterBehavior);
+    });
+  });
 });
 
 interface SceneOptions {
@@ -126,7 +139,7 @@ interface SceneOptions {
   repeatDirection?: RepeatDirection;
 }
 
-function buildScene(options: SceneOptions) {
+function buildScene(options: SceneOptions, variableOptions?: VariableValueOption[]) {
   const repeatBehavior = new RowRepeaterBehavior({ variableName: 'server' });
 
   const grid = new SceneGridLayout({
@@ -203,7 +216,7 @@ function buildScene(options: SceneOptions) {
           isMulti: true,
           includeAll: true,
           delayMs: options.variableQueryTime,
-          optionsToReturn: [
+          optionsToReturn: variableOptions ?? [
             { label: 'A', value: 'A1' },
             { label: 'B', value: 'B1' },
             { label: 'C', value: 'C1' },

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

@@ -99,10 +99,18 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
 
     let maxYOfRows = 0;
 
+    const emptyVariablePlaceholderOption = {
+      values: ['placeholder'],
+      texts: variable.hasAllValue() ? ['All'] : ['None'],
+    };
+
+    const variableValues = values.length ? values : emptyVariablePlaceholderOption.values;
+    const variableTexts = texts.length ? texts : emptyVariablePlaceholderOption.texts;
+
     // Loop through variable values and create repeates
-    for (let index = 0; index < values.length; index++) {
+    for (let index = 0; index < variableValues.length; index++) {
       const children: SceneGridItemLike[] = [];
-      const localValue = values[index];
+      const localValue = variableValues[index];
 
       // Loop through panels inside row
       for (const source of rowContent) {
@@ -123,7 +131,14 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
         }
       }
 
-      const rowClone = this.getRowClone(rowToRepeat, index, localValue, texts[index], rowContentHeight, children);
+      const rowClone = this.getRowClone(
+        rowToRepeat,
+        index,
+        localValue,
+        variableTexts[index],
+        rowContentHeight,
+        children
+      );
       rows.push(rowClone);
     }