feat(new-trace): Adding direct routing from components using hard cod… (#71776)

…ed route to old event details page.

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

static/app/views/performance/mobile/components/spanSamplesPanelContainer.tsx

@@ -11,6 +11,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {DurationUnit} from 'sentry/utils/discover/fields';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -175,7 +176,15 @@ export function SpanSamplesContainer({
         transactionMethod={transactionMethod}
         onClickSample={span => {
           router.push(
-            `/performance/${span.project}:${span['transaction.id']}/#span-${span.span_id}`
+            generateLinkToEventInTraceView({
+              eventId: span['transaction.id'],
+              projectSlug: span.project,
+              spanId: span.span_id,
+              location,
+              organization,
+              traceSlug: span.trace,
+              timestamp: span.timestamp,
+            })
           );
         }}
         onMouseOverSample={sample => debounceSetHighlightedSpanId(sample.span_id)}

static/app/views/starfish/components/tableCells/transactionIdCell.tsx

@@ -1,21 +0,0 @@
-import Link from 'sentry/components/links/link';
-import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-
-interface Props {
-  orgSlug: string;
-  projectSlug: string;
-  transactionId: string;
-  spanId?: string;
-}
-
-export function TransactionIdCell({projectSlug, orgSlug, transactionId, spanId}: Props) {
-  let url = normalizeUrl(
-    `/organizations/${orgSlug}/performance/${projectSlug}:${transactionId}`
-  );
-
-  if (spanId) {
-    url += `#span-${spanId}`;
-  }
-
-  return <Link to={url}>{transactionId.slice(0, 8)}</Link>;
-}

static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx

@@ -13,6 +13,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
@@ -80,35 +81,35 @@ export function SampleList({
 
   const organization = useOrganization();
   const {selection} = usePageFilters();
-  const {query} = useLocation();
+  const location = useLocation();
   const {projects} = useProjects();
 
-  const spanSearchQuery = decodeScalar(query.spanSearchQuery);
+  const spanSearchQuery = decodeScalar(location.query.spanSearchQuery);
   const supportedTags = useSpanFieldSupportedTags();
 
   const project = useMemo(
-    () => projects.find(p => p.id === String(query.project)),
-    [projects, query.project]
+    () => projects.find(p => p.id === String(location.query.project)),
+    [projects, location.query.project]
   );
 
   const handleSearch = (newSpanSearchQuery: string) => {
     router.replace({
       pathname: location.pathname,
       query: {
-        ...query,
+        ...location.query,
         spanSearchQuery: newSpanSearchQuery,
       },
     });
   };
 
   const onOpenDetailPanel = useCallback(() => {
-    if (query.transaction) {
+    if (location.query.transaction) {
       trackAnalytics('performance_views.sample_spans.opened', {
         organization,
         source: moduleName,
       });
     }
-  }, [organization, query.transaction, moduleName]);
+  }, [organization, location.query.transaction, moduleName]);
 
   const label =
     transactionMethod && !transactionName.startsWith(transactionMethod)
@@ -117,15 +118,18 @@ export function SampleList({
 
   const link = normalizeUrl(
     `/organizations/${organization.slug}${transactionRoute}?${qs.stringify({
-      project: query.project,
+      project: location.query.project,
       transaction: transactionName,
     })}`
   );
 
   // set additional query filters from the span search bar and the `query` param
   const spanSearch = new MutableSearch(spanSearchQuery ?? '');
-  if (query.query) {
-    (Array.isArray(query.query) ? query.query : [query.query]).forEach(filter => {
+  if (location.query.query) {
+    (Array.isArray(location.query.query)
+      ? location.query.query
+      : [location.query.query]
+    ).forEach(filter => {
       spanSearch.addStringFilter(filter);
     });
   }
@@ -209,7 +213,15 @@ export function SampleList({
           additionalFields={additionalFields}
           onClickSample={span => {
             router.push(
-              `/performance/${span.project}:${span['transaction.id']}/#span-${span.span_id}`
+              generateLinkToEventInTraceView({
+                eventId: span['transaction.id'],
+                projectSlug: span.project,
+                spanId: span.span_id,
+                location,
+                organization,
+                traceSlug: span.trace,
+                timestamp: span.timestamp,
+              })
             );
           }}
           onMouseOverSample={sample => debounceSetHighlightedSpanId(sample.span_id)}