Add support for clickable links and other webview options (#2396)

* Add support for clickable links and other webview options
- Added click handling
- Added suport for localResourceRoots to be read in the webview

* Options should not be mandatory

* Ensure the constructor-defined properties are preserved
- This fixes issue where the extensionFolderPath was lost during webview withProperties call in the modelbuilder.

* enableCommandUris should be a getter

* Add position support to webview and to flexContainer

* Fix regressions on editor view caused by merge

src/sql/parts/modelComponents/componentBase.ts

@@ -139,6 +139,14 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		this.setPropertyFromUI<sqlops.ComponentProperties, number | string>((props, value) => props.width = value, newValue);
 	}
 
+	public get position(): string {
+		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.position, '');
+	}
+
+	public set position(newValue: string) {
+		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, position) => { properties.position = position; }, newValue);
+	}
+
 	public convertSizeToNumber(size: number | string): number {
 		if (size && typeof (size) === 'string') {
 			if (size.toLowerCase().endsWith('px')) {

src/sql/parts/modelComponents/editor.component.ts

@@ -21,6 +21,9 @@ import { IModelService } from 'vs/editor/common/services/modelService';
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { QueryTextEditor } from 'sql/parts/modelComponents/queryTextEditor';
+import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
+import { SimpleProgressService } from 'vs/editor/standalone/browser/simpleServices';
+import { IProgressService } from 'vs/platform/progress/common/progress';
 
 @Component({
 	template: '',
@@ -55,11 +58,12 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	}
 
 	private _createEditor(): void {
-		this._editor = this._instantiationService.createInstance(QueryTextEditor);
+		let instantiationService = this._instantiationService.createChild(new ServiceCollection([IProgressService, new SimpleProgressService()]));
+		this._editor = instantiationService.createInstance(QueryTextEditor);
 		this._editor.create(this._el.nativeElement);
 		this._editor.setVisible(true);
 		let uri = this.createUri();
-		this._editorInput = this._instantiationService.createInstance(UntitledEditorInput, uri, false, 'sql', '', '');
+		this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, 'sql', '', '');
 		this._editor.setInput(this._editorInput, undefined);
 		this._editorInput.resolve().then(model => this._editorModel = model.textEditorModel);
 
@@ -154,14 +158,6 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
 	}
 
-	public get position(): string {
-		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.position, '');
-	}
-
-	public set position(newValue: string) {
-		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, position) => { properties.position = position; }, newValue);
-	}
-
 	public get editorUri(): string {
 		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.editorUri, '');
 	}

src/sql/parts/modelComponents/flexContainer.component.ts

@@ -24,7 +24,7 @@ class FlexItem {
 
 @Component({
 	template: `
-		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent"
+		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
 				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width">
 			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
@@ -43,6 +43,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	private _textAlign: string;
 	private _height: string;
 	private _width: string;
+	private _position: string;
 
 	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
 		super(changeRef);
@@ -67,6 +68,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		this._alignItems = layout.alignItems ? layout.alignItems : '';
 		this._alignContent = layout.alignContent ? layout.alignContent : '';
 		this._textAlign = layout.textAlign ? layout.textAlign : '';
+		this._position = layout.position ? layout.position : '';
 		this._height = this.convertSize(layout.height);
 		this._width = this.convertSize(layout.width);
 
@@ -102,6 +104,10 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		return this._textAlign;
 	}
 
+	public get position(): string {
+		return this._position;
+	}
+
 	private getItemFlex(item: FlexItem): string {
 		return item.config ? item.config.flex : '1 1 auto';
 	}

src/sql/parts/modelComponents/queryTextEditor.ts

@@ -7,7 +7,6 @@ import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import * as nls from 'vs/nls';
 import * as DOM from 'vs/base/browser/dom';
 import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorInput';
-import { TPromise } from 'vs/base/common/winjs.base';
 import { ResourceEditorModel } from 'vs/workbench/common/editor/resourceEditorModel';
 import * as editorCommon from 'vs/editor/common/editorCommon';
 
@@ -21,22 +20,10 @@ import { IModeService } from 'vs/editor/common/services/modeService';
 import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
 import { IEditorGroupsService } from 'vs/workbench/services/group/common/editorGroupsService';
 import { EditorOptions } from 'vs/workbench/common/editor';
-import { IEditorContributionCtor } from 'vs/editor/browser/editorExtensions';
-import { FoldingController } from 'vs/editor/contrib/folding/folding';
-import { RenameController } from 'vs/editor/contrib/rename/rename';
 import { StandaloneCodeEditor } from 'vs/editor/standalone/browser/standaloneCodeEditor';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 
-class QueryCodeEditor extends StandaloneCodeEditor {
-	// protected _getContributions(): IEditorContributionCtor[] {
-	// 	let contributions = super._getContributions();
-	// 	let skipContributions = [FoldingController.prototype, RenameController.prototype];
-	// 	contributions = contributions.filter(c => skipContributions.indexOf(c.prototype) === -1);
-	// 	return contributions;
-	// }
-}
-
 /**
  * Extension of TextResourceEditor that is always readonly rather than only with non UntitledInputs
  */
@@ -62,7 +49,7 @@ export class QueryTextEditor extends BaseTextEditor {
 	}
 
 	public createEditorControl(parent: HTMLElement, configuration: IEditorOptions): editorCommon.IEditor {
-		return this.instantiationService.createInstance(QueryCodeEditor, parent, configuration);
+		return this.instantiationService.createInstance(StandaloneCodeEditor, parent, configuration);
 	}
 
 	protected getConfigurationOverrides(): IEditorOptions {

src/sql/parts/modelComponents/webview.component.ts

@@ -9,14 +9,17 @@ import {
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import { Event, Emitter } from 'vs/base/common/event';
+import * as vscode from 'vscode';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';
 import { Parts, IPartService } from 'vs/workbench/services/part/common/partService';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { WebviewElement } from 'vs/workbench/parts/webview/electron-browser/webviewElement';
+import { WebviewElement, WebviewOptions } from 'vs/workbench/parts/webview/electron-browser/webviewElement';
+import URI, { UriComponents } from 'vs/base/common/uri';
+import { IOpenerService } from 'vs/platform/opener/common/opener';
+import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
@@ -31,9 +34,11 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 
+	private static readonly standardSupportedLinkSchemes = ['http', 'https', 'mailto'];
+
 	private _webview: WebviewElement;
-	private _onMessage = new Emitter<any>();
 	private _renderedHtml: string;
+	private _extensionLocationUri: URI;
 
 	protected contextKey: IContextKey<boolean>;
 	protected findInputFocusContextKey: IContextKey<boolean>;
@@ -46,6 +51,8 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 		@Inject(IThemeService) private themeService: IThemeService,
 		@Inject(IEnvironmentService) private environmentService: IEnvironmentService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
+		@Inject(IOpenerService) private readonly _openerService: IOpenerService,
+		@Inject(IWorkspaceContextService) private readonly _contextService: IWorkspaceContextService,
 		@Inject(IInstantiationService) private instantiationService: IInstantiationService,
 		@Inject(IContextKeyService) contextKeyService: IContextKeyService
 	) {
@@ -72,6 +79,8 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 
 		this._webview.mountTo(this._el.nativeElement);
 
+		this._register(this._webview.onDidClickLink(link => this.onDidClickLink(link)));
+
 		this._register(this._webview.onMessage(e => {
 			this._onEventEmitter.fire({
 				eventType: ComponentEventType.onMessage,
@@ -103,9 +112,28 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 		}
 	}
 
+	private onDidClickLink(link: URI): any {
+		if (!link) {
+			return;
+		}
+		if (WebViewComponent.standardSupportedLinkSchemes.indexOf(link.scheme) >= 0 || this.enableCommandUris && link.scheme === 'command') {
+			this._openerService.open(link);
+		}
+	}
+
+	private get enableCommandUris(): boolean {
+		if (this.options && this.options.enableCommandUris) {
+			return true;
+		}
+		return false;
+	}
+
+
 	/// IComponent implementation
 
 	public layout(): void {
+		let element = <HTMLElement> this._el.nativeElement;
+		element.style.position = this.position;
 		this._webview.layout();
 	}
 
@@ -116,10 +144,17 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
+		if (this.options) {
+			this._webview.options = this.getExtendedOptions();
+		}
 		if (this.html !== this._renderedHtml) {
 			this.setHtml();
 		}
+		if (this.extensionLocation) {
+			this._extensionLocationUri = URI.revive(this.extensionLocation);
+		}
 		this.sendMessage();
+
 	}
 
 	// CSS-bound properties
@@ -139,4 +174,38 @@ export default class WebViewComponent extends ComponentBase implements IComponen
 	public set html(newValue: string) {
 		this.setPropertyFromUI<sqlops.WebViewProperties, string>((properties, html) => { properties.html = html; }, newValue);
 	}
+
+	public get options(): vscode.WebviewOptions {
+		return this.getPropertyOrDefault<sqlops.WebViewProperties, vscode.WebviewOptions>((props) => props.options, undefined);
+	}
+
+	public get extensionLocation(): UriComponents {
+		return this.getPropertyOrDefault<sqlops.WebViewProperties, UriComponents>((props) => props.extensionLocation, undefined);
+	}
+
+	private get extensionLocationUri(): URI {
+		if (!this._extensionLocationUri && this.extensionLocation) {
+			this._extensionLocationUri = URI.revive(this.extensionLocation);
+		}
+		return this._extensionLocationUri;
+	}
+
+	private getExtendedOptions(): WebviewOptions {
+		let options = this.options || { enableScripts: true };
+		return {
+			allowScripts: options.enableScripts,
+			allowSvgs: true,
+			enableWrappedPostMessage: true,
+			useSameOriginForRoot: false,
+			localResourceRoots: options!.localResourceRoots || this.getDefaultLocalResourceRoots()
+		};
+	}
+
+	private getDefaultLocalResourceRoots(): URI[] {
+		const rootPaths = this._contextService.getWorkspace().folders.map(x => x.uri);
+		if (this.extensionLocationUri) {
+			rootPaths.push(this.extensionLocationUri);
+		}
+		return rootPaths;
+	}
 }