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

This reverts commit b0a33ce0a9e9e71efddea7270389557f50b7ade8.

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

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

@@ -1,59 +0,0 @@
-import {useCallback} from 'react';
-
-import type {ApiResult} from 'sentry/api';
-import {fetchMutation, useMutation, useQueryClient} from 'sentry/utils/queryClient';
-import useApi from 'sentry/utils/useApi';
-
-type TData = unknown;
-type TError = unknown;
-type TVariables = {projectSlug: string; replayId: string};
-type TContext = unknown;
-
-import useOrganization from 'sentry/utils/useOrganization';
-
-export default function useMarkReplayViewed() {
-  const organization = useOrganization();
-  const api = useApi({
-    persistInFlight: false,
-  });
-  const queryClient = useQueryClient();
-
-  const updateCache = useCallback(
-    ({replayId}: TVariables, hasViewed: boolean) => {
-      const cache = queryClient.getQueryCache();
-      const cachedResponses = cache.findAll([
-        `/organizations/${organization.slug}/replays/${replayId}/`,
-      ]);
-      cachedResponses.forEach(cached => {
-        const [data, ...rest] = cached.state.data as ApiResult<{
-          data: Record<string, unknown>;
-        }>;
-        cached.setData([
-          {
-            data: {
-              ...data.data,
-              has_viewed: hasViewed,
-            },
-          },
-          ...rest,
-        ]);
-      });
-    },
-    [organization.slug, queryClient]
-  );
-
-  return useMutation<TData, TError, TVariables, TContext>({
-    onMutate: variables => {
-      updateCache(variables, true);
-    },
-    mutationFn: ({projectSlug, replayId}) => {
-      const url = `/projects/${organization.slug}/${projectSlug}/replays/${replayId}/viewed-by/`;
-      return fetchMutation(api)(['POST', url]);
-    },
-    onError: (_error, variables) => {
-      updateCache(variables, false);
-    },
-    cacheTime: 0,
-    retry: false,
-  });
-}

static/app/views/issueDetails/groupReplays/groupReplays.spec.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/replays/details.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,