Making infobox clickable (#18676)

* Making infobox clickable

* Making it accessible

* Moving API to proposed

* Matching styling from portal

* Fixing some styling

* Moving to proposed

* Removing extra spacing

* Registering and Unregistering listeners

* Fixing listeners

* Registering emitter only once.

* Changing emitter type from undefined to void

* Adding arialabel to clickable link

* Changing property name to suit its purpose

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

@@ -2085,6 +2085,7 @@ class InfoBoxComponentWrapper extends ComponentWrapper implements azdata.InfoBox
 	constructor(proxy: MainThreadModelViewShape, handle: number, id: string, logService: ILogService) {
 		super(proxy, handle, ModelComponentTypes.InfoBox, id, logService);
 		this.properties = {};
+		this._emitterMap.set(ComponentEventType.onDidClick, new Emitter<void>());
 	}
 
 	public get style(): azdata.InfoBoxStyle {
@@ -2110,6 +2111,27 @@ class InfoBoxComponentWrapper extends ComponentWrapper implements azdata.InfoBox
 	public set announceText(v: boolean) {
 		this.setProperty('announceText', v);
 	}
+
+	public get isClickable(): boolean {
+		return this.properties['isClickable'];
+	}
+
+	public set isClickable(v: boolean) {
+		this.setProperty('isClickable', v);
+	}
+
+	public get clickableButtonAriaLabel(): string {
+		return this.properties['clickableButtonAriaLabel'];
+	}
+
+	public set clickableButtonAriaLabel(v: string) {
+		this.setProperty('clickableButtonAriaLabel', v);
+	}
+
+	public get onDidClick(): vscode.Event<any> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
+		return emitter && emitter.event;
+	}
 }
 
 class SliderComponentWrapper extends ComponentWrapper implements azdata.SliderComponent {

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

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 
 import * as azdata from 'azdata';
-import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { ComponentEventType, 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';
@@ -41,6 +41,12 @@ export default class InfoBoxComponent extends ComponentBase<azdata.InfoBoxCompon
 		if (this._container) {
 			this._infoBox = new InfoBox(this._container.nativeElement);
 			this._register(attachInfoBoxStyler(this._infoBox, this.themeService));
+			this._infoBox.onDidClick(e => {
+				this.fireEvent({
+					eventType: ComponentEventType.onDidClick,
+					args: e
+				});
+			});
 			this.updateInfoBox();
 		}
 	}
@@ -65,6 +71,8 @@ export default class InfoBoxComponent extends ComponentBase<azdata.InfoBoxCompon
 			this._infoBox.announceText = this.announceText;
 			this._infoBox.infoBoxStyle = this.style;
 			this._infoBox.text = this.text;
+			this._infoBox.isClickable = this.isClickable;
+			this._infoBox.clickableButtonAriaLabel = this.clickableButtonAriaLabel;
 		}
 	}
 
@@ -79,4 +87,12 @@ export default class InfoBoxComponent extends ComponentBase<azdata.InfoBoxCompon
 	public get announceText(): boolean {
 		return this.getPropertyOrDefault<boolean>((props) => props.announceText, false);
 	}
+
+	public get isClickable(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.isClickable, false);
+	}
+
+	public get clickableButtonAriaLabel(): string {
+		return this.getPropertyOrDefault<string>((props) => props.clickableButtonAriaLabel, '');
+	}
 }