From 7feea32602d5c0d60499fa9e3a430feec0fc62a5 Mon Sep 17 00:00:00 2001
From: Alexa V <239999+axelavargas@users.noreply.github.com>
Date: Fri, 21 Jun 2024 16:59:38 +0200
Subject: [PATCH] DashboardScene: Fix dashboard clear when row repeating with
 non-existing variable (#89559)

---------

Co-authored-by: Sergej-Vlasov <sergej.s.vlasov@gmail.com>
---
 .../scene/RowRepeaterBehavior.test.tsx        | 17 +++++++++++++--
 .../scene/RowRepeaterBehavior.ts              | 21 ++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/RowRepeaterBehavior.test.tsx b/public/app/features/dashboard-scene/scene/RowRepeaterBehavior.test.tsx
index 7b13b67d9b4..ec36dafc8e2 100644
--- a/public/app/features/dashboard-scene/scene/RowRepeaterBehavior.test.tsx
+++ b/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' },
diff --git a/public/app/features/dashboard-scene/scene/RowRepeaterBehavior.ts b/public/app/features/dashboard-scene/scene/RowRepeaterBehavior.ts
index 11970f887b7..5ef6c6137ec 100644
--- a/public/app/features/dashboard-scene/scene/RowRepeaterBehavior.ts
+++ b/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);
     }