Skip to content

ref(nav): use topbar slot for headeractions #112449

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

Open
JonasBa wants to merge 10 commits into
base: master
Choose a base branch
from
Open

ref(nav): use topbar slot for headeractions #112449

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5d976e7
docs: Add TopBar actions slot migration plan
JonasBa Apr 8, 2026
3a3bc2d
ref(nav): Migrate Layout.HeaderActions to TopBar.Slot name=actions
JonasBa Apr 8, 2026
8b4e818
ref(nav): Remove size props from buttons inside TopBar actions slot
JonasBa Apr 8, 2026
c645187
ref(nav): Migrate IssueViewsHeader actions to TopBar actions slot
JonasBa Apr 8, 2026
a1c425d
ref(issueViews): Remove size prop from realtime toggle button in non-…
JonasBa Apr 8, 2026
667536e
fix(issueViews): Add size sm to realtime toggle button in pageframe b…
JonasBa Apr 8, 2026
e42b312
docs: Remove TopBar actions slot migration plan
JonasBa Apr 8, 2026
045dc29
fix(discover): Convert ResultsHeader to named export
JonasBa Apr 8, 2026
d2392c7
fix(nav): restore size="sm" prop on realtime button in non-pageframe …
cursoragent Apr 9, 2026
56298eb
Merge master into jb/ref/topbar-actions
cursoragent 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
29 changes: 21 additions & 8 deletions static/app/components/profiling/continuousProfileHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {trackAnalytics} from 'sentry/utils/analytics';
import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
import {useLocation} from 'sentry/utils/useLocation';
import {useOrganization} from 'sentry/utils/useOrganization';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

