feat(replays): Replay layout move start time (#58488)

Move started at time to dead clicks, rage clicks, errors area as part of
replay layout changes

Before:
<img width="1510" alt="image"
src="https://github.com/getsentry/sentry/assets/55311782/d3639c72-4537-4673-b753-d0864fe04de6">

After:
<img width="1510" alt="image"
src="https://github.com/getsentry/sentry/assets/55311782/ff81e6a7-e2fe-48fa-9e7a-dfbd61a217ac">

Relates to: https://github.com/getsentry/team-replay/issues/139

Author: c298lee

static/app/components/replays/header/replayMetaData.tsx

@@ -3,7 +3,8 @@ import styled from '@emotion/styled';
 
 import ErrorCounts from 'sentry/components/replays/header/errorCounts';
 import HeaderPlaceholder from 'sentry/components/replays/header/headerPlaceholder';
-import {IconCursorArrow} from 'sentry/icons';
+import TimeSince from 'sentry/components/timeSince';
+import {IconCalendar, IconCursorArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import EventView from 'sentry/utils/discover/eventView';
@@ -37,6 +38,22 @@ function ReplayMetaData({replayErrors, replayRecord}: Props) {
 
   return (
     <KeyMetrics>
+      <KeyMetricLabel>{t('Start Time')}</KeyMetricLabel>
+      <KeyMetricData>
+        {replayRecord ? (
+          <TimeContainer>
+            <IconCalendar color="gray300" size="sm" />
+            <TimeSince
+              date={replayRecord.started_at}
+              isTooltipHoverable
+              unitStyle="regular"
+            />
+          </TimeContainer>
+        ) : (
+          <HeaderPlaceholder width="80px" height="16px" />
+        )}
+      </KeyMetricData>
+
       <KeyMetricLabel>{t('Dead Clicks')}</KeyMetricLabel>
       <KeyMetricData>
         {replayRecord?.count_dead_clicks ? (
@@ -80,7 +97,7 @@ function ReplayMetaData({replayErrors, replayRecord}: Props) {
 const KeyMetrics = styled('dl')`
   display: grid;
   grid-template-rows: max-content 1fr;
-  grid-template-columns: repeat(4, max-content);
+  grid-template-columns: repeat(5, max-content);
   grid-auto-flow: column;
   gap: 0 ${space(3)};
   align-items: center;
@@ -117,4 +134,10 @@ const ClickCount = styled(Count)<{color: ColorOrAlias}>`
   align-items: center;
 `;
 
+const TimeContainer = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+  align-items: center;
+`;
+
 export default ReplayMetaData;

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

@@ -11,8 +11,6 @@ import HeaderPlaceholder from 'sentry/components/replays/header/headerPlaceholde
 import ReplayMetaData from 'sentry/components/replays/header/replayMetaData';
 import ShareButton from 'sentry/components/replays/shareButton';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import TimeSince from 'sentry/components/timeSince';
-import {IconCalendar} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
@@ -61,23 +59,7 @@ function Page({children, orgSlug, replayRecord, projectSlug, replayErrors}: Prop
             ip_address: replayRecord.user.ip || '',
             id: replayRecord.user.id || '',
           }}
-          // this is the subheading for the avatar, so displayEmail in this case is a misnomer
-          displayEmail={
-            <div>
-              {replayRecord ? (
-                <TimeContainer>
-                  <IconCalendar color="gray300" size="xs" />
-                  <StyledTimeSince
-                    date={replayRecord.started_at}
-                    isTooltipHoverable
-                    unitStyle="regular"
-                  />
-                </TimeContainer>
-              ) : (
-                <HeaderPlaceholder width="80px" height="16px" />
-              )}
-            </div>
-          }
+          hideEmail
         />
       ) : (
         <HeaderPlaceholder width="100%" height="58px" />
@@ -116,14 +98,4 @@ const ButtonActionsWrapper = styled(Layout.HeaderActions)`
   }
 `;
 
-const TimeContainer = styled('div')`
-  display: flex;
-  gap: ${space(0.5)};
-  align-items: center;
-`;
-
-const StyledTimeSince = styled(TimeSince)`
-  font-size: ${p => p.theme.fontSizeMedium};
-`;
-
 export default Page;