Fix home breadcrumbs (#86786)

* fix home breadcrumbs

* fix homepage gap

* fix tests
This commit is contained in:
Victor Marin 2024-04-24 14:54:30 +03:00 committed by GitHub
parent 3e450ec4bf
commit 38917c4e79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 5 deletions

View File

@ -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();

View File

@ -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,
}),
};

View File

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

View File

@ -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) {