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

src/sql/parts/accountManagement/accountDialog/accountDialog.ts

@@ -0,0 +1,230 @@
+/*---------------------------------------------------------------------------------------------
+ *  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/accountDialog';
+import 'vs/css!sql/parts/accountManagement/common/media/accountActions';
+import * as DOM from 'vs/base/browser/dom';
+import { SplitView } from 'vs/base/browser/ui/splitview/splitview';
+import { List } from 'vs/base/browser/ui/list/listWidget';
+import { IListService } from 'vs/platform/list/browser/listService';
+import { Button } from 'vs/base/browser/ui/button/button';
+import { IPartService } from 'vs/workbench/services/part/common/partService';
+import Event, { Emitter } from 'vs/base/common/event';
+import { localize } from 'vs/nls';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { attachListStyler, attachButtonStyler } from 'vs/platform/theme/common/styler';
+import { ActionRunner } from 'vs/base/common/actions';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import * as TelemetryKeys from 'sql/common/telemetryKeys';
+
+import * as data from 'data';
+import { Modal } from 'sql/base/browser/ui/modal/modal';
+import { attachModalDialogStyler } from 'sql/common/theme/styler';
+import { AccountViewModel } from 'sql/parts/accountManagement/accountDialog/accountViewModel';
+import { AddAccountAction } from 'sql/parts/accountManagement/common/accountActions';
+import { AccountListRenderer, AccountListDelegate } from 'sql/parts/accountManagement/common/accountListRenderer';
+import { AccountProviderAddedEventParams, UpdateAccountListEventParams } from 'sql/services/accountManagement/eventTypes';
+import { FixedListView } from 'sql/platform/views/fixedListView';
+import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+
+export class AccountDialog extends Modal {
+	public static ACCOUNTLIST_HEIGHT = 77;
+
+	public viewModel: AccountViewModel;
+
+	// MEMBER VARIABLES ////////////////////////////////////////////////////
+	private _providerViews: { [providerId: string]: FixedListView<data.Account> } = {};
+
+	private _closeButton: Button;
+	private _delegate: AccountListDelegate;
+	private _accountRenderer: AccountListRenderer;
+	private _actionRunner: ActionRunner;
+	private _splitView: SplitView;
+	private _container: HTMLElement;
+
+	// EVENTING ////////////////////////////////////////////////////////////
+	private _onAddAccountErrorEmitter: Emitter<string>;
+	public get onAddAccountErrorEvent(): Event<string> { return this._onAddAccountErrorEmitter.event; }
+
+	private _onCloseEmitter: Emitter<void>;
+	public get onCloseEvent(): Event<void> { return this._onCloseEmitter.event; }
+
+	constructor(
+		@IPartService partService: IPartService,
+		@IThemeService private _themeService: IThemeService,
+		@IListService private _listService: IListService,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IContextMenuService private _contextMenuService: IContextMenuService,
+		@IKeybindingService private _keybindingService: IKeybindingService,
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IContextKeyService contextKeyService: IContextKeyService
+	) {
+		super(
+			localize('linkedAccounts', 'Linked Accounts'),
+			TelemetryKeys.Accounts,
+			partService,
+			telemetryService,
+			contextKeyService,
+			{ hasSpinner: true }
+		);
+		let self = this;
+
+		this._delegate = new AccountListDelegate(AccountDialog.ACCOUNTLIST_HEIGHT);
+		this._accountRenderer = this._instantiationService.createInstance(AccountListRenderer);
+		this._actionRunner = new ActionRunner();
+
+		// Setup the event emitters
+		this._onAddAccountErrorEmitter = new  Emitter<string>();
+		this._onCloseEmitter = new Emitter<void>();
+
+		// Create the view model and wire up the events
+		this.viewModel = this._instantiationService.createInstance(AccountViewModel);
+		this.viewModel.addProviderEvent(arg => { self.addProvider(arg); });
+		this.viewModel.removeProviderEvent(arg => { self.removeProvider(arg); });
+		this.viewModel.updateAccountListEvent(arg => { self.updateProviderAccounts(arg); });
+	}
+
+	// MODAL OVERRIDE METHODS //////////////////////////////////////////////
+	protected layout(height?: number): void {
+		// Ignore height as it's a subcomponent being laid out
+		this._splitView.layout(DOM.getContentHeight(this._container));
+	}
+
+	public render() {
+		let self = this;
+
+		super.render();
+		attachModalDialogStyler(this, this._themeService);
+		this._closeButton = this.addFooterButton(localize('close', 'Close'), () => this.close());
+		this.registerListeners();
+
+		// Load the initial contents of the view model
+		this.viewModel.initialize()
+			.then(addedProviders => {
+				for (let addedProvider of addedProviders) {
+					self.addProvider(addedProvider);
+				}
+			});
+	}
+
+	protected renderBody(container: HTMLElement) {
+		this._container = container;
+		let viewBody = DOM.$('div.account-view');
+		DOM.append(container, viewBody);
+		this._splitView = new SplitView(viewBody);
+	}
+
+	private registerListeners(): void {
+		// Theme styler
+		this._register(attachButtonStyler(this._closeButton, this._themeService));
+	}
+
+	/* Overwrite escape key behavior */
+	protected onClose() {
+		this.close();
+	}
+
+	/* Overwrite enter key behavior */
+	protected onAccept() {
+		this.close();
+	}
+
+	public close() {
+		this._onCloseEmitter.fire();
+		this.hide();
+	}
+
+	public open() {
+		this.show();
+	}
+
+	public dispose(): void {
+		super.dispose();
+		for (let key in this._providerViews) {
+			this._providerViews[key].dispose();
+			delete this._providerViews[key];
+		}
+	}
+
+	// PRIVATE HELPERS /////////////////////////////////////////////////////
+	private addProvider(newProvider: AccountProviderAddedEventParams) {
+		let self = this;
+
+		// Skip adding the provider if it already exists
+		if (this._providerViews[newProvider.addedProvider.id]) {
+			return;
+		}
+
+		// Account provider doesn't exist, so add it
+		// Create a scoped add account action
+		let addAccountAction = this._instantiationService.createInstance(
+			AddAccountAction,
+			newProvider.addedProvider.id
+		);
+		addAccountAction.addAccountCompleteEvent(() => { self.hideSpinner(); });
+		addAccountAction.addAccountErrorEvent(msg => { self._onAddAccountErrorEmitter.fire(msg); });
+		addAccountAction.addAccountStartEvent(() => { self.showSpinner(); });
+
+		// Create a fixed list view for the account provider
+		let providerViewContainer = DOM.$('.provider-view');
+		let accountList = new List<data.Account>(providerViewContainer, this._delegate, [this._accountRenderer]);
+		let providerView = new FixedListView<data.Account>(
+			undefined,
+			false,
+			newProvider.addedProvider.displayName,
+			accountList,
+			providerViewContainer,
+			22,
+			[addAccountAction],
+			this._actionRunner,
+			this._contextMenuService,
+			this._keybindingService,
+			this._themeService
+		);
+
+		// Append the list view to the split view
+		this._splitView.addView(providerView);
+		this._register(attachListStyler(accountList, this._themeService));
+		this._register(this._listService.register(accountList));
+		this._splitView.layout(DOM.getContentHeight(this._container));
+
+		// Set the initial items of the list
+		providerView.updateList(newProvider.initialAccounts);
+		this.layout();
+
+		// Store the view for the provider
+		this._providerViews[newProvider.addedProvider.id] = providerView;
+	}
+
+	private removeProvider(removedProvider: data.AccountProviderMetadata) {
+		// Skip removing the provider if it doesn't exist
+		let providerView = this._providerViews[removedProvider.id];
+		if (!providerView) {
+			return;
+		}
+
+		// Remove the list view from the split view
+		this._splitView.removeView(providerView);
+		this._splitView.layout(DOM.getContentHeight(this._container));
+
+		// Remove the list view from our internal map
+		delete this._providerViews[removedProvider.id];
+		this.layout();
+	}
+
+	private updateProviderAccounts(args: UpdateAccountListEventParams) {
+		let providerMapping = this._providerViews[args.providerId];
+		if (!providerMapping) {
+			return;
+		}
+		providerMapping.updateList(args.accountList);
+		this.layout();
+	}
+}

src/sql/parts/accountManagement/accountDialog/accountDialogController.ts

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 Severity from 'vs/base/common/severity';
+import { AccountDialog } from 'sql/parts/accountManagement/accountDialog/accountDialog';
+import { IErrorMessageService } from 'sql/parts/connection/common/connectionManagement';
+import { localize } from 'vs/nls';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+
+export class AccountDialogController {
+
+	// MEMBER VARIABLES ////////////////////////////////////////////////////
+	private _addAccountErrorTitle = localize('addAccountErrorTitle', 'Error adding account');
+
+	private _accountDialog: AccountDialog;
+	public get accountDialog(): AccountDialog { return this._accountDialog; }
+
+	constructor(
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IErrorMessageService private _errorMessageService: IErrorMessageService
+	) { }
+
+	/**
+	 * Open account dialog
+	 */
+	public openAccountDialog(): void {
+		let self = this;
+
+		// Create a new dialog if one doesn't exist
+		if (!this._accountDialog) {
+			this._accountDialog = this._instantiationService.createInstance(AccountDialog);
+			this._accountDialog.onAddAccountErrorEvent(msg => { self.handleOnAddAccountError(msg); });
+			this._accountDialog.onCloseEvent(() => { self.handleOnClose(); });
+			this._accountDialog.render();
+		}
+
+		// Open the dialog
+		this._accountDialog.open();
+	}
+
+	// PRIVATE HELPERS /////////////////////////////////////////////////////
+	private handleOnClose(): void { }
+
+	private handleOnAddAccountError(msg: string): void {
+		this._errorMessageService.showDialog(Severity.Error, this._addAccountErrorTitle, msg);
+	}
+}

