Skip to content

Commit 9bcfd0f

Browse files
JonasBapriscilawebdevClaude Opus 4.6
authored
ref(layout): use Layout.Page on isolated pages (#111644)
Wraps non-compliant routes in isolated page areas with Layout.Page. Part of the Layout.Page audit remediation. ## Changes - `static/app/views/insights/pages/conversations/layout.tsx`: moved `Layout.Page` from `overview.tsx` to the layout component so it wraps both the header and outlet content - `static/app/views/insights/pages/conversations/overview.tsx`: removed `Layout.Page` (now handled by layout) - `static/app/views/profiling/continuousProfileProvider.tsx`: added `Layout.Page` wrapping header + outlet so flamegraph pages get correct framing - `static/app/views/profiling/transactionProfileProvider.tsx`: added `Layout.Page` wrapping header + outlet so flamechart pages get correct framing - `static/app/views/profiling/continuousProfileFlamegraph.tsx`: removed `Layout.Page` (now handled by provider) - `static/app/views/profiling/profileFlamechart.tsx`: removed `Layout.Page` (now handled by provider) - `static/app/views/profiling/profileSummary/index.tsx`: wrap `ProfileSummaryPageToggle` with `Layout.Page` - `static/app/views/profiling/differentialFlamegraph.tsx`: wrap `DifferentialFlamegraphWithProviders` with `Layout.Page` - `static/app/views/projectInstall/newProject.tsx`: wrap `NewProject` content with `Layout.Page` ## Affected routes | Path | Strategy | | --- | --- | | `/organizations/:orgId/explore/conversations/` | layout-level wrap (header + outlet) | | `/organizations/:orgId/profiling/profile/:projectId/flamegraph/` | provider-level wrap (header + outlet) | | `/organizations/:orgId/profiling/profile/:projectId/:eventId/flamegraph/` | provider-level wrap (header + outlet) | | `/organizations/:orgId/profiling/summary/:projectId/` | leaf fix | | `/organizations/:orgId/profiling/profile/:projectId/differential-flamegraph/` | leaf fix | | `/organizations/:orgId/projects/new/` | leaf fix | ## Verification - [ ] Each route above loads in the browser and renders inside a `<main>` element --------- Co-authored-by: Priscila Oliveira <priscila.oliveira@sentry.io> Co-authored-by: Claude Opus 4.6 <noreply@example.com>
1 parent a9be7f5 commit 9bcfd0f

File tree

9 files changed

+106
-110
lines changed

9 files changed

+106
-110
lines changed

‎static/app/views/insights/pages/conversations/layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import {Fragment} from 'react';
21
import {Outlet, useMatches} from 'react-router-dom';
32

3+
import * as Layout from 'sentry/components/layouts/thirds';
44
import {ConversationsPageHeader} from 'sentry/views/insights/pages/conversations/conversationsPageHeader';
55
import {ModuleName} from 'sentry/views/insights/types';
66

77
function ConversationsLayout() {
88
const handle = useMatches().at(-1)?.handle as {module?: ModuleName} | undefined;
99

1010
return (
11-
<Fragment>
11+
<Layout.Page>
1212
{handle && 'module' in handle ? (
1313
<ConversationsPageHeader module={handle.module} />
1414
) : null}
1515
<Outlet />
16-
</Fragment>
16+
</Layout.Page>
1717
);
1818
}
1919

‎static/app/views/profiling/continuousProfileFlamegraph.tsx‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as qs from 'query-string';
44

55
import {Stack} from '@sentry/scraps/layout';
66

7-
import * as Layout from 'sentry/components/layouts/thirds';
87
import {LoadingIndicator} from 'sentry/components/loadingIndicator';
98
import {ContinuousFlamegraph} from 'sentry/components/profiling/flamegraph/continuousFlamegraph';
109
import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
@@ -104,27 +103,25 @@ export default function ContinuousProfileFlamegraphWrapper() {
104103
title={t('Profiling \u2014 Flamechart')}
105104
orgSlug={organization.slug}
106105
>
107-
<LayoutPageWithHiddenFooter>
108-
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
109-
<ProfileGroupTypeProvider
110-
input={profiles.type === 'resolved' ? profiles.data : null}
111-
traceID={params.eventId!}
112-
>
113-
<FlamegraphThemeProvider>
114-
<FlamegraphStateQueryParamSync />
115-
<FlamegraphStateLocalStorageSync />
116-
<FlamegraphContainer>
117-
{profiles.type === 'loading' ? (
118-
<Stack justify="center" width="100%" height="100%" position="absolute">
119-
<LoadingIndicator />
120-
</Stack>
121-
) : null}
122-
<ContinuousProfileFlamegraph />
123-
</FlamegraphContainer>
124-
</FlamegraphThemeProvider>
125-
</ProfileGroupTypeProvider>
126-
</FlamegraphStateProvider>
127-
</LayoutPageWithHiddenFooter>
106+
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
107+
<ProfileGroupTypeProvider
108+
input={profiles.type === 'resolved' ? profiles.data : null}
109+
traceID={params.eventId!}
110+
>
111+
<FlamegraphThemeProvider>
112+
<FlamegraphStateQueryParamSync />
113+
<FlamegraphStateLocalStorageSync />
114+
<FlamegraphContainer>
115+
{profiles.type === 'loading' ? (
116+
<Stack justify="center" width="100%" height="100%" position="absolute">
117+
<LoadingIndicator />
118+
</Stack>
119+
) : null}
120+
<ContinuousProfileFlamegraph />
121+
</FlamegraphContainer>
122+
</FlamegraphThemeProvider>
123+
</ProfileGroupTypeProvider>
124+
</FlamegraphStateProvider>
128125
</SentryDocumentTitle>
129126
);
130127
}
@@ -159,9 +156,3 @@ const FlamegraphContainer = styled('div')`
159156
flex-direction: column;
160157
flex: 1 1 100%;
161158
`;
162-
163-
const LayoutPageWithHiddenFooter = styled(Layout.Page)`
164-
~ footer {
165-
display: none;
166-
}
167-
`;

