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

This reverts commit 037d638927.

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

src/sql/azdata.proposed.d.ts

@@ -691,24 +691,6 @@ 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 {
-	protected buttonFocusOutline?: Color;
+	private buttonFocusOutline?: Color;
 
 	constructor(container: HTMLElement, options?: IButtonOptions) {
 		super(container, options);

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

@@ -1,73 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  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

@@ -1,153 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  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,20 +70,6 @@ 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,7 +539,6 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 
 			return {
 				accounts,
-				ButtonType: sqlExtHostTypes.ButtonType,
 				connection,
 				credentials,
 				objectexplorer: objectExplorer,

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

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

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

@@ -17,38 +17,30 @@ 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: `
-	<ng-container *ngIf="!this.buttonType === 'Informational'"; else elseBlock>
+	<div>
 		<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">
+				<input #fileInput *ngIf="this.isFile === true" id={{this.label}} type="file" accept="{{ this.fileType }}" style="display: none">
 			</div>
 		</label>
-	</ng-container>
+	</div>
-	<ng-container #elseBlock>
-		<div #informationalInput style="width: 100%;"></div>
-	</ng-container>
 	`
 })
-
 export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
-	private _button: Button | InfoButton;
+	private _button: Button;
 	public fileType: string = '.sql';
 
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
-	@ViewChild('informationalInput', { read: ElementRef }) private _informationalInputContainer: ElementRef;
 	@ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef;
-
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@@ -59,48 +51,43 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 
 	ngOnInit(): void {
 		this.baseInit();
-
 	}
 
 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
 			this._button = new Button(this._inputContainer.nativeElement);
-		}
 
-		if (this._informationalInputContainer) {
+			this._register(this._button);
-			this._button = new InfoButton(this._informationalInputContainer.nativeElement);
+			this._register(attachButtonStyler(this._button, this.themeService, {
-		}
+				buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND, buttonForeground: SIDE_BAR_TITLE_FOREGROUND
-
+			}));
-		this._register(this._button);
+			this._register(this._button.onDidClick(e => {
-		this._register(attachButtonStyler(this._button, this.themeService, {
+				if (this._fileInputContainer) {
-			buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND, buttonForeground: SIDE_BAR_TITLE_FOREGROUND
+					const self = this;
-		}));
+					this._fileInputContainer.nativeElement.onchange = () => {
-		this._register(this._button.onDidClick(e => {
+						let file = self._fileInputContainer.nativeElement.files[0];
-			if (this._fileInputContainer) {
+						let reader = new FileReader();
-				const self = this;
+						reader.onload = (e) => {
-				this._fileInputContainer.nativeElement.onchange = () => {
+							let text = (<FileReader>e.target).result;
-					let file = self._fileInputContainer.nativeElement.files[0];
+							self.fileContent = text.toString();
-					let reader = new FileReader();
+							self.fireEvent({
-					reader.onload = (e) => {
+								eventType: ComponentEventType.onDidClick,
-						let text = (e.target as FileReader).result;
+								args: {
-						self.fileContent = text.toString();
+									filePath: file.path,
-						self.fireEvent({
+									fileContent: self.fileContent
-							eventType: ComponentEventType.onDidClick,
+								}
-							args: {
+							});
-								filePath: file.path,
+						};
-								fileContent: self.fileContent
+						reader.readAsText(file);
-							}
-						});
 					};
-					reader.readAsText(file);
+				} else {
-				};
+					this.fireEvent({
-			} else {
+						eventType: ComponentEventType.onDidClick,
-				this.fireEvent({
+						args: e
-					eventType: ComponentEventType.onDidClick,
+					});
-					args: e
+				}
-				});
+			}));
-			}
+		}
-		}));
 	}
 
 	ngOnDestroy(): void {
@@ -110,43 +97,31 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 	/// 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._informationalInputContainer) {
+		this._button.enabled = this.enabled;
-			let button = this._button as InfoButton;
+		this._button.label = this.label;
-			button.buttonMaxHeight = this.properties.height;
+		if (this.properties.fileType) {
-			button.buttonMaxWidth = this.properties.width;
+			this.fileType = properties.fileType;
-			button.description = this.properties.description;
+		}
-			button.iconClass = createIconCssClass(this.properties.iconPath);
+		this._button.title = this.title;
-			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) {
+		// Button's ariaLabel gets set to the label by default.
-				this.fileType = properties.fileType;
+		// We only want to override that if buttonComponent's ariaLabel is set explicitly.
-			}
+		if (this.ariaLabel) {
-			this._button.title = this.title;
+			this._button.ariaLabel = this.ariaLabel;
-
-			// Button's ariaLabel gets set to the label by default.
-			// We only want to override that if buttonComponent's ariaLabel is set explicitly.
-			if (this.ariaLabel) {
-				this._button.ariaLabel = this.ariaLabel;
-			}
-
-			if (this.width) {
-				this._button.setWidth(convertSize(this.width.toString()));
-			}
-			if (this.height) {
-				this._button.setHeight(convertSize(this.height.toString()));
-			}
 		}
 
+		if (this.width) {
+			this._button.setWidth(convertSize(this.width.toString()));
+		}
+		if (this.height) {
+			this._button.setHeight(convertSize(this.height.toString()));
+		}
 		this.updateIcon();
 		this._changeRef.detectChanges();
 	}
@@ -183,18 +158,6 @@ 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);
 	}