Browse Source

feat(replays): move full replay button (#67014)

Before:
<img width="948" alt="before"
src="https://github.com/getsentry/sentry/assets/56095982/ca0b7281-8fda-4d92-88ed-d2d8090e2463">


After:
<img width="943" alt="after"
src="https://github.com/getsentry/sentry/assets/56095982/133a2c64-688e-42a5-97d5-ff92982bab82">
Stephen Cefali 1 year ago
parent
commit
16fd1ad743
1 changed files with 13 additions and 9 deletions
  1. 13 9
      static/app/components/events/eventReplay/replayPreviewPlayer.tsx

+ 13 - 9
static/app/components/events/eventReplay/replayPreviewPlayer.tsx

@@ -3,7 +3,6 @@ import {useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import styled from '@emotion/styled';
 
 
 import {Button, LinkButton} from 'sentry/components/button';
 import {Button, LinkButton} from 'sentry/components/button';
-import ButtonBar from 'sentry/components/buttonBar';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Panel from 'sentry/components/panels/panel';
 import Panel from 'sentry/components/panels/panel';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
@@ -77,7 +76,7 @@ function ReplayPreviewPlayer({
 
 
   return (
   return (
     <PlayerPanel>
     <PlayerPanel>
-      {replayRecord && (
+      <HeaderWrapper>
         <StyledReplayCell
         <StyledReplayCell
           key="session"
           key="session"
           replay={replayRecord}
           replay={replayRecord}
@@ -85,7 +84,10 @@ function ReplayPreviewPlayer({
           organization={organization}
           organization={organization}
           referrer="issue-details-replay-header"
           referrer="issue-details-replay-header"
         />
         />
-      )}
+        <LinkButton size="sm" to={fullReplayUrl} {...fullReplayButtonProps}>
+          {t('See Full Replay')}
+        </LinkButton>
+      </HeaderWrapper>
       <PreviewPlayerContainer ref={fullscreenRef} isSidebarOpen={isSidebarOpen}>
       <PreviewPlayerContainer ref={fullscreenRef} isSidebarOpen={isSidebarOpen}>
         <PlayerBreadcrumbContainer>
         <PlayerBreadcrumbContainer>
           <PlayerContextContainer>
           <PlayerContextContainer>
@@ -138,12 +140,7 @@ function ReplayPreviewPlayer({
             <Container>
             <Container>
               <TimeAndScrubberGrid />
               <TimeAndScrubberGrid />
             </Container>
             </Container>
-            <ButtonBar gap={1}>
-              <LinkButton size="sm" to={fullReplayUrl} {...fullReplayButtonProps}>
-                {t('See Full Replay')}
-              </LinkButton>
-              <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
-            </ButtonBar>
+            <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
           </ButtonGrid>
           </ButtonGrid>
         </ErrorBoundary>
         </ErrorBoundary>
       </PreviewPlayerContainer>
       </PreviewPlayerContainer>
@@ -219,4 +216,11 @@ const StyledReplayCell = styled(ReplayCell)`
   padding: 0 0 ${space(1)};
   padding: 0 0 ${space(1)};
 `;
 `;
 
 
+const HeaderWrapper = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${space(1)};
+`;
+
 export default ReplayPreviewPlayer;
 export default ReplayPreviewPlayer;