feat(replays): Show a page title on the Replay List page (#45403)

Updated List Page:
<img width="281" alt="SCR-20230303-l1a"
src="https://user-images.githubusercontent.com/187460/222852380-04182a5a-5f24-4bbb-8d11-38ffdee27b58.png">


Updated Details Page:
<img width="288" alt="SCR-20230303-l22"
src="https://user-images.githubusercontent.com/187460/222852381-4162850f-f4a6-4858-b3e0-8f9a0687f856.png">


Fixes #45168

static/app/components/sentryDocumentTitle.tsx

@@ -1,7 +1,7 @@
 import {createContext, useContext, useEffect, useMemo} from 'react';
 
 type Props = {
-  children?: React.ReactChild;
+  children?: React.ReactNode;
   /**
    * Should the ` - Sentry` suffix be excluded?
    */

static/app/views/replays/detail/page.tsx

@@ -24,8 +24,8 @@ type Props = {
 
 function Page({children, crumbs, orgSlug, replayRecord}: Props) {
   const title = replayRecord
-    ? `${replayRecord.id} - Replays - ${orgSlug}`
-    : `Replays - ${orgSlug}`;
+    ? `${replayRecord.id} - Session Replay - ${orgSlug}`
+    : `Session Replay - ${orgSlug}`;
 
   const header = (
     <Header>

static/app/views/replays/details.tsx

@@ -37,7 +37,7 @@ function ReplayDetails({
   params: {replaySlug},
 }: Props) {
   useReplayPageview('replay.details-time-spent');
-  const orgSlug = useOrganization().slug;
+  const {slug: orgSlug} = useOrganization();
 
   const {fetching, onRetry, replay, replayRecord, fetchError} = useReplayData({
     replaySlug,

static/app/views/replays/list/container.tsx

@@ -1,17 +1,19 @@
-import {Fragment} from 'react';
-
 import * as Layout from 'sentry/components/layouts/thirds';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import ReplaysFeatureBadge from 'sentry/components/replays/replaysFeatureBadge';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
+import useOrganization from 'sentry/utils/useOrganization';
 import ReplaysList from 'sentry/views/replays/list/replays';
 
 function ReplaysListContainer() {
   useReplayPageview('replay.list-time-spent');
+  const {slug: orgSlug} = useOrganization();
+
   return (
-    <Fragment>
+    <SentryDocumentTitle title={`Session Replay - ${orgSlug}`}>
       <Layout.Header>
         <Layout.HeaderContent>
           <Layout.Title>
@@ -29,7 +31,7 @@ function ReplaysListContainer() {
       <PageFiltersContainer>
         <ReplaysList />
       </PageFiltersContainer>
-    </Fragment>
+    </SentryDocumentTitle>
   );
 }