feat(guides): remove some guides (#34228)

Reducing the number of pop-up notifications to reduce noise during onboarding

static/app/components/assistant/getGuidesContent.tsx

@@ -11,37 +11,13 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
   return [
     {
       guide: 'issue',
-      requiredTargets: ['issue_title', 'exception'],
+      requiredTargets: ['issue_number', 'exception'],
       steps: [
-        {
-          title: t("Let's Get This Over With"),
-          target: 'issue_title',
-          description: t(
-            `No one likes a product tour. But stick with us, and you'll find it a
-              whole lot easier to use Sentry's Issue details page.`
-          ),
-        },
-        {
-          title: t('Resolve Your Issues'),
-          target: 'resolve',
-          description: t(
-            'So you fixed your problem? Congrats. Hit resolve to make it all go away.'
-          ),
-        },
-        {
-          title: t('Deal With It Later, Or Never'),
-          target: 'ignore_delete_discard',
-          description: t(
-            `Just can't deal with this Issue right now? Ignore it. Saving it for later?
-                Star it. Want it gone and out of your life forever?
-                Delete that sh*t.`
-          ),
-        },
         {
           title: t('Identify Your Issues'),
           target: 'issue_number',
           description: tct(
-            `You've got a lot of Issues. That's fine. Use the Issue number in your commit message,
+            `You have Issues. That's fine. Use the Issue number in your commit message,
                 and we'll automatically resolve the Issue when your code is deployed. [link:Learn more]`,
             {link: <ExternalLink href="https://docs.sentry.io/product/releases/" />}
           ),
@@ -60,14 +36,6 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
             }
           ),
         },
-        {
-          title: t('Find Information You Can Use'),
-          target: 'tags',
-          description: t(
-            `So many bugs, so little time. When you've got bugs as far as the mouse can scroll,
-                search and filter Events with tags or visualize Issues with a heat map.`
-          ),
-        },
         {
           title: t('Narrow Down Suspects'),
           target: 'exception',
@@ -137,7 +105,7 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
           title: t('Transactions'),
           target: 'trace_view_guide_row',
           description: t(
-            `Get an overview of every transaction. You can quickly see all the transactions in a trace alongside the project, transaction duration, and any related errors.`
+            `You can quickly see all the transactions in a trace alongside the project, transaction duration, and any related errors.`
           ),
         },
         {
@@ -149,7 +117,7 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
     },
     {
       guide: 'span_op_breakdowns_and_tag_explorer',
-      requiredTargets: ['span_op_breakdowns_filter', 'span_op_relative_breakdowns'],
+      requiredTargets: ['span_op_breakdowns_filter'],
       steps: [
         {
           title: t('Filter by Span Operation'),
@@ -158,18 +126,6 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
             'You can now filter these transaction events based on http, db, browser or resource operation.'
           ),
         },
-        {
-          title: t('Span Operation Breakdown'),
-          target: 'span_op_relative_breakdowns',
-          description: tct(
-            'By default, you can now see how each transaction is broken down by operation. Click the spans to filter. [link:Learn more]',
-            {
-              link: (
-                <ExternalLink href="https://docs.sentry.io/product/performance/event-detail/#operations-breakdown" />
-              ),
-            }
-          ),
-        },
         {
           title: t('Suspect Tags'),
           target: 'tag_explorer',
@@ -184,28 +140,6 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
-    {
-      guide: 'team_key_transactions',
-      requiredTargets: ['team_key_transaction_header'],
-      steps: [
-        {
-          title: t('Key Transactions'),
-          target: 'team_key_transaction_header',
-          description: t(
-            'Software development is a team sport. Key Transactions allow you to mark important transactions and share them with your team.'
-          ),
-          nextText: t('Great'),
-        },
-        {
-          title: t('Migrating Key Transactions'),
-          target: 'team_key_transaction_existing',
-          description: t(
-            'To migrate your previous key transactions, you will have to mark them as a key transaction again for your team. Sorry about that.'
-          ),
-          nextText: t('Fine'),
-        },
-      ],
-    },
     {
       guide: 'project_transaction_threshold',
       requiredTargets: ['project_transaction_threshold'],
@@ -253,27 +187,6 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
-    {
-      guide: 'release_stages',
-      requiredTargets: ['release_stages'],
-      dateThreshold: new Date('2021-05-01'),
-      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'),
-        },
-      ],
-    },
     {
       guide: 'new_page_filters',
       requiredTargets: ['new_page_filter_button'],

static/app/components/discover/transactionsTable.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import {Location, LocationDescriptor, Query} from 'history';
 
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import SortLink from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -67,30 +66,28 @@ class TransactionsTable extends React.PureComponent<Props> {
       if (column.key === 'span_ops_breakdown.relative') {
         return (
           <HeadCellContainer key={index}>
-            <GuideAnchor target="span_op_relative_breakdowns">
-              <SortLink
-                align={align}
-                title={
-                  title === t('operation duration') ? (
-                    <React.Fragment>
-                      {title}
-                      <StyledIconQuestion
-                        size="xs"
-                        position="top"
-                        title={t(
-                          `Span durations are summed over the course of an entire transaction. Any overlapping spans are only counted once.`
-                        )}
-                      />
-                    </React.Fragment>
-                  ) : (
-                    title
-                  )
-                }
-                direction={undefined}
-                canSort={false}
-                generateSortLink={generateSortLink}
-              />
-            </GuideAnchor>
+            <SortLink
+              align={align}
+              title={
+                title === t('operation duration') ? (
+                  <React.Fragment>
+                    {title}
+                    <StyledIconQuestion
+                      size="xs"
+                      position="top"
+                      title={t(
+                        `Span durations are summed over the course of an entire transaction. Any overlapping spans are only counted once.`
+                      )}
+                    />
+                  </React.Fragment>
+                ) : (
+                  title
+                )
+              }
+              direction={undefined}
+              canSort={false}
+              generateSortLink={generateSortLink}
+            />
           </HeadCellContainer>
         );
       }

static/app/components/eventOrGroupTitle.tsx

@@ -1,7 +1,6 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import {BaseGroup, GroupTombstone, Organization} from 'sentry/types';
@@ -26,7 +25,6 @@ function EventOrGroupTitle({
   organization,
   data,
   withStackTracePreview,
-  hasGuideAnchor,
   grouping = false,
   className,
 }: Props) {
@@ -43,26 +41,24 @@ function EventOrGroupTitle({
 
   return (
     <Wrapper className={className} hasGroupingTreeUI={hasGroupingTreeUI}>
-      <GuideAnchor disabled={!hasGuideAnchor} target="issue_title" position="bottom">
-        {withStackTracePreview ? (
-          <StyledStacktracePreview
-            organization={organization}
-            issueId={groupID ? groupID : id}
-            groupingCurrentLevel={groupingCurrentLevel}
-            // we need eventId and projectSlug only when hovering over Event, not Group
-            // (different API call is made to get the stack trace then)
-            eventId={eventID}
-            projectSlug={eventID ? ProjectsStore.getById(projectID)?.slug : undefined}
-            hasGroupingStacktraceUI={hasGroupingStacktraceUI}
-          >
-            {treeLabel ? <EventTitleTreeLabel treeLabel={treeLabel} /> : title}
-          </StyledStacktracePreview>
-        ) : treeLabel ? (
-          <EventTitleTreeLabel treeLabel={treeLabel} />
-        ) : (
-          title
-        )}
-      </GuideAnchor>
+      {withStackTracePreview ? (
+        <StyledStacktracePreview
+          organization={organization}
+          issueId={groupID ? groupID : id}
+          groupingCurrentLevel={groupingCurrentLevel}
+          // we need eventId and projectSlug only when hovering over Event, not Group
+          // (different API call is made to get the stack trace then)
+          eventId={eventID}
+          projectSlug={eventID ? ProjectsStore.getById(projectID)?.slug : undefined}
+          hasGroupingStacktraceUI={hasGroupingStacktraceUI}
+        >
+          {treeLabel ? <EventTitleTreeLabel treeLabel={treeLabel} /> : title}
+        </StyledStacktracePreview>
+      ) : treeLabel ? (
+        <EventTitleTreeLabel treeLabel={treeLabel} />
+      ) : (
+        title
+      )}
       {subtitle && (
         <Fragment>
           <Spacer />

static/app/components/group/sidebar.tsx

@@ -6,7 +6,6 @@ import keyBy from 'lodash/keyBy';
 import pickBy from 'lodash/pickBy';
 
 import {Client} from 'sentry/api';
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import ExternalIssueList from 'sentry/components/group/externalIssuesList';
@@ -210,13 +209,7 @@ class BaseGroupSidebar extends Component<Props, State> {
 
         {this.renderPluginIssue()}
 
-        <SidebarSection
-          title={
-            <GuideAnchor target="tags" position="bottom">
-              {t('Tags')}
-            </GuideAnchor>
-          }
-        >
+        <SidebarSection title={t('Tags')}>
           {!tagsWithTopValues ? (
             <TagPlaceholders>
               <Placeholder height="40px" />

static/app/views/performance/table.tsx

@@ -325,14 +325,12 @@ class _Table extends Component<Props, State> {
       if (teamKeyTransactionColumn) {
         if (isHeader) {
           const star = (
-            <GuideAnchor target="team_key_transaction_header" position="top">
-              <IconStar
-                key="keyTransaction"
-                color="yellow300"
-                isSolid
-                data-test-id="team-key-transaction-header"
-              />
-            </GuideAnchor>
+            <IconStar
+              key="keyTransaction"
+              color="yellow300"
+              isSolid
+              data-test-id="team-key-transaction-header"
+            />
           );
           return [this.renderHeadCell(tableData?.meta, teamKeyTransactionColumn, star)];
         }

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

@@ -547,29 +547,23 @@ class ReleasesList extends AsyncView<Props, State> {
                 position="bottom"
                 disabled={!hasReleasesSetup}
               >
-                <GuideAnchor
-                  target="release_stages"
-                  position="bottom"
-                  disabled={!showReleaseAdoptionStages}
-                >
-                  <StyledSmartSearchBar
-                    searchSource="releases"
-                    query={this.getQuery()}
-                    placeholder={t('Search by version, build, package, or stage')}
-                    maxSearchItems={5}
-                    hasRecentSearches={false}
-                    supportedTags={{
-                      ...SEMVER_TAGS,
-                      release: {
-                        key: 'release',
-                        name: 'release',
-                      },
-                    }}
-                    supportedTagType={ItemType.PROPERTY}
-                    onSearch={this.handleSearch}
-                    onGetTagValues={this.getTagValues}
-                  />
-                </GuideAnchor>
+                <StyledSmartSearchBar
+                  searchSource="releases"
+                  query={this.getQuery()}
+                  placeholder={t('Search by version, build, package, or stage')}
+                  maxSearchItems={5}
+                  hasRecentSearches={false}
+                  supportedTags={{
+                    ...SEMVER_TAGS,
+                    release: {
+                      key: 'release',
+                      name: 'release',
+                    },
+                  }}
+                  supportedTagType={ItemType.PROPERTY}
+                  onSearch={this.handleSearch}
+                  onGetTagValues={this.getTagValues}
+                />
               </GuideAnchor>
               <ReleasesStatusOptions
                 selected={activeStatus}

tests/js/spec/components/assistant/guideAnchor.spec.jsx

@@ -24,13 +24,13 @@ describe('GuideAnchor', function () {
   it('renders, advances, and finishes', async function () {
     render(
       <div>
-        <GuideAnchor target="issue_title" />
+        <GuideAnchor target="issue_number" />
         <GuideAnchor target="exception" />
       </div>
     );
 
     GuideStore.fetchSucceeded(serverGuide);
-    expect(await screen.findByText("Let's Get This Over With")).toBeInTheDocument();
+    expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
 
     // XXX(epurkhiser): Skip pointer event checks due to a bug with how Popper
     // renders the hovercard with pointer-events: none. See [0]
@@ -44,7 +44,7 @@ describe('GuideAnchor', function () {
     });
 
     expect(await screen.findByText('Narrow Down Suspects')).toBeInTheDocument();
-    expect(screen.queryByText("Let's Get This Over With")).not.toBeInTheDocument();
+    expect(screen.queryByText('Identify Your Issues')).not.toBeInTheDocument();
 
     // Clicking on the button in the last step should finish the guide.
     const finishMock = MockApiClient.addMockResponse({
@@ -71,13 +71,13 @@ describe('GuideAnchor', function () {
   it('dismisses', async function () {
     render(
       <div>
-        <GuideAnchor target="issue_title" />
+        <GuideAnchor target="issue_number" />
         <GuideAnchor target="exception" />
       </div>
     );
 
     GuideStore.fetchSucceeded(serverGuide);
-    expect(await screen.findByText("Let's Get This Over With")).toBeInTheDocument();
+    expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
 
     const dismissMock = MockApiClient.addMockResponse({
       method: 'PUT',
@@ -99,7 +99,7 @@ describe('GuideAnchor', function () {
       })
     );
 
-    expect(screen.queryByText("Let's Get This Over With")).not.toBeInTheDocument();
+    expect(screen.queryByText('Identify Your Issues')).not.toBeInTheDocument();
   });
 
   it('renders no container when inactive', function () {
@@ -127,16 +127,16 @@ describe('GuideAnchor', function () {
   it('if forceHide is true, do not render guide', async function () {
     render(
       <div>
-        <GuideAnchor target="issue_title" />
+        <GuideAnchor target="issue_number" />
         <GuideAnchor target="exception" />
       </div>
     );
 
     GuideStore.fetchSucceeded(serverGuide);
-    expect(await screen.findByText("Let's Get This Over With")).toBeInTheDocument();
+    expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
     GuideStore.setForceHide(true);
-    expect(screen.queryByText("Let's Get This Over With")).not.toBeInTheDocument();
+    expect(screen.queryByText('Identify Your Issues')).not.toBeInTheDocument();
     GuideStore.setForceHide(false);
-    expect(await screen.findByText("Let's Get This Over With")).toBeInTheDocument();
+    expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
   });
 });

tests/js/spec/components/streamGroup.spec.jsx

@@ -54,7 +54,7 @@ describe('StreamGroup', function () {
     await tick();
 
     expect(component.find('GuideAnchor').exists()).toBe(true);
-    expect(component.find('GuideAnchor')).toHaveLength(3);
+    expect(component.find('GuideAnchor')).toHaveLength(2);
     expect(component).toSnapshot();
   });
 

tests/js/spec/stores/guideStore.spec.jsx

@@ -25,7 +25,7 @@ describe('GuideStore', function () {
       },
       {guide: 'issue_stream', seen: true},
     ];
-    GuideStore.registerAnchor('issue_title');
+    GuideStore.registerAnchor('issue_number');
     GuideStore.registerAnchor('exception');
     GuideStore.registerAnchor('breadcrumbs');
     GuideStore.registerAnchor('issue_stream');