src/sql/parts/accountManagement/accountDialog/accountViewModel.ts

@@ -0,0 +1,74 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 * as data from 'data';
+import Event, { Emitter } from 'vs/base/common/event';
+import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
+import { AccountProviderAddedEventParams, UpdateAccountListEventParams } from 'sql/services/accountManagement/eventTypes';
+
+/**
+ * View model for account dialog
+ */
+export class AccountViewModel {
+	// EVENTING ///////////////////////////////////////////////////////
+	private _addProviderEmitter: Emitter<AccountProviderAddedEventParams>;
+	public get addProviderEvent(): Event<AccountProviderAddedEventParams> { return this._addProviderEmitter.event; }
+
+	private _removeProviderEmitter: Emitter<data.AccountProviderMetadata>;
+	public get removeProviderEvent(): Event<data.AccountProviderMetadata> { return this._removeProviderEmitter.event; }
+
+	private _updateAccountListEmitter: Emitter<UpdateAccountListEventParams>;
+	public get updateAccountListEvent(): Event<UpdateAccountListEventParams> { return this._updateAccountListEmitter.event; }
+
+	constructor(@IAccountManagementService private _accountManagementService: IAccountManagementService) {
+		let self = this;
+
+		// Create our event emitters
+		this._addProviderEmitter = new Emitter<AccountProviderAddedEventParams>();
+		this._removeProviderEmitter = new Emitter<data.AccountProviderMetadata>();
+		this._updateAccountListEmitter = new Emitter<UpdateAccountListEventParams>();
+
+		// Register handlers for any changes to the providers or accounts
+		this._accountManagementService.addAccountProviderEvent(arg => self._addProviderEmitter.fire(arg));
+		this._accountManagementService.removeAccountProviderEvent(arg => self._removeProviderEmitter.fire(arg));
+		this._accountManagementService.updateAccountListEvent(arg => self._updateAccountListEmitter.fire(arg));
+	}
+
+	// PUBLIC METHODS //////////////////////////////////////////////////////
+	/**
+	 * Loads an initial list of account providers and accounts from the account management service
+	 * and fires an event after each provider/accounts has been loaded.
+	 *
+	 */
+	public initialize(): Thenable<AccountProviderAddedEventParams[]> {
+		let self = this;
+
+		// Load a baseline of the account provider metadata and accounts
+		// 1) Get all the providers from the account management service
+		// 2) For each provider, get the accounts
+		// 3) Build parameters to add a provider and return it
+		return this._accountManagementService.getAccountProviderMetadata()
+			.then(
+				(providers: data.AccountProviderMetadata[]) => {
+					let promises = providers.map(provider => {
+						return self._accountManagementService.getAccountsForProvider(provider.id)
+							.then(
+								accounts => <AccountProviderAddedEventParams> {
+									addedProvider: provider,
+									initialAccounts: accounts
+								},
+								() => { /* Swallow failures at getting accounts, we'll just hide that provider */ });
+					});
+					return Promise.all(promises);
+				},
+				() => {
+					/* Swallow failures and just pretend we don't have any providers */
+					return [];
+				}
+			);
+	}
+}

