Skip to content

fix(page-frame): remove empty headers and move breadcrumbs #113654

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
priscilawebdev merged 7 commits into from
Apr 22, 2026
Merged

fix(page-frame): remove empty headers and move breadcrumbs #113654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b963333
fix(page-frame): skip empty layout.header
priscilawebdev Apr 22, 2026
02569d3
ref(page-frame): move breadcrumbs to topbar slot
priscilawebdev Apr 22, 2026
9aa1ec5
fix(projectDetail): restore right-aligned actions and shrink badge
priscilawebdev Apr 22, 2026
21df0a4
fix(explore): drop duplicate main on errors page
priscilawebdev Apr 22, 2026
38d4a9f
ref(discover): move results header content to topbar slot
priscilawebdev Apr 22, 2026
6a0a1ea
style(discover): drop redundant fragment around title
priscilawebdev Apr 22, 2026
5c928c7
style(discover): fold results header into a single branch
priscilawebdev Apr 22, 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
48 changes: 30 additions & 18 deletions static/app/views/discover/landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {Fragment} from 'react';
import styled from '@emotion/styled';
import {useQuery} from '@tanstack/react-query';

Expand Down Expand Up @@ -190,21 +191,19 @@ function DiscoverLanding() {
>
<SentryDocumentTitle title={t('Discover')} orgSlug={organization.slug}>
<Stack flex={1}>
<Layout.Header>
<Layout.HeaderContent>
<Breadcrumbs
crumbs={[
{
label: t('Discover'),
to: getDiscoverLandingUrl(organization),
},
{
label: t('Saved Queries'),
},
]}
/>
</Layout.HeaderContent>
{hasPageFrameFeature ? (
{hasPageFrameFeature ? (

@priscilawebdev priscilawebdev Apr 22, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Before/After

Image

<Fragment>
<TopBar.Slot name="title">
<Breadcrumbs
crumbs={[
{
label: t('Discover'),
to: getDiscoverLandingUrl(organization),
},
{label: t('Saved Queries')},
]}
/>
</TopBar.Slot>
<TopBar.Slot name="actions">
<LinkButton
data-test-id="build-new-query"
Expand All @@ -219,7 +218,20 @@ function DiscoverLanding() {
{t('Build a new query')}
</LinkButton>
</TopBar.Slot>
) : (
</Fragment>
) : (
<Layout.Header>
<Layout.HeaderContent>
<Breadcrumbs
crumbs={[
{
label: t('Discover'),
to: getDiscoverLandingUrl(organization),
},
{label: t('Saved Queries')},
]}
/>
</Layout.HeaderContent>
<Layout.HeaderActions>
<LinkButton
data-test-id="build-new-query"
Expand All @@ -235,8 +247,8 @@ function DiscoverLanding() {
{t('Build a new query')}
</LinkButton>
</Layout.HeaderActions>
)}
</Layout.Header>
</Layout.Header>
)}
<Layout.Body>
<Layout.Main width="full">
<StyledActions>
Expand Down
173 changes: 79 additions & 94 deletions static/app/views/discover/results/resultsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,104 +131,89 @@ class ResultsHeader extends Component<Props, State> {
const {savedQuery, loading, homepageQuery} = this.state;
const hasDiscoverQueryFeature = organization.features.includes('discover-query');

const savedQueryButton = (
<SavedQueryButtonGroup
setSavedQuery={setSavedQuery}
location={location}
organization={organization}
eventView={eventView}
savedQuery={savedQuery}
queryDataLoading={loading}
disabled={errorCode >= 400 && errorCode < 500}
updateCallback={() => this.fetchData()}
yAxis={yAxis}
isHomepage={isHomepage}
setHomepageQuery={updatedHomepageQuery => {
this.setState({
homepageQuery: getSavedQueryWithDataset(updatedHomepageQuery) as SavedQuery,
});
if (isHomepage) {
setSavedQuery(updatedHomepageQuery);
}
}}
homepageQuery={homepageQuery}
/>
);

const title = (
<Fragment>
{t('Discover')}
<PageHeadingQuestionTooltip
docsUrl="https://docs.sentry.io/product/discover-queries/"
title={t('Create queries to get insights into the health of your system.')}
/>
</Fragment>
);

const breadcrumbAndInput = (
<Fragment>
<DiscoverBreadcrumb
eventView={eventView}
organization={organization}
location={location}
isHomepage={isHomepage}
/>
<EventInputName
savedQuery={savedQuery}
organization={organization}
eventView={eventView}
isHomepage={isHomepage}
/>
</Fragment>
);

return (
<Layout.Header>
<Layout.HeaderContent>
{isHomepage ? (
<GuideAnchor target="discover_landing_header">
<Layout.Title>
{t('Discover')}
<PageHeadingQuestionTooltip
docsUrl="https://docs.sentry.io/product/discover-queries/"
title={t(
'Create queries to get insights into the health of your system.'
)}
/>
</Layout.Title>
</GuideAnchor>
) : hasDiscoverQueryFeature ? (
<Fragment>
<DiscoverBreadcrumb
eventView={eventView}
organization={organization}
location={location}
isHomepage={isHomepage}
/>
<EventInputName
savedQuery={savedQuery}
organization={organization}
eventView={eventView}
isHomepage={isHomepage}
/>
</Fragment>
) : (
// Only has discover-basic
<Fragment>
<Layout.Title>
{t('Discover')}
<PageHeadingQuestionTooltip
docsUrl="https://docs.sentry.io/product/discover-queries/"
title={t(
'Create queries to get insights into the health of your system.'
)}
/>
</Layout.Title>
</Fragment>
)}
{this.renderAuthor()}
</Layout.HeaderContent>
{hasPageFrameFeature ? (
<TopBar.Slot name="actions">
<SavedQueryButtonGroup
setSavedQuery={setSavedQuery}
location={location}
organization={organization}
eventView={eventView}
savedQuery={savedQuery}
queryDataLoading={loading}
disabled={errorCode >= 400 && errorCode < 500}
updateCallback={() => this.fetchData()}
yAxis={yAxis}
isHomepage={isHomepage}
setHomepageQuery={updatedHomepageQuery => {
this.setState({
homepageQuery: getSavedQueryWithDataset(
updatedHomepageQuery
) as SavedQuery,
});
if (isHomepage) {
setSavedQuery(updatedHomepageQuery);
}
}}
homepageQuery={homepageQuery}
/>
</TopBar.Slot>
<Fragment>
<TopBar.Slot name="title">
{isHomepage ? (
<GuideAnchor target="discover_landing_header">{title}</GuideAnchor>
) : hasDiscoverQueryFeature ? (
breadcrumbAndInput
) : (
title
)}
</TopBar.Slot>
<TopBar.Slot name="actions">{savedQueryButton}</TopBar.Slot>
</Fragment>
) : (
<Layout.HeaderActions>
<SavedQueryButtonGroup
setSavedQuery={setSavedQuery}
location={location}
organization={organization}
eventView={eventView}
savedQuery={savedQuery}
queryDataLoading={loading}
disabled={errorCode >= 400 && errorCode < 500}
updateCallback={() => this.fetchData()}
yAxis={yAxis}
isHomepage={isHomepage}
setHomepageQuery={updatedHomepageQuery => {
this.setState({
homepageQuery: getSavedQueryWithDataset(
updatedHomepageQuery
) as SavedQuery,
});
if (isHomepage) {
setSavedQuery(updatedHomepageQuery);
}
}}
homepageQuery={homepageQuery}
/>
</Layout.HeaderActions>
<Fragment>
<Layout.HeaderContent>
{isHomepage ? (
<GuideAnchor target="discover_landing_header">
<Layout.Title>{title}</Layout.Title>
</GuideAnchor>
) : hasDiscoverQueryFeature ? (
breadcrumbAndInput
) : (
// Only has discover-basic
<Layout.Title>{title}</Layout.Title>
)}
{this.renderAuthor()}
</Layout.HeaderContent>
<Layout.HeaderActions>{savedQueryButton}</Layout.HeaderActions>
</Fragment>
)}
<DatasetSelectorTabs
eventView={eventView}
Expand Down
50 changes: 29 additions & 21 deletions static/app/views/explore/errors/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import {Fragment} from 'react';

import {FeatureBadge} from '@sentry/scraps/badge';

import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
Expand Down Expand Up @@ -25,21 +27,38 @@ export default function ErrorsContent() {

return (
<SentryDocumentTitle title={t('Errors')} orgSlug={organization?.slug}>
<Layout.Page>
<ErrorsHeader />
<PageFiltersContainer>
<ExploreBodySearch>
<ErrorsFilterSection />
</ExploreBodySearch>
</PageFiltersContainer>
<ErrorsBody />
</Layout.Page>
<ErrorsHeader />
<PageFiltersContainer>
<ExploreBodySearch>
<ErrorsFilterSection />
</ExploreBodySearch>
</PageFiltersContainer>
<ErrorsBody />
</SentryDocumentTitle>
);
}

function ErrorsHeader() {
const hasPageFrameFeature = useHasPageFrameFeature();

if (hasPageFrameFeature) {
return (
<Fragment>
<TopBar.Slot name="title">
{t('Errors')} <FeatureBadge type="alpha" />
</TopBar.Slot>
<TopBar.Slot name="feedback">
<FeedbackButton
aria-label={t('Give Feedback')}
tooltipProps={{title: t('Give Feedback')}}
>
{null}
</FeedbackButton>
</TopBar.Slot>
</Fragment>
);
}

return (
<Layout.Header unified>
<Layout.HeaderContent unified>
Expand All @@ -48,18 +67,7 @@ function ErrorsHeader() {
</Layout.Title>
</Layout.HeaderContent>
<Layout.HeaderActions>
{hasPageFrameFeature ? (
<TopBar.Slot name="feedback">
<FeedbackButton
aria-label={t('Give Feedback')}
tooltipProps={{title: t('Give Feedback')}}
>
{null}
</FeedbackButton>
</TopBar.Slot>
) : (
<FeedbackButton />
)}
<FeedbackButton />
</Layout.HeaderActions>
</Layout.Header>
);
Expand Down
Loading
Loading