Merge dashboardCommandCenter to master (#697)

* Initial work of adding tab in the dashboard (#526)

* refactor dashboard to have the home tab

* formatting

* fix grid layout issue

* fix initailize issue in database dashboard

* Add action bar to the panel and add close tab to the dashboard (#562)

* add action bar to the panel and add close tab to the dashboard

* formatting

* Tab contribution (#564)

* added contrib

* disabled edit for extensions; fixed new name for insights contrib

* fix merge issue

* move file

* formatting

* fix builds

* moving imports

* Expand on tab contrib (#581)

* added contrib

* disabled edit for extensions; fixed new name for insights contrib

* fix merge issue

* move file

* formatting

* fix builds

* adding to contrib

* updated contrib

* format

* moving imports

* updated contribution to map to current design

* implemented actually using provider and edition filtering

*  Refactor and fix issues in close tab and add the placeholder for pin tab (#588)

* refactor and fix issues in close tab and add the placeholder for pin tab

* formatting

* remove the redundant code

* add clear all tabs in dashboard page init

* Initial work for adding a feature tab dialog (#594)

* initial work for add new dashboard tab

* formatting

* fix add panel action issue

* fix breaking change

* fix issues and tab and panels

* formatting

* minor fix

* address comments

* Add tab status to add extension tab dialog (#610)

* add tab status to add extension tab dialog

* add tab status to add extension tab dialog

* rename add feature tab action

* address comments

* Webview widget (#618)

* getting closer

* webview widget now works

* fix problem with rerendering webview

* formatting

* ensure that webview only shows up for extensions

* formatting

* comments

* fix more compile issues

* Change dashboard page init (#640)

* changed init of serverpage

* formatting

* Webview tab (#638)

* getting closer

* webview widget now works

* fix problem with rerendering webview

* formatting

* ensure that webview only shows up for extensions

* formatting

* comments

* fix more compile issues

* refacting stuff

* added inital webview tab

* piped through messaging and tested

* Implement pin/unpin feature and always on tabs (#629)

* implement pin/unpin feature

* fix issue where insight can't be loaded after reopen

* fix tab look and feel

* implement always show tabs

* make AddFeatureTabAction to track always show and pinned tabs

* formatting

* make dashboard tabs looks like the UX design

* load always show before pinned tab

* fix regression in panel for restore and connection dialog

* fix merge conflict

* don't worry about no widgets if its a webview (#656)

* expose the dashboard server info when a webview is rendering (#644)

* Fix few issues in dashboard command center (#655)

* fix reloading insight wigets and create new tab when there is no extension

* show possible tabIDs in the setting file

* formatting

* address comment

* fix import name

* fixes problem with size of webview widget being wrong (#654)

*  Refactor tab contribution to support content type (#685)

* refactor tab contribution to support content type

* formatting

* address comment

* fix rendering tab issue (#694)

* Add layout option to panel for supporting horizontal and vertical navigation bar  (#700)

* Add left navigation panel for inner tab in the dashboard

* add layout option in panel

* remove panel option in dashboard Page

src/sql/base/browser/ui/modal/webViewDialog.ts

@@ -80,7 +80,7 @@ export class WebViewDialog extends Modal {
 	}
 
 	public set headerTitle(value: string) {
-		this._headerTitle = value
+		this._headerTitle = value;
 	}
 
 	public get headerTitle(): string {

src/sql/base/browser/ui/panel/media/panel.css

@@ -5,7 +5,7 @@
 
 .tabbedPanel {
 	border-top-color: rgba(128, 128, 128, 0.35);
-	border-top-width: 1;
+	border-top-width: 1px;
 	border-top-style: solid;
 	box-sizing: border-box;
 }
@@ -19,15 +19,14 @@
 	margin: 0 auto;
 	padding: 0;
 	justify-content: flex-start;
-	flex-flow: row;
 	line-height: 35px;
 }
 
-.tabbedPanel .tabList > .tab {
+.tabbedPanel .tabList .tab {
 	cursor: pointer;
 }
 
-.tabbedPanel .tabList > .tab > .tabLabel {
+.tabbedPanel .tabList .tab .tabLabel {
 	text-transform: uppercase;
 	margin-left: 16px;
 	margin-right: 16px;
@@ -55,4 +54,30 @@
 
 .composite.title ~ tab.fullsize > :first-child {
 	height: calc(100% - 38px);
+}
+
+.tabbedPanel .title-actions .panel-actions .actions-container {
+	justify-content: flex-start;
+}
+
+.tabbedPanel.vertical {
+	display: flex;
+}
+
+.tabbedPanel.vertical > .title {
+	flex: 0 0 auto;
+	flex-direction: column;
+	height: 100%;
+}
+
+.tabbedPanel.vertical > .tab-content {
+	flex: 1;
+}
+
+.tabbedPanel.vertical > .title > .tabList {
+	flex-flow: column;
+}
+
+.tabbedPanel.horizontal > .title > .tabList {
+	flex-flow: row;
 }

src/sql/base/browser/ui/panel/panel.component.ts

@@ -3,11 +3,14 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Component, ContentChildren, QueryList, AfterContentInit, Inject, forwardRef, NgZone, OnInit, Input } from '@angular/core';
+import { Component, ContentChildren, QueryList, AfterContentInit, Inject, forwardRef, NgZone, OnInit, Input, EventEmitter, Output, ViewChild, ElementRef, OnChanges, OnDestroy, ViewChildren, AfterViewInit } from '@angular/core';
 
 import { TabComponent } from './tab.component';
+import { TabHeaderComponent } from './tabHeader.component';
 import './panelStyles';
 
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
+import { Action } from 'vs/base/common/actions';
 import * as types from 'vs/base/common/types';
 import { mixin } from 'vs/base/common/objects';
 
@@ -16,40 +19,65 @@ export interface IPanelOptions {
 	 * Whether or not to show the tabs if there is only one tab present
 	 */
 	showTabsWhenOne?: boolean;
+	layout?: NavigationBarLayout;
+}
+
+export enum NavigationBarLayout {
+	horizontal = 0,
+	vertical = 1
 }
 
 const defaultOptions: IPanelOptions = {
-	showTabsWhenOne: true
+	showTabsWhenOne: true,
+	layout: NavigationBarLayout.horizontal
 };
 
+const verticalLayout = 'vertical';
+const horizontalLayout = 'horizontal';
+
+let idPool = 0;
+
 @Component({
 	selector: 'panel',
 	template: `
-		<div class="tabbedPanel fullsize">
+		<div class="tabbedPanel fullsize" #tabbedPanel style="position: absolute">
 			<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
 				<div class="tabList">
-					<div *ngFor="let tab of _tabs" class="tab" (click)="selectTab(tab)">
-						<a class="tabLabel" [class.active]="tab.active">
-							{{tab.title}}
-						</a>
+					<div *ngFor="let tab of _tabs">
+						<tab-header [tab]="tab" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
 					</div>
 				</div>
 				<div class="title-actions">
+					<div #panelActionbar class="panel-actions" style="flex: 0 0 auto; align-self: end; margin-top: auto; margin-bottom: auto;" >
+					</div>
 				</div>
 			</div>
-			<ng-content class="fullsize"></ng-content>
+			<div class="tab-content fullsize">
+				<ng-content class="fullsize"></ng-content>
+			</div>
 		</div>
 	`
 })
-export class PanelComponent implements AfterContentInit, OnInit {
+export class PanelComponent implements AfterContentInit, OnInit, OnChanges, OnDestroy, AfterViewInit {
 	@Input() public options: IPanelOptions;
+	@Input() public actions: Array<Action>;
 	@ContentChildren(TabComponent) private _tabs: QueryList<TabComponent>;
-	private _activeTab: TabComponent;
+	@ViewChildren(TabHeaderComponent) private _headerTabs: QueryList<TabHeaderComponent>;
 
+	@Output() public onTabChange = new EventEmitter<TabComponent>();
+	@Output() public onTabClose = new EventEmitter<TabComponent>();
+
+	private _activeTab: TabComponent;
+	private _actionbar: ActionBar;
+	private _mru: TabComponent[];
+
+	@ViewChild('panelActionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
+	@ViewChild('tabbedPanel', { read: ElementRef }) private _tabbedPanelRef: ElementRef;
 	constructor( @Inject(forwardRef(() => NgZone)) private _zone: NgZone) { }
 
 	ngOnInit(): void {
 		this.options = mixin(this.options || {}, defaultOptions, false);
+		this._mru = [];
 	}
 
 	ngAfterContentInit(): void {
@@ -59,11 +87,38 @@ export class PanelComponent implements AfterContentInit, OnInit {
 		}
 	}
 
+	ngAfterViewInit(): void {
+		if (this.options.layout === NavigationBarLayout.horizontal) {
+			(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(horizontalLayout);
+		} else {
+			(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(verticalLayout);
+		}
+	}
+
+	ngOnChanges(): void {
+		if (this._actionbarRef && !this._actionbar) {
+			this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
+		}
+		if (this.actions && this._actionbar) {
+			this._actionbar.clear();
+			this._actionbar.push(this.actions, { icon: true, label: false });
+		}
+	}
+
+	ngOnDestroy() {
+		if (this._actionbar) {
+			this._actionbar.dispose();
+		}
+		if (this.actions && this.actions.length > 0) {
+			this.actions.forEach((action) => action.dispose());
+		}
+	}
+
 	/**
 	 * Select a tab based on index (unrecommended)
 	 * @param index index of tab in the html
 	 */
-	selectTab(index: number)
+	selectTab(index: number);
 	/**
 	 * Select a tab based on the identifier that was passed into the tab
 	 * @param identifier specified identifer of the tab
@@ -85,14 +140,67 @@ export class PanelComponent implements AfterContentInit, OnInit {
 				tab = this._tabs.find(i => i.identifier === input);
 			}
 
+			// since we need to compare identifiers in this next step we are going to go through and make sure all tabs have one
+			this._tabs.forEach(i => {
+				if (!i.identifier) {
+					i.identifier = 'tabIndex_' + idPool++;
+				}
+			});
+
+			if (this._activeTab && tab === this._activeTab) {
+				this.onTabChange.emit(tab);
+				return;
+			}
+
 			this._zone.run(() => {
 				if (this._activeTab) {
 					this._activeTab.active = false;
 				}
 
 				this._activeTab = tab;
+				this.setMostRecentlyUsed(tab);
 				this._activeTab.active = true;
+
+				// Make the tab header focus on the new selected tab
+				let activeTabHeader = this._headerTabs.find(i => i.tab === this._activeTab);
+				if (activeTabHeader) {
+					activeTabHeader.focusOnTabHeader();
+				}
+
+				this.onTabChange.emit(tab);
 			});
 		}
 	}
+
+	private findAndRemoveTabFromMRU(tab: TabComponent): void {
+		let mruIndex = this._mru.findIndex(i => i === tab);
+
+		if (mruIndex !== -1) {
+			// Remove old index
+			this._mru.splice(mruIndex, 1);
+		}
+	}
+
+	private setMostRecentlyUsed(tab: TabComponent): void {
+		this.findAndRemoveTabFromMRU(tab);
+
+		// Set tab to front
+		this._mru.unshift(tab);
+	}
+
+	/**
+	 * Close a tab
+	 * @param tab tab to close
+	 */
+	closeTab(tab: TabComponent) {
+		this.onTabClose.emit(tab);
+
+		// remove the closed tab from mru
+		this.findAndRemoveTabFromMRU(tab);
+
+		// Open the most recent tab
+		if (this._mru.length > 0) {
+			this.selectTab(this._mru[0]);
+		}
+	}
 }

src/sql/base/browser/ui/panel/panel.module.ts

@@ -6,11 +6,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { TabComponent } from './tab.component';
+import { TabHeaderComponent } from './tabHeader.component';
 import { PanelComponent } from './panel.component';
 
 @NgModule({
 	imports: [CommonModule],
 	exports: [TabComponent, PanelComponent],
-	declarations: [TabComponent, PanelComponent]
+	declarations: [TabComponent, TabHeaderComponent, PanelComponent]
 })
 export class PanelModule { }

src/sql/base/browser/ui/panel/panel.ts

@@ -87,21 +87,23 @@ export class TabbedPanel extends Disposable implements IThemable {
 	}
 
 	private _createTab(tab: IInternalPanelTab): void {
+		let tabHeaderElement = $('.tab-header');
+		tabHeaderElement.attr('tabindex', '0');
 		let tabElement = $('.tab');
-		tabElement.attr('tabindex', '0');
+		tabHeaderElement.append(tabElement);
 		let tabLabel = $('a.tabLabel');
 		tabLabel.safeInnerHtml(tab.title);
 		tabElement.append(tabLabel);
-		tabElement.on(EventType.CLICK, e => this.showTab(tab.identifier));
-		tabElement.on(EventType.KEY_DOWN, (e: KeyboardEvent) => {
+		tabHeaderElement.on(EventType.CLICK, e => this.showTab(tab.identifier));
+		tabHeaderElement.on(EventType.KEY_DOWN, (e: KeyboardEvent) => {
 			let event = new StandardKeyboardEvent(e);
 			if (event.equals(KeyCode.Enter)) {
 				this.showTab(tab.identifier);
 				e.stopImmediatePropagation();
 			}
 		});
-		this.$tabList.append(tabElement);
-		tab.header = tabElement;
+		this.$tabList.append(tabHeaderElement);
+		tab.header = tabHeaderElement;
 		tab.label = tabLabel;
 	}
 
@@ -112,12 +114,14 @@ export class TabbedPanel extends Disposable implements IThemable {
 
 		if (this._shownTab) {
 			this._tabMap.get(this._shownTab).label.removeClass('active');
+			this._tabMap.get(this._shownTab).header.removeClass('active');
 		}
 
 		this._shownTab = id;
 		this.$body.clearChildren();
 		let tab = this._tabMap.get(this._shownTab);
 		tab.label.addClass('active');
+		tab.header.addClass('active');
 		tab.view.render(this.$body.getHTMLElement());
 		this._onTabChange.fire(id);
 		if (this._currentDimensions) {

src/sql/base/browser/ui/panel/panelStyles.ts

@@ -15,11 +15,15 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
 	if (titleActive || titleActiveBorder) {
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList > .tab:hover .tabLabel,
-			.tabbedPanel > .title > .tabList > .tab .tabLabel.active {
+			.tabbedPanel > .title > .tabList .tab:hover .tabLabel,
+			.tabbedPanel > .title > .tabList .tab .tabLabel.active {
 				color: ${titleActive};
 				border-bottom-color: ${titleActiveBorder};
 			}
+
+			.tabbedPanel > .title > .tabList .tab-header.active {
+				outline: none;
+			}
 		`);
 	}
 
@@ -27,7 +31,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const titleInactive = theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND);
 	if (titleInactive) {
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList > .tab .tabLabel {
+			.tabbedPanel > .title > .tabList .tab .tabLabel {
 				color: ${titleInactive};
 			}
 		`);
@@ -37,7 +41,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const focusBorderColor = theme.getColor(focusBorder);
 	if (focusBorderColor) {
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList > .tab .tabLabel:focus {
+			.tabbedPanel > .title > .tabList .tab .tabLabel:focus {
 				color: ${titleActive};
 				border-bottom-color: ${focusBorderColor} !important;
 				border-bottom: 1px solid;
@@ -49,20 +53,17 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	// Styling with Outline color (e.g. high contrast theme)
 	const outline = theme.getColor(activeContrastBorder);
 	if (outline) {
-		const outline = theme.getColor(activeContrastBorder);
-
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList > .tab .tabLabel.active,
-			.tabbedPanel > .title > .tabList > .tab .tabLabel:hover {
+			.tabbedPanel > .title > .tabList .tab-header.active,
+			.tabbedPanel > .title > .tabList .tab-header:hover {
 				outline-color: ${outline};
 				outline-width: 1px;
 				outline-style: solid;
-				border-bottom: none;
 				padding-bottom: 0;
-				outline-offset: 3px;
+				outline-offset: -5px;
 			}
 
-			.tabbedPanel > .title > .tabList > .tab .tabLabel:hover:not(.active) {
+			.tabbedPanel > .title > .tabList .tab-header:hover:not(.active) {
 				outline-style: dashed;
 			}
 		`);

src/sql/base/browser/ui/panel/tab.component.ts

@@ -2,7 +2,9 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import { Component, Input, ContentChild } from '@angular/core';
+import { Component, Input, ContentChild, OnDestroy } from '@angular/core';
+
+import { Action } from 'vs/base/common/actions';
 
 export abstract class TabChild {
 	public abstract layout(): void;
@@ -16,9 +18,11 @@ export abstract class TabChild {
 		</div>
 	`
 })
-export class TabComponent {
+export class TabComponent implements OnDestroy {
 	@ContentChild(TabChild) private _child: TabChild;
 	@Input() public title: string;
+	@Input() public canClose: boolean;
+	@Input() public actions: Array<Action>;
 	public _active = false;
 	@Input() public identifier: string;
 
@@ -32,4 +36,11 @@ export class TabComponent {
 	public get active(): boolean {
 		return this._active;
 	}
+
+	ngOnDestroy() {
+		if (this.actions && this.actions.length > 0) {
+			this.actions.forEach((action) => action.dispose());
+		}
+	}
+
 }

src/sql/base/browser/ui/panel/tabActions.ts

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { Action } from 'vs/base/common/actions';
+import * as nls from 'vs/nls';
+import { TPromise } from 'vs/base/common/winjs.base';
+
+export class CloseTabAction extends Action {
+	private static readonly ID = 'closeTab';
+	private static readonly LABEL = nls.localize('closeTab', "Close");
+	private static readonly ICON = 'close';
+
+	constructor(
+		private closeFn: () => void,
+		private context: any // this
+	) {
+		super(CloseTabAction.ID, CloseTabAction.LABEL, CloseTabAction.ICON);
+	}
+
+	run(): TPromise<boolean> {
+		try {
+			this.closeFn.apply(this.context);
+			return TPromise.as(true);
+		} catch (e) {
+			return TPromise.as(false);
+		}
+	}
+}

src/sql/base/browser/ui/panel/tabHeader.component.ts

@@ -0,0 +1,85 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!sql/media/icons/common-icons';
+import 'vs/css!./tabHeader';
+
+import { Component, AfterContentInit, OnDestroy, Input, Output, ElementRef, ViewChild, EventEmitter } from '@angular/core';
+
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
+import * as DOM from 'vs/base/browser/dom';
+import { Disposable } from 'vs/base/common/lifecycle';
+
+import { TabComponent } from './tab.component';
+import { CloseTabAction } from './tabActions';
+
+@Component({
+	selector: 'tab-header',
+	template: `
+		<div #actionHeader class="tab-header" style="display: flex; flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
+			<span class="tab" (click)="selectTab(tab)">
+				<a class="tabLabel" [class.active]="tab.active">
+					{{tab.title}}
+				</a>
+			</span>
+			<span #actionbar style="flex: 0 0 auto; align-self: end; margin-top: auto; margin-bottom: auto;" ></span>
+		</div>
+	`
+})
+export class TabHeaderComponent extends Disposable implements AfterContentInit, OnDestroy {
+	@Input() public tab: TabComponent;
+	@Output() public onSelectTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
+	@Output() public onCloseTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
+
+	private _actionbar: ActionBar;
+
+	@ViewChild('actionHeader', { read: ElementRef }) private _actionHeaderRef: ElementRef;
+	@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
+	constructor() {
+		super();
+	}
+
+	ngAfterContentInit(): void {
+		this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
+		if (this.tab.actions) {
+			this._actionbar.push(this.tab.actions, { icon: true, label: false });
+		}
+		if (this.tab.canClose) {
+			let closeAction = this._register(new CloseTabAction(this.closeTab, this));
+			this._actionbar.push(closeAction, { icon: true, label: false });
+		}
+	}
+
+	ngOnDestroy() {
+		if (this._actionbar) {
+			this._actionbar.dispose();
+		}
+		this.dispose();
+	}
+
+	selectTab(tab: TabComponent) {
+		this.onSelectTab.emit(tab);
+	}
+
+	closeTab() {
+		this.onCloseTab.emit(this.tab);
+	}
+
+	focusOnTabHeader() {
+		let header = <HTMLElement>this._actionHeaderRef.nativeElement;
+		header.focus();
+	}
+
+	onKey(e: Event) {
+		if (DOM.isAncestor(<HTMLElement>e.target, this._actionHeaderRef.nativeElement) && e instanceof KeyboardEvent) {
+			let event = new StandardKeyboardEvent(e);
+			if (event.equals(KeyCode.Enter)) {
+				this.onSelectTab.emit(this.tab);
+				e.stopPropagation();
+			}
+		}
+	}
+}

src/sql/base/browser/ui/panel/tabHeader.css

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+tab-header .action-item .action-label {
+	opacity: 0;
+	padding: 8px;
+	margin-top: 0.3em;
+}
+
+tab-header .action-item {
+	line-height: 1.4em;
+}
+
+tab-header .tab-header.active .action-label, 		/* always show it for active tab */
+tab-header .tab-header:hover .action-label,			/* always show it on hover */
+tab-header .tab-header:focus .action-label {		/* always show it on focus */
+	opacity: 1;
+}