diff --git a/packages/grafana-ui/src/components/Sidebar/SidebarButton.tsx b/packages/grafana-ui/src/components/Sidebar/SidebarButton.tsx index e059a5f5acc..33881beee6e 100644 --- a/packages/grafana-ui/src/components/Sidebar/SidebarButton.tsx +++ b/packages/grafana-ui/src/components/Sidebar/SidebarButton.tsx @@ -33,7 +33,7 @@ export const SidebarButton = React.forwardRef( context.compact && styles.compact, active && styles.active, context.position === 'left' && styles.leftButton, - isAddButton && 'primary' + isAddButton && 'addButton' ); return ( @@ -85,7 +85,7 @@ const getStyles = (theme: GrafanaTheme2) => { color: theme.colors.text.secondary, background: 'transparent', border: `none`, - '&.primary': css({ + '&.addButton': css({ svg: { backgroundColor: theme.colors.primary.main, color: theme.colors.getContrastText(theme.colors.primary.main), diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx index 008fcc2824a..46a75719ac5 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx @@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'; import { selectors } from '@grafana/e2e-selectors'; import { t } from '@grafana/i18n'; import { config } from '@grafana/runtime'; -import { SceneObject, SceneObjectState, useSceneObjectState, VizPanel } from '@grafana/scenes'; +import { SceneObject, SceneObjectState, useSceneObjectState } from '@grafana/scenes'; import { Sidebar } from '@grafana/ui'; import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; @@ -14,7 +14,7 @@ import { RowItem } from '../scene/layout-rows/RowItem'; import { TabItem } from '../scene/layout-tabs/TabItem'; import { ToolbarActionProps } from '../scene/new-toolbar/types'; import { dynamicDashNavActions } from '../utils/registerDynamicDashNavAction'; -import { getDefaultVizPanel } from '../utils/utils'; +import { getDefaultVizPanel, getRowOrTabForSceneObject } from '../utils/utils'; import { DashboardEditPane } from './DashboardEditPane'; import { ShareExportDashboardButton } from './DashboardExportButton'; @@ -50,11 +50,10 @@ export function DashboardEditPaneRenderer({ editPane, dashboard }: Props) { return undefined; }, [selection]); - const onSetLayoutElement = (obj: SceneObject | undefined) => { - if (obj instanceof RowItem || obj instanceof TabItem) { - setSelectedLayoutElement(obj); - } else if (!(obj instanceof VizPanel)) { + if (obj) { + setSelectedLayoutElement(getRowOrTabForSceneObject(obj) || dashboard); + } else { setSelectedLayoutElement(dashboard); } }; diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx index a79c985a89b..0f3a6c240d0 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx @@ -26,10 +26,10 @@ interface Props { isEditing?: boolean; body?: React.ReactNode; controls?: React.ReactNode; - isEmptyDashboard?: boolean; + isNewEmptyDashboard?: boolean; } -export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls, isEmptyDashboard = false }: Props) { +export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls, isNewEmptyDashboard = false }: Props) { const headerHeight = useChromeHeaderHeight(); const { editPane } = dashboard.state; const styles = useStyles2(getStyles, headerHeight ?? 0); @@ -66,7 +66,7 @@ export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls }, [isEditing, editPane]); useEffectOnce(() => { - if (isEmptyDashboard) { + if (isNewEmptyDashboard) { editPane.openPane('add'); } }); @@ -74,7 +74,7 @@ export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls const { selectionContext, openPane } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true }); const sidebarContext = useSidebar({ - hasOpenPane: Boolean(openPane) || isEmptyDashboard, + hasOpenPane: Boolean(openPane) || isNewEmptyDashboard, contentMargin: 1, position: 'right', persistanceKey: 'dashboard', diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx index 13de0dc404b..9e1b17ede0f 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx @@ -9,10 +9,12 @@ import { getNavModel } from 'app/core/selectors/navModel'; import { useSelector } from 'app/types/store'; import { DashboardEditPaneSplitter } from '../edit-pane/DashboardEditPaneSplitter'; +import { isEmptyDashboard } from '../saving/DashboardPrompt'; import { DashboardScene } from './DashboardScene'; import { PanelSearchLayout } from './PanelSearchLayout'; import { SoloPanelContextProvider, useDefineSoloPanelContext } from './SoloPanelContext'; +import { getDashboardSceneFor } from '../utils/utils'; export function DashboardSceneRenderer({ model }: SceneComponentProps) { const { @@ -103,7 +105,7 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps} body={renderBody()} diff --git a/public/app/features/dashboard-scene/utils/utils.ts b/public/app/features/dashboard-scene/utils/utils.ts index ac656e830c0..89a4f161d68 100644 --- a/public/app/features/dashboard-scene/utils/utils.ts +++ b/public/app/features/dashboard-scene/utils/utils.ts @@ -27,6 +27,8 @@ import { UNCONFIGURED_PANEL_PLUGIN_ID } from '../scene/UnconfiguredPanel'; import { VizPanelHeaderActions } from '../scene/VizPanelHeaderActions'; import { VizPanelSubHeader } from '../scene/VizPanelSubHeader'; import { DashboardGridItem } from '../scene/layout-default/DashboardGridItem'; +import { RowItem } from '../scene/layout-rows/RowItem'; +import { TabItem } from '../scene/layout-tabs/TabItem'; import { setDashboardPanelContext } from '../scene/setDashboardPanelContext'; import { DashboardLayoutManager, isDashboardLayoutManager } from '../scene/types/DashboardLayoutManager'; @@ -413,6 +415,15 @@ export function getLayoutManagerFor(sceneObject: SceneObject): DashboardLayoutMa throw new Error('Could not find layout manager for scene object'); } +export function getRowOrTabForSceneObject(sceneObject: SceneObject): SceneObject | null { + if (sceneObject instanceof RowItem || sceneObject instanceof TabItem) { + return sceneObject; + } else if (sceneObject.parent) { + return getRowOrTabForSceneObject(sceneObject.parent); + } + return null; +} + export function getGridItemKeyForPanelId(panelId: number): string { return `grid-item-${panelId}`; }