feat(project-creation): Make alert frequency collapsible via ScmCollapsibleSection

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();
+  });
 });

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>
   );
 }