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._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);
-		this._bottomActionbar = new ActionBar(this._bottomActionbarRef.nativeElement);
+			if (this.collapsable && !this.bottomCollapse) {
-		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 });
 			}
-			}
+
-			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,6 +253,7 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 	}
 
 	private updateTheme(theme: IColorTheme): void {
+		if (!this._config.hideHeader) {
 			const el = <HTMLElement>this._ref.nativeElement;
 			const headerEl: HTMLElement = this.header.nativeElement;
 			let borderColor = theme.getColor(themeColors.DASHBOARD_BORDER);
@@ -287,4 +300,5 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 				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")
 			}
 		}
 	};