feat(replay): Show Seen-by list of users on Replay Details (#68760)

<img width="450" alt="SCR-20240411-nzaf"
src="https://github.com/getsentry/sentry/assets/187460/413b7be7-0e2e-44f3-905e-ba2c0c0d013a">

Avatar list is kinda weird, it sticks out to the left:
<img width="488" alt="SCR-20240411-nzka"
src="https://github.com/getsentry/sentry/assets/187460/71fe5267-e5a3-4fb3-b86f-2e6b7a98ebc1">


Relates to getsentry/team-replay#19
Relates to #64924

Depends on #68990

static/app/components/replays/header/replayMetaData.tsx

@@ -1,7 +1,9 @@
-import {Fragment} from 'react';
+import {Fragment, useEffect} from 'react';
 import {Link} from 'react-router';
 import styled from '@emotion/styled';
+import * as Sentry from '@sentry/react';
 
+import AvatarList from 'sentry/components/avatar/avatarList';
 import ErrorCounts from 'sentry/components/replays/header/errorCounts';
 import HeaderPlaceholder from 'sentry/components/replays/header/headerPlaceholder';
 import {IconCursorArrow} from 'sentry/icons';
@@ -10,6 +12,7 @@ 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 useReplayViewedByData from 'sentry/utils/replays/hooks/useReplayViewedByData';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useRoutes} from 'sentry/utils/useRoutes';
 import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
@@ -25,6 +28,16 @@ function ReplayMetaData({replayErrors, replayRecord, showDeadRageClicks = true}:
   const routes = useRoutes();
   const referrer = getRouteStringFromRoutes(routes);
   const eventView = EventView.fromLocation(location);
+  const viewersResult = useReplayViewedByData({
+    projectSlug: replayRecord?.project_id,
+    replayId: replayRecord?.id,
+  });
+
+  useEffect(() => {
+    if (viewersResult.isError) {
+      Sentry.captureException(viewersResult.error);
+    }
+  });
 
   const breadcrumbTab = {
     ...location,
@@ -82,6 +95,14 @@ function ReplayMetaData({replayErrors, replayRecord, showDeadRageClicks = true}:
           <HeaderPlaceholder width="20px" height="16px" />
         )}
       </KeyMetricData>
+      <KeyMetricLabel>{t('Seen By')}</KeyMetricLabel>
+      <KeyMetricData>
+        {viewersResult.isLoading ? (
+          <HeaderPlaceholder width="55px" height="27px" />
+        ) : (
+          <AvatarList avatarSize={25} users={viewersResult.data?.data.viewed_by} />
+        )}
+      </KeyMetricData>
     </KeyMetrics>
   );
 }

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

@@ -0,0 +1,30 @@
+import type {User} from 'sentry/types';
+import {useApiQuery, type UseApiQueryOptions} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+
+interface Props {
+  projectSlug: undefined | string;
+  replayId: undefined | string;
+}
+
+type TResponseData = {
+  data: {
+    viewed_by: User[];
+  };
+};
+
+export default function useReplayViewedByData(
+  {projectSlug, replayId}: Props,
+  options: Partial<UseApiQueryOptions<TResponseData>> = {}
+) {
+  const organization = useOrganization();
+  return useApiQuery<TResponseData>(
+    [`/projects/${organization.slug}/${projectSlug}/replays/${replayId}/viewed-by/`],
+    {
+      enabled: Boolean(projectSlug && replayId),
+      staleTime: Infinity,
+      retry: false,
+      ...options,
+    }
+  );
+}