Add basic validation to database names (#23842)

Co-authored-by: Cory Rivera <corivera@microsoft.com> Co-authored-by: Cory Rivera <corivera@microsoft.com>
microsoft · Jul 14, 2023 · 6e84766 · 6e84766
1 parent 6e29e50
commit 6e84766
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts
@@ -137,10 +137,17 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
 	//#region Create Database
 	private initializeGeneralSection(): azdata.GroupContainer {
 		let containers: azdata.Component[] = [];
-		this.nameInput = this.createInputBox(localizedConstants.NameText, async () => {
+		// The max length for database names is 128 characters: https://learn.microsoft.com/sql/t-sql/functions/db-name-transact-sql
+		const maxLengthDatabaseName: number = 128;
+		const props: azdata.InputBoxProperties = {
+			ariaLabel: localizedConstants.NameText,
+			required: true,
+			maxLength: maxLengthDatabaseName
+		};
+
+		this.nameInput = this.createInputBoxWithProperties(async () => {
 			this.objectInfo.name = this.nameInput.value;
-			await this.runValidation(false);
-		});
+		}, props);
 		containers.push(this.createLabelInputContainer(localizedConstants.NameText, this.nameInput));
 
 		if (this.viewInfo.loginNames?.length > 0) {

diff --git a/extensions/mssql/src/ui/dialogBase.ts b/extensions/mssql/src/ui/dialogBase.ts
@@ -147,6 +147,24 @@ export abstract class DialogBase<DialogResult> {
 		return this.createInputBox(ariaLabel, textChangeHandler, value, enabled, 'password', width);
 	}
 
+	protected createInputBoxWithProperties(textChangeHandler: (newValue: string) => Promise<void>, properties: azdata.InputBoxProperties, customValidation?: () => Promise<boolean>): azdata.InputBoxComponent {
+		properties.width = properties.width ?? DefaultInputWidth;
+		properties.inputType = properties.inputType ?? 'text';
+		properties.value = properties.value ?? '';
+		properties.enabled = properties.enabled ?? true;
+		const inputbox = this.modelView.modelBuilder.inputBox().withProps(properties);
+		if (customValidation) {
+			inputbox.withValidation(customValidation);
+		}
+		const inputBoxComponent = inputbox.component();
+		this.disposables.push(inputBoxComponent.onTextChanged(async () => {
+			await textChangeHandler(inputBoxComponent.value!);
+			this.onFormFieldChange();
+			await this.runValidation(false);
+		}));
+		return inputBoxComponent;
+	}
+
 	protected createInputBox(ariaLabel: string, textChangeHandler: (newValue: string) => Promise<void>, value: string = '', enabled: boolean = true, type: azdata.InputBoxInputType = 'text', width: number = DefaultInputWidth, required?: boolean, min?: number, max?: number): azdata.InputBoxComponent {
 		const inputbox = this.modelView.modelBuilder.inputBox().withProps({ inputType: type, enabled: enabled, ariaLabel: ariaLabel, value: value, width: width, required: required, min: min, max: max }).component();
 		this.disposables.push(inputbox.onTextChanged(async () => {