Panel view: Make sure repeated panel has inView property set correctly (#27424)

* Make sure repeated panel has inView property set correctly

* Test

* Update public/app/features/dashboard/state/DashboardModel.ts

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

public/app/features/dashboard/state/DashboardModel.repeat.test.ts

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import { DashboardModel } from '../state/DashboardModel';
 import { expect } from 'test/lib/common';
 import { getDashboardModel } from '../../../../test/helpers/getDashboardModel';
+import { PanelModel } from './PanelModel';
 
 jest.mock('app/core/services/context_srv', () => ({}));
 
@@ -671,3 +672,60 @@ describe('given dashboard with row and panel repeat', () => {
     expect(dashboard.panels.length).toBe(4);
   });
 });
+
+describe('given panel is in view mode', () => {
+  let dashboard: any;
+
+  beforeEach(() => {
+    const dashboardJSON = {
+      panels: [
+        {
+          id: 1,
+          repeat: 'apps',
+          repeatDirection: 'h',
+          gridPos: { x: 0, y: 0, h: 2, w: 24 },
+        },
+      ],
+      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 = getDashboardModel(dashboardJSON);
+    dashboard.initViewPanel(
+      new PanelModel({
+        id: 2,
+        repeat: undefined,
+        repeatDirection: 'h',
+        panels: [
+          {
+            id: 2,
+            repeat: 'apps',
+            repeatDirection: 'h',
+            gridPos: { x: 0, y: 0, h: 2, w: 24 },
+          },
+        ],
+        repeatPanelId: 2,
+      })
+    );
+    dashboard.processRepeats();
+  });
+
+  it('should set correct repeated panel to be in view', () => {
+    expect(dashboard.panels[1].isViewing).toBeTruthy();
+  });
+});

public/app/features/dashboard/state/DashboardModel.ts

@@ -485,6 +485,7 @@ export class DashboardModel {
     }
 
     const clone = new PanelModel(sourcePanel.getSaveModel());
+
     clone.id = this.getNextPanelId();
 
     // insert after source panel + value index
@@ -494,6 +495,11 @@ export class DashboardModel {
     clone.repeatPanelId = sourcePanel.id;
     clone.repeat = undefined;
 
+    if (this.panelInView?.id === clone.id) {
+      clone.setIsViewing(true);
+      this.panelInView = clone;
+    }
+
     return clone;
   }
 
@@ -539,6 +545,7 @@ export class DashboardModel {
     }
 
     const selectedOptions = this.getSelectedVariableOptions(variable);
+
     const maxPerRow = panel.maxPerRow || 4;
     let xPos = 0;
     let yPos = panel.gridPos.y;