Browse Source

ref(replay): Refactor ReplayPreview props so any tab can be opened by default (#60639)

having props like `fromFeedback` aren't scalable because the component
can be re-used in multiple places and we wouldn't want a new prop for
each place; also each of those props would conflict when used at the
same time, which could cause trouble.

A better way is to extract the logic of "if feedback then ... else ...."
into the callsite, and pass in the result, which is the TabKey value
itself.
Ryan Albrecht 1 year ago
parent
commit
27718e84d3

+ 5 - 5
static/app/components/events/eventReplay/replayPreview.tsx

@@ -26,15 +26,15 @@ type Props = {
   orgSlug: string;
   replaySlug: string;
   buttonProps?: Partial<ComponentProps<typeof LinkButton>>;
-  fromFeedback?: boolean;
+  focusTab?: TabKey;
 };
 
 function ReplayPreview({
+  buttonProps,
+  eventTimestampMs,
+  focusTab,
   orgSlug,
   replaySlug,
-  eventTimestampMs,
-  buttonProps,
-  fromFeedback,
 }: Props) {
   const routes = useRoutes();
   const {fetching, replay, replayRecord, fetchError, replayId} = useReplayReader({
@@ -122,7 +122,7 @@ function ReplayPreview({
     pathname: normalizeUrl(`/organizations/${orgSlug}/replays/${replayId}/`),
     query: {
       referrer: getRouteStringFromRoutes(routes),
-      t_main: fromFeedback ? TabKey.BREADCRUMBS : TabKey.ERRORS,
+      t_main: focusTab ?? TabKey.ERRORS,
       t: initialTimeOffsetMs / 1000,
     },
   };

+ 4 - 3
static/app/components/feedback/feedbackItem/replaySection.tsx

@@ -7,6 +7,7 @@ import ReplayIdCountProvider from 'sentry/components/replays/replayIdCountProvid
 import {IconPlay} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {Organization} from 'sentry/types';
+import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
 
 interface Props {
   eventTimestampMs: number;
@@ -26,10 +27,10 @@ export default function ReplaySection({eventTimestampMs, organization, replayId}
         <ReplayIdCountProvider organization={organization} replayIds={[replayId]}>
           <LazyLoad
             component={replayPreview}
-            replaySlug={replayId}
-            orgSlug={organization.slug}
             eventTimestampMs={eventTimestampMs}
-            fromFeedback
+            focusTab={TabKey.BREADCRUMBS}
+            orgSlug={organization.slug}
+            replaySlug={replayId}
             buttonProps={{
               analyticsEventKey: 'feedback_details.open_replay_details_clicked',
               analyticsEventName: 'Feedback Details: Open Replay Details Clicked',