From 04ec347eebf43e44b07f29e1922464604bcbe972 Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Thu, 16 Apr 2020 15:59:26 -0700
Subject: [PATCH] fix clipping issue (#10020)

* fix clipping issue

* remove hardcoded height
---
 .../dashboardGridContainer.component.ts       |  4 +-
 .../dashboardHomeContainer.component.ts       |  4 +-
 .../browser/core/dashboardPage.component.html | 48 ++++++++++---------
 .../browser/core/dashboardPage.component.ts   |  4 ++
 4 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardGridContainer.component.ts b/src/sql/workbench/contrib/dashboard/browser/containers/dashboardGridContainer.component.ts
index df8429e785..e19977a57e 100644
--- a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardGridContainer.component.ts
+++ b/src/sql/workbench/contrib/dashboard/browser/containers/dashboardGridContainer.component.ts
@@ -5,7 +5,7 @@
 
 import 'vs/css!./dashboardGridContainer';
 
-import { Component, Inject, Input, forwardRef, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, ContentChild } from '@angular/core';
+import { Component, Inject, Input, forwardRef, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
 
 import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
 import { TabConfig, WidgetConfig } from 'sql/workbench/contrib/dashboard/browser/core/dashboardWidget';
@@ -206,7 +206,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy {
 
 	@ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList<DashboardWidgetWrapper>;
 	@ViewChildren(WebviewContent) private _webViews: QueryList<WebviewContent>;
-	@ContentChild(ScrollableDirective) private _scrollable: ScrollableDirective;
+	@ViewChild(ScrollableDirective) private _scrollable: ScrollableDirective;
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: CommonServiceInterface,
 		@Inject(forwardRef(() => ElementRef)) protected _el: ElementRef,
diff --git a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts b/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts
index df6b13f920..87a8b512ca 100644
--- a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts
+++ b/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts
@@ -5,7 +5,7 @@
 
 import 'vs/css!./dashboardHomeContainer';
 
-import { Component, forwardRef, Input, ChangeDetectorRef, Inject, ViewChild, ContentChild, ElementRef } from '@angular/core';
+import { Component, forwardRef, Input, ChangeDetectorRef, Inject, ViewChild, ElementRef } from '@angular/core';
 
 import { DashboardWidgetContainer } from 'sql/workbench/contrib/dashboard/browser/containers/dashboardWidgetContainer.component';
 import { WidgetConfig } from 'sql/workbench/contrib/dashboard/browser/core/dashboardWidget';
@@ -44,7 +44,7 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 	@Input() private properties: WidgetConfig;
 	@ViewChild('propertiesClass') private _propertiesClass: DashboardWidgetWrapper;
 	@ViewChild('propertiesContainer') private _propertiesContainer: ElementRef;
-	@ContentChild(ScrollableDirective) private _scrollable: ScrollableDirective;
+	@ViewChild(ScrollableDirective) private _scrollable: ScrollableDirective;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) _cd: ChangeDetectorRef,
diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.html b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.html
index 4b4ae5a31e..f634db9934 100644
--- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.html
+++ b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.html
@@ -8,28 +8,30 @@
 	[actions]="panelActions">
 	<div #toolbar [style.display]="showToolbar ? 'block': 'none'" class="editor-toolbar">
 	</div>
-	<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
-		[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [type]="tab.type" [iconClass]="tab.iconClass">
-		<ng-template>
-			<dashboard-home-container *ngIf="tab.id === 'homeTab'; else not_home" [properties]="propertiesWidget"
-				[tab]="tab">
-			</dashboard-home-container>
-			<ng-template #not_home>
-				<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
-				</dashboard-webview-container>
-				<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
-				</dashboard-widget-container>
-				<dashboard-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
-				</dashboard-modelview-container>
-				<dashboard-controlhost-container *ngIf="getContentType(tab) === 'controlhost-container'" [tab]="tab">
-				</dashboard-controlhost-container>
-				<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
-				</dashboard-nav-section>
-				<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
-				</dashboard-grid-container>
-				<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
-				</dashboard-error-container>
+	<div [style.height]="getContentAreaHeight()">
+		<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
+			[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [type]="tab.type"
+			[iconClass]="tab.iconClass">
+			<ng-template>
+				<dashboard-home-container *ngIf="tab.id === 'homeTab'; else not_home" [properties]="propertiesWidget" [tab]="tab">
+				</dashboard-home-container>
+				<ng-template #not_home>
+					<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
+					</dashboard-webview-container>
+					<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
+					</dashboard-widget-container>
+					<dashboard-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
+					</dashboard-modelview-container>
+					<dashboard-controlhost-container *ngIf="getContentType(tab) === 'controlhost-container'" [tab]="tab">
+					</dashboard-controlhost-container>
+					<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
+					</dashboard-nav-section>
+					<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
+					</dashboard-grid-container>
+					<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
+					</dashboard-error-container>
+				</ng-template>
 			</ng-template>
-		</ng-template>
-	</tab>
+		</tab>
+	</div>
 </panel>
diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts
index 64a4a9e975..5b68bf5242 100644
--- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts
+++ b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts
@@ -553,4 +553,8 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
 		const border = theme.getColor(DASHBOARD_BORDER);
 		this.toolbarContainer.nativeElement.style.borderBottomColor = border.toString();
 	}
+
+	public getContentAreaHeight() {
+		return this.showToolbar ? `calc(100% - ${(<HTMLElement>this.toolbarContainer.nativeElement).clientHeight}px)` : '100%';
+	}
 }