fix(issues): Show 50+ Replays whenever the count is maxed out like that (#80809)

The replayCount is only accurate for a small number of replays. So the
backend will max-out when it finds there are 51 replays in the list. The
frontend is therefore responsible for rendering `"50+"` when it sees a
count of `51`.

This PR updates a few spots related to Issue Details so that we render
`50+` instead of `51`.

<img width="943" alt="SCR-20241115-msqp"
src="https://github.com/user-attachments/assets/b6919cf4-8e92-4f25-931c-07a9d23873df">
<img width="297" alt="SCR-20241115-msrj"
src="https://github.com/user-attachments/assets/4581ac6d-b0bf-4ed9-8766-9f09b2e3a056">

Author: ryan953

static/app/components/events/eventReplay/replayClipSection.tsx

@@ -65,10 +65,13 @@ export function ReplayClipSection({event, group, replayId}: Props) {
     replayCount && replayCount > 1 ? (
       <Fragment>
         <div>
-          {t(
-            'There are %s for this issue.',
-            tn('%s replay', '%s replays', replayCount ?? 0)
-          )}
+          {replayCount > 50
+            ? t('There are 50+ replays fro this issue.')
+            : tn(
+                'There is %s replay for this issue.',
+                'there are %s replays for this issue.',
+                replayCount ?? 0
+              )}
         </div>
         {allReplaysButton}
       </Fragment>

static/app/views/issueDetails/groupReplays/groupReplays.tsx

@@ -271,11 +271,17 @@ function GroupReplaysTable({
     <StyledLayoutPage withPadding hasStreamlinedUI={hasStreamlinedUI}>
       <ReplayCountHeader>
         <IconUser size="sm" />
-        {t(
-          'There %s for this issue across %s.',
-          tn('is %s replay', 'are %s replays', replayCount ?? 0),
-          tn('%s event', '%s events', group.count)
-        )}
+        {replayCount ?? 0 > 50
+          ? tn(
+              'There are 50+ replays for this issue across %s event',
+              'There are 50+ replays for this issue across %s events',
+              group.count
+            )
+          : t(
+              'There %s for this issue across %s.',
+              tn('is %s replay', 'are %s replays', replayCount ?? 0),
+              tn('%s event', '%s events', group.count)
+            )}
       </ReplayCountHeader>
       {inner}
     </StyledLayoutPage>

static/app/views/issueDetails/streamline/eventNavigation.tsx

@@ -220,7 +220,12 @@ export function IssueEventNavigation({event, group, query}: IssueEventNavigation
               key: Tab.REPLAYS,
               label: (
                 <DropdownCountWrapper isCurrentTab={currentTab === Tab.REPLAYS}>
-                  {TabName[Tab.REPLAYS]} <ItemCount value={replaysCount} />
+                  {TabName[Tab.REPLAYS]}{' '}
+                  {replaysCount > 50 ? (
+                    <CustomItemCount>50+</CustomItemCount>
+                  ) : (
+                    <ItemCount value={replaysCount} />
+                  )}
                 </DropdownCountWrapper>
               ),
               textValue: TabName[Tab.REPLAYS],

static/app/views/issueDetails/streamline/replayBadge.tsx

@@ -41,7 +41,9 @@ export function ReplayBadge({group, project}: {group: Group; project: Project})
         }}
         aria-label={t("View this issue's replays")}
       >
-        {tn('%s Replay', '%s Replays', replaysCount)}
+        {replaysCount > 50
+          ? t('50+ Replays')
+          : tn('%s Replay', '%s Replays', replaysCount)}
       </ReplayButton>
     </Fragment>
   );