diff --git a/static/app/utils/analytics/issueAnalyticsEvents.tsx b/static/app/utils/analytics/issueAnalyticsEvents.tsx index ef04c6cae21ca2..456d3aeb1c766e 100644 --- a/static/app/utils/analytics/issueAnalyticsEvents.tsx +++ b/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 = { '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', diff --git a/static/app/views/issueList/addViewPage.tsx b/static/app/views/issueList/addViewPage.tsx index e74adfdc674e1d..bcfe40638ae605 100644 --- a/static/app/views/issueList/addViewPage.tsx +++ b/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 = ( + + {t( + 'Saved searches will be deprecated soon. For any you wish to return to, please save them as views.' + )} + + {t('Learn More')} + + + ); + const savedSearchTitle = ( {t('Saved Searches (will be deprecated)')} ); return ( - - - - - {t('Find what you need, faster')} - - {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." - )} - - - + + + + + + {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()} + /> + + +
+ {t( + 'Issues just got a lot more personalized! Save your frequent issue searches for quick access.' + )} +
+
{t('A few notes before you get started:')}
+ +
  • + Views are for your eyes only. No need to worry about messing up other + team members' views +
    • +
  • + Drag your views to reorder. The leftmost view is your “default” + experience +
    • + {hasSavedSearches && ( +
  • + Custom searches will be deprecated in the future. You can save them + as views from the list below (only appears if you have custom searches) +
    • + )} +     +     + + {t('Read Docs')} + + + + ) : 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 ( {title} @@ -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}; +`;