From 7a1e0a7d2e2f863a5ede28e773c633d2c3a94d2b Mon Sep 17 00:00:00 2001
From: Charles Gagnon <chgagnon@microsoft.com>
Date: Fri, 18 Sep 2020 11:22:23 -0700
Subject: [PATCH] Fix resource deployment text field validation (#12421)
 (#12457)

---
 .../src/ui/modelViewUtils.ts                  | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts
index 885a31b26e..c43eebcf24 100644
--- a/extensions/resource-deployment/src/ui/modelViewUtils.ts
+++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts
@@ -117,7 +117,16 @@ interface ContextBase {
 	onNewInputComponentCreated: (name: string, inputComponentInfo: InputComponentInfo) => void;
 }
 
-export function createTextInput(view: azdata.ModelView, inputInfo: { defaultValue?: string, ariaLabel: string, required?: boolean, placeHolder?: string, width?: string, enabled?: boolean }): azdata.InputBoxComponent {
+export function createTextInput(view: azdata.ModelView, inputInfo: {
+	defaultValue?: string,
+	ariaLabel: string,
+	required?: boolean,
+	placeHolder?: string,
+	width?: string,
+	enabled?: boolean,
+	validationRegex?: RegExp,
+	validationErrorMessage?: string
+}): azdata.InputBoxComponent {
 	return view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
 		value: inputInfo.defaultValue,
 		ariaLabel: inputInfo.ariaLabel,
@@ -125,7 +134,13 @@ export function createTextInput(view: azdata.ModelView, inputInfo: { defaultValu
 		required: inputInfo.required,
 		placeHolder: inputInfo.placeHolder,
 		width: inputInfo.width,
-		enabled: inputInfo.enabled
+		enabled: inputInfo.enabled,
+		validationErrorMessage: inputInfo.validationErrorMessage
+	}).withValidation(component => {
+		if (inputInfo.validationRegex?.test(component.value || '') === false) {
+			return false;
+		}
+		return true;
 	}).component();
 }
 
@@ -525,6 +540,7 @@ function processNumberField(context: FieldContext): void {
 }
 
 function processTextField(context: FieldContext): void {
+	let validationRegex: RegExp | undefined = context.fieldInfo.textValidationRequired ? new RegExp(context.fieldInfo.textValidationRegex!) : undefined;
 	const label = createLabel(context.view, { text: context.fieldInfo.label, description: context.fieldInfo.description, required: context.fieldInfo.required, width: context.fieldInfo.labelWidth, cssStyles: context.fieldInfo.labelCSSStyles });
 	const input = createTextInput(context.view, {
 		defaultValue: context.fieldInfo.defaultValue,
@@ -532,16 +548,16 @@ function processTextField(context: FieldContext): void {
 		required: context.fieldInfo.required,
 		placeHolder: context.fieldInfo.placeHolder,
 		width: context.fieldInfo.inputWidth,
-		enabled: context.fieldInfo.enabled
+		enabled: context.fieldInfo.enabled,
+		validationRegex: validationRegex,
+		validationErrorMessage: context.fieldInfo.textValidationDescription
 	});
 	context.onNewInputComponentCreated(context.fieldInfo.variableName!, { component: input });
 	addLabelInputPairToContainer(context.view, context.components, label, input, context.fieldInfo);
 
 	if (context.fieldInfo.textValidationRequired) {
-		let validationRegex: RegExp = new RegExp(context.fieldInfo.textValidationRegex!);
-
 		const removeInvalidInputMessage = (): void => {
-			if (validationRegex.test(input.value!)) { // input is valid
+			if (validationRegex!.test(input.value!)) { // input is valid
 				removeValidationMessage(context.container, context.fieldInfo.textValidationDescription!);
 			}
 		};
@@ -551,7 +567,7 @@ function processTextField(context: FieldContext): void {
 		}));
 
 		const inputValidator: Validator = (): { valid: boolean; message: string; } => {
-			const inputIsValid = validationRegex.test(input.value!);
+			const inputIsValid = validationRegex!.test(input.value!);
 			return { valid: inputIsValid, message: context.fieldInfo.textValidationDescription! };
 		};
 		context.onNewValidatorCreated(inputValidator);