ref(highlights): More descriptive tooltips in streamlined UI (#79543)

Uses the name of the context to put more content in the tooltip. Before: <img width="169" alt="image" src="https://github.com/user-attachments/assets/bd8b8de8-e7cb-40fa-9609-0417adae9f83"> After: <img width="263" alt="image" src="https://github.com/user-attachments/assets/303b0174-3d2b-457b-a4a0-4aef92495946">
getsentry · Oct 22, 2024 · 243f086 · 243f086
1 parent 477e69f
commit 243f086
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/static/app/components/events/highlights/highlightsIconSummary.spec.tsx b/static/app/components/events/highlights/highlightsIconSummary.spec.tsx
@@ -54,19 +54,19 @@ describe('HighlightsIconSummary', function () {
     expect(screen.getByText('user email')).toBeInTheDocument();
     expect(screen.getByText('user username')).toBeInTheDocument();
     await userEvent.hover(screen.getByText('user username'));
-    expect(await screen.findByText('Username')).toBeInTheDocument();
+    expect(await screen.findByText('User Username')).toBeInTheDocument();
   });
 
   it('renders appropriate icons and text', async function () {
     render(<HighlightsIconSummary event={event} />);
     expect(screen.getByText('Mac OS X')).toBeInTheDocument();
     expect(screen.getByText('10.15')).toBeInTheDocument();
     await userEvent.hover(screen.getByText('10.15'));
-    expect(await screen.findByText('Version')).toBeInTheDocument();
+    expect(await screen.findByText('Operating System Version')).toBeInTheDocument();
     expect(screen.getByText('CPython')).toBeInTheDocument();
     expect(screen.getByText('3.8.13')).toBeInTheDocument();
     await userEvent.hover(screen.getByText('3.8.13'));
-    expect(await screen.findByText('Version')).toBeInTheDocument();
+    expect(await screen.findByText('Runtime Version')).toBeInTheDocument();
     expect(screen.getAllByRole('img')).toHaveLength(2);
   });
 
@@ -97,6 +97,6 @@ describe('HighlightsIconSummary', function () {
     expect(screen.getByText('iPhone 13')).toBeInTheDocument();
     expect(screen.getByText('x86')).toBeInTheDocument();
     await userEvent.hover(screen.getByText('x86'));
-    expect(await screen.findByText('Architecture')).toBeInTheDocument();
+    expect(await screen.findByText('Device Architecture')).toBeInTheDocument();
   });
 });
diff --git a/static/app/components/events/highlights/highlightsIconSummary.tsx b/static/app/components/events/highlights/highlightsIconSummary.tsx
@@ -3,7 +3,11 @@ import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/container/flex';
 import {getOrderedContextItems} from 'sentry/components/events/contexts';
-import {getContextIcon, getContextSummary} from 'sentry/components/events/contexts/utils';
+import {
+  getContextIcon,
+  getContextSummary,
+  getContextTitle,
+} from 'sentry/components/events/contexts/utils';
 import {ScrollCarousel} from 'sentry/components/scrollCarousel';
 import {Tooltip} from 'sentry/components/tooltip';
 import {space} from 'sentry/styles/space';
@@ -24,6 +28,7 @@ export function HighlightsIconSummary({event}: HighlightsIconSummaryProps) {
   const items = getOrderedContextItems(event)
     .map(({alias, type, value}) => ({
       ...getContextSummary({type, value}),
+      contextTitle: getContextTitle({alias, type, value}),
       alias,
       icon: getContextIcon({
         alias,
@@ -53,7 +58,9 @@ export function HighlightsIconSummary({event}: HighlightsIconSummaryProps) {
               <IconDescription>
                 <div>{item.title}</div>
                 {item.subtitle && (
-                  <IconSubtitle title={item.subtitleType}>{item.subtitle}</IconSubtitle>
+                  <IconSubtitle title={`${item.contextTitle} ${item.subtitleType}`}>
+                    {item.subtitle}
+                  </IconSubtitle>
                 )}
               </IconDescription>
             </Flex>