From b6777a6a3fd8bb57063b466ae6a7b9396010cf99 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Thu, 26 Mar 2026 09:42:56 -0700
Subject: [PATCH 1/2] ref(layout): use Layout.Page on alerts

---
 static/app/views/alerts/create.tsx            |   4 +-
 static/app/views/alerts/edit.tsx              |   4 +-
 .../app/views/alerts/list/incidents/index.tsx |  66 ++---
 .../alerts/list/rules/alertRulesList.tsx      | 246 +++++++++---------
 4 files changed, 163 insertions(+), 157 deletions(-)

diff --git a/static/app/views/alerts/create.tsx b/static/app/views/alerts/create.tsx
index 8230782cf304cf..7179f1f4db1bcf 100644
--- a/static/app/views/alerts/create.tsx
+++ b/static/app/views/alerts/create.tsx
@@ -137,7 +137,7 @@ export default function Create() {
   const title = t('New Alert Rule');
 
   return (
-    <Fragment>
+    <Layout.Page>
       <SentryDocumentTitle title={title} projectSlug={project.slug} />
       <Layout.Header>
         <Layout.HeaderContent>
@@ -228,6 +228,6 @@ export default function Create() {
           </Fragment>
         )}
       </Layout.Body>
-    </Fragment>
+    </Layout.Page>
   );
 }
diff --git a/static/app/views/alerts/edit.tsx b/static/app/views/alerts/edit.tsx
index 9805c6bbfb5c1c..a5dced1453d396 100644
--- a/static/app/views/alerts/edit.tsx
+++ b/static/app/views/alerts/edit.tsx
@@ -61,7 +61,7 @@ export default function ProjectAlertsEditor() {
   const {teams, isLoading: teamsLoading} = useUserTeams();
 
   return (
-    <Fragment>
+    <Layout.Page>
       <SentryDocumentTitle
         title={title}
         orgSlug={organization.slug}
@@ -133,6 +133,6 @@ export default function ProjectAlertsEditor() {
           </Fragment>
         )}
       </Layout.Body>
-    </Fragment>
+    </Layout.Page>
   );
 }
diff --git a/static/app/views/alerts/list/incidents/index.tsx b/static/app/views/alerts/list/incidents/index.tsx
index b3d75f8a7cf9ca..eb2d9e0b008c59 100644
--- a/static/app/views/alerts/list/incidents/index.tsx
+++ b/static/app/views/alerts/list/incidents/index.tsx
@@ -263,28 +263,30 @@ class IncidentsList extends DeprecatedAsyncComponent<
 
     return (
       <SentryDocumentTitle title={t('Alerts')} orgSlug={organization.slug}>
-        <PageFiltersContainer>
-          <AlertHeader activeTab="stream" />
-          <Layout.Body>
-            <Layout.Main width="full">
-              {!this.tryRenderOnboarding() && (
-                <Fragment>
-                  <StyledAlert variant="info">
-                    {t('This page only shows metric alerts.')}
-                  </StyledAlert>
-                  <FilterBar
-                    location={location}
-                    onChangeFilter={this.handleChangeFilter}
-                    onChangeSearch={this.handleChangeSearch}
-                    onChangeStatus={this.handleChangeStatus}
-                    hasStatusFilters
-                  />
-                </Fragment>
-              )}
-              {this.renderList()}
-            </Layout.Main>
-          </Layout.Body>
-        </PageFiltersContainer>
+        <Layout.Page>
+          <PageFiltersContainer>
+            <AlertHeader activeTab="stream" />
+            <Layout.Body>
+              <Layout.Main width="full">
+                {!this.tryRenderOnboarding() && (
+                  <Fragment>
+                    <StyledAlert variant="info">
+                      {t('This page only shows metric alerts.')}
+                    </StyledAlert>
+                    <FilterBar
+                      location={location}
+                      onChangeFilter={this.handleChangeFilter}
+                      onChangeSearch={this.handleChangeSearch}
+                      onChangeStatus={this.handleChangeStatus}
+                      hasStatusFilters
+                    />
+                  </Fragment>
+                )}
+                {this.renderList()}
+              </Layout.Main>
+            </Layout.Body>
+          </PageFiltersContainer>
+        </Layout.Page>
       </SentryDocumentTitle>
     );
   }
