Просмотр исходного кода

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 год назад
Родитель
Сommit
16fd1ad743
1 измененных файлов с 13 добавлено и 9 удалено
  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 {Button, LinkButton} from 'sentry/components/button';
-import ButtonBar from 'sentry/components/buttonBar';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Panel from 'sentry/components/panels/panel';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
@@ -77,7 +76,7 @@ function ReplayPreviewPlayer({
 
   return (
     <PlayerPanel>
-      {replayRecord && (
+      <HeaderWrapper>
         <StyledReplayCell
           key="session"
           replay={replayRecord}
@@ -85,7 +84,10 @@ function ReplayPreviewPlayer({
           organization={organization}
           referrer="issue-details-replay-header"
         />
-      )}
+        <LinkButton size="sm" to={fullReplayUrl} {...fullReplayButtonProps}>
+          {t('See Full Replay')}
+        </LinkButton>
+      </HeaderWrapper>
       <PreviewPlayerContainer ref={fullscreenRef} isSidebarOpen={isSidebarOpen}>
         <PlayerBreadcrumbContainer>
           <PlayerContextContainer>
@@ -138,12 +140,7 @@ function ReplayPreviewPlayer({
             <Container>
               <TimeAndScrubberGrid />
             </Container>
-            <ButtonBar gap={1}>
-              <LinkButton size="sm" to={fullReplayUrl} {...fullReplayButtonProps}>
-                {t('See Full Replay')}
-              </LinkButton>
-              <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
-            </ButtonBar>
+            <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
           </ButtonGrid>
         </ErrorBoundary>
       </PreviewPlayerContainer>
@@ -219,4 +216,11 @@ const StyledReplayCell = styled(ReplayCell)`
   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;