From c49ddb105c3d8f6e51006e8e6d01bca90db75efe Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper <46740234+roggenkemper@users.noreply.github.com> Date: Wed, 12 Feb 2025 15:31:29 -0800 Subject: [PATCH] feat(issue-details): Add tag key to preview (#84488) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit this pr adds the tag key to the tag preview Screenshot 2025-02-10 at 1 48 46 PM --- .../utils/analytics/issueAnalyticsEvents.tsx | 2 + .../streamline/issueTagsPreview.spec.tsx | 4 +- .../streamline/issueTagsPreview.tsx | 69 ++++++++++++------- 3 files changed, 49 insertions(+), 26 deletions(-) diff --git a/static/app/utils/analytics/issueAnalyticsEvents.tsx b/static/app/utils/analytics/issueAnalyticsEvents.tsx index be05736f30dc9a..a0ad4be754ddab 100644 --- a/static/app/utils/analytics/issueAnalyticsEvents.tsx +++ b/static/app/utils/analytics/issueAnalyticsEvents.tsx @@ -132,6 +132,7 @@ export type IssueEventParameters = { content: string; }; 'issue_details.issue_status_docs_clicked': {}; + 'issue_details.issue_tags_click': {}; 'issue_details.performance.autogrouped_siblings_toggle': {}; 'issue_details.performance.hidden_spans_expanded': {}; 'issue_details.related_trace_issue.trace_issue_clicked': { @@ -391,6 +392,7 @@ export const issueEventMap: Record = { 'Issue Details: Escalating Issues Banner Feedback Received', 'issue_details.event_navigation_selected': 'Issue Details: Event Navigation Selected', 'issue_details.issue_content_selected': 'Issue Details: Issue Content Selected', + 'issue_details.issue_tags_click': 'Issue Details: Issue Tags Clicked', 'issue_details.similar_issues.diff_clicked': 'Issue Details: Similar Issues: Diff Clicked', 'issue_details.similar_issues.similarity_embeddings_feedback_recieved': diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx index 5ae6974dcdfe9a..438854fae263cf 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx @@ -24,9 +24,7 @@ describe('IssueTagsPreview', () => { ); expect(await screen.findByText('prod')).toBeInTheDocument(); - expect( - screen.getByRole('button', {name: 'View issue tag distributions'}) - ).toBeInTheDocument(); + expect(screen.getByRole('link', {name: 'View all tags'})).toBeInTheDocument(); }); it('renders no tags', async () => { diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx index 4e3151c7bde196..b352f7742effeb 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx @@ -16,9 +16,11 @@ import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Project} from 'sentry/types/project'; import {percent} from 'sentry/utils'; +import {trackAnalytics} from 'sentry/utils/analytics'; import {isMobilePlatform} from 'sentry/utils/platform'; import {useDetailedProject} from 'sentry/utils/useDetailedProject'; import {useLocation} from 'sentry/utils/useLocation'; +import useMedia from 'sentry/utils/useMedia'; import useOrganization from 'sentry/utils/useOrganization'; import {formatVersion} from 'sentry/utils/versions/formatVersion'; import type {GroupTag} from 'sentry/views/issueDetails/groupTags/useGroupTags'; @@ -142,6 +144,7 @@ function TagPreviewProgressBar({tag, groupId}: {groupId: string; tag: GroupTag}) setPrefetchTagValue(tag.key); }} > + {tag.key} @@ -154,10 +157,20 @@ function TagPreviewProgressBar({tag, groupId}: {groupId: string; tag: GroupTag}) ); } -function IssueTagButton({tags, searchQuery}: {tags: GroupTag[]; searchQuery?: string}) { +function IssueTagButton({ + tags, + searchQuery, + isScreenSmall, +}: { + tags: GroupTag[]; + isScreenSmall?: boolean; + searchQuery?: string; +}) { const {baseUrl} = useGroupDetailsRoute(); const location = useLocation(); - if (tags.length === 0 || searchQuery) { + const organization = useOrganization(); + + if (tags.length === 0 || searchQuery || isScreenSmall) { return ( - {t('All Tags')} + {t('View All Tags')} ); } return ( - { + trackAnalytics('issue_details.issue_tags_click', {organization}); + }} > - {t('All Tags')} - + {t('View all tags')} + ); } @@ -202,6 +213,8 @@ export default function IssueTagsPreview({ }) { const searchQuery = useEventQuery({groupId}); const organization = useOrganization(); + const theme = useTheme(); + const isScreenSmall = useMedia(`(max-width: ${theme.breakpoints.small})`); const {data: detailedProject, isPending: isHighlightPending} = useDetailedProject({ orgSlug: organization.slug, @@ -223,6 +236,7 @@ export default function IssueTagsPreview({ groupId, environment: environments, }); + const tagsToPreview = useMemo(() => { if (!tags) { return []; @@ -255,7 +269,7 @@ export default function IssueTagsPreview({ - + ); @@ -265,8 +279,14 @@ export default function IssueTagsPreview({ return null; } - if (tagsToPreview.length === 0 || searchQuery) { - return ; + if (tagsToPreview.length === 0 || searchQuery || isScreenSmall) { + return ( + + ); } return ( @@ -293,9 +313,9 @@ const IssueTagPreviewSection = styled('div')` `; const TagsPreview = styled('div')` - width: 240px; + width: 340px; display: grid; - grid-template-columns: 45% min-content auto; + grid-template-columns: auto 30% min-content auto; align-items: center; align-content: center; gap: 1px; @@ -387,13 +407,12 @@ const LegendTitle = styled('div')` margin-bottom: ${space(0.75)}; `; -const IssueTagsButton = styled(LinkButton)` - display: block; - flex: 0; - height: unset; - text-align: center; - span { - white-space: unset; +const IssueTagsLink = styled(Link)` + color: ${p => p.theme.purple300}; + align-self: flex-start; + + &:hover { + color: ${p => p.theme.purple400}; } `; @@ -416,3 +435,7 @@ const SectionDivider = styled('div')` align-items: center; margin: ${space(1)}; `; + +const TagKey = styled(TextOverflow)` + font-weight: bold; +`;