Fix text component link to use link component directly (#10457)

* Fix text component link to use link component directly

* Attach styler

src/sql/workbench/browser/modelComponents/text.component.ts

@@ -6,39 +6,48 @@
 import 'vs/css!./media/text';
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	OnDestroy, AfterViewInit, ElementRef, SecurityContext
+	OnDestroy, AfterViewInit, ElementRef, ViewChild
 } from '@angular/core';
 
 import * as azdata from 'azdata';
 
-import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledComponent';
 import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
-import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { Link } from 'vs/platform/opener/browser/link';
-import { textLinkForeground, textLinkActiveForeground } from 'vs/platform/theme/common/colorRegistry';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import * as DOM from 'vs/base/browser/dom';
+import { ILogService } from 'vs/platform/log/common/log';
+import { attachLinkStyler } from 'vs/platform/theme/common/styler';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 @Component({
 	selector: 'modelview-text',
 	template: `
 	<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
-	<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
+	<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
-		<p  *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
+		<span #textContainer></span>
+		<p *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
 		<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img">
 			<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
 		</div>
 	</div>
 	<ng-template #noDiv>
-	<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></p>
+	<p [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles">
+		<span #textContainer></span>
+	</p>
 	</ng-template>`
 })
 export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
+	@ViewChild('textContainer', { read: ElementRef }) textContainer: ElementRef;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
-		@Inject(forwardRef(() => DomSanitizer)) private _domSanitizer: DomSanitizer) {
+		@Inject(IInstantiationService) private instantiationService: IInstantiationService,
+		@Inject(ILogService) private logService: ILogService,
+		@Inject(IThemeService) private themeService: IThemeService) {
 		super(changeRef, el);
 	}
 
@@ -47,6 +56,7 @@ export default class TextComponent extends TitledComponent implements IComponent
 	}
 
 	ngAfterViewInit(): void {
+		this.updateText();
 	}
 
 	ngOnDestroy(): void {
@@ -84,41 +94,55 @@ export default class TextComponent extends TitledComponent implements IComponent
 		return this.getPropertyOrDefault<azdata.TextComponentProperties, boolean>((props) => props.requiredIndicator, false);
 	}
 
-	public getValue(): SafeHtml {
+	public setProperties(properties: { [key: string]: any; }): void {
-		let links = this.getPropertyOrDefault<azdata.TextComponentProperties, azdata.LinkArea[]>((props) => props.links, []);
+		super.setProperties(properties);
-		let text = this._domSanitizer.sanitize(SecurityContext.HTML, this.value);
+		this.updateText();
-		if (links.length !== 0) {
+		this._changeRef.detectChanges();
-			for (let i: number = 0; i < links.length; i++) {
+	}
-				let link = links[i];
+
-				let linkTag = `<a class="modelview-text-link" href="${this._domSanitizer.sanitize(SecurityContext.URL, link.url)}" tabIndex="0" target="blank">${this._domSanitizer.sanitize(SecurityContext.HTML, link.text)}</a>`;
+	public updateText(): void {
-				text = text.replace(`{${i}}`, linkTag);
+		DOM.clearNode((<HTMLElement>this.textContainer.nativeElement));
+		const links = this.getPropertyOrDefault<azdata.TextComponentProperties, azdata.LinkArea[]>((props) => props.links, []);
+		// The text may contain link placeholders so go through and create those and insert them as needed now
+		let text = this.value;
+		for (let i: number = 0; i < links.length; i++) {
+			const placeholderIndex = text.indexOf(`{${i}}`);
+			if (placeholderIndex < 0) {
+				this.logService.warn(`Could not find placeholder text {${i}} in text ${this.value}`);
+				// Just continue on so we at least show the rest of the text if just one was missed or something
+				continue;
 			}
+
+			// First insert any text from the start of the current string fragment up to the placeholder
+			let curText = text.slice(0, placeholderIndex);
+			if (curText) {
+				const textSpan = DOM.$('span');
+				textSpan.innerText = text.slice(0, placeholderIndex);
+				(<HTMLElement>this.textContainer.nativeElement).appendChild(textSpan);
+			}
+
+			// Now insert the link element
+			const link = links[i];
+			const linkElement = this._register(this.instantiationService.createInstance(Link, {
+				label: link.text,
+				href: link.url
+			}));
+			this._register(attachLinkStyler(linkElement, this.themeService));
+			(<HTMLElement>this.textContainer.nativeElement).appendChild(linkElement.el);
+
+			// And finally update the text to remove the text up through the placeholder we just added
+			text = text.slice(placeholderIndex + 3);
+		}
+
+		// If we have any text left over now insert that in directly
+		if (text) {
+			const textSpan = DOM.$('span');
+			textSpan.innerText = text;
+			(<HTMLElement>this.textContainer.nativeElement).appendChild(textSpan);
 		}
-		return text;
 	}
 
 	public get showDiv(): boolean {
 		return this.requiredIndicator || !!this.description;
 	}
 }
-
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	const linkForeground = theme.getColor(textLinkForeground);
-	if (linkForeground) {
-		collector.addRule(`
-		a.modelview-text-link:link,
-		a.modelview-text-link:visited {
-			color: ${linkForeground};
-		}
-		`);
-	}
-
-	const activeForeground = theme.getColor(textLinkActiveForeground);
-	if (activeForeground) {
-		collector.addRule(`
-		a.modelview-text-link:hover {
-			color: ${activeForeground};
-		}
-		`);
-	}
-});