AutoGridLayoutManager: Preserve variableName when switching between auto and custom grids (#104856)

preserve variableName when switching between auto and custom grids

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

@@ -15,6 +15,7 @@ import {
   getPanelIdForVizPanel,
   getVizPanelKeyForPanelId,
 } from '../../utils/utils';
+import { DashboardGridItem } from '../layout-default/DashboardGridItem';
 import { clearClipboard, getAutoGridItemFromClipboard } from '../layouts-shared/paste';
 import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
 import { LayoutRegistryItem } from '../types/LayoutRegistryItem';
@@ -261,7 +262,8 @@ export class AutoGridLayoutManager
     const children: AutoGridItem[] = [];
 
     for (let panel of panels) {
-      children.push(new AutoGridItem({ body: panel.clone() }));
+      const variableName = panel.parent instanceof DashboardGridItem ? panel.parent.state.variableName : undefined;
+      children.push(new AutoGridItem({ body: panel.clone(), variableName }));
     }
 
     const layoutManager = AutoGridLayoutManager.createEmpty();

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

@@ -40,6 +40,7 @@ import {
   getLayoutOrchestratorFor,
   getDashboardSceneFor,
 } from '../../utils/utils';
+import { AutoGridItem } from '../layout-auto-grid/AutoGridItem';
 import { CanvasGridAddActions } from '../layouts-shared/CanvasGridAddActions';
 import { clearClipboard, getDashboardGridItemFromClipboard } from '../layouts-shared/paste';
 import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
@@ -490,6 +491,8 @@ export class DefaultGridLayoutManager
     let currentX = 0;
 
     for (let panel of panels) {
+      const variableName = panel.parent instanceof AutoGridItem ? panel.parent.state.variableName : undefined;
+
       panel.clearParent();
 
       children.push(
@@ -499,7 +502,9 @@ export class DefaultGridLayoutManager
           y: currentY,
           width: panelWidth,
           height: panelHeight,
+          itemHeight: panelHeight,
           body: panel,
+          variableName,
         })
       );