feat(issue-details): Add tag key to preview (#84488)

this pr adds the tag key to the tag preview <img width="368" alt="Screenshot 2025-02-10 at 1 48 46 PM" src="https://github.com/user-attachments/assets/c513ba98-db2a-452c-baeb-4329e34f8c79" />
getsentry · Feb 12, 2025 · c49ddb1 · c49ddb1
1 parent 89234cf
commit c49ddb1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 26 deletions.
diff --git 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<IssueEventKey, string | null> = {
     '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
@@ -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
@@ -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);
         }}
       >
+        <TagKey>{tag.key}</TagKey>
         <TagBarPlaceholder>
           <SegmentedBar segments={segments} />
         </TagBarPlaceholder>
@@ -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 (
       <VerticalIssueTagsButton
         aria-label={t('View issue tag distributions')}
@@ -169,25 +182,23 @@ function IssueTagButton({tags, searchQuery}: {tags: GroupTag[]; searchQuery?: st
         replace
         disabled={tags.length === 0}
       >
-        {t('All Tags')}
+        {t('View All Tags')}
       </VerticalIssueTagsButton>
     );
   }
 
   return (
-    <IssueTagsButton
-      aria-label={t('View issue tag distributions')}
-      size="xs"
+    <IssueTagsLink
       to={{
         pathname: `${baseUrl}${TabPaths[Tab.TAGS]}`,
         query: location.query,
       }}
-      replace
-      analyticsEventKey="issue_details.issue_tags_clicked"
-      analyticsEventName="Issue Details: Issue Tags Clicked"
+      onClick={() => {
+        trackAnalytics('issue_details.issue_tags_click', {organization});
+      }}
     >
-      {t('All Tags')}
-    </IssueTagsButton>
+      {t('View all tags')}
+    </IssueTagsLink>
   );
 }
 
@@ -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({
       <Fragment>
         <SectionDivider />
         <IssueTagPreviewSection>
-          <Placeholder width="240px" height="100px" />
+          <Placeholder width="340px" height="90px" />
         </IssueTagPreviewSection>
       </Fragment>
     );
@@ -265,8 +279,14 @@ export default function IssueTagsPreview({
     return null;
   }
 
-  if (tagsToPreview.length === 0 || searchQuery) {
-    return <IssueTagButton tags={tagsToPreview} searchQuery={searchQuery} />;
+  if (tagsToPreview.length === 0 || searchQuery || isScreenSmall) {
+    return (
+      <IssueTagButton
+        tags={tagsToPreview}
+        searchQuery={searchQuery}
+        isScreenSmall={isScreenSmall}
+      />
+    );
   }
 
   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;
+`;