modelview dashboard (#9784)

* modelview dashboard

* styles

* toolbar support

* spaces

* add tab icon support

src/sql/workbench/api/common/extHostModelView.ts

@@ -499,22 +499,23 @@ class TabbedPanelComponentBuilder extends ContainerBuilderImpl<azdata.TabbedPane
 		items.forEach(item => {
 			if (item && 'tabs' in item) {
 				item.tabs.forEach(tab => {
-					itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id, item.title));
+					itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id, item.title, tab.icon));
 				});
 			} else {
 				const tab = <azdata.Tab>item;
-				itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id));
+				itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id, undefined, tab.icon));
 			}
 		});
 		this._component.itemConfigs = itemConfigs;
 		return this;
 	}
 
-	toItemConfig(content: azdata.Component, title: string, id?: string, group?: string): InternalItemConfig {
+	toItemConfig(content: azdata.Component, title: string, id?: string, group?: string, icon?: string | URI | { light: string | URI; dark: string | URI }): InternalItemConfig {
 		return new InternalItemConfig(content as ComponentWrapper, {
 			title: title,
 			group: group,
-			id: id
+			id: id,
+			icon: icon
 		});
 	}
 }

src/sql/workbench/api/common/extHostModelViewDialog.ts

@@ -457,6 +457,57 @@ class WizardImpl implements azdata.window.Wizard {
 	}
 }
 
+class ModelViewDashboardImpl implements azdata.window.ModelViewDashboard {
+	constructor(
+		private _editor: ModelViewEditorImpl
+	) {
+	}
+	registerTabs(handler: (view: azdata.ModelView) => Thenable<(azdata.DashboardTab | azdata.DashboardTabGroup)[]>): void {
+		this._editor.registerContent(async (view) => {
+			const dashboardTabs = await handler(view);
+			const tabs: (azdata.TabGroup | azdata.Tab)[] = [];
+			dashboardTabs.forEach((item: azdata.DashboardTab | azdata.DashboardTabGroup) => {
+				if ('tabs' in item) {
+					tabs.push(<azdata.TabGroup>{
+						title: item.title,
+						tabs: item.tabs.map(tab => {
+							return this.createTab(tab, view);
+						})
+					});
+				} else {
+					tabs.push(this.createTab(item, view));
+				}
+			});
+
+			const tabbedPanel = view.modelBuilder.tabbedPanel().withTabs(tabs).withLayout({
+				orientation: 'vertical',
+				showIcon: true
+			}).component();
+			return view.initializeModel(tabbedPanel);
+		});
+	}
+
+	open(): Thenable<void> {
+		return this._editor.openEditor();
+	}
+
+	createTab(tab: azdata.DashboardTab, view: azdata.ModelView): azdata.Tab {
+		if (tab.toolbar) {
+			const flexContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
+			flexContainer.addItem(tab.toolbar, { flex: '0 0 auto' });
+			flexContainer.addItem(tab.content, { flex: '1 1 auto' });
+			return {
+				title: tab.title,
+				id: tab.id,
+				content: flexContainer,
+				icon: tab.icon
+			};
+		} else {
+			return tab;
+		}
+	}
+}
+
 export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 	private static _currentHandle = 0;
 
@@ -562,6 +613,11 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 		return editor;
 	}
 
+	public createModelViewDashboard(title: string, extension: IExtensionDescription): azdata.window.ModelViewDashboard {
+		const editor = this.createModelViewEditor(title, extension, { supportsSave: false }) as ModelViewEditorImpl;
+		return new ModelViewDashboardImpl(editor);
+	}
+
 	public updateDialogContent(dialog: azdata.window.Dialog): void {
 		let handle = this.getHandle(dialog);
 		let tabs = dialog.content;

src/sql/workbench/api/common/sqlExtHost.api.impl.ts

@@ -418,6 +418,9 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 				createWizard(title: string): azdata.window.Wizard {
 					return extHostModelViewDialog.createWizard(title);
 				},
+				createModelViewDashboard(title: string): azdata.window.ModelViewDashboard {
+					return extHostModelViewDialog.createModelViewDashboard(title, extension);
+				},
 				MessageLevel: sqlExtHostTypes.MessageLevel
 			};
 

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -839,4 +839,5 @@ export enum TabOrientation {
 
 export interface TabbedPanelLayout {
 	orientation: TabOrientation;
+	showIcon: boolean;
 }