ML extension - revised button component (#12674) (#12746)

* Revert "Revert "ML extension updates  (#11817)" (#12645)"

This reverts commit 34a6200a47.

* Modified button template and renamed infoButton ElementRef

* fix rendering issue

* Minor code cleanup.

* add clean up previous button logic

Co-authored-by: Alan Ren <alanren@microsoft.com>

Co-authored-by: Hale Rankin <harankin@microsoft.com>
Co-authored-by: Alan Ren <alanren@microsoft.com>

extensions/machine-learning/src/common/constants.ts

@@ -224,7 +224,7 @@ export function invalidImportTableSchemaError(databaseName: string | undefined,
 export const loadModelParameterFailedError = localize('models.loadModelParameterFailedError', "Failed to load model parameters'");
 export const unsupportedModelParameterType = localize('models.unsupportedModelParameterType', "unsupported");
 export const dashboardTitle = localize('dashboardTitle', "Machine Learning");
-export const dashboardDesc = localize('dashboardDesc', "Machine Learning for SQL Databases");
+export const dashboardDesc = localize('dashboardDesc', "Machine Learning for SQL databases");
 export const dashboardLinksTitle = localize('dashboardLinksTitle', "Useful links");
 export const dashboardVideoLinksTitle = localize('dashboardVideoLinksTitle', "Video tutorials");
 export const showMoreTitle = localize('showMoreTitle', "Show more");

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

@@ -15,11 +15,11 @@ interface IActionMetadata {
 	description?: string,
 	link?: string,
 	iconPath?: { light: string | vscode.Uri; dark: string | vscode.Uri },
-	command?: string;
+	command?: string
 }
 
-const maxWidth = 800;
+const maxWidth = 810;
-const headerMaxHeight = 300;
+const headerMaxHeight = 234;
 export class DashboardWidget {
 
 	/**
@@ -33,33 +33,30 @@ export class DashboardWidget {
 			this._apiWrapper.registerWidget('mls.dashboard', async (view) => {
 				const container = view.modelBuilder.flexContainer().withLayout({
 					flexFlow: 'column',
-					width: '100%',
+					width: 'auto',
 					height: '100%'
 				}).component();
-				const header = this.createHeader(view);
+				const header = await this.createHeader(view);
-				const tasksContainer = await this.createTasks(view);
 				const footerContainer = this.createFooter(view);
 				container.addItem(header, {
 					CSSStyles: {
-						'background-image': `url(${vscode.Uri.file(this.asAbsolutePath('images/background.svg'))})`,
+						'background-image': `
+							url(${vscode.Uri.file(this.asAbsolutePath('images/background.svg'))}),
+							linear-gradient(0deg, rgba(0,0,0,0.09) 0%, rgba(0,0,0,0) 100%)
+						`,
 						'background-repeat': 'no-repeat',
-						'background-position': 'bottom',
+						'background-position': 'left 32px',
+						'background-size': '107%',
+						'border': 'none',
 						'width': `${maxWidth}px`,
-						'height': '330px',
+						'height': `${headerMaxHeight}px`
-						'background-size': `${maxWidth}px ${headerMaxHeight}px`,
-						'margin-bottom': '-60px'
-					}
-				});
-				container.addItem(tasksContainer, {
-					CSSStyles: {
-						'width': `${maxWidth}px`,
-						'height': '150px',
 					}
 				});
 				container.addItem(footerContainer, {
 					CSSStyles: {
-						'width': `${maxWidth}px`,
 						'height': '500px',
+						'width': `${maxWidth}px`,
+						'margin-top': '16px'
 					}
 				});
 				const mainContainer = view.modelBuilder.flexContainer()
@@ -70,7 +67,7 @@ export class DashboardWidget {
 						position: 'absolute'
 					}).component();
 				mainContainer.addItem(container, {
-					CSSStyles: { 'padding-top': '25px', 'padding-left': '5px' }
+					CSSStyles: { 'padding-top': '12px' }
 				});
 				await view.initializeModel(mainContainer);
 				resolve();
@@ -78,7 +75,7 @@ export class DashboardWidget {
 		});
 	}
 
-	private createHeader(view: azdata.ModelView): azdata.Component {
+	private async createHeader(view: azdata.ModelView): Promise<azdata.Component> {
 		const header = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
 			width: maxWidth,
@@ -88,7 +85,8 @@ export class DashboardWidget {
 			value: constants.dashboardTitle,
 			CSSStyles: {
 				'font-size': '36px',
-				'font-weight': 'bold',
+				'font-weight': '300',
+				'line-height': '48px',
 				'margin': '0px'
 			}
 		}).component();
@@ -96,14 +94,22 @@ export class DashboardWidget {
 			value: constants.dashboardDesc,
 			CSSStyles: {
 				'font-size': '14px',
-				'font-weight': 'bold',
+				'font-weight': '300',
+				'line-height': '20px',
 				'margin': '0px'
 			}
 		}).component();
 		header.addItems([titleComponent, descComponent], {
 			CSSStyles: {
-				'width': `${maxWidth}px`,
+				'padding-left': '26px'
-				'padding': '5px'
+			}
+		});
+		const tasksContainer = this.createTasks(view);
+		header.addItem(await tasksContainer, {
+			CSSStyles: {
+				'height': 'auto',
+				'margin-top': '67px',
+				'width': `${maxWidth}px`
 			}
 		});
 
@@ -134,7 +140,6 @@ export class DashboardWidget {
 		const videosContainer = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row',
 			width: maxWidth,
-			height: '300px',
 		}).component();
 
 		links.forEach(link => {
@@ -163,10 +168,7 @@ export class DashboardWidget {
 			}
 		}).component();
 		const viewPanelStyle = {
-			'padding': '0px',
+			'padding': '10px 5px 10px 0',
-			'padding-right': '5px',
-			'padding-top': '20px',
-			'height': '200px',
 			'margin': '0px'
 		};
 
@@ -204,15 +206,14 @@ export class DashboardWidget {
 			}
 		]);
 
-		this.addShowMorePanel(view, linksContainer, moreVideosContainer, { 'padding-left': '5px' }, viewPanelStyle);
+		this.addShowMorePanel(view, linksContainer, moreVideosContainer, { 'padding-top': '10px' }, viewPanelStyle);
 		return linksContainer;
 	}
 
 	private addShowMorePanel(view: azdata.ModelView, parentPanel: azdata.FlexContainer, morePanel: azdata.Component, moreButtonStyle: { [key: string]: string }, morePanelStyle: { [key: string]: string }): azdata.Component {
-		const maxWidth = 100;
 		const linkContainer = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row',
-			width: maxWidth + 10,
+			width: 'auto',
 			justifyContent: 'flex-start'
 		}).component();
 		const showMoreComponent = view.modelBuilder.hyperlink().withProperties({
@@ -253,29 +254,18 @@ export class DashboardWidget {
 			CSSStyles: Object.assign({}, moreButtonStyle, {
 				'font-size': '12px',
 				'margin': '0px',
-				'color': '#006ab1',
+			})
-				'padding-right': '5px'
-			}
-			)
 		});
 		linkContainer.addItem(image, {
 			CSSStyles: {
-				'padding': '0px',
+				'padding-left': '5px',
-				'padding-right': '5px',
+				'padding-top': '15px',
-				'padding-top': '5px',
-				'height': '10px',
 				'margin': '0px'
 			}
 		});
 
 		parentPanel.addItem(linkContainer, {
-			CSSStyles: {
+			CSSStyles: {}
-				'padding': '0px',
-				'padding-right': '5px',
-				'padding-top': '10px',
-				'height': '10px',
-				'margin': '0px'
-			}
 		});
 
 		return showMoreComponent;
@@ -286,7 +276,6 @@ export class DashboardWidget {
 		const videosContainer = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
 			width: maxWidth,
-			height: maxWidth,
 			justifyContent: 'flex-start'
 		}).component();
 		const video1Container = view.modelBuilder.divContainer().withProperties({
@@ -299,7 +288,7 @@ export class DashboardWidget {
 			width: maxWidth,
 			height: '50px',
 			CSSStyles: {
-				'font-size': '12px',
+				'font-size': '13px',
 				'margin': '0px'
 			}
 		}).component();
@@ -310,11 +299,11 @@ export class DashboardWidget {
 		});
 		videosContainer.addItem(video1Container, {
 			CSSStyles: {
-				'background-image': `url(${vscode.Uri.file(this.asAbsolutePath(<string>linkMetaData.iconPath?.light || ''))})`,
+				'background-image': `url(${vscode.Uri.file(this.asAbsolutePath(linkMetaData.iconPath?.light as string || ''))})`,
 				'background-repeat': 'no-repeat',
 				'background-position': 'top',
 				'width': `${maxWidth}px`,
-				'height': '110px',
+				'height': '104px',
 				'background-size': `${maxWidth}px 120px`
 			}
 		});
@@ -384,20 +373,20 @@ export class DashboardWidget {
 		linksContainer.addItems(links.map(l => this.createLink(view, l)), {
 			CSSStyles: styles
 		});
-		moreLinksContainer.addItems(moreLinks.map(l => this.createLink(view, l)));
+		moreLinksContainer.addItems(moreLinks.map(l => this.createLink(view, l)), {
+			CSSStyles: styles
+		});
 
-		this.addShowMorePanel(view, linksContainer, moreLinksContainer, { 'padding-left': '10px' }, styles);
+		this.addShowMorePanel(view, linksContainer, moreLinksContainer, { 'padding-left': '10px', 'padding-top': '10px' }, {});
 
 		return linksContainer;
 	}
 
 	private createLink(view: azdata.ModelView, linkMetaData: IActionMetadata): azdata.Component {
-		const maxHeight = 80;
 		const maxWidth = 400;
 		const labelsContainer = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
 			width: maxWidth,
-			height: maxHeight,
 			justifyContent: 'flex-start'
 		}).component();
 		const descriptionComponent = view.modelBuilder.text().withProperties({
@@ -405,6 +394,7 @@ export class DashboardWidget {
 			width: maxWidth,
 			CSSStyles: {
 				'font-size': '12px',
+				'line-height': '16px',
 				'margin': '0px'
 			}
 		}).component();
@@ -433,26 +423,20 @@ export class DashboardWidget {
 		}).component();
 		linkContainer.addItem(linkComponent, {
 			CSSStyles: {
-				'padding': '0px',
+				'font-size': '14px',
-				'padding-right': '5px',
+				'line-height': '18px',
-				'margin': '0px',
+				'padding': '0 5px 0 0',
-				'color': '#006ab1'
 			}
 		});
 		linkContainer.addItem(image, {
 			CSSStyles: {
-				'padding': '0px',
+				'padding': '5px 5px 0 0',
-				'padding-right': '5px',
-				'padding-top': '5px',
 				'height': '10px',
-				'margin': '0px'
 			}
 		});
 		labelsContainer.addItems([linkContainer, descriptionComponent], {
 			CSSStyles: {
-				'padding': '0px',
+				'padding': '5px 0 0 0',
-				'padding-top': '5px',
-				'margin': '0px'
 			}
 		});
 
@@ -466,8 +450,8 @@ export class DashboardWidget {
 	private async createTasks(view: azdata.ModelView): Promise<azdata.Component> {
 		const tasksContainer = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row',
+			height: '84px',
 			width: '100%',
-			height: '50px',
 		}).component();
 		const predictionMetadata: IActionMetadata = {
 			title: constants.makePredictionTitle,
@@ -502,11 +486,8 @@ export class DashboardWidget {
 			command: constants.notebookCommandNew
 		};
 		const notebookModelsButton = this.createTaskButton(view, notebookMetadata);
-		tasksContainer.addItems([predictionButton, importModelsButton, notebookModelsButton], {
+		tasksContainer.addItems([predictionButton, importModelsButton, notebookModelsButton]);
-			CSSStyles: {
+
-				'padding': '10px'
-			}
-		});
 		if (!await this._predictService.serverSupportOnnxModel()) {
 			console.log(constants.onnxNotSupportedError);
 		}
@@ -515,87 +496,24 @@ export class DashboardWidget {
 	}
 
 	private createTaskButton(view: azdata.ModelView, taskMetaData: IActionMetadata): azdata.Component {
-		const maxHeight = 116;
+		const maxHeight: number = 84;
-		const maxWidth = 250;
+		const maxWidth: number = 236;
-		const mainContainer = view.modelBuilder.divContainer().withLayout({
+		const buttonContainer = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
-			width: maxWidth,
+			buttonType: azdata.ButtonType.Informational,
-			height: maxHeight
+			description: taskMetaData.description,
-		}).withProperties({
+			height: maxHeight,
-			clickable: true,
+			iconHeight: 32,
-			ariaRole: taskMetaData.title
-		}).component();
-		const iconContainer = view.modelBuilder.flexContainer().withLayout({
-			flexFlow: 'row',
-			width: maxWidth,
-			height: maxHeight - 23,
-			alignItems: 'flex-start'
-		}).component();
-		const labelsContainer = view.modelBuilder.flexContainer().withLayout({
-			flexFlow: 'column',
-			width: maxWidth - 50,
-			height: maxHeight - 20,
-			justifyContent: 'space-between'
-		}).component();
-		const titleComponent = view.modelBuilder.text().withProperties({
-			value: taskMetaData.title,
-			CSSStyles: {
-				'font-size': '14px',
-				'font-weight': 'bold',
-				'margin': '0px'
-			}
-		}).component();
-		const descriptionComponent = view.modelBuilder.text().withProperties({
-			value: taskMetaData.description,
-			CSSStyles: {
-				'font-size': '13px',
-				'margin': '0px'
-			}
-		}).component();
-		const linkComponent = view.modelBuilder.hyperlink().withProperties({
-			label: constants.learnMoreTitle,
-			url: taskMetaData.link
-		}).component();
-		const image = view.modelBuilder.image().withProperties({
-			width: '20px',
-			height: '20px',
 			iconPath: taskMetaData.iconPath,
-			iconHeight: '20px',
+			iconWidth: 32,
-			iconWidth: '20px'
+			label: taskMetaData.title,
+			title: taskMetaData.title,
+			width: maxWidth,
 		}).component();
-		labelsContainer.addItems([titleComponent, descriptionComponent, linkComponent], {
+		buttonContainer.onDidClick(async () => {
-			CSSStyles: {
+			if (buttonContainer.enabled && taskMetaData.command) {
-				'padding': '0px',
-				'padding-bottom': '5px',
-				'width': '200px',
-				'margin': '0px',
-				'color': '#006ab1'
-			}
-		});
-		iconContainer.addItem(image, {
-			CSSStyles: {
-				'padding-top': '10px',
-				'padding-right': '10px'
-			}
-		});
-		iconContainer.addItem(labelsContainer, {
-			CSSStyles: {
-				'padding-top': '5px',
-				'padding-right': '10px'
-			}
-		});
-		mainContainer.addItems([iconContainer], {
-			CSSStyles: {
-				'padding': '10px',
-				'border-radius': '5px',
-				'border-color': '#f2f2f2',
-				'border': '1px solid'
-			}
-		});
-		mainContainer.onDidClick(async () => {
-			if (mainContainer.enabled && taskMetaData.command) {
 				await this._apiWrapper.executeCommand(taskMetaData.command);
 			}
 		});
-		return mainContainer;
+		return view.modelBuilder.divContainer().withItems([buttonContainer]).component();
 	}
 }

src/sql/azdata.proposed.d.ts

@@ -686,6 +686,24 @@ declare module 'azdata' {
 		 */
 		delete?: boolean;
 	}
+
+	export interface ButtonProperties {
+		/**
+		* Specifies whether to use expanded layout or not.
+		*/
+		buttonType?: ButtonType;
+		/**
+		* Description text to display inside button element.
+		*/
+		description?: string;
+	}
+
+	export enum ButtonType {
+		File = 'File',
+		Normal = 'Normal',
+		Informational = 'Informational'
+	}
+
 	export interface DiffEditorComponent {
 		/**
 		 * Title of editor

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

@@ -12,7 +12,7 @@ export interface IButtonStyles extends vsIButtonStyles {
 }
 
 export class Button extends vsButton {
-	private buttonFocusOutline?: Color;
+	protected buttonFocusOutline?: Color;
 
 	constructor(container: HTMLElement, options?: IButtonOptions) {
 		super(container, options);

src/sql/base/browser/ui/infoButton/infoButton.css

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.info-button-container {
+	display: flex;
+	justify-content: space-around;
+}
+.info-button .info-main {
+	cursor: pointer;
+	padding: 10px;
+}
+.info-button .info-icon {
+	align-items: flex-start;
+	display: flex;
+	flex-flow: column;
+	padding-right: 10px;
+}
+.info-button .info-text {
+	display: flex;
+	flex-flow: column;
+	justify-content: space-between;
+	padding: 0 0 0 10px;
+	margin: 0px;
+}
+.info-button .info-text p.info-title {
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 20px;
+	margin: 0px;
+}
+.info-button .info-text p.info-desc {
+	font-size: 12px;
+	line-height: 16px;
+	margin: 0px;
+}
+
+.info-button {
+	background-color: #fff;
+	border-radius: 2px;
+	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.13);
+	display: inline-block;
+}
+.info-button[tabindex="0"]:active {
+	background-color: #fff;
+	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
+}
+.vs-dark .info-button {
+	background-color: #1b1a19;
+	box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.13);
+}
+.vs-dark .info-button[tabindex="0"]:active {
+	background-color: #1b1a19;
+	box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
+}
+.hc-black .info-button {
+	background-color: #000;
+	box-shadow: none;
+}
+.hc-black .info-button[tabindex="0"]:active {
+	background-color: #000;
+}
+.info-button:hover {
+	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
+}
+.vs-dark .info-button:hover {
+	box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
+}
+.hc-black .info-button[tabindex="0"]:hover {
+	border-style: dashed !important;
+	border-color: rgb(243, 133, 24) !important;
+}

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

@@ -0,0 +1,153 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./infoButton';
+import { Button as sqlButton } from 'sql/base/browser/ui/button/button';
+import * as DOM from 'vs/base/browser/dom';
+import { IButtonOptions } from 'vs/base/browser/ui/button/button';
+
+export interface IInfoButtonOptions extends IButtonOptions {
+	buttonMaxHeight: number,
+	buttonMaxWidth: number,
+	description: string,
+	iconClass: string,
+	iconHeight: number,
+	iconWidth: number,
+	title: string,
+}
+
+export class InfoButton extends sqlButton {
+	private _container: HTMLElement;
+	private _main: HTMLElement;
+	private _iconContainer: HTMLElement;
+	private _iconElement: HTMLElement;
+	private _textContainer: HTMLElement;
+	private _pTitle: HTMLElement;
+	private _pDesc: HTMLElement;
+
+	private _buttonMaxHeight?: number;
+	private _buttonMaxWidth?: number;
+	private _description?: string;
+	private _iconClass?: string;
+	private _iconHeight?: number;
+	private _iconWidth?: number;
+	private _title?: string;
+
+	constructor(container: HTMLElement, options?: IInfoButtonOptions) {
+		super(container, options);
+		this._container = container;
+
+		DOM.addClass(this._container, 'info-button-container');
+
+		this._main = document.createElement('div');
+		DOM.addClass(this._main, 'flexContainer');
+		DOM.addClass(this._main, 'info-main');
+
+		this._iconContainer = document.createElement('div');
+		DOM.addClass(this._iconContainer, 'info-icon');
+		this._iconContainer.style.alignItems = 'flex-start';
+
+		this._iconElement = document.createElement('div');
+		DOM.addClass(this._iconElement, 'icon');
+
+		this._textContainer = document.createElement('div');
+		DOM.addClass(this._textContainer, 'info-text');
+
+		this._pTitle = document.createElement('p');
+		DOM.addClass(this._pTitle, 'info-title');
+		this._pTitle.setAttribute('aria-hidden', 'false');
+
+		this._pDesc = document.createElement('p');
+		DOM.addClass(this._pDesc, 'info-desc');
+		this._pDesc.setAttribute('aria-hidden', 'false');
+
+		this._textContainer.appendChild(this._pTitle);
+		this._textContainer.appendChild(this._pDesc);
+
+		this._iconContainer.appendChild(this._iconElement);
+
+		this._main.appendChild(this._iconContainer);
+		this._main.appendChild(this._textContainer);
+
+		DOM.addClass(this.element, 'info-button');
+		this.element.appendChild(this._main);
+		this.element.style.background = 'none';
+
+		this.infoButtonOptions = options;
+	}
+
+	public get title(): string {
+		return this._title!;
+	}
+	public set title(value: string) {
+		this._title! = value;
+		this._pTitle.innerText = this.title;
+	}
+
+	public get description(): string {
+		return this._description!;
+	}
+	public set description(value: string) {
+		this._description! = value;
+		this._pDesc.innerText = this.description;
+	}
+
+	public get buttonMaxHeight(): number {
+		return this._buttonMaxHeight!;
+	}
+	public set buttonMaxHeight(value: number) {
+		this._buttonMaxHeight! = value;
+		this._main.style.maxHeight = `${this._buttonMaxHeight!}px`;
+		this._iconContainer.style.height = `${this._buttonMaxHeight! - 20}px`;
+		this._textContainer.style.height = `${this._buttonMaxHeight! - 20}px`;
+	}
+
+	public get buttonMaxWidth(): number {
+		return this._buttonMaxWidth!;
+	}
+	public set buttonMaxWidth(value: number) {
+		this._buttonMaxWidth! = value;
+		this._main.style.width = `${this._buttonMaxWidth!}px`;
+		this._textContainer.style.width = `${this._buttonMaxWidth! - this._iconWidth!}px`;
+	}
+
+	public get iconHeight(): number {
+		return this._iconHeight!;
+	}
+	public set iconHeight(value: number) {
+		this._iconHeight! = value;
+		this._iconElement.style.height = `${this._iconHeight!}px`;
+	}
+
+	public get iconWidth(): number {
+		return this._iconWidth!;
+	}
+	public set iconWidth(value: number) {
+		this._iconWidth! = value;
+		this._iconContainer.style.width = `${this._iconWidth!}px`;
+		this._iconElement.style.width = `${this._iconWidth!}px`;
+	}
+
+	public get iconClass(): string {
+		return this._iconClass!;
+	}
+	public set iconClass(value: string) {
+		this._iconClass! = value;
+		DOM.addClass(this._iconElement, this._iconClass!);
+	}
+
+	public set infoButtonOptions(options: IInfoButtonOptions | undefined) {
+		if (!options) {
+			return;
+		}
+		this.buttonMaxHeight = options.buttonMaxHeight;
+		this.buttonMaxWidth = options.buttonMaxWidth;
+		this.description = options.description;
+		this.iconHeight = options.iconHeight;
+		this.iconWidth = options.iconWidth;
+		this.iconClass = options.iconClass;
+		this.title = options.title;
+	}
+}

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

@@ -58,7 +58,7 @@ panel {
 	max-width: 100px;
 }
 
-.tabbedPanel.vertical >.title .tabList .tab .tabLabel {
+.tabbedPanel.vertical > .title .tabList .tab .tabLabel {
 	font-size: 13px;
 	padding-bottom: 0px;
 	max-width: 200px;
@@ -70,6 +70,20 @@ panel {
 	font-weight: 600;
 }
 
+.tabbedPanel .tabList .tab-header:hover:not(.active) {
+	background-color: #dcdcdc;
+	outline: none;
+}
+.vs-dark .tabbedPanel .tabList .tab-header:hover:not(.active) {
+	background-color: #2a2d2e;
+	outline: none;
+}
+.hc-black .tabbedPanel .tabList .tab-header:hover:not(.active) {
+	background-color: initial;
+	outline: 1px dashed #f38518;
+	outline-offset: -3px;
+}
+
 .tabbedPanel.horizontal > .title .tabList .tab .tabLabel,
 .tabbedPanel.vertical > .title .tabList .tab .tabLabel {
 	text-overflow: ellipsis;

src/sql/workbench/api/common/sqlExtHost.api.impl.ts

@@ -539,6 +539,7 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 
 			return {
 				accounts,
+				ButtonType: sqlExtHostTypes.ButtonType,
 				connection,
 				credentials,
 				objectexplorer: objectExplorer,

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

@@ -861,3 +861,9 @@ export enum SqlAssessmentResultItemKind {
 	Warning = 1,
 	Error = 2
 }
+
+export enum ButtonType {
+	File = 'File',
+	Normal = 'Normal',
+	Informational = 'Informational'
+}

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

@@ -5,7 +5,7 @@
 import 'vs/css!./media/button';
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	ViewChild, ElementRef, OnDestroy, AfterViewInit
+	ViewChild, ElementRef, OnDestroy
 } from '@angular/core';
 
 import * as azdata from 'azdata';
@@ -17,30 +17,40 @@ import { SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/com
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
 import { Button } from 'sql/base/browser/ui/button/button';
+import { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
 import { Color } from 'vs/base/common/color';
 import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
 import { convertSize } from 'sql/base/browser/dom';
+import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
 
 @Component({
 	selector: 'modelview-button',
 	template: `
-	<div>
+	<div *ngIf="this.buttonType !== 'Informational'; then thenBlock else elseBlock"></div>
+	<ng-template #thenBlock>
 		<label for={{this.label}}>
 			<div #input style="width: 100%">
 				<input #fileInput *ngIf="this.isFile === true" id={{this.label}} type="file" accept="{{ this.fileType }}" style="display: none">
 			</div>
 		</label>
-	</div>
+	</ng-template>
+	<ng-template #elseBlock>
+		<div #infoButton style="width: 100%;"></div>
+	</ng-template>
 	`
 })
-export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy, AfterViewInit {
+
+export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
-	private _button: Button;
+	private _button: Button | InfoButton;
 	public fileType: string = '.sql';
+	private _currentButtonType?: azdata.ButtonType = undefined;
 
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
 	@ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef;
+	@ViewChild('infoButton', { read: ElementRef }) private _infoButtonContainer: ElementRef;
+
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@@ -53,9 +63,28 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 		this.baseInit();
 	}
 
-	ngAfterViewInit(): void {
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	public setLayout(layout: any): void {
+		this.layout();
+	}
+
+	private initButton(): void {
+		this._currentButtonType = this.buttonType;
+		const elementToRemove = this._button?.element;
 		if (this._inputContainer) {
 			this._button = new Button(this._inputContainer.nativeElement);
+		} else if (this._infoButtonContainer) {
+			this._button = new InfoButton(this._infoButtonContainer.nativeElement);
+		}
+
+		// remove the previously created element if any.
+		if (elementToRemove) {
+			const container = this._inputContainer || this._infoButtonContainer;
+			(container.nativeElement as HTMLElement)?.removeChild(elementToRemove);
+		}
 
 		this._register(this._button);
 		this._register(attachButtonStyler(this._button, this.themeService, {
@@ -68,7 +97,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 					let file = self._fileInputContainer.nativeElement.files[0];
 					let reader = new FileReader();
 					reader.onload = (e) => {
-							let text = (<FileReader>e.target).result;
+						let text = (e.target as FileReader).result;
 						self.fileContent = text.toString();
 						self.fireEvent({
 							eventType: ComponentEventType.onDidClick,
@@ -88,23 +117,24 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 			}
 		}));
 	}
-	}
-
-	ngOnDestroy(): void {
-		this.baseDestroy();
-	}
-
-	/// IComponent implementation
-
-	public setLayout(layout: any): void {
-		// TODO allow configuring the look and feel
-		this.layout();
-	}
-
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
+		if (this._currentButtonType !== this.buttonType) {
+			this.initButton();
+		}
+		if (this._infoButtonContainer) {
+			let button = this._button as InfoButton;
+			button.buttonMaxHeight = this.properties.height;
+			button.buttonMaxWidth = this.properties.width;
+			button.description = this.properties.description;
+			button.iconClass = createIconCssClass(this.properties.iconPath);
+			button.iconHeight = this.properties.iconHeight;
+			button.iconWidth = this.properties.iconWidth;
+			button.title = this.properties.title;
+		} else {
 			this._button.enabled = this.enabled;
 			this._button.label = this.label;
+
 			if (this.properties.fileType) {
 				this.fileType = properties.fileType;
 			}
@@ -122,6 +152,8 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 			if (this.height) {
 				this._button.setHeight(convertSize(this.height.toString()));
 			}
+		}
+
 		this.updateIcon();
 		this._changeRef.detectChanges();
 	}
@@ -158,6 +190,18 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 		this.setPropertyFromUI<string>(this.setValueProperties, newValue);
 	}
 
+	public get buttonType(): azdata.ButtonType {
+		if (this.isFile === true) {
+			return 'File' as azdata.ButtonType;
+		} else {
+			return this.getPropertyOrDefault((props) => props.buttonType, 'Normal' as azdata.ButtonType);
+		}
+	}
+
+	public get description(): string {
+		return this.getPropertyOrDefault((props) => props.description, '');
+	}
+
 	public get isFile(): boolean {
 		return this.getPropertyOrDefault<boolean>((props) => props.isFile, false);
 	}