feat(replay): Show tooltips of OS & Browser: name & version on Replay…

… List & Details pages (#55508) Tooltips in all the places: | Page | OS | Browser | | --- | --- | --- | | List | ![SCR-20230830-nway](https://github.com/getsentry/sentry/assets/187460/ad543e70-eeba-4c27-98d4-a98cb94d01e2) | ![SCR-20230830-nuzx](https://github.com/getsentry/sentry/assets/187460/43c693e9-a33b-4712-a8fe-6f4204c4b417) | | Details | ![SCR-20230830-nvap](https://github.com/getsentry/sentry/assets/187460/e73bd727-4edc-4bd8-b82d-3c29952ac348) | ![SCR-20230830-nvaz](https://github.com/getsentry/sentry/assets/187460/eab53c2b-6eb4-4cb2-b140-f78bacaf50fa) | Sometimes the OS version doesn't exist: ![SCR-20230830-nxra](https://github.com/getsentry/sentry/assets/187460/ef4e945a-64ea-4209-8328-713065696ac3) I experimented with linebreaks but don't like it. This is not shipping: ![SCR-20230830-nusx](https://github.com/getsentry/sentry/assets/187460/aee5d6d5-c192-4462-8ef0-4307b34d17be)
getsentry · Aug 31, 2023 · e5c3f05 · e5c3f05
1 parent 2ad7aac
commit e5c3f05
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/static/app/components/replays/header/replayMetaData.tsx b/static/app/components/replays/header/replayMetaData.tsx
@@ -5,6 +5,7 @@ import ContextIcon from 'sentry/components/replays/contextIcon';
 import ErrorCounts from 'sentry/components/replays/header/errorCounts';
 import HeaderPlaceholder from 'sentry/components/replays/header/headerPlaceholder';
 import TimeSince from 'sentry/components/timeSince';
+import {Tooltip} from 'sentry/components/tooltip';
 import {IconCalendar} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -20,20 +21,24 @@ function ReplayMetaData({replayErrors, replayRecord}: Props) {
     <KeyMetrics>
       <KeyMetricLabel>{t('OS')}</KeyMetricLabel>
       <KeyMetricData>
-        <ContextIcon
-          name={replayRecord?.os.name ?? ''}
-          version={replayRecord?.os.version ?? undefined}
-          showVersion
-        />
+        <Tooltip title={`${replayRecord?.os.name} ${replayRecord?.os.version}`}>
+          <ContextIcon
+            name={replayRecord?.os.name ?? ''}
+            version={replayRecord?.os.version ?? undefined}
+            showVersion
+          />
+        </Tooltip>
       </KeyMetricData>
 
       <KeyMetricLabel>{t('Browser')}</KeyMetricLabel>
       <KeyMetricData>
-        <ContextIcon
-          name={replayRecord?.browser.name ?? ''}
-          version={replayRecord?.browser.version ?? undefined}
-          showVersion
-        />
+        <Tooltip title={`${replayRecord?.browser.name} ${replayRecord?.browser.version}`}>
+          <ContextIcon
+            name={replayRecord?.browser.name ?? ''}
+            version={replayRecord?.browser.version ?? undefined}
+            showVersion
+          />
+        </Tooltip>
       </KeyMetricData>
 
       <KeyMetricLabel>{t('Start Time')}</KeyMetricLabel>

diff --git a/static/app/views/replays/replayTable/tableCell.tsx b/static/app/views/replays/replayTable/tableCell.tsx
@@ -13,6 +13,7 @@ import {formatTime} from 'sentry/components/replays/utils';
 import StringWalker from 'sentry/components/replays/walker/stringWalker';
 import ScoreBar from 'sentry/components/scoreBar';
 import TimeSince from 'sentry/components/timeSince';
+import {Tooltip} from 'sentry/components/tooltip';
 import {CHART_PALETTE} from 'sentry/constants/chartPalette';
 import {IconCalendar, IconDelete, IconEllipsis, IconFire} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
@@ -460,15 +461,17 @@ export function OSCell({replay, showDropdownFilters}: Props) {
   return (
     <Item>
       <Container>
-        <ContextIcon
-          name={name ?? ''}
-          version={version && hasRoomForColumns ? version : undefined}
-          showVersion={false}
-          showTooltip={false}
-        />
-        {showDropdownFilters ? (
-          <OSBrowserDropdownFilter type="os" name={name} version={version} />
-        ) : null}
+        <Tooltip title={`${name} ${version}`}>
+          <ContextIcon
+            name={name ?? ''}
+            version={version && hasRoomForColumns ? version : undefined}
+            showVersion={false}
+            showTooltip={false}
+          />
+          {showDropdownFilters ? (
+            <OSBrowserDropdownFilter type="os" name={name} version={version} />
+          ) : null}
+        </Tooltip>
       </Container>
     </Item>
   );
@@ -485,15 +488,17 @@ export function BrowserCell({replay, showDropdownFilters}: Props) {
   return (
     <Item>
       <Container>
-        <ContextIcon
-          name={name ?? ''}
-          version={version && hasRoomForColumns ? version : undefined}
-          showVersion={false}
-          showTooltip={false}
-        />
-        {showDropdownFilters ? (
-          <OSBrowserDropdownFilter type="browser" name={name} version={version} />
-        ) : null}
+        <Tooltip title={`${name} ${version}`}>
+          <ContextIcon
+            name={name ?? ''}
+            version={version && hasRoomForColumns ? version : undefined}
+            showVersion={false}
+            showTooltip={false}
+          />
+          {showDropdownFilters ? (
+            <OSBrowserDropdownFilter type="browser" name={name} version={version} />
+          ) : null}
+        </Tooltip>
       </Container>
     </Item>
   );