Remove custom splitview (#3467)

* working on options dialog * working through options dialog * trying to work through modifying options dialog * working on converting scrollablesplitview * fixed options working through profiler * fix profiler * fix account dialog * trying to fix problems with splitpanel * fix insights dialog * moving through * fix last list, need to verify looks and functionality * fix look of account dialog * formatting * formatting * working through scrollable bugs * working on problem with view size * fix margin issues * fix styler for dialogs * add panel styles to insights * create instantiation issues * fix test * fix test * remove unused code * formatting * working through insight dialog issues * fix table updating * remove console logs
2026-02-16 10:58:30 -05:00 · 2019-01-15 15:00:34 -08:00
parent 4de3cc8a09
commit 27816acaeb
32 changed files with 795 additions and 2351 deletions
--- a/src/sql/parts/accountManagement/accountDialog/accountDialog.ts
+++ b/src/sql/parts/accountManagement/accountDialog/accountDialog.ts
@@ -8,35 +8,87 @@
 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 'sql/base/browser/ui/splitview/splitview';
 import { List } from 'vs/base/browser/ui/list/listWidget';
-import { IListService, ListService } from 'vs/platform/list/browser/listService';
 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 } from 'vs/platform/theme/common/styler';
-import { ActionRunner } from 'vs/base/common/actions';
+import { IAction } 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 { SplitView, Sizing } from 'vs/base/browser/ui/splitview/splitview';
+import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { ViewletPanel, IViewletPanelOptions } from 'vs/workbench/browser/parts/views/panelViewlet';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { values } from 'vs/base/common/map';

 import * as sqlops from 'sqlops';
+
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/base/browser/ui/modal/modal';
-import { attachModalDialogStyler, attachButtonStyler } from 'sql/common/theme/styler';
+import { attachModalDialogStyler, attachButtonStyler, attachPanelStyler } 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';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
+import * as TelemetryKeys from 'sql/common/telemetryKeys';
+
+class AccountPanel extends ViewletPanel {
+	public index: number;
+	private accountList: List<sqlops.Account>;
+
+	constructor(
+		private options: IViewletPanelOptions,
+		@IKeybindingService keybindingService: IKeybindingService,
+		@IContextMenuService contextMenuService: IContextMenuService,
+		@IConfigurationService configurationService: IConfigurationService,
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IThemeService private themeService: IThemeService
+	) {
+		super(options, keybindingService, contextMenuService, configurationService);
+	}
+
+	protected renderBody(container: HTMLElement): void {
+		this.accountList = new List<sqlops.Account>(container, new AccountListDelegate(AccountDialog.ACCOUNTLIST_HEIGHT), [this.instantiationService.createInstance(AccountListRenderer)]);
+		this.disposables.push(attachListStyler(this.accountList, this.themeService));
+	}
+
+	protected layoutBody(size: number): void {
+		if (this.accountList) {
+			this.accountList.layout(size);
+		}
+	}
+
+	public get length(): number {
+		return this.accountList.length;
+	}
+
+	public focus() {
+		this.accountList.domFocus();
+	}
+
+	public updateAccounts(accounts: sqlops.Account[]) {
+		this.accountList.splice(0, this.accountList.length, accounts);
+	}
+
+	public setSelection(indexes: number[]) {
+		this.accountList.setSelection(indexes);
+	}
+
+	public getActions(): IAction[] {
+		return [this.instantiationService.createInstance(
+			AddAccountAction,
+			this.options.id
+		)];
+	}
+}

 export interface IProviderViewUiComponent {
-	view: FixedListView<sqlops.Account>;
+	view: AccountPanel;
 	addAccountAction: AddAccountAction;
 }

@@ -46,13 +98,10 @@ export class AccountDialog extends Modal {
 	public viewModel: AccountViewModel;

 	// MEMBER VARIABLES ////////////////////////////////////////////////////
-	private _providerViews: { [providerId: string]: IProviderViewUiComponent } = {};
+	private _providerViewsMap = new Map<string, IProviderViewUiComponent>();

 	private _closeButton: Button;
 	private _addAccountButton: Button;
-	private _delegate: AccountListDelegate;
-	private _accountRenderer: AccountListRenderer;
-	private _actionRunner: ActionRunner;
 	private _splitView: SplitView;
 	private _container: HTMLElement;
 	private _splitViewContainer: HTMLElement;
@@ -68,10 +117,10 @@ export class AccountDialog extends Modal {
 	constructor(
 		@IPartService partService: IPartService,
 		@IThemeService themeService: IThemeService,
-		@IListService private _listService: IListService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@IKeybindingService private _keybindingService: IKeybindingService,
+		@IConfigurationService private _configurationService: IConfigurationService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IClipboardService clipboardService: IClipboardService
@@ -86,11 +135,6 @@ export class AccountDialog extends Modal {
 			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>();
@@ -98,28 +142,25 @@ export class AccountDialog extends Modal {

 		// 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); });
+		this.viewModel.addProviderEvent(arg => { this.addProvider(arg); });
+		this.viewModel.removeProviderEvent(arg => { this.removeProvider(arg); });
+		this.viewModel.updateAccountListEvent(arg => { this.updateProviderAccounts(arg); });

 		// Load the initial contents of the view model
 		this.viewModel.initialize()
 			.then(addedProviders => {
 				for (let addedProvider of addedProviders) {
-					self.addProvider(addedProvider);
+					this.addProvider(addedProvider);
 				}
 			});
 	}

 	// 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('accountDialog.close', 'Close'), () => this.close());
@@ -128,7 +169,7 @@ export class AccountDialog extends Modal {

 	protected renderBody(container: HTMLElement) {
 		this._container = container;
-		this._splitViewContainer = DOM.$('div.account-view');
+		this._splitViewContainer = DOM.$('div.account-view.monaco-panel-view');
 		DOM.append(container, this._splitViewContainer);
 		this._splitView = new SplitView(this._splitViewContainer);

@@ -143,7 +184,7 @@ export class AccountDialog extends Modal {
 		this._addAccountButton = new Button(buttonSection);
 		this._addAccountButton.label = localize('accountDialog.addConnection', 'Add an account');
 		this._register(this._addAccountButton.onDidClick(() => {
-			(<IProviderViewUiComponent>Object.values(this._providerViews)[0]).addAccountAction.run();
+			(<IProviderViewUiComponent>values(this._providerViewsMap)[0]).addAccountAction.run();
 		}));

 		DOM.append(container, this._noaccountViewContainer);
@@ -189,20 +230,19 @@ export class AccountDialog extends Modal {
 	private showSplitView() {
 		this._splitViewContainer.hidden = false;
 		this._noaccountViewContainer.hidden = true;
-		let views = this._splitView.getViews();
-		if (views && views.length > 0) {
-			let firstView = views[0];
-			if (firstView instanceof FixedListView) {
-				firstView.list.setSelection([0]);
-				firstView.list.domFocus();
+		if (values(this._providerViewsMap).length > 0) {
+			let firstView = values(this._providerViewsMap)[0];
+			if (firstView instanceof AccountPanel) {
+				firstView.setSelection([0]);
+				firstView.focus();
 			}
 		}
 	}

 	private isEmptyLinkedAccount(): boolean {
-		for (var providerId in this._providerViews) {
-			var listView = this._providerViews[providerId].view;
-			if (listView && listView.list.length > 0) {
+		for (let provider of values(this._providerViewsMap)) {
+			let listView = provider.view;
+			if (listView && listView.length > 0) {
 				return false;
 			}
 		}
@@ -211,23 +251,21 @@ export class AccountDialog extends Modal {

 	public dispose(): void {
 		super.dispose();
-		for (let key in this._providerViews) {
-			if (this._providerViews[key].addAccountAction) {
-				this._providerViews[key].addAccountAction.dispose();
+		for (let provider of values(this._providerViewsMap)) {
+			if (provider.addAccountAction) {
+				provider.addAccountAction.dispose();
 			}
-			if (this._providerViews[key].view) {
-				this._providerViews[key].view.dispose();
+			if (provider.view) {
+				provider.view.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]) {
+		if (this._providerViewsMap.get(newProvider.addedProvider.id)) {
 			return;
 		}

@@ -237,37 +275,35 @@ export class AccountDialog extends Modal {
 			AddAccountAction,
 			newProvider.addedProvider.id
 		);
-		addAccountAction.addAccountCompleteEvent(() => { self.hideSpinner(); });
-		addAccountAction.addAccountErrorEvent(msg => { self._onAddAccountErrorEmitter.fire(msg); });
-		addAccountAction.addAccountStartEvent(() => { self.showSpinner(); });
+		addAccountAction.addAccountCompleteEvent(() => { this.hideSpinner(); });
+		addAccountAction.addAccountErrorEvent(msg => { this._onAddAccountErrorEmitter.fire(msg); });
+		addAccountAction.addAccountStartEvent(() => { this.showSpinner(); });

-		// Create a fixed list view for the account provider
-		let providerViewContainer = DOM.$('.provider-view');
-		let accountList = new List<sqlops.Account>(providerViewContainer, this._delegate, [this._accountRenderer]);
-		let providerView = new FixedListView<sqlops.Account>(
-			undefined,
-			false,
-			newProvider.addedProvider.displayName,
-			accountList,
-			providerViewContainer,
-			22,
-			[addAccountAction],
-			this._actionRunner,
-			this._contextMenuService,
+		let providerView = new AccountPanel(
+			{
+				id: newProvider.addedProvider.id,
+				title: newProvider.addedProvider.displayName,
+				ariaHeaderLabel: newProvider.addedProvider.displayName
+			},
 			this._keybindingService,
+			this._contextMenuService,
+			this._configurationService,
+			this._instantiationService,
 			this._themeService
 		);

-		// Append the list view to the split view
-		this._splitView.addView(providerView);
-		this._register(attachListStyler(accountList, this._themeService));
+		attachPanelStyler(providerView, this._themeService);
+
+		const insertIndex = this._splitView.length;
+		// Append the list view to the split view
+		this._splitView.addView(providerView, Sizing.Distribute, insertIndex);
+		providerView.render();
+		providerView.index = insertIndex;

-		let listService = <ListService>this._listService;
-		this._register(listService.register(accountList));
 		this._splitView.layout(DOM.getContentHeight(this._container));

 		// Set the initial items of the list
-		providerView.updateList(newProvider.initialAccounts);
+		providerView.updateAccounts(newProvider.initialAccounts);

 		if (newProvider.initialAccounts.length > 0 && this._splitViewContainer.hidden) {
 			this.showSplitView();
@@ -276,31 +312,31 @@ export class AccountDialog extends Modal {
 		this.layout();

 		// Store the view for the provider and action
-		this._providerViews[newProvider.addedProvider.id] = { view: providerView, addAccountAction: addAccountAction };
+		this._providerViewsMap.set(newProvider.addedProvider.id, { view: providerView, addAccountAction: addAccountAction });
 	}

 	private removeProvider(removedProvider: sqlops.AccountProviderMetadata) {
 		// Skip removing the provider if it doesn't exist
-		let providerView = this._providerViews[removedProvider.id];
+		let providerView = this._providerViewsMap.get(removedProvider.id);
 		if (!providerView || !providerView.view) {
 			return;
 		}

 		// Remove the list view from the split view
-		this._splitView.removeView(providerView.view);
+		this._splitView.removeView(providerView.view.index);
 		this._splitView.layout(DOM.getContentHeight(this._container));

 		// Remove the list view from our internal map
-		delete this._providerViews[removedProvider.id];
+		this._providerViewsMap.delete(removedProvider.id);
 		this.layout();
 	}

 	private updateProviderAccounts(args: UpdateAccountListEventParams) {
-		let providerMapping = this._providerViews[args.providerId];
+		let providerMapping = this._providerViewsMap.get(args.providerId);
 		if (!providerMapping || !providerMapping.view) {
 			return;
 		}
-		providerMapping.view.updateList(args.accountList);
+		providerMapping.view.updateAccounts(args.accountList);

 		if (args.accountList.length > 0 && this._splitViewContainer.hidden) {
 			this.showSplitView();
--- a/src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts
+++ b/src/sql/parts/connection/connectionDialog/advancedPropertiesController.ts
@@ -13,8 +13,6 @@ 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 };

@@ -30,7 +28,6 @@ export class AdvancedPropertiesController {

 	public showDialog(providerOptions: sqlops.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);
 	}
@@ -38,8 +35,7 @@ export class AdvancedPropertiesController {
 	public get advancedDialog() {
 		if (!this._advancedDialog) {
 			this._advancedDialog = this._instantiationService.createInstance(
-				OptionsDialog, localize('connectionAdvancedProperties', 'Advanced Properties'), TelemetryKeys.ConnectionAdvancedProperties, { hasBackButton: true });
-			this._advancedDialog.cancelLabel = localize('advancedProperties.discard', 'Discard');
+				OptionsDialog, localize('connectionAdvancedProperties', 'Advanced Properties'), TelemetryKeys.ConnectionAdvancedProperties, { hasBackButton: true, cancelLabel: localize('advancedProperties.discard', 'Discard') });
 			this._advancedDialog.onCloseEvent(() => this._onCloseAdvancedProperties());
 			this._advancedDialog.onOk(() => this.handleOnOk());
 			this._advancedDialog.render();
--- a/src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts
+++ b/src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts
@@ -27,9 +27,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/base/browser/ui/modal/modal';
 import { attachModalDialogStyler, attachButtonStyler } from 'sql/common/theme/styler';
-import { FixedListView } from 'sql/platform/views/fixedListView';
 import * as TelemetryKeys from 'sql/common/telemetryKeys';
-import { Orientation } from 'sql/base/browser/ui/splitview/splitview';
 import { NewDashboardTabViewModel, IDashboardUITab } from 'sql/parts/dashboard/newDashboardTabDialog/newDashboardTabViewModel';
 import { IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -104,8 +102,6 @@ export class NewDashboardTabDialog extends Modal {
 	private _addNewTabButton: Button;
 	private _cancelButton: Button;
 	private _extensionList: List<IDashboardUITab>;
-	private _extensionTabView: FixedListView<IDashboardUITab>;
-	private _container: HTMLElement;
 	private _extensionViewContainer: HTMLElement;
 	private _noExtensionViewContainer: HTMLElement;

@@ -121,10 +117,6 @@ export class NewDashboardTabDialog extends Modal {
 	constructor(
 		@IPartService partService: IPartService,
 		@IThemeService themeService: IThemeService,
-		@IListService private _listService: IListService,
-		@IInstantiationService private _instantiationService: IInstantiationService,
-		@IContextMenuService private _contextMenuService: IContextMenuService,
-		@IKeybindingService private _keybindingService: IKeybindingService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IClipboardService clipboardService: IClipboardService
@@ -150,7 +142,7 @@ export class NewDashboardTabDialog extends Modal {

 	// MODAL OVERRIDE METHODS //////////////////////////////////////////////
 	protected layout(height?: number): void {
-		// Nothing currently laid out in this class
+		this._extensionList.layout(height);
 	}

 	public render() {
@@ -163,7 +155,6 @@ export class NewDashboardTabDialog extends Modal {
 	}

 	protected renderBody(container: HTMLElement) {
-		this._container = container;
 		this._extensionViewContainer = DOM.$('div.extension-view');
 		DOM.append(container, this._extensionViewContainer);

@@ -182,19 +173,6 @@ export class NewDashboardTabDialog extends Modal {
 		let delegate = new ExtensionListDelegate(NewDashboardTabDialog.EXTENSIONLIST_HEIGHT);
 		let extensionTabRenderer = new ExtensionListRenderer();
 		this._extensionList = new List<IDashboardUITab>(extensionTabViewContainer, delegate, [extensionTabRenderer]);
-		this._extensionTabView = new FixedListView<IDashboardUITab>(
-			undefined,
-			false,
-			localize('allFeatures', 'All features'),
-			this._extensionList,
-			extensionTabViewContainer,
-			22,
-			[],
-			undefined,
-			this._contextMenuService,
-			this._keybindingService,
-			this._themeService
-		);

 		this._extensionList.onMouseDblClick(e => this.onAccept());
 		this._extensionList.onKeyDown(e => {
@@ -206,13 +184,9 @@ export class NewDashboardTabDialog extends Modal {
 			}
 		});

-		this._extensionTabView.render(container, Orientation.VERTICAL);
-		this._extensionTabView.hideHeader();
+		DOM.append(container, extensionTabViewContainer);

 		this._register(attachListStyler(this._extensionList, this._themeService));
-
-		let listService = <ListService>this._listService;
-		this._register(listService.register(this._extensionList));
 	}

 	private registerListeners(): void {
@@ -252,7 +226,7 @@ export class NewDashboardTabDialog extends Modal {
 	}

 	private onUpdateTabList(tabs: IDashboardUITab[]) {
-		this._extensionTabView.updateList(tabs);
+		this._extensionList.splice(0, this._extensionList.length, tabs);
 		this.layout();
 		if (this._extensionList.length > 0) {
 			this._extensionViewContainer.hidden = false;
--- a/src/sql/parts/disasterRecovery/backup/backup.component.ts
+++ b/src/sql/parts/disasterRecovery/backup/backup.component.ts
@@ -13,27 +13,25 @@ import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
 import { ModalFooterStyle } from 'sql/base/browser/ui/modal/modal';
 import { CategoryView } from 'sql/base/browser/ui/modal/optionsDialog';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { SplitView } from 'sql/base/browser/ui/splitview/splitview';
 import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/common/theme/styler';
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 import * as BackupConstants from 'sql/parts/disasterRecovery/backup/constants';
 import { IBackupService, IBackupUiService, TaskExecutionMode } from 'sql/parts/disasterRecovery/backup/common/backupService';
 import FileValidationConstants = require('sql/parts/fileBrowser/common/fileValidationServiceConstants');
-import { IDashboardComponentParams } from 'sql/services/bootstrap/bootstrapParams';
 import { IFileBrowserDialogController } from 'sql/parts/fileBrowser/common/interfaces';
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
+import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';

 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import * as lifecycle from 'vs/base/common/lifecycle';
 import { localize } from 'vs/nls';
 import * as DOM from 'vs/base/browser/dom';
-import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import { KeyCode } from 'vs/base/common/keyCodes';
 import * as types from 'vs/base/common/types';
 import * as strings from 'vs/base/common/strings';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';

 export const BACKUP_SELECTOR: string = 'backup-component';

@@ -207,7 +205,8 @@ export class BackupComponent {
 		@Inject(IBackupUiService) private _backupUiService: IBackupUiService,
 		@Inject(IBackupService) private _backupService: IBackupService,
 		@Inject(IClipboardService) private clipboardService: IClipboardService,
-		@Inject(IConnectionManagementService) private connectionManagementService: IConnectionManagementService
+		@Inject(IConnectionManagementService) private connectionManagementService: IConnectionManagementService,
+		@Inject(IInstantiationService) private instantiationService: IInstantiationService
 	) {
 		this._backupUiService.onShowBackupEvent((param) => this.onGetBackupConfigInfo(param));
 	}
@@ -338,10 +337,10 @@ export class BackupComponent {

 	ngAfterViewInit() {
 		// Set category view for advanced options. This should be defined in ngAfterViewInit so that it correctly calculates the text height after data binding.
-		var splitview = new SplitView(this.advancedOptionElement.nativeElement);
+		var splitview = new ScrollableSplitView(this.advancedOptionElement.nativeElement);
 		var advancedBodySize = DOM.getTotalHeight(this.advancedOptionBodyElement.nativeElement);
-		var categoryView = new CategoryView(LocalizedStrings.ADVANCED_CONFIGURATION, this.advancedOptionBodyElement.nativeElement, true, advancedBodySize, this._advancedHeaderSize);
-		splitview.addView(categoryView);
+		var categoryView = this.instantiationService.createInstance(CategoryView, this.advancedOptionBodyElement.nativeElement, advancedBodySize, { title: LocalizedStrings.ADVANCED_CONFIGURATION, id: LocalizedStrings.ADVANCED_CONFIGURATION, ariaHeaderLabel: LocalizedStrings.ADVANCED_CONFIGURATION });
+		splitview.addView(categoryView, 0);
 		splitview.layout(advancedBodySize + this._advancedHeaderSize);

 		this._backupUiService.onShowBackupDialog();
--- a/src/sql/parts/insights/browser/insightsDialogView.ts
+++ b/src/sql/parts/insights/browser/insightsDialogView.ts
@@ -8,25 +8,25 @@ import { Button } from 'sql/base/browser/ui/button/button';
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 import { Modal } from 'sql/base/browser/ui/modal/modal';
 import { IInsightsConfigDetails } from 'sql/parts/dashboard/widgets/insights/interfaces';
-import { attachButtonStyler, attachModalDialogStyler, attachTableStyler } from 'sql/common/theme/styler';
+import { attachButtonStyler, attachModalDialogStyler, attachTableStyler, attachPanelStyler } from 'sql/common/theme/styler';
 import { TaskRegistry } from 'sql/platform/tasks/common/tasks';
 import { ConnectionProfile } from 'sql/parts/connection/common/connectionProfile';
 import * as TelemetryKeys from 'sql/common/telemetryKeys';
 import { IInsightsDialogModel, ListResource, IInsightDialogActionContext, insertValueRegex } from 'sql/parts/insights/common/interfaces';
-import { TableCollapsibleView } from 'sql/base/browser/ui/table/tableView';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
 import { error } from 'sql/base/common/log';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { CopyInsightDialogSelectionAction } from 'sql/parts/insights/common/insightDialogActions';
-import { SplitView, ViewSizing } from 'sql/base/browser/ui/splitview/splitview';
+import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
+import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
+import { IDisposableDataProvider } from 'sql/base/browser/ui/table/interfaces';

 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
 import * as DOM from 'vs/base/browser/dom';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { IListService } from 'vs/platform/list/browser/listService';
 import * as nls from 'vs/nls';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IAction } from 'vs/base/common/actions';
@@ -38,12 +38,45 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { MenuRegistry, ExecuteCommandAction } from 'vs/platform/actions/common/actions';
-import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
-import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
+import { SplitView, Orientation, Sizing } from 'vs/base/browser/ui/splitview/splitview';
+import { ViewletPanel, IViewletPanelOptions } from 'vs/workbench/browser/parts/views/panelViewlet';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';

 const labelDisplay = nls.localize("insights.item", "Item");
 const valueDisplay = nls.localize("insights.value", "Value");

+class InsightTableView<T> extends ViewletPanel {
+	private _table: Table<T>;
+	public get table(): Table<T> {
+		return this._table;
+	}
+
+	constructor(
+		private columns: Slick.Column<T>[],
+		private data: IDisposableDataProvider<T> | Array<T>,
+		private tableOptions: Slick.GridOptions<T>,
+		options: IViewletPanelOptions,
+		@IKeybindingService keybindingService: IKeybindingService,
+		@IContextMenuService contextMenuService: IContextMenuService,
+		@IConfigurationService configurationService: IConfigurationService
+	) {
+		super(options, keybindingService, contextMenuService, configurationService);
+	}
+
+	protected renderBody(container: HTMLElement): void {
+		this._table = new Table(container, {
+			columns: this.columns,
+			dataProvider: this.data
+		}, this.tableOptions);
+	}
+
+	protected layoutBody(size: number): void {
+		this._table.layout(size, Orientation.VERTICAL);
+	}
+
+}
+
 function stateFormatter(row: number, cell: number, value: any, columnDef: Slick.Column<ListResource>, resource: ListResource): string {
 	// template
 	const icon = DOM.$('span.icon-span');
@@ -126,7 +159,6 @@ export class InsightsDialogView extends Modal {
 		private _model: IInsightsDialogModel,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IThemeService themeService: IThemeService,
-		@IListService private _listService: IListService,
 		@IPartService partService: IPartService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -167,6 +199,7 @@ export class InsightsDialogView extends Modal {

 	protected renderBody(container: HTMLElement) {
 		this._container = container;
+		container.classList.add('monaco-panel-view');

 		this._splitView = new SplitView(container);

@@ -175,11 +208,14 @@ export class InsightsDialogView extends Modal {

 		this._topTableData = new TableDataView();
 		this._bottomTableData = new TableDataView();
-		let topTableView = new TableCollapsibleView(itemsHeaderTitle, { sizing: ViewSizing.Flexible, ariaHeaderLabel: itemsHeaderTitle }, this._topTableData, this._topColumns, { forceFitColumns: true });
+		let topTableView = this._instantiationService.createInstance(InsightTableView, this._topColumns, this._topTableData, { forceFitColumns: true }, { id: 'insights.top', title: itemsHeaderTitle, ariaHeaderLabel: itemsHeaderTitle }) as InsightTableView<ListResource>;
+		topTableView.render();
+		attachPanelStyler(topTableView, this._themeService);
 		this._topTable = topTableView.table;
-		topTableView.addContainerClass('insights');
 		this._topTable.setSelectionModel(new RowSelectionModel<ListResource>());
-		let bottomTableView = new TableCollapsibleView(itemsDetailHeaderTitle, { sizing: ViewSizing.Flexible, ariaHeaderLabel: itemsDetailHeaderTitle }, this._bottomTableData, this._bottomColumns, { forceFitColumns: true });
+		let bottomTableView = this._instantiationService.createInstance(InsightTableView, this._bottomColumns, this._bottomTableData, { forceFitColumns: true }, { id: 'insights.bottom', title: itemsDetailHeaderTitle, ariaHeaderLabel: itemsDetailHeaderTitle }) as InsightTableView<ListResource>;
+		bottomTableView.render();
+		attachPanelStyler(bottomTableView, this._themeService);
 		this._bottomTable = bottomTableView.table;
 		this._bottomTable.setSelectionModel(new RowSelectionModel<ListResource>());

@@ -193,12 +229,9 @@ export class InsightsDialogView extends Modal {

 				this._bottomTableData.clear();
 				this._bottomTableData.push(resourceArray);
-				// this table view has to be collapsed and expanded
-				// because the initial expand doesn't have the
-				// loaded data
 				if (bottomTableView.isExpanded()) {
-					bottomTableView.collapse();
-					bottomTableView.expand();
+					bottomTableView.setExpanded(false);
+					bottomTableView.setExpanded(true);
 				}
 				this._enableTaskButtons(true);
 			} else {
@@ -224,8 +257,8 @@ export class InsightsDialogView extends Modal {
 			});
 		}));

-		this._splitView.addView(topTableView);
-		this._splitView.addView(bottomTableView);
+		this._splitView.addView(topTableView, Sizing.Distribute);
+		this._splitView.addView(bottomTableView, Sizing.Distribute);

 		this._register(attachTableStyler(this._topTable, this._themeService));
 		this._register(attachTableStyler(this._bottomTable, this._themeService));
@@ -344,7 +377,6 @@ export class InsightsDialogView extends Modal {
 		this.hide();
 		dispose(this._taskButtonDisposables);
 		this._taskButtonDisposables = [];
-		this.dispose();
 	}

 	protected onClose(e: StandardKeyboardEvent) {
--- a/src/sql/parts/insights/node/insightsDialogController.ts
+++ b/src/sql/parts/insights/node/insightsDialogController.ts
@@ -129,7 +129,7 @@ export class InsightsDialogController {
 			} catch (e) {
 				return Promise.reject(e);
 			}
-			this._queryRunner = this._instantiationService.createInstance(QueryRunner, this._connectionUri, undefined);
+			this._queryRunner = this._instantiationService.createInstance(QueryRunner, this._connectionUri);
 			this.addQueryEventListeners(this._queryRunner);
 		}

--- a/src/sql/parts/profiler/editor/profilerEditor.ts
+++ b/src/sql/parts/profiler/editor/profilerEditor.ts
@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/

 import { ProfilerInput } from './profilerInput';
-
 import { TabbedPanel } from 'sql/base/browser/ui/panel/panel';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
@@ -17,15 +16,8 @@ import * as Actions from 'sql/parts/profiler/contrib/profilerActions';
 import { CONTEXT_PROFILER_EDITOR, PROFILER_TABLE_COMMAND_SEARCH } from './interfaces';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { textFormatter } from 'sql/parts/grid/services/sharedServices';
-import * as DOM from 'vs/base/browser/dom';
-import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
-import { TPromise } from 'vs/base/common/winjs.base';
-import { EditorOptions } from 'vs/workbench/common/editor';
-import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { IWorkbenchThemeService, VS_DARK_THEME, VS_HC_THEME } from 'vs/workbench/services/themes/common/workbenchThemeService';
-import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
 import { ProfilerResourceEditor } from './profilerResourceEditor';
-import { SplitView, View, Orientation, IViewOptions } from 'sql/base/browser/ui/splitview/splitview';
+
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { ITextModel } from 'vs/editor/common/model';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
@@ -39,59 +31,77 @@ import { Command } from 'vs/editor/browser/editorExtensions';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { ContextKeyExpr, IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
-import { KeybindingsRegistry, KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
+import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
 import { CommonFindController, FindStartFocusAction } from 'vs/editor/contrib/find/findController';
 import * as types from 'vs/base/common/types';
 import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
 import { DARK, HIGH_CONTRAST } from 'vs/platform/theme/common/themeService';
 import { IEditorGroupsService } from 'vs/workbench/services/group/common/editorGroupsService';
 import { CancellationToken } from 'vs/base/common/cancellation';
+import { IView, SplitView, Sizing } from 'vs/base/browser/ui/splitview/splitview';
+import * as DOM from 'vs/base/browser/dom';
+import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { EditorOptions } from 'vs/workbench/common/editor';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IWorkbenchThemeService, VS_DARK_THEME, VS_HC_THEME } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
+import { Event, Emitter } from 'vs/base/common/event';
+import { clamp } from 'vs/base/common/numbers';

-class BasicView extends View {
-	private _previousSize: number;
-	private _collapsed: boolean;
-	public headerSize: number;
+class BasicView implements IView {
+	public get element(): HTMLElement {
+		return this._element;
+	}
+	private _onDidChange = new Emitter<number>();
+	public readonly onDidChange: Event<number> = this._onDidChange.event;
+
+	private _collapsed = false;
+	private size: number;
+	private previousSize: number;
+	private _minimumSize: number;
+	public get minimumSize(): number {
+		return this._minimumSize;
+	}
+
+	private _maximumSize: number;
+	public get maximumSize(): number {
+		return this._maximumSize;
+	}

 	constructor(
-		initialSize: number,
+		private _defaultMinimumSize: number,
+		private _defaultMaximumSize: number,
+		private _layout: (size: number) => void,
 		private _element: HTMLElement,
-		private _focus: () => void,
-		private _layout: (size: number, orientation: Orientation) => void,
-		opts: IViewOptions
+		private options: { headersize?: number } = {}
 	) {
-		super(initialSize, opts);
-		this._previousSize = initialSize;
+		this._minimumSize = _defaultMinimumSize;
+		this._maximumSize = _defaultMaximumSize;
 	}

-	render(container: HTMLElement, orientation: Orientation): void {
-		container.appendChild(this._element);
+	public layout(size: number): void {
+		this.size = size;
+		this._layout(size);
 	}

-	focus(): void {
-		this._focus();
-	}
-
-	layout(size: number, orientation: Orientation): void {
-		if (!this.collapsed) {
-			this._previousSize = size;
-		}
-		this._layout(size, orientation);
-	}
-
-	set collapsed(val: boolean) {
-		this._collapsed = val === false ? false : true;
-		if (this.collapsed) {
-			this._previousSize = this.size;
-			this.setFixed(this.headerSize);
-		} else {
-			// Enforce the min height for the view when user is doing expand operation,
-			// to make sure the view has a reasonable height.
-			const minHeight = 200;
-			this.setFlexible(Math.max(this._previousSize, minHeight));
+	public set collapsed(val: boolean) {
+		if (val !== this._collapsed && this.options.headersize) {
+			this._collapsed = val;
+			if (this.collapsed) {
+				this.previousSize = this.size;
+				this._minimumSize = this.options.headersize;
+				this._maximumSize = this.options.headersize;
+				this._onDidChange.fire();
+			} else {
+				this._maximumSize = this._defaultMaximumSize;
+				this._minimumSize = this._defaultMinimumSize;
+				this._onDidChange.fire(clamp(this.previousSize, this.minimumSize, this.maximumSize));
+			}
 		}
 	}

-	get collapsed(): boolean {
+	public get collapsed(): boolean {
 		return this._collapsed;
 	}
 }
@@ -146,14 +156,13 @@ export class ProfilerEditor extends BaseEditor {
 		@IProfilerService private _profilerService: IProfilerService,
 		@IContextKeyService private _contextKeyService: IContextKeyService,
 		@IContextViewService private _contextViewService: IContextViewService,
-		@IEditorGroupsService private _editorGroupService: IEditorGroupsService,
-		@IEditorService private _editorService: IEditorService
+		@IEditorService editorService: IEditorService
 	) {
 		super(ProfilerEditor.ID, telemetryService, themeService);
 		this._profilerEditorContextKey = CONTEXT_PROFILER_EDITOR.bindTo(this._contextKeyService);

-		if (_editorService) {
-			_editorService.overrideOpenEditor((editor, options, group) => {
+		if (editorService) {
+			editorService.overrideOpenEditor((editor, options, group) => {
 				if (this.isVisible() && (editor !== this.input || group !== this.group)) {
 					this.saveEditorViewState();
 				}
@@ -178,21 +187,19 @@ export class ProfilerEditor extends BaseEditor {
 		let paneContainer = this._createProfilerPane();
 		this._splitView.addView(new BasicView(
 			300,
-			tableContainer,
-			() => this._profilerTableEditor.focus(),
+			Number.POSITIVE_INFINITY,
 			size => this._profilerTableEditor.layout(new DOM.Dimension(parseFloat(DOM.getComputedStyle(this._body).width), size)),
-			{}
-		));
+			tableContainer
+		), Sizing.Distribute);

 		this._panelView = new BasicView(
 			300,
-			paneContainer,
-			() => this._tabbedPanel.focus(),
+			Number.POSITIVE_INFINITY,
 			size => this._tabbedPanel.layout(new DOM.Dimension(DOM.getTotalWidth(this._body), size)),
-			{ minimumSize: 35 }
+			paneContainer,
+			{ headersize: 35 }
 		);
-		this._panelView.headerSize = 35;
-		this._splitView.addView(this._panelView);
+		this._splitView.addView(this._panelView, Sizing.Distribute);
 	}

 	private _createHeader(): void {
@@ -426,7 +433,6 @@ export class ProfilerEditor extends BaseEditor {
 				isPanelCollapsed: true
 			});
 			this._profilerTableEditor.updateState();
-			this._splitView.layout();
 			this._profilerTableEditor.focus();
 			if (savedViewState) {
 				this._profilerTableEditor.restoreViewState(savedViewState);
--- a/src/sql/parts/profiler/editor/profilerState.ts
+++ b/src/sql/parts/profiler/editor/profilerState.ts
@@ -33,7 +33,7 @@ export class ProfilerState implements IDisposable {
 	private _isPaused: boolean;
 	private _isStopped: boolean;
 	private _autoscroll: boolean;
-	private _isPanelCollapsed: boolean;
+	private _isPanelCollapsed = true;
 	private _eventEmitter: EventEmitter;

 	public get isConnected(): boolean { return this._isConnected; }
--- a/src/sql/parts/query/editor/gridPanel.ts
+++ b/src/sql/parts/query/editor/gridPanel.ts
@@ -10,7 +10,7 @@ import { attachTableStyler } from 'sql/common/theme/styler';
 import QueryRunner from 'sql/parts/query/execution/queryRunner';
 import { VirtualizedCollection, AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
 import { Table } from 'sql/base/browser/ui/table/table';
-import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';
+import { ScrollableSplitView, IView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';
 import { MouseWheelSupport } from 'sql/base/browser/ui/table/plugins/mousewheelTableScroll.plugin';
 import { AutoColumnSize } from 'sql/base/browser/ui/table/plugins/autoSizeColumns.plugin';
 import { SaveFormat } from 'sql/parts/grid/common/interfaces';
@@ -34,7 +34,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ViewletPanel, IViewletPanelOptions } from 'vs/workbench/browser/parts/views/panelViewlet';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { range } from 'vs/base/common/arrays';
-import { Orientation, IView } from 'vs/base/browser/ui/splitview/splitview';
+import { Orientation } from 'vs/base/browser/ui/splitview/splitview';
 import { Disposable, IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { $ } from 'vs/base/browser/builder';
 import { generateUuid } from 'vs/base/common/uuid';
@@ -476,10 +476,6 @@ class GridTable<T> extends Disposable implements IView {
 		this.scrolled = false;
 	}

-	public render(container: HTMLElement, orientation: Orientation): void {
-		container.appendChild(this.container);
-	}
-
 	private build(): void {
 		let tableContainer = document.createElement('div');
 		tableContainer.style.display = 'inline-block';