fix(onboarding): Handle existing projects and loading races in SCM flow

When the user navigates back from setup-docs after the project has
already received events, the project is not deleted. Handle this by
detecting the existing project via createdProjectSlug and persisted
form state:

- Platform changed: abandon old project, create new (matching legacy)
- No changes: reuse existing project as-is
- Name/team changed: update existing project in place via PUT

Also guard the Create button against teams and projects still loading
so the existence check cannot be bypassed by a race.

Author: jaydgoss

static/app/views/onboarding/scmProjectDetails.spec.tsx

@@ -9,6 +9,7 @@ import {
   OnboardingContextProvider,
   type OnboardingSessionState,
 } from 'sentry/components/onboarding/onboardingContext';
+import {ProjectsStore} from 'sentry/stores/projectsStore';
 import {TeamStore} from 'sentry/stores/teamStore';
 import type {OnboardingSelectedSDK} from 'sentry/types/onboarding';
 import * as analytics from 'sentry/utils/analytics';
@@ -44,6 +45,7 @@ describe('ScmProjectDetails', () => {
   beforeEach(() => {
     sessionStorageWrapper.clear();
     TeamStore.loadInitialData([teamWithAccess]);
+    ProjectsStore.loadInitialData([]);
 
     // useCreateNotificationAction queries messaging integrations on mount
     MockApiClient.addMockResponse({

static/app/views/onboarding/scmProjectDetails.tsx

@@ -7,15 +7,28 @@ import {Container, Flex, Stack} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
+import {update} from 'sentry/actionCreators/projects';
 import {useOnboardingContext} from 'sentry/components/onboarding/onboardingContext';
 import {useCreateProjectAndRules} from 'sentry/components/onboarding/useCreateProjectAndRules';
+import {useCreateProjectRules} from 'sentry/components/onboarding/useCreateProjectRules';
 import {TeamSelector} from 'sentry/components/teamSelector';
 import {IconGroup, IconProject, IconSiren} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import type {IssueAlertRule} from 'sentry/types/alerts';
+import type {OnboardingSelectedSDK} from 'sentry/types/onboarding';
 import type {Team} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {
+  type ApiQueryKey,
+  fetchDataQuery,
+  fetchMutation,
+  useQueryClient,
+} from 'sentry/utils/queryClient';
 import {slugify} from 'sentry/utils/slugify';
+import {useApi} from 'sentry/utils/useApi';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {useProjects} from 'sentry/utils/useProjects';
 import {useTeams} from 'sentry/utils/useTeams';
 import {
   DEFAULT_ISSUE_ALERT_OPTIONS_VALUES,
@@ -32,16 +45,21 @@ import type {StepProps} from './types';
 const PROJECT_DETAILS_WIDTH = '285px';
 
 export function ScmProjectDetails({onComplete}: StepProps) {
+  const api = useApi();
+  const queryClient = useQueryClient();
   const organization = useOrganization();
   const {
     selectedPlatform,
     selectedFeatures,
+    createdProjectSlug,
     setCreatedProjectSlug,
     projectDetailsForm,
     setProjectDetailsForm,
   } = useOnboardingContext();
-  const {teams} = useTeams();
+  const {teams, fetching: isLoadingTeams} = useTeams();
+  const {projects, initiallyLoaded: projectsLoaded} = useProjects();
   const createProjectAndRules = useCreateProjectAndRules();
+  const createProjectRules = useCreateProjectRules();
   useEffect(() => {
     trackAnalytics('onboarding.scm_project_details_step_viewed', {organization});
   }, [organization]);
@@ -58,6 +76,12 @@ export function ScmProjectDetails({onComplete}: StepProps) {
     projectDetailsForm?.teamSlug ?? null
   );
 
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Safety-net: verify the previously created project still exists in the store.
+  const projectExists =
+    !!createdProjectSlug && projects.some(p => p.slug === createdProjectSlug);
+
   const projectNameResolved = projectName ?? defaultName;
   const teamSlugResolved = teamSlug ?? firstAdminTeam?.slug ?? '';
 
@@ -104,34 +128,35 @@ export function ScmProjectDetails({onComplete}: StepProps) {
     projectNameResolved.length > 0 &&
     teamSlugResolved.length > 0 &&
     !!selectedPlatform &&
-    !createProjectAndRules.isPending;
+    !isSaving &&
+    !isLoadingTeams &&
+    projectsLoaded;
 
-  async function handleCreateProject() {
-    if (!selectedPlatform || !canSubmit) {
+  function persistFormState() {
+    if (!selectedPlatform) {
       return;
     }
+    setProjectDetailsForm({
+      projectName: projectNameResolved,
+      teamSlug: teamSlugResolved,
+      alertRuleConfig,
+      platform: selectedPlatform.key,
+    });
+  }
 
-    trackAnalytics('onboarding.scm_project_details_create_clicked', {organization});
-
+  async function createNewProject(platform: OnboardingSelectedSDK) {
+    setIsSaving(true);
     try {
       const {project} = await createProjectAndRules.mutateAsync({
         projectName: projectNameResolved,
-        platform: selectedPlatform,
+        platform,
         team: teamSlugResolved,
         alertRuleConfig: getRequestDataFragment(alertRuleConfig),
         createNotificationAction: () => undefined,
       });
 
-      // Store the project slug separately so onboarding.tsx can find
-      // the project via useRecentCreatedProject without corrupting
-      // selectedPlatform.key (which the platform features step needs).
       setCreatedProjectSlug(project.slug);
-      setProjectDetailsForm({
-        projectName: projectNameResolved,
-        teamSlug: teamSlugResolved,
-        alertRuleConfig,
-        platform: selectedPlatform.key,
-      });
+      persistFormState();
 
       trackAnalytics('onboarding.scm_project_details_create_succeeded', {
         organization,
@@ -143,6 +168,101 @@ export function ScmProjectDetails({onComplete}: StepProps) {
       trackAnalytics('onboarding.scm_project_details_create_failed', {organization});
       addErrorMessage(t('Failed to create project'));
       Sentry.captureException(error);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function updateExistingProject(slug: string) {
+    setIsSaving(true);
+    try {
+      const updated = await update(api, {
+        orgId: organization.slug,
+        projectId: slug,
+        data: {name: projectNameResolved},
+      });
+
+      // If the alert config changed, replace the existing rule.
+      // Onboarding only ever creates a single alert rule.
+      if (!alertConfigUnchanged) {
+        const rulesQueryKey: ApiQueryKey = [
+          getApiUrl('/projects/$organizationIdOrSlug/$projectIdOrSlug/rules/', {
+            path: {
+              organizationIdOrSlug: organization.slug,
+              projectIdOrSlug: updated.slug,
+            },
+          }),
+        ];
+        const [[existingRule]] = await queryClient.fetchQuery({
+          queryKey: rulesQueryKey,
+          queryFn: fetchDataQuery<IssueAlertRule[]>,
+          staleTime: 0,
+        });
+        if (existingRule) {
+          await fetchMutation({
+            method: 'DELETE',
+            url: `/projects/${organization.slug}/${updated.slug}/rules/${existingRule.id}/`,
+          });
+        }
+
+        const fragment = getRequestDataFragment(alertRuleConfig);
+        if (fragment.shouldCreateCustomRule) {
+          await createProjectRules.mutateAsync({
+            projectSlug: updated.slug,
+            name: updated.name,
+            conditions: fragment.conditions,
+            actions: fragment.actions,
+            actionMatch: fragment.actionMatch,
+            frequency: fragment.frequency,
+          });
+        }
+      }
+
+      setCreatedProjectSlug(updated.slug);
+      persistFormState();
+      onComplete(undefined, selectedFeatures ? {product: selectedFeatures} : undefined);
+    } catch (error) {
+      addErrorMessage(t('Failed to update project'));
+      Sentry.captureException(error);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  const savedAlert = projectDetailsForm?.alertRuleConfig;
+  const alertConfigUnchanged =
+    alertRuleConfig.alertSetting === savedAlert?.alertSetting &&
+    alertRuleConfig.interval === savedAlert?.interval &&
+    alertRuleConfig.metric === savedAlert?.metric &&
+    alertRuleConfig.threshold === savedAlert?.threshold;
+
+  function handleCreateProject() {
+    if (!selectedPlatform || !canSubmit) {
+      return;
+    }
+
+    trackAnalytics('onboarding.scm_project_details_create_clicked', {organization});
+
+    if (projectExists && createdProjectSlug) {
+      const platformChanged = projectDetailsForm?.platform !== selectedPlatform.key;
+
+      if (platformChanged) {
+        // Platform changed — abandon the old project and create a new one,
+        // matching legacy onboarding behavior.
+        createNewProject(selectedPlatform);
+      } else if (
+        projectNameResolved === projectDetailsForm?.projectName &&
+        teamSlugResolved === projectDetailsForm?.teamSlug &&
+        alertConfigUnchanged
+      ) {
+        // Nothing changed — reuse the existing project as-is.
+        onComplete(undefined, selectedFeatures ? {product: selectedFeatures} : undefined);
+      } else {
+        // Same platform but settings changed — update in place.
+        updateExistingProject(createdProjectSlug);
+      }
+    } else {
+      createNewProject(selectedPlatform);
     }
   }
 
@@ -218,7 +338,7 @@ export function ScmProjectDetails({onComplete}: StepProps) {
           priority="primary"
           onClick={handleCreateProject}
           disabled={!canSubmit}
-          busy={createProjectAndRules.isPending}
+          busy={isSaving}
           icon={<IconProject />}
         >
           {t('Create project')}