diff --git a/extensions/ql-vscode/src/pure/word.ts b/extensions/ql-vscode/src/pure/word.ts index 8e5c10932..01e453b66 100644 --- a/extensions/ql-vscode/src/pure/word.ts +++ b/extensions/ql-vscode/src/pure/word.ts @@ -7,8 +7,9 @@ export function pluralize( numItems: number | undefined, singular: string, plural: string, + numberFormatter: (value: number) => string = (value) => value.toString(), ): string { return numItems !== undefined - ? `${numItems} ${numItems === 1 ? singular : plural}` + ? `${numberFormatter(numItems)} ${numItems === 1 ? singular : plural}` : ""; } diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx index d25584e66..37eab380f 100644 --- a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx +++ b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx @@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from "react"; import styled from "styled-components"; import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage"; import { ModeledMethod } from "../../data-extensions-editor/modeled-method"; +import { pluralize } from "../../pure/word"; import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid"; import { calculateModeledPercentage } from "./modeled"; import { decimalFormatter, percentFormatter } from "./formatters"; @@ -72,9 +73,14 @@ export const LibraryRow = ({ {isExpanded ? null : ( <> {" "} - ({decimalFormatter.format(externalApiUsages.length)} method - {externalApiUsages.length !== 1 ? "s" : ""},{" "} - {percentFormatter.format(modeledPercentage / 100)} modeled) + ( + {pluralize( + externalApiUsages.length, + "method", + "methods", + decimalFormatter.format.bind(decimalFormatter), + )} + , {percentFormatter.format(modeledPercentage / 100)} modeled) )} @@ -82,12 +88,20 @@ export const LibraryRow = ({ <>
- {decimalFormatter.format(externalApiUsages.length)} method - {externalApiUsages.length !== 1 ? "s" : ""} + {pluralize( + externalApiUsages.length, + "method", + "methods", + decimalFormatter.format.bind(decimalFormatter), + )}
- {decimalFormatter.format(usagesCount)} usage - {usagesCount !== 1 ? "s" : ""} + {pluralize( + usagesCount, + "usage", + "usages", + decimalFormatter.format.bind(decimalFormatter), + )}
{percentFormatter.format(modeledPercentage / 100)} modeled diff --git a/extensions/ql-vscode/test/unit-tests/pure/word.test.ts b/extensions/ql-vscode/test/unit-tests/pure/word.test.ts index 3075ccbed..40869c883 100644 --- a/extensions/ql-vscode/test/unit-tests/pure/word.test.ts +++ b/extensions/ql-vscode/test/unit-tests/pure/word.test.ts @@ -14,5 +14,22 @@ describe("word helpers", () => { it("should return the empty string if the number is undefined", () => { expect(pluralize(undefined, "thing", "things")).toBe(""); }); + it("should return an unformatted number when no formatter is specified", () => { + expect(pluralize(1_000_000, "thing", "things")).toBe("1000000 things"); + }); + it("should return a formatted number when a formatter is specified", () => { + const formatter = new Intl.NumberFormat("en-US", { + style: "decimal", + }); + + expect( + pluralize( + 1_000_000, + "thing", + "things", + formatter.format.bind(formatter), + ), + ).toBe("1,000,000 things"); + }); }); });