ref(ui): Change release list search autocomplete for release properties to 'Properties' (#29410)

static/app/components/smartSearchBar/index.tsx

@@ -161,6 +161,10 @@ type Props = WithRouterProps & {
    * Map of tags
    */
   supportedTags?: {[key: string]: Tag};
+  /**
+   * Type of supported tags
+   */
+  supportedTagType?: ItemType;
   /**
    * Maximum number of search items to display or a falsey value for no
    * maximum
@@ -702,8 +706,8 @@ class SmartSearchBar extends React.Component<Props, State> {
   /**
    * Returns array of possible key values that substring match `query`
    */
-  getTagKeys(query: string): SearchItem[] {
-    const {prepareQuery} = this.props;
+  getTagKeys(query: string): [SearchItem[], ItemType] {
+    const {prepareQuery, supportedTagType} = this.props;
 
     const supportedTags = this.props.supportedTags ?? {};
 
@@ -722,7 +726,10 @@ class SmartSearchBar extends React.Component<Props, State> {
       tagKeys = tagKeys.filter(key => key !== 'environment:');
     }
 
-    return tagKeys.map(value => ({value, desc: value}));
+    return [
+      tagKeys.map(value => ({value, desc: value})),
+      supportedTagType ?? ItemType.TAG_KEY,
+    ];
   }
 
   /**
@@ -901,14 +908,14 @@ class SmartSearchBar extends React.Component<Props, State> {
   };
 
   async generateTagAutocompleteGroup(tagName: string): Promise<AutocompleteGroup> {
-    const tagKeys = this.getTagKeys(tagName);
+    const [tagKeys, tagType] = this.getTagKeys(tagName);
     const recentSearches = await this.getRecentSearches();
 
     return {
       searchItems: tagKeys,
       recentSearchItems: recentSearches ?? [],
       tagName,
-      type: ItemType.TAG_KEY,
+      type: tagType,
     };
   }
 
@@ -982,10 +989,10 @@ class SmartSearchBar extends React.Component<Props, State> {
       // does not get updated)
       this.setState({searchTerm: query});
 
-      const tagKeys = this.getTagKeys('');
+      const [tagKeys, tagType] = this.getTagKeys('');
       const recentSearches = await this.getRecentSearches();
 
-      this.updateAutoCompleteState(tagKeys, recentSearches ?? [], '', ItemType.TAG_KEY);
+      this.updateAutoCompleteState(tagKeys, recentSearches ?? [], '', tagType);
       return;
     }
     // cursor on whitespace show default "help" search terms

static/app/components/smartSearchBar/types.tsx

@@ -6,6 +6,7 @@ export enum ItemType {
   FIRST_RELEASE = 'first-release',
   INVALID_TAG = 'invalid-tag',
   RECENT_SEARCH = 'recent-search',
+  PROPERTY = 'property',
 }
 
 export type SearchGroup = {

static/app/components/smartSearchBar/utils.tsx

@@ -62,6 +62,10 @@ function getTitleForType(type: ItemType) {
     return t('Operator Helpers');
   }
 
+  if (type === ItemType.PROPERTY) {
+    return t('Properties');
+  }
+
   return t('Tags');
 }
 

static/app/views/issueList/overview.tsx

@@ -29,11 +29,7 @@ import {Panel, PanelBody} from 'app/components/panels';
 import QueryCount from 'app/components/queryCount';
 import StreamGroup from 'app/components/stream/group';
 import ProcessingIssueList from 'app/components/stream/processingIssueList';
-import {
-  DEFAULT_QUERY,
-  DEFAULT_STATS_PERIOD,
-  RELEASE_ADOPTION_STAGES,
-} from 'app/constants';
+import {DEFAULT_QUERY, DEFAULT_STATS_PERIOD} from 'app/constants';
 import {tct} from 'app/locale';
 import GroupStore from 'app/stores/groupStore';
 import {PageContent} from 'app/styles/organization';
@@ -52,6 +48,7 @@ import {analytics, trackAnalyticsEvent} from 'app/utils/analytics';
 import {callIfFunction} from 'app/utils/callIfFunction';
 import CursorPoller from 'app/utils/cursorPoller';
 import {getUtcDateString} from 'app/utils/dates';
+import {SEMVER_TAGS} from 'app/utils/discover/fields';
 import getCurrentSentryReactTransaction from 'app/utils/getCurrentSentryReactTransaction';
 import parseApiError from 'app/utils/parseApiError';
 import parseLinkHeader from 'app/utils/parseLinkHeader';
@@ -1031,24 +1028,9 @@ class IssueListOverview extends React.Component<Props, State> {
 
     // TODO(workflow): When organization:semver flag is removed add semver tags to tagStore
     if (organization.features.includes('semver') && !tags['release.version']) {
-      tags['release.version'] = {
-        key: 'release.version',
-        name: 'release.version',
-      };
-      tags['release.build'] = {
-        key: 'release.build',
-        name: 'release.build',
-      };
-      tags['release.package'] = {
-        key: 'release.package',
-        name: 'release.package',
-      };
-      tags['release.stage'] = {
-        key: 'release.stage',
-        name: 'release.stage',
-        predefined: true,
-        values: RELEASE_ADOPTION_STAGES,
-      };
+      Object.entries(SEMVER_TAGS).forEach(([key, value]) => {
+        tags[key] = value;
+      });
     }
 
     const projectIds = selection?.projects?.map(p => p.toString());

static/app/views/projectDetail/projectFilters.tsx

@@ -1,36 +1,11 @@
 import {GuideAnchor} from 'app/components/assistant/guideAnchor';
 import SmartSearchBar from 'app/components/smartSearchBar';
-import {RELEASE_ADOPTION_STAGES} from 'app/constants';
 import {t} from 'app/locale';
 import {Tag} from 'app/types';
+import {SEMVER_TAGS} from 'app/utils/discover/fields';
 
 import {TagValueLoader} from '../issueList/types';
 
-const supportedTags = {
-  'release.version': {
-    key: 'release.version',
-    name: 'release.version',
-  },
-  'release.build': {
-    key: 'release.build',
-    name: 'release.build',
-  },
-  'release.package': {
-    key: 'release.package',
-    name: 'release.package',
-  },
-  'release.stage': {
-    key: 'release.stage',
-    name: 'release.stage',
-    predefined: true,
-    values: RELEASE_ADOPTION_STAGES,
-  },
-  release: {
-    key: 'release',
-    name: 'release',
-  },
-};
-
 type Props = {
   query: string;
   onSearch: (q: string) => void;
@@ -51,7 +26,13 @@ function ProjectFilters({query, tagValueLoader, onSearch}: Props) {
         placeholder={t('Search by release version, build, package, or stage')}
         maxSearchItems={5}
         hasRecentSearches={false}
-        supportedTags={supportedTags}
+        supportedTags={{
+          ...SEMVER_TAGS,
+          release: {
+            key: 'release',
+            name: 'release',
+          },
+        }}
         onSearch={onSearch}
         onGetTagValues={getTagValues}
       />

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

@@ -18,7 +18,8 @@ import PageHeading from 'app/components/pageHeading';
 import Pagination from 'app/components/pagination';
 import SearchBar from 'app/components/searchBar';
 import SmartSearchBar from 'app/components/smartSearchBar';
-import {DEFAULT_STATS_PERIOD, RELEASE_ADOPTION_STAGES} from 'app/constants';
+import {ItemType} from 'app/components/smartSearchBar/types';
+import {DEFAULT_STATS_PERIOD} from 'app/constants';
 import {ALL_ACCESS_PROJECTS} from 'app/constants/globalSelectionHeader';
 import {releaseHealth} from 'app/data/platformCategories';
 import {IconInfo} from 'app/icons';
@@ -35,6 +36,7 @@ import {
   Tag,
 } from 'app/types';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
+import {SEMVER_TAGS} from 'app/utils/discover/fields';
 import Projects from 'app/utils/projects';
 import routeTitleGen from 'app/utils/routeTitle';
 import withGlobalSelection from 'app/utils/withGlobalSelection';
@@ -53,31 +55,6 @@ import ReleasesRequest from './releasesRequest';
 import ReleasesSortOptions, {ReleasesSortOption} from './releasesSortOptions';
 import ReleasesStatusOptions, {ReleasesStatusOption} from './releasesStatusOptions';
 
-const supportedTags = {
-  'release.version': {
-    key: 'release.version',
-    name: 'release.version',
-  },
-  'release.build': {
-    key: 'release.build',
-    name: 'release.build',
-  },
-  'release.package': {
-    key: 'release.package',
-    name: 'release.package',
-  },
-  'release.stage': {
-    key: 'release.stage',
-    name: 'release.stage',
-    predefined: true,
-    values: RELEASE_ADOPTION_STAGES,
-  },
-  release: {
-    key: 'release',
-    name: 'release',
-  },
-};
-
 type RouteParams = {
   orgId: string;
 };
@@ -544,7 +521,14 @@ class ReleasesList extends AsyncView<Props, State> {
                       placeholder={t('Search by version, build, package, or stage')}
                       maxSearchItems={5}
                       hasRecentSearches={false}
-                      supportedTags={supportedTags}
+                      supportedTags={{
+                        ...SEMVER_TAGS,
+                        release: {
+                          key: 'release',
+                          name: 'release',
+                        },
+                      }}
+                      supportedTagType={ItemType.PROPERTY}
                       onSearch={this.handleSearch}
                       onGetTagValues={this.getTagValues}
                     />