diff --git a/static/app/views/onboarding/components/scmFeatureInfoCards.tsx b/static/app/views/onboarding/components/scmFeatureInfoCards.tsx
index 46ff65a0c0e8e4..91e1663d6e43a1 100644
--- a/static/app/views/onboarding/components/scmFeatureInfoCards.tsx
+++ b/static/app/views/onboarding/components/scmFeatureInfoCards.tsx
@@ -1,6 +1,6 @@
import {Tag} from '@sentry/scraps/badge';
import {Container, Flex, Grid, Stack} from '@sentry/scraps/layout';
-import {Heading, Text} from '@sentry/scraps/text';
+import {Text} from '@sentry/scraps/text';
import {Tooltip} from '@sentry/scraps/tooltip';
import type {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
@@ -36,7 +36,7 @@ export function ScmFeatureInfoCards({
{platformName ? (
-
+
{tct('Available with [platformName]', {
platformName: (
@@ -44,9 +44,9 @@ export function ScmFeatureInfoCards({
),
})}
-
+
) : null}
-
+
{t('In the next step, run our setup wizard to choose what to instrument')}
diff --git a/static/app/views/onboarding/components/scmFeatureSelectionCards.tsx b/static/app/views/onboarding/components/scmFeatureSelectionCards.tsx
index 2fa0797c974eac..c0a161dcf07403 100644
--- a/static/app/views/onboarding/components/scmFeatureSelectionCards.tsx
+++ b/static/app/views/onboarding/components/scmFeatureSelectionCards.tsx
@@ -1,5 +1,5 @@
import {Flex, Stack} from '@sentry/scraps/layout';
-import {Heading, Text} from '@sentry/scraps/text';
+import {Text} from '@sentry/scraps/text';
import type {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
import type {DisabledProducts} from 'sentry/components/onboarding/productSelection';
@@ -30,9 +30,9 @@ export function ScmFeatureSelectionCards({
return (
-
+
{t('What do you want to instrument?')}
-
+
{availableFeatures.length > 1 ? (
{t('Choose one or more')}
diff --git a/static/app/views/onboarding/components/scmIntegrationConnect.tsx b/static/app/views/onboarding/components/scmIntegrationConnect.tsx
index f17a21623b0bd4..802f50f60dd0cf 100644
--- a/static/app/views/onboarding/components/scmIntegrationConnect.tsx
+++ b/static/app/views/onboarding/components/scmIntegrationConnect.tsx
@@ -197,7 +197,7 @@ export function ScmIntegrationConnect({
onChange={handleIntegrationSelect}
/>
) : (
-
+
{t(
'Connected to %s / %s',
effectiveIntegration.provider.name,
diff --git a/static/app/views/onboarding/components/scmPlatformFeaturesCore.tsx b/static/app/views/onboarding/components/scmPlatformFeaturesCore.tsx
index 8ae8d913076acd..a81201ac6319e3 100644
--- a/static/app/views/onboarding/components/scmPlatformFeaturesCore.tsx
+++ b/static/app/views/onboarding/components/scmPlatformFeaturesCore.tsx
@@ -16,7 +16,7 @@ import {
platformProductAvailability,
} from 'sentry/components/onboarding/productSelection';
import {PLATFORM_PRODUCT_INFO} from 'sentry/data/platformProductInfo.generated';
-import {IconBroadcast, IconBusiness, IconGeneric} from 'sentry/icons';
+import {IconBroadcast, IconBusiness} from 'sentry/icons';
import {t, tct} from 'sentry/locale';
import type {Repository} from 'sentry/types/integrations';
import type {OnboardingSelectedSDK} from 'sentry/types/onboarding';
@@ -440,8 +440,8 @@ export function ScmPlatformFeaturesCore({
>
-
-
+
+
{t('Auto-detected from your repository')}
@@ -491,8 +491,7 @@ export function ScmPlatformFeaturesCore({
>
-
-
+
{t('Select a platform')}
diff --git a/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx b/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx
index 535a38c6ce7fbb..c019f28b942852 100644
--- a/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx
+++ b/static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx
@@ -35,8 +35,8 @@ describe('ScmProjectDetailsCore', () => {
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('Project name')).toBeInTheDocument();
+ expect(screen.getByText('Team')).toBeInTheDocument();
expect(screen.getByText('Alert frequency')).toBeInTheDocument();
expect(screen.getByPlaceholderText('project-name')).toHaveValue('my-project');
});
@@ -54,7 +54,7 @@ describe('ScmProjectDetailsCore', () => {
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();
+ expect(screen.getByText('Project name')).toBeInTheDocument();
+ expect(screen.queryByText('Team')).not.toBeInTheDocument();
});
});
diff --git a/static/app/views/onboarding/components/scmProjectDetailsCore.tsx b/static/app/views/onboarding/components/scmProjectDetailsCore.tsx
index 99e6b2a293dddb..75c874ab5a7111 100644
--- a/static/app/views/onboarding/components/scmProjectDetailsCore.tsx
+++ b/static/app/views/onboarding/components/scmProjectDetailsCore.tsx
@@ -1,11 +1,10 @@
import {useEffect} from 'react';
import {Input} from '@sentry/scraps/input';
-import {Container, Flex, Stack} from '@sentry/scraps/layout';
+import {Container, Grid, 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';
@@ -66,61 +65,71 @@ export function ScmProjectDetailsCore({
return (
-
-
-
-
-
- {t('Give your project a name')}
-
-
-
- onProjectNameChange(e.target.value)}
- onBlur={onProjectNameBlur}
- />
-
-
- {!isOrgMemberWithNoAccess && (
+
-
-
+
-
- {t('Assign a team')}
+
+ {t('Project name')}
-
- tm.access.includes('team:admin')}
- value={teamSlug}
- onChange={onTeamChange}
+
+
+ {t('Slug used in URLs and SDK config')}
+
+
+
+ onProjectNameChange(e.target.value)}
+ onBlur={onProjectNameBlur}
/>
- )}
+
+ {!isOrgMemberWithNoAccess && (
+
+
+
+
+ {t('Team')}
+
+
+
+
+ {t('Set who owns alerts for this project')}
+
+
+
+ tm.access.includes('team:admin')}
+ value={teamSlug}
+ onChange={onTeamChange}
+ />
+
+ )}
+
-
-
+
-
+
{t('Alert frequency')}
-
-
-
- {t('Get notified when things go wrong')}
-
-
+
+
+ {t('Get notified when things go wrong')}
+
+
+
+
diff --git a/static/app/views/onboarding/scmPlatformFeatures.spec.tsx b/static/app/views/onboarding/scmPlatformFeatures.spec.tsx
index ed3278915b73c4..235b42764a4224 100644
--- a/static/app/views/onboarding/scmPlatformFeatures.spec.tsx
+++ b/static/app/views/onboarding/scmPlatformFeatures.spec.tsx
@@ -138,9 +138,7 @@ describe('ScmPlatformFeatures', () => {
const props = defaultProps({selectedRepository: mockRepository});
render(, {organization});
- expect(
- await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'})
- ).toBeInTheDocument();
+ expect(await screen.findByText(/^Available with/)).toBeInTheDocument();
expect(props.onPlatformChange).toHaveBeenCalledWith(
expect.objectContaining({key: 'javascript-nextjs'})
);
@@ -158,9 +156,7 @@ describe('ScmPlatformFeatures', () => {
{organization}
);
- expect(
- await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'})
- ).toBeInTheDocument();
+ expect(await screen.findByText(/^Available with/)).toBeInTheDocument();
expect(screen.getByText('Error monitoring')).toBeInTheDocument();
expect(screen.getByText('Tracing')).toBeInTheDocument();
expect(screen.getByText('Session replay')).toBeInTheDocument();
@@ -187,9 +183,7 @@ describe('ScmPlatformFeatures', () => {
await screen.findByText('What do you want to instrument?')
).toBeInTheDocument();
expect(screen.getByRole('checkbox', {name: /Tracing/})).toBeInTheDocument();
- expect(
- screen.queryByRole('heading', {level: 3, name: /^Available with /})
- ).not.toBeInTheDocument();
+ expect(screen.queryByText(/^Available with/)).not.toBeInTheDocument();
});
it('skips the feature-cards block for platforms in neither map', async () => {
@@ -217,9 +211,7 @@ describe('ScmPlatformFeatures', () => {
await screen.findByRole('button', {name: 'Continue'});
- expect(
- screen.queryByRole('heading', {level: 3, name: /^Available with /})
- ).not.toBeInTheDocument();
+ expect(screen.queryByText(/^Available with/)).not.toBeInTheDocument();
expect(
screen.queryByText('What do you want to instrument?')
).not.toBeInTheDocument();
@@ -513,7 +505,7 @@ describe('ScmPlatformFeatures', () => {
{organization}
);
- await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'});
+ await screen.findByText(/^Available with/);
const detectedCalls = trackAnalyticsSpy.mock.calls.filter(
([event, params]) =>
@@ -549,7 +541,7 @@ describe('ScmPlatformFeatures', () => {
);
// First repo auto-detects Next.js and fires the detected event once.
- await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'});
+ await screen.findByText(/^Available with/);
expect(
trackAnalyticsSpy.mock.calls.filter(
([event, params]) =>
diff --git a/static/app/views/onboarding/scmProjectDetails.spec.tsx b/static/app/views/onboarding/scmProjectDetails.spec.tsx
index 15cd8ef87dc0f3..8a9ab886e2c94d 100644
--- a/static/app/views/onboarding/scmProjectDetails.spec.tsx
+++ b/static/app/views/onboarding/scmProjectDetails.spec.tsx
@@ -89,13 +89,13 @@ describe('ScmProjectDetails', () => {
expect(await screen.findByText('Project details')).toBeInTheDocument();
});
- it('renders section headers with icons', async () => {
+ it('renders section headers', async () => {
render(, {
organization,
});
- expect(await screen.findByText('Give your project a name')).toBeInTheDocument();
- expect(screen.getByText('Assign a team')).toBeInTheDocument();
+ expect(await screen.findByText('Project name')).toBeInTheDocument();
+ expect(screen.getByText('Team')).toBeInTheDocument();
expect(screen.getByText('Alert frequency')).toBeInTheDocument();
expect(screen.getByText('Get notified when things go wrong')).toBeInTheDocument();
});
diff --git a/static/app/views/projectInstall/scmCreateProject.tsx b/static/app/views/projectInstall/scmCreateProject.tsx
index 833a43f4ab526d..4eb3e5f40ea227 100644
--- a/static/app/views/projectInstall/scmCreateProject.tsx
+++ b/static/app/views/projectInstall/scmCreateProject.tsx
@@ -2,8 +2,7 @@ import {useCallback, useState} from 'react';
import {LayoutGroup, motion} from 'framer-motion';
import {Button} from '@sentry/scraps/button';
-import {Container, Flex, Stack} from '@sentry/scraps/layout';
-import {ExternalLink} from '@sentry/scraps/link';
+import {Flex, Stack} from '@sentry/scraps/layout';
import {Heading, Text} from '@sentry/scraps/text';
import {Tooltip} from '@sentry/scraps/tooltip';
@@ -14,7 +13,7 @@ import type {ProjectDetailsFormState} from 'sentry/components/onboarding/onboard
import {ProjectCreationErrorAlert} from 'sentry/components/onboarding/projectCreationErrorAlert';
import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
import {IconProject} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
import type {Integration, Repository} from 'sentry/types/integrations';
import type {OnboardingSelectedSDK} from 'sentry/types/onboarding';
import {decodeScalar} from 'sentry/utils/queryString';
@@ -249,34 +248,25 @@ function ScmCreateProjectWizard({initialState}: {initialState: WizardState}) {
padding="2xl"
alignSelf="center"
maxWidth={CREATE_PROJECT_MAX_WIDTH}
+ width="100%"
>
{t('Create a new project')}
-
-
- {tct(
- 'Set up a separate project for each part of your application (for example, your API server and frontend client), to quickly pinpoint which part of your application errors are coming from. [link: Read the docs].',
- {
- link: (
-
- ),
- }
- )}
+
+ {t('Create a new project')}
+
+ {t('Pick a platform, name your project, and choose what to monitor.')}
-
+
-
-
- {t('Connect your Git repository')}
-
-
+ {t('Connect your Git repository')}
-
-
- {t('Platform & features')}
-
-
- {t('Choose a platform and configure what to monitor.')}
-
-
+ {t('Platform & features')}
-
-
- {t('Project details')}
-
-
- {t('Name your project, assign a team, and set up issue alerts.')}
-
-
+ {t('Project details')}