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/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>;