src/sql/parts/accountManagement/accountDialog/media/accountDialog.css

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.account-view .monaco-split-view .split-view-view .header {
+	padding-right: 12px;
+}
+
+.account-view .provider-view .list-row {
+	padding: 12px;
+}
+
+.account-view .provider-view .list-row .icon {
+	flex: 0 0 50px;
+	height: 50px;
+	width: 50px;
+	background-size: 50px;
+}
+
+.account-view .provider-view .list-row .icon .badge {
+	position: absolute;
+	top: 43px;
+	left: 43px;
+	overflow: hidden;
+	width: 22px;
+	height: 22px;
+}
+
+.account-view .provider-view .list-row .icon .badge .badge-content {
+	width: 22px;
+	height: 22px;
+	background-size: 22px;
+}
+
+.account-view .provider-view .list-row .actions-container {
+	flex: 0 0 50px;
+}
+
+.account-view .provider-view .list-row .actions-container .action-item .action-label {
+	width: 16px;
+	margin-left: 20px;
+	margin-right: 10px;
+	background-size: 16px;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
+.account-view .provider-view .list-row .actions-container {
+	display: none;
+}
+
+.account-view .provider-view .monaco-list .monaco-list-row:hover .list-row .actions-container,
+.account-view .provider-view .monaco-list .monaco-list-row.selected .list-row .actions-container,
+.account-view .provider-view .monaco-list .monaco-list-row.focused .list-row .actions-container{
+	display: block;
+}
+
+.account-view .split-view-view .header .title {
+	display: flex;
+	justify-content: flex-start;
+	flex: 1 1 auto;
+}
+
+.account-view .split-view-view .header .actions {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.account-view .split-view-view .header .actions .action-item .action-label {
+	width: 30px;
+	background-size: 16px;
+	background-position: center center;
+	background-repeat: no-repeat;
+	margin-right: 0;
+	height: 22px;
+}

src/sql/parts/accountManagement/accountListStatusbar/accountListStatusbarItem.ts

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ *  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/accountListStatusbarItem';
+import { Action, IAction } from 'vs/base/common/actions';
+import { combinedDisposable, IDisposable } from 'vs/base/common/lifecycle';
+import { $, append } from 'vs/base/browser/dom';
+import { onUnexpectedError } from 'vs/base/common/errors';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { localize } from 'vs/nls';
+import { IStatusbarItem } from 'vs/workbench/browser/parts/statusbar/statusbar';
+
+import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
+
+export class AccountListStatusbarItem implements IStatusbarItem {
+	private _rootElement: HTMLElement;
+	private _iconElement: HTMLElement;
+	private _toDispose: IDisposable[];
+	private _manageLinkedAccountAction: IAction;
+
+	constructor(
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IAccountManagementService private _accountManagementService: IAccountManagementService
+	) {
+		this._toDispose = [];
+	}
+
+	public render(container: HTMLElement): IDisposable {
+		// Create root element for account list
+		this._rootElement = append(container, $('.linked-account-staus'));
+		this._rootElement.title = ManageLinkedAccountAction.LABEL;
+		this._rootElement.onclick = () => this._onClick();
+
+		this._iconElement = append(this._rootElement, $('a.linked-account-status-selection'));
+
+		return combinedDisposable(this._toDispose);
+	}
+
+	private _onClick() {
+		if (!this._manageLinkedAccountAction) {
+			this._manageLinkedAccountAction = this._instantiationService.createInstance(ManageLinkedAccountAction, ManageLinkedAccountAction.ID, ManageLinkedAccountAction.LABEL);
+		}
+		this._manageLinkedAccountAction.run().done(null, onUnexpectedError);
+	}
+}
+
+export class ManageLinkedAccountAction extends Action {
+	public static ID = 'sql.action.accounts.manageLinkedAccount';
+	public static LABEL = localize('manageLinedAccounts', 'Manage Linked Accounts');
+
+	constructor(id: string, label: string,
+		@IAccountManagementService protected _accountManagementService: IAccountManagementService) {
+		super(id, label);
+	}
+
+	public run(): TPromise<any> {
+		return new TPromise<any>(() => this._accountManagementService.openAccountListDialog());
+	}
+}

src/sql/parts/accountManagement/accountListStatusbar/media/accountListStatusbarItem.css

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.statusbar-item .linked-account-staus a.linked-account-status-selection  {
+	background: url('accounts_statusbar_inverse.svg') center center no-repeat;
+	background-size: 12px;
+	height: 12px !important;
+	width: 12px;
+}

src/sql/parts/accountManagement/accountListStatusbar/media/accounts_statusbar_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 10.89"><defs><style>.cls-1{fill:#fff;}</style></defs><title>accounts_statusbar_inverse_11x11</title><path class="cls-1" d="M10.08,5.66a3.44,3.44,0,0,0-.34-.75,3.47,3.47,0,0,0-.52-.64A3.23,3.23,0,0,0,8.8,4a2.28,2.28,0,0,0,.7-1.65,2.27,2.27,0,0,0-.18-.89A2.31,2.31,0,0,0,8.09.19,2.19,2.19,0,0,0,7.19,0,2.16,2.16,0,0,0,6.3.19a2.41,2.41,0,0,0-.73.49,2.41,2.41,0,0,0-.49.73,2.16,2.16,0,0,0-.19.89,2.22,2.22,0,0,0,.25,1A2.31,2.31,0,0,0,5.58,4a3.62,3.62,0,0,0-.52.41,3.62,3.62,0,0,0-.41.52A2.31,2.31,0,0,0,4,4.44a2.26,2.26,0,0,0-1-.25,2.16,2.16,0,0,0-.89.19,2.41,2.41,0,0,0-.73.49,2.41,2.41,0,0,0-.49.73,2.16,2.16,0,0,0-.19.89,2.22,2.22,0,0,0,.25,1,2.31,2.31,0,0,0,.45.61A3.7,3.7,0,0,0,1,8.47a3.47,3.47,0,0,0-.52.64,2.88,2.88,0,0,0-.34.75,3.06,3.06,0,0,0-.12.83v.21H1.12v-.21A1.83,1.83,0,0,1,1.27,10a1.9,1.9,0,0,1,1-1A1.83,1.83,0,0,1,3,8.8a1.86,1.86,0,0,1,.73.15,2,2,0,0,1,.6.4,1.9,1.9,0,0,1,.4.6,1.85,1.85,0,0,1,.15.73v.21H6v-.21a3.05,3.05,0,0,0-.11-.83,3.44,3.44,0,0,0-.34-.75A3.25,3.25,0,0,0,5,8.47a3.23,3.23,0,0,0-.43-.32,2.28,2.28,0,0,0,.7-1.65,1.83,1.83,0,0,1,.15-.73,1.9,1.9,0,0,1,1-1,1.83,1.83,0,0,1,.73-.15,1.86,1.86,0,0,1,.73.15,1.9,1.9,0,0,1,1,1,1.82,1.82,0,0,1,.15.73V6.7h1.12V6.49A3.05,3.05,0,0,0,10.08,5.66ZM4.1,7a1.24,1.24,0,0,1-.64.64A1.13,1.13,0,0,1,3,7.68a1.1,1.1,0,0,1-.45-.09,1.21,1.21,0,0,1-.38-.26A1.1,1.1,0,0,1,1.91,7a1.11,1.11,0,0,1-.1-.46A1.13,1.13,0,0,1,1.91,6a1.1,1.1,0,0,1,.26-.38,1.1,1.1,0,0,1,.38-.26A1.1,1.1,0,0,1,3,5.31a1.16,1.16,0,0,1,.46.1A1.24,1.24,0,0,1,4.1,6a1.15,1.15,0,0,1,.09.45A1.13,1.13,0,0,1,4.1,7ZM8.29,2.76a1.24,1.24,0,0,1-.64.64,1.13,1.13,0,0,1-.46.09,1.1,1.1,0,0,1-.45-.09,1.21,1.21,0,0,1-.38-.26,1.1,1.1,0,0,1-.26-.38A1.14,1.14,0,0,1,6,2.3a1.15,1.15,0,0,1,.1-.45,1.1,1.1,0,0,1,.26-.38,1.19,1.19,0,0,1,.83-.36,1.16,1.16,0,0,1,.46.1A1.1,1.1,0,0,1,8,1.47a1.21,1.21,0,0,1,.26.38,1.15,1.15,0,0,1,.09.45A1.13,1.13,0,0,1,8.29,2.76Z"/></svg>

src/sql/parts/accountManagement/accountPicker/accountPicker.ts

@@ -0,0 +1,232 @@
+/*---------------------------------------------------------------------------------------------
+ *  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/accountPicker';
+import { Builder } from 'vs/base/browser/builder';
+import * as DOM from 'vs/base/browser/dom';
+import Event, { Emitter } from 'vs/base/common/event';
+import { List } from 'vs/base/browser/ui/list/listWidget';
+import { IDropdownOptions } from 'vs/base/browser/ui/dropdown/dropdown';
+import { IListEvent } from 'vs/base/browser/ui/list/list';
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { buttonBackground } from 'vs/platform/theme/common/colorRegistry';
+import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
+
+import * as data from 'data';
+import { DropdownList } from 'sql/base/browser/ui/dropdownList/dropdownList';
+import { attachDropdownStyler } from 'sql/common/theme/styler';
+import { AddAccountAction, RefreshAccountAction } from 'sql/parts/accountManagement/common/accountActions';
+import { AccountPickerListRenderer, AccountListDelegate } from 'sql/parts/accountManagement/common/accountListRenderer';
+import { AccountPickerViewModel } from 'sql/parts/accountManagement/accountPicker/accountPickerViewModel';
+
+export class AccountPicker extends Disposable {
+	public static ACCOUNTPICKERLIST_HEIGHT = 47;
+	public viewModel: AccountPickerViewModel;
+	private _accountList: List<data.Account>;
+	private _rootElement: HTMLElement;
+	private _refreshContainer: HTMLElement;
+	private _listContainer: HTMLElement;
+	private _dropdown: DropdownList;
+
+	// EVENTING ////////////////////////////////////////////////////////////
+	private _addAccountCompleteEmitter: Emitter<void>;
+	public get addAccountCompleteEvent(): Event<void> { return this._addAccountCompleteEmitter.event; }
+
+	private _addAccountErrorEmitter: Emitter<string>;
+	public get addAccountErrorEvent(): Event<string> { return this._addAccountErrorEmitter.event; }
+
+	private _addAccountStartEmitter: Emitter<void>;
+	public get addAccountStartEvent(): Event<void> { return this._addAccountStartEmitter.event; }
+
+	private _onAccountSelectionChangeEvent: Emitter<data.Account>;
+	public get onAccountSelectionChangeEvent(): Event<data.Account> { return this._onAccountSelectionChangeEvent.event; }
+
+	constructor(
+		private _providerId: string,
+		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IContextViewService private _contextViewService: IContextViewService
+	) {
+		super();
+
+		// Create event emitters
+		this._addAccountCompleteEmitter = new Emitter<void>();
+		this._addAccountErrorEmitter = new Emitter<string>();
+		this._addAccountStartEmitter = new Emitter<void>();
+		this._onAccountSelectionChangeEvent = new Emitter<data.Account>();
+
+		// Create an account list
+		let delegate = new AccountListDelegate(AccountPicker.ACCOUNTPICKERLIST_HEIGHT);
+		let accountRenderer = new AccountPickerListRenderer();
+		this._listContainer = DOM.$('div.account-list-container');
+		this._accountList = new List<data.Account>(this._listContainer, delegate, [accountRenderer]);
+		this._register(attachListStyler(this._accountList, this._themeService));
+
+		// Create the view model, wire up the events, and initialize with baseline data
+		this.viewModel = this._instantiationService.createInstance(AccountPickerViewModel, this._providerId);
+		this.viewModel.updateAccountListEvent(arg => {
+			if (arg.providerId === this._providerId) {
+				this.updateAccountList(arg.accountList);
+			}
+		});
+
+		this.createAccountPickerComponent();
+	}
+
+	// PUBLIC METHODS //////////////////////////////////////////////////////
+	/**
+	 * Render account picker
+	 */
+	public render(container: HTMLElement): void {
+		DOM.append(container, this._rootElement);
+	}
+
+	private createAccountPickerComponent() {
+		this._rootElement = DOM.$('div.account-picker-container');
+
+		// Create a dropdown for account picker
+		let option: IDropdownOptions = {
+			contextViewProvider: this._contextViewService,
+			labelRenderer: (container) => this.renderLabel(container)
+		};
+
+		// Create the add account action
+		let addAccountAction = this._instantiationService.createInstance(AddAccountAction, this._providerId);
+		addAccountAction.addAccountCompleteEvent(() => this._addAccountCompleteEmitter.fire());
+		addAccountAction.addAccountErrorEvent((msg) => this._addAccountErrorEmitter.fire(msg));
+		addAccountAction.addAccountStartEvent(() => this._addAccountStartEmitter.fire());
+
+		this._dropdown = this._register(new DropdownList(this._rootElement, option, this._listContainer, this._accountList, this._themeService, addAccountAction));
+		this._register(attachDropdownStyler(this._dropdown, this._themeService));
+		this._register(this._accountList.onSelectionChange((e: IListEvent<data.Account>) => {
+			if (e.elements.length === 1) {
+				this._dropdown.renderLabel();
+				this.onAccountSelectionChange(e.elements[0]);
+			}
+		}));
+
+		// Create refresh account action
+		this._refreshContainer = DOM.append(this._rootElement, DOM.$('div.refresh-container'));
+		DOM.append(this._refreshContainer, DOM.$('div.icon warning'));
+		let actionBar = new ActionBar(this._refreshContainer, { animated: false });
+		actionBar.push(new RefreshAccountAction(RefreshAccountAction.ID, RefreshAccountAction.LABEL), { icon: false, label: true });
+
+		if (this._accountList.length > 0) {
+			this._accountList.setSelection([0]);
+			this.onAccountSelectionChange(this._accountList.getSelectedElements()[0]);
+		} else {
+			new Builder(this._refreshContainer).hide();
+		}
+
+		this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
+		this.updateTheme(this._themeService.getColorTheme());
+
+		// Load the initial contents of the view model
+		this.viewModel.initialize()
+			.then((accounts: data.Account[]) => {
+				this.updateAccountList(accounts);
+			});
+	}
+
+	public dispose() {
+		super.dispose();
+		if (this._accountList) {
+			this._accountList.dispose();
+		}
+	}
+
+	// PRIVATE HELPERS /////////////////////////////////////////////////////
+	private onAccountSelectionChange(account: data.Account) {
+		this.viewModel.selectedAccount = account;
+		if (account && account.isStale) {
+			new Builder(this._refreshContainer).show();
+		} else {
+			new Builder(this._refreshContainer).hide();
+		}
+		this._onAccountSelectionChangeEvent.fire(account);
+	}
+
+	private renderLabel(container: HTMLElement): IDisposable {
+		if (container.hasChildNodes()) {
+			for (let i = 0; i < container.childNodes.length; i++) {
+				container.removeChild(container.childNodes.item(i));
+			}
+		}
+
+		let selectedAccounts = this._accountList.getSelectedElements();
+		let account = selectedAccounts ? selectedAccounts[0] : null;
+		if (account) {
+			const badge = DOM.$('div.badge');
+			const row = DOM.append(container, DOM.$('div.selected-account-container'));
+			const icon = DOM.append(row, DOM.$('div.icon'));
+			DOM.append(icon, badge);
+			const badgeContent = DOM.append(badge, DOM.$('div.badge-content'));
+			const label = DOM.append(row, DOM.$('div.label'));
+
+			icon.className = 'icon';
+			// Set the account icon
+			icon.style.background = `url('data:${account.displayInfo.contextualLogo.light}')`;
+			// TODO: Pick between the light and dark logo
+			label.innerText = account.displayInfo.displayName + ' (' + account.displayInfo.contextualDisplayName + ')';
+
+			if (account.isStale) {
+				badgeContent.className = 'badge-content icon warning-badge';
+			} else {
+				badgeContent.className = 'badge-content';
+			}
+		} else {
+			const row = DOM.append(container, DOM.$('div.no-account-container'));
+			row.innerText = AddAccountAction.LABEL + '...';
+		}
+		return null;
+	}
+
+	private updateAccountList(accounts: data.Account[]): void {
+		// keep the selection to the current one
+		let selectedElements = this._accountList.getSelectedElements();
+
+		// find selected index
+		let selectedIndex: number;
+		if (selectedElements.length > 0 && accounts.length > 0) {
+			selectedIndex = accounts.findIndex((account) => {
+				return (account.key.accountId === selectedElements[0].key.accountId);
+			});
+		}
+
+		// Replace the existing list with the new one
+		this._accountList.splice(0, this._accountList.length, accounts);
+
+		if (this._accountList.length > 0) {
+			if (selectedIndex && selectedIndex !== -1) {
+				this._accountList.setSelection([selectedIndex]);
+			} else {
+				this._accountList.setSelection([0]);
+			}
+		} else {
+			// if the account is empty, re-render dropdown label
+			this.onAccountSelectionChange(undefined);
+			this._dropdown.renderLabel();
+		}
+
+		this._accountList.layout(this._accountList.contentHeight);
+	}
+
+	/**
+	 * Update theming that is specific to account picker
+	 */
+	private updateTheme(theme: IColorTheme): void {
+		let linkColor = theme.getColor(buttonBackground);
+		let link = linkColor ? linkColor.toString() : null;
+		this._refreshContainer.style.color = link;
+		if (this._refreshContainer) {
+			this._refreshContainer.style.color = link;
+		}
+	}
+}

src/sql/parts/accountManagement/accountPicker/accountPickerService.ts

@@ -0,0 +1,65 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import Event, { Emitter } from 'vs/base/common/event';
+import * as data from 'data';
+
+import { IAccountPickerService } from 'sql/parts/accountManagement/common/interfaces';
+import { AccountPicker } from 'sql/parts/accountManagement/accountPicker/accountPicker';
+
+export class AccountPickerService implements IAccountPickerService {
+	_serviceBrand: any;
+
+	private _accountPicker: AccountPicker;
+
+	// EVENTING ////////////////////////////////////////////////////////////
+	private _addAccountCompleteEmitter: Emitter<void>;
+	public get addAccountCompleteEvent(): Event<void> { return this._addAccountCompleteEmitter.event; }
+
+	private _addAccountErrorEmitter: Emitter<string>;
+	public get addAccountErrorEvent(): Event<string> { return this._addAccountErrorEmitter.event; }
+
+	private _addAccountStartEmitter: Emitter<void>;
+	public get addAccountStartEvent(): Event<void> { return this._addAccountStartEmitter.event; }
+
+	private _onAccountSelectionChangeEvent: Emitter<data.Account>;
+	public get onAccountSelectionChangeEvent(): Event<data.Account> { return this._onAccountSelectionChangeEvent.event; }
+
+	constructor(
+		@IInstantiationService private _instantiationService: IInstantiationService
+	) {
+		// Create event emitters
+		this._addAccountCompleteEmitter = new Emitter<void>();
+		this._addAccountErrorEmitter = new Emitter<string>();
+		this._addAccountStartEmitter = new Emitter<void>();
+		this._onAccountSelectionChangeEvent = new Emitter<data.Account>();
+	}
+
+	/**
+	 * Get selected account
+	 */
+	public get selectedAccount(): data.Account {
+		return this._accountPicker.viewModel.selectedAccount;
+	}
+
+	/**
+	 * Render account picker
+	 */
+	public renderAccountPicker(container: HTMLElement): void {
+		if (!this._accountPicker) {
+			// TODO: expand support to multiple providers
+			const providerId: string = 'azurePublicCloud';
+			this._accountPicker = this._instantiationService.createInstance(AccountPicker, providerId);
+		}
+
+		this._accountPicker.addAccountCompleteEvent(() => this._addAccountCompleteEmitter.fire());
+		this._accountPicker.addAccountErrorEvent((msg) => this._addAccountErrorEmitter.fire(msg));
+		this._accountPicker.addAccountStartEvent(() => this._addAccountStartEmitter.fire());
+		this._accountPicker.onAccountSelectionChangeEvent((account) => this._onAccountSelectionChangeEvent.fire(account));
+		this._accountPicker.render(container);
+	}
+}

src/sql/parts/accountManagement/accountPicker/accountPickerViewModel.ts

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 * as data from 'data';
+import Event, { Emitter } from 'vs/base/common/event';
+
+import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
+import { UpdateAccountListEventParams } from 'sql/services/accountManagement/eventTypes';
+
+/**
+ * View model for account picker
+ */
+export class AccountPickerViewModel {
+	// EVENTING ////////////////////////////////////////////////////////////
+	private _updateAccountListEmitter: Emitter<UpdateAccountListEventParams>;
+	public get updateAccountListEvent(): Event<UpdateAccountListEventParams> { return this._updateAccountListEmitter.event; }
+
+	public selectedAccount: data.Account;
+
+	constructor(
+		private _providerId: string,
+		@IAccountManagementService private _accountManagementService: IAccountManagementService
+	) {
+		let self = this;
+
+		// Create our event emitters
+		this._updateAccountListEmitter = new Emitter<UpdateAccountListEventParams>();
+
+		// Register handlers for any changes to the accounts
+		this._accountManagementService.updateAccountListEvent(arg => self._updateAccountListEmitter.fire(arg));
+	}
+
+	// PUBLIC METHODS //////////////////////////////////////////////////////
+	/**
+	 * Loads an initial list of accounts from the account management service
+	 * @return {Thenable<Account[]>} Promise to return the list of accounts
+	 */
+	public initialize(): Thenable<data.Account[]> {
+		// Load a baseline of the accounts for the provider
+		return this._accountManagementService.getAccountsForProvider(this._providerId)
+			.then(null, () => {
+				// In the event we failed to lookup accounts for the provider, just send
+				// back an empty collection
+				return [];
+			});
+	}
+}

src/sql/parts/accountManagement/accountPicker/media/accountPicker.css

@@ -0,0 +1,99 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Selected account */
+.selected-account-container {
+	padding: 6px;
+	display: flex;
+	align-items: flex-start;
+}
+
+.selected-account-container .icon {
+	flex: 0 0 25px;
+	height: 25px;
+	width: 25px;
+}
+
+.selected-account-container .label {
+	flex: 1 1 auto;
+	padding-left: 10px;
+	align-self: center;
+}
+
+.selected-account-container .icon {
+	background-size: 25px;
+}
+
+.selected-account-container .icon .badge {
+	position: relative;
+	top: 15px;
+	left: 15px;
+	overflow: hidden;
+	width: 12px;
+	height: 12px;
+}
+
+.selected-account-container .icon .badge .badge-content {
+	width: 12px;
+	height: 12px;
+	background-size: 12px;
+}
+
+/* A container when the account list is empty */
+.no-account-container {
+	padding: 6px;
+	opacity: 0.7;
+	font-style: italic;
+}
+
+/* Account list */
+.account-list-container .list-row {
+	padding: 6px;
+}
+
+.account-list-container .list-row .icon {
+	flex: 0 0 35px;
+	height: 35px;
+	width: 35px;
+	background-size: 35px;
+}
+
+.account-list-container .list-row .icon .badge {
+	position: relative;
+	top: 22px;
+	left: 22px;
+	overflow: hidden;
+	width: 15px;
+	height: 15px;
+}
+
+.account-list-container .list-row .icon .badge .badge-content {
+	width: 15px;
+	height: 15px;
+	background-size: 15px;
+}
+
+/* Refresh link */
+.refresh-container {
+	padding-left: 15px;
+	padding-top: 6px;
+	display: flex;
+	align-items: flex-start;
+}
+
+.refresh-container .monaco-action-bar .actions-container {
+	justify-content: flex-start;
+}
+
+.refresh-container .icon {
+	flex: 0 0 16px;
+	height: 16px;
+	width: 16px;
+}
+
+.refresh-container .monaco-action-bar {
+	flex: 1 1 auto;
+	margin-left: 10px;
+}

src/sql/parts/accountManagement/common/accountActions.ts

@@ -0,0 +1,158 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 * as data from 'data';
+import Event, { Emitter } from 'vs/base/common/event';
+import { localize } from 'vs/nls';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { Action } from 'vs/base/common/actions';
+import { IMessageService, IConfirmation, Severity } from 'vs/platform/message/common/message';
+
+import { error } from 'sql/base/common/log';
+import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
+import { IErrorMessageService } from 'sql/parts/connection/common/connectionManagement';
+
+/**
+ * Actions to add a new account
+ */
+export class AddAccountAction extends Action {
+	// CONSTANTS ///////////////////////////////////////////////////////////
+	public static ID = 'account.addLinkedAccount';
+	public static LABEL = localize('addAccount', 'Add an account');
+
+	// EVENTING ////////////////////////////////////////////////////////////
+	private _addAccountCompleteEmitter: Emitter<void>;
+	public get addAccountCompleteEvent(): Event<void> { return this._addAccountCompleteEmitter.event; }
+
+	private _addAccountErrorEmitter: Emitter<string>;
+	public get addAccountErrorEvent(): Event<string> { return this._addAccountErrorEmitter.event; }
+
+	private _addAccountStartEmitter: Emitter<void>;
+	public get addAccountStartEvent(): Event<void> { return this._addAccountStartEmitter.event; }
+
+	constructor(
+		private _providerId: string,
+		@IMessageService private _messageService: IMessageService,
+		@IErrorMessageService private _errorMessageService: IErrorMessageService,
+		@IAccountManagementService private _accountManagementService: IAccountManagementService
+	) {
+		super(AddAccountAction.ID, AddAccountAction.LABEL);
+		this.class = 'add-linked-account-action';
+
+		this._addAccountCompleteEmitter = new Emitter<void>();
+		this._addAccountErrorEmitter = new Emitter<string>();
+		this._addAccountStartEmitter = new Emitter<void>();
+	}
+
+	public run(): TPromise<boolean> {
+		let self = this;
+
+		// Fire the event that we've started adding accounts
+		this._addAccountStartEmitter.fire();
+
+		return new TPromise((resolve, reject) => {
+			self._accountManagementService.addAccount(self._providerId)
+				.then(
+					() => {
+						self._addAccountCompleteEmitter.fire();
+						resolve(true);
+					},
+					err => {
+						error(`Error while adding account: ${err}`);
+						self._addAccountErrorEmitter.fire(err);
+						self._addAccountCompleteEmitter.fire();
+						reject(err);
+					}
+				);
+		});
+	}
+}
+
+/**
+ * Actions to remove the account
+ */
+export class RemoveAccountAction extends Action {
+	public static ID = 'account.removeAccount';
+	public static LABEL = localize('removeAccount', 'Remove account');
+
+	constructor(
+		private _account: data.Account,
+		@IMessageService private _messageService: IMessageService,
+		@IErrorMessageService private _errorMessageService: IErrorMessageService,
+		@IAccountManagementService private _accountManagementService: IAccountManagementService
+	) {
+		super(RemoveAccountAction.ID, RemoveAccountAction.LABEL, 'remove-account-action icon remove');
+	}
+
+	public run(): TPromise<boolean> {
+		let self = this;
+
+		// Ask for Confirm
+		let confirm: IConfirmation = {
+			message: localize('confirmRemoveUserAccountMessage', "Are you sure you want to remove '{0}'?", this._account.displayInfo.displayName),
+			primaryButton: localize('yes', 'Yes'),
+			secondaryButton: localize('no', 'No'),
+			type: 'question'
+		};
+
+		if (!this._messageService.confirm(confirm)) {
+			return TPromise.as(false);
+		}
+
+		return new TPromise((resolve, reject) => {
+			self._accountManagementService.removeAccount(self._account.key)
+				.then(
+					(result) => { resolve(result); },
+					(err) => {
+						// Must handle here as this is an independent action
+						self._errorMessageService.showDialog(Severity.Error,
+							localize('removeAccountFailed', 'Failed to remove account'), err);
+						resolve(false);
+					}
+				);
+		});
+	}
+}
+
+/**
+ * Actions to apply filter to the account
+ */
+export class ApplyFilterAction extends Action {
+	public static ID = 'account.applyFilters';
+	public static LABEL = localize('applyFilters', 'Apply Filters');
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label, 'apply-filters-action icon filter');
+	}
+
+	public run(): TPromise<boolean> {
+		// Todo: apply filter to the account
+		return TPromise.as(true);
+	}
+}
+
+/**
+ * Actions to refresh the account
+ */
+export class RefreshAccountAction extends Action {
+	public static ID = 'account.refresh';
+	public static LABEL = localize('refreshAccount', 'Reenter your credentials');
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label, 'refresh-account-action icon refresh');
+	}
+	public run(): TPromise<boolean> {
+		// Todo: refresh the account
+		return TPromise.as(true);
+	}
+}

