feat(sampling): Add counts to the tag value autocomplete [TET-206] (#36852)

static/app/actionCreators/tags.tsx

@@ -86,7 +86,8 @@ export function fetchTagValues(
   projectIds: string[] | null = null,
   endpointParams: Query | null = null,
   includeTransactions = false,
-  includeSessions = false
+  includeSessions = false,
+  sort: string | null = null
 ) {
   const url = `/organizations/${orgId}/tags/${tagKey}/values/`;
 
@@ -116,6 +117,10 @@ export function fetchTagValues(
     query.includeSessions = '1';
   }
 
+  if (sort) {
+    query.sort = sort;
+  }
+
   return api.requestPromise(url, {
     method: 'GET',
     query,

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

@@ -3,18 +3,20 @@ import {components, MultiValueProps} from 'react-select';
 import styled from '@emotion/styled';
 
 import {fetchTagValues} from 'sentry/actionCreators/tags';
+import Count from 'sentry/components/count';
 import SelectField from 'sentry/components/forms/selectField';
 import {t} from 'sentry/locale';
-import {Organization, Project} from 'sentry/types';
+import {Organization, Project, TagValue as IssueTagValue} from 'sentry/types';
 import {SamplingInnerName} from 'sentry/types/sampling';
 import useApi from 'sentry/utils/useApi';
 
 import {TruncatedLabel} from './truncatedLabel';
 import {formatCreateTagLabel, getMatchFieldPlaceholder} from './utils';
 
-type Tag = {
-  value: string;
-};
+type TagValue = Pick<
+  IssueTagValue,
+  'key' | 'name' | 'value' | 'count' | 'lastSeen' | 'firstSeen'
+>;
 
 export interface TagValueAutocompleteProps {
   category:
@@ -37,7 +39,7 @@ function TagValueAutocomplete({
   tagKey,
 }: TagValueAutocompleteProps) {
   const api = useApi();
-  const [tagValues, setTagValues] = useState<Tag[]>([]);
+  const [tagValues, setTagValues] = useState<TagValue[]>([]);
 
   function getAriaLabel() {
     switch (category) {
@@ -63,7 +65,9 @@ function TagValueAutocomplete({
         null,
         [projectId],
         null,
-        true
+        true,
+        undefined,
+        '-count'
       );
       setTagValues(response);
     } catch {
@@ -77,20 +81,28 @@ function TagValueAutocomplete({
 
   // react-select doesn't seem to work very well when its value contains
   // a created item that isn't listed in the options
-  const createdOptions: Tag[] = !value
+  const createdOptions: TagValue[] = !value
     ? []
     : value
         .split('\n')
         .filter(v => !tagValues.some(tagValue => tagValue.value === v))
-        .map(v => ({value: v}));
+        .map(v => ({
+          value: v,
+          name: v,
+          key: tagKey,
+          count: 0,
+          firstSeen: '',
+          lastSeen: '',
+        }));
 
   return (
     <StyledSelectField
       name="match"
       aria-label={getAriaLabel()}
-      options={[...createdOptions, ...tagValues].map(tagValue => ({
+      options={[...tagValues, ...createdOptions].map(tagValue => ({
         value: tagValue.value,
         label: <TruncatedLabel value={tagValue.value} />,
+        trailingItems: <StyledCount value={tagValue.count} />,
       }))}
       value={value?.split('\n')}
       onChange={newValue => {
@@ -133,4 +145,8 @@ const StyledSelectField = styled(SelectField)`
   width: 100%;
 `;
 
+const StyledCount = styled(Count)`
+  color: ${p => p.theme.subText};
+`;
+
 export {TagValueAutocomplete};

tests/js/spec/views/settings/project/server-side-sampling/modals/specificConditionsModal.spec.tsx

@@ -26,7 +26,7 @@ describe('Server-side Sampling - Specific Conditions Modal', function () {
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/tags/release/values/',
       method: 'GET',
-      body: [{value: '1.2.3'}],
+      body: [{value: '1.2.3', count: 97}],
     });
 
     const {organization, project} = getMockData({
@@ -125,10 +125,13 @@ describe('Server-side Sampling - Specific Conditions Modal', function () {
     expect(screen.queryByText(textWithMarkupMatcher('Add " "'))).not.toBeInTheDocument();
 
     // Type the release version into release field
-    userEvent.paste(screen.getByLabelText('Search or add a release'), '1.2.3');
+    userEvent.paste(screen.getByLabelText('Search or add a release'), '1.2');
 
     // Autocomplete suggests options
-    expect(screen.getByTestId('1.2.3')).toHaveTextContent('1.2.3');
+    expect(await screen.findByTestId('1.2.3')).toHaveTextContent('1.2.3');
+
+    // Assert that we display the counts of tag values
+    expect(screen.getByText(97)).toBeInTheDocument();
 
     // Click on the suggested option
     userEvent.click(screen.getByTestId('1.2.3'));