SQL Operations Studio Public Preview 1 (0.23) release source code

src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts

@@ -0,0 +1,68 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+// // import { AdvancedPropertiesDialog } from 'sql/parts/connection/connectionDialog/advancedPropertiesDialog';
+import { OptionsDialog } from 'sql/base/browser/ui/modal/optionsDialog';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import data = require('data');
+import { localize } from 'vs/nls';
+import * as TelemetryKeys from 'sql/common/telemetryKeys';
+
+export class AdvancedPropertiesController {
+	private _container: HTMLElement;
+
+	private _advancedDialog: OptionsDialog;
+	private _options: { [name: string]: any };
+
+	constructor(private _onCloseAdvancedProperties: () => void,
+		@IInstantiationService private _instantiationService: IInstantiationService
+	) {
+	}
+
+
+	private handleOnOk(): void {
+		this._options = this._advancedDialog.optionValues;
+	}
+
+	public showDialog(providerOptions: data.ConnectionOption[], container: HTMLElement, options: { [name: string]: any }): void {
+		this._options = options;
+		this._container = container;
+		var serviceOptions = providerOptions.map(option => AdvancedPropertiesController.connectionOptionToServiceOption(option));
+		this.advancedDialog.open(serviceOptions, this._options);
+	}
+
+	public get advancedDialog() {
+		if (!this._advancedDialog) {
+			this._advancedDialog = this._instantiationService.createInstance(
+				OptionsDialog, localize('connectionAdvancedProperties', 'Advanced properties'), TelemetryKeys.ConnectionAdvancedProperties, { hasBackButton: true });
+			this._advancedDialog.cancelLabel = localize('discard', 'Discard');
+			this._advancedDialog.onCloseEvent(() => this._onCloseAdvancedProperties());
+			this._advancedDialog.onOk(() => this.handleOnOk());
+			this._advancedDialog.render();
+		}
+		return this._advancedDialog;
+	}
+
+	public set advancedDialog(dialog: OptionsDialog) {
+		this._advancedDialog = dialog;
+	}
+
+	public static connectionOptionToServiceOption(connectionOption: data.ConnectionOption): data.ServiceOption {
+		return {
+			name: connectionOption.name,
+			displayName: connectionOption.displayName,
+			description: connectionOption.description,
+			groupName: connectionOption.groupName,
+			valueType: connectionOption.valueType,
+			defaultValue: connectionOption.defaultValue,
+			objectType: undefined,
+			categoryValues: connectionOption.categoryValues,
+			isRequired: connectionOption.isRequired,
+			isArray: undefined,
+		};
+	}
+}

src/sql/parts/connection/connectionDialog/connectionController.ts

@@ -0,0 +1,138 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import { IConnectionManagementService, ConnectionOptionSpecialType } from 'sql/parts/connection/common/connectionManagement';
+import { IConnectionComponentCallbacks, IConnectionComponentController, IConnectionResult } from 'sql/parts/connection/connectionDialog/connectionDialogService';
+import { ConnectionWidget } from 'sql/parts/connection/connectionDialog/connectionWidget';
+import { AdvancedPropertiesController } from 'sql/parts/connection/connectionDialog/advancedPropertiesController';
+import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
+import { ConnectionProfileGroup, IConnectionProfileGroup } from 'sql/parts/connection/common/connectionProfileGroup';
+import * as Constants from 'sql/parts/connection/common/constants';
+import data = require('data');
+import * as Utils from 'sql/parts/connection/common/utils';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+
+export class ConnectionController implements IConnectionComponentController {
+	private _container: HTMLElement;
+	private _connectionManagementService: IConnectionManagementService;
+	private _callback: IConnectionComponentCallbacks;
+	private _connectionWidget: ConnectionWidget;
+	private _advancedController: AdvancedPropertiesController;
+	private _model: IConnectionProfile;
+	private _providerOptions: data.ConnectionOption[];
+	private _providerName: string;
+
+	constructor(container: HTMLElement,
+		connectionManagementService: IConnectionManagementService,
+		sqlCapabilities: data.DataProtocolServerCapabilities,
+		callback: IConnectionComponentCallbacks,
+		providerName: string,
+		@IInstantiationService private _instantiationService: IInstantiationService, ) {
+		this._container = container;
+		this._connectionManagementService = connectionManagementService;
+		this._callback = callback;
+		this._providerOptions = sqlCapabilities.connectionProvider.options;
+		var specialOptions = this._providerOptions.filter(
+			(property) => (property.specialValueType !== null && property.specialValueType !== undefined));
+		this._connectionWidget = this._instantiationService.createInstance(ConnectionWidget, specialOptions, {
+			onSetConnectButton: (enable: boolean) => this._callback.onSetConnectButton(enable),
+			onCreateNewServerGroup: () => this.onCreateNewServerGroup(),
+			onAdvancedProperties: () => this.handleOnAdvancedProperties(),
+			onSetAzureTimeOut: () => this.handleonSetAzureTimeOut()
+		}, providerName);
+		this._providerName = providerName;
+	}
+
+	private onCreateNewServerGroup(): void {
+		this._connectionManagementService.showCreateServerGroupDialog({
+			onAddGroup: (groupName) => this._connectionWidget.updateServerGroup(this.getAllServerGroups(), groupName),
+			onClose: () => this._connectionWidget.focusOnServerGroup()
+		});
+	}
+
+	private handleonSetAzureTimeOut(): void {
+		var timeoutPropertyName = 'connectTimeout';
+		var timeoutOption = this._model.options[timeoutPropertyName];
+		if (timeoutOption === undefined || timeoutOption === null) {
+			this._model.options[timeoutPropertyName] = 30;
+		}
+	}
+
+	private handleOnAdvancedProperties(): void {
+		if (!this._advancedController) {
+			this._advancedController = this._instantiationService.createInstance(AdvancedPropertiesController, () => this._connectionWidget.focusOnAdvancedButton());
+		}
+		var advancedOption = this._providerOptions.filter(
+			(property) => (property.specialValueType === undefined || property.specialValueType === null));
+		this._advancedController.showDialog(advancedOption, this._container, this._model.options);
+	}
+
+	public showUiComponent(container: HTMLElement): void {
+		this._connectionWidget.createConnectionWidget(container);
+	}
+
+	private getServerGroupHelper(group: ConnectionProfileGroup, groupNames: IConnectionProfileGroup[]): void {
+		if (group) {
+			if (group.fullName !== '') {
+				groupNames.push(group);
+			}
+			if (group.hasChildren()) {
+				group.children.forEach((child) => this.getServerGroupHelper(child, groupNames));
+			}
+		}
+	}
+
+	private getAllServerGroups(): IConnectionProfileGroup[] {
+		var connectionGroupRoot = this._connectionManagementService.getConnectionGroups();
+		var connectionGroupNames: IConnectionProfileGroup[] = [];
+		if (connectionGroupRoot && connectionGroupRoot.length > 0) {
+			this.getServerGroupHelper(connectionGroupRoot[0], connectionGroupNames);
+		}
+		let defaultGroupId: string;
+		if (connectionGroupRoot && connectionGroupRoot.length > 0 && ConnectionProfileGroup.isRoot(connectionGroupRoot[0].name)) {
+			defaultGroupId = connectionGroupRoot[0].id;
+		} else {
+			defaultGroupId = Utils.defaultGroupId;
+		}
+		connectionGroupNames.push(Object.assign({}, this._connectionWidget.DefaultServerGroup, { id: defaultGroupId }));
+		connectionGroupNames.push(this._connectionWidget.NoneServerGroup);
+		return connectionGroupNames;
+	}
+
+	public initDialog(connectionInfo: IConnectionProfile): void {
+		this._connectionWidget.updateServerGroup(this.getAllServerGroups());
+		this._model = connectionInfo;
+		this._model.providerName = this._providerName;
+		let appNameOption = this._providerOptions.find(option => option.specialValueType === ConnectionOptionSpecialType.appName);
+		if (appNameOption) {
+			let appNameKey = appNameOption.name;
+			this._model.options[appNameKey] = Constants.applicationName;
+		}
+		this._connectionWidget.initDialog(this._model);
+	}
+
+	public focusOnOpen(): void {
+		this._connectionWidget.focusOnOpen();
+	}
+
+	public validateConnection(): IConnectionResult {
+		return { isValid: this._connectionWidget.connect(this._model), connection: this._model };
+	}
+
+	public fillInConnectionInputs(connectionInfo: IConnectionProfile): void {
+		this._model = connectionInfo;
+		this._connectionWidget.fillInConnectionInputs(connectionInfo);
+	}
+
+	public handleOnConnecting(): void {
+		this._connectionWidget.handleOnConnecting();
+	}
+
+	public handleResetConnection(): void {
+		this._connectionWidget.handleResetConnection();
+	}
+}