src/sql/parts/accountManagement/common/accountListRenderer.ts

@@ -0,0 +1,125 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!sql/parts/accountManagement/common/media/accountListRenderer';
+import 'vs/css!sql/parts/accountManagement/common/media/accountActions';
+import 'vs/css!sql/media/icons/common-icons';
+import * as DOM from 'vs/base/browser/dom';
+import { IDelegate, IRenderer } from 'vs/base/browser/ui/list/list';
+import { ActionBar, IActionOptions } from 'vs/base/browser/ui/actionbar/actionbar';
+import { localize } from 'vs/nls';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+
+import { RemoveAccountAction, ApplyFilterAction, RefreshAccountAction } from 'sql/parts/accountManagement/common/accountActions';
+
+import * as data from 'data';
+
+export class AccountListDelegate implements IDelegate<data.Account> {
+
+	constructor(
+		private _height: number
+	) {
+	}
+
+	public getHeight(element: data.Account): number {
+		return this._height;
+	}
+
+	public getTemplateId(element: data.Account): string {
+		return 'accountListRenderer';
+	}
+}
+
+export interface AccountListTemplate {
+	root: HTMLElement;
+	icon: HTMLElement;
+	badgeContent: HTMLElement;
+	contextualDisplayName: HTMLElement;
+	label: HTMLElement;
+	displayName: HTMLElement;
+	content?: HTMLElement;
+	actions?: ActionBar;
+}
+
+export class AccountPickerListRenderer implements IRenderer<data.Account, AccountListTemplate> {
+	public static TEMPLATE_ID = 'accountListRenderer';
+
+	public get templateId(): string {
+		return AccountPickerListRenderer.TEMPLATE_ID;
+	}
+
+	public renderTemplate(container: HTMLElement): AccountListTemplate {
+		const tableTemplate: AccountListTemplate = Object.create(null);
+		const badge = DOM.$('div.badge');
+		tableTemplate.root = DOM.append(container, DOM.$('div.list-row.account-picker-list'));
+		tableTemplate.icon = DOM.append(tableTemplate.root, DOM.$('div.icon'));
+		DOM.append(tableTemplate.icon, badge);
+		tableTemplate.badgeContent = DOM.append(badge, DOM.$('div.badge-content'));
+		tableTemplate.label = DOM.append(tableTemplate.root, DOM.$('div.label'));
+		tableTemplate.contextualDisplayName = DOM.append(tableTemplate.label, DOM.$('div.contextual-display-name'));
+		tableTemplate.displayName = DOM.append(tableTemplate.label, DOM.$('div.display-name'));
+		return tableTemplate;
+	}
+
+	public renderElement(account: data.Account, index: number, templateData: AccountListTemplate): void {
+		// Set the account icon
+		templateData.icon.classList.add('account-logo');
+		templateData.icon.style.background = `url('data:${account.displayInfo.contextualLogo.light}')`;
+		// TODO: Pick between the light and dark logo
+
+		templateData.contextualDisplayName.innerText = account.displayInfo.contextualDisplayName;
+		templateData.displayName.innerText = account.displayInfo.displayName;
+		if (account.isStale) {
+			templateData.badgeContent.className = 'badge-content icon warning-badge';
+		} else {
+			templateData.badgeContent.className = 'badge-content';
+		}
+	}
+
+	public disposeTemplate(template: AccountListTemplate): void {
+		// noop
+	}
+}
+
+export class AccountListRenderer extends AccountPickerListRenderer {
+	constructor(
+		@IInstantiationService private _instantiationService: IInstantiationService
+	) {
+		super();
+	}
+
+	public get templateId(): string {
+		return AccountListRenderer.TEMPLATE_ID;
+	}
+
+	public renderTemplate(container: HTMLElement): AccountListTemplate {
+		const tableTemplate = super.renderTemplate(container);
+		tableTemplate.content = DOM.append(tableTemplate.label, DOM.$('div.content'));
+		tableTemplate.actions = new ActionBar(tableTemplate.root, { animated: false });
+
+		return tableTemplate;
+	}
+
+	public renderElement(account: data.Account, index: number, templateData: AccountListTemplate): void {
+		super.renderElement(account, index, templateData);
+		if (account.isStale) {
+			templateData.content.innerText = localize('refreshCredentials', 'You need to refresh the credentials for this account.');
+		} else {
+			templateData.content.innerText = '';
+		}
+		templateData.actions.clear();
+
+		let actionOptions: IActionOptions = { icon: true, label: false };
+		if (account.isStale) {
+			templateData.actions.push(new RefreshAccountAction(RefreshAccountAction.ID, RefreshAccountAction.LABEL), actionOptions);
+		} else {
+			templateData.actions.push(new ApplyFilterAction(ApplyFilterAction.ID, ApplyFilterAction.LABEL), actionOptions);
+		}
+
+		let removeAction = this._instantiationService.createInstance(RemoveAccountAction, account);
+		templateData.actions.push(removeAction, actionOptions);
+	}
+}

