refactor(prompt): improve input types, unify 'list' -> 'select'

Author: damyanpetev

packages/core/prompt/BasePromptSession.ts

@@ -38,12 +38,11 @@ export abstract class BasePromptSession {
 				name: "projectName",
 				message: "Enter a name for your project:",
 				default: Util.getAvailableName(defaultProjName, true),
-				choices: null,
 				validate: this.nameIsValid
 			});
 
 			const frameRes: string = await this.getUserInput({
-				type: "list",
+				type: "select",
 				name: "framework",
 				message: "Choose framework:",
 				choices: this.getFrameworkNames(),
@@ -114,9 +113,12 @@ export abstract class BasePromptSession {
 	 * @param options to use for the user input
 	 * @param withBackChoice Add a "Back" option to choices list
 	 */
-	protected async getUserInput(options: IUserInputOptions, withBackChoice: boolean = false): Promise<string> {
+	protected async getUserInput(
+		options: Exclude<UserInputOptions, { type: "checkbox" }>,
+		withBackChoice: boolean = false,
+	): Promise<string> {
 
-		if (options.choices) {
+		if ("choices" in options) {
 			if (options.choices.length < 2) {
 				// single choice to return:
 				let choice = options.choices[0];
@@ -130,8 +132,8 @@ export abstract class BasePromptSession {
 			options.choices = this.addSeparators(options.choices);
 		}
 
-		let result: string = null;
-		if (options.type === "list") {
+		let result = "";
+		if (options.type === "select") {
 			result = await InquirerWrapper.select(options);
 		} else {
 			result = await InquirerWrapper.input(options);
@@ -210,7 +212,7 @@ export abstract class BasePromptSession {
 		const projectLibraries = this.getProjectLibNames(framework);
 
 		const projectRes = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "projectType",
 			message: "Choose the type of project:",
 			choices: projectLibraries
@@ -225,7 +227,7 @@ export abstract class BasePromptSession {
 	protected async getProjectTemplate(projectLibrary: ProjectLibrary): Promise<ProjectTemplate> {
 		const visibleProjects = projectLibrary.projects.filter(p => !p.isHidden);
 		const componentNameRes = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "projTemplate",
 			message: "Choose project template:",
 			choices: Util.formatChoices(visibleProjects)
@@ -239,7 +241,7 @@ export abstract class BasePromptSession {
 	 */
 	protected async getTheme(projectLibrary: ProjectLibrary): Promise<string> {
 		const theme = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "theme",
 			message: "Choose the theme for the project:",
 			choices: projectLibrary.themes,
@@ -263,7 +265,6 @@ export abstract class BasePromptSession {
 			name: `${type === "component" ? type : "customView"}Name`,
 			message: `Name your ${type}:`,
 			default: availableDefaultName,
-			choices: null,
 			validate: (input: string) => {
 				// TODO: GA post?
 				const name = Util.nameFromPath(input);
@@ -326,27 +327,26 @@ export abstract class BasePromptSession {
 	 * Generate questions from extra configuration array
 	 * @param extraConfig
 	 */
-	private createQuestions(extraConfig: ControlExtraConfiguration[]): { type: string; name: string; message: string; choices: any[]; default: any; }[] {
-		const result = [];
+	private createQuestions(extraConfig: ControlExtraConfiguration[]): UserInputOptions[] {
+		const result: UserInputOptions[] = [];
 		for (const element of extraConfig) {
-			const currExtraConfig = {};
+			const base = {
+				default: element.default,
+				message: element.message,
+				name: element.key,
+			};
 			switch (element.type) {
 				case ControlExtraConfigType.Choice:
-					currExtraConfig["type"] = "select"; // formerly list
+					result.push({ ...base, type: "select", choices: element.choices ?? [] });
 					break;
 				case ControlExtraConfigType.MultiChoice:
-					currExtraConfig["type"] = "checkbox";
+					result.push({ ...base, type: "checkbox", choices: element.choices ?? [] });
 					break;
 				case ControlExtraConfigType.Value:
 				default:
-					currExtraConfig["type"] = "input";
+					result.push({ ...base, type: "input" });
 					break;
 			}
-			currExtraConfig["default"] = element.default;
-			currExtraConfig["message"] = element.message;
-			currExtraConfig["name"] = element.key;
-			currExtraConfig["choices"] = element.choices;
-			result.push(currExtraConfig);
 		}
 		return result;
 	}
@@ -365,7 +365,7 @@ export abstract class BasePromptSession {
 	private chooseActionTask: Task<PromptTaskContext> = async (runner, context) => {
 		Util.log(""); /* new line */
 		const action: string = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "action",
 			message: "Choose an action:",
 			choices: this.generateActionChoices(context.projectLibrary),
@@ -409,7 +409,7 @@ export abstract class BasePromptSession {
 				Util.log("The project will be created using a Trial version of Ignite UI for Angular.");
 				Util.log("You can always run the upgrade-packages command once it's created.");
 				const shouldUpgrade = await this.getUserInput({
-					type: "list",
+					type: "select",
 					name: "shouldUpgrade",
 					message: "Would you like to upgrade to the licensed feed now?",
 					choices: [
@@ -430,7 +430,6 @@ export abstract class BasePromptSession {
 				name: "port",
 				message: "Choose app host port:",
 				default: defaultPort,
-				choices: null,
 				validate: (input: string) => {
 					if (!Number(input)) {
 						Util.log(""); /* new line */
@@ -456,7 +455,7 @@ export abstract class BasePromptSession {
 	private getComponentGroupTask: Task<PromptTaskContext> = async (_runner, context) => {
 		const groups = context.projectLibrary.getComponentGroupNames();
 		const groupRes: string = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "componentGroup",
 			message: "Choose a group:",
 			choices: Util.formatChoices(context.projectLibrary.getComponentGroups()),
@@ -477,7 +476,7 @@ export abstract class BasePromptSession {
 	 */
 	private getComponentTask: Task<PromptTaskContext> = async (_runner, context) => {
 		const componentNameRes = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "component",
 			message: "Choose a component:",
 			choices: Util.formatChoices(context.projectLibrary.getComponentsByGroup(context.group))
@@ -500,7 +499,7 @@ export abstract class BasePromptSession {
 		const templates: Template[] = context.component.templates;
 
 		const templateRes = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "template",
 			message: "Choose one:",
 			choices: Util.formatChoices(templates)
@@ -531,7 +530,7 @@ export abstract class BasePromptSession {
 		const customTemplates: Template[] = context.projectLibrary.getCustomTemplates();
 
 		const customTemplateNameRes = await this.getUserInput({
-			type: "list",
+			type: "select",
 			name: "customTemplate",
 			message: "Choose custom view:",
 			choices: Util.formatChoices(customTemplates)
@@ -551,7 +550,7 @@ export abstract class BasePromptSession {
 		return false;
 	}
 
-	private logAutoSelected(options: IUserInputOptions, choice: any) {
+	private logAutoSelected(options: UserInputOptions, choice: any) {
 		let text;
 		switch (options.name) {
 			case "framework":
@@ -626,16 +625,28 @@ export abstract class BasePromptSession {
 	}
 }
 
-/** Options for User Input */
-export interface IUserInputOptions {
-	type: string;
+type InputOptions = {
+	type: "input";
 	name: string;
 	message: string;
-	choices: any[];
 	default?: any;
 	validate?: (input: string) => string | boolean;
 }
 
+type SelectOptions = Omit<InputOptions, "type"> & {
+	type: "select";
+	// TODO: Expand type:
+	choices: any[];
+}
+
+type CheckboxOptions = Omit<SelectOptions, "type"> & {
+	type: "checkbox";
+	required?: boolean;
+}
+
+/** Options for User Input */
+export type UserInputOptions = InputOptions | SelectOptions | CheckboxOptions;
+
 /** Context type for prompt tasks */
 export interface PromptTaskContext {
 	projectLibrary: ProjectLibrary;

packages/core/prompt/InquirerWrapper.ts

@@ -3,23 +3,22 @@ import { Context } from '@inquirer/type';
 
 // ref - node_modules\@inquirer\input\dist\cjs\types\index.d.ts - bc for some reason this is not publicly exported
 type InputConfig = {
-    message: string;
-    default?: string;
-    required?: boolean;
+	message: string;
+	default?: string;
+	required?: boolean;
 	type?: string;
 	name?: string;
-	choices?: (string | Separator)[] | ({ value: string; name?: string; checked?: boolean } | Separator)[];
-    transformer?: (value: string, { isFinal }: {
-        isFinal: boolean;
-    }) => string;
+	transformer?: (value: string, { isFinal }: {
+		isFinal: boolean;
+	}) => string;
 
 	// TODO: consider typing these by extracting the types from the inquirer package
-    validate?: any;
-    theme?: any;
+	validate?: any;
+	theme?: any;
 };
 
-type InputChoicesConfig = InputConfig & {
-    choices: (string | Separator)[] | ({ value: string; name?: string; checked?: boolean } | Separator)[];
+type InputChoicesConfig = Omit<InputConfig, "transformer"> & {
+	choices: (string | Separator)[] | ({ value: string; name?: string; checked?: boolean } | Separator)[];
 };
 
 export class InquirerWrapper {

packages/core/types/ControlExtraConfiguration.ts

@@ -6,7 +6,7 @@ import { ControlExtraConfigType } from "./enumerations/ControlExtraConfigType";
  */
 export interface ControlExtraConfiguration {
 	/** Prompt session works with choices except value - where the user should enter value */
-	choices: string[];
+	choices?: string[];
 
 	/** default value used when the user is prompted to choose or enter */
 	default: any;

packages/ng-schematics/src/prompt/SchematicsPromptSession.ts

@@ -2,7 +2,7 @@ import { SchematicContext, Tree } from "@angular-devkit/schematics";
 import { IgniteUIForAngularTemplate } from "@igniteui/angular-templates";
 import {
 	BasePromptSession, BaseTemplateManager, Framework,
-	IUserInputOptions, ProjectConfig, ProjectLibrary, ProjectTemplate, PromptTaskContext, Task
+	type UserInputOptions, ProjectConfig, ProjectLibrary, ProjectTemplate, PromptTaskContext, Task
 } from "@igniteui/cli-core";
 import { of } from "rxjs";
 import { TemplateOptions } from "../component/schema";
@@ -27,7 +27,10 @@ export class SchematicsPromptSession extends BasePromptSession {
 		this.userAnswers = new Map<string, any>();
 	}
 
-	public async getUserInput(options: IUserInputOptions, withBackChoice: boolean = false): Promise<string> {
+	public async getUserInput(
+		options: Exclude<UserInputOptions, { type: "checkbox" }>,
+		withBackChoice: boolean = false,
+	): Promise<string> {
 		return super.getUserInput(options, withBackChoice);
 	}
 

spec/unit/PromptSession-spec.ts

@@ -405,13 +405,11 @@ describe("Unit - PromptSession", () => {
 	});
 	it("chooseActionLoop - should run through properly - Add Component", async () => {
 		const mockExtraConfigurations = [{
-			choices: [],
 			default: "Choice 1",
 			message: "Please enter a value",
 			key: "customValue1",
 			type: ControlExtraConfigType.Value
 		}, {
-			choices: [],
 			default: "Choice 1",
 			message: "Please enter a value",
 			key: "customValue2",
@@ -514,14 +512,12 @@ describe("Unit - PromptSession", () => {
 			default: "Choice 1",
 			message: "Please enter a value",
 			name: "customValue1",
-			choices: []
 		});
 		expect(InquirerWrapper.input).toHaveBeenCalledWith({
 			type: "input",
 			default: "Choice 1",
 			message: "Please enter a value",
 			name: "customValue2",
-			choices: []
 		});
 	});
 	it("chooseActionLoop - should run through properly - Add scenario", async () => {