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

Author: ryan953

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

@@ -21,8 +21,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;
@@ -33,7 +31,6 @@ interface Props {
   extraction: Extraction | undefined;
   frame: ReplayFrame;
   onClick: null | MouseCallback;
-  onDimensionChange: () => void;
   onInspectorExpanded: (
     path: string,
     expandedState: Record<string, boolean>,
@@ -42,7 +39,6 @@ interface Props {
   onMouseEnter: MouseCallback;
   onMouseLeave: MouseCallback;
   startTimestampMs: number;
-  traces: ReplayTraceRow | undefined;
   className?: string;
   expandPaths?: string[];
   style?: CSSProperties;
@@ -54,13 +50,11 @@ function BreadcrumbItem({
   frame,
   expandPaths,
   onClick,
-  onDimensionChange,
   onInspectorExpanded,
   onMouseEnter,
   onMouseLeave,
   startTimestampMs,
   style,
-  traces,
 }: Props) {
   const {color, description, title, icon} = getFrameDetails(frame);
   const {replay} = useReplayContext();
@@ -133,14 +127,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/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} = reactHooks.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} = reactHooks.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';
-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/focusTabs.tsx

@@ -16,22 +16,17 @@ 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');
-
   return {
     [TabKey.BREADCRUMBS]: t('Breadcrumbs'),
     [TabKey.CONSOLE]: 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