Revert "ref(metrics): Replace SmartSearch with SearchQueryBuilder com…

…ponent (#75058)" This reverts commit 083f1d5. Co-authored-by: shellmayr <6788060+shellmayr@users.noreply.github.com>
getsentry · Jul 29, 2024 · c3fda10 · c3fda10
1 parent 083f1d5
commit c3fda10
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 84 deletions.
diff --git a/static/app/components/metrics/metricSearchBar.tsx b/static/app/components/metrics/metricSearchBar.tsx
@@ -1,21 +1,14 @@
 import {useCallback, useMemo} from 'react';
-import {css, type SerializedStyles} from '@emotion/react';
+import {css} from '@emotion/react';
 import {useId} from '@react-aria/utils';
 
 import {QueryFieldGroup} from 'sentry/components/metrics/queryFieldGroup';
-import {
-  SearchQueryBuilder,
-  type SearchQueryBuilderProps,
-} from 'sentry/components/searchQueryBuilder';
 import type {SmartSearchBarProps} from 'sentry/components/smartSearchBar';
 import SmartSearchBar from 'sentry/components/smartSearchBar';
 import {t} from 'sentry/locale';
 import {SavedSearchType, type TagCollection} from 'sentry/types/group';
 import type {MRI} from 'sentry/types/metrics';
-import {
-  hasMetricsNewInputs,
-  hasMetricsNewSearchQueryBuilder,
-} from 'sentry/utils/metrics/features';
+import {hasMetricsNewInputs} from 'sentry/utils/metrics/features';
 import {getUseCaseFromMRI} from 'sentry/utils/metrics/mri';
 import {useMetricsTags} from 'sentry/utils/metrics/useMetricsTags';
 import useApi from 'sentry/utils/useApi';
@@ -47,7 +40,7 @@ export function MetricSearchBar({
   id: idProp,
   ...props
 }: MetricSearchBarProps) {
-  const organization = useOrganization();
+  const org = useOrganization();
   const api = useApi();
   const {selection} = usePageFilters();
   const selectedProjects = useSelectedProjects();
@@ -89,19 +82,16 @@ export function MetricSearchBar({
 
   const fetchTagValues = useCallback(
     (tagKey: string, search: string) => {
-      return api.requestPromise(
-        `/organizations/${organization.slug}/metrics/tags/${tagKey}/`,
-        {
-          query: {
-            prefix: search,
-            metric: mri,
-            useCase: getUseCaseFromMRI(mri),
-            project: selection.projects,
-          },
-        }
-      );
+      return api.requestPromise(`/organizations/${org.slug}/metrics/tags/${tagKey}/`, {
+        query: {
+          prefix: search,
+          metric: mri,
+          useCase: getUseCaseFromMRI(mri),
+          project: selection.projects,
+        },
+      });
     },
-    [api, mri, organization.slug, selection.projects]
+    [api, mri, org.slug, selection.projects]
   );
 
   const getTagValues = useCallback(
@@ -128,52 +118,47 @@ export function MetricSearchBar({
     [onChange, searchConfig]
   );
 
-  const searchQueryBuilderProps: SearchQueryBuilderProps & {css: SerializedStyles} = {
-    disabled,
-    onChange: handleChange,
-    placeholder: t('Filter by tags'),
-    initialQuery: query ?? '',
-    getTagValues,
-    recentSearches: SavedSearchType.METRIC,
-    // don't highlight tags while loading as we don't know yet if they are supported
-    disallowUnsupportedFilters: !isLoading,
-    filterKeys: searchConfig.supportedTags,
-    disallowFreeText: searchConfig.disallowFreeText,
-    searchSource: props.searchSource ?? 'metrics',
-    css: wideSearchBarCss(disabled),
-  };
-
-  const smartSearchProps: Partial<SmartSearchBarProps> & {css: SerializedStyles} = {
-    id,
-    disabled,
-    maxMenuHeight: 220,
-    organization,
-    onGetTagValues: getTagValues,
-    // don't highlight tags while loading as we don't know yet if they are supported
-    highlightUnsupportedTags: !isLoading,
-    onClose: handleChange,
-    onSearch: handleChange,
-    placeholder: t('Filter by tags'),
-    query,
-    savedSearchType: SavedSearchType.METRIC,
-    css: wideSearchBarCss(disabled),
-    ...props,
-    ...searchConfig,
-  };
-
-  if (hasMetricsNewInputs(organization)) {
-    if (hasMetricsNewSearchQueryBuilder(organization)) {
-      return <QueryFieldGroup.SearchQueryBuilder {...searchQueryBuilderProps} />;
-    }
-
-    return <QueryFieldGroup.SmartSearchBar {...smartSearchProps} />;
+  if (hasMetricsNewInputs(org)) {
+    return (
+      <QueryFieldGroup.SmartSearchBar
+        id={id}
+        disabled={disabled}
+        maxMenuHeight={220}
+        organization={org}
+        onGetTagValues={getTagValues}
+        // don't highlight tags while loading as we don't know yet if they are supported
+        highlightUnsupportedTags={!isLoading}
+        onClose={handleChange}
+        onSearch={handleChange}
+        placeholder={t('Filter by tags')}
+        query={query}
+        savedSearchType={SavedSearchType.METRIC}
+        {...searchConfig}
+        {...props}
+        css={wideSearchBarCss(disabled)}
+      />
+    );
   }
 
-  if (hasMetricsNewSearchQueryBuilder(organization)) {
-    return <SearchQueryBuilder {...searchQueryBuilderProps} />;
-  }
-
-  return <SmartSearchBar {...smartSearchProps} />;
+  return (
+    <SmartSearchBar
+      id={id}
+      disabled={disabled}
+      maxMenuHeight={220}
+      organization={org}
+      onGetTagValues={getTagValues}
+      // don't highlight tags while loading as we don't know yet if they are supported
+      highlightUnsupportedTags={!isLoading}
+      onClose={handleChange}
+      onSearch={handleChange}
+      placeholder={t('Filter by tags')}
+      query={query}
+      savedSearchType={SavedSearchType.METRIC}
+      {...searchConfig}
+      {...props}
+      css={wideSearchBarCss(disabled)}
+    />
+  );
 }
 
 function wideSearchBarCss(disabled?: boolean) {

diff --git a/static/app/components/metrics/queryFieldGroup.tsx b/static/app/components/metrics/queryFieldGroup.tsx
@@ -1,4 +1,3 @@
-import type {Theme} from '@emotion/react';
 import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -11,7 +10,6 @@ import {
   type SingleSelectProps,
 } from 'sentry/components/compactSelect';
 import {DebouncedInput as _DebouncedInput} from 'sentry/components/modals/metricWidgetViewerModal/queries';
-import {SearchQueryBuilder as _SearchQueryBuilder} from 'sentry/components/searchQueryBuilder';
 import _SmartSearchBar from 'sentry/components/smartSearchBar';
 import {Tooltip} from 'sentry/components/tooltip';
 import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
@@ -105,25 +103,17 @@ const ComboBox = styled(_ComboBox)`
   }
 `;
 
-const searchCss = (theme: Theme) => css`
+const SmartSearchBar = styled(_SmartSearchBar)`
   border-radius: 0;
   :last-child {
-    border-radius: 0 ${theme.borderRadius} ${theme.borderRadius} 0;
+    border-radius: 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0;
   }
 
   label {
-    color: ${theme.gray500};
+    color: ${p => p.theme.gray500};
   }
 `;
 
-const SmartSearchBar = styled(_SmartSearchBar)`
-  ${p => searchCss(p.theme)}
-`;
-
-const SearchQueryBuilder = styled(_SearchQueryBuilder)`
-  ${p => searchCss(p.theme)}
-`;
-
 const FieldGroup = styled('div')`
   flex-grow: 1;
 
@@ -172,6 +162,5 @@ QueryFieldGroup.Label = Label;
 QueryFieldGroup.CompactSelect = CompactSelect;
 QueryFieldGroup.ComboBox = ComboBox;
 QueryFieldGroup.SmartSearchBar = SmartSearchBar;
-QueryFieldGroup.SearchQueryBuilder = SearchQueryBuilder;
 QueryFieldGroup.DebouncedInput = DebouncedInput;
 QueryFieldGroup.DeleteButton = DeleteButton;
diff --git a/static/app/utils/metrics/features.tsx b/static/app/utils/metrics/features.tsx
@@ -28,10 +28,6 @@ export function hasMetricsNewInputs(organization: Organization) {
   return organization.features.includes('metrics-new-inputs');
 }
 
-export function hasMetricsNewSearchQueryBuilder(organization: Organization) {
-  return organization.features.includes('search-query-builder-metrics');
-}
-
 /**
  * Returns the forceMetricsLayer query param for the alert
  * wrapped in an object so it can be spread into existing query params