DashboardGridItem: Add placeholder option when repeat panel options are empty (#91149)

* add placeholder option for repeat panel with empty options

* add tests and update to scenes canary

* adjust tests to not fail on expected console.error

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

@@ -40,6 +40,54 @@ describe('PanelRepeaterGridItem', () => {
     expect(repeater.state.repeatedPanels?.length).toBe(5);
   });
 
+  it('Should display a panel when there are no options', async () => {
+    const { scene, repeater } = buildPanelRepeaterScene({ variableQueryTime: 1, numberOfOptions: 0 });
+
+    activateFullSceneTree(scene);
+
+    expect(repeater.state.repeatedPanels?.length).toBe(0);
+
+    await new Promise((r) => setTimeout(r, 10));
+
+    expect(repeater.state.repeatedPanels?.length).toBe(1);
+  });
+
+  it('Should display a panel when there are variable errors', () => {
+    const { scene, repeater } = buildPanelRepeaterScene({
+      variableQueryTime: 0,
+      numberOfOptions: 0,
+      throwError: 'Error',
+    });
+
+    // we expect console.error when variable encounters an error
+    const origError = console.error;
+    console.error = jest.fn();
+
+    activateFullSceneTree(scene);
+
+    expect(repeater.state.repeatedPanels?.length).toBe(1);
+    console.error = origError;
+  });
+
+  it('Should display a panel when there are variable errors async query', async () => {
+    const { scene, repeater } = buildPanelRepeaterScene({
+      variableQueryTime: 1,
+      numberOfOptions: 0,
+      throwError: 'Error',
+    });
+
+    // we expect console.error when variable encounters an error
+    const origError = console.error;
+    console.error = jest.fn();
+
+    activateFullSceneTree(scene);
+
+    await new Promise((r) => setTimeout(r, 10));
+
+    expect(repeater.state.repeatedPanels?.length).toBe(1);
+    console.error = origError;
+  });
+
   it('Should adjust container height to fit panels direction is horizontal', async () => {
     const { scene, repeater } = buildPanelRepeaterScene({ variableQueryTime: 0, maxPerRow: 2, itemHeight: 10 });
 

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

@@ -167,12 +167,26 @@ export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> i
     const panelToRepeat = this.state.body instanceof LibraryVizPanel ? this.state.body.state.panel! : this.state.body;
     const repeatedPanels: VizPanel[] = [];
 
+    // when variable has no options (due to error or similar) it will not render any panels at all
+    //  adding a placeholder in this case so that there is at least empty panel that can display error
+    const emptyVariablePlaceholderOption = {
+      values: [''],
+      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 repeats
-    for (let index = 0; index < values.length; index++) {
+    for (let index = 0; index < variableValues.length; index++) {
       const cloneState: Partial<VizPanelState> = {
         $variables: new SceneVariableSet({
           variables: [
-            new LocalValueVariable({ name: variable.state.name, value: values[index], text: String(texts[index]) }),
+            new LocalValueVariable({
+              name: variable.state.name,
+              value: variableValues[index],
+              text: String(variableTexts[index]),
+            }),
           ],
         }),
         key: `${panelToRepeat.state.key}-clone-${index}`,

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

@@ -107,8 +107,10 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
 
     let maxYOfRows = 0;
 
+    // when variable has no options (due to error or similar) it will not render any panels at all
+    //  adding a placeholder in this case so that there is at least empty panel that can display error
     const emptyVariablePlaceholderOption = {
-      values: ['placeholder'],
+      values: [''],
       texts: variable.hasAllValue() ? ['All'] : ['None'],
     };
 

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

@@ -102,6 +102,7 @@ interface SceneOptions {
   numberOfOptions?: number;
   usePanelRepeater?: boolean;
   useRowRepeater?: boolean;
+  throwError?: string;
 }
 
 export function buildPanelRepeaterScene(options: SceneOptions, source?: VizPanel | LibraryVizPanel) {
@@ -155,6 +156,7 @@ export function buildPanelRepeaterScene(options: SceneOptions, source?: VizPanel
       { label: 'D', value: '4' },
       { label: 'E', value: '5' },
     ].slice(0, options.numberOfOptions),
+    throwError: defaults.throwError,
   });
 
   const rowRepeatVariable = new TestVariable({
@@ -172,6 +174,7 @@ export function buildPanelRepeaterScene(options: SceneOptions, source?: VizPanel
       { label: 'DD', value: '44' },
       { label: 'EE', value: '55' },
     ].slice(0, options.numberOfOptions),
+    throwError: defaults.throwError,
   });
 
   const scene = new EmbeddedScene({