Fixes #294, Use GitHub aliases or avatars for commits

preview-src/index.css

@@ -237,13 +237,17 @@ body .overview-title button {
 
 .commit .commit-message {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	line-height: 18px;
 	overflow: hidden;
 	white-space: nowrap;
 }
 
-.commit .commit-message span {
+.commit .avatar-container .avatar {
+	width: 16px;
+}
+
+.commit .commit-message .message {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }

preview-src/pullRequestOverviewRenderer.ts

@@ -5,7 +5,7 @@
 
 import * as moment from 'moment';
 import md from './mdRenderer';
-const emoji = require('node-emoji')
+const emoji = require('node-emoji');
 
 export enum DiffChangeType {
 	Context,
@@ -88,6 +88,9 @@ export interface Author {
 	name: string;
 	email: string;
 	date: Date;
+	login?: string;
+	avatar_url?: string;
+	html_url?: string;
 }
 
 export interface Committer {
@@ -249,7 +252,13 @@ export function renderComment(comment: CommentEvent | Comment): string {
 
 export function renderCommit(timelineEvent: CommitEvent): string {
 
-	let shaShort = timelineEvent.sha.substring(0, 7);
+	const shaShort = timelineEvent.sha.substring(0, 7);
+	const avatar = timelineEvent.author.avatar_url
+		? `<div class="avatar-container"><a class="avatar-link" href="${timelineEvent.author.html_url}"><img class="avatar" src="${timelineEvent.author.avatar_url}"></a></div>`
+		: '';
+	const login = timelineEvent.author.login
+		? `<a class="author" href="${timelineEvent.author.html_url}">${timelineEvent.author.login}</a>`
+		: `<div>${timelineEvent.author.name}</div>`;
 
 	return `<div class="comment-container"  data-type="commit">
 
@@ -260,9 +269,10 @@ export function renderCommit(timelineEvent: CommitEvent): string {
 					<svg class="octicon octicon-git-commit" width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<path fill-rule="evenodd" clip-rule="evenodd" d="M10.86 3C10.41 1.28 8.86 0 7 0C5.14 0 3.59 1.28 3.14 3H0V5H3.14C3.59 6.72 5.14 8 7 8C8.86 8 10.41 6.72 10.86 5H14V3H10.86V3ZM7 6.2C5.78 6.2 4.8 5.22 4.8 4C4.8 2.78 5.78 1.8 7 1.8C8.22 1.8 9.2 2.78 9.2 4C9.2 5.22 8.22 6.2 7 6.2V6.2Z" transform="translate(0 4)"/>
 					</svg>
-					<span>
-						${timelineEvent.author.name}: ${timelineEvent.message}
-					</span>
+					${avatar}
+					<div class="message">
+						${login}: ${timelineEvent.message}
+					</div>
 				</div>
 				<a class="sha" href="${timelineEvent.html_url}">${shaShort}</a>
 			</div>
@@ -294,13 +304,13 @@ export function renderReview(timelineEvent: ReviewEvent): string {
 	let reviewState = '';
 	switch (timelineEvent.state.toLowerCase()) {
 		case 'approved':
-			reviewState = `<span><a href="${timelineEvent.user.html_url}">${timelineEvent.user.login}</a> approved these changes</span>`
+			reviewState = `<span><a href="${timelineEvent.user.html_url}">${timelineEvent.user.login}</a> approved these changes</span>`;
 			break;
 		case 'commented':
-			reviewState = `<span><a href="${timelineEvent.user.html_url}">${timelineEvent.user.login}</a> reviewed</span>`
+			reviewState = `<span><a href="${timelineEvent.user.html_url}">${timelineEvent.user.login}</a> reviewed</span>`;
 			break;
 		case 'changes_requested':
-			reviewState = `<span><a href="${timelineEvent.user.html_url}">${timelineEvent.user.login}</a> requested changes</span>`
+			reviewState = `<span><a href="${timelineEvent.user.html_url}">${timelineEvent.user.login}</a> requested changes</span>`;
 			break;
 		default:
 			break;

src/common/timelineEvent.ts

@@ -18,6 +18,9 @@ export interface Author {
 	name: string;
 	email: string;
 	date: Date;
+	login?: string;
+	avatar_url?: string;
+	html_url?: string;
 }
 
 export interface Committer {

src/github/interface.ts

@@ -86,6 +86,8 @@ export interface FileChange {
 
 export interface Commit {
 	author: {
+		avatar_url: string;
+		html_url: string;
 		login: string;
 	};
 	commit: {

src/github/pullRequestOverview.ts

@@ -6,10 +6,10 @@
 
 import * as path from 'path';
 import * as vscode from 'vscode';
-import { IPullRequest, IPullRequestManager, IPullRequestModel } from './interface';
+import { IPullRequest, IPullRequestManager, IPullRequestModel, Commit } from './interface';
 import { onDidClosePR } from '../commands';
 import { exec } from '../common/git';
-import { TimelineEvent, EventType, ReviewEvent } from '../common/timelineEvent';
+import { TimelineEvent, EventType, ReviewEvent, CommitEvent } from '../common/timelineEvent';
 import { Comment } from '../common/comment';
 import { groupBy, formatError } from '../common/utils';
 
@@ -118,27 +118,36 @@ export class PullRequestOverviewPanel {
 			this._panel.title = `Pull Request #${pullRequestModel.prNumber.toString()}`;
 
 			const isCurrentlyCheckedOut = pullRequestModel.equals(this._pullRequestManager.activePullRequest);
-			const timelineEvents = await this._pullRequestManager.getTimelineEvents(pullRequestModel);
-			const reviewComments = await this._pullRequestManager.getPullRequestComments(pullRequestModel);
-			const defaultBranch = await this._pullRequestManager.getPullRequestRepositoryDefaultBranch(pullRequestModel);
-			this.fixCommentThreads(timelineEvents, reviewComments);
-			this._panel.webview.postMessage({
-				command: 'pr.initialize',
-				pullrequest: {
-					number: pullRequestModel.prNumber,
-					title: pullRequestModel.title,
-					url: pullRequestModel.html_url,
-					createdAt: pullRequestModel.createdAt,
-					body: pullRequestModel.body,
-					author: pullRequestModel.author,
-					state: pullRequestModel.state,
-					events: timelineEvents,
-					isCurrentlyCheckedOut: isCurrentlyCheckedOut,
-					base: pullRequestModel.base && pullRequestModel.base.label || 'UNKNOWN',
-					head: pullRequestModel.head && pullRequestModel.head.label || 'UNKNOWN',
-					commitsCount: pullRequestModel.commitCount,
-					repositoryDefaultBranch: defaultBranch
-				}
+
+			Promise.all(
+				[
+					this._pullRequestManager.getPullRequestCommits(pullRequestModel),
+					this._pullRequestManager.getTimelineEvents(pullRequestModel),
+					this._pullRequestManager.getPullRequestComments(pullRequestModel),
+					this._pullRequestManager.getPullRequestRepositoryDefaultBranch(pullRequestModel)
+				]
+			).then(result => {
+				const [reviewCommits, timelineEvents, reviewComments, defaultBranch] = result;
+				this.fixCommentThreads(timelineEvents, reviewComments);
+				this.fixCommitAttribution(timelineEvents, reviewCommits);
+				this._panel.webview.postMessage({
+					command: 'pr.initialize',
+					pullrequest: {
+						number: pullRequestModel.prNumber,
+						title: pullRequestModel.title,
+						url: pullRequestModel.html_url,
+						createdAt: pullRequestModel.createdAt,
+						body: pullRequestModel.body,
+						author: pullRequestModel.author,
+						state: pullRequestModel.state,
+						events: timelineEvents,
+						isCurrentlyCheckedOut: isCurrentlyCheckedOut,
+						base: pullRequestModel.base && pullRequestModel.base.label || 'UNKNOWN',
+						head: pullRequestModel.head && pullRequestModel.head.label || 'UNKNOWN',
+						commitsCount: pullRequestModel.commitCount,
+						repositoryDefaultBranch: defaultBranch
+					}
+				});
 			});
 		}
 	}
@@ -175,6 +184,23 @@ export class PullRequestOverviewPanel {
 		}
 	}
 
+	/**
+	 * Commit timeline events only list the bare user commit information, not the details of the associated GitHub user account. Add these details.
+	 * @param timelineEvents The timeline events
+	 * @param commits All review commits
+	 */
+	private fixCommitAttribution(timelineEvents: TimelineEvent[], commits: Commit[]): void {
+		const commitEvents: CommitEvent[] = (<CommitEvent[]>timelineEvents.filter(event => event.event === EventType.Committed));
+		for (let commitEvent of commitEvents) {
+			const matchingCommits = commits.filter(commit => commit.sha === commitEvent.sha);
+			if (matchingCommits.length === 1) {
+				commitEvent.author.avatar_url = matchingCommits[0].author.avatar_url;
+				commitEvent.author.login = matchingCommits[0].author.login;
+				commitEvent.author.html_url = matchingCommits[0].author.html_url;
+			}
+		}
+	}
+
 	private async _onDidReceiveMessage(message) {
 		switch (message.command) {
 			case 'alert':