Adding link support to infobox. (#18876)

src/sql/workbench/browser/ui/infoBox/infoBox.ts

@@ -0,0 +1,305 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./media/infoBox';
+import * as azdata from 'azdata';
+import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
+import { alert, status } from 'vs/base/browser/ui/aria/aria';
+import { IThemable } from 'vs/base/common/styler';
+import { Color } from 'vs/base/common/color';
+import * as DOM from 'vs/base/browser/dom';
+import { Event, Emitter } from 'vs/base/common/event';
+import { Codicon } from 'vs/base/common/codicons';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
+import { IOpenerService } from 'vs/platform/opener/common/opener';
+import { ILogService } from 'vs/platform/log/common/log';
+
+export interface IInfoBoxStyles {
+	informationBackground?: Color;
+	warningBackground?: Color;
+	errorBackground?: Color;
+	successBackground?: Color;
+}
+
+export type InfoBoxStyle = 'information' | 'warning' | 'error' | 'success';
+
+export interface InfoBoxOptions {
+	text: string;
+	links?: azdata.LinkArea[];
+	style: InfoBoxStyle;
+	announceText?: boolean;
+	isClickable?: boolean;
+	clickableButtonAriaLabel?: string;
+}
+
+export class InfoBox extends Disposable implements IThemable {
+	private _imageElement: HTMLDivElement;
+	private _textElement: HTMLDivElement;
+	private _infoBoxElement: HTMLDivElement;
+	private _clickableIndicator: HTMLDivElement;
+	private _text = '';
+	private _links: azdata.LinkArea[] = [];
+	private _infoBoxStyle: InfoBoxStyle = 'information';
+	private _styles: IInfoBoxStyles;
+	private _announceText: boolean = false;
+	private _isClickable: boolean = false;
+	private _clickableButtonAriaLabel: string;
+
+	private _clickListenersDisposableStore = new DisposableStore();
+	private _onDidClick: Emitter<void> = this._register(new Emitter<void>());
+	get onDidClick(): Event<void> { return this._onDidClick.event; }
+
+	private _linkListenersDisposableStore = new DisposableStore();
+	private _onLinkClick: Emitter<azdata.InfoBoxLinkClickEventArgs> = this._register(new Emitter<azdata.InfoBoxLinkClickEventArgs>());
+	get onLinkClick(): Event<azdata.InfoBoxLinkClickEventArgs> { return this._onLinkClick.event; }
+
+	constructor(
+		container: HTMLElement,
+		options: InfoBoxOptions | undefined,
+		@IOpenerService private _openerService: IOpenerService,
+		@ILogService private _logService: ILogService
+	) {
+		super();
+		this._infoBoxElement = document.createElement('div');
+		this._imageElement = document.createElement('div');
+		this._imageElement.setAttribute('role', 'image');
+		this._textElement = document.createElement('div');
+		this._textElement.classList.add('infobox-text');
+		container.appendChild(this._infoBoxElement);
+		this._infoBoxElement.appendChild(this._imageElement);
+		this._infoBoxElement.appendChild(this._textElement);
+		this._clickableIndicator = DOM.$('a');
+		this._clickableIndicator.classList.add('infobox-clickable-arrow', ...Codicon.arrowRight.classNamesArray);
+		this._infoBoxElement.appendChild(this._clickableIndicator);
+
+		if (options) {
+			this.infoBoxStyle = options.style;
+			this.links = options.links;
+			this.text = options.text;
+			this._announceText = (options.announceText === true);
+			this.isClickable = (options.isClickable === true);
+			this.clickableButtonAriaLabel = options.clickableButtonAriaLabel;
+		}
+		this.updateClickableState();
+	}
+
+	public style(styles: IInfoBoxStyles): void {
+		this._styles = styles;
+		this.updateStyle();
+	}
+
+	public get announceText(): boolean {
+		return this._announceText;
+	}
+
+	public set announceText(v: boolean) {
+		this._announceText = v;
+	}
+
+	public get infoBoxStyle(): InfoBoxStyle {
+		return this._infoBoxStyle;
+	}
+
+	public set infoBoxStyle(style: InfoBoxStyle) {
+		this._infoBoxStyle = style;
+		this._infoBoxElement.classList.remove(...this._infoBoxElement.classList);
+		this._imageElement.classList.remove(...this._imageElement.classList);
+		this._imageElement.setAttribute('aria-label', style);
+		this._infoBoxElement.classList.add('infobox-container', style);
+		this._imageElement.classList.add('infobox-image', style);
+		this.updateStyle();
+	}
+
+	public get links(): azdata.LinkArea[] {
+		return this._links;
+	}
+
+	public set links(v: azdata.LinkArea[]) {
+		this._links = v ?? [];
+		this.createTextWithHyperlinks();
+	}
+
+	public get text(): string {
+		return this._text;
+	}
+
+	public set text(text: string) {
+		if (this._text !== text) {
+			this._text = text;
+			this.createTextWithHyperlinks();
+		}
+	}
+
+	public createTextWithHyperlinks() {
+		let text = this._text;
+		DOM.clearNode(this._textElement);
+		this._linkListenersDisposableStore.clear();
+
+		for (let i = 0; i < this._links.length; i++) {
+			const placeholderIndex = text.indexOf(`{${i}}`);
+			if (placeholderIndex < 0) {
+				this._logService.warn(`Could not find placeholder text {${i}} in text ${text}`);
+				// 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 span = DOM.$('span');
+				span.innerText = text.slice(0, placeholderIndex);
+				this._textElement.appendChild(span);
+			}
+
+			// Now insert the link element
+			const link = this._links[i];
+
+			/**
+			 * If the url is empty, electron displays the link as visited.
+			 * TODO: Investigate why it happens and fix the issue iin electron/vsbase.
+			 */
+			const linkElement = DOM.$('a', {
+				href: link.url === '' ? ' ' : link.url
+			});
+
+			linkElement.innerText = link.text;
+
+			if (link.accessibilityInformation) {
+				linkElement.setAttribute('aria-label', link.accessibilityInformation.label);
+				if (link.accessibilityInformation.role) {
+					linkElement.setAttribute('role', link.accessibilityInformation.role);
+				}
+			}
+			this._linkListenersDisposableStore.add(DOM.addDisposableListener(linkElement, DOM.EventType.CLICK, e => {
+				this._onLinkClick.fire({
+					index: i,
+					link: link
+				});
+				if (link.url) {
+					this.openLink(link.url);
+				}
+				e.stopPropagation();
+			}));
+
+			this._linkListenersDisposableStore.add(DOM.addDisposableListener(linkElement, DOM.EventType.KEY_PRESS, e => {
+				const event = new StandardKeyboardEvent(e);
+				if (this._isClickable && (event.equals(KeyCode.Enter) || !event.equals(KeyCode.Space))) {
+					this._onLinkClick.fire({
+						index: i,
+						link: link
+					});
+					if (link.url) {
+						this.openLink(link.url);
+					}
+					e.stopPropagation();
+				}
+			}));
+			this._textElement.appendChild(linkElement);
+			text = text.slice(placeholderIndex + 3);
+		}
+
+		if (text) {
+			const span = DOM.$('span');
+			span.innerText = text;
+			this._textElement.appendChild(span);
+		}
+
+		if (this.announceText) {
+			if (this.infoBoxStyle === 'warning' || this.infoBoxStyle === 'error') {
+				alert(text);
+			}
+			else {
+				status(text);
+			}
+		}
+	}
+
+	private openLink(href: string): void {
+		this._openerService.open(href);
+	}
+
+	public get isClickable(): boolean {
+		return this._isClickable;
+	}
+
+	public set isClickable(v: boolean) {
+		if (this._isClickable === v) {
+			return;
+		}
+		this._isClickable = v;
+		this.updateClickableState();
+	}
+
+	private registerClickListeners() {
+		this._clickListenersDisposableStore.add(DOM.addDisposableListener(this._infoBoxElement, DOM.EventType.CLICK, e => {
+			if (this._isClickable) {
+				this._onDidClick.fire();
+			}
+		}));
+
+		this._clickListenersDisposableStore.add(DOM.addDisposableListener(this._infoBoxElement, DOM.EventType.KEY_PRESS, e => {
+			const event = new StandardKeyboardEvent(e);
+			if (this._isClickable && (event.equals(KeyCode.Enter) || !event.equals(KeyCode.Space))) {
+				this._onDidClick.fire();
+				DOM.EventHelper.stop(e);
+				return;
+			}
+		}));
+	}
+
+	private unregisterClickListeners() {
+		this._clickListenersDisposableStore.clear();
+	}
+
+	public get clickableButtonAriaLabel(): string {
+		return this._clickableButtonAriaLabel;
+	}
+
+	public set clickableButtonAriaLabel(v: string) {
+		this._clickableButtonAriaLabel = v;
+		this._clickableIndicator.ariaLabel = this._clickableButtonAriaLabel;
+		this._clickableIndicator.title = this._clickableButtonAriaLabel;
+	}
+
+	private updateStyle(): void {
+		if (this._styles) {
+			let backgroundColor: Color;
+			switch (this.infoBoxStyle) {
+				case 'error':
+					backgroundColor = this._styles.errorBackground;
+					break;
+				case 'warning':
+					backgroundColor = this._styles.warningBackground;
+					break;
+				case 'success':
+					backgroundColor = this._styles.successBackground;
+					break;
+				default:
+					backgroundColor = this._styles.informationBackground;
+					break;
+			}
+			this._infoBoxElement.style.backgroundColor = backgroundColor.toString();
+		}
+	}
+
+	private updateClickableState(): void {
+		if (this._isClickable) {
+			this._clickableIndicator.style.display = '';
+			this._clickableIndicator.tabIndex = 0;
+			this._infoBoxElement.style.cursor = 'pointer';
+			this._infoBoxElement.setAttribute('role', 'button');
+			this._textElement.style.maxWidth = 'calc(100% - 75px)';
+			this.registerClickListeners();
+		} else {
+			this._clickableIndicator.style.display = 'none';
+			this._clickableIndicator.tabIndex = -1;
+			this._infoBoxElement.style.cursor = 'default';
+			this._infoBoxElement.removeAttribute('role');
+			this._textElement.style.maxWidth = '';
+			this.unregisterClickListeners();
+		}
+	}
+}

src/sql/workbench/browser/ui/infoBox/media/infoBox.css

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.infobox-container {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+}
+
+.infobox-image {
+	padding: 10px;
+	width: 16px;
+	height: 16px;
+	background-size: 16px;
+	background-position: 10px 10px;
+	background-repeat: no-repeat;
+	flex: 0 0 auto;
+}
+
+.infobox-image.success {
+	background-image: url('status_success.svg');
+}
+
+.infobox-image.information {
+	background-image: url('status_info.svg');
+}
+
+.infobox-image.warning {
+	background-image: url('status_warning.svg');
+}
+
+.infobox-image.error {
+	background-image: url('status_error.svg');
+}
+
+.infobox-text {
+	flex: 1 1 fit-content;
+	padding: 10px 0px 0px 0px;
+	user-select: text;
+	overflow: scroll;
+}
+
+.infobox-clickable-arrow {
+	padding: 10px 0px 0px 0px;
+}

src/sql/workbench/browser/ui/infoBox/media/status_error.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#d02e00;}.cls-2{fill:#fff;}</style></defs><title>error_16x16</title><circle class="cls-1" cx="8.07" cy="8.07" r="7.93"/><polygon class="cls-2" points="8.82 8.07 11.53 10.78 10.83 11.48 8.12 8.78 5.41 11.48 4.7 10.78 7.42 8.07 4.65 5.31 5.36 4.61 8.12 7.37 10.83 4.67 11.53 5.36 8.82 8.07"/></svg>

src/sql/workbench/browser/ui/infoBox/media/status_info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#F6F6F6;} .icon-vs-blue{fill:#015cda;} .icon-white{fill:#FFFFFF;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M0 8c0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8-8-3.582-8-8z" id="outline"/><path class="icon-vs-blue" d="M8 1c-3.865 0-7 3.135-7 7s3.135 7 7 7 7-3.135 7-7-3.135-7-7-7zm1 12h-2v-7h2v7zm0-8h-2v-2h2v2z" id="iconBg"/><path class="icon-white" d="M7 6h2v7h-2v-7zm0-1h2v-2h-2v2z" id="iconFg"/></svg>

src/sql/workbench/browser/ui/infoBox/media/status_success.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#3bb44a;}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#fff;}</style><clipPath id="clip-path"><path class="cls-1" d="M16,8a7.92,7.92,0,0,1-1.09,4A8.15,8.15,0,0,1,12,14.91a8,8,0,0,1-8.07,0A8.15,8.15,0,0,1,1.09,12,8,8,0,0,1,1.09,4,8.15,8.15,0,0,1,4,1.09a8,8,0,0,1,8.07,0A8.15,8.15,0,0,1,14.91,4,7.92,7.92,0,0,1,16,8Z"/></clipPath><clipPath id="clip-path-2"><polygon class="cls-1" points="10.9 4.9 11.6 5.6 6.5 10.71 3.65 7.85 4.35 7.15 6.5 9.29 10.9 4.9"/></clipPath></defs><title>success_complete</title><g class="cls-2"><rect class="cls-3" x="-5" y="-5" width="26" height="26"/></g><g class="cls-4"><rect class="cls-5" x="-1.35" y="-0.1" width="17.95" height="15.81"/></g></svg>

src/sql/workbench/browser/ui/infoBox/media/status_warning.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#DB7500;}.cls-2{fill:#FFFFFF;}</style></defs><title>warning_16x16</title><polygon class="cls-1" points="8.05 0.15 16 16 -0.12 16 8.05 0.15"/><rect class="cls-2" x="7.31" y="7.34" width="1.59" height="3.97"/><rect class="cls-2" x="7.31" y="12.1" width="1.59" height="1.59"/></svg>