ref(replays): Use <ReplaysFeatureBadge /> in all the places (#37299)

This will make it easier to bump the status from alpha -> beta and beyond.

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

@@ -2,8 +2,8 @@ import {ComponentProps, Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import Breadcrumbs from 'sentry/components/breadcrumbs';
-import FeatureBadge from 'sentry/components/featureBadge';
 import Placeholder from 'sentry/components/placeholder';
+import ReplaysFeatureBadge from 'sentry/components/replays/replaysFeatureBadge';
 import {t} from 'sentry/locale';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
@@ -29,7 +29,7 @@ function DetailsPageBreadcrumbs({orgId, replayRecord}: Props) {
         {
           label: labelTitle ? (
             <Fragment>
-              {labelTitle} <FeatureBadge type="alpha" />
+              {labelTitle} <ReplaysFeatureBadge />
             </Fragment>
           ) : (
             <HeaderPlaceholder width="500px" height="24px" />

static/app/components/replays/replaysFeatureBadge.tsx

@@ -1,7 +1,9 @@
 import FeatureBadge from 'sentry/components/featureBadge';
 
-function ReplaysFeatureBadge() {
-  return <FeatureBadge type="alpha" noTooltip />;
+function ReplaysFeatureBadge(
+  props: Omit<React.ComponentProps<typeof FeatureBadge>, 'type'>
+) {
+  return <FeatureBadge {...props} type="alpha" />;
 }
 
 export default ReplaysFeatureBadge;

static/app/views/organizationGroupDetails/header.tsx

@@ -373,7 +373,7 @@ class GroupHeader extends Component<Props, State> {
                 isActive={() => currentTab === Tab.REPLAYS}
               >
                 {t('Replays')} <Badge text={replaysCount ?? ''} />
-                <ReplaysFeatureBadge />
+                <ReplaysFeatureBadge noTooltip />
               </ListLink>
             </Feature>
           </NavTabs>

static/app/views/performance/transactionSummary/header.tsx

@@ -320,7 +320,7 @@ class TransactionHeader extends Component<Props> {
                 onClick={this.trackTabClick(Tab.Replays)}
               >
                 {t('Replays')}
-                <ReplaysFeatureBadge />
+                <ReplaysFeatureBadge noTooltip />
               </ListLink>
             </Feature>
           </StyledNavTabs>

static/app/views/replays/replays.tsx

@@ -2,12 +2,12 @@ import {Fragment, useEffect, useState} from 'react';
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
-import FeatureBadge from 'sentry/components/featureBadge';
 import Link from 'sentry/components/links/link';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import PageHeading from 'sentry/components/pageHeading';
 import Pagination from 'sentry/components/pagination';
 import {PanelTable} from 'sentry/components/panels';
+import ReplaysFeatureBadge from 'sentry/components/replays/replaysFeatureBadge';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {PageContent, PageHeader} from 'sentry/styles/organization';
@@ -100,7 +100,7 @@ function Replays() {
       <StyledPageHeader>
         <HeaderTitle>
           <div>
-            {t('Replays')} <FeatureBadge type="alpha" />
+            {t('Replays')} <ReplaysFeatureBadge />
           </div>
         </HeaderTitle>
       </StyledPageHeader>