ref: Refactor fetchTagValues() and allow fetching from Replay dataset (#40679)

Let `fetchTagValues()` pass the `includeReplays` query param to the
backend, and a slight refactor to the args.

Depends on https://github.com/getsentry/sentry/pull/40678

Will be put to use in https://github.com/getsentry/sentry/pull/40683

static/app/actionCreators/tags.tsx

@@ -78,18 +78,30 @@ export function fetchOrganizationTags(
  * Fetch tag values for an organization.
  * The `projectIds` argument can be used to subset projects.
  */
-export function fetchTagValues(
-  api: Client,
-  orgId: string,
-  tagKey: string,
-  search: string | null = null,
-  projectIds: string[] | null = null,
-  endpointParams: Query | null = null,
-  includeTransactions = false,
-  includeSessions = false,
-  sort: string | null = null
-) {
-  const url = `/organizations/${orgId}/tags/${tagKey}/values/`;
+export function fetchTagValues({
+  api,
+  orgSlug,
+  tagKey,
+  endpointParams,
+  includeReplays,
+  includeSessions,
+  includeTransactions,
+  projectIds,
+  search,
+  sort,
+}: {
+  api: Client;
+  orgSlug: string;
+  tagKey: string;
+  endpointParams?: Query;
+  includeReplays?: boolean;
+  includeSessions?: boolean;
+  includeTransactions?: boolean;
+  projectIds?: string[];
+  search?: string;
+  sort?: string;
+}) {
+  const url = `/organizations/${orgSlug}/tags/${tagKey}/values/`;
 
   const query: Query = {};
   if (search) {
@@ -109,6 +121,7 @@ export function fetchTagValues(
       query.statsPeriod = endpointParams.statsPeriod;
     }
   }
+
   if (includeTransactions) {
     query.includeTransactions = '1';
   }
@@ -117,6 +130,10 @@ export function fetchTagValues(
     query.includeSessions = '1';
   }
 
+  if (includeReplays) {
+    query.includeReplays = '1';
+  }
+
   if (sort) {
     query.sort = sort;
   }

static/app/components/events/searchBar.tsx

@@ -140,20 +140,18 @@ function SearchBar(props: SearchBarProps) {
         return Promise.resolve([]);
       }
 
-      return fetchTagValues(
+      return fetchTagValues({
         api,
-        organization.slug,
-        tag.key,
-        query,
-        projectIdStrings,
+        orgSlug: organization.slug,
+        tagKey: tag.key,
+        search: query,
+        projectIds: projectIdStrings,
         endpointParams,
-
         // allows searching for tags on transactions as well
-        true,
-
+        includeTransactions: true,
         // allows searching for tags on sessions as well
-        includeSessionTagsValues
-      ).then(
+        includeSessions: includeSessionTagsValues,
+      }).then(
         results =>
           flatten(results.filter(({name}) => defined(name)).map(({name}) => name)),
         () => {

static/app/views/dashboardsV2/widgetBuilder/buildSteps/filterResultsStep/releaseSearchBar.tsx

@@ -51,15 +51,14 @@ export function ReleaseSearchBar({
       return Promise.resolve(SESSION_STATUSES);
     }
     const projectIdStrings = projectIds?.map(String);
-    return fetchTagValues(
+    return fetchTagValues({
       api,
       orgSlug,
-      tag.key,
-      searchQuery,
-      projectIdStrings,
-      undefined,
-      true
-    ).then(
+      tagKey: tag.key,
+      search: searchQuery,
+      projectIds: projectIdStrings,
+      includeTransactions: true,
+    }).then(
       tagValues => (tagValues as TagValue[]).map(({value}) => value),
       () => {
         throw new Error('Unable to fetch tag values');

static/app/views/issueList/overview.tsx

@@ -1115,14 +1115,14 @@ class IssueListOverview extends Component<Props, State> {
     const projectIds = this.getSelectedProjectIds();
     const endpointParams = this.getEndpointParams();
 
-    return fetchTagValues(
-      this.props.api,
-      orgId,
-      key,
+    return fetchTagValues({
+      api: this.props.api,
+      orgSlug: orgId,
+      tagKey: key,
       search,
       projectIds,
-      endpointParams as any
-    );
+      endpointParams: endpointParams as any,
+    });
   };
 
   render() {

static/app/views/issueList/searchBar.tsx

@@ -35,7 +35,7 @@ function IssueListSearchBar({organization, tags, ...props}: Props) {
 
   const tagValueLoader = useCallback(
     (key: string, search: string) => {
-      const orgId = organization.slug;
+      const orgSlug = organization.slug;
       const projectIds = pageFilters.projects.map(id => id.toString());
       const endpointParams = {
         start: getUtcDateString(pageFilters.datetime.start),
@@ -43,7 +43,14 @@ function IssueListSearchBar({organization, tags, ...props}: Props) {
         statsPeriod: pageFilters.datetime.period,
       };
 
-      return fetchTagValues(api, orgId, key, search, projectIds, endpointParams);
+      return fetchTagValues({
+        api,
+        orgSlug,
+        tagKey: key,
+        search,
+        projectIds,
+        endpointParams,
+      });
     },
     [
       api,

static/app/views/projectDetail/projectDetail.tsx

@@ -110,14 +110,14 @@ class ProjectDetail extends AsyncView<Props, State> {
     const {location, organization} = this.props;
     const {project: projectId} = location.query;
 
-    return fetchTagValues(
-      this.api,
-      organization.slug,
-      key,
+    return fetchTagValues({
+      api: this.api,
+      orgSlug: organization.slug,
+      tagKey: key,
       search,
-      projectId ? [projectId] : null,
-      location.query
-    );
+      projectIds: projectId ? [projectId] : undefined,
+      endpointParams: location.query,
+    });
   };
 
   syncProjectWithSlug() {

static/app/views/releases/list/index.tsx

@@ -260,14 +260,14 @@ class ReleasesList extends AsyncView<Props, State> {
     const {location, organization} = this.props;
     const {project: projectId} = location.query;
 
-    return fetchTagValues(
-      this.api,
-      organization.slug,
-      key,
+    return fetchTagValues({
+      api: this.api,
+      orgSlug: organization.slug,
+      tagKey: key,
       search,
-      projectId ? [projectId] : null,
-      location.query
-    );
+      projectIds: projectId ? [projectId] : undefined,
+      endpointParams: location.query,
+    });
   };
 
   getTagValues = async (tag: Tag, currentQuery: string): Promise<string[]> => {

static/app/views/settings/project/server-side-sampling/modals/specificConditionsModal/tagValueAutocomplete.tsx

@@ -50,17 +50,15 @@ function TagValueAutocomplete({
     }
 
     return resolve(
-      await fetchTagValues(
+      await fetchTagValues({
         api,
         orgSlug,
         tagKey,
-        inputValue,
-        [projectId],
-        null,
-        true,
-        undefined,
-        '-count'
-      )
+        search: inputValue,
+        projectIds: [projectId],
+        includeTransactions: true,
+        sort: '-count',
+      })
     );
   }, 250);