fix(onboarding): Preserve user-entered project slug during platform selection

Author: sentry[bot]

static/app/views/projectInstall/createProject.spec.tsx

@@ -191,6 +191,54 @@ describe('CreateProject', () => {
     expect(screen.getByPlaceholderText('project-slug')).toHaveValue('another');
   });
 
+  it('should not overwrite a user-entered project name when the name happens to match the current platform key', async () => {
+    // Regression test: previously, the check `projectName !== platform.key` would incorrectly
+    // treat the name as auto-generated if it matched the current platform slug, causing a
+    // platform switch to overwrite a name the user explicitly typed.
+    const {organization} = initializeOrg({
+      organization: {
+        access: ['project:read'],
+        features: ['team-roles'],
+        allowMemberProjectCreation: true,
+      },
+    });
+
+    render(<CreateProject />, {organization});
+
+    // User explicitly types a name that happens to match a platform id
+    await userEvent.type(screen.getByPlaceholderText('project-slug'), 'apple-ios');
+
+    // User then selects a different platform
+    await userEvent.click(screen.getByTestId('platform-ruby-rails'));
+
+    // The name they typed should be preserved, not replaced with 'ruby-rails'
+    expect(screen.getByPlaceholderText('project-slug')).toHaveValue('apple-ios');
+  });
+
+  it('should allow platform to fill the project name again after the user clears it', async () => {
+    const {organization} = initializeOrg({
+      organization: {
+        access: ['project:read'],
+        features: ['team-roles'],
+        allowMemberProjectCreation: true,
+      },
+    });
+
+    render(<CreateProject />, {organization});
+
+    // User types a name
+    await userEvent.type(screen.getByPlaceholderText('project-slug'), 'my-project');
+    expect(screen.getByPlaceholderText('project-slug')).toHaveValue('my-project');
+
+    // User clears the field (signals they want the platform to drive the name again)
+    await userEvent.clear(screen.getByPlaceholderText('project-slug'));
+    expect(screen.getByPlaceholderText('project-slug')).toHaveValue('');
+
+    // Now selecting a platform should fill the name
+    await userEvent.click(screen.getByTestId('platform-apple-ios'));
+    expect(screen.getByPlaceholderText('project-slug')).toHaveValue('apple-ios');
+  });
+
   it('should display success message on proj creation', async () => {
     const {organization} = initializeOrg({
       organization: {

static/app/views/projectInstall/createProject.tsx

@@ -192,6 +192,7 @@ export function CreateProject() {
 
   const [formData, setFormData] = useState<FormData>(initialData);
   const pickerKeyRef = useRef<'create-project' | 'auto-fill'>('create-project');
+  const hasUserModifiedProjectName = useRef(false);
 
   const canCreateTeam = organization.access.includes('project:admin');
   const isOrgMemberWithNoAccess = accessTeams.length === 0 && !canCreateTeam;
@@ -442,13 +443,11 @@ export function CreateProject() {
         key: value.id,
       });
 
-      const userModifiedName =
-        !!formData.projectName && formData.projectName !== formData.platform?.key;
-      const newName = userModifiedName ? formData.projectName : value.id;
+      const newName = hasUserModifiedProjectName.current ? formData.projectName : value.id;
 
       updateFormData('projectName', newName);
     },
-    [updateFormData, formData.projectName, formData.platform?.key, organization]
+    [updateFormData, formData.projectName, organization]
   );
 
   const platform = formData.platform?.key;
@@ -520,7 +519,13 @@ export function CreateProject() {
                   placeholder={t('project-slug')}
                   autoComplete="off"
                   value={formData.projectName}
-                  onChange={e => updateFormData('projectName', slugify(e.target.value))}
+                  onChange={e => {
+                    const slugified = slugify(e.target.value);
+                    // Track whether the user has intentionally set a custom name.
+                    // Reset if they clear the field so platform selection can fill it in again.
+                    hasUserModifiedProjectName.current = slugified !== '';
+                    updateFormData('projectName', slugified);
+                  }}
                 />
               </ProjectNameInputWrap>
             </div>