Number formatting using Intl.* APIs

app/src/lib/format-commit-count.ts

@@ -0,0 +1,8 @@
+import { formatCount } from './format-count'
+
+/**
+ * Returns a string used for communicating a quantity of commits in a human-
+ * readable, pluralized format (i.e '1 commit', '2 commits')
+ */
+export const formatCommitCount = (numberOfCommits: number) =>
+  formatCount(numberOfCommits, 'commit')

app/src/lib/format-count.ts

@@ -0,0 +1,15 @@
+import { formatNumber } from './format-number'
+
+/**
+ * Returns a string used for communicating a count in a human-readable,
+ * pluralized format (i.e '1 commit', '2 commits')
+ *
+ * @param count           The number 'units'
+ * @param unit            A string written in such a way that without
+ *                        modification it can be paired with the digit 1 such as
+ *                        'commit' and which, when a 's' is appended to it can
+ *                        be paired with a zero digit or a number greater than
+ *                        one.
+ */
+export const formatCount = (count: number, unit: string) =>
+  `${formatNumber(count)} ${unit}${count === 1 ? '' : 's'}`

app/src/lib/format-number.ts

@@ -0,0 +1,37 @@
+import mem from 'mem'
+import QuickLRU from 'quick-lru'
+import { getFormattingLocales } from './formatting-locale'
+
+// Initializing a number formatter is expensive but formatting is relatively
+// cheap so we cache them based on the locale and their options. The maxSize of
+// a 100 is only as an escape hatch, we don't expect to ever create more than a
+// handful different formatters.
+const getNumber = mem(
+  (locale: string | string[], options?: Intl.NumberFormatOptions) => {
+    try {
+      return new Intl.NumberFormat(locale, options)
+    } catch (e) {
+      log.error(`Error creating NumberFormat with locale '${locale}'`, e)
+      return new Intl.NumberFormat(undefined, options)
+    }
+  },
+  {
+    cache: new QuickLRU({ maxSize: 100 }),
+    cacheKey: (...args) => JSON.stringify(args),
+  }
+)
+
+/**
+ * Format a date in the user's formatting locale, customizable with
+ * Intl.NumberFormatOptions.
+ *
+ * See Intl.NumberFormat for more information
+ */
+export const formatNumber = (num: number, options?: Intl.NumberFormatOptions) =>
+  getNumber(getFormattingLocales(), options).format(num)
+
+/** Shorthand for formatNumber(x, { style: 'percent' }) */
+export const formatPercent = (
+  num: number,
+  options?: Omit<Intl.NumberFormatOptions, 'style'>
+) => formatNumber(num, { ...options, style: 'percent' })

app/src/lib/progress/lfs.ts

@@ -1,6 +1,6 @@
 import { getTempFilePath } from '../file-system'
 import { IGitProgress, IGitProgressInfo, IGitOutput } from './git'
-import { formatBytes } from '../../ui/lib/bytes'
+import { formatBytes } from '../../ui/lib/format-bytes'
 import { open } from 'fs/promises'
 
 /** Create the Git LFS progress reporting file and return the path. */

