Skip to content

Commit 71bb575

Browse files
priscilawebdevpriscilawebdev
authored
feat: Introduce projects badge and title to set up title in empty onboardings (#94152)
closes https://linear.app/getsentry/issue/TET-619/show-tabs-for-each-selected-project-in-setup-instructions
1 parent 984ff71 commit 71bb575

File tree

4 files changed

+29
-23
lines changed

4 files changed

+29
-23
lines changed

‎static/app/components/updatedEmptyState.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ describe('UpdatedEmptyState', function () {
2727

2828
render(<UpdatedEmptyState project={ProjectFixture({platform: 'python-django'})} />);
2929
expect(await screen.findByText('Get Started with Sentry Issues')).toBeInTheDocument();
30-
expect(await screen.findByText('Set up the Sentry SDK')).toBeInTheDocument();
30+
expect(await screen.findByText(/Set up the Sentry SDK/)).toBeInTheDocument();
3131
expect(await screen.findByText('Preview a Sentry Issue')).toBeInTheDocument();
3232

3333
expect(

‎static/app/components/updatedEmptyState.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg';
55

66
import {ButtonBar} from 'sentry/components/core/button/buttonBar';
77
import {GuidedSteps} from 'sentry/components/guidedSteps/guidedSteps';
8+
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
89
import {AuthTokenGeneratorProvider} from 'sentry/components/onboarding/gettingStartedDoc/authTokenGenerator';
910
import {OnboardingCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
1011
import {TabbedCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/step';
1112
import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
1213
import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
1314
import {useLoadGettingStarted} from 'sentry/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted';
1415
import platforms from 'sentry/data/platforms';
15-
import {t} from 'sentry/locale';
16+
import {t, tct} from 'sentry/locale';
1617
import ConfigStore from 'sentry/stores/configStore';
1718
import {useLegacyStore} from 'sentry/stores/useLegacyStore';
1819
import {space} from 'sentry/styles/space';
@@ -25,6 +26,16 @@ import {useNavigate} from 'sentry/utils/useNavigate';
2526
import useOrganization from 'sentry/utils/useOrganization';
2627
import FirstEventIndicator from 'sentry/views/onboarding/components/firstEventIndicator';
2728

29+
export function SetupTitle({project}: {project: Project}) {
30+
return (
31+
<SetupTitleWrapper>
32+
{tct('Set up the Sentry SDK for\u00A0[projectBadge]', {
33+
projectBadge: <ProjectBadge project={project} avatarSize={16} />,
34+
})}
35+
</SetupTitleWrapper>
36+
);
37+
}
38+
2839
export default function UpdatedEmptyState({project}: {project?: Project}) {
2940
const api = useApi();
3041
const organization = useOrganization();
@@ -127,7 +138,7 @@ export default function UpdatedEmptyState({project}: {project?: Project}) {
127138
<Divider />
128139
<Body>
129140
<Setup>
130-
<BodyTitle>{t('Set up the Sentry SDK')}</BodyTitle>
141+
<SetupTitle project={project} />
131142
<GuidedSteps
132143
initialStep={decodeInteger(location.query.guidedStep)}
133144
onStepChange={step => {
@@ -371,12 +382,6 @@ const HeaderWrapper = styled('div')`
371382
padding: ${space(4)};
372383
`;
373384

374-
const BodyTitle = styled('div')`
375-
font-size: ${p => p.theme.fontSizeExtraLarge};
376-
font-weight: ${p => p.theme.fontWeightBold};
377-
margin-bottom: ${space(1)};
378-
`;
379-
380385
const Setup = styled('div')`
381386
padding: ${space(4)};
382387
@@ -390,6 +395,17 @@ const Setup = styled('div')`
390395
}
391396
`;
392397

398+
export const BodyTitle = styled('div')`
399+
font-size: ${p => p.theme.fontSizeExtraLarge};
400+
font-weight: ${p => p.theme.fontWeightBold};
401+
margin-bottom: ${space(1)};
402+
`;
403+
404+
const SetupTitleWrapper = styled(BodyTitle)`
405+
display: flex;
406+
align-items: center;
407+
`;
408+
393409
const Preview = styled('div')`
394410
padding: ${space(4)};
395411
`;

‎static/app/views/performance/onboarding.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import Panel from 'sentry/components/panels/panel';
4343
import PanelBody from 'sentry/components/panels/panelBody';
4444
import {filterProjects} from 'sentry/components/performanceOnboarding/utils';
4545
import {SidebarPanelKey} from 'sentry/components/sidebar/types';
46+
import {BodyTitle, SetupTitle} from 'sentry/components/updatedEmptyState';
4647
import {
4748
withoutPerformanceSupport,
4849
withPerformanceOnboarding,
@@ -657,7 +658,7 @@ export function Onboarding({organization, project}: OnboardingProps) {
657658

658659
return (
659660
<OnboardingPanel project={project}>
660-
<BodyTitle>{t('Set up the Sentry SDK')}</BodyTitle>
661+
<SetupTitle project={project} />
661662
<GuidedSteps
662663
initialStep={decodeInteger(location.query.guidedStep)}
663664
onStepChange={step => {
@@ -856,12 +857,6 @@ const HeaderText = styled('div')`
856857
}
857858
`;
858859

859-
const BodyTitle = styled('div')`
860-
font-size: ${p => p.theme.fontSizeExtraLarge};
861-
font-weight: ${p => p.theme.fontWeightBold};
862-
margin-bottom: ${space(1)};
863-
`;
864-
865860
const Setup = styled('div')`
866861
padding: ${space(4)};
867862

‎static/app/views/profiling/onboarding.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingSt
2323
import {useLoadGettingStarted} from 'sentry/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted';
2424
import Panel from 'sentry/components/panels/panel';
2525
import PanelBody from 'sentry/components/panels/panelBody';
26+
import {BodyTitle, SetupTitle} from 'sentry/components/updatedEmptyState';
2627
import {profiling as profilingPlatforms} from 'sentry/data/platformCategories';
2728
import platforms, {otherPlatform} from 'sentry/data/platforms';
2829
import {t, tct} from 'sentry/locale';
@@ -333,7 +334,7 @@ export function Onboarding() {
333334

334335
return (
335336
<OnboardingPanel project={project}>
336-
<BodyTitle>{t('Set up the Sentry SDK')}</BodyTitle>
337+
<SetupTitle project={project} />
337338
{introduction && <DescriptionWrapper>{introduction}</DescriptionWrapper>}
338339
<GuidedSteps>
339340
{steps
@@ -414,12 +415,6 @@ const HeaderText = styled('div')`
414415
}
415416
`;
416417

417-
const BodyTitle = styled('div')`
418-
font-size: ${p => p.theme.fontSizeExtraLarge};
419-
font-weight: ${p => p.theme.fontWeightBold};
420-
margin-bottom: ${space(1)};
421-
`;
422-
423418
const Setup = styled('div')`
424419
padding: ${space(4)};
425420

0 commit comments

Comments
 (0)