diff --git a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts index 820163854e58..3ae1da4c7fb9 100644 --- a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts +++ b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts @@ -114,10 +114,17 @@ export class DatabaseDialog extends ObjectManagementDialogBase { + // 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 index d556a3965538..e062d45f6a8b 100644 --- a/extensions/mssql/src/ui/dialogBase.ts +++ b/extensions/mssql/src/ui/dialogBase.ts @@ -147,6 +147,24 @@ export abstract class DialogBase { return this.createInputBox(ariaLabel, textChangeHandler, value, enabled, 'password', width); } + protected createInputBoxWithProperties(textChangeHandler: (newValue: string) => Promise, properties: azdata.InputBoxProperties, customValidation?: () => Promise): 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, value: string = '', enabled: boolean = true, type: azdata.InputBoxInputType = 'text', width: number = DefaultInputWidth, min?: number, max?: number): azdata.InputBoxComponent { const inputbox = this.modelView.modelBuilder.inputBox().withProps({ inputType: type, enabled: enabled, ariaLabel: ariaLabel, value: value, width: width, min: min, max: max }).component(); this.disposables.push(inputbox.onTextChanged(async () => {