app/src/ui/banners/cherry-pick-undone.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { formatCount } from '../../lib/format-count'
 import { SuccessBanner } from './success-banner'
 
 interface ICherryPickUndoneBannerProps {
@@ -13,12 +14,11 @@ export class CherryPickUndone extends React.Component<
 > {
   public render() {
     const { countCherryPicked, targetBranchName, onDismissed } = this.props
-    const pluralized = countCherryPicked === 1 ? 'commit' : 'commits'
     return (
       <SuccessBanner timeout={5000} onDismissed={onDismissed}>
-        Cherry-pick undone. Successfully removed the {countCherryPicked}
-        {' copied '}
-        {pluralized} from <strong>{targetBranchName}</strong>.
+        Cherry-pick undone. Successfully removed the{' '}
+        {formatCount(countCherryPicked, 'copied commit')}
+        from <strong>{targetBranchName}</strong>.
       </SuccessBanner>
     )
   }

app/src/ui/banners/render-banner.tsx

@@ -18,6 +18,7 @@ import { OpenThankYouCard } from './open-thank-you-card'
 import { SuccessfulSquash } from './successful-squash'
 import { SuccessBanner } from './success-banner'
 import { ConflictsFoundBanner } from './conflicts-found-banner'
+import { formatCommitCount } from '../../lib/format-commit-count'
 
 export function renderBanner(
   banner: Banner,
@@ -120,33 +121,27 @@ export function renderBanner(
         />
       )
     case BannerType.SquashUndone: {
-      const pluralized = banner.commitsCount === 1 ? 'commit' : 'commits'
       return (
         <SuccessBanner timeout={5000} onDismissed={onDismissed}>
-          Squash of {banner.commitsCount} {pluralized} undone.
+          Squash of {formatCommitCount(banner.commitsCount)} undone.
         </SuccessBanner>
       )
     }
     case BannerType.SuccessfulReorder: {
-      const pluralized = banner.count === 1 ? 'commit' : 'commits'
-
       return (
         <SuccessBanner
           timeout={15000}
           onDismissed={onDismissed}
           onUndo={banner.onUndo}
         >
-          <span>
-            Successfully reordered {banner.count} {pluralized}.
-          </span>
+          <span>Successfully reordered {formatCommitCount(banner.count)}.</span>
         </SuccessBanner>
       )
     }
     case BannerType.ReorderUndone: {
-      const pluralized = banner.commitsCount === 1 ? 'commit' : 'commits'
       return (
         <SuccessBanner timeout={5000} onDismissed={onDismissed}>
-          Reorder of {banner.commitsCount} {pluralized} undone.
+          Reorder of {formatCommitCount(banner.commitsCount)} undone.
         </SuccessBanner>
       )
     }

app/src/ui/banners/successful-cherry-pick.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { formatCommitCount } from '../../lib/format-commit-count'
 import { SuccessBanner } from './success-banner'
 
 interface ISuccessfulCherryPickBannerProps {
@@ -20,12 +21,10 @@ export class SuccessfulCherryPick extends React.Component<
       targetBranchName,
     } = this.props
 
-    const pluralized = countCherryPicked === 1 ? 'commit' : 'commits'
-
     return (
       <SuccessBanner timeout={15000} onDismissed={onDismissed} onUndo={onUndo}>
         <span>
-          Successfully copied {countCherryPicked} {pluralized} to{' '}
+          Successfully copied {formatCommitCount(countCherryPicked)} to{' '}
           <strong>{targetBranchName}</strong>.
         </span>
       </SuccessBanner>

app/src/ui/banners/successful-squash.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { formatCommitCount } from '../../lib/format-commit-count'
 import { SuccessBanner } from './success-banner'
 
 interface ISuccessfulSquashedBannerProps {
@@ -14,13 +15,9 @@ export class SuccessfulSquash extends React.Component<
   public render() {
     const { count, onDismissed, onUndo } = this.props
 
-    const pluralized = count === 1 ? 'commit' : 'commits'
-
     return (
       <SuccessBanner timeout={15000} onDismissed={onDismissed} onUndo={onUndo}>
-        <span>
-          Successfully squashed {count} {pluralized}.
-        </span>
+        <span>Successfully squashed {formatCommitCount(count)}.</span>
       </SuccessBanner>
     )
   }

app/src/ui/branches/push-branch-commits.tsx

@@ -5,6 +5,7 @@ import { Dialog, DialogContent, DialogFooter } from '../dialog'
 import { Repository } from '../../models/repository'
 import { Ref } from '../lib/ref'
 import { OkCancelButtonGroup } from '../dialog/ok-cancel-button-group'
+import { formatCount } from '../../lib/format-count'
 
 interface IPushBranchCommitsProps {
   readonly dispatcher: Dispatcher
@@ -30,23 +31,6 @@ interface IPushBranchCommitsState {
   readonly isPushingOrPublishing: boolean
 }
 
-/**
- * Returns a string used for communicating the number of commits
- * that will be pushed to the user.
- *
- * @param numberOfCommits The number of commits that will be pushed
- * @param unit            A string written in such a way that without
- *                        modification it can be paired with the digit 1
- *                        such as 'commit' and which, when a 's' is appended
- *                        to it can be paired with a zero digit or a number
- *                        greater than one.
- */
-function pluralize(numberOfCommits: number, unit: string) {
-  return numberOfCommits === 1
-    ? `${numberOfCommits} ${unit}`
-    : `${numberOfCommits} ${unit}s`
-}
-
 /**
  * Simple type guard which allows us to substitute the non-obvious
  * this.props.unPushedCommits === undefined checks with
@@ -95,28 +79,29 @@ export class PushBranchCommits extends React.Component<
   }
 
   private renderDialogContent() {
-    if (renderPublishView(this.props.unPushedCommits)) {
+    const { unPushedCommits, branch } = this.props
+    if (renderPublishView(unPushedCommits)) {
       return (
         <DialogContent>
           <p>Your branch must be published before opening a pull request.</p>
           <p>
-            Would you like to publish <Ref>{this.props.branch.name}</Ref> now
-            and open a pull request?
+            Would you like to publish <Ref>{branch.name}</Ref> now and open a
+            pull request?
           </p>
         </DialogContent>
       )
     }
 
-    const localCommits = pluralize(this.props.unPushedCommits, 'local commit')
+    const localCommits = formatCount(unPushedCommits, 'local commit')
 
     return (
       <DialogContent>
         <p>
           You have {localCommits} that haven't been pushed to the remote yet.
         </p>
         <p>
-          Would you like to push your changes to{' '}
-          <Ref>{this.props.branch.name}</Ref> before creating your pull request?
+          Would you like to push your changes to <Ref>{branch.name}</Ref> before
+          creating your pull request?
         </p>
       </DialogContent>
     )

app/src/ui/changes/changes-list.tsx

@@ -51,6 +51,8 @@ import { hasConflictedFiles } from '../../lib/status'
 import { createObservableRef } from '../lib/observable-ref'
 import { Tooltip, TooltipDirection } from '../lib/tooltip'
 import { Popup } from '../../models/popup'
+import { formatCount } from '../../lib/format-count'
+import { formatNumber } from '../../lib/format-number'
 
 const RowHeight = 29
 const StashIcon: OcticonSymbol.OcticonSymbolType = {
@@ -817,14 +819,14 @@ export class ChangesList extends React.Component<
     const { workingDirectory, rebaseConflictState, isCommitting } = this.props
     const { files } = workingDirectory
 
-    const filesPlural = files.length === 1 ? 'file' : 'files'
-    const filesDescription = `${files.length} changed ${filesPlural}`
+    const filesDescription = formatCount(files.length, 'changed file')
 
     const selectedChangeCount = files.filter(
       file => file.selection.getSelectionType() !== DiffSelectionType.None
     ).length
-    const totalFilesPlural = files.length === 1 ? 'file' : 'files'
-    const selectedChangesDescription = `${selectedChangeCount}/${files.length} changed ${totalFilesPlural} selected`
+    const selectedChangesDescription = `${formatNumber(
+      selectedChangeCount
+    )}/${formatCount(files.length, 'changed file')} selected`
 
     const includeAllValue = getIncludeAllValue(
       workingDirectory,

app/src/ui/changes/no-changes.tsx

@@ -19,6 +19,8 @@ import { Dispatcher } from '../dispatcher'
 import { SuggestedActionGroup } from '../suggested-actions'
 import { PreferencesTab } from '../../models/preferences'
 import { PopupType } from '../../models/popup'
+import { formatCommitCount } from '../../lib/format-commit-count'
+import { formatCount } from '../../lib/format-count'
 
 function formatMenuItemLabel(text: string) {
   if (__WIN32__ || __LINUX__) {
@@ -396,8 +398,8 @@ export class NoChanges extends React.Component<
     const numChanges = stashEntry.files.files.length
     const description = (
       <>
-        You have {numChanges} {numChanges === 1 ? 'change' : 'changes'} in
-        progress that you have not yet committed.
+        You have {formatCount(numChanges, 'change')} in progress that you have
+        not yet committed.
       </>
     )
     const discoverabilityContent = (
@@ -550,9 +552,9 @@ export class NoChanges extends React.Component<
       </>
     )
 
-    const title = `Pull ${aheadBehind.behind} ${
-      aheadBehind.behind === 1 ? 'commit' : 'commits'
-    } from the ${remote.name} remote`
+    const title = `Pull ${formatCommitCount(aheadBehind.behind)} from the ${
+      remote.name
+    } remote`
 
     const buttonText = `Pull ${remote.name}`
 
@@ -592,17 +594,13 @@ export class NoChanges extends React.Component<
     if (aheadBehind.ahead > 0) {
       itemsToPushTypes.push('commits')
       itemsToPushDescriptions.push(
-        aheadBehind.ahead === 1
-          ? '1 local commit'
-          : `${aheadBehind.ahead} local commits`
+        formatCount(aheadBehind.ahead, 'local commit')
       )
     }
 
     if (tagsToPush !== null && tagsToPush.length > 0) {
       itemsToPushTypes.push('tags')
-      itemsToPushDescriptions.push(
-        tagsToPush.length === 1 ? '1 tag' : `${tagsToPush.length} tags`
-      )
+      itemsToPushDescriptions.push(formatCount(tagsToPush.length, 'tag'))
     }
 
     const description = `You have ${itemsToPushDescriptions.join(

app/src/ui/check-runs/ci-check-run-popover.tsx

@@ -21,6 +21,7 @@ import * as OcticonSymbol from '../octicons/octicons.generated'
 import { Donut } from '../donut'
 import { supportsRerunningChecks } from '../../lib/endpoint-capabilities'
 import { getPullRequestCommitRef } from '../../models/pull-request'
+import { formatCount } from '../../lib/format-count'
 
 const BlankSlateImage = encodePathAsUrl(
   __dirname,
@@ -187,8 +188,8 @@ export class CICheckRunPopover extends React.PureComponent<
       return `${output.slice(0, -1).join(', ')}, and ${output.slice(-1)} checks`
     }
 
-    const pluralize = summaryArray[0].count > 1 ? 'checks' : 'check'
-    return `${summaryArray[0].count} ${summaryArray[0].conclusion} ${pluralize}`
+    const { count, conclusion } = summaryArray[0]
+    return formatCount(count, `${conclusion} check`)
   }
 
   private rerunChecks = () => {

app/src/ui/check-runs/ci-check-run-rerun-dialog.tsx

@@ -11,6 +11,7 @@ import * as OcticonSymbol from './../octicons/octicons.generated'
 import { Row } from '../lib/row'
 import { encodePathAsUrl } from '../../lib/path'
 import { offsetFromNow } from '../../lib/offset-from'
+import { formatCount } from '../../lib/format-count'
 
 const BlankSlateImage = encodePathAsUrl(
   __dirname,
@@ -147,17 +148,20 @@ export class CICheckRunRerunDialog extends React.Component<
       return null
     }
 
-    const pluralize = `check${this.state.nonRerunnable.length !== 1 ? 's' : ''}`
-    const verb = this.state.nonRerunnable.length !== 1 ? 'are' : 'is'
+    const notRerunnable = this.state.nonRerunnable.length
+    const verb = notRerunnable !== 1 ? 'are' : 'is'
     return (
       <Row className="non-re-run-info warning-helper-text">
         <Octicon symbol={OcticonSymbol.alert} />
 
         {this.state.rerunnable.length === 0
           ? `There are no checks that can be re-run. `
-          : `There ${verb} ${this.state.nonRerunnable.length} ${pluralize} that cannot be re-run. `}
+          : `There ${verb} ${formatCount(
+              notRerunnable,
+              'check'
+            )} that cannot be re-run. `}
 
-        {this.state.nonRerunnable.length > 0
+        {notRerunnable > 0
           ? `A check run cannot be re-run if the check is more than one month old,
           the check has not completed, or the check is not configured to be
           re-run.`