feat(demo-mode): releases tour (#89271)

obostjancic · billyvg · commit 3bc823a98bfc · 2025-04-14T13:18:30.000-05:00
diff --git a/static/app/components/onboardingWizard/content.tsx b/static/app/components/onboardingWizard/content.tsx
@@ -277,6 +277,8 @@ function Task({task, hidePanel, showWaitingIndicator}: TaskProps) {
         // Performance guide is updated to use the new tour
         if (task.task === OnboardingTaskKey.PERFORMANCE_GUIDE) {
           tours?.[DemoTour.PERFORMANCE]?.startTour(DemoTourStep.PERFORMANCE_TABLE);
+        } else if (task.task === OnboardingTaskKey.RELEASE_GUIDE) {
+          tours?.[DemoTour.RELEASES]?.startTour();
         } else {
           DemoWalkthroughStore.activateGuideAnchor(task.task);
         }
diff --git a/static/app/utils/demoMode/demoTours.tsx b/static/app/utils/demoMode/demoTours.tsx
@@ -211,20 +211,21 @@ const getTourFromStep = (step: DemoTourStep): DemoTour => {
 type DemoTourElementProps = Omit<
   TourElementProps<DemoTourStep>,
   'tourContextValue' | 'tourContext'
->;
+> & {disabled?: boolean};
 
 export function DemoTourElement({
   id,
   title,
   description,
   children,
   position = 'top-start',
+  disabled = false,
   ...props
 }: DemoTourElementProps) {
   const tourKey = getTourFromStep(id);
   const tourContextValue = useDemoTour(tourKey);
 
-  if (!isDemoModeActive() || !tourContextValue) {
+  if (!isDemoModeActive() || !tourContextValue || disabled) {
     return children;
   }
 
diff --git a/static/app/utils/demoMode/guides.tsx b/static/app/utils/demoMode/guides.tsx
@@ -59,9 +59,6 @@ export function getTourTask(
       return {tour: 'issues', task: OnboardingTaskKey.ISSUE_GUIDE};
     case 'releases':
       return {tour: 'releases', task: OnboardingTaskKey.RELEASE_GUIDE};
-    // TODO(ogi): Remove this once we merge the new releases tour
-    case 'release-details_v2':
-      return {tour: 'releases', task: OnboardingTaskKey.RELEASE_GUIDE};
     case 'performance':
       return {tour: 'performance', task: OnboardingTaskKey.PERFORMANCE_GUIDE};
 
@@ -74,9 +71,9 @@ export function getDemoGuides() {
   return [
     {guide: 'sidebar_v2', seen: false},
     {guide: 'issues_v3', seen: false},
-    {guide: 'releases_v2', seen: false},
-    {guide: 'react-release', seen: false},
-    {guide: 'release-details_v2', seen: false},
+    {guide: 'releases', seen: false},
+    // {guide: 'react-release', seen: false},
+    // {guide: 'release-details_v2', seen: false},e
     {guide: 'performance', seen: false},
     // {guide: 'transaction_summary', seen: false},
     // {guide: 'transaction_details_v2', seen: false},
@@ -173,45 +170,5 @@ export function getDemoModeGuides(): GuidesContent {
         },
       ],
     },
-    {
-      guide: 'releases_v2',
-      requiredTargets: ['release_projects'],
-      priority: 1,
-      steps: [
-        {
-          title: t('Compare releases'),
-          target: 'release_projects',
-          description: t(
-            `Click here and select the "react" project to see how the release is trending compared to previous releases.`
-          ),
-        },
-      ],
-    },
-    {
-      guide: 'react-release',
-      requiredTargets: ['release_version'],
-      steps: [
-        {
-          title: t('Release-specific trends'),
-          target: 'release_version',
-          description: t(
-            `Select the latest release to review new and regressed issues, and business critical metrics like crash rate, and user adoption.`
-          ),
-        },
-      ],
-    },
-    {
-      guide: 'release-details_v2',
-      requiredTargets: ['release_states'],
-      steps: [
-        {
-          title: t('New and regressed issues'),
-          target: 'release_states',
-          description: t(
-            `Along with reviewing how your release is trending over time compared to previous releases, you can view new and regressed issues here.`
-          ),
-        },
-      ],
-    },
   ];
 }
diff --git a/static/app/views/releases/detail/overview/releaseIssues.tsx b/static/app/views/releases/detail/overview/releaseIssues.tsx
@@ -5,7 +5,6 @@ import isEqual from 'lodash/isEqual';
 import * as qs from 'query-string';
 
 import type {Client} from 'sentry/api';
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {LinkButton} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {SegmentedControl} from 'sentry/components/core/segmentedControl';
@@ -17,6 +16,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {browserHistory} from 'sentry/utils/browserHistory';
+import {DemoTourElement, DemoTourStep} from 'sentry/utils/demoMode/demoTours';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import withApi from 'sentry/utils/withApi';
 import withOrganization from 'sentry/utils/withOrganization';
@@ -368,7 +368,13 @@ class ReleaseIssues extends Component<Props, State> {
     return (
       <Fragment>
         <ControlsWrapper>
-          <GuideAnchor target="release_states">
+          <DemoTourElement
+            id={DemoTourStep.RELEASES_STATES}
+            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.`
+            )}
+          >
             <SegmentedControl
               aria-label={t('Issue type')}
               size="xs"
@@ -387,7 +393,7 @@ class ReleaseIssues extends Component<Props, State> {
                 </SegmentedControl.Item>
               ))}
             </SegmentedControl>
-          </GuideAnchor>
+          </DemoTourElement>
 
           <OpenInButtonBar gap={1}>
             <LinkButton to={this.getIssuesUrl()} size="xs">
diff --git a/static/app/views/releases/list/index.tsx b/static/app/views/releases/list/index.tsx
@@ -5,7 +5,6 @@ import pick from 'lodash/pick';
 
 import {fetchTagValues} from 'sentry/actionCreators/tags';
 import type {Client} from 'sentry/api';
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Alert} from 'sentry/components/core/alert';
 import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
 import EmptyMessage from 'sentry/components/emptyMessage';
@@ -41,6 +40,7 @@ import type {AvatarProject, Project} from 'sentry/types/project';
 import type {Release} from 'sentry/types/release';
 import {ReleaseStatus} from 'sentry/types/release';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {DemoTourElement, DemoTourStep} from 'sentry/utils/demoMode/demoTours';
 import {SEMVER_TAGS} from 'sentry/utils/discover/fields';
 import Projects from 'sentry/utils/projects';
 import withApi from 'sentry/utils/withApi';
@@ -558,9 +558,16 @@ class ReleasesList extends DeprecatedAsyncComponent<Props, State> {
               {this.renderHealthCta()}
 
               <ReleasesPageFilterBar condensed>
-                <GuideAnchor target="release_projects">
+                <DemoTourElement
+                  id={DemoTourStep.RELEASES_COMPARE}
+                  title={t('Compare releases')}
+                  description={t(
+                    'Click here and select the "react" project to see how the release is trending compared to previous releases.'
+                  )}
+                  position="bottom-start"
+                >
                   <ProjectPageFilter />
-                </GuideAnchor>
+                </DemoTourElement>
                 <EnvironmentPageFilter />
                 <DatePageFilter
                   disallowArbitraryRelativeRanges
diff --git a/static/app/views/releases/list/releaseCard/index.tsx b/static/app/views/releases/list/releaseCard/index.tsx
@@ -5,7 +5,6 @@ import type {Location} from 'history';
 import partition from 'lodash/partition';
 import moment from 'moment-timezone';
 
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import Collapsible from 'sentry/components/collapsible';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
@@ -23,6 +22,7 @@ import {space} from 'sentry/styles/space';
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import type {Release} from 'sentry/types/release';
+import {DemoTourElement, DemoTourStep} from 'sentry/utils/demoMode/demoTours';
 import {useUser} from 'sentry/utils/useUser';
 import useFinalizeRelease from 'sentry/views/releases/components/useFinalizeRelease';
 import type {ReleasesDisplayOption} from 'sentry/views/releases/list/releasesDisplayOptions';
@@ -129,14 +129,19 @@ function ReleaseCard({
               query: {project: getReleaseProjectId(release, selection)},
             }}
           >
-            <GuideAnchor
+            <DemoTourElement
+              id={DemoTourStep.RELEASES_DETAILS}
               disabled={!isTopRelease || projectsToShow.length > 1}
-              target="release_version"
+              title={t('Release-specific trends')}
+              description={t(
+                'Select the latest release to review new and regressed issues, and business critical metrics like crash rate, and user adoption.'
+              )}
+              position="bottom-start"
             >
               <VersionWrapper>
                 <StyledVersion version={version} tooltipRawVersion anchor={false} />
               </VersionWrapper>
-            </GuideAnchor>
+            </DemoTourElement>
           </GlobalSelectionLink>
           {commitCount > 0 && (
             <ReleaseCardCommits release={release} withHeading={false} />

Original file line number	Diff line number	Diff line change
`@@ -277,6 +277,8 @@ function Task({task, hidePanel, showWaitingIndicator}: TaskProps) {`
`277`	`277`	`// Performance guide is updated to use the new tour`
`278`	`278`	`if (task.task === OnboardingTaskKey.PERFORMANCE_GUIDE) {`
`279`	`279`	`tours?.[DemoTour.PERFORMANCE]?.startTour(DemoTourStep.PERFORMANCE_TABLE);`
	`280`	`+ } else if (task.task === OnboardingTaskKey.RELEASE_GUIDE) {`
	`281`	`+ tours?.[DemoTour.RELEASES]?.startTour();`
`280`	`282`	`} else {`
`281`	`283`	`DemoWalkthroughStore.activateGuideAnchor(task.task);`
`282`	`284`	`}`