ref(replays): Update replay pages to show project name (#54728)

Updates the replay index page to add the project name to the bottom of
all table rows and updates the replay details page to add the project
name to the chevron area at the top of the page.

Closes #53473

Author: c298lee

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

@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
 
 import Breadcrumbs from 'sentry/components/breadcrumbs';
-import BaseBadge from 'sentry/components/idBadge/baseBadge';
+import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import HeaderPlaceholder from 'sentry/components/replays/header/headerPlaceholder';
 import {t} from 'sentry/locale';
 import EventView from 'sentry/utils/discover/eventView';
@@ -42,10 +42,15 @@ function DetailsPageBreadcrumbs({orgSlug, replayRecord}: Props) {
         {
           label: (
             <Fragment>
-              {<BaseBadge displayName={labelTitle} project={project} avatarSize={16} />}
+              {project ? (
+                <ProjectBadge disableLink project={project} avatarSize={16} />
+              ) : null}
             </Fragment>
           ),
         },
+        {
+          label: labelTitle,
+        },
       ]}
     />
   );

static/app/views/replays/replayTable/tableCell.tsx

@@ -137,7 +137,9 @@ export function ReplayCell({
       {showUrl ? <StringWalker urls={replay.urls} /> : undefined}
       <Row gap={1}>
         <Row gap={0.5}>
+          {/* Avatar is used instead of ProjectBadge because using ProjectBadge increases spacing, which doesn't look as good */}
           {project ? <Avatar size={12} project={project} /> : null}
+          {project ? project.slug : null}
           <Link to={detailsTab} onClick={trackNavigationEvent}>
             {getShortEventId(replay.id)}
           </Link>