feat(issue-views): Update banner and tooltip copy, make banner dismis…

…sable, feedback -> read docs (#77878) Makes a couple changes to the add view page for EA readiness: 1. Updates the banner copy to call out: views are user scoped, views are reorderable, and that custom searches are persisted temporarily (only appears if you actually have any custom searches) 2. Adds a dismiss button to the banner 3. Switches the "Give Feedback" button for a "Read Docs" button 4. Adds a "Learn More" link to docs within the saved searches tooltip **IMPORTANT**: Issue views docs have not been merged in yet, so the docs links are **broken**. I will not merge this until the docs links resolve. [Docs PR](getsentry/sentry-docs#11390) if you're curious about it.
getsentry · Sep 25, 2024 · 5701f09 · 5701f09
1 parent 600065d
commit 5701f09
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 31 deletions.
diff --git a/static/app/utils/analytics/issueAnalyticsEvents.tsx b/static/app/utils/analytics/issueAnalyticsEvents.tsx
@@ -222,6 +222,7 @@ export type IssueEventParameters = {
     search_type: string;
   };
   'issue_views.add_view.all_saved_searches_saved': {};
+  'issue_views.add_view.banner_dismissed': {};
   'issue_views.add_view.clicked': {};
   'issue_views.add_view.custom_query_saved': {
     query: string;
@@ -389,6 +390,7 @@ export const issueEventMap: Record<IssueEventKey, string | null> = {
   'issue_views.add_view.all_saved_searches_saved':
     'Issue Views: All Saved Searches Saved',
   'issue_views.add_view.recommended_view_saved': 'Issue Views: Recommended View Saved',
+  'issue_views.add_view.banner_dismissed': 'Issue Views: Add View Banner Dismissed',
   'issue_views.shared_view_opened': 'Issue Views: Shared View Opened',
   'issue_views.temp_view_discarded': 'Issue Views: Temporary View Discarded',
   'issue_views.temp_view_saved': 'Issue Views: Temporary View Saved',

diff --git a/static/app/views/issueList/addViewPage.tsx b/static/app/views/issueList/addViewPage.tsx
@@ -3,12 +3,14 @@ import styled from '@emotion/styled';
 
 import bannerStar from 'sentry-images/spot/banner-star.svg';
 
-import {Button} from 'sentry/components/button';
+import {usePrompt} from 'sentry/actionCreators/prompts';
+import {Button, LinkButton} from 'sentry/components/button';
 import {openConfirmModal} from 'sentry/components/confirm';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import ExternalLink from 'sentry/components/links/externalLink';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {FormattedQuery} from 'sentry/components/searchQueryBuilder/formattedQuery';
-import {IconMegaphone} from 'sentry/icons';
+import {IconClose, IconMegaphone} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {SavedSearch} from 'sentry/types/group';
@@ -43,35 +45,34 @@ const RECOMMENDED_SEARCHES: SearchSuggestion[] = [
 ];
 
 function AddViewPage({savedSearches}: {savedSearches: SavedSearch[]}) {
+  const toolTipContents = (
+    <Container>
+      {t(
+        'Saved searches will be deprecated soon. For any you wish to return to, please save them as views.'
+      )}
+      <ExternalLink href={'https://docs.sentry.io/product/issues/issue-views'}>
+        {t('Learn More')}
+      </ExternalLink>
+    </Container>
+  );
+
   const savedSearchTitle = (
     <SavedSearchesTitle>
       {t('Saved Searches (will be removed)')}
       <QuestionTooltip
         icon="info"
-        title={t(
-          'Saved searches will be removed soon. For any you wish to return to, please save them as views.'
-        )}
+        title={toolTipContents}
         size="sm"
         position="top"
         skipWrapper
+        isHoverable
       />
     </SavedSearchesTitle>
   );
 
   return (
     <AddViewWrapper>
-      <Banner>
-        <BannerStar1 src={bannerStar} />
-        <BannerStar2 src={bannerStar} />
-        <BannerStar3 src={bannerStar} />
-        <Title>{t('Find what you need, faster')}</Title>
-        <SubTitle>
-          {t(
-            "Save your issue searches for quick access. Views are for your eyes only – no need to worry about messing up other team members' views."
-          )}
-        </SubTitle>
-        <FeedbackButton />
-      </Banner>
+      <AddViewBanner hasSavedSearches={savedSearches && savedSearches.length !== 0} />
       <SearchSuggestionList
         title={'Recommended Searches'}
         searchSuggestions={RECOMMENDED_SEARCHES}
@@ -93,6 +94,71 @@ function AddViewPage({savedSearches}: {savedSearches: SavedSearch[]}) {
   );
 }
 
+function AddViewBanner({hasSavedSearches}: {hasSavedSearches: boolean}) {
+  const organization = useOrganization();
+
+  const {isPromptDismissed, dismissPrompt} = usePrompt({
+    feature: 'issue_views_add_view_banner',
+    organization,
+  });
+
+  return !isPromptDismissed ? (
+    <Banner>
+      <BannerStar1 src={bannerStar} />
+      <BannerStar2 src={bannerStar} />
+      <BannerStar3 src={bannerStar} />
+      <Title>
+        {t('Welcome to the new Issue Views experience (Early Adopter only)')}
+        <DismissButton
+          analyticsEventKey="issue_views.add_view.banner_dismissed"
+          analyticsEventName="'Issue Views: Add View Banner Dismissed"
+          size="zero"
+          borderless
+          icon={<IconClose size="xs" />}
+          aria-label={t('Dismiss')}
+          onClick={() => dismissPrompt()}
+        />
+      </Title>
+      <SubTitle>
+        <div>
+          {t(
+            'Issues just got a lot more personalized! Save your frequent issue searches for quick access.'
+          )}
+        </div>
+        <div>{t('A few notes before you get started:')}</div>
+        <AFewNotesList>
+          <li>
+            <BannerNoteBold>{t('Views are for your eyes only. ')}</BannerNoteBold>
+            {t("No need to worry about messing up other team members' views")}
+          </li>
+          <li>
+            <BannerNoteBold>{t('Drag your views to reorder. ')}</BannerNoteBold>{' '}
+            {t('The leftmost view is your “default” experience')}
+          </li>
+          {hasSavedSearches && (
+            <li>
+              <BannerNoteBold>
+                {t('Saved searches will be deprecated in the future. ')}
+              </BannerNoteBold>{' '}
+              {t(
+                'You can save them as views from the list below (only appears if you have saved searches)'
+              )}
+            </li>
+          )}
+        </AFewNotesList>
+      </SubTitle>
+      <FittedLinkButton
+        size="sm"
+        href="https://docs.sentry.io/product/issues/issue-views"
+        external
+      >
+        {t('Read Docs')}
+      </FittedLinkButton>
+      <FeedbackButton />
+    </Banner>
+  ) : null;
+}
+
 function SearchSuggestionList({
   title,
   searchSuggestions,
@@ -101,6 +167,15 @@ function SearchSuggestionList({
   const {onNewViewsSaved} = useContext(NewTabContext);
   const organization = useOrganization();
 
+  const analyticsKey =
+    type === 'recommended'
+      ? 'issue_views.add_view.recommended_view_saved'
+      : 'issue_views.add_view.saved_search_saved';
+  const analyticsEventName =
+    type === 'recommended'
+      ? 'Issue Views: Recommended View Saved'
+      : 'Issue Views: Saved Search Saved';
+
   return (
     <Suggestions>
       <TitleWrapper>
@@ -149,10 +224,6 @@ function SearchSuggestionList({
                   saveQueryToView: false,
                 },
               ]);
-              const analyticsKey =
-                type === 'recommended'
-                  ? 'issue_views.add_view.recommended_view_saved'
-                  : 'issue_views.add_view.saved_search_saved';
               trackAnalytics(analyticsKey, {
                 organization,
                 persisted: false,
@@ -181,16 +252,13 @@ function SearchSuggestionList({
                         saveQueryToView: true,
                       },
                     ]);
-                    const analyticsKey =
-                      type === 'recommended'
-                        ? 'issue_views.add_view.recommended_view_saved'
-                        : 'issue_views.add_view.saved_search_saved';
-                    trackAnalytics(analyticsKey, {
-                      organization,
-                      persisted: true,
-                      label: suggestion.label,
-                      query: suggestion.query,
-                    });
+                  }}
+                  analyticsEventKey={analyticsKey}
+                  analyticsEventName={analyticsEventName}
+                  analyticsParams={{
+                    persisted: true,
+                    label: suggestion.label,
+                    query: suggestion.query,
                   }}
                   borderless
                 >
@@ -347,9 +415,17 @@ const Title = styled('div')`
   font-weight: ${p => p.theme.fontWeightBold};
 `;
 
+const BannerNoteBold = styled('div')`
+  display: inline;
+  font-weight: ${p => p.theme.fontWeightBold};
+`;
+
 const SubTitle = styled('div')`
+  display: flex;
+  flex-direction: column;
   font-weight: ${p => p.theme.fontWeightNormal};
   font-size: ${p => p.theme.fontSizeMedium};
+  gap: ${space(0.5)};
 `;
 
 const AddViewWrapper = styled('div')`
@@ -399,3 +475,26 @@ const ConfirmModalMessage = styled('div')`
   justify-content: center;
   font-weight: ${p => p.theme.fontWeightBold};
 `;
+
+const Container = styled('div')`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  gap: ${space(1)};
+`;
+
+const AFewNotesList = styled('ul')`
+  margin-bottom: ${space(0.5)};
+`;
+
+const FittedLinkButton = styled(LinkButton)`
+  width: fit-content;
+`;
+
+const DismissButton = styled(Button)`
+  position: absolute;
+  top: ${space(1)};
+  right: ${space(1)};
+  color: ${p => p.theme.subText};
+`;