feat(performance): Use new search bar in web vitals pages (#82440)

Author: malwilley

static/app/components/performance/transactionSearchQueryBuilder.tsx

@@ -34,7 +34,7 @@ interface TransactionSearchQueryBuilderProps {
   filterKeyMenuWidth?: number;
   onSearch?: (query: string, state: CallbackSearchState) => void;
   placeholder?: string;
-  projects?: PageFilters['projects'];
+  projects?: PageFilters['projects'] | Readonly<number[]>;
   trailingItems?: React.ReactNode;
 }
 

static/app/views/performance/transactionSummary/transactionVitals/content.tsx

@@ -5,13 +5,13 @@ import type {Location} from 'history';
 import {Alert} from 'sentry/components/alert';
 import {Button} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
-import SearchBar from 'sentry/components/events/searchBar';
 import * as Layout from 'sentry/components/layouts/thirds';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
+import {TransactionSearchQueryBuilder} from 'sentry/components/performance/transactionSearchQueryBuilder';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
@@ -92,13 +92,14 @@ function VitalsContent(props: Props) {
                       <EnvironmentPageFilter />
                       <DatePageFilter />
                     </PageFilterBar>
-                    <StyledSearchBar
-                      organization={organization}
-                      projectIds={eventView.project}
-                      query={query}
-                      fields={eventView.fields}
-                      onSearch={handleSearch}
-                    />
+                    <StyledSearchBarWrapper>
+                      <TransactionSearchQueryBuilder
+                        projects={eventView.project}
+                        initialQuery={query}
+                        onSearch={handleSearch}
+                        searchSource="transaction_events"
+                      />
+                    </StyledSearchBarWrapper>
                     <CompactSelect
                       value={activeFilter.value}
                       options={FILTER_OPTIONS}
@@ -157,10 +158,10 @@ const FilterActions = styled('div')`
   }
 `;
 
-const StyledSearchBar = styled(SearchBar)`
+const StyledSearchBarWrapper = styled('div')`
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     order: 1;
-    grid-column: 1/5;
+    grid-column: 1/6;
   }
 
   @media (min-width: ${p => p.theme.breakpoints.xlarge}) {

static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx

@@ -175,6 +175,10 @@ describe('Performance > Web Vitals', function () {
       url: '/organizations/org-slug/replay-count/',
       body: {},
     });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/recent-searches/',
+      body: [],
+    });
   });
 
   afterEach(() => {

static/app/views/performance/vitalDetail/index.spec.tsx

@@ -2,7 +2,13 @@ import {MetricsFieldFixture} from 'sentry-fixture/metrics';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  screen,
+  userEvent,
+  waitFor,
+  within,
+} from 'sentry-test/reactTestingLibrary';
 import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -224,7 +230,9 @@ describe('Performance > VitalDetail', function () {
     });
 
     // It shows a search bar
-    expect(await screen.findByLabelText('Search events')).toBeInTheDocument();
+    expect(
+      await screen.findByPlaceholderText('Search for events, users, tags, and more')
+    ).toBeInTheDocument();
 
     // It shows the vital card
     expect(
@@ -249,12 +257,17 @@ describe('Performance > VitalDetail', function () {
     });
 
     // Fill out the search box, and submit it.
-    await userEvent.click(await screen.findByLabelText('Search events'));
+    await userEvent.click(
+      await screen.findByPlaceholderText('Search for events, users, tags, and more')
+    );
     await userEvent.paste('user.email:uhoh*');
     await userEvent.keyboard('{enter}');
 
     // Check the navigation.
-    expect(browserHistory.push).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(browserHistory.push).toHaveBeenCalledTimes(1);
+    });
+
     expect(browserHistory.push).toHaveBeenCalledWith({
       pathname: undefined,
       query: {

static/app/views/performance/vitalDetail/vitalDetailContent.tsx

@@ -11,7 +11,6 @@ import {getInterval} from 'sentry/components/charts/utils';
 import {CreateAlertFromViewButton} from 'sentry/components/createAlertButton';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
-import SearchBar from 'sentry/components/events/searchBar';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
@@ -20,6 +19,7 @@ import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import * as TeamKeyTransactionManager from 'sentry/components/performance/teamKeyTransactionsManager';
+import {TransactionSearchQueryBuilder} from 'sentry/components/performance/transactionSearchQueryBuilder';
 import {IconCheckmark, IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -176,7 +176,7 @@ function VitalDetailContent(props: Props) {
   function renderContent(vital: WebVital) {
     const {location, organization, eventView, projects} = props;
 
-    const {fields, start, end, statsPeriod, environment, project} = eventView;
+    const {start, end, statsPeriod, environment, project} = eventView;
 
     const query = decodeScalar(location.query.query, '');
     const orgSlug = organization.slug;
@@ -197,14 +197,14 @@ function VitalDetailContent(props: Props) {
             <EnvironmentPageFilter />
             <DatePageFilter />
           </PageFilterBar>
-          <SearchBar
-            searchSource="performance_vitals"
-            organization={organization}
-            projectIds={project}
-            query={query}
-            fields={fields}
-            onSearch={handleSearch}
-          />
+          <StyledSearchBarWrapper>
+            <TransactionSearchQueryBuilder
+              projects={project}
+              initialQuery={query}
+              onSearch={handleSearch}
+              searchSource="performance_vitals"
+            />
+          </StyledSearchBarWrapper>
         </FilterActions>
         <VitalChart
           organization={organization}
@@ -331,3 +331,15 @@ const FilterActions = styled('div')`
     grid-template-columns: auto 1fr;
   }
 `;
+
+const StyledSearchBarWrapper = styled('div')`
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    order: 1;
+    grid-column: 1/6;
+  }
+
+  @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
+    order: initial;
+    grid-column: auto;
+  }
+`;