Add checkout button to overview

extensions/git-extended/media/index.css

@@ -62,6 +62,31 @@ body {
 	margin-top: 18px;
 }
 
+.overview-title {
+	display: flex;
+}
+
+#checkout {
+	align-self: center;
+	margin-left: auto;
+	padding: 4px 8px;
+	background-color: var(--vscode-button-background);
+	color: var(--vscode-button-foreground);
+	border-radius: 0px;
+	border: 1px solid transparent;
+	outline: none;
+	display: flex;
+}
+
+#checkout .octicon {
+	margin-right: 8px;
+}
+
+#checkout:hover:enabled, #checkout:focus:enabled {
+	background-color: var(--vscode-button-hoverBackground);
+	cursor: pointer;
+}
+
 .status {
 	display: inline-block;
 	height: 28px;
@@ -76,4 +101,5 @@ body {
 .details {
 	display: flex;
 	flex-direction: column;
+	width: 100%;
 }
\ No newline at end of file

extensions/git-extended/preview-src/index.ts

@@ -5,15 +5,17 @@
 
 import { renderTimelineEvent, getStatus } from './pullRequestOverviewRenderer';
 
-// declare var acquireVsCodeApi: any;
-// const vscode = acquireVsCodeApi();
+declare var acquireVsCodeApi: any;
+const vscode = acquireVsCodeApi();
 
 function handleMessage(event: any) {
 	const message = event.data; // The json data that the extension sent
 	switch (message.command) {
 		case 'initialize':
-			document.getElementById('pullrequest')!.innerHTML = message.pullrequest.events.map(renderTimelineEvent).join('');
-			setTitleHTML(message.pullrequest);
+			renderPullRequest(message.pullrequest);
+			break;
+		case 'checked-out':
+			updateCheckoutButton(true);
 			break;
 		default:
 			break;
@@ -22,13 +24,21 @@ function handleMessage(event: any) {
 
 window.addEventListener('message', handleMessage);
 
+function renderPullRequest(pullRequest: any) {
+	document.getElementById('pullrequest')!.innerHTML = pullRequest.events.map(renderTimelineEvent).join('');
+	setTitleHTML(pullRequest);
+
+	updateCheckoutButton(pullRequest.isCurrentlyCheckedOut);
+
+	addEventListeners();
+}
 
 function setTitleHTML(pr: any) {
 	document.getElementById('title')!.innerHTML = `
 			<div class="prIcon"><svg width="64" height="64" class="octicon octicon-git-compare" viewBox="0 0 14 16" version="1.1" aria-hidden="true"><path fill="#FFFFFF" fill-rule="evenodd" d="M5 12H4c-.27-.02-.48-.11-.69-.31-.21-.2-.3-.42-.31-.69V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V11c.03.78.34 1.47.94 2.06.6.59 1.28.91 2.06.94h1v2l3-3-3-3v2zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm11 9.48V5c-.03-.78-.34-1.47-.94-2.06-.6-.59-1.28-.91-2.06-.94H9V0L6 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 12 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg></div>
 			<div class="details">
-				<div>
-					<h2>${pr.title} (<a href=${pr.html_url}>#${pr.number}</a>) </h2>
+				<div class="overview-title">
+					<h2>${pr.title} (<a href=${pr.html_url}>#${pr.number}</a>) </h2> <button id="checkout"><svg class="octicon octicon-desktop-download" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 6h3V0h2v6h3l-4 4-4-4zm11-4h-4v1h4v8H1V3h4V2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z"></path></svg>Checkout Pull Request</button>
 				</div>
 				<div>
 					<div class="status">${getStatus(pr)}</div>
@@ -40,4 +50,21 @@ function setTitleHTML(pr: any) {
 				</div>
 			</div>
 		`;
+}
+
+function addEventListeners() {
+	document.getElementById('checkout')!.addEventListener('click', () => {
+		(<HTMLButtonElement>document.getElementById('checkout')).disabled = true;
+		vscode.postMessage({
+			command: 'pr.checkout'
+		});
+	});
+}
+
+function updateCheckoutButton(isCheckedOut: boolean) {
+	const checkoutButton = (<HTMLButtonElement>document.getElementById('checkout'));
+	checkoutButton.disabled = isCheckedOut;
+	const checkoutIcon = '<svg class="octicon octicon-desktop-download" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 6h3V0h2v6h3l-4 4-4-4zm11-4h-4v1h4v8H1V3h4V2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z"></path></svg>';
+	const activeIcon = '<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>';
+	checkoutButton.innerHTML = isCheckedOut ? `${activeIcon} Currently Active` : `${checkoutIcon} Checkout Pull Request`;
 }
\ No newline at end of file

extensions/git-extended/src/common/pullRequestOverview.ts

@@ -7,6 +7,7 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
 import { PullRequestModel } from './models/pullRequestModel';
+import { ReviewManager } from '../review/reviewManager';
 
 const MarkdownIt = require('markdown-it');
 
@@ -69,6 +70,7 @@ export class PullRequestOverviewPanel {
 	public async update(pullRequestModel: PullRequestModel) {
 		this._pullRequest = pullRequestModel;
 		this._panel.webview.html = this.getHtmlForWebview();
+		const isCurrentlyCheckedOut = pullRequestModel.equals(ReviewManager.instance.currentPullRequest);
 		const timelineEvents = await pullRequestModel.getTimelineEvents();
 		this._panel.webview.postMessage({
 			command: 'initialize',
@@ -78,7 +80,8 @@ export class PullRequestOverviewPanel {
 				body: pullRequestModel.prItem.body,
 				author: pullRequestModel.author,
 				state: pullRequestModel.state,
-				events: timelineEvents
+				events: timelineEvents,
+				isCurrentlyCheckedOut: isCurrentlyCheckedOut
 			}
 		});
 	}
@@ -88,6 +91,17 @@ export class PullRequestOverviewPanel {
 			case 'alert':
 				vscode.window.showErrorMessage(message.text);
 				return;
+			case 'pr.checkout':
+				vscode.commands.executeCommand('pr.pick', this._pullRequest).then(() => {
+					this._panel.webview.postMessage({
+						command: 'checked-out'
+					});
+				}, () => {
+					this._panel.webview.postMessage({
+						command: 'checked-out'
+					});
+				});
+				return;
 		}
 	}