feat(replays): add new badge to rage click issues (#66815)

- [x] fix spelling of `Breadcrumb` in component
- [x] Add new badge to rage click issues. could be styled slightly
better, but can improve if needed.
<img width="789" alt="SCR-20240312-lrwh"
src="https://github.com/getsentry/sentry/assets/56095982/e65c3bb8-b406-44b0-a1d3-95fb775d6c96">

static/app/views/issueDetails/header.tsx

@@ -8,6 +8,7 @@ import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import Count from 'sentry/components/count';
 import EventOrGroupTitle from 'sentry/components/eventOrGroupTitle';
 import EventMessage from 'sentry/components/events/eventMessage';
+import FeatureBadge from 'sentry/components/featureBadge';
 import {GroupStatusBadge} from 'sentry/components/group/inboxBadges/statusBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
 import Link from 'sentry/components/links/link';
@@ -29,7 +30,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import GroupPriority from 'sentry/views/issueDetails/groupPriority';
 
 import GroupActions from './actions';
-import {ShortIdBreadrcumb} from './shortIdBreadcrumb';
+import {ShortIdBreadcrumb} from './shortIdBreadcrumb';
 import {Tab} from './types';
 import {ReprocessingStatus} from './utils';
 
@@ -227,7 +228,7 @@ function GroupHeader({
   const disableActions = !!disabledTabs.length;
 
   const shortIdBreadcrumb = (
-    <ShortIdBreadrcumb organization={organization} project={project} group={group} />
+    <ShortIdBreadcrumb organization={organization} project={project} group={group} />
   );
 
   const issueTypeConfig = getConfigForIssueType(group, project);
@@ -260,6 +261,9 @@ function GroupHeader({
         <HeaderRow>
           <TitleWrapper>
             <TitleHeading>
+              {group.issueCategory === IssueCategory.REPLAY && (
+                <StyledFeatureBadge type="new" />
+              )}
               <h3>
                 <StyledEventOrGroupTitle data={group} />
               </h3>
@@ -377,3 +381,7 @@ const PriorityContainer = styled('div')`
   /* Ensures that the layout doesn't shift when changing priority */
   min-width: 80px;
 `;
+
+const StyledFeatureBadge = styled(FeatureBadge)`
+  align-items: flex-start;
+`;

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

@@ -3,9 +3,9 @@ import {GroupFixture} from 'sentry-fixture/group';
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import {ShortIdBreadrcumb} from './shortIdBreadcrumb';
+import {ShortIdBreadcrumb} from './shortIdBreadcrumb';
 
-describe('ShortIdBreadrcumb', function () {
+describe('ShortIdBreadcrumb', function () {
   const {organization, project} = initializeOrg();
   const group = GroupFixture({shortId: 'ABC-123'});
 
@@ -16,13 +16,13 @@ describe('ShortIdBreadrcumb', function () {
   });
 
   it('renders short ID', function () {
-    render(<ShortIdBreadrcumb {...{organization, project, group}} />);
+    render(<ShortIdBreadcrumb {...{organization, project, group}} />);
 
     expect(screen.getByText('ABC-123')).toBeInTheDocument();
   });
 
   it('supports copy', async function () {
-    render(<ShortIdBreadrcumb {...{organization, project, group}} />);
+    render(<ShortIdBreadcrumb {...{organization, project, group}} />);
 
     async function clickMenuItem(name: string) {
       await userEvent.click(screen.getByRole('button', {name: 'Short-ID copy actions'}));

static/app/views/issueDetails/shortIdBreadcrumb.tsx

@@ -12,17 +12,17 @@ import type {Group, Organization, Project} from 'sentry/types';
 import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
-interface ShortIdBreadrcumbProps {
+interface ShortIdBreadcrumbProps {
   group: Group;
   organization: Organization;
   project: Project;
 }
 
-export function ShortIdBreadrcumb({
+export function ShortIdBreadcrumb({
   organization,
   project,
   group,
-}: ShortIdBreadrcumbProps) {
+}: ShortIdBreadcrumbProps) {
   const {onClick: handleCopyShortId} = useCopyToClipboard({
     text: group.shortId,
     successMessage: t('Copied Short-ID to clipboard'),