From 7a5535fccc163e48597eba3c93d830f147e6c904 Mon Sep 17 00:00:00 2001
From: Evan Purkhiser <evanpurkhiser@gmail.com>
Date: Mon, 26 Aug 2024 10:43:22 -0400
Subject: [PATCH] ref(js): Make performance/trends compatible with react-router
 6 (#76446)

---
 .../trends/changedTransactions.tsx            | 20 +++++++++++--------
 .../views/performance/trends/index.spec.tsx   | 13 ++++++++++--
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/static/app/views/performance/trends/changedTransactions.tsx b/static/app/views/performance/trends/changedTransactions.tsx
index befe52d22ae515..7f806741007c28 100644
--- a/static/app/views/performance/trends/changedTransactions.tsx
+++ b/static/app/views/performance/trends/changedTransactions.tsx
@@ -625,18 +625,22 @@ function TransactionSummaryLink(props: TransactionSummaryLinkProps) {
     },
   });
 
-  const handleClick = useCallback(() => {
-    onTransactionSelection(transaction.transaction);
-    trackAnalytics('performance_views.performance_change_explorer.open', {
-      organization,
-      transaction: transaction.transaction,
-    });
-  }, [onTransactionSelection, transaction.transaction, organization]);
+  const handleClick = useCallback<React.MouseEventHandler>(
+    event => {
+      event.preventDefault();
+      onTransactionSelection(transaction.transaction);
+      trackAnalytics('performance_views.performance_change_explorer.open', {
+        organization,
+        transaction: transaction.transaction,
+      });
+    },
+    [onTransactionSelection, transaction.transaction, organization]
+  );
 
   if (organization.features.includes('performance-change-explorer')) {
     return (
       <ItemTransactionName
-        to=""
+        to={location}
         data-test-id="item-transaction-name"
         onClick={handleClick}
       >
diff --git a/static/app/views/performance/trends/index.spec.tsx b/static/app/views/performance/trends/index.spec.tsx
index 7c2c2a316ed0f6..5aba00dd869c42 100644
--- a/static/app/views/performance/trends/index.spec.tsx
+++ b/static/app/views/performance/trends/index.spec.tsx
@@ -137,6 +137,7 @@ function initializeTrendsData(
     organization,
     router: {
       location: {
+        pathname: '/trends/',
         query: newQuery,
       },
     },
@@ -365,7 +366,10 @@ describe('Performance > Trends', function () {
 
     const summaryLink = within(firstTransaction).getByTestId('item-transaction-name');
 
-    expect(summaryLink.closest('a')).not.toHaveAttribute('href');
+    expect(summaryLink.closest('a')).toHaveAttribute(
+      'href',
+      '/trends/?project=1&query=tpm%28%29%3A%3E0.01%20transaction.duration%3A%3E0%20transaction.duration%3A%3C15min'
+    );
 
     await clickEl(summaryLink);
     await waitFor(() => {
@@ -400,6 +404,7 @@ describe('Performance > Trends', function () {
     await clickEl(menuAction);
 
     expect(browserHistory.push).toHaveBeenCalledWith({
+      pathname: '/trends/',
       query: expect.objectContaining({
         project: expect.anything(),
         query: `tpm():>0.01 transaction.duration:>0 transaction.duration:<${DEFAULT_MAX_DURATION} !transaction:/organizations/:orgId/performance/`,
@@ -424,7 +429,7 @@ describe('Performance > Trends', function () {
 
     await waitFor(() =>
       expect(browserHistory.push).toHaveBeenCalledWith({
-        pathname: undefined,
+        pathname: '/trends/',
         query: expect.objectContaining({
           project: ['1'],
           query: 'transaction.duration:>9000',
@@ -458,6 +463,7 @@ describe('Performance > Trends', function () {
     await clickEl(menuAction);
 
     expect(browserHistory.push).toHaveBeenCalledWith({
+      pathname: '/trends/',
       query: expect.objectContaining({
         project: expect.anything(),
         query: 'tpm():>0.01 transaction.duration:>0 transaction.duration:<=863',
@@ -488,6 +494,7 @@ describe('Performance > Trends', function () {
     await clickEl(menuAction);
 
     expect(browserHistory.push).toHaveBeenCalledWith({
+      pathname: '/trends/',
       query: expect.objectContaining({
         project: expect.anything(),
         query: 'tpm():>0.01 transaction.duration:<15min transaction.duration:>=863',
@@ -517,6 +524,7 @@ describe('Performance > Trends', function () {
       await clickEl(option);
 
       expect(browserHistory.push).toHaveBeenCalledWith({
+        pathname: '/trends/',
         query: expect.objectContaining({
           regressionCursor: undefined,
           improvedCursor: undefined,
@@ -596,6 +604,7 @@ describe('Performance > Trends', function () {
       await clickEl(option);
 
       expect(browserHistory.push).toHaveBeenCalledWith({
+        pathname: '/trends/',
         query: expect.objectContaining({
           trendParameter: parameter.label,
         }),