feat(discover): allows searching for custom perf metrics in discover search bar (#38210)

Adds custom performance metrics to discover searchable fields

static/app/components/events/searchBar.tsx

@@ -9,6 +9,7 @@ import SmartSearchBar from 'sentry/components/smartSearchBar';
 import {NEGATION_OPERATOR, SEARCH_WILDCARD} from 'sentry/constants';
 import {Organization, SavedSearchType, Tag, TagCollection} from 'sentry/types';
 import {defined} from 'sentry/utils';
+import {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements';
 import {
   Field,
   FIELD_TAGS,
@@ -87,6 +88,7 @@ const getSemverTags = () =>
 export type SearchBarProps = Omit<React.ComponentProps<typeof SmartSearchBar>, 'tags'> & {
   organization: Organization;
   tags: TagCollection;
+  customMeasurements?: CustomMeasurementCollection;
   fields?: Readonly<Field[]>;
   includeSessionTagsValues?: boolean;
   /**
@@ -108,6 +110,7 @@ function SearchBar(props: SearchBarProps) {
     projectIds,
     includeSessionTagsValues,
     maxMenuHeight,
+    customMeasurements,
   } = props;
 
   const api = useApi();
@@ -206,7 +209,7 @@ function SearchBar(props: SearchBarProps) {
           hasRecentSearches
           savedSearchType={SavedSearchType.EVENT}
           onGetTagValues={getEventFieldValues}
-          supportedTags={getTagList(measurements)}
+          supportedTags={getTagList({...measurements, ...(customMeasurements ?? {})})}
           prepareQuery={query => {
             // Prepare query string (e.g. strip special characters like negation operator)
             return query.replace(SEARCH_SPECIAL_CHARS_REGEXP, '');

static/app/views/eventsV2/results.tsx

@@ -32,6 +32,7 @@ import space from 'sentry/styles/space';
 import {Organization, PageFilters, SavedQuery} from 'sentry/types';
 import {defined, generateQueryWithTag} from 'sentry/utils';
 import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import {CustomMeasurementsContext} from 'sentry/utils/customMeasurements/customMeasurementsContext';
 import {CustomMeasurementsProvider} from 'sentry/utils/customMeasurements/customMeasurementsProvider';
 import EventView, {isAPIPayloadSimilar} from 'sentry/utils/discover/eventView';
 import {formatTagKey, generateAggregateFields} from 'sentry/utils/discover/fields';
@@ -532,15 +533,20 @@ class Results extends Component<Props, State> {
                     <EnvironmentPageFilter />
                     <DatePageFilter alignDropdown="left" />
                   </StyledPageFilterBar>
-                  <StyledSearchBar
+                  <CustomMeasurementsContext.Consumer>
-                    searchSource="eventsv2"
+                    {contextValue => (
-                    organization={organization}
+                      <StyledSearchBar
-                    projectIds={eventView.project}
+                        searchSource="eventsv2"
-                    query={query}
+                        organization={organization}
-                    fields={fields}
+                        projectIds={eventView.project}
-                    onSearch={this.handleSearch}
+                        query={query}
-                    maxQueryLength={MAX_QUERY_LENGTH}
+                        fields={fields}
-                  />
+                        onSearch={this.handleSearch}
+                        maxQueryLength={MAX_QUERY_LENGTH}
+                        customMeasurements={contextValue?.customMeasurements ?? undefined}
+                      />
+                    )}
+                  </CustomMeasurementsContext.Consumer>
                   <ResultsChart
                     router={router}
                     organization={organization}

tests/js/spec/components/events/searchBar.spec.jsx

@@ -1,5 +1,6 @@
 import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import SearchBar from 'sentry/components/events/searchBar';
 import TagStore from 'sentry/stores/tagStore';
@@ -340,4 +341,27 @@ describe('Events > SearchBar', function () {
 
     expect(emptyTagValuesMock).toHaveBeenCalledTimes(2);
   });
+
+  it('searches for custom measurements', async function () {
+    const initializationObj = initializeOrg({
+      organization: {
+        features: ['performance-view'],
+      },
+    });
+    props.organization = initializationObj.organization;
+    render(
+      <SearchBar
+        {...props}
+        customMeasurements={{
+          'measurements.custom.ratio': {
+            key: 'measurements.custom.ratio',
+            name: 'measurements.custom.ratio',
+          },
+        }}
+      />
+    );
+    userEvent.type(screen.getByRole('textbox'), 'custom');
+    expect(await screen.findByText('measurements')).toBeInTheDocument();
+    expect(screen.getByText(/\.ratio/)).toBeInTheDocument();
+  });
 });