Skip to content

Commit c2b1282

Browse files
vgrozdaniccursoragentgetsantry[bot]
authored
feat(tempest): Clarify onboarding (#97661)
This PR: - refactors the DevKit settings onboarding flow to clarify that steps 2 and 3 are alternative methods, not sequential steps. This is now done using accordion component - adds a note that user needs playstation access to, Sentry admin is not enough - fixes a bug when `guidedStep` was part of URL after the tab was switched, which would then shown wrong onboarding step. Now that parameter is removed from URL on tab swtich --------- Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
1 parent ebdccbe commit c2b1282

File tree

3 files changed

+107
-60
lines changed

3 files changed

+107
-60
lines changed

‎static/app/views/settings/project/tempest/DevKitSettings.tsx

Lines changed: 92 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Fragment} from 'react';
1+
import {Fragment, useState} from 'react';
22
import styled from '@emotion/styled';
33

44
import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg';
@@ -7,6 +7,7 @@ import devkitCrashesStep2 from 'sentry-images/tempest/devkit-crashes-step2.png';
77
import devkitCrashesStep3 from 'sentry-images/tempest/devkit-crashes-step3.png';
88
import windowToolImg from 'sentry-images/tempest/windows-tool-devkit.png';
99

10+
import Accordion from 'sentry/components/container/accordion';
1011
import {Button} from 'sentry/components/core/button';
1112
import {ButtonBar} from 'sentry/components/core/button/buttonBar';
1213
import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
@@ -34,6 +35,7 @@ interface Props {
3435
export default function DevKitSettings({organization, project}: Props) {
3536
const navigate = useNavigate();
3637
const location = useLocation();
38+
const [expandedAccordionIndex, setExpandedAccordionIndex] = useState<number>(-1);
3739

3840
const {data: projectKeys, isPending: isLoadingKeys} = useProjectKeys({
3941
orgSlug: organization.slug,
@@ -91,67 +93,89 @@ export default function DevKitSettings({organization, project}: Props) {
9193
<GuidedSteps.StepButtons />
9294
</GuidedSteps.Step>
9395

94-
<GuidedSteps.Step
95-
stepKey="step-2"
96-
title={t('Using Windows tool to set up Upload URL')}
97-
>
96+
<GuidedSteps.Step stepKey="step-2" title={t('Configure Upload URL')}>
9897
<DescriptionWrapper>
99-
<StepContentColumn>
100-
<StepTextSection>
101-
<p>
102-
{t(
103-
'Using Windows tool enter that link into the DevKit as the URL to the Recap Server.'
104-
)}
105-
</p>
106-
</StepTextSection>
107-
<StepImageSection>
108-
<CardIllustration
109-
src={windowToolImg}
110-
alt="Setup Configuration"
111-
/>
112-
</StepImageSection>
113-
</StepContentColumn>
114-
</DescriptionWrapper>
115-
<GuidedSteps.StepButtons />
116-
</GuidedSteps.Step>
98+
<IntroText>
99+
{t(
100+
'There are two ways to configure the Upload URL on your DevKit. Choose one of the following methods:'
101+
)}
102+
</IntroText>
117103

118-
<GuidedSteps.Step
119-
stepKey="step-3"
120-
title={t('Using DevKit Directly to set up Upload URL')}
121-
>
122-
<DescriptionWrapper>
123-
<StepContentColumn>
124-
<StepTextSection>
125-
<p>
126-
{t(
127-
`If you haven't done it via Windows tool, you can set up the Upload URL directly in the DevKit. It is under 'Debug Settings' > 'Core Dump' > 'Upload' > 'Upload URL'.`
128-
)}
129-
</p>
130-
</StepTextSection>
131-
<StepImageSection>
132-
<CardIllustration
133-
src={devkitCrashesStep1}
134-
alt="Setup Configuration"
135-
/>
136-
</StepImageSection>
137-
<StepImageSection>
138-
<CardIllustration
139-
src={devkitCrashesStep2}
140-
alt="Setup Configuration"
141-
/>
142-
</StepImageSection>
143-
<StepImageSection>
144-
<CardIllustration
145-
src={devkitCrashesStep3}
146-
alt="Setup Configuration"
147-
/>
148-
</StepImageSection>
149-
</StepContentColumn>
104+
<Accordion
105+
expandedIndex={expandedAccordionIndex}
106+
setExpandedIndex={setExpandedAccordionIndex}
107+
items={[
108+
{
109+
header: (
110+
<AccordionHeader>
111+
{t('Using Windows tool to set up Upload URL')}
112+
</AccordionHeader>
113+
),
114+
content: (
115+
<AccordionContentWrapper>
116+
<StepContentColumn>
117+
<StepTextSection>
118+
<p>
119+
{t(
120+
'Using Windows tool enter that link into the DevKit as the URL to the Recap Server.'
121+
)}
122+
</p>
123+
</StepTextSection>
124+
<StepImageSection>
125+
<CardIllustration
126+
src={windowToolImg}
127+
alt="Setup Configuration"
128+
/>
129+
</StepImageSection>
130+
</StepContentColumn>
131+
</AccordionContentWrapper>
132+
),
133+
},
134+
{
135+
header: (
136+
<AccordionHeader>
137+
{t('Using DevKit Directly to set up Upload URL')}
138+
</AccordionHeader>
139+
),
140+
content: (
141+
<AccordionContentWrapper>
142+
<StepContentColumn>
143+
<StepTextSection>
144+
<p>
145+
{t(
146+
`If you haven't done it via Windows tool, you can set up the Upload URL directly in the DevKit. It is under 'Debug Settings' > 'Core Dump' > 'Upload' > 'Upload URL'.`
147+
)}
148+
</p>
149+
</StepTextSection>
150+
<StepImageSection>
151+
<CardIllustration
152+
src={devkitCrashesStep1}
153+
alt="Setup Configuration"
154+
/>
155+
</StepImageSection>
156+
<StepImageSection>
157+
<CardIllustration
158+
src={devkitCrashesStep2}
159+
alt="Setup Configuration"
160+
/>
161+
</StepImageSection>
162+
<StepImageSection>
163+
<CardIllustration
164+
src={devkitCrashesStep3}
165+
alt="Setup Configuration"
166+
/>
167+
</StepImageSection>
168+
</StepContentColumn>
169+
</AccordionContentWrapper>
170+
),
171+
},
172+
]}
173+
/>
150174
</DescriptionWrapper>
151175
<GuidedSteps.StepButtons />
152176
</GuidedSteps.Step>
153177

154-
<GuidedSteps.Step stepKey="step-4" title={t('Important Notes')}>
178+
<GuidedSteps.Step stepKey="step-3" title={t('Important Notes')}>
155179
<DescriptionWrapper>
156180
<p>
157181
{t(
@@ -286,3 +310,15 @@ const CardIllustration = styled('img')`
286310
border-radius: ${p => p.theme.borderRadius};
287311
box-shadow: ${p => p.theme.dropShadowLight};
288312
`;
313+
314+
const IntroText = styled('p')`
315+
margin-bottom: ${space(2)};
316+
`;
317+
318+
const AccordionHeader = styled('span')`
319+
font-weight: ${p => p.theme.fontWeight.bold};
320+
`;
321+
322+
const AccordionContentWrapper = styled('div')`
323+
padding: ${space(2)};
324+
`;

‎static/app/views/settings/project/tempest/EmptyState.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
22

33
import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg';
44

5+
import {Alert} from 'sentry/components/core/alert';
56
import {Button} from 'sentry/components/core/button';
67
import {GuidedSteps} from 'sentry/components/guidedSteps/guidedSteps';
78
import {OnboardingCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
@@ -32,6 +33,13 @@ export default function EmptyState() {
3233
<Body>
3334
<Setup>
3435
<BodyTitle>{t('Install instructions')}</BodyTitle>
36+
<Alert.Container>
37+
<Alert type="info">
38+
{t(
39+
"Note: You need PlayStation access to complete these instructions. Sentry admin access alone isn't sufficient."
40+
)}
41+
</Alert>
42+
</Alert.Container>
3543
<GuidedSteps
3644
initialStep={decodeInteger(location.query.guidedStep)}
3745
onStepChange={step => {

‎static/app/views/settings/project/tempest/index.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,15 @@ export default function TempestSettings({organization, project}: Props) {
5252
const tab = getCurrentTab();
5353

5454
const handleTabChange = (newTab: Tab) => {
55+
const newQuery: any = {
56+
...location.query,
57+
tab: newTab,
58+
};
59+
// Reset guided step when switching tabs to avoid cross-tab bleed
60+
delete newQuery.guidedStep;
5561
navigate({
5662
pathname: location.pathname,
57-
query: {
58-
...location.query,
59-
tab: newTab,
60-
},
63+
query: newQuery,
6164
});
6265
};
6366

0 commit comments

Comments
 (0)