Add support for model view editor (#1442)

* Add proposed API for model view editors

* Initial working model view editor

* Add extension demo

* Revert "Add extension demo"

This reverts commit 10d3b720ad347919dd5668a339da8e96e26b2b82.

* view model editor and add the support for register content

* clean up the code

* fix editor issues where you register more than one content

* formating

* remove unused imports

* addressed comments

* address comments2

* address comment3

src/sql/parts/modelComponents/modelEditor/modelViewEditor.contribution.ts

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+import { Registry } from 'vs/platform/registry/common/platform';
+import { EditorDescriptor, IEditorRegistry, Extensions as EditorExtensions } from 'vs/workbench/browser/editor';
+import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
+
+import { ModelViewInput } from 'sql/parts/modelComponents/modelEditor/modelViewInput';
+import { ModelViewEditor } from 'sql/parts/modelComponents/modelEditor/modelViewEditor';
+
+// Model View editor registration
+const viewModelEditorDescriptor = new EditorDescriptor(
+	ModelViewEditor,
+	ModelViewEditor.ID,
+	'ViewModel'
+);
+
+Registry.as<IEditorRegistry>(EditorExtensions.Editors)
+	.registerEditor(viewModelEditorDescriptor, [new SyncDescriptor(ModelViewInput)]);

src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts

@@ -0,0 +1,72 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { Builder, $ } from 'vs/base/browser/builder';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
+import { Dimension } from 'vs/workbench/services/part/common/partService';
+import { EditorOptions } from 'vs/workbench/common/editor';
+import * as DOM from 'vs/base/browser/dom';
+
+import { ModelViewInput } from 'sql/parts/modelComponents/modelEditor/modelViewInput';
+import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
+import { Dialog } from 'sql/platform/dialog/dialogTypes';
+import { DialogPane } from 'sql/platform/dialog/dialogPane';
+
+export class ModelViewEditor extends BaseEditor {
+
+	public static ID: string = 'workbench.editor.modelViewEditor';
+	private _modelViewMap = new Map<string, HTMLElement>();
+
+	constructor(
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IThemeService themeService: IThemeService,
+		@IBootstrapService private _bootstrapService: IBootstrapService
+	) {
+		super(ModelViewEditor.ID, telemetryService, themeService);
+	}
+
+	/**
+	 * Called to create the editor in the parent builder.
+	 */
+	public createEditor(parent: Builder): void {
+	}
+
+	/**
+	 * Sets focus on this editor. Specifically, it sets the focus on the hosted text editor.
+	 */
+	public focus(): void {
+	}
+
+	public setInput(input: ModelViewInput, options?: EditorOptions): TPromise<void, any> {
+		if (this.input && this.input.matches(input)) {
+			return TPromise.as(undefined);
+		}
+		const parentElement = this.getContainer().getHTMLElement();
+		$(parentElement).clearChildren();
+
+		if (!this._modelViewMap.get(input.modelViewId)) {
+			let modelViewContainer = DOM.$('div.model-view-container');
+			let dialog = new Dialog(input.title, input.modelViewId);
+			let dialogPane = new DialogPane(dialog, this._bootstrapService);
+			dialogPane.createBody(modelViewContainer);
+			this._modelViewMap.set(input.modelViewId, modelViewContainer);
+		}
+		let element = this._modelViewMap.get(input.modelViewId);
+		DOM.append(parentElement, element);
+
+		return super.setInput(input, options);
+	}
+
+	/**
+	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
+	 * To be called when the container of this editor changes size.
+	 */
+	public layout(dimension: Dimension): void {
+
+	}
+
+}

src/sql/parts/modelComponents/modelEditor/modelViewInput.ts

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { TPromise } from 'vs/base/common/winjs.base';
+import { IEditorModel } from 'vs/platform/editor/common/editor';
+import { EditorInput } from 'vs/workbench/common/editor';
+
+export class ModelViewInput extends EditorInput {
+
+	public static ID: string = 'workbench.editorinputs.ModelViewEditorInput';
+
+	constructor(private _title: string, private _modelViewId: string) {
+		super();
+	}
+
+	public get title(): string {
+		return this._title;
+	}
+
+	public get modelViewId(): string {
+		return this._modelViewId;
+	}
+
+	public getTypeId(): string {
+		return 'ModelViewEditorInput';
+	}
+
+	public resolve(refresh?: boolean): TPromise<IEditorModel> {
+		return undefined;
+	}
+
+	public getName(): string {
+		return this._title;
+	}
+}

src/sql/sqlops.proposed.d.ts

@@ -502,4 +502,23 @@ declare module 'sqlops' {
 		 */
 		export function runQuery(fileUri: string): void;
 	}
+
+	/**
+	 * Namespace for interacting with the workspace
+	 */
+	export namespace workspace {
+
+		/**
+		 * Create a new model view editor
+		 */
+		export function createModelViewEditor(title: string): ModelViewEditor;
+
+		export interface ModelViewEditor extends window.modelviewdialog.ModelViewPanel {
+
+			/**
+			 * Opens the editor
+			 */
+			openEditor(position?: vscode.ViewColumn): Thenable<void>;
+		}
+	}
 }

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

