Repeat panels when row is expanding (#10679)

* fix: repeat panels when row is expanding

* repeat panel: change test name to more clear one

public/app/features/dashboard/dashboard_model.ts

@@ -569,6 +569,7 @@ export class DashboardModel {
 
 
     if (row.collapsed) {
     if (row.collapsed) {
       row.collapsed = false;
       row.collapsed = false;
+      let hasRepeat = false;
 
 
       if (row.panels.length > 0) {
       if (row.panels.length > 0) {
         // Use first panel to figure out if it was moved or pushed
         // Use first panel to figure out if it was moved or pushed
@@ -589,6 +590,10 @@ export class DashboardModel {
           // update insert post and y max
           // update insert post and y max
           insertPos += 1;
           insertPos += 1;
           yMax = Math.max(yMax, panel.gridPos.y + panel.gridPos.h);
           yMax = Math.max(yMax, panel.gridPos.y + panel.gridPos.h);
+
+          if (panel.repeat) {
+            hasRepeat = true;
+          }
         }
         }
 
 
         const pushDownAmount = yMax - row.gridPos.y;
         const pushDownAmount = yMax - row.gridPos.y;
@@ -599,6 +604,10 @@ export class DashboardModel {
         }
         }
 
 
         row.panels = [];
         row.panels = [];
+
+        if (hasRepeat) {
+          this.processRepeats();
+        }
       }
       }
 
 
       // sort panels
       // sort panels

public/app/features/dashboard/specs/repeat.jest.ts

@@ -4,6 +4,57 @@ import { expect } from 'test/lib/common';
 
 
 jest.mock('app/core/services/context_srv', () => ({}));
 jest.mock('app/core/services/context_srv', () => ({}));
 
 
+describe('given dashboard with panel repeat', function() {
+  var dashboard;
+
+  beforeEach(function() {
+    let dashboardJSON = {
+      panels: [
+        { id: 1, type: 'row', gridPos: { x: 0, y: 0, h: 1, w: 24 } },
+        { id: 2, repeat: 'apps', repeatDirection: 'h', gridPos: { x: 0, y: 1, h: 2, w: 8 } },
+      ],
+      templating: {
+        list: [
+          {
+            name: 'apps',
+            current: {
+              text: 'se1, se2, se3',
+              value: ['se1', 'se2', 'se3'],
+            },
+            options: [
+              { text: 'se1', value: 'se1', selected: true },
+              { text: 'se2', value: 'se2', selected: true },
+              { text: 'se3', value: 'se3', selected: true },
+              { text: 'se4', value: 'se4', selected: false },
+            ],
+          },
+        ],
+      },
+    };
+    dashboard = new DashboardModel(dashboardJSON);
+    dashboard.processRepeats();
+  });
+
+  it('should repeat panels when row is expanding', function() {
+    expect(dashboard.panels.length).toBe(4);
+
+    // toggle row
+    dashboard.toggleRow(dashboard.panels[0]);
+    expect(dashboard.panels.length).toBe(1);
+
+    // change variable
+    dashboard.templating.list[0].options[2].selected = false;
+    dashboard.templating.list[0].current = {
+      text: 'se1, se2',
+      value: ['se1', 'se2'],
+    };
+
+    // toggle row back
+    dashboard.toggleRow(dashboard.panels[0]);
+    expect(dashboard.panels.length).toBe(3);
+  });
+});
+
 describe('given dashboard with panel repeat in horizontal direction', function() {
 describe('given dashboard with panel repeat in horizontal direction', function() {
   var dashboard;
   var dashboard;