Merge profile name and configuration pickers (microsoft#187862)

Author: sandy081

src/vs/platform/quickinput/browser/media/quickInput.css

@@ -50,7 +50,7 @@
 }
 
 .quick-input-description {
-	margin: 6px;
+	margin: 6px 6px 6px 11px;
 }
 
 .quick-input-header .quick-input-description {

src/vs/platform/quickinput/browser/quickInput.ts

@@ -537,6 +537,7 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 	private _customButtonHover: string | undefined;
 	private _quickNavigate: IQuickNavigateConfiguration | undefined;
 	private _hideInput: boolean | undefined;
+	private _hideCountBadge: boolean | undefined;
 	private _hideCheckAll: boolean | undefined;
 
 	get quickNavigate() {
@@ -796,6 +797,15 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 		this.update();
 	}
 
+	get hideCountBadge() {
+		return !!this._hideCountBadge;
+	}
+
+	set hideCountBadge(hideCountBadge: boolean) {
+		this._hideCountBadge = hideCountBadge;
+		this.update();
+	}
+
 	get hideCheckAll() {
 		return !!this._hideCheckAll;
 	}
@@ -1038,7 +1048,7 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 			inputBox: !this._hideInput,
 			progressBar: !this._hideInput || hasDescription,
 			visibleCount: true,
-			count: this.canSelectMany,
+			count: this.canSelectMany && !this._hideCountBadge,
 			ok: this.ok === 'default' ? this.canSelectMany : this.ok,
 			list: true,
 			message: !!this.validationMessage,
@@ -1315,8 +1325,8 @@ export class QuickInputController extends Disposable {
 		const rightActionBar = this._register(new ActionBar(titleBar));
 		rightActionBar.domNode.classList.add('quick-input-right-action-bar');
 
-		const description1 = dom.append(container, $('.quick-input-description'));
 		const headerContainer = dom.append(container, $('.quick-input-header'));
+		const description1 = dom.append(container, $('.quick-input-description'));
 
 		const checkAll = <HTMLInputElement>dom.append(headerContainer, $('input.quick-input-check-all'));
 		checkAll.type = 'checkbox';

src/vs/platform/quickinput/common/quickInput.ts

@@ -351,6 +351,8 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {
 
 	validationMessage: string | undefined;
 
+	severity: Severity;
+
 	inputHasFocus(): boolean;
 
 	focusOnInput(): void;
@@ -362,6 +364,11 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {
 	 */
 	hideInput: boolean;
 
+	/**
+	 * Allows to control if the count for the items should be shown
+	 */
+	hideCountBadge: boolean;
+
 	hideCheckAll: boolean;
 
 	/**

src/vs/workbench/contrib/userDataProfile/browser/userDataProfile.ts

@@ -30,6 +30,7 @@ import { IProductService } from 'vs/platform/product/common/productService';
 import { IRequestService, asJson } from 'vs/platform/request/common/request';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { ILogService } from 'vs/platform/log/common/log';
+import Severity from 'vs/base/common/severity';
 
 const CREATE_EMPTY_PROFILE_ACTION_ID = 'workbench.profiles.actions.createEmptyProfile';
 const CREATE_EMPTY_PROFILE_ACTION_TITLE = {
@@ -500,14 +501,19 @@ export class UserDataProfilesWorkbenchContribution extends Disposable implements
 
 		const quickPick = this.quickInputService.createQuickPick();
 		quickPick.title = title;
-		quickPick.hideInput = true;
+		quickPick.placeholder = localize('name placeholder', "Name the new profile");
 		quickPick.canSelectMany = true;
+		quickPick.matchOnDescription = false;
+		quickPick.matchOnDetail = false;
+		quickPick.matchOnLabel = false;
+		quickPick.sortByLabel = false;
+		quickPick.hideCountBadge = true;
 		quickPick.ok = false;
 		quickPick.customButton = true;
 		quickPick.hideCheckAll = true;
 		quickPick.ignoreFocusOut = true;
 		quickPick.customLabel = localize('create', "Create Profile");
-		quickPick.description = localize('customise the profile', "Choose what you want to configure in the profile. Unselected items are shared from the default profile.");
+		quickPick.description = localize('customise the profile', "Choose what to configure in the profile. Unselected items are shared from the default profile.");
 		quickPick.items = resources;
 		quickPick.selectedItems = resources.filter(item => item.picked);
 
@@ -518,12 +524,29 @@ export class UserDataProfilesWorkbenchContribution extends Disposable implements
 			}
 		}));
 
-		let result: ReadonlyArray<IQuickPickItem> | undefined;
+		disposables.add(quickPick.onDidChangeValue(value => {
+			if (this.userDataProfilesService.profiles.some(p => p.name === value)) {
+				quickPick.validationMessage = localize('profileExists', "Profile with name {0} already exists.", value);
+				quickPick.severity = Severity.Error;
+			} else {
+				quickPick.severity = Severity.Ignore;
+				quickPick.validationMessage = undefined;
+			}
+		}));
+
+		let result: { name: string; items: ReadonlyArray<IQuickPickItem> } | undefined;
 		disposables.add(quickPick.onDidCustom(async () => {
+			if (!quickPick.value) {
+				quickPick.validationMessage = localize('name required', "Provide a name for the new profile");
+				quickPick.severity = Severity.Error;
+				return;
+			}
 			if (resources.some(resource => quickPick.selectedItems.includes(resource))) {
-				result = quickPick.selectedItems;
+				result = { name: quickPick.value, items: quickPick.selectedItems };
 				quickPick.hide();
 			}
+			quickPick.severity = Severity.Ignore;
+			quickPick.validationMessage = undefined;
 		}));
 		quickPick.show();
 
@@ -538,18 +561,14 @@ export class UserDataProfilesWorkbenchContribution extends Disposable implements
 			return;
 		}
 
-		const name = await this.getNameForProfile(title);
-		if (!name) {
-			return;
-		}
-
+		const { name, items } = result;
 		try {
-			const useDefaultFlags: UseDefaultProfileFlags | undefined = result.length !== resources.length ? {
-				settings: !result.includes(settings),
-				keybindings: !result.includes(keybindings),
-				snippets: !result.includes(snippets),
-				tasks: !result.includes(tasks),
-				extensions: !result.includes(extensions)
+			const useDefaultFlags: UseDefaultProfileFlags | undefined = items.length !== resources.length ? {
+				settings: !items.includes(settings),
+				keybindings: !items.includes(keybindings),
+				snippets: !items.includes(snippets),
+				tasks: !items.includes(tasks),
+				extensions: !items.includes(extensions)
 			} : undefined;
 			await this.userDataProfileManagementService.createAndEnterProfile(name, { useDefaultFlags });
 		} catch (error) {