gateway: Pretty print limit numbers (#54584)

Large rate limits were hard to read, this formats numbers according to
the machine locale as `1,000` or `1.000`.

<img width="722" alt="Screenshot 2023-07-04 at 15 40 41@2x"
src="https://github.com/sourcegraph/sourcegraph/assets/19534377/e729927e-ae85-454a-b877-b0d3b867ef40">

## Test plan

Verified manually, see screenshot.

Author: eseliger

client/web/src/enterprise/site-admin/dotcom/productSubscriptions/CodyGatewayRateLimitModal.tsx

@@ -14,7 +14,7 @@ import {
 
 import { UPDATE_CODY_GATEWAY_CONFIG } from './backend'
 import { ModelBadges } from './ModelBadges'
-import { prettyInterval } from './utils'
+import { numberFormatter, prettyInterval } from './utils'
 
 export interface CodyGatewayRateLimitModalProps {
     onCancel: () => void
@@ -146,8 +146,8 @@ export const CodyGatewayRateLimitModal: React.FunctionComponent<
                         onChange={onChangeLimitInterval}
                         message={
                             <>
-                                {limit} {mode === 'embeddings' ? 'tokens' : 'requests'} per{' '}
-                                {prettyInterval(limitInterval!)}
+                                {numberFormatter.format(BigInt(limit))} {mode === 'embeddings' ? 'tokens' : 'requests'}{' '}
+                                per {prettyInterval(limitInterval!)}
                             </>
                         }
                     />

client/web/src/enterprise/site-admin/dotcom/productSubscriptions/CodyServicesSection.tsx

@@ -47,7 +47,7 @@ import {
 } from './backend'
 import { CodyGatewayRateLimitModal } from './CodyGatewayRateLimitModal'
 import { ModelBadges } from './ModelBadges'
-import { prettyInterval } from './utils'
+import { numberFormatter, prettyInterval } from './utils'
 
 import styles from './CodyServicesSection.module.scss'
 
@@ -320,7 +320,8 @@ const RateLimitRow: React.FunctionComponent<RateLimitRowProps> = ({
                             <CodyGatewayRateLimitSourceBadge source={rateLimit.source} />
                         </td>
                         <td>
-                            {rateLimit.limit} {mode === 'embeddings' ? 'tokens' : 'requests'} /{' '}
+                            {numberFormatter.format(BigInt(rateLimit.limit))}{' '}
+                            {mode === 'embeddings' ? 'tokens' : 'requests'} /{' '}
                             {prettyInterval(rateLimit.intervalSeconds)}
                         </td>
                         <td>

client/web/src/enterprise/site-admin/dotcom/productSubscriptions/utils.ts

@@ -39,3 +39,5 @@ export function errorForPath(error: ApolloError | undefined, path: (string | num
 }
 
 export const accessTokenPath = ['dotcom', 'productSubscription', 'currentSourcegraphAccessToken']
+
+export const numberFormatter = new Intl.NumberFormat()