ref(replay): replace replays/contextIcon import with PlatformIcon (#74173)

Fixes https://github.com/getsentry/sentry/issues/73945

Bumping to the latest version of [the platformicons
package](https://www.npmjs.com/package/platformicons?activeTab=code),
since the current one doesn't have Chrome, Safari, and maybe some
others.

I kinda eye-balled the size, when using 14 the new icons were clearly
smaller than the old.
ContextIcon, 14px:
<img width="122" alt="Screenshot 2024-07-12 at 10 29 24 AM"
src="https://github.com/user-attachments/assets/f075caa5-827b-4f00-b4bb-ced00a3e28e6">
PlatformIcon (NEW), 18px: Didn't translate the name for edge here, but
it should work in the preview deployment
<img width="119" alt="Screenshot 2024-07-12 at 10 29 49 AM"
src="https://github.com/user-attachments/assets/e97dec01-05c0-4b8d-9fab-bad3845c81d8">

TODO:
- [x] translate "mac-os-x" to "apple", and check other names.
- [x] can maybe write a new function to replace
`events/contexts/utils/generateIconName`
- [ ] use lazy loading like before. Is this necessary? I was getting
type errors in the lazy() statement earlier

package.json

@@ -140,7 +140,7 @@
     "papaparse": "^5.3.2",
     "pegjs": "^0.10.0",
     "pegjs-loader": "^0.5.6",
-    "platformicons": "^5.10.9",
+    "platformicons": "^6.0.1",
     "po-catalog-loader": "2.0.0",
     "prettier": "3.3.2",
     "prismjs": "^1.29.0",
@@ -263,9 +263,7 @@
       "last 3 iOS major versions",
       "Firefox ESR"
     ],
-    "test": [
-      "current node"
-    ]
+    "test": ["current node"]
   },
   "volta": {
     "extends": ".volta.json"

static/app/components/replays/contextIcon.tsx

@@ -1,12 +1,12 @@
-import {lazy, Suspense} from 'react';
 import styled from '@emotion/styled';
+import {PlatformIcon} from 'platformicons';
 
-import {generateIconName} from 'sentry/components/events/contexts/utils';
-import LoadingMask from 'sentry/components/loadingMask';
 import CountTooltipContent from 'sentry/components/replays/countTooltipContent';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {generatePlatformIconName} from 'sentry/utils/replays/generatePlatformIconName';
+import commonTheme from 'sentry/utils/theme';
 
 type Props = {
   name: string;
@@ -16,20 +16,17 @@ type Props = {
   showVersion?: boolean;
 };
 
-const LazyContextIcon = lazy(
-  () => import('sentry/components/events/contexts/contextIcon')
-);
+const iconSize = '16px';
+const iconStyle = {
+  border: '1px solid ' + commonTheme.translucentGray100,
+};
 
 const ContextIcon = styled(
   ({className, name, version, showVersion, showTooltip}: Props) => {
-    const icon = generateIconName(name, version);
+    const icon = generatePlatformIconName(name, version);
 
     if (!showTooltip) {
-      return (
-        <Suspense fallback={<LoadingMask />}>
-          <LazyContextIcon name={icon} size="sm" />
-        </Suspense>
-      );
+      return <PlatformIcon platform={icon} size={iconSize} style={iconStyle} />;
     }
 
     const title = (
@@ -42,9 +39,7 @@ const ContextIcon = styled(
     );
     return (
       <Tooltip title={title} className={className}>
-        <Suspense fallback={<LoadingMask />}>
-          <LazyContextIcon name={icon} size="sm" />
-        </Suspense>
+        <PlatformIcon platform={icon} size={iconSize} style={iconStyle} />
         {showVersion ? (version ? version : null) : undefined}
       </Tooltip>
     );

static/app/utils/replays/generatePlatformIconName.tsx

@@ -0,0 +1,32 @@
+import {generateIconName} from 'sentry/components/events/contexts/utils';
+
+const PLATFORM_ALIASES = {
+  ios: 'apple',
+  mac: 'apple',
+  macos: 'apple',
+  'mac-os-x': 'apple',
+  darwin: 'apple',
+  tvos: 'apple-tv',
+  watchos: 'apple-watch',
+  iphone: 'apple-iphone',
+  ipad: 'apple-ipad',
+  'legacy-edge': 'edge-legacy',
+  'mobile-safari': 'safari',
+  'chrome-mobile-ios': 'chrome',
+  'google-chrome': 'chrome',
+  'chrome-os': 'chrome',
+  net: 'dotnet',
+  'net-core': 'dotnetcore',
+  'net-framework': 'dotnetframework',
+};
+
+/**
+ * Generates names used for PlatformIcon. Translates ContextIcon names (https://sentry.sentry.io/stories/?name=app/components/events/contexts/contextIcon.stories.tsx) to PlatformIcon (https://www.npmjs.com/package/platformicons) names
+ */
+export function generatePlatformIconName(
+  name: string,
+  version: string | undefined
+): string {
+  const contextName = generateIconName(name, version);
+  return contextName in PLATFORM_ALIASES ? PLATFORM_ALIASES[contextName] : contextName;
+}

yarn.lock

@@ -9565,10 +9565,10 @@ platform@^1.3.3:
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
-platformicons@^5.10.9:
-  version "5.10.9"
-  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-5.10.9.tgz#ca0ceb6309321f11e8ee0317c4193b77448948f3"
-  integrity sha512-QzDUFxOIK8VPpj+uHXbps7q+VgQmI3uAt+hlMZl5fSVWR0guOEJTaNXQFwCsgrOCz82udIUX8F4jRNDrsZPHzg==
+platformicons@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-6.0.1.tgz#69e2cc1a1fe1533804e8223f9382295379db8bca"
+  integrity sha512-RaT4+NfxuV2nqFxAZNaksa1UXKZS5QXdtvFc2y9A4Sp5Blt888jbSQJ7mUcmjw+Aqoq6oyz2cQvOCf4uymSizA==
   dependencies:
     "@types/node" "*"
     "@types/react" "*"