add option to show link icon (#13506)

extensions/machine-learning/images/linkIcon.svg

@@ -1,3 +0,0 @@
-<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M10 6H11V11H0V0H5V1H1V10H10V6ZM11 0V5H10V1.71094L5.35156 6.35156L4.64844 5.64844L9.28906 1H6V0H11Z" fill="#0078D4"/>
-</svg>

extensions/machine-learning/src/views/widgets/dashboardWidget.ts

@@ -405,24 +405,15 @@ export class DashboardWidget {
 			width: maxWidth + 10,
 			justifyContent: 'flex-start'
 		}).component();
-		const linkComponent = view.modelBuilder.hyperlink().withProperties({
+		const linkComponent = view.modelBuilder.hyperlink().withProps({
-			label: linkMetaData.title,
+			label: linkMetaData.title!,
-			url: linkMetaData.link,
+			url: linkMetaData.link!,
+			showLinkIcon: true,
 			CSSStyles: {
 				'font-size': '14px',
 				'margin': '0px'
 			}
 		}).component();
-		const image = view.modelBuilder.image().withProperties({
-			width: '10px',
-			height: '10px',
-			iconPath: {
-				dark: this.asAbsolutePath('images/linkIcon.svg'),
-				light: this.asAbsolutePath('images/linkIcon.svg'),
-			},
-			iconHeight: '10px',
-			iconWidth: '10px'
-		}).component();
 		linkContainer.addItem(linkComponent, {
 			CSSStyles: {
 				'font-size': '14px',
@@ -430,12 +421,6 @@ export class DashboardWidget {
 				'padding': '0 5px 0 0',
 			}
 		});
-		linkContainer.addItem(image, {
-			CSSStyles: {
-				'padding': '5px 5px 0 0',
-				'height': '10px',
-			}
-		});
 		labelsContainer.addItems([linkContainer, descriptionComponent], {
 			CSSStyles: {
 				'padding': '5px 0 0 0',

src/sql/azdata.proposed.d.ts

@@ -270,11 +270,15 @@ declare module 'azdata' {
 
 	export interface HyperlinkComponent {
 		/**
-		 * An event called when the text is clicked
+		 * An event called when the hyperlink is clicked
 		 */
 		onDidClick: vscode.Event<any>;
 	}
 
+	export interface HyperlinkComponentProperties {
+		showLinkIcon?: boolean;
+	}
+
 	export interface DeclarativeTableColumn {
 		headerCssStyles?: CssStyles;
 		rowCssStyles?: CssStyles;

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

@@ -3,6 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import 'vs/css!./media/hyperlink';
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
 	OnDestroy, AfterViewInit, ElementRef
@@ -20,7 +21,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 
 @Component({
 	selector: 'modelview-hyperlink',
-	template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank">{{label}}</a>`
+	template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank" [class]="cssClass">{{label}}</a>`
 })
 export default class HyperlinkComponent extends TitledComponent<azdata.HyperlinkComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
@@ -44,6 +45,10 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
 		this.baseDestroy();
 	}
 
+	public get cssClass(): string {
+		return this.showLinkIcon ? 'link-with-icon' : '';
+	}
+
 	public setLayout(layout: any): void {
 		this.layout();
 	}
@@ -64,6 +69,10 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
 		return this.getPropertyOrDefault<string>((props) => props.url, '');
 	}
 
+	public get showLinkIcon(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.showLinkIcon, false);
+	}
+
 	public onClick(e: MouseEvent): void {
 		this.fireEvent({
 			eventType: ComponentEventType.onDidClick,

src/sql/workbench/browser/modelComponents/media/hyperlink.css

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+modelview-hyperlink .link-with-icon::after {
+	content: '\eb14';
+	font-family: 'codicon';
+	margin-left: 5px;
+	vertical-align: bottom;
+}