allow nothing is selected as initial state (#22260)

extensions/mssql/src/objectManagement/localizedConstants.ts

@@ -99,6 +99,7 @@ export const NameCannotBeEmptyError = localize('objectManagement.nameCannotBeEmp
 export const PasswordCannotBeEmptyError = localize('objectManagement.passwordCannotBeEmptyError', "Password cannot be empty.");
 export const PasswordsNotMatchError = localize('objectManagement.passwordsNotMatchError', "Password must match the confirm password.");
 export const InvalidPasswordError = localize('objectManagement.invalidPasswordError', "Password doesn't meet the complexity requirement. For more information: https://docs.microsoft.com/sql/relational-databases/security/password-policy");
+export const LoginNotSelectedError = localize('objectManagement.loginNotSelectedError', "Login is not selected.");
 
 // Login
 export const BlankPasswordConfirmationText: string = localize('objectManagement.blankPasswordConfirmation', "Creating a login with a blank password is a security risk.  Are you sure you want to continue?");

extensions/mssql/src/objectManagement/ui/loginDialog.ts

@@ -138,13 +138,7 @@ export class LoginDialog extends ObjectManagementDialogBase<ObjectManagement.Log
 		if (this.viewInfo.supportAADAuthentication) {
 			authTypes.push(localizedConstants.AADAuthenticationTypeDisplayText);
 		}
-		this.authTypeDropdown = this.modelView.modelBuilder.dropDown().withProps({
+		this.authTypeDropdown = this.createDropdown(localizedConstants.AuthTypeText, authTypes, getAuthenticationTypeDisplayName(this.objectInfo.authenticationType), this.isNewObject);
-			ariaLabel: localizedConstants.AuthTypeText,
-			values: authTypes,
-			value: getAuthenticationTypeDisplayName(this.objectInfo.authenticationType),
-			width: DefaultInputWidth,
-			enabled: this.isNewObject
-		}).component();
 		this.disposables.push(this.authTypeDropdown.onValueChanged(async () => {
 			this.objectInfo.authenticationType = getAuthenticationTypeByDisplayName(<string>this.authTypeDropdown.value);
 			this.setViewByAuthenticationType();
@@ -240,24 +234,14 @@ export class LoginDialog extends ObjectManagementDialogBase<ObjectManagement.Log
 	private initializeAdvancedSection(): void {
 		const items: azdata.Component[] = [];
 		if (this.viewInfo.supportAdvancedOptions) {
-			this.defaultDatabaseDropdown = this.modelView.modelBuilder.dropDown().withProps({
+			this.defaultDatabaseDropdown = this.createDropdown(localizedConstants.DefaultDatabaseText, this.viewInfo.databases, this.objectInfo.defaultDatabase);
-				ariaLabel: localizedConstants.DefaultDatabaseText,
-				values: this.viewInfo.databases,
-				value: this.objectInfo.defaultDatabase,
-				width: DefaultInputWidth
-			}).component();
 			const defaultDatabaseContainer = this.createLabelInputContainer(localizedConstants.DefaultDatabaseText, this.defaultDatabaseDropdown);
 			this.disposables.push(this.defaultDatabaseDropdown.onValueChanged(() => {
 				this.objectInfo.defaultDatabase = <string>this.defaultDatabaseDropdown.value;
 				this.onObjectValueChange();
 			}));
 
-			this.defaultLanguageDropdown = this.modelView.modelBuilder.dropDown().withProps({
+			this.defaultLanguageDropdown = this.createDropdown(localizedConstants.DefaultLanguageText, this.viewInfo.languages, this.objectInfo.defaultLanguage);
-				ariaLabel: localizedConstants.DefaultLanguageText,
-				values: this.viewInfo.languages,
-				value: this.objectInfo.defaultLanguage,
-				width: DefaultInputWidth
-			}).component();
 			const defaultLanguageContainer = this.createLabelInputContainer(localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown);
 			this.disposables.push(this.defaultLanguageDropdown.onValueChanged(() => {
 				this.objectInfo.defaultLanguage = <string>this.defaultLanguageDropdown.value;

extensions/mssql/src/objectManagement/ui/objectManagementDialogBase.ts

@@ -282,6 +282,21 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 		return table;
 	}
 
+	protected createDropdown(ariaLabel: string, values: string[], value: string, enabled: boolean = true, width: number = DefaultInputWidth): azdata.DropDownComponent {
+		// Automatically add an empty item to the beginning of the list if the current value is not specified.
+		// This is needed when no meaningful default value can be provided.
+		if (!value) {
+			values.unshift('');
+		}
+		return this.modelView.modelBuilder.dropDown().withProps({
+			ariaLabel: ariaLabel,
+			values: values,
+			value: value,
+			width: DefaultInputWidth,
+			enabled: enabled
+		}).component();
+	}
+
 	protected removeItem(container: azdata.DivContainer | azdata.FlexContainer, item: azdata.Component): void {
 		if (container.items.indexOf(item) !== -1) {
 			container.removeItem(item);

extensions/mssql/src/objectManagement/ui/userDialog.ts

@@ -57,6 +57,10 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 				&& (this.isNewObject || this.objectInfo.password !== this.originalObjectInfo.password)) {
 				errors.push(localizedConstants.InvalidPasswordError);
 			}
+		} else if (this.objectInfo.type === UserType.WithLogin) {
+			if (!this.objectInfo.loginName) {
+				errors.push(localizedConstants.LoginNotSelectedError);
+			}
 		}
 		return errors;
 	}
@@ -97,28 +101,17 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 			await this.runValidation(false);
 		}));
 		const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput);
-
+		this.defaultSchemaDropdown = this.createDropdown(localizedConstants.DefaultSchemaText, this.viewInfo.schemas, this.objectInfo.defaultSchema);
-		this.defaultSchemaDropdown = this.modelView.modelBuilder.dropDown().withProps({
-			ariaLabel: localizedConstants.DefaultSchemaText,
-			values: this.viewInfo.schemas,
-			value: this.objectInfo.defaultSchema,
-			width: DefaultInputWidth
-		}).component();
 		this.defaultSchemaContainer = this.createLabelInputContainer(localizedConstants.DefaultSchemaText, this.defaultSchemaDropdown);
 		this.disposables.push(this.defaultSchemaDropdown.onValueChanged(() => {
 			this.objectInfo.defaultSchema = <string>this.defaultSchemaDropdown.value;
 			this.onObjectValueChange();
 		}));
 
-		this.typeDropdown = this.modelView.modelBuilder.dropDown().withProps({
+		// only supporting user with login for initial preview
-			ariaLabel: localizedConstants.UserTypeText,
+		// const userTypes = [localizedConstants.UserWithLoginText, localizedConstants.UserWithWindowsGroupLoginText, localizedConstants.ContainedUserText, localizedConstants.UserWithNoConnectAccess],
-			// only supporting user with login for initial preview
+		const userTypes = [localizedConstants.UserWithLoginText];
-			//values: [localizedConstants.UserWithLoginText, localizedConstants.UserWithWindowsGroupLoginText, localizedConstants.ContainedUserText, localizedConstants.UserWithNoConnectAccess],
+		this.typeDropdown = this.createDropdown(localizedConstants.UserTypeText, userTypes, getUserTypeDisplayName(this.objectInfo.type), this.isNewObject);
-			values: [localizedConstants.UserWithLoginText],
-			value: getUserTypeDisplayName(this.objectInfo.type),
-			width: DefaultInputWidth,
-			enabled: this.isNewObject
-		}).component();
 		this.disposables.push(this.typeDropdown.onValueChanged(async () => {
 			this.objectInfo.type = getUserTypeByDisplayName(<string>this.typeDropdown.value);
 			this.onObjectValueChange();
@@ -126,17 +119,11 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 			await this.runValidation(false);
 		}));
 		this.typeContainer = this.createLabelInputContainer(localizedConstants.UserTypeText, this.typeDropdown);
-
+		this.loginDropdown = this.createDropdown(localizedConstants.LoginText, this.viewInfo.logins, this.objectInfo.loginName, this.isNewObject);
-		this.loginDropdown = this.modelView.modelBuilder.dropDown().withProps({
+		this.disposables.push(this.loginDropdown.onValueChanged(async () => {
-			ariaLabel: localizedConstants.LoginText,
-			values: this.viewInfo.logins,
-			value: this.objectInfo.loginName,
-			width: DefaultInputWidth,
-			enabled: this.isNewObject
-		}).component();
-		this.disposables.push(this.loginDropdown.onValueChanged(() => {
 			this.objectInfo.loginName = <string>this.loginDropdown.value;
 			this.onObjectValueChange();
+			await this.runValidation(false);
 		}));
 		this.loginContainer = this.createLabelInputContainer(localizedConstants.LoginText, this.loginDropdown);
 
@@ -150,13 +137,7 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 		if (this.viewInfo.supportAADAuthentication) {
 			authTypes.push(localizedConstants.AADAuthenticationTypeDisplayText);
 		}
-		this.authTypeDropdown = this.modelView.modelBuilder.dropDown().withProps({
+		this.authTypeDropdown = this.createDropdown(localizedConstants.AuthTypeText, authTypes, getAuthenticationTypeDisplayName(this.objectInfo.authenticationType), this.isNewObject);
-			ariaLabel: localizedConstants.AuthTypeText,
-			values: authTypes,
-			value: getAuthenticationTypeDisplayName(this.objectInfo.authenticationType),
-			width: DefaultInputWidth,
-			enabled: this.isNewObject
-		}).component();
 		this.authTypeContainer = this.createLabelInputContainer(localizedConstants.AuthTypeText, this.authTypeDropdown);
 		this.disposables.push(this.authTypeDropdown.onValueChanged(async () => {
 			this.objectInfo.authenticationType = getAuthenticationTypeByDisplayName(<string>this.authTypeDropdown.value);
@@ -204,12 +185,7 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 	}
 
 	private initializeAdvancedSection(): void {
-		this.defaultLanguageDropdown = this.modelView.modelBuilder.dropDown().withProps({
+		this.defaultLanguageDropdown = this.createDropdown(localizedConstants.DefaultLanguageText, this.viewInfo.languages, this.objectInfo.defaultLanguage);
-			ariaLabel: localizedConstants.DefaultLanguageText,
-			values: this.viewInfo.languages,
-			value: this.objectInfo.defaultLanguage,
-			width: DefaultInputWidth
-		}).component();
 		this.disposables.push(this.defaultLanguageDropdown.onValueChanged(() => {
 			this.objectInfo.defaultLanguage = <string>this.defaultLanguageDropdown.value;
 			this.onObjectValueChange();