Revert "feat(replay): Persist has-viewed state to the server when replays are seen (#68743)"

This reverts commit b0a33ce.

Co-authored-by: ryan953 <[email protected]>

Author: getsentry-bot

static/app/components/events/eventReplay/replayPreviewPlayer.tsx

@@ -1,5 +1,5 @@
 import type {ComponentProps} from 'react';
-import {useEffect, useRef, useState} from 'react';
+import {useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button, LinkButton} from 'sentry/components/button';
@@ -18,7 +18,6 @@ import {space} from 'sentry/styles/space';
 import EventView from 'sentry/utils/discover/eventView';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
-import useMarkReplayViewed from 'sentry/utils/replays/hooks/useMarkReplayViewed';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useRoutes} from 'sentry/utils/useRoutes';
@@ -54,7 +53,7 @@ function ReplayPreviewPlayer({
   const location = useLocation();
   const organization = useOrganization();
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const {replay, currentTime, isFetching, isFinished, isPlaying} = useReplayContext();
+  const {replay, currentTime, isFinished, isPlaying} = useReplayContext();
   const eventView = EventView.fromLocation(location);
 
   const fullscreenRef = useRef(null);
@@ -77,13 +76,6 @@ function ReplayPreviewPlayer({
     },
   };
 
-  const {mutate: markAsViewed} = useMarkReplayViewed();
-  useEffect(() => {
-    if (replayRecord && !replayRecord.has_viewed && !isFetching && isPlaying) {
-      markAsViewed({projectSlug: replayRecord.project_id, replayId: replayRecord.id});
-    }
-  }, [isFetching, isPlaying, markAsViewed, replayRecord]);
-
   return (
     <PlayerPanel>
       <HeaderWrapper>

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

@@ -55,7 +55,6 @@ const mockEventTimestampMs = mockEventTimestamp.getTime();
 // Get replay data with the mocked replay reader params
 const mockReplay = ReplayReader.factory({
   replayRecord: ReplayRecordFixture({
-    id: REPLAY_ID_1,
     browser: {
       name: 'Chrome',
       version: '110.0.0',
@@ -84,7 +83,7 @@ mockUseReplayReader.mockImplementation(() => {
     projectSlug: ProjectFixture().slug,
     replay: mockReplay,
     replayId: REPLAY_ID_1,
-    replayRecord: ReplayRecordFixture({id: REPLAY_ID_1}),
+    replayRecord: ReplayRecordFixture(),
   };
 });
 
@@ -371,7 +370,7 @@ describe('GroupReplays', () => {
               count_errors: 1,
               duration: 52346,
               finished_at: new Date('2022-09-15T06:54:00+00:00'),
-              id: REPLAY_ID_1,
+              id: '346789a703f6454384f1de473b8b9fcc',
               started_at: new Date('2022-09-15T06:50:00+00:00'),
               urls: [
                 'https://dev.getsentry.net:7999/replays/',
@@ -383,7 +382,7 @@ describe('GroupReplays', () => {
               count_errors: 4,
               duration: 400,
               finished_at: new Date('2022-09-21T21:40:38+00:00'),
-              id: REPLAY_ID_2,
+              id: 'b05dae9b6be54d21a4d5ad9f8f02b780',
               started_at: new Date('2022-09-21T21:30:44+00:00'),
               urls: [
                 'https://dev.getsentry.net:7999/organizations/org-slug/replays/?project=2&statsPeriod=24h',
@@ -476,7 +475,7 @@ describe('GroupReplays', () => {
               count_errors: 1,
               duration: 52346,
               finished_at: new Date('2022-09-15T06:54:00+00:00'),
-              id: REPLAY_ID_1,
+              id: '346789a703f6454384f1de473b8b9fcc',
               started_at: new Date('2022-09-15T06:50:00+00:00'),
               urls: [
                 'https://dev.getsentry.net:7999/replays/',
@@ -488,7 +487,7 @@ describe('GroupReplays', () => {
               count_errors: 4,
               duration: 400,
               finished_at: new Date('2022-09-21T21:40:38+00:00'),
-              id: REPLAY_ID_2,
+              id: 'b05dae9b6be54d21a4d5ad9f8f02b780',
               started_at: new Date('2022-09-21T21:30:44+00:00'),
               urls: [
                 'https://dev.getsentry.net:7999/organizations/org-slug/replays/?project=2&statsPeriod=24h',
@@ -532,7 +531,6 @@ describe('GroupReplays', () => {
         organizationProps: {features: ['session-replay']},
       }));
       const mockGroup = GroupFixture();
-      const mockReplayRecord = mockReplay?.getReplay();
 
       const mockReplayCountApi = MockApiClient.addMockResponse({
         url: mockReplayCountUrl,
@@ -550,7 +548,7 @@ describe('GroupReplays', () => {
               count_errors: 1,
               duration: 52346,
               finished_at: new Date('2022-09-15T06:54:00+00:00'),
-              id: REPLAY_ID_1,
+              id: '346789a703f6454384f1de473b8b9fcc',
               started_at: new Date('2022-09-15T06:50:00+00:00'),
               urls: [
                 'https://dev.getsentry.net:7999/replays/',
@@ -562,7 +560,7 @@ describe('GroupReplays', () => {
               count_errors: 4,
               duration: 400,
               finished_at: new Date('2022-09-21T21:40:38+00:00'),
-              id: REPLAY_ID_2,
+              id: 'b05dae9b6be54d21a4d5ad9f8f02b780',
               started_at: new Date('2022-09-21T21:30:44+00:00'),
               urls: [
                 'https://dev.getsentry.net:7999/organizations/org-slug/replays/?project=2&statsPeriod=24h',
@@ -577,10 +575,6 @@ describe('GroupReplays', () => {
           })),
         },
       });
-      MockApiClient.addMockResponse({
-        method: 'POST',
-        url: `/projects/${organization.slug}/${mockReplayRecord?.project_id}/replays/${mockReplayRecord?.id}/viewed-by/`,
-      });
 
       render(<GroupReplays group={mockGroup} />, {
         context: routerContext,

static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useEffect} from 'react';
+import {Fragment} from 'react';
 import type {RouteComponentProps} from 'react-router';
 
 import Alert from 'sentry/components/alert';
@@ -17,7 +17,6 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import type {TimeOffsetLocationQueryParams} from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
 import useInitialTimeOffsetMs from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
 import useLogReplayDataLoaded from 'sentry/utils/replays/hooks/useLogReplayDataLoaded';
-import useMarkReplayViewed from 'sentry/utils/replays/hooks/useMarkReplayViewed';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
@@ -72,19 +71,6 @@ function ReplayDetails({params: {replaySlug}}: Props) {
 
   useLogReplayDataLoaded({fetchError, fetching, projectSlug, replay});
 
-  const {mutate: markAsViewed} = useMarkReplayViewed();
-  useEffect(() => {
-    if (
-      !fetchError &&
-      replayRecord &&
-      !replayRecord.has_viewed &&
-      projectSlug &&
-      !fetching
-    ) {
-      markAsViewed({projectSlug, replayId});
-    }
-  }, [fetchError, fetching, markAsViewed, projectSlug, replayId, replayRecord]);
-
   const initialTimeOffsetMs = useInitialTimeOffsetMs({
     orgSlug,
     projectSlug,