src/sql/parts/accountManagement/common/interfaces.ts

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { createDecorator } from 'vs/platform/instantiation/common/instantiation';
+import Event from 'vs/base/common/event';
+import * as data from 'data';
+
+import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
+
+export const SERVICE_ID = 'resourceProviderService';
+export const IResourceProviderService = createDecorator<IResourceProviderService>(SERVICE_ID);
+
+export interface IHandleFirewallRuleResult {
+	canHandleFirewallRule: boolean;
+	ipAddress: string;
+	resourceProviderId: string;
+}
+
+export interface IResourceProviderService {
+	_serviceBrand: any;
+
+	/**
+	 * Register a resource provider
+	 */
+	registerProvider(providerId: string, provider: data.ResourceProvider): void;
+
+	/**
+	 * Unregister a resource provider
+	 */
+	unregisterProvider(ProviderId: string): void;
+
+	/**
+	 * Create a firewall rule
+	 */
+	createFirewallRule(selectedAccount: data.Account, firewallruleInfo: data.FirewallRuleInfo, resourceProviderId: string): Promise<data.CreateFirewallRuleResponse>;
+
+	/**
+	 * handle a firewall rule
+	 */
+	handleFirewallRule(errorCode: number, errorMessage: string, connectionTypeId: string): Promise<IHandleFirewallRuleResult>;
+
+	/**
+	 * Show firewall rule dialog
+	 */
+	showFirewallRuleDialog(connection: IConnectionProfile, ipAddress: string, resourceProviderId: string): Promise<boolean>;
+}
+
+export const IAccountPickerService = createDecorator<IAccountPickerService>('AccountPickerService');
+export interface IAccountPickerService {
+	_serviceBrand: any;
+	renderAccountPicker(container: HTMLElement): void;
+	addAccountCompleteEvent: Event<void>;
+	addAccountErrorEvent: Event<string>;
+	addAccountStartEvent: Event<void>;
+	onAccountSelectionChangeEvent: Event<data.Account>;
+	selectedAccount: data.Account;
+}

src/sql/parts/accountManagement/common/media/accountActions.css

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Icons for various account actions */
+.vs .action-item .icon.add-linked-account-action {
+	background-image: url('new_account.svg');
+}
+
+.vs-dark .action-item .icon.add-linked-account-action,
+.hc-black .action-item .icon.add-linked-account-action {
+	background-image: url('new_account_inverse.svg');
+}

