Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add basic validation to database names #23842

Merged
merged 11 commits into from
Jul 14, 2023
13 changes: 10 additions & 3 deletions extensions/mssql/src/objectManagement/ui/databaseDialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should also be marked as required so it displays in the UI (* next to the label)


if (this.viewInfo.loginNames?.length > 0) {
Expand Down
18 changes: 18 additions & 0 deletions extensions/mssql/src/ui/dialogBase.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down