‎static/app/views/profiling/continuousProfileProvider.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {decodeScalar} from 'sentry/utils/queryString';
99
import {useLocation} from 'sentry/utils/useLocation';
1010
import {useOrganization} from 'sentry/utils/useOrganization';
1111
import {useParams} from 'sentry/utils/useParams';
12+
import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/layoutPageWithHiddenFooter';
1213

1314
import {ContinuousProfileProvider, ProfileTransactionContext} from './profilesProvider';
1415

@@ -65,12 +66,14 @@ export default function ProfileAndTransactionProvider(): React.ReactElement {
6566
setProfile={setProfile}
6667
>
6768
<ProfileTransactionContext value={profileTransaction}>
68-
<ContinuousProfileHeader
69-
transaction={
70-
profileTransaction.type === 'resolved' ? profileTransaction.data : null
71-
}
72-
/>
73-
<Outlet />
69+
<LayoutPageWithHiddenFooter>
70+
<ContinuousProfileHeader
71+
transaction={
72+
profileTransaction.type === 'resolved' ? profileTransaction.data : null
73+
}
74+
/>
75+
<Outlet />
76+
</LayoutPageWithHiddenFooter>
7477
</ProfileTransactionContext>
7578
</ContinuousProfileProvider>
7679
);

‎static/app/views/profiling/differentialFlamegraph.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {FlamegraphRenderer2D} from 'sentry/utils/profiling/renderers/flamegraphR
4040
import {FlamegraphRendererWebGL} from 'sentry/utils/profiling/renderers/flamegraphRendererWebGL';
4141
import {Rect} from 'sentry/utils/profiling/speedscope';
4242
import {useLocation} from 'sentry/utils/useLocation';
43+
import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/layoutPageWithHiddenFooter';
4344
import {LOADING_PROFILE_GROUP} from 'sentry/views/profiling/profileGroupProvider';
4445

4546
const PROFILE_TYPE = 'differential aggregate flamegraph' as const;
@@ -348,26 +349,24 @@ const DifferentialFlamegraphContainer = styled('div')`
348349
display: flex;
349350
flex-direction: column;
350351
flex: 1;
351-
352-
~ footer {
353-
display: none;
354-
}
355352
`;
356353

