ref(nav): migrate breadcrumbs to TopBar.Title#112672
Merged
natemoo-re merged 16 commits intomasterfrom Apr 14, 2026
Merged
Conversation
When the page-frame feature is active, render the issue detail breadcrumbs via TopBar.Slot name="title" so they appear in the sticky TopBar instead of the page header below it. Refs DE-1086 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When the page-frame feature is active, render trace view breadcrumbs via TopBar.Slot name="title". This applies to both the Traces route (/traces/trace/:traceId) and the Logs trace route (/logs/trace/:traceId) since both use TraceMetaDataHeader — the breadcrumb content adapts via the source query param. Refs DE-1087, DE-1088 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When the page-frame feature is active, render the saved-query breadcrumb (Traces > Saved Query) via TopBar.Slot name="title" instead of Layout.Title, which only surfaced the query name without navigation context. The plain title (no saved query) is also moved to an explicit TopBar.Slot to avoid a duplicate registration. Refs DE-1089 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When the page-frame feature is active, render the Dashboards breadcrumb and the inline-editable DashboardTitle together inside TopBar.Slot name="title". In the legacy path, keep the full breadcrumb trail (Dashboards > name) and Layout.Title as before. Refs DE-1090 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When the page-frame feature is active, render the detector breadcrumbs via TopBar.Slot name="title" on both steps of the new monitor flow: step 1 (type selection in new.tsx) and step 2 (settings configuration in newDetectorLayout.tsx). Refs DE-1091 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When the page-frame feature is active, render the detector detail breadcrumbs (Monitors > type > name) via TopBar.Slot name="title". The breadcrumb already includes the detector name as the last crumb, so Layout.Title is omitted in the page-frame path. Refs DE-1092 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When the page-frame feature is active, render the replay breadcrumbs via TopBar.Slot name="title". The actions slot was already migrated; this adds the missing title/breadcrumb context. Refs DE-1093 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
… non-page-frame path The non-page-frame ExploreBreadcrumb on the spans page was missing the savedQueryName prop, causing it to always render 'Saved Query' as the breadcrumb label instead of the actual query name. This brings it into parity with the page-frame path and all other explore pages (logs, metrics, replays). Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
…frame path When the page-frame feature is enabled, the saved query view was missing the PageHeadingQuestionTooltip that provides contextual help and a documentation link. This brings it into parity with the non-saved-query view which correctly includes the tooltip. Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
When hasPageFrameFeature is true, both children of Layout.Header are TopBar.Slot components which render null in place via portals. Without the unified prop, Layout.Header still applies border-bottom and padding, creating an empty visible header bar. Setting unified={hasPageFrameFeature} removes the border and padding when the feature is active.
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 6b41450. Configure here.
| } | ||
| crumbs.push({ | ||
| label: t('Saved Query'), | ||
| label: savedQueryName ?? t('Saved Query'), |
Contributor
There was a problem hiding this comment.
Nullish coalescing allows empty string breadcrumb label
Low Severity
The ?? (nullish coalescing) operator only guards against null/undefined, not empty strings. If savedQueryName is "", the breadcrumb label becomes an empty string instead of falling back to t('Saved Query'). This can happen because the calling sites pass savedQuery?.name which could be an empty string when a saved query exists but has no name. The || operator would correctly handle this case by also falling back on falsy values like "".
Reviewed by Cursor Bugbot for commit 6b41450. Configure here.
TkDodo
approved these changes
Apr 14, 2026
Contributor
Sentry Snapshot Testing
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When the
page-framefeature is active, we need to render detail page breadcrumbs via<TopBar.Slot name="title">so they appear in the sticky TopBar.Closes DE-1081, DE-1086, DE-1087, DE-1093, DE-1089, DE-1092, DE-1091, DE-1088, DE-1090