feat(replays): session column addition (#33579)

# Description
Issues: #33420 
- Adds the session column with user information related to the event. 
- Removed the Replay ID column as that's superseded by the Session column.

# Screenshots
<img width="1700" alt="image" src="https://user-images.githubusercontent.com/7014871/163210823-96488a62-6bd3-49e4-bbed-e0943fdf1231.png">
<img width="270" alt="image" src="https://user-images.githubusercontent.com/7014871/163245228-1024dd33-def0-49f0-a061-283ee3a98852.png">



# Known Gotchas
- Usernames are bolded because that's predicated upon not passing in the hideEmail flag to UserBadge. I'm fairly new to overriding styled components so I'm all ears on a suggestion for that fix (holding off on this).
- Still need to test with gravatar and avatar URLs, pending generating some data for that.

static/app/views/replays/replays.tsx

@@ -3,6 +3,7 @@ import {withRouter, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 
 import FeatureBadge from 'sentry/components/featureBadge';
+import UserBadge from 'sentry/components/idBadge/userBadge';
 import Link from 'sentry/components/links/link';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import PageHeading from 'sentry/components/pageHeading';
@@ -37,7 +38,7 @@ class Replays extends React.Component<Props> {
       id: '',
       name: '',
       version: 2,
-      fields: ['eventID', 'timestamp', 'replayId', 'user'],
+      fields: ['eventID', 'timestamp', 'replayId', 'user.display', 'url'],
       orderby: '-timestamp',
       environment: selection.environments,
       projects: selection.projects,
@@ -64,11 +65,20 @@ class Replays extends React.Component<Props> {
             id: replay.id,
           })}/`}
         >
-          {replay.replayId}
+          <ReplayUserBadge
+            avatarSize={32}
+            displayName={replay['user.display']}
+            user={{
+              username: replay['user.display'],
+              id: replay['user.display'],
+              ip_address: replay['user.display'],
+              name: replay['user.display'],
+              email: replay['user.display'],
+            }}
+            // this is the subheading for the avatar, so displayEmail in this case is a misnomer
+            displayEmail={replay.url?.split('?')[0] || ''}
+          />
         </Link>
-        <div>
-          <span>{replay.user}</span>
-        </div>
         <div>
           <TimeSinceWrapper>
             <StyledIconCalendarWrapper color="gray500" size="sm" />
@@ -106,7 +116,7 @@ class Replays extends React.Component<Props> {
                   <PanelTable
                     isLoading={data.isLoading}
                     isEmpty={data.tableData?.data.length === 0}
-                    headers={['Replay ID', 'User', 'Timestamp']}
+                    headers={[t('Session'), t('Timestamp')]}
                   >
                     {data.tableData
                       ? this.renderTable(data.tableData.data as Replay[])
@@ -130,6 +140,11 @@ const HeaderTitle = styled(PageHeading)`
   flex: 1;
 `;
 
+const ReplayUserBadge = styled(UserBadge)`
+  font-size: ${p => p.theme.fontSizeMedium};
+  color: ${p => p.theme.linkColor};
+`;
+
 const TimeSinceWrapper = styled('div')`
   display: grid;
   grid-template-columns: repeat(2, minmax(auto, max-content));

static/app/views/replays/types.tsx

@@ -4,5 +4,6 @@ export type Replay = {
   projectID: string;
   replayId: string;
   timestamp: string;
-  user: string;
+  url: string;
+  'user.display': string;
 };