feat(replays): Fetch and render less information when session-replay-slim-table is enabled (#46207)

See also new Feature Flag:
#46208

Related to getsentry/team-replay#49

**Before:**

![SCR-20230322-f76](https://user-images.githubusercontent.com/187460/226995542-fafba006-e27f-4aaf-b58b-2aef8d9f23f3.png)

**After:**

![SCR-20230322-f7l](https://user-images.githubusercontent.com/187460/226995567-3ec6d199-7734-4b4d-babf-53cd2cd3fdcf.png)

Author: ryan953

static/app/utils/replays/fetchReplayList.tsx

@@ -34,10 +34,23 @@ async function fetchReplayList({
   try {
     const path = `/organizations/${organization.slug}/replays/`;
 
+    const payload = eventView.getEventsAPIPayload(location);
+
     // HACK!!! Because the sort field needs to be in the eventView, but I cannot
     // ask the server for compound fields like `os.name`.
-    const payload = eventView.getEventsAPIPayload(location);
-    payload.field = Array.from(new Set(payload.field.map(field => field.split('.')[0])));
+    payload.field = payload.field.map(field => field.split('.')[0]);
+
+    const hasFullTable = !organization.features.includes('session-replay-slim-table');
+    if (!hasFullTable) {
+      const fieldsToRemove = ['browser', 'os', 'urls'];
+      payload.field = payload.field.filter(field => !fieldsToRemove.includes(field));
+      payload.field.push('count_urls');
+    } else {
+      payload.field = payload.field.filter(field => field !== 'count_urls');
+    }
+
+    // unique list
+    payload.field = Array.from(new Set(payload.field));
 
     const [{data}, _textStatus, resp] = await api.requestPromise(path, {
       includeAllArgs: true,

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

@@ -37,6 +37,11 @@ function ReplayTable({fetchError, isFetching, replays, sort, visibleColumns}: Pr
   const location = useLocation();
   const organization = useOrganization();
 
+  const hasFullTable = !organization.features.includes('session-replay-slim-table');
+  visibleColumns = visibleColumns.filter(
+    column => hasFullTable || !['browser', 'os'].includes(column)
+  );
+
   const tableHeaders = visibleColumns
     .filter(Boolean)
     .map(column => <HeaderCell key={column} column={column} sort={sort} />);

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

@@ -11,7 +11,8 @@ import {StringWalker} from 'sentry/components/replays/walker/urlWalker';
 import ScoreBar from 'sentry/components/scoreBar';
 import TimeSince from 'sentry/components/timeSince';
 import CHART_PALETTE from 'sentry/constants/chartPalette';
-import {IconCalendar} from 'sentry/icons';
+import {IconCalendar, IconLocation} from 'sentry/icons';
+import {tn} from 'sentry/locale';
 import {space, ValidSize} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types';
 import EventView from 'sentry/utils/discover/eventView';
@@ -44,6 +45,39 @@ export function ReplayCell({
     },
   };
 
+  const subText = replay.urls ? (
+    <Cols>
+      <StringWalker urls={replay.urls} />
+      <Row gap={1}>
+        <Row gap={0.5}>
+          {project ? <Avatar size={12} project={project} /> : null}
+          <Link to={replayDetails}>{getShortEventId(replay.id)}</Link>
+        </Row>
+        <Row gap={0.5}>
+          <IconCalendar color="gray300" size="xs" />
+          <TimeSince date={replay.started_at} />
+        </Row>
+      </Row>
+    </Cols>
+  ) : (
+    <Cols>
+      <Row gap={1}>
+        <Row gap={0.5} minWidth={80}>
+          {project ? <Avatar size={12} project={project} /> : null}
+          <Link to={replayDetails}>{getShortEventId(replay.id)}</Link>
+        </Row>
+        <Row gap={0.5} minWidth={80}>
+          <IconLocation color="green400" size="sm" />
+          {tn('%s Page', '%s Pages', replay.count_urls)}
+        </Row>
+        <Row gap={0.5}>
+          <IconCalendar color="gray300" size="xs" />
+          <TimeSince date={replay.started_at} />
+        </Row>
+      </Row>
+    </Cols>
+  );
+
   return (
     <Item>
       <UserBadgeFullWidth
@@ -59,21 +93,7 @@ export function ReplayCell({
           name: replay.user.username || '',
         }}
         // this is the subheading for the avatar, so displayEmail in this case is a misnomer
-        displayEmail={
-          <Cols>
-            <StringWalker urls={replay.urls} />
-            <Row gap={1}>
-              <Row gap={0.5}>
-                {project ? <Avatar size={12} project={project} /> : null}
-                <Link to={replayDetails}>{getShortEventId(replay.id)}</Link>
-              </Row>
-              <Row gap={0.5}>
-                <IconCalendar color="gray300" size="xs" />
-                <TimeSince date={replay.started_at} />
-              </Row>
-            </Row>
-          </Cols>
-        }
+        displayEmail={subText}
       />
     </Item>
   );
@@ -87,14 +107,15 @@ const UserBadgeFullWidth = styled(UserBadge)`
 const Cols = styled('div')`
   display: flex;
   flex-direction: column;
-  gap: ${space(0.25)};
+  gap: ${space(0.5)};
   width: 100%;
 `;
 
-const Row = styled('div')<{gap: ValidSize}>`
+const Row = styled('div')<{gap: ValidSize; minWidth?: number}>`
   display: flex;
   gap: ${p => space(p.gap)};
   align-items: center;
+  ${p => (p.minWidth ? `min-width: ${p.minWidth}px;` : '')}
 `;
 
 const MainLink = styled(Link)`
@@ -122,7 +143,7 @@ export function TransactionCell({
 }
 
 export function OSCell({replay}: Props) {
-  const {name, version} = replay.os;
+  const {name, version} = replay.os ?? {};
   const theme = useTheme();
   const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.large})`);
 
@@ -137,7 +158,7 @@ export function OSCell({replay}: Props) {
 }
 
 export function BrowserCell({replay}: Props) {
-  const {name, version} = replay.browser;
+  const {name, version} = replay.browser ?? {};
   const theme = useTheme();
   const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.large})`);
 

static/app/views/replays/types.tsx

@@ -105,24 +105,23 @@ export type ReplayListLocationQuery = {
 export type ReplayListRecord = Pick<
   ReplayRecord,
   | 'activity'
-  | 'browser'
   | 'count_errors'
   | 'duration'
   | 'finished_at'
   | 'id'
-  | 'os'
   | 'project_id'
   | 'started_at'
-  | 'urls'
   | 'user'
->;
+> &
+  Partial<Pick<ReplayRecord, 'browser' | 'count_urls' | 'os' | 'urls'>>;
 
 // Sync with ReplayListRecord above
 export const REPLAY_LIST_FIELDS: ReplayRecordNestedFieldName[] = [
   'activity',
   'browser.name',
   'browser.version',
   'count_errors',
+  'count_urls',
   'duration',
   'finished_at',
   'id',