AutoGridLayoutManager: Fix viz panel key duplication in auto and custom layouts (#103727)

* fix  viz panel key duplication in auto and custom layouts

* clean up

public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManager.tsx

@@ -114,18 +114,30 @@ export class AutoGridLayoutManager
   }
 
   public duplicate(): DashboardLayoutManager {
+    const children = this.state.layout.state.children;
+    const clonedChildren: AutoGridItem[] = [];
+
+    if (children.length) {
+      let panelId = dashboardSceneGraph.getNextPanelId(children[0].state.body);
+
+      children.forEach((child) => {
+        const clone = child.clone({
+          key: undefined,
+          body: child.state.body.clone({
+            key: getVizPanelKeyForPanelId(panelId),
+          }),
+        });
+
+        clonedChildren.push(clone);
+        panelId++;
+      });
+    }
+
     return this.clone({
       key: undefined,
       layout: this.state.layout.clone({
         key: undefined,
-        children: this.state.layout.state.children.map((child) =>
-          child.clone({
-            key: undefined,
-            body: child.state.body.clone({
-              key: getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(child.state.body)),
-            }),
-          })
-        ),
+        children: clonedChildren,
       }),
     });
   }

public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx

@@ -229,22 +229,35 @@ export class DefaultGridLayoutManager
   }
 
   public duplicate(): DashboardLayoutManager {
+    const children = this.state.grid.state.children;
+    const hasGridItem = children.find((child) => child instanceof DashboardGridItem);
+    const clonedChildren: SceneGridItemLike[] = [];
+
+    if (children.length) {
+      let panelId = hasGridItem ? dashboardSceneGraph.getNextPanelId(hasGridItem.state.body) : 1;
+
+      children.forEach((child) => {
+        if (child instanceof DashboardGridItem) {
+          const clone = child.clone({
+            key: undefined,
+            body: child.state.body.clone({
+              key: getVizPanelKeyForPanelId(panelId),
+            }),
+          });
+
+          clonedChildren.push(clone);
+          panelId++;
+        } else {
+          clonedChildren.push(child.clone({ key: undefined }));
+        }
+      });
+    }
+
     const clone = this.clone({
       key: undefined,
       grid: this.state.grid.clone({
         key: undefined,
-        children: this.state.grid.state.children.map((child) => {
-          if (child instanceof DashboardGridItem) {
-            return child.clone({
-              key: undefined,
-              body: child.state.body.clone({
-                key: getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(child.state.body)),
-              }),
-            });
-          }
-
-          return child.clone({ key: undefined });
-        }),
+        children: clonedChildren,
       }),
     });