Skip to content

Commit 61b194c

Browse files
obostjancicobostjancic
authored
fix(demo-mode): releases tour (#101234)
1 parent 87ec424 commit 61b194c

File tree

6 files changed

+140
-133
lines changed

6 files changed

+140
-133
lines changed

‎static/app/utils/demoMode/demoTours.spec.tsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ describe('DemoTours', () => {
5555
[DemoTour.RELEASES]: {
5656
currentStepId: null,
5757
isCompleted: false,
58-
orderedStepIds: [DemoTourStep.RELEASES_COMPARE, DemoTourStep.RELEASES_DETAILS],
58+
orderedStepIds: [DemoTourStep.RELEASES_LIST, DemoTourStep.RELEASES_CHART],
5959
isRegistered: true,
6060
tourKey: DemoTour.RELEASES,
6161
},
@@ -122,8 +122,8 @@ describe('DemoTours', () => {
122122
expect(tour?.currentStepId).toBeNull();
123123
expect(tour?.isCompleted).toBe(false);
124124
expect(tour?.orderedStepIds).toEqual([
125-
DemoTourStep.RELEASES_COMPARE,
126-
DemoTourStep.RELEASES_DETAILS,
125+
DemoTourStep.RELEASES_LIST,
126+
DemoTourStep.RELEASES_CHART,
127127
]);
128128
});
129129

@@ -135,19 +135,17 @@ describe('DemoTours', () => {
135135
const tour = result.current;
136136

137137
act(() => {
138-
tour?.startTour(DemoTourStep.RELEASES_COMPARE);
138+
tour?.startTour(DemoTourStep.RELEASES_LIST);
139139
});
140140

141-
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
142-
DemoTourStep.RELEASES_COMPARE
143-
);
141+
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);
144142

145143
act(() => {
146-
tour?.setStep(DemoTourStep.RELEASES_DETAILS);
144+
tour?.setStep(DemoTourStep.RELEASES_CHART);
147145
});
148146

149147
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
150-
DemoTourStep.RELEASES_DETAILS
148+
DemoTourStep.RELEASES_CHART
151149
);
152150

153151
act(() => {
@@ -180,29 +178,25 @@ describe('DemoTours', () => {
180178
const issuesTour = issuesResult.current;
181179

182180
act(() => {
183-
sidebarTour?.startTour(DemoTourStep.RELEASES_COMPARE);
181+
sidebarTour?.startTour(DemoTourStep.RELEASES_LIST);
184182
});
185183

186-
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
187-
DemoTourStep.RELEASES_COMPARE
188-
);
184+
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);
189185
expect(mockState[DemoTour.ISSUES].currentStepId).toBeNull();
190186

191187
act(() => {
192188
issuesTour?.startTour(DemoTourStep.ISSUES_STREAM);
193189
});
194190

195-
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
196-
DemoTourStep.RELEASES_COMPARE
197-
);
191+
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);
198192
expect(mockState[DemoTour.ISSUES].currentStepId).toBe(DemoTourStep.ISSUES_STREAM);
199193

200194
act(() => {
201-
sidebarTour?.setStep(DemoTourStep.RELEASES_DETAILS);
195+
sidebarTour?.setStep(DemoTourStep.RELEASES_CHART);
202196
});
203197

204198
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
205-
DemoTourStep.RELEASES_DETAILS
199+
DemoTourStep.RELEASES_CHART
206200
);
207201
expect(mockState[DemoTour.ISSUES].currentStepId).toBe(DemoTourStep.ISSUES_STREAM);
208202

@@ -226,17 +220,15 @@ describe('DemoTours', () => {
226220
const sidebarTour = result.current;
227221

228222
act(() => {
229-
sidebarTour?.startTour(DemoTourStep.RELEASES_COMPARE);
223+
sidebarTour?.startTour(DemoTourStep.RELEASES_LIST);
230224
});
231-
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
232-
DemoTourStep.RELEASES_COMPARE
233-
);
225+
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);
234226

235227
act(() => {
236-
sidebarTour?.setStep(DemoTourStep.RELEASES_DETAILS);
228+
sidebarTour?.setStep(DemoTourStep.RELEASES_CHART);
237229
});
238230
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
239-
DemoTourStep.RELEASES_DETAILS
231+
DemoTourStep.RELEASES_CHART
240232
);
241233

