Revert "feat(replay): Add Jump up|down buttons to all the Replay Details tables & lists (#58131)"

This reverts commit f078c6e2608048512dd1a82431e15c7d51938086.

Co-authored-by: ryan953 <187460+ryan953@users.noreply.github.com>

static/app/components/replays/useJumpButtons.tsx

@@ -1,63 +1,65 @@
 import {useCallback, useMemo, useState} from 'react';
-import type {IndexRange, SectionRenderedParams} from 'react-virtualized';
+import {ScrollParams} from 'react-virtualized';
 
 import {getNextReplayFrame} from 'sentry/utils/replays/getReplayEvent';
-import type {ReplayFrame} from 'sentry/utils/replays/types';
+import {ReplayFrame} from 'sentry/utils/replays/types';
+
+/**
+ * The range (`[startIndex, endIndex]`) of table rows that are visible,
+ * not including the table header.
+ */
+type VisibleRange = [number, number];
 
 interface Props {
   currentTime: number;
   frames: ReplayFrame[];
-  isTable: boolean;
+  rowHeight: number;
   setScrollToRow: (row: number) => void;
 }
 
 export default function useJumpButtons({
   currentTime,
   frames,
-  isTable,
+  rowHeight,
   setScrollToRow,
 }: Props) {
-  const [visibleRange, setVisibleRange] = useState<IndexRange>({
-    startIndex: 0,
-    stopIndex: 0,
-  });
+  const [visibleRange, setVisibleRange] = useState<VisibleRange>([0, 0]);
 
-  const frameIndex = useMemo(() => {
+  const indexOfCurrentRow = useMemo(() => {
     const frame = getNextReplayFrame({
       frames,
       targetOffsetMs: currentTime,
       allowExact: true,
     });
-    const index = frames.findIndex(spanFrame => frame === spanFrame);
-    // index is -1 at end of replay, so use last index
-    return index === -1 ? frames.length - 1 : index;
+    const frameIndex = frames.findIndex(spanFrame => frame === spanFrame);
+    // frameIndex is -1 at end of replay, so use last index
+    const index = frameIndex === -1 ? frames.length - 1 : frameIndex;
+    return index;
   }, [currentTime, frames]);
 
-  // Tables have a header row, so we need to adjust for that.
-  const rowIndex = isTable ? frameIndex + 1 : frameIndex;
-
   const handleClick = useCallback(() => {
-    // When Jump Down, ensures purple line is visible and index needs to be 1 to jump to top of the list
-    const jumpDownFurther =
-      isTable && (rowIndex > visibleRange.stopIndex || rowIndex === 0);
-
-    setScrollToRow(rowIndex + (jumpDownFurther ? 1 : 0));
-  }, [isTable, rowIndex, setScrollToRow, visibleRange]);
-
-  const onRowsRendered = setVisibleRange;
+    // When Jump Down, ensures purple line is visible and index needs to be 1 to jump to top of network list
+    if (indexOfCurrentRow > visibleRange[1] || indexOfCurrentRow === 0) {
+      setScrollToRow(indexOfCurrentRow + 1);
+    } else {
+      setScrollToRow(indexOfCurrentRow);
+    }
+  }, [indexOfCurrentRow, setScrollToRow, visibleRange]);
 
-  const onSectionRendered = useCallback(
-    ({rowStartIndex, rowStopIndex}: SectionRenderedParams) => {
-      setVisibleRange({startIndex: rowStartIndex, stopIndex: rowStopIndex});
+  const handleScroll = useCallback(
+    ({clientHeight, scrollTop}: ScrollParams) => {
+      setVisibleRange([
+        Math.floor(scrollTop / rowHeight),
+        Math.floor(scrollTop + clientHeight / rowHeight),
+      ]);
     },
-    []
+    [rowHeight]
   );
 
   return {
+    showJumpUpButton: indexOfCurrentRow < visibleRange[0],
+    showJumpDownButton: indexOfCurrentRow > visibleRange[1],
     handleClick,
-    onRowsRendered,
-    onSectionRendered,
-    showJumpDownButton: rowIndex > visibleRange.stopIndex,
-    showJumpUpButton: rowIndex < visibleRange.startIndex,
+    handleScroll,
   };
 }

static/app/utils/replays/hooks/useA11yData.tsx

@@ -1,6 +1,6 @@
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {useApiQuery} from 'sentry/utils/queryClient';
-import hydrateA11yFrame, {RawA11yFrame} from 'sentry/utils/replays/hydrateA11yFrame';
+import hydrateA11yFrame, {RawA11yFrame} from 'sentry/utils/replays/hydrateA11yRecord';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 

static/app/utils/replays/hooks/useMockA11yData.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import hydrateA11yFrame, {RawA11yFrame} from 'sentry/utils/replays/hydrateA11yFrame';
+import hydrateA11yFrame, {RawA11yFrame} from 'sentry/utils/replays/hydrateA11yRecord';
 import useProjects from 'sentry/utils/useProjects';
 
 export default function useA11yData() {

static/app/utils/replays/hydrateA11yFrame.tsx → static/app/utils/replays/hydrateA11yRecord.tsx

@@ -24,7 +24,7 @@ export type HydratedA11yFrame = Overwrite<
   RawA11yFrame,
   {
     /**
-     * Alias of the id field
+     * Alias of `id`
      */
     description: string;
     /**

static/app/utils/replays/types.tsx

@@ -15,7 +15,7 @@ import type {
 } from '@sentry/react';
 import invariant from 'invariant';
 
-import {HydratedA11yFrame} from 'sentry/utils/replays/hydrateA11yFrame';
+import {HydratedA11yFrame} from 'sentry/utils/replays/hydrateA11yRecord';
 
 /**
  * Extra breadcrumb types not included in `@sentry/replay`

static/app/views/replays/detail/accessibility/accessibilityTableCell.tsx

@@ -10,7 +10,7 @@ import {
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconFire, IconInfo, IconWarning} from 'sentry/icons';
 import type useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
-import {HydratedA11yFrame} from 'sentry/utils/replays/hydrateA11yFrame';
+import {HydratedA11yFrame} from 'sentry/utils/replays/hydrateA11yRecord';
 import {Color} from 'sentry/utils/theme';
 import useUrlParams from 'sentry/utils/useUrlParams';
 import useSortAccessibility from 'sentry/views/replays/detail/accessibility/useSortAccessibility';

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

@@ -3,9 +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 useJumpButtons from 'sentry/components/replays/useJumpButtons';
 import {t} from 'sentry/locale';
 // import useA11yData from 'sentry/utils/replays/hooks/useA11yData';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
@@ -86,18 +84,6 @@ function AccessibilityList() {
       ? Math.min(maxContainerHeight, containerSize)
       : undefined;
 
-  const {
-    handleClick: onClickToJump,
-    onSectionRendered,
-    showJumpDownButton,
-    showJumpUpButton,
-  } = useJumpButtons({
-    currentTime,
-    frames: filteredItems,
-    isTable: true,
-    setScrollToRow,
-  });
-
   const onClickCell = useCallback(
     ({}: {dataIndex: number; rowIndex: number}) => {
       // eslint-disable-line
@@ -200,23 +186,15 @@ function AccessibilityList() {
                         setScrollToRow(undefined);
                       }
                     }}
-                    onSectionRendered={onSectionRendered}
+                    scrollToRow={scrollToRow}
                     overscanColumnCount={COLUMN_COUNT}
                     overscanRowCount={5}
                     rowCount={items.length + 1}
                     rowHeight={({index}) => (index === 0 ? HEADER_HEIGHT : BODY_HEIGHT)}
-                    scrollToRow={scrollToRow}
                     width={width}
                   />
                 )}
               </AutoSizer>
-              {sortConfig.by === 'timestamp' && items.length ? (
-                <JumpButtons
-                  jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
-                  onClick={onClickToJump}
-                  tableHeaderHeight={HEADER_HEIGHT}
-                />
-              ) : null}
             </OverflowHidden>
           ) : (
             <Placeholder height="100%" />

static/app/views/replays/detail/accessibility/useSortAccessibility.tsx

@@ -1,6 +1,6 @@
 import {useCallback, useMemo} from 'react';
 
-import {HydratedA11yFrame} from 'sentry/utils/replays/hydrateA11yFrame';
+import {HydratedA11yFrame} from 'sentry/utils/replays/hydrateA11yRecord';
 import useUrlParams from 'sentry/utils/useUrlParams';
 
 interface SortConfig {

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

@@ -1,4 +1,4 @@
-import {useMemo, useRef, useState} from 'react';
+import {useMemo, useRef} from 'react';
 import {
   AutoSizer,
   CellMeasurer,
@@ -7,9 +7,6 @@ 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 useJumpButtons from 'sentry/components/replays/useJumpButtons';
 import {t} from 'sentry/locale';
 import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
 import useActiveReplayTab from 'sentry/utils/replays/hooks/useActiveReplayTab';
@@ -39,7 +36,6 @@ const cellMeasurer = {
 };
 
 function Breadcrumbs({frames, startTimestampMs}: Props) {
-  const {currentTime} = useReplayContext();
   const {onClickTimestamp} = useCrumbHandlers();
 
   const {setActiveTab} = useActiveReplayTab();
@@ -54,8 +50,6 @@ function Breadcrumbs({frames, startTimestampMs}: Props) {
   // re-render when items are expanded/collapsed, though it may work in state as well.
   const expandPathsRef = useRef(new Map<number, Set<string>>());
 
-  const [scrollToRow, setScrollToRow] = useState<undefined | number>(undefined);
-
   const filterProps = useBreadcrumbFilters({frames: frames || []});
   const {items, searchTerm, setSearchTerm} = filterProps;
   const clearSearchTerm = () => setSearchTerm('');
@@ -72,18 +66,6 @@ function Breadcrumbs({frames, startTimestampMs}: Props) {
     expandPathsRef,
   });
 
-  const {
-    handleClick: onClickToJump,
-    onRowsRendered,
-    showJumpDownButton,
-    showJumpUpButton,
-  } = useJumpButtons({
-    currentTime,
-    frames: items,
-    isTable: false,
-    setScrollToRow,
-  });
-
   useScrollToCurrentItem({
     frames,
     ref: listRef,
@@ -134,18 +116,11 @@ function Breadcrumbs({frames, startTimestampMs}: Props) {
                     {t('No breadcrumbs recorded')}
                   </NoRowRenderer>
                 )}
-                onRowsRendered={onRowsRendered}
-                onScroll={() => {
-                  if (scrollToRow !== undefined) {
-                    setScrollToRow(undefined);
-                  }
-                }}
                 overscanRowCount={5}
                 ref={listRef}
                 rowCount={items.length}
                 rowHeight={cache.rowHeight}
                 rowRenderer={renderRow}
-                scrollToIndex={scrollToRow}
                 width={width}
               />
             )}
@@ -153,13 +128,6 @@ function Breadcrumbs({frames, startTimestampMs}: Props) {
         ) : (
           <Placeholder height="100%" />
         )}
-        {frames?.length ? (
-          <JumpButtons
-            jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
-            onClick={onClickToJump}
-            tableHeaderHeight={0}
-          />
-        ) : null}
       </TabItemContainer>
     </FluidHeight>
   );

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

@@ -1,4 +1,4 @@
-import {memo, useMemo, useRef, useState} from 'react';
+import {memo, useMemo, useRef} from 'react';
 import {
   AutoSizer,
   CellMeasurer,
@@ -9,7 +9,6 @@ import {
 import Placeholder from 'sentry/components/placeholder';
 import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import useJumpButtons from 'sentry/components/replays/useJumpButtons';
 import {t} from 'sentry/locale';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
 import ConsoleFilters from 'sentry/views/replays/detail/console/consoleFilters';
@@ -36,8 +35,6 @@ function Console() {
   const startTimestampMs = replay?.getReplay()?.started_at?.getTime() ?? 0;
   const frames = replay?.getConsoleFrames();
 
-  const [scrollToRow, setScrollToRow] = useState<undefined | number>(undefined);
-
   const filterProps = useConsoleFilters({frames: frames || []});
   const {expandPathsRef, searchTerm, logLevel, items, setSearchTerm} = filterProps;
   const clearSearchTerm = () => setSearchTerm('');
@@ -57,18 +54,6 @@ function Console() {
     expandPathsRef,
   });
 
-  const {
-    handleClick: onClickToJump,
-    onRowsRendered,
-    showJumpDownButton,
-    showJumpUpButton,
-  } = useJumpButtons({
-    currentTime,
-    frames: items,
-    isTable: false,
-    setScrollToRow,
-  });
-
   const renderRow = ({index, key, style, parent}: ListRowProps) => {
     const item = items[index];
 
@@ -99,6 +84,9 @@ function Console() {
     );
   };
 
+  const showJumpUpButton = false;
+  const showJumpDownButton = false;
+
   return (
     <FluidHeight>
       <ConsoleFilters frames={frames} {...filterProps} />
@@ -117,18 +105,11 @@ function Console() {
                     {t('No console logs recorded')}
                   </NoRowRenderer>
                 )}
-                onRowsRendered={onRowsRendered}
-                onScroll={() => {
-                  if (scrollToRow !== undefined) {
-                    setScrollToRow(undefined);
-                  }
-                }}
                 overscanRowCount={5}
                 ref={listRef}
                 rowCount={items.length}
                 rowHeight={cache.rowHeight}
                 rowRenderer={renderRow}
-                scrollToIndex={scrollToRow}
                 width={width}
               />
             )}
@@ -136,13 +117,11 @@ function Console() {
         ) : (
           <Placeholder height="100%" />
         )}
-        {frames?.length ? (
-          <JumpButtons
-            jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
-            onClick={onClickToJump}
-            tableHeaderHeight={0}
-          />
-        ) : null}
+        <JumpButtons
+          jump={showJumpUpButton ? 'up' : showJumpDownButton ? 'down' : undefined}
+          onClick={() => {}}
+          tableHeaderHeight={0}
+        />
       </TabItemContainer>
     </FluidHeight>
   );