From 370a8cbe6885c77425c978583033643fcaf50d69 Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Tue, 16 Jun 2026 15:36:07 -0500
Subject: [PATCH] feat(project-creation): Make alert frequency collapsible via
 ScmCollapsibleSection

Apply ScmCollapsibleSection to the alert-frequency section in
ScmProjectDetailsCore so it folds away in the project-creation flow
(`collapsible = analyticsFlow === 'project-creation'`). Onboarding keeps the
section always expanded.

When collapsible, the chevron and title sit in the toggle and the "Get
notified when things go wrong" subtitle moves into the collapsible body so it
hides when collapsed. Onboarding renders the same header (bold label +
subtitle) with the alert control always visible.
---
 .../components/scmProjectDetailsCore.spec.tsx | 24 ++++++++-
 .../components/scmProjectDetailsCore.tsx      | 50 +++++++++++++------
 2 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx b/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx
index c019f28b9428..5a023322429c 100644
--- a/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx
+++ b/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx
@@ -1,6 +1,6 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import * as analytics from 'sentry/utils/analytics';
 import {DEFAULT_ISSUE_ALERT_OPTIONS_VALUES} from 'sentry/views/projectInstall/issueAlertOptions';
@@ -57,4 +57,26 @@ describe('ScmProjectDetailsCore', () => {
     expect(screen.getByText('Project name')).toBeInTheDocument();
     expect(screen.queryByText('Team')).not.toBeInTheDocument();
   });
+
+  it('makes the alert-frequency section a collapsible toggle in project creation', async () => {
+    renderCore({analyticsFlow: 'project-creation'});
+
+    const toggle = screen.getByRole('button', {name: 'Alert frequency'});
+    expect(screen.getByText('Get notified when things go wrong')).toBeInTheDocument();
+
+    await userEvent.click(toggle);
+    expect(
+      screen.queryByText('Get notified when things go wrong')
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps the alert-frequency section always expanded in onboarding', () => {
+    renderCore({analyticsFlow: 'onboarding'});
+
+    expect(
+      screen.queryByRole('button', {name: 'Alert frequency'})
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Alert frequency')).toBeInTheDocument();
+    expect(screen.getByText('Get notified when things go wrong')).toBeInTheDocument();
+  });
 });
diff --git a/static/app/views/onboarding/components/scmProjectDetailsCore.tsx b/static/app/views/onboarding/components/scmProjectDetailsCore.tsx
index 75c874ab5a71..d2b93b55875e 100644
--- a/static/app/views/onboarding/components/scmProjectDetailsCore.tsx
+++ b/static/app/views/onboarding/components/scmProjectDetailsCore.tsx
@@ -13,6 +13,7 @@ import type {AlertRuleOptions} from 'sentry/views/projectInstall/issueAlertOptio
 
 import {ScmAlertFrequency} from './scmAlertFrequency';
 import type {ScmAnalyticsFlow} from './scmAnalyticsFlow';
+import {ScmCollapsibleSection} from './scmCollapsibleSection';
 
 const STEP_VIEWED_EVENT = {
   onboarding: 'onboarding.scm_project_details_step_viewed',
@@ -59,10 +60,24 @@ export function ScmProjectDetailsCore({
 }: ScmProjectDetailsCoreProps) {
   const organization = useOrganization();
 
+  // Match the feature-selection section: the alert-frequency section folds away
+  // in project creation (one of several stacked config cards) but stays always
+  // expanded in onboarding.
+  const collapsible = analyticsFlow === 'project-creation';
+
   useEffect(() => {
     trackAnalytics(STEP_VIEWED_EVENT[analyticsFlow], {organization});
   }, [organization, analyticsFlow]);
 
+  const alertFrequencyBody = (
+    <Stack gap="md" width="100%">
+      <Text variant="muted" density="comfortable">
+        {t('Get notified when things go wrong')}
+      </Text>
+      <ScmAlertFrequency {...alertRuleConfig} onFieldChange={onAlertChange} />
+    </Stack>
+  );
+
   return (
     <Stack gap="3xl" width="100%" maxWidth={contentMaxWidth}>
       <Grid width="100%" columns={{sm: '1fr', md: '1fr 1fr'}} gap="2xl">
@@ -116,22 +131,27 @@ export function ScmProjectDetailsCore({
         )}
       </Grid>
 
-      <Stack gap="md">
-        <Stack gap="xs">
-          <Container>
-            <Text bold size="md" density="comfortable">
-              {t('Alert frequency')}
-            </Text>
-          </Container>
-          <Container>
-            <Text variant="muted" density="comfortable">
-              {t('Get notified when things go wrong')}
-            </Text>
-          </Container>
+      {collapsible ? (
+        <ScmCollapsibleSection title={t('Alert frequency')}>
+          {alertFrequencyBody}
+        </ScmCollapsibleSection>
+      ) : (
+        <Stack gap="md">
+          <Stack gap="xs">
+            <Container>
+              <Text bold size="md" density="comfortable">
+                {t('Alert frequency')}
+              </Text>
+            </Container>
+            <Container>
+              <Text variant="muted" density="comfortable">
+                {t('Get notified when things go wrong')}
+              </Text>
+            </Container>
+          </Stack>
+          <ScmAlertFrequency {...alertRuleConfig} onFieldChange={onAlertChange} />
         </Stack>
-
-        <ScmAlertFrequency {...alertRuleConfig} onFieldChange={onAlertChange} />
-      </Stack>
+      )}
     </Stack>
   );
 }