From ec94e5b7ad8b24a97836bc00d409b4aaf0fb092a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 13 Mar 2025 14:21:10 +0100
Subject: [PATCH] Dashboard: Switch between tabs and rows and rows to tabs
 (#102083)

---
 .../scene/layout-rows/RowsLayoutManager.tsx          |  9 +++++++--
 .../scene/layout-tabs/TabsLayoutManager.tsx          | 12 ++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx
index 4c1acfe940a..14378e4feaa 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx
@@ -7,6 +7,7 @@ import { dashboardSceneGraph } from '../../utils/dashboardSceneGraph';
 import { DashboardGridItem } from '../layout-default/DashboardGridItem';
 import { DefaultGridLayoutManager } from '../layout-default/DefaultGridLayoutManager';
 import { RowRepeaterBehavior } from '../layout-default/RowRepeaterBehavior';
+import { TabsLayoutManager } from '../layout-tabs/TabsLayoutManager';
 import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
 import { LayoutRegistryItem } from '../types/LayoutRegistryItem';
 
@@ -186,9 +187,13 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
   }
 
   public static createFromLayout(layout: DashboardLayoutManager): RowsLayoutManager {
-    let rows: RowItem[];
+    let rows: RowItem[] = [];
 
-    if (layout instanceof DefaultGridLayoutManager) {
+    if (layout instanceof TabsLayoutManager) {
+      for (const tab of layout.state.tabs) {
+        rows.push(new RowItem({ layout: tab.state.layout, title: tab.state.title }));
+      }
+    } else if (layout instanceof DefaultGridLayoutManager) {
       const config: Array<{
         title?: string;
         isCollapsed?: boolean;
diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx
index 3c7f1b24bd4..2c0f5d4943a 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx
@@ -8,6 +8,7 @@ import {
 import { t } from 'app/core/internationalization';
 
 import { ObjectRemovedFromCanvasEvent } from '../../edit-pane/shared';
+import { RowsLayoutManager } from '../layout-rows/RowsLayoutManager';
 import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
 import { LayoutRegistryItem } from '../types/LayoutRegistryItem';
 
@@ -177,7 +178,14 @@ export class TabsLayoutManager extends SceneObjectBase<TabsLayoutManagerState> i
   }
 
   public static createFromLayout(layout: DashboardLayoutManager): TabsLayoutManager {
-    const tab = new TabItem({ layout: layout.clone() });
-    return new TabsLayoutManager({ tabs: [tab] });
+    let tabs: TabItem[] = [];
+
+    if (layout instanceof RowsLayoutManager) {
+      tabs = layout.state.rows.map((row) => new TabItem({ layout: row.state.layout.clone(), title: row.state.title }));
+    } else {
+      tabs.push(new TabItem({ layout: layout.clone() }));
+    }
+
+    return new TabsLayoutManager({ tabs });
   }
 }