src/sql/parts/connection/connectionDialog/connectionDialogService.ts

@@ -0,0 +1,338 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import {
+	IConnectionDialogService, IConnectionManagementService, IErrorMessageService,
+	ConnectionType, INewConnectionParams, IConnectionCompletionOptions
+} from 'sql/parts/connection/common/connectionManagement';
+import { ConnectionDialogWidget, OnShowUIResponse } from 'sql/parts/connection/connectionDialog/connectionDialogWidget';
+import { ConnectionController } from 'sql/parts/connection/connectionDialog/connectionController';
+import * as WorkbenchUtils from 'sql/workbench/common/sqlWorkbenchUtils';
+import * as Constants from 'sql/parts/connection/common/constants';
+import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
+import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
+import { ConnectionProfile } from 'sql/parts/connection/common/connectionProfile';
+import { localize } from 'vs/nls';
+
+import * as data from 'data';
+
+import { IPartService } from 'vs/workbench/services/part/common/partService';
+import { withElementById } from 'vs/base/browser/builder';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import Severity from 'vs/base/common/severity';
+import { IWorkspaceConfigurationService } from 'vs/workbench/services/configuration/common/configuration';
+
+export interface IConnectionResult {
+	isValid: boolean;
+	connection: IConnectionProfile;
+}
+
+export interface IConnectionComponentCallbacks {
+	onSetConnectButton: (enable: boolean) => void;
+	onCreateNewServerGroup?: () => void;
+	onAdvancedProperties?: () => void;
+	onSetAzureTimeOut?: () => void;
+}
+
+export interface IConnectionComponentController {
+	showUiComponent(container: HTMLElement): void;
+	initDialog(model: IConnectionProfile): void;
+	validateConnection(): IConnectionResult;
+	fillInConnectionInputs(connectionInfo: IConnectionProfile): void;
+	handleOnConnecting(): void;
+	handleResetConnection(): void;
+	focusOnOpen(): void;
+}
+
+export class ConnectionDialogService implements IConnectionDialogService {
+
+	_serviceBrand: any;
+
+	private _connectionManagementService: IConnectionManagementService;
+	private _container: HTMLElement;
+	private _connectionDialog: ConnectionDialogWidget;
+	private _connectionControllerMap: { [providerDisplayName: string]: IConnectionComponentController };
+	private _model: ConnectionProfile;
+	private _params: INewConnectionParams;
+	private _inputModel: IConnectionProfile;
+	private _capabilitiesMaps: { [providerDisplayName: string]: data.DataProtocolServerCapabilities };
+	private _providerNameToDisplayNameMap: { [providerDisplayName: string]: string };
+	private _providerTypes: string[];
+	private _currentProviderType: string = 'Microsoft SQL Server';
+	private _connecting: boolean = false;
+	private _connectionErrorTitle = localize('connectionError', 'Connection Error');
+
+	constructor(
+		@IPartService private _partService: IPartService,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@ICapabilitiesService private _capabilitiesService: ICapabilitiesService,
+		@IErrorMessageService private _errorMessageService: IErrorMessageService,
+		@IWorkspaceConfigurationService private _workspaceConfigurationService: IWorkspaceConfigurationService
+	) {
+		this._capabilitiesMaps = {};
+		this._providerNameToDisplayNameMap = {};
+		this._connectionControllerMap = {};
+		this._providerTypes = [];
+		if (_capabilitiesService) {
+			_capabilitiesService.onProviderRegisteredEvent((capabilities => {
+				let defaultProvider = this.getDefaultProviderName();
+				if (capabilities.providerName === defaultProvider) {
+					this.showDialogWithModel();
+				}
+			}));
+		}
+	}
+
+	private getDefaultProviderName() {
+		if (this._workspaceConfigurationService) {
+			let defaultProvider = WorkbenchUtils.getSqlConfigValue<string>(this._workspaceConfigurationService, Constants.defaultEngine);
+			if (defaultProvider
+				&& this._capabilitiesMaps
+				&& defaultProvider in this._capabilitiesMaps) {
+				return defaultProvider;
+			}
+		}
+		// as a fallback, default to MSSQL if the value from settings is not available
+		return Constants.mssqlProviderName;
+	}
+
+	private handleOnConnect(params: INewConnectionParams, profile?: IConnectionProfile): void {
+		if (!this._connecting) {
+			this._connecting = true;
+			this.handleProviderOnConnecting();
+			if (!profile) {
+				let result = this.uiController.validateConnection();
+				if (!result.isValid) {
+					this._connecting = false;
+					this._connectionDialog.resetConnection();
+					return;
+				}
+				profile = result.connection;
+
+				// append the port to the server name for SQL Server connections
+				if (this.getCurrentProviderName() === Constants.mssqlProviderName) {
+					let portPropertyName: string = 'port';
+					let portOption: string = profile.options[portPropertyName];
+					if (portOption && portOption.indexOf(',') === -1) {
+						profile.serverName = profile.serverName + ',' + portOption;
+					}
+					profile.options[portPropertyName] = undefined;
+				}
+
+				// Disable password prompt during reconnect if connected with an empty password
+				if (profile.password === '' && profile.savePassword === false) {
+					profile.savePassword = true;
+				}
+
+				this.handleDefaultOnConnect(params, profile);
+			} else {
+				this._connectionManagementService.addSavedPassword(profile).then(connectionWithPassword => {
+					this.handleDefaultOnConnect(params, connectionWithPassword);
+				});
+			}
+		}
+	}
+
+	private handleOnCancel(params: INewConnectionParams): void {
+		if (params && params.input && params.connectionType === ConnectionType.editor) {
+			this._connectionManagementService.cancelEditorConnection(params.input);
+		} else {
+			this._connectionManagementService.cancelConnection(this._model);
+		}
+		if (params && params.input && params.input.onConnectReject) {
+			params.input.onConnectReject();
+		}
+		this._connectionDialog.resetConnection();
+		this._connecting = false;
+	}
+
+	private handleDefaultOnConnect(params: INewConnectionParams, connection: IConnectionProfile): Thenable<void> {
+		let fromEditor = params && params.connectionType === ConnectionType.editor;
+		let uri: string = undefined;
+		if (fromEditor && params.input) {
+			uri = params.input.uri;
+		}
+		let options: IConnectionCompletionOptions = {
+			params: params,
+			saveTheConnection: !fromEditor,
+			showDashboard: params.showDashboard !== undefined ? params.showDashboard : !fromEditor,
+			showConnectionDialogOnError: false,
+			showFirewallRuleOnError: true
+		};
+
+		return this._connectionManagementService.connectAndSaveProfile(connection, uri, options, params.input).then(connectionResult => {
+			this._connecting = false;
+			if (connectionResult && connectionResult.connected) {
+				this._connectionDialog.close();
+			} else if (connectionResult && connectionResult.errorHandled) {
+				this._connectionDialog.resetConnection();
+			} else {
+				this._errorMessageService.showDialog(Severity.Error, this._connectionErrorTitle, connectionResult.errorMessage);
+				this._connectionDialog.resetConnection();
+			}
+		}).catch(err => {
+			this._connecting = false;
+			this._errorMessageService.showDialog(Severity.Error, this._connectionErrorTitle, err);
+			this._connectionDialog.resetConnection();
+		});
+	}
+
+	private get uiController(): IConnectionComponentController {
+		// Find the provider name from the selected provider type, or throw an error if it does not correspond to a known provider
+		let providerName = this.getCurrentProviderName();
+		if (!providerName) {
+			throw Error('Invalid provider type');
+		}
+
+		// Set the model name, initialize the controller if needed, and return the controller
+		this._model.providerName = providerName;
+		if (!this._connectionControllerMap[providerName]) {
+			this._connectionControllerMap[providerName] = this._instantiationService.createInstance(ConnectionController, this._container, this._connectionManagementService, this._capabilitiesMaps[providerName], {
+				onSetConnectButton: (enable: boolean) => this.handleSetConnectButtonEnable(enable)
+			}, providerName);
+		}
+		return this._connectionControllerMap[providerName];
+	}
+
+	private handleSetConnectButtonEnable(enable: boolean): void {
+		this._connectionDialog.connectButtonState = enable;
+	}
+
+	private handleShowUiComponent(input: OnShowUIResponse) {
+		this._currentProviderType = input.selectedProviderType;
+		this._model = new ConnectionProfile(this._capabilitiesMaps[this.getCurrentProviderName()], this._model);
+		this.uiController.showUiComponent(input.container);
+	}
+
+	private handleInitDialog() {
+		this.uiController.initDialog(this._model);
+	}
+
+	private handleFillInConnectionInputs(connectionInfo: IConnectionProfile): void {
+		this._connectionManagementService.addSavedPassword(connectionInfo).then(connectionWithPassword => {
+			var model = this.createModel(connectionWithPassword);
+			this._model = model;
+			this.uiController.fillInConnectionInputs(model);
+		});
+		this._connectionDialog.updateProvider(this._providerNameToDisplayNameMap[connectionInfo.providerName]);
+	}
+
+	private handleProviderOnResetConnection(): void {
+		this.uiController.handleResetConnection();
+	}
+
+	private handleProviderOnConnecting(): void {
+		this.uiController.handleOnConnecting();
+	}
+
+	private updateModelServerCapabilities(model: IConnectionProfile) {
+		this._model = this.createModel(model);
+		this._currentProviderType = this._providerNameToDisplayNameMap[this._model.providerName];
+		if (this._connectionDialog) {
+			this._connectionDialog.updateProvider(this._currentProviderType);
+		}
+	}
+
+	private createModel(model: IConnectionProfile): ConnectionProfile {
+		let defaultProvider = this.getDefaultProviderName();
+		let providerName = model ? model.providerName : defaultProvider;
+		providerName = providerName ? providerName : defaultProvider;
+		let serverCapabilities = this._capabilitiesMaps[providerName];
+		let newProfile = new ConnectionProfile(serverCapabilities, model);
+		newProfile.saveProfile = true;
+		newProfile.generateNewId();
+		// If connecting from a query editor set "save connection" to false
+		if (this._params && this._params.input && this._params.connectionType === ConnectionType.editor) {
+			newProfile.saveProfile = false;
+		}
+		return newProfile;
+	}
+
+	private cacheCapabilities(capabilities: data.DataProtocolServerCapabilities) {
+		if (capabilities) {
+			this._providerTypes.push(capabilities.providerDisplayName);
+			this._capabilitiesMaps[capabilities.providerName] = capabilities;
+			this._providerNameToDisplayNameMap[capabilities.providerName] = capabilities.providerDisplayName;
+		}
+	}
+
+	private showDialogWithModel(): TPromise<void> {
+		return new TPromise<void>((resolve, reject) => {
+			if (this.getDefaultProviderName() in this._capabilitiesMaps) {
+				this.updateModelServerCapabilities(this._inputModel);
+
+				this.doShowDialog(this._params);
+			}
+			let none: void;
+			resolve(none);
+		});
+	}
+
+	public showDialog(
+		connectionManagementService: IConnectionManagementService,
+		params: INewConnectionParams,
+		model?: IConnectionProfile,
+		error?: string): Thenable<void> {
+
+		this._connectionManagementService = connectionManagementService;
+		this._params = params;
+		this._inputModel = model;
+
+		return new Promise<void>((resolve, reject) => {
+			// only create the provider maps first time the dialog gets called
+			let capabilitiesPromise: Promise<void> = Promise.resolve();
+			if (this._providerTypes.length === 0) {
+				capabilitiesPromise = this._capabilitiesService.onCapabilitiesReady().then(() => {
+					let capabilities = this._capabilitiesService.getCapabilities();
+					capabilities.forEach(c => {
+						this.cacheCapabilities(c);
+					});
+				});
+			}
+
+			capabilitiesPromise.then(success => {
+				this.updateModelServerCapabilities(model);
+				// If connecting from a query editor set "save connection" to false
+				if (params && params.input && params.connectionType === ConnectionType.editor) {
+					this._model.saveProfile = false;
+				}
+
+				resolve(this.showDialogWithModel().then(() => {
+					if (error && error !== '') {
+						this._errorMessageService.showDialog(Severity.Error, this._connectionErrorTitle, error);
+					}
+				}));
+			}, err => reject(err));
+		});
+	}
+
+	private doShowDialog(params: INewConnectionParams): TPromise<void> {
+		if (!this._connectionDialog) {
+			let container = withElementById(this._partService.getWorkbenchElementId()).getHTMLElement().parentElement;
+			this._container = container;
+			this._connectionDialog = this._instantiationService.createInstance(ConnectionDialogWidget, this._providerTypes, this._providerNameToDisplayNameMap[this._model.providerName]);
+			this._connectionDialog.onCancel(() => this.handleOnCancel(this._connectionDialog.newConnectionParams));
+			this._connectionDialog.onConnect((profile) => this.handleOnConnect(this._connectionDialog.newConnectionParams, profile));
+			this._connectionDialog.onShowUiComponent((input) => this.handleShowUiComponent(input));
+			this._connectionDialog.onInitDialog(() => this.handleInitDialog());
+			this._connectionDialog.onFillinConnectionInputs((input) => this.handleFillInConnectionInputs(input));
+			this._connectionDialog.onResetConnection(() => this.handleProviderOnResetConnection());
+			this._connectionDialog.render();
+		}
+		this._connectionDialog.newConnectionParams = params;
+
+		return new TPromise<void>(() => {
+			this._connectionDialog.open(this._connectionManagementService.getRecentConnections().length > 0);
+			this.uiController.focusOnOpen();
+		});
+	}
+
+	private getCurrentProviderName(): string {
+		return 'MSSQL';
+	}
+}

