fix(new-trace): Loading trace from sample txn. (#70798)

We walked away from spreading `location.query` to the trace route and
pass every param we need as destructured props to
`generateLinkToEventInTraceView`. We forgot to add `demo` to the list.

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/utils/discover/urls.tsx

@@ -51,6 +51,7 @@ export function generateLinkToEventInTraceView({
   eventId,
   transactionName,
   eventView,
+  demo,
   type = 'performance',
 }: {
   eventId: string;
@@ -59,6 +60,7 @@ export function generateLinkToEventInTraceView({
   projectSlug: string;
   timestamp: string | number;
   traceSlug: string;
+  demo?: string;
   eventView?: EventView;
   isHomepage?: boolean;
   spanId?: string;
@@ -77,7 +79,8 @@ export function generateLinkToEventInTraceView({
       dateSelection,
       normalizedTimestamp,
       eventId,
-      spanId
+      spanId,
+      demo
     );
   }
 

static/app/views/performance/newTraceDetails/traceApi/useTrace.tsx

@@ -171,18 +171,15 @@ function useDemoTrace(
     }
   );
 
-  // Without the useMemo, the demoTraceQueryResults will be re-created on every render,
+  // Without the useMemo, the trace from the transformed response  will be re-created on every render,
   // causing the trace view to re-render as we interact with it.
-  const demoTraceQueryResults = useMemo(() => {
-    return {
-      ...demoEventQuery,
-      data: makeTraceFromTransaction(demoEventQuery.data),
-    };
-  }, [demoEventQuery]);
+  const data = useMemo(() => {
+    return makeTraceFromTransaction(demoEventQuery.data);
+  }, [demoEventQuery.data]);
 
   // Casting here since the 'select' option is not available in the useApiQuery hook to transform the data
   // from EventTransaction to TraceSplitResults<TraceFullDetailed>
-  return demoTraceQueryResults as UseApiQueryResult<
+  return {...demoEventQuery, data} as UseApiQueryResult<
     TraceSplitResults<TraceFullDetailed> | undefined,
     any
   >;

static/app/views/performance/onboarding.tsx

@@ -194,17 +194,12 @@ function Onboarding({organization, project}: Props) {
               browserHistory.push(
                 generateLinkToEventInTraceView({
                   eventId: eventData.eventID,
+                  location,
                   projectSlug: project.slug,
                   organization,
-                  location: {
-                    ...location,
-                    query: {
-                      ...location.query,
-                      demo: `${project.slug}:${eventData.eventID}`,
-                    },
-                  },
                   timestamp: eventData.endTimestamp,
                   traceSlug,
+                  demo: `${project.slug}:${eventData.eventID}`,
                 })
               );
               clearIndicators();

static/app/views/performance/traceDetails/utils.tsx

@@ -22,7 +22,8 @@ export function getTraceDetailsUrl(
   dateSelection,
   timestamp?: string | number,
   eventId?: string,
-  spanId?: string
+  spanId?: string,
+  demo?: string
 ): LocationDescriptorObject {
   const {start, end, statsPeriod} = dateSelection;
 
@@ -44,6 +45,7 @@ export function getTraceDetailsUrl(
         ...queryParams,
         timestamp: getTimeStampFromTableDateField(timestamp),
         eventId,
+        demo,
       },
     };
   }