mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-16 10:58:30 -05:00
use the dialog's loading indicator (#22032)
* use the dialog's loading indicator * more * comments
This commit is contained in:
Alan Ren
@@ -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[] = [];
|
||||
this.initializeGeneralSection(view);
|
||||
this.initializeGeneralSection();
|
||||
sections.push(this.generalSection);
|
||||
|
||||
if (this.isNewObject || this.objectInfo.authenticationType === 'Sql') {
|
||||
this.initializeSqlAuthSection(view);
|
||||
this.initializeSqlAuthSection();
|
||||
sections.push(this.sqlAuthSection);
|
||||
}
|
||||
|
||||
this.initializeServerRolesSection(view);
|
||||
this.initializeServerRolesSection();
|
||||
sections.push(this.serverRoleSection);
|
||||
|
||||
if (this.viewInfo.supportAdvancedOptions) {
|
||||
this.initializeAdvancedSection(view);
|
||||
this.initializeAdvancedSection();
|
||||
sections.push(this.advancedSection);
|
||||
}
|
||||
|
||||
this.formContainer = this.createFormContainer(view, sections);
|
||||
return view.initializeModel(this.formContainer)
|
||||
});
|
||||
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<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.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<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.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<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);
|
||||
this.defaultDatabaseDropdown.onValueChanged(() => {
|
||||
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 = 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 = <string>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 {
|
||||
|
||||
@@ -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.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<boolean> => {
|
||||
const confirmed = await this.onConfirmation();
|
||||
@@ -98,15 +104,34 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
|
||||
return this._originalObjectInfo;
|
||||
}
|
||||
|
||||
protected get formContainer(): azdata.DivContainer {
|
||||
return this._formContainer;
|
||||
}
|
||||
|
||||
protected get modelView(): azdata.ModelView {
|
||||
return this._modelView;
|
||||
}
|
||||
|
||||
public async open(): Promise<void> {
|
||||
await vscode.window.withProgress({
|
||||
location: vscode.ProgressLocation.Notification,
|
||||
title: LoadingDialogText
|
||||
}, async () => {
|
||||
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();
|
||||
this._originalObjectInfo = deepClone(this.objectInfo);
|
||||
await this.initializeUI();
|
||||
this._originalObjectInfo = deepClone(this.objectInfo);
|
||||
const typeDisplayName = getNodeTypeDisplayName(this.objectType);
|
||||
this.dialogObject.registerOperation({
|
||||
displayName: this.isNewObject ? CreateObjectOperationDisplayName(typeDisplayName)
|
||||
@@ -139,7 +164,9 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
|
||||
}
|
||||
}
|
||||
});
|
||||
azdata.window.openDialog(this.dialogObject);
|
||||
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({
|
||||
@@ -147,7 +174,6 @@ export abstract class ObjectManagementDialogBase<ObjectInfoType extends ObjectMa
|
||||
}).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 {
|
||||
const labelComponent = view.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();
|
||||
protected createLabelInputContainer(label: string, input: azdata.InputBoxComponent | azdata.DropDownComponent): azdata.FlexContainer {
|
||||
const labelComponent = this.modelView.modelBuilder.text().withProps({ width: DefaultLabelWidth, value: label, requiredIndicator: input.required }).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 {
|
||||
return view.modelBuilder.checkBox().withProps({
|
||||
protected createCheckbox(label: string, checked: boolean = false, enabled: boolean = true): azdata.CheckBoxComponent {
|
||||
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 {
|
||||
return this.createInputBox(view, ariaLabel, value, enabled, 'password', width);
|
||||
protected createPasswordInputBox(ariaLabel: string, value: string = '', enabled: boolean = true, width: number = DefaultInputWidth): azdata.InputBoxComponent {
|
||||
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 {
|
||||
return view.modelBuilder.inputBox().withProps({ inputType: type, enabled: enabled, ariaLabel: ariaLabel, value: value, width: width }).component();
|
||||
protected createInputBox(ariaLabel: string, value: string = '', enabled: boolean = true, type: azdata.InputBoxInputType = 'text', width: number = DefaultInputWidth): azdata.InputBoxComponent {
|
||||
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 {
|
||||
return view.modelBuilder.groupContainer().withLayout({
|
||||
protected createGroup(header: string, items: azdata.Component[], collapsible: boolean = true, collapsed: boolean = false): azdata.GroupContainer {
|
||||
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 {
|
||||
return view.modelBuilder.divContainer().withLayout({ width: 'calc(100% - 20px)', height: 'calc(100% - 20px)' }).withProps({
|
||||
protected createFormContainer(items: azdata.Component[]): azdata.DivContainer {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 => {
|
||||
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);
|
||||
this.initializeGeneralSection();
|
||||
this.initializeOwnedSchemaSection();
|
||||
this.initializeMembershipSection();
|
||||
this.initializeAdvancedSection();
|
||||
this.formContainer.addItems([this.generalSection, this.ownedSchemaSection, this.membershipSection, this.advancedSection]);
|
||||
setTimeout(() => {
|
||||
this.setViewByUserType();
|
||||
}, 100);
|
||||
return view.initializeModel(this.formContainer)
|
||||
});
|
||||
}
|
||||
|
||||
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 = <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.authTypeDropdown.onValueChanged(async () => {
|
||||
this.authTypeContainer = this.createLabelInputContainer(localizedConstants.AuthTypeText, this.authTypeDropdown);
|
||||
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.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<ObjectManagement.User
|
||||
], false);
|
||||
}
|
||||
|
||||
private initializeOwnedSchemaSection(view: azdata.ModelView): void {
|
||||
this.ownedSchemaTable = this.createTableList(view, localizedConstants.OwnedSchemaSectionHeader, this.viewInfo.schemas, this.objectInfo.ownedSchemas);
|
||||
this.ownedSchemaSection = this.createGroup(view, localizedConstants.OwnedSchemaSectionHeader, [this.ownedSchemaTable]);
|
||||
private initializeOwnedSchemaSection(): void {
|
||||
this.ownedSchemaTable = this.createTableList(localizedConstants.OwnedSchemaSectionHeader, this.viewInfo.schemas, this.objectInfo.ownedSchemas);
|
||||
this.ownedSchemaSection = this.createGroup(localizedConstants.OwnedSchemaSectionHeader, [this.ownedSchemaTable]);
|
||||
}
|
||||
|
||||
private initializeMembershipSection(view: azdata.ModelView): void {
|
||||
this.membershipTable = this.createTableList(view, localizedConstants.MembershipSectionHeader, this.viewInfo.databaseRoles, this.objectInfo.databaseRoles);
|
||||
this.membershipSection = this.createGroup(view, localizedConstants.MembershipSectionHeader, [this.membershipTable]);
|
||||
private initializeMembershipSection(): void {
|
||||
this.membershipTable = this.createTableList(localizedConstants.MembershipSectionHeader, this.viewInfo.databaseRoles, this.objectInfo.databaseRoles);
|
||||
this.membershipSection = this.createGroup(localizedConstants.MembershipSectionHeader, [this.membershipTable]);
|
||||
}
|
||||
|
||||
private initializeAdvancedSection(view: azdata.ModelView): void {
|
||||
this.defaultLanguageDropdown = view.modelBuilder.dropDown().withProps({
|
||||
private initializeAdvancedSection(): void {
|
||||
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);
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user