feat(replay): adds current user to replay in header (#66253)

This PR adds the current user to the header of the replay in the issue details page: Before: ![Screenshot 2024-03-04 at 1 15 37 PM](https://github.com/getsentry/sentry/assets/8533851/614047aa-e0da-4520-91d0-5d71f22f8cd9) After: ![Screenshot 2024-03-04 at 1 15 31 PM](https://github.com/getsentry/sentry/assets/8533851/4592b55d-ac83-4448-8af5-06988dfc5aa1)
getsentry · Mar 4, 2024 · c6f37f5 · c6f37f5
1 parent a87f6bd
commit c6f37f5
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 9 deletions.
diff --git a/static/app/components/events/eventReplay/constants.tsx b/static/app/components/events/eventReplay/constants.tsx
@@ -0,0 +1 @@
+export const REPLAY_LOADING_HEIGHT = 480;
diff --git a/static/app/components/events/eventReplay/index.tsx b/static/app/components/events/eventReplay/index.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
 import ErrorBoundary from 'sentry/components/errorBoundary';
+import {REPLAY_LOADING_HEIGHT} from 'sentry/components/events/eventReplay/constants';
 import {EventReplaySection} from 'sentry/components/events/eventReplay/eventReplaySection';
 import LazyLoad from 'sentry/components/lazyLoad';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -144,10 +145,10 @@ export default function EventReplay({event, group, projectSlug}: Props) {
 
 // The min-height here is due to max-height that is set in replayPreview.tsx
 const ReplaySectionMinHeight = styled(EventReplaySection)`
-  min-height: 508px;
+  min-height: 557px;
 `;
 
 const StyledNegativeSpaceContainer = styled(NegativeSpaceContainer)`
-  height: 400px;
+  height: ${REPLAY_LOADING_HEIGHT}px;
   margin-bottom: ${space(2)};
 `;
diff --git a/static/app/components/events/eventReplay/replayClipPreview.tsx b/static/app/components/events/eventReplay/replayClipPreview.tsx
@@ -7,6 +7,7 @@ import {LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
 import ErrorBoundary from 'sentry/components/errorBoundary';
+import {REPLAY_LOADING_HEIGHT} from 'sentry/components/events/eventReplay/constants';
 import {StaticReplayPreview} from 'sentry/components/events/eventReplay/staticReplayPreview';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
@@ -27,11 +28,13 @@ import TimeAndScrubberGrid from 'sentry/components/replays/timeAndScrubberGrid';
 import {IconDelete} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import EventView from 'sentry/utils/discover/eventView';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useRoutes} from 'sentry/utils/useRoutes';
 import useFullscreen from 'sentry/utils/window/useFullscreen';
@@ -40,6 +43,7 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import Breadcrumbs from 'sentry/views/replays/detail/breadcrumbs';
 import BrowserOSIcons from 'sentry/views/replays/detail/browserOSIcons';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+import {ReplayCell} from 'sentry/views/replays/replayTable/tableCell';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
 type Props = {
@@ -80,14 +84,18 @@ function getReplayAnalyticsStatus({
 function ReplayPreviewPlayer({
   replayId,
   fullReplayButtonProps,
+  replayRecord,
 }: {
   replayId: string;
+  replayRecord: ReplayRecord;
   fullReplayButtonProps?: Partial<ComponentProps<typeof LinkButton>>;
 }) {
   const routes = useRoutes();
+  const location = useLocation();
   const organization = useOrganization();
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const {replay, currentTime} = useReplayContext();
+  const eventView = EventView.fromLocation(location);
 
   const fullscreenRef = useRef(null);
   const {toggle: toggleFullscreen} = useFullscreen({
@@ -107,6 +115,15 @@ function ReplayPreviewPlayer({
 
   return (
     <PlayerPanel>
+      {replayRecord && (
+        <ReplayCellNoPadding
+          key="session"
+          replay={replayRecord}
+          eventView={eventView}
+          organization={organization}
+          referrer="issue-details-replay-header"
+        />
+      )}
       <PreviewPlayerContainer ref={fullscreenRef} isSidebarOpen={isSidebarOpen}>
         <PlayerBreadcrumbContainer>
           <PlayerContextContainer>
@@ -221,6 +238,7 @@ function ReplayClipPreview({
           <ReplayPreviewPlayer
             replayId={replayId}
             fullReplayButtonProps={fullReplayButtonProps}
+            replayRecord={replayRecord}
           />
         )}
       </PlayerContainer>
@@ -261,7 +279,7 @@ const PreviewPlayerContainer = styled(FluidHeight)<{isSidebarOpen: boolean}>`
 
 const PlayerContainer = styled(FluidHeight)`
   position: relative;
-  max-height: 448px;
+  max-height: ${REPLAY_LOADING_HEIGHT + 16}px;
 `;
 
 const PlayerContextContainer = styled(FluidHeight)`
@@ -276,7 +294,7 @@ const StaticPanel = styled(FluidHeight)`
 `;
 
 const StyledNegativeSpaceContainer = styled(NegativeSpaceContainer)`
-  height: 400px;
+  height: ${REPLAY_LOADING_HEIGHT}px;
   margin-bottom: ${space(2)};
 `;
 
@@ -303,4 +321,8 @@ const ContextContainer = styled('div')`
   gap: ${space(1)};
 `;
 
+const ReplayCellNoPadding = styled(ReplayCell)`
+  padding: 0 0 ${space(1)};
+`;
+
 export default ReplayClipPreview;
diff --git a/static/app/components/events/eventReplay/replayPreview.tsx b/static/app/components/events/eventReplay/replayPreview.tsx
@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import {Alert} from 'sentry/components/alert';
 import type {LinkButton} from 'sentry/components/button';
 import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
+import {REPLAY_LOADING_HEIGHT} from 'sentry/components/events/eventReplay/constants';
 import {StaticReplayPreview} from 'sentry/components/events/eventReplay/staticReplayPreview';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {Flex} from 'sentry/components/profiling/flex';
@@ -112,7 +113,7 @@ function ReplayPreview({
 }
 
 const StyledNegativeSpaceContainer = styled(NegativeSpaceContainer)`
-  height: 400px;
+  height: ${REPLAY_LOADING_HEIGHT}px;
   margin-bottom: ${space(2)};
 `;
 

diff --git a/static/app/components/events/eventReplay/staticReplayPreview.tsx b/static/app/components/events/eventReplay/staticReplayPreview.tsx
@@ -2,6 +2,7 @@ import {type ComponentProps, Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {LinkButton} from 'sentry/components/button';
+import {REPLAY_LOADING_HEIGHT} from 'sentry/components/events/eventReplay/constants';
 import {StaticReplayPreferences} from 'sentry/components/replays/preferences/replayPreferences';
 import {Provider as ReplayContextProvider} from 'sentry/components/replays/replayContext';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
@@ -91,7 +92,7 @@ const PlayerContainer = styled(FluidHeight)`
   position: relative;
   background: ${p => p.theme.background};
   gap: ${space(1)};
-  max-height: 448px;
+  max-height: ${REPLAY_LOADING_HEIGHT + 16}px;
 `;
 
 const StaticPanel = styled(FluidHeight)`

diff --git a/static/app/utils/analytics/replayAnalyticsEvents.tsx b/static/app/utils/analytics/replayAnalyticsEvents.tsx
@@ -63,7 +63,7 @@ export type ReplayEventParameters = {
     platform: string | undefined;
     project_id: string | undefined;
     referrer: string;
-    referrer_table: ReferrerTableType;
+    referrer_table?: ReferrerTableType;
   };
   'replay.list-paginated': {
     direction: 'next' | 'prev';

diff --git a/static/app/views/replays/replayTable/tableCell.tsx b/static/app/views/replays/replayTable/tableCell.tsx
@@ -287,12 +287,14 @@ export function ReplayCell({
   replay,
   referrer_table,
   isWidget,
+  className,
 }: Props & {
   eventView: EventView;
   organization: Organization;
   referrer: string;
-  referrer_table: ReferrerTableType;
+  className?: string;
   isWidget?: boolean;
+  referrer_table?: ReferrerTableType;
 }) {
   const {projects} = useProjects();
   const project = projects.find(p => p.id === replay.project_id);
@@ -369,7 +371,7 @@ export function ReplayCell({
   );
 
   return (
-    <Item isWidget={isWidget} isReplayCell>
+    <Item isWidget={isWidget} isReplayCell className={className}>
       <UserBadge
         avatarSize={24}
         displayName={