fix(ui): Fix using `tn()` with formatted string on Projects Dashboard (#25968)

This fixes a bug where we were using `tn()` with a formatted string (e.g. 1000 => 1K). It needs to be passed an integer as it needs to determine if it should use the singular or pluralized form. It also attempts to call `toLocaleString` on the number as well.

This means that when the total number of errors/transactions was > 1000, it would show up as 0.

![image](https://user-images.githubusercontent.com/79684/117888691-4988a680-b267-11eb-830e-3524e3ac2baa.png)

static/app/views/projectsDashboard/projectCard.tsx

@@ -7,7 +7,7 @@ import IdBadge from 'app/components/idBadge';
 import Link from 'app/components/links/link';
 import BookmarkStar from 'app/components/projects/bookmarkStar';
 import QuestionTooltip from 'app/components/questionTooltip';
-import {t, tn} from 'app/locale';
+import {t} from 'app/locale';
 import ProjectsStatsStore from 'app/stores/projectsStatsStore';
 import space from 'app/styles/space';
 import {Organization, Project} from 'app/types';
@@ -47,18 +47,10 @@ class ProjectCard extends Component<Props> {
   render() {
     const {organization, project, hasProjectAccess} = this.props;
     const {stats, slug, transactionStats} = project;
-    const totalErrors =
-      stats !== undefined
-        ? formatAbbreviatedNumber(stats.reduce((sum, [_, value]) => sum + value, 0))
-        : '0';
-
+    const totalErrors = stats?.reduce((sum, [_, value]) => sum + value, 0) ?? 0;
     const totalTransactions =
-      transactionStats !== undefined
-        ? formatAbbreviatedNumber(
-            transactionStats.reduce((sum, [_, value]) => sum + value, 0)
-          )
-        : '0';
-    const zeroTransactions = totalTransactions === '0';
+      transactionStats?.reduce((sum, [_, value]) => sum + value, 0) ?? 0;
+    const zeroTransactions = totalTransactions === 0;
     const hasFirstEvent = Boolean(project.firstEvent || project.firstTransactionEvent);
 
     return (
@@ -80,7 +72,7 @@ class ProjectCard extends Component<Props> {
                   data-test-id="project-errors"
                   to={`/organizations/${organization.slug}/issues/?project=${project.id}`}
                 >
-                  {tn('%s error', '%s errors', totalErrors)}
+                  {t('errors: %s', formatAbbreviatedNumber(totalErrors))}
                 </Link>
                 {this.hasPerformance && (
                   <Fragment>
@@ -89,8 +81,7 @@ class ProjectCard extends Component<Props> {
                       data-test-id="project-transactions"
                       to={`/organizations/${organization.slug}/performance/?project=${project.id}`}
                     >
-                      {tn('%s transaction', '%s transactions', totalTransactions)}
-
+                      {t('transactions: %s', formatAbbreviatedNumber(totalTransactions))}
                       {zeroTransactions && (
                         <QuestionTooltip
                           title={t(

tests/js/spec/views/projectsDashboard/projectCard.spec.jsx

@@ -104,9 +104,9 @@ describe('ProjectCard', function () {
 
     const total = wrapper.find('a[data-test-id="project-errors"]');
     expect(total).toHaveLength(1);
-    expect(total.text()).toContain('6 errors');
+    expect(total.text()).toContain('errors: 6');
 
-    // No transacations as the feature isn't set.
+    // No transacions as the feature isn't set.
     const transactions = wrapper.find('a[data-test-id="project-transactions"]');
     expect(transactions).toHaveLength(0);
   });
@@ -136,7 +136,7 @@ describe('ProjectCard', function () {
 
     const transactions = wrapper.find('a[data-test-id="project-transactions"]');
     expect(transactions).toHaveLength(1);
-    expect(transactions.text()).toContain('8 transactions');
+    expect(transactions.text()).toContain('transactions: 8');
   });
 
   it('renders loading placeholder card if there are no stats', function () {