From 2bca64e7680ce3d2939ff6800cb91427d0db0ab3 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 15 Jul 2025 08:59:33 -0700
Subject: [PATCH] feat(replay): Unify the tooltips into one for replay details
 os/browser

---
 .../views/replays/detail/browserOSIcons.tsx   | 79 +++++++++++++------
 1 file changed, 53 insertions(+), 26 deletions(-)

diff --git a/static/app/views/replays/detail/browserOSIcons.tsx b/static/app/views/replays/detail/browserOSIcons.tsx
index 883992c1d8317c..5980be31482d4d 100644
--- a/static/app/views/replays/detail/browserOSIcons.tsx
+++ b/static/app/views/replays/detail/browserOSIcons.tsx
@@ -1,11 +1,15 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import {PlatformIcon} from 'platformicons';
 
 import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import Placeholder from 'sentry/components/placeholder';
+import CountTooltipContent from 'sentry/components/replays/countTooltipContent';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import ReplayPlatformIcon from 'sentry/components/replays/replayPlatformIcon';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {generatePlatformIconName} from 'sentry/utils/replays/generatePlatformIconName';
 
 export default function BrowserOSIcons({
   showBrowser = true,
@@ -17,33 +21,56 @@ export default function BrowserOSIcons({
   const {replay} = useReplayContext();
   const replayRecord = replay?.getReplay();
 
-  return isLoading ? (
-    <Placeholder width="50px" height="32px" />
-  ) : (
-    <Flex direction="row-reverse">
-      <Tooltip title={`${replayRecord?.os.name ?? ''} ${replayRecord?.os.version ?? ''}`}>
-        <ReplayPlatformIcon
-          name={replayRecord?.os.name ?? ''}
-          version={replayRecord?.os.version ?? undefined}
-          showVersion
-        />
+  if (isLoading) {
+    return <Placeholder width="34px" height="20px" />;
+  }
+
+  if (!replayRecord) {
+    return (
+      <Tooltip title={t('Unknown Device')}>
+        <PlatformIcon platform="unknown" size="20px" />
       </Tooltip>
-      {showBrowser && (
-        <Overlap>
-          <Tooltip
-            title={`${replayRecord?.browser.name ?? ''} ${
-              replayRecord?.browser.version ?? ''
-            }`}
-          >
-            <ReplayPlatformIcon
-              name={replayRecord?.browser.name ?? ''}
-              version={replayRecord?.browser.version ?? undefined}
-              showVersion
+    );
+  }
+
+  return (
+    <Tooltip
+      title={
+        <CountTooltipContent>
+          {showBrowser && (
+            <Fragment>
+              <dt>{t('Browser:')}</dt>
+              <dd>{`${replayRecord?.browser.name ?? ''} ${replayRecord?.browser.version ?? ''}`}</dd>
+            </Fragment>
+          )}
+          <dt>{t('OS:')}</dt>
+          <dd>
+            {replayRecord?.os.name ?? ''} {replayRecord?.os.version ?? ''}
+          </dd>
+        </CountTooltipContent>
+      }
+    >
+      <Flex>
+        {showBrowser && (
+          <Overlap>
+            <PlatformIcon
+              platform={generatePlatformIconName(
+                replayRecord?.browser.name ?? '',
+                replayRecord?.browser.version ?? undefined
+              )}
+              size="20px"
             />
-          </Tooltip>
-        </Overlap>
-      )}
-    </Flex>
+          </Overlap>
+        )}
+        <PlatformIcon
+          platform={generatePlatformIconName(
+            replayRecord?.os.name ?? '',
+            replayRecord?.os.version ?? undefined
+          )}
+          size="20px"
+        />
+      </Flex>
+    </Tooltip>
   );
 }