Show merge method selector on description page, add setting for defau…

…lt merge method, fixes #593 (#826)
microsoft · Jan 25, 2019 · 8bc18c2 · 8bc18c2
1 parent bf5fee0
commit 8bc18c2
Show file tree

Hide file tree

Showing 8 changed files with 244 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -78,6 +78,16 @@
           "default": "default",
           "description": "By default we only support remotes created by users. If you want to see pull requests from remotes this extension created for pull requests, change this setting to 'all'."
         },
+        "githubPullRequests.defaultMergeMethod": {
+          "type": "string",
+          "enum": [
+            "merge",
+            "squash",
+            "rebase"
+          ],
+          "default": "merge",
+          "description": "The method to use when merging pull requests."
+        },
         "telemetry.optout": {
           "type": "boolean",
           "default": false,

diff --git a/preview-src/cache.ts b/preview-src/cache.ts
@@ -29,6 +29,7 @@ export interface PullRequest {
 	pendingCommentDrafts?: { [key: string]: string; };
 	status: ReposGetCombinedStatusForRefResponse;
 	mergeable: boolean;
+	defaultMergeMethod: string;
 	supportsGraphQl: boolean;
 }
 

diff --git a/preview-src/index.css b/preview-src/index.css
@@ -125,9 +125,16 @@ body .comment-container .review-comment-header {
 	margin-left: 15px;
 }
 
-.status-item {
+.status-item, #status-checks .form-actions {
 	display: flex;
-	padding-top: 12px;
+}
+
+#confirm-merge {
+	margin-left: auto;
+}
+
+.status-section {
+	padding-bottom: 12px;
 }
 
 #status-checks a {
@@ -136,7 +143,9 @@ body .comment-container .review-comment-header {
 }
 
 #status-checks {
-	margin-top: 5px;
+	padding: 10px;
+	border: 1px solid var(--vscode-list-inactiveSelectionBackground);
+	margin-top: 20px;
 }
 
 #status-checks summary {
@@ -150,6 +159,15 @@ body .comment-container .review-comment-header {
 	width: 12px;
 }
 
