From 7b51d440a19580847b6f4d91324fe73b4a59f15a Mon Sep 17 00:00:00 2001
From: nikkikapadia <nikki.kapadia@sentry.io>
Date: Wed, 8 Oct 2025 15:07:16 -0400
Subject: [PATCH] add selection params to explore url in frontend

---
 .../app/views/dashboards/widgetCard/index.tsx |  5 +-
 .../widgetCard/widgetCardContextMenu.tsx      | 65 +++++++++++++++----
 2 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/static/app/views/dashboards/widgetCard/index.tsx b/static/app/views/dashboards/widgetCard/index.tsx
index abe2676ae4563f..d678fde93d631d 100644
--- a/static/app/views/dashboards/widgetCard/index.tsx
+++ b/static/app/views/dashboards/widgetCard/index.tsx
@@ -191,7 +191,10 @@ function WidgetCard(props: Props) {
   const extractionStatus = useExtractionStatus({queryKey: widget});
   const indexedEventsWarning = useIndexedEventsWarning();
   const onDemandWarning = useOnDemandWarning({widget});
-  const transactionsDeprecationWarning = useTransactionsDeprecationWarning({widget});
+  const transactionsDeprecationWarning = useTransactionsDeprecationWarning({
+    widget,
+    selection,
+  });
   const sessionDurationWarning = hasSessionDuration ? SESSION_DURATION_ALERT_TEXT : null;
   const spanTimeRangeWarning = useTimeRangeWarning({widget});
 
diff --git a/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx b/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx
index 1fadddcc6672af..6185116e93bf7c 100644
--- a/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx
+++ b/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx
@@ -1,3 +1,4 @@
+import {useMemo} from 'react';
 import type {Location} from 'history';
 
 import {
@@ -11,6 +12,7 @@ import {t, tct} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {getUtcDateString} from 'sentry/utils/dates';
 import {
   MEPState,
   useMEPSettingContext,
@@ -49,26 +51,63 @@ export const useIndexedEventsWarning = (): string | null => {
 
 export const useTransactionsDeprecationWarning = ({
   widget,
+  selection,
 }: {
+  selection: PageFilters;
   widget: Widget;
 }): React.JSX.Element | null => {
   const organization = useOrganization();
 
-  if (
-    organization.features.includes('transaction-widget-deprecation-explore-view') &&
-    widget.widgetType === WidgetType.TRANSACTIONS &&
-    widget.exploreUrls &&
-    widget.exploreUrls.length > 0
-  ) {
-    return tct(
-      'Transactions widgets are in the process of being migrated to spans widgets. To see what your query could look like, open it in [explore:Explore].',
-      {
-        explore: <Link to={widget.exploreUrls[0]!} />,
-      }
-    );
+  // memoize the URL to avoid recalculating it on every render
+  const exploreUrl = useMemo(() => {
+    if (
+      !organization.features.includes('transaction-widget-deprecation-explore-view') ||
+      widget.widgetType !== WidgetType.TRANSACTIONS ||
+      !widget.exploreUrls ||
+      widget.exploreUrls.length === 0
+    ) {
+      return null;
+    }
+    return createExploreUrl(widget.exploreUrls[0]!, selection);
+  }, [organization.features, widget.widgetType, widget.exploreUrls, selection]);
+
+  if (!exploreUrl) {
+    return null;
+  }
+
+  return tct(
+    'Transactions widgets are in the process of being migrated to spans widgets. To see what your query could look like, open it in [explore:Explore].',
+    {
+      explore: <Link to={exploreUrl} />,
+    }
+  );
+};
+
+const createExploreUrl = (baseUrl: string, selection: PageFilters): string => {
+  const params: string[] = [];
+
+  if (selection.datetime?.start) {
+    params.push(`start=${getUtcDateString(selection.datetime.start)}`);
+  }
+  if (selection.datetime?.end) {
+    params.push(`end=${getUtcDateString(selection.datetime.end)}`);
   }
+  if (selection.datetime?.period) {
+    params.push(`statsPeriod=${selection.datetime.period}`);
+  }
+  if (selection.datetime?.utc) {
+    params.push('utc=true');
+  }
+
+  selection.projects.forEach(project => {
+    params.push(`project=${project}`);
+  });
+
+  selection.environments.forEach(environment => {
+    params.push(`environment=${environment}`);
+  });
 
-  return null;
+  return params.length > 0 ? `${baseUrl}&${params.join('&')}` : baseUrl;
 };
 
 export function getMenuOptions(