ref(onboarding): Extract project-details form into a reusable hook and core (#117209)

## TLDR

Splits the SCM onboarding project-details step into a reusable
`useScmProjectDetails` hook plus a presentational
`ScmProjectDetailsCore`, so the SCM-first project-creation flow can
reuse it and place its own Create button. No behavior change; the
existing spec passes unchanged.

## Details

- `useScmProjectDetails` owns the form state, the create-project +
repo-link flow, the reuse ("nothing changed") short-circuit, and the
field/create analytics, routed by an `analyticsFlow` prop. It also
supports a no-access member path (`allowMemberWithoutTeam`), off by
default.
- `ScmProjectDetailsCore` is the presentational name / team /
alert-frequency form. It fires the `step_viewed` analytics when shown
and hides the team selector for no-access members. Keeping the submit
handler in the hook (rather than a render-prop) means each host renders
its own Create button wherever it wants, decoupled from where the fields
render.
- `ScmProjectDetails` (onboarding) is now a thin wrapper: the step
header plus the fixed footer with the Back and Create buttons.

This is the VDY-76 equivalent of the `ScmPlatformFeaturesCore`
extraction (#116624).

## Stack

- **PR 1 (this):** Extract project-details form into a hook and core
- [PR 2](#117325): Keep
getting-started rendered while back nav deletes
- [PR 3](#117333): Drive the
project-details form from host state
- [PR 4](#117213): Wire into
single-view project creation
- [PR 5](#117341): Commit the
auto-detected platform to the host
- [PR 6](#117342): Explain the
disabled Create CTA in the SCM wizard

Refs VDY-76

Author: jaydgoss

static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx

@@ -0,0 +1,60 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import * as analytics from 'sentry/utils/analytics';
+import {DEFAULT_ISSUE_ALERT_OPTIONS_VALUES} from 'sentry/views/projectInstall/issueAlertOptions';
+
+import {ScmProjectDetailsCore} from './scmProjectDetailsCore';
+
+type CoreProps = React.ComponentProps<typeof ScmProjectDetailsCore>;
+
+function renderCore(overrides: Partial<CoreProps> = {}) {
+  const props: CoreProps = {
+    analyticsFlow: 'project-creation',
+    projectName: 'my-project',
+    onProjectNameChange: jest.fn(),
+    onProjectNameBlur: jest.fn(),
+    teamSlug: 'my-team',
+    onTeamChange: jest.fn(),
+    alertRuleConfig: DEFAULT_ISSUE_ALERT_OPTIONS_VALUES,
+    onAlertChange: jest.fn(),
+    isOrgMemberWithNoAccess: false,
+    ...overrides,
+  };
+
+  render(<ScmProjectDetailsCore {...props} />, {organization: OrganizationFixture()});
+  return props;
+}
+
+describe('ScmProjectDetailsCore', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders the project name, team, and alert-frequency fields', () => {
+    renderCore();
+
+    expect(screen.getByText('Give your project a name')).toBeInTheDocument();
+    expect(screen.getByText('Assign a team')).toBeInTheDocument();
+    expect(screen.getByText('Alert frequency')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('project-name')).toHaveValue('my-project');
+  });
+
+  it('fires step_viewed analytics for the given flow on mount', () => {
+    const trackAnalyticsSpy = jest.spyOn(analytics, 'trackAnalytics');
+    renderCore({analyticsFlow: 'project-creation'});
+
+    expect(trackAnalyticsSpy).toHaveBeenCalledWith(
+      'project_creation.scm_project_details_step_viewed',
+      expect.anything()
+    );
+  });
+
+  it('hides the team selector for a no-access member', () => {
+    renderCore({isOrgMemberWithNoAccess: true});
+
+    expect(screen.getByText('Give your project a name')).toBeInTheDocument();
+    expect(screen.queryByText('Assign a team')).not.toBeInTheDocument();
+  });
+});

static/app/views/onboarding/components/scmProjectDetailsCore.tsx

@@ -0,0 +1,128 @@
+import {useEffect} from 'react';
+
+import {Input} from '@sentry/scraps/input';
+import {Container, Flex, Stack} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {TeamSelector} from 'sentry/components/teamSelector';
+import {IconGroup, IconProject, IconSiren} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import type {Team} from 'sentry/types/organization';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import {useOrganization} from 'sentry/utils/useOrganization';
+import type {AlertRuleOptions} from 'sentry/views/projectInstall/issueAlertOptions';
+
+import {ScmAlertFrequency} from './scmAlertFrequency';
+import type {ScmAnalyticsFlow} from './scmAnalyticsFlow';
+
+const STEP_VIEWED_EVENT = {
+  onboarding: 'onboarding.scm_project_details_step_viewed',
+  'project-creation': 'project_creation.scm_project_details_step_viewed',
+} as const;
+
+interface ScmProjectDetailsCoreProps {
+  alertRuleConfig: AlertRuleOptions;
+  analyticsFlow: ScmAnalyticsFlow;
+  /** Hides the team selector for a no-access member (see useScmProjectDetails). */
+  isOrgMemberWithNoAccess: boolean;
+  onAlertChange: <K extends keyof AlertRuleOptions>(
+    key: K,
+    value: AlertRuleOptions[K]
+  ) => void;
+  onProjectNameBlur: () => void;
+  onProjectNameChange: (value: string) => void;
+  onTeamChange: (option: {value: string}) => void;
+  projectName: string;
+  teamSlug: string;
+  /** Max width of the field column. Hosts pass their own step/section width. */
+  contentMaxWidth?: string;
+}
+
+/**
+ * Presentational project name / team / alert-frequency form shared by the SCM
+ * onboarding project-details step and the SCM-first project-creation surface.
+ * Form state, the create flow, and field analytics live in `useScmProjectDetails`;
+ * the host wires that hook to this component and renders its own Create button.
+ * This component owns only the rendering and the `step_viewed` analytics, which
+ * fires when the step becomes visible.
+ */
+export function ScmProjectDetailsCore({
+  alertRuleConfig,
+  analyticsFlow,
+  isOrgMemberWithNoAccess,
+  onAlertChange,
+  onProjectNameBlur,
+  onProjectNameChange,
+  onTeamChange,
+  projectName,
+  teamSlug,
+  contentMaxWidth,
+}: ScmProjectDetailsCoreProps) {
+  const organization = useOrganization();
+
+  useEffect(() => {
+    trackAnalytics(STEP_VIEWED_EVENT[analyticsFlow], {organization});
+  }, [organization, analyticsFlow]);
+
+  return (
+    <Stack gap="3xl" width="100%" maxWidth={contentMaxWidth}>
+      <Stack gap="md">
+        <Flex gap="md" align="center" justify="center">
+          <IconProject size="md" variant="secondary" />
+          <Container>
+            <Text bold size="lg" density="comfortable">
+              {t('Give your project a name')}
+            </Text>
+          </Container>
+        </Flex>
+        <Input
+          type="text"
+          placeholder={t('project-name')}
+          value={projectName}
+          onChange={e => onProjectNameChange(e.target.value)}
+          onBlur={onProjectNameBlur}
+        />
+      </Stack>
+
+      {!isOrgMemberWithNoAccess && (
+        <Stack gap="md">
+          <Flex gap="md" align="center" justify="center">
+            <IconGroup size="md" />
+            <Container>
+              <Text bold size="lg" density="comfortable">
+                {t('Assign a team')}
+              </Text>
+            </Container>
+          </Flex>
+          <TeamSelector
+            allowCreate
+            name="team"
+            aria-label={t('Select a Team')}
+            clearable={false}
+            placeholder={t('Select a Team')}
+            teamFilter={(tm: Team) => tm.access.includes('team:admin')}
+            value={teamSlug}
+            onChange={onTeamChange}
+          />
+        </Stack>
+      )}
+
+      <Stack gap="md">
+        <Flex gap="md" align="center" justify="center">
+          <IconSiren size="md" />
+          <Container>
+            <Text bold size="lg" density="comfortable">
+              {t('Alert frequency')}
+            </Text>
+          </Container>
+        </Flex>
+        <Container>
+          <Text variant="muted" size="lg" density="comfortable" align="center">
+            {t('Get notified when things go wrong')}
+          </Text>
+        </Container>
+        <ScmAlertFrequency {...alertRuleConfig} onFieldChange={onAlertChange} />
+      </Stack>
+    </Stack>
+  );
+}