Browse Source

ref(issue-details): Remove inline replay viewer feature flag (#71189)

Malachi Willey 9 months ago
parent
commit
ede614e670

+ 11 - 70
static/app/components/events/eventReplay/index.spec.tsx

@@ -1,15 +1,13 @@
 import {EventFixture} from 'sentry-fixture/event';
-import {GroupFixture} from 'sentry-fixture/group';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {RRWebInitFrameEventsFixture} from 'sentry-fixture/replay/rrweb';
 import {ReplayErrorFixture} from 'sentry-fixture/replayError';
 import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
 
-import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import EventReplay from 'sentry/components/events/eventReplay';
-import ConfigStore from 'sentry/stores/configStore';
 import {
   useHasOrganizationSentAnyReplayEvents,
   useReplayOnboardingSidebarPanel,
@@ -22,6 +20,14 @@ import type {ReplayError} from 'sentry/views/replays/types';
 jest.mock('sentry/utils/replays/hooks/useReplayOnboarding');
 jest.mock('sentry/utils/replays/hooks/useReplayReader');
 jest.mock('sentry/utils/useProjects');
+// Replay clip preview is very heavy, mock it out
+jest.mock(
+  'sentry/components/events/eventReplay/replayClipPreview',
+  () =>
+    function () {
+      return <div data-test-id="replay-clip" />;
+    }
+);
 
 const mockEventTimestamp = new Date('2022-09-22T16:59:41Z');
 const mockReplayId = '761104e184c64d439ee1014b72b4d83b';
@@ -179,7 +185,7 @@ describe('EventReplay', function () {
       {organization}
     );
 
-    expect(await screen.findByTestId('player-container')).toBeInTheDocument();
+    expect(await screen.findByTestId('replay-clip')).toBeInTheDocument();
   });
 
   it('should render a replay when there is a replay_id from contexts', async function () {
@@ -207,71 +213,6 @@ describe('EventReplay', function () {
       {organization}
     );
 
-    expect(await screen.findByTestId('player-container')).toBeInTheDocument();
-  });
-
-  describe('replay clip', function () {
-    const orgWithClipFlag = OrganizationFixture({
-      features: [...organization.features, 'issue-details-inline-replay-viewer'],
-    });
-
-    beforeEach(() => {
-      MockUseHasOrganizationSentAnyReplayEvents.mockReturnValue({
-        hasOrgSentReplays: true,
-        fetching: false,
-      });
-      MockUseReplayOnboardingSidebarPanel.mockReturnValue({
-        activateSidebar: jest.fn(),
-      });
-
-      const user = ConfigStore.get('user');
-
-      ConfigStore.set('user', {
-        ...user,
-        options: {...user.options, issueDetailsNewExperienceQ42023: true},
-      });
-    });
-
-    it('adds event and issue information to breadcrumbs', async () => {
-      mockIsFullscreen.mockReturnValue(true);
-
-      render(
-        <EventReplay
-          {...defaultProps}
-          event={EventFixture({
-            ...mockEvent,
-            id: '1',
-            contexts: {
-              replay: {
-                replay_id: '761104e184c64d439ee1014b72b4d83b',
-              },
-            },
-          })}
-          group={GroupFixture({id: '101'})}
-        />,
-        {
-          organization: orgWithClipFlag,
-        }
-      );
-
-      // Event that matches ID 1 should be shown as "This Event"
-      await waitFor(
-        () => {
-          expect(screen.getByText('Error: This Event')).toBeInTheDocument();
-        },
-        {timeout: 5000, interval: 100}
-      );
-      expect(screen.getByText('JAVASCRIPT-101')).toBeInTheDocument();
-
-      // Other events should link to the event and issue
-      expect(screen.getByRole('link', {name: '2'})).toHaveAttribute(
-        'href',
-        '/organizations/org-slug/issues/102/events/2/#replay'
-      );
-      expect(screen.getByRole('link', {name: 'JAVASCRIPT-102'})).toHaveAttribute(
-        'href',
-        '/organizations/org-slug/issues/102/'
-      );
-    }, 10000);
+    expect(await screen.findByTestId('replay-clip')).toBeInTheDocument();
   });
 });

+ 6 - 15
static/app/components/events/eventReplay/index.tsx

@@ -37,7 +37,6 @@ export const REPLAY_CLIP_OFFSETS = {
 };
 
 const ReplayOnboardingPanel = lazy(() => import('./replayInlineOnboardingPanel'));
-const ReplayPreview = lazy(() => import('./replayPreview'));
 const ReplayClipPreview = lazy(() => import('./replayClipPreview'));
 
 function EventReplayContent({
@@ -50,10 +49,6 @@ function EventReplayContent({
   const router = useRouter();
   const {getReplayCountForIssue} = useReplayCountForIssues();
 
-  const hasReplayClipFeature = organization.features.includes(
-    'issue-details-inline-replay-viewer'
-  );
-
   if (fetching) {
     return null;
   }
@@ -142,16 +137,12 @@ function EventReplayContent({
       <ErrorBoundary mini>
         <ReplayGroupContextProvider groupId={group?.id} eventId={event.id}>
           <ReactLazyLoad debounce={50} height={448} offset={0} once>
-            {hasReplayClipFeature ? (
-              <LazyLoad
-                {...commonProps}
-                LazyComponent={ReplayClipPreview}
-                clipOffsets={REPLAY_CLIP_OFFSETS}
-                overlayContent={overlayContent}
-              />
-            ) : (
-              <LazyLoad {...commonProps} LazyComponent={ReplayPreview} />
-            )}
+            <LazyLoad
+              {...commonProps}
+              LazyComponent={ReplayClipPreview}
+              clipOffsets={REPLAY_CLIP_OFFSETS}
+              overlayContent={overlayContent}
+            />
           </ReactLazyLoad>
         </ReplayGroupContextProvider>
       </ErrorBoundary>