Skip to content

fix(demo-mode): releases tour #101234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 9, 2025
+140 −133
Merged

fix(demo-mode): releases tour #101234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae2ca22
fix(demo-mode): releases tour
obostjancic Oct 9, 2025
84505a5
remove import
obostjancic Oct 9, 2025
330c1df
fix type
obostjancic Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 17 additions & 25 deletions static/app/utils/demoMode/demoTours.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ describe('DemoTours', () => {
[DemoTour.RELEASES]: {
currentStepId: null,
isCompleted: false,
orderedStepIds: [DemoTourStep.RELEASES_COMPARE, DemoTourStep.RELEASES_DETAILS],
orderedStepIds: [DemoTourStep.RELEASES_LIST, DemoTourStep.RELEASES_CHART],
isRegistered: true,
tourKey: DemoTour.RELEASES,
},
Expand Down Expand Up @@ -122,8 +122,8 @@ describe('DemoTours', () => {
expect(tour?.currentStepId).toBeNull();
expect(tour?.isCompleted).toBe(false);
expect(tour?.orderedStepIds).toEqual([
DemoTourStep.RELEASES_COMPARE,
DemoTourStep.RELEASES_DETAILS,
DemoTourStep.RELEASES_LIST,
DemoTourStep.RELEASES_CHART,
]);
});

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

act(() => {
tour?.startTour(DemoTourStep.RELEASES_COMPARE);
tour?.startTour(DemoTourStep.RELEASES_LIST);
});

expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
DemoTourStep.RELEASES_COMPARE
);
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);

act(() => {
tour?.setStep(DemoTourStep.RELEASES_DETAILS);
tour?.setStep(DemoTourStep.RELEASES_CHART);
});

expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
DemoTourStep.RELEASES_DETAILS
DemoTourStep.RELEASES_CHART
);

act(() => {
Expand Down Expand Up @@ -180,29 +178,25 @@ describe('DemoTours', () => {
const issuesTour = issuesResult.current;

act(() => {
sidebarTour?.startTour(DemoTourStep.RELEASES_COMPARE);
sidebarTour?.startTour(DemoTourStep.RELEASES_LIST);
});

expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
DemoTourStep.RELEASES_COMPARE
);
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);
expect(mockState[DemoTour.ISSUES].currentStepId).toBeNull();

act(() => {
issuesTour?.startTour(DemoTourStep.ISSUES_STREAM);
});

expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
DemoTourStep.RELEASES_COMPARE
);
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);
expect(mockState[DemoTour.ISSUES].currentStepId).toBe(DemoTourStep.ISSUES_STREAM);

act(() => {
sidebarTour?.setStep(DemoTourStep.RELEASES_DETAILS);
sidebarTour?.setStep(DemoTourStep.RELEASES_CHART);
});

expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
DemoTourStep.RELEASES_DETAILS
DemoTourStep.RELEASES_CHART
);
expect(mockState[DemoTour.ISSUES].currentStepId).toBe(DemoTourStep.ISSUES_STREAM);

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

act(() => {
sidebarTour?.startTour(DemoTourStep.RELEASES_COMPARE);
sidebarTour?.startTour(DemoTourStep.RELEASES_LIST);
});
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
DemoTourStep.RELEASES_COMPARE
);
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(DemoTourStep.RELEASES_LIST);

act(() => {
sidebarTour?.setStep(DemoTourStep.RELEASES_DETAILS);
sidebarTour?.setStep(DemoTourStep.RELEASES_CHART);
});
expect(mockState[DemoTour.RELEASES].currentStepId).toBe(
DemoTourStep.RELEASES_DETAILS
DemoTourStep.RELEASES_CHART
);

