ref(js): Make spanEvidenceKeyValueList compatible wit react-router 6 (#76416)

static/app/components/events/eventStatisticalDetector/eventComparison/eventDisplay.spec.tsx

@@ -146,7 +146,7 @@ describe('eventDisplay', () => {
 
     expect(
       await screen.findByRole('button', {name: 'Full Event Details'})
-    ).toHaveAttribute('href', '/organizations/org-slug/performance/project-slug:1/?');
+    ).toHaveAttribute('href', '/organizations/org-slug/performance/project-slug:1/');
   });
 
   it('allows for pagination if there are more events loaded', async () => {

static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx

@@ -71,7 +71,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Parent Span'})).toBeInTheDocument();
       expect(
@@ -146,7 +146,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Parent Span'})).toBeInTheDocument();
       expect(
@@ -221,7 +221,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Parent Span'})).toBeInTheDocument();
       expect(
@@ -306,7 +306,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Starting Span'})).toBeInTheDocument();
       expect(
@@ -450,7 +450,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Repeating Spans (2)'})).toBeInTheDocument();
       expect(
@@ -604,7 +604,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Slow DB Query'})).toBeInTheDocument();
       expect(
@@ -658,7 +658,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Slow Resource Span'})).toBeInTheDocument();
       expect(
@@ -723,7 +723,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(screen.getByRole('cell', {name: 'Slow Resource Span'})).toBeInTheDocument();
       expect(
@@ -824,7 +824,7 @@ describe('SpanEvidenceKeyValueList', () => {
         screen.getByRole('button', {
           name: /view full event/i,
         })
-      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/?');
+      ).toHaveAttribute('href', '/organizations/org-slug/performance/project:a1/');
 
       expect(
         screen.getByRole('cell', {name: 'Large HTTP Payload Span'})

static/app/utils/performance/urls.ts

@@ -27,7 +27,7 @@ export function getTransactionDetailsUrl(
     delete locationQuery.transaction;
   }
 
-  const target = {
+  const target: LocationDescriptor = {
     pathname: normalizeUrl(`/organizations/${orgSlug}/performance/${eventSlug}/`),
     query: locationQuery,
     hash: defined(spanId) ? spanTargetHash(spanId) : undefined,
@@ -35,6 +35,9 @@ export function getTransactionDetailsUrl(
   if (!defined(target.hash)) {
     delete target.hash;
   }
+  if (target.query && Object.keys(target.query).length === 0) {
+    delete target.query;
+  }
 
   return target;
 }

static/app/views/insights/mobile/appStarts/components/eventSamples.spec.tsx

@@ -103,7 +103,7 @@ describe('ScreenLoadEventSamples', function () {
     // Transaction is a link
     expect(await screen.findByRole('link', {name: '76af98a3'})).toHaveAttribute(
       'href',
-      '/organizations/org-slug/performance/sentry-cocoa:76af98a3ac9d4448b894e44b1819970e/?'
+      '/organizations/org-slug/performance/sentry-cocoa:76af98a3ac9d4448b894e44b1819970e/'
     );
 
     // Profile is a button

static/app/views/insights/mobile/screenload/components/eventSamples.spec.tsx

@@ -104,7 +104,7 @@ describe('ScreenLoadEventSamples', function () {
     // Transaction is a link
     expect(await screen.findByRole('link', {name: '4142de70'})).toHaveAttribute(
       'href',
-      '/organizations/org-slug/performance/project1:4142de70494989c04f023ce1727ac856f31b7f92/?'
+      '/organizations/org-slug/performance/project1:4142de70494989c04f023ce1727ac856f31b7f92/'
     );
 
     // Profile is a button