src/sql/parts/accountManagement/common/media/accountListRenderer.css

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.list-row.account-picker-list {
+	display: flex;
+	align-items: flex-start;
+}
+
+.list-row.account-picker-list .label {
+	flex: 1 1 auto;
+	margin-left: 15px;
+}
+
+.list-row.account-picker-list .label .contextual-display-name {
+	font-size: 15px;
+}
+
+.list-row.account-picker-list .label .content {
+	opacity: 0.7;
+}
+
+.account-logo {
+	background: no-repeat center center;
+}

src/sql/parts/accountManagement/common/media/new_account.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>new_account_16x16</title><path d="M8.09,7.39a5.91,5.91,0,0,1,1.38.74,6.06,6.06,0,0,1,1.13,1.06A6,6,0,0,1,11.88,12h-1a4.94,4.94,0,0,0-.63-1.61A5,5,0,0,0,7.66,8.3a5,5,0,0,0-3-.12,5.09,5.09,0,0,0-1.2.5,5,5,0,0,0-1.79,1.79,5.07,5.07,0,0,0-.5,1.2A4.88,4.88,0,0,0,1,13H0a5.88,5.88,0,0,1,.28-1.8A6,6,0,0,1,1,9.59a6.1,6.1,0,0,1,1.22-1.3,5.8,5.8,0,0,1,1.59-.9A4.2,4.2,0,0,1,2.46,5.94,3.86,3.86,0,0,1,2,4a3.92,3.92,0,0,1,.31-1.56A4,4,0,0,1,4.4.31a4,4,0,0,1,3.12,0A4,4,0,0,1,9.65,2.44,4,4,0,0,1,9.83,5a4,4,0,0,1-1,1.74A3.94,3.94,0,0,1,8.09,7.39ZM3,4A2.92,2.92,0,0,0,3.2,5.17a3,3,0,0,0,1.6,1.6,3,3,0,0,0,2.33,0,3,3,0,0,0,1.6-1.6,3,3,0,0,0,0-2.33,3,3,0,0,0-1.6-1.6,3,3,0,0,0-2.33,0,3,3,0,0,0-1.6,1.6A2.92,2.92,0,0,0,3,4Zm13,9v1H14v2H13V14H11V13h2V11h1v2Z"/></svg>

src/sql/parts/accountManagement/common/media/new_account_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>new_account_inverse_16x16</title><path class="cls-1" d="M8.13,7.39a5.91,5.91,0,0,1,1.38.74,6.06,6.06,0,0,1,1.13,1.06A6,6,0,0,1,11.91,12h-1a4.94,4.94,0,0,0-.63-1.61A5,5,0,0,0,7.7,8.3a5,5,0,0,0-3-.12,5.09,5.09,0,0,0-1.2.5,5,5,0,0,0-1.79,1.79,5.07,5.07,0,0,0-.5,1.2A4.88,4.88,0,0,0,1,13H0a5.88,5.88,0,0,1,.28-1.8,6,6,0,0,1,.79-1.6,6.1,6.1,0,0,1,1.22-1.3,5.8,5.8,0,0,1,1.59-.9A4.2,4.2,0,0,1,2.5,5.94,3.86,3.86,0,0,1,2,4a3.92,3.92,0,0,1,.31-1.56A4,4,0,0,1,4.44.31a4,4,0,0,1,3.12,0A4,4,0,0,1,9.69,2.44,4,4,0,0,1,9.87,5a4,4,0,0,1-1,1.74A3.94,3.94,0,0,1,8.13,7.39ZM3,4a2.92,2.92,0,0,0,.23,1.17,3,3,0,0,0,1.6,1.6,3,3,0,0,0,2.33,0,3,3,0,0,0,1.6-1.6,3,3,0,0,0,0-2.33,3,3,0,0,0-1.6-1.6,3,3,0,0,0-2.33,0,3,3,0,0,0-1.6,1.6A2.92,2.92,0,0,0,3,4Zm13,9v1H14v2H13V14H11V13h2V11h1v2Z"/></svg>

src/sql/parts/accountManagement/common/resourceProviderService.ts

@@ -0,0 +1,114 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IEnvironmentService } from 'vs/platform/environment/common/environment';
+
+import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
+import { IResourceProviderService, IHandleFirewallRuleResult } from 'sql/parts/accountManagement/common/interfaces';
+import * as Constants from 'sql/common/constants';
+import * as TelemetryKeys from 'sql/common/telemetryKeys';
+import * as TelemetryUtils from 'sql/common/telemetryUtilities';
+import { FirewallRuleDialogController } from 'sql/parts/accountManagement/firewallRuleDialog/firewallRuleDialogController';
+
+import * as data from 'data';
+
+export class ResourceProviderService implements IResourceProviderService {
+
+	public _serviceBrand: any;
+	private _providers: { [handle: string]: data.ResourceProvider; } = Object.create(null);
+	private _firewallRuleDialogController: FirewallRuleDialogController;
+
+	constructor(
+		@ITelemetryService private _telemetryService: ITelemetryService,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IEnvironmentService private _environmentService: IEnvironmentService
+	) {
+	}
+
+	/**
+	 * Opens the firewall rule dialog
+	 */
+	public showFirewallRuleDialog(connection: IConnectionProfile, ipAddress: string, resourceProviderId: string): Promise<boolean> {
+		let self = this;
+		// If the firewall rule dialog hasn't been defined, create a new one
+		if (!self._firewallRuleDialogController) {
+			self._firewallRuleDialogController = self._instantiationService.createInstance(FirewallRuleDialogController);
+		}
+
+		return self._firewallRuleDialogController.openFirewallRuleDialog(connection, ipAddress, resourceProviderId);
+	}
+
+	/**
+	 * Create a firewall rule
+	 */
+	public createFirewallRule(selectedAccount: data.Account, firewallruleInfo: data.FirewallRuleInfo, resourceProviderId: string): Promise<data.CreateFirewallRuleResponse> {
+		return new Promise<data.CreateFirewallRuleResponse>((resolve, reject) => {
+			let provider = this._providers[resourceProviderId];
+			if (provider) {
+				TelemetryUtils.addTelemetry(this._telemetryService, TelemetryKeys.FirewallRuleRequested, { provider: resourceProviderId });
+				provider.createFirewallRule(selectedAccount, firewallruleInfo).then(result => {
+					resolve(result);
+				}, error => {
+					reject(error);
+				});
+			} else {
+				reject(Constants.InvalidProvider);
+			}
+		});
+	}
+
+	/**
+	 * Handle a firewall rule
+	 */
+	public handleFirewallRule(errorCode: number, errorMessage: string, connectionTypeId: string): Promise<IHandleFirewallRuleResult> {
+		if (!this._environmentService.isBuilt) {
+			let self = this;
+			return new Promise<IHandleFirewallRuleResult>((resolve, reject) => {
+				let handleFirewallRuleResult: IHandleFirewallRuleResult;
+				let promises = [];
+				if (self._providers) {
+					for (let key in self._providers) {
+						let provider = self._providers[key];
+						promises.push(provider.handleFirewallRule(errorCode, errorMessage, connectionTypeId)
+							.then(response => {
+								if (response.result) {
+									handleFirewallRuleResult = { canHandleFirewallRule: response.result, ipAddress: response.ipAddress, resourceProviderId: key };
+								}
+							},
+							() => { /* Swallow failures at getting accounts, we'll just hide that provider */
+							}));
+					}
+				}
+
+				Promise.all(promises).then(() => {
+					if (handleFirewallRuleResult) {
+						resolve(handleFirewallRuleResult);
+					} else {
+						handleFirewallRuleResult = { canHandleFirewallRule: false, ipAddress: undefined, resourceProviderId: undefined };
+						resolve(handleFirewallRuleResult);
+					}
+				});
+			});
+		} else {
+			return new Promise<IHandleFirewallRuleResult>((resolve, reject) => {
+				resolve({ canHandleFirewallRule: false, ipAddress: undefined, resourceProviderId: undefined });
+			});
+		}
+	}
+
+	/**
+	 * Register a resource provider
+	 */
+	public registerProvider(providerId: string, provider: data.ResourceProvider): void {
+		this._providers[providerId] = provider;
+	}
+
+	public unregisterProvider(providerId: string): void {
+		delete this._providers[providerId];
+	}
+}

src/sql/parts/accountManagement/firewallRuleDialog/firewallRuleDialog.ts

