From e5c3f053aa18355ca9f6cfd1572952eb1f72d61d Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 31 Aug 2023 09:28:29 -0700
Subject: [PATCH] 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)
---
 .../replays/header/replayMetaData.tsx         | 25 ++++++-----
 .../views/replays/replayTable/tableCell.tsx   | 41 +++++++++++--------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/static/app/components/replays/header/replayMetaData.tsx b/static/app/components/replays/header/replayMetaData.tsx
index 72877c70371a98..75473ec81d8e78 100644
--- 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
index 51a965e35b9931..363a8096dc7fa5 100644
--- 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>
   );