Add labels to create view in a minimal way

common/views.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { MergeMethod, MergeMethodsAvailability } from '../src/github/interface';
+import { ILabel, MergeMethod, MergeMethodsAvailability } from '../src/github/interface';
 
 export interface RemoteInfo {
 	owner: string;
@@ -30,6 +30,8 @@ export interface CreateParams {
 	compareRemote?: RemoteInfo;
 	compareBranch?: string;
 	isDraft?: boolean;
+	labels?: ILabel[];
+	isDarkTheme?: boolean;
 
 	validate?: boolean;
 	showTitleValidationError?: boolean;
@@ -59,4 +61,5 @@ export interface CreatePullRequest {
 	draft: boolean;
 	autoMerge: boolean;
 	autoMergeMethod?: MergeMethod;
+	labels: ILabel[];
 }

package.json

@@ -882,6 +882,12 @@
 				"category": "%command.pull.request.category%",
 				"icon": "$(gift)"
 			},
+			{
+				"command": "pr.addLabelsToNewPr",
+				"title": "%command.pr.addLabelsToNewPr.title%",
+				"category": "%command.pull.request.category%",
+				"icon": "$(tag)"
+			},
 			{
 				"command": "issue.createIssueFromSelection",
 				"title": "%command.issue.createIssueFromSelection.title%",
@@ -1329,6 +1335,10 @@
 					"command": "pr.copyCommentLink",
 					"when": "false"
 				},
+				{
+					"command": "pr.addLabelsToNewPr",
+					"when": "false"
+				},
 				{
 					"command": "issue.openIssue",
 					"when": "false"
@@ -1497,6 +1507,11 @@
 					"command": "pr.openPullRequestOnGitHub",
 					"when": "view == github:activePullRequest && github:hasGitHubRemotes",
 					"group": "navigation@3"
+				},
+				{
+					"command": "pr.addLabelsToNewPr",
+					"when": "view == github:createPullRequest",
+					"group": "navigation@1"
 				}
 			],
 			"view/item/context": [

package.nls.json

@@ -166,6 +166,7 @@
 	"command.pr.goToPreviousDiffInPr.title": "Go to Previous Diff in Pull Request",
 	"command.pr.copyCommentLink.title": "Copy Comment Link",
 	"command.pr.applySuggestion.title": "Apply Suggestion",
+	"command.pr.addLabelsToNewPr.title": "Add Labels",
 	"command.issues.category": "GitHub Issues",
 	"command.issue.createIssueFromSelection.title": "Create Issue From Selection",
 	"command.issue.createIssueFromClipboard.title": "Create Issue From Clipboard",

src/github/createPRViewProvider.ts

@@ -21,7 +21,7 @@ import {
 	titleAndBodyFrom,
 } from './folderRepositoryManager';
 import { GitHubRepository } from './githubRepository';
-import { RepoAccessAndMergeMethods } from './interface';
+import { ILabel, MergeMethod, RepoAccessAndMergeMethods } from './interface';
 import { PullRequestModel } from './pullRequestModel';
 import { getDefaultMergeMethod } from './pullRequestOverview';
 import { ISSUE_EXPRESSION, parseIssueExpressionOutput, variableSubstitution } from './utils';
@@ -48,6 +48,7 @@ export class CreatePullRequestViewProvider extends WebviewViewBase implements vs
 
 	private _compareBranch: string;
 	private _baseBranch: string;
+	private _baseRemote: RemoteInfo;
 
 	private _firstLoad: boolean = true;
 
@@ -322,13 +323,16 @@ export class CreatePullRequestViewProvider extends WebviewViewBase implements vs
 			allowAutoMerge: mergeConfiguration.viewerCanAutoMerge,
 			mergeMethodsAvailability: mergeConfiguration.mergeMethodsAvailability,
 			createError: '',
-			isDraft: vscode.workspace.getConfiguration(SETTINGS_NAMESPACE).get(CREATE_DRAFT, false)
+			labels: this.labels,
+			isDraft: vscode.workspace.getConfiguration(SETTINGS_NAMESPACE).get(CREATE_DRAFT, false),
+			isDarkTheme: vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark
 		};
 
 		Logger.appendLine(`Initializing "create" view: ${JSON.stringify(params)}`, 'CreatePullRequestViewProvider');
 
 		this._compareBranch = this.defaultCompareBranch.name ?? '';
 		this._baseBranch = defaultBaseBranch;