@@ -0,0 +1,309 @@
+/*---------------------------------------------------------------------------------------------
+ *  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/firewallRuleDialog';
+import { Builder, $ } from 'vs/base/browser/builder';
+import * as DOM from 'vs/base/browser/dom';
+import { Button } from 'vs/base/browser/ui/button/button';
+import { IPartService } from 'vs/workbench/services/part/common/partService';
+import Event, { Emitter } from 'vs/base/common/event';
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { localize } from 'vs/nls';
+import { buttonBackground } from 'vs/platform/theme/common/colorRegistry';
+import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { attachButtonStyler, attachInputBoxStyler } from 'vs/platform/theme/common/styler';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
+import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+
+import * as data from 'data';
+
+import { Modal } from 'sql/base/browser/ui/modal/modal';
+import { FirewallRuleViewModel } from 'sql/parts/accountManagement/firewallRuleDialog/firewallRuleViewModel';
+import { attachModalDialogStyler } from 'sql/common/theme/styler';
+import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { IAccountPickerService } from 'sql/parts/accountManagement/common/interfaces';
+import * as TelemetryKeys from 'sql/common/telemetryKeys';
+
+export class FirewallRuleDialog extends Modal {
+	public viewModel: FirewallRuleViewModel;
+	private _createButton: Button;
+	private _closeButton: Button;
+	private _fromRangeinputBox: InputBox;
+	private _toRangeinputBox: InputBox;
+
+	private _helpLink: HTMLElement;
+	private _IPAddressInput: HTMLElement;
+	private _subnetIPRangeInput: HTMLElement;
+	private _IPAddressElement: HTMLElement;
+
+	// EVENTING ////////////////////////////////////////////////////////////
+	private _onAddAccountErrorEmitter: Emitter<string>;
+	public get onAddAccountErrorEvent(): Event<string> { return this._onAddAccountErrorEmitter.event; }
+
+	private _onCancel: Emitter<void>;
+	public get onCancel(): Event<void> { return this._onCancel.event; }
+
+	private _onCreateFirewallRule: Emitter<void>;
+	public get onCreateFirewallRule(): Event<void> { return this._onCreateFirewallRule.event; }
+
+	constructor(
+		@IAccountPickerService private _accountPickerService: IAccountPickerService,
+		@IPartService partService: IPartService,
+		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IContextViewService private _contextViewService: IContextViewService,
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IContextKeyService contextKeyService: IContextKeyService
+	) {
+		super(
+			localize('createNewFirewallRule', 'Create new firewall rule'),
+			TelemetryKeys.FireWallRule,
+			partService,
+			telemetryService,
+			contextKeyService,
+			{
+				isFlyout: true,
+				hasBackButton: true,
+				hasSpinner: true
+			}
+		);
+
+		// Setup event emitters
+		this._onAddAccountErrorEmitter = new Emitter<string>();
+		this._onCancel = new Emitter<void>();
+		this._onCreateFirewallRule = new Emitter<void>();
+
+		this.viewModel = this._instantiationService.createInstance(FirewallRuleViewModel);
+	}
+
+	public render() {
+		super.render();
+		attachModalDialogStyler(this, this._themeService);
+		this.backButton.addListener('click', () => this.cancel());
+		this._register(attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));
+		this._createButton = this.addFooterButton(localize('ok', 'OK'), () => this.createFirewallRule());
+		this._closeButton = this.addFooterButton(localize('cancel', 'Cancel'), () => this.cancel());
+		this.registerListeners();
+	}
+
+	protected renderBody(container: HTMLElement) {
+		let descriptionSection;
+		$().div({ class: 'firewall-rule-description-section new-section' }, (descriptionContainer) => {
+			descriptionSection = descriptionContainer.getHTMLElement();
+			DOM.append(descriptionContainer.getHTMLElement(), DOM.$('div.firewall-rule-icon'));
+
+			const textDescriptionContainer = DOM.append(descriptionContainer.getHTMLElement(), DOM.$('div.firewall-rule-description'));
+			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'));
+			this._helpLink.setAttribute('href', 'https://docs.microsoft.com/en-us/azure/sql-database/sql-database-firewall-configure');
+			this._helpLink.innerHTML += localize('firewallRuleHelpDescription', 'Learn more about firewall settings');
+		});
+
+		// Create account picker with event handling
+		this._accountPickerService.addAccountCompleteEvent(() => this.hideSpinner());
+		this._accountPickerService.addAccountErrorEvent((msg) => {
+			this.hideSpinner();
+			this._onAddAccountErrorEmitter.fire(msg);
+		});
+		this._accountPickerService.addAccountStartEvent(() => this.showSpinner());
+		this._accountPickerService.onAccountSelectionChangeEvent((account) => this.onAccountSelectionChange(account));
+
+		let azureAccountSection;
+		$().div({ class: 'azure-account-section new-section' }, (azureAccountContainer) => {
+			azureAccountSection = azureAccountContainer.getHTMLElement();
+			let azureAccountLabel = localize('azureAccount', 'Azure account');
+			this.createLabelElement(azureAccountContainer, azureAccountLabel, true);
+			azureAccountContainer.div({ class: 'dialog-input' }, (inputCellContainer) => {
+				this._accountPickerService.renderAccountPicker(inputCellContainer.getHTMLElement());
+			});
+		});
+
+		let subnetIPRangeSection;
+		$().div({ class: 'subnet-ip-range-input' }, (subnetIPRangeContainer) => {
+			subnetIPRangeSection = subnetIPRangeContainer.getHTMLElement();
+			subnetIPRangeContainer.div({ class: 'dialog-input-section' }, (inputContainer) => {
+				inputContainer.div({ class: 'dialog-label' }, (labelContainer) => {
+					labelContainer.innerHtml(localize('from', 'From'));
+				});
+
+				inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => {
+					this._fromRangeinputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService);
+				});
+
+				inputContainer.div({ class: 'dialog-label' }, (labelContainer) => {
+					labelContainer.innerHtml(localize('to', 'To'));
+				});
+
+				inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => {
+					this._toRangeinputBox = new InputBox(inputCellContainer.getHTMLElement(), this._contextViewService);
+				});
+			});
+		});
+
+		let firewallRuleSection;
+		$().div({ class: 'firewall-rule-section new-section' }, (firewallRuleContainer) => {
+			firewallRuleSection = firewallRuleContainer.getHTMLElement();
+			let 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.onDidColorThemeChange(e => this.updateTheme(e)));
+		this.updateTheme(this._themeService.getColorTheme());
+
+		jQuery(this._IPAddressInput).on('click', () => {
+			this.onFirewallRuleOptionSelected(true);
+		});
+
+		jQuery(this._subnetIPRangeInput).on('click', () => {
+			this.onFirewallRuleOptionSelected(false);
+		});
+	}
+
+	private onFirewallRuleOptionSelected(isIPAddress: boolean) {
+		this.viewModel.isIPAddressSelected = isIPAddress;
+		if (this._fromRangeinputBox) {
+			isIPAddress ? this._fromRangeinputBox.disable() : this._fromRangeinputBox.enable();
+		}
+		if (this._toRangeinputBox) {
+			isIPAddress ? this._toRangeinputBox.disable() : this._toRangeinputBox.enable();
+		}
+	}
+
+	protected layout(height?: number): void {
+		// Nothing currently laid out statically in this class
+	}
+
+	private createLabelElement(container: Builder, content: string, isHeader?: boolean) {
+		let className = 'dialog-label';
+		if (isHeader) {
+			className += ' header';
+		}
+		container.div({ class: className }, (labelContainer) => {
+			labelContainer.innerHtml(content);
+		});
+	}
+
+	// Update theming that is specific to firewall rule flyout body
+	private updateTheme(theme: IColorTheme): void {
+		let linkColor = theme.getColor(buttonBackground);
+		let link = linkColor ? linkColor.toString() : null;
+		this._helpLink.style.color = link;
+		if (this._helpLink) {
+			this._helpLink.style.color = link;
+		}
+	}
+
+	private registerListeners(): void {
+		// Theme styler
+		this._register(attachButtonStyler(this._createButton, this._themeService));
+		this._register(attachButtonStyler(this._closeButton, this._themeService));
+		this._register(attachInputBoxStyler(this._fromRangeinputBox, this._themeService));
+		this._register(attachInputBoxStyler(this._toRangeinputBox, this._themeService));
+
+		// handler for from subnet ip range change events
+		this._register(this._fromRangeinputBox.onDidChange(IPAddress => {
+			this.fromRangeInputChanged(IPAddress);
+		}));
+
+		// handler for to subnet ip range change events
+		this._register(this._toRangeinputBox.onDidChange(IPAddress => {
+			this.toRangeInputChanged(IPAddress);
+		}));
+	}
+
+	private fromRangeInputChanged(IPAddress: string) {
+		this.viewModel.fromSubnetIPRange = IPAddress;
+	}
+
+	private toRangeInputChanged(IPAddress: string) {
+		this.viewModel.toSubnetIPRange = IPAddress;
+	}
+
+	/* Overwrite esapce key behavior */
+	protected onClose() {
+		this.cancel();
+	}
+
+	/* Overwrite enter key behavior */
+	protected onAccept() {
+		this.createFirewallRule();
+	}
+
+	public cancel() {
+		this._onCancel.fire();
+		this.close();
+	}
+
+	public close() {
+		this.hide();
+	}
+
+	public createFirewallRule() {
+		if (this._createButton.enabled) {
+			this._createButton.enabled = false;
+			this.showSpinner();
+			this._onCreateFirewallRule.fire();
+		}
+	}
+
+	public onAccountSelectionChange(account: data.Account): void {
+		this.viewModel.selectedAccount = account;
+		if (account && !account.isStale) {
+			this._createButton.enabled = true;
+		} else {
+			this._createButton.enabled = false;
+		}
+	}
+
+	public onServiceComplete() {
+		this._createButton.enabled = true;
+		this.hideSpinner();
+	}
+
+	public open() {
+		this._IPAddressInput.click();
+		this.onAccountSelectionChange(this._accountPickerService.selectedAccount);
+		this._fromRangeinputBox.setPlaceHolder(this.viewModel.defaultFromSubnetIPRange);
+		this._toRangeinputBox.setPlaceHolder(this.viewModel.defaultToSubnetIPRange);
+		this._IPAddressElement.innerText = '(' + this.viewModel.defaultIPAddress + ')';
+
+		this.show();
+	}
+}

src/sql/parts/accountManagement/firewallRuleDialog/firewallRuleDialogController.ts

