Add `pr-commit-lines-changed` feature (#2858)20.3.13

Co-authored-by: Federico Brigante <opensource@bfred.it>

5 files changed, 75 insertions, 0 deletions

diff --git a/readme.md b/readme.md
index 0d53d8fc..444ee920 100644
--- a/readme.md
+++ b/readme.md
@@ -229,6 +229,7 @@ Thanks for contributing! 🦋🙌
 - [](# "open-ci-details-in-new-tab") Opens the Checks "details" link in a new tab.
 - [](# "hidden-review-comments-indicator") [Adds comment indicators when comments are hidden in PR review.](https://user-images.githubusercontent.com/1402241/63112671-011d5580-bfbb-11e9-9e19-53e11641990e.gif)
 - [](# "conflict-marker") [Shows which PRs have conflicts in PR lists.](https://user-images.githubusercontent.com/9092510/62777551-2affe500-baae-11e9-8ba4-67f078347913.png)
+- [](# "pr-commit-lines-changed") [Adds diff stats on PR commits.](https://user-images.githubusercontent.com/16872793/76107253-48deeb00-5fa6-11ea-9931-721cde553bdf.png)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 
diff --git a/source/content.ts b/source/content.ts
index ac1d0d62..02df64d8 100644
--- a/source/content.ts
+++ b/source/content.ts
@@ -165,6 +165,7 @@ import './features/cross-deleted-pr-branches';
 import './features/repo-wide-file-finder';
 import './features/preserve-file-finder-term';
 import './features/file-finder-buffer';
+import './features/pr-commit-lines-changed';
 
 // Add global for easier debugging
 (window as any).select = select;
diff --git a/source/features/pr-commit-lines-changed.tsx b/source/features/pr-commit-lines-changed.tsx
new file mode 100644
index 00000000..fd38072f
--- /dev/null
+++ b/source/features/pr-commit-lines-changed.tsx
@@ -0,0 +1,52 @@
+import React from 'dom-chef';
+import cache from 'webext-storage-cache';
+import select from 'select-dom';
+import elementReady from 'element-ready';
+import * as api from '../libs/api';
+import features from '../libs/features';
+import {getRepoGQL, pluralize} from '../libs/utils';
+
+const getCommitChanges = cache.function(async (commit: string): Promise<[number, number]> => {
+	const {repository} = await api.v4(`
+		repository(${getRepoGQL()}) {
+			object(expression: "${commit}") {
+				... on Commit {
+					additions
+					deletions
+				}
+			}
+		}
+	`);
+
+	return [repository.object.additions, repository.object.deletions];
+}, {
+	cacheKey: ([commit]) => 'commit-changes:' + commit
+});
+
+async function init(): Promise<void> {
+	const commitSha = (await elementReady('.sha.user-select-contain'))!.textContent!;
+	const [additions, deletions] = await getCommitChanges(commitSha);
+	const tooltip = pluralize(additions + deletions, '1 line changed', '$$ lines changed');
+	select('.diffstat')!.replaceWith(
+		<span className="ml-2 diffstat tooltipped tooltipped-s" aria-label={tooltip}>
+			<span className="text-green">+{additions}</span>{' '}
+			<span className="text-red">−{deletions}</span>{' '}
+			<span className="diffstat-block-neutral"/>
+			<span className="diffstat-block-neutral"/>
+			<span className="diffstat-block-neutral"/>
+			<span className="diffstat-block-neutral"/>
+			<span className="diffstat-block-neutral"/>
+		</span>
+	);
+}
+
+features.add({
+	id: __featureName__,
+	description: 'Adds diff stats on PR commits.',
+	screenshot: 'https://user-images.githubusercontent.com/16872793/76107253-48deeb00-5fa6-11ea-9931-721cde553bdf.png',
+	include: [
+		features.isPRCommit
+	],
+	load: features.nowAndOnAjaxedPages,
+	init
+});
diff --git a/source/libs/utils.ts b/source/libs/utils.ts
index 73b5fb09..8f0729e0 100644
--- a/source/libs/utils.ts
+++ b/source/libs/utils.ts
@@ -27,6 +27,18 @@ export const getDiscussionNumber = (): string | undefined => {
 	return undefined;
 };
 
+export const pluralize = (count: number, single: string, plural: string, zero?: string): string => {
+	if (count === 0 && zero) {
+		return zero.replace('$$', '0');
+	}
+
+	if (count === 1) {
+		return single.replace('$$', '1');
+	}
+
+	return plural.replace('$$', String(count));
+};
+
 // Drops leading and trailing slash to avoid /\/?/ everywhere
 export const getCleanPathname = (): string => location.pathname.replace(/^[/]|[/]$/g, '');
 
diff --git a/test/utils.ts b/test/utils.ts
index 54701e37..4fba9083 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -11,6 +11,7 @@ import {
 	getReference,
 	parseTag,
 	compareNames,
+	pluralize,
 	getScopedSelector
 } from '../source/libs/utils';
 
@@ -200,6 +201,14 @@ test('parseTag', t => {
 	t.deepEqual(parseTag('@hi/you@1.2.3'), {namespace: '@hi/you', version: '1.2.3'});
 });
 
+test('pluralize', t => {
+	t.is(pluralize(0, 'A number', '$$ numbers'), '0 numbers');
+	t.is(pluralize(0, 'A number', '$$ numbers', 'No numbers'), 'No numbers');
+	t.is(pluralize(1, 'A number', '$$ numbers', 'No numbers'), 'A number');
+	t.is(pluralize(2, 'A number', '$$ numbers', 'No numbers'), '2 numbers');
+	t.is(pluralize(2, 'A number', 'Many numbers', 'No numbers'), 'Many numbers');
+});
+
 test('compareNames', t => {
 	t.true(compareNames('johndoe', 'John Doe'));
 	t.true(compareNames('john-doe', 'John Doe'));