fix(spans-migration): add selection params to explore url in frontend (#101185)

add the page params to the transaction widget warning urls on the
frontend so they can see the same thing if they haven't submitted their
dashboard filters. NOTE: i noticed that now the entire dashboard reloads
when changing dashboard filters because the urls have to be re-rendered.
This kinda sucks but it will be temporary

Author: nikkikapadia

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});
 

static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx

@@ -1,4 +1,6 @@
+import {useMemo} from 'react';
 import type {Location} from 'history';
+import qs from 'query-string';
 
 import {
   openAddToDashboardModal,
@@ -15,6 +17,7 @@ import {
   MEPState,
   useMEPSettingContext,
 } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
+import {safeURL} from 'sentry/utils/url/safeURL';
 import useOrganization from 'sentry/utils/useOrganization';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DashboardWidgetSource, WidgetType} from 'sentry/views/dashboards/types';
@@ -31,6 +34,7 @@ import {
 } from 'sentry/views/dashboards/utils/getWidgetExploreUrl';
 import {getReferrer} from 'sentry/views/dashboards/widgetCard/genericWidgetQueries';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
+import {getExploreUrl} from 'sentry/views/explore/utils';
 
 import {useDashboardsMEPContext} from './dashboardsMEPContext';
 
@@ -49,26 +53,57 @@ 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);
+  }, [organization, widget.widgetType, widget.exploreUrls, selection]);
+
+  if (!exploreUrl) {
+    return null;
   }
 
-  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,
+  organization: Organization
+): string => {
+  const parsedUrl = safeURL(baseUrl);
+  const queryParams = qs.parse(parsedUrl?.search ?? '');
+
+  if (queryParams.aggregateField) {
+    // we need to parse the aggregateField because it comes in stringified but needs to be passed in JSON format
+    if (typeof queryParams.aggregateField === 'string') {
+      queryParams.aggregateField = JSON.parse(queryParams.aggregateField);
+    } else if (Array.isArray(queryParams.aggregateField)) {
+      queryParams.aggregateField = queryParams.aggregateField.map(item =>
+        JSON.parse(item)
+      );
+    }
+  }
+  return getExploreUrl({organization, selection, ...queryParams});
 };
 
 export function getMenuOptions(