[v11.1.x] Scenes: Repeat horizontally set the width to 24 even if repeat variab… (#89680)

Scenes: Repeat horizontally set the width to 24 even if repeat variable is not set (#89658)

(cherry picked from commit 6773f7f4ce)

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts

@@ -504,6 +504,47 @@ describe('transformSaveModelToScene', () => {
       expect(repeater.state.maxPerRow).toBe(8);
     });
 
+    it('When horizontal repeat is set should modify the width to 24', () => {
+      const panel = {
+        title: '',
+        type: 'text-plugin-34',
+        gridPos: { x: 0, y: 0, w: 8, h: 8 },
+        repeat: 'server',
+        repeatDirection: 'h',
+        maxPerRow: 8,
+      };
+
+      const gridItem = buildGridItemForPanel(new PanelModel(panel));
+      const repeater = gridItem as DashboardGridItem;
+
+      expect(repeater.state.maxPerRow).toBe(8);
+      expect(repeater.state.variableName).toBe('server');
+      expect(repeater.state.width).toBe(24);
+      expect(repeater.state.height).toBe(8);
+      expect(repeater.state.repeatDirection).toBe('h');
+      expect(repeater.state.maxPerRow).toBe(8);
+    });
+
+    it('When horizontal repeat is NOT fully configured should not modify the width', () => {
+      const panel = {
+        title: '',
+        type: 'text-plugin-34',
+        gridPos: { x: 0, y: 0, w: 8, h: 8 },
+        repeatDirection: 'h',
+        maxPerRow: 8,
+      };
+
+      const gridItem = buildGridItemForPanel(new PanelModel(panel));
+      const repeater = gridItem as DashboardGridItem;
+
+      expect(repeater.state.maxPerRow).toBe(8);
+      expect(repeater.state.variableName).toBe(undefined);
+      expect(repeater.state.width).toBe(8);
+      expect(repeater.state.height).toBe(8);
+      expect(repeater.state.repeatDirection).toBe(undefined);
+      expect(repeater.state.maxPerRow).toBe(8);
+    });
+
     it('should apply query caching options to SceneQueryRunner', () => {
       const panel = {
         title: '',

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts

@@ -443,11 +443,10 @@ export function buildGridItemForLibPanel(panel: PanelModel) {
 }
 
 export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem {
-  const repeatDirection: RepeatDirection = panel.repeatDirection === 'h' ? 'h' : 'v';
-  const repeatOptions = panel.repeat
+  const repeatOptions: Partial<{ variableName: string; repeatDirection: RepeatDirection }> = panel.repeat
     ? {
         variableName: panel.repeat,
-        repeatDirection,
+        repeatDirection: panel.repeatDirection === 'h' ? 'h' : 'v',
       }
     : {};
 
@@ -501,7 +500,7 @@ export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem {
     key: `grid-item-${panel.id}`,
     x: panel.gridPos.x,
     y: panel.gridPos.y,
-    width: repeatDirection === 'h' ? 24 : panel.gridPos.w,
+    width: repeatOptions.repeatDirection === 'h' ? 24 : panel.gridPos.w,
     height: panel.gridPos.h,
     itemHeight: panel.gridPos.h,
     body,