[v11.0.x] Fix home breadcrumbs (#86849)

Fix home breadcrumbs (#86786)

* fix home breadcrumbs

* fix homepage gap

* fix tests

(cherry picked from commit 38917c4e79)

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>

public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx

@@ -124,7 +124,7 @@ describe('DashboardScenePage', () => {
     locationService.push('/');
     getDashboardScenePageStateManager().clearDashboardCache();
     loadDashboardMock.mockClear();
-    loadDashboardMock.mockResolvedValue({ dashboard: simpleDashboard, meta: {} });
+    loadDashboardMock.mockResolvedValue({ dashboard: simpleDashboard, meta: { slug: '123' } });
     // hacky way because mocking autosizer does not work
     Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { configurable: true, value: 1000 });
     Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, value: 1000 });
@@ -241,7 +241,7 @@ describe('DashboardScenePage', () => {
   });
 
   it('is in edit mode when coming from explore to an existing dashboard', async () => {
-    store.setObject(DASHBOARD_FROM_LS_KEY, { dashboard: simpleDashboard });
+    store.setObject(DASHBOARD_FROM_LS_KEY, { dashboard: simpleDashboard, meta: { slug: '123' } });
 
     setup();
 

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

@@ -396,6 +396,7 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
         slug: meta.slug,
         currentQueryParams: location.search,
         updateQuery: { viewPanel: null, inspect: null, editview: null, editPanel: null, tab: null },
+        isHomeDashboard: !meta.url && !meta.slug && !meta.isNew,
       }),
     };
 

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

@@ -14,7 +14,7 @@ import { DashboardScene } from './DashboardScene';
 import { NavToolbarActions } from './NavToolbarActions';
 
 export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>) {
-  const { controls, overlay, editview, editPanel, isEmpty, scopes } = model.useState();
+  const { controls, overlay, editview, editPanel, isEmpty, scopes, meta } = model.useState();
   const { isExpanded: isScopesExpanded } = scopes?.useState() ?? {};
   const styles = useStyles2(getStyles);
   const location = useLocation();
@@ -22,6 +22,7 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardS
   const pageNav = model.getPageNav(location, navIndex);
   const bodyToRender = model.getBodyToRender();
   const navModel = getNavModel(navIndex, 'dashboards/browse');
+  const isHomePage = !meta.url && !meta.slug && !meta.isNew;
 
   if (editview) {
     return (
@@ -54,7 +55,7 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardS
         >
           {scopes && <scopes.Component model={scopes} />}
           <NavToolbarActions dashboard={model} />
-          {controls && (
+          {!isHomePage && controls && (
             <div
               className={cx(styles.controlsWrapper, scopes && !isScopesExpanded && styles.controlsWrapperWithScopes)}
             >
@@ -62,7 +63,7 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardS
             </div>
           )}
           <CustomScrollbar autoHeightMin={'100%'} className={styles.scrollbarContainer}>
-            <div className={styles.canvasContent}>
+            <div className={cx(styles.canvasContent, isHomePage && styles.homePagePadding)}>
               <>{isEmpty && emptyState}</>
               {withPanels}
             </div>
@@ -115,6 +116,9 @@ function getStyles(theme: GrafanaTheme2) {
     controlsWrapperWithScopes: css({
       padding: theme.spacing(2, 2, 2, 0),
     }),
+    homePagePadding: css({
+      padding: theme.spacing(2, 2),
+    }),
     canvasContent: css({
       label: 'canvas-content',
       display: 'flex',

public/app/features/dashboard-scene/utils/urlBuilders.ts

@@ -22,6 +22,8 @@ export interface DashboardUrlOptions {
   absolute?: boolean;
   // Add tz to query params
   timeZone?: string;
+  // Check if we are on the home dashboard
+  isHomeDashboard?: boolean;
 }
 
 export function getDashboardUrl(options: DashboardUrlOptions) {
@@ -54,6 +56,10 @@ export function getDashboardUrl(options: DashboardUrlOptions) {
     };
   }
 
+  if (options.isHomeDashboard) {
+    path = '/';
+  }
+
   const params = options.currentQueryParams ? locationSearchToObject(options.currentQueryParams) : {};
 
   if (options.updateQuery) {