profile page and summary page (#4769)

* add cluster name to page

* implement profile page -1

* fix compilation error due to new method

* profile page 0328

* summary page

* make divcontainer accessible

* handle disposable

* add support for "coming soon" cards

src/sql/azdata.proposed.d.ts

@@ -2760,6 +2760,10 @@ declare module 'azdata' {
 	}
 
 	export interface DivContainer extends Container<DivLayout, DivItemLayout>, DivContainerProperties {
+		/**
+ 		 * An event called when the div is clicked
+ 		 */
+		onDidClick: vscode.Event<any>;
 	}
 
 	export interface FlexContainer extends Container<FlexLayout, FlexItemLayout> {
@@ -3023,6 +3027,11 @@ declare module 'azdata' {
 		 * This is used when its child component is webview
 		 */
 		yOffsetChange?: number;
+
+		/**
+		 * Indicates whether the element is clickable
+		 */
+		clickable?: boolean;
 	}
 
 	export interface CardComponent extends Component, CardProperties {

src/sql/parts/modelComponents/card.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="label" [class]="getClass()" (click)="onCardClick()" (mouseover)="onCardHoverChanged($event)" (mouseout)="onCardHoverChanged($event)"
- tabIndex="0">
+<div *ngIf="label" [class]="getClass()" (click)="onCardClick()" (mouseover)="onCardHoverChanged($event)"
+	(mouseout)="onCardHoverChanged($event)" tabIndex="0">
 	<ng-container *ngIf="isVerticalButton || isDetailsCard">
 		<span *ngIf="hasStatus" class="card-status">
 			<div class="status-content" [style.backgroundColor]="statusColor"></div>
@@ -13,6 +13,9 @@
 					<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
 				</div>
 				<h4 class="card-label">{{label}}</h4>
+				<div *ngFor="let desc of descriptions">
+					<div class="list-item-description">{{desc}}</div>
+				</div>
 			</div>
 		</ng-container>
 
@@ -25,7 +28,8 @@
 						<tr *ngFor="let action of actions">
 							<td class="table-row">{{action.label}}</td>
 							<td *ngIf="action.actionTitle" class="table-row">
-								<a class="pointer prominent" (click)="onDidActionClick(action)">{{action.actionTitle}}</a>
+								<a class="pointer prominent"
+									(click)="onDidActionClick(action)">{{action.actionTitle}}</a>
 							</td>
 						</tr>
 					</table>

src/sql/parts/modelComponents/card.component.ts

@@ -103,7 +103,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
 	}
 
 	private get selectable(): boolean {
-		return this.cardType === 'VerticalButton' || this.cardType === 'ListItem';
+		return this.enabled && (this.cardType === 'VerticalButton' || this.cardType === 'ListItem');
 	}
 
 	// CSS-bound properties

src/sql/parts/modelComponents/divContainer.component.ts

@@ -9,7 +9,7 @@ import {
 	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
 } from '@angular/core';
 
-import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import * as azdata from 'azdata';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
@@ -17,6 +17,8 @@ import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
 import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 
 import types = require('vs/base/common/types');
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 class DivItem {
 	constructor(public descriptor: IComponentDescriptor, public config: azdata.DivItemLayout) { }
@@ -24,7 +26,7 @@ class DivItem {
 
 @Component({
 	template: `
-		<div #divContainer *ngIf="items" class="divContainer" [style.height]="height" [style.width]="width">
+		<div #divContainer *ngIf="items" class="divContainer" [style.height]="height" [style.width]="width"  (click)="onClick()" (keyup)="onKey($event)" [tabIndex]="tabIndex">
 			<div *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
@@ -76,17 +78,24 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
 	private updateOverflowY() {
 		this._overflowY = this.overflowY;
 		if (this._overflowY) {
-			let element = <HTMLElement> this.divContainer.nativeElement;
+			let element = <HTMLElement>this.divContainer.nativeElement;
 			element.style.overflowY = this._overflowY;
 		}
 	}
 
 	private updateScroll() {
-		let element = <HTMLElement> this.divContainer.nativeElement;
+		let element = <HTMLElement>this.divContainer.nativeElement;
 		element.scrollTop = element.scrollTop - this.yOffsetChange;
 		element.dispatchEvent(new Event('scroll'));
 	}
 
+	private onClick() {
+		this.fireEvent({
+			eventType: ComponentEventType.onDidClick,
+			args: undefined
+		});
+	}
+
 	// CSS-bound properties
 	public get height(): string {
 		return this._height;
@@ -111,6 +120,22 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
 		this.setPropertyFromUI<azdata.DivContainerProperties, any>((properties, newValue) => { properties.yOffsetChange = newValue; }, newValue);
 	}
 
+	public get clickable(): boolean {
+		return this.getPropertyOrDefault<azdata.DivContainerProperties, boolean>((props) => props.clickable, false);
+	}
+
+	public get tabIndex(): number {
+		return this.clickable ? 0 : -1;
+	}
+
+	private onKey(e: KeyboardEvent) {
+		let event = new StandardKeyboardEvent(e);
+		if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
+			this.onClick();
+			e.stopPropagation();
+		}
+	}
+
 	private getItemOrder(item: DivItem): number {
 		return item.config ? item.config.order : 0;
 	}

src/sql/workbench/api/node/extHostModelView.ts

@@ -1224,6 +1224,12 @@ class FileBrowserTreeComponentWrapper extends ComponentWrapper implements azdata
 }
 
 class DivContainerWrapper extends ComponentWrapper implements azdata.DivContainer {
+	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
+		super(proxy, handle, type, id);
+		this.properties = {};
+		this._emitterMap.set(ComponentEventType.onDidClick, new Emitter<any>());
+	}
+
 	public get overflowY(): string {
 		return this.properties['overflowY'];
 	}
@@ -1239,6 +1245,11 @@ class DivContainerWrapper extends ComponentWrapper implements azdata.DivContaine
 	public set yOffsetChange(value: number) {
 		this.setProperty('yOffsetChange', value);
 	}
+
+	public get onDidClick(): vscode.Event<any> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
+		return emitter && emitter.event;
+	}
 }
 
 class TreeComponentWrapper<T> extends ComponentWrapper implements azdata.TreeComponent<T> {

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

@@ -832,11 +832,11 @@ export function createApiFactory(
 				},
 				openDialog(dialog: sqlops.window.modelviewdialog.Dialog) {
 					console.warn('the method sqlops.window.modelviewdialog.openDialog has been deprecated, replace it with azdata.window.openDialog');
-					return extHostModelViewDialog.openDialog(dialog);
+					return extHostModelViewDialog.openDialog(dialog as azdata.window.Dialog);
 				},
 				closeDialog(dialog: sqlops.window.modelviewdialog.Dialog) {
 					console.warn('the method sqlops.window.modelviewdialog.closeDialog has been deprecated, replace it with azdata.window.closeDialog');
-					return extHostModelViewDialog.closeDialog(dialog);
+					return extHostModelViewDialog.closeDialog(dialog as azdata.window.Dialog);
 				},
 				createWizardPage(title: string): sqlops.window.modelviewdialog.WizardPage {
 					console.warn('the method sqlops.window.modelviewdialog.createWizardPage has been deprecated, replace it with azdata.window.createWizardPage');
@@ -868,10 +868,10 @@ export function createApiFactory(
 					return extHostModelViewDialog.createButton(label);
 				},
 				openDialog(dialog: sqlops.window.Dialog) {
-					return extHostModelViewDialog.openDialog(dialog);
+					return extHostModelViewDialog.openDialog(dialog as azdata.window.Dialog);
 				},
 				closeDialog(dialog: sqlops.window.Dialog) {
-					return extHostModelViewDialog.closeDialog(dialog);
+					return extHostModelViewDialog.closeDialog(dialog as azdata.window.Dialog);
 				},
 				createWizardPage(title: string): sqlops.window.WizardPage {
 					return extHostModelViewDialog.createWizardPage(title);