242234
act(() => {
@@ -252,7 +244,7 @@ describe('DemoTours', () => {
252244
render(
253245
<DemoToursProvider>
254246
<DemoTourElement
255-
id={DemoTourStep.RELEASES_COMPARE}
247+
id={DemoTourStep.RELEASES_LIST}
256248
title="Test Title"
257249
description="Test Description"
258250
>

‎static/app/utils/demoMode/demoTours.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@ export const enum DemoTourStep {
3030
ISSUES_EVENT_DETAILS = 'demo-tour-issues-event-details',
3131
ISSUES_DETAIL_SIDEBAR = 'demo-tour-issues-detail-sidebar',
3232
// Releases steps
33-
RELEASES_COMPARE = 'demo-tour-releases-compare',
34-
RELEASES_DETAILS = 'demo-tour-releases-details',
35-
RELEASES_STATES = 'demo-tour-releases-states',
33+
RELEASES_LIST = 'demo-tour-releases-list',
34+
RELEASES_CHART = 'demo-tour-releases-chart',
35+
RELEASES_ISSUES = 'demo-tour-releases-issues',
36+
RELEASES_STATS = 'demo-tour-releases-stats',
3637
// Performance steps
3738
PERFORMANCE_TABLE = 'demo-tour-performance-table',
3839
PERFORMANCE_USER_MISERY = 'demo-tour-performance-user-misery',
@@ -54,10 +55,12 @@ export function useDemoTours(): DemoToursContextType | null {
5455
return tourContext;
5556
}
5657

57-
export function useDemoTour(tourKey: DemoTour): TourContextType<DemoTourStep> | null {
58+
export function useDemoTour(
59+
tourKey: DemoTour | null
60+
): TourContextType<DemoTourStep> | null {
5861
const tourContext = useDemoTours();
5962

60-
if (!tourContext) {
63+
if (!tourContext || !tourKey) {
6164
return null;
6265
}
6366

@@ -72,9 +75,10 @@ const TOUR_STEPS: Record<DemoTour, DemoTourStep[]> = {
7275
DemoTourStep.ISSUES_DETAIL_SIDEBAR,
7376
],
7477
[DemoTour.RELEASES]: [
75-
DemoTourStep.RELEASES_COMPARE,
76-
DemoTourStep.RELEASES_DETAILS,
77-
DemoTourStep.RELEASES_STATES,
78+
DemoTourStep.RELEASES_LIST,
79+
DemoTourStep.RELEASES_CHART,
80+
DemoTourStep.RELEASES_ISSUES,
81+
DemoTourStep.RELEASES_STATS,
7882
],
7983
[DemoTour.PERFORMANCE]: [
8084
DemoTourStep.PERFORMANCE_TABLE,
@@ -175,13 +179,13 @@ export function DemoToursProvider({children}: {children: React.ReactNode}) {
175179
return <DemoToursContext value={tours}>{children}</DemoToursContext>;
176180
}
177181

178-
const getTourFromStep = (step: DemoTourStep): DemoTour => {
182+
const getTourFromStep = (step: DemoTourStep): DemoTour | null => {
179183
for (const [category, steps] of Object.entries(TOUR_STEPS)) {
180184
if (steps.includes(step)) {
181185
return category as DemoTour;
182186
}
183187
}
184-
throw new Error(`Unknown tour step: ${step}`);
188+
return null;
185189
};
186190

187191
type DemoTourElementProps = Omit<

‎static/app/views/releases/detail/overview/index.tsx‎

Lines changed: 82 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import type {NewQuery, Organization} from 'sentry/types/organization';
2424
import {SessionFieldWithOperation} from 'sentry/types/organization';
2525
import {browserHistory} from 'sentry/utils/browserHistory';
2626
import {getUtcDateString} from 'sentry/utils/dates';
27+
import {DemoTourElement, DemoTourStep} from 'sentry/utils/demoMode/demoTours';
2728
import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
2829
import EventView from 'sentry/utils/discover/eventView';
2930
import {decodeScalar} from 'sentry/utils/queryString';
@@ -354,20 +355,29 @@ function ReleaseOverview() {
354355
/>
355356
</ReleaseDetailsPageFilters>
356357
{(hasDiscover || hasPerformance || hasHealthData) && (
357-
<ReleaseComparisonChart
358-
release={release}
359-
releaseSessions={thisRelease}
360-
allSessions={allReleases}
361-
platform={project.platform}
362-
location={location}
363-
loading={loading}
364-
reloading={reloading}
365-
errored={errored}
366-
project={project}
367-
organization={organization}
368-
api={api}
369-
hasHealthData={hasHealthData}
370-
/>
358+
<DemoTourElement
359+
id={DemoTourStep.RELEASES_CHART}
360+
title={t('Release-specific trends')}
361+
description={t(
362+
'Track key metrics like crash free session rate, failure rate and more.'
363+
)}
364+
position="top-end"
365+
>
366+
<ReleaseComparisonChart
367+
release={release}
368+
releaseSessions={thisRelease}
369+
allSessions={allReleases}
370+
platform={project.platform}
371+
location={location}
372+
loading={loading}
373+
reloading={reloading}
374+
errored={errored}
375+
project={project}
376+
organization={organization}
377+
api={api}
378+
hasHealthData={hasHealthData}
379+
/>
380+
</DemoTourElement>
371381
)}
372382
<ReleaseIssues
373383
organization={organization}
@@ -392,57 +402,68 @@ function ReleaseOverview() {
392402
/>
393403
</Feature>
394404
</Layout.Main>
395-
<Layout.Side>
396-
<ReleaseStats organization={organization} release={release} project={project} />
397-
{hasHealthData && (
398-
<ReleaseAdoption
399-
releaseSessions={thisRelease}
400-
allSessions={allReleases}
401-
loading={loading}
402-
reloading={reloading}
403-
errored={errored}
405+
<DemoTourElement
406+
id={DemoTourStep.RELEASES_STATS}
407+
title={t('Release stats')}
408+
description={t('Track release adoption, commit stats, and more.')}
409+
position="left-start"
410+
>
411+
<Layout.Side>
412+
<ReleaseStats
413+
organization={organization}
404414
release={release}
405415
project={project}
406-
environment={environments}
407416
/>
408-
)}
409-
<ProjectReleaseDetails
410-
release={release}
411-
releaseMeta={releaseMeta}
412-
project={project}
413-
/>
414-
{commitCount > 0 && (
415-
<CommitAuthorBreakdown
416-
version={version}
417-
orgId={organization.slug}
418-
projectSlug={project.slug}
419-
/>
420-
)}
421-
{releaseMeta.projects.length > 1 && (
422-
<OtherProjects
423-
projects={releaseMeta.projects.filter(p => p.slug !== project.slug)}
424-
location={location}
425-
version={version}
426-
organization={organization}
427-
/>
428-
)}
429-
{hasHealthData && (
430-
<TotalCrashFreeUsers
431-
organization={organization}
432-
version={version}
433-
projectSlug={project.slug}
434-
location={location}
435-
/>
436-
)}
437-
{deploys.length > 0 && (
438-
<Deploys
439-
version={version}
440-
orgSlug={organization.slug}
441-
deploys={deploys}
442-
projectId={project.id}
417+
{hasHealthData && (
418+
<ReleaseAdoption
419+
releaseSessions={thisRelease}
420+
allSessions={allReleases}
421+
loading={loading}
422+
reloading={reloading}
423+
errored={errored}
424+
release={release}
425+
project={project}
426+
environment={environments}
427+
/>
428+
)}
429+
<ProjectReleaseDetails
430+
release={release}
431+
releaseMeta={releaseMeta}
432+
project={project}
443433
/>
444-
)}
445-
</Layout.Side>
434+
{commitCount > 0 && (
435+
<CommitAuthorBreakdown
436+
version={version}
437+
orgId={organization.slug}
438+
projectSlug={project.slug}
439+
/>
440+
)}
441+
{releaseMeta.projects.length > 1 && (
442+
<OtherProjects
443+
projects={releaseMeta.projects.filter(p => p.slug !== project.slug)}
444+
location={location}
445+
version={version}
446+
organization={organization}
447+
/>
448+
)}
449+
{hasHealthData && (
450+
<TotalCrashFreeUsers
451+
organization={organization}
452+
version={version}
453+
projectSlug={project.slug}
454+
location={location}
455+
/>
456+
)}
457+
{deploys.length > 0 && (
458+
<Deploys
459+
version={version}
460+
orgSlug={organization.slug}
461+
deploys={deploys}
462+
projectId={project.id}
463+
/>
464+
)}
465+
</Layout.Side>
466+
</DemoTourElement>
446467
</Layout.Body>
447468
</Fragment>
448469
);

‎static/app/views/releases/detail/overview/releaseIssues.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -370,11 +370,12 @@ class ReleaseIssues extends Component<Props, State> {
370370
<Fragment>
371371
<ControlsWrapper>
372372
<DemoTourElement
373-
id={DemoTourStep.RELEASES_STATES}
373+
id={DemoTourStep.RELEASES_ISSUES}
374374
title={t('New and regressed issues')}
375375
description={t(
376376
`Along with reviewing how your release is trending over time compared to previous releases, you can view new and regressed issues here.`
377377
)}
378+
position="top-start"
378379
>
379380
<SegmentedControl
380381
aria-label={t('Issue type')}

0 commit comments

Comments
 (0)