Adds create new branch option for applying patch

Co-authored-by: Ramin Tadayon <ramin.tadayon@gitkraken.com>

src/plus/webviews/patchDetails/patchDetailsWebview.ts

@@ -13,7 +13,7 @@ import { createReference } from '../../../git/models/reference';
 import { isRepository } from '../../../git/models/repository';
 import type { CreateDraftChange, Draft, DraftPatch, DraftPatchFileChange, LocalDraft } from '../../../gk/models/drafts';
 import type { GkRepositoryId } from '../../../gk/models/repositoryIdentities';
-import { showBranchPicker } from '../../../quickpicks/branchPicker';
+import { showNewOrSelectBranchPicker } from '../../../quickpicks/branchPicker';
 import { executeCommand, registerCommand } from '../../../system/command';
 import { configuration } from '../../../system/configuration';
 import { setContext } from '../../../system/context';
@@ -348,9 +348,9 @@ export class PatchDetailsWebviewProvider
 
 				if (shouldPickBranch) {
 					const repo = commit.getRepository();
-					const branch = await showBranchPicker(
+					const branch = await showNewOrSelectBranchPicker(
 						`Choose a Branch ${GlyphChars.Dot} ${repo?.name}`,
-						'Choose a branch to apply the Cloud Patch to',
+						// 'Choose a branch to apply the Cloud Patch to',
 						repo,
 					);
 
@@ -360,9 +360,11 @@ export class PatchDetailsWebviewProvider
 						);
 						continue;
 					}
+
+					const isString = typeof branch === 'string';
 					options = {
-						branchName: branch.ref,
-						createBranchIfNeeded: true,
+						branchName: isString ? branch : branch.ref,
+						createBranchIfNeeded: isString,
 					};
 				}
 

src/quickpicks/branchPicker.ts

@@ -1,4 +1,4 @@
-import type { Disposable } from 'vscode';
+import type { Disposable, QuickPickItem } from 'vscode';
 import { window } from 'vscode';
 import { getBranches } from '../commands/quickCommand.steps';
 import type { Repository } from '../git/models/repository';
@@ -49,3 +49,102 @@ export async function showBranchPicker(
 		disposables.forEach(d => void d.dispose());
 	}
 }
+
+export async function showNewBranchPicker(
+	title: string | undefined,
+	placeholder?: string,
+	_repository?: Repository,
+): Promise<string | undefined> {
+	const input = window.createInputBox();
+	input.ignoreFocusOut = true;
+
+	const disposables: Disposable[] = [];
+
+	let newBranchName: string | undefined;
+	try {
+		newBranchName = await new Promise<string | undefined>(resolve => {
+			disposables.push(
+				input.onDidHide(() => resolve(undefined)),
+				input.onDidAccept(() => {
+					const value = input.value.trim();
+					if (value == null) {
+						input.validationMessage = 'Please enter a valid branch name';
+						return;
+					}
+
+					resolve(value);
+				}),
+			);
+
+			input.title = title;
+			input.placeholder = placeholder;
+			input.prompt = 'Enter a name for the new branch';
+
+			input.show();
+		});
+	} finally {
+		input.dispose();
+		disposables.forEach(d => void d.dispose());
+	}
+
+	return newBranchName;
+}
+
+export async function showNewOrSelectBranchPicker(
+	title: string | undefined,
+	repository?: Repository,
+): Promise<BranchQuickPickItem | string | undefined> {
+	if (repository == null) {
+		return undefined;
+	}
+
+	// TODO: needs updating
+	const createNewBranch = {
+		label: 'Create new branch',
+		description:
+			'Creates a branch to apply the Cloud Patch to. (Typing an existing branch name will use that branch.)',
+	};
+	const selectExistingBranch = {
+		label: 'Select existing branch',
+		description: 'Selects an existing branch to apply the Cloud Patch to.',
+	};
+
+	const items: QuickPickItem[] = [createNewBranch, selectExistingBranch];
+
+	const quickpick = window.createQuickPick<QuickPickItem>();
+	quickpick.ignoreFocusOut = getQuickPickIgnoreFocusOut();
+
+	const disposables: Disposable[] = [];
+
+	try {
+		const pick = await new Promise<QuickPickItem | undefined>(resolve => {
+			disposables.push(
+				quickpick.onDidHide(() => resolve(undefined)),
+				quickpick.onDidAccept(() => {
+					if (quickpick.activeItems.length !== 0) {
+						resolve(quickpick.activeItems[0]);
+					}
+				}),
+			);
+
+			quickpick.title = title;
+			quickpick.placeholder = 'Select a branch option';
+			quickpick.matchOnDescription = true;
+			quickpick.matchOnDetail = true;
+			quickpick.items = items;
+
+			quickpick.show();
+		});
+
+		if (pick === createNewBranch) {
+			return showNewBranchPicker(title, 'Enter a name for the new branch', repository);
+		} else if (pick === selectExistingBranch) {
+			return showBranchPicker(title, 'Select an existing branch', repository);
+		}
+
+		return undefined;
+	} finally {
+		quickpick.dispose();
+		disposables.forEach(d => void d.dispose());
+	}
+}

src/webviews/apps/plus/patchDetails/components/gl-draft-details.ts

@@ -355,7 +355,7 @@ export class GlDraftDetails extends GlTreeBase {
 									><code-icon icon="chevron-down"></code-icon
 								></gl-button>
 								<gk-menu class="mine-menu" @select=${this.onSelectApplyOption}>
-									<gk-menu-item data-value="branch">Apply to new branch</gk-menu-item>
+									<gk-menu-item data-value="branch">Apply to a Branch</gk-menu-item>
 									<!-- <gk-menu-item data-value="worktree">Apply to new worktree</gk-menu-item> -->
 								</gk-menu>
 							</gk-popover>