Add ability to handle enter key propagation for input model components (#7524)

* Add ability to stop enter key propagation for input model components

* Fix spacing

* onInputEntered -> onEnterKeyPressed

extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts

@@ -130,7 +130,18 @@ export class ManageAccessDialog {
 				rootContainer.addItem(typeContainer, { flex: '0 0 auto' });
 				const addUserOrGroupInputRow = modelView.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
 
-				this.addUserOrGroupInput = modelView.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ inputType: 'text', placeHolder: enterNamePlaceholder, width: 250 }).component();
+				this.addUserOrGroupInput = modelView.modelBuilder.inputBox()
+					.withProperties<azdata.InputBoxProperties>(
+						{
+							inputType: 'text',
+							placeHolder: enterNamePlaceholder,
+							width: 250,
+							stopEnterPropagation: true
+						}).component();
+				this.addUserOrGroupInput.onEnterKeyPressed((value: string) => {
+					this.hdfsModel.createAndAddAclEntry(value, this.addUserOrGroupSelectedType);
+					this.addUserOrGroupInput.value = '';
+				});
 				const addUserOrGroupButton = modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: addLabel, width: 75 }).component();
 				addUserOrGroupButton.onDidClick(() => {
 					this.hdfsModel.createAndAddAclEntry(this.addUserOrGroupInput.value, this.addUserOrGroupSelectedType);

src/sql/azdata.d.ts

@@ -2991,6 +2991,11 @@ declare module 'azdata' {
 		columns?: number;
 		min?: number;
 		max?: number;
+		/**
+		 * Whether to stop key event propagation when enter is pressed in the input box. Leaving this as false
+		 * means the event will propagate up to any parents that have handlers (such as validate on Dialogs)
+		 */
+		stopEnterPropagation?: boolean;
 	}
 
 	export interface TableColumn {
@@ -3235,6 +3240,10 @@ declare module 'azdata' {
 
 	export interface InputBoxComponent extends Component, InputBoxProperties {
 		onTextChanged: vscode.Event<any>;
+		/**
+		 * Event that's fired whenever enter is pressed within the input box
+		 */
+		onEnterKeyPressed: vscode.Event<string>;
 	}
 
 	export interface RadioButtonComponent extends Component, RadioButtonProperties {

src/sql/sqlops.proposed.d.ts

@@ -514,6 +514,11 @@ declare module 'sqlops' {
 		columns?: number;
 		min?: number;
 		max?: number;
+		/**
+		 * Whether to stop key event propagation when enter is pressed in the input box. Leaving this as false
+		 * means the event will propagate up to any parents that have handlers (such as validate on Dialogs)
+		 */
+		stopEnterPropagation?: boolean;
 	}
 
 	export interface TableColumn {
@@ -703,6 +708,10 @@ declare module 'sqlops' {
 
 	export interface InputBoxComponent extends Component, InputBoxProperties {
 		onTextChanged: vscode.Event<any>;
+		/**
+		 * Event that's fired whenever enter is pressed within the input box
+		 */
+		onEnterKeyPressed: vscode.Event<string>;
 	}
 
 	export interface RadioButtonComponent extends Component, RadioButtonProperties {

src/sql/workbench/api/common/extHostModelView.ts

@@ -769,6 +769,7 @@ class InputBoxWrapper extends ComponentWrapper implements azdata.InputBoxCompone
 		super(proxy, handle, ModelComponentTypes.InputBox, id);
 		this.properties = {};
 		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<any>());
+		this._emitterMap.set(ComponentEventType.onEnterKeyPressed, new Emitter<string>());
 	}
 
 	public get value(): string {
@@ -841,10 +842,22 @@ class InputBoxWrapper extends ComponentWrapper implements azdata.InputBoxCompone
 		this.setProperty('inputType', v);
 	}
 
+	public get stopEnterPropagation(): boolean {
+		return this.properties['stopEnterPropagation'];
+	}
+	public set stopEnterPropagation(v: boolean) {
+		this.setProperty('stopEnterPropagation', v);
+	}
+
 	public get onTextChanged(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
 		return emitter && emitter.event;
 	}
+
+	public get onEnterKeyPressed(): vscode.Event<string> {
+		const emitter = this._emitterMap.get(ComponentEventType.onEnterKeyPressed);
+		return emitter && emitter.event;
+	}
 }
 
 class CheckBoxWrapper extends ComponentWrapper implements azdata.CheckBoxComponent {

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -225,6 +225,7 @@ export enum ComponentEventType {
 	onSelectedRowChanged,
 	onComponentCreated,
 	onCellAction,
+	onEnterKeyPressed
 }
 
 export interface IComponentEventArgs {

src/sql/workbench/browser/modelComponents/inputbox.component.ts

@@ -72,6 +72,17 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		};
 		if (this._inputContainer) {
 			this._input = new InputBox(this._inputContainer.nativeElement, this.contextViewService, inputOptions);
+			this.onkeydown(this._input.inputElement, (e: StandardKeyboardEvent) => {
+				if (e.keyCode === KeyCode.Enter) {
+					this.fireEvent({
+						eventType: ComponentEventType.onEnterKeyPressed,
+						args: this._input.value
+					});
+					if (this.stopEnterPropagation) {
+						e.stopPropagation();
+					}
+				}
+			});
 			this.registerInput(this._input, () => !this.multiline);
 		}
 		if (this._textareaContainer) {
@@ -81,6 +92,15 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 				if (this.tryHandleKeyEvent(e)) {
 					e.stopPropagation();
 				}
+				if (e.keyCode === KeyCode.Enter) {
+					this.fireEvent({
+						eventType: ComponentEventType.onEnterKeyPressed,
+						args: this._textAreaInput.value
+					});
+					if (this.stopEnterPropagation) {
+						e.stopPropagation();
+					}
+				}
 				// Else assume that keybinding service handles routing this to a command
 			});
 
@@ -308,4 +328,12 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 	public set required(newValue: boolean) {
 		this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.required = value, newValue);
 	}
+
+	public get stopEnterPropagation(): boolean {
+		return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.stopEnterPropagation, false);
+	}
+
+	public set stopEnterPropagation(newValue: boolean) {
+		this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.stopEnterPropagation = value, newValue);
+	}
 }

src/sql/workbench/browser/modelComponents/interfaces.ts

@@ -69,6 +69,7 @@ export enum ComponentEventType {
 	onSelectedRowChanged,
 	onComponentCreated,
 	onCellAction,
+	onEnterKeyPressed
 }
 
 export interface IModelStore {