Skip to content

Commit cd5d439

Browse files
JonasBaJonasBa
committed
ref(layout): move title to page layout
1 parent d9466a5 commit cd5d439

File tree

11 files changed

+96
-95
lines changed

11 files changed

+96
-95
lines changed

‎static/app/components/layouts/thirds.tsx

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
1+
import {Fragment} from 'react';
12
import {css} from '@emotion/react';
23
import styled from '@emotion/styled';
34

5+
import {Flex} from 'sentry/components/core/layout';
46
import {Tabs} from 'sentry/components/core/tabs';
7+
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
58
import {space} from 'sentry/styles/space';
69

710
/**
811
* Main container for a page.
912
*/
10-
export const Page = styled('main')<{withPadding?: boolean}>`
11-
display: flex;
12-
flex-direction: column;
13-
flex: 1;
14-
${p => p.withPadding && `padding: ${space(3)} ${space(4)}`};
15-
`;
13+
interface PageProps {
14+
children: NonNullable<React.ReactNode>;
15+
title: string | null;
16+
withPadding?: boolean;
17+
}
18+
19+
export function Page(props: PageProps) {
20+
return (
21+
<Fragment>
22+
{props.title ? <SentryDocumentTitle title={props.title} /> : null}
23+
<Flex
24+
direction="column"
25+
flex={1}
26+
padding={props.withPadding ? `2xl 3xl` : undefined}
27+
>
28+
{props.children}
29+
</Flex>
30+
</Fragment>
31+
);
32+
}
1633

1734
/**
1835
* Header container for header content and header actions.

‎static/app/components/noAccess.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {t} from 'sentry/locale';
44

55
export function NoAccess() {
66
return (
7-
<Layout.Page withPadding>
7+
<Layout.Page title={null} withPadding>
88
<Alert.Container>
99
<Alert type="warning" showIcon={false}>
1010
{t("You don't have access to this feature")}

‎static/app/components/organizations/pageFilters/container.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ function PageFiltersContainer({
200200
// would speed up orgs with tons of projects
201201
if (!isReady || !hasInitialized) {
202202
return (
203-
<Layout.Page withPadding>
203+
<Layout.Page title={null} withPadding>
204204
<LoadingIndicator />
205205
</Layout.Page>
206206
);

‎static/app/components/workflowEngine/layout/detail.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface WorkflowEngineDetailLayoutProps {
2020
* Precomposed 67/33 layout for Automations / Monitors detail pages.
2121
*/
2222
function DetailLayout({children}: WorkflowEngineDetailLayoutProps) {
23-
return <StyledPage>{children}</StyledPage>;
23+
return <StyledPage title={null}>{children as NonNullable<React.ReactNode>}</StyledPage>;
2424
}
2525

2626
const ProjectContainer = styled('div')`

‎static/app/components/workflowEngine/layout/edit.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ interface WorkflowEngineEditLayoutProps {
2727
function EditLayout({children, formProps}: WorkflowEngineEditLayoutProps) {
2828
return (
2929
<FullHeightForm hideFooter {...formProps}>
30-
<StyledPage>{children}</StyledPage>
30+
<StyledPage title={null}>{children as NonNullable<React.ReactNode>}</StyledPage>
3131
</FullHeightForm>
3232
);
3333
}

‎static/app/components/workflowEngine/layout/list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ interface WorkflowEngineListLayoutProps {
1515
function WorkflowEngineListLayout({children, actions}: WorkflowEngineListLayoutProps) {
1616
const title = useDocumentTitle();
1717
return (
18-
<Layout.Page>
18+
<Layout.Page title={null}>
1919
<Layout.Header unified>
2020
<Layout.HeaderContent>
2121
<Layout.Title>{title}</Layout.Title>

‎static/app/views/alerts/rules/crons/details.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
1313
import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
1414
import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
1515
import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
16-
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
1716
import {TimezoneProvider, useTimezone} from 'sentry/components/timezoneProvider';
1817
import {t} from 'sentry/locale';
1918
import {space} from 'sentry/styles/space';
@@ -138,7 +137,7 @@ function MonitorDetails({params, location}: Props) {
138137

139138
if (!monitor) {
140139
return (
141-
<Layout.Page>
140+
<Layout.Page title={null}>
142141
<LoadingIndicator />
143142
</Layout.Page>
144143
);
@@ -147,8 +146,7 @@ function MonitorDetails({params, location}: Props) {
147146
const envsSortedByLastCheck = sortBy(monitor.environments, e => e.lastCheckIn);
148147

149148
return (
150-
<Layout.Page>
151-
<SentryDocumentTitle title={`${monitor.name} — Alerts`} />
149+
<Layout.Page title={`${monitor.name} — Alerts`}>
152150
<MonitorHeader monitor={monitor} orgSlug={organization.slug} onUpdate={onUpdate} />
153151
<Layout.Body>
154152
<TimezoneProvider timezone={timezoneOverride}>

‎static/app/views/permissionDenied.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as Sentry from '@sentry/react';
44
import {ExternalLink} from 'sentry/components/core/link';
55
import * as Layout from 'sentry/components/layouts/thirds';
66
import LoadingError from 'sentry/components/loadingError';
7-
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
87
import {t, tct} from 'sentry/locale';
98
import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
109
import {useRoutes} from 'sentry/utils/useRoutes';
@@ -24,21 +23,19 @@ function PermissionDenied() {
2423
}, []);
2524

2625
return (
27-
<SentryDocumentTitle title={t('Permission Denied')}>
28-
<Layout.Page withPadding>
29-
<LoadingError
30-
message={tct(
31-
`Your role does not have the necessary permissions to access this
26+
<Layout.Page title={t('Permission Denied')} withPadding>
27+
<LoadingError
28+
message={tct(
29+
`Your role does not have the necessary permissions to access this
3230
resource, please read more about [link:organizational roles]`,
33-
{
34-
link: (
35-
<ExternalLink href="https://docs.sentry.io/product/accounts/membership/" />
36-
),
37-
}
38-
)}
39-
/>
40-
</Layout.Page>
41-
</SentryDocumentTitle>
31+
{
32+
link: (
33+
<ExternalLink href="https://docs.sentry.io/product/accounts/membership/" />
34+
),
35+
}
36+
)}
37+
/>
38+
</Layout.Page>
4239
);
4340
}
4441

‎static/app/views/projectEventRedirect.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ function ProjectEventRedirect({router}: Props) {
7070
return error ? (
7171
<DetailedError heading={t('Not found')} message={error} hideSupportLinks />
7272
) : (
73-
<Layout.Page withPadding />
73+
// @ts-expect-error: Layout.Page accepts NonNullable<React.ReactNode>
74+
<Layout.Page title={null} withPadding />
7475
);
7576
}
7677

‎static/app/views/releases/detail/index.tsx

Lines changed: 40 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import NoProjectMessage from 'sentry/components/noProjectMessage';
1010
import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
1111
import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
1212
import PickProjectToContinue from 'sentry/components/pickProjectToContinue';
13-
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
1413
import {PAGE_URL_PARAM, URL_PARAM} from 'sentry/constants/pageFilters';
1514
import {t} from 'sentry/locale';
1615
import type {SessionApiResponse} from 'sentry/types/organization';
@@ -145,17 +144,15 @@ function ReleasesDetail({
145144
e => e?.status === 404 || e?.status === 403
146145
);
147146
return (
148-
<SentryDocumentTitle title={pageTitle}>
149-
<Layout.Page>
150-
<Alert.Container>
151-
<Alert type="error">
152-
{possiblyWrongProject
153-
? t('This release may not be in your selected project.')
154-
: t('There was an error loading the release details')}
155-
</Alert>
156-
</Alert.Container>
157-
</Layout.Page>
158-
</SentryDocumentTitle>
147+
<Layout.Page title={pageTitle}>
148+
<Alert.Container>
149+
<Alert type="error">
150+
{possiblyWrongProject
151+
? t('This release may not be in your selected project.')
152+
: t('There was an error loading the release details')}
153+
</Alert>
154+
</Alert.Container>
155+
</Layout.Page>
159156
);
160157
},
161158
[pageTitle]
@@ -174,11 +171,9 @@ function ReleasesDetail({
174171
isReleasePending || (isDeploysEnabled && isDeploysPending) || isSessionsPending;
175172
if (isPending) {
176173
return (
177-
<SentryDocumentTitle title={pageTitle}>
178-
<Layout.Page>
179-
<LoadingIndicator />
180-
</Layout.Page>
181-
</SentryDocumentTitle>
174+
<Layout.Page title={pageTitle}>
175+
<LoadingIndicator />
176+
</Layout.Page>
182177
);
183178
}
184179

@@ -190,34 +185,32 @@ function ReleasesDetail({
190185
}
191186

192187
return (
193-
<SentryDocumentTitle title={pageTitle}>
194-
<Layout.Page>
195-
<NoProjectMessage organization={organization}>
196-
<ReleaseHeader
197-
location={location}
198-
organization={organization}
199-
release={release}
200-
project={project}
201-
releaseMeta={releaseMeta}
202-
refetchData={refetchData}
203-
/>
204-
<ReleaseContext
205-
value={{
206-
release,
207-
project,
208-
deploys,
209-
releaseMeta,
210-
refetchData,
211-
hasHealthData:
212-
getCount(sessions?.groups, SessionFieldWithOperation.SESSIONS) > 0,
213-
releaseBounds,
214-
}}
215-
>
216-
{children}
217-
</ReleaseContext>
218-
</NoProjectMessage>
219-
</Layout.Page>
220-
</SentryDocumentTitle>
188+
<Layout.Page title={pageTitle}>
189+
<NoProjectMessage organization={organization}>
190+
<ReleaseHeader
191+
location={location}
192+
organization={organization}
193+
release={release}
194+
project={project}
195+
releaseMeta={releaseMeta}
196+
refetchData={refetchData}
197+
/>
198+
<ReleaseContext
199+
value={{
200+
release,
201+
project,
202+
deploys,
203+
releaseMeta,
204+
refetchData,
205+
hasHealthData:
206+
getCount(sessions?.groups, SessionFieldWithOperation.SESSIONS) > 0,
207+
releaseBounds,
208+
}}
209+
>
210+
{children}
211+
</ReleaseContext>
212+
</NoProjectMessage>
213+
</Layout.Page>
221214
);
222215
}
223216

@@ -253,7 +246,7 @@ function ReleasesDetailContainer({children}: {children: React.ReactNode}) {
253246

254247
if (isPending) {
255248
return (
256-
<Layout.Page>
249+
<Layout.Page title={null}>
257250
<LoadingIndicator />
258251
</Layout.Page>
259252
);
@@ -262,7 +255,7 @@ function ReleasesDetailContainer({children}: {children: React.ReactNode}) {
262255
if (isError && error.status === 404) {
263256
// This catches a 404 coming from the release endpoint and displays a custom error message.
264257
return (
265-
<Layout.Page withPadding>
258+
<Layout.Page title={null} withPadding>
266259
<Alert.Container>
267260
<Alert type="error">{t('This release could not be found.')}</Alert>
268261
</Alert.Container>

0 commit comments

Comments
 (0)