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