[Release v12.0.1] Dashboard: Fixes issue with row repeats and first row (#104469)

Dashboard: Fixes issue with row repeats and first row (#104265)

* working

* Update

* Add test

* Update

(cherry picked from commit c8fb66dd48)

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

@@ -61,7 +61,7 @@ describe('RowRepeaterBehavior', () => {
 
       const gridItemRow1 = row1.state.children[0] as SceneGridItem;
       expect(gridItemRow1.state.key!).toBe(joinCloneKeys(row1.state.key!, 'grid-item-1'));
-      expect(gridItemRow1.state.body?.state.key).toBe(joinCloneKeys(gridItemRow1.state.key!, 'canvas-1'));
+      expect(gridItemRow1.state.body?.state.key).toBe('canvas-1');
 
       const row2 = grid.state.children[2] as SceneGridRow;
       expect(row2.state.key).toBe(getCloneKey('row-1', 1));
@@ -140,6 +140,9 @@ describe('RowRepeaterBehavior', () => {
     });
 
     it('Should handle second repeat cycle and update remove old repeats', async () => {
+      const sourceRow = grid.state.children[1] as SceneGridRow;
+      const sourceGridItem = sourceRow.state.children[0] as SceneGridItem;
+
       // trigger another repeat cycle by changing the variable
       const variable = scene.state.$variables!.state.variables[0] as TestVariable;
       variable.changeValueTo(['B1', 'C1']);
@@ -148,6 +151,12 @@ describe('RowRepeaterBehavior', () => {
 
       // should now only have 2 repeated rows (and the panel above + the row at the bottom)
       expect(grid.state.children.length).toBe(4);
+
+      // Should reuse source row item instances
+      const sourceRowAfterRepeat = grid.state.children[1] as SceneGridRow;
+      const sourceItemAfterRepeat = sourceRowAfterRepeat.state.children[0] as SceneGridItem;
+      expect(sourceRowAfterRepeat).toBe(sourceRow);
+      expect(sourceItemAfterRepeat).toBe(sourceGridItem);
     });
 
     it('Should ignore repeat process if variable values are the same', async () => {

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

@@ -26,8 +26,6 @@ import {
 import { getMultiVariableValues } from '../../utils/utils';
 import { DashboardRepeatsProcessedEvent } from '../types/DashboardRepeatsProcessedEvent';
 
-import { DashboardGridItem } from './DashboardGridItem';
-
 interface RowRepeaterBehaviorState extends SceneObjectState {
   variableName: string;
 }
@@ -196,15 +194,22 @@ export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorStat
 
         const cloneItemKey = joinCloneKeys(rowCloneKey, getLastKeyFromClone(sourceItem.state.key!));
         const cloneItemY = sourceItemY + (rowContentHeight + 1) * rowIndex;
+        const cloneItem =
+          rowIndex > 0
+            ? sourceItem.clone({
+                isDraggable: false,
+                isResizable: false,
+              })
+            : sourceItem;
 
-        const cloneItem = sourceItem.clone({
+        cloneItem.setState({
           key: cloneItemKey,
           y: cloneItemY,
-          isDraggable: !isSourceRow && sourceItem instanceof DashboardGridItem ? false : sourceItem.state.isDraggable,
-          isResizable: !isSourceRow && sourceItem instanceof DashboardGridItem ? false : sourceItem.state.isResizable,
         });
 
-        ensureUniqueKeys(cloneItem, cloneItemKey);
+        if (rowIndex > 0) {
+          ensureUniqueKeys(cloneItem, cloneItemKey);
+        }
 
         children.push(cloneItem);