diff --git a/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx b/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx index 87b4860ae20..9b348e81abc 100644 --- a/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx @@ -128,18 +128,21 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase { if (gridItem) { // Only remove from source if not already detached during tab switch if (!wasDetached) { - this._sourceDropTarget?.draggedGridItemOutside?.(gridItem); + sourceDropTarget?.draggedGridItemOutside?.(gridItem); } - this._lastDropTarget?.draggedGridItemInside?.(gridItem); + lastDropTarget?.draggedGridItemInside?.(gridItem); } else { const warningMessage = 'No grid item to drag'; console.warn(warningMessage); @@ -153,6 +156,9 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase implements DashboardLayoutGroup { +export class RowsLayoutManager + extends SceneObjectBase + implements DashboardLayoutGroup, DashboardDropTarget +{ public static Component = RowLayoutManagerRenderer; public readonly isDashboardLayoutManager = true; + public readonly isDashboardDropTarget = true as const; public static readonly descriptor: LayoutRegistryItem = { get name() { @@ -62,6 +70,38 @@ export class RowsLayoutManager extends SceneObjectBase i this.state.rows[0]?.getLayout().addPanel(vizPanel); } + public setIsDropTarget(isDropTarget: boolean): void { + this.setState({ isDropTarget }); + } + + public draggedGridItemInside(gridItem: SceneGridItemLike): void { + // Create a new row with a DefaultGridLayoutManager and add the grid item to it + const newLayout = new DefaultGridLayoutManager({ + grid: new SceneGridLayout({ children: [], isDraggable: true, isResizable: true }), + }); + const newRow = new RowItem({ + title: t('dashboard.rows-layout.new-row-title', 'New row'), + layout: newLayout, + collapse: false, + }); + + // Convert AutoGridItem to DashboardGridItem if needed + if (gridItem instanceof AutoGridItem) { + const vizPanel = gridItem.state.body; + const newGridItem = new DashboardGridItem({ + body: vizPanel.clone(), + width: 12, + height: 8, + }); + newLayout.addGridItem(newGridItem); + } else if (gridItem instanceof DashboardGridItem) { + newLayout.addGridItem(gridItem); + } + + // Add the row to this layout + this.setState({ rows: [...this.state.rows, newRow], isDropTarget: false }); + } + public getVizPanels(): VizPanel[] { const panels: VizPanel[] = []; diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManagerRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManagerRenderer.tsx index 612c76701e4..f416a08844a 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManagerRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManagerRenderer.tsx @@ -25,6 +25,9 @@ export function RowLayoutManagerRenderer({ model }: SceneComponentProps { const row = rows.find((r) => r.state.key === before.draggableId); @@ -75,7 +78,12 @@ export function RowLayoutManagerRenderer({ model }: SceneComponentProps {(dropProvided) => ( -
+
{rows.map((row) => ( ))} diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx index 0b7ccf910ee..c24ef88cc4f 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx @@ -264,8 +264,10 @@ export class TabItem rowsLayout = new RowsLayoutManager({ rows: [row] }); } else { // Convert existing layout and add the dropped row + // Use direct state update instead of addNewRow because the rowsLayout + // isn't connected to the scene yet, so dashboardEditActions won't work rowsLayout = RowsLayoutManager.createFromLayout(currentLayout); - rowsLayout.addNewRow(row); + rowsLayout.setState({ rows: [...rowsLayout.state.rows, row] }); } // Clear the parent reference from the old layout