feat(ui): Release stages guide (#27726)

* feat(ui): Release stages guide

* disableable guide

* style(lint): Auto commit lint changes

* use flag on the fe as well

* comments

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

src/sentry/assistant/guides.py

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

static/app/components/assistant/getGuidesContent.tsx

@@ -348,6 +348,27 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
+    {
+      guide: 'release_stages',
+      requiredTargets: ['release_stages'],
+      dateThreshold: new Date(2021, 6, 1),
+      steps: [
+        {
+          title: t('Adoption Filter'),
+          target: 'release_stages',
+          description: tct(
+            'Select an environment and search for `release.stage:adopted` to filter out releases with low adoption. [br] [link:Learn more]',
+            {
+              br: <br />,
+              link: (
+                <ExternalLink href="https://docs.sentry.io/product/releases/usage/sorting-filtering/#filtering-releases" />
+              ),
+            }
+          ),
+          nextText: t('Got it'),
+        },
+      ],
+    },
   ];
 }
 

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

@@ -7,7 +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 GuideAnchorWrapper, {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';
@@ -533,6 +533,7 @@ class ReleasesList extends AsyncView<Props, State> {
     const activeDisplay = this.getDisplay();
 
     const hasSemver = organization.features.includes('semver');
+    const hasReleaseStages = organization.features.includes('release-adoption-stage');
 
     return (
       <GlobalSelectionHeader
@@ -552,16 +553,22 @@ class ReleasesList extends AsyncView<Props, State> {
             <SortAndFilterWrapper>
               {hasSemver ? (
                 <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}
-                  />
+                  <GuideAnchorWrapper
+                    target="release_stages"
+                    position="bottom"
+                    disabled={!hasReleaseStages}
+                  >
+                    <SmartSearchBar
+                      searchSource="releases"
+                      query={this.getQuery()}
+                      placeholder={t('Search by release version')}
+                      maxSearchItems={5}
+                      hasRecentSearches={false}
+                      supportedTags={supportedTags}
+                      onSearch={this.handleSearch}
+                      onGetTagValues={this.getTagValues}
+                    />
+                  </GuideAnchorWrapper>
                 </GuideAnchor>
               ) : (
                 <SearchBar

static/app/views/releases/list/releaseHealth/content.tsx

@@ -71,11 +71,13 @@ const Content = ({
   isTopRelease,
   getHealthData,
 }: Props) => {
+  const hasReleaseStages = organization.features.includes('release-adoption-stage');
   const anyProjectMobile =
     projects.filter(
       project => project.platform && isProjectMobileForReleases(project.platform)
     ).length > 0;
-  const hasAdoptionStagesColumn: boolean = anyProjectMobile && showAdoptionStageLabels;
+  const hasAdoptionStagesColumn: boolean =
+    hasReleaseStages && anyProjectMobile && showAdoptionStageLabels;
   return (
     <Fragment>
       <Header>