feat(issue-details): Add URL and breadcrumbs sidebar to issue replay when in fullscreen mode (#63920)

malwilley · web-flow · commit dc24c1d40394 · 2024-01-26T09:59:49.000-08:00
Ref #63157 Adds the URL bar and breadcrumbs sidebar to the fullscreen view. While doing so, extracted the fullscreen and sidebar toggle buttons into new common components.
diff --git a/static/app/components/events/eventReplay/replayClipPreview.spec.tsx b/static/app/components/events/eventReplay/replayClipPreview.spec.tsx
@@ -4,7 +4,7 @@ import {RRWebInitFrameEventsFixture} from 'sentry-fixture/replay/rrweb';
 import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render as baseRender, screen} from 'sentry-test/reactTestingLibrary';
+import {render as baseRender, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 import ReplayReader from 'sentry/utils/replays/replayReader';
@@ -26,16 +26,6 @@ const mockEventTimestampMs = new Date('2022-09-22T16:59:41Z').getTime();
 
 const mockButtonHref = `/organizations/${mockOrgSlug}/replays/761104e184c64d439ee1014b72b4d83b/?referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&t=52&t_main=errors`;
 
-// Mock screenfull library
-jest.mock('screenfull', () => ({
-  enabled: true,
-  isFullscreen: false,
-  request: jest.fn(),
-  exit: jest.fn(),
-  on: jest.fn(),
-  off: jest.fn(),
-}));
-
 // Get replay data with the mocked replay reader params
 const mockReplay = ReplayReader.factory({
   replayRecord: ReplayRecordFixture({
@@ -96,7 +86,24 @@ const render: typeof baseRender = children => {
   );
 };
 
-describe('ReplayPreview', () => {
+const mockIsFullscreen = jest.fn();
+
+jest.mock('screenfull', () => ({
+  enabled: true,
+  get isFullscreen() {
+    return mockIsFullscreen();
+  },
+  request: jest.fn(),
+  exit: jest.fn(),
+  on: jest.fn(),
+  off: jest.fn(),
+}));
+
+describe('ReplayClipPreview', () => {
+  beforeEach(() => {
+    mockIsFullscreen.mockReturnValue(false);
+  });
+
   it('Should render a placeholder when is fetching the replay data', () => {
     // Change the mocked hook to return a loading state
     mockUseReplayReader.mockImplementationOnce(() => {
@@ -185,4 +192,33 @@ describe('ReplayPreview', () => {
       mockButtonHref
     );
   });
+
+  it('Display URL and breadcrumbs in fullscreen mode', async () => {
+    mockIsFullscreen.mockReturnValue(true);
+
+    render(
+      <ReplayClipPreview
+        orgSlug={mockOrgSlug}
+        replaySlug={mockReplaySlug}
+        eventTimestampMs={mockEventTimestampMs}
+      />
+    );
+
+    // Should have URL bar
+    expect(screen.getByRole('textbox', {name: 'Current URL'})).toHaveValue(
+      'http://localhost:3000/'
+    );
+
+    // Breadcrumbs sidebar should be open
+    expect(screen.getByTestId('replay-details-breadcrumbs-tab')).toBeInTheDocument();
+
+    // Should filter out breadcrumbs that aren't part of the clip
+    expect(screen.getByText('No breadcrumbs recorded')).toBeInTheDocument();
+
+    // Can close the breadcrumbs sidebar
+    await userEvent.click(screen.getByRole('button', {name: 'Collapse Sidebar'}));
+    expect(
+      screen.queryByTestId('replay-details-breadcrumbs-tab')
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/static/app/components/events/eventReplay/replayClipPreview.tsx b/static/app/components/events/eventReplay/replayClipPreview.tsx
@@ -1,9 +1,9 @@
-import {ComponentProps, Fragment, useMemo, useRef} from 'react';
+import {ComponentProps, Fragment, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import screenfull from 'screenfull';
 
 import {Alert} from 'sentry/components/alert';
-import {Button, LinkButton} from 'sentry/components/button';
+import {LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Placeholder from 'sentry/components/placeholder';
@@ -13,11 +13,14 @@ import {
   Provider as ReplayContextProvider,
   useReplayContext,
 } from 'sentry/components/replays/replayContext';
+import ReplayCurrentUrl from 'sentry/components/replays/replayCurrentUrl';
+import {ReplayFullscreenButton} from 'sentry/components/replays/replayFullscreenButton';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
 import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButton';
 import ReplayProcessingError from 'sentry/components/replays/replayProcessingError';
+import {ReplaySidebarToggleButton} from 'sentry/components/replays/replaySidebarToggleButton';
 import TimeAndScrubberGrid from 'sentry/components/replays/timeAndScrubberGrid';
-import {IconContract, IconDelete, IconExpand} from 'sentry/icons';
+import {IconDelete} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
@@ -30,6 +33,8 @@ import {useRoutes} from 'sentry/utils/useRoutes';
 import useFullscreen from 'sentry/utils/window/useFullscreen';
 import useIsFullscreen from 'sentry/utils/window/useIsFullscreen';
 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 {ReplayRecord} from 'sentry/views/replays/types';
 
@@ -77,6 +82,7 @@ function ReplayPreviewPlayer({
 }) {
   const routes = useRoutes();
   const organization = useOrganization();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const isFullscreen = useIsFullscreen();
   const {currentTime} = useReplayContext();
 
@@ -95,30 +101,36 @@ function ReplayPreviewPlayer({
 
   return (
     <Fragment>
-      <StaticPanel>
-        <ReplayPlayer />
-      </StaticPanel>
+      <PlayerBreadcrumbContainer>
+        <PlayerContextContainer>
+          {isFullscreen ? (
+            <ContextContainer>
+              <ReplayCurrentUrl />
+              <BrowserOSIcons />
+              <ReplaySidebarToggleButton
+                isOpen={isSidebarOpen}
+                setIsOpen={setIsSidebarOpen}
+              />
+            </ContextContainer>
+          ) : null}
+          <StaticPanel>
+            <ReplayPlayer />
+          </StaticPanel>
+        </PlayerContextContainer>
+        {isFullscreen && isSidebarOpen ? <Breadcrumbs /> : null}
+      </PlayerBreadcrumbContainer>
       <ErrorBoundary mini>
         <ButtonGrid>
           <ReplayPlayPauseButton />
           <Container>
             <TimeAndScrubberGrid />
           </Container>
           <ButtonBar gap={1}>
-            <LinkButton size="sm" to={fullReplayUrl}>
+            <LinkButton size="sm" to={fullReplayUrl} {...fullReplayButtonProps}>
               {t('See Full Replay')}
             </LinkButton>
             {showFullscreenButton ? (
-              <Button
-                size="sm"
-                title={isFullscreen ? t('Exit full screen') : t('Enter full screen')}
-                aria-label={isFullscreen ? t('Exit full screen') : t('Enter full screen')}
-                icon={
-                  isFullscreen ? <IconContract size="sm" /> : <IconExpand size="sm" />
-                }
-                onClick={toggleFullscreen}
-                {...fullReplayButtonProps}
-              />
+              <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
             ) : null}
           </ButtonBar>
         </ButtonGrid>
@@ -218,11 +230,33 @@ function ReplayClipPreview({
   );
 }
 
+const PlayerBreadcrumbContainer = styled(FluidHeight)`
+  position: relative;
+  height: 100%;
+`;
+
 const PlayerContainer = styled(FluidHeight)`
   position: relative;
   background: ${p => p.theme.background};
   gap: ${space(1)};
   max-height: 448px;
+
+  :fullscreen {
+    padding: ${space(1)};
+
+    ${PlayerBreadcrumbContainer} {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      height: 100%;
+      gap: ${space(1)};
+    }
+  }
+`;
+
+const PlayerContextContainer = styled(FluidHeight)`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
 `;
 
 const StaticPanel = styled(FluidHeight)`
@@ -249,4 +283,12 @@ const Container = styled('div')`
   justify-content: center;
 `;
 
+const ContextContainer = styled('div')`
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr max-content max-content;
+  align-items: center;
+  gap: ${space(1)};
+`;
+
 export default ReplayClipPreview;
diff --git a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx
@@ -67,7 +67,7 @@ function BreadcrumbItem({
 }: Props) {
   const {color, description, projectSlug, title, icon, timestampMs} =
     getCrumbOrFrameData(frame);
-  const {replay} = useReplayContext();
+  const {replay, startTimeOffsetMs} = useReplayContext();
 
   const forceSpan = 'category' in frame && FRAMES_WITH_BUTTONS.includes(frame.category);
 
@@ -89,7 +89,7 @@ function BreadcrumbItem({
           {onClick ? (
             <TimestampButton
               startTimestampMs={startTimestampMs}
-              timestampMs={timestampMs}
+              timestampMs={timestampMs - startTimeOffsetMs}
             />
           ) : null}
         </TitleContainer>
@@ -116,7 +116,7 @@ function BreadcrumbItem({
           <div>
             <OpenReplayComparisonButton
               replay={replay}
-              leftTimestamp={frame.offsetMs}
+              leftTimestamp={frame.offsetMs - startTimeOffsetMs}
               rightTimestamp={
                 (frame.data.mutations.next.timestamp as number) -
                 (replay?.getReplay().started_at.getTime() ?? 0)
diff --git a/static/app/components/replays/replayCurrentUrl.tsx b/static/app/components/replays/replayCurrentUrl.tsx
@@ -6,7 +6,7 @@ import Link from 'sentry/components/links/link';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import TextCopyInput from 'sentry/components/textCopyInput';
 import {Tooltip} from 'sentry/components/tooltip';
-import {tct} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import getCurrentUrl from 'sentry/utils/replays/getCurrentUrl';
 import useProjects from 'sentry/utils/useProjects';
 
@@ -29,7 +29,7 @@ function ReplayCurrentUrl() {
 
   if (!replay || !url) {
     return (
-      <TextCopyInput size="sm" disabled>
+      <TextCopyInput aria-label={t('Current URL')} size="sm" disabled>
         {''}
       </TextCopyInput>
     );
@@ -57,12 +57,18 @@ function ReplayCurrentUrl() {
         )}
         isHoverable
       >
-        <TextCopyInput size="sm">{url}</TextCopyInput>
+        <TextCopyInput aria-label={t('Current URL')} size="sm">
+          {url}
+        </TextCopyInput>
       </Tooltip>
     );
   }
 
-  return <TextCopyInput size="sm">{url}</TextCopyInput>;
+  return (
+    <TextCopyInput aria-label={t('Current URL')} size="sm">
+      {url}
+    </TextCopyInput>
+  );
 }
 
 export default ReplayCurrentUrl;
diff --git a/static/app/components/replays/replayFullscreenButton.tsx b/static/app/components/replays/replayFullscreenButton.tsx
@@ -0,0 +1,22 @@
+import {Button} from 'sentry/components/button';
+import {IconContract, IconExpand} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import useIsFullscreen from 'sentry/utils/window/useIsFullscreen';
+
+type Props = {
+  toggleFullscreen: () => void;
+};
+
+export function ReplayFullscreenButton({toggleFullscreen}: Props) {
+  const isFullscreen = useIsFullscreen();
+
+  return (
+    <Button
+      size="sm"
+      title={isFullscreen ? t('Exit full screen') : t('Enter full screen')}
+      aria-label={isFullscreen ? t('Exit full screen') : t('Enter full screen')}
+      icon={isFullscreen ? <IconContract size="sm" /> : <IconExpand size="sm" />}
+      onClick={toggleFullscreen}
+    />
+  );
+}
diff --git a/static/app/components/replays/replaySidebarToggleButton.tsx b/static/app/components/replays/replaySidebarToggleButton.tsx
@@ -0,0 +1,20 @@
+import {Button} from 'sentry/components/button';
+import {IconChevron} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+export function ReplaySidebarToggleButton({isOpen, setIsOpen}: Props) {
+  return (
+    <Button
+      size="sm"
+      onClick={() => setIsOpen(!isOpen)}
+      icon={<IconChevron direction={isOpen ? 'right' : 'left'} />}
+    >
+      {isOpen ? t('Collapse Sidebar') : t('Open Sidebar')}
+    </Button>
+  );
+}
diff --git a/static/app/components/replays/replayView.tsx b/static/app/components/replays/replayView.tsx
@@ -1,14 +1,12 @@
 import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import ReplayController from 'sentry/components/replays/replayController';
 import ReplayCurrentUrl from 'sentry/components/replays/replayCurrentUrl';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
 import ReplayProcessingError from 'sentry/components/replays/replayProcessingError';
-import {IconChevron} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {ReplaySidebarToggleButton} from 'sentry/components/replays/replaySidebarToggleButton';
 import {space} from 'sentry/styles/space';
 import useIsFullscreen from 'sentry/utils/window/useIsFullscreen';
 import Breadcrumbs from 'sentry/views/replays/detail/breadcrumbs';
@@ -34,13 +32,10 @@ function ReplayView({toggleFullscreen}: Props) {
             <ReplayCurrentUrl />
             <BrowserOSIcons />
             {isFullscreen ? (
-              <Button
-                size="sm"
-                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                icon={<IconChevron direction={isSidebarOpen ? 'right' : 'left'} />}
-              >
-                {isSidebarOpen ? t('Collapse Sidebar') : t('Open Sidebar')}
-              </Button>
+              <ReplaySidebarToggleButton
+                isOpen={isSidebarOpen}
+                setIsOpen={setIsSidebarOpen}
+              />
             ) : null}
           </ContextContainer>
           {!isFetching && replay?.hasProcessingErrors() ? (
diff --git a/static/app/views/replays/detail/breadcrumbs/index.tsx b/static/app/views/replays/detail/breadcrumbs/index.tsx
