diff --git a/knip.config.ts b/knip.config.ts
index 4f7f9fe864b73f..4beec37cc224d2 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -27,8 +27,6 @@ const productionEntryPoints = [
'static/app/views/seerExplorer/contexts/**/*.{js,ts,tsx}',
// TODO: Remove when wired into the connect repository modal
'static/app/components/connectRepository/**/*.{ts,tsx}',
- // TODO: Remove when consumed in production (#117849 wires it into alert frequency)
- 'static/app/views/onboarding/components/scmCollapsibleSection.tsx',
];
const testingEntryPoints = [
diff --git a/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx b/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx
index c019f28b942852..5a023322429c9a 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 75c874ab5a7111..d2b93b55875e35 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 = (
+
+
+ {t('Get notified when things go wrong')}
+
+
+
+ );
+
return (
@@ -116,22 +131,27 @@ export function ScmProjectDetailsCore({
)}
-
-
-
-
- {t('Alert frequency')}
-
-
-
-
- {t('Get notified when things go wrong')}
-
-
+ {collapsible ? (
+
+ {alertFrequencyBody}
+
+ ) : (
+
+
+
+
+ {t('Alert frequency')}
+
+
+
+
+ {t('Get notified when things go wrong')}
+
+
+
+
-
-
-
+ )}
);
}