src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts

@@ -0,0 +1,301 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./media/connectionDialog';
+
+import { attachModalDialogStyler } from 'sql/common/theme/styler';
+import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
+import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
+import { Modal } from 'sql/base/browser/ui/modal/modal';
+import { IConnectionManagementService, INewConnectionParams } from 'sql/parts/connection/common/connectionManagement';
+import * as DialogHelper from 'sql/base/browser/ui/modal/dialogHelper';
+import { TreeCreationUtils } from 'sql/parts/registeredServer/viewlet/treeCreationUtils';
+import { TreeUpdateUtils } from 'sql/parts/registeredServer/viewlet/treeUpdateUtils';
+import { ConnectionProfile } from 'sql/parts/connection/common/connectionProfile';
+import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
+import * as styler from 'vs/platform/theme/common/styler';
+import { IPartService } from 'vs/workbench/services/part/common/partService';
+import { ITree } from 'vs/base/parts/tree/browser/tree';
+import Event, { Emitter } from 'vs/base/common/event';
+import { Builder, $ } from 'vs/base/browser/builder';
+import { Button } from 'vs/base/browser/ui/button/button';
+import { DefaultController, ICancelableEvent } from 'vs/base/parts/tree/browser/treeDefaults';
+import { IKeyboardEvent, StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import * as TelemetryKeys from 'sql/common/telemetryKeys';
+import { localize } from 'vs/nls';
+import * as DOM from 'vs/base/browser/dom';
+
+export interface OnShowUIResponse {
+	selectedProviderType: string;
+	container: HTMLElement;
+}
+
+class TreeController extends DefaultController {
+	constructor(private clickcb: (element: any, eventish: ICancelableEvent, origin: string) => void) {
+		super();
+	}
+
+	protected onLeftClick(tree: ITree, element: any, eventish: ICancelableEvent, origin: string = 'mouse'): boolean {
+		this.clickcb(element, eventish, origin);
+		return super.onLeftClick(tree, element, eventish, origin);
+	}
+
+	protected onEnter(tree: ITree, event: IKeyboardEvent): boolean {
+		super.onEnter(tree, event);
+		this.clickcb(tree.getSelection()[0], event, 'keyboard');
+		return true;
+	}
+}
+
+export class ConnectionDialogWidget extends Modal {
+	private _bodyBuilder: Builder;
+	private _recentConnectionBuilder: Builder;
+	private _dividerBuilder: Builder;
+	private _connectButton: Button;
+	private _closeButton: Button;
+	private _newConnectionParams: INewConnectionParams;
+	private _recentConnectionTree: ITree;
+	private $connectionUIContainer: Builder;
+
+	private _onInitDialog = new Emitter<void>();
+	public onInitDialog: Event<void> = this._onInitDialog.event;
+
+	private _onCancel = new Emitter<void>();
+	public onCancel: Event<void> = this._onCancel.event;
+
+	private _onConnect = new Emitter<IConnectionProfile>();
+	public onConnect: Event<IConnectionProfile> = this._onConnect.event;
+
+	private _onShowUiComponent = new Emitter<OnShowUIResponse>();
+	public onShowUiComponent: Event<OnShowUIResponse> = this._onShowUiComponent.event;
+
+	private _onFillinConnectionInputs = new Emitter<IConnectionProfile>();
+	public onFillinConnectionInputs: Event<IConnectionProfile> = this._onFillinConnectionInputs.event;
+
+	private _onResetConnection = new Emitter<void>();
+	public onResetConnection: Event<void> = this._onResetConnection.event;
+
+	constructor(
+		private providerTypeOptions: string[],
+		private selectedProviderType: string,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
+		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IPartService _partService: IPartService,
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IContextKeyService contextKeyService: IContextKeyService
+	) {
+		super(localize('connection', 'Connection'), TelemetryKeys.Connection, _partService, telemetryService, contextKeyService, { hasSpinner: true, hasErrors: true });
+	}
+
+	protected renderBody(container: HTMLElement): void {
+		this._bodyBuilder = new Builder(container);
+
+		this._bodyBuilder.div({ class: 'connection-recent', id: 'recentConnection' }, (builder) => {
+			this._recentConnectionBuilder = new Builder(builder.getHTMLElement());
+			this.createRecentConnections();
+			this._recentConnectionBuilder.hide();
+		});
+
+		this._bodyBuilder.div({ class: 'Connection-divider' }, (dividerContainer) => {
+			this._dividerBuilder = dividerContainer;
+		});
+
+		this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => {
+			// add SQL Server label to Connection Dialog until we support multiple connection providers
+			let sqlServerName = localize('microsoftSqlServer', "Microsoft SQL Server");
+			modelTableContent.div({ class: 'server-name-label' }, (nameLabel) => {
+				nameLabel.innerHtml(sqlServerName);
+			});
+
+			//let connectTypeLabel = localize('connectType', 'Connection type');
+			modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => {
+				// DialogHelper.appendInputSelectBox(
+				// 	DialogHelper.appendRow(tableContainer, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
+			});
+		});
+
+		this.$connectionUIContainer = $('.connection-provider-info#connectionProviderInfo');
+		this.$connectionUIContainer.appendTo(this._bodyBuilder);
+
+		let self = this;
+		this._register(self._themeService.onDidColorThemeChange(e => self.updateTheme(e)));
+		self.updateTheme(self._themeService.getColorTheme());
+	}
+
+	/**
+	 * Render the connection flyout
+	 */
+	public render() {
+		super.render();
+		attachModalDialogStyler(this, this._themeService);
+		let connectLabel = localize('connect', 'Connect');
+		let cancelLabel = localize('cancel', 'Cancel');
+		this._connectButton = this.addFooterButton(connectLabel, () => this.connect());
+		this._connectButton.enabled = false;
+		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
+		this.registerListeners();
+		this.onProviderTypeSelected('MSSQL');
+	}
+
+	// Update theming that is specific to connection flyout body
+	private updateTheme(theme: IColorTheme): void {
+		let borderColor = theme.getColor(contrastBorder);
+		let border = borderColor ? borderColor.toString() : null;
+		if (this._dividerBuilder) {
+			this._dividerBuilder.style('border-top-width', border ? '1px' : null);
+			this._dividerBuilder.style('border-top-style', border ? 'solid' : null);
+			this._dividerBuilder.style('border-top-color', border);
+		}
+	}
+
+	private registerListeners(): void {
+		this._register(styler.attachButtonStyler(this._connectButton, this._themeService));
+		this._register(styler.attachButtonStyler(this._closeButton, this._themeService));
+
+	}
+
+	private onProviderTypeSelected(selectedProviderType: string) {
+		// Show connection form based on server type
+		this.$connectionUIContainer.empty();
+		this._onShowUiComponent.fire({ selectedProviderType: selectedProviderType, container: this.$connectionUIContainer.getHTMLElement() });
+		this.initDialog();
+	}
+
+	private connect(element?: IConnectionProfile): void {
+		if (this._connectButton.enabled) {
+			this._connectButton.enabled = false;
+			this.showSpinner();
+			this._onConnect.fire(element);
+		}
+	}
+
+	/* Overwrite espace key behavior */
+	protected onClose(e: StandardKeyboardEvent) {
+		this.cancel();
+	}
+
+	/* Overwrite enter key behavior */
+	protected onAccept(e: StandardKeyboardEvent) {
+		if (!e.target.classList.contains('monaco-tree')) {
+			this.connect();
+		}
+	}
+
+	private cancel() {
+		this._onCancel.fire();
+		this.close();
+	}
+
+	public close() {
+		this.resetConnection();
+		this.hide();
+	}
+
+	private createRecentConnections() {
+		this._recentConnectionBuilder.div({ class: 'connection-recent-content' }, (recentConnectionContainer) => {
+			let recentHistoryLabel = localize('recentHistory', 'Recent history');
+			recentConnectionContainer.div({ class: 'connection-history-label' }, (recentTitle) => {
+				recentTitle.innerHtml(recentHistoryLabel);
+			});
+
+			recentConnectionContainer.div({ class: 'server-explorer-viewlet' }, (divContainer: Builder) => {
+				divContainer.div({ class: 'explorer-servers' }, (treeContainer: Builder) => {
+					let leftClick = (element: any, eventish: ICancelableEvent, origin: string) => {
+						// element will be a server group if the tree is clicked rather than a item
+						if (element instanceof ConnectionProfile) {
+							this.onRecentConnectionClick({ payload: { origin: origin, originalEvent: eventish } }, element);
+						}
+
+					};
+					let controller = new TreeController(leftClick);
+					this._recentConnectionTree = TreeCreationUtils.createConnectionTree(treeContainer.getHTMLElement(), this._instantiationService, controller);
+
+					// Theme styler
+					this._register(styler.attachListStyler(this._recentConnectionTree, this._themeService));
+					divContainer.append(this._recentConnectionTree.getHTMLElement());
+				});
+			});
+		});
+	}
+
+	private onRecentConnectionClick(event: any, element: IConnectionProfile) {
+		let isMouseOrigin = event.payload && (event.payload.origin === 'mouse');
+		let isDoubleClick = isMouseOrigin && event.payload.originalEvent && event.payload.originalEvent.detail === 2;
+		if (isDoubleClick) {
+			this.connect(element);
+		} else {
+			if (element) {
+				this._onFillinConnectionInputs.fire(element);
+			}
+		}
+	}
+
+	/**
+	 * Open the flyout dialog
+	 * @param recentConnections Are there recent connections that should be shown
+	 */
+	public open(recentConnections: boolean) {
+		this.show();
+		if (recentConnections) {
+			this._recentConnectionBuilder.show();
+			TreeUpdateUtils.structuralTreeUpdate(this._recentConnectionTree, 'recent', this._connectionManagementService);
+			// call layout with view height
+			this.layout();
+		} else {
+			this._recentConnectionBuilder.hide();
+		}
+
+		this.initDialog();
+	}
+
+	protected layout(height?: number): void {
+		// Height is the overall height. Since we're laying out a specific component, always get its actual height
+		this._recentConnectionTree.layout(DOM.getTotalHeight(this._recentConnectionTree.getHTMLElement()));
+	}
+
+	/**
+	 * Set the state of the connect button
+	 * @param enabled The state to set the the button
+	 */
+	public set connectButtonState(enabled: boolean) {
+		this._connectButton.enabled = enabled;
+	}
+
+	/**
+	 * Get the connect button state
+	 */
+	public get connectButtonState(): boolean {
+		return this._connectButton.enabled;
+	}
+
+	private initDialog(): void {
+		super.setError('');
+		this.hideSpinner();
+		this._onInitDialog.fire();
+	}
+
+	public resetConnection(): void {
+		this.hideSpinner();
+		this._connectButton.enabled = true;
+		this._onResetConnection.fire();
+	}
+
+	public get newConnectionParams(): INewConnectionParams {
+		return this._newConnectionParams;
+	}
+
+	public set newConnectionParams(params: INewConnectionParams) {
+		this._newConnectionParams = params;
+	}
+
+	public updateProvider(displayName: string) {
+		this.onProviderTypeSelected('MSSQL');
+	}
+}

