add option to hide the widget title (#10222)

* extend widget container

* remove title

* Revert "extend widget container"

* showTitle option

* rename to showHeader

* comments and refactoring

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html

@@ -5,17 +5,17 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div class="widgetWrapper">
-	<div #header>
+	<div #header *ngIf="!_config.hideHeader">
 		<div class="widgetHeader">
 			<span *ngIf="_config.icon" [ngClass]="['icon', _config.icon]"></span>
 			<span *ngIf="_config.name && _showTitle" class="widgetTitle">{{_config.name}}</span>
 			<span *ngIf="!_config.name" class="noTitle"></span>
-			<span #actionbar class="actionbar"></span>
+			<span *ngIf="showActionBar" #actionbar class="actionbar"></span>
 		</div>
 	</div>
 	<ng-template [ngIf]="!collapsed">
 		<ng-template component-host>
 		</ng-template>
 	</ng-template>
-	<span #bottomActionbar class="bottomActionbar {{collapsed ? 'collapsed' : ''}}"></span>
+	<span #bottomActionbar *ngIf="showBottomActionBar" class="bottomActionbar {{collapsed ? 'collapsed' : ''}}"></span>
 </div>

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts

@@ -122,25 +122,37 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 			this.loadWidget();
 		}
 		this._changeref.detectChanges();
-		this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
-		this._bottomActionbar = new ActionBar(this._bottomActionbarRef.nativeElement);
-		if (this._actions) {
-			if (this.collapsable) {
-				this._collapseAction = this.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed);
-				if (this.bottomCollapse) {
-					this._bottomActionbar.push(this._collapseAction, { icon: true, label: false });
-					this._bottomActionbarRef.nativeElement.style.display = 'block';
-				} else {
-					this._actionbar.push(this._collapseAction, { icon: true, label: false });
-				}
+		this._collapseAction = this.collapsable ? this.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed) : undefined;
+
+		// top action bar
+		if (this.showActionBar) {
+			this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
+			if (this.collapsable && !this.bottomCollapse) {
+				this._actionbar.push(this._collapseAction, { icon: true, label: false });
 			}
-			if (this.toggleMore) {
+
+			if (this._actions && this.toggleMore) {
 				this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions as Array<IAction>, this._component.actionsContext), { icon: true, label: false });
 			}
 		}
+
+		// bottom action bar
+		if (this.showBottomActionBar) {
+			this._bottomActionbar = new ActionBar(this._bottomActionbarRef.nativeElement);
+			this._bottomActionbar.push(this._collapseAction, { icon: true, label: false });
+		}
+
 		this.layout();
 	}
 
