feat(issue-views): Update banner and tooltip copy, make banner dismissable, feedback -> read docs

static/app/utils/analytics/issueAnalyticsEvents.tsx

@@ -221,6 +221,7 @@ export type IssueEventParameters = {
     search_source: string;
     search_type: string;
   };
+  'issue_views.add_view.banner_dismissed': {};
   'issue_views.add_view.clicked': {};
   'issue_views.add_view.custom_query_saved': {
     query: string;
@@ -386,6 +387,7 @@ export const issueEventMap: Record<IssueEventKey, string | null> = {
     'Issue Views: Custom Query Saved From Add View',
   'issue_views.add_view.saved_search_saved': 'Issue Views: Saved Search 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',

static/app/views/issueList/addViewPage.tsx

@@ -3,11 +3,13 @@ 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 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} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {SavedSearch} from 'sentry/types/group';
@@ -42,35 +44,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 deprecated)')}
       <QuestionTooltip
         icon="info"
-        title={t(
-          'Saved searches will be deprecated 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}
@@ -92,6 +93,67 @@ 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>
+            <b>Views are for your eyes only.</b> No need to worry about messing up other
+            team members' views
+          </li>
+          <li>
+            <b>Drag your views to reorder.</b> The leftmost view is your “default”
+            experience
+          </li>
+          {hasSavedSearches && (
+            <li>
+              <b>Custom searches will be deprecated in the future. </b> You can save them
+              as views from the list below (only appears if you have custom 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,
@@ -100,6 +162,15 @@ function SearchSuggestionList({
   const {onNewViewSaved} = 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>{title}</TitleWrapper>
@@ -109,10 +180,6 @@ function SearchSuggestionList({
             key={index}
             onClick={() => {
               onNewViewSaved?.(suggestion.label, suggestion.query, false);
-              const analyticsKey =
-                type === 'recommended'
-                  ? 'issue_views.add_view.recommended_view_saved'
-                  : 'issue_views.add_view.saved_search_saved';
               trackAnalytics(analyticsKey, {
                 organization,
                 persisted: false,
@@ -136,16 +203,13 @@ function SearchSuggestionList({
                   onClick={e => {
                     e.stopPropagation();
                     onNewViewSaved?.(suggestion.label, suggestion.query, 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
                 >
@@ -289,8 +353,11 @@ const Title = styled('div')`
 `;
 
 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')`
@@ -334,3 +401,26 @@ const BannerStar3 = styled('img')`
     display: none;
   }
 `;
+
+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};
+`;