Remove rest of builder (#4963)

* removes more builder references * remove builder from profiler * formatting * fix profiler dailog * remove builder from oatuhdialog * remove the rest of builder references * formatting
2026-02-14 12:08:36 -05:00 · 2019-04-10 13:23:33 -07:00
parent 9b053c50c2
commit a74510544f
18 changed files with 616 additions and 2226 deletions
--- a/src/sql/parts/objectExplorer/serverGroupDialog/serverGroupDialog.ts
+++ b/src/sql/parts/objectExplorer/serverGroupDialog/serverGroupDialog.ts
@@ -3,9 +3,8 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-'use strict';
 import 'vs/css!./media/serverGroupDialog';
-import { Builder } from 'sql/base/browser/builder';
+
 import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 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 { localize } from 'vs/nls';
 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 { Modal } from 'sql/workbench/browser/modal/modal';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { ServerGroupViewModel } from 'sql/parts/objectExplorer/serverGroupDialog/serverGroupViewModel';
 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 { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
-import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';

 export class ServerGroupDialog extends Modal {
-	private _bodyBuilder: Builder;
 	private _addServerButton: Button;
 	private _closeButton: Button;
 	private _colorCheckBoxesMap: Array<{ color: string, checkbox: Checkbox }> = [];
@@ -38,7 +36,7 @@ export class ServerGroupDialog extends Modal {
 	private _groupDescriptionInputBox: InputBox;
 	private _viewModel: ServerGroupViewModel;
 	private _skipGroupNameValidation: boolean = false;
-	private $serverGroupContainer: Builder;
+	private _serverGroupContainer: HTMLElement;

 	private _onAddServerGroup = new Emitter<void>();
 	public onAddServerGroup: Event<void> = this._onAddServerGroup.event;
@@ -50,7 +48,7 @@ export class ServerGroupDialog extends Modal {
 	public onCloseEvent: Event<void> = this._onCloseEvent.event;

 	constructor(
-		@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService,
+		@ILayoutService layoutService: ILayoutService,
 		@IThemeService themeService: IThemeService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -63,8 +61,8 @@ export class ServerGroupDialog extends Modal {
 	public render() {
 		super.render();
 		attachModalDialogStyler(this, this._themeService);
-		let okLabel = localize('serverGroup.ok', 'OK');
-		let cancelLabel = localize('serverGroup.cancel', 'Cancel');
+		const okLabel = localize('serverGroup.ok', "OK");
+		const cancelLabel = localize('serverGroup.cancel', "Cancel");
 		this._addServerButton = this.addFooterButton(okLabel, () => this.addGroup());
 		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
 		this.registerListeners();
@@ -75,68 +73,56 @@ export class ServerGroupDialog extends Modal {
 	}

 	protected renderBody(container: HTMLElement) {
-		new Builder(container).div({ class: 'server-group-dialog' }, (builder) => {
-			this._bodyBuilder = builder;
-		});
+		const body = DOM.append(container, DOM.$('.server-group-dialog'));
+
 		// Connection Group Name
-		let serverGroupNameLabel = localize('connectionGroupName', 'Server group name');
-		this._bodyBuilder.div({ class: 'dialog-label' }, (labelContainer) => {
-			labelContainer.text(serverGroupNameLabel);
-		});
-		this._bodyBuilder.div({ class: 'input-divider' }, (inputCellContainer) => {
-			let errorMessage = localize('MissingGroupNameError', 'Group name is required.');
-			this._groupNameInputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, {
-				validationOptions: {
-					validation: (value: string) => !value && !this._skipGroupNameValidation ? ({ type: MessageType.ERROR, content: errorMessage }) : null
-				},
-				ariaLabel: serverGroupNameLabel
-			});
+		const serverGroupNameLabel = localize('connectionGroupName', "Server group name");
+
+		DOM.append(body, DOM.$('.dialog-label')).innerText = serverGroupNameLabel;
+
+		this._groupNameInputBox = new InputBox(DOM.append(body, DOM.$('.input-divider')), this._contextViewService, {
+			validationOptions: {
+				validation: (value: string) => !value && !this._skipGroupNameValidation ? ({ type: MessageType.ERROR, content: localize('MissingGroupNameError', "Group name is required.") }) : null
+			},
+			ariaLabel: serverGroupNameLabel
 		});

 		// Connection Group Description
-		let groupDescriptionLabel = localize('groupDescription', 'Group description');
-		this._bodyBuilder.div({ class: 'dialog-label' }, (labelContainer) => {
-			labelContainer.text(groupDescriptionLabel);
-		});
-		this._bodyBuilder.div({ class: 'input-divider' }, (inputCellContainer) => {
-			this._groupDescriptionInputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService, {
-				ariaLabel: groupDescriptionLabel
-			});
+		const groupDescriptionLabel = localize('groupDescription', "Group description");
+		DOM.append(body, DOM.$('.dialog-label')).innerText = groupDescriptionLabel;
+
+		this._groupDescriptionInputBox = new InputBox(DOM.append(body, DOM.$('.input-divider')), this._contextViewService, {
+			ariaLabel: groupDescriptionLabel
 		});

 		// Connection Group Color
-		this._bodyBuilder.div({ class: 'dialog-label' }, (labelContainer) => {
-			let groupColorLabel = localize('groupColor', 'Group color');
-			labelContainer.text(groupColorLabel);
-		});
+		const groupColorLabel = localize('groupColor', "Group color");
+		DOM.append(body, DOM.$('.dialog-label')).innerText = groupColorLabel;

-		this._bodyBuilder.div({ class: 'group-color-options' }, (groupColorContainer) => {
-			this.$serverGroupContainer = groupColorContainer;
-			this.fillGroupColors(groupColorContainer.getHTMLElement());
-		});
+		this._serverGroupContainer = DOM.append(body, DOM.$('.group-color-options'));
+		this.fillGroupColors(this._serverGroupContainer);

-		this._bodyBuilder.on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
-			let event = new StandardKeyboardEvent(e);
+		DOM.addStandardDisposableListener(body, DOM.EventType.KEY_DOWN, (event: StandardKeyboardEvent) => {
 			if (event.equals(KeyMod.Shift | KeyCode.Tab)) {
-				this.preventDefaultKeyboardEvent(e);
+				this.preventDefaultKeyboardEvent(event);
 				this.focusPrevious();
 			} else if (event.equals(KeyCode.Tab)) {
-				this.preventDefaultKeyboardEvent(e);
+				this.preventDefaultKeyboardEvent(event);
 				this.focusNext();
 			} else if (event.equals(KeyCode.RightArrow) || event.equals(KeyCode.LeftArrow)) {
-				this.preventDefaultKeyboardEvent(e);
+				this.preventDefaultKeyboardEvent(event);
 				this.focusNextColor(event.equals(KeyCode.RightArrow));
 			}
 		});
 	}

-	private preventDefaultKeyboardEvent(e: KeyboardEvent) {
+	private preventDefaultKeyboardEvent(e: StandardKeyboardEvent) {
 		e.preventDefault();
 		e.stopPropagation();
 	}

 	private isFocusOnColors(): boolean {
-		var result = false;
+		let result = false;
 		this._colorCheckBoxesMap.forEach(({ checkbox }) => {
 			if (document.activeElement === checkbox.domNode) {
 				result = true;
@@ -229,9 +215,9 @@ export class ServerGroupDialog extends Modal {

 	private fillGroupColors(container: HTMLElement): void {
 		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',
 				title: color,
 				isChecked: false
@@ -277,9 +263,9 @@ export class ServerGroupDialog extends Modal {
 	}
 	public set viewModel(theViewModel: ServerGroupViewModel) {
 		this._viewModel = theViewModel;
-		if (this.$serverGroupContainer) {
-			this.$serverGroupContainer.clearChildren();
-			this.fillGroupColors(this.$serverGroupContainer.getHTMLElement());
+		if (this._serverGroupContainer) {
+			DOM.clearNode(this._serverGroupContainer);
+			this.fillGroupColors(this._serverGroupContainer);
 		}
 	}

--- a/src/sql/parts/objectExplorer/viewlet/serverTreeView.ts
+++ b/src/sql/parts/objectExplorer/viewlet/serverTreeView.ts
@@ -6,7 +6,6 @@
 import 'vs/css!./media/serverTreeActions';
 import * as errors from 'vs/base/common/errors';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import * as builder from 'sql/base/browser/builder';
 import Severity from 'vs/base/common/severity';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 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 { localize } from 'vs/nls';
 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 { 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 { Button } from 'sql/base/browser/ui/button/button';
 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 { SERVER_GROUP_CONFIG, SERVER_GROUP_AUTOEXPAND_CONFIG } from 'sql/parts/objectExplorer/serverGroupDialog/serverGroup.contribution';
 import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
 import { ServerTreeActionProvider } from 'sql/parts/objectExplorer/viewlet/serverTreeActionProvider';
 import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService';
-
-const $ = builder.$;
+import { isHidden } from 'sql/base/browser/dom';

 /**
 * ServerTreeview implements the dynamic tree view.
 */
 export class ServerTreeView {

-	public messages: builder.Builder;
-	private _buttonSection: builder.Builder;
+	public messages: HTMLElement;
+	private _buttonSection: HTMLElement;
 	private _treeSelectionHandler: TreeSelectionHandler;
 	private _activeConnectionsFilterAction: ActiveConnectionsFilterAction;
 	private _tree: ITree;
 	private _toDispose: IDisposable[] = [];
 	private _onSelectionOrFocusChange: Emitter<void>;
 	private _actionProvider: ServerTreeActionProvider;
+
 	constructor(
 		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
@@ -101,15 +101,17 @@ export class ServerTreeView {
 	 */
 	public renderBody(container: HTMLElement): Thenable<void> {
 		// Add div to display no connections found message and hide it by default
-		this.messages = $('div.title').appendTo(container);
-		$('span').style('padding-left', '10px').text('No connections found.').appendTo(this.messages);
-		this.messages.hide();
+		this.messages = append(container, $('.title'));
+		const messageText = append(this.messages, $('span'));
+		messageText.style.paddingLeft = '10px';
+		messageText.innerText = localize('servers.noConnections', "No connections found.");
+		hide(this.messages);

 		if (!this._connectionManagementService.hasRegisteredServers()) {
 			this._activeConnectionsFilterAction.enabled = false;
-			this._buttonSection = $('div.button-section').appendTo(container);
-			var connectButton = new Button(this._buttonSection.getHTMLElement());
-			connectButton.label = localize('serverTree.addConnection', 'Add Connection');
+			this._buttonSection = append(container, $('.button-section'));
+			const connectButton = new Button(this._buttonSection);
+			connectButton.label = localize('serverTree.addConnection', "Add Connection");
 			this._toDispose.push(attachButtonStyler(connectButton, this._themeService));
 			this._toDispose.push(connectButton.onDidClick(() => {
 				this._connectionManagementService.showConnectionDialog();
@@ -124,41 +126,41 @@ export class ServerTreeView {
 		// Theme styler
 		this._toDispose.push(attachListStyler(this._tree, this._themeService));

-		const self = this;
 		// Refresh Tree when these events are emitted
 		this._toDispose.push(this._connectionManagementService.onAddConnectionProfile((newProfile: IConnectionProfile) => {
-			self.handleAddConnectionProfile(newProfile);
+			this.handleAddConnectionProfile(newProfile);
 		}));
 		this._toDispose.push(this._connectionManagementService.onDeleteConnectionProfile(() => {
-			self.refreshTree();
+			this.refreshTree();
 		}));
 		this._toDispose.push(this._connectionManagementService.onDisconnect((connectionParams) => {
-			if (self.isObjectExplorerConnectionUri(connectionParams.connectionUri)) {
-				self.deleteObjectExplorerNodeAndRefreshTree(connectionParams.connectionProfile);
+			if (this.isObjectExplorerConnectionUri(connectionParams.connectionUri)) {
+				this.deleteObjectExplorerNodeAndRefreshTree(connectionParams.connectionProfile);
 			}
 		}));

 		if (this._objectExplorerService && this._objectExplorerService.onUpdateObjectExplorerNodes) {
 			this._toDispose.push(this._objectExplorerService.onUpdateObjectExplorerNodes(args => {
 				if (args.errorMessage) {
-					self.showError(args.errorMessage);
+					this.showError(args.errorMessage);
 				}
 				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) {
-				self._tree.expandAll(ConnectionProfileGroup.getSubgroups(root));
+				this._tree.expandAll(ConnectionProfileGroup.getSubgroups(root));
 			}

 			if (root && !root.hasValidConnections) {
-				self._treeSelectionHandler.onTreeActionStateChange(true);
+				this._treeSelectionHandler.onTreeActionStateChange(true);
 				resolve();
 			} else {
 				resolve();
@@ -174,20 +176,20 @@ export class ServerTreeView {

 	private async handleAddConnectionProfile(newProfile: IConnectionProfile): Promise<void> {
 		if (newProfile) {
-			let groups = this._connectionManagementService.getConnectionGroups();
-			let profile = ConnectionUtils.findProfileInGroup(newProfile, groups);
+			const groups = this._connectionManagementService.getConnectionGroups();
+			const profile = ConnectionUtils.findProfileInGroup(newProfile, groups);
 			if (profile) {
 				newProfile = profile;
 			}
 		}

 		if (this._buttonSection) {
-			this._buttonSection.getHTMLElement().style.display = 'none';
+			hide(this._buttonSection);
 			this._activeConnectionsFilterAction.enabled = true;
 		}
-		let currentSelections = this._tree.getSelection();
-		let currentSelectedElement = currentSelections && currentSelections.length >= 1 ? currentSelections[0] : undefined;
-		let newProfileIsSelected = currentSelectedElement && newProfile ? currentSelectedElement.id === newProfile.id : false;
+		const currentSelections = this._tree.getSelection();
+		const currentSelectedElement = currentSelections && currentSelections.length >= 1 ? currentSelections[0] : undefined;
+		const newProfileIsSelected = currentSelectedElement && newProfile ? currentSelectedElement.id === newProfile.id : false;
 		if (newProfile && currentSelectedElement && !newProfileIsSelected) {
 			this._tree.clearSelection();
 		}
@@ -205,9 +207,9 @@ export class ServerTreeView {
 	}

 	private getConnectionInTreeInput(connectionId: string): ConnectionProfile {
-		let root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
-		let connections = ConnectionProfileGroup.getConnectionsInGroup(root);
-		let results = connections.filter(con => {
+		const root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
+		const connections = ConnectionProfileGroup.getConnectionsInGroup(root);
+		const results = connections.filter(con => {
 			if (connectionId === con.id) {
 				return true;
 			} else {
@@ -221,7 +223,7 @@ export class ServerTreeView {
 	}

 	private onObjectExplorerSessionCreated(connection: IConnectionProfile) {
-		var conn = this.getConnectionInTreeInput(connection.id);
+		const conn = this.getConnectionInTreeInput(connection.id);
 		if (conn) {
 			this._tree.refresh(conn).then(() => {
 				return this._tree.expand(conn).then(() => {
@@ -234,7 +236,7 @@ export class ServerTreeView {
 	}

 	public addObjectExplorerNodeAndRefreshTree(connection: IConnectionProfile): void {
-		this.messages.hide();
+		hide(this.messages);
 		if (!this._objectExplorerService.getObjectExplorerNode(connection)) {
 			this._objectExplorerService.updateObjectExplorerNodes(connection).then(() => {
 				// 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> {
 		if (connection) {
-			var conn = this.getConnectionInTreeInput(connection.id);
+			const conn = this.getConnectionInTreeInput(connection.id);
 			if (conn) {
 				return this._objectExplorerService.deleteObjectExplorerNode(conn).then(() => {
 					this._tree.collapse(conn);
@@ -257,7 +259,7 @@ export class ServerTreeView {
 	}

 	public refreshTree(): Promise<void> {
-		this.messages.hide();
+		hide(this.messages);
 		this.clearOtherActions();
 		return TreeUpdateUtils.registeredServerUpdate(this._tree, this._connectionManagementService);
 	}
@@ -273,7 +275,7 @@ export class ServerTreeView {
 		if (!treeInput || treeInput.length === 0) {
 			return undefined;
 		}
-		let result = treeInput.map(group => {
+		const result = treeInput.map(group => {
 			// Keep active/recent connections and remove the rest
 			if (group.connections) {
 				group.connections = group.connections.filter(con => {
@@ -305,28 +307,26 @@ export class ServerTreeView {
 	 * Set tree elements based on the view (recent/active)
 	 */
 	public showFilteredTree(view: string): void {
-
-		const self = this;
-		this.messages.hide();
+		hide(this.messages);
 		// Clear other action views if user switched between two views
 		this.clearOtherActions(view);
-		let root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
+		const root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
 		let treeInput: ConnectionProfileGroup = null;
 		if (root) {
 			// Filter results based on view
-			let filteredResults = this.filterConnections([root], view);
+			const filteredResults = this.filterConnections([root], view);
 			if (!filteredResults || !filteredResults[0]) {
-				this.messages.show();
-				this.messages.domFocus();
+				show(this.messages);
+				this.messages.focus();
 			} else {
 				treeInput = filteredResults[0];
 			}
 			this._tree.setInput(treeInput).then(() => {
-				if (this.messages.isHidden()) {
-					self._tree.getFocus();
-					self._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput));
+				if (isHidden(this.messages)) {
+					this._tree.getFocus();
+					this._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput));
 				} else {
-					self._tree.clearFocus();
+					this._tree.clearFocus();
 				}
 			}, errors.onUnexpectedError);
 		} else {
@@ -341,25 +341,24 @@ export class ServerTreeView {
 		if (!searchString) {
 			return;
 		}
-		const self = this;
-		this.messages.hide();
+		hide(this.messages);
 		// Clear other actions if user searched during other views
 		this.clearOtherActions();
 		// Filter connections based on search
-		let filteredResults = this.searchConnections(searchString);
+		const filteredResults = this.searchConnections(searchString);
 		if (!filteredResults || filteredResults.length === 0) {
-			this.messages.show();
-			this.messages.domFocus();
+			show(this.messages);
+			this.messages.focus();
 		}
 		// 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);
 		this._tree.setInput(treeInput).then(() => {
-			if (this.messages.isHidden()) {
-				self._tree.getFocus();
-				self._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput));
+			if (isHidden(this.messages)) {
+				this._tree.getFocus();
+				this._tree.expandAll(ConnectionProfileGroup.getSubgroups(treeInput));
 			} else {
-				self._tree.clearFocus();
+				this._tree.clearFocus();
 			}
 		}, errors.onUnexpectedError);
 	}
@@ -369,9 +368,9 @@ export class ServerTreeView {
 	 */
 	private searchConnections(searchString: string): ConnectionProfile[] {

-		let root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
-		let connections = ConnectionProfileGroup.getConnectionsInGroup(root);
-		let results = connections.filter(con => {
+		const root = TreeUpdateUtils.getTreeInput(this._connectionManagementService);
+		const connections = ConnectionProfileGroup.getConnectionsInGroup(root);
+		const results = connections.filter(con => {
 			if (searchString && (searchString.length > 0)) {
 				return this.isMatch(con, searchString);
 			} else {
@@ -499,4 +498,4 @@ export class ServerTreeView {
 		this._tree.dispose();
 		this._toDispose = dispose(this._toDispose);
 	}
-}
+}