fix(issue-details): Add viewer/particpant last seen back

static/app/components/group/streamlinedParticipantList.spec.tsx → static/app/views/issueDetails/streamline/sidebar/participantList.spec.tsx

@@ -3,12 +3,22 @@ import {UserFixture} from 'sentry-fixture/user';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import ParticipantList from 'sentry/components/group/streamlinedParticipantList';
+import ParticipantList from 'sentry/views/issueDetails/streamline/sidebar/participantList';
 
 describe('ParticipantList', () => {
   const users = [
-    UserFixture({id: '1', name: 'John Doe', email: 'john.doe@example.com'}),
-    UserFixture({id: '2', name: 'Bob Alice', email: 'bob.alice@example.com'}),
+    UserFixture({
+      id: '1',
+      name: 'John Doe',
+      email: 'john.doe@example.com',
+      lastSeen: '2024-01-01T00:00:00.000Z',
+    }),
+    UserFixture({
+      id: '2',
+      name: 'Bob Alice',
+      email: 'bob.alice@example.com',
+      lastSeen: '2024-01-02T00:00:00.000Z',
+    }),
   ];
 
   const teams = [
@@ -47,4 +57,16 @@ describe('ParticipantList', () => {
     // Would find two elements if it was duplicated
     expect(await screen.findByText('john.doe@example.com')).toBeInTheDocument();
   });
+
+  it('displays information about last seen, if available', async () => {
+    render(<ParticipantList users={users} teams={teams} />);
+    await userEvent.click(screen.getByText('JD'), {skipHover: true});
+    expect(await screen.findByText('John Doe')).toBeInTheDocument();
+    expect(await screen.findByText('Jan 1, 2024 12:00 AM')).toBeInTheDocument();
+    expect(await screen.findByText('Bob Alice')).toBeInTheDocument();
+    expect(await screen.findByText('Jan 2, 2024 12:00 AM')).toBeInTheDocument();
+    // Still display teams/users without timestamps
+    expect(await screen.findByText('#team-1')).toBeInTheDocument();
+    expect(await screen.findByText('#team-2')).toBeInTheDocument();
+  });
 });

static/app/components/group/streamlinedParticipantList.tsx → static/app/views/issueDetails/streamline/sidebar/participantList.tsx

@@ -1,15 +1,18 @@
+import {Fragment} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import Avatar from 'sentry/components/avatar';
 import AvatarList from 'sentry/components/avatar/avatarList';
 import TeamAvatar from 'sentry/components/avatar/teamAvatar';
 import {Button} from 'sentry/components/button';
+import {DateTime} from 'sentry/components/dateTime';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Team} from 'sentry/types/organization';
-import type {User} from 'sentry/types/user';
+import type {AvatarUser, User} from 'sentry/types/user';
+import {userDisplayName} from 'sentry/utils/formatters';
 import useOverlay from 'sentry/utils/useOverlay';
 
 interface DropdownListProps {
@@ -35,6 +38,13 @@ export default function ParticipantList({users, teams}: DropdownListProps) {
           users={users}
           avatarSize={24}
           maxVisibleAvatars={3}
+          renderTooltip={user => (
+            <Fragment>
+              {userDisplayName(user)}
+              <br />
+              <LastSeen date={(user as AvatarUser).lastSeen} />
+            </Fragment>
+          )}
         />
       </Button>
       {isOpen && (
@@ -66,6 +76,7 @@ export default function ParticipantList({users, teams}: DropdownListProps) {
                     {user.email !== user.name ? (
                       <SmallText>{user.email}</SmallText>
                     ) : null}
+                    <LastSeen date={(user as AvatarUser).lastSeen} />
                   </NameWrapper>
                 </UserRow>
               ))}
@@ -128,3 +139,8 @@ const StyledAvatarList = styled(AvatarList)`
   justify-content: flex-end;
   padding-left: ${space(0.75)};
 `;
+
+const LastSeen = styled(DateTime)`
+  color: ${p => p.theme.subText};
+  font-size: ${p => p.theme.fontSizeExtraSmall};
+`;

static/app/views/issueDetails/streamline/sidebar/peopleSection.tsx

@@ -1,9 +1,9 @@
 import {Flex} from 'sentry/components/container/flex';
-import ParticipantList from 'sentry/components/group/streamlinedParticipantList';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {TeamParticipant, UserParticipant} from 'sentry/types/group';
 import type {User} from 'sentry/types/user';
+import ParticipantList from 'sentry/views/issueDetails/streamline/sidebar/participantList';
 import {SidebarSectionTitle} from 'sentry/views/issueDetails/streamline/sidebar/sidebar';
 
 export default function PeopleSection({