diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.tsx index 3048549bcb9..9978a002fe7 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.tsx +++ b/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 { +export class DashboardScene extends SceneObjectBase implements LayoutParent { static Component = DashboardSceneRenderer; /** @@ -593,11 +595,11 @@ export class DashboardScene extends SceneObjectBase { } 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 { layout.activateRepeaters?.(); } + public getLayout(): DashboardLayoutManager { + return this.state.body; + } + /** * Called by the SceneQueryRunner to provide contextual parameters (tracking) props for the request */ 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 54fb186937d..89a75f29769 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx +++ b/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 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)); } 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 3e2c338b26f..cc4bb9c5a0b 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx @@ -95,10 +95,6 @@ export class TabsLayoutManager extends SceneObjectBase 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 }); diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/addNew.ts b/public/app/features/dashboard-scene/scene/layouts-shared/addNew.ts new file mode 100644 index 00000000000..11385b322a2 --- /dev/null +++ b/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())); +} diff --git a/public/app/features/dashboard-scene/scene/types/DashboardLayoutManager.ts b/public/app/features/dashboard-scene/scene/types/DashboardLayoutManager.ts index 6041799d8db..53862b2578d 100644 --- a/public/app/features/dashboard-scene/scene/types/DashboardLayoutManager.ts +++ b/public/app/features/dashboard-scene/scene/types/DashboardLayoutManager.ts @@ -44,16 +44,6 @@ export interface DashboardLayoutManager extends SceneObject { */ hasVizPanels(): boolean; - /** - * Add row - */ - addNewRow(): void; - - /** - * Add tab - */ - addNewTab(): void; - /** * Notify the layout manager that the edit mode has changed * @param isEditing