Skip to content

feat(pageframe): adopt TopBar.Slot in Layout.Title #112515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
natemoo-re merged 2 commits into from
Apr 9, 2026
+11 −1
Merged

feat(pageframe): adopt TopBar.Slot in Layout.Title #112515

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75745e5
feat(pageframe): adopt `TopBar.Slot` in `Layout.Title`
natemoo-re Apr 8, 2026
2ff2a42
Merge branch 'master' into nm/pageframe/title
natemoo-re Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion static/app/components/layouts/thirds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {Tabs} from '@sentry/scraps/tabs';

import {usePrimaryNavigation} from 'sentry/views/navigation/primaryNavigationContext';
import {SecondaryNavigationContext} from 'sentry/views/navigation/secondaryNavigationContext';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

/**
Expand Down Expand Up @@ -137,7 +138,16 @@ export const HeaderActions = styled('div')`
* Includes flex gap for additional items placed with the text (such as feature
* badges or ID badges)
*/
export const Title = styled('h1')<{withMargins?: boolean}>`
export function Title(props: React.ComponentProps<typeof LegacyTitle>) {
const hasPageFrame = useHasPageFrameFeature();

if (hasPageFrame) {
return <TopBar.Slot name="title">{props.children}</TopBar.Slot>;
Copy link
Copy Markdown
Contributor

@sentry sentry bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: A second TopBar.Slot with the name 'title' is registered on Settings pages, causing a conflict that hides either the breadcrumbs or the page title.
Severity: MEDIUM

Suggested Fix

Conditionally render the TopBar.Slot within Layout.Title to avoid registering it on pages where the 'title' slot is already in use, such as the Settings pages. Alternatively, use a different, non-conflicting slot name.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/components/layouts/thirds.tsx#L145

Potential issue: On Settings pages, which already register a `TopBar.Slot` named 'title'
for breadcrumbs, the `Layout.Title` component unconditionally registers a second
`TopBar.Slot` with the same name. This name collision causes one of the two
elements—either the breadcrumbs or the page title—to be unpredictably hidden from the
top bar, degrading the user experience on settings pages.

Did we get this right? 👍 / 👎 to inform future reviews.

}
Comment on lines +144 to +146
Copy link
Copy Markdown
Contributor

@sentry sentry bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The Layout.Title component in page frame mode discards props like className, which breaks styling applied via styled(Layout.Title).
Severity: MEDIUM

Suggested Fix

Update the Layout.Title component to accept and spread additional props to the underlying element. This will ensure that className and other attributes are passed through correctly.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/components/layouts/thirds.tsx#L144-L146

Potential issue: In page frame mode, the `Layout.Title` component only forwards its
`children` prop, discarding all other props, including `className`. This prevents styles
applied via `styled(Layout.Title)` from being rendered, causing UI breakages in multiple
locations such as the alerts rule details header and the issue list header.

Did we get this right? 👍 / 👎 to inform future reviews.


return <LegacyTitle {...props} />;
}
const LegacyTitle = styled('h1')<{withMargins?: boolean}>`
width: 100%;
white-space: nowrap;
overflow: hidden;
Expand Down
Loading