Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(replay): Read the has_viewed field on replay records and reflect that in the list #67951

Merged
merged 7 commits into from
Apr 11, 2024
Merged

feat(replay): Read the has_viewed field on replay records and reflect that in the list #67951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9b6b572
feat(replay): Read the has_seen field on replay records and reflect t…
ryan953 Mar 29, 2024
8ad70a7
rename from has_seen to has_viewed
ryan953 Mar 29, 2024
2a64afe
Update types.tsx
ryan953 Apr 10, 2024
6712a1c
better control spacing between username and project
ryan953 Apr 11, 2024
2a79ff5
ask for has_viewed field
ryan953 Apr 11, 2024
0aa4a30
fix test stubs
ryan953 Apr 11, 2024
aa6fd42
include field in test
ryan953 Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions fixtures/js-stubs/replayList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export function ReplayListFixture(
count_errors: 0,
duration: duration(30000),
finished_at: new Date('2022-09-15T06:54:00+00:00'),
has_viewed: false,
id: '346789a703f6454384f1de473b8b9fcc',
is_archived: false,
os: {
Expand Down
1 change: 1 addition & 0 deletions fixtures/js-stubs/replayRecord.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export function ReplayRecordFixture(
environment: 'demo',
error_ids: ['5c83aaccfffb4a708ae893bad9be3a1c'],
finished_at: new Date('Sep 22, 2022 5:00:03 PM UTC'),
has_viewed: false,
id: '761104e184c64d439ee1014b72b4d83b',
is_archived: false,
os: {
Expand Down
5 changes: 5 additions & 0 deletions static/app/utils/replays/replayDataUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import isValidDate from 'sentry/utils/date/isValidDate';
import getMinMax from 'sentry/utils/getMinMax';
import type {ReplayRecord} from 'sentry/views/replays/types';

const defaultValues = {
has_viewed: false,
};

export function mapResponseToReplayRecord(apiResponse: any): ReplayRecord {
// Marshal special fields into tags
const user = Object.fromEntries(
Expand Down Expand Up @@ -40,6 +44,7 @@ export function mapResponseToReplayRecord(apiResponse: any): ReplayRecord {
const finishedAt = new Date(apiResponse.finished_at);
invariant(isValidDate(finishedAt), 'replay.finished_at is invalid');
return {
...defaultValues,
...apiResponse,
...(apiResponse.started_at ? {started_at: startedAt} : {}),
...(apiResponse.finished_at ? {finished_at: finishedAt} : {}),
Expand Down
1 change: 1 addition & 0 deletions static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ describe('GroupReplays', () => {
'count_rage_clicks',
'duration',
'finished_at',
'has_viewed',
'id',
'is_archived',
'os',
Expand Down
53 changes: 37 additions & 16 deletions static/app/views/replays/replayTable/tableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import styled from '@emotion/styled';
import type {Location} from 'history';

import Avatar from 'sentry/components/avatar';
import UserAvatar from 'sentry/components/avatar/userAvatar';
import {Button} from 'sentry/components/button';
import {DropdownMenu} from 'sentry/components/dropdownMenu';
import UserBadge from 'sentry/components/idBadge/userBadge';
import Link from 'sentry/components/links/link';
import ContextIcon from 'sentry/components/replays/contextIcon';
import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButton';
Expand Down Expand Up @@ -374,21 +374,25 @@ export function ReplayCell({

return (
<Item isWidget={isWidget} isReplayCell className={className}>
<UserBadge
avatarSize={24}
displayName={
replay.is_archived ? (
replay.user.display_name || t('Anonymous User')
) : (
<MainLink to={detailsTab} onClick={trackNavigationEvent}>
{replay.user.display_name || t('Anonymous User')}
</MainLink>
)
}
user={getUserBadgeUser(replay)}
// this is the subheading for the avatar, so displayEmail in this case is a misnomer
displayEmail={subText}
/>
<Row gap={1}>
<UserAvatar user={getUserBadgeUser(replay)} size={24} />
<SubText>
Comment on lines +378 to +379
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this look different than using UserBadge?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's looking the same to me:

SCR-20240411-ivmn

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'll followup soon with some stories to differentiate the avatar stuff. There's too many components related to that :(

<Row gap={0.5}>
{replay.is_archived ? (
replay.user.display_name || t('Anonymous User')
) : (
<MainLink
to={detailsTab}
onClick={trackNavigationEvent}
data-has-viewed={replay.has_viewed}
>
{replay.user.display_name || t('Anonymous User')}
</MainLink>
)}
</Row>
<Row gap={0.5}>{subText}</Row>
</SubText>
</Row>
</Item>
);
}
Expand Down Expand Up @@ -417,6 +421,23 @@ const Row = styled('div')<{gap: ValidSize; minWidth?: number}>`

const MainLink = styled(Link)`
font-size: ${p => p.theme.fontSizeLarge};
line-height: normal;
${p => p.theme.overflowEllipsis};

font-weight: bold;
&[data-has-viewed='true'] {
font-weight: normal;
}
`;

const SubText = styled('div')`
font-size: 0.875em;
line-height: normal;
color: ${p => p.theme.gray300};
${p => p.theme.overflowEllipsis};
display: flex;
flex-direction: column;
gap: ${space(0.25)};
`;

export function TransactionCell({
Expand Down
6 changes: 6 additions & 0 deletions static/app/views/replays/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export type ReplayRecord = {
* The **latest** timestamp received as determined by the SDK.
*/
finished_at: Date;
/**
* Whether the currently authenticated user has seen this replay or not.
*/
has_viewed: boolean;
/**
* The ID of the Replay instance
*/
Expand Down Expand Up @@ -120,6 +124,7 @@ export const REPLAY_LIST_FIELDS = [
'count_rage_clicks',
'duration',
'finished_at',
'has_viewed',
'id',
'is_archived',
'os.name',
Expand All @@ -139,6 +144,7 @@ export type ReplayListRecord = Pick<
| 'count_rage_clicks'
| 'duration'
| 'finished_at'
| 'has_viewed'
| 'id'
| 'is_archived'
| 'os'
Expand Down
Loading