Feat/model backed ui (#1145)

This is an initial PR for a new model-driven UI where extensions can provide definitions of the components & how they're laid out using Containers.
#1140, #1141, #1142, #1143 and #1144 are all tracking additional work needed to improve the initial implementation and fix some issues with the implementation.

Features:
- Supports defining a FlexContainer that maps to a flexbox-based layout.
- Supports creating a card component, which is a key-value pair based control that will lay out simple information to a user. Eventually this will have an optional set of actions associated with it.
- Has a sample project which shows how to use the API and was used for verification

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

@@ -0,0 +1,304 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { IMainContext } from 'vs/workbench/api/node/extHost.protocol';
+import { Emitter } from 'vs/base/common/event';
+import { deepClone } from 'vs/base/common/objects';
+import * as nls from 'vs/nls';
+
+import * as vscode from 'vscode';
+import * as sqlops from 'sqlops';
+
+import { SqlMainContext, ExtHostModelViewShape, MainThreadModelViewShape } from 'sql/workbench/api/node/sqlExtHost.protocol';
+import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
+
+class ModelBuilderImpl implements sqlops.ModelBuilder {
+	private nextComponentId: number;
+
+	constructor(private readonly _proxy: MainThreadModelViewShape, private readonly _handle: number) {
+		this.nextComponentId = 0;
+	}
+
+	navContainer(): sqlops.ContainerBuilder<sqlops.NavContainer, any, any> {
+		let id = this.getNextComponentId();
+		return new ContainerBuilderImpl(this._proxy, this._handle, ModelComponentTypes.NavContainer, id);
+	}
+
+	flexContainer(): sqlops.FlexBuilder {
+		let id = this.getNextComponentId();
+		return new ContainerBuilderImpl<sqlops.FlexContainer, sqlops.FlexLayout, sqlops.FlexItemLayout>(this._proxy, this._handle, ModelComponentTypes.FlexContainer, id);
+	}
+
+	card(): sqlops.ComponentBuilder<sqlops.CardComponent> {
+		let id = this.getNextComponentId();
+		return new ComponentBuilderImpl(new CardWrapper(this._proxy, this._handle, id));
+	}
+
+	dashboardWidget(widgetId: string): sqlops.ComponentBuilder<sqlops.WidgetComponent> {
+		let id = this.getNextComponentId();
+		return new ComponentBuilderImpl<sqlops.WidgetComponent>(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWidget, id));
+	}
+
+	dashboardWebview(webviewId: string): sqlops.ComponentBuilder<sqlops.WebviewComponent> {
+		let id = this.getNextComponentId();
+		return new ComponentBuilderImpl(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWebview, id));
+	}
+
+	private getNextComponentId(): string {
+		return `component${this._handle}_${this.nextComponentId++}`;
+	}
+}
+
+class ComponentBuilderImpl<T extends sqlops.Component> implements sqlops.ComponentBuilder<T> {
+
+	constructor(protected _component: ComponentWrapper) {
+	}
+
+	component(): T {
+		return <T><any>this._component;
+	}
+
+	withProperties<U>(properties: U): sqlops.ComponentBuilder<T> {
+		this._component.properties = properties;
+		return this;
+	}
+}
+
+class GenericComponentBuilder<T extends sqlops.Component> extends ComponentBuilderImpl<T> {
+	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
+		super(new ComponentWrapper(proxy, handle, type, id));
+	}
+
+}
+
+
+class ContainerBuilderImpl<T extends sqlops.Component, TLayout, TItemLayout> extends ComponentBuilderImpl<T> implements sqlops.ContainerBuilder<T, TLayout, TItemLayout> {
+	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
+		super(new ComponentWrapper(proxy, handle, type, id));
+	}
+
+	withLayout(layout: TLayout): sqlops.ContainerBuilder<T, TLayout, TItemLayout> {
+		this._component.layout = layout;
+		return this;
+	}
+
+	withItems(components: sqlops.Component[], itemLayout?: TItemLayout): sqlops.ContainerBuilder<T, TLayout, TItemLayout> {
+		this._component.itemConfigs = components.map(item => {
+			let componentWrapper = item as ComponentWrapper;
+			return new InternalItemConfig(componentWrapper, itemLayout);
+		});
+		return this;
+	}
+}
+
+
+class InternalItemConfig {
+	constructor(private _component: ComponentWrapper, public config: any) {}
+
+	public toIItemConfig(): IItemConfig {
+		return {
+			config: this.config,
+			componentShape: this._component.toComponentShape()
+		};
+	}
+
+	public get component(): sqlops.Component {
+		return this._component;
+	}
+}
+
+
+class ComponentWrapper implements sqlops.Component {
+	public properties: { [key: string]: any } = {};
+	public layout: any;
+	public itemConfigs: InternalItemConfig[];
+
+	private _onErrorEmitter = new Emitter<Error>();
+	public readonly onError: vscode.Event<Error> = this._onErrorEmitter.event;
+
+	constructor(protected readonly _proxy: MainThreadModelViewShape,
+		protected readonly _handle: number,
+		protected _type: ModelComponentTypes,
+		protected _id: string
+	) {
+		this.properties = {};
+		this.itemConfigs = [];
+	}
+
+	public get id(): string {
+		return this._id;
+	}
+
+	public get type(): ModelComponentTypes {
+		return this._type;
+	}
+
+	public get items(): sqlops.Component[] {
+		return this.itemConfigs.map(itemConfig => itemConfig.component);
+	}
+
+	public toComponentShape(): IComponentShape {
+		return <IComponentShape> {
+			id: this.id,
+			type: this.type,
+			layout: this.layout,
+			properties: this.properties,
+			itemConfigs: this.itemConfigs ? this.itemConfigs.map<IItemConfig>(item => item.toIItemConfig()) : undefined
+		};
+	}
+
+
+	public clearItems(): Thenable<void> {
+		this.itemConfigs = [];
+		return this._proxy.$clearContainer(this._handle, this.id);
+	}
+
+	public addItems(items: Array<sqlops.Component>, itemLayout ?: any): void {
+		for(let item of items) {
+			this.addItem(item, itemLayout);
+		}
+	}
+
+	public addItem(item: sqlops.Component, itemLayout ?: any): void {
+		let itemImpl = item as ComponentWrapper;
+		if (!itemImpl) {
+			throw new Error(nls.localize('unknownComponentType', 'Unkown component type. Must use ModelBuilder to create objects'));
+		}
+		let config = new InternalItemConfig(itemImpl, itemLayout);
+		this.itemConfigs.push(config);
+		this._proxy.$addToContainer(this._handle, this.id, config.toIItemConfig()).then(undefined, this.handleError);
+	}
+
+	public setLayout(layout: any): Thenable<void> {
+		return this._proxy.$setLayout(this._handle, this.id, layout);
+	}
+
+	public updateProperties(): Thenable<boolean> {
+		return this.notifyPropertyChanged();
+	}
+
+	protected notifyPropertyChanged(): Thenable<boolean> {
+		return this._proxy.$setProperties(this._handle, this._id, this.properties).then(() => true);
+	}
+
+	protected setProperty(key: string, value: any): Thenable<boolean> {
+		if (!this.properties[key] || this.properties[key] !== value) {
+			// Only notify the front end if a value has been updated
+			this.properties[key] = value;
+			return this.notifyPropertyChanged();
+		}
+		return Promise.resolve(true);
+	}
+
+	private handleError(err: Error): void {
+		this._onErrorEmitter.fire(err);
+	}
+}
+
+class ContainerWrapper<T, U> extends ComponentWrapper implements sqlops.Container<T, U> {
+
+	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
+		super(proxy, handle, type, id);
+	}
+
+}
+
+class CardWrapper extends ComponentWrapper implements sqlops.CardComponent {
+
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
+		super(proxy, handle, ModelComponentTypes.Card, id);
+		this.properties = {};
+	}
+
+	public get label(): string {
+		return this.properties['label'];
+	}
+	public set label(l: string) {
+		this.setProperty('label', l);
+	}
+	public get value(): string {
+		return this.properties['value'];
+	}
+	public set value(v: string) {
+		this.setProperty('value', v);
+	}
+	public get actions(): sqlops.ActionDescriptor[] {
+		return this.properties['actions'];
+	}
+	public set actions(a: sqlops.ActionDescriptor[]) {
+		this.setProperty('actions', a);
+	}
+}
+
+class ModelViewImpl implements sqlops.ModelView {
+
+	public onClosedEmitter = new Emitter<any>();
+
+	private _modelBuilder: sqlops.ModelBuilder;
+
+	constructor(
+		private readonly _proxy: MainThreadModelViewShape,
+		private readonly _handle: number,
+		private readonly _connection: sqlops.connection.Connection,
+		private readonly _serverInfo: sqlops.ServerInfo
+	) {
+		this._modelBuilder = new ModelBuilderImpl(this._proxy, this._handle);
+	}
+
+	public get onClosed(): vscode.Event<any> {
+		return this.onClosedEmitter.event;
+	}
+
+	public get connection(): sqlops.connection.Connection {
+		return deepClone(this._connection);
+	}
+
+	public get serverInfo(): sqlops.ServerInfo {
+		return deepClone(this._serverInfo);
+	}
+
+	public get modelBuilder(): sqlops.ModelBuilder {
+		return this._modelBuilder;
+	}
+
+	public initializeModel<T extends sqlops.Component>(component: T): Thenable<void> {
+		let componentImpl = <any>component as ComponentWrapper;
+		if (!componentImpl) {
+			return Promise.reject(nls.localize('unknownConfig', 'Unkown component configuration, must use ModelBuilder to create a configuration object'));
+		}
+		return this._proxy.$initializeModel(this._handle, componentImpl.toComponentShape());
+	}
+}
+
+export class ExtHostModelView implements ExtHostModelViewShape {
+	private readonly _proxy: MainThreadModelViewShape;
+
+	private readonly _modelViews = new Map<number, ModelViewImpl>();
+	private readonly _handlers = new Map<string, (view: sqlops.ModelView) => void>();
+
+	constructor(
+		mainContext: IMainContext
+	) {
+		this._proxy = mainContext.getProxy(SqlMainContext.MainThreadModelView);
+	}
+
+	$onClosed(handle: number): void {
+		const view = this._modelViews.get(handle);
+		view.onClosedEmitter.fire();
+		this._modelViews.delete(handle);
+	}
+
+	$registerProvider(widgetId: string, handler: (webview: sqlops.ModelView) => void): void {
+		this._handlers.set(widgetId, handler);
+		this._proxy.$registerProvider(widgetId);
+	}
+
+	$registerWidget(handle: number, id: string, connection: sqlops.connection.Connection, serverInfo: sqlops.ServerInfo): void {
+		let view = new ModelViewImpl(this._proxy, handle, connection, serverInfo);
+		this._modelViews.set(handle, view);
+		this._handlers.get(id)(view);
+	}
+}

