Dashboard: Switch between tabs and rows and rows to tabs (#102083)

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;

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 });
   }
 }