diff --git a/src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.ts b/src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.ts index c17af4f4a7..670eff5536 100644 --- a/src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.ts +++ b/src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.ts @@ -41,7 +41,7 @@ const defaultStyles: ISplitViewStyles = { }; const defaultOptions: ISplitViewOptions = { - enableResizing: true + enableResizing: false }; export interface IView extends HeightIView { diff --git a/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts b/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts index 9abba8a3a1..c8a7f3bf8e 100644 --- a/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts @@ -31,7 +31,7 @@ export class AutoColumnSize implements Slick.Plugin { this.onPostEventHandler.subscribe(this._grid.onRendered, () => this.onPostRender()); } - this._$container = $(this._grid.getContainerNode()); + this._$container = jQuery(this._grid.getContainerNode()); this._$container.on('dblclick.autosize', '.slick-resizable-handle', e => this.handleDoubleClick(e)); this._context = document.createElement('canvas').getContext('2d'); } @@ -67,7 +67,7 @@ export class AutoColumnSize implements Slick.Plugin { return; } - let headerColumnsQuery = $(this._grid.getContainerNode()).find('.slick-header-columns'); + let headerColumnsQuery = jQuery(this._grid.getContainerNode()).find('.slick-header-columns'); if (headerColumnsQuery && headerColumnsQuery.length) { let headerColumns = headerColumnsQuery[0]; let origCols = this._grid.getColumns(); @@ -78,7 +78,7 @@ export class AutoColumnSize implements Slick.Plugin { }); let change = false; for (let i = 0; i <= headerColumns.children.length; i++) { - let headerEl = $(headerColumns.children.item(i)); + let headerEl = jQuery(headerColumns.children.item(i)); let columnDef = headerEl.data('column'); if (columnDef) { let headerWidth = this.getElementWidth(headerEl[0]); @@ -100,7 +100,7 @@ export class AutoColumnSize implements Slick.Plugin { } private handleDoubleClick(e: JQuery.Event) { - let headerEl = $(e.currentTarget).closest('.slick-header-column'); + let headerEl = jQuery(e.currentTarget).closest('.slick-header-column'); let columnDef = headerEl.data('column'); if (!columnDef || !columnDef.resizable) { @@ -150,9 +150,9 @@ export class AutoColumnSize implements Slick.Plugin { } private getTemplateWidth(rowEl: JQuery, template: JQuery | HTMLElement): number { - let cell = $(rowEl.find('.slick-cell')); + let cell = jQuery(rowEl.find('.slick-cell')); cell.append(template); - $(cell).find('*').css('position', 'relative'); + jQuery(cell).find('*').css('position', 'relative'); return cell.outerWidth() + 1; } @@ -163,7 +163,7 @@ export class AutoColumnSize implements Slick.Plugin { texts.forEach((text, index) => { let template; if (formatFun) { - template = $('' + formatFun(index, colIndex, text, columnDef, data[index]) + ''); + template = jQuery('' + formatFun(index, colIndex, text, columnDef, data[index]) + ''); text = template.text() || text; } let length = text ? this.getElementWidthUsingCanvas(rowEl, text) : 0; @@ -176,19 +176,19 @@ export class AutoColumnSize implements Slick.Plugin { } private createRow(columnDef): JQuery { - let rowEl = $('
'); + let rowEl = jQuery('
'); rowEl.find('.slick-cell').css({ 'visibility': 'hidden', 'text-overflow': 'initial', 'white-space': 'nowrap' }); let gridCanvas = this._$container.find('.grid-canvas'); - $(gridCanvas).append(rowEl); + jQuery(gridCanvas).append(rowEl); return rowEl; } private deleteRow(rowEl: JQuery) { - $(rowEl).remove(); + jQuery(rowEl).remove(); } private getElementWidth(element: HTMLElement): number { diff --git a/src/sql/base/browser/ui/table/plugins/cellRangeSelector.ts b/src/sql/base/browser/ui/table/plugins/cellRangeSelector.ts index cac2e1ad46..71b9d566c1 100644 --- a/src/sql/base/browser/ui/table/plugins/cellRangeSelector.ts +++ b/src/sql/base/browser/ui/table/plugins/cellRangeSelector.ts @@ -92,8 +92,8 @@ export class CellRangeSelector implements ICellRangeSelector { this.grid.setActiveCell(cell.row, cell.cell); let start = this.grid.getCellFromPoint( - dd.startX - $(this.canvas).offset().left, - dd.startY - $(this.canvas).offset().top); + dd.startX - jQuery(this.canvas).offset().left, + dd.startY - jQuery(this.canvas).offset().top); dd.range = { start: start, end: undefined }; this.currentlySelectedRange = dd.range; @@ -108,8 +108,8 @@ export class CellRangeSelector implements ICellRangeSelector { e.stopImmediatePropagation(); let end = this.grid.getCellFromPoint( - e.pageX - $(this.canvas).offset().left, - e.pageY - $(this.canvas).offset().top); + e.pageX - jQuery(this.canvas).offset().left, + e.pageY - jQuery(this.canvas).offset().top); if (!this.grid.canCellBeSelected(end.row, end.cell)) { return; diff --git a/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts b/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts index ebe8b8d885..16ccea23cb 100644 --- a/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts @@ -108,7 +108,7 @@ export class CheckboxSelectColumn implements Slick.Plugin { private handleClick(e: Event, args: Slick.OnClickEventArgs): void { // clicking on a row select checkbox - if (this._grid.getColumns()[args.cell].id === this._options.columnId && $(e.target).is('input[type="checkbox"]')) { + if (this._grid.getColumns()[args.cell].id === this._options.columnId && jQuery(e.target).is('input[type="checkbox"]')) { // if editing, try to commit if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) { e.preventDefault(); @@ -131,7 +131,7 @@ export class CheckboxSelectColumn implements Slick.Plugin { } private handleHeaderClick(e: Event, args: Slick.OnHeaderClickEventArgs): void { - if (!this._options.title && args.column.id === this._options.columnId && $(e.target).is('input[type="checkbox"]')) { + if (!this._options.title && args.column.id === this._options.columnId && jQuery(e.target).is('input[type="checkbox"]')) { // if editing, try to commit if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) { e.preventDefault(); @@ -139,7 +139,7 @@ export class CheckboxSelectColumn implements Slick.Plugin { return; } - if ($(e.target).is('input[checked]')) { + if (jQuery(e.target).is('input[checked]')) { let rows = []; for (let i = 0; i < this._grid.getDataLength(); i++) { rows.push(i); diff --git a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts index 2831dcd939..6277179c5f 100644 --- a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts @@ -41,14 +41,14 @@ export class HeaderFilter { .subscribe(this.grid.onKeyDown, (e) => this.handleKeyDown); this.grid.setColumns(this.grid.getColumns()); - $(document.body).bind('mousedown', this.handleBodyMouseDown); - $(document.body).bind('keydown', this.handleKeyDown); + jQuery(document.body).bind('mousedown', this.handleBodyMouseDown); + jQuery(document.body).bind('keydown', this.handleKeyDown); } public destroy() { this.handler.unsubscribeAll(); - $(document.body).unbind('mousedown', this.handleBodyMouseDown); - $(document.body).unbind('keydown', this.handleKeyDown); + jQuery(document.body).unbind('mousedown', this.handleBodyMouseDown); + jQuery(document.body).unbind('keydown', this.handleKeyDown); } private handleKeyDown = (e) => { @@ -60,7 +60,7 @@ export class HeaderFilter { } private handleBodyMouseDown = (e) => { - if (this.$menu && this.$menu[0] !== e.target && !$.contains(this.$menu[0], e.target)) { + if (this.$menu && this.$menu[0] !== e.target && !jQuery.contains(this.$menu[0], e.target)) { this.hideMenu(); e.preventDefault(); e.stopPropagation(); @@ -79,7 +79,7 @@ export class HeaderFilter { if (column.id === '_detail_selector') { return; } - let $el = $('
') + let $el = jQuery('
') .addClass('slick-header-menubutton') .data('column', column); @@ -87,19 +87,19 @@ export class HeaderFilter { } private handleBeforeHeaderCellDestroy(e, args) { - $(args.node) + jQuery(args.node) .find('.slick-header-menubutton') .remove(); } private addMenuItem(menu, columnDef, title, command, image) { - let $item = $('
') + let $item = jQuery('
') .data('command', command) .data('column', columnDef) .bind('click', (e) => this.handleMenuItemClick(e, command, columnDef)) .appendTo(menu); - let $icon = $('
') + let $icon = jQuery('
') .appendTo($item); if (title === 'Sort Ascending') { @@ -108,17 +108,17 @@ export class HeaderFilter { $icon.get(0).className += ' descending'; } - $('') + jQuery('') .text(title) .appendTo($item); } private addMenuInput(menu, columnDef) { const self = this; - $('') + jQuery('') .data('column', columnDef) .bind('keyup', (e) => { - let filterVals = this.getFilterValuesByInput($(e.target)); + let filterVals = this.getFilterValuesByInput(jQuery(e.target)); self.updateFilterInputs(menu, columnDef, filterVals); }) .appendTo(menu); @@ -139,15 +139,15 @@ export class HeaderFilter { + '/>' + filterItems[i] + ''; } let $filter = menu.find('.filter'); - $filter.empty().append($(filterOptions)); + $filter.empty().append(jQuery(filterOptions)); - $(':checkbox', $filter).bind('click', (e) => { - this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, $(e.target)); + jQuery(':checkbox', $filter).bind('click', (e) => { + this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, jQuery(e.target)); }); } private showFilter(e) { - let $menuButton = $(e.target); + let $menuButton = jQuery(e.target); this.columnDef = $menuButton.data('column'); this.columnDef.filterValues = this.columnDef.filterValues || []; @@ -167,7 +167,7 @@ export class HeaderFilter { } if (!this.$menu) { - this.$menu = $('
').appendTo(document.body); + this.$menu = jQuery('
').appendTo(document.body); } this.$menu.empty(); @@ -186,15 +186,15 @@ export class HeaderFilter { + '/>' + escape(filterItems[i]) + ''; } } - let $filter = $('
') - .append($(filterOptions)) + let $filter = jQuery('
') + .append(jQuery(filterOptions)) .appendTo(this.$menu); this.okButton = new Button(this.$menu.get(0)); this.okButton.label = 'OK'; this.okButton.title = 'OK'; this.okButton.element.id = 'filter-ok-button'; - let okElement = $('#filter-ok-button'); + let okElement = jQuery('#filter-ok-button'); okElement.bind('click', (ev) => { this.columnDef.filterValues = this.workingFilters.splice(0); this.setButtonImage($menuButton, this.columnDef.filterValues.length > 0); @@ -205,7 +205,7 @@ export class HeaderFilter { this.clearButton.label = 'Clear'; this.clearButton.title = 'Clear'; this.clearButton.element.id = 'filter-clear-button'; - let clearElement = $('#filter-clear-button'); + let clearElement = jQuery('#filter-clear-button'); clearElement.bind('click', (ev) => { this.columnDef.filterValues.length = 0; this.setButtonImage($menuButton, false); @@ -216,23 +216,23 @@ export class HeaderFilter { this.cancelButton.label = 'Cancel'; this.cancelButton.title = 'Cancel'; this.cancelButton.element.id = 'filter-cancel-button'; - let cancelElement = $('#filter-cancel-button'); + let cancelElement = jQuery('#filter-cancel-button'); cancelElement.bind('click', () => this.hideMenu()); attachButtonStyler(this.okButton, this._themeService); attachButtonStyler(this.clearButton, this._themeService); attachButtonStyler(this.cancelButton, this._themeService); - $(':checkbox', $filter).bind('click', (e) => { - this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, $(e.target)); + jQuery(':checkbox', $filter).bind('click', (e) => { + this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, jQuery(e.target)); }); - let offset = $(e.target).offset(); - let left = offset.left - this.$menu.width() + $(e.target).width() - 8; + let offset = jQuery(e.target).offset(); + let left = offset.left - this.$menu.width() + jQuery(e.target).width() - 8; - let menutop = offset.top + $(e.target).height(); + let menutop = offset.top + jQuery(e.target).height(); - if (menutop + offset.top > $(window).height()) { - menutop -= (this.$menu.height() + $(e.target).height() + 8); + if (menutop + offset.top > jQuery(window).height()) { + menutop -= (this.$menu.height() + jQuery(e.target).height() + 8); } this.$menu.css('top', menutop) .css('left', (left > 0 ? left : 0)); @@ -249,10 +249,10 @@ export class HeaderFilter { if ($checkbox.val() < 0) { // Select All if ($checkbox.prop('checked')) { - $(':checkbox', $filter).prop('checked', true); + jQuery(':checkbox', $filter).prop('checked', true); workingFilters = filterItems.slice(0); } else { - $(':checkbox', $filter).prop('checked', false); + jQuery(':checkbox', $filter).prop('checked', false); workingFilters.length = 0; } } else { @@ -359,4 +359,4 @@ export class HeaderFilter { e.preventDefault(); e.stopPropagation(); } -} \ No newline at end of file +} diff --git a/src/sql/base/browser/ui/table/plugins/rowDetailView.ts b/src/sql/base/browser/ui/table/plugins/rowDetailView.ts index 7634e9a88c..92466db1a0 100644 --- a/src/sql/base/browser/ui/table/plugins/rowDetailView.ts +++ b/src/sql/base/browser/ui/table/plugins/rowDetailView.ts @@ -60,12 +60,12 @@ export class RowDetailView { } public setOptions(options: any) { - this._options = $.extend(true, {}, this._options, options); + this._options = jQuery.extend(true, {}, this._options, options); } public handleClick(e: any, args: any): void { // clicking on a row select checkbox - if (this._options.useRowClick || this._grid.getColumns()[args.cell].id === this._options.columnId && $(e.target).hasClass('detailView-toggle')) { + if (this._options.useRowClick || this._grid.getColumns()[args.cell].id === this._options.columnId && jQuery(e.target).hasClass('detailView-toggle')) { // if editing, try to commit if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) { e.preventDefault(); @@ -151,9 +151,9 @@ export class RowDetailView { // Saves the current state of the detail view public saveDetailView(item) { - let view = $('#innerDetailView_' + item.id); + let view = jQuery('#innerDetailView_' + item.id); if (view) { - let html = $('#innerDetailView_' + item.id).html(); + let html = jQuery('#innerDetailView_' + item.id).html(); if (html !== undefined) { item._detailContent = html; } diff --git a/src/sql/base/browser/ui/table/plugins/rowSelectionModel.plugin.ts b/src/sql/base/browser/ui/table/plugins/rowSelectionModel.plugin.ts index 884936feb5..35f2de491d 100644 --- a/src/sql/base/browser/ui/table/plugins/rowSelectionModel.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/rowSelectionModel.plugin.ts @@ -128,7 +128,7 @@ export class RowSelectionModel implements Slick.Selec } let selection = this.rangesToRows(this._ranges); - let idx = $.inArray(cell.row, selection); + let idx = jQuery.inArray(cell.row, selection); if (idx === -1 && (e.ctrlKey || e.metaKey)) { selection.push(cell.row); diff --git a/src/sql/parts/disasterRecovery/backup/backup.component.ts b/src/sql/parts/disasterRecovery/backup/backup.component.ts index c6274b1cf1..0313748493 100644 --- a/src/sql/parts/disasterRecovery/backup/backup.component.ts +++ b/src/sql/parts/disasterRecovery/backup/backup.component.ts @@ -11,7 +11,6 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { ListBox } from 'sql/base/browser/ui/listBox/listBox'; import { ModalFooterStyle } from 'sql/workbench/browser/modal/modal'; -import { CategoryView } from 'sql/workbench/browser/modal/optionsDialog'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler'; import { IConnectionProfile } from 'sql/platform/connection/common/interfaces'; @@ -19,20 +18,19 @@ import * as BackupConstants from 'sql/parts/disasterRecovery/backup/constants'; import { IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService'; import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants'; import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement'; -import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview'; import { IFileBrowserDialogController } from 'sql/workbench/services/fileBrowser/common/fileBrowserDialogController'; import { IBackupUiService } from 'sql/workbench/services/backup/common/backupUiService'; import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import * as lifecycle from 'vs/base/common/lifecycle'; import { localize } from 'vs/nls'; -import * as DOM from 'vs/base/browser/dom'; import * as types from 'vs/base/common/types'; import * as strings from 'vs/base/common/strings'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox'; export const BACKUP_SELECTOR: string = 'backup-component'; @@ -337,13 +335,6 @@ export class BackupComponent { } ngAfterViewInit() { - // Set category view for advanced options. This should be defined in ngAfterViewInit so that it correctly calculates the text height after data binding. - var splitview = new ScrollableSplitView(this.advancedOptionElement.nativeElement); - var advancedBodySize = DOM.getTotalHeight(this.advancedOptionBodyElement.nativeElement); - var categoryView = this.instantiationService.createInstance(CategoryView, this.advancedOptionBodyElement.nativeElement, advancedBodySize, { title: LocalizedStrings.ADVANCED_CONFIGURATION, id: LocalizedStrings.ADVANCED_CONFIGURATION, ariaHeaderLabel: LocalizedStrings.ADVANCED_CONFIGURATION }); - splitview.addView(categoryView, 0); - splitview.layout(advancedBodySize + this._advancedHeaderSize); - this._backupUiService.onShowBackupDialog(); } @@ -434,14 +425,14 @@ export class BackupComponent { // Set backup path list this.setDefaultBackupPaths(); - var pathlist = []; - for (var i in this.backupPathTypePairs) { - pathlist.push(i); + let pathlist: ISelectOptionItem[] = []; + for (let i in this.backupPathTypePairs) { + pathlist.push({ text: i }); } this.pathListBox.setOptions(pathlist, 0); // Set encryption - var encryptorItems = this.populateEncryptorCombo(); + let encryptorItems = this.populateEncryptorCombo(); this.encryptorSelectBox.setOptions(encryptorItems, 0); if (encryptorItems.length === 0) { @@ -729,9 +720,9 @@ export class BackupComponent { } private populateEncryptorCombo(): string[] { - var encryptorCombo = []; + let encryptorCombo = []; this.backupEncryptors.forEach((encryptor) => { - var encryptorTypeStr = (encryptor.encryptorType === 0 ? BackupConstants.serverCertificate : BackupConstants.asymmetricKey); + let encryptorTypeStr = (encryptor.encryptorType === 0 ? BackupConstants.serverCertificate : BackupConstants.asymmetricKey); encryptorCombo.push(encryptor.encryptorName + '(' + encryptorTypeStr + ')'); }); return encryptorCombo; @@ -867,18 +858,18 @@ export class BackupComponent { } private createBackupInfo(): MssqlBackupInfo { - var backupPathArray = []; - for (var i in this.backupPathTypePairs) { + let backupPathArray = []; + for (let i in this.backupPathTypePairs) { backupPathArray.push(i); } // get encryptor type and name - var encryptorName = ''; - var encryptorType; + let encryptorName = ''; + let encryptorType; if (this.encryptCheckBox.checked && this.encryptorSelectBox.value !== '') { - var selectedEncryptor = this.encryptorSelectBox.value; - var encryptorTypeStr = selectedEncryptor.substring(selectedEncryptor.lastIndexOf('(') + 1, selectedEncryptor.lastIndexOf(')')); + let selectedEncryptor = this.encryptorSelectBox.value; + let encryptorTypeStr = selectedEncryptor.substring(selectedEncryptor.lastIndexOf('(') + 1, selectedEncryptor.lastIndexOf(')')); encryptorType = (encryptorTypeStr === BackupConstants.serverCertificate ? 0 : 1); encryptorName = selectedEncryptor.substring(0, selectedEncryptor.lastIndexOf('(')); } diff --git a/src/sql/parts/grid/directives/mousedown.directive.ts b/src/sql/parts/grid/directives/mousedown.directive.ts deleted file mode 100644 index 39b764666a..0000000000 --- a/src/sql/parts/grid/directives/mousedown.directive.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* -------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the Source EULA. See License.txt in the project root for license information. - * ------------------------------------------------------------------------------------------ */ -import { ElementRef, Directive, Inject, Output, EventEmitter, forwardRef } from '@angular/core'; - -@Directive({ - selector: '[mousedown]' -}) -export class MouseDownDirective { - @Output('mousedown') onMouseDown = new EventEmitter(); - - constructor(@Inject(forwardRef(() => ElementRef)) private _el: ElementRef) { - const self = this; - setTimeout(() => { - let $gridCanvas = $(this._el.nativeElement).find('.grid-canvas'); - $gridCanvas.on('mousedown', () => { - self.onMouseDown.emit(); - }); - let jQueryCast: any = $; - let mouseDownFuncs: any[] = jQueryCast._data($gridCanvas[0], 'events')['mousedown']; - // reverse the event array so that our event fires first. - mouseDownFuncs.reverse(); - }); - } -} diff --git a/src/sql/parts/grid/directives/scroll.directive.ts b/src/sql/parts/grid/directives/scroll.directive.ts deleted file mode 100644 index 5f512eeb5a..0000000000 --- a/src/sql/parts/grid/directives/scroll.directive.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* -------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the Source EULA. See License.txt in the project root for license information. - * ------------------------------------------------------------------------------------------ */ -import { ElementRef, Directive, Input, Output, EventEmitter, forwardRef, - Inject } from '@angular/core'; -import { Observable } from 'rxjs/Observable'; - -@Directive({ - selector: '[onScroll]' -}) -export class ScrollDirective { - @Input() scrollEnabled: boolean = true; - @Output('onScroll') onScroll = new EventEmitter(); - - constructor(@Inject(forwardRef(() => ElementRef)) private _el: ElementRef) { - const self = this; - Observable.fromEvent(this._el.nativeElement, 'scroll').subscribe((event) => { - if (self.scrollEnabled) { - self.onScroll.emit(self._el.nativeElement.scrollTop); - } - }); - } -} diff --git a/src/sql/parts/grid/views/editData/editData.component.ts b/src/sql/parts/grid/views/editData/editData.component.ts index 6078096e7b..e77bcf53f3 100644 --- a/src/sql/parts/grid/views/editData/editData.component.ts +++ b/src/sql/parts/grid/views/editData/editData.component.ts @@ -173,7 +173,7 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On this.onActiveCellChanged = this.onCellSelect; this.onCellEditEnd = (event: Slick.OnCellChangeEventArgs): void => { - if(self.currentEditCellValue !== event.item[event.cell]) { + if (self.currentEditCellValue !== event.item[event.cell]) { self.currentCell.isDirty = true; } // Store the value that was set @@ -541,12 +541,12 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On let grid = slick._grid; if (dirtyState) { // Change cell color - $(grid.getCellNode(row, column)).addClass('dirtyCell').removeClass('selected'); + jQuery(grid.getCellNode(row, column)).addClass('dirtyCell').removeClass('selected'); if (this.dirtyCells.indexOf(column) === -1) { this.dirtyCells.push(column); } } else { - $(grid.getCellNode(row, column)).removeClass('dirtyCell'); + jQuery(grid.getCellNode(row, column)).removeClass('dirtyCell'); if (this.dirtyCells.indexOf(column) !== -1) { this.dirtyCells.splice(this.dirtyCells.indexOf(column), 1); } @@ -559,17 +559,17 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On let grid = slick._grid; if (dirtyState) { // Change row header color - $(grid.getCellNode(row, 0)).addClass('dirtyRowHeader'); + jQuery(grid.getCellNode(row, 0)).addClass('dirtyRowHeader'); } else { - $(grid.getCellNode(row, 0)).removeClass('dirtyRowHeader'); + jQuery(grid.getCellNode(row, 0)).removeClass('dirtyRowHeader'); } } // Sets CSS to clean the entire grid of dirty state cells and rows private setGridClean(): void { // Remove dirty classes from the entire table - let allRows = $($('.grid-canvas').children()); - let allCells = $(allRows.children()); + let allRows = jQuery(jQuery('.grid-canvas').children()); + let allCells = jQuery(allRows.children()); allCells.removeClass('dirtyCell').removeClass('dirtyRowHeader'); this.dirtyCells = []; } @@ -720,7 +720,7 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On private setCurrentCell(row: number, column: number) { // Only update if we're actually changing cells - if(this.currentCell && (row !== this.currentCell.row || column !== this.currentCell.column)) { + if (this.currentCell && (row !== this.currentCell.row || column !== this.currentCell.column)) { this.currentCell = { row: row, column: column, diff --git a/src/sql/parts/grid/views/gridParentComponent.ts b/src/sql/parts/grid/views/gridParentComponent.ts index 28a5852020..5daf9c8e73 100644 --- a/src/sql/parts/grid/views/gridParentComponent.ts +++ b/src/sql/parts/grid/views/gridParentComponent.ts @@ -519,7 +519,7 @@ export abstract class GridParentComponent { private handleQueryPlanLink(cellRef: string, value: string): void { const self = this; - $(cellRef).children('.xmlLink').click(function (): void { + jQuery(cellRef).children('.xmlLink').click(function (): void { self.queryEditorService.newQueryPlanEditor(value); }); } @@ -527,7 +527,7 @@ export abstract class GridParentComponent { private handleLink(cellRef: string, row: number, dataContext: JSON, colDef: any, linkType: string): void { const self = this; let value = self.getCellValueString(dataContext, colDef); - $(cellRef).children('.xmlLink').click(function (): void { + jQuery(cellRef).children('.xmlLink').click(function (): void { self.dataService.openLink(value, colDef.name, linkType); }); } diff --git a/src/sql/parts/jobManagement/views/alertsView.component.ts b/src/sql/parts/jobManagement/views/alertsView.component.ts index ae504f7f14..5d1848490f 100644 --- a/src/sql/parts/jobManagement/views/alertsView.component.ts +++ b/src/sql/parts/jobManagement/views/alertsView.component.ts @@ -144,8 +144,8 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On panelRows: 1 }); columns.unshift(rowDetail.getColumnDefinition()); - $(this._gridEl.nativeElement).empty(); - $(this.actionBarContainer.nativeElement).empty(); + jQuery(this._gridEl.nativeElement).empty(); + jQuery(this.actionBarContainer.nativeElement).empty(); this.initActionBar(); this._table = new Table(this._gridEl.nativeElement, { columns }, this.options); @@ -230,4 +230,4 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri; this._commandService.executeCommand('agent.openAlertDialog', ownerUri, null, null); } -} \ No newline at end of file +} diff --git a/src/sql/parts/jobManagement/views/jobHistory.component.ts b/src/sql/parts/jobManagement/views/jobHistory.component.ts index 78bb074dd2..6c29635a3a 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.component.ts +++ b/src/sql/parts/jobManagement/views/jobHistory.component.ts @@ -17,8 +17,10 @@ import { RunJobAction, StopJobAction, EditJobAction, JobsRefreshAction } from 's import { JobCacheObject } from 'sql/platform/jobManagement/common/jobManagementService'; import { JobManagementUtilities } from 'sql/platform/jobManagement/common/jobManagementUtilities'; import { IJobManagementService } from 'sql/platform/jobManagement/common/interfaces'; -import { JobHistoryController, JobHistoryDataSource, - JobHistoryRenderer, JobHistoryFilter, JobHistoryModel, JobHistoryRow } from 'sql/parts/jobManagement/views/jobHistoryTree'; +import { + JobHistoryController, JobHistoryDataSource, + JobHistoryRenderer, JobHistoryFilter, JobHistoryModel, JobHistoryRow +} from 'sql/parts/jobManagement/views/jobHistoryTree'; import { JobStepsViewRow } from 'sql/parts/jobManagement/views/jobStepsViewTree'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { attachListStyler } from 'vs/platform/theme/common/styler'; @@ -210,7 +212,7 @@ export class JobHistoryComponent extends JobManagementView implements OnInit { }); self._stepRows.unshift(new JobStepsViewRow()); self._stepRows[0].rowID = 'stepsColumn' + self._agentJobInfo.jobId; - self._stepRows[0].stepId = nls.localize('stepRow.stepID','Step ID'); + self._stepRows[0].stepId = nls.localize('stepRow.stepID', 'Step ID'); self._stepRows[0].stepName = nls.localize('stepRow.stepName', 'Step Name'); self._stepRows[0].message = nls.localize('stepRow.message', 'Message'); this._showSteps = self._stepRows.length > 1; @@ -251,7 +253,7 @@ export class JobHistoryComponent extends JobManagementView implements OnInit { } private toggleCollapse(): void { - let arrow: HTMLElement = $('.resultsViewCollapsible').get(0); + let arrow: HTMLElement = jQuery('.resultsViewCollapsible').get(0); let checkbox: any = document.getElementById('accordion'); if (arrow.className === 'resultsViewCollapsible' && checkbox.checked === false) { arrow.className = 'resultsViewCollapsible collapsed'; @@ -318,8 +320,8 @@ export class JobHistoryComponent extends JobManagementView implements OnInit { } public layout() { - let historyDetails = $('.overview-container').get(0); - let statusBar = $('.part.statusbar').get(0); + let historyDetails = jQuery('.overview-container').get(0); + let statusBar = jQuery('.part.statusbar').get(0); if (historyDetails && statusBar) { let historyBottom = historyDetails.getBoundingClientRect().bottom; let statusTop = statusBar.getBoundingClientRect().top; diff --git a/src/sql/parts/jobManagement/views/jobStepsView.component.ts b/src/sql/parts/jobManagement/views/jobStepsView.component.ts index 9e8417a57c..79665cf541 100644 --- a/src/sql/parts/jobManagement/views/jobStepsView.component.ts +++ b/src/sql/parts/jobManagement/views/jobStepsView.component.ts @@ -59,10 +59,10 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit, } ngAfterContentChecked() { - $('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); + jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); this.layout(); this._tree.onDidScroll(() => { - $('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); + jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); }); this._treeController.onClick = (tree, element, event, origin = 'mouse') => { const payload = { origin: origin }; @@ -80,12 +80,12 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit, tree.setFocus(element, payload); tree.setSelection([element], payload); } - $('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); + jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); return true; }; this._treeController.onKeyDown = (tree, event) => { this._treeController.onKeyDownWrapper(tree, event); - $('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); + jQuery('.steps-tree .step-column-heading').closest('.monaco-tree-row').addClass('step-column-row'); return true; }; this._tree.onDidFocus(() => { @@ -118,4 +118,3 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit, } } } - diff --git a/src/sql/parts/jobManagement/views/jobsView.component.ts b/src/sql/parts/jobManagement/views/jobsView.component.ts index 61d7136b64..8686d87375 100644 --- a/src/sql/parts/jobManagement/views/jobsView.component.ts +++ b/src/sql/parts/jobManagement/views/jobsView.component.ts @@ -134,8 +134,8 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe } public layout() { - let jobsViewToolbar = $('jobsview-component .agent-actionbar-container').get(0); - let statusBar = $('.part.statusbar').get(0); + let jobsViewToolbar = jQuery('jobsview-component .agent-actionbar-container').get(0); + let statusBar = jQuery('.part.statusbar').get(0); if (jobsViewToolbar && statusBar) { let toolbarBottom = jobsViewToolbar.getBoundingClientRect().bottom + ACTIONBAR_PADDING; let statusTop = statusBar.getBoundingClientRect().top; @@ -181,8 +181,8 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe columns.unshift(this.rowDetail.getColumnDefinition()); let filterPlugin = new HeaderFilter({}, this._themeService); this.filterPlugin = filterPlugin; - $(this._gridEl.nativeElement).empty(); - $(this.actionBarContainer.nativeElement).empty(); + jQuery(this._gridEl.nativeElement).empty(); + jQuery(this.actionBarContainer.nativeElement).empty(); this.initActionBar(); this._table = new Table(this._gridEl.nativeElement, { columns }, options); this._table.grid.setData(this.dataView, true); @@ -353,7 +353,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe this.expandJobs(start); // tooltip for job name - $('.jobview-jobnamerow').hover(e => { + jQuery('.jobview-jobnamerow').hover(e => { let currentTarget = e.currentTarget; currentTarget.title = currentTarget.innerText; }); @@ -362,9 +362,9 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe this._table.grid.onColumnsResized.subscribe((e, data: any) => { let nameWidth: number = data.grid.getColumns()[1].width; // adjust job name when resized - $('#jobsDiv .jobview-grid .slick-cell.l1.r1 .jobview-jobnametext').css('width', `${nameWidth - 10}px`); + jQuery('#jobsDiv .jobview-grid .slick-cell.l1.r1 .jobview-jobnametext').css('width', `${nameWidth - 10}px`); // adjust error message when resized - $('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%'); + jQuery('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%'); // generate job charts again self.jobs.forEach(job => { @@ -376,11 +376,11 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe }); }); - $('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) => + jQuery('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) => this.highlightErrorRows(e1), (e2) => this.hightlightNonErrorRows(e2)); this._table.grid.onScroll.subscribe((e) => { - $('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) => + jQuery('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) => this.highlightErrorRows(e1), (e2) => this.hightlightNonErrorRows(e2)); }); @@ -393,15 +393,15 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe private highlightErrorRows(e) { // highlight the error row as well if a failing job row is hovered if (e.currentTarget.children.item(0).classList.contains('job-with-error')) { - let target = $(e.currentTarget); - let targetChildren = $(e.currentTarget.children); + let target = jQuery(e.currentTarget); + let targetChildren = jQuery(e.currentTarget.children); let siblings = target.nextAll().toArray(); let top = parseInt(target.css('top'), 10); for (let i = 0; i < siblings.length; i++) { let sibling = siblings[i]; - let siblingTop = parseInt($(sibling).css('top'), 10); + let siblingTop = parseInt(jQuery(sibling).css('top'), 10); if (siblingTop === top + ROW_HEIGHT) { - $(sibling.children).addClass('hovered'); + jQuery(sibling.children).addClass('hovered'); sibling.onmouseenter = (e) => { targetChildren.addClass('hovered'); }; @@ -417,14 +417,14 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe private hightlightNonErrorRows(e) { // switch back to original background if (e.currentTarget.children.item(0).classList.contains('job-with-error')) { - let target = $(e.currentTarget); + let target = jQuery(e.currentTarget); let siblings = target.nextAll().toArray(); let top = parseInt(target.css('top'), 10); for (let i = 0; i < siblings.length; i++) { let sibling = siblings[i]; - let siblingTop = parseInt($(sibling).css('top'), 10); + let siblingTop = parseInt(jQuery(sibling).css('top'), 10); if (siblingTop === top + ROW_HEIGHT) { - $(sibling.children).removeClass('hovered'); + jQuery(sibling.children).removeClass('hovered'); break; } } @@ -622,7 +622,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe let chartHeights = this.getChartHeights(jobHistories); let runCharts = []; for (let i = 0; i < chartHeights.length; i++) { - let runGraph = $(`table.jobprevruns#${jobId} > tbody > tr > td > div.bar${i}`); + let runGraph = jQuery(`table.jobprevruns#${jobId} > tbody > tr > td > div.bar${i}`); if (runGraph.length > 0) { runGraph.css('height', chartHeights[i]); let bgColor = jobHistories[i].runStatus === 0 ? 'red' : 'green'; @@ -842,9 +842,9 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe let bgColor = theme.getColor(tableBackground); let cellColor = theme.getColor(cellBackground); let borderColor = theme.getColor(cellBorderColor); - let headerColumns = $('#agentViewDiv .slick-header-column'); - let cells = $('.grid-canvas .ui-widget-content.slick-row .slick-cell'); - let cellDetails = $('#jobsDiv .dynamic-cell-detail'); + let headerColumns = jQuery('#agentViewDiv .slick-header-column'); + let cells = jQuery('.grid-canvas .ui-widget-content.slick-row .slick-cell'); + let cellDetails = jQuery('#jobsDiv .dynamic-cell-detail'); headerColumns.toArray().forEach(col => { col.style.background = bgColor.toString(); }); @@ -952,4 +952,4 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri; await this._commandService.executeCommand('agent.openJobDialog', ownerUri); } -} \ No newline at end of file +} diff --git a/src/sql/parts/jobManagement/views/operatorsView.component.ts b/src/sql/parts/jobManagement/views/operatorsView.component.ts index 7feab3bfe5..d22c87a05e 100644 --- a/src/sql/parts/jobManagement/views/operatorsView.component.ts +++ b/src/sql/parts/jobManagement/views/operatorsView.component.ts @@ -145,8 +145,8 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit, }); columns.unshift(rowDetail.getColumnDefinition()); - $(this._gridEl.nativeElement).empty(); - $(this.actionBarContainer.nativeElement).empty(); + jQuery(this._gridEl.nativeElement).empty(); + jQuery(this.actionBarContainer.nativeElement).empty(); this.initActionBar(); this._table = new Table(this._gridEl.nativeElement, { columns }, this.options); this._table.grid.setData(this.dataView, true); @@ -226,4 +226,4 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit, let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri; this._commandService.executeCommand('agent.openOperatorDialog', ownerUri); } -} \ No newline at end of file +} diff --git a/src/sql/parts/jobManagement/views/proxiesView.component.ts b/src/sql/parts/jobManagement/views/proxiesView.component.ts index 8d77562039..9318832e83 100644 --- a/src/sql/parts/jobManagement/views/proxiesView.component.ts +++ b/src/sql/parts/jobManagement/views/proxiesView.component.ts @@ -148,8 +148,8 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O }); columns.unshift(rowDetail.getColumnDefinition()); - $(this._gridEl.nativeElement).empty(); - $(this.actionBarContainer.nativeElement).empty(); + jQuery(this._gridEl.nativeElement).empty(); + jQuery(this.actionBarContainer.nativeElement).empty(); this.initActionBar(); this._table = new Table(this._gridEl.nativeElement, { columns }, this.options); this._table.grid.setData(this.dataView, true); @@ -234,4 +234,4 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O } }); } -} \ No newline at end of file +} diff --git a/src/sql/workbench/browser/modal/dialogHelper.ts b/src/sql/workbench/browser/modal/dialogHelper.ts index 630cd1cc6b..99f21c6fab 100644 --- a/src/sql/workbench/browser/modal/dialogHelper.ts +++ b/src/sql/workbench/browser/modal/dialogHelper.ts @@ -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): 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; -} \ No newline at end of file +} diff --git a/src/sql/workbench/browser/modal/optionsDialog.ts b/src/sql/workbench/browser/modal/optionsDialog.ts index 1eb7405c18..da509853ad 100644 --- a/src/sql/workbench/browser/modal/optionsDialog.ts +++ b/src/sql/workbench/browser/modal/optionsDialog.ts @@ -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(); diff --git a/src/sql/workbench/browser/modal/optionsDialogHelper.ts b/src/sql/workbench/browser/modal/optionsDialogHelper.ts index 6d9d44207a..bb600b33b7 100644 --- a/src/sql/workbench/browser/modal/optionsDialogHelper.ts +++ b/src/sql/workbench/browser/modal/optionsDialogHelper.ts @@ -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; -} \ No newline at end of file +} diff --git a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts index 77d1328f74..fdf32c5252 100644 --- a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts @@ -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); }); }); diff --git a/src/sql/workbench/services/connection/browser/connectionWidget.ts b/src/sql/workbench/services/connection/browser/connectionWidget.ts index 2b02f5e3fe..484840804f 100644 --- a/src/sql/workbench/services/connection/browser/connectionWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts @@ -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 { 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) { diff --git a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts index 528e061fa9..6ff28bd568 100644 --- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts +++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts @@ -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(); public onOk: Event = 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; } } } diff --git a/src/sqltest/parts/common/optionsDialogHelper.test.ts b/src/sqltest/parts/common/optionsDialogHelper.test.ts index 71812d55fe..7b560d5d7e 100644 --- a/src/sqltest/parts/common/optionsDialogHelper.test.ts +++ b/src/sqltest/parts/common/optionsDialogHelper.test.ts @@ -7,10 +7,10 @@ import * as OptionsDialogHelper from 'sql/workbench/browser/modal/optionsDialogHelper'; import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox'; import * as azdata from 'azdata'; -import { Builder, $ } from 'sql/base/browser/builder'; import * as TypeMoq from 'typemoq'; import * as assert from 'assert'; import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes'; +import { $ } from 'vs/base/browser/dom'; suite('Advanced options helper tests', () => { var possibleInputs: string[]; @@ -98,9 +98,7 @@ suite('Advanced options helper tests', () => { isArray: undefined }; - - let builder: Builder = $().div(); - inputBox = TypeMoq.Mock.ofType(InputBox, TypeMoq.MockBehavior.Loose, builder.getHTMLElement(), null, null); + inputBox = TypeMoq.Mock.ofType(InputBox, TypeMoq.MockBehavior.Loose, $('div'), null, null); inputBox.callBase = true; inputBox.setup(x => x.validate()).returns(() => isValid); inputBox.setup(x => x.value).returns(() => inputValue); @@ -412,4 +410,4 @@ suite('Advanced options helper tests', () => { assert.equal(optionsMap['General'].length, 1); }); -}); \ No newline at end of file +}); diff --git a/src/sqltest/parts/connection/advancedPropertiesDialog.test.ts b/src/sqltest/parts/connection/advancedPropertiesDialog.test.ts index 7ab81ae053..4d2f5b1e2d 100644 --- a/src/sqltest/parts/connection/advancedPropertiesDialog.test.ts +++ b/src/sqltest/parts/connection/advancedPropertiesDialog.test.ts @@ -6,12 +6,12 @@ 'use strict'; import { OptionsDialog } from 'sql/workbench/browser/modal/optionsDialog'; import { AdvancedPropertiesController } from 'sql/parts/connection/connectionDialog/advancedPropertiesController'; -import { Builder, $ } from 'sql/base/browser/builder'; import { ContextKeyServiceStub } from 'sqltest/stubs/contextKeyServiceStub'; import * as azdata from 'azdata'; import * as TypeMoq from 'typemoq'; import * as assert from 'assert'; import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes'; +import { $ } from 'vs/base/browser/dom'; suite('Advanced properties dialog tests', () => { var advancedController: AdvancedPropertiesController; @@ -86,7 +86,6 @@ suite('Advanced properties dialog tests', () => { test('advanced dialog should open when showDialog in advancedController get called', () => { var isAdvancedDialogCalled = false; let options: { [name: string]: any } = {}; - let builder: Builder = $().div(); let advanceDialog = TypeMoq.Mock.ofType(OptionsDialog, TypeMoq.MockBehavior.Strict, '', // title '', // name @@ -102,7 +101,7 @@ suite('Advanced properties dialog tests', () => { isAdvancedDialogCalled = true; }); advancedController.advancedDialog = advanceDialog.object; - advancedController.showDialog(providerOptions, builder.getHTMLElement(), options); + advancedController.showDialog(providerOptions, $('div'), options); assert.equal(isAdvancedDialogCalled, true); }); -}); \ No newline at end of file +}); diff --git a/src/sqltest/parts/connection/connectionTreeActions.test.ts b/src/sqltest/parts/connection/connectionTreeActions.test.ts index 19b5ba5acd..5846c83daa 100644 --- a/src/sqltest/parts/connection/connectionTreeActions.test.ts +++ b/src/sqltest/parts/connection/connectionTreeActions.test.ts @@ -25,13 +25,13 @@ import { TreeNode } from 'sql/parts/objectExplorer/common/treeNode'; import { NodeType } from 'sql/parts/objectExplorer/common/nodeType'; import { Tree } from 'vs/base/parts/tree/browser/treeImpl'; import { ServerTreeDataSource } from 'sql/parts/objectExplorer/viewlet/serverTreeDataSource'; -import { Builder, $ } from 'sql/base/browser/builder'; import { Emitter } from 'vs/base/common/event'; import Severity from 'vs/base/common/severity'; import { ObjectExplorerActionsContext, ManageConnectionAction } from 'sql/parts/objectExplorer/viewlet/objectExplorerActions'; import { IConnectionResult, IConnectionParams } from 'sql/platform/connection/common/connectionManagement'; import { TreeSelectionHandler } from 'sql/parts/objectExplorer/viewlet/treeSelectionHandler'; import { CapabilitiesTestService } from 'sqltest/stubs/capabilitiesTestService'; +import { $ } from 'vs/base/browser/dom'; suite('SQL Connection Tree Action tests', () => { let errorMessageService: TypeMoq.Mock; @@ -400,9 +400,8 @@ suite('SQL Connection Tree Action tests', () => { objectExplorerService.callBase = true; objectExplorerService.setup(x => x.getObjectExplorerNode(TypeMoq.It.isAny())).returns(() => tablesNode); objectExplorerService.setup(x => x.refreshTreeNode(TypeMoq.It.isAny(), TypeMoq.It.isAny())).returns(() => Promise.resolve([table1Node, table2Node])); - let builder: Builder = $().div(); var dataSource = new ServerTreeDataSource(objectExplorerService.object, connectionManagementService.object, undefined); - let tree = TypeMoq.Mock.ofType(Tree, TypeMoq.MockBehavior.Loose, builder.getHTMLElement(), { dataSource }); + let tree = TypeMoq.Mock.ofType(Tree, TypeMoq.MockBehavior.Loose, $('div'), { dataSource }); tree.callBase = true; tree.setup(x => x.refresh(TypeMoq.It.isAny())).returns(() => Promise.resolve(null)); @@ -489,9 +488,8 @@ suite('SQL Connection Tree Action tests', () => { objectExplorerService.callBase = true; objectExplorerService.setup(x => x.getObjectExplorerNode(TypeMoq.It.isAny())).returns(() => tablesNode); objectExplorerService.setup(x => x.refreshTreeNode(TypeMoq.It.isAny(), TypeMoq.It.isAny())).returns(() => Promise.resolve([table1Node, table2Node])); - let builder: Builder = $().div(); var dataSource = new ServerTreeDataSource(objectExplorerService.object, connectionManagementService.object, undefined); - let tree = TypeMoq.Mock.ofType(Tree, TypeMoq.MockBehavior.Loose, builder.getHTMLElement(), { dataSource }); + let tree = TypeMoq.Mock.ofType(Tree, TypeMoq.MockBehavior.Loose, $('div'), { dataSource }); tree.callBase = true; tree.setup(x => x.refresh(TypeMoq.It.isAny())).returns(() => Promise.resolve(null)); @@ -513,4 +511,4 @@ suite('SQL Connection Tree Action tests', () => { }).then(() => done(), (err) => done(err)); }); -}); \ No newline at end of file +}); diff --git a/src/sqltest/parts/query/editor/queryEditor.test.ts b/src/sqltest/parts/query/editor/queryEditor.test.ts index dc693681f9..07b21578e8 100644 --- a/src/sqltest/parts/query/editor/queryEditor.test.ts +++ b/src/sqltest/parts/query/editor/queryEditor.test.ts @@ -10,7 +10,6 @@ import { IEditorDescriptor } from 'vs/workbench/browser/editor'; import { URI } from 'vs/base/common/uri'; import * as DOM from 'vs/base/browser/dom'; import { Memento } from 'vs/workbench/common/memento'; -import { Builder } from 'sql/base/browser/builder'; import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorInput'; import { QueryResultsInput } from 'sql/parts/query/common/queryResultsInput'; @@ -28,24 +27,17 @@ import * as TypeMoq from 'typemoq'; import * as assert from 'assert'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor'; -import { INotificationService } from 'vs/platform/notification/common/notification'; -import { TestNotificationService } from 'vs/platform/notification/test/common/testNotificationService'; import { ConfigurationService } from 'vs/platform/configuration/node/configurationService'; import { TestStorageService } from 'vs/workbench/test/workbenchTestServices'; suite('SQL QueryEditor Tests', () => { - let queryModelService: QueryModelService; let instantiationService: TypeMoq.Mock; let themeService: TestThemeService = new TestThemeService(); - let notificationService: TypeMoq.Mock; let editorDescriptorService: TypeMoq.Mock; let connectionManagementService: TypeMoq.Mock; let configurationService: TypeMoq.Mock; let memento: TypeMoq.Mock; - let queryInput: QueryInput; - let queryInput2: QueryInput; - let parentBuilder: Builder; let mockEditor: any; let getQueryEditor = function (): QueryEditor { @@ -64,10 +56,6 @@ suite('SQL QueryEditor Tests', () => { }; setup(() => { - // Setup DOM elements - let element = DOM.$('queryEditorParent'); - parentBuilder = new Builder(element); - // Create object to mock the Editor classes // QueryResultsEditor fails at runtime due to the way we are importing Angualar, // so a {} mock is used here. This mock simply needs to have empty method stubs @@ -119,23 +107,6 @@ suite('SQL QueryEditor Tests', () => { return { enablePreviewFeatures: true }; }); - // Create a QueryInput - let filePath = 'file://someFile.sql'; - let uri: URI = URI.parse(filePath); - let fileInput = new UntitledEditorInput(uri, false, '', '', '', instantiationService.object, undefined, undefined); - let queryResultsInput: QueryResultsInput = new QueryResultsInput(uri.fsPath, configurationService.object); - queryInput = new QueryInput('first', fileInput, queryResultsInput, undefined, undefined, undefined, undefined, undefined); - - // Create a QueryInput to compare to the previous one - let filePath2 = 'file://someFile2.sql'; - let uri2: URI = URI.parse(filePath2); - let fileInput2 = new UntitledEditorInput(uri2, false, '', '', '', instantiationService.object, undefined, undefined); - let queryResultsInput2: QueryResultsInput = new QueryResultsInput(uri2.fsPath, configurationService.object); - queryInput2 = new QueryInput('second', fileInput2, queryResultsInput2, undefined, undefined, undefined, undefined, undefined); - - // Mock IMessageService - notificationService = TypeMoq.Mock.ofType(TestNotificationService, TypeMoq.MockBehavior.Loose); - // Mock ConnectionManagementService memento = TypeMoq.Mock.ofType(Memento, TypeMoq.MockBehavior.Loose, ''); memento.setup(x => x.getMemento(TypeMoq.It.isAny())).returns(() => void 0); @@ -144,15 +115,12 @@ suite('SQL QueryEditor Tests', () => { connectionManagementService.setup(x => x.isConnected(TypeMoq.It.isAny())).returns(() => false); connectionManagementService.setup(x => x.disconnectEditor(TypeMoq.It.isAny())).returns(() => void 0); connectionManagementService.setup(x => x.ensureDefaultLanguageFlavor(TypeMoq.It.isAnyString())).returns(() => void 0); - - // Create a QueryModelService - queryModelService = new QueryModelService(instantiationService.object, notificationService.object); }); test('createEditor creates only the taskbar', (done) => { // If I call createEditor let editor: QueryEditor = getQueryEditor(); - editor.createEditor(parentBuilder.getHTMLElement()); + editor.createEditor(DOM.$('queryEditorParent')); // The taskbar should be created assert.equal(!!editor.taskbar, true); diff --git a/src/typings/jQuery.d.ts b/src/typings/jQuery.d.ts index a3d5b35511..41e19a0d57 100644 --- a/src/typings/jQuery.d.ts +++ b/src/typings/jQuery.d.ts @@ -15,7 +15,6 @@ declare module 'jquery/dist/jquery.slim' { declare function factory(window: Window, noGlobal?: boolean): JQueryStatic; declare const jQuery: JQueryStatic; -declare const $: JQueryStatic; // Used by JQuery.Event type _Event = Event; @@ -4612,4 +4611,4 @@ interface JQueryEasingFunctions { swing: JQueryEasingFunction; } -// endregion \ No newline at end of file +// endregion