ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Remove rest of builder (#4963)

Browse Source 
* removes more builder references

* remove builder from profiler

* formatting

* fix profiler dailog

* remove builder from oatuhdialog

* remove the rest of builder references

* formatting
This commit is contained in:
Anthony Dresser
2019-04-10 13:23:33 -07:00
committed by GitHub
parent 9b053c50c2
commit a74510544f
18 changed files with 616 additions and 2226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1435
src/sql/base/browser/builder.ts
View File

File diff suppressed because it is too large Load Diff

6
src/sql/base/browser/builder.css → src/sql/base/browser/dom.ts
View File

@@ -3,6 +3,6 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
.monaco-builder-hidden { export function isHidden(element: HTMLElement): boolean {
display: none !important; return element.style.display === 'none';
} }

15
src/sql/parts/disasterRecovery/backup/backupDialog.ts
View File

@@ -8,28 +8,25 @@ import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { BackupModule } from 'sql/parts/disasterRecovery/backup/backup.module'; import { BackupModule } from 'sql/parts/disasterRecovery/backup/backup.module';
import { BACKUP_SELECTOR } from 'sql/parts/disasterRecovery/backup/backup.component'; import { BACKUP_SELECTOR } from 'sql/parts/disasterRecovery/backup/backup.component';
import { attachModalDialogStyler } from 'sql/platform/theme/common/styler'; import { attachModalDialogStyler } from 'sql/platform/theme/common/styler';
import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
import * as TelemetryKeys from 'sql/common/telemetryKeys'; import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { Builder } from 'sql/base/browser/builder';
import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService'; import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
import { append, $ } from 'vs/base/browser/dom';
export class BackupDialog extends Modal { export class BackupDialog extends Modal {
private _bodyBuilder: Builder; private _body: HTMLElement;
private _backupTitle: string; private _backupTitle: string;
private _uniqueSelector: string;
private _moduleRef: any; private _moduleRef: any;
constructor( constructor(
@IThemeService themeService: IThemeService, @IThemeService themeService: IThemeService,
@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService, @IWorkbenchLayoutService layoutService: IWorkbenchLayoutService,
@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
@ITelemetryService telemetryService: ITelemetryService, @ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService, @IContextKeyService contextKeyService: IContextKeyService,
@IInstantiationService private _instantiationService: IInstantiationService, @IInstantiationService private _instantiationService: IInstantiationService,
@@ -39,9 +36,7 @@ export class BackupDialog extends Modal {
} }
protected renderBody(container: HTMLElement) { protected renderBody(container: HTMLElement) {
new Builder(container).div({ 'class': 'backup-dialog' }, (builder) => { this._body = append(container, $('.backup-dialog'));
this._bodyBuilder = builder;
});
} }
public render() { public render() {
@@ -49,14 +44,14 @@ export class BackupDialog extends Modal {
attachModalDialogStyler(this, this._themeService); attachModalDialogStyler(this, this._themeService);
// Add angular component template to dialog body // Add angular component template to dialog body
this.bootstrapAngular(this._bodyBuilder.getHTMLElement()); this.bootstrapAngular(this._body);
} }
/** /**
* Get the bootstrap params and perform the bootstrap * Get the bootstrap params and perform the bootstrap
*/ */
private bootstrapAngular(bodyContainer: HTMLElement) { private bootstrapAngular(bodyContainer: HTMLElement) {
this._uniqueSelector = bootstrapAngular(this._instantiationService, bootstrapAngular(this._instantiationService,
BackupModule, BackupModule,
bodyContainer, bodyContainer,
BACKUP_SELECTOR, BACKUP_SELECTOR,

419
src/sql/parts/disasterRecovery/restore/restoreDialog.ts
View File

@@ -3,9 +3,8 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
'use strict';
import 'vs/css!./media/restoreDialog'; import 'vs/css!./media/restoreDialog';
import { Builder, $ } from 'sql/base/browser/builder';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { Event, Emitter } from 'vs/base/common/event'; import { Event, Emitter } from 'vs/base/common/event';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
@@ -18,6 +17,8 @@ import { localize } from 'vs/nls';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { mixin } from 'vs/base/common/objects'; import { mixin } from 'vs/base/common/objects';
import * as strings from 'vs/base/common/strings'; import * as strings from 'vs/base/common/strings';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import * as DOM from 'vs/base/browser/dom';
import * as azdata from 'azdata'; import * as azdata from 'azdata';
@@ -41,8 +42,6 @@ import { TabbedPanel, PanelTabIdentifier } from 'sql/base/browser/ui/panel/panel
import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes'; import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService'; import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { IFileBrowserDialogController } from 'sql/workbench/services/fileBrowser/common/fileBrowserDialogController'; import { IFileBrowserDialogController } from 'sql/workbench/services/fileBrowser/common/fileBrowserDialogController';
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
interface FileListElement { interface FileListElement {
logicalFileName: string; logicalFileName: string;
@@ -129,7 +128,7 @@ export class RestoreDialog extends Modal {
constructor( constructor(
optionsMetadata: azdata.ServiceOption[], optionsMetadata: azdata.ServiceOption[],
@IWorkbenchLayoutService layoutService: ILayoutService, @ILayoutService layoutService: ILayoutService,
@IThemeService themeService: IThemeService, @IThemeService themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService, @IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService, @ITelemetryService telemetryService: ITelemetryService,
@@ -137,11 +136,11 @@ export class RestoreDialog extends Modal {
@IFileBrowserDialogController private fileBrowserDialogService: IFileBrowserDialogController, @IFileBrowserDialogController private fileBrowserDialogService: IFileBrowserDialogController,
@IClipboardService clipboardService: IClipboardService, @IClipboardService clipboardService: IClipboardService,
) { ) {
super(localize('RestoreDialogTitle', 'Restore database'), TelemetryKeys.Restore, telemetryService, layoutService, clipboardService, themeService, contextKeyService, { hasErrors: true, isWide: true, hasSpinner: true }); super(localize('RestoreDialogTitle', "Restore database"), TelemetryKeys.Restore, telemetryService, layoutService, clipboardService, themeService, contextKeyService, { hasErrors: true, isWide: true, hasSpinner: true });
this._restoreTitle = localize('restoreDialog.restoreTitle', 'Restore database'); this._restoreTitle = localize('restoreDialog.restoreTitle', "Restore database");
this._databaseTitle = localize('restoreDialog.database', 'Database'); this._databaseTitle = localize('restoreDialog.database', "Database");
this._backupFileTitle = localize('restoreDialog.backupFile', 'Backup file'); this._backupFileTitle = localize('restoreDialog.backupFile', "Backup file");
this._restoreLabel = localize('restoreDialog.restore', 'Restore'); this._restoreLabel = localize('restoreDialog.restore', "Restore");
// view model // view model
this.viewModel = new RestoreViewModel(optionsMetadata); this.viewModel = new RestoreViewModel(optionsMetadata);
@@ -169,225 +168,176 @@ export class RestoreDialog extends Modal {
} }
protected renderBody(container: HTMLElement) { protected renderBody(container: HTMLElement) {
const restoreFromElement = DOM.$('.restore-from');
this.createLabelElement(restoreFromElement, localize('source', "Source"), true);
this._restoreFromSelectBox = this.createSelectBoxHelper(restoreFromElement, localize('restoreFrom', "Restore from"), [this._databaseTitle, this._backupFileTitle], this._databaseTitle);
let restoreFromElement; this._restoreFromBackupFileElement = DOM.$('.backup-file-path');
$().div({ class: 'restore-from' }, (restoreFromContainer) => { DOM.hide(this._restoreFromBackupFileElement);
restoreFromElement = restoreFromContainer.getHTMLElement(); const errorMessage = localize('missingBackupFilePathError', "Backup file path is required.");
this.createLabelElement(restoreFromContainer, localize('source', 'Source'), true); const validationOptions: IInputOptions = {
this._restoreFromSelectBox = this.createSelectBoxHelper(restoreFromContainer, localize('restoreFrom', 'Restore from'), [this._databaseTitle, this._backupFileTitle], this._databaseTitle); validationOptions: {
}); validation: (value: string) => !value ? ({ type: MessageType.ERROR, content: errorMessage }) : null
},
placeholder: localize('multipleBackupFilePath', "Please enter one or more file paths separated by commas"),
ariaLabel: LocalizedStrings.BACKFILEPATH
};
const filePathInputContainer = DOM.append(this._restoreFromBackupFileElement, DOM.$('.dialog-input-section'));
DOM.append(filePathInputContainer, DOM.$('.dialog-label')).innerText = LocalizedStrings.BACKFILEPATH;
$().div({ class: 'backup-file-path' }, (filePathContainer) => { this._filePathInputBox = new InputBox(DOM.append(filePathInputContainer, DOM.$('.dialog-input')), this._contextViewService, validationOptions);
filePathContainer.hide();
this._restoreFromBackupFileElement = filePathContainer.getHTMLElement();
let errorMessage = localize('missingBackupFilePathError', 'Backup file path is required.');
let validationOptions: IInputOptions = {
validationOptions: {
validation: (value: string) => !value ? ({ type: MessageType.ERROR, content: errorMessage }) : null
},
placeholder: localize('multipleBackupFilePath', 'Please enter one or more file paths separated by commas'),
ariaLabel: LocalizedStrings.BACKFILEPATH
};
filePathContainer.div({ class: 'dialog-input-section' }, (inputContainer) => { this._browseFileButton = new Button(DOM.append(filePathInputContainer, DOM.$('.file-browser')));
inputContainer.div({ class: 'dialog-label' }, (labelContainer) => { this._browseFileButton.label = '...';
labelContainer.safeInnerHtml(LocalizedStrings.BACKFILEPATH);
});
inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => { const sourceDatabasesElement = DOM.$('.source-database-list');
this._filePathInputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, validationOptions); this._sourceDatabaseSelectBox = this.createSelectBoxHelper(sourceDatabasesElement, localize('database', "Database"), [], '');
});
inputContainer.div({ class: 'file-browser' }, (inputCellContainer) => {
this._browseFileButton = new Button(inputCellContainer.getHTMLElement());
this._browseFileButton.label = '...';
});
});
});
let sourceDatabasesElement;
$().div({ class: 'source-database-list' }, (sourceDatabasesContainer) => {
sourceDatabasesElement = sourceDatabasesContainer.getHTMLElement();
this._sourceDatabaseSelectBox = this.createSelectBoxHelper(sourceDatabasesContainer, localize('database', 'Database'), [], '');
});
// Source section // Source section
let sourceElement: HTMLElement; const sourceElement = DOM.$('.source-section.new-section');
$().div({ class: 'source-section new-section' }, (sourceContainer) => { sourceElement.append(restoreFromElement);
sourceElement = sourceContainer.getHTMLElement(); sourceElement.append(this._restoreFromBackupFileElement);
sourceContainer.append(restoreFromElement); sourceElement.append(sourceDatabasesElement);
sourceContainer.append(this._restoreFromBackupFileElement);
sourceContainer.append(sourceDatabasesElement);
});
// Destination section // Destination section
let destinationElement: HTMLElement; const destinationElement = DOM.$('.destination-section.new-section');
$().div({ class: 'destination-section new-section' }, (destinationContainer) => { this.createLabelElement(destinationElement, localize('destination', "Destination"), true);
destinationElement = destinationContainer.getHTMLElement();
this.createLabelElement(destinationContainer, localize('destination', 'Destination'), true);
destinationContainer.div({ class: 'dialog-input-section' }, (inputContainer) => { const destinationInputContainer = DOM.append(destinationElement, DOM.$('.dialog-input-section'));
inputContainer.div({ class: 'dialog-label' }, (labelContainer) => { DOM.append(destinationInputContainer, DOM.$('.dialog-label')).innerText = LocalizedStrings.TARGETDATABASE;
labelContainer.text(LocalizedStrings.TARGETDATABASE);
});
inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => { const dropdownContainer = DOM.append(destinationInputContainer, DOM.$('.dialog-input'));
// Get the bootstrap params and perform the bootstrap
inputCellContainer.style('width', '100%');
this._databaseDropdown = new Dropdown(inputCellContainer.getHTMLElement(), this._contextViewService, this.layoutService,
{
strictSelection: false,
ariaLabel: LocalizedStrings.TARGETDATABASE,
actionLabel: localize('restoreDialog.toggleDatabaseNameDropdown', 'Select Database Toggle Dropdown')
}
);
this._databaseDropdown.onValueChange(s => {
this.databaseSelected(s);
});
this._databaseDropdown.onBlur(() => { // Get the bootstrap params and perform the bootstrap
this.databaseSelected(this._databaseDropdown.value); dropdownContainer.style.width = '100%';
});
this._databaseDropdown.onFocus(() => { this._databaseDropdown = new Dropdown(dropdownContainer, this._contextViewService, this.layoutService,
this._onDatabaseListFocused.fire(); {
}); strictSelection: false,
ariaLabel: LocalizedStrings.TARGETDATABASE,
this._databaseDropdown.value = this.viewModel.targetDatabaseName; actionLabel: localize('restoreDialog.toggleDatabaseNameDropdown', 'Select Database Toggle Dropdown')
attachEditableDropdownStyler(this._databaseDropdown, this._themeService); }
}); );
}); this._databaseDropdown.onValueChange(s => {
this.databaseSelected(s);
this._destinationRestoreToInputBox = this.createInputBoxHelper(destinationContainer, localize('restoreTo', 'Restore to'));
}); });
this._databaseDropdown.onBlur(() => {
this.databaseSelected(this._databaseDropdown.value);
});
this._databaseDropdown.onFocus(() => {
this._onDatabaseListFocused.fire();
});
this._databaseDropdown.value = this.viewModel.targetDatabaseName;
attachEditableDropdownStyler(this._databaseDropdown, this._themeService);
this._destinationRestoreToInputBox = this.createInputBoxHelper(destinationElement, localize('restoreTo', "Restore to"));
// Restore plan section // Restore plan section
let restorePlanElement: HTMLElement; const restorePlanElement = DOM.$('.restore-plan-section.new-section');
$().div({ class: 'restore-plan-section new-section' }, (restorePlanContainer) => { this.createLabelElement(restorePlanElement, localize('restorePlan', "Restore plan"), true);
restorePlanElement = restorePlanContainer.getHTMLElement(); this.createLabelElement(restorePlanElement, localize('backupSetsToRestore', "Backup sets to restore"));
this.createLabelElement(restorePlanContainer, localize('restorePlan', 'Restore plan'), true);
this.createLabelElement(restorePlanContainer, localize('backupSetsToRestore', 'Backup sets to restore'));
// Backup sets table // Backup sets table
restorePlanContainer.div({ class: 'dialog-input-section restore-list' }, (labelContainer) => { this._restorePlanTableContainer = DOM.append(restorePlanElement, DOM.$('.dialog-input-section.restore-list'));
this._restorePlanTableContainer = labelContainer.getHTMLElement(); DOM.hide(this._restorePlanTableContainer);
labelContainer.hide(); this._restorePlanData = new TableDataView<Slick.SlickData>();
this._restorePlanData = new TableDataView<Slick.SlickData>(); this._restorePlanTable = new Table<Slick.SlickData>(this._restorePlanTableContainer,
this._restorePlanTable = new Table<Slick.SlickData>(labelContainer.getHTMLElement(), { dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false });
{ dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }); this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false }));
this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false })); this._restorePlanTable.onSelectedRowsChanged((e, data) => this.backupFileCheckboxChanged(e, data));
this._restorePlanTable.onSelectedRowsChanged((e, data) => this.backupFileCheckboxChanged(e, data));
});
});
// Content in general tab // Content in general tab
let generalTab = $('.restore-dialog'); const generalTab = DOM.$('.restore-dialog');
generalTab.append(sourceElement); generalTab.append(sourceElement);
generalTab.append(destinationElement); generalTab.append(destinationElement);
generalTab.append(restorePlanElement); generalTab.append(restorePlanElement);
// Content in file tab // Content in file tab
let fileContentElement: HTMLElement; const fileContentElement = DOM.$('.restore-dialog');
$().div({ class: 'restore-dialog' }, (builder) => { const restoreAsSectionContainer = DOM.append(fileContentElement, DOM.$('.new-section'));
fileContentElement = builder.getHTMLElement();
// Restore database file as section this.createLabelElement(restoreAsSectionContainer, localize('restoreDatabaseFileAs', "Restore database files as"), true);
builder.div({ class: 'new-section' }, (sectionContainer) => { this.createOptionControl(restoreAsSectionContainer, this._relocateDatabaseFilesOption);
this.createLabelElement(sectionContainer, localize('restoreDatabaseFileAs', 'Restore database files as'), true); const subSectionContainer = DOM.append(restoreAsSectionContainer, DOM.$('.sub-section'));
this.createOptionControl(sectionContainer, this._relocateDatabaseFilesOption); this.createOptionControl(subSectionContainer, this._relocatedDataFileFolderOption);
sectionContainer.div({ class: 'sub-section' }, (subSectionContainer) => { this.createOptionControl(subSectionContainer, this._relocatedLogFileFolderOption);
this.createOptionControl(subSectionContainer, this._relocatedDataFileFolderOption);
this.createOptionControl(subSectionContainer, this._relocatedLogFileFolderOption);
});
});
// Restore database file details section // Restore database file details section
builder.div({ class: 'new-section' }, (sectionContainer) => {
this.createLabelElement(sectionContainer, localize('restoreDatabaseFileDetails', 'Restore database file details'), true); const restoreFileSectionContainer = DOM.append(fileContentElement, DOM.$('.new-section'));
// file list table this.createLabelElement(restoreFileSectionContainer, localize('restoreDatabaseFileDetails', "Restore database file details"), true);
sectionContainer.div({ class: 'dialog-input-section restore-list' }, (fileNameContainer) => { // file list table
this._fileListTableContainer = fileNameContainer.getHTMLElement(); this._fileListTableContainer = DOM.append(restoreFileSectionContainer, DOM.$('.dialog-input-section.restore-list'));
fileNameContainer.hide(); DOM.hide(this._fileListTableContainer);
let logicalFileName = localize('logicalFileName', 'Logical file Name'); const logicalFileName = localize('logicalFileName', "Logical file Name");
let fileType = localize('fileType', 'File type'); const fileType = localize('fileType', "File type");
let originalFileName = localize('originalFileName', 'Original File Name'); const originalFileName = localize('originalFileName', "Original File Name");
let restoreAs = localize('restoreAs', 'Restore as'); const restoreAs = localize('restoreAs', "Restore as");
var columns = [{ const columns = [{
id: 'logicalFileName', id: 'logicalFileName',
name: logicalFileName, name: logicalFileName,
field: 'logicalFileName' field: 'logicalFileName'
}, { }, {
id: 'fileType', id: 'fileType',
name: fileType, name: fileType,
field: 'fileType' field: 'fileType'
}, { }, {
id: 'originalFileName', id: 'originalFileName',
name: originalFileName, name: originalFileName,
field: 'originalFileName' field: 'originalFileName'
}, { }, {
id: 'restoreAs', id: 'restoreAs',
name: restoreAs, name: restoreAs,
field: 'restoreAs' field: 'restoreAs'
}]; }];
this._fileListData = new TableDataView<FileListElement>(); this._fileListData = new TableDataView<FileListElement>();
this._fileListTable = new Table<FileListElement>(fileNameContainer.getHTMLElement(), this._fileListTable = new Table<FileListElement>(this._fileListTableContainer,
{ dataProvider: this._fileListData, columns }, { enableColumnReorder: false }); { dataProvider: this._fileListData, columns }, { enableColumnReorder: false });
this._fileListTable.setSelectionModel(new RowSelectionModel()); this._fileListTable.setSelectionModel(new RowSelectionModel());
});
});
});
// Content in options tab // Content in options tab
let optionsContentElement: HTMLElement; const optionsContentElement = DOM.$('.restore-dialog');
$().div({ class: 'restore-dialog' }, (builder) => { // Restore options section
optionsContentElement = builder.getHTMLElement(); const restoreOptions = DOM.append(optionsContentElement, DOM.$('.new-section'));
this.createLabelElement(restoreOptions, localize('restoreOptions', "Restore options"), true);
this.createOptionControl(restoreOptions, this._withReplaceDatabaseOption);
this.createOptionControl(restoreOptions, this._withKeepReplicationOption);
this.createOptionControl(restoreOptions, this._withRestrictedUserOption);
this.createOptionControl(restoreOptions, this._recoveryStateOption);
// Restore options section this.createOptionControl(DOM.append(restoreOptions, DOM.$('.sub-section')), this._standbyFileOption);
builder.div({ class: 'new-section' }, (sectionContainer) => {
this.createLabelElement(sectionContainer, localize('restoreOptions', 'Restore options'), true);
this.createOptionControl(sectionContainer, this._withReplaceDatabaseOption);
this.createOptionControl(sectionContainer, this._withKeepReplicationOption);
this.createOptionControl(sectionContainer, this._withRestrictedUserOption);
this.createOptionControl(sectionContainer, this._recoveryStateOption);
sectionContainer.div({ class: 'sub-section' }, (subSectionContainer) => { // Tail-Log backup section
this.createOptionControl(subSectionContainer, this._standbyFileOption); const tailLog = DOM.append(optionsContentElement, DOM.$('.new-section'));
}); this.createLabelElement(tailLog, localize('taillogBackup', "Tail-Log backup"), true);
}); this.createOptionControl(tailLog, this._takeTaillogBackupOption);
const tailLogOptions = DOM.append(tailLog, DOM.$('.sub-section'));
this.createOptionControl(tailLogOptions, this._tailLogWithNoRecoveryOption);
this.createOptionControl(tailLogOptions, this._tailLogBackupFileOption);
// Tail-Log backup section // Server connections section
builder.div({ class: 'new-section' }, (sectionContainer) => { const serverConnections = DOM.append(optionsContentElement, DOM.$('.new-section'));
this.createLabelElement(sectionContainer, localize('taillogBackup', 'Tail-Log backup'), true); this.createLabelElement(serverConnections, localize('serverConnection', "Server connections"), true);
this.createOptionControl(sectionContainer, this._takeTaillogBackupOption); this.createOptionControl(serverConnections, this._closeExistingConnectionsOption);
sectionContainer.div({ class: 'sub-section' }, (subSectionContainer) => {
this.createOptionControl(subSectionContainer, this._tailLogWithNoRecoveryOption);
this.createOptionControl(subSectionContainer, this._tailLogBackupFileOption);
});
});
// Server connections section const restorePanel = DOM.$('.restore-panel');
builder.div({ class: 'new-section' }, (sectionContainer) => { container.appendChild(restorePanel);
this.createLabelElement(sectionContainer, localize('serverConnection', 'Server connections'), true); this._panel = new TabbedPanel(restorePanel);
this.createOptionControl(sectionContainer, this._closeExistingConnectionsOption);
});
});
let restorePanel = $('.restore-panel');
container.appendChild(restorePanel.getHTMLElement());
this._panel = new TabbedPanel(restorePanel.getHTMLElement());
this._generalTabId = this._panel.pushTab({ this._generalTabId = this._panel.pushTab({
identifier: 'general', identifier: 'general',
title: localize('generalTitle', 'General'), title: localize('generalTitle', 'General'),
view: { view: {
render: c => { render: c => {
generalTab.appendTo(c); DOM.append(c, generalTab);
}, },
layout: () => { } layout: () => { }
} }
}); });
let fileTab = this._panel.pushTab({ const fileTab = this._panel.pushTab({
identifier: 'fileContent', identifier: 'fileContent',
title: localize('filesTitle', 'Files'), title: localize('filesTitle', 'Files'),
view: { view: {
@@ -469,19 +419,17 @@ export class RestoreDialog extends Modal {
this._databaseDropdown.values = vals; this._databaseDropdown.values = vals;
} }
private createLabelElement(container: Builder, content: string, isHeader?: boolean) { private createLabelElement(container: HTMLElement, content: string, isHeader?: boolean) {
let className = 'dialog-label'; let className = 'dialog-label';
if (isHeader) { if (isHeader) {
className += ' header'; className += ' header';
} }
container.div({ class: className }, (labelContainer) => { DOM.append(container, DOM.$(`.${className}`)).innerText = content;
labelContainer.text(content);
});
} }
private createOptionControl(container: Builder, optionName: string): void { private createOptionControl(container: HTMLElement, optionName: string): void {
let option = this.viewModel.getOptionMetadata(optionName); const option = this.viewModel.getOptionMetadata(optionName);
let propertyWidget: any; let propertyWidget: SelectBox | InputBox | Checkbox;
switch (option.valueType) { switch (option.valueType) {
case ServiceOptionType.boolean: case ServiceOptionType.boolean:
propertyWidget = this.createCheckBoxHelper(container, option.description, propertyWidget = this.createCheckBoxHelper(container, option.description,
@@ -522,63 +470,46 @@ export class RestoreDialog extends Modal {
} }
} }
private createCheckBoxHelper(container: Builder, label: string, isChecked: boolean, onCheck: (viaKeyboard: boolean) => void): Checkbox { private createCheckBoxHelper(container: HTMLElement, label: string, isChecked: boolean, onCheck: (viaKeyboard: boolean) => void): Checkbox {
let checkbox: Checkbox; const checkbox = new Checkbox(DOM.append(container, DOM.$('.dialog-input-section')), {
container.div({ class: 'dialog-input-section' }, (inputCellContainer) => { label: label,
checkbox = new Checkbox(inputCellContainer.getHTMLElement(), { checked: isChecked,
label: label, onChange: onCheck,
checked: isChecked, ariaLabel: label
onChange: onCheck,
ariaLabel: label
});
}); });
this._register(attachCheckboxStyler(checkbox, this._themeService)); this._register(attachCheckboxStyler(checkbox, this._themeService));
return checkbox; return checkbox;
} }
private createSelectBoxHelper(container: Builder, label: string, options: string[], selectedOption: string): SelectBox { private createSelectBoxHelper(container: HTMLElement, label: string, options: string[], selectedOption: string): SelectBox {
let selectBox: SelectBox; const inputContainer = DOM.append(container, DOM.$('.dialog-input-section'));
container.div({ class: 'dialog-input-section' }, (inputContainer) => { DOM.append(inputContainer, DOM.$('.dialog-label')).innerText = label;
inputContainer.div({ class: 'dialog-label' }, (labelContainer) => { const inputCellContainer = DOM.append(inputContainer, DOM.$('.dialog-input'));
labelContainer.text(label); const selectBox = new SelectBox(options, selectedOption, this._contextViewService, inputCellContainer, { ariaLabel: label });
}); selectBox.render(inputCellContainer);
inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => {
selectBox = new SelectBox(options, selectedOption, this._contextViewService, inputCellContainer.getHTMLElement(), { ariaLabel: label });
selectBox.render(inputCellContainer.getHTMLElement());
});
});
return selectBox; return selectBox;
} }
private createInputBoxHelper(container: Builder, label: string, options?: IInputOptions): InputBox { private createInputBoxHelper(container: HTMLElement, label: string, options?: IInputOptions): InputBox {
let inputBox: InputBox; const ariaOptions = {
let ariaOptions = {
ariaLabel: label ariaLabel: label
}; };
container.div({ class: 'dialog-input-section' }, (inputContainer) => { const inputContainer = DOM.append(container, DOM.$('.dialog-input-section'));
inputContainer.div({ class: 'dialog-label' }, (labelContainer) => { DOM.append(inputContainer, DOM.$('.dialog-label')).innerText = label;
labelContainer.safeInnerHtml(label); return new InputBox(DOM.append(inputContainer, DOM.$('.dialog-input')), this._contextViewService, mixin(ariaOptions, options));
});
inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => {
inputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, mixin(ariaOptions, options));
});
});
return inputBox;
} }
private clearRestorePlanDataTable(): void { private clearRestorePlanDataTable(): void {
if (this._restorePlanData.getLength() > 0) { if (this._restorePlanData.getLength() > 0) {
this._restorePlanData.clear(); this._restorePlanData.clear();
new Builder(this._restorePlanTableContainer).hide(); DOM.hide(this._restorePlanTableContainer);
} }
} }
private clearFileListTable(): void { private clearFileListTable(): void {
if (this._fileListData.getLength() > 0) { if (this._fileListData.getLength() > 0) {
this._fileListData.clear(); this._fileListData.clear();
new Builder(this._fileListTableContainer).hide(); DOM.hide(this._fileListTableContainer);
} }
} }
@@ -672,7 +603,7 @@ export class RestoreDialog extends Modal {
} }
private onFileBrowsed(filepath: string) { private onFileBrowsed(filepath: string) {
var oldFilePath = this._filePathInputBox.value; const oldFilePath = this._filePathInputBox.value;
if (strings.isFalsyOrWhitespace(this._filePathInputBox.value)) { if (strings.isFalsyOrWhitespace(this._filePathInputBox.value)) {
this._filePathInputBox.value = filepath; this._filePathInputBox.value = filepath;
} else { } else {
@@ -708,10 +639,10 @@ export class RestoreDialog extends Modal {
this.removeErrorMessage(); this.removeErrorMessage();
if (selectedRestoreFrom === this._backupFileTitle) { if (selectedRestoreFrom === this._backupFileTitle) {
this.viewModel.onRestoreFromChanged(true); this.viewModel.onRestoreFromChanged(true);
new Builder(this._restoreFromBackupFileElement).show(); DOM.show(this._restoreFromBackupFileElement);
} else { } else {
this.viewModel.onRestoreFromChanged(false); this.viewModel.onRestoreFromChanged(false);
new Builder(this._restoreFromBackupFileElement).hide(); DOM.hide(this._restoreFromBackupFileElement);
} }
this.resetRestoreContent(); this.resetRestoreContent();
} }
@@ -821,7 +752,7 @@ export class RestoreDialog extends Modal {
} }
private updateRestoreOption(optionParam: RestoreOptionParam) { private updateRestoreOption(optionParam: RestoreOptionParam) {
let widget = this._optionsMap[optionParam.optionName]; const widget = this._optionsMap[optionParam.optionName];
if (widget) { if (widget) {
if (widget instanceof Checkbox) { if (widget instanceof Checkbox) {
(<Checkbox>widget).checked = optionParam.value; (<Checkbox>widget).checked = optionParam.value;
@@ -847,7 +778,7 @@ export class RestoreDialog extends Modal {
private updateRestoreDatabaseFiles(dbFiles: azdata.RestoreDatabaseFileInfo[]) { private updateRestoreDatabaseFiles(dbFiles: azdata.RestoreDatabaseFileInfo[]) {
this.clearFileListTable(); this.clearFileListTable();
if (dbFiles && dbFiles.length > 0) { if (dbFiles && dbFiles.length > 0) {
let data = []; const data = [];
for (let i = 0; i < dbFiles.length; i++) { for (let i = 0; i < dbFiles.length; i++) {
data[i] = { data[i] = {
logicalFileName: dbFiles[i].logicalFileName, logicalFileName: dbFiles[i].logicalFileName,
@@ -856,7 +787,7 @@ export class RestoreDialog extends Modal {
restoreAs: dbFiles[i].restoreAsFileName restoreAs: dbFiles[i].restoreAsFileName
}; };
} }
new Builder(this._fileListTableContainer).show(); DOM.show(this._fileListTableContainer);
this._fileListData.push(data); this._fileListData.push(data);
// Select the first row for the table by default // Select the first row for the table by default
@@ -867,7 +798,7 @@ export class RestoreDialog extends Modal {
private updateBackupSetsToRestore(backupSetsToRestore: azdata.DatabaseFileInfo[]) { private updateBackupSetsToRestore(backupSetsToRestore: azdata.DatabaseFileInfo[]) {
if (this._isBackupFileCheckboxChanged) { if (this._isBackupFileCheckboxChanged) {
let selectedRow = []; const selectedRow = [];
for (let i = 0; i < backupSetsToRestore.length; i++) { for (let i = 0; i < backupSetsToRestore.length; i++) {
if (backupSetsToRestore[i].isSelected) { if (backupSetsToRestore[i].isSelected) {
selectedRow.push(i); selectedRow.push(i);
@@ -878,7 +809,7 @@ export class RestoreDialog extends Modal {
this.clearRestorePlanDataTable(); this.clearRestorePlanDataTable();
if (backupSetsToRestore && backupSetsToRestore.length > 0) { if (backupSetsToRestore && backupSetsToRestore.length > 0) {
if (!this._restorePlanColumn) { if (!this._restorePlanColumn) {
let firstRow = backupSetsToRestore[0]; const firstRow = backupSetsToRestore[0];
this._restorePlanColumn = firstRow.properties.map(item => { this._restorePlanColumn = firstRow.properties.map(item => {
return { return {
id: item.propertyName, id: item.propertyName,
@@ -887,18 +818,18 @@ export class RestoreDialog extends Modal {
}; };
}); });
let checkboxSelectColumn = new CheckboxSelectColumn({ title: this._restoreLabel, toolTip: this._restoreLabel, width: 15 }); const checkboxSelectColumn = new CheckboxSelectColumn({ title: this._restoreLabel, toolTip: this._restoreLabel, width: 15 });
this._restorePlanColumn.unshift(checkboxSelectColumn.getColumnDefinition()); this._restorePlanColumn.unshift(checkboxSelectColumn.getColumnDefinition());
this._restorePlanTable.columns = this._restorePlanColumn; this._restorePlanTable.columns = this._restorePlanColumn;
this._restorePlanTable.registerPlugin(checkboxSelectColumn); this._restorePlanTable.registerPlugin(checkboxSelectColumn);
this._restorePlanTable.autosizeColumns(); this._restorePlanTable.autosizeColumns();
} }
let data = []; const data = [];
let selectedRow = []; const selectedRow = [];
for (let i = 0; i < backupSetsToRestore.length; i++) { for (let i = 0; i < backupSetsToRestore.length; i++) {
let backupFile = backupSetsToRestore[i]; const backupFile = backupSetsToRestore[i];
let newData = {}; const newData = {};
for (let j = 0; j < backupFile.properties.length; j++) { for (let j = 0; j < backupFile.properties.length; j++) {
newData[backupFile.properties[j].propertyName] = backupFile.properties[j].propertyValueDisplayName; newData[backupFile.properties[j].propertyName] = backupFile.properties[j].propertyValueDisplayName;
} }
@@ -907,7 +838,7 @@ export class RestoreDialog extends Modal {
selectedRow.push(i); selectedRow.push(i);
} }
} }
new Builder(this._restorePlanTableContainer).show(); DOM.show(this._restorePlanTableContainer);
this._restorePlanData.push(data); this._restorePlanData.push(data);
this._restorePlanTable.setSelectedRows(selectedRow); this._restorePlanTable.setSelectedRows(selectedRow);
this._restorePlanTable.setActiveCell(selectedRow[0], 0); this._restorePlanTable.setActiveCell(selectedRow[0], 0);

3
src/sql/parts/jobManagement/views/jobStepsViewTree.ts
View File

@@ -10,7 +10,6 @@ import * as TreeDefaults from 'vs/base/parts/tree/browser/treeDefaults';
import { IMouseEvent } from 'vs/base/browser/mouseEvent'; import { IMouseEvent } from 'vs/base/browser/mouseEvent';
import { generateUuid } from 'vs/base/common/uuid'; import { generateUuid } from 'vs/base/common/uuid';
import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { $ } from 'sql/base/browser/builder';
export class JobStepsViewRow { export class JobStepsViewRow {
public stepId: string; public stepId: string;
@@ -135,7 +134,7 @@ export class JobStepsViewRenderer implements tree.IRenderer {
stepIdCol.className += ' step-column-heading'; stepIdCol.className += ' step-column-heading';
stepMessageCol.className += ' step-column-heading'; stepMessageCol.className += ' step-column-heading';
} }
$(templateData.label).empty(); DOM.clearNode(templateData.label);
templateData.label.appendChild(stepIdCol); templateData.label.appendChild(stepIdCol);
templateData.label.appendChild(stepNameCol); templateData.label.appendChild(stepNameCol);
templateData.label.appendChild(stepMessageCol); templateData.label.appendChild(stepMessageCol);

19
src/sql/parts/modelComponents/dom.component.ts
View File

@@ -5,17 +5,16 @@
import 'vs/css!./dom'; import 'vs/css!./dom';
import 'vs/css!./highlight'; import 'vs/css!./highlight';
import 'vs/css!./markdown'; import 'vs/css!./markdown';
import { import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver, Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy
ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList
} from '@angular/core'; } from '@angular/core';
import * as azdata from 'azdata'; import * as azdata from 'azdata';
import * as DOM from 'vs/base/browser/dom'; import * as DOM from 'vs/base/browser/dom';
import { $, Builder } from 'sql/base/browser/builder';
import { ComponentBase } from 'sql/parts/modelComponents/componentBase'; import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces'; import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
@Component({ @Component({
template: '', template: '',
@@ -25,8 +24,8 @@ export default class DomComponent extends ComponentBase implements IComponent, O
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _renderedHtml: string; private _renderedHtml: string;
private _rootElement: Builder; private _rootElement: HTMLElement;
private _bodyElement: Builder; private _bodyElement: HTMLElement;
constructor( constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -48,8 +47,8 @@ export default class DomComponent extends ComponentBase implements IComponent, O
} }
private createDomElement() { private createDomElement() {
this._rootElement = new Builder(this._el.nativeElement); this._rootElement = this._el.nativeElement;
this._bodyElement = $('.dom-body'); this._bodyElement = DOM.$('.dom-body');
this._rootElement.append(this._bodyElement); this._rootElement.append(this._bodyElement);
} }
@@ -57,14 +56,14 @@ export default class DomComponent extends ComponentBase implements IComponent, O
private setHtml(): void { private setHtml(): void {
if (this.html) { if (this.html) {
this._renderedHtml = this.html; this._renderedHtml = this.html;
this._bodyElement.innerHtml(this._renderedHtml); this._bodyElement.innerHTML = this._renderedHtml;
} }
} }
/// IComponent implementation /// IComponent implementation
public layout(): void { public layout(): void {
super.layout(); super.layout();
let element = <HTMLElement>this._el.nativeElement; const element = <HTMLElement>this._el.nativeElement;
element.style.width = this.getWidth(); element.style.width = this.getWidth();
element.style.height = this.getHeight(); element.style.height = this.getHeight();
} }

90
src/sql/parts/objectExplorer/serverGroupDialog/serverGroupDialog.ts
View File

@@ -3,9 +3,8 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
'use strict';
import 'vs/css!./media/serverGroupDialog'; import 'vs/css!./media/serverGroupDialog';
import { Builder } from 'sql/base/browser/builder';
import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox'; import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
import * as DOM from 'vs/base/browser/dom'; import * as DOM from 'vs/base/browser/dom';
@@ -17,19 +16,18 @@ import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { localize } from 'vs/nls'; import { localize } from 'vs/nls';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { Button } from 'sql/base/browser/ui/button/button'; import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal'; import { Modal } from 'sql/workbench/browser/modal/modal';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { ServerGroupViewModel } from 'sql/parts/objectExplorer/serverGroupDialog/serverGroupViewModel'; import { ServerGroupViewModel } from 'sql/parts/objectExplorer/serverGroupDialog/serverGroupViewModel';
import { attachButtonStyler, attachModalDialogStyler } from 'sql/platform/theme/common/styler'; import { attachButtonStyler, attachModalDialogStyler } from 'sql/platform/theme/common/styler';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import * as TelemetryKeys from 'sql/common/telemetryKeys'; import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService'; import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
export class ServerGroupDialog extends Modal { export class ServerGroupDialog extends Modal {
private _bodyBuilder: Builder;
private _addServerButton: Button; private _addServerButton: Button;
private _closeButton: Button; private _closeButton: Button;
private _colorCheckBoxesMap: Array<{ color: string, checkbox: Checkbox }> = []; private _colorCheckBoxesMap: Array<{ color: string, checkbox: Checkbox }> = [];
@@ -38,7 +36,7 @@ export class ServerGroupDialog extends Modal {
private _groupDescriptionInputBox: InputBox; private _groupDescriptionInputBox: InputBox;
private _viewModel: ServerGroupViewModel; private _viewModel: ServerGroupViewModel;
private _skipGroupNameValidation: boolean = false; private _skipGroupNameValidation: boolean = false;
private $serverGroupContainer: Builder; private _serverGroupContainer: HTMLElement;
private _onAddServerGroup = new Emitter<void>(); private _onAddServerGroup = new Emitter<void>();
public onAddServerGroup: Event<void> = this._onAddServerGroup.event; public onAddServerGroup: Event<void> = this._onAddServerGroup.event;
@@ -50,7 +48,7 @@ export class ServerGroupDialog extends Modal {
public onCloseEvent: Event<void> = this._onCloseEvent.event; public onCloseEvent: Event<void> = this._onCloseEvent.event;
constructor( constructor(
@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService, @ILayoutService layoutService: ILayoutService,
@IThemeService themeService: IThemeService, @IThemeService themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService, @IContextViewService private _contextViewService: IContextViewService,
@ITelemetryService telemetryService: ITelemetryService, @ITelemetryService telemetryService: ITelemetryService,
@@ -63,8 +61,8 @@ export class ServerGroupDialog extends Modal {
public render() { public render() {
super.render(); super.render();
attachModalDialogStyler(this, this._themeService); attachModalDialogStyler(this, this._themeService);
let okLabel = localize('serverGroup.ok', 'OK'); const okLabel = localize('serverGroup.ok', "OK");
let cancelLabel = localize('serverGroup.cancel', 'Cancel'); const cancelLabel = localize('serverGroup.cancel', "Cancel");
this._addServerButton = this.addFooterButton(okLabel, () => this.addGroup()); this._addServerButton = this.addFooterButton(okLabel, () => this.addGroup());
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel()); this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
this.registerListeners(); this.registerListeners();
@@ -75,68 +73,56 @@ export class ServerGroupDialog extends Modal {
} }
protected renderBody(container: HTMLElement) { protected renderBody(container: HTMLElement) {
new Builder(container).div({ class: 'server-group-dialog' }, (builder) => { const body = DOM.append(container, DOM.$('.server-group-dialog'));
this._bodyBuilder = builder;
});
// Connection Group Name // Connection Group Name
let serverGroupNameLabel = localize('connectionGroupName', 'Server group name'); const serverGroupNameLabel = localize('connectionGroupName', "Server group name");
this._bodyBuilder.div({ class: 'dialog-label' }, (labelContainer) => {
labelContainer.text(serverGroupNameLabel); DOM.append(body, DOM.$('.dialog-label')).innerText = serverGroupNameLabel;
});
this._bodyBuilder.div({ class: 'input-divider' }, (inputCellContainer) => { this._groupNameInputBox = new InputBox(DOM.append(body, DOM.$('.input-divider')), this._contextViewService, {
let errorMessage = localize('MissingGroupNameError', 'Group name is required.'); validationOptions: {
this._groupNameInputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, { validation: (value: string) => !value && !this._skipGroupNameValidation ? ({ type: MessageType.ERROR, content: localize('MissingGroupNameError', "Group name is required.") }) : null
validationOptions: { },
validation: (value: string) => !value && !this._skipGroupNameValidation ? ({ type: MessageType.ERROR, content: errorMessage }) : null ariaLabel: serverGroupNameLabel
},
ariaLabel: serverGroupNameLabel
});
}); });
// Connection Group Description // Connection Group Description
let groupDescriptionLabel = localize('groupDescription', 'Group description'); const groupDescriptionLabel = localize('groupDescription', "Group description");
this._bodyBuilder.div({ class: 'dialog-label' }, (labelContainer) => { DOM.append(body, DOM.$('.dialog-label')).innerText = groupDescriptionLabel;
labelContainer.text(groupDescriptionLabel);
}); this._groupDescriptionInputBox = new InputBox(DOM.append(body, DOM.$('.input-divider')), this._contextViewService, {
this._bodyBuilder.div({ class: 'input-divider' }, (inputCellContainer) => { ariaLabel: groupDescriptionLabel
this._groupDescriptionInputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, {
ariaLabel: groupDescriptionLabel
});
}); });
// Connection Group Color // Connection Group Color
this._bodyBuilder.div({ class: 'dialog-label' }, (labelContainer) => { const groupColorLabel = localize('groupColor', "Group color");
let groupColorLabel = localize('groupColor', 'Group color'); DOM.append(body, DOM.$('.dialog-label')).innerText = groupColorLabel;
labelContainer.text(groupColorLabel);
});
this._bodyBuilder.div({ class: 'group-color-options' }, (groupColorContainer) => { this._serverGroupContainer = DOM.append(body, DOM.$('.group-color-options'));
this.$serverGroupContainer = groupColorContainer; this.fillGroupColors(this._serverGroupContainer);
this.fillGroupColors(groupColorContainer.getHTMLElement());
});
this._bodyBuilder.on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => { DOM.addStandardDisposableListener(body, DOM.EventType.KEY_DOWN, (event: StandardKeyboardEvent) => {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyMod.Shift | KeyCode.Tab)) { if (event.equals(KeyMod.Shift | KeyCode.Tab)) {
this.preventDefaultKeyboardEvent(e); this.preventDefaultKeyboardEvent(event);
this.focusPrevious(); this.focusPrevious();
} else if (event.equals(KeyCode.Tab)) { } else if (event.equals(KeyCode.Tab)) {
this.preventDefaultKeyboardEvent(e); this.preventDefaultKeyboardEvent(event);
this.focusNext(); this.focusNext();
} else if (event.equals(KeyCode.RightArrow) || event.equals(KeyCode.LeftArrow)) { } else if (event.equals(KeyCode.RightArrow) || event.equals(KeyCode.LeftArrow)) {
this.preventDefaultKeyboardEvent(e); this.preventDefaultKeyboardEvent(event);
this.focusNextColor(event.equals(KeyCode.RightArrow)); this.focusNextColor(event.equals(KeyCode.RightArrow));
} }
}); });
} }
private preventDefaultKeyboardEvent(e: KeyboardEvent) { private preventDefaultKeyboardEvent(e: StandardKeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
private isFocusOnColors(): boolean { private isFocusOnColors(): boolean {
var result = false; let result = false;
this._colorCheckBoxesMap.forEach(({ checkbox }) => { this._colorCheckBoxesMap.forEach(({ checkbox }) => {
if (document.activeElement === checkbox.domNode) { if (document.activeElement === checkbox.domNode) {
result = true; result = true;
@@ -229,9 +215,9 @@ export class ServerGroupDialog extends Modal {
private fillGroupColors(container: HTMLElement): void { private fillGroupColors(container: HTMLElement): void {
for (let i = 0; i < this._viewModel.colors.length; i++) { for (let i = 0; i < this._viewModel.colors.length; i++) {
let color = this._viewModel.colors[i]; const color = this._viewModel.colors[i];
let colorCheckBox = new Checkbox({ const colorCheckBox = new Checkbox({
actionClassName: 'server-group-color', actionClassName: 'server-group-color',
title: color, title: color,
isChecked: false isChecked: false
@@ -277,9 +263,9 @@ export class ServerGroupDialog extends Modal {
} }
public set viewModel(theViewModel: ServerGroupViewModel) { public set viewModel(theViewModel: ServerGroupViewModel) {
this._viewModel = theViewModel; this._viewModel = theViewModel;
if (this.$serverGroupContainer) { if (this._serverGroupContainer) {
this.$serverGroupContainer.clearChildren(); DOM.clearNode(this._serverGroupContainer);
this.fillGroupColors(this.$serverGroupContainer.getHTMLElement()); this.fillGroupColors(this._serverGroupContainer);
} }
} }

127
src/sql/parts/objectExplorer/viewlet/serverTreeView.ts
View File

@@ -6,7 +6,6 @@
import 'vs/css!./media/serverTreeActions'; import 'vs/css!./media/serverTreeActions';
import * as errors from 'vs/base/common/errors'; import * as errors from 'vs/base/common/errors';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import * as builder from 'sql/base/browser/builder';
import Severity from 'vs/base/common/severity'; import Severity from 'vs/base/common/severity';
import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachListStyler } from 'vs/platform/theme/common/styler'; import { attachListStyler } from 'vs/platform/theme/common/styler';
@@ -14,6 +13,8 @@ import { ITree } from 'vs/base/parts/tree/browser/tree';
import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { localize } from 'vs/nls'; import { localize } from 'vs/nls';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { Event, Emitter } from 'vs/base/common/event';
import { append, $, hide, show } from 'vs/base/browser/dom';
import { ConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup'; import { ConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup';
import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile'; import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
@@ -27,28 +28,27 @@ import { IObjectExplorerService } from 'sql/workbench/services/objectExplorer/co
import { IConnectionProfile } from 'sql/platform/connection/common/interfaces'; import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { Button } from 'sql/base/browser/ui/button/button'; import { Button } from 'sql/base/browser/ui/button/button';
import { attachButtonStyler } from 'sql/platform/theme/common/styler'; import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { Event, Emitter } from 'vs/base/common/event';
import { TreeNode, TreeItemCollapsibleState } from 'sql/parts/objectExplorer/common/treeNode'; import { TreeNode, TreeItemCollapsibleState } from 'sql/parts/objectExplorer/common/treeNode';
import { SERVER_GROUP_CONFIG, SERVER_GROUP_AUTOEXPAND_CONFIG } from 'sql/parts/objectExplorer/serverGroupDialog/serverGroup.contribution'; import { SERVER_GROUP_CONFIG, SERVER_GROUP_AUTOEXPAND_CONFIG } from 'sql/parts/objectExplorer/serverGroupDialog/serverGroup.contribution';
import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService'; import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
import { ServerTreeActionProvider } from 'sql/parts/objectExplorer/viewlet/serverTreeActionProvider'; import { ServerTreeActionProvider } from 'sql/parts/objectExplorer/viewlet/serverTreeActionProvider';
import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService'; import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService';
import { isHidden } from 'sql/base/browser/dom';
const $ = builder.$;
/** /**
* ServerTreeview implements the dynamic tree view. * ServerTreeview implements the dynamic tree view.
*/ */
export class ServerTreeView { export class ServerTreeView {
public messages: builder.Builder; public messages: HTMLElement;
private _buttonSection: builder.Builder; private _buttonSection: HTMLElement;
private _treeSelectionHandler: TreeSelectionHandler; private _treeSelectionHandler: TreeSelectionHandler;
private _activeConnectionsFilterAction: ActiveConnectionsFilterAction; private _activeConnectionsFilterAction: ActiveConnectionsFilterAction;
private _tree: ITree; private _tree: ITree;
private _toDispose: IDisposable[] = []; private _toDispose: IDisposable[] = [];
private _onSelectionOrFocusChange: Emitter<void>; private _onSelectionOrFocusChange: Emitter<void>;
private _actionProvider: ServerTreeActionProvider; private _actionProvider: ServerTreeActionProvider;
constructor( constructor(
@IConnectionManagementService private _connectionManagementService: IConnectionManagementService, @IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
@IInstantiationService private _instantiationService: IInstantiationService, @IInstantiationService private _instantiationService: IInstantiationService,
@@ -101,15 +101,17 @@ export class ServerTreeView {
*/ */
public renderBody(container: HTMLElement): Thenable<void> { public renderBody(container: HTMLElement): Thenable<void> {
// Add div to display no connections found message and hide it by default // Add div to display no connections found message and hide it by default
this.messages = $('div.title').appendTo(container); this.messages = append(container, $('.title'));
$('span').style('padding-left', '10px').text('No connections found.').appendTo(this.messages); const messageText = append(this.messages, $('span'));
this.messages.hide(); messageText.style.paddingLeft = '10px';
messageText.innerText = localize('servers.noConnections', "No connections found.");
hide(this.messages);
if (!this._connectionManagementService.hasRegisteredServers()) { if (!this._connectionManagementService.hasRegisteredServers()) {
this._activeConnectionsFilterAction.enabled = false; this._activeConnectionsFilterAction.enabled = false;
this._buttonSection = $('div.button-section').appendTo(container); this._buttonSection = append(container, $('.button-section'));
var connectButton = new Button(this._buttonSection.getHTMLElement()); const connectButton = new Button(this._buttonSection);
connectButton.label = localize('serverTree.addConnection', 'Add Connection'); connectButton.label = localize('serverTree.addConnection', "Add Connection");
this._toDispose.push(attachButtonStyler(connectButton, this._themeService)); this._toDispose.push(attachButtonStyler(connectButton, this._themeService));
this._toDispose.push(connectButton.onDidClick(() => { this._toDispose.push(connectButton.onDidClick(() => {
this._connectionManagementService.showConnectionDialog(); this._connectionManagementService.showConnectionDialog();
@@ -124,41 +126,41 @@ export class ServerTreeView {
// Theme styler // Theme styler
this._toDispose.push(attachListStyler(this._tree, this._themeService)); this._toDispose.push(attachListStyler(this._tree, this._themeService));
const self = this;
// Refresh Tree when these events are emitted // Refresh Tree when these events are emitted
this._toDispose.push(this._connectionManagementService.onAddConnectionProfile((newProfile: IConnectionProfile) => { this._toDispose.push(this._connectionManagementService.onAddConnectionProfile((newProfile: IConnectionProfile) => {
self.handleAddConnectionProfile(newProfile); this.handleAddConnectionProfile(newProfile);
})); }));
this._toDispose.push(this._connectionManagementService.onDeleteConnectionProfile(() => { this._toDispose.push(this._connectionManagementService.onDeleteConnectionProfile(() => {
self.refreshTree(); this.refreshTree();
})); }));
this._toDispose.push(this._connectionManagementService.onDisconnect((connectionParams) => { this._toDispose.push(this._connectionManagementService.onDisconnect((connectionParams) => {
if (self.isObjectExplorerConnectionUri(connectionParams.connectionUri)) { if (this.isObjectExplorerConnectionUri(connectionParams.connectionUri)) {
self.deleteObjectExplorerNodeAndRefreshTree(connectionParams.connectionProfile); this.deleteObjectExplorerNodeAndRefreshTree(connectionParams.connectionProfile);
} }
})); }));
if (this._objectExplorerService && this._objectExplorerService.onUpdateObjectExplorerNodes) { if (this._objectExplorerService && this._objectExplorerService.onUpdateObjectExplorerNodes) {
this._toDispose.push(this._objectExplorerService.onUpdateObjectExplorerNodes(args => { this._toDispose.push(this._objectExplorerService.onUpdateObjectExplorerNodes(args => {
if (args.errorMessage) { if (args.errorMessage) {
self.showError(args.errorMessage); this.showError(args.errorMessage);
} }
if (args.connection) { if (args.connection) {
self.onObjectExplorerSessionCreated(args.connection); this.onObjectExplorerSessionCreated(args.connection);
} }
})); }));
} }
return new Promise<void>((resolve, reject) => {
self.refreshTree();
let root = <ConnectionProfileGroup>self._tree.getInput();
let expandGroups: boolean = self._configurationService.getValue(SERVER_GROUP_CONFIG)[SERVER_GROUP_AUTOEXPAND_CONFIG]; return new Promise<void>((resolve, reject) => {
this.refreshTree();
const root = <ConnectionProfileGroup>this._tree.getInput();
const expandGroups: boolean = this._configurationService.getValue(SERVER_GROUP_CONFIG)[SERVER_GROUP_AUTOEXPAND_CONFIG];
if (expandGroups) { if (expandGroups) {
self._tree.expandAll(ConnectionProfileGroup.getSubgroups(root)); this._tree.expandAll(ConnectionProfileGroup.getSubgroups(root));
} }
if (root && !root.hasValidConnections) { if (root && !root.hasValidConnections) {
self._treeSelectionHandler.onTreeActionStateChange(true); this._treeSelectionHandler.onTreeActionStateChange(true);
resolve(); resolve();
} else { } else {
resolve(); resolve();
@@ -174,20 +176,20 @@ export class ServerTreeView {
private async handleAddConnectionProfile(newProfile: IConnectionProfile): Promise<void> { private async handleAddConnectionProfile(newProfile: IConnectionProfile): Promise<void> {
if (newProfile) { if (newProfile) {
let groups = this._connectionManagementService.getConnectionGroups(); const groups = this._connectionManagementService.getConnectionGroups();
let profile = ConnectionUtils.findProfileInGroup(newProfile, groups); const profile = ConnectionUtils.findProfileInGroup(newProfile, groups);
if (profile) { if (profile) {
newProfile = profile; newProfile = profile;
} }
} }
if (this._buttonSection) { if (this._buttonSection) {
this._buttonSection.getHTMLElement().style.display = 'none'; hide(this._buttonSection);
this._activeConnectionsFilterAction.enabled = true; this._activeConnectionsFilterAction.enabled = true;
} }
let currentSelections = this._tree.getSelection(); const currentSelections = this._tree.getSelection();
let currentSelectedElement = currentSelections && currentSelections.length >= 1 ? currentSelections[0] : undefined; const currentSelectedElement = currentSelections && currentSelections.length >= 1 ? currentSelections[0] : undefined;
let newProfileIsSelected = currentSelectedElement && newProfile ? currentSelectedElement.id === newProfile.id : false; const newProfileIsSelected = currentSelectedElement && newProfile ? currentSelectedElement.id === newProfile.id : false;
if (newProfile && currentSelectedElement && !newProfileIsSelected) { if (newProfile && currentSelectedElement && !newProfileIsSelected) {
this._tree.clearSelection(); this._tree.clearSelection();
} }
@@ -205,9 +207,9 @@ export class ServerTreeView {
} }
private getConnectionInTreeInput(connectionId: string): ConnectionProfile { private getConnectionInTreeInput(connectionId: string): ConnectionProfile {
let root = TreeUpdateUtils.getTreeInput(this._connectionManagementService); const root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
let connections = ConnectionProfileGroup.getConnectionsInGroup(root); const connections = ConnectionProfileGroup.getConnectionsInGroup(root);
let results = connections.filter(con => { const results = connections.filter(con => {
if (connectionId === con.id) { if (connectionId === con.id) {
return true; return true;
} else { } else {
@@ -221,7 +223,7 @@ export class ServerTreeView {
} }
private onObjectExplorerSessionCreated(connection: IConnectionProfile) { private onObjectExplorerSessionCreated(connection: IConnectionProfile) {
var conn = this.getConnectionInTreeInput(connection.id); const conn = this.getConnectionInTreeInput(connection.id);
if (conn) { if (conn) {
this._tree.refresh(conn).then(() => { this._tree.refresh(conn).then(() => {
return this._tree.expand(conn).then(() => { return this._tree.expand(conn).then(() => {
@@ -234,7 +236,7 @@ export class ServerTreeView {
} }
public addObjectExplorerNodeAndRefreshTree(connection: IConnectionProfile): void { public addObjectExplorerNodeAndRefreshTree(connection: IConnectionProfile): void {
this.messages.hide(); hide(this.messages);
if (!this._objectExplorerService.getObjectExplorerNode(connection)) { if (!this._objectExplorerService.getObjectExplorerNode(connection)) {
this._objectExplorerService.updateObjectExplorerNodes(connection).then(() => { this._objectExplorerService.updateObjectExplorerNodes(connection).then(() => {
// The oe request is sent. an event will be raised when the session is created // The oe request is sent. an event will be raised when the session is created
@@ -245,7 +247,7 @@ export class ServerTreeView {
public deleteObjectExplorerNodeAndRefreshTree(connection: IConnectionProfile): Thenable<void> { public deleteObjectExplorerNodeAndRefreshTree(connection: IConnectionProfile): Thenable<void> {
if (connection) { if (connection) {
var conn = this.getConnectionInTreeInput(connection.id); const conn = this.getConnectionInTreeInput(connection.id);
if (conn) { if (conn) {
return this._objectExplorerService.deleteObjectExplorerNode(conn).then(() => { return this._objectExplorerService.deleteObjectExplorerNode(conn).then(() => {
this._tree.collapse(conn); this._tree.collapse(conn);
@@ -257,7 +259,7 @@ export class ServerTreeView {
} }
public refreshTree(): Promise<void> { public refreshTree(): Promise<void> {
this.messages.hide(); hide(this.messages);
this.clearOtherActions(); this.clearOtherActions();
return TreeUpdateUtils.registeredServerUpdate(this._tree, this._connectionManagementService); return TreeUpdateUtils.registeredServerUpdate(this._tree, this._connectionManagementService);
} }
@@ -273,7 +275,7 @@ export class ServerTreeView {
if (!treeInput || treeInput.length === 0) { if (!treeInput || treeInput.length === 0) {
return undefined; return undefined;
} }
let result = treeInput.map(group => { const result = treeInput.map(group => {
// Keep active/recent connections and remove the rest // Keep active/recent connections and remove the rest
if (group.connections) { if (group.connections) {
group.connections = group.connections.filter(con => { group.connections = group.connections.filter(con => {
@@ -305,28 +307,26 @@ export class ServerTreeView {
* Set tree elements based on the view (recent/active) * Set tree elements based on the view (recent/active)
*/ */
public showFilteredTree(view: string): void { public showFilteredTree(view: string): void {
hide(this.messages);
const self = this;
this.messages.hide();
// Clear other action views if user switched between two views // Clear other action views if user switched between two views
this.clearOtherActions(view); this.clearOtherActions(view);
let root = TreeUpdateUtils.getTreeInput(this._connectionManagementService); const root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
let treeInput: ConnectionProfileGroup = null; let treeInput: ConnectionProfileGroup = null;
if (root) { if (root) {
// Filter results based on view // Filter results based on view
let filteredResults = this.filterConnections([root], view); const filteredResults = this.filterConnections([root], view);
if (!filteredResults || !filteredResults[0]) { if (!filteredResults || !filteredResults[0]) {
this.messages.show(); show(this.messages);
this.messages.domFocus(); this.messages.focus();
} else { } else {
treeInput = filteredResults[0]; treeInput = filteredResults[0];
} }
this._tree.setInput(treeInput).then(() => { this._tree.setInput(treeInput).then(() => {
if (this.messages.isHidden()) { if (isHidden(this.messages)) {
self._tree.getFocus(); this._tree.getFocus();
self._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput)); this._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput));
} else { } else {
self._tree.clearFocus(); this._tree.clearFocus();
} }
}, errors.onUnexpectedError); }, errors.onUnexpectedError);
} else { } else {
@@ -341,25 +341,24 @@ export class ServerTreeView {
if (!searchString) { if (!searchString) {
return; return;
} }
const self = this; hide(this.messages);
this.messages.hide();
// Clear other actions if user searched during other views // Clear other actions if user searched during other views
this.clearOtherActions(); this.clearOtherActions();
// Filter connections based on search // Filter connections based on search
let filteredResults = this.searchConnections(searchString); const filteredResults = this.searchConnections(searchString);
if (!filteredResults || filteredResults.length === 0) { if (!filteredResults || filteredResults.length === 0) {
this.messages.show(); show(this.messages);
this.messages.domFocus(); this.messages.focus();
} }
// Add all connections to tree root and set tree input // Add all connections to tree root and set tree input
let treeInput = new ConnectionProfileGroup('searchroot', undefined, 'searchroot', undefined, undefined); const treeInput = new ConnectionProfileGroup('searchroot', undefined, 'searchroot', undefined, undefined);
treeInput.addConnections(filteredResults); treeInput.addConnections(filteredResults);
this._tree.setInput(treeInput).then(() => { this._tree.setInput(treeInput).then(() => {
if (this.messages.isHidden()) { if (isHidden(this.messages)) {
self._tree.getFocus(); this._tree.getFocus();
self._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput)); this._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput));
} else { } else {
self._tree.clearFocus(); this._tree.clearFocus();
} }
}, errors.onUnexpectedError); }, errors.onUnexpectedError);
} }
@@ -369,9 +368,9 @@ export class ServerTreeView {
*/ */
private searchConnections(searchString: string): ConnectionProfile[] { private searchConnections(searchString: string): ConnectionProfile[] {
let root = TreeUpdateUtils.getTreeInput(this._connectionManagementService); const root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
let connections = ConnectionProfileGroup.getConnectionsInGroup(root); const connections = ConnectionProfileGroup.getConnectionsInGroup(root);
let results = connections.filter(con => { const results = connections.filter(con => {
if (searchString && (searchString.length > 0)) { if (searchString && (searchString.length > 0)) {
return this.isMatch(con, searchString); return this.isMatch(con, searchString);
} else { } else {
@@ -499,4 +498,4 @@ export class ServerTreeView {
this._tree.dispose(); this._tree.dispose();
this._toDispose = dispose(this._toDispose); this._toDispose = dispose(this._toDispose);
} }
} }

42
src/sql/parts/profiler/dialog/profilerColumnEditorDialog.ts
View File

@@ -2,18 +2,18 @@
* Copyright (c) Microsoft Corporation. All rights reserved. * Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
'use strict';
import 'vs/css!sql/parts/profiler/media/profiler'; import 'vs/css!sql/parts/profiler/media/profiler';
import { Modal } from 'sql/workbench/browser/modal/modal'; import { Modal } from 'sql/workbench/browser/modal/modal';
import { attachModalDialogStyler } from 'sql/platform/theme/common/styler'; import { attachModalDialogStyler } from 'sql/platform/theme/common/styler';
import { ProfilerInput } from 'sql/parts/profiler/editor/profilerInput'; import { ProfilerInput } from 'sql/parts/profiler/editor/profilerInput';
import * as TelemetryKeys from 'sql/common/telemetryKeys'; import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import * as nls from 'vs/nls'; import * as nls from 'vs/nls';
import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IThemeService } from 'vs/platform/theme/common/themeService';
import { Builder } from 'sql/base/browser/builder';
import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox'; import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
import { Tree } from 'vs/base/parts/tree/browser/treeImpl'; import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -24,7 +24,6 @@ import { Event, Emitter } from 'vs/base/common/event';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
class EventItem { class EventItem {
@@ -209,8 +208,8 @@ class TreeRenderer implements IRenderer {
} }
renderTemplate(tree: ITree, templateId: string, container: HTMLElement): RenderTemplate { renderTemplate(tree: ITree, templateId: string, container: HTMLElement): RenderTemplate {
let data = Object.create(null); const data = Object.create(null);
let row = document.createElement('div'); const row = document.createElement('div');
row.className = 'tree-row'; row.className = 'tree-row';
DOM.append(container, row); DOM.append(container, row);
data.toDispose = []; data.toDispose = [];
@@ -301,13 +300,11 @@ class TreeDataSource implements IDataSource {
export class ProfilerColumnEditorDialog extends Modal { export class ProfilerColumnEditorDialog extends Modal {
private _selectBox: SelectBox; private _selectBox: SelectBox;
private _selectedValue: number = 0;
private readonly _options = [ private readonly _options = [
{ text: nls.localize('eventSort', "Sort by event") }, { text: nls.localize('eventSort', "Sort by event") },
{ text: nls.localize('nameColumn', "Sort by column") } { text: nls.localize('nameColumn', "Sort by column") }
]; ];
private _tree: Tree; private _tree: Tree;
private _input: ProfilerInput;
private _element: SessionItem; private _element: SessionItem;
private _treeContainer: HTMLElement; private _treeContainer: HTMLElement;
@@ -330,29 +327,22 @@ export class ProfilerColumnEditorDialog extends Modal {
} }
protected renderBody(container: HTMLElement): void { protected renderBody(container: HTMLElement): void {
let builder = new Builder(container); const body = DOM.append(container, DOM.$(''));
builder.div({}, b => { this._selectBox = new SelectBox(this._options, 0, this._contextViewService);
this._selectBox = new SelectBox(this._options, 0, this._contextViewService); this._selectBox.render(body);
this._selectBox.render(b.getHTMLElement()); this._register(this._selectBox.onDidSelect(e => {
this._register(this._selectBox.onDidSelect(e => { this._element.changeSort(e.index === 0 ? 'event' : 'column');
this._selectedValue = e.index; this._tree.refresh(this._element, true);
this._element.changeSort(e.index === 0 ? 'event' : 'column'); }));
this._tree.refresh(this._element, true); this._treeContainer = DOM.append(body, DOM.$('.profiler-column-tree'));
})); const renderer = new TreeRenderer();
}); this._tree = new Tree(this._treeContainer, { dataSource: new TreeDataSource(), renderer });
this._register(renderer.onSelectedChange(e => this._tree.refresh(e, true)));
builder.div({ 'class': 'profiler-column-tree' }, b => { this._register(attachListStyler(this._tree, this._themeService));
this._treeContainer = b.getHTMLElement();
let renderer = new TreeRenderer();
this._tree = new Tree(this._treeContainer, { dataSource: new TreeDataSource(), renderer });
this._register(renderer.onSelectedChange(e => this._tree.refresh(e, true)));
this._register(attachListStyler(this._tree, this._themeService));
});
} }
public open(input: ProfilerInput): void { public open(input: ProfilerInput): void {
super.show(); super.show();
this._input = input;
this._updateList(); this._updateList();
} }

171
src/sql/parts/profiler/dialog/profilerFilterDialog.ts
View File

@@ -3,7 +3,6 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
'use strict';
import 'vs/css!sql/media/icons/common-icons'; import 'vs/css!sql/media/icons/common-icons';
import 'vs/css!./media/profilerFilterDialog'; import 'vs/css!./media/profilerFilterDialog';
import { Button } from 'sql/base/browser/ui/button/button'; import { Button } from 'sql/base/browser/ui/button/button';
@@ -11,7 +10,6 @@ import { Modal } from 'sql/workbench/browser/modal/modal';
import * as TelemetryKeys from 'sql/common/telemetryKeys'; import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { attachButtonStyler, attachModalDialogStyler, attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { attachButtonStyler, attachModalDialogStyler, attachInputBoxStyler } from 'sql/platform/theme/common/styler';
import { KeyCode } from 'vs/base/common/keyCodes'; import { KeyCode } from 'vs/base/common/keyCodes';
import { Builder } from 'sql/base/browser/builder';
import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IThemeService } from 'vs/platform/theme/common/themeService';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -29,19 +27,19 @@ import { ProfilerFilter, ProfilerFilterClause, ProfilerFilterClauseOperator } fr
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
const ClearText: string = localize('profilerFilterDialog.clear', 'Clear All'); const ClearText: string = localize('profilerFilterDialog.clear', "Clear All");
const ApplyText: string = localize('profilerFilterDialog.apply', 'Apply'); const ApplyText: string = localize('profilerFilterDialog.apply', "Apply");
const OkText: string = localize('profilerFilterDialog.ok', 'OK'); const OkText: string = localize('profilerFilterDialog.ok', "OK");
const CancelText: string = localize('profilerFilterDialog.cancel', 'Cancel'); const CancelText: string = localize('profilerFilterDialog.cancel', "Cancel");
const DialogTitle: string = localize('profilerFilterDialog.title', 'Filters'); const DialogTitle: string = localize('profilerFilterDialog.title', "Filters");
const RemoveText: string = localize('profilerFilterDialog.remove', 'Remove'); const RemoveText: string = localize('profilerFilterDialog.remove', "Remove");
const AddText: string = localize('profilerFilterDialog.add', 'Add'); const AddText: string = localize('profilerFilterDialog.add', "Add");
const AddClausePromptText: string = localize('profilerFilterDialog.addClauseText', 'Click here to add a clause'); const AddClausePromptText: string = localize('profilerFilterDialog.addClauseText', "Click here to add a clause");
const TitleIconClass: string = 'icon filterLabel'; const TitleIconClass: string = 'icon filterLabel';
const FieldText: string = localize('profilerFilterDialog.fieldColumn', 'Field'); const FieldText: string = localize('profilerFilterDialog.fieldColumn', "Field");
const OperatorText: string = localize('profilerFilterDialog.operatorColumn', 'Operator'); const OperatorText: string = localize('profilerFilterDialog.operatorColumn', "Operator");
const ValueText: string = localize('profilerFilterDialog.valueColumn', 'Value'); const ValueText: string = localize('profilerFilterDialog.valueColumn', "Value");
const Equals: string = '='; const Equals: string = '=';
const NotEquals: string = '<>'; const NotEquals: string = '<>';
@@ -49,18 +47,18 @@ const LessThan: string = '<';
const LessThanOrEquals: string = '<='; const LessThanOrEquals: string = '<=';
const GreaterThan: string = '>'; const GreaterThan: string = '>';
const GreaterThanOrEquals: string = '>='; const GreaterThanOrEquals: string = '>=';
const IsNull: string = localize('profilerFilterDialog.isNullOperator', 'Is Null'); const IsNull: string = localize('profilerFilterDialog.isNullOperator', "Is Null");
const IsNotNull: string = localize('profilerFilterDialog.isNotNullOperator', 'Is Not Null'); const IsNotNull: string = localize('profilerFilterDialog.isNotNullOperator', "Is Not Null");
const Contains: string = localize('profilerFilterDialog.containsOperator', 'Contains'); const Contains: string = localize('profilerFilterDialog.containsOperator', "Contains");
const NotContains: string = localize('profilerFilterDialog.notContainsOperator', 'Not Contains'); const NotContains: string = localize('profilerFilterDialog.notContainsOperator', "Not Contains");
const StartsWith: string = localize('profilerFilterDialog.startsWithOperator', 'Starts With'); const StartsWith: string = localize('profilerFilterDialog.startsWithOperator', "Starts With");
const NotStartsWith: string = localize('profilerFilterDialog.notStartsWithOperator', 'Not Starts With'); const NotStartsWith: string = localize('profilerFilterDialog.notStartsWithOperator', "Not Starts With");
const Operators = [Equals, NotEquals, LessThan, LessThanOrEquals, GreaterThan, GreaterThanOrEquals, GreaterThan, GreaterThanOrEquals, IsNull, IsNotNull, Contains, NotContains, StartsWith, NotStartsWith]; const Operators = [Equals, NotEquals, LessThan, LessThanOrEquals, GreaterThan, GreaterThanOrEquals, GreaterThan, GreaterThanOrEquals, IsNull, IsNotNull, Contains, NotContains, StartsWith, NotStartsWith];
export class ProfilerFilterDialog extends Modal { export class ProfilerFilterDialog extends Modal {
private _clauseBuilder: Builder; private _clauseBuilder: HTMLElement;
private _okButton: Button; private _okButton: Button;
private _cancelButton: Button; private _cancelButton: Button;
private _clearButton: Button; private _clearButton: Button;
@@ -110,36 +108,27 @@ export class ProfilerFilterDialog extends Modal {
} }
protected renderBody(container: HTMLElement) { protected renderBody(container: HTMLElement) {
new Builder(container).div({ 'class': 'profiler-filter-dialog' }, (bodyBuilder) => { const body = DOM.append(container, DOM.$('.profiler-filter-dialog'));
bodyBuilder.element('table', { 'class': 'profiler-filter-clause-table' }, (builder) => { this._clauseBuilder = DOM.append(body, DOM.$('table.profiler-filter-clause-table'));
this._clauseBuilder = builder; const headerRow = DOM.append(this._clauseBuilder, DOM.$('tr'));
}); DOM.append(headerRow, DOM.$('td')).innerText = FieldText;
this._clauseBuilder.element('tr', {}, (headerBuilder) => { DOM.append(headerRow, DOM.$('td')).innerText = OperatorText;
headerBuilder.element('td').text(FieldText); DOM.append(headerRow, DOM.$('td')).innerText = ValueText;
headerBuilder.element('td').text(OperatorText); DOM.append(headerRow, DOM.$('td')).innerText = '';
headerBuilder.element('td').text(ValueText);
headerBuilder.element('td').text('');
});
this._input.filter.clauses.forEach(clause => {
this.addClauseRow(true, clause.field, this.convertToOperatorString(clause.operator), clause.value);
});
bodyBuilder.div({
'class': 'profiler-filter-add-clause-prompt',
'tabIndex': '0'
}).text(AddClausePromptText).on(DOM.EventType.CLICK, () => {
this.addClauseRow(false);
}).on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Space) || event.equals(KeyCode.Enter)) {
this.addClauseRow(false);
event.stopPropagation();
}
});
this._input.filter.clauses.forEach(clause => {
this.addClauseRow(true, clause.field, this.convertToOperatorString(clause.operator), clause.value);
}); });
const prompt = DOM.append(body, DOM.$('.profiler-filter-add-clause-prompt', { tabIndex: '0' }));
prompt.innerText = AddClausePromptText;
DOM.addDisposableListener(prompt, DOM.EventType.CLICK, () => this.addClauseRow(false));
DOM.addStandardDisposableListener(prompt, DOM.EventType.KEY_DOWN, (e: StandardKeyboardEvent) => {
if (e.equals(KeyCode.Space) || e.equals(KeyCode.Enter)) {
this.addClauseRow(false);
e.stopPropagation();
}
});
} }
protected layout(height?: number): void { protected layout(height?: number): void {
@@ -169,7 +158,7 @@ export class ProfilerFilterDialog extends Modal {
} }
private createSelectBox(container: HTMLElement, options: string[], selectedOption: string, ariaLabel: string): SelectBox { private createSelectBox(container: HTMLElement, options: string[], selectedOption: string, ariaLabel: string): SelectBox {
let dropdown = new SelectBox(options, selectedOption, this.contextViewService, undefined, { ariaLabel: ariaLabel }); const dropdown = new SelectBox(options, selectedOption, this.contextViewService, undefined, { ariaLabel: ariaLabel });
dropdown.render(container); dropdown.render(container);
this._register(attachSelectBoxStyler(dropdown, this._themeService)); this._register(attachSelectBoxStyler(dropdown, this._themeService));
return dropdown; return dropdown;
@@ -180,7 +169,7 @@ export class ProfilerFilterDialog extends Modal {
} }
private getFilter(): ProfilerFilter { private getFilter(): ProfilerFilter {
let clauses: ProfilerFilterClause[] = []; const clauses: ProfilerFilterClause[] = [];
this._clauseRows.forEach(row => { this._clauseRows.forEach(row => {
clauses.push({ clauses.push({
@@ -196,62 +185,52 @@ export class ProfilerFilterDialog extends Modal {
} }
private addClauseRow(setInitialValue: boolean, field?: string, operator?: string, value?: string): any { private addClauseRow(setInitialValue: boolean, field?: string, operator?: string, value?: string): any {
this._clauseBuilder.element('tr', {}, (rowBuilder) => { const row = DOM.append(this._clauseBuilder, DOM.$('tr'));
let rowElement = rowBuilder.getHTMLElement(); const clauseId = generateUuid();
let clauseId = generateUuid();
let fieldDropDown: SelectBox;
let operatorDropDown: SelectBox;
let valueText: InputBox;
rowBuilder.element('td', {}, (fieldCell) => { const columns = this._input.columns.map(column => column.name);
let columns = this._input.columns.map(column => column.name); const fieldDropDown = this.createSelectBox(DOM.append(row, DOM.$('td')), columns, columns[0], FieldText);
fieldDropDown = this.createSelectBox(fieldCell.getHTMLElement(), columns, columns[0], FieldText);
});
rowBuilder.element('td', {}, (operatorCell) => {
operatorDropDown = this.createSelectBox(operatorCell.getHTMLElement(), Operators, Operators[0], OperatorText);
});
rowBuilder.element('td', {}, (textCell) => {
valueText = new InputBox(textCell.getHTMLElement(), undefined, {});
this._register(attachInputBoxStyler(valueText, this._themeService));
});
rowBuilder.element('td', {}, (removeImageCell) => {
let removeClauseButton = removeImageCell.div({
'class': 'profiler-filter-remove-condition icon remove',
'tabIndex': '0',
'aria-label': RemoveText,
'title': RemoveText
});
removeClauseButton.on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => { const operatorDropDown = this.createSelectBox(DOM.append(row, DOM.$('td')), Operators, Operators[0], OperatorText);
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Space) || event.equals(KeyCode.Enter)) {
this.removeRow(clauseId);
event.stopPropagation();
}
});
removeClauseButton.on(DOM.EventType.CLICK, () => { const valueText = new InputBox(DOM.append(row, DOM.$('td')), undefined, {});
this.removeRow(clauseId); this._register(attachInputBoxStyler(valueText, this._themeService));
});
});
if (setInitialValue) { const removeCell = DOM.append(row, DOM.$('td'));
fieldDropDown.selectWithOptionName(field); const removeClauseButton = DOM.append(removeCell, DOM.$('.profiler-filter-remove-condition.icon.remove', {
operatorDropDown.selectWithOptionName(operator); 'tabIndex': '0',
valueText.value = value; 'aria-label': RemoveText,
'title': RemoveText
}));
DOM.addStandardDisposableListener(removeClauseButton, DOM.EventType.KEY_DOWN, (e: StandardKeyboardEvent) => {
if (e.equals(KeyCode.Space) || e.equals(KeyCode.Enter)) {
this.removeRow(clauseId);
e.stopPropagation();
} }
this._clauseRows.push({ });
id: clauseId,
row: rowElement, DOM.addDisposableListener(removeClauseButton, DOM.EventType.CLICK, (e: MouseEvent) => {
field: fieldDropDown, this.removeRow(clauseId);
operator: operatorDropDown, });
value: valueText
}); if (setInitialValue) {
fieldDropDown.selectWithOptionName(field);
operatorDropDown.selectWithOptionName(operator);
valueText.value = value;
}
this._clauseRows.push({
id: clauseId,
row,
field: fieldDropDown,
operator: operatorDropDown,
value: valueText
}); });
} }
private removeRow(clauseId: string) { private removeRow(clauseId: string) {
let idx = this._clauseRows.findIndex((entry) => { return entry.id === clauseId; }); const idx = this._clauseRows.findIndex((entry) => { return entry.id === clauseId; });
if (idx !== -1) { if (idx !== -1) {
this._clauseRows[idx].row.remove(); this._clauseRows[idx].row.remove();
this._clauseRows.splice(idx, 1); this._clauseRows.splice(idx, 1);

6
src/sql/parts/query/editor/gridPanel.ts
View File

@@ -2,7 +2,6 @@
* Copyright (c) Microsoft Corporation. All rights reserved. * Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
'use strict';
import * as pretty from 'pretty-data'; import * as pretty from 'pretty-data';
@@ -23,7 +22,6 @@ import { CopyKeybind } from 'sql/base/browser/ui/table/plugins/copyKeybind.plugi
import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additionalKeyBindings.plugin'; import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additionalKeyBindings.plugin';
import { ITableStyles, ITableMouseEvent } from 'sql/base/browser/ui/table/interfaces'; import { ITableStyles, ITableMouseEvent } from 'sql/base/browser/ui/table/interfaces';
import { warn } from 'sql/base/common/log'; import { warn } from 'sql/base/common/log';
import { $ } from 'sql/base/browser/builder';
import * as azdata from 'azdata'; import * as azdata from 'azdata';
@@ -203,7 +201,7 @@ export class GridPanel extends ViewletPanel {
} }
} }
public resetScrollPosition() : void { public resetScrollPosition(): void {
this.splitView.setScrollPosition(this.state.scrollPosition); this.splitView.setScrollPosition(this.state.scrollPosition);
} }
@@ -813,7 +811,7 @@ class GridTable<T> extends Disposable implements IView {
} }
public dispose() { public dispose() {
$(this.container).destroy(); this.container.remove();
this.table.dispose(); this.table.dispose();
this.actionBar.dispose(); this.actionBar.dispose();
super.dispose(); super.dispose();

26
src/sql/parts/query/editor/messagePanel.ts
View File

@@ -2,13 +2,12 @@
* Copyright (c) Microsoft Corporation. All rights reserved. * Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
'use strict';
import 'vs/css!./media/messagePanel'; import 'vs/css!./media/messagePanel';
import { IMessagesActionContext, CopyMessagesAction, CopyAllMessagesAction } from './actions'; import { IMessagesActionContext, CopyMessagesAction, CopyAllMessagesAction } from './actions';
import QueryRunner from 'sql/platform/query/common/queryRunner'; import QueryRunner from 'sql/platform/query/common/queryRunner';
import { QueryInput } from 'sql/parts/query/common/queryInput'; import { QueryInput } from 'sql/parts/query/common/queryInput';
import { $ } from 'sql/base/browser/builder'; import { IExpandableTree } from 'sql/parts/objectExplorer/viewlet/treeUpdateUtils';
import { IResultMessage, ISelectionData } from 'azdata'; import { IResultMessage, ISelectionData } from 'azdata';
@@ -30,7 +29,7 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
import { ScrollbarVisibility } from 'vs/base/common/scrollable'; import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { IExpandableTree } from 'sql/parts/objectExplorer/viewlet/treeUpdateUtils'; import { $ } from 'vs/base/browser/dom';
export interface IResultMessageIntern extends IResultMessage { export interface IResultMessageIntern extends IResultMessage {
id?: string; id?: string;
@@ -83,13 +82,12 @@ export class MessagePanel extends ViewletPanel {
private renderer = new MessageRenderer(this.messageLineCountMap); private renderer = new MessageRenderer(this.messageLineCountMap);
private model = new Model(); private model = new Model();
private controller: MessageController; private controller: MessageController;
private container = $('div message-tree').getHTMLElement(); private container = $('.message-tree');
private queryRunnerDisposables: IDisposable[] = []; private queryRunnerDisposables: IDisposable[] = [];
private _state: MessagePanelState; private _state: MessagePanelState;
private tree: ITree; private tree: ITree;
private _selectAllMessages: boolean;
constructor( constructor(
options: IViewletPanelOptions, options: IViewletPanelOptions,
@@ -335,16 +333,22 @@ class MessageRenderer implements IRenderer {
renderTemplate(tree: ITree, templateId: string, container: HTMLElement): IMessageTemplate | IBatchTemplate { renderTemplate(tree: ITree, templateId: string, container: HTMLElement): IMessageTemplate | IBatchTemplate {
if (templateId === TemplateIds.MESSAGE) { if (templateId === TemplateIds.MESSAGE) {
$('div.time-stamp').appendTo(container); container.append($('.time-stamp'));
const message = $('div.message').style('white-space', 'pre').appendTo(container).getHTMLElement(); const message = $('.message');
message.style.whiteSpace = 'pre';
container.append(message);
return { message }; return { message };
} else if (templateId === TemplateIds.BATCH) { } else if (templateId === TemplateIds.BATCH) {
const timeStamp = $('div.time-stamp').appendTo(container).getHTMLElement(); const timeStamp = $('.time-stamp');
const message = $('div.batch-start').style('white-space', 'pre').appendTo(container).getHTMLElement(); container.append(timeStamp);
const message = $('.batch-start');
message.style.whiteSpace = 'pre';
container.append(message);
return { message, timeStamp }; return { message, timeStamp };
} else if (templateId === TemplateIds.ERROR) { } else if (templateId === TemplateIds.ERROR) {
$('div.time-stamp').appendTo(container); container.append($('.time-stamp'));
const message = $('div.error-message').appendTo(container).getHTMLElement(); const message = $('.error-message');
container.append(message);
return { message }; return { message };
} else { } else {
return undefined; return undefined;

39
src/sql/platform/accounts/browser/autoOAuthDialog.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/autoOAuthDialog'; import 'vs/css!./media/autoOAuthDialog';
import { Builder, $ } from 'sql/base/browser/builder';
import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachInputBoxStyler } from 'vs/platform/theme/common/styler'; import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
import { Event, Emitter } from 'vs/base/common/event'; import { Event, Emitter } from 'vs/base/common/event';
@@ -12,6 +12,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
import { localize } from 'vs/nls'; import { localize } from 'vs/nls';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { $, append } from 'vs/base/browser/dom';
import { Button } from 'sql/base/browser/ui/button/button'; import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal'; import { Modal } from 'sql/workbench/browser/modal/modal';
@@ -82,37 +83,21 @@ export class AutoOAuthDialog extends Modal {
} }
protected renderBody(container: HTMLElement) { protected renderBody(container: HTMLElement) {
$().div({ class: 'auto-oauth-description-section new-section' }, (descriptionContainer) => { this._descriptionElement = append(container, $('.auto-oauth-description-section.new-section'));
this._descriptionElement = descriptionContainer.getHTMLElement();
});
let addAccountSection; const addAccountSection = append(container, $('.auto-oauth-info-section.new-section'));
$().div({ class: 'auto-oauth-info-section new-section' }, (addAccountContainer) => { this._userCodeInputBox = this.createInputBoxHelper(addAccountSection, localize('userCode', 'User code'));
addAccountSection = addAccountContainer.getHTMLElement(); this._websiteInputBox = this.createInputBoxHelper(addAccountSection, localize('website', 'Website'));
this._userCodeInputBox = this.createInputBoxHelper(addAccountContainer, localize('userCode', 'User code'));
this._websiteInputBox = this.createInputBoxHelper(addAccountContainer, localize('website', 'Website'));
});
new Builder(container).div({ class: 'auto-oauth-dialog' }, (builder) => {
builder.append(this._descriptionElement);
builder.append(addAccountSection);
});
} }
private createInputBoxHelper(container: Builder, label: string): InputBox { private createInputBoxHelper(container: HTMLElement, label: string): InputBox {
let inputBox: InputBox; const inputContainer = append(container, $('.dialog-input-section'));
container.div({ class: 'dialog-input-section' }, (inputContainer) => { append(inputContainer, $('.dialog-label')).innerText = label;
inputContainer.div({ class: 'dialog-label' }, (labelContainer) => { const inputCellContainer = append(inputContainer, $('.dialog-input'));
labelContainer.text(label);
});
inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => { return new InputBox(inputCellContainer, this._contextViewService, {
inputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, { ariaLabel: label
ariaLabel: label
});
});
}); });
return inputBox;
} }
private registerListeners(): void { private registerListeners(): void {

166
src/sql/platform/accounts/browser/firewallRuleDialog.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/firewallRuleDialog'; import 'vs/css!./media/firewallRuleDialog';
import { Builder, $ } from 'sql/base/browser/builder';
import * as DOM from 'vs/base/browser/dom'; import * as DOM from 'vs/base/browser/dom';
import { Event, Emitter } from 'vs/base/common/event'; import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
@@ -18,6 +18,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IWindowsService } from 'vs/platform/windows/common/windows'; import { IWindowsService } from 'vs/platform/windows/common/windows';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService'; import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import * as azdata from 'azdata'; import * as azdata from 'azdata';
import { Button } from 'sql/base/browser/ui/button/button'; import { Button } from 'sql/base/browser/ui/button/button';
@@ -27,15 +28,14 @@ import { attachModalDialogStyler, attachButtonStyler } from 'sql/platform/theme/
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { IAccountPickerService } from 'sql/platform/accounts/common/accountPicker'; import { IAccountPickerService } from 'sql/platform/accounts/common/accountPicker';
import * as TelemetryKeys from 'sql/common/telemetryKeys'; import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
// TODO: Make the help link 1) extensible (01/08/2018, https://github.com/Microsoft/azuredatastudio/issues/450) // TODO: Make the help link 1) extensible (01/08/2018, https://github.com/Microsoft/azuredatastudio/issues/450)
// in case that other non-Azure sign in is to be used // in case that other non-Azure sign in is to be used
const firewallHelpUri = 'https://aka.ms/sqlopsfirewallhelp'; const firewallHelpUri = 'https://aka.ms/sqlopsfirewallhelp';
const LocalizedStrings = { const LocalizedStrings = {
FROM: localize('from', 'From'), FROM: localize('from', "From"),
TO: localize('to', 'To') TO: localize('to', "To")
}; };
export class FirewallRuleDialog extends Modal { export class FirewallRuleDialog extends Modal {
@@ -62,7 +62,7 @@ export class FirewallRuleDialog extends Modal {
constructor( constructor(
@IAccountPickerService private _accountPickerService: IAccountPickerService, @IAccountPickerService private _accountPickerService: IAccountPickerService,
@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService, @ILayoutService layoutService: ILayoutService,
@IThemeService themeService: IThemeService, @IThemeService themeService: IThemeService,
@IInstantiationService private _instantiationService: IInstantiationService, @IInstantiationService private _instantiationService: IInstantiationService,
@IContextViewService private _contextViewService: IContextViewService, @IContextViewService private _contextViewService: IContextViewService,
@@ -72,7 +72,7 @@ export class FirewallRuleDialog extends Modal {
@IClipboardService clipboardService: IClipboardService @IClipboardService clipboardService: IClipboardService
) { ) {
super( super(
localize('createNewFirewallRule', 'Create new firewall rule'), localize('createNewFirewallRule', "Create new firewall rule"),
TelemetryKeys.FireWallRule, TelemetryKeys.FireWallRule,
telemetryService, telemetryService,
layoutService, layoutService,
@@ -99,29 +99,28 @@ export class FirewallRuleDialog extends Modal {
attachModalDialogStyler(this, this._themeService); attachModalDialogStyler(this, this._themeService);
this.backButton.onDidClick(() => this.cancel()); this.backButton.onDidClick(() => this.cancel());
this._register(attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND })); this._register(attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));
this._createButton = this.addFooterButton(localize('firewall.ok', 'OK'), () => this.createFirewallRule()); this._createButton = this.addFooterButton(localize('firewall.ok', "OK"), () => this.createFirewallRule());
this._closeButton = this.addFooterButton(localize('firewall.cancel', 'Cancel'), () => this.cancel()); this._closeButton = this.addFooterButton(localize('firewall.cancel', "Cancel"), () => this.cancel());
this.registerListeners(); this.registerListeners();
} }
protected renderBody(container: HTMLElement) { protected renderBody(container: HTMLElement) {
let descriptionSection; const body = DOM.append(container, DOM.$('.firewall-rule-dialog'));
$().div({ 'class': 'firewall-rule-description-section new-section' }, (descriptionContainer) => { const descriptionSection = DOM.append(body, DOM.$('.firewall-rule-description-section.new-section'));
descriptionSection = descriptionContainer.getHTMLElement();
DOM.append(descriptionContainer.getHTMLElement(), DOM.$('div.firewall-rule-icon'));
const textDescriptionContainer = DOM.append(descriptionContainer.getHTMLElement(), DOM.$('div.firewall-rule-description')); DOM.append(descriptionSection, DOM.$('div.firewall-rule-icon'));
let dialogDescription = localize('firewallRuleDialogDescription',
'Your client IP address does not have access to the server. Sign in to an Azure account and create a new firewall rule to enable access.');
this.createLabelElement(new Builder(textDescriptionContainer), dialogDescription, false);
this._helpLink = DOM.append(textDescriptionContainer, DOM.$('a.help-link')); const textDescriptionContainer = DOM.append(descriptionSection, DOM.$('div.firewall-rule-description'));
this._helpLink.setAttribute('href', firewallHelpUri); const dialogDescription = localize('firewallRuleDialogDescription',
this._helpLink.innerHTML += localize('firewallRuleHelpDescription', 'Learn more about firewall settings'); "Your client IP address does not have access to the server. Sign in to an Azure account and create a new firewall rule to enable access.");
this._helpLink.onclick = () => { this.createLabelElement(textDescriptionContainer, dialogDescription, false);
this._windowsService.openExternal(firewallHelpUri);
}; this._helpLink = DOM.append(textDescriptionContainer, DOM.$('a.help-link'));
}); this._helpLink.setAttribute('href', firewallHelpUri);
this._helpLink.innerHTML += localize('firewallRuleHelpDescription', 'Learn more about firewall settings');
this._helpLink.onclick = () => {
this._windowsService.openExternal(firewallHelpUri);
};
// Create account picker with event handling // Create account picker with event handling
this._accountPickerService.addAccountCompleteEvent(() => this.spinner = false); this._accountPickerService.addAccountCompleteEvent(() => this.spinner = false);
@@ -132,88 +131,61 @@ export class FirewallRuleDialog extends Modal {
this._accountPickerService.addAccountStartEvent(() => this.spinner = true); this._accountPickerService.addAccountStartEvent(() => this.spinner = true);
this._accountPickerService.onAccountSelectionChangeEvent((account) => this.onAccountSelectionChange(account)); this._accountPickerService.onAccountSelectionChangeEvent((account) => this.onAccountSelectionChange(account));
let azureAccountSection; const azureAccountSection = DOM.append(body, DOM.$('.azure-account-section.new-section'));
$().div({ 'class': 'azure-account-section new-section' }, (azureAccountContainer) => { const azureAccountLabel = localize('azureAccount', "Azure account");
azureAccountSection = azureAccountContainer.getHTMLElement(); this.createLabelElement(azureAccountSection, azureAccountLabel, true);
let azureAccountLabel = localize('azureAccount', 'Azure account'); this._accountPickerService.renderAccountPicker(DOM.append(azureAccountSection, DOM.$('.dialog-input')));
this.createLabelElement(azureAccountContainer, azureAccountLabel, true);
azureAccountContainer.div({ 'class': 'dialog-input' }, (inputCellContainer) => { const firewallRuleSection = DOM.append(body, DOM.$('.firewall-rule-section.new-section'));
this._accountPickerService.renderAccountPicker(inputCellContainer.getHTMLElement()); const firewallRuleLabel = localize('filewallRule', 'Firewall rule');
}); this.createLabelElement(firewallRuleSection, firewallRuleLabel, true);
const radioContainer = DOM.append(firewallRuleSection, DOM.$('.radio-section'));
const form = DOM.append(radioContainer, DOM.$('form.firewall-rule'));
const IPAddressDiv = DOM.append(form, DOM.$('div.firewall-ip-address dialog-input'));
const subnetIPRangeDiv = DOM.append(form, DOM.$('div.firewall-subnet-ip-range dialog-input'));
const IPAddressContainer = DOM.append(IPAddressDiv, DOM.$('div.option-container'));
this._IPAddressInput = DOM.append(IPAddressContainer, DOM.$('input.option-input'));
this._IPAddressInput.setAttribute('type', 'radio');
this._IPAddressInput.setAttribute('name', 'firewallRuleChoice');
this._IPAddressInput.setAttribute('value', 'ipAddress');
const IPAddressDescription = DOM.append(IPAddressContainer, DOM.$('div.option-description'));
IPAddressDescription.innerText = localize('addIPAddressLabel', 'Add my client IP ');
this._IPAddressElement = DOM.append(IPAddressContainer, DOM.$('div.option-ip-address'));
const subnetIpRangeContainer = DOM.append(subnetIPRangeDiv, DOM.$('div.option-container'));
this._subnetIPRangeInput = DOM.append(subnetIpRangeContainer, DOM.$('input.option-input'));
this._subnetIPRangeInput.setAttribute('type', 'radio');
this._subnetIPRangeInput.setAttribute('name', 'firewallRuleChoice');
this._subnetIPRangeInput.setAttribute('value', 'ipRange');
const subnetIPRangeDescription = DOM.append(subnetIpRangeContainer, DOM.$('div.option-description'));
subnetIPRangeDescription.innerText = localize('addIpRangeLabel', 'Add my subnet IP range');
const subnetIPRangeSection = DOM.append(subnetIPRangeDiv, DOM.$('.subnet-ip-range-input'));
const inputContainer = DOM.append(subnetIPRangeSection, DOM.$('.dialog-input-section'));
DOM.append(inputContainer, DOM.$('.dialog-label')).innerText = LocalizedStrings.FROM;
this._fromRangeinputBox = new InputBox(DOM.append(inputContainer, DOM.$('.dialog-input')), this._contextViewService, {
ariaLabel: LocalizedStrings.FROM
}); });
let subnetIPRangeSection; DOM.append(inputContainer, DOM.$('.dialog-label')).innerText = LocalizedStrings.TO;
$().div({ 'class': 'subnet-ip-range-input' }, (subnetIPRangeContainer) => {
subnetIPRangeSection = subnetIPRangeContainer.getHTMLElement();
subnetIPRangeContainer.div({ 'class': 'dialog-input-section' }, (inputContainer) => {
inputContainer.div({ 'class': 'dialog-label' }, (labelContainer) => {
labelContainer.text(LocalizedStrings.FROM);
});
inputContainer.div({ 'class': 'dialog-input' }, (inputCellContainer) => { this._toRangeinputBox = new InputBox(DOM.append(inputContainer, DOM.$('.dialog-input')), this._contextViewService, {
this._fromRangeinputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, { ariaLabel: LocalizedStrings.TO
ariaLabel: LocalizedStrings.FROM
});
});
inputContainer.div({ 'class': 'dialog-label' }, (labelContainer) => {
labelContainer.text(LocalizedStrings.TO);
});
inputContainer.div({ 'class': 'dialog-input' }, (inputCellContainer) => {
this._toRangeinputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, {
ariaLabel: LocalizedStrings.TO
});
});
});
});
let firewallRuleSection;
$().div({ 'class': 'firewall-rule-section new-section' }, (firewallRuleContainer) => {
firewallRuleSection = firewallRuleContainer.getHTMLElement();
const firewallRuleLabel = localize('filewallRule', 'Firewall rule');
this.createLabelElement(firewallRuleContainer, firewallRuleLabel, true);
firewallRuleContainer.div({ 'class': 'radio-section' }, (radioContainer) => {
const form = DOM.append(radioContainer.getHTMLElement(), DOM.$('form.firewall-rule'));
const IPAddressDiv = DOM.append(form, DOM.$('div.firewall-ip-address dialog-input'));
const subnetIPRangeDiv = DOM.append(form, DOM.$('div.firewall-subnet-ip-range dialog-input'));
const IPAddressContainer = DOM.append(IPAddressDiv, DOM.$('div.option-container'));
this._IPAddressInput = DOM.append(IPAddressContainer, DOM.$('input.option-input'));
this._IPAddressInput.setAttribute('type', 'radio');
this._IPAddressInput.setAttribute('name', 'firewallRuleChoice');
this._IPAddressInput.setAttribute('value', 'ipAddress');
const IPAddressDescription = DOM.append(IPAddressContainer, DOM.$('div.option-description'));
IPAddressDescription.innerText = localize('addIPAddressLabel', 'Add my client IP ');
this._IPAddressElement = DOM.append(IPAddressContainer, DOM.$('div.option-ip-address'));
const subnetIpRangeContainer = DOM.append(subnetIPRangeDiv, DOM.$('div.option-container'));
this._subnetIPRangeInput = DOM.append(subnetIpRangeContainer, DOM.$('input.option-input'));
this._subnetIPRangeInput.setAttribute('type', 'radio');
this._subnetIPRangeInput.setAttribute('name', 'firewallRuleChoice');
this._subnetIPRangeInput.setAttribute('value', 'ipRange');
const subnetIPRangeDescription = DOM.append(subnetIpRangeContainer, DOM.$('div.option-description'));
subnetIPRangeDescription.innerText = localize('addIpRangeLabel', 'Add my subnet IP range');
DOM.append(subnetIPRangeDiv, subnetIPRangeSection);
});
});
new Builder(container).div({ 'class': 'firewall-rule-dialog' }, (builder) => {
builder.append(descriptionSection);
builder.append(azureAccountSection);
builder.append(firewallRuleSection);
}); });
this._register(this._themeService.onThemeChange(e => this.updateTheme(e))); this._register(this._themeService.onThemeChange(e => this.updateTheme(e)));
this.updateTheme(this._themeService.getTheme()); this.updateTheme(this._themeService.getTheme());
$(this._IPAddressInput).on(DOM.EventType.CLICK, () => { this._register(DOM.addDisposableListener(this._IPAddressElement, DOM.EventType.CLICK, () => {
this.onFirewallRuleOptionSelected(true); this.onFirewallRuleOptionSelected(true);
}); }));
$(this._subnetIPRangeInput).on(DOM.EventType.CLICK, () => { this._register(DOM.addDisposableListener(this._subnetIPRangeInput, DOM.EventType.CLICK, () => {
this.onFirewallRuleOptionSelected(false); this.onFirewallRuleOptionSelected(false);
}); }));
} }
private onFirewallRuleOptionSelected(isIPAddress: boolean) { private onFirewallRuleOptionSelected(isIPAddress: boolean) {
@@ -230,14 +202,12 @@ export class FirewallRuleDialog extends Modal {
// Nothing currently laid out statically in this class // Nothing currently laid out statically in this class
} }
private createLabelElement(container: Builder, content: string, isHeader?: boolean) { private createLabelElement(container: HTMLElement, content: string, isHeader?: boolean) {
let className = 'dialog-label'; let className = 'dialog-label';
if (isHeader) { if (isHeader) {
className += ' header'; className += ' header';
} }
container.div({ 'class': className }, (labelContainer) => { DOM.append(container, DOM.$(`.${className}`)).innerText = content;
labelContainer.text(content);
});
} }
// Update theming that is specific to firewall rule flyout body // Update theming that is specific to firewall rule flyout body

3
src/sql/workbench/parts/dashboard/dashboardEditor.ts
View File

@@ -23,7 +23,6 @@ import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement'; import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
import { CancellationToken } from 'vs/base/common/cancellation'; import { CancellationToken } from 'vs/base/common/cancellation';
import { IStorageService } from 'vs/platform/storage/common/storage'; import { IStorageService } from 'vs/platform/storage/common/storage';
import { $ } from 'sql/base/browser/builder';
export class DashboardEditor extends BaseEditor { export class DashboardEditor extends BaseEditor {
@@ -85,7 +84,7 @@ export class DashboardEditor extends BaseEditor {
super.setInput(input, options, CancellationToken.None); super.setInput(input, options, CancellationToken.None);
$(parentElement).clearChildren(); DOM.clearNode(parentElement);
if (!input.hasBootstrapped) { if (!input.hasBootstrapped) {
const container = DOM.$<HTMLElement>('.dashboardEditor'); const container = DOM.$<HTMLElement>('.dashboardEditor');

4
src/sql/workbench/parts/notebook/notebookEditor.ts
View File

@@ -16,7 +16,6 @@ import { NotebookModule } from 'sql/workbench/parts/notebook/notebook.module';
import { NOTEBOOK_SELECTOR } from 'sql/workbench/parts/notebook/notebook.component'; import { NOTEBOOK_SELECTOR } from 'sql/workbench/parts/notebook/notebook.component';
import { INotebookParams } from 'sql/workbench/services/notebook/common/notebookService'; import { INotebookParams } from 'sql/workbench/services/notebook/common/notebookService';
import { IStorageService } from 'vs/platform/storage/common/storage'; import { IStorageService } from 'vs/platform/storage/common/storage';
import { $ } from 'sql/base/browser/builder';
export class NotebookEditor extends BaseEditor { export class NotebookEditor extends BaseEditor {
@@ -67,7 +66,7 @@ export class NotebookEditor extends BaseEditor {
super.setInput(input, options, CancellationToken.None); super.setInput(input, options, CancellationToken.None);
$(parentElement).clearChildren(); DOM.clearNode(parentElement);
if (!input.hasBootstrapped) { if (!input.hasBootstrapped) {
let container = DOM.$<HTMLElement>('.notebookEditor'); let container = DOM.$<HTMLElement>('.notebookEditor');
@@ -104,4 +103,3 @@ export class NotebookEditor extends BaseEditor {
); );
} }
} }

255
src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
View File

@@ -21,10 +21,8 @@ import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { ClearRecentConnectionsAction } from 'sql/parts/connection/common/connectionActions'; import { ClearRecentConnectionsAction } from 'sql/parts/connection/common/connectionActions';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { Event, Emitter } from 'vs/base/common/event'; import { Event, Emitter } from 'vs/base/common/event';
import { Builder, $ } from 'sql/base/browser/builder';
import { ICancelableEvent } from 'vs/base/parts/tree/browser/treeDefaults'; import { ICancelableEvent } from 'vs/base/parts/tree/browser/treeDefaults';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
@@ -37,7 +35,8 @@ import * as DOM from 'vs/base/browser/dom';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
export interface OnShowUIResponse { export interface OnShowUIResponse {
selectedProviderType: string; selectedProviderType: string;
@@ -45,19 +44,19 @@ export interface OnShowUIResponse {
} }
export class ConnectionDialogWidget extends Modal { export class ConnectionDialogWidget extends Modal {
private _bodyBuilder: Builder; private _body: HTMLElement;
private _recentConnectionBuilder: Builder; private _recentConnection: HTMLElement;
private _noRecentConnectionBuilder: Builder; private _noRecentConnection: HTMLElement;
private _savedConnectionBuilder: Builder; private _savedConnection: HTMLElement;
private _noSavedConnectionBuilder: Builder; private _noSavedConnection: HTMLElement;
private _connectionDetailTitle: Builder; private _connectionDetailTitle: HTMLElement;
private _connectButton: Button; private _connectButton: Button;
private _closeButton: Button; private _closeButton: Button;
private _providerTypeSelectBox: SelectBox; private _providerTypeSelectBox: SelectBox;
private _newConnectionParams: INewConnectionParams; private _newConnectionParams: INewConnectionParams;
private _recentConnectionTree: ITree; private _recentConnectionTree: ITree;
private _savedConnectionTree: ITree; private _savedConnectionTree: ITree;
private $connectionUIContainer: Builder; private _connectionUIContainer: HTMLElement;
private _databaseDropdownExpanded: boolean; private _databaseDropdownExpanded: boolean;
private _actionbar: ActionBar; private _actionbar: ActionBar;
private _providers: string[]; private _providers: string[];
@@ -91,15 +90,15 @@ export class ConnectionDialogWidget extends Modal {
private providerNameToDisplayNameMap: { [providerDisplayName: string]: string }, private providerNameToDisplayNameMap: { [providerDisplayName: string]: string },
@IInstantiationService private _instantiationService: IInstantiationService, @IInstantiationService private _instantiationService: IInstantiationService,
@IConnectionManagementService private _connectionManagementService: IConnectionManagementService, @IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService, @IThemeService themeService: IThemeService,
@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService, @ILayoutService layoutService: ILayoutService,
@ITelemetryService telemetryService: ITelemetryService, @ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService, @IContextKeyService contextKeyService: IContextKeyService,
@IContextMenuService private _contextMenuService: IContextMenuService, @IContextMenuService private _contextMenuService: IContextMenuService,
@IContextViewService private _contextViewService: IContextViewService, @IContextViewService private _contextViewService: IContextViewService,
@IClipboardService clipboardService: IClipboardService @IClipboardService clipboardService: IClipboardService
) { ) {
super(localize('connection', 'Connection'), TelemetryKeys.Connection, telemetryService, layoutService, clipboardService, _workbenchThemeService, contextKeyService, { hasSpinner: true, hasErrors: true }); super(localize('connection', "Connection"), TelemetryKeys.Connection, telemetryService, layoutService, clipboardService, themeService, contextKeyService, { hasSpinner: true, hasErrors: true });
} }
/** /**
@@ -117,7 +116,7 @@ export class ConnectionDialogWidget extends Modal {
let filteredProviderTypes = this.providerTypeOptions; let filteredProviderTypes = this.providerTypeOptions;
if (this._newConnectionParams && this._newConnectionParams.providers) { if (this._newConnectionParams && this._newConnectionParams.providers) {
let validProviderNames = Object.keys(this.providerNameToDisplayNameMap).filter(x => this.includeProvider(x, this._newConnectionParams)); const validProviderNames = Object.keys(this.providerNameToDisplayNameMap).filter(x => this.includeProvider(x, this._newConnectionParams));
if (validProviderNames && validProviderNames.length > 0) { if (validProviderNames && validProviderNames.length > 0) {
filteredProviderTypes = filteredProviderTypes.filter(x => validProviderNames.find(v => this.providerNameToDisplayNameMap[v] === x) !== undefined); filteredProviderTypes = filteredProviderTypes.filter(x => validProviderNames.find(v => this.providerNameToDisplayNameMap[v] === x) !== undefined);
} }
@@ -130,90 +129,84 @@ export class ConnectionDialogWidget extends Modal {
} }
protected renderBody(container: HTMLElement): void { protected renderBody(container: HTMLElement): void {
let connectionContainer = $('.connection-dialog'); this._body = DOM.append(container, DOM.$('.connection-dialog'));
container.appendChild(connectionContainer.getHTMLElement());
this._bodyBuilder = new Builder(connectionContainer.getHTMLElement()); const connectTypeLabel = localize('connectType', "Connection type");
const connectTypeLabel = localize('connectType', 'Connection type');
this._providerTypeSelectBox = new SelectBox(this.providerTypeOptions, this.selectedProviderType, this._contextViewService, undefined, { ariaLabel: connectTypeLabel }); this._providerTypeSelectBox = new SelectBox(this.providerTypeOptions, this.selectedProviderType, this._contextViewService, undefined, { ariaLabel: connectTypeLabel });
// Recent connection tab // Recent connection tab
let recentConnectionTab = $('.connection-recent-tab'); const recentConnectionTab = DOM.$('.connection-recent-tab');
recentConnectionTab.div({ class: 'connection-recent', id: 'recentConnection' }, (builder) => { const recentConnectionContainer = DOM.append(recentConnectionTab, DOM.$('.connection-recent', { id: 'recentConnection' }));
this._recentConnectionBuilder = new Builder(builder.getHTMLElement()); this._recentConnection = DOM.append(recentConnectionContainer, DOM.$('div'));
this._noRecentConnectionBuilder = new Builder(builder.getHTMLElement()); this._recentConnection.style.height = '100%';
this.createRecentConnections(); this._noRecentConnection = DOM.append(recentConnectionContainer, DOM.$('div'));
this._recentConnectionBuilder.hide(); this.createRecentConnections();
}); DOM.hide(this._recentConnection);
// Saved connection tab // Saved connection tab
let savedConnectionTab = $('.connection-saved-tab'); const savedConnectionTab = DOM.$('.connection-saved-tab');
savedConnectionTab.div({ class: 'connection-saved' }, (builder) => { const savedConnectionContainer = DOM.append(savedConnectionTab, DOM.$('.connection-saved'));
this._savedConnectionBuilder = new Builder(builder.getHTMLElement()); this._savedConnection = DOM.append(savedConnectionContainer, DOM.$('div'));
this._noSavedConnectionBuilder = new Builder(builder.getHTMLElement()); this._savedConnection.style.height = '100%';
this.createSavedConnections(); this._noSavedConnection = DOM.append(savedConnectionContainer, DOM.$('div'));
this._savedConnectionBuilder.hide(); this.createSavedConnections();
}); DOM.hide(this._savedConnection);
this._panel = new TabbedPanel(connectionContainer.getHTMLElement()); this._panel = new TabbedPanel(this._body);
this._recentConnectionTabId = this._panel.pushTab({ this._recentConnectionTabId = this._panel.pushTab({
identifier: 'recent_connection', identifier: 'recent_connection',
title: localize('recentConnectionTitle', 'Recent Connections'), title: localize('recentConnectionTitle', "Recent Connections"),
view: { view: {
render: c => { render: c => {
recentConnectionTab.appendTo(c); c.append(recentConnectionTab);
}, },
layout: () => { } layout: () => { }
} }
}); });
let savedConnectionTabId = this._panel.pushTab({ const savedConnectionTabId = this._panel.pushTab({
identifier: 'saved_connection', identifier: 'saved_connection',
title: localize('savedConnectionTitle', 'Saved Connections'), title: localize('savedConnectionTitle', "Saved Connections"),
view: { view: {
layout: () => { }, layout: () => { },
render: c => { render: c => {
savedConnectionTab.appendTo(c); c.append(savedConnectionTab);
} }
} }
}); });
this._panel.onTabChange(async c => { this._panel.onTabChange(async c => {
// convert to old VS Code tree interface with expandable methods // convert to old VS Code tree interface with expandable methods
let expandableTree: IExpandableTree = <IExpandableTree>this._savedConnectionTree; const expandableTree: IExpandableTree = <IExpandableTree>this._savedConnectionTree;
if (c === savedConnectionTabId && expandableTree.getContentHeight() === 0) { if (c === savedConnectionTabId && expandableTree.getContentHeight() === 0) {
// Update saved connection tree // Update saved connection tree
await TreeUpdateUtils.structuralTreeUpdate(this._savedConnectionTree, 'saved', this._connectionManagementService, this._providers); await TreeUpdateUtils.structuralTreeUpdate(this._savedConnectionTree, 'saved', this._connectionManagementService, this._providers);
if (expandableTree.getContentHeight() > 0) { if (expandableTree.getContentHeight() > 0) {
this._noSavedConnectionBuilder.hide(); DOM.hide(this._noSavedConnection);
this._savedConnectionBuilder.show(); DOM.show(this._savedConnection);
} else { } else {
this._noSavedConnectionBuilder.show(); DOM.show(this._noSavedConnection);
this._savedConnectionBuilder.hide(); DOM.hide(this._savedConnection);
} }
this._savedConnectionTree.layout(DOM.getTotalHeight(this._savedConnectionTree.getHTMLElement())); this._savedConnectionTree.layout(DOM.getTotalHeight(this._savedConnectionTree.getHTMLElement()));
} }
}); });
this._bodyBuilder.div({ class: 'connection-details-title' }, (dividerContainer) => { this._connectionDetailTitle = DOM.append(this._body, DOM.$('.connection-details-title'));
this._connectionDetailTitle = dividerContainer;
this._connectionDetailTitle.text(localize('connectionDetailsTitle', 'Connection Details'));
});
this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => { this._connectionDetailTitle.innerText = localize('connectionDetailsTitle', "Connection Details");
modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => {
DialogHelper.appendInputSelectBox(
DialogHelper.appendRow(tableContainer.getHTMLElement(), connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
});
});
this.$connectionUIContainer = $('.connection-provider-info#connectionProviderInfo'); const tableContainer = DOM.append(this._body, DOM.$('.connection-type'));
this.$connectionUIContainer.appendTo(this._bodyBuilder); const table = DOM.append(tableContainer, DOM.$('table.connection-table-content'));
DialogHelper.appendInputSelectBox(
DialogHelper.appendRow(table, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
let self = this; this._connectionUIContainer = DOM.$('.connection-provider-info', { id: 'connectionProviderInfo' });
this._register(self._workbenchThemeService.onDidColorThemeChange(e => self.updateTheme(e))); this._body.append(this._connectionUIContainer);
self.updateTheme(self._workbenchThemeService.getColorTheme());
this._register(this._themeService.onThemeChange(e => this.updateTheme(e)));
this.updateTheme(this._themeService.getTheme());
} }
/** /**
@@ -222,8 +215,8 @@ export class ConnectionDialogWidget extends Modal {
public render() { public render() {
super.render(); super.render();
attachModalDialogStyler(this, this._themeService); attachModalDialogStyler(this, this._themeService);
let connectLabel = localize('connectionDialog.connect', 'Connect'); const connectLabel = localize('connectionDialog.connect', "Connect");
let cancelLabel = localize('connectionDialog.cancel', 'Cancel'); const cancelLabel = localize('connectionDialog.cancel', "Cancel");
this._connectButton = this.addFooterButton(connectLabel, () => this.connect()); this._connectButton = this.addFooterButton(connectLabel, () => this.connect());
this._connectButton.enabled = false; this._connectButton.enabled = false;
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel()); this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
@@ -232,15 +225,15 @@ export class ConnectionDialogWidget extends Modal {
} }
// Update theming that is specific to connection flyout body // Update theming that is specific to connection flyout body
private updateTheme(theme: IColorTheme): void { private updateTheme(theme: ITheme): void {
let borderColor = theme.getColor(contrastBorder); const borderColor = theme.getColor(contrastBorder);
let border = borderColor ? borderColor.toString() : null; const border = borderColor ? borderColor.toString() : null;
let backgroundColor = theme.getColor(SIDE_BAR_BACKGROUND); const backgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);
if (this._connectionDetailTitle) { if (this._connectionDetailTitle) {
this._connectionDetailTitle.style('border-width', border ? '1px 0px' : null); this._connectionDetailTitle.style.borderWidth = border ? '1px 0px' : null;
this._connectionDetailTitle.style('border-style', border ? 'solid none' : null); this._connectionDetailTitle.style.borderStyle = border ? 'solid none' : null;
this._connectionDetailTitle.style('border-color', border); this._connectionDetailTitle.style.borderColor = border;
this._connectionDetailTitle.style('background-color', backgroundColor ? backgroundColor.toString() : null); this._connectionDetailTitle.style.backgroundColor = backgroundColor ? backgroundColor.toString() : null;
} }
} }
@@ -257,8 +250,8 @@ export class ConnectionDialogWidget extends Modal {
private onProviderTypeSelected(selectedProviderType: string) { private onProviderTypeSelected(selectedProviderType: string) {
// Show connection form based on server type // Show connection form based on server type
this.$connectionUIContainer.empty(); DOM.clearNode(this._connectionUIContainer);
this._onShowUiComponent.fire({ selectedProviderType: selectedProviderType, container: this.$connectionUIContainer.getHTMLElement() }); this._onShowUiComponent.fire({ selectedProviderType: selectedProviderType, container: this._connectionUIContainer });
this.initDialog(); this.initDialog();
} }
@@ -285,7 +278,7 @@ export class ConnectionDialogWidget extends Modal {
} }
private cancel() { private cancel() {
let wasConnecting = this._connecting; const wasConnecting = this._connecting;
this._onCancel.fire(); this._onCancel.fire();
if (!this._databaseDropdownExpanded && !wasConnecting) { if (!this._databaseDropdownExpanded && !wasConnecting) {
this.close(); this.close();
@@ -298,87 +291,71 @@ export class ConnectionDialogWidget extends Modal {
} }
private createRecentConnectionList(): void { private createRecentConnectionList(): void {
this._recentConnectionBuilder.div({ class: 'connection-recent-content' }, (recentConnectionContainer) => { const recentConnectionContainer = DOM.append(this._recentConnection, DOM.$('.connection-recent-content'));
recentConnectionContainer.div({ class: 'recent-titles-container' }, (container) => { const container = DOM.append(recentConnectionContainer, DOM.$('.recent-titles-container'));
container.div({ class: 'connection-history-actions' }, (actionsContainer) => { const actionsContainer = DOM.append(container, DOM.$('.connection-history-actions'));
this._actionbar = this._register(new ActionBar(actionsContainer.getHTMLElement(), { animated: false })); this._actionbar = this._register(new ActionBar(actionsContainer, { animated: false }));
let clearAction = this._instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL); const clearAction = this._instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL);
clearAction.useConfirmationMessage = true; clearAction.useConfirmationMessage = true;
clearAction.onRecentConnectionsRemoved(() => this.open(false)); clearAction.onRecentConnectionsRemoved(() => this.open(false));
this._actionbar.push(clearAction, { icon: true, label: true }); this._actionbar.push(clearAction, { icon: true, label: true });
}); const divContainer = DOM.append(recentConnectionContainer, DOM.$('.server-explorer-viewlet'));
}); const treeContainer = DOM.append(divContainer, DOM.$('.explorer-servers'));
recentConnectionContainer.div({ class: 'server-explorer-viewlet' }, (divContainer: Builder) => { const leftClick = (element: any, eventish: ICancelableEvent, origin: string) => {
divContainer.div({ class: 'explorer-servers' }, (treeContainer: Builder) => { // element will be a server group if the tree is clicked rather than a item
let leftClick = (element: any, eventish: ICancelableEvent, origin: string) => { if (element instanceof ConnectionProfile) {
// element will be a server group if the tree is clicked rather than a item this.onConnectionClick({ payload: { origin: origin, originalEvent: eventish } }, element);
if (element instanceof ConnectionProfile) { }
this.onConnectionClick({ payload: { origin: origin, originalEvent: eventish } }, element); };
} const actionProvider = this._instantiationService.createInstance(RecentConnectionActionsProvider);
}; const controller = new RecentConnectionTreeController(leftClick, actionProvider, this._connectionManagementService, this._contextMenuService);
let actionProvider = this._instantiationService.createInstance(RecentConnectionActionsProvider); actionProvider.onRecentConnectionRemoved(() => {
let controller = new RecentConnectionTreeController(leftClick, actionProvider, this._connectionManagementService, this._contextMenuService); this.open(this._connectionManagementService.getRecentConnections().length > 0);
actionProvider.onRecentConnectionRemoved(() => {
this.open(this._connectionManagementService.getRecentConnections().length > 0);
});
controller.onRecentConnectionRemoved(() => {
this.open(this._connectionManagementService.getRecentConnections().length > 0);
});
this._recentConnectionTree = TreeCreationUtils.createConnectionTree(treeContainer.getHTMLElement(), this._instantiationService, controller);
// Theme styler
this._register(styler.attachListStyler(this._recentConnectionTree, this._themeService));
divContainer.append(this._recentConnectionTree.getHTMLElement());
});
});
}); });
controller.onRecentConnectionRemoved(() => {
this.open(this._connectionManagementService.getRecentConnections().length > 0);
});
this._recentConnectionTree = TreeCreationUtils.createConnectionTree(treeContainer, this._instantiationService, controller);
// Theme styler
this._register(styler.attachListStyler(this._recentConnectionTree, this._themeService));
} }
private createRecentConnections() { private createRecentConnections() {
this.createRecentConnectionList(); this.createRecentConnectionList();
this._noRecentConnectionBuilder.div({ class: 'connection-recent-content' }, (noRecentConnectionContainer) => { const noRecentConnectionContainer = DOM.append(this._noRecentConnection, DOM.$('.connection-recent-content'));
let noRecentHistoryLabel = localize('noRecentConnections', 'No recent connection'); const noRecentHistoryLabel = localize('noRecentConnections', "No recent connection");
noRecentConnectionContainer.div({ class: 'no-recent-connections' }, (noRecentTitle) => { DOM.append(noRecentConnectionContainer, DOM.$('.no-recent-connections')).innerText = noRecentHistoryLabel;
noRecentTitle.text(noRecentHistoryLabel);
});
});
} }
private createSavedConnectionList(): void { private createSavedConnectionList(): void {
this._savedConnectionBuilder.div({ class: 'connection-saved-content' }, (savedConnectioncontainer) => { const savedConnectioncontainer = DOM.append(this._savedConnection, DOM.$('.connection-saved-content'));
savedConnectioncontainer.div({ class: 'server-explorer-viewlet' }, (divContainer: Builder) => { const divContainer = DOM.append(savedConnectioncontainer, DOM.$('.server-explorer-viewlet'));
divContainer.div({ class: 'explorer-servers' }, (treeContainer: Builder) => { const treeContainer = DOM.append(divContainer, DOM.$('.explorer-servers'));
let leftClick = (element: any, eventish: ICancelableEvent, origin: string) => { const leftClick = (element: any, eventish: ICancelableEvent, origin: string) => {
// element will be a server group if the tree is clicked rather than a item // element will be a server group if the tree is clicked rather than a item
if (element instanceof ConnectionProfile) { if (element instanceof ConnectionProfile) {
this.onConnectionClick({ payload: { origin: origin, originalEvent: eventish } }, element); this.onConnectionClick({ payload: { origin: origin, originalEvent: eventish } }, element);
} }
}; };
let controller = new SavedConnectionTreeController(leftClick); const controller = new SavedConnectionTreeController(leftClick);
this._savedConnectionTree = TreeCreationUtils.createConnectionTree(treeContainer.getHTMLElement(), this._instantiationService, controller); this._savedConnectionTree = TreeCreationUtils.createConnectionTree(treeContainer, this._instantiationService, controller);
// Theme styler // Theme styler
this._register(styler.attachListStyler(this._savedConnectionTree, this._themeService)); this._register(styler.attachListStyler(this._savedConnectionTree, this._themeService));
divContainer.append(this._savedConnectionTree.getHTMLElement());
});
});
});
} }
private createSavedConnections() { private createSavedConnections() {
this.createSavedConnectionList(); this.createSavedConnectionList();
this._noSavedConnectionBuilder.div({ class: 'connection-saved-content' }, (noSavedConnectionContainer) => { const noSavedConnectionContainer = DOM.append(this._noSavedConnection, DOM.$('.connection-saved-content'));
let noSavedConnectionLabel = localize('noSavedConnections', 'No saved connection'); const noSavedConnectionLabel = localize('noSavedConnections', "No saved connection");
noSavedConnectionContainer.div({ class: 'no-saved-connections' }, (titleContainer) => { DOM.append(noSavedConnectionContainer, DOM.$('.no-saved-connections')).innerText = noSavedConnectionLabel;
titleContainer.text(noSavedConnectionLabel);
});
});
} }
private onConnectionClick(event: any, element: IConnectionProfile) { private onConnectionClick(event: any, element: IConnectionProfile) {
let isMouseOrigin = event.payload && (event.payload.origin === 'mouse'); const isMouseOrigin = event.payload && (event.payload.origin === 'mouse');
let isDoubleClick = isMouseOrigin && event.payload.originalEvent && event.payload.originalEvent.detail === 2; const isDoubleClick = isMouseOrigin && event.payload.originalEvent && event.payload.originalEvent.detail === 2;
if (isDoubleClick) { if (isDoubleClick) {
this.connect(element); this.connect(element);
} else { } else {
@@ -397,11 +374,11 @@ export class ConnectionDialogWidget extends Modal {
this.show(); this.show();
if (recentConnections) { if (recentConnections) {
this._noRecentConnectionBuilder.hide(); DOM.hide(this._noRecentConnection);
this._recentConnectionBuilder.show(); DOM.show(this._recentConnection);
} else { } else {
this._recentConnectionBuilder.hide(); DOM.hide(this._recentConnection);
this._noRecentConnectionBuilder.show(); DOM.show(this._noRecentConnection);
} }
await TreeUpdateUtils.structuralTreeUpdate(this._recentConnectionTree, 'recent', this._connectionManagementService, this._providers); await TreeUpdateUtils.structuralTreeUpdate(this._recentConnectionTree, 'recent', this._connectionManagementService, this._providers);

16
src/sql/workbench/services/connection/browser/media/connectionDialog.css
View File

@@ -90,6 +90,22 @@
margin: 0px 13px; margin: 0px 13px;
} }
.connection-recent-tab {
height: 100%;
}
.connection-recent {
height: 100%;
}
.connection-saved-tab {
height: 100%;
}
.connection-saved {
height: 100%;
}
.vs-dark .connection-dialog .connection-history-actions .action-label.icon, .vs-dark .connection-dialog .connection-history-actions .action-label.icon,
.hc-black .connection-dialog .connection-history-actions .action-label.icon, .hc-black .connection-dialog .connection-history-actions .action-label.icon,
.connection-dialog .connection-history-actions .action-label.icon { .connection-dialog .connection-history-actions .action-label.icon {