diff --git a/extensions/machine-learning/images/linkIcon.svg b/extensions/machine-learning/images/linkIcon.svg
deleted file mode 100644
index 63f69fc22e..0000000000
--- a/extensions/machine-learning/images/linkIcon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts
index 93c972ed67..2553e02ede 100644
--- a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts
+++ b/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({
- label: linkMetaData.title,
- url: linkMetaData.link,
+ const linkComponent = view.modelBuilder.hyperlink().withProps({
+ label: linkMetaData.title!,
+ 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',
diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts
index b42f136d39..6796ea6a2e 100644
--- a/src/sql/azdata.proposed.d.ts
+++ b/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;
}
+ export interface HyperlinkComponentProperties {
+ showLinkIcon?: boolean;
+ }
+
export interface DeclarativeTableColumn {
headerCssStyles?: CssStyles;
rowCssStyles?: CssStyles;
diff --git a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
index fe68ca4b41..495a86cc0a 100644
--- a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
+++ b/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: `{{label}}`
+ template: `{{label}}`
})
export default class HyperlinkComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@@ -44,6 +45,10 @@ export default class HyperlinkComponent extends TitledComponent((props) => props.url, '');
}
+ public get showLinkIcon(): boolean {
+ return this.getPropertyOrDefault((props) => props.showLinkIcon, false);
+ }
+
public onClick(e: MouseEvent): void {
this.fireEvent({
eventType: ComponentEventType.onDidClick,
diff --git a/src/sql/workbench/browser/modelComponents/media/hyperlink.css b/src/sql/workbench/browser/modelComponents/media/hyperlink.css
new file mode 100644
index 0000000000..176e82483b
--- /dev/null
+++ b/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;
+}