Repository: getsentry/sentry
Pull request: feat(most-helpful-event): Add frontend piece for popup guide
Closes https://github.com/getsentry/sentry/issues/53915

<img width="403" alt="Screenshot 2023-08-07 at 12 21 00 PM" src="https://github.com/getsentry/sentry/assets/22582037/a3dd53c0-80bd-46ac-9fa8-0f8843371c08">


Problem statement:
Recommended UI: Add guide tooltip
To draw more attention to our new event default, we should add a guide tooltip. It should have the following text/options:

**Body**: “Rather than the latest event, we now default to an event with the most context (replays, traces, and profiles). You can easily switch between events or configure your default here [link].”

**Dismiss Text**: "Got It"

**Date Threshold**: August 22, 2023 (GA date)

Hints from issue discussion:

Commit message: Update text

Patch to review:
diff --git a/static/app/components/assistant/getGuidesContent.tsx b/static/app/components/assistant/getGuidesContent.tsx
index 445ab364227fb7..c8cd6d22543b09 100644
--- a/static/app/components/assistant/getGuidesContent.tsx
+++ b/static/app/components/assistant/getGuidesContent.tsx
@@ -273,6 +273,24 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
+    {
+      guide: 'explain_new_default_event_issue_detail',
+      requiredTargets: ['issue_details_default_event'],
+      dateThreshold: new Date('2023-07-05'),
+      steps: [
+        {
+          title: t('New Default Event'),
+          target: 'issue_details_default_event',
+          description: tct(
+            'Rather than the latest event, we now default to an event with the most context (replays, traces, and profiles). You can easily switch between events or [link:configure your default event] in settings.',
+            {
+              link: <Link to="/settings/account/details/#defaultIssueEvent" />,
+            }
+          ),
+          dismissText: t('Got It'),
+        },
+      ],
+    },
     {
       guide: 'explain_archive_tab_issue_stream',
       requiredTargets: ['issue_stream_archive_tab'],
diff --git a/static/app/views/issueDetails/groupEventCarousel.tsx b/static/app/views/issueDetails/groupEventCarousel.tsx
index 87e5a734577b42..918bf9d310da01 100644
--- a/static/app/views/issueDetails/groupEventCarousel.tsx
+++ b/static/app/views/issueDetails/groupEventCarousel.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 import moment from 'moment-timezone';
 
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Button, ButtonProps} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import DateTime from 'sentry/components/dateTime';
@@ -418,11 +419,13 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
             {!isHelpfulEventUiEnabled && 'JSON'}
           </Button>
         )}
-        <EventNavigationDropdown
-          isDisabled={!hasPreviousEvent && !hasNextEvent}
-          group={group}
-          relativeTime={event.dateCreated ?? event.dateReceived}
-        />
+        <GuideAnchor target="issue_details_default_event" position="bottom">
+          <EventNavigationDropdown
+            isDisabled={!hasPreviousEvent && !hasNextEvent}
+            group={group}
+            relativeTime={event.dateCreated ?? event.dateReceived}
+          />
+        </GuideAnchor>
         <NavButtons>
           {!isHelpfulEventUiEnabled && (
             <EventNavigationButton


Code review comments:
diff_hunk: @@ -418,11 +419,13 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
             {!isHelpfulEventUiEnabled && 'JSON'}
           </Button>
         )}
-        <EventNavigationDropdown
-          isDisabled={!hasPreviousEvent && !hasNextEvent}
-          group={group}
-          relativeTime={event.dateCreated ?? event.dateReceived}
-        />
+        <GuideAnchor target="issue_details_default_event" position="bottom">
path: static/app/views/issueDetails/groupEventCarousel.tsx
text: @user1:
We only want to render `GuideAnchor` when the feature is turned on, so it needs to be inside the `EventNavigationDropdown` component (since it is only rendered when the feature is active)

diff_hunk: @@ -273,6 +273,24 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
+    {
+      guide: 'explain_new_default_event_issue_detail',
+      requiredTargets: ['issue_details_default_event'],
+      dateThreshold: new Date('2023-07-05'),
path: static/app/components/assistant/getGuidesContent.tsx
text: @user1:
Threshold here should be 2023-08-22