feat(demo-mode): issues tour

static/app/components/onboardingWizard/content.tsx

@@ -29,7 +29,7 @@ import {space} from 'sentry/styles/space';
 import {type OnboardingTask, OnboardingTaskKey} from 'sentry/types/onboarding';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {isDemoModeActive} from 'sentry/utils/demoMode';
-import {DemoTour, DemoTourStep, useDemoTours} from 'sentry/utils/demoMode/demoTours';
+import {DemoTour, useDemoTours} from 'sentry/utils/demoMode/demoTours';
 import {updateDemoWalkthroughTask} from 'sentry/utils/demoMode/guides';
 import testableTransition from 'sentry/utils/testableTransition';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
@@ -274,11 +274,12 @@ function Task({task, hidePanel, showWaitingIndicator}: TaskProps) {
       e.stopPropagation();
 
       if (isDemoModeActive()) {
-        // Performance guide is updated to use the new tour
         if (task.task === OnboardingTaskKey.PERFORMANCE_GUIDE) {
-          tours?.[DemoTour.PERFORMANCE]?.startTour(DemoTourStep.PERFORMANCE_TABLE);
+          tours?.[DemoTour.PERFORMANCE]?.startTour();
         } else if (task.task === OnboardingTaskKey.RELEASE_GUIDE) {
           tours?.[DemoTour.RELEASES]?.startTour();
+        } else if (task.task === OnboardingTaskKey.ISSUE_GUIDE) {
+          tours?.[DemoTour.ISSUES]?.startTour();
         } else {
           DemoWalkthroughStore.activateGuideAnchor(task.task);
         }

static/app/components/stream/group.tsx

@@ -26,7 +26,6 @@ import TimeSince from 'sentry/components/timeSince';
 import {Tooltip} from 'sentry/components/tooltip';
 import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
-import DemoWalkthroughStore from 'sentry/stores/demoWalkthroughStore';
 import GroupStore from 'sentry/stores/groupStore';
 import SelectedGroupStore from 'sentry/stores/selectedGroupStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
@@ -42,7 +41,6 @@ import type {NewQuery} from 'sentry/types/organization';
 import type {User} from 'sentry/types/user';
 import {defined, percent} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {isDemoModeActive} from 'sentry/utils/demoMode';
 import EventView from 'sentry/utils/discover/eventView';
 import {SavedQueryDatasets} from 'sentry/utils/discover/types';
 import {isCtrlKeyPressed} from 'sentry/utils/isCtrlKeyPressed';
@@ -520,12 +518,6 @@ function StreamGroup({
     <Placeholder height="18px" />
   );
 
-  const issueStreamAnchor = isDemoModeActive() ? (
-    <GuideAnchor target="issue_stream" disabled={!DemoWalkthroughStore.get('issue')} />
-  ) : (
-    <GuideAnchor target="issue_stream" />
-  );
-
   const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (displayReprocessingLayout) {
       return;
@@ -581,7 +573,7 @@ function StreamGroup({
         <EventOrGroupHeader index={index} data={group} query={query} source={referrer} />
         <EventOrGroupExtraDetails data={group} showLifetime={false} />
       </GroupSummary>
-      {hasGuideAnchor && issueStreamAnchor}
+      {hasGuideAnchor && <GuideAnchor target="issue_stream" />}
 
       {withColumns.includes('lastSeen') && (
         <LastSeenWrapper breakpoint={COLUMN_BREAKPOINTS.LAST_SEEN}>

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

@@ -64,7 +64,7 @@ describe('DemoTours', () => {
       [DemoTour.ISSUES]: {
         currentStepId: null,
         isCompleted: false,
-        orderedStepIds: [DemoTourStep.ISSUES_STREAM, DemoTourStep.ISSUES_TAGS],
+        orderedStepIds: [DemoTourStep.ISSUES_STREAM, DemoTourStep.ISSUES_AGGREGATES],
         isRegistered: true,
         tourKey: DemoTour.ISSUES,
       },

static/app/utils/demoMode/demoTours.tsx

@@ -2,11 +2,13 @@ import {createContext, useCallback, useContext, useMemo} from 'react';
 
 import {recordFinish} from 'sentry/actionCreators/guides';
 import {
+  TourElement,
   TourElementContent,
   type TourElementProps,
 } from 'sentry/components/tours/components';
 import {
   type TourContextType,
+  type TourEnumType,
   type TourState,
   useTourReducer,
 } from 'sentry/components/tours/tourContext';
@@ -31,9 +33,9 @@ export const enum DemoTourStep {
   SIDEBAR_DISCOVER = 'demo-tour-sidebar-discover',
   // Issues steps
   ISSUES_STREAM = 'demo-tour-issues-stream',
-  ISSUES_TAGS = 'demo-tour-issues-tags',
-  ISSUES_STACKTRACE = 'demo-tour-issues-stacktrace',
-  ISSUES_BREADCRUMBS = 'demo-tour-issues-breadcrumbs',
+  ISSUES_AGGREGATES = 'demo-tour-issues-aggregates',
+  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',
@@ -80,9 +82,9 @@ const TOUR_STEPS: Record<DemoTour, DemoTourStep[]> = {
   ],
   [DemoTour.ISSUES]: [
     DemoTourStep.ISSUES_STREAM,
-    DemoTourStep.ISSUES_TAGS,
-    DemoTourStep.ISSUES_STACKTRACE,
-    DemoTourStep.ISSUES_BREADCRUMBS,
+    DemoTourStep.ISSUES_AGGREGATES, // Metadata and metrics // view data in aggregate 1/6
+    DemoTourStep.ISSUES_EVENT_DETAILS, // Explore details // Explore details 3/6
+    DemoTourStep.ISSUES_DETAIL_SIDEBAR, // Share updates // 6/6
   ],
   [DemoTour.RELEASES]: [
     DemoTourStep.RELEASES_COMPARE,
@@ -242,3 +244,38 @@ export function DemoTourElement({
     </TourElementContent>
   );
 }
+
+/**
+ * A component that renders either a DemoTourElement or regular TourElement depending on whether
+ * demo mode is active. This allows the same tour content to be shared between demo mode and
+ * regular product tours.
+ */
+export function SharedTourElement<T extends TourEnumType>({
+  id,
+  demoTourId,
+  title,
+  description,
+  children,
+  tourContext,
+  ...props
+}: TourElementProps<T> & {demoTourId: DemoTourStep}) {
+  if (isDemoModeActive()) {
+    return (
+      <DemoTourElement id={demoTourId} title={title} description={description}>
+        {children}
+      </DemoTourElement>
+    );
+  }
+
+  return (
+    <TourElement
+      {...props}
+      id={id}
+      title={title}
+      description={description}
+      tourContext={tourContext}
+    >
+      {children}
+    </TourElement>
+  );
+}

static/app/utils/demoMode/guides.tsx

@@ -54,9 +54,6 @@ export function getTourTask(
       return {tour: 'tabs', task: OnboardingTaskKey.SIDEBAR_GUIDE};
     case 'issues':
       return {tour: 'issues', task: OnboardingTaskKey.ISSUE_GUIDE};
-    // TODO(ogi): Remove this once we merge the new issues tour
-    case 'issues_v3':
-      return {tour: 'issues', task: OnboardingTaskKey.ISSUE_GUIDE};
     case 'releases':
       return {tour: 'releases', task: OnboardingTaskKey.RELEASE_GUIDE};
     case 'performance':
@@ -68,17 +65,7 @@ export function getTourTask(
 }
 
 export function getDemoGuides() {
-  return [
-    {guide: 'sidebar_v2', seen: false},
-    {guide: 'issues_v3', 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},
-    {guide: 'issue_stream_v3', seen: false},
-  ];
+  return [{guide: 'sidebar_v2', seen: false}];
 }
 
 export function getDemoModeGuides(): GuidesContent {
@@ -127,48 +114,5 @@ export function getDemoModeGuides(): GuidesContent {
         },
       ],
     },
-    {
-      guide: 'issue_stream_v3',
-      requiredTargets: ['issue_stream'],
-      steps: [
-        {
-          title: t('Issues'),
-          target: 'issue_stream',
-          description: t(
-            `Sentry automatically groups similar events together into an issue. Similarity is
-            determined by stack trace and other factors. Click on an issue to learn more.`
-          ),
-        },
-      ],
-    },
-    {
-      guide: 'issues_v3',
-      requiredTargets: ['tags'],
-      steps: [
-        {
-          title: t('Metadata and metrics'),
-          target: 'tags',
-          description: t(
-            `See tags like specific users affected by the event, device, OS, and browser type.
-            On the right side of the page you can view the number of affected users and exception frequency overtime.`
-          ),
-        },
-        {
-          title: t('Find your broken code'),
-          target: 'stacktrace',
-          description: t(
-            `View the stack trace to see the exact sequence of function calls leading to the error in question.`
-          ),
-        },
-        {
-          title: t('Retrace your steps'),
-          target: 'breadcrumbs',
-          description: t(
-            `Sentry automatically captures breadcrumbs for events so you can see the sequence of events leading up to the error.`
-          ),
-          nextText: t('Got it'),
-        },
-      ],
-    },
   ];
 }

static/app/views/issueDetails/streamline/groupDetailsLayout.tsx

@@ -1,12 +1,12 @@
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {TourElement} from 'sentry/components/tours/components';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
+import {DemoTourStep, SharedTourElement} from 'sentry/utils/demoMode/demoTours';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import useMedia from 'sentry/utils/useMedia';
 import {
@@ -58,20 +58,22 @@ export function GroupDetailsLayout({
         sidebarOpen={issueDetails.isSidebarOpen}
       >
         <div>
-          <TourElement<IssueDetailsTour>
-            tourContext={IssueDetailsTourContext}
+          <SharedTourElement<IssueDetailsTour>
             id={IssueDetailsTour.AGGREGATES}
+            demoTourId={DemoTourStep.ISSUES_AGGREGATES}
+            tourContext={IssueDetailsTourContext}
             title={t('View data in aggregate')}
             description={t(
               'The top section of the page always displays data in aggregate, including trends over time or tag value distributions.'
             )}
             position="bottom"
           >
             <EventDetailsHeader event={event} group={group} project={project} />
-          </TourElement>
-          <TourElement<IssueDetailsTour>
-            tourContext={IssueDetailsTourContext}
+          </SharedTourElement>
+          <SharedTourElement<IssueDetailsTour>
             id={IssueDetailsTour.EVENT_DETAILS}
+            demoTourId={DemoTourStep.ISSUES_EVENT_DETAILS}
+            tourContext={IssueDetailsTourContext}
             title={t('Explore details')}
             description={t(
               'Here we capture everything we know about this data example, like context, trace, breadcrumbs, replay, and tags.'
@@ -86,7 +88,7 @@ export function GroupDetailsLayout({
               </NavigationSidebarWrapper>
               <ContentPadding>{children}</ContentPadding>
             </GroupContent>
-          </TourElement>
+          </SharedTourElement>
         </div>
         {shouldDisplaySidebar ? (
           <StreamlinedSidebar group={group} event={event} project={project} />

static/app/views/issueDetails/streamline/sidebar/sidebar.tsx

@@ -5,12 +5,12 @@ import styled from '@emotion/styled';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import * as Layout from 'sentry/components/layouts/thirds';
 import * as SidebarSection from 'sentry/components/sidebarSection';
-import {TourElement} from 'sentry/components/tours/components';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group, TeamParticipant, UserParticipant} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
+import {DemoTourStep, SharedTourElement} from 'sentry/utils/demoMode/demoTours';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -52,9 +52,10 @@ export default function StreamlinedSidebar({group, event, project}: Props) {
   const isBottomSidebar = useMedia(`(max-width: ${theme.breakpoints.large})`);
 
   return (
-    <TourElement<IssueDetailsTour>
+    <SharedTourElement<IssueDetailsTour>
       tourContext={IssueDetailsTourContext}
       id={IssueDetailsTour.SIDEBAR}
+      demoTourId={DemoTourStep.ISSUES_DETAIL_SIDEBAR}
       title={t('Share updates')}
       description={t(
         'Leave a comment for a teammate or link your favorite ticketing system - this area helps you collaborate and track progress on the issue.'
@@ -105,7 +106,7 @@ export default function StreamlinedSidebar({group, event, project}: Props) {
           </Fragment>
         )}
       </Side>
-    </TourElement>
+    </SharedTourElement>
   );
 }