interface ContinuousProfileHeader {
transaction: Event | null;
Expand All @@ -21,6 +23,7 @@ interface ContinuousProfileHeader {
export function ContinuousProfileHeader({transaction}: ContinuousProfileHeader) {
const location = useLocation();
const organization = useOrganization();
const hasPageFrameFeature = useHasPageFrameFeature();

// @TODO add breadcrumbs when other views are implemented
const breadCrumbs = useMemo((): ProfilingBreadcrumbsProps['trails'] => {
Expand Down Expand Up @@ -50,14 +53,24 @@ export function ContinuousProfileHeader({transaction}: ContinuousProfileHeader)
<ProfilingBreadcrumbs organization={organization} trails={breadCrumbs} />
</SmallerProfilingBreadcrumbsWrapper>
</SmallerHeaderContent>
<StyledHeaderActions>
<FeedbackButton />
{transactionTarget && (
<LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
{t('Go to Trace')}
</LinkButton>
)}
</StyledHeaderActions>
{hasPageFrameFeature ? (
<TopBar.Slot name="actions">
{transactionTarget && (
<LinkButton onClick={handleGoToTransaction} to={transactionTarget}>
{t('Go to Trace')}
</LinkButton>
)}
</TopBar.Slot>
) : (
<StyledHeaderActions>
<FeedbackButton />
{transactionTarget && (
<LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
{t('Go to Trace')}
</LinkButton>
)}
</StyledHeaderActions>
)}
</SmallerLayoutHeader>
);
}
Expand Down
29 changes: 21 additions & 8 deletions static/app/components/profiling/profileHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
import {isSchema, isSentrySampledProfile} from 'sentry/utils/profiling/guards/profile';
import {useLocation} from 'sentry/utils/useLocation';
import {useOrganization} from 'sentry/utils/useOrganization';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
import {useProfiles} from 'sentry/views/profiling/profilesProvider';

function getTransactionName(input: Profiling.ProfileInput): string {
Expand All @@ -36,6 +38,7 @@ function ProfileHeader({transaction, projectId, eventId}: ProfileHeaderProps) {
const location = useLocation();
const organization = useOrganization();
const profiles = useProfiles();
const hasPageFrameFeature = useHasPageFrameFeature();

const transactionName =
profiles.type === 'resolved' ? getTransactionName(profiles.data) : '';
Expand Down Expand Up @@ -88,14 +91,24 @@ function ProfileHeader({transaction, projectId, eventId}: ProfileHeaderProps) {
<ProfilingBreadcrumbs organization={organization} trails={breadcrumbTrails} />
</SmallerProfilingBreadcrumbsWrapper>
</SmallerHeaderContent>
<StyledHeaderActions>
<FeedbackButton />
{transactionTarget && (
<LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
{t('Go to Trace')}
</LinkButton>
)}
</StyledHeaderActions>
{hasPageFrameFeature ? (
<TopBar.Slot name="actions">
{transactionTarget && (
<LinkButton onClick={handleGoToTransaction} to={transactionTarget}>
{t('Go to Trace')}
</LinkButton>
)}
</TopBar.Slot>
) : (
<StyledHeaderActions>
<FeedbackButton />
{transactionTarget && (
<LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
{t('Go to Trace')}
</LinkButton>
)}
</StyledHeaderActions>
)}
</SmallerLayoutHeader>
);
}
Expand Down
9 changes: 8 additions & 1 deletion static/app/components/workflowEngine/layout/list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import * as Layout from 'sentry/components/layouts/thirds';
import {NoProjectMessage} from 'sentry/components/noProjectMessage';
import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
import {useOrganization} from 'sentry/utils/useOrganization';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

interface WorkflowEngineListLayoutProps {
actions: React.ReactNode;
Expand All @@ -26,6 +28,7 @@ export function WorkflowEngineListLayout({
docsUrl,
}: WorkflowEngineListLayoutProps) {
const organization = useOrganization();
const hasPageFrameFeature = useHasPageFrameFeature();

return (
<Stack flex={1}>
Expand All @@ -37,7 +40,11 @@ export function WorkflowEngineListLayout({
<PageHeadingQuestionTooltip docsUrl={docsUrl} title={description} />
</Layout.Title>
</Layout.HeaderContent>
<Layout.HeaderActions>{actions}</Layout.HeaderActions>
{hasPageFrameFeature ? (
<TopBar.Slot name="actions">{actions}</TopBar.Slot>
) : (
<Layout.HeaderActions>{actions}</Layout.HeaderActions>
)}
</Layout.Header>
<Layout.Body>
<Layout.Main width="full">
Expand Down
41 changes: 34 additions & 7 deletions static/app/views/alerts/list/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {useLocation} from 'sentry/utils/useLocation';
import {useNavigate} from 'sentry/utils/useNavigate';
import {useOrganization} from 'sentry/utils/useOrganization';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

type Props = {
activeTab: 'stream' | 'rules';
Expand All @@ -25,6 +27,7 @@ export function AlertHeader({activeTab}: Props) {
const location = useLocation();
const organization = useOrganization();
const {selection} = usePageFilters();
const hasPageFrameFeature = useHasPageFrameFeature();
/**
* Incidents list is currently at the organization level, but the link needs to
* go down to a specific project scope.
Expand Down Expand Up @@ -63,12 +66,11 @@ export function AlertHeader({activeTab}: Props) {
/>
</Layout.Title>
</Layout.HeaderContent>
<Layout.HeaderActions>
<Grid flow="column" align="center" gap="md">
{hasPageFrameFeature ? (
<TopBar.Slot name="actions">
<CreateAlertButton
organization={organization}
iconProps={{size: 'sm'}}
size="sm"
priority="primary"
referrer="alert_stream"
projectSlug={
Expand All @@ -79,16 +81,41 @@ export function AlertHeader({activeTab}: Props) {
>
{t('Create Alert')}
</CreateAlertButton>
<FeedbackButton />
<LinkButton
size="sm"
onClick={handleNavigateToSettings}
href="#"
icon={<IconSettings size="sm" />}
aria-label={t('Settings')}
/>
</Grid>
</Layout.HeaderActions>
</TopBar.Slot>
Copy link
Copy Markdown
Contributor

@cursor cursor bot Apr 9, 2026

Choose a reason for hiding this comment

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

Removed size="sm" despite broken slot context propagation

Medium Severity

The slot implementation uses createPortal, which does not propagate React context from the portal destination's tree. The SizeProvider size="sm" wrapping the Slot.Outlet in topBar.tsx will not reach portaled slot content. The PR description itself confirms this — DE-1079 ("Slot API context propagation") is unresolved, and size="sm" was explicitly added back to the realtime toggle Button in issueViewsHeader.tsx for exactly this reason. Yet size="sm" was removed from Button, LinkButton, CreateAlertButton, StatusToggleButton, and NewMonitorButton instances across many other views inside TopBar.Slot. These buttons will render at their default size instead of sm.

Additional Locations (2)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 56298eb. Configure here.

) : (
<Layout.HeaderActions>
<Grid flow="column" align="center" gap="md">
<CreateAlertButton
organization={organization}
iconProps={{size: 'sm'}}
size="sm"
priority="primary"
referrer="alert_stream"
projectSlug={
selection.projects.length === 1
? ProjectsStore.getById(`${selection.projects[0]}`)?.slug
: undefined
}
>
{t('Create Alert')}
</CreateAlertButton>
<FeedbackButton />
<LinkButton
size="sm"
onClick={handleNavigateToSettings}
href="#"
icon={<IconSettings size="sm" />}
aria-label={t('Settings')}
/>
</Grid>
</Layout.HeaderActions>
)}
<Layout.HeaderTabs value={activeTab}>
<TabList>
{alertRulesLink}
Expand Down
55 changes: 49 additions & 6 deletions static/app/views/alerts/rules/issue/details/ruleDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ import {APIUsageWarningBanner} from 'sentry/views/alerts/rules/APIUsageWarningBa
import {findIncompatibleRules} from 'sentry/views/alerts/rules/issue';
import {ALERT_DEFAULT_CHART_PERIOD} from 'sentry/views/alerts/rules/metric/details/constants';
import {UserSnoozeDeprecationBanner} from 'sentry/views/alerts/rules/userSnoozeDeprecationBanner';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

import {IssueAlertDetailsChart} from './alertChart';
import {AlertRuleIssuesList} from './issuesList';
Expand Down Expand Up @@ -78,6 +80,7 @@ const getIssueAlertDetailsQueryKey = ({
];

export default function AlertRuleDetails() {
const hasPageFrameFeature = useHasPageFrameFeature();
const queryClient = useQueryClient();
const organization = useOrganization();
const api = useApi();
Expand Down Expand Up @@ -422,8 +425,8 @@ export default function AlertRuleDetails() {
{rule.name}
</Layout.Title>
</Layout.HeaderContent>
<Layout.HeaderActions>
<Grid flow="column" align="center" gap="md">
{hasPageFrameFeature ? (
<TopBar.Slot name="actions">
<Access access={['alerts:write']}>
{({hasAccess}) => (
<SnoozeAlert
Expand All @@ -438,15 +441,13 @@ export default function AlertRuleDetails() {
)}
</Access>
<LinkButton
size="sm"
icon={<IconCopy />}
to={duplicateLink}
disabled={rule.status === 'disabled'}
>
{t('Duplicate')}
</LinkButton>
<LinkButton
size="sm"
icon={<IconEdit />}
to={makeAlertsPathname({
path: `/rules/${projectSlug}/${ruleId}/`,
Expand All @@ -461,8 +462,50 @@ export default function AlertRuleDetails() {
>
{rule.status === 'disabled' ? t('Edit to enable') : t('Edit Rule')}
</LinkButton>
</Grid>
</Layout.HeaderActions>
</TopBar.Slot>
) : (
<Layout.HeaderActions>
<Grid flow="column" align="center" gap="md">
<Access access={['alerts:write']}>
{({hasAccess}) => (
<SnoozeAlert
isSnoozed={rule.snoozeForEveryone ?? false}
onSnooze={onSnooze}
ruleId={rule.id}
projectSlug={projectSlug}
hasAccess={hasAccess}
type="issue"
disabled={rule.status === 'disabled'}
/>
)}
</Access>
<LinkButton
size="sm"
icon={<IconCopy />}
to={duplicateLink}
disabled={rule.status === 'disabled'}
>
{t('Duplicate')}
</LinkButton>
<LinkButton
size="sm"
icon={<IconEdit />}
to={makeAlertsPathname({
path: `/rules/${projectSlug}/${ruleId}/`,
organization,
})}
onClick={() =>
trackAnalytics('issue_alert_rule_details.edit_clicked', {
organization,
rule_id: parseInt(ruleId, 10),
})
}
>
{rule.status === 'disabled' ? t('Edit to enable') : t('Edit Rule')}
</LinkButton>
</Grid>
</Layout.HeaderActions>
)}
</Layout.Header>
<Layout.Body>
<Layout.Main>
Expand Down
53 changes: 47 additions & 6 deletions static/app/views/alerts/rules/metric/details/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import {
deprecateTransactionAlerts,
hasEAPAlerts,
} from 'sentry/views/insights/common/utils/hasEAPAlerts';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

type Props = {
hasMetricRuleDetailsError: boolean;
Expand All @@ -44,6 +46,7 @@ export function DetailsHeader({
project,
onSnooze,
}: Props) {
const hasPageFrameFeature = useHasPageFrameFeature();
const isRuleReady = !!rule && !hasMetricRuleDetailsError;
const ruleTitle = rule && !hasMetricRuleDetailsError ? rule.name : '';
const settingsLink = rule
Expand Down Expand Up @@ -111,8 +114,8 @@ export function DetailsHeader({
{ruleTitle}
</RuleTitle>
</Layout.HeaderContent>
<Layout.HeaderActions>
<Grid flow="column" align="center" gap="md">
{hasPageFrameFeature ? (
<TopBar.Slot name="actions">
{rule && project && (
<Access access={['alerts:write']}>
{({hasAccess}) => (
Expand All @@ -128,7 +131,6 @@ export function DetailsHeader({
</Access>
)}
<LinkButton
size="sm"
icon={<IconCopy />}
to={duplicateLink}
disabled={deprecateTransactionsAlerts}
Expand All @@ -144,11 +146,50 @@ export function DetailsHeader({
>
{t('Duplicate')}
</LinkButton>
<LinkButton size="sm" icon={<IconEdit />} to={settingsLink}>
<LinkButton icon={<IconEdit />} to={settingsLink}>
{t('Edit Rule')}
</LinkButton>
</Grid>
</Layout.HeaderActions>
</TopBar.Slot>
) : (
<Layout.HeaderActions>
<Grid flow="column" align="center" gap="md">
{rule && project && (
<Access access={['alerts:write']}>
{({hasAccess}) => (
<SnoozeAlert
isSnoozed={rule?.snoozeForEveryone ?? false}
onSnooze={onSnooze}
ruleId={rule.id}
projectSlug={project.slug}
hasAccess={hasAccess}
type="metric"
/>
)}
</Access>
)}
<LinkButton
size="sm"
icon={<IconCopy />}
to={duplicateLink}
disabled={deprecateTransactionsAlerts}
tooltipProps={{
title: deprecateTransactionsAlerts
? hasEAPAlerts(organization)
? t(
'Transaction alerts are being deprecated. Please create Span alerts instead.'
)
: t('Transaction alerts are being deprecated.')
: undefined,
}}
>
{t('Duplicate')}
</LinkButton>
<LinkButton size="sm" icon={<IconEdit />} to={settingsLink}>
{t('Edit Rule')}
</LinkButton>
</Grid>
</Layout.HeaderActions>
)}
</Layout.Header>
);
}
Expand Down
Loading
Loading