@@ -18,7 +18,7 @@ import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench
 class ModelViewPanelImpl implements sqlops.window.modelviewdialog.ModelViewPanel {
 	private _modelView: sqlops.ModelView;
 	private _handle: number;
-	private _modelViewId: string;
+	protected _modelViewId: string;
 
 	constructor(private _viewType: string,
 		protected _extHostModelView: ExtHostModelViewShape) {
@@ -26,7 +26,7 @@ class ModelViewPanelImpl implements sqlops.window.modelviewdialog.ModelViewPanel
 
 	public registerContent(handler: (view: sqlops.ModelView) => void): void {
 		if (!this._modelViewId) {
-			let viewId = this._viewType + this.handle;
+			let viewId = this._viewType + this._handle;
 			this.setModelViewId(viewId);
 			this._extHostModelView.$registerProvider(viewId, modelView => {
 				this._modelView = modelView;
@@ -52,7 +52,21 @@ class ModelViewPanelImpl implements sqlops.window.modelviewdialog.ModelViewPanel
 	}
 }
 
-class DialogImpl extends ModelViewPanelImpl implements sqlops.window.modelviewdialog.Dialog  {
+class ModelViewEditorImpl extends ModelViewPanelImpl implements sqlops.workspace.ModelViewEditor {
+	constructor(
+		extHostModelView: ExtHostModelViewShape,
+		private _proxy: MainThreadModelViewDialogShape,
+		private _title: string
+	) {
+		super('modelViewEditor', extHostModelView);
+	}
+
+	public openEditor(position?: vscode.ViewColumn): Thenable<void> {
+		return this._proxy.$openEditor(this._modelViewId, this._title, position);
+	}
+}
+
+class DialogImpl extends ModelViewPanelImpl implements sqlops.window.modelviewdialog.Dialog {
 	public title: string;
 	public content: string | sqlops.window.modelviewdialog.DialogTab[];
 	public okButton: sqlops.window.modelviewdialog.Button;
@@ -85,7 +99,7 @@ class TabImpl extends ModelViewPanelImpl implements sqlops.window.modelviewdialo
 	constructor(
 		private _extHostModelViewDialog: ExtHostModelViewDialog,
 		extHostModelView: ExtHostModelViewShape) {
-			super('modelViewDialogTab', extHostModelView);
+		super('modelViewDialogTab', extHostModelView);
 	}
 
 	public title: string;
@@ -151,6 +165,7 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 	private readonly _dialogHandles = new Map<sqlops.window.modelviewdialog.Dialog, number>();
 	private readonly _tabHandles = new Map<sqlops.window.modelviewdialog.DialogTab, number>();
 	private readonly _buttonHandles = new Map<sqlops.window.modelviewdialog.Button, number>();
+	private readonly _editorHandles = new Map<sqlops.workspace.ModelViewEditor, number>();
 
 	private readonly _validityEmitters = new Map<number, Emitter<boolean>>();
 	private readonly _onClickCallbacks = new Map<number, () => void>();
@@ -168,6 +183,15 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 		return handle;
 	}
 
+	private getEditorHandle(editor: sqlops.workspace.ModelViewEditor) {
+		let handle = this._editorHandles.get(editor);
+		if (handle === undefined) {
+			handle = ExtHostModelViewDialog.getNewHandle();
+			this._editorHandles.set(editor, handle);
+		}
+		return handle;
+	}
+
 	private getDialogHandle(dialog: sqlops.window.modelviewdialog.Dialog) {
 		let handle = this._dialogHandles.get(dialog);
 		if (handle === undefined) {
@@ -217,6 +241,12 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 		this._proxy.$close(handle);
 	}
 
+	public createModelViewEditor(title: string): sqlops.workspace.ModelViewEditor {
+		let editor = new ModelViewEditorImpl(this._extHostModelView, this._proxy, title);
+		editor.handle = this.getEditorHandle(editor);
+		return editor;
+	}
+
 	public updateDialogContent(dialog: sqlops.window.modelviewdialog.Dialog): void {
 		let handle = this.getDialogHandle(dialog);
 		let tabs = dialog.content;

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

@@ -7,13 +7,13 @@
 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 { Disposable } from 'vs/base/common/lifecycle';
 
 import * as sqlops from 'sqlops';
 
 import { IModelViewService } from 'sql/services/modelComponents/modelViewService';
 import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { IModelView } from 'sql/services/model/modelViewService';
-import { Disposable } from 'vs/base/common/lifecycle';
 
 
 @extHostNamedCustomer(SqlMainContext.MainThreadModelView)

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

@@ -4,13 +4,19 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import { MainThreadModelViewDialogShape, SqlMainContext, ExtHostModelViewDialogShape, SqlExtHostContext } from 'sql/workbench/api/node/sqlExtHost.protocol';
+import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
+import { IEditorOptions } from 'vs/platform/editor/common/editor';
 import { extHostNamedCustomer } from 'vs/workbench/api/electron-browser/extHostCustomers';
-import { Dialog, DialogTab, DialogButton } from 'sql/platform/dialog/dialogTypes';
 import { IExtHostContext } from 'vs/workbench/api/node/extHost.protocol';
-import { CustomDialogService } from 'sql/platform/dialog/customDialogService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+
+import { MainThreadModelViewDialogShape, SqlMainContext, ExtHostModelViewDialogShape, SqlExtHostContext } from 'sql/workbench/api/node/sqlExtHost.protocol';
+import { Dialog, DialogTab, DialogButton } from 'sql/platform/dialog/dialogTypes';
+import { CustomDialogService } from 'sql/platform/dialog/customDialogService';
 import { IModelViewDialogDetails, IModelViewTabDetails, IModelViewButtonDetails } from 'sql/workbench/api/common/sqlExtHostTypes';
+import { ModelViewInput } from 'sql/parts/modelComponents/modelEditor/modelViewInput';
+
+import * as vscode from 'vscode';
 
 @extHostNamedCustomer(SqlMainContext.MainThreadModelViewDialog)
 export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape {
@@ -23,6 +29,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
 	constructor(
 		context: IExtHostContext,
 		@IInstantiationService instatiationService: IInstantiationService,
+		@IWorkbenchEditorService private _editorService: IWorkbenchEditorService
 	) {
 		this._proxy = context.getProxy(SqlExtHostContext.ExtHostModelViewDialog);
 		this._dialogService = new CustomDialogService(instatiationService);
@@ -32,6 +39,22 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
 		throw new Error('Method not implemented.');
 	}
 
+	public $openEditor(modelViewId: string, title: string, position?: vscode.ViewColumn): Thenable<void> {
+		return new Promise<void>((resolve, reject) => {
+			let input = new ModelViewInput(title, modelViewId);
+			let editorOptions = {
+				preserveFocus: true,
+				pinned: true
+			};
+
+			this._editorService.openEditor(input, editorOptions, position as any).then(() => {
+				resolve();
+			}, error => {
+				reject(error);
+			});
+		});
+	}
+
 	public $open(handle: number): Thenable<void> {
 		let dialog = this.getDialog(handle);
 		this._dialogService.showDialog(dialog);

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

@@ -318,7 +318,10 @@ export function createApiFactory(
 
 			const workspace: typeof sqlops.workspace = {
 				onDidOpenDashboard: extHostDashboard.onDidOpenDashboard,
-				onDidChangeToDashboard: extHostDashboard.onDidChangeToDashboard
+				onDidChangeToDashboard: extHostDashboard.onDidChangeToDashboard,
+				createModelViewEditor(title: string): sqlops.workspace.ModelViewEditor {
+					return extHostModelViewDialog.createModelViewEditor(title);
+				}
 			};
 
 			const dashboard = {

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

@@ -553,6 +553,7 @@ export interface ExtHostModelViewDialogShape {
 }
 
 export interface MainThreadModelViewDialogShape extends IDisposable {
+	$openEditor(modelViewId: string, title: string, position?: vscode.ViewColumn): Thenable<void>;
 	$open(handle: number): Thenable<void>;
 	$close(handle: number): Thenable<void>;
 	$setDialogDetails(handle: number, details: IModelViewDialogDetails): Thenable<void>;