From d48984fe13b457f5437e23a29c8892b55ea911e6 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Mon, 27 Feb 2023 13:13:16 -0800 Subject: [PATCH] use the dialog's loading indicator (#22032) * use the dialog's loading indicator * more * comments --- .../src/objectManagement/ui/loginDialog.ts | 150 ++++++++--------- .../ui/objectManagementDialogBase.ts | 156 ++++++++++-------- .../src/objectManagement/ui/userDialog.ts | 106 ++++++------ 3 files changed, 214 insertions(+), 198 deletions(-) diff --git a/extensions/mssql/src/objectManagement/ui/loginDialog.ts b/extensions/mssql/src/objectManagement/ui/loginDialog.ts index 84bb95db84..8e4cee0e7a 100644 --- a/extensions/mssql/src/objectManagement/ui/loginDialog.ts +++ b/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 { - 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 { - this.dialogObject.registerContent(async view => { - const sections: azdata.Component[] = []; - this.initializeGeneralSection(view); - sections.push(this.generalSection); + const sections: azdata.Component[] = []; + this.initializeGeneralSection(); + sections.push(this.generalSection); - if (this.isNewObject || this.objectInfo.authenticationType === 'Sql') { - this.initializeSqlAuthSection(view); - sections.push(this.sqlAuthSection); - } + if (this.isNewObject || this.objectInfo.authenticationType === 'Sql') { + this.initializeSqlAuthSection(); + sections.push(this.sqlAuthSection); + } - this.initializeServerRolesSection(view); - sections.push(this.serverRoleSection); + this.initializeServerRolesSection(); + sections.push(this.serverRoleSection); - if (this.viewInfo.supportAdvancedOptions) { - this.initializeAdvancedSection(view); - sections.push(this.advancedSection); - } - - this.formContainer = this.createFormContainer(view, sections); - return view.initializeModel(this.formContainer) - }); + if (this.viewInfo.supportAdvancedOptions) { + this.initializeAdvancedSection(); + sections.push(this.advancedSection); + } + this.formContainer.addItems(sections); } - private initializeGeneralSection(view: azdata.ModelView): void { - this.nameInput = view.modelBuilder.inputBox().withProps({ + private initializeGeneralSection(): void { + 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 { + this.disposables.push(this.authTypeDropdown.onValueChanged(async () => { this.objectInfo.authenticationType = getAuthenticationTypeByDisplayName(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.onChanged(() => { + this.enabledCheckbox = this.createCheckbox(localizedConstants.EnabledText, this.objectInfo.isEnabled); + 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 ?? ''); - const passwordRow = this.createLabelInputContainer(view, localizedConstants.PasswordText, this.passwordInput); - this.confirmPasswordInput = this.createPasswordInputBox(view, localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? ''); - this.passwordInput.onTextChanged(async () => { + this.passwordInput = this.createPasswordInputBox(localizedConstants.PasswordText, this.objectInfo.password ?? ''); + const passwordRow = this.createLabelInputContainer(localizedConstants.PasswordText, this.passwordInput); + this.confirmPasswordInput = this.createPasswordInputBox(localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? ''); + 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.oldPasswordInput = this.createPasswordInputBox(view, localizedConstants.OldPasswordText, '', false); - const oldPasswordRow = this.createLabelInputContainer(view, localizedConstants.OldPasswordText, this.oldPasswordInput); - this.specifyOldPasswordCheckbox.onChanged(async () => { + this.specifyOldPasswordCheckbox = this.createCheckbox(localizedConstants.SpecifyOldPasswordText); + this.oldPasswordInput = this.createPasswordInputBox(localizedConstants.OldPasswordText, '', false); + const oldPasswordRow = this.createLabelInputContainer(localizedConstants.OldPasswordText, this.oldPasswordInput); + 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 { + })); + 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.enforcePasswordExpirationCheckbox = this.createCheckbox(view, localizedConstants.EnforcePasswordExpirationText, this.objectInfo.enforcePasswordPolicy); - this.mustChangePasswordCheckbox = this.createCheckbox(view, localizedConstants.MustChangePasswordText, this.objectInfo.mustChangePassword); - this.enforcePasswordPolicyCheckbox.onChanged(async () => { + this.enforcePasswordPolicyCheckbox = this.createCheckbox(localizedConstants.EnforcePasswordPolicyText, this.objectInfo.enforcePasswordPolicy); + this.enforcePasswordExpirationCheckbox = this.createCheckbox(localizedConstants.EnforcePasswordExpirationText, this.objectInfo.enforcePasswordPolicy); + this.mustChangePasswordCheckbox = this.createCheckbox(localizedConstants.MustChangePasswordText, this.objectInfo.mustChangePassword); + 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 { + })); + 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); - this.defaultDatabaseDropdown.onValueChanged(() => { + const defaultDatabaseContainer = this.createLabelInputContainer(localizedConstants.DefaultDatabaseText, this.defaultDatabaseDropdown); + this.disposables.push(this.defaultDatabaseDropdown.onValueChanged(() => { this.objectInfo.defaultDatabase = 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); - this.defaultLanguageDropdown.onValueChanged(() => { + const defaultLanguageContainer = this.createLabelInputContainer(localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown); + this.disposables.push(this.defaultLanguageDropdown.onValueChanged(() => { this.objectInfo.defaultLanguage = this.defaultLanguageDropdown.value; this.onObjectValueChange(); - }); + })); - this.connectPermissionCheckbox = this.createCheckbox(view, localizedConstants.PermissionToConnectText, this.objectInfo.connectPermission); - this.connectPermissionCheckbox.onChanged(() => { + this.connectPermissionCheckbox = this.createCheckbox(localizedConstants.PermissionToConnectText, this.objectInfo.connectPermission); + 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.serverRoleSection = this.createGroup(view, localizedConstants.ServerRoleSectionHeader, [this.serverRoleTable]); + this.serverRoleTable = this.createTableList(localizedConstants.ServerRoleSectionHeader, this.viewInfo.serverRoles, this.objectInfo.serverRoles, serverRolesData); + this.serverRoleSection = this.createGroup(localizedConstants.ServerRoleSectionHeader, [this.serverRoleTable]); } private setViewByAuthenticationType(): void { diff --git a/extensions/mssql/src/objectManagement/ui/objectManagementDialogBase.ts b/extensions/mssql/src/objectManagement/ui/objectManagementDialogBase.ts index 3c0a90aaba..9024295407 100644 --- a/extensions/mssql/src/objectManagement/ui/objectManagementDialogBase.ts +++ b/extensions/mssql/src/objectManagement/ui/objectManagementDialogBase.ts @@ -43,6 +43,10 @@ export abstract class ObjectManagementDialogBase { await this.dispose(); })); - const helpButton = azdata.window.createButton(HelpText, 'left'); - this.disposables.push(helpButton.onClick(async () => { + this._helpButton = azdata.window.createButton(HelpText, 'left'); + 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 => { const confirmed = await this.onConfirmation(); @@ -98,56 +104,76 @@ export abstract class ObjectManagementDialogBase { - await vscode.window.withProgress({ - 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 => { - 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); - } + protected get formContainer(): azdata.DivContainer { + return this._formContainer; + } - TelemetryReporter.sendTelemetryEvent(actionName, { - objectType: this.objectType - }, { - ellapsedTime: Date.now() - startTime - }); - operation.updateStatus(azdata.TaskStatus.Succeeded); + protected get modelView(): azdata.ModelView { + return this._modelView; + } + + public async open(): Promise { + 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 => { + 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) { - operation.updateStatus(azdata.TaskStatus.Failed, getErrorMessage(err)); - TelemetryReporter.createErrorEvent(TelemetryViews.ObjectManagement, actionName).withAdditionalProperties({ + + TelemetryReporter.sendTelemetryEvent(actionName, { objectType: this.objectType - }).send(); + }, { + ellapsedTime: Date.now() - startTime + }); + operation.updateStatus(azdata.TaskStatus.Succeeded); } } - }); - azdata.window.openDialog(this.dialogObject); - } 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)); - } - }); + catch (err) { + operation.updateStatus(azdata.TaskStatus.Failed, getErrorMessage(err)); + TelemetryReporter.createErrorEvent(TelemetryViews.ObjectManagement, actionName).withAdditionalProperties({ + objectType: this.objectType + }).send(); + } + } + }); + 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 { @@ -168,43 +194,43 @@ export abstract class ObjectManagementDialogBase { @@ -212,7 +238,7 @@ export abstract class ObjectManagementDialogBase { + 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 { - 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 { - this.dialogObject.registerContent(async view => { - const sections: azdata.Component[] = []; - this.initializeGeneralSection(view); - this.initializeOwnedSchemaSection(view); - this.initializeMembershipSection(view); - this.initializeAdvancedSection(view); - sections.push(this.generalSection, this.ownedSchemaSection, this.membershipSection, this.advancedSection); - this.formContainer = this.createFormContainer(view, sections); - setTimeout(() => { - this.setViewByUserType(); - }, 100); - return view.initializeModel(this.formContainer) - }); + this.initializeGeneralSection(); + this.initializeOwnedSchemaSection(); + this.initializeMembershipSection(); + this.initializeAdvancedSection(); + this.formContainer.addItems([this.generalSection, this.ownedSchemaSection, this.membershipSection, this.advancedSection]); + setTimeout(() => { + this.setViewByUserType(); + }, 100); } - private initializeGeneralSection(view: azdata.ModelView): void { - this.nameInput = view.modelBuilder.inputBox().withProps({ + private initializeGeneralSection(): void { + 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.defaultSchemaDropdown.onValueChanged(() => { + this.defaultSchemaContainer = this.createLabelInputContainer(localizedConstants.DefaultSchemaText, this.defaultSchemaDropdown); + this.disposables.push(this.defaultSchemaDropdown.onValueChanged(() => { this.objectInfo.defaultSchema = 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(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 = 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 { + this.authTypeContainer = this.createLabelInputContainer(localizedConstants.AuthTypeText, this.authTypeDropdown); + this.disposables.push(this.authTypeDropdown.onValueChanged(async () => { this.objectInfo.authenticationType = getAuthenticationTypeByDisplayName(this.authTypeDropdown.value); this.onObjectValueChange(); this.setViewByAuthenticationType(); await this.runValidation(false); - }); + })); - this.passwordInput = this.createPasswordInputBox(view, localizedConstants.PasswordText, this.objectInfo.password ?? ''); - this.passwordContainer = this.createLabelInputContainer(view, localizedConstants.PasswordText, this.passwordInput); - this.confirmPasswordInput = this.createPasswordInputBox(view, localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? ''); - this.confirmPasswordContainer = this.createLabelInputContainer(view, localizedConstants.ConfirmPasswordText, this.confirmPasswordInput); - this.passwordInput.onTextChanged(async () => { + this.passwordInput = this.createPasswordInputBox(localizedConstants.PasswordText, this.objectInfo.password ?? ''); + this.passwordContainer = this.createLabelInputContainer(localizedConstants.PasswordText, this.passwordInput); + this.confirmPasswordInput = this.createPasswordInputBox(localizedConstants.ConfirmPasswordText, this.objectInfo.password ?? ''); + this.confirmPasswordContainer = this.createLabelInputContainer(localizedConstants.ConfirmPasswordText, this.confirmPasswordInput); + 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 { + this.disposables.push(this.defaultLanguageDropdown.onValueChanged(() => { this.objectInfo.defaultLanguage = this.defaultLanguageDropdown.value; this.onObjectValueChange(); - }); - const container = this.createLabelInputContainer(view, localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown); - this.advancedSection = this.createGroup(view, localizedConstants.AdvancedSectionHeader, [container]); + })); + const container = this.createLabelInputContainer(localizedConstants.DefaultLanguageText, this.defaultLanguageDropdown); + this.advancedSection = this.createGroup(localizedConstants.AdvancedSectionHeader, [container]); } private setViewByUserType(): void {