+		this._baseRemote = defaultBaseRemote;
 
 		this._postMessage({
 			command: reset ? 'reset' : 'pr.initialize',
@@ -366,6 +370,7 @@ export class CreatePullRequestViewProvider extends WebviewViewBase implements vs
 		if (isBase) {
 			newBranch = defaultBranch;
 			this._baseBranch = defaultBranch;
+			this._baseRemote = { owner, repositoryName };
 			this._onDidChangeBaseRemote.fire({ owner, repositoryName });
 			this._onDidChangeBaseBranch.fire(defaultBranch);
 		} else {
@@ -396,6 +401,52 @@ export class CreatePullRequestViewProvider extends WebviewViewBase implements vs
 		}
 	}
 
+	private async enableAutoMerge(pr: PullRequestModel, autoMerge: boolean, automergeMethod: MergeMethod | undefined): Promise<void> {
+		if (autoMerge && automergeMethod) {
+			return pr.enableAutoMerge(automergeMethod);
+		}
+	}
+
+	private async setLabels(pr: PullRequestModel, labels: ILabel[]): Promise<void> {
+		if (labels.length > 0) {
+			await pr.addLabels(labels.map(label => label.name));
+		}
+	}
+
+	private labels: ILabel[] = [];
+	public async addLabels(): Promise<void> {
+		let newLabels: ILabel[] = [];
+
+		async function getLabelOptions(
+			folderRepoManager: FolderRepositoryManager,
+			labels: ILabel[],
+			base: RemoteInfo
+		): Promise<vscode.QuickPickItem[]> {
+			newLabels = await folderRepoManager.getLabels(undefined, { owner: base.owner, repo: base.repositoryName });
+
+			return newLabels.map(label => {
+				return {
+					label: label.name,
+					picked: labels.some(existingLabel => existingLabel.name === label.name)
+				};
+			});
+		}
+
+		const labelsToAdd = await vscode.window.showQuickPick(
+			getLabelOptions(this._folderRepositoryManager, this.labels, this._baseRemote),
+			{ canPickMany: true },
+		);
+
+		if (labelsToAdd && labelsToAdd.length) {
+			const addedLabels: ILabel[] = labelsToAdd.map(label => newLabels.find(l => l.name === label.label)!);
+			this.labels = addedLabels;
+			this._postMessage({
+				command: 'set-labels',
+				params: { labels: this.labels }
+			});
+		}
+	}
+
 	private async pushUpstream(compareOwner: string, compareRepositoryName: string, compareBranchName: string): Promise<{ compareUpstream: GitHubRemote, repo: GitHubRepository | undefined } | undefined> {
 		let createdPushRemote: GitHubRemote | undefined;
 		const pushRemote = this._folderRepositoryManager.repository.state.remotes.find(localRemote => {
@@ -482,10 +533,10 @@ export class CreatePullRequestViewProvider extends WebviewViewBase implements vs
 					if (!createdPR) {
 						this._throwError(message, vscode.l10n.t('There must be a difference in commits to create a pull request.'));
 					} else {
-						if (message.args.autoMerge && message.args.autoMergeMethod) {
-							await createdPR.enableAutoMerge(message.args.autoMergeMethod);
-						}
-						await this.autoAssign(createdPR);
+						await Promise.all([
+							this.setLabels(createdPR, message.args.labels),
+							this.enableAutoMerge(createdPR, message.args.autoMerge, message.args.autoMergeMethod),
+							this.autoAssign(createdPR)]);
 						await this._replyMessage(message, {});
 						this._onDone.fire(createdPR);
 					}

src/view/createPullRequestHelper.ts

@@ -65,6 +65,12 @@ export class CreatePullRequestHelper {
 			}),
 		);
 
+		this._disposables.push(
+			vscode.commands.registerCommand('pr.addLabelsToNewPr', _ => {
+				return this._createPRViewProvider?.addLabels();
+			}),
+		);
+
 		if (usingCurrentBranchAsCompare) {
 			this._disposables.push(
 				this.repository.state.onDidChange(_ => {

webviews/common/common.css

@@ -251,3 +251,23 @@ body img.avatar {
 ::-webkit-scrollbar-corner {
 	display: none;
 }
+
+.labels-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.label {
+	display: flex;
+	justify-content: normal;
+	padding: 0 8px;
+	border-radius: 20px;
+	border-style: solid;
+	border-width: 1px;
+	background: var(--vscode-badge-background);
+	color: var(--vscode-badge-foreground);
+	font-size: 11px;
+	line-height: 18px;
+	font-weight: 600;
+}

webviews/common/createContext.ts

@@ -14,6 +14,7 @@ const defaultCreateParams: CreateParams = {
 	branchesForCompare: [],
 	validate: false,
 	showTitleValidationError: false,
+	labels: []
 };
 
 export class CreatePRContext {
@@ -133,7 +134,8 @@ export class CreatePRContext {
 			compareRepo: this.createParams.compareRemote!.repositoryName,
 			draft: !!this.createParams.isDraft,
 			autoMerge: !!this.createParams.autoMerge,
-			autoMergeMethod: this.createParams.autoMergeMethod
+			autoMergeMethod: this.createParams.autoMergeMethod,
+			labels: this.createParams.labels ?? []
 		};
 	}
 
@@ -229,6 +231,13 @@ export class CreatePRContext {
 				}
 				window.scrollTo(message.scrollPosition.x, message.scrollPosition.y);
 				return;
+
+			case 'set-labels':
+				if (!message.params) {
+					return;
+				}
+				this.updateState(message.params);
+				return;
 		}
 	};
 

webviews/common/label.tsx

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+
+import React, { ReactNode } from 'react';
+import { gitHubLabelColor } from '../../src/common/utils';
+import { ILabel } from '../../src/github/interface';
+
+export interface LabelProps {
+	label: ILabel & { canDelete: boolean; isDarkTheme: boolean };
+}
+
+export function Label(label: ILabel & { canDelete: boolean; isDarkTheme: boolean; children?: ReactNode}) {
+	const { name, canDelete, color } = label;
+	const labelColor = gitHubLabelColor(color, label.isDarkTheme, false);
+	return (
+		<div
+			className="section-item label"
+			style={{
+				backgroundColor: labelColor.backgroundColor,
+				color: labelColor.textColor,
+				borderColor: `${labelColor.borderColor}`,
+				paddingRight: canDelete ? '2px' : '8px'
+			}}
+		>
+			{name}{label.children}
+		</div>
+	);
+}

webviews/components/sidebar.tsx

@@ -5,25 +5,25 @@
 
 import React, { useContext } from 'react';
 import { gitHubLabelColor } from '../../src/common/utils';
-import { ILabel, IMilestone } from '../../src/github/interface';
+import { IMilestone } from '../../src/github/interface';
 import { PullRequest } from '../common/cache';
 import PullRequestContext from '../common/context';
+import { Label } from '../common/label';
 import { AuthorLink, Avatar } from '../components/user';
 import { closeIcon, settingsIcon } from './icon';
 import { Reviewer } from './reviewer';
-import { nbsp } from './space';
 
 export default function Sidebar({ reviewers, labels, hasWritePermission, isIssue, milestone, assignees }: PullRequest) {
 	const {
 		addReviewers,
 		addAssignees,
 		addAssigneeYourself,
 		addLabels,
+		removeLabel,
 		addMilestone,
 		updatePR,
 		pr,
 	} = useContext(PullRequestContext);
-
 	return (
 		<div id="sidebar">
 			{!isIssue ? (
@@ -112,11 +112,16 @@ export default function Sidebar({ reviewers, labels, hasWritePermission, isIssue
 						</button>
 					) : null}
 				</div>
-
 				{labels.length ? (
 					<div className="labels-list">
 						{labels.map(label => (
-							<Label key={label.name} {...label} canDelete={hasWritePermission} />
+							<Label key={label.name} {...label} canDelete={hasWritePermission} isDarkTheme={pr.isDarkTheme}>
+								{hasWritePermission ? (
+									<button className="icon-button" onClick={() => removeLabel(label.name)}>
+										{closeIcon}️
+									</button>
+								) : null}
+							</Label>
 						))}
 					</div>
 				) : (
@@ -147,30 +152,6 @@ export default function Sidebar({ reviewers, labels, hasWritePermission, isIssue
 	);
 }
 
-function Label(label: ILabel & { canDelete: boolean }) {
-	const { name, canDelete, color } = label;
-	const { removeLabel, pr } = useContext(PullRequestContext);
-	const labelColor = gitHubLabelColor(color, pr.isDarkTheme, false);
-	return (
-		<div
-			className="section-item label"
-			style={{
-				backgroundColor: labelColor.backgroundColor,
-				color: labelColor.textColor,
-				borderColor: `${labelColor.borderColor}`,
-				paddingRight: canDelete ? '2px' : '8px'
-			}}
-		>
-			{name}
-			{canDelete ? (
-				<button className="icon-button" onClick={() => removeLabel(name)}>
-					{closeIcon}️
-				</button>
-			) : null}
-		</div>
-	);
-}
-
 function Milestone(milestone: IMilestone & { canDelete: boolean }) {
 	const { removeMilestone, updatePR, pr } = useContext(PullRequestContext);
 	const backgroundBadgeColor = getComputedStyle(document.documentElement).getPropertyValue(

webviews/createPullRequestView/app.tsx

@@ -8,6 +8,7 @@ import { render } from 'react-dom';
 import { CreateParams, RemoteInfo } from '../../common/views';
 import PullRequestContext from '../common/createContext';
 import { ErrorBoundary } from '../common/errorBoundary';
+import { Label } from '../common/label';
 import { AutoMerge } from '../components/automergeSelect';
 import { gitCompareIcon, repoIcon } from '../components/icon';
 
@@ -127,6 +128,15 @@ export function main() {
 						<BranchSelect onChange={updateBaseBranch} defaultOption={params.baseBranch} branches={params.branchesForRemote} />
 					</div>
 
+					{params.labels && (params.labels.length > 0) ?
+						<div>
+							<label className='input-label'>Labels</label>
+							<div className='labels-list'>
+								{params.labels.map(label => <Label key={label.name} {...label} canDelete={false} isDarkTheme={!!params.isDarkTheme} />)}
+							</div>
+						</div>
+						: null}
+
 					<div className='wrapper'>
 						<label className='input-label' htmlFor='title'>Title</label>
 						<input

webviews/createPullRequestView/index.css

@@ -103,3 +103,7 @@ body {
 	display: flex;
 	align-items: center;
 }
+
+.labels-list {
+	padding-top: 6px;
+}