use the dialog's loading indicator (#22032)

* use the dialog's loading indicator

* more

* comments

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

@@ -11,7 +11,7 @@ import { AlterLoginDocUrl, AuthenticationType, CreateLoginDocUrl, NodeType, Publ
 import { getAuthenticationTypeByDisplayName, getAuthenticationTypeDisplayName, isValidSQLPassword } from '../utils';
 
 export class LoginDialog extends ObjectManagementDialogBase<ObjectManagement.Login, ObjectManagement.LoginViewInfo> {
-	private formContainer: azdata.DivContainer;
+
 	private generalSection: azdata.GroupContainer;
 	private sqlAuthSection: azdata.GroupContainer;
 	private serverRoleSection: azdata.GroupContainer;
@@ -95,43 +95,39 @@ export class LoginDialog extends ObjectManagementDialogBase<ObjectManagement.Log
 	}
 
 	protected async initializeUI(): Promise<void> {
-		this.dialogObject.registerContent(async view => {
+		const sections: azdata.Component[] = [];
-			const sections: azdata.Component[] = [];
+		this.initializeGeneralSection();
-			this.initializeGeneralSection(view);
+		sections.push(this.generalSection);
-			sections.push(this.generalSection);
 
-			if (this.isNewObject || this.objectInfo.authenticationType === 'Sql') {
+		if (this.isNewObject || this.objectInfo.authenticationType === 'Sql') {
-				this.initializeSqlAuthSection(view);
+			this.initializeSqlAuthSection();
-				sections.push(this.sqlAuthSection);
+			sections.push(this.sqlAuthSection);
-			}
+		}
 
-			this.initializeServerRolesSection(view);
+		this.initializeServerRolesSection();
-			sections.push(this.serverRoleSection);
+		sections.push(this.serverRoleSection);
 
-			if (this.viewInfo.supportAdvancedOptions) {
+		if (this.viewInfo.supportAdvancedOptions) {
-				this.initializeAdvancedSection(view);
+			this.initializeAdvancedSection();
-				sections.push(this.advancedSection);
+			sections.push(this.advancedSection);
-			}
+		}
-
+		this.formContainer.addItems(sections);
-			this.formContainer = this.createFormContainer(view, sections);
-			return view.initializeModel(this.formContainer)
-		});
 	}
 
-	private initializeGeneralSection(view: azdata.ModelView): void {
+	private initializeGeneralSection(): void {
-		this.nameInput = view.modelBuilder.inputBox().withProps({
+		this.nameInput = this.modelView.modelBuilder.inputBox().withProps({
 			ariaLabel: localizedConstants.NameText,
 			enabled: this.isNewObject,
 			value: this.objectInfo.name,
 			width: DefaultInputWidth
 		}).component();
-		this.nameInput.onTextChanged(async () => {
+		this.disposables.push(this.nameInput.onTextChanged(async () => {
 			this.objectInfo.name = this.nameInput.value;
 			this.onObjectValueChange();
 			await this.runValidation(false);
-		});
+		}));
 
-		const nameContainer = this.createLabelInputContainer(view, localizedConstants.NameText, this.nameInput);
+		const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput);
 		const authTypes = [];
 		if (this.viewInfo.supportWindowsAuthentication) {
 			authTypes.push(localizedConstants.WindowsAuthenticationTypeDisplayText);
@@ -142,50 +138,50 @@ export class LoginDialog extends ObjectManagementDialogBase<ObjectManagement.Log
 		if (this.viewInfo.supportAADAuthentication) {
 			authTypes.push(localizedConstants.AADAuthenticationTypeDisplayText);
 		}
-		this.authTypeDropdown = view.modelBuilder.dropDown().withProps({
+		this.authTypeDropdown = this.modelView.modelBuilder.dropDown().withProps({
 			ariaLabel: localizedConstants.AuthTypeText,
 			values: authTypes,
 			value: getAuthenticationTypeDisplayName(this.objectInfo.authenticationType),
 			width: DefaultInputWidth,
 			enabled: this.isNewObject
 		}).component();
-		this.authTypeDropdown.onValueChanged(async () => {
+		this.disposables.push(this.authTypeDropdown.onValueChanged(async () => {
 			this.objectInfo.authenticationType = getAuthenticationTypeByDisplayName(<string>this.authTypeDropdown.value);
 			this.setViewByAuthenticationType();
 			this.onObjectValueChange();
 			await this.runValidation(false);
-		});
+		}));
-		const authTypeContainer = this.createLabelInputContainer(view, localizedConstants.AuthTypeText, this.authTypeDropdown);
+		const authTypeContainer = this.createLabelInputContainer(localizedConstants.AuthTypeText, this.authTypeDropdown);
 
-		this.enabledCheckbox = this.createCheckbox(view, localizedConstants.EnabledText, this.objectInfo.isEnabled);
+		this.enabledCheckbox = this.createCheckbox(localizedConstants.EnabledText, this.objectInfo.isEnabled);
-		this.enabledCheckbox.onChanged(() => {
+		this.disposables.push(this.enabledCheckbox.onChanged(() => {
 			this.objectInfo.isEnabled = this.enabledCheckbox.checked;
 			this.onObjectValueChange();
-		});
+		}));
-		this.generalSection = this.createGroup(view, localizedConstants.GeneralSectionHeader, [nameContainer, authTypeContainer, this.enabledCheckbox], false);
+		this.generalSection = this.createGroup(localizedConstants.GeneralSectionHeader, [nameContainer, authTypeContainer, this.enabledCheckbox], false);
 	}
 
-	private initializeSqlAuthSection(view: azdata.ModelView): void {
+	private initializeSqlAuthSection(): void {
 		const items: azdata.Component[] = [];
-		this.passwordInput = this.createPasswordInputBox(view, localizedConstants.PasswordText, this.objectInfo.password ?? '');
+		this.passwordInput = this.createPasswordInputBox(localizedConstants.PasswordText, this.objectInfo.password ?? '');
-		const passwordRow = this.createLabelInputContainer(view, localizedConstants.PasswordText, this.passwordInput);
+		const passwordRow = this.createLabelInputContainer(localizedConstants.PasswordText, this.passwordInput);
-		this.confirmPasswordInput = this.createPasswordInputBox(view, localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? '');
+		this.confirmPasswordInput = this.createPasswordInputBox(localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? '');
-		this.passwordInput.onTextChanged(async () => {
+		this.disposables.push(this.passwordInput.onTextChanged(async () => {
 			this.objectInfo.password = this.passwordInput.value;
 			this.onObjectValueChange();
 			await this.runValidation(false);
-		});
+		}));
-		this.confirmPasswordInput.onTextChanged(async () => {
+		this.disposables.push(this.confirmPasswordInput.onTextChanged(async () => {
 			await this.runValidation(false);
-		});
+		}));
-		const confirmPasswordRow = this.createLabelInputContainer(view, localizedConstants.ConfirmPasswordText, this.confirmPasswordInput);
+		const confirmPasswordRow = this.createLabelInputContainer(localizedConstants.ConfirmPasswordText, this.confirmPasswordInput);
 		items.push(passwordRow, confirmPasswordRow);
 
 		if (!this.isNewObject) {
-			this.specifyOldPasswordCheckbox = this.createCheckbox(view, localizedConstants.SpecifyOldPasswordText);
+			this.specifyOldPasswordCheckbox = this.createCheckbox(localizedConstants.SpecifyOldPasswordText);
-			this.oldPasswordInput = this.createPasswordInputBox(view, localizedConstants.OldPasswordText, '', false);
+			this.oldPasswordInput = this.createPasswordInputBox(localizedConstants.OldPasswordText, '', false);
-			const oldPasswordRow = this.createLabelInputContainer(view, localizedConstants.OldPasswordText, this.oldPasswordInput);
+			const oldPasswordRow = this.createLabelInputContainer(localizedConstants.OldPasswordText, this.oldPasswordInput);
-			this.specifyOldPasswordCheckbox.onChanged(async () => {
+			this.disposables.push(this.specifyOldPasswordCheckbox.onChanged(async () => {
 				this.oldPasswordInput.enabled = this.specifyOldPasswordCheckbox.checked;
 				this.objectInfo.oldPassword = '';
 				if (!this.specifyOldPasswordCheckbox.checked) {
@@ -193,20 +189,20 @@ export class LoginDialog extends ObjectManagementDialogBase<ObjectManagement.Log
 				}
 				this.onObjectValueChange();
 				await this.runValidation(false);
-			});
+			}));
-			this.oldPasswordInput.onTextChanged(async () => {
+			this.disposables.push(this.oldPasswordInput.onTextChanged(async () => {
 				this.objectInfo.oldPassword = this.oldPasswordInput.value;
 				this.onObjectValueChange();
 				await this.runValidation(false);
-			});
+			}));
 			items.push(this.specifyOldPasswordCheckbox, oldPasswordRow);
 		}
 
 		if (this.viewInfo.supportAdvancedPasswordOptions) {
-			this.enforcePasswordPolicyCheckbox = this.createCheckbox(view, localizedConstants.EnforcePasswordPolicyText, this.objectInfo.enforcePasswordPolicy);
+			this.enforcePasswordPolicyCheckbox = this.createCheckbox(localizedConstants.EnforcePasswordPolicyText, this.objectInfo.enforcePasswordPolicy);
-			this.enforcePasswordExpirationCheckbox = this.createCheckbox(view, localizedConstants.EnforcePasswordExpirationText, this.objectInfo.enforcePasswordPolicy);
+			this.enforcePasswordExpirationCheckbox = this.createCheckbox(localizedConstants.EnforcePasswordExpirationText, this.objectInfo.enforcePasswordPolicy);
-			this.mustChangePasswordCheckbox = this.createCheckbox(view, localizedConstants.MustChangePasswordText, this.objectInfo.mustChangePassword);
+			this.mustChangePasswordCheckbox = this.createCheckbox(localizedConstants.MustChangePasswordText, this.objectInfo.mustChangePassword);
-			this.enforcePasswordPolicyCheckbox.onChanged(async () => {
+			this.disposables.push(this.enforcePasswordPolicyCheckbox.onChanged(async () => {
 				const enforcePolicy = this.enforcePasswordPolicyCheckbox.checked;
 				this.objectInfo.enforcePasswordPolicy = enforcePolicy;
 				this.enforcePasswordExpirationCheckbox.enabled = enforcePolicy;
@@ -215,78 +211,78 @@ export class LoginDialog extends ObjectManagementDialogBase<ObjectManagement.Log
 				this.mustChangePasswordCheckbox.checked = enforcePolicy;
 				this.onObjectValueChange();
 				await this.runValidation(false);
-			});
+			}));
-			this.enforcePasswordExpirationCheckbox.onChanged(() => {
+			this.disposables.push(this.enforcePasswordExpirationCheckbox.onChanged(() => {
 				const enforceExpiration = this.enforcePasswordExpirationCheckbox.checked;
 				this.objectInfo.enforcePasswordExpiration = enforceExpiration;
 				this.mustChangePasswordCheckbox.enabled = enforceExpiration;
 				this.mustChangePasswordCheckbox.checked = enforceExpiration;
 				this.onObjectValueChange();
-			});
+			}));
-			this.mustChangePasswordCheckbox.onChanged(() => {
+			this.disposables.push(this.mustChangePasswordCheckbox.onChanged(() => {
 				this.objectInfo.mustChangePassword = this.mustChangePasswordCheckbox.checked;
 				this.onObjectValueChange();
-			});
+			}));
 			items.push(this.enforcePasswordPolicyCheckbox, this.enforcePasswordExpirationCheckbox, this.mustChangePasswordCheckbox);
 			if (!this.isNewObject) {
-				this.lockedOutCheckbox = this.createCheckbox(view, localizedConstants.LoginLockedOutText, this.objectInfo.isLockedOut, this.viewInfo.canEditLockedOutState);
+				this.lockedOutCheckbox = this.createCheckbox(localizedConstants.LoginLockedOutText, this.objectInfo.isLockedOut, this.viewInfo.canEditLockedOutState);
 				items.push(this.lockedOutCheckbox);
-				this.lockedOutCheckbox.onChanged(() => {
+				this.disposables.push(this.lockedOutCheckbox.onChanged(() => {
 					this.objectInfo.isLockedOut = this.lockedOutCheckbox.checked;
 					this.onObjectValueChange();
-				});
+				}));
 			}
 		}
 
-		this.sqlAuthSection = this.createGroup(view, localizedConstants.SQLAuthenticationSectionHeader, items);
+		this.sqlAuthSection = this.createGroup(localizedConstants.SQLAuthenticationSectionHeader, items);
 	}
 
-	private initializeAdvancedSection(view: azdata.ModelView): void {
+	private initializeAdvancedSection(): void {
 		const items: azdata.Component[] = [];
 		if (this.viewInfo.supportAdvancedOptions) {
-			this.defaultDatabaseDropdown = view.modelBuilder.dropDown().withProps({
+			this.defaultDatabaseDropdown = this.modelView.modelBuilder.dropDown().withProps({
 				ariaLabel: localizedConstants.DefaultDatabaseText,
 				values: this.viewInfo.databases,
 				value: this.objectInfo.defaultDatabase,
 				width: DefaultInputWidth
 			}).component();
-			const defaultDatabaseContainer = this.createLabelInputContainer(view, localizedConstants.DefaultDatabaseText, this.defaultDatabaseDropdown);
+			const defaultDatabaseContainer = this.createLabelInputContainer(localizedConstants.DefaultDatabaseText, this.defaultDatabaseDropdown);
-			this.defaultDatabaseDropdown.onValueChanged(() => {
+			this.disposables.push(this.defaultDatabaseDropdown.onValueChanged(() => {
 				this.objectInfo.defaultDatabase = <string>this.defaultDatabaseDropdown.value;
 				this.onObjectValueChange();
-			});
+			}));
 
-			this.defaultLanguageDropdown = view.modelBuilder.dropDown().withProps({
+			this.defaultLanguageDropdown = this.modelView.modelBuilder.dropDown().withProps({
 				ariaLabel: localizedConstants.DefaultLanguageText,
 				values: this.viewInfo.languages,
 				value: this.objectInfo.defaultLanguage,
 				width: DefaultInputWidth
 			}).component();
-			const defaultLanguageContainer = this.createLabelInputContainer(view, localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown);
+			const defaultLanguageContainer = this.createLabelInputContainer(localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown);
-			this.defaultLanguageDropdown.onValueChanged(() => {
+			this.disposables.push(this.defaultLanguageDropdown.onValueChanged(() => {
 				this.objectInfo.defaultLanguage = <string>this.defaultLanguageDropdown.value;
 				this.onObjectValueChange();
-			});
+			}));
 
-			this.connectPermissionCheckbox = this.createCheckbox(view, localizedConstants.PermissionToConnectText, this.objectInfo.connectPermission);
+			this.connectPermissionCheckbox = this.createCheckbox(localizedConstants.PermissionToConnectText, this.objectInfo.connectPermission);
-			this.connectPermissionCheckbox.onChanged(() => {
+			this.disposables.push(this.connectPermissionCheckbox.onChanged(() => {
 				this.objectInfo.connectPermission = this.connectPermissionCheckbox.checked;
 				this.onObjectValueChange();
-			});
+			}));
 			items.push(defaultDatabaseContainer, defaultLanguageContainer, this.connectPermissionCheckbox);
 		}
 
-		this.advancedSection = this.createGroup(view, localizedConstants.AdvancedSectionHeader, items);
+		this.advancedSection = this.createGroup(localizedConstants.AdvancedSectionHeader, items);
 	}
 
-	private initializeServerRolesSection(view: azdata.ModelView): void {
+	private initializeServerRolesSection(): void {
 		const serverRolesData = this.viewInfo.serverRoles.map(name => {
 			const isRoleSelected = this.objectInfo.serverRoles.indexOf(name) !== -1;
 			const isRoleSelectionEnabled = name !== PublicServerRoleName;
 			return [{ enabled: isRoleSelectionEnabled, checked: isRoleSelected }, name];
 		});
-		this.serverRoleTable = this.createTableList(view, localizedConstants.ServerRoleSectionHeader, this.viewInfo.serverRoles, this.objectInfo.serverRoles, serverRolesData);
+		this.serverRoleTable = this.createTableList(localizedConstants.ServerRoleSectionHeader, this.viewInfo.serverRoles, this.objectInfo.serverRoles, serverRolesData);
-		this.serverRoleSection = this.createGroup(view, localizedConstants.ServerRoleSectionHeader, [this.serverRoleTable]);
+		this.serverRoleSection = this.createGroup(localizedConstants.ServerRoleSectionHeader, [this.serverRoleTable]);
 	}
 
 	private setViewByAuthenticationType(): void {

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

@@ -43,6 +43,10 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 	protected readonly contextId: string;
 	private _viewInfo: ViewInfoType;
 	private _originalObjectInfo: ObjectInfoType;
+	private _modelView: azdata.ModelView;
+	private _loadingComponent: azdata.LoadingComponent;
+	private _formContainer: azdata.DivContainer;
+	private _helpButton: azdata.window.Button;
 
 	constructor(private readonly objectType: NodeType,
 		docUrl: string,
@@ -57,11 +61,13 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 		this.dialogObject = azdata.window.createModelViewDialog(dialogTitle, getDialogName(objectType, isNewObject), dialogWidth);
 		this.dialogObject.okButton.label = OkText;
 		this.disposables.push(this.dialogObject.onClosed(async () => { await this.dispose(); }));
-		const helpButton = azdata.window.createButton(HelpText, 'left');
+		this._helpButton = azdata.window.createButton(HelpText, 'left');
-		this.disposables.push(helpButton.onClick(async () => {
+		this.disposables.push(this._helpButton.onClick(async () => {
 			await vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(docUrl));
 		}));
-		this.dialogObject.customButtons = [helpButton];
+		this.dialogObject.customButtons = [this._helpButton];
+		this.dialogObject.okButton.hidden = true;
+		this._helpButton.hidden = true;
 		this.contextId = generateUuid();
 		this.dialogObject.registerCloseValidator(async (): Promise<boolean> => {
 			const confirmed = await this.onConfirmation();
@@ -98,56 +104,76 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 		return this._originalObjectInfo;
 	}
 
-	public async open(): Promise<void> {
+	protected get formContainer(): azdata.DivContainer {
-		await vscode.window.withProgress({
+		return this._formContainer;
-			location: vscode.ProgressLocation.Notification,
+	}
-			title: LoadingDialogText
-		}, async () => {
-			try {
-				this._viewInfo = await this.initializeData();
-				this._originalObjectInfo = deepClone(this.objectInfo);
-				await this.initializeUI();
-				const typeDisplayName = getNodeTypeDisplayName(this.objectType);
-				this.dialogObject.registerOperation({
-					displayName: this.isNewObject ? CreateObjectOperationDisplayName(typeDisplayName)
-						: UpdateObjectOperationDisplayName(typeDisplayName, this.objectName),
-					description: '',
-					isCancelable: false,
-					operation: async (operation: azdata.BackgroundOperation): Promise<void> => {
-						const actionName = this.isNewObject ? TelemetryActions.CreateObject : TelemetryActions.UpdateObject;
-						try {
-							if (JSON.stringify(this.objectInfo) !== JSON.stringify(this._originalObjectInfo)) {
-								const startTime = Date.now();
-								await this.onComplete();
-								if (this.isNewObject && this.objectExplorerContext) {
-									await refreshNode(this.objectExplorerContext);
-								}
 
-								TelemetryReporter.sendTelemetryEvent(actionName, {
+	protected get modelView(): azdata.ModelView {
-									objectType: this.objectType
+		return this._modelView;
-								}, {
+	}
-									ellapsedTime: Date.now() - startTime
+
-								});
+	public async open(): Promise<void> {
-								operation.updateStatus(azdata.TaskStatus.Succeeded);
+		try {
+			await this.dialogObject.registerContent(async view => {
+				this._modelView = view;
+				this._formContainer = this.createFormContainer([]);
+				this._loadingComponent = view.modelBuilder.loadingComponent().withItem(this._formContainer).withProps({
+					loading: true,
+					loadingText: LoadingDialogText,
+					showText: true,
+					CSSStyles: {
+						width: "100%",
+						height: "100%"
+					}
+				}).component();
+				return view.initializeModel(this._loadingComponent);
+			});
+			azdata.window.openDialog(this.dialogObject);
+			this._viewInfo = await this.initializeData();
+			await this.initializeUI();
+			this._originalObjectInfo = deepClone(this.objectInfo);
+			const typeDisplayName = getNodeTypeDisplayName(this.objectType);
+			this.dialogObject.registerOperation({
+				displayName: this.isNewObject ? CreateObjectOperationDisplayName(typeDisplayName)
+					: UpdateObjectOperationDisplayName(typeDisplayName, this.objectName),
+				description: '',
+				isCancelable: false,
+				operation: async (operation: azdata.BackgroundOperation): Promise<void> => {
+					const actionName = this.isNewObject ? TelemetryActions.CreateObject : TelemetryActions.UpdateObject;
+					try {
+						if (JSON.stringify(this.objectInfo) !== JSON.stringify(this._originalObjectInfo)) {
+							const startTime = Date.now();
+							await this.onComplete();
+							if (this.isNewObject && this.objectExplorerContext) {
+								await refreshNode(this.objectExplorerContext);
 							}
-						}
+
-						catch (err) {
+							TelemetryReporter.sendTelemetryEvent(actionName, {
-							operation.updateStatus(azdata.TaskStatus.Failed, getErrorMessage(err));
-							TelemetryReporter.createErrorEvent(TelemetryViews.ObjectManagement, actionName).withAdditionalProperties({
 								objectType: this.objectType
-							}).send();
+							}, {
+								ellapsedTime: Date.now() - startTime
+							});
+							operation.updateStatus(azdata.TaskStatus.Succeeded);
 						}
 					}
-				});
+					catch (err) {
-				azdata.window.openDialog(this.dialogObject);
+						operation.updateStatus(azdata.TaskStatus.Failed, getErrorMessage(err));
-			} catch (err) {
+						TelemetryReporter.createErrorEvent(TelemetryViews.ObjectManagement, actionName).withAdditionalProperties({
-				const actionName = this.isNewObject ? TelemetryActions.OpenNewObjectDialog : TelemetryActions.OpenPropertiesDialog;
+							objectType: this.objectType
-				TelemetryReporter.createErrorEvent(TelemetryViews.ObjectManagement, actionName).withAdditionalProperties({
+						}).send();
-					objectType: this.objectType
+					}
-				}).send();
+				}
-				void vscode.window.showErrorMessage(getErrorMessage(err));
+			});
-			}
+			this.dialogObject.okButton.hidden = false;
-		});
+			this._helpButton.hidden = false;
+			this._loadingComponent.loading = false;
+		} catch (err) {
+			const actionName = this.isNewObject ? TelemetryActions.OpenNewObjectDialog : TelemetryActions.OpenPropertiesDialog;
+			TelemetryReporter.createErrorEvent(TelemetryViews.ObjectManagement, actionName).withAdditionalProperties({
+				objectType: this.objectType
+			}).send();
+			void vscode.window.showErrorMessage(getErrorMessage(err));
+		}
 	}
 
 	private async dispose(): Promise<void> {
@@ -168,43 +194,43 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 		return errors.length === 0;
 	}
 
-	protected createLabelInputContainer(view: azdata.ModelView, label: string, input: azdata.InputBoxComponent | azdata.DropDownComponent): azdata.FlexContainer {
+	protected createLabelInputContainer(label: string, input: azdata.InputBoxComponent | azdata.DropDownComponent): azdata.FlexContainer {
-		const labelComponent = view.modelBuilder.text().withProps({ width: DefaultLabelWidth, value: label, requiredIndicator: input.required }).component();
+		const labelComponent = this.modelView.modelBuilder.text().withProps({ width: DefaultLabelWidth, value: label, requiredIndicator: input.required }).component();
-		const row = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'horizontal', flexWrap: 'nowrap', alignItems: 'center' }).withItems([labelComponent, input]).component();
+		const row = this.modelView.modelBuilder.flexContainer().withLayout({ flexFlow: 'horizontal', flexWrap: 'nowrap', alignItems: 'center' }).withItems([labelComponent, input]).component();
 		return row;
 	}
 
-	protected createCheckbox(view: azdata.ModelView, label: string, checked: boolean = false, enabled: boolean = true): azdata.CheckBoxComponent {
+	protected createCheckbox(label: string, checked: boolean = false, enabled: boolean = true): azdata.CheckBoxComponent {
-		return view.modelBuilder.checkBox().withProps({
+		return this.modelView.modelBuilder.checkBox().withProps({
 			label: label,
 			checked: checked,
 			enabled: enabled
 		}).component();
 	}
 
-	protected createPasswordInputBox(view: azdata.ModelView, ariaLabel: string, value: string = '', enabled: boolean = true, width: number = DefaultInputWidth): azdata.InputBoxComponent {
+	protected createPasswordInputBox(ariaLabel: string, value: string = '', enabled: boolean = true, width: number = DefaultInputWidth): azdata.InputBoxComponent {
-		return this.createInputBox(view, ariaLabel, value, enabled, 'password', width);
+		return this.createInputBox(ariaLabel, value, enabled, 'password', width);
 	}
 
-	protected createInputBox(view: azdata.ModelView, ariaLabel: string, value: string = '', enabled: boolean = true, type: azdata.InputBoxInputType = 'text', width: number = DefaultInputWidth): azdata.InputBoxComponent {
+	protected createInputBox(ariaLabel: string, value: string = '', enabled: boolean = true, type: azdata.InputBoxInputType = 'text', width: number = DefaultInputWidth): azdata.InputBoxComponent {
-		return view.modelBuilder.inputBox().withProps({ inputType: type, enabled: enabled, ariaLabel: ariaLabel, value: value, width: width }).component();
+		return this.modelView.modelBuilder.inputBox().withProps({ inputType: type, enabled: enabled, ariaLabel: ariaLabel, value: value, width: width }).component();
 	}
 
-	protected createGroup(view: azdata.ModelView, header: string, items: azdata.Component[], collapsible: boolean = true, collapsed: boolean = false): azdata.GroupContainer {
+	protected createGroup(header: string, items: azdata.Component[], collapsible: boolean = true, collapsed: boolean = false): azdata.GroupContainer {
-		return view.modelBuilder.groupContainer().withLayout({
+		return this.modelView.modelBuilder.groupContainer().withLayout({
 			header: header,
 			collapsed: false,
 			collapsible: collapsible
 		}).withProps({ collapsed: collapsed }).withItems(items).component();
 	}
 
-	protected createFormContainer(view: azdata.ModelView, items: azdata.Component[]): azdata.DivContainer {
+	protected createFormContainer(items: azdata.Component[]): azdata.DivContainer {
-		return view.modelBuilder.divContainer().withLayout({ width: 'calc(100% - 20px)', height: 'calc(100% - 20px)' }).withProps({
+		return this.modelView.modelBuilder.divContainer().withLayout({ width: 'calc(100% - 20px)', height: 'calc(100% - 20px)' }).withProps({
 			CSSStyles: { 'padding': '10px' }
 		}).withItems(items, { CSSStyles: { 'margin-block-end': '10px' } }).component();
 	}
 
-	protected createTableList(view: azdata.ModelView, ariaLabel: string, listValues: string[], selectedValues: string[], data?: any[][]): azdata.TableComponent {
+	protected createTableList(ariaLabel: string, listValues: string[], selectedValues: string[], data?: any[][]): azdata.TableComponent {
 		let tableData = data;
 		if (tableData === undefined) {
 			tableData = listValues.map(name => {
@@ -212,7 +238,7 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 				return [isSelected, name];
 			});
 		}
-		const table = view.modelBuilder.table().withProps(
+		const table = this.modelView.modelBuilder.table().withProps(
 			{
 				ariaLabel: ariaLabel,
 				data: tableData,
@@ -229,7 +255,7 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 				height: getTableHeight(tableData.length)
 			}
 		).component();
-		table.onCellAction((arg: azdata.ICheckboxCellActionEventArgs) => {
+		this.disposables.push(table.onCellAction((arg: azdata.ICheckboxCellActionEventArgs) => {
 			const name = listValues[arg.row];
 			const idx = selectedValues.indexOf(name);
 			if (arg.checked && idx === -1) {
@@ -238,7 +264,7 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
 				selectedValues.splice(idx, 1)
 			}
 			this.onObjectValueChange();
-		});
+		}));
 		return table;
 	}
 

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

@@ -10,7 +10,6 @@ import { AlterUserDocUrl, AuthenticationType, CreateUserDocUrl, NodeType, UserTy
 import { getAuthenticationTypeByDisplayName, getAuthenticationTypeDisplayName, getUserTypeByDisplayName, getUserTypeDisplayName, isValidSQLPassword } from '../utils';
 
 export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User, ObjectManagement.UserViewInfo> {
-	private formContainer: azdata.DivContainer;
 	private generalSection: azdata.GroupContainer;
 	private ownedSchemaSection: azdata.GroupContainer;
 	private membershipSection: azdata.GroupContainer;
@@ -75,74 +74,69 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 	}
 
 	protected async initializeUI(): Promise<void> {
-		this.dialogObject.registerContent(async view => {
+		this.initializeGeneralSection();
-			const sections: azdata.Component[] = [];
+		this.initializeOwnedSchemaSection();
-			this.initializeGeneralSection(view);
+		this.initializeMembershipSection();
-			this.initializeOwnedSchemaSection(view);
+		this.initializeAdvancedSection();
-			this.initializeMembershipSection(view);
+		this.formContainer.addItems([this.generalSection, this.ownedSchemaSection, this.membershipSection, this.advancedSection]);
-			this.initializeAdvancedSection(view);
+		setTimeout(() => {
-			sections.push(this.generalSection, this.ownedSchemaSection, this.membershipSection, this.advancedSection);
+			this.setViewByUserType();
-			this.formContainer = this.createFormContainer(view, sections);
+		}, 100);
-			setTimeout(() => {
-				this.setViewByUserType();
-			}, 100);
-			return view.initializeModel(this.formContainer)
-		});
 	}
 
-	private initializeGeneralSection(view: azdata.ModelView): void {
+	private initializeGeneralSection(): void {
-		this.nameInput = view.modelBuilder.inputBox().withProps({
+		this.nameInput = this.modelView.modelBuilder.inputBox().withProps({
 			ariaLabel: localizedConstants.NameText,
 			enabled: this.isNewObject,
 			value: this.objectInfo.name,
 			width: DefaultInputWidth
 		}).component();
-		this.nameInput.onTextChanged(async () => {
+		this.disposables.push(this.nameInput.onTextChanged(async () => {
 			this.objectInfo.name = this.nameInput.value;
 			this.onObjectValueChange();
 			await this.runValidation(false);
-		});
+		}));
-		const nameContainer = this.createLabelInputContainer(view, localizedConstants.NameText, this.nameInput);
+		const nameContainer = this.createLabelInputContainer(localizedConstants.NameText, this.nameInput);
 
-		this.defaultSchemaDropdown = view.modelBuilder.dropDown().withProps({
+		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(view, localizedConstants.DefaultSchemaText, this.defaultSchemaDropdown);
+		this.defaultSchemaContainer = this.createLabelInputContainer(localizedConstants.DefaultSchemaText, this.defaultSchemaDropdown);
-		this.defaultSchemaDropdown.onValueChanged(() => {
+		this.disposables.push(this.defaultSchemaDropdown.onValueChanged(() => {
 			this.objectInfo.defaultSchema = <string>this.defaultSchemaDropdown.value;
 			this.onObjectValueChange();
-		});
+		}));
 
-		this.typeDropdown = view.modelBuilder.dropDown().withProps({
+		this.typeDropdown = this.modelView.modelBuilder.dropDown().withProps({
 			ariaLabel: localizedConstants.UserTypeText,
 			values: [localizedConstants.UserWithLoginText, localizedConstants.UserWithWindowsGroupLoginText, localizedConstants.ContainedUserText, localizedConstants.UserWithNoConnectAccess],
 			value: getUserTypeDisplayName(this.objectInfo.type),
 			width: DefaultInputWidth,
 			enabled: this.isNewObject
 		}).component();
-		this.typeDropdown.onValueChanged(async () => {
+		this.disposables.push(this.typeDropdown.onValueChanged(async () => {
 			this.objectInfo.type = getUserTypeByDisplayName(<string>this.typeDropdown.value);
 			this.onObjectValueChange();
 			this.setViewByUserType();
 			await this.runValidation(false);
-		});
+		}));
-		this.typeContainer = this.createLabelInputContainer(view, localizedConstants.UserTypeText, this.typeDropdown);
+		this.typeContainer = this.createLabelInputContainer(localizedConstants.UserTypeText, this.typeDropdown);
 
-		this.loginDropdown = view.modelBuilder.dropDown().withProps({
+		this.loginDropdown = this.modelView.modelBuilder.dropDown().withProps({
 			ariaLabel: localizedConstants.LoginText,
 			values: this.viewInfo.logins,
 			value: this.objectInfo.loginName,
 			width: DefaultInputWidth,
 			enabled: this.isNewObject
 		}).component();
-		this.loginDropdown.onValueChanged(() => {
+		this.disposables.push(this.loginDropdown.onValueChanged(() => {
 			this.objectInfo.loginName = <string>this.loginDropdown.value;
 			this.onObjectValueChange();
-		});
+		}));
-		this.loginContainer = this.createLabelInputContainer(view, localizedConstants.LoginText, this.loginDropdown);
+		this.loginContainer = this.createLabelInputContainer(localizedConstants.LoginText, this.loginDropdown);
 
 		const authTypes = [];
 		if (this.viewInfo.supportWindowsAuthentication) {
@@ -154,35 +148,35 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 		if (this.viewInfo.supportAADAuthentication) {
 			authTypes.push(localizedConstants.AADAuthenticationTypeDisplayText);
 		}
-		this.authTypeDropdown = view.modelBuilder.dropDown().withProps({
+		this.authTypeDropdown = this.modelView.modelBuilder.dropDown().withProps({
 			ariaLabel: localizedConstants.AuthTypeText,
 			values: authTypes,
 			value: getAuthenticationTypeDisplayName(this.objectInfo.authenticationType),
 			width: DefaultInputWidth,
 			enabled: this.isNewObject
 		}).component();
-		this.authTypeContainer = this.createLabelInputContainer(view, localizedConstants.AuthTypeText, this.authTypeDropdown);
+		this.authTypeContainer = this.createLabelInputContainer(localizedConstants.AuthTypeText, this.authTypeDropdown);
-		this.authTypeDropdown.onValueChanged(async () => {
+		this.disposables.push(this.authTypeDropdown.onValueChanged(async () => {
 			this.objectInfo.authenticationType = getAuthenticationTypeByDisplayName(<string>this.authTypeDropdown.value);
 			this.onObjectValueChange();
 			this.setViewByAuthenticationType();
 			await this.runValidation(false);
-		});
+		}));
 
-		this.passwordInput = this.createPasswordInputBox(view, localizedConstants.PasswordText, this.objectInfo.password ?? '');
+		this.passwordInput = this.createPasswordInputBox(localizedConstants.PasswordText, this.objectInfo.password ?? '');
-		this.passwordContainer = this.createLabelInputContainer(view, localizedConstants.PasswordText, this.passwordInput);
+		this.passwordContainer = this.createLabelInputContainer(localizedConstants.PasswordText, this.passwordInput);
-		this.confirmPasswordInput = this.createPasswordInputBox(view, localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? '');
+		this.confirmPasswordInput = this.createPasswordInputBox(localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? '');
-		this.confirmPasswordContainer = this.createLabelInputContainer(view, localizedConstants.ConfirmPasswordText, this.confirmPasswordInput);
+		this.confirmPasswordContainer = this.createLabelInputContainer(localizedConstants.ConfirmPasswordText, this.confirmPasswordInput);
-		this.passwordInput.onTextChanged(async () => {
+		this.disposables.push(this.passwordInput.onTextChanged(async () => {
 			this.objectInfo.password = this.passwordInput.value;
 			this.onObjectValueChange();
 			await this.runValidation(false);
-		});
+		}));
-		this.confirmPasswordInput.onTextChanged(async () => {
+		this.disposables.push(this.confirmPasswordInput.onTextChanged(async () => {
 			await this.runValidation(false);
-		});
+		}));
 
-		this.generalSection = this.createGroup(view, localizedConstants.GeneralSectionHeader, [
+		this.generalSection = this.createGroup(localizedConstants.GeneralSectionHeader, [
 			nameContainer,
 			this.defaultSchemaContainer,
 			this.typeContainer,
@@ -193,29 +187,29 @@ export class UserDialog extends ObjectManagementDialogBase<ObjectManagement.User
 		], false);
 	}
 
-	private initializeOwnedSchemaSection(view: azdata.ModelView): void {
+	private initializeOwnedSchemaSection(): void {
-		this.ownedSchemaTable = this.createTableList(view, localizedConstants.OwnedSchemaSectionHeader, this.viewInfo.schemas, this.objectInfo.ownedSchemas);
+		this.ownedSchemaTable = this.createTableList(localizedConstants.OwnedSchemaSectionHeader, this.viewInfo.schemas, this.objectInfo.ownedSchemas);
-		this.ownedSchemaSection = this.createGroup(view, localizedConstants.OwnedSchemaSectionHeader, [this.ownedSchemaTable]);
+		this.ownedSchemaSection = this.createGroup(localizedConstants.OwnedSchemaSectionHeader, [this.ownedSchemaTable]);
 	}
 
-	private initializeMembershipSection(view: azdata.ModelView): void {
+	private initializeMembershipSection(): void {
-		this.membershipTable = this.createTableList(view, localizedConstants.MembershipSectionHeader, this.viewInfo.databaseRoles, this.objectInfo.databaseRoles);
+		this.membershipTable = this.createTableList(localizedConstants.MembershipSectionHeader, this.viewInfo.databaseRoles, this.objectInfo.databaseRoles);
-		this.membershipSection = this.createGroup(view, localizedConstants.MembershipSectionHeader, [this.membershipTable]);
+		this.membershipSection = this.createGroup(localizedConstants.MembershipSectionHeader, [this.membershipTable]);
 	}
 
-	private initializeAdvancedSection(view: azdata.ModelView): void {
+	private initializeAdvancedSection(): void {
-		this.defaultLanguageDropdown = view.modelBuilder.dropDown().withProps({
+		this.defaultLanguageDropdown = this.modelView.modelBuilder.dropDown().withProps({
 			ariaLabel: localizedConstants.DefaultLanguageText,
 			values: this.viewInfo.languages,
 			value: this.objectInfo.defaultLanguage,
 			width: DefaultInputWidth
 		}).component();
-		this.defaultLanguageDropdown.onValueChanged(() => {
+		this.disposables.push(this.defaultLanguageDropdown.onValueChanged(() => {
 			this.objectInfo.defaultLanguage = <string>this.defaultLanguageDropdown.value;
 			this.onObjectValueChange();
-		});
+		}));
-		const container = this.createLabelInputContainer(view, localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown);
+		const container = this.createLabelInputContainer(localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown);
-		this.advancedSection = this.createGroup(view, localizedConstants.AdvancedSectionHeader, [container]);
+		this.advancedSection = this.createGroup(localizedConstants.AdvancedSectionHeader, [container]);
 	}
 
 	private setViewByUserType(): void {