feat(discover) Add discover guide (#16754)

We wanted to do a modal announcement but that would have been a ton of
work. This is less work and lets us communicate why/where the events tab
went.

src/sentry/assistant/guides.py

@@ -110,4 +110,18 @@ GUIDES = {
             }
         ],
     },
+    "discover_sidebar": {
+        "id": 4,
+        "required_targets": ["discover_sidebar"],
+        "steps": [
+            {
+                "title": _("Event Pages have moved"),
+                "message": _(
+                    "These are now in our powerful new query builder, Discover "
+                    '<a href="https://docs.sentry.io/workflow/discover2/" target="_blank">Learn more about its advanced features</a>. '
+                ),
+                "target": "discover_sidebar",
+            }
+        ],
+    },
 }

src/sentry/static/sentry/app/components/assistant/guideAnchor.jsx

@@ -183,12 +183,13 @@ const GuideInputRow = styled('div')`
 
 const StyledTitle = styled('div')`
   font-weight: bold;
-  font-size: 1.3em;
+  font-size: ${p => p.theme.fontSizeLarge};
   flex-grow: 1;
 `;
 
 const StyledContent = styled('div')`
   margin-top: ${space(1)};
+  font-size: ${p => p.theme.fontSizeMedium};
   line-height: 1.5;
 
   a {

src/sentry/static/sentry/app/components/sidebar/index.jsx

@@ -14,6 +14,7 @@ import {load as loadIncidents} from 'app/actionCreators/serviceIncidents';
 import {t} from 'app/locale';
 import ConfigStore from 'app/stores/configStore';
 import Feature from 'app/components/acl/feature';
+import GuideAnchor from 'app/components/assistant/guideAnchor';
 import HookStore from 'app/stores/hookStore';
 import InlineSvg from 'app/components/inlineSvg';
 import PreferencesStore from 'app/stores/preferencesStore';
@@ -300,20 +301,22 @@ class Sidebar extends React.Component {
                       features={['discover-basic']}
                       organization={organization}
                     >
-                      <SidebarItem
-                        {...sidebarItemProps}
-                        onClick={(_id, evt) =>
-                          this.navigateWithGlobalSelection(
-                            getDiscoverLandingUrl(organization),
-                            evt
-                          )
-                        }
-                        icon={<InlineSvg src="icon-telescope" />}
-                        label={t('Discover')}
-                        to={getDiscoverLandingUrl(organization)}
-                        id="discover-v2"
-                        isNew
-                      />
+                      <GuideAnchor position="right" target="discover_sidebar">
+                        <SidebarItem
+                          {...sidebarItemProps}
+                          onClick={(_id, evt) =>
+                            this.navigateWithGlobalSelection(
+                              getDiscoverLandingUrl(organization),
+                              evt
+                            )
+                          }
+                          icon={<InlineSvg src="icon-telescope" />}
+                          label={t('Discover')}
+                          to={getDiscoverLandingUrl(organization)}
+                          id="discover-v2"
+                          isNew
+                        />
+                      </GuideAnchor>
                     </Feature>
                   )}
 

src/sentry/static/sentry/app/stores/guideStore.jsx

@@ -143,12 +143,24 @@ const GuideStore = Reflux.createStore({
 
     if (!this.state.forceShow) {
       const user = ConfigStore.get('user');
-      guideKeys = guideKeys.filter(
-        key =>
-          !this.state.guides[key].seen &&
-          // Don't show guides to users who signed up way before these changes were implemented
-          (user.isSuperuser || new Date(user.dateJoined) > new Date(2019, 6, 1))
-      );
+
+      // Don't show guides to users who signed up way before these changes were implemented
+      const assistantThreshold = new Date(2019, 6, 1);
+      // Spam existing users about the discover tab, but not new signups.
+      const discoverDate = new Date(2020, 2, 6);
+
+      guideKeys = guideKeys.filter(key => {
+        if (this.state.guides[key].seen) {
+          return false;
+        }
+        if (
+          key === 'discover_sidebar' &&
+          (user.isSuperuser || new Date(user.dateJoined) < discoverDate)
+        ) {
+          return true;
+        }
+        return user.isSuperuser || new Date(user.dateJoined) > assistantThreshold;
+      });
     }
 
     let bestGuide = null;

tests/acceptance/test_organization_events_v2.py

@@ -413,6 +413,9 @@ class OrganizationEventsV2Test(AcceptanceTestCase, SnubaTestCase):
             self.browser.get(self.landing_path)
             self.wait_until_loaded()
 
+            # Dismiss assistant as it is in the way.
+            self.browser.element('[aria-label="Got It"]').click()
+
             # Look at the results for our query.
             self.browser.element('[data-test-id="card-{}"]'.format(query.name)).click()
             self.wait_until_loaded()

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

@@ -81,7 +81,7 @@ exports[`GuideAnchor renders, advances, and finishes 1`] = `
                       class="css-oc5lxq-GuideInputRow e130o4352"
                     >
                       <div
-                        class="css-4npf6p-StyledTitle e130o4353"
+                        class="css-nw97la-StyledTitle e130o4353"
                       >
                         title 1
                       </div>
@@ -104,7 +104,7 @@ exports[`GuideAnchor renders, advances, and finishes 1`] = `
                       </a>
                     </div>
                     <div
-                      class="css-1f6s6ls-StyledContent e130o4354"
+                      class="css-qwocdy-StyledContent e130o4354"
                     >
                       <div>
                         abc
@@ -220,7 +220,7 @@ exports[`GuideAnchor renders, advances, and finishes 1`] = `
                             >
                               <StyledTitle>
                                 <div
-                                  className="css-4npf6p-StyledTitle e130o4353"
+                                  className="css-nw97la-StyledTitle e130o4353"
                                 >
                                   title 1
                                 </div>
@@ -269,7 +269,7 @@ exports[`GuideAnchor renders, advances, and finishes 1`] = `
                           </GuideInputRow>
                           <StyledContent>
                             <div
-                              className="css-1f6s6ls-StyledContent e130o4354"
+                              className="css-qwocdy-StyledContent e130o4354"
                             >
                               <div
                                 dangerouslySetInnerHTML={
@@ -446,13 +446,13 @@ exports[`GuideAnchor renders, advances, and finishes 2`] = `
                       class="css-oc5lxq-GuideInputRow e130o4352"
                     >
                       <div
-                        class="css-4npf6p-StyledTitle e130o4353"
+                        class="css-nw97la-StyledTitle e130o4353"
                       >
                         title 2
                       </div>
                     </div>
                     <div
-                      class="css-1f6s6ls-StyledContent e130o4354"
+                      class="css-qwocdy-StyledContent e130o4354"
                     >
                       <div>
                         xyz
@@ -568,7 +568,7 @@ exports[`GuideAnchor renders, advances, and finishes 2`] = `
                             >
                               <StyledTitle>
                                 <div
-                                  className="css-4npf6p-StyledTitle e130o4353"
+                                  className="css-nw97la-StyledTitle e130o4353"
                                 >
                                   title 2
                                 </div>
@@ -577,7 +577,7 @@ exports[`GuideAnchor renders, advances, and finishes 2`] = `
                           </GuideInputRow>
                           <StyledContent>
                             <div
-                              className="css-1f6s6ls-StyledContent e130o4354"
+                              className="css-qwocdy-StyledContent e130o4354"
                             >
                               <div
                                 dangerouslySetInnerHTML={