act(() => {
Expand All @@ -252,7 +244,7 @@ describe('DemoTours', () => {
render(
<DemoToursProvider>
<DemoTourElement
id={DemoTourStep.RELEASES_COMPARE}
id={DemoTourStep.RELEASES_LIST}
title="Test Title"
description="Test Description"
>
Expand Down
24 changes: 14 additions & 10 deletions static/app/utils/demoMode/demoTours.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,10 @@ export const enum DemoTourStep {
ISSUES_EVENT_DETAILS = 'demo-tour-issues-event-details',
ISSUES_DETAIL_SIDEBAR = 'demo-tour-issues-detail-sidebar',
// Releases steps
RELEASES_COMPARE = 'demo-tour-releases-compare',
RELEASES_DETAILS = 'demo-tour-releases-details',
RELEASES_STATES = 'demo-tour-releases-states',
RELEASES_LIST = 'demo-tour-releases-list',
RELEASES_CHART = 'demo-tour-releases-chart',
RELEASES_ISSUES = 'demo-tour-releases-issues',
RELEASES_STATS = 'demo-tour-releases-stats',
// Performance steps
PERFORMANCE_TABLE = 'demo-tour-performance-table',
PERFORMANCE_USER_MISERY = 'demo-tour-performance-user-misery',
Expand All @@ -54,10 +55,12 @@ export function useDemoTours(): DemoToursContextType | null {
return tourContext;
}

export function useDemoTour(tourKey: DemoTour): TourContextType<DemoTourStep> | null {
export function useDemoTour(
tourKey: DemoTour | null
): TourContextType<DemoTourStep> | null {
const tourContext = useDemoTours();

if (!tourContext) {
if (!tourContext || !tourKey) {
return null;
}

Expand All @@ -72,9 +75,10 @@ const TOUR_STEPS: Record<DemoTour, DemoTourStep[]> = {
DemoTourStep.ISSUES_DETAIL_SIDEBAR,
],
[DemoTour.RELEASES]: [
DemoTourStep.RELEASES_COMPARE,
DemoTourStep.RELEASES_DETAILS,
DemoTourStep.RELEASES_STATES,
DemoTourStep.RELEASES_LIST,
DemoTourStep.RELEASES_CHART,
DemoTourStep.RELEASES_ISSUES,
DemoTourStep.RELEASES_STATS,
],
[DemoTour.PERFORMANCE]: [
DemoTourStep.PERFORMANCE_TABLE,
Expand Down Expand Up @@ -175,13 +179,13 @@ export function DemoToursProvider({children}: {children: React.ReactNode}) {
return <DemoToursContext value={tours}>{children}</DemoToursContext>;
}

const getTourFromStep = (step: DemoTourStep): DemoTour => {
const getTourFromStep = (step: DemoTourStep): DemoTour | null => {
for (const [category, steps] of Object.entries(TOUR_STEPS)) {
if (steps.includes(step)) {
return category as DemoTour;
}
}
throw new Error(`Unknown tour step: ${step}`);
return null;
};

type DemoTourElementProps = Omit<
Expand Down
143 changes: 82 additions & 61 deletions static/app/views/releases/detail/overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import type {NewQuery, Organization} from 'sentry/types/organization';
import {SessionFieldWithOperation} from 'sentry/types/organization';
import {browserHistory} from 'sentry/utils/browserHistory';
import {getUtcDateString} from 'sentry/utils/dates';
import {DemoTourElement, DemoTourStep} from 'sentry/utils/demoMode/demoTours';
import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
import EventView from 'sentry/utils/discover/eventView';
import {decodeScalar} from 'sentry/utils/queryString';
Expand Down Expand Up @@ -354,20 +355,29 @@ function ReleaseOverview() {
/>
</ReleaseDetailsPageFilters>
{(hasDiscover || hasPerformance || hasHealthData) && (
<ReleaseComparisonChart
release={release}
releaseSessions={thisRelease}
allSessions={allReleases}
platform={project.platform}
location={location}
loading={loading}
reloading={reloading}
errored={errored}
project={project}
organization={organization}
api={api}
hasHealthData={hasHealthData}
/>
<DemoTourElement
id={DemoTourStep.RELEASES_CHART}
title={t('Release-specific trends')}
description={t(
'Track key metrics like crash free session rate, failure rate and more.'
)}
position="top-end"
>
<ReleaseComparisonChart
release={release}
releaseSessions={thisRelease}
allSessions={allReleases}
platform={project.platform}
location={location}
loading={loading}
reloading={reloading}
errored={errored}
project={project}
organization={organization}
api={api}
hasHealthData={hasHealthData}
/>
</DemoTourElement>
)}
<ReleaseIssues
organization={organization}
Expand All @@ -392,57 +402,68 @@ function ReleaseOverview() {
/>
</Feature>
</Layout.Main>
<Layout.Side>
<ReleaseStats organization={organization} release={release} project={project} />
{hasHealthData && (
<ReleaseAdoption
releaseSessions={thisRelease}
allSessions={allReleases}
loading={loading}
reloading={reloading}
errored={errored}
<DemoTourElement
id={DemoTourStep.RELEASES_STATS}
title={t('Release stats')}
description={t('Track release adoption, commit stats, and more.')}
position="left-start"
>
<Layout.Side>
<ReleaseStats
organization={organization}
release={release}
project={project}
environment={environments}
/>
)}
<ProjectReleaseDetails
release={release}
releaseMeta={releaseMeta}
project={project}
/>
{commitCount > 0 && (
<CommitAuthorBreakdown
version={version}
orgId={organization.slug}
projectSlug={project.slug}
/>
)}
{releaseMeta.projects.length > 1 && (
<OtherProjects
projects={releaseMeta.projects.filter(p => p.slug !== project.slug)}
location={location}
version={version}
organization={organization}
/>
)}
{hasHealthData && (
<TotalCrashFreeUsers
organization={organization}
version={version}
projectSlug={project.slug}
location={location}
/>
)}
{deploys.length > 0 && (
<Deploys
version={version}
orgSlug={organization.slug}
deploys={deploys}
projectId={project.id}
{hasHealthData && (
<ReleaseAdoption
releaseSessions={thisRelease}
allSessions={allReleases}
loading={loading}
reloading={reloading}
errored={errored}
release={release}
project={project}
environment={environments}
/>
)}
<ProjectReleaseDetails
release={release}
releaseMeta={releaseMeta}
project={project}
/>
)}
</Layout.Side>
{commitCount > 0 && (
<CommitAuthorBreakdown
version={version}
orgId={organization.slug}
projectSlug={project.slug}
/>
)}
{releaseMeta.projects.length > 1 && (
<OtherProjects
projects={releaseMeta.projects.filter(p => p.slug !== project.slug)}
location={location}
version={version}
organization={organization}
/>
)}
{hasHealthData && (
<TotalCrashFreeUsers
organization={organization}
version={version}
projectSlug={project.slug}
location={location}
/>
)}
{deploys.length > 0 && (
<Deploys
version={version}
orgSlug={organization.slug}
deploys={deploys}
projectId={project.id}
/>
)}
</Layout.Side>
</DemoTourElement>
</Layout.Body>
</Fragment>
);
Expand Down
3 changes: 2 additions & 1 deletion static/app/views/releases/detail/overview/releaseIssues.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,11 +370,12 @@ class ReleaseIssues extends Component<Props, State> {
<Fragment>
<ControlsWrapper>
<DemoTourElement
id={DemoTourStep.RELEASES_STATES}
id={DemoTourStep.RELEASES_ISSUES}
title={t('New and regressed issues')}
description={t(
`Along with reviewing how your release is trending over time compared to previous releases, you can view new and regressed issues here.`
)}
position="top-start"
>
<SegmentedControl
aria-label={t('Issue type')}
Expand Down
Loading
Loading