bug(replays): Do not double-encode replay `?referrer=` query param
diff --git a/static/app/components/events/eventReplay/replayContent.spec.tsx b/static/app/components/events/eventReplay/replayContent.spec.tsx
index 90ba09c9e61d82..f9b1f69302ff54 100644
--- a/static/app/components/events/eventReplay/replayContent.spec.tsx
+++ b/static/app/components/events/eventReplay/replayContent.spec.tsx
@@ -22,7 +22,7 @@ const mockEvent = {
 };
 
 const mockButtonHref =
-  '/organizations/sentry-emerging-tech/replays/replays:761104e184c64d439ee1014b72b4d83b/?referrer=%252Forganizations%252F%253AorgId%252Fissues%252F%253AgroupId%252Freplays%252F&t=62&t_main=console';
+  '/organizations/sentry-emerging-tech/replays/replays:761104e184c64d439ee1014b72b4d83b/?referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&t=62&t_main=console';
 
 // Mock screenfull library
 jest.mock('screenfull', () => ({
diff --git a/static/app/components/events/eventReplay/replayContent.tsx b/static/app/components/events/eventReplay/replayContent.tsx
index 213e7baeeb0118..01f56b3a1b0ffe 100644
--- a/static/app/components/events/eventReplay/replayContent.tsx
+++ b/static/app/components/events/eventReplay/replayContent.tsx
@@ -62,7 +62,7 @@ function ReplayContent({orgSlug, replaySlug, event}: Props) {
   const fullReplayUrl = {
     pathname: `/organizations/${orgSlug}/replays/${replaySlug}/`,
     query: {
-      referrer: encodeURIComponent(getRouteStringFromRoutes(routes)),
+      referrer: getRouteStringFromRoutes(routes),
       t_main: 'console',
       t: initialTimeOffset,
     },
diff --git a/static/app/views/eventsV2/table/tableView.tsx b/static/app/views/eventsV2/table/tableView.tsx
index 01ec26ff0b2841..c1634109c81f13 100644
--- a/static/app/views/eventsV2/table/tableView.tsx
+++ b/static/app/views/eventsV2/table/tableView.tsx
@@ -305,10 +305,10 @@ class TableView extends Component<TableViewProps & WithRouterProps> {
     } else if (columnKey === 'replayId') {
       if (dataRow.replayId) {
         const replaySlug = `${dataRow['project.name']}:${dataRow.replayId}`;
-        const referrer = encodeURIComponent(getRouteStringFromRoutes(this.props.routes));
+        const referrer = getRouteStringFromRoutes(this.props.routes);
 
         const target = {
-          pathname: `/organizations/${organization.slug}/replays/${replaySlug}`,
+          pathname: `/organizations/${organization.slug}/replays/${replaySlug}/`,
           query: {
             referrer,
           },
diff --git a/static/app/views/performance/transactionSummary/utils.tsx b/static/app/views/performance/transactionSummary/utils.tsx
index 026e94f2b6d026..6c7ced4b519c19 100644
--- a/static/app/views/performance/transactionSummary/utils.tsx
+++ b/static/app/views/performance/transactionSummary/utils.tsx
@@ -147,11 +147,11 @@ export function generateReplayLink(routes: PlainRoute<any>[]) {
     }
 
     const replaySlug = `${tableRow['project.name']}:${replayId}`;
-    const referrer = encodeURIComponent(getRouteStringFromRoutes(routes));
+    const referrer = getRouteStringFromRoutes(routes);
 
     if (!tableRow.timestamp) {
       return {
-        pathname: `/organizations/${organization.slug}/replays/${replaySlug}`,
+        pathname: `/organizations/${organization.slug}/replays/${replaySlug}/`,
         query: {
           referrer,
         },
@@ -164,7 +164,7 @@ export function generateReplayLink(routes: PlainRoute<any>[]) {
       transactionTimestamp - (tableRow['transaction.duration'] as number);
 
     return {
-      pathname: `/organizations/${organization.slug}/replays/${replaySlug}`,
+      pathname: `/organizations/${organization.slug}/replays/${replaySlug}/`,
       query: {
         event_t: transactionStartTimestamp,
         referrer,
diff --git a/static/app/views/replays/replayTable.tsx b/static/app/views/replays/replayTable.tsx
index fa12af5ff76a7b..fff968297a4ccb 100644
--- a/static/app/views/replays/replayTable.tsx
+++ b/static/app/views/replays/replayTable.tsx
@@ -100,7 +100,7 @@ function ReplayTable({
   showSlowestTxColumn = false,
 }: Props) {
   const routes = useRoutes();
-  const referrer = encodeURIComponent(getRouteStringFromRoutes(routes));
+  const referrer = getRouteStringFromRoutes(routes);
 
   const organization = useOrganization();
   const theme = useTheme();
@@ -222,7 +222,12 @@ function ReplayTableRow({
         avatarSize={32}
         displayName={
           <Link
-            to={`/organizations/${organization.slug}/replays/${project?.slug}:${replay.id}/?referrer=${referrer}`}
+            to={{
+              pathname: `/organizations/${organization.slug}/replays/${project?.slug}:${replay.id}/`,
+              query: {
+                referrer,
+              },
+            }}
           >
             {replay.user.displayName || ''}
           </Link>

Before we would manually call `encodeURIComponent` and then also render `<Link>` with a `LocationDescriptorObject`. 
When you use a LocationDescriptorObject all query params are automatically uri encoded. The result is that our urls were double-encoded and looked like this:

<img width="413" alt="url - before" src="https://user-images.githubusercontent.com/187460/197599503-fa0674bc-5ae1-40db-a896-fe74ee986266.png">


Notice the `%252f`

When we logged the data, before, we would log the url encoded string:

<img width="736" alt="log - before" src="https://user-images.githubusercontent.com/187460/197599515-7ed8822d-be3e-468d-9802-0492a4ac8297.png">


Going forward we can use LocationDescriptorObject in all the places, and not call encodeURIComponent manually.

Fixed: 
<img width="485" alt="url - after" src="https://user-images.githubusercontent.com/187460/197599436-0b725eb4-11dd-471a-bdd6-168eef222ee1.png">

<img width="822" alt="log - after" src="https://user-images.githubusercontent.com/187460/197599456-27c30bf9-9ae5-4d2e-85b0-bd22d47957b5.png">

Fixes #39706