Cleanup

packages/grafana-ui/src/components/Sidebar/SidebarButton.tsx

@@ -33,7 +33,7 @@ export const SidebarButton = React.forwardRef<HTMLButtonElement, Props>(
       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),

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<SceneObjectState> | undefined) => {
-    if (obj instanceof RowItem || obj instanceof TabItem) {
-      setSelectedLayoutElement(obj);
-    } else if (!(obj instanceof VizPanel)) {
+    if (obj) {
+      setSelectedLayoutElement(getRowOrTabForSceneObject(obj) || dashboard);
+    } else {
       setSelectedLayoutElement(dashboard);
     }
   };

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',

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<DashboardScene>) {
   const {
@@ -103,7 +105,7 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardS
         {!editPanel && (
           <DashboardEditPaneSplitter
             dashboard={model}
-            isEmptyDashboard={!model.state.uid}
+            isNewEmptyDashboard={!model.state.uid}
             isEditing={isEditing}
             controls={controls && <controls.Component model={controls} />}
             body={renderBody()}

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