microsoft · miguelsolorio · Oct 10, 2018 · Oct 6, 2018 · Oct 9, 2018 · Oct 10, 2018
diff --git a/preview-src/index.css b/preview-src/index.css
@@ -224,7 +224,21 @@ body .overview-title button {
 	margin-right: 12px;
 }
 
-.commit svg {
+.label {
+	padding: 4px 6px;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 15px;
+	border-radius: 2px;
+	margin-right: 8px;
+	margin-bottom: 8px;
+	background: var(--vscode-badge-background);
+	color: var(--vscode-badge-foreground);
+	box-shadow: inset 0 -1px 0 rgba(27,31,35,0.12);
+}
+
+.commit svg,
+.comment-body .octicon {
 	width: 14px;
 	height: auto;
 	margin-right: 8px;
@@ -316,6 +330,13 @@ body .overview-title button {
 	padding-bottom: 0;
 }
 
+.comment-body .line {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 8px;
+}
+
 body .comment-form {
 	padding: 20px 0 10px;
 }
@@ -594,4 +615,4 @@ code {
 
 .vscode-high-contrast .diff .diffLine.delete {
 	border: 1px dashed var(--vscode-diffEditor-removedTextBorder);
-}
+}
diff --git a/preview-src/index.ts b/preview-src/index.ts
@@ -36,6 +36,7 @@ interface PullRequest {
 	isCurrentlyCheckedOut: boolean;
 	base: string;
 	head: string;
+	labels: string[];
 	commitsCount: number;
 	repositoryDefaultBranch: any;
 	pendingCommentText?: string;
@@ -140,7 +141,19 @@ function setTitleHTML(pr: PullRequest): void {
 					<span class="author"><a href="${pr.author.htmlUrl}">${pr.author.login}</a> wants to merge changes from <code>${pr.head}</code> to <code>${pr.base}</code>.</span>
 					<div class="created-at">${moment(pr.createdAt).fromNow()}</div>
 				</div>
-				<div class="comment-body">${md.render(emoji.emojify(pr.body))}</div>
+				<div class="comment-body">
+					${
+						pr.labels.length > 0
+							? `<div class="line">
+						<svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16">
+							<path fill-rule="evenodd" d="M7.685 1.72a2.49 2.49 0 0 0-1.76-.726H3.48A2.5 2.5 0 0 0 .994 3.48v2.456c0 .656.269 1.292.726 1.76l6.024 6.024a.99.99 0 0 0 1.402 0l4.563-4.563a.99.99 0 0 0 0-1.402L7.685 1.72zM2.366 7.048a1.54 1.54 0 0 1-.467-1.123V3.48c0-.874.716-1.58 1.58-1.58h2.456c.418 0 .825.159 1.123.467l6.104 6.094-4.702 4.702-6.094-6.114zm.626-4.066h1.989v1.989H2.982V2.982h.01z" />
+						</svg>
+						${pr.labels.map(label => `<span class="label">${label}</span>`).join('')}
+						</div>`
+							: ''
+					}
+					<div>${md.render(emoji.emojify(pr.body))}</div>
+				</div>
 			</div>
 		`;
 }

diff --git a/preview-src/pullRequestOverviewRenderer.ts b/preview-src/pullRequestOverviewRenderer.ts
@@ -420,4 +420,4 @@ export function getStatus(state: PullRequestStateEnum) {
 	} else {
 		return 'Closed';
 	}
-}
+}
diff --git a/src/github/interface.ts b/src/github/interface.ts
@@ -48,6 +48,15 @@ export interface IRepository {
 	sha: string;
 }
 
+interface ILabel {
+	id: number;
+	node_id: string;
+	url: string;
+	name: string;
+	color: string;
+	default: boolean;
+}
+
 // This interface is incomplete
 export interface IPullRequest {
 	additions: number;
@@ -64,7 +73,7 @@ export interface IPullRequest {
 	head: IRepository;
 	html_url: string;
 	id: number;
-	labels: any[];
+	labels: ILabel[];
 	locked: boolean;
 	maintainer_can_modify: boolean;
 	merge_commit_sha; boolean;
@@ -138,6 +147,7 @@ export interface IPullRequestModel {
 	userAvatar: string;
 	userAvatarUri: vscode.Uri;
 	body: string;
+	labels: string[];
 	update(prItem: IPullRequest): void;
 	equals(other: IPullRequestModel): boolean;
 }

diff --git a/src/github/pullRequestModel.ts b/src/github/pullRequestModel.ts
@@ -21,6 +21,7 @@ export class PullRequestModel implements IPullRequestModel {
 	public createdAt: string;
 	public updatedAt: string;
 	public localBranchName?: string;
+	public labels: string[];
 
 	public get isOpen(): boolean {
 		return this.state === PullRequestStateEnum.Open;
@@ -78,6 +79,7 @@ export class PullRequestModel implements IPullRequestModel {
 			avatarUrl: prItem.user.avatar_url,
 			htmlUrl: prItem.user.html_url
 		};
+		this.labels = prItem.labels.map(label => label.name);
 
 		if (prItem.state === 'open') {
 			this.state = PullRequestStateEnum.Open;

diff --git a/src/github/pullRequestOverview.ts b/src/github/pullRequestOverview.ts
@@ -138,6 +138,7 @@ export class PullRequestOverviewPanel {
 						url: pullRequestModel.html_url,
 						createdAt: pullRequestModel.createdAt,
 						body: pullRequestModel.body,
+						labels: pullRequestModel.labels,
 						author: pullRequestModel.author,
 						state: pullRequestModel.state,
 						events: timelineEvents,
@@ -400,4 +401,4 @@ function getNonce() {
 		text += possible.charAt(Math.floor(Math.random() * possible.length));
 	}
 	return text;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -420,4 +420,4 @@ export function getStatus(state: PullRequestStateEnum) { @@
     	} else {
     		return 'Closed';
     	}
-    }
+    }