ref(replay): Cleanup old session-replay-trace-table experiment (frontend) (#68821)

This is the front-end change, because this is disabled backend can also
be cleaned up at the same time.

static/app/components/replays/breadcrumbs/breadcrumbItem.tsx

@@ -22,8 +22,6 @@ import {isErrorFrame, isFeedbackFrame} from 'sentry/utils/replays/types';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
 import IconWrapper from 'sentry/views/replays/detail/iconWrapper';
-import TraceGrid from 'sentry/views/replays/detail/perfTable/traceGrid';
-import type {ReplayTraceRow} from 'sentry/views/replays/detail/perfTable/useReplayPerfData';
 import TimestampButton from 'sentry/views/replays/detail/timestampButton';
 
 type MouseCallback = (frame: ReplayFrame, e: React.MouseEvent<HTMLElement>) => void;
@@ -34,7 +32,6 @@ interface Props {
   extraction: Extraction | undefined;
   frame: ReplayFrame;
   onClick: null | MouseCallback;
-  onDimensionChange: () => void;
   onInspectorExpanded: (
     path: string,
     expandedState: Record<string, boolean>,
@@ -43,7 +40,6 @@ interface Props {
   onMouseEnter: MouseCallback;
   onMouseLeave: MouseCallback;
   startTimestampMs: number;
-  traces: ReplayTraceRow | undefined;
   className?: string;
   expandPaths?: string[];
   style?: CSSProperties;
@@ -55,13 +51,11 @@ function BreadcrumbItem({
   frame,
   expandPaths,
   onClick,
-  onDimensionChange,
   onInspectorExpanded,
   onMouseEnter,
   onMouseLeave,
   startTimestampMs,
   style,
-  traces,
 }: Props) {
   const {color, description, title, icon} = getFrameDetails(frame);
   const {replay} = useReplayContext();
@@ -136,14 +130,6 @@ function BreadcrumbItem({
             </CodeContainer>
           ) : null}
 
-          {traces?.flattenedTraces.map((flatTrace, i) => (
-            <TraceGrid
-              key={i}
-              flattenedTrace={flatTrace}
-              onDimensionChange={onDimensionChange}
-            />
-          ))}
-
           {isErrorFrame(frame) || isFeedbackFrame(frame) ? (
             <CrumbErrorIssue frame={frame} />
           ) : null}

static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx

@@ -88,8 +88,6 @@ function Event({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       startTimestampMs={startTimestampMs}
-      traces={undefined}
-      onDimensionChange={() => {}}
       onInspectorExpanded={() => {}}
     />
   ));

static/app/utils/replays/hooks/useActiveReplayTab.spec.tsx

@@ -102,37 +102,4 @@ describe('useActiveReplayTab', () => {
       query: {t_main: TabKey.TAGS},
     });
   });
-
-  it('should disallow PERF by default', () => {
-    mockOrganizationFixture({
-      features: [],
-    });
-
-    const {result} = renderHook(useActiveReplayTab, {
-      initialProps: {},
-    });
-    expect(result.current.getActiveTab()).toBe(TabKey.BREADCRUMBS);
-
-    result.current.setActiveTab(TabKey.PERF);
-    expect(mockPush).toHaveBeenLastCalledWith({
-      pathname: '',
-      query: {t_main: TabKey.BREADCRUMBS},
-    });
-  });
-
-  it('should allow PERF when the feature is enabled', () => {
-    mockOrganizationFixture({
-      features: ['session-replay-trace-table'],
-    });
-    const {result} = renderHook(useActiveReplayTab, {
-      initialProps: {},
-    });
-    expect(result.current.getActiveTab()).toBe(TabKey.BREADCRUMBS);
-
-    result.current.setActiveTab(TabKey.PERF);
-    expect(mockPush).toHaveBeenLastCalledWith({
-      pathname: '',
-      query: {t_main: TabKey.PERF},
-    });
-  });
 });

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

@@ -1,7 +1,5 @@
 import {useCallback} from 'react';
 
-import type {Organization} from 'sentry/types/organization';
-import useOrganization from 'sentry/utils/useOrganization';
 import useUrlParams from 'sentry/utils/useUrlParams';
 
 export enum TabKey {
@@ -11,42 +9,32 @@ export enum TabKey {
   ERRORS = 'errors',
   MEMORY = 'memory',
   NETWORK = 'network',
-  PERF = 'perf',
   TAGS = 'tags',
   TRACE = 'trace',
 }
 
-function isReplayTab(tab: string, organization: Organization): tab is TabKey {
-  const hasPerfTab = organization.features.includes('session-replay-trace-table');
-
-  if (tab === TabKey.PERF) {
-    return hasPerfTab;
-  }
-
+function isReplayTab(tab: string): tab is TabKey {
   return Object.values<string>(TabKey).includes(tab);
 }
 
 function useActiveReplayTab({isVideoReplay}: {isVideoReplay?: boolean}) {
   const defaultTab = isVideoReplay ? TabKey.TAGS : TabKey.BREADCRUMBS;
-  const organization = useOrganization();
   const {getParamValue, setParamValue} = useUrlParams('t_main', defaultTab);
 
   const paramValue = getParamValue()?.toLowerCase() ?? '';
 
   return {
     getActiveTab: useCallback(
-      () => (isReplayTab(paramValue, organization) ? (paramValue as TabKey) : defaultTab),
-      [organization, paramValue, defaultTab]
+      () => (isReplayTab(paramValue) ? (paramValue as TabKey) : defaultTab),
+      [paramValue, defaultTab]
     ),
     setActiveTab: useCallback(
       (value: string) => {
         setParamValue(
-          isReplayTab(value.toLowerCase(), organization)
-            ? value.toLowerCase()
-            : defaultTab
+          isReplayTab(value.toLowerCase()) ? value.toLowerCase() : defaultTab
         );
       },
-      [organization, setParamValue, defaultTab]
+      [setParamValue, defaultTab]
     ),
   };
 }

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

@@ -7,14 +7,12 @@ import {useReplayContext} from 'sentry/components/replays/replayContext';
 import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
-import type {ReplayTraceRow} from 'sentry/views/replays/detail/perfTable/useReplayPerfData';
 
 interface Props {
   extraction: Extraction | undefined;
   frame: ReplayFrame;
   index: number;
   onClick: ReturnType<typeof useCrumbHandlers>['onClickTimestamp'];
-  onDimensionChange: (index: number) => void;
   onInspectorExpanded: (
     index: number,
     path: string,
@@ -23,7 +21,6 @@ interface Props {
   ) => void;
   startTimestampMs: number;
   style: CSSProperties;
-  traces: ReplayTraceRow | undefined;
   breadcrumbIndex?: number[][];
   expandPaths?: string[];
 }
@@ -34,19 +31,14 @@ export default function BreadcrumbRow({
   frame,
   index,
   onClick,
-  onDimensionChange,
   onInspectorExpanded,
   startTimestampMs,
   style,
-  traces,
 }: Props) {
   const {currentTime, currentHoverTime} = useReplayContext();
 
   const {onMouseEnter, onMouseLeave} = useCrumbHandlers();
-  const handleDimensionChange = useCallback(
-    () => onDimensionChange(index),
-    [onDimensionChange, index]
-  );
+
   const handleObjectInspectorExpanded = useCallback(
     (path, expandedState, e) => onInspectorExpanded?.(index, path, expandedState, e),
     [index, onInspectorExpanded]
@@ -66,14 +58,12 @@ export default function BreadcrumbRow({
       })}
       style={style}
       frame={frame}
-      traces={traces}
       extraction={extraction}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       startTimestampMs={startTimestampMs}
       expandPaths={expandPaths}
-      onDimensionChange={handleDimensionChange}
       onInspectorExpanded={handleObjectInspectorExpanded}
     />
   );

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

@@ -9,7 +9,6 @@ import useJumpButtons from 'sentry/components/replays/useJumpButtons';
 import {t} from 'sentry/locale';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
 import useExtractedDomNodes from 'sentry/utils/replays/hooks/useExtractedDomNodes';
-import useOrganization from 'sentry/utils/useOrganization';
 import useVirtualizedInspector from 'sentry/views/replays/detail//useVirtualizedInspector';
 import BreadcrumbFilters from 'sentry/views/replays/detail/breadcrumbs/breadcrumbFilters';
 import BreadcrumbRow from 'sentry/views/replays/detail/breadcrumbs/breadcrumbRow';
@@ -18,10 +17,8 @@ import useScrollToCurrentItem from 'sentry/views/replays/detail/breadcrumbs/useS
 import FilterLoadingIndicator from 'sentry/views/replays/detail/filterLoadingIndicator';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 import NoRowRenderer from 'sentry/views/replays/detail/noRowRenderer';
-import useReplayPerfData from 'sentry/views/replays/detail/perfTable/useReplayPerfData';
 import TabItemContainer from 'sentry/views/replays/detail/tabItemContainer';
 import useVirtualizedList from 'sentry/views/replays/detail/useVirtualizedList';
-import useVirtualListDimentionChange from 'sentry/views/replays/detail/useVirtualListDimentionChange';
 
 // Ensure this object is created once as it is an input to
 // `useVirtualizedList`'s memoization
@@ -32,13 +29,9 @@ const cellMeasurer = {
 
 function Breadcrumbs() {
   const {currentTime, replay} = useReplayContext();
-  const organization = useOrganization();
-  const hasPerfTab = organization.features.includes('session-replay-trace-table');
-
   const {onClickTimestamp} = useCrumbHandlers();
   const {data: frameToExtraction, isFetching: isFetchingExtractions} =
     useExtractedDomNodes({replay});
-  const {data: frameToTrace, isFetching: isFetchingTraces} = useReplayPerfData({replay});
 
   const startTimestampMs = replay?.getStartTimestampMs() ?? 0;
   const frames = replay?.getChapterFrames();
@@ -57,7 +50,6 @@ function Breadcrumbs() {
     ref: listRef,
     deps,
   });
-  const {handleDimensionChange} = useVirtualListDimentionChange({cache, listRef});
   const {handleDimensionChange: handleInspectorExpanded} = useVirtualizedInspector({
     cache,
     listRef,
@@ -81,12 +73,12 @@ function Breadcrumbs() {
     ref: listRef,
   });
 
-  // Need to refresh the item dimensions as DOM & Trace data gets loaded
+  // Need to refresh the item dimensions as DOM data gets loaded
   useEffect(() => {
-    if (!isFetchingExtractions || !isFetchingTraces) {
+    if (!isFetchingExtractions) {
       updateList();
     }
-  }, [isFetchingExtractions, isFetchingTraces, updateList]);
+  }, [isFetchingExtractions, updateList]);
 
   const renderRow = ({index, key, style, parent}: ListRowProps) => {
     const item = (items || [])[index];
@@ -103,14 +95,12 @@ function Breadcrumbs() {
           index={index}
           frame={item}
           extraction={frameToExtraction?.get(item)}
-          traces={hasPerfTab ? frameToTrace?.get(item) : undefined}
           startTimestampMs={startTimestampMs}
           style={style}
           expandPaths={Array.from(expandPathsRef.current?.get(index) || [])}
           onClick={() => {
             onClickTimestamp(item);
           }}
-          onDimensionChange={handleDimensionChange}
           onInspectorExpanded={handleInspectorExpanded}
         />
       </CellMeasurer>
@@ -119,7 +109,7 @@ function Breadcrumbs() {
 
   return (
     <FluidHeight>
-      <FilterLoadingIndicator isLoading={isFetchingExtractions || isFetchingTraces}>
+      <FilterLoadingIndicator isLoading={isFetchingExtractions}>
         <BreadcrumbFilters frames={frames} {...filterProps} />
       </FilterLoadingIndicator>
       <TabItemContainer data-test-id="replay-details-breadcrumbs-tab">

static/app/views/replays/detail/layout/focusArea.tsx

@@ -5,7 +5,6 @@ import Console from 'sentry/views/replays/detail/console';
 import ErrorList from 'sentry/views/replays/detail/errorList/index';
 import MemoryPanel from 'sentry/views/replays/detail/memoryPanel/index';
 import NetworkList from 'sentry/views/replays/detail/network';
-import PerfTable from 'sentry/views/replays/detail/perfTable/index';
 import TagPanel from 'sentry/views/replays/detail/tagPanel';
 import Trace from 'sentry/views/replays/detail/trace/index';
 
@@ -32,8 +31,6 @@ export default function FocusArea({isVideoReplay}: {isVideoReplay?: boolean}) {
       return <NetworkList />;
     case TabKey.TRACE:
       return <Trace />;
-    case TabKey.PERF:
-      return <PerfTable />;
     case TabKey.ERRORS:
       return <ErrorList />;
     case TabKey.MEMORY:

static/app/views/replays/detail/layout/focusTabs.tsx

@@ -16,15 +16,11 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 
 function getReplayTabs({
-  organization,
   isVideoReplay,
 }: {
   isVideoReplay: boolean;
   organization: Organization;
 }): Record<TabKey, ReactNode> {
-  // The new trace table inside Breadcrumb items:
-  const hasTraceTable = organization.features.includes('session-replay-trace-table');
-
   // For video replays, we hide the console, a11y, trace, and memory tabs
   // The console tab isn't useful for video replays; most of the useful logging
   // context will come from breadcrumbs
@@ -35,8 +31,7 @@ function getReplayTabs({
     [TabKey.CONSOLE]: isVideoReplay ? null : t('Console'),
     [TabKey.NETWORK]: t('Network'),
     [TabKey.ERRORS]: t('Errors'),
-    [TabKey.TRACE]: hasTraceTable || isVideoReplay ? null : t('Trace'),
-    [TabKey.PERF]: null,
+    [TabKey.TRACE]: isVideoReplay ? null : t('Trace'),
     [TabKey.A11Y]: isVideoReplay ? null : (
       <Fragment>
         <Tooltip

static/app/views/replays/detail/perfTable/grabber.tsx

@@ -1,51 +0,0 @@
-import type {MouseEventHandler} from 'react';
-import styled from '@emotion/styled';
-
-interface Props {
-  'data-is-held': boolean;
-  'data-slide-direction': 'leftright' | 'updown';
-  onDoubleClick: MouseEventHandler<HTMLElement>;
-  onMouseDown: MouseEventHandler<HTMLElement>;
-}
-
-const Grabber = styled('div')<Props>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 6px;
-  transform: translate(-3px, 0);
-  z-index: ${p => p.theme.zIndex.initial};
-
-  user-select: inherit;
-  &[data-is-held='true'] {
-    user-select: none;
-  }
-
-  &[data-slide-direction='leftright'] {
-    cursor: ew-resize;
-  }
-  &[data-slide-direction='updown'] {
-    cursor: ns-resize;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 2.5px;
-    height: 100%;
-    width: 1px;
-    transform: translate(-0.5px, 0);
-    z-index: ${p => p.theme.zIndex.initial};
-    background: ${p => p.theme.border};
-  }
-  &:hover:after,
-  &[data-is-held='true']:after {
-    left: 1.5px;
-    width: 3px;
-    background: ${p => p.theme.black};
-  }
-`;
-
-export default Grabber;

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

@@ -1,14 +0,0 @@
-import {useReplayContext} from 'sentry/components/replays/replayContext';
-import PerfTable from 'sentry/views/replays/detail/perfTable/perfTable';
-import useReplayPerfData from 'sentry/views/replays/detail/perfTable/useReplayPerfData';
-
-type Props = {};
-
-function Perf({}: Props) {
-  const {replay} = useReplayContext();
-  const perfData = useReplayPerfData({replay});
-
-  return <PerfTable perfData={perfData} />;
-}
-
-export default Perf;