src/sql/parts/connection/connectionDialog/connectionWidget.ts

@@ -0,0 +1,482 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import 'vs/css!./media/sqlConnection';
+import { Builder, $ } from 'vs/base/browser/builder';
+import { Button } from 'vs/base/browser/ui/button/button';
+import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
+import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
+import { Checkbox } from 'sql/base/browser/ui/checkbox/defaultCheckbox';
+import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import * as DialogHelper from 'sql/base/browser/ui/modal/dialogHelper';
+import { IConnectionComponentCallbacks } from 'sql/parts/connection/connectionDialog/connectionDialogService';
+import * as lifecycle from 'vs/base/common/lifecycle';
+import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
+import { ConnectionOptionSpecialType } from 'sql/parts/connection/common/connectionManagement';
+import * as Constants from 'sql/parts/connection/common/constants';
+import { ConnectionProfileGroup, IConnectionProfileGroup } from 'sql/parts/connection/common/connectionProfileGroup';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import * as styler from 'vs/platform/theme/common/styler';
+import { attachInputBoxStyler } from 'sql/common/theme/styler';
+import * as DOM from 'vs/base/browser/dom';
+import data = require('data');
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { localize } from 'vs/nls';
+
+export class ConnectionWidget {
+	private _builder: Builder;
+	private _serverGroupSelectBox: SelectBox;
+	private _previousGroupOption: string;
+	private _serverGroupOptions: IConnectionProfileGroup[];
+	private _serverNameInputBox: InputBox;
+	private _databaseNameInputBox: InputBox;
+	private _userNameInputBox: InputBox;
+	private _passwordInputBox: InputBox;
+	private _rememberPasswordCheckBox: Checkbox;
+	private _advancedButton: Button;
+	private _callbacks: IConnectionComponentCallbacks;
+	private _authTypeSelectBox: SelectBox;
+	private _toDispose: lifecycle.IDisposable[];
+	private _optionsMaps: { [optionType: number]: data.ConnectionOption };
+	private _tableContainer: Builder;
+	private _providerName: string;
+	private _authTypeMap: { [providerName: string]: AuthenticationType[] } = {
+		[Constants.mssqlProviderName]: [new AuthenticationType('Integrated', false), new AuthenticationType('SqlLogin', true)]
+	};
+	private _saveProfile: boolean;
+	public DefaultServerGroup: IConnectionProfileGroup = {
+		id: '',
+		name: localize('defaultServerGroup', '<Default>'),
+		parentId: undefined,
+		color: undefined,
+		description: undefined,
+	};
+
+	private _addNewServerGroup = {
+		id: '',
+		name: localize('addNewServerGroup', 'Add new group...'),
+		parentId: undefined,
+		color: undefined,
+		description: undefined,
+	};
+	public NoneServerGroup: IConnectionProfileGroup = {
+		id: '',
+		name: localize('noneServerGroup', '<None>'),
+		parentId: undefined,
+		color: undefined,
+		description: undefined,
+	};
+	constructor(options: data.ConnectionOption[],
+		callbacks: IConnectionComponentCallbacks,
+		providerName: string,
+		@IThemeService private _themeService: IThemeService,
+		@IContextViewService private _contextViewService: IContextViewService) {
+		this._callbacks = callbacks;
+		this._toDispose = [];
+		this._optionsMaps = {};
+		for (var i = 0; i < options.length; i++) {
+			var option = options[i];
+			this._optionsMaps[option.specialValueType] = option;
+		}
+
+		var authTypeOption = this._optionsMaps[ConnectionOptionSpecialType.authType];
+		this._authTypeSelectBox = authTypeOption ? new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeOption.defaultValue) : undefined;
+		this._providerName = providerName;
+	}
+
+	public createConnectionWidget(container: HTMLElement): void {
+		this._serverGroupOptions = [this.DefaultServerGroup];
+		this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name);
+		this._previousGroupOption = this._serverGroupSelectBox.value;
+		this._builder = $().div({ class: 'connection-table' }, (modelTableContent) => {
+			modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => {
+				this._tableContainer = tableContainer;
+			});
+		});
+		this.fillInConnectionForm();
+		this.registerListeners();
+		if (this._authTypeSelectBox) {
+			this.onAuthTypeSelected(this._authTypeSelectBox.value);
+		}
+		DOM.append(container, this._builder.getHTMLElement());
+	}
+
+	private fillInConnectionForm(): void {
+		let errorMessage = localize('missingRequireField', ' is required.');
+
+		let serverNameOption = this._optionsMaps[ConnectionOptionSpecialType.serverName];
+		let serverNameBuilder = DialogHelper.appendRow(this._tableContainer, serverNameOption.displayName, 'connection-label', 'connection-input');
+		this._serverNameInputBox = new InputBox(serverNameBuilder.getHTMLElement(), this._contextViewService, {
+			validationOptions: {
+				validation: (value: string) => !value ? ({ type: MessageType.ERROR, content: serverNameOption.displayName + errorMessage }) : null
+			},
+		});
+
+		if (this._optionsMaps[ConnectionOptionSpecialType.authType]) {
+			let authTypeBuilder = DialogHelper.appendRow(this._tableContainer, this._optionsMaps[ConnectionOptionSpecialType.authType].displayName, 'connection-label', 'connection-input');
+			DialogHelper.appendInputSelectBox(authTypeBuilder, this._authTypeSelectBox);
+		}
+
+		let self = this;
+		let userNameOption = this._optionsMaps[ConnectionOptionSpecialType.userName];
+		let userNameBuilder = DialogHelper.appendRow(this._tableContainer, userNameOption.displayName, 'connection-label', 'connection-input');
+		this._userNameInputBox = new InputBox(userNameBuilder.getHTMLElement(), this._contextViewService, {
+			validationOptions: {
+				validation: (value: string) => self.validateUsername(value, userNameOption.isRequired) ? ({ type: MessageType.ERROR, content: userNameOption.displayName + errorMessage }) : null
+			}
+		});
+
+		let passwordOption = this._optionsMaps[ConnectionOptionSpecialType.password];
+		let passwordBuilder = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input');
+		this._passwordInputBox = new InputBox(passwordBuilder.getHTMLElement(), this._contextViewService);
+		this._passwordInputBox.inputElement.type = 'password';
+
+		let rememberPasswordLabel = localize('rememberPassword', 'Remember password');
+		this._rememberPasswordCheckBox = this.appendCheckbox(this._tableContainer, rememberPasswordLabel, 'connection-checkbox', 'connection-input', false);
+
+		let databaseOption = this._optionsMaps[ConnectionOptionSpecialType.databaseName];
+		let databaseNameBuilder = DialogHelper.appendRow(this._tableContainer, databaseOption.displayName, 'connection-label', 'connection-input');
+		this._databaseNameInputBox = new InputBox(databaseNameBuilder.getHTMLElement(), this._contextViewService, {
+			validationOptions: {
+				validation: (value: string) => (!value && databaseOption.isRequired) ? ({ type: MessageType.ERROR, content: databaseOption.displayName + errorMessage }) : null
+			},
+			placeholder: (databaseOption.defaultValue || '')
+		});
+
+		let serverGroupLabel = localize('serverGroup', 'Server group');
+		let serverGroupBuilder = DialogHelper.appendRow(this._tableContainer, serverGroupLabel, 'connection-label', 'connection-input');
+		DialogHelper.appendInputSelectBox(serverGroupBuilder, this._serverGroupSelectBox);
+
+		let AdvancedLabel = localize('advanced', 'Advanced...');
+		this._advancedButton = this.createAdvancedButton(this._tableContainer, AdvancedLabel);
+	}
+
+	private validateUsername(value: string, isOptionRequired: boolean): boolean {
+		let currentAuthType = this._authTypeSelectBox ? this.getMatchingAuthType(this._authTypeSelectBox.value) : undefined;
+		if (!currentAuthType || currentAuthType.showUsernameAndPassword) {
+			if (!value && isOptionRequired) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	private createAdvancedButton(container: Builder, title: string): Button {
+		let button;
+		container.element('tr', {}, (rowContainer) => {
+			rowContainer.element('td');
+			rowContainer.element('td', { align: 'right' }, (cellContainer) => {
+				cellContainer.div({ class: 'advanced-button' }, (divContainer) => {
+					button = new Button(divContainer);
+					button.label = title;
+					button.addListener('click', () => {
+						//open advanced page
+						this._callbacks.onAdvancedProperties();
+					});
+				});
+			});
+		});
+		return button;
+	}
+
+	private appendCheckbox(container: Builder, label: string, checkboxClass: string, cellContainerClass: string, isChecked: boolean): Checkbox {
+		let checkbox: Checkbox;
+		container.element('tr', {}, (rowContainer) => {
+			rowContainer.element('td');
+			rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
+				checkbox = new Checkbox(inputCellContainer.getHTMLElement(), { label, checked: isChecked });
+			});
+		});
+		return checkbox;
+	}
+
+	private registerListeners(): void {
+		// Theme styler
+		this._toDispose.push(attachInputBoxStyler(this._serverNameInputBox, this._themeService));
+		this._toDispose.push(attachInputBoxStyler(this._databaseNameInputBox, this._themeService));
+		this._toDispose.push(attachInputBoxStyler(this._userNameInputBox, this._themeService));
+		this._toDispose.push(attachInputBoxStyler(this._passwordInputBox, this._themeService));
+		this._toDispose.push(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService));
+		this._toDispose.push(styler.attachButtonStyler(this._advancedButton, this._themeService));
+
+		if (this._authTypeSelectBox) {
+			// Theme styler
+			this._toDispose.push(styler.attachSelectBoxStyler(this._authTypeSelectBox, this._themeService));
+			this._toDispose.push(this._authTypeSelectBox.onDidSelect(selectedAuthType => {
+				this.onAuthTypeSelected(selectedAuthType.selected);
+			}));
+		}
+
+		this._toDispose.push(this._serverGroupSelectBox.onDidSelect(selectedGroup => {
+			this.onGroupSelected(selectedGroup.selected);
+		}));
+
+		this._toDispose.push(this._serverNameInputBox.onDidChange(serverName => {
+			this.serverNameChanged(serverName);
+		}));
+	}
+
+	private onGroupSelected(selectedGroup: string) {
+		if (selectedGroup === this._addNewServerGroup.name) {
+			// Select previous non-AddGroup option in case AddServerGroup dialog is cancelled
+			this._serverGroupSelectBox.selectWithOptionName(this._previousGroupOption);
+			this._callbacks.onCreateNewServerGroup();
+		} else {
+			this._previousGroupOption = selectedGroup;
+		}
+	}
+
+	private onAuthTypeSelected(selectedAuthType: string) {
+		let currentAuthType = this.getMatchingAuthType(selectedAuthType);
+		if (!currentAuthType.showUsernameAndPassword) {
+			this._userNameInputBox.disable();
+			this._passwordInputBox.disable();
+			this._userNameInputBox.hideMessage();
+			this._passwordInputBox.hideMessage();
+			this._userNameInputBox.value = '';
+			this._passwordInputBox.value = '';
+
+			this._rememberPasswordCheckBox.checked = false;
+			this._rememberPasswordCheckBox.enabled = false;
+		} else {
+			this._userNameInputBox.enable();
+			this._passwordInputBox.enable();
+			this._rememberPasswordCheckBox.enabled = true;
+		}
+	}
+
+	private serverNameChanged(serverName: string) {
+		this._callbacks.onSetConnectButton(!!serverName);
+		if (serverName.toLocaleLowerCase().includes('database.windows.net')) {
+			this._callbacks.onSetAzureTimeOut();
+		}
+	}
+
+	public focusOnAdvancedButton() {
+		this._advancedButton.focus();
+	}
+
+	public focusOnServerGroup() {
+		this._serverGroupSelectBox.focus();
+	}
+
+	public updateServerGroup(connectionGroups: IConnectionProfileGroup[], groupName?: string) {
+		this._serverGroupOptions = connectionGroups;
+		this._serverGroupOptions.push(this._addNewServerGroup);
+		this._serverGroupSelectBox.setOptions(this._serverGroupOptions.map(g => g.name));
+		if (groupName) {
+			this._serverGroupSelectBox.selectWithOptionName(groupName);
+			this._previousGroupOption = this._serverGroupSelectBox.value;
+		}
+	}
+
+	public initDialog(connectionInfo: IConnectionProfile): void {
+		this.fillInConnectionInputs(connectionInfo);
+	}
+
+	public focusOnOpen(): void {
+		this._serverNameInputBox.focus();
+	}
+
+	private getModelValue(value: string): string {
+		return value ? value : '';
+	}
+
+	public fillInConnectionInputs(connectionInfo: IConnectionProfile) {
+		if (connectionInfo) {
+			this._serverNameInputBox.value = this.getModelValue(connectionInfo.serverName);
+			this._callbacks.onSetConnectButton(!!connectionInfo.serverName);
+			this._databaseNameInputBox.value = this.getModelValue(connectionInfo.databaseName);
+			this._userNameInputBox.value = this.getModelValue(connectionInfo.userName);
+			this._passwordInputBox.value = this.getModelValue(connectionInfo.password);
+			this._saveProfile = connectionInfo.saveProfile;
+			let groupName: string;
+			if (this._saveProfile) {
+				if (!connectionInfo.groupFullName) {
+					groupName = this.DefaultServerGroup.name;
+				} else {
+					groupName = connectionInfo.groupFullName.replace('root/', '');
+				}
+			} else {
+				groupName = this.NoneServerGroup.name;
+			}
+			this._serverGroupSelectBox.selectWithOptionName(groupName);
+			this._previousGroupOption = this._serverGroupSelectBox.value;
+
+			// To handle the empty password case
+			if (this.getModelValue(connectionInfo.password) === '') {
+				this._rememberPasswordCheckBox.checked = false;
+			} else {
+				this._rememberPasswordCheckBox.checked = connectionInfo.savePassword;
+			}
+
+			if (connectionInfo.authenticationType !== null && connectionInfo.authenticationType !== undefined) {
+				var authTypeDisplayName = this.getAuthTypeDisplayName(connectionInfo.authenticationType);
+				this._authTypeSelectBox.selectWithOptionName(authTypeDisplayName);
+			}
+
+			if (this._authTypeSelectBox) {
+				this.onAuthTypeSelected(this._authTypeSelectBox.value);
+			}
+		}
+	}
+
+	private getAuthTypeDisplayName(authTypeName: string) {
+		var displayName: string;
+		var authTypeOption = this._optionsMaps[ConnectionOptionSpecialType.authType];
+		authTypeOption.categoryValues.forEach(c => {
+			if (c.name === authTypeName) {
+				displayName = c.displayName;
+			}
+		});
+		return displayName;
+	}
+
+	private getAuthTypeName(authTypeDisplayName: string) {
+		var authTypeName: string;
+		var authTypeOption = this._optionsMaps[ConnectionOptionSpecialType.authType];
+		authTypeOption.categoryValues.forEach(c => {
+			if (c.displayName === authTypeDisplayName) {
+				authTypeName = c.name;
+			}
+		});
+		return authTypeName;
+	}
+
+	public handleOnConnecting(): void {
+		this._advancedButton.enabled = false;
+
+		this._serverGroupSelectBox.disable();
+		this._serverNameInputBox.disable();
+		this._databaseNameInputBox.disable();
+		this._userNameInputBox.disable();
+		this._passwordInputBox.disable();
+		this._rememberPasswordCheckBox.enabled = false;
+		if (this._authTypeSelectBox) {
+			this._authTypeSelectBox.disable();
+		}
+	}
+
+	public handleResetConnection(): void {
+		this._advancedButton.enabled = true;
+
+		this._serverGroupSelectBox.enable();
+		this._serverNameInputBox.enable();
+		this._databaseNameInputBox.enable();
+		let currentAuthType: AuthenticationType = undefined;
+		if (this._authTypeSelectBox) {
+			this._authTypeSelectBox.enable();
+			currentAuthType = this.getMatchingAuthType(this._authTypeSelectBox.value);
+		}
+
+		if (!currentAuthType || currentAuthType.showUsernameAndPassword) {
+			this._userNameInputBox.enable();
+			this._passwordInputBox.enable();
+			this._rememberPasswordCheckBox.enabled = true;
+		}
+	}
+
+	public get serverName(): string {
+		return this._serverNameInputBox.value;
+	}
+
+	public get databaseName(): string {
+		return this._databaseNameInputBox.value;
+	}
+
+	public get userName(): string {
+		return this._userNameInputBox.value;
+	}
+
+	public get password(): string {
+		return this._passwordInputBox.value;
+	}
+
+	public get authenticationType(): string {
+		return this._authTypeSelectBox ? this.getAuthTypeName(this._authTypeSelectBox.value) : undefined;
+	}
+
+	private validateInputs(): boolean {
+		let isFocused = false;
+		let validateServerName = this._serverNameInputBox.validate();
+		if (!validateServerName) {
+			this._serverNameInputBox.focus();
+			isFocused = true;
+		}
+		let validateUserName = this._userNameInputBox.validate();
+		if (!validateUserName && !isFocused) {
+			this._userNameInputBox.focus();
+			isFocused = true;
+		}
+		let validatePassword = this._passwordInputBox.validate();
+		if (!validatePassword && !isFocused) {
+			this._passwordInputBox.focus();
+			isFocused = true;
+		}
+		let validateDatabaseName = this._databaseNameInputBox.validate();
+		if (!validateDatabaseName && !isFocused) {
+			this._databaseNameInputBox.focus();
+		}
+		return validateServerName && validateUserName && validatePassword && validateDatabaseName;
+	}
+
+	public connect(model: IConnectionProfile): boolean {
+		let validInputs = this.validateInputs();
+		if (validInputs) {
+			model.serverName = this.serverName;
+			model.databaseName = this.databaseName;
+			model.userName = this.userName;
+			model.password = this.password;
+			model.authenticationType = this.authenticationType;
+			model.savePassword = this._rememberPasswordCheckBox.checked;
+			if (this._serverGroupSelectBox.value === this.DefaultServerGroup.name) {
+				model.groupFullName = '';
+				model.saveProfile = true;
+				model.groupId = this.findGroupId(model.groupFullName);
+			} else if (this._serverGroupSelectBox.value === this.NoneServerGroup.name) {
+				model.groupFullName = '';
+				model.saveProfile = false;
+			} else if (this._serverGroupSelectBox.value !== this._addNewServerGroup.name) {
+				model.groupFullName = this._serverGroupSelectBox.value;
+				model.saveProfile = true;
+				model.groupId = this.findGroupId(model.groupFullName);
+			}
+		}
+		return validInputs;
+	}
+
+	private findGroupId(groupFullName: string): string {
+		let group: IConnectionProfileGroup;
+		if (ConnectionProfileGroup.isRoot(groupFullName)) {
+			group = this._serverGroupOptions.find(g => ConnectionProfileGroup.isRoot(g.name));
+			if (group === undefined) {
+				group = this._serverGroupOptions.find(g => g.name === this.DefaultServerGroup.name);
+			}
+		} else {
+			group = this._serverGroupOptions.find(g => g.name === groupFullName);
+		}
+		return group ? group.id : undefined;
+	}
+
+	public dispose(): void {
+		this._toDispose = lifecycle.dispose(this._toDispose);
+	}
+
+	private getMatchingAuthType(displayName: string): AuthenticationType {
+		return this._authTypeMap[this._providerName].find(authType => this.getAuthTypeDisplayName(authType.name) === displayName);
+	}
+}
+
+class AuthenticationType {
+	public name: string;
+	public showUsernameAndPassword: boolean;
+
+	constructor(name: string, showUsernameAndPassword: boolean) {
+		this.name = name;
+		this.showUsernameAndPassword = showUsernameAndPassword;
+	}
+}

src/sql/parts/connection/connectionDialog/media/connectionDialog.css

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.connection-label {
+	width: 80px;
+	padding-bottom: 5px;
+}
+
+.connection-input {
+	padding-right:8px;
+	width: 200px;
+	padding-bottom: 5px;
+}
+
+.connection-recent {
+	margin: 15px;
+	height: calc(100% - 400px);
+	overflow-y: auto;
+}
+
+.connection-history-label {
+	font-size: 15px;
+}
+
+.server-name-label {
+	font-size: 15px;
+	margin-bottom: 15px;
+}
+
+.connection-provider-info {
+	overflow-y: hidden;
+	margin: 15px;
+}
+
+.connection-recent-content {
+	height: calc(100% - 20px);
+}
+
+.connection-table-content {
+	width:100%;
+	table-layout: fixed;
+}
+
+.connection-type {
+	margin: 15px;
+	overflow-y: hidden;
+}

src/sql/parts/connection/connectionDialog/media/sqlConnection.css

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.advanced-button {
+	width: 100px;
+	padding-right:8px;
+	padding-bottom: 5px;
+}