new component - infobox (#14027)

* new component: infobox

* comments

* new option

* add comments

src/sql/azdata.proposed.d.ts

@@ -330,6 +330,7 @@ declare module 'azdata' {
 		tabbedPanel(): TabbedPanelComponentBuilder;
 		separator(): ComponentBuilder<SeparatorComponent, SeparatorComponentProperties>;
 		propertiesContainer(): ComponentBuilder<PropertiesContainerComponent, PropertiesContainerComponentProperties>;
+		infoBox(): ComponentBuilder<InfoBoxComponent, InfoBoxComponentProperties>;
 	}
 
 	export interface ComponentBuilder<TComponent extends Component, TPropertyBag extends ComponentProperties> {
@@ -604,6 +605,32 @@ declare module 'azdata' {
 		propertyItems?: PropertiesContainerItem[];
 	}
 
+	/**
+	 * Component to display text with an icon representing the severity
+	 */
+	export interface InfoBoxComponent extends Component, InfoBoxComponentProperties {
+	}
+
+	export type InfoBoxStyle = 'information' | 'warning' | 'error' | 'success';
+
+	/**
+	 * Properties for configuring a InfoBoxComponent
+	 */
+	export interface InfoBoxComponentProperties extends ComponentProperties {
+		/**
+		 * The style of the InfoBox
+		 */
+		style: InfoBoxStyle;
+		/**
+		 * The display text of the InfoBox
+		 */
+		text: string;
+		/**
+		 * Controls whether the text should be announced by the screen reader. Default value is false.
+		 */
+		announceText?: boolean;
+	}
+
 	export namespace nb {
 		/**
 		 * An event that is emitted when the active Notebook editor is changed.

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

@@ -0,0 +1,119 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { Disposable } 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';
+
+export interface IInfoBoxStyles {
+	informationBackground?: Color;
+	warningBackground?: Color;
+	errorBackground?: Color;
+	successBackground?: Color;
+}
+
+export type InfoBoxStyle = 'information' | 'warning' | 'error' | 'success';
+
+export interface InfoBoxOptions {
+	text: string;
+	style: InfoBoxStyle;
+	announceText?: boolean;
+}
+
+export class InfoBox extends Disposable implements IThemable {
+	private _imageElement: HTMLDivElement;
+	private _textElement: HTMLDivElement;
+	private _infoBoxElement: HTMLDivElement;
+	private _text = '';
+	private _infoBoxStyle: InfoBoxStyle = 'information';
+	private _styles: IInfoBoxStyles;
+	private _announceText: boolean = false;
+
+	constructor(container: HTMLElement, options?: InfoBoxOptions) {
+		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);
+		if (options) {
+			this.infoBoxStyle = options.style;
+			this.text = options.text;
+			this._announceText = (options.announceText === true);
+		}
+	}
+
+	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 text(): string {
+		return this._text;
+	}
+
+	public set text(text: string) {
+		if (this._text !== text) {
+			this._text = text;
+			this._textElement.innerText = text;
+			if (this.announceText) {
+				if (this.infoBoxStyle === 'warning' || this.infoBoxStyle === 'error') {
+					alert(text);
+				}
+				else {
+					status(text);
+				}
+			}
+		}
+	}
+
+	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();
+		}
+	}
+}

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

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ *  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%;
+	overflow: scroll;
+}
+
+.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 auto;
+	padding: 10px 0;
+	user-select: text;
+}

src/sql/base/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/base/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/base/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/base/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>

src/sql/platform/dashboard/browser/interfaces.ts

@@ -139,5 +139,6 @@ export enum ModelComponentTypes {
 	ListView,
 	TabbedPanel,
 	Separator,
-	PropertiesContainer
+	PropertiesContainer,
+	InfoBox
 }

src/sql/platform/theme/common/colorRegistry.ts

@@ -68,3 +68,10 @@ export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToo
 export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border"));
 export const notebookCellTagBackground = registerColor('notebook.notebookCellTagBackground', { light: '#0078D4', dark: '#0078D4', hc: '#0078D4' }, nls.localize('notebook.notebookCellTagBackground', "Tag background color."));
 export const notebookCellTagForeground = registerColor('notebook.notebookCellTagForeground', { light: '#FFFFFF', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.notebookCellTagForeground', "Tag foreground color."));
+
+// Info Box
+export const InfoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
+export const InfoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
+export const InfoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
+export const InfoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
+

src/sql/platform/theme/common/styler.ts

@@ -7,6 +7,7 @@ import * as colors from './colors';
 
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import * as cr from 'vs/platform/theme/common/colorRegistry';
+import * as sqlcr from 'sql/platform/theme/common/colorRegistry';
 import { attachStyler, IColorMapping, IStyleOverrides } from 'vs/platform/theme/common/styler';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { IThemable } from 'vs/base/common/styler';
@@ -306,3 +307,21 @@ export function attachCheckboxStyler(widget: IThemable, themeService: IThemeServ
 		disabledCheckboxForeground: (style && style.disabledCheckboxForeground) || colors.disabledCheckboxForeground
 	}, widget);
 }
+
+export interface IInfoBoxStyleOverrides {
+	informationBackground: cr.ColorIdentifier,
+	warningBackground: cr.ColorIdentifier,
+	errorBackground: cr.ColorIdentifier,
+	successBackground: cr.ColorIdentifier
+}
+
+export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = {
+	informationBackground: sqlcr.InfoBoxInformationBackground,
+	warningBackground: sqlcr.InfoBoxWarningBackground,
+	errorBackground: sqlcr.InfoBoxErrorBackground,
+	successBackground: sqlcr.InfoBoxSuccessBackground
+};
+
+export function attachInfoBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInfoBoxStyleOverrides): IDisposable {
+	return attachStyler(themeService, { ...defaultInfoBoxStyles, ...style }, widget);
+}

src/sql/workbench/api/common/extHostModelView.ts

@@ -271,6 +271,14 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
 		return builder;
 	}
 
+	infoBox(): azdata.ComponentBuilder<azdata.InfoBoxComponent, azdata.InfoBoxComponentProperties> {
+		let id = this.getNextComponentId();
+		let builder: ComponentBuilderImpl<azdata.InfoBoxComponent, azdata.InfoBoxComponentProperties> = this.getComponentBuilder(new InfoBoxComponentWrapper(this._proxy, this._handle, id), id);
+
+		this._componentBuilders.set(id, builder);
+		return builder;
+	}
+
 	getComponentBuilder<T extends azdata.Component, TPropertyBag extends azdata.ComponentProperties>(component: ComponentWrapper, id: string): ComponentBuilderImpl<T, TPropertyBag> {
 		let componentBuilder: ComponentBuilderImpl<T, TPropertyBag> = new ComponentBuilderImpl<T, TPropertyBag>(component);
 		this._componentBuilders.set(id, componentBuilder);
@@ -1984,6 +1992,37 @@ class PropertiesContainerComponentWrapper extends ComponentWrapper implements az
 	}
 }
 
+class InfoBoxComponentWrapper extends ComponentWrapper implements azdata.InfoBoxComponent {
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
+		super(proxy, handle, ModelComponentTypes.InfoBox, id);
+		this.properties = {};
+	}
+
+	public get style(): azdata.InfoBoxStyle {
+		return this.properties['style'];
+	}
+
+	public set style(v: azdata.InfoBoxStyle) {
+		this.setProperty('style', v);
+	}
+
+	public get text(): string {
+		return this.properties['text'];
+	}
+
+	public set text(v: string) {
+		this.setProperty('text', v);
+	}
+
+	public get announceText(): boolean {
+		return this.properties['announceText'];
+	}
+
+	public set announceText(v: boolean) {
+		this.setProperty('announceText', v);
+	}
+}
+
 class GroupContainerComponentWrapper extends ComponentWrapper implements azdata.GroupContainer {
 	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
 		super(proxy, handle, type, id);

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -177,7 +177,8 @@ export enum ModelComponentTypes {
 	ListView,
 	TabbedPanel,
 	Separator,
-	PropertiesContainer
+	PropertiesContainer,
+	InfoBox
 }
 
 export enum ModelViewAction {

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

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef,
+	OnDestroy, AfterViewInit, ElementRef, ViewChild
+} from '@angular/core';
+
+import * as azdata from 'azdata';
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { ILogService } from 'vs/platform/log/common/log';
+import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
+import { InfoBox, InfoBoxStyle } from 'sql/base/browser/ui/infoBox/infoBox';
+import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { attachInfoBoxStyler } from 'sql/platform/theme/common/styler';
+
+@Component({
+	selector: 'modelview-infobox',
+	template: `
+		<div #container>
+		</div>`
+})
+export default class InfoBoxComponent extends ComponentBase<azdata.InfoBoxComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
+
+	private _infoBox: InfoBox;
+
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(ILogService) logService: ILogService) {
+		super(changeRef, el, logService);
+	}
+
+	ngAfterViewInit(): void {
+		this.baseInit();
+		if (this._container) {
+			this._infoBox = new InfoBox(this._container.nativeElement);
+			this._register(attachInfoBoxStyler(this._infoBox, this.themeService));
+			this.updateInfoBox();
+		}
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	public setLayout(layout: any): void {
+		this.layout();
+	}
+
+	public setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		this.updateInfoBox();
+	}
+
+	private updateInfoBox(): void {
+		if (this._infoBox) {
+			this._container.nativeElement.style.width = this.getWidth();
+			this._container.nativeElement.style.height = this.getHeight();
+			this._infoBox.announceText = this.announceText;
+			this._infoBox.infoBoxStyle = this.style;
+			this._infoBox.text = this.text;
+		}
+	}
+
+	public get style(): InfoBoxStyle {
+		return this.getPropertyOrDefault<InfoBoxStyle>((props) => props.style, 'information');
+	}
+
+	public get text(): string {
+		return this.getPropertyOrDefault<string>((props) => props.text, '');
+	}
+
+	public get announceText(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.announceText, false);
+	}
+}

src/sql/workbench/contrib/modelView/browser/components.contribution.ts

@@ -35,6 +35,7 @@ import SeparatorComponent from 'sql/workbench/browser/modelComponents/separator.
 import { ModelComponentTypes } from 'sql/platform/dashboard/browser/interfaces';
 import PropertiesContainerComponent from 'sql/workbench/browser/modelComponents/propertiesContainer.component';
 import ListViewComponent from 'sql/workbench/browser/modelComponents/listView.component';
+import InfoBoxComponent from 'sql/workbench/browser/modelComponents/infoBox.component';
 
 export const DIV_CONTAINER = 'div-container';
 registerComponentType(DIV_CONTAINER, ModelComponentTypes.DivContainer, DivContainer);
@@ -126,3 +127,6 @@ registerComponentType(SEPARATOR_COMPONENT, ModelComponentTypes.Separator, Separa
 
 export const PROPERTIESCONTAINER_COMPONENT = 'propertiescontainer-component';
 registerComponentType(PROPERTIESCONTAINER_COMPONENT, ModelComponentTypes.PropertiesContainer, PropertiesContainerComponent);
+
+export const INFOBOX_COMPONENT = 'infobox-component';
+registerComponentType(INFOBOX_COMPONENT, ModelComponentTypes.InfoBox, InfoBoxComponent);