@@ -0,0 +1,99 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import Severity from 'vs/base/common/severity';
+import { localize } from 'vs/nls';
+import * as data from 'data';
+
+import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
+import { IConnectionManagementService, IErrorMessageService } from 'sql/parts/connection/common/connectionManagement';
+import { FirewallRuleDialog } from 'sql/parts/accountManagement/firewallRuleDialog/firewallRuleDialog';
+import { IAccountManagementService } from 'sql/services/accountManagement/interfaces';
+import { IResourceProviderService } from 'sql/parts/accountManagement/common/interfaces';
+import { Deferred } from 'sql/base/common/promise';
+
+export class FirewallRuleDialogController {
+
+	private _firewallRuleDialog: FirewallRuleDialog;
+	private _connection: IConnectionProfile;
+	private _resourceProviderId: string;
+
+	private _addAccountErrorTitle = localize('addAccountErrorTitle', 'Error adding account');
+	private _firewallRuleErrorTitle = localize('firewallRuleError', 'Firewall rule error');
+	private _deferredPromise: Deferred<boolean>;
+
+	constructor(
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IResourceProviderService private _resourceProviderService: IResourceProviderService,
+		@IConnectionManagementService private _connectionService: IConnectionManagementService,
+		@IAccountManagementService private _accountManagementService: IAccountManagementService,
+		@IErrorMessageService private _errorMessageService: IErrorMessageService
+	) {
+	}
+
+	/**
+	 * Open firewall rule dialog
+	 */
+	public openFirewallRuleDialog(connection: IConnectionProfile, ipAddress: string, resourceProviderId: string): Promise<boolean> {
+		if (!this._firewallRuleDialog) {
+			this._firewallRuleDialog = this._instantiationService.createInstance(FirewallRuleDialog);
+			this._firewallRuleDialog.onCancel(this.handleOnCancel, this);
+			this._firewallRuleDialog.onCreateFirewallRule(this.handleOnCreateFirewallRule, this);
+			this._firewallRuleDialog.onAddAccountErrorEvent(this.handleOnAddAccountError, this);
+			this._firewallRuleDialog.render();
+		}
+		this._connection = connection;
+		this._resourceProviderId = resourceProviderId;
+		this._firewallRuleDialog.viewModel.updateDefaultValues(ipAddress);
+		this._firewallRuleDialog.open();
+		this._deferredPromise = new Deferred();
+		return this._deferredPromise.promise;
+	}
+
+	// PRIVATE HELPERS /////////////////////////////////////////////////////
+	private handleOnAddAccountError(message: string): void {
+		this._errorMessageService.showDialog(Severity.Error, this._addAccountErrorTitle, message);
+	}
+
+	private handleOnCreateFirewallRule(): void {
+		let resourceProviderId = this._resourceProviderId;
+
+		this._accountManagementService.getSecurityToken(this._firewallRuleDialog.viewModel.selectedAccount).then(tokenMappings => {
+			let firewallRuleInfo: data.FirewallRuleInfo = {
+				startIpAddress: this._firewallRuleDialog.viewModel.isIPAddressSelected ? this._firewallRuleDialog.viewModel.defaultIPAddress : this._firewallRuleDialog.viewModel.fromSubnetIPRange,
+				endIpAddress: this._firewallRuleDialog.viewModel.isIPAddressSelected ? this._firewallRuleDialog.viewModel.defaultIPAddress : this._firewallRuleDialog.viewModel.toSubnetIPRange,
+				serverName: this._connection.serverName,
+				securityTokenMappings: tokenMappings
+			};
+
+			this._resourceProviderService.createFirewallRule(this._firewallRuleDialog.viewModel.selectedAccount, firewallRuleInfo, resourceProviderId).then(createFirewallRuleResponse => {
+				if (createFirewallRuleResponse.result) {
+					this._firewallRuleDialog.close();
+					this._deferredPromise.resolve(true);
+				} else {
+					this._errorMessageService.showDialog(Severity.Error, this._firewallRuleErrorTitle, createFirewallRuleResponse.errorMessage);
+				}
+				this._firewallRuleDialog.onServiceComplete();
+			}, error => {
+				this.showError(error);
+			});
+		}, error => {
+			this.showError(error);
+		});
+	}
+
+	private showError(error: any): void {
+		this._errorMessageService.showDialog(Severity.Error, this._firewallRuleErrorTitle, error);
+		this._firewallRuleDialog.onServiceComplete();
+		// Note: intentionally not rejecting the promise as we want users to be able to choose a different account
+	}
+
+	private handleOnCancel(): void {
+		this._deferredPromise.resolve(false);
+	}
+
+}

src/sql/parts/accountManagement/firewallRuleDialog/firewallRuleViewModel.ts

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 * as data from 'data';
+
+/**
+ * View model for firewall rule dialog
+ */
+export class FirewallRuleViewModel {
+	public isIPAddressSelected: boolean;
+	public selectedAccount: data.Account;
+
+	private _defaultIPAddress: string;
+	private _defaultFromSubnetIPRange: string;
+	private _defaultToSubnetIPRange: string;
+	private _fromSubnetIPRange: string;
+	private _toSubnetIPRange: string;
+
+	constructor() {
+		this.isIPAddressSelected = true;
+	}
+
+	public get defaultIPAddress(): string {
+		return this._defaultIPAddress;
+	}
+
+	public get defaultFromSubnetIPRange(): string {
+		return this._defaultFromSubnetIPRange;
+	}
+
+	public get defaultToSubnetIPRange(): string {
+		return this._defaultToSubnetIPRange;
+	}
+
+	public set fromSubnetIPRange(IPAddress: string) {
+		this._fromSubnetIPRange = IPAddress;
+	}
+
+	public get fromSubnetIPRange(): string {
+		if (this._fromSubnetIPRange) {
+			return this._fromSubnetIPRange;
+		} else {
+			return this._defaultFromSubnetIPRange;
+		}
+	}
+
+	public set toSubnetIPRange(IPAddress: string) {
+		this._toSubnetIPRange = IPAddress;
+	}
+
+	public get toSubnetIPRange(): string {
+		if (this._toSubnetIPRange) {
+			return this._toSubnetIPRange;
+		} else {
+			return this._defaultToSubnetIPRange;
+		}
+	}
+
+	public updateDefaultValues(ipAddress: string): void {
+		this._defaultIPAddress = ipAddress;
+		this._defaultFromSubnetIPRange = ipAddress.replace(/\.[0-9]+$/g, '.0');
+		this._defaultToSubnetIPRange = ipAddress.replace(/\.[0-9]+$/g, '.255');
+	}
+}

src/sql/parts/accountManagement/firewallRuleDialog/media/firewallRuleDialog.css

@@ -0,0 +1,86 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.firewall-rule-dialog {
+	padding: 15px
+}
+
+.modal .firewall-rule-dialog .dialog-label.header {
+	font-size: 15px;
+}
+
+.modal .firewall-rule-dialog .new-section {
+	padding-bottom: 30px;
+}
+
+.modal .firewall-rule-dialog .dialog-input {
+	padding-left: 15px;
+	padding-right: 15px;
+	padding-top: 10px;
+}
+
+.modal .firewall-rule-dialog .dialog-input-section {
+	display: flex;
+	padding-left: 30px;
+	padding-right: 20px;
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.modal .firewall-rule-dialog .dialog-input-section .dialog-label {
+	flex: 0 0 15px;
+	align-self: center;
+}
+
+.modal .firewall-rule-dialog .dialog-input-section .dialog-input {
+	flex: 0 0 100px;
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 0px;
+	padding-bottom: 0px;
+}
+
+.modal .firewall-rule-dialog .azure-account-section {
+	height: 92px;
+}
+
+/* Firewall rule description section */
+.modal .firewall-rule-dialog a:link {
+	text-decoration: underline;
+}
+
+.modal .firewall-rule-dialog .firewall-rule-description-section {
+	display: flex;
+}
+
+.modal .firewall-rule-dialog .firewall-rule-description-section .firewall-rule-icon {
+	background: url('secure.svg') center center no-repeat;
+	width: 50px;
+	height: 50px;
+	flex: 0 0 50px;
+}
+
+.modal .firewall-rule-dialog .firewall-rule-description-section .firewall-rule-description {
+	padding-left: 15px;
+}
+
+/* Radio button section*/
+.modal .firewall-rule-dialog .firewall-rule-section .radio-section .option-container {
+	display: flex;
+	align-items: flex-start;
+}
+
+.modal .firewall-rule-dialog .firewall-rule-section .radio-section .option-container .option-input {
+	margin-top: 0px;
+	align-self: center;
+}
+
+.modal .firewall-rule-dialog .firewall-rule-section .radio-section .option-container .option-description {
+	padding-left: 10px;
+}
+
+.modal .firewall-rule-dialog .firewall-rule-section .radio-section .option-container .option-ip-address {
+	padding-left: 3px;
+}

src/sql/parts/accountManagement/firewallRuleDialog/media/secure.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.65 50"><defs><style>.cls-1{fill:#7fba00;}.cls-2{fill:#b8d432;opacity:0.4;isolation:isolate;}.cls-3{fill:#fff;}</style></defs><title>secure</title><path class="cls-1" d="M31.19,6h0c-11-1.22-12.86-6-12.86-6S15.85,6.24,0,6.24V31.85c0,3.1,1.72,6,4.1,8.53h0C9.51,46.13,18.33,50,18.33,50s18.33-8,18.33-18.15V6.24A49.77,49.77,0,0,1,31.19,6Z"/><path class="cls-2" d="M22.86,16.54,31.19,6c-11-1.22-12.86-6-12.86-6S15.85,6.24,0,6.24V31.85c0,3.1,1.72,6,4.1,8.53l6.15-7.82Z"/><path class="cls-3" d="M25.6,24.46H24.53V20.91a6.7,6.7,0,0,0-1.67-4.45h0l-.11-.13a6,6,0,0,0-8.84,0,6.7,6.7,0,0,0-1.78,4.58v3.55H11.06a.8.8,0,0,0-.8.8v7.22h0v2.17a.8.8,0,0,0,.8.8H25.6a.8.8,0,0,0,.8-.8V25.26A.8.8,0,0,0,25.6,24.46Zm-4,0H15.07V20.91a3.75,3.75,0,0,1,1-2.57,3,3,0,0,1,4.54,0,3.67,3.67,0,0,1,.39.5h0a3.8,3.8,0,0,1,.6,2.06Z"/></svg>