+#status-checks .merge-select-container {
+	display: flex;
+	align-items: center;
+}
+
+#status-checks .merge-select-container > * {
+	margin-right: 5px;
+}
+
 body .comment-container .review-comment-header > span,
 body .comment-container .review-comment-header > a,
 body .commit .commit-message > a {
@@ -437,13 +455,11 @@ body .comment-form {
 	margin-right: 0;
 }
 
-textarea {
+textarea, input {
 	display: block;
 	box-sizing: border-box;
 	padding: 10px;
 	width: 100%;
-	min-height: 100px;
-	max-height: 500px;
 	resize: vertical;
 	font-size: 13px;
 	border: 1px solid var(--vscode-dropdown-border);
@@ -452,6 +468,27 @@ textarea {
 	font-family: var(--vscode-editor-font-family);
 }
 
+select {
+	display: block;
+	box-sizing: border-box;
+	padding: 4px 12px;
+	border-radius: 0;
+	font-size: 13px;
+	border: 1px solid var(--vscode-dropdown-border);
+	background-color: var(--vscode-dropdown-background);
+	color: var(--vscode-dropdown-foreground);
+	border: 1px solid transparent;
+}
+
+#status-checks textarea {
+	margin: 10px 0;
+}
+
+textarea {
+	min-height: 100px;
+	max-height: 500px;
+}
+
 textarea:focus {
 	outline: 1px solid var(--vscode-focusBorder);
 }

diff --git a/preview-src/index.ts b/preview-src/index.ts
@@ -7,26 +7,12 @@ import * as debounce from 'debounce';
 import { dateFromNow } from '../src/common/utils';
 import { EventType, isReviewEvent } from '../src/common/timelineEvent';
 import { PullRequestStateEnum } from '../src/github/interface';
-import { renderTimelineEvent, getStatus, renderComment, renderReview, ActionsBar, renderStatusChecks } from './pullRequestOverviewRenderer';
+import { renderTimelineEvent, getStatus, renderComment, renderReview, ActionsBar, renderStatusChecks, updatePullRequestState, ElementIds } from './pullRequestOverviewRenderer';
 import md from './mdRenderer';
 const emoji = require('node-emoji');
 import { getMessageHandler } from './message';
 import { getState, setState, PullRequest, updateState } from './cache';
 
-const ElementIds = {
-	Checkout: 'checkout',
-	CheckoutDefaultBranch: 'checkout-default-branch',
-	Merge: 'merge',
-	Close: 'close',
-	Refresh: 'refresh',
-	Reply: 'reply',
-	Approve: 'approve',
-	RequestChanges: 'request-changes',
-	Status: 'status',
-	CommentTextArea: 'comment-textarea',
-	TimelineEvents: 'timeline-events' // If updating this value, change id in pullRequestOverview.ts as well.
-};
-
 window.onload = () => {
 	const pullRequest = getState();
 	if (pullRequest && Object.keys(pullRequest).length) {
@@ -61,7 +47,7 @@ function renderPullRequest(pr: PullRequest): void {
 	renderTimelineEvents(pr);
 	setTitleHTML(pr);
 	setTextArea();
-	renderStatusChecks(pr);
+	renderStatusChecks(pr, messageHandler);
 	updateCheckoutButton(pr.isCurrentlyCheckedOut);
 	updatePullRequestState(pr.state);
 
@@ -77,34 +63,6 @@ function renderTimelineEvents(pr: PullRequest): void {
 		.forEach(renderedEvent => timelineElement.appendChild(renderedEvent as HTMLElement));
 }
 
-function updatePullRequestState(state: PullRequestStateEnum): void {
-	updateState({ state: state });
-
-	const merge = (<HTMLButtonElement>document.getElementById(ElementIds.Merge));
-	if (merge) {
-		const { mergeable } = getState();
-		merge.disabled = !mergeable || state !== PullRequestStateEnum.Open;
-	}
-
-	const close = (<HTMLButtonElement>document.getElementById(ElementIds.Close));
-	if (close) {
-		close.disabled = state !== PullRequestStateEnum.Open;
-	}
-
-	const checkout = (<HTMLButtonElement>document.getElementById(ElementIds.Checkout));
-	if (checkout) {
-		checkout.disabled = checkout.disabled || state !== PullRequestStateEnum.Open;
-	}
-
-	const approve = (<HTMLButtonElement>document.getElementById(ElementIds.Approve));
-	if (approve) {
-		approve.disabled = state !== PullRequestStateEnum.Open;
-	}
-
-	const status = document.getElementById(ElementIds.Status);
-	status!.innerHTML = getStatus(state);
-}
-
 function setTitleHTML(pr: PullRequest): void {
 	document.getElementById('title')!.innerHTML = `
 			<div id="details" class="details">
@@ -251,15 +209,6 @@ function addEventListeners(pr: PullRequest): void {
 		submitComment();
 	});
 
-	document.getElementById(ElementIds.Merge)!.addEventListener('click', () => {
-		(<HTMLButtonElement>document.getElementById(ElementIds.Merge)).disabled = true;
-		const inputBox = (<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea));
-		messageHandler.postMessage({
-			command: 'pr.merge',
-			args: inputBox.value
-		});
-	});
-
 	document.getElementById(ElementIds.Close)!.addEventListener('click', async () => {
 		(<HTMLButtonElement>document.getElementById(ElementIds.Close)).disabled = true;
 		const inputBox = (<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea));
@@ -391,7 +340,6 @@ function setTextArea() {
 
 	document.getElementById('comment-form')!.innerHTML = `<textarea id="${ElementIds.CommentTextArea}"></textarea>
 		<div class="form-actions">
-			<button id="${ElementIds.Merge}" class="secondary">Merge Pull Request</button>
 			<button id="${ElementIds.Close}" class="secondary">Close Pull Request</button>
 			${ displaySubmitButtonsOnPendingReview
 				? ''