+	private get showActionBar(): boolean {
+		return !this._config.hideHeader && ((this.collapsable && !this.bottomCollapse) || (this._actions && this.toggleMore));
+	}
+
+	private get showBottomActionBar(): boolean {
+		return this.collapsable && this.bottomCollapse;
+	}
+
 	public refresh(): void {
 		if (!this.collapsed && this._component && this._component.refresh) {
 			this._component.refresh();
@@ -241,50 +253,52 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 	}
 
 	private updateTheme(theme: IColorTheme): void {
-		const el = <HTMLElement>this._ref.nativeElement;
-		const headerEl: HTMLElement = this.header.nativeElement;
-		let borderColor = theme.getColor(themeColors.DASHBOARD_BORDER);
-		let backgroundColor = theme.getColor(colors.editorBackground, true);
-		const foregroundColor = theme.getColor(themeColors.SIDE_BAR_FOREGROUND, true);
-		const border = theme.getColor(colors.contrastBorder, true);
+		if (!this._config.hideHeader) {
+			const el = <HTMLElement>this._ref.nativeElement;
+			const headerEl: HTMLElement = this.header.nativeElement;
+			let borderColor = theme.getColor(themeColors.DASHBOARD_BORDER);
+			let backgroundColor = theme.getColor(colors.editorBackground, true);
+			const foregroundColor = theme.getColor(themeColors.SIDE_BAR_FOREGROUND, true);
+			const border = theme.getColor(colors.contrastBorder, true);
 
-		if (this._config.background_color) {
-			backgroundColor = theme.getColor(this._config.background_color);
-		}
+			if (this._config.background_color) {
+				backgroundColor = theme.getColor(this._config.background_color);
+			}
 
-		if (this._config.border === 'none') {
-			borderColor = undefined;
-		}
+			if (this._config.border === 'none') {
+				borderColor = undefined;
+			}
 
-		if (backgroundColor) {
-			el.style.backgroundColor = backgroundColor.toString();
-		}
+			if (backgroundColor) {
+				el.style.backgroundColor = backgroundColor.toString();
+			}
 
-		if (foregroundColor) {
-			el.style.color = foregroundColor.toString();
-		}
+			if (foregroundColor) {
+				el.style.color = foregroundColor.toString();
+			}
 
-		let borderString = undefined;
-		if (border) {
-			borderString = border.toString();
-			el.style.borderColor = borderString;
-			el.style.borderWidth = '1px';
-			el.style.borderStyle = 'solid';
-		} else if (borderColor) {
-			borderString = borderColor;
-			el.style.border = '1px solid ' + borderColor;
-		} else {
-			el.style.border = 'none';
-		}
+			let borderString = undefined;
+			if (border) {
+				borderString = border.toString();
+				el.style.borderColor = borderString;
+				el.style.borderWidth = '1px';
+				el.style.borderStyle = 'solid';
+			} else if (borderColor) {
+				borderString = borderColor;
+				el.style.border = '1px solid ' + borderColor;
+			} else {
+				el.style.border = 'none';
+			}
 
-		if (this._config.fontSize) {
-			headerEl.style.fontSize = this._config.fontSize;
-		}
-		if (this._config.fontWeight) {
-			headerEl.style.fontWeight = this._config.fontWeight;
-		}
-		if (this._config.padding) {
-			headerEl.style.padding = this._config.padding;
+			if (this._config.fontSize) {
+				headerEl.style.fontSize = this._config.fontSize;
+			}
+			if (this._config.fontWeight) {
+				headerEl.style.fontWeight = this._config.fontWeight;
+			}
+			if (this._config.padding) {
+				headerEl.style.padding = this._config.padding;
+			}
 		}
 	}
 }

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css

@@ -45,7 +45,6 @@ dashboard-widget-wrapper .actionbar {
 
 dashboard-widget-wrapper .bottomActionbar {
 	align-self: center;
-	display: none;
 }
 
 dashboard-widget-wrapper .bottomActionbar.collapsed {

src/sql/workbench/contrib/dashboard/browser/core/dashboardTab.contribution.ts

@@ -281,14 +281,14 @@ const CommonTabs: IDashboardTab[] = [
 		container: {
 			'widgets-container': [
 				{
-					name: localize('databasesWidgetTitle', "Search"),
 					gridItemConfig: {
 						sizex: 3,
-						sizey: 3
+						sizey: 2
 					},
 					widget: {
 						'explorer-widget': {}
-					}
+					},
+					hideHeader: true
 				}
 			]
 		}

src/sql/workbench/contrib/dashboard/browser/core/dashboardWidget.ts

@@ -34,6 +34,7 @@ export interface WidgetConfig {
 	fontSize?: string;
 	fontWeight?: string;
 	padding?: string;
+	hideHeader?: boolean;
 }
 
 export interface TabConfig extends IDashboardTab {

src/sql/workbench/contrib/dashboard/browser/pages/dashboardPageContribution.ts

@@ -57,6 +57,10 @@ export function generateDashboardWidgetSchema(type?: 'database' | 'server', exte
 				properties: schemas,
 				minItems: 1,
 				maxItems: 1
+			},
+			hideHeader: {
+				type: 'boolean',
+				description: localize('azdata.extension.contributes.widget.hideHeader', "Whether to hide the header of the widget, default value is false")
 			}
 		}
 	};