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