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 558d2294899..3a4a0972a05 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx @@ -1,16 +1,15 @@ -import { ReactNode } from 'react'; - import { SceneObjectState, SceneObjectBase, sceneGraph, VariableDependencyConfig, SceneObject } from '@grafana/scenes'; import { t } from 'app/core/internationalization'; import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; +import { getDefaultVizPanel } from '../../utils/utils'; import { ResponsiveGridLayoutManager } from '../layout-responsive-grid/ResponsiveGridLayoutManager'; import { BulkActionElement } from '../types/BulkActionElement'; import { DashboardLayoutManager } from '../types/DashboardLayoutManager'; import { EditableDashboardElement, EditableDashboardElementInfo } from '../types/EditableDashboardElement'; import { LayoutParent } from '../types/LayoutParent'; -import { getEditOptions, renderActions } from './TabItemEditor'; +import { getEditOptions } from './TabItemEditor'; import { TabItemRenderer } from './TabItemRenderer'; import { TabItems } from './TabItems'; import { TabsLayoutManager } from './TabsLayoutManager'; @@ -56,14 +55,6 @@ export class TabItem return getEditOptions(this); } - public renderActions(): ReactNode { - return renderActions(this); - } - - public getParentLayout(): TabsLayoutManager { - return sceneGraph.getAncestor(this, TabsLayoutManager); - } - public onDelete() { const layout = sceneGraph.getAncestor(this, TabsLayoutManager); layout.removeTab(this); @@ -73,7 +64,43 @@ export class TabItem return new TabItems(items.filter((item) => item instanceof TabItem)); } + public onAddPanel(panel = getDefaultVizPanel()) { + this.getLayout().addPanel(panel); + } + + public onAddTabBefore() { + this._getParentLayout().addTabBefore(this); + } + + public onAddTabAfter() { + this._getParentLayout().addTabAfter(this); + } + + public onMoveLeft() { + this._getParentLayout().moveTabLeft(this); + } + + public onMoveRight() { + this._getParentLayout().moveTabRight(this); + } + + public isFirstTab(): boolean { + return this._getParentLayout().isFirstTab(this); + } + + public isLastTab(): boolean { + return this._getParentLayout().isLastTab(this); + } + public onChangeTitle(title: string) { this.setState({ title }); } + + public getParentLayout(): TabsLayoutManager { + return this._getParentLayout(); + } + + private _getParentLayout(): TabsLayoutManager { + return sceneGraph.getAncestor(this, TabsLayoutManager); + } } diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx index 7d0e8c70b8c..2769620060e 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx @@ -1,10 +1,11 @@ -import { ReactNode, useMemo } from 'react'; +import { useMemo } from 'react'; -import { Button, Input } from '@grafana/ui'; +import { Input } from '@grafana/ui'; import { t } from 'app/core/internationalization'; import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor'; +import { EditPaneHeader } from '../../edit-pane/EditPaneHeader'; import { useLayoutCategory } from '../layouts-shared/DashboardLayoutSelector'; import { TabItem } from './TabItem'; @@ -12,9 +13,12 @@ import { TabItem } from './TabItem'; export function getEditOptions(model: TabItem): OptionsPaneCategoryDescriptor[] { const tabOptions = useMemo(() => { return new OptionsPaneCategoryDescriptor({ - title: t('dashboard.tabs-layout.tab-options.title', 'Tab options'), + title: '', id: 'tab-options', - isOpenDefault: true, + isOpenable: false, + renderTitle: () => ( + model.onDelete()} /> + ), }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.tabs-layout.tab-options.title-option', 'Title'), @@ -29,15 +33,6 @@ export function getEditOptions(model: TabItem): OptionsPaneCategoryDescriptor[] return [tabOptions, layoutOptions]; } -export function renderActions(tab: TabItem): ReactNode { - return ( - <> -