357354
function DifferentialFlamegraphWithProviders() {
358355
return (
359-
<FlamegraphThemeProvider>
360-
<FlamegraphStateProvider
361-
initialState={{
362-
preferences: {
363-
sorting: 'alphabetical',
364-
view: 'top down',
365-
},
366-
}}
367-
>
368-
<DifferentialFlamegraphView />
369-
</FlamegraphStateProvider>
370-
</FlamegraphThemeProvider>
356+
<LayoutPageWithHiddenFooter>
357+
<FlamegraphThemeProvider>
358+
<FlamegraphStateProvider
359+
initialState={{
360+
preferences: {
361+
sorting: 'alphabetical',
362+
view: 'top down',
363+
},
364+
}}
365+
>
366+
<DifferentialFlamegraphView />
367+
</FlamegraphStateProvider>
368+
</FlamegraphThemeProvider>
369+
</LayoutPageWithHiddenFooter>
371370
);
372371
}
373372

‎static/app/views/profiling/layoutPageWithHiddenFooter.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import styled from '@emotion/styled';
2+
3+
import * as Layout from 'sentry/components/layouts/thirds';
4+
5+
// The footer component is a sibling of this div.
6+
// Remove it so the flamegraph can take up the
7+
// entire screen.
8+
export const LayoutPageWithHiddenFooter = styled(Layout.Page)`
9+
~ footer {
10+
display: none;
11+
}
12+
`;

‎static/app/views/profiling/profileFlamechart.tsx‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as qs from 'query-string';
44

55
import {Stack} from '@sentry/scraps/layout';
66

7-
import * as Layout from 'sentry/components/layouts/thirds';
87
import {LoadingIndicator} from 'sentry/components/loadingIndicator';
98
import {Flamegraph} from 'sentry/components/profiling/flamegraph/flamegraph';
109
import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
@@ -105,27 +104,25 @@ export default function ProfileFlamegraphWrapper() {
105104
title={t('Profiling \u2014 Flamechart')}
106105
orgSlug={organization.slug}
107106
>
108-
<LayoutPageWithHiddenFooter>
109-
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
110-
<ProfileGroupTypeProvider
111-
input={profiles.type === 'resolved' ? profiles.data : null}
112-
traceID={params.eventId!}
113-
>
114-
<FlamegraphThemeProvider>
115-
<FlamegraphStateQueryParamSync />
116-
<FlamegraphStateLocalStorageSync />
117-
<FlamegraphContainer>
118-
{profiles.type === 'loading' || profiledTransaction.type === 'loading' ? (
119-
<Stack justify="center" width="100%" height="100%" position="absolute">
120-
<LoadingIndicator />
121-
</Stack>
122-
) : null}
123-
<ProfileFlamegraph />
124-
</FlamegraphContainer>
125-
</FlamegraphThemeProvider>
126-
</ProfileGroupTypeProvider>
127-
</FlamegraphStateProvider>
128-
</LayoutPageWithHiddenFooter>
107+
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
108+
<ProfileGroupTypeProvider
109+
input={profiles.type === 'resolved' ? profiles.data : null}
110+
traceID={params.eventId!}
111+
>
112+
<FlamegraphThemeProvider>
113+
<FlamegraphStateQueryParamSync />
114+
<FlamegraphStateLocalStorageSync />
115+
<FlamegraphContainer>
116+
{profiles.type === 'loading' || profiledTransaction.type === 'loading' ? (
117+
<Stack justify="center" width="100%" height="100%" position="absolute">
118+
<LoadingIndicator />
119+
</Stack>
120+
) : null}
121+
<ProfileFlamegraph />
122+
</FlamegraphContainer>
123+
</FlamegraphThemeProvider>
124+
</ProfileGroupTypeProvider>
125+
</FlamegraphStateProvider>
129126
</SentryDocumentTitle>
130127
);
131128
}
@@ -160,9 +157,3 @@ const FlamegraphContainer = styled('div')`
160157
flex-direction: column;
161158
flex: 1 1 100%;
162159
`;
163-
164-
const LayoutPageWithHiddenFooter = styled(Layout.Page)`
165-
~ footer {
166-
display: none;
167-
}
168-
`;

‎static/app/views/profiling/profileSummary/index.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import {
6767
useFlamegraph,
6868
} from 'sentry/views/profiling/flamegraphProvider';
6969
import {ProfilesSummaryChart} from 'sentry/views/profiling/landing/profilesSummaryChart';
70+
import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/layoutPageWithHiddenFooter';
7071
import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';
7172
import {ProfilesTable} from 'sentry/views/profiling/profileSummary/profilesTable';
7273

@@ -636,15 +637,6 @@ const ProfileSummaryContainer = styled('div')`
636637
display: flex;
637638
flex-direction: column;
638639
flex: 1 1 100%;
639-
640-
/*
641-
* The footer component is a sibling of this div.
642-
* Remove it so the flamegraph can take up the
643-
* entire screen.
644-
*/
645-
~ footer {
646-
display: none;
647-
}
648640
`;
649641

650642
const PROFILE_DIGEST_FIELDS = [
@@ -781,10 +773,12 @@ const ProfileDigestLabel = styled('span')`
781773

782774
export default function ProfileSummaryPageToggle() {
783775
return (
784-
<ProfileSummaryContainer data-test-id="profile-summary-redesign">
785-
<ErrorBoundary>
786-
<ProfileSummaryPage />
787-
</ErrorBoundary>
788-
</ProfileSummaryContainer>
776+
<LayoutPageWithHiddenFooter>
777+
<ProfileSummaryContainer data-test-id="profile-summary-redesign">
778+
<ErrorBoundary>
779+
<ProfileSummaryPage />
780+
</ErrorBoundary>
781+
</ProfileSummaryContainer>
782+
</LayoutPageWithHiddenFooter>
789783
);
790784
}

‎static/app/views/profiling/transactionProfileProvider.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {isSchema, isSentrySampledProfile} from 'sentry/utils/profiling/guards/pr
88
import {useSentryEvent} from 'sentry/utils/profiling/hooks/useSentryEvent';
99
import {useOrganization} from 'sentry/utils/useOrganization';
1010
import {useParams} from 'sentry/utils/useParams';
11+
import {LayoutPageWithHiddenFooter} from 'sentry/views/profiling/layoutPageWithHiddenFooter';
1112

1213
import {ProfileTransactionContext, TransactionProfileProvider} from './profilesProvider';
1314

@@ -46,14 +47,16 @@ export default function ProfileAndTransactionProvider(): React.ReactElement {
4647
setProfile={setProfile}
4748
>
4849
<ProfileTransactionContext value={profileTransaction}>
49-
<ProfileHeader
50-
eventId={params.eventId!}
51-
projectId={projectSlug}
52-
transaction={
53-
profileTransaction.type === 'resolved' ? profileTransaction.data : null
54-
}
55-
/>
56-
<Outlet />
50+
<LayoutPageWithHiddenFooter>
51+
<ProfileHeader
52+
eventId={params.eventId!}
53+
projectId={projectSlug}
54+
transaction={
55+
profileTransaction.type === 'resolved' ? profileTransaction.data : null
56+
}
57+
/>
58+
<Outlet />
59+
</LayoutPageWithHiddenFooter>
5760
</ProfileTransactionContext>
5861
</TransactionProfileProvider>
5962
);

‎static/app/views/projectInstall/newProject.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import styled from '@emotion/styled';
22

3+
import * as Layout from 'sentry/components/layouts/thirds';
34
import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
45

56
import {CreateProject} from './createProject';
67

78
function NewProject() {
89
return (
910
<SentryDocumentTitle>
10-
<Container>
11-
<div className="container">
12-
<Content>
13-
<CreateProject />
14-
</Content>
15-
</div>
16-
</Container>
11+
<Layout.Page>
12+
<Container>
13+
<div className="container">
14+
<Content>
15+
<CreateProject />
16+
</Content>
17+
</div>
18+
</Container>
19+
</Layout.Page>
1720
</SentryDocumentTitle>
1821
);
1922
}

0 commit comments

Comments
 (0)