@@ -303,15 +305,17 @@ export default function IncidentsListContainer() {
   }, []);
 
   const renderDisabled = () => (
-    <Layout.Body>
-      <Layout.Main width="full">
-        <Alert.Container>
-          <Alert variant="warning" showIcon={false}>
-            {t("You don't have access to this feature")}
-          </Alert>
-        </Alert.Container>
-      </Layout.Main>
-    </Layout.Body>
+    <Layout.Page>
+      <Layout.Body>
+        <Layout.Main width="full">
+          <Alert.Container>
+            <Alert variant="warning" showIcon={false}>
+              {t("You don't have access to this feature")}
+            </Alert>
+          </Alert.Container>
+        </Layout.Main>
+      </Layout.Body>
+    </Layout.Page>
   );
 
   return (
diff --git a/static/app/views/alerts/list/rules/alertRulesList.tsx b/static/app/views/alerts/list/rules/alertRulesList.tsx
index 1c5e300230d21b..8d37a4e8d81516 100644
--- a/static/app/views/alerts/list/rules/alertRulesList.tsx
+++ b/static/app/views/alerts/list/rules/alertRulesList.tsx
@@ -210,132 +210,134 @@ export default function AlertRulesList() {
     <Fragment>
       <SentryDocumentTitle title={t('Alerts')} orgSlug={organization.slug} />
 
-      <PageFiltersContainer>
-        <AlertHeader activeTab="rules" />
-        <Layout.Body>
-          <Layout.Main width="full">
-            <DataConsentBanner source="alerts" />
-            {!hasMetricAlertsFeature && hasAnyMetricAlerts && (
-              <Alert.Container>
-                <Alert variant="danger">
-                  Your metric alerts have been disabled. Upgrade your plan to re-enable
-                  them.
-                </Alert>
-              </Alert.Container>
-            )}
-            <FilterBar
-              location={location}
-              onChangeFilter={handleChangeFilter}
-              onChangeSearch={handleChangeSearch}
-              onChangeAlertType={handleChangeType}
-              hasTypeFilter
-            />
-            <StyledPanelTable
-              isLoading={isPending}
-              isEmpty={ruleList.length === 0 && !isError}
-              emptyMessage={t('No alert rules found for the current query.')}
-              headers={[
-                <StyledSortLink
-                  key="name"
-                  role="columnheader"
-                  aria-sort={
-                    sort.field === 'name'
-                      ? sort.asc
-                        ? 'ascending'
-                        : 'descending'
-                      : 'none'
-                  }
-                  to={{
-                    pathname: location.pathname,
-                    query: {
-                      ...currentQuery,
-                      // sort by name should start by ascending on first click
-                      asc: sort.field === 'name' && sort.asc ? undefined : '1',
-                      sort: 'name',
-                    },
-                  }}
-                >
-                  {t('Alert Rule')} {sort.field === 'name' ? sortArrow : null}
-                </StyledSortLink>,
-                <StyledSortLink
-                  key="status"
-                  role="columnheader"
-                  aria-sort={
-                    isAlertRuleSort ? (sort.asc ? 'ascending' : 'descending') : 'none'
-                  }
-                  to={{
-                    pathname: location.pathname,
-                    query: {
-                      ...currentQuery,
-                      asc: isAlertRuleSort && !sort.asc ? '1' : undefined,
-                      sort: ['incident_status', 'date_triggered'],
-                    },
-                  }}
-                >
-                  {t('Status')} {isAlertRuleSort ? sortArrow : null}
-                </StyledSortLink>,
-                t('Project'),
-                t('Team'),
-                t('Actions'),
-              ]}
-            >
-              {isError ? (
-                <StyledLoadingError
-                  message={t('There was an error loading alerts.')}
-                  onRetry={refetch}
-                />
-              ) : null}
-              <VisuallyCompleteWithData
-                id="AlertRules-Body"
-                hasData={ruleList.length > 0}
+      <Layout.Page>
+        <PageFiltersContainer>
+          <AlertHeader activeTab="rules" />
+          <Layout.Body>
+            <Layout.Main width="full">
+              <DataConsentBanner source="alerts" />
+              {!hasMetricAlertsFeature && hasAnyMetricAlerts && (
+                <Alert.Container>
+                  <Alert variant="danger">
+                    Your metric alerts have been disabled. Upgrade your plan to re-enable
+                    them.
+                  </Alert>
+                </Alert.Container>
+              )}
+              <FilterBar
+                location={location}
+                onChangeFilter={handleChangeFilter}
+                onChangeSearch={handleChangeSearch}
+                onChangeAlertType={handleChangeType}
+                hasTypeFilter
+              />
+              <StyledPanelTable
+                isLoading={isPending}
+                isEmpty={ruleList.length === 0 && !isError}
+                emptyMessage={t('No alert rules found for the current query.')}
+                headers={[
+                  <StyledSortLink
+                    key="name"
+                    role="columnheader"
+                    aria-sort={
+                      sort.field === 'name'
+                        ? sort.asc
+                          ? 'ascending'
+                          : 'descending'
+                        : 'none'
+                    }
+                    to={{
+                      pathname: location.pathname,
+                      query: {
+                        ...currentQuery,
+                        // sort by name should start by ascending on first click
+                        asc: sort.field === 'name' && sort.asc ? undefined : '1',
+                        sort: 'name',
+                      },
+                    }}
+                  >
+                    {t('Alert Rule')} {sort.field === 'name' ? sortArrow : null}
+                  </StyledSortLink>,
+                  <StyledSortLink
+                    key="status"
+                    role="columnheader"
+                    aria-sort={
+                      isAlertRuleSort ? (sort.asc ? 'ascending' : 'descending') : 'none'
+                    }
+                    to={{
+                      pathname: location.pathname,
+                      query: {
+                        ...currentQuery,
+                        asc: isAlertRuleSort && !sort.asc ? '1' : undefined,
+                        sort: ['incident_status', 'date_triggered'],
+                      },
+                    }}
+                  >
+                    {t('Status')} {isAlertRuleSort ? sortArrow : null}
+                  </StyledSortLink>,
+                  t('Project'),
+                  t('Team'),
+                  t('Actions'),
+                ]}
               >
-                <Projects orgId={organization.slug} slugs={projectsFromResults}>
-                  {({initiallyLoaded, projects}) =>
-                    ruleList.map(rule => {
-                      const isIssueAlertInstance = isIssueAlert(rule);
-                      const keyPrefix = isIssueAlertInstance
-                        ? AlertRuleType.ISSUE
-                        : rule.type === CombinedAlertType.UPTIME
-                          ? AlertRuleType.UPTIME
-                          : AlertRuleType.METRIC;
+                {isError ? (
+                  <StyledLoadingError
+                    message={t('There was an error loading alerts.')}
+                    onRetry={refetch}
+                  />
+                ) : null}
+                <VisuallyCompleteWithData
+                  id="AlertRules-Body"
+                  hasData={ruleList.length > 0}
+                >
+                  <Projects orgId={organization.slug} slugs={projectsFromResults}>
+                    {({initiallyLoaded, projects}) =>
+                      ruleList.map(rule => {
+                        const isIssueAlertInstance = isIssueAlert(rule);
+                        const keyPrefix = isIssueAlertInstance
+                          ? AlertRuleType.ISSUE
+                          : rule.type === CombinedAlertType.UPTIME
+                            ? AlertRuleType.UPTIME
+                            : AlertRuleType.METRIC;
 
-                      return (
-                        <RuleListRow
-                          // Metric and issue alerts can have the same id
-                          key={`${keyPrefix}-${rule.id}`}
-                          projectsLoaded={initiallyLoaded}
-                          projects={projects as Project[]}
-                          rule={rule}
-                          organization={organization}
-                          onOwnerChange={handleOwnerChange}
-                          onDelete={handleDeleteRule}
-                          hasEditAccess={hasEditAccess}
-                          hasMetricAlerts={hasMetricAlertsFeature}
-                        />
-                      );
-                    })
+                        return (
+                          <RuleListRow
+                            // Metric and issue alerts can have the same id
+                            key={`${keyPrefix}-${rule.id}`}
+                            projectsLoaded={initiallyLoaded}
+                            projects={projects as Project[]}
+                            rule={rule}
+                            organization={organization}
+                            onOwnerChange={handleOwnerChange}
+                            onDelete={handleDeleteRule}
+                            hasEditAccess={hasEditAccess}
+                            hasMetricAlerts={hasMetricAlertsFeature}
+                          />
+                        );
+                      })
+                    }
+                  </Projects>
+                </VisuallyCompleteWithData>
+              </StyledPanelTable>
+              <Pagination
+                pageLinks={ruleListPageLinks}
+                onCursor={(cursor, path, _direction) => {
+                  let team = currentQuery.team;
+                  // Keep team parameter, but empty to remove parameters
+                  if (!team || team.length === 0) {
+                    team = '';
                   }
-                </Projects>
-              </VisuallyCompleteWithData>
-            </StyledPanelTable>
-            <Pagination
-              pageLinks={ruleListPageLinks}
-              onCursor={(cursor, path, _direction) => {
-                let team = currentQuery.team;
-                // Keep team parameter, but empty to remove parameters
-                if (!team || team.length === 0) {
-                  team = '';
-                }
 
-                navigate({
-                  pathname: path,
-                  query: {...currentQuery, team, cursor},
-                });
-              }}
-            />
-          </Layout.Main>
-        </Layout.Body>
-      </PageFiltersContainer>
+                  navigate({
+                    pathname: path,
+                    query: {...currentQuery, team, cursor},
+                  });
+                }}
+              />
+            </Layout.Main>
+          </Layout.Body>
+        </PageFiltersContainer>
+      </Layout.Page>
     </Fragment>
   );
 }

From 6c03a42f8313e8ea41be0a5f0b999de8b41ec9e2 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Fri, 27 Mar 2026 11:07:54 +0100
Subject: [PATCH 2/2] ref(layout): use Layout.Page on issue alert details

Wrap the issue alert rule details page with Layout.Page, consistent
with the other alert pages updated in the prior commit.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../rules/issue/details/ruleDetails.tsx       | 250 +++++++++---------
 1 file changed, 126 insertions(+), 124 deletions(-)

diff --git a/static/app/views/alerts/rules/issue/details/ruleDetails.tsx b/static/app/views/alerts/rules/issue/details/ruleDetails.tsx
index a32f1eb4f7922a..2040b0d26c7628 100644
--- a/static/app/views/alerts/rules/issue/details/ruleDetails.tsx
+++ b/static/app/views/alerts/rules/issue/details/ruleDetails.tsx
@@ -383,139 +383,141 @@ export default function AlertRuleDetails() {
   const {period, start, end, utc} = getDataDatetime();
   const cursor = decodeScalar(location.query.cursor);
   return (
-    <PageFiltersContainer
-      skipInitializeUrlParams
-      skipLoadLastUsed
-      shouldForceProject
-      forceProject={project}
-    >
-      <SentryDocumentTitle
-        title={rule.name}
-        orgSlug={organization.slug}
-        projectSlug={projectSlug}
-      />
-
-      <Layout.Header>
-        <Layout.HeaderContent>
-          <Breadcrumbs
-            crumbs={[
-              {
-                label: t('Alerts'),
-                to: makeAlertsPathname({
-                  path: `/rules/`,
-                  organization,
-                }),
-              },
-              {
-                label: t('Issue Alert'),
-              },
-            ]}
-          />
-          <Layout.Title>
-            <IdBadge
-              project={project}
-              avatarSize={28}
-              hideName
-              avatarProps={{hasTooltip: true, tooltip: project.slug}}
+    <Layout.Page>
+      <PageFiltersContainer
+        skipInitializeUrlParams
+        skipLoadLastUsed
+        shouldForceProject
+        forceProject={project}
+      >
+        <SentryDocumentTitle
+          title={rule.name}
+          orgSlug={organization.slug}
+          projectSlug={projectSlug}
+        />
+
+        <Layout.Header>
+          <Layout.HeaderContent>
+            <Breadcrumbs
+              crumbs={[
+                {
+                  label: t('Alerts'),
+                  to: makeAlertsPathname({
+                    path: `/rules/`,
+                    organization,
+                  }),
+                },
+                {
+                  label: t('Issue Alert'),
+                },
+              ]}
             />
-            {rule.name}
-          </Layout.Title>
-        </Layout.HeaderContent>
-        <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', {
+            <Layout.Title>
+              <IdBadge
+                project={project}
+                avatarSize={28}
+                hideName
+                avatarProps={{hasTooltip: true, tooltip: project.slug}}
+              />
+              {rule.name}
+            </Layout.Title>
+          </Layout.HeaderContent>
+          <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,
-                  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>
-          <APIUsageWarningBanner errors={rule.errors} />
-          {renderIncompatibleAlert()}
-          {renderDisabledAlertBanner()}
-          {rule.snooze && (
-            <Alert.Container>
-              {rule.snoozeForEveryone ? (
-                <Alert variant="info">
-                  {tct(
-                    "[creator] muted this alert for everyone so you won't get these notifications in the future.",
-                    {
-                      creator: rule.snoozeCreatedBy,
-                    }
-                  )}
-                </Alert>
-              ) : (
-                <UserSnoozeDeprecationBanner projectId={project.id} />
-              )}
-            </Alert.Container>
-          )}
-          <StyledTimeRangeSelector
-            relative={period ?? ''}
-            start={start ?? null}
-            end={end ?? null}
-            utc={utc ?? null}
-            onChange={handleUpdateDatetime}
-          />
-          <ErrorBoundary>
-            <IssueAlertDetailsChart
+                })}
+                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>
+            <APIUsageWarningBanner errors={rule.errors} />
+            {renderIncompatibleAlert()}
+            {renderDisabledAlertBanner()}
+            {rule.snooze && (
+              <Alert.Container>
+                {rule.snoozeForEveryone ? (
+                  <Alert variant="info">
+                    {tct(
+                      "[creator] muted this alert for everyone so you won't get these notifications in the future.",
+                      {
+                        creator: rule.snoozeCreatedBy,
+                      }
+                    )}
+                  </Alert>
+                ) : (
+                  <UserSnoozeDeprecationBanner projectId={project.id} />
+                )}
+              </Alert.Container>
+            )}
+            <StyledTimeRangeSelector
+              relative={period ?? ''}
+              start={start ?? null}
+              end={end ?? null}
+              utc={utc ?? null}
+              onChange={handleUpdateDatetime}
+            />
+            <ErrorBoundary>
+              <IssueAlertDetailsChart
+                project={project}
+                rule={rule}
+                period={period ?? ''}
+                start={start ?? null}
+                end={end ?? null}
+                utc={utc ?? null}
+              />
+            </ErrorBoundary>
+            <AlertRuleIssuesList
               project={project}
               rule={rule}
               period={period ?? ''}
               start={start ?? null}
               end={end ?? null}
               utc={utc ?? null}
+              cursor={cursor}
             />
-          </ErrorBoundary>
-          <AlertRuleIssuesList
-            project={project}
-            rule={rule}
-            period={period ?? ''}
-            start={start ?? null}
-            end={end ?? null}
-            utc={utc ?? null}
-            cursor={cursor}
-          />
-        </Layout.Main>
-        <Layout.Side>
-          <Sidebar rule={rule} projectSlug={project.slug} teams={project.teams} />
-        </Layout.Side>
-      </Layout.Body>
-    </PageFiltersContainer>
+          </Layout.Main>
+          <Layout.Side>
+            <Sidebar rule={rule} projectSlug={project.slug} teams={project.teams} />
+          </Layout.Side>
+        </Layout.Body>
+      </PageFiltersContainer>
+    </Layout.Page>
   );
 }