Skip to content

Commit 322df30

Browse files
authored
fix(replay): Do not show a Browser icon for mobile replays in the replay list (#92419)
**Before** ![SCR-20250527-jsau](https://github.com/user-attachments/assets/c355dcc9-5738-4180-8ea3-145a13c3c1e0) **After** ![SCR-20250529-nkjr](https://github.com/user-attachments/assets/848c6556-c107-4cd1-9bd0-5e9cd89354ba) Fixes REPLAY-229
1 parent 409dbd5 commit 322df30

File tree

3 files changed

+20
-10
lines changed

3 files changed

+20
-10
lines changed

static/app/components/replays/platformIcon.tsx renamed to static/app/components/replays/replayPlatformIcon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const iconStyle = (theme: Theme) => ({
2222
border: '1px solid ' + theme.translucentGray100,
2323
});
2424

25-
const PlatformIcon = styled(
25+
const ReplayPlatformIcon = styled(
2626
({className, name, version, showVersion, showTooltip}: Props) => {
2727
const theme = useTheme();
2828
const icon = generatePlatformIconName(name, version);
@@ -55,4 +55,4 @@ const PlatformIcon = styled(
5555
align-items: center;
5656
`;
5757

58-
export default PlatformIcon;
58+
export default ReplayPlatformIcon;

static/app/views/replays/detail/browserOSIcons.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import {Fragment} from 'react';
22

33
import {Tooltip} from 'sentry/components/core/tooltip';
44
import Placeholder from 'sentry/components/placeholder';
5-
import PlatformIcon from 'sentry/components/replays/platformIcon';
65
import {useReplayContext} from 'sentry/components/replays/replayContext';
6+
import ReplayPlatformIcon from 'sentry/components/replays/replayPlatformIcon';
77

88
export default function BrowserOSIcons({
99
showBrowser = true,
@@ -20,7 +20,7 @@ export default function BrowserOSIcons({
2020
) : (
2121
<Fragment>
2222
<Tooltip title={`${replayRecord?.os.name ?? ''} ${replayRecord?.os.version ?? ''}`}>
23-
<PlatformIcon
23+
<ReplayPlatformIcon
2424
name={replayRecord?.os.name ?? ''}
2525
version={replayRecord?.os.version ?? undefined}
2626
showVersion
@@ -32,7 +32,7 @@ export default function BrowserOSIcons({
3232
replayRecord?.browser.version ?? ''
3333
}`}
3434
>
35-
<PlatformIcon
35+
<ReplayPlatformIcon
3636
name={replayRecord?.browser.name ?? ''}
3737
version={replayRecord?.browser.version ?? undefined}
3838
showVersion

static/app/views/replays/replayTable/tableCell.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {Tooltip} from 'sentry/components/core/tooltip';
99
import {DropdownMenu} from 'sentry/components/dropdownMenu';
1010
import Duration from 'sentry/components/duration/duration';
1111
import Link from 'sentry/components/links/link';
12-
import PlatformIcon from 'sentry/components/replays/platformIcon';
12+
import ReplayPlatformIcon from 'sentry/components/replays/replayPlatformIcon';
1313
import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButton';
1414
import ScoreBar from 'sentry/components/scoreBar';
1515
import TimeSince from 'sentry/components/timeSince';
@@ -19,6 +19,7 @@ import {
1919
IconDelete,
2020
IconEllipsis,
2121
IconFire,
22+
IconNot,
2223
IconPlay,
2324
} from 'sentry/icons';
2425
import {t, tct} from 'sentry/locale';
@@ -489,7 +490,7 @@ export function TransactionCell({
489490
}
490491

491492
export function OSCell({replay, showDropdownFilters}: Props) {
492-
const {name, version} = replay.os ?? {};
493+
const {name, version} = replay.os;
493494
const theme = useTheme();
494495
const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.large})`);
495496

@@ -500,7 +501,7 @@ export function OSCell({replay, showDropdownFilters}: Props) {
500501
<Item>
501502
<Container>
502503
<Tooltip title={`${name ?? ''} ${version ?? ''}`}>
503-
<PlatformIcon
504+
<ReplayPlatformIcon
504505
name={name ?? ''}
505506
version={version && hasRoomForColumns ? version : undefined}
506507
showVersion={false}
@@ -516,18 +517,27 @@ export function OSCell({replay, showDropdownFilters}: Props) {
516517
}
517518

518519
export function BrowserCell({replay, showDropdownFilters}: Props) {
519-
const {name, version} = replay.browser ?? {};
520+
const {name, version} = replay.browser;
520521
const theme = useTheme();
521522
const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.large})`);
522523

523524
if (replay.is_archived) {
524525
return <Item isArchived />;
525526
}
527+
528+
if (name === null && version === null) {
529+
return (
530+
<Item>
531+
{/* <Tag icon={<IconNot />} /> */}
532+
<IconNot size="xs" color="gray300" />
533+
</Item>
534+
);
535+
}
526536
return (
527537
<Item>
528538
<Container>
529539
<Tooltip title={`${name} ${version}`}>
530-
<PlatformIcon
540+
<ReplayPlatformIcon
531541
name={name ?? ''}
532542
version={version && hasRoomForColumns ? version : undefined}
533543
showVersion={false}

0 commit comments

Comments
 (0)