feat(ui): Add semver onboarding (#27572)

src/sentry/assistant/guides.py

@@ -51,6 +51,7 @@ GUIDES = {
         "id": 21,
         "required_targets": ["percentage_based_alerts"],
     },
+    "semver": {"id": 22, "required_targets": ["releases_search"]},
 }
 
 # demo mode has different guides

static/app/components/assistant/getGuidesContent.tsx

@@ -327,6 +327,27 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
+    {
+      guide: 'semver',
+      requiredTargets: ['releases_search'],
+      dateThreshold: new Date(2021, 6, 1),
+      steps: [
+        {
+          title: t('Filter by Semver'),
+          target: 'releases_search',
+          description: tct(
+            'You can now filter releases by semver. For example: release.version:>14.0 [br] [link:View the docs]',
+            {
+              br: <br />,
+              link: (
+                <ExternalLink href="https://docs.sentry.io/product/releases/usage/sorting-filtering/#filtering-releases" />
+              ),
+            }
+          ),
+          nextText: t('Leave me alone'),
+        },
+      ],
+    },
   ];
 }
 

static/app/views/projectDetail/projectDetail.tsx

@@ -376,6 +376,7 @@ const StyledPageContent = styled(PageContent)`
 
 const ProjectFiltersWrapper = styled('div')`
   margin-bottom: ${space(2)};
+  display: grid;
 `;
 
 const StyledSdkUpdatesAlert = styled(GlobalSdkUpdateAlert)`

static/app/views/projectDetail/projectFilters.tsx

@@ -1,3 +1,4 @@
+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';
@@ -43,16 +44,18 @@ function ProjectFilters({query, tagValueLoader, onSearch}: Props) {
   };
 
   return (
-    <SmartSearchBar
-      searchSource="project_filters"
-      query={query}
-      placeholder={t('Search by release version')}
-      maxSearchItems={5}
-      hasRecentSearches={false}
-      supportedTags={supportedTags}
-      onSearch={onSearch}
-      onGetTagValues={getTagValues}
-    />
+    <GuideAnchor target="releases_search" position="bottom">
+      <SmartSearchBar
+        searchSource="project_filters"
+        query={query}
+        placeholder={t('Search by release version')}
+        maxSearchItems={5}
+        hasRecentSearches={false}
+        supportedTags={supportedTags}
+        onSearch={onSearch}
+        onGetTagValues={getTagValues}
+      />
+    </GuideAnchor>
   );
 }
 

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

@@ -7,6 +7,7 @@ import pick from 'lodash/pick';
 import {fetchTagValues} from 'app/actionCreators/tags';
 import Feature from 'app/components/acl/feature';
 import Alert from 'app/components/alert';
+import {GuideAnchor} from 'app/components/assistant/guideAnchor';
 import EmptyStateWarning from 'app/components/emptyStateWarning';
 import LightWeightNoProjectMessage from 'app/components/lightWeightNoProjectMessage';
 import ExternalLink from 'app/components/links/externalLink';
@@ -550,16 +551,18 @@ class ReleasesList extends AsyncView<Props, State> {
 
             <SortAndFilterWrapper>
               {hasSemver ? (
-                <SmartSearchBar
-                  searchSource="releases"
-                  query={this.getQuery()}
-                  placeholder={t('Search by release version')}
-                  maxSearchItems={5}
-                  hasRecentSearches={false}
-                  supportedTags={supportedTags}
-                  onSearch={this.handleSearch}
-                  onGetTagValues={this.getTagValues}
-                />
+                <GuideAnchor target="releases_search" position="bottom">
+                  <SmartSearchBar
+                    searchSource="releases"
+                    query={this.getQuery()}
+                    placeholder={t('Search by release version')}
+                    maxSearchItems={5}
+                    hasRecentSearches={false}
+                    supportedTags={supportedTags}
+                    onSearch={this.handleSearch}
+                    onGetTagValues={this.getTagValues}
+                  />
+                </GuideAnchor>
               ) : (
                 <SearchBar
                   placeholder={t('Search')}