modelview dashboard (#9784)

* modelview dashboard

* styles

* toolbar support

* spaces

* add tab icon support

src/sql/workbench/browser/modelComponents/componentBase.ts

@@ -332,6 +332,7 @@ export abstract class ContainerBase<T> extends ComponentBase {
 			}
 		}));
 		this._changeRef.detectChanges();
+		this.onItemsUpdated();
 		return;
 	}
 
@@ -343,6 +344,7 @@ export abstract class ContainerBase<T> extends ComponentBase {
 		if (index >= 0) {
 			this.items.splice(index, 1);
 			this._changeRef.detectChanges();
+			this.onItemsUpdated();
 			return true;
 		}
 		return false;
@@ -373,4 +375,7 @@ export abstract class ContainerBase<T> extends ComponentBase {
 	}
 
 	abstract setLayout(layout: any): void;
+
+	protected onItemsUpdated(): void {
+	}
 }

src/sql/workbench/browser/modelComponents/media/tabbedPanel.css

@@ -14,19 +14,20 @@
 	border-width: 0px;
 }
 
-.vs-dark .tabbedpanel-component .tabbedPanel .tabContainer, .hc-black .tabbedpanel-component .tabbedPanel .tabContainer {
-	border-color: rgba(128, 128, 128, 0.5);;
+.vs-dark .tabbedpanel-component .tabbedPanel .tabContainer,
+.hc-black .tabbedpanel-component .tabbedPanel .tabContainer {
+	border-color: rgba(128, 128, 128, 0.5);
 }
 
-.tabbedpanel-component .tabbedPanel.vertical .tabContainer {
+.tabbedpanel-component .tabbedPanel.vertical > .title .tabContainer {
 	border-right-width: 1px;
 }
 
-.tabbedpanel-component .tabbedPanel.horizontal .tabContainer {
+.tabbedpanel-component .tabbedPanel.horizontal > .title .tabContainer {
 	border-bottom-width: 1px;
 }
 
-.tabbedpanel-component .tabbedPanel .tab>.tabLabel.active {
+.tabbedpanel-component .tabbedPanel .tab > .tabLabel.active {
 	border-bottom: 0px solid;
 }
 
@@ -45,9 +46,10 @@
 }
 
 .tabbedpanel-component .tabList .tab-header.active {
-	background-color: rgb(237, 235, 233);
+	background-color: #E1F0FE;
 }
 
-.vs-dark .tabbedpanel-component .tabList .tab-header.active, .hc-black .tabbedpanel-component .tabList .tab-header.active {
+.vs-dark .tabbedpanel-component .tabList .tab-header.active,
+.hc-black .tabbedpanel-component .tabList .tab-header.active {
 	background-color: rgba(128, 128, 128, 0.5);
 }

src/sql/workbench/browser/modelComponents/tabbedPanel.component.html

@@ -7,10 +7,9 @@
 <div class="tabbedpanel-component">
 	<panel (onTabChange)="handleTabChange($event)">
 		<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
-			[identifier]="tab.id" [type]="tab.type">
+			[identifier]="tab.id" [type]="tab.type" [iconClass]="tab.iconClass">
 			<ng-template>
 				<ng-container *ngIf="tab.type === 'tab'">
-					{{tab.title}}
 					<model-component-wrapper [descriptor]="tab.content" [modelStore]="modelStore">
 					</model-component-wrapper>
 				</ng-container>

src/sql/workbench/browser/modelComponents/tabbedPanel.component.ts

@@ -10,11 +10,13 @@ import { TabOrientation, TabbedPanelLayout } from 'sql/workbench/api/common/sqlE
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
 import 'vs/css!./media/tabbedPanel';
+import { IUserFriendlyIcon, createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
 
 export interface TabConfig {
 	title: string;
 	id?: string;
 	group: string;
+	icon?: IUserFriendlyIcon;
 }
 
 interface Tab {
@@ -22,6 +24,7 @@ interface Tab {
 	content?: IComponentDescriptor;
 	id?: string;
 	type: TabType;
+	iconClass?: string;
 }
 
 @Component({
@@ -56,7 +59,7 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 		this._panel.options = {
 			showTabsWhenOne: true,
 			layout: layout.orientation === TabOrientation.Horizontal ? NavigationBarLayout.horizontal : NavigationBarLayout.vertical,
-			showIcon: false
+			showIcon: layout.showIcon
 		};
 	}
 
@@ -86,6 +89,7 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 					title: item.config.title,
 					id: item.config.id,
 					content: item.descriptor,
+					iconClass: item.config.icon ? createIconCssClass(item.config.icon) : undefined,
 					type: 'tab'
 				});
 			}
@@ -93,4 +97,11 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 		}
 		return this._tabs;
 	}
+
+	onItemsUpdated(): void {
+		const firstTabIndex = this.tabs.findIndex(tab => tab.type === 'tab');
+		if (firstTabIndex >= 0) {
+			this._panel.selectTab(firstTabIndex);
+		}
+	}
 }