Dashboard: Add new elements logic (#101162)

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -78,7 +78,9 @@ import { isUsingAngularDatasourcePlugin, isUsingAngularPanelPlugin } from './ang
 import { setupKeyboardShortcuts } from './keyboardShortcuts';
 import { DashboardGridItem } from './layout-default/DashboardGridItem';
 import { DefaultGridLayoutManager } from './layout-default/DefaultGridLayoutManager';
+import { addNewRowTo, addNewTabTo } from './layouts-shared/addNew';
 import { DashboardLayoutManager } from './types/DashboardLayoutManager';
+import { LayoutParent } from './types/LayoutParent';
 
 export const PERSISTED_PROPS = ['title', 'description', 'tags', 'editable', 'graphTooltip', 'links', 'meta', 'preload'];
 export const PANEL_SEARCH_VAR = 'systemPanelFilterVar';
@@ -141,7 +143,7 @@ export interface DashboardSceneState extends SceneObjectState {
   editPane: DashboardEditPane;
 }
 
-export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
+export class DashboardScene extends SceneObjectBase<DashboardSceneState> implements LayoutParent {
   static Component = DashboardSceneRenderer;
 
   /**
@@ -593,11 +595,11 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
   }
 
   public onCreateNewRow() {
-    this.state.body.addNewRow();
+    addNewRowTo(this.state.body);
   }
 
   public onCreateNewTab() {
-    this.state.body.addNewTab();
+    addNewTabTo(this.state.body);
   }
 
   public onCreateNewPanel(): VizPanel {
@@ -613,6 +615,10 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
     layout.activateRepeaters?.();
   }
 
+  public getLayout(): DashboardLayoutManager {
+    return this.state.body;
+  }
+
   /**
    * Called by the SceneQueryRunner to provide contextual parameters (tracking) props for the request
    */

public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx

@@ -3,11 +3,9 @@ import { t } from 'app/core/internationalization';
 
 import { isClonedKey } from '../../utils/clone';
 import { dashboardSceneGraph } from '../../utils/dashboardSceneGraph';
-import { getDashboardSceneFor } from '../../utils/utils';
 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';
 
@@ -85,17 +83,6 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
     this.setState({ rows: [...this.state.rows, new RowItem()] });
   }
 
-  public addNewTab() {
-    const shouldAddTab = this.hasVizPanels();
-    const tabsLayout = TabsLayoutManager.createFromLayout(this);
-
-    if (shouldAddTab) {
-      tabsLayout.addNewTab();
-    }
-
-    getDashboardSceneFor(this).switchLayout(tabsLayout);
-  }
-
   public editModeChanged(isEditing: boolean) {
     this.state.rows.forEach((row) => row.getLayout().editModeChanged?.(isEditing));
   }

public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx

@@ -95,10 +95,6 @@ export class TabsLayoutManager extends SceneObjectBase<TabsLayoutManagerState> i
     return false;
   }
 
-  public addNewRow() {
-    this.getCurrentTab().getLayout().addNewRow();
-  }
-
   public addNewTab() {
     const currentTab = new TabItem();
     this.setState({ tabs: [...this.state.tabs, currentTab], currentTabIndex: this.state.tabs.length });

public/app/features/dashboard-scene/scene/layouts-shared/addNew.ts

@@ -0,0 +1,45 @@
+import { SceneObject } from '@grafana/scenes';
+
+import { DefaultGridLayoutManager } from '../layout-default/DefaultGridLayoutManager';
+import { RowsLayoutManager } from '../layout-rows/RowsLayoutManager';
+import { TabsLayoutManager } from '../layout-tabs/TabsLayoutManager';
+import { isLayoutParent } from '../types/LayoutParent';
+
+export function addNewTabTo(sceneObject: SceneObject) {
+  if (sceneObject instanceof TabsLayoutManager) {
+    sceneObject.addNewTab();
+    return;
+  }
+
+  const layoutParent = sceneObject.parent!;
+  if (!isLayoutParent(layoutParent)) {
+    throw new Error('Parent layout is not a LayoutParent');
+  }
+
+  layoutParent.switchLayout(TabsLayoutManager.createFromLayout(layoutParent.getLayout()));
+}
+
+export function addNewRowTo(sceneObject: SceneObject) {
+  if (sceneObject instanceof RowsLayoutManager) {
+    sceneObject.addNewRow();
+    return;
+  }
+
+  if (sceneObject instanceof DefaultGridLayoutManager) {
+    sceneObject.addNewRow();
+    return;
+  }
+
+  if (sceneObject instanceof TabsLayoutManager) {
+    const currentTab = sceneObject.getCurrentTab();
+    addNewRowTo(currentTab.state.layout);
+    return;
+  }
+
+  const layoutParent = sceneObject.parent!;
+  if (!isLayoutParent(layoutParent)) {
+    throw new Error('Parent layout is not a LayoutParent');
+  }
+
+  layoutParent.switchLayout(RowsLayoutManager.createFromLayout(layoutParent.getLayout()));
+}

public/app/features/dashboard-scene/scene/types/DashboardLayoutManager.ts

@@ -44,16 +44,6 @@ export interface DashboardLayoutManager<S = {}> extends SceneObject {
    */
   hasVizPanels(): boolean;
 
-  /**
-   * Add row
-   */
-  addNewRow(): void;
-
-  /**
-   * Add tab
-   */
-  addNewTab(): void;
-
   /**
    * Notify the layout manager that the edit mode has changed
    * @param isEditing