add link area support for text component (#4103)

* add link area support for text component

* add comment for localizable resources

* address comments

extensions/big-data-cluster/src/wizards/create-cluster/pages/settingsPage.ts

@@ -32,15 +32,26 @@ export class SettingsPage extends WizardPageBase<CreateClusterModel> {
 		let dockerSettingsGroup = view.modelBuilder.groupContainer().withItems([]).withLayout({ header: localize('bdc-create.DockerSettingsText', 'Docker Settings'), collapsible: true }).component();
 
 		let acceptEulaCheckbox = view.modelBuilder.checkBox().component();
-		acceptEulaCheckbox.label = localize('bdc-create.AcceptEulaText', 'I accept the SQL Server EULA');
 		acceptEulaCheckbox.checked = false;
 
-		let eulaHyperlink = view.modelBuilder.hyperlink().withProperties({
+		let eulaLink: sqlops.LinkArea = {
-			label: localize('bdc-create.ViewEulaText', 'View Eula'),
+			text: localize('bdc-create.LicenseAgreementText', 'License Agreement'),
 			url: 'https://docs.microsoft.com/en-us/sql/getting-started/about-the-sql-server-license-terms?view=sql-server-2014'
+		};
+		let privacyPolicyLink: sqlops.LinkArea = {
+			text: localize('bdc-create.PrivacyPolicyText', 'Privacy Policy'),
+			url: 'https://privacy.microsoft.com/en-us/privacystatement'
+		};
+
+		let checkboxText = view.modelBuilder.text().withProperties<sqlops.TextComponentProperties>({
+			value: localize({
+				key: 'bdc-create.AcceptTermsText',
+				comment: ['{0} is the place holder for License Agreement, {1} is the place holder for Privacy Policy']
+			}, 'I accept the {0} and {1}.'),
+			links: [eulaLink, privacyPolicyLink]
 		}).component();
 
-		let eulaContainer = this.createRow(view, [acceptEulaCheckbox, eulaHyperlink]);
+		let eulaContainer = this.createRow(view, [acceptEulaCheckbox, checkboxText]);
 
 		let form = formBuilder.withFormItems([
 			{
@@ -71,6 +82,6 @@ export class SettingsPage extends WizardPageBase<CreateClusterModel> {
 	}
 
 	private createRow(view: sqlops.ModelView, items: sqlops.Component[]): sqlops.FlexContainer {
-		return view.modelBuilder.flexContainer().withItems(items, { CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'baseline' }).component();
+		return view.modelBuilder.flexContainer().withItems(items, { CSSStyles: { 'margin-right': '5px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
 	}
 }

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

@@ -6,7 +6,7 @@
 import 'vs/css!./radioButton';
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	OnDestroy, AfterViewInit, ElementRef
+	OnDestroy, AfterViewInit, ElementRef, SecurityContext
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
@@ -14,11 +14,12 @@ import * as sqlops from 'sqlops';
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 
 @Component({
 	selector: 'modelview-text',
 	template: `
-		<p [style.width]="getWidth()">{{getValue()}}</p>`
+		<p [style.width]="getWidth()" [innerHTML]="getValue()"></p>`
 })
 export default class TextComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
@@ -27,7 +28,8 @@ export default class TextComponent extends ComponentBase implements IComponent,
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+		@Inject(forwardRef(() => DomSanitizer)) private _domSanitizer: DomSanitizer) {
 		super(changeRef, el);
 	}
 
@@ -57,7 +59,16 @@ export default class TextComponent extends ComponentBase implements IComponent,
 		return this.getPropertyOrDefault<sqlops.TextComponentProperties, string>((props) => props.value, '');
 	}
 
-	public getValue(): string {
+	public getValue(): SafeHtml {
-		return this.value;
+		let links = this.getPropertyOrDefault<sqlops.TextComponentProperties, sqlops.LinkArea[]>((props) => props.links, []);
+		let text = this._domSanitizer.sanitize(SecurityContext.HTML, this.value);
+		if (links.length !== 0) {
+			for (let i: number = 0; i < links.length; i++) {
+				let link = links[i];
+				let linkTag = `<a href="${this._domSanitizer.sanitize(SecurityContext.URL, link.url)}" tabIndex="0" target="blank">${this._domSanitizer.sanitize(SecurityContext.HTML, link.text)}</a>`;
+				text = text.replace(`{${i}}`, linkTag);
+			}
+		}
+		return text;
 	}
 }

src/sql/sqlops.proposed.d.ts

@@ -543,6 +543,12 @@ declare module 'sqlops' {
 
 	export interface TextComponentProperties {
 		value?: string;
+		links?: LinkArea[];
+	}
+
+	export interface LinkArea {
+		text: string;
+		url: string;
 	}
 
 	export interface HyperlinkComponentProperties extends ComponentProperties {

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

@@ -433,7 +433,6 @@ export function createApiFactory(
 					return extHostModelViewDialog.createWizardPage(title);
 				},
 				createWizard(title: string): sqlops.window.Wizard {
-					console.warn('deprecated method');
 					return extHostModelViewDialog.createWizard(title);
 				},
 				MessageLevel: sqlExtHostTypes.MessageLevel