fix(issues): Move replay CTA into link, fix back button (#82850)

getsentry · Jan 3, 2025 · 77e9411 · 77e9411
1 parent 1962b6e
commit 77e9411
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/static/app/components/events/eventReplay/index.tsx b/static/app/components/events/eventReplay/index.tsx
@@ -1,4 +1,4 @@
-import {lazy, useEffect} from 'react';
+import {lazy} from 'react';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {ReplayClipSection} from 'sentry/components/events/eventReplay/replayClipSection';
@@ -8,7 +8,6 @@ import type {Group} from 'sentry/types/group';
 import useEventCanShowReplayUpsell from 'sentry/utils/event/useEventCanShowReplayUpsell';
 import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent';
 import {useHaveSelectedProjectsSentAnyReplayEvents} from 'sentry/utils/replays/hooks/useReplayOnboarding';
-import useUrlParams from 'sentry/utils/useUrlParams';
 import {useIsSampleEvent} from 'sentry/views/issueDetails/utils';
 
 interface Props {
@@ -29,14 +28,6 @@ export default function EventReplay({event, group, projectSlug}: Props) {
   });
   const isSampleError = useIsSampleEvent();
 
-  const {setParamValue: setProjectId} = useUrlParams('project');
-
-  useEffect(() => {
-    if (canShowUpsell) {
-      setProjectId(upsellProjectId);
-    }
-  }, [upsellProjectId, setProjectId, canShowUpsell]);
-
   if (replayId) {
     return <ReplayClipSection event={event} replayId={replayId} group={group} />;
   }

diff --git a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
@@ -60,10 +60,11 @@ export default function ReplayInlineOnboardingPanel({
           </BannerDescription>
           <ActionButton>
             <Button
+              type="button"
               analyticsEventName="Clicked Replay Onboarding CTA Set Up Button in Issue Details"
               analyticsEventKey="issue_details.replay-onboarding-cta-set-up-button-clicked"
               analyticsParams={{platform}}
-              onClick={activateSidebar}
+              onClick={() => activateSidebar(projectId)}
             >
               {t('Set Up Now')}
             </Button>

diff --git a/static/app/components/feedback/feedbackItem/replayInlineCTAPanel.tsx b/static/app/components/feedback/feedbackItem/replayInlineCTAPanel.tsx
@@ -17,10 +17,11 @@ export default function ReplayInlineCTAPanel() {
       button={
         <ButtonBar gap={1}>
           <Button
+            type="button"
             priority="primary"
             analyticsEventName="Clicked Replay Onboarding CTA Button in User Feedback"
             analyticsEventKey="feedback.replay-onboarding-cta-button-clicked"
-            onClick={activateSidebar}
+            onClick={() => activateSidebar()}
           >
             {t('Set Up Now')}
           </Button>

diff --git a/static/app/utils/replays/hooks/useReplayOnboarding.tsx b/static/app/utils/replays/hooks/useReplayOnboarding.tsx
@@ -5,6 +5,7 @@ import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useSelectedProjectsHaveField from 'sentry/utils/project/useSelectedProjectsHaveField';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 
 export function useHaveSelectedProjectsSentAnyReplayEvents() {
@@ -14,6 +15,7 @@ export function useHaveSelectedProjectsSentAnyReplayEvents() {
 }
 
 export function useReplayOnboardingSidebarPanel() {
+  const navigate = useNavigate();
   const location = useLocation();
   const organization = useOrganization();
 
@@ -26,11 +28,22 @@ export function useReplayOnboardingSidebarPanel() {
     }
   }, [location.hash, organization]);
 
-  const activateSidebar = useCallback((event: {preventDefault: () => void}) => {
-    event.preventDefault();
-    window.location.hash = 'replay-sidequest';
-    SidebarPanelStore.activatePanel(SidebarPanelKey.REPLAYS_ONBOARDING);
-  }, []);
+  const activateSidebar = useCallback(
+    (projectId?: string) => {
+      navigate({
+        ...location,
+        hash: 'replay-sidequest',
+        query: projectId
+          ? {
+              ...location.query,
+              project: projectId,
+            }
+          : location.query,
+      });
+      SidebarPanelStore.activatePanel(SidebarPanelKey.REPLAYS_ONBOARDING);
+    },
+    [location, navigate]
+  );
 
   return {activateSidebar};
 }
diff --git a/static/app/views/replays/list/replayOnboardingPanel.tsx b/static/app/views/replays/list/replayOnboardingPanel.tsx
@@ -234,7 +234,8 @@ export function SetupReplaysCTA({
         >
           <Button
             data-test-id="setup-replays-btn"
-            onClick={activateSidebar}
+            type="button"
+            onClick={() => activateSidebar()}
             priority="primary"
             disabled={disabled}
           >