ref(replay): Extract JumpButtons to its own component and put it on all lists (#57516)

static/app/components/replays/jumpButtons.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+
+import {Button} from 'sentry/components/button';
+import {t} from 'sentry/locale';
+import toPixels from 'sentry/utils/number/toPixels';
+
+interface Props {
+  jump: undefined | 'up' | 'down';
+  onClick: () => void;
+  tableHeaderHeight: number;
+}
+
+const offsetFromEdge = 5;
+
+export default function JumpButtons({jump, onClick, tableHeaderHeight}: Props) {
+  if (jump === 'up') {
+    return (
+      <JumpButton
+        onClick={onClick}
+        aria-label={t('Jump Up')}
+        priority="primary"
+        size="xs"
+        style={{top: toPixels(tableHeaderHeight + offsetFromEdge)}}
+      >
+        {t('↑ Jump to current timestamp')}
+      </JumpButton>
+    );
+  }
+  if (jump === 'down') {
+    return (
+      <JumpButton
+        onClick={onClick}
+        aria-label={t('Jump Down')}
+        priority="primary"
+        size="xs"
+        style={{bottom: toPixels(offsetFromEdge)}}
+      >
+        {t('↓ Jump to current timestamp')}
+      </JumpButton>
+    );
+  }
+  return null;
+}
+
+const JumpButton = styled(Button)`
+  position: absolute;
+  justify-self: center;
+`;

static/app/views/replays/detail/console/index.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-virtualized';
 
 import Placeholder from 'sentry/components/placeholder';
+import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
@@ -83,6 +84,9 @@ function Console() {
     );
   };
 
+  const showJumpUpButton = false;
+  const showJumpDownButton = false;
+
   return (
     <FluidHeight>
       <ConsoleFilters frames={frames} {...filterProps} />
@@ -113,6 +117,11 @@ function Console() {
         ) : (
           <Placeholder height="100%" />
         )}
+        <JumpButtons
+          jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
+          onClick={() => {}}
+          tableHeaderHeight={0}
+        />
       </TabItemContainer>
     </FluidHeight>
   );

static/app/views/replays/detail/domMutations/index.tsx

@@ -8,6 +8,7 @@ import {
 import {useQuery} from '@tanstack/react-query';
 
 import Placeholder from 'sentry/components/placeholder';
+import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
@@ -81,6 +82,9 @@ function DomMutations() {
     );
   };
 
+  const showJumpUpButton = false;
+  const showJumpDownButton = false;
+
   return (
     <FluidHeight>
       <FilterLoadingIndicator isLoading={isFetching}>
@@ -113,6 +117,11 @@ function DomMutations() {
             )}
           </AutoSizer>
         )}
+        <JumpButtons
+          jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
+          onClick={() => {}}
+          tableHeaderHeight={0}
+        />
       </TabItemContainer>
     </FluidHeight>
   );

static/app/views/replays/detail/errorList/index.tsx

@@ -3,6 +3,7 @@ import {AutoSizer, CellMeasurer, GridCellProps, MultiGrid} from 'react-virtualiz
 import styled from '@emotion/styled';
 
 import Placeholder from 'sentry/components/placeholder';
+import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
@@ -96,6 +97,9 @@ function ErrorList() {
     );
   };
 
+  const showJumpUpButton = false;
+  const showJumpDownButton = false;
+
   return (
     <FluidHeight>
       <ErrorFilters errorFrames={errorFrames} {...filterProps} />
@@ -131,6 +135,11 @@ function ErrorList() {
                 />
               )}
             </AutoSizer>
+            <JumpButtons
+              jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
+              onClick={() => {}}
+              tableHeaderHeight={HEADER_HEIGHT}
+            />
           </OverflowHidden>
         ) : (
           <Placeholder height="100%" />
@@ -144,6 +153,7 @@ const OverflowHidden = styled('div')`
   position: relative;
   height: 100%;
   overflow: hidden;
+  display: grid;
 `;
 
 const ErrorTable = styled(FluidHeight)`

static/app/views/replays/detail/network/index.tsx

@@ -2,8 +2,8 @@ import {useCallback, useMemo, useRef, useState} from 'react';
 import {AutoSizer, CellMeasurer, GridCellProps, MultiGrid} from 'react-virtualized';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
 import Placeholder from 'sentry/components/placeholder';
+import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -251,28 +251,11 @@ function NetworkList() {
                   />
                 )}
               </AutoSizer>
-              {showJumpUpButton ? (
-                <JumpButton
-                  onClick={handleClick}
-                  aria-label={t('Jump Up')}
-                  priority="primary"
-                  size="xs"
-                  style={{top: '30px'}}
-                >
-                  {t('↑ Jump to current timestamp')}
-                </JumpButton>
-              ) : null}
-              {showJumpDownButton ? (
-                <JumpButton
-                  onClick={handleClick}
-                  aria-label={t('Jump Down')}
-                  priority="primary"
-                  size="xs"
-                  style={{bottom: '5px'}}
-                >
-                  {t('↓ Jump to current timestamp')}
-                </JumpButton>
-              ) : null}
+              <JumpButtons
+                jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
+                onClick={handleClick}
+                tableHeaderHeight={HEADER_HEIGHT}
+              />
             </OverflowHidden>
           ) : (
             <Placeholder height="100%" />
@@ -313,11 +296,6 @@ const OverflowHidden = styled('div')`
   display: grid;
 `;
 
-const JumpButton = styled(Button)`
-  position: absolute;
-  justify-self: center;
-`;
-
 const NetworkTable = styled(FluidHeight)`
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};

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

@@ -6,6 +6,7 @@ const TabItemContainer = styled('div')`
   overflow: hidden;
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
+  display: grid;
 
   .beforeHoverTime + .afterHoverTime {
     border-top-color: ${p => p.theme.purple200};