mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-29 17:23:25 -05:00
Remove builder references from options dialog (#4774)
* remove more builder references; remove $ from declarations * fix jquery references * formatting * fixing backup * fix backup box
This commit is contained in:
Anthony Dresser
@@ -6,50 +6,38 @@
|
||||
'use strict';
|
||||
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
|
||||
import { Button } from 'sql/base/browser/ui/button/button';
|
||||
import { append, $, addClass, addClasses } from 'vs/base/browser/dom';
|
||||
|
||||
import { Builder } from 'sql/base/browser/builder';
|
||||
import * as types from 'vs/base/common/types';
|
||||
|
||||
import * as azdata from 'azdata';
|
||||
|
||||
export function appendRow(container: Builder, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string): Builder {
|
||||
let cellContainer: Builder;
|
||||
let rowAttributes = rowContainerClass ? { class: rowContainerClass } : {};
|
||||
container.element('tr', rowAttributes, (rowContainer) => {
|
||||
rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
|
||||
labelCellContainer.div({}, (labelContainer) => {
|
||||
labelContainer.text(label);
|
||||
});
|
||||
});
|
||||
rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
|
||||
cellContainer = inputCellContainer;
|
||||
});
|
||||
});
|
||||
export function appendRow(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string | Array<string>): HTMLElement {
|
||||
let rowContainer = append(container, $('tr'));
|
||||
if (rowContainerClass) {
|
||||
if (types.isString(rowContainerClass)) {
|
||||
addClass(rowContainer, rowContainerClass);
|
||||
} else {
|
||||
addClasses(rowContainer, ...rowContainerClass);
|
||||
}
|
||||
}
|
||||
append(append(rowContainer, $(`td.${labelClass}`)), $('div')).innerText = label;
|
||||
let inputCellContainer = append(rowContainer, $(`td.${cellContainerClass}`));
|
||||
|
||||
return cellContainer;
|
||||
return inputCellContainer;
|
||||
}
|
||||
|
||||
export function appendRowLink(container: Builder, label: string, labelClass: string, cellContainerClass: string): Builder {
|
||||
let rowButton: Button;
|
||||
container.element('tr', {}, (rowContainer) => {
|
||||
rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
|
||||
labelCellContainer.div({}, (labelContainer) => {
|
||||
labelContainer.text(label);
|
||||
});
|
||||
});
|
||||
rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
|
||||
inputCellContainer.element('div', {}, (rowContainer) => {
|
||||
rowButton = new Button(rowContainer.getHTMLElement());
|
||||
export function appendRowLink(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string): HTMLElement {
|
||||
let rowContainer = append(container, $('tr'));
|
||||
append(append(rowContainer, $(`td.${labelClass}`)), $('div')).innerText = label;
|
||||
let buttonContainer = append(append(rowContainer, $(`td.${cellContainerClass}`)), $('div'));
|
||||
let rowButton = new Button(buttonContainer);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return new Builder(rowButton.element);
|
||||
return rowButton.element;
|
||||
}
|
||||
|
||||
export function appendInputSelectBox(container: Builder, selectBox: SelectBox): SelectBox {
|
||||
selectBox.render(container.getHTMLElement());
|
||||
export function appendInputSelectBox(container: HTMLElement, selectBox: SelectBox): SelectBox {
|
||||
selectBox.render(container);
|
||||
return selectBox;
|
||||
}
|
||||
|
||||
@@ -80,4 +68,4 @@ export function getCategoryName(categories: azdata.CategoryValue[], categoryDisp
|
||||
}
|
||||
});
|
||||
return categoryName;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,7 +26,6 @@ import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/theme
|
||||
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
|
||||
import * as styler from 'vs/platform/theme/common/styler';
|
||||
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
|
||||
import { Builder, $ } from 'sql/base/browser/builder';
|
||||
import { Widget } from 'vs/base/browser/ui/widget';
|
||||
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
|
||||
import { IViewletPanelOptions, ViewletPanel } from 'vs/workbench/browser/parts/views/panelViewlet';
|
||||
@@ -34,6 +33,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
|
||||
import { append, $ } from 'vs/base/browser/dom';
|
||||
|
||||
export class CategoryView extends ViewletPanel {
|
||||
|
||||
@@ -68,9 +68,9 @@ export interface IOptionsDialogOptions extends IModalOptions {
|
||||
export class OptionsDialog extends Modal {
|
||||
private _body: HTMLElement;
|
||||
private _optionGroups: HTMLElement;
|
||||
private _dividerBuilder: Builder;
|
||||
private _optionTitle: Builder;
|
||||
private _optionDescription: Builder;
|
||||
private _dividerBuilder: HTMLElement;
|
||||
private _optionTitle: HTMLElement;
|
||||
private _optionDescription: HTMLElement;
|
||||
private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {};
|
||||
private _optionValues: { [optionName: string]: string };
|
||||
private _optionRowSize = 31;
|
||||
@@ -116,23 +116,14 @@ export class OptionsDialog extends Modal {
|
||||
}
|
||||
|
||||
protected renderBody(container: HTMLElement) {
|
||||
new Builder(container).div({ class: 'optionsDialog-options' }, (bodyBuilder) => {
|
||||
this._body = bodyBuilder.getHTMLElement();
|
||||
});
|
||||
this._body = append(container, $('div.optionsDialog-options'));
|
||||
|
||||
let builder = new Builder(this._body);
|
||||
builder.div({}, (dividerContainer) => {
|
||||
this._dividerBuilder = dividerContainer;
|
||||
});
|
||||
this._dividerBuilder = append(this._body, $('div'));
|
||||
|
||||
builder.div({ class: 'optionsDialog-description' }, (descriptionContainer) => {
|
||||
descriptionContainer.div({ class: 'modal-title' }, (optionTitle) => {
|
||||
this._optionTitle = optionTitle;
|
||||
});
|
||||
descriptionContainer.div({ class: 'optionsDialog-description-content' }, (optionDescription) => {
|
||||
this._optionDescription = optionDescription;
|
||||
});
|
||||
});
|
||||
let descriptionContainer = append(this._body, $('div.optionsDialog-description'));
|
||||
|
||||
this._optionTitle = append(descriptionContainer, $('div.modal-title'));
|
||||
this._optionDescription = append(descriptionContainer, $('div.optionsDialog-description-content'));
|
||||
}
|
||||
|
||||
// Update theming that is specific to options dialog flyout body
|
||||
@@ -140,19 +131,19 @@ export class OptionsDialog extends Modal {
|
||||
let borderColor = theme.getColor(contrastBorder);
|
||||
let border = borderColor ? borderColor.toString() : null;
|
||||
if (this._dividerBuilder) {
|
||||
this._dividerBuilder.style('border-top-width', border ? '1px' : null);
|
||||
this._dividerBuilder.style('border-top-style', border ? 'solid' : null);
|
||||
this._dividerBuilder.style('border-top-color', border);
|
||||
this._dividerBuilder.style.borderTopWidth = border ? '1px' : null;
|
||||
this._dividerBuilder.style.borderTopStyle = border ? 'solid' : null;
|
||||
this._dividerBuilder.style.borderTopColor = border;
|
||||
}
|
||||
}
|
||||
|
||||
private onOptionLinkClicked(optionName: string): void {
|
||||
let option = this._optionElements[optionName].option;
|
||||
this._optionTitle.text(option.displayName);
|
||||
this._optionDescription.text(option.description);
|
||||
this._optionTitle.innerText = option.displayName;
|
||||
this._optionDescription.innerText = option.description;
|
||||
}
|
||||
|
||||
private fillInOptions(container: Builder, options: azdata.ServiceOption[]): void {
|
||||
private fillInOptions(container: HTMLElement, options: azdata.ServiceOption[]): void {
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
let option: azdata.ServiceOption = options[i];
|
||||
let rowContainer = DialogHelper.appendRow(container, option.displayName, 'optionsDialog-label', 'optionsDialog-input');
|
||||
@@ -226,21 +217,16 @@ export class OptionsDialog extends Modal {
|
||||
public open(options: azdata.ServiceOption[], optionValues: { [name: string]: any }) {
|
||||
this._optionValues = optionValues;
|
||||
let firstOption: string;
|
||||
let containerGroup: Builder;
|
||||
let optionsContentBuilder: Builder = $().div({ class: 'optionsDialog-options-groups monaco-panel-view' }, (container) => {
|
||||
containerGroup = container;
|
||||
this._optionGroups = container.getHTMLElement();
|
||||
});
|
||||
this.splitview = new ScrollableSplitView(containerGroup.getHTMLElement(), { enableResizing: false, scrollDebounce: 0 });
|
||||
this._optionGroups = $('div.optionsDialog-options-groups.monaco-panel-view');
|
||||
this.splitview = new ScrollableSplitView(this._optionGroups, { enableResizing: false, scrollDebounce: 0 });
|
||||
let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options);
|
||||
for (let category in categoryMap) {
|
||||
let serviceOptions: azdata.ServiceOption[] = categoryMap[category];
|
||||
let bodyContainer = $().element('table', { class: 'optionsDialog-table' }, (tableContainer: Builder) => {
|
||||
this.fillInOptions(tableContainer, serviceOptions);
|
||||
});
|
||||
let bodyContainer = $('table.optionsDialog-table');
|
||||
this.fillInOptions(bodyContainer, serviceOptions);
|
||||
|
||||
let viewSize = this._optionCategoryPadding + serviceOptions.length * this._optionRowSize;
|
||||
let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer.getHTMLElement(), viewSize, { title: category, ariaHeaderLabel: category, id: category });
|
||||
let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer, viewSize, { title: category, ariaHeaderLabel: category, id: category });
|
||||
this.splitview.addView(categoryView, viewSize);
|
||||
categoryView.render();
|
||||
attachPanelStyler(categoryView, this._themeService);
|
||||
@@ -252,8 +238,7 @@ export class OptionsDialog extends Modal {
|
||||
if (this.height) {
|
||||
this.splitview.layout(this.height - 120);
|
||||
}
|
||||
let body = new Builder(this._body);
|
||||
body.append(optionsContentBuilder.getHTMLElement(), 0);
|
||||
append(this._body, this._optionGroups);
|
||||
this.show();
|
||||
let firstOptionWidget = this._optionElements[firstOption].optionWidget;
|
||||
this.registerStyling();
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
'use strict';
|
||||
|
||||
import * as DialogHelper from './dialogHelper';
|
||||
import { Builder } from 'sql/base/browser/builder';
|
||||
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
|
||||
import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
|
||||
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
|
||||
@@ -22,7 +21,7 @@ export interface IOptionElement {
|
||||
optionValue: any;
|
||||
}
|
||||
|
||||
export function createOptionElement(option: azdata.ServiceOption, rowContainer: Builder, options: { [name: string]: any },
|
||||
export function createOptionElement(option: azdata.ServiceOption, rowContainer: HTMLElement, options: { [name: string]: any },
|
||||
optionsMap: { [optionName: string]: IOptionElement }, contextViewService: IContextViewService, onFocus: (name) => void): void {
|
||||
let possibleInputs: string[] = [];
|
||||
let optionValue = getOptionValueAndCategoryValues(option, options, possibleInputs);
|
||||
@@ -32,7 +31,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
|
||||
let invalidInputMessage = localize('optionsDialog.invalidInput', 'Invalid input. Numeric value expected.');
|
||||
|
||||
if (option.valueType === ServiceOptionType.number) {
|
||||
optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
|
||||
optionWidget = new InputBox(rowContainer, contextViewService, {
|
||||
validationOptions: {
|
||||
validation: (value: string) => {
|
||||
if (!value && option.isRequired) {
|
||||
@@ -53,7 +52,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
|
||||
DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
|
||||
inputElement = findElement(rowContainer, 'monaco-select-box');
|
||||
} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {
|
||||
optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
|
||||
optionWidget = new InputBox(rowContainer, contextViewService, {
|
||||
validationOptions: {
|
||||
validation: (value: string) => (!value && option.isRequired) ? ({ type: MessageType.ERROR, content: option.displayName + missingErrorMessage }) : null
|
||||
},
|
||||
@@ -149,16 +148,16 @@ export function updateOptions(options: { [optionName: string]: any }, optionsMap
|
||||
export let trueInputValue: string = 'True';
|
||||
export let falseInputValue: string = 'False';
|
||||
|
||||
export function findElement(container: Builder, className: string): HTMLElement {
|
||||
var elementBuilder: Builder = container;
|
||||
while (elementBuilder.getHTMLElement()) {
|
||||
var htmlElement = elementBuilder.getHTMLElement();
|
||||
export function findElement(container: HTMLElement, className: string): HTMLElement {
|
||||
var elementBuilder = container;
|
||||
while (elementBuilder) {
|
||||
var htmlElement = elementBuilder;
|
||||
if (htmlElement.className.startsWith(className)) {
|
||||
break;
|
||||
}
|
||||
elementBuilder = elementBuilder.child(0);
|
||||
elementBuilder = elementBuilder.firstChild as HTMLElement;
|
||||
}
|
||||
return elementBuilder.getHTMLElement();
|
||||
return elementBuilder;
|
||||
}
|
||||
|
||||
export function groupOptionsByCategory(options: azdata.ServiceOption[]): { [category: string]: azdata.ServiceOption[] } {
|
||||
@@ -176,4 +175,4 @@ export function groupOptionsByCategory(options: azdata.ServiceOption[]): { [cate
|
||||
}
|
||||
});
|
||||
return connectionOptionsMap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -201,7 +201,7 @@ export class ConnectionDialogWidget extends Modal {
|
||||
this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => {
|
||||
modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => {
|
||||
DialogHelper.appendInputSelectBox(
|
||||
DialogHelper.appendRow(tableContainer, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
|
||||
DialogHelper.appendRow(tableContainer.getHTMLElement(), connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -32,14 +32,13 @@ import { localize } from 'vs/nls';
|
||||
import * as DOM from 'vs/base/browser/dom';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { OS, OperatingSystem } from 'vs/base/common/platform';
|
||||
import { Builder, $ } from 'sql/base/browser/builder';
|
||||
import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
|
||||
import { endsWith, startsWith } from 'vs/base/common/strings';
|
||||
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
|
||||
export class ConnectionWidget {
|
||||
private _builder: Builder;
|
||||
private _container: HTMLElement;
|
||||
private _serverGroupSelectBox: SelectBox;
|
||||
private _previousGroupOption: string;
|
||||
private _serverGroupOptions: IConnectionProfileGroup[];
|
||||
@@ -52,7 +51,7 @@ export class ConnectionWidget {
|
||||
private _rememberPasswordCheckBox: Checkbox;
|
||||
private _azureAccountDropdown: SelectBox;
|
||||
private _azureTenantDropdown: SelectBox;
|
||||
private _refreshCredentialsLinkBuilder: Builder;
|
||||
private _refreshCredentialsLink: HTMLLinkElement;
|
||||
private _addAzureAccountMessage: string = localize('connectionWidget.AddAzureAccount', 'Add an account...');
|
||||
private readonly _azureProviderId = 'azurePublicCloud';
|
||||
private _azureTenantId: string;
|
||||
@@ -62,7 +61,7 @@ export class ConnectionWidget {
|
||||
private _authTypeSelectBox: SelectBox;
|
||||
private _toDispose: lifecycle.IDisposable[];
|
||||
private _optionsMaps: { [optionType: number]: azdata.ConnectionOption };
|
||||
private _tableContainer: Builder;
|
||||
private _tableContainer: HTMLElement;
|
||||
private _focusedBeforeHandleOnConnection: HTMLElement;
|
||||
private _providerName: string;
|
||||
private _authTypeMap: { [providerName: string]: AuthenticationType[] } = {
|
||||
@@ -130,11 +129,8 @@ export class ConnectionWidget {
|
||||
this._serverGroupOptions = [this.DefaultServerGroup];
|
||||
this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, this._contextViewService, undefined, { ariaLabel: this._serverGroupDisplayString });
|
||||
this._previousGroupOption = this._serverGroupSelectBox.value;
|
||||
this._builder = $().div({ class: 'connection-table' }, (modelTableContent) => {
|
||||
modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => {
|
||||
this._tableContainer = tableContainer;
|
||||
});
|
||||
});
|
||||
this._container = DOM.append(container, DOM.$('div.connection-table'));
|
||||
this._tableContainer = DOM.append(this._container, DOM.$('table.connection-table-content'));
|
||||
this.fillInConnectionForm();
|
||||
this.registerListeners();
|
||||
if (this._authTypeSelectBox) {
|
||||
@@ -144,8 +140,6 @@ export class ConnectionWidget {
|
||||
DOM.addDisposableListener(container, 'paste', e => {
|
||||
this._handleClipboard();
|
||||
});
|
||||
|
||||
DOM.append(container, this._builder.getHTMLElement());
|
||||
}
|
||||
|
||||
private _handleClipboard(): void {
|
||||
@@ -166,8 +160,8 @@ export class ConnectionWidget {
|
||||
private fillInConnectionForm(): void {
|
||||
// Server name
|
||||
let serverNameOption = this._optionsMaps[ConnectionOptionSpecialType.serverName];
|
||||
let serverNameBuilder = DialogHelper.appendRow(this._tableContainer, serverNameOption.displayName, 'connection-label', 'connection-input');
|
||||
this._serverNameInputBox = new InputBox(serverNameBuilder.getHTMLElement(), this._contextViewService, {
|
||||
let serverName = DialogHelper.appendRow(this._tableContainer, serverNameOption.displayName, 'connection-label', 'connection-input');
|
||||
this._serverNameInputBox = new InputBox(serverName, this._contextViewService, {
|
||||
validationOptions: {
|
||||
validation: (value: string) => {
|
||||
if (!value) {
|
||||
@@ -183,15 +177,15 @@ export class ConnectionWidget {
|
||||
|
||||
// Authentication type
|
||||
if (this._optionsMaps[ConnectionOptionSpecialType.authType]) {
|
||||
let authTypeBuilder = DialogHelper.appendRow(this._tableContainer, this._optionsMaps[ConnectionOptionSpecialType.authType].displayName, 'connection-label', 'connection-input');
|
||||
DialogHelper.appendInputSelectBox(authTypeBuilder, this._authTypeSelectBox);
|
||||
let authType = DialogHelper.appendRow(this._tableContainer, this._optionsMaps[ConnectionOptionSpecialType.authType].displayName, 'connection-label', 'connection-input');
|
||||
DialogHelper.appendInputSelectBox(authType, this._authTypeSelectBox);
|
||||
}
|
||||
|
||||
// Username
|
||||
let self = this;
|
||||
let userNameOption = this._optionsMaps[ConnectionOptionSpecialType.userName];
|
||||
let userNameBuilder = DialogHelper.appendRow(this._tableContainer, userNameOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
|
||||
this._userNameInputBox = new InputBox(userNameBuilder.getHTMLElement(), this._contextViewService, {
|
||||
let userName = DialogHelper.appendRow(this._tableContainer, userNameOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
|
||||
this._userNameInputBox = new InputBox(userName, this._contextViewService, {
|
||||
validationOptions: {
|
||||
validation: (value: string) => self.validateUsername(value, userNameOption.isRequired) ? ({ type: MessageType.ERROR, content: localize('connectionWidget.missingRequireField', '{0} is required.', userNameOption.displayName) }) : null
|
||||
},
|
||||
@@ -199,34 +193,36 @@ export class ConnectionWidget {
|
||||
});
|
||||
// Password
|
||||
let passwordOption = this._optionsMaps[ConnectionOptionSpecialType.password];
|
||||
let passwordBuilder = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
|
||||
this._passwordInputBox = new InputBox(passwordBuilder.getHTMLElement(), this._contextViewService, { ariaLabel: passwordOption.displayName });
|
||||
let password = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input', 'username-password-row');
|
||||
this._passwordInputBox = new InputBox(password, this._contextViewService, { ariaLabel: passwordOption.displayName });
|
||||
this._passwordInputBox.inputElement.type = 'password';
|
||||
this._password = '';
|
||||
|
||||
// Remember password
|
||||
let rememberPasswordLabel = localize('rememberPassword', 'Remember password');
|
||||
this._rememberPasswordCheckBox = this.appendCheckbox(this._tableContainer, rememberPasswordLabel, 'connection-checkbox', 'connection-input', 'username-password-row', false);
|
||||
this._rememberPasswordCheckBox = this.appendCheckbox(this._tableContainer, rememberPasswordLabel, 'connection-input', 'username-password-row', false);
|
||||
|
||||
// Azure account picker
|
||||
let accountLabel = localize('connection.azureAccountDropdownLabel', 'Account');
|
||||
let accountDropdownBuilder = DialogHelper.appendRow(this._tableContainer, accountLabel, 'connection-label', 'connection-input', 'azure-account-row');
|
||||
this._azureAccountDropdown = new SelectBox([], undefined, this._contextViewService, accountDropdownBuilder.getContainer(), { ariaLabel: accountLabel });
|
||||
DialogHelper.appendInputSelectBox(accountDropdownBuilder, this._azureAccountDropdown);
|
||||
let refreshCredentialsBuilder = DialogHelper.appendRow(this._tableContainer, '', 'connection-label', 'connection-input', 'azure-account-row refresh-credentials-link');
|
||||
this._refreshCredentialsLinkBuilder = refreshCredentialsBuilder.a({ href: '#' }).text(localize('connectionWidget.refreshAzureCredentials', 'Refresh account credentials'));
|
||||
let accountDropdown = DialogHelper.appendRow(this._tableContainer, accountLabel, 'connection-label', 'connection-input', 'azure-account-row');
|
||||
this._azureAccountDropdown = new SelectBox([], undefined, this._contextViewService, accountDropdown, { ariaLabel: accountLabel });
|
||||
DialogHelper.appendInputSelectBox(accountDropdown, this._azureAccountDropdown);
|
||||
let refreshCredentials = DialogHelper.appendRow(this._tableContainer, '', 'connection-label', 'connection-input', ['azure-account-row', 'refresh-credentials-link']);
|
||||
this._refreshCredentialsLink = DOM.append(refreshCredentials, DOM.$('a'));
|
||||
this._refreshCredentialsLink.href = '#';
|
||||
this._refreshCredentialsLink.innerText = localize('connectionWidget.refreshAzureCredentials', 'Refresh account credentials');
|
||||
|
||||
// Azure tenant picker
|
||||
let tenantLabel = localize('connection.azureTenantDropdownLabel', 'Azure AD tenant');
|
||||
let tenantDropdownBuilder = DialogHelper.appendRow(this._tableContainer, tenantLabel, 'connection-label', 'connection-input', 'azure-account-row azure-tenant-row');
|
||||
this._azureTenantDropdown = new SelectBox([], undefined, this._contextViewService, tenantDropdownBuilder.getContainer(), { ariaLabel: tenantLabel });
|
||||
DialogHelper.appendInputSelectBox(tenantDropdownBuilder, this._azureTenantDropdown);
|
||||
let tenantDropdown = DialogHelper.appendRow(this._tableContainer, tenantLabel, 'connection-label', 'connection-input', ['azure-account-row', 'azure-tenant-row']);
|
||||
this._azureTenantDropdown = new SelectBox([], undefined, this._contextViewService, tenantDropdown, { ariaLabel: tenantLabel });
|
||||
DialogHelper.appendInputSelectBox(tenantDropdown, this._azureTenantDropdown);
|
||||
|
||||
// Database
|
||||
let databaseOption = this._optionsMaps[ConnectionOptionSpecialType.databaseName];
|
||||
let databaseNameBuilder = DialogHelper.appendRow(this._tableContainer, databaseOption.displayName, 'connection-label', 'connection-input');
|
||||
let databaseName = DialogHelper.appendRow(this._tableContainer, databaseOption.displayName, 'connection-label', 'connection-input');
|
||||
|
||||
this._databaseNameInputBox = new Dropdown(databaseNameBuilder.getHTMLElement(), this._contextViewService, {
|
||||
this._databaseNameInputBox = new Dropdown(databaseName, this._contextViewService, {
|
||||
values: [this._defaultDatabaseName, this._loadingDatabaseName],
|
||||
strictSelection: false,
|
||||
placeholder: this._defaultDatabaseName,
|
||||
@@ -236,13 +232,13 @@ export class ConnectionWidget {
|
||||
});
|
||||
|
||||
// Server group
|
||||
let serverGroupBuilder = DialogHelper.appendRow(this._tableContainer, this._serverGroupDisplayString, 'connection-label', 'connection-input');
|
||||
DialogHelper.appendInputSelectBox(serverGroupBuilder, this._serverGroupSelectBox);
|
||||
let serverGroup = DialogHelper.appendRow(this._tableContainer, this._serverGroupDisplayString, 'connection-label', 'connection-input');
|
||||
DialogHelper.appendInputSelectBox(serverGroup, this._serverGroupSelectBox);
|
||||
|
||||
// Connection name
|
||||
let connectionNameOption = this._optionsMaps[ConnectionOptionSpecialType.connectionName];
|
||||
let connectionNameBuilder = DialogHelper.appendRow(this._tableContainer, connectionNameOption.displayName, 'connection-label', 'connection-input');
|
||||
this._connectionNameInputBox = new InputBox(connectionNameBuilder.getHTMLElement(), this._contextViewService, { ariaLabel: connectionNameOption.displayName });
|
||||
this._connectionNameInputBox = new InputBox(connectionNameBuilder, this._contextViewService, { ariaLabel: connectionNameOption.displayName });
|
||||
|
||||
let AdvancedLabel = localize('advanced', 'Advanced...');
|
||||
this._advancedButton = this.createAdvancedButton(this._tableContainer, AdvancedLabel);
|
||||
@@ -258,33 +254,26 @@ export class ConnectionWidget {
|
||||
return false;
|
||||
}
|
||||
|
||||
private createAdvancedButton(container: Builder, title: string): Button {
|
||||
let button;
|
||||
container.element('tr', {}, (rowContainer) => {
|
||||
rowContainer.element('td');
|
||||
rowContainer.element('td', { align: 'right' }, (cellContainer) => {
|
||||
cellContainer.div({ class: 'advanced-button' }, (divContainer) => {
|
||||
button = new Button(divContainer.getHTMLElement());
|
||||
button.label = title;
|
||||
button.onDidClick(() => {
|
||||
//open advanced page
|
||||
this._callbacks.onAdvancedProperties();
|
||||
});
|
||||
});
|
||||
});
|
||||
private createAdvancedButton(container: HTMLElement, title: string): Button {
|
||||
let rowContainer = DOM.append(container, DOM.$('tr'));
|
||||
DOM.append(rowContainer, DOM.$('td'));
|
||||
let cellContainer = DOM.append(rowContainer, DOM.$('td'));
|
||||
cellContainer.setAttribute('align', 'right');
|
||||
let divContainer = DOM.append(cellContainer, DOM.$('div.advanced-button'));
|
||||
let button = new Button(divContainer);
|
||||
button.label = title;
|
||||
button.onDidClick(() => {
|
||||
//open advanced page
|
||||
this._callbacks.onAdvancedProperties();
|
||||
});
|
||||
return button;
|
||||
}
|
||||
|
||||
private appendCheckbox(container: Builder, label: string, checkboxClass: string, cellContainerClass: string, rowContainerClass: string, isChecked: boolean): Checkbox {
|
||||
let checkbox: Checkbox;
|
||||
container.element('tr', { class: rowContainerClass }, (rowContainer) => {
|
||||
rowContainer.element('td');
|
||||
rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
|
||||
checkbox = new Checkbox(inputCellContainer.getHTMLElement(), { label, checked: isChecked, ariaLabel: label });
|
||||
});
|
||||
});
|
||||
return checkbox;
|
||||
private appendCheckbox(container: HTMLElement, label: string, cellContainerClass: string, rowContainerClass: string, isChecked: boolean): Checkbox {
|
||||
let rowContainer = DOM.append(container, DOM.$(`tr.${rowContainerClass}`));
|
||||
DOM.append(rowContainer, DOM.$('td'));
|
||||
let checkboxContainer = DOM.append(rowContainer, DOM.$(`td.${cellContainerClass}`));
|
||||
return new Checkbox(checkboxContainer, { label, checked: isChecked, ariaLabel: label });
|
||||
}
|
||||
|
||||
private registerListeners(): void {
|
||||
@@ -322,8 +311,8 @@ export class ConnectionWidget {
|
||||
}));
|
||||
}
|
||||
|
||||
if (this._refreshCredentialsLinkBuilder) {
|
||||
this._toDispose.push(this._refreshCredentialsLinkBuilder.on(DOM.EventType.CLICK, async () => {
|
||||
if (this._refreshCredentialsLink) {
|
||||
this._toDispose.push(DOM.addDisposableListener(this._refreshCredentialsLink, DOM.EventType.CLICK, async () => {
|
||||
let account = this._azureAccountList.find(account => account.key.accountId === this._azureAccountDropdown.value);
|
||||
if (account) {
|
||||
await this._accountManagementService.refreshAccount(account);
|
||||
@@ -417,14 +406,12 @@ export class ConnectionWidget {
|
||||
if (currentAuthType === AuthenticationType.AzureMFA) {
|
||||
this.fillInAzureAccountOptions();
|
||||
this._azureAccountDropdown.enable();
|
||||
let tableContainer = this._tableContainer.getContainer();
|
||||
tableContainer.classList.add('hide-username-password');
|
||||
tableContainer.classList.remove('hide-azure-accounts');
|
||||
DOM.addClass(this._tableContainer, 'hide-username-password');
|
||||
DOM.removeClass(this._tableContainer, 'hide-azure-accounts');
|
||||
} else {
|
||||
this._azureAccountDropdown.disable();
|
||||
let tableContainer = this._tableContainer.getContainer();
|
||||
tableContainer.classList.remove('hide-username-password');
|
||||
tableContainer.classList.add('hide-azure-accounts');
|
||||
DOM.removeClass(this._tableContainer, 'hide-username-password');
|
||||
DOM.addClass(this._tableContainer, 'hide-azure-accounts');
|
||||
this._azureAccountDropdown.hideMessage();
|
||||
}
|
||||
}
|
||||
@@ -446,9 +433,9 @@ export class ConnectionWidget {
|
||||
private async updateRefreshCredentialsLink(): Promise<void> {
|
||||
let chosenAccount = this._azureAccountList.find(account => account.key.accountId === this._azureAccountDropdown.value);
|
||||
if (chosenAccount && chosenAccount.isStale) {
|
||||
this._tableContainer.getContainer().classList.remove('hide-refresh-link');
|
||||
DOM.removeClass(this._tableContainer, 'hide-refresh-link');
|
||||
} else {
|
||||
this._tableContainer.getContainer().classList.add('hide-refresh-link');
|
||||
DOM.addClass(this._tableContainer, 'hide-refresh-link');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -482,7 +469,7 @@ export class ConnectionWidget {
|
||||
// There are multiple tenants available so let the user select one
|
||||
let options = selectedAccount.properties.tenants.map(tenant => tenant.displayName);
|
||||
this._azureTenantDropdown.setOptions(options);
|
||||
this._tableContainer.getContainer().classList.remove(hideTenantsClassName);
|
||||
DOM.removeClass(this._tableContainer, hideTenantsClassName);
|
||||
this.onAzureTenantSelected(0);
|
||||
} else {
|
||||
if (selectedAccount && selectedAccount.properties.tenants && selectedAccount.properties.tenants.length === 1) {
|
||||
@@ -490,7 +477,7 @@ export class ConnectionWidget {
|
||||
} else {
|
||||
this._azureTenantId = undefined;
|
||||
}
|
||||
this._tableContainer.getContainer().classList.add(hideTenantsClassName);
|
||||
DOM.addClass(this._tableContainer, hideTenantsClassName);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -589,9 +576,8 @@ export class ConnectionWidget {
|
||||
if (this._authTypeSelectBox) {
|
||||
this.onAuthTypeSelected(this._authTypeSelectBox.value);
|
||||
} else {
|
||||
let tableContainerElement = this._tableContainer.getContainer();
|
||||
tableContainerElement.classList.remove('hide-username-password');
|
||||
tableContainerElement.classList.add('hide-azure-accounts');
|
||||
DOM.removeClass(this._tableContainer, 'hide-username-password');
|
||||
DOM.addClass(this._tableContainer, 'hide-azure-accounts');
|
||||
}
|
||||
|
||||
if (this.authType === AuthenticationType.AzureMFA) {
|
||||
|
||||
@@ -19,7 +19,6 @@ import { FileBrowserTreeView } from 'sql/workbench/services/fileBrowser/browser/
|
||||
import { FileBrowserViewModel } from 'sql/workbench/services/fileBrowser/common/fileBrowserViewModel';
|
||||
|
||||
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
|
||||
import { Builder } from 'sql/base/browser/builder';
|
||||
import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
|
||||
import { Event, Emitter } from 'vs/base/common/event';
|
||||
import { localize } from 'vs/nls';
|
||||
@@ -36,7 +35,7 @@ import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/la
|
||||
|
||||
export class FileBrowserDialog extends Modal {
|
||||
private _viewModel: FileBrowserViewModel;
|
||||
private _bodyBuilder: Builder;
|
||||
private _body: HTMLElement;
|
||||
private _filePathInputBox: InputBox;
|
||||
private _fileFilterSelectBox: SelectBox;
|
||||
private _okButton: Button;
|
||||
@@ -44,7 +43,7 @@ export class FileBrowserDialog extends Modal {
|
||||
private _onOk = new Emitter<string>();
|
||||
public onOk: Event<string> = this._onOk.event;
|
||||
|
||||
private _treeContainer: Builder;
|
||||
private _treeContainer: HTMLElement;
|
||||
private _fileBrowserTreeView: FileBrowserTreeView;
|
||||
private _selectedFilePath: string;
|
||||
private _isFolderSelected: boolean;
|
||||
@@ -68,9 +67,7 @@ export class FileBrowserDialog extends Modal {
|
||||
}
|
||||
|
||||
protected renderBody(container: HTMLElement) {
|
||||
new Builder(container).div({ 'class': 'file-browser-dialog' }, (bodyBuilder) => {
|
||||
this._bodyBuilder = bodyBuilder;
|
||||
});
|
||||
this._body = DOM.append(container, DOM.$('.file-browser-dialog'));
|
||||
}
|
||||
|
||||
public render() {
|
||||
@@ -86,24 +83,19 @@ export class FileBrowserDialog extends Modal {
|
||||
this._register(attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));
|
||||
}
|
||||
|
||||
this._bodyBuilder.div({ class: 'tree-view' }, (treeContainer) => {
|
||||
this._treeContainer = treeContainer;
|
||||
this._treeContainer = DOM.append(this._body, DOM.$('.tree-view'));
|
||||
|
||||
let tableContainer: HTMLElement = DOM.append(DOM.append(this._body, DOM.$('.option-section')), DOM.$('table.file-table-content'));
|
||||
let pathLabel = localize('filebrowser.filepath', 'Selected path');
|
||||
let pathBuilder = DialogHelper.appendRow(tableContainer, pathLabel, 'file-input-label', 'file-input-box');
|
||||
this._filePathInputBox = new InputBox(pathBuilder, this._contextViewService, {
|
||||
ariaLabel: pathLabel
|
||||
});
|
||||
|
||||
this._bodyBuilder.div({ class: 'option-section' }, (tableWrapper) => {
|
||||
tableWrapper.element('table', { class: 'file-table-content' }, (tableContainer) => {
|
||||
let pathLabel = localize('filebrowser.filepath', 'Selected path');
|
||||
let pathBuilder = DialogHelper.appendRow(tableContainer, pathLabel, 'file-input-label', 'file-input-box');
|
||||
this._filePathInputBox = new InputBox(pathBuilder.getHTMLElement(), this._contextViewService, {
|
||||
ariaLabel: pathLabel
|
||||
});
|
||||
|
||||
this._fileFilterSelectBox = new SelectBox(['*'], '*', this._contextViewService);
|
||||
let filterLabel = localize('fileFilter', 'Files of type');
|
||||
let filterBuilder = DialogHelper.appendRow(tableContainer, filterLabel, 'file-input-label', 'file-input-box');
|
||||
DialogHelper.appendInputSelectBox(filterBuilder, this._fileFilterSelectBox);
|
||||
});
|
||||
});
|
||||
this._fileFilterSelectBox = new SelectBox(['*'], '*', this._contextViewService);
|
||||
let filterLabel = localize('fileFilter', 'Files of type');
|
||||
let filterBuilder = DialogHelper.appendRow(tableContainer, filterLabel, 'file-input-label', 'file-input-box');
|
||||
DialogHelper.appendInputSelectBox(filterBuilder, this._fileFilterSelectBox);
|
||||
|
||||
this._okButton = this.addFooterButton(localize('fileBrowser.ok', 'OK'), () => this.ok());
|
||||
this._okButton.enabled = false;
|
||||
@@ -209,9 +201,9 @@ export class FileBrowserDialog extends Modal {
|
||||
}
|
||||
|
||||
private updateFileTree(rootNode: FileNode, selectedNode: FileNode, expandedNodes: FileNode[]): void {
|
||||
this._fileBrowserTreeView.renderBody(this._treeContainer.getHTMLElement(), rootNode, selectedNode, expandedNodes);
|
||||
this._fileBrowserTreeView.renderBody(this._treeContainer, rootNode, selectedNode, expandedNodes);
|
||||
this._fileBrowserTreeView.setVisible(true);
|
||||
this._fileBrowserTreeView.layout(DOM.getTotalHeight(this._treeContainer.getHTMLElement()));
|
||||
this._fileBrowserTreeView.layout(DOM.getTotalHeight(this._treeContainer));
|
||||
}
|
||||
|
||||
private onFilterSelectChanged(filterIndex) {
|
||||
@@ -242,7 +234,7 @@ export class FileBrowserDialog extends Modal {
|
||||
// Update theming that is specific to file browser
|
||||
private updateTheme(): void {
|
||||
if (this._treeContainer) {
|
||||
this._treeContainer.style('background-color', this.headerAndFooterBackground);
|
||||
this._treeContainer.style.backgroundColor = this.headerAndFooterBackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user