src/sql/workbench/api/node/mainThreadDashboardWebview.ts

@@ -7,7 +7,7 @@
 import { MainThreadDashboardWebviewShape, SqlMainContext, ExtHostDashboardWebviewsShape, SqlExtHostContext } from 'sql/workbench/api/node/sqlExtHost.protocol';
 import { extHostNamedCustomer } from 'vs/workbench/api/electron-browser/extHostCustomers';
 import { IExtHostContext } from 'vs/workbench/api/node/extHost.protocol';
-import { IDashboardWebviewService, IDashboardWebview } from 'sql/services/dashboardWebview/common/dashboardWebviewService';
+import { IDashboardViewService, IDashboardWebview } from 'sql/services/dashboard/common/dashboardViewService';
 
 @extHostNamedCustomer(SqlMainContext.MainThreadDashboardWebview)
 export class MainThreadDashboardWebview implements MainThreadDashboardWebviewShape {
@@ -20,10 +20,10 @@ export class MainThreadDashboardWebview implements MainThreadDashboardWebviewSha
 
 	constructor(
 		context: IExtHostContext,
-		@IDashboardWebviewService webviewService: IDashboardWebviewService
+		@IDashboardViewService viewService: IDashboardViewService
 	) {
 		this._proxy = context.getProxy(SqlExtHostContext.ExtHostDashboardWebviews);
-		webviewService.onRegisteredWebview(e => {
+		viewService.onRegisteredWebview(e => {
 			if (this.knownWidgets.includes(e.id)) {
 				let handle = MainThreadDashboardWebview._handlePool++;
 				this._dialogs.set(handle, e);
@@ -36,7 +36,7 @@ export class MainThreadDashboardWebview implements MainThreadDashboardWebviewSha
 	}
 
 	public dispose(): void {
-		throw new Error("Method not implemented.");
+		throw new Error('Method not implemented.');
 	}
 
 	$sendMessage(handle: number, message: string) {

src/sql/workbench/api/node/mainThreadModelView.ts

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { MainThreadModelViewShape, SqlMainContext, ExtHostModelViewShape, SqlExtHostContext } from 'sql/workbench/api/node/sqlExtHost.protocol';
+import { extHostNamedCustomer } from 'vs/workbench/api/electron-browser/extHostCustomers';
+import { IExtHostContext } from 'vs/workbench/api/node/extHost.protocol';
+
+import * as sqlops from 'sqlops';
+
+import { IDashboardViewService } from 'sql/services/dashboard/common/dashboardViewService';
+import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
+import { IModelView } from 'sql/services/model/modelViewService';
+
+
+@extHostNamedCustomer(SqlMainContext.MainThreadModelView)
+export class MainThreadModelView implements MainThreadModelViewShape {
+
+	private static _handlePool = 0;
+	private readonly _proxy: ExtHostModelViewShape;
+	private readonly _dialogs = new Map<number, IModelView>();
+
+	private knownWidgets = new Array<string>();
+
+	constructor(
+		context: IExtHostContext,
+		@IDashboardViewService viewService: IDashboardViewService
+	) {
+		this._proxy = context.getProxy(SqlExtHostContext.ExtHostModelView);
+		viewService.onRegisteredModelView(view => {
+			if (this.knownWidgets.includes(view.id)) {
+				let handle = MainThreadModelView._handlePool++;
+				this._dialogs.set(handle, view);
+				this._proxy.$registerWidget(handle, view.id, view.connection, view.serverInfo);
+			}
+		});
+	}
+
+	public dispose(): void {
+		throw new Error('Method not implemented.');
+	}
+
+	$registerProvider(id: string) {
+		this.knownWidgets.push(id);
+	}
+
+	$initializeModel(handle: number, rootComponent: IComponentShape): Thenable<void> {
+		return this.execModelViewAction(handle, (modelView) => modelView.initializeModel(rootComponent));
+	}
+
+	$clearContainer(handle: number, componentId: string): Thenable<void> {
+		return this.execModelViewAction(handle, (modelView) => modelView.clearContainer(componentId));
+	}
+
+	$addToContainer(handle: number, containerId: string, item: IItemConfig): Thenable<void> {
+		return this.execModelViewAction(handle,
+			(modelView) => modelView.addToContainer(containerId, item));
+	}
+
+	$setLayout(handle: number, componentId: string, layout: any): Thenable<void> {
+		return this.execModelViewAction(handle, (modelView) => modelView.setLayout(componentId, layout));
+	}
+
+	$setProperties(handle: number, componentId: string, properties: { [key: string]: any; }): Thenable<void> {
+		return this.execModelViewAction(handle, (modelView) => modelView.setProperties(componentId, properties));
+	}
+
+	private execModelViewAction<T>(handle: number, action: (m: IModelView) => T): Thenable<T> {
+		let modelView: IModelView = this._dialogs.get(handle);
+		let result = action(modelView);
+		return Promise.resolve(result);
+	}
+}

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

@@ -27,6 +27,7 @@ import { ExtHostConfiguration } from 'vs/workbench/api/node/extHostConfiguration
 import { ExtHostModalDialogs } from 'sql/workbench/api/node/extHostModalDialog';
 import { ExtHostTasks } from 'sql/workbench/api/node/extHostTasks';
 import { ExtHostDashboardWebviews } from 'sql/workbench/api/node/extHostDashboardWebview';
+import { ExtHostModelView } from 'sql/workbench/api/node/extHostModelView';
 import { ExtHostConnectionManagement } from 'sql/workbench/api/node/extHostConnectionManagement';
 import { ExtHostDashboard } from 'sql/workbench/api/node/extHostDashboard';
 import { ExtHostObjectExplorer } from 'sql/workbench/api/node/extHostObjectExplorer';
@@ -61,8 +62,10 @@ export function createApiFactory(
 	const extHostModalDialogs = rpcProtocol.set(SqlExtHostContext.ExtHostModalDialogs, new ExtHostModalDialogs(rpcProtocol));
 	const extHostTasks = rpcProtocol.set(SqlExtHostContext.ExtHostTasks, new ExtHostTasks(rpcProtocol, logService));
 	const extHostWebviewWidgets = rpcProtocol.set(SqlExtHostContext.ExtHostDashboardWebviews, new ExtHostDashboardWebviews(rpcProtocol));
+	const extHostModelView = rpcProtocol.set(SqlExtHostContext.ExtHostModelView, new ExtHostModelView(rpcProtocol));
 	const extHostDashboard = rpcProtocol.set(SqlExtHostContext.ExtHostDashboard, new ExtHostDashboard(rpcProtocol));
 
+
 	return {
 		vsCodeFactory: vsCodeFactory,
 		sqlopsFactory: function (extension: IExtensionDescription): typeof sqlops {
@@ -297,6 +300,9 @@ export function createApiFactory(
 			const dashboard = {
 				registerWebviewProvider(widgetId: string, handler: (webview: sqlops.DashboardWebview) => void) {
 					extHostWebviewWidgets.$registerProvider(widgetId, handler);
+				},
+				registerModelViewProvider(widgetId: string, handler: (view: sqlops.ModelView) => void): void {
+					extHostModelView.$registerProvider(widgetId, handler);
 				}
 			};
 

src/sql/workbench/api/node/sqlExtHost.contribution.ts

@@ -19,6 +19,7 @@ import 'sql/workbench/api/node/mainThreadResourceProvider';
 import 'sql/workbench/api/electron-browser/mainThreadTasks';
 import 'sql/workbench/api/electron-browser/mainThreadDashboard';
 import 'sql/workbench/api/node/mainThreadDashboardWebview';
+import 'sql/workbench/api/node/mainThreadModelView';
 import './mainThreadAccountManagement';
 import { LifecyclePhase } from 'vs/platform/lifecycle/common/lifecycle';
 

src/sql/workbench/api/node/sqlExtHost.protocol.ts

@@ -16,6 +16,7 @@ import * as sqlops from 'sqlops';
 import * as vscode from 'vscode';
 
 import { ITaskHandlerDescription } from 'sql/platform/tasks/common/tasks';
+import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
 
 export abstract class ExtHostAccountManagementShape {
 	$autoOAuthCancelled(handle: number): Thenable<void> { throw ni(); }
@@ -444,6 +445,7 @@ export const SqlMainContext = {
 	MainThreadModalDialog: createMainId<MainThreadModalDialogShape>('MainThreadModalDialog'),
 	MainThreadTasks: createMainId<MainThreadTasksShape>('MainThreadTasks'),
 	MainThreadDashboardWebview: createMainId<MainThreadDashboardWebviewShape>('MainThreadDashboardWebview'),
+	MainThreadModelView: createMainId<MainThreadModelViewShape>('MainThreadModelView'),
 	MainThreadDashboard: createMainId<MainThreadDashboardShape>('MainThreadDashboard')
 };
 
@@ -458,6 +460,7 @@ export const SqlExtHostContext = {
 	ExtHostModalDialogs: createExtId<ExtHostModalDialogsShape>('ExtHostModalDialogs'),
 	ExtHostTasks: createExtId<ExtHostTasksShape>('ExtHostTasks'),
 	ExtHostDashboardWebviews: createExtId<ExtHostDashboardWebviewsShape>('ExtHostDashboardWebviews'),
+	ExtHostModelView: createExtId<ExtHostModelViewShape>('ExtHostModelView'),
 	ExtHostDashboard: createExtId<ExtHostDashboardShape>('ExtHostDashboard')
 };
 
@@ -507,6 +510,21 @@ export interface MainThreadDashboardWebviewShape extends IDisposable {
 	$setHtml(handle: number, value: string);
 }
 
+export interface ExtHostModelViewShape {
+	$registerProvider(widgetId: string, handler: (webview: sqlops.ModelView) => void): void;
+	$onClosed(handle: number): void;
+	$registerWidget(handle: number, id: string, connection: sqlops.connection.Connection, serverInfo: sqlops.ServerInfo): void;
+}
+
+export interface MainThreadModelViewShape extends IDisposable {
+	$registerProvider(id: string): void;
+	$initializeModel(handle: number, rootComponent: IComponentShape): Thenable<void>;
+	$clearContainer(handle: number, componentId: string): Thenable<void>;
+	$addToContainer(handle: number, containerId: string, item: IItemConfig): Thenable<void>;
+	$setLayout(handle: number, componentId: string, layout: any): Thenable<void>;
+	$setProperties(handle: number, componentId: string, properties: { [key: string]: any }): Thenable<void>;
+}
+
 export interface ExtHostObjectExplorerShape {
 }