fixing the table, form dialog tab layout issues (#1671)

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

@@ -93,10 +93,10 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 		this._button.enabled = this.enabled;
 		this._button.label = this.label;
 		if (this.width) {
-			this._button.setWidth(this.width.toString());
+			this._button.setWidth(this.convertSize(this.width.toString()));
 		}
 		if (this.height) {
-			this._button.setWidth(this.height.toString());
+			this._button.setWidth(this.convertSize(this.height.toString()));
 		}
 		this.updateIcon();
 	}

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

@@ -20,7 +20,7 @@ import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common
 @Component({
 	selector: 'modelview-checkbox',
 	template: `
-		<div #input style="width: 100%"></div>
+		<div #input [style.width]="getWidth()"></div>
 	`
 })
 export default class CheckBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {

src/sql/parts/modelComponents/componentBase.ts

@@ -146,11 +146,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		return this.height ? this.convertSize(this.height) : '';
 	}
 
-	protected convertSize(size: number | string): string {
+	protected convertSize(size: number | string, defaultValue?: string): string {
+		defaultValue = defaultValue || '';
 		if (types.isUndefinedOrNull(size)) {
-			return '100%';
+			return defaultValue;
 		}
-		let convertedSize: string = size ? size.toString() : '100%';
+		let convertedSize: string = size ? size.toString() : defaultValue;
 		if (!convertedSize.toLowerCase().endsWith('px') && !convertedSize.toLowerCase().endsWith('%')) {
 			convertedSize = convertedSize + 'px';
 		}

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

@@ -145,18 +145,26 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 	}
 
 	private getSelectedValue(): string {
-		if (this.values && this.valuesHaveDisplayName()) {
+		if (this.values && this.values.length > 0 && this.valuesHaveDisplayName()) {
-			let valueCategory = (<sqlops.CategoryValue[]>this.values).find(v => v.name === this.value);
+			let selectedValue = <sqlops.CategoryValue>this.value || <sqlops.CategoryValue>this.values[0];
+			if (!this.value) {
+				this.value = selectedValue;
+			}
+			let valueCategory = (<sqlops.CategoryValue[]>this.values).find(v => v.name === selectedValue.name);
+
 			return valueCategory && valueCategory.displayName;
 		} else {
-			return this.value;
+			if (!this.value && this.values && this.values.length > 0) {
+				this.value = <string>this.values[0];
+			}
+			return <string>this.value;
 		}
 	}
 
 	private setSelectedValue(newValue: string): void {
 		if (this.values && this.valuesHaveDisplayName()) {
 			let valueCategory = (<sqlops.CategoryValue[]>this.values).find(v => v.displayName === newValue);
-			this.value = valueCategory && valueCategory.name;
+			this.value = valueCategory;
 		} else {
 			this.value = newValue;
 		}
@@ -164,8 +172,8 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 
 	// CSS-bound properties
 
-	private get value(): string {
+	private get value(): string | sqlops.CategoryValue {
-		return this.getPropertyOrDefault<sqlops.DropDownProperties, string>((props) => props.value, '');
+		return this.getPropertyOrDefault<sqlops.DropDownProperties, string | sqlops.CategoryValue>((props) => props.value, '');
 	}
 
 	private get editable(): boolean {
@@ -180,8 +188,8 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 		return !this.editable ? '' : 'none';
 	}
 
-	private set value(newValue: string) {
+	private set value(newValue: string | sqlops.CategoryValue) {
-		this.setPropertyFromUI<sqlops.DropDownProperties, string>(this.setValueProperties, newValue);
+		this.setPropertyFromUI<sqlops.DropDownProperties, string | sqlops.CategoryValue>(this.setValueProperties, newValue);
 	}
 
 	private get values(): string[] | sqlops.CategoryValue[] {

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

@@ -16,13 +16,15 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
 import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
 import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/dom';
 
 export interface TitledFormItemLayout {
 	title: string;
 	actions?: string[];
 	isFormComponent: Boolean;
 	horizontal: boolean;
-	componentWidth: number;
+	componentWidth?: number | string;
+	componentHeight?: number | string;
 }
 
 export interface FormLayout {
@@ -37,7 +39,7 @@ class FormItem {
 	template: `
 		<div #container *ngIf="items" class="form-table" [style.width]="getFormWidth()" [style.height]="getFormHeight()">
 			<ng-container *ngFor="let item of items">
-			<div class="form-row" *ngIf="isFormComponent(item)">
+			<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
 
 					<ng-container *ngIf="isHorizontal(item)">
 						<div class="form-cell">{{getItemTitle(item)}}</div>
@@ -56,10 +58,10 @@ class FormItem {
 							</div>
 						</div>
 					</ng-container>
-					<div class="form-vertical-container" *ngIf="isVertical(item)">
+					<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)">
 						<div class="form-item-row">{{getItemTitle(item)}}</div>
-						<div class="form-item-row" [style.width]="getComponentWidth(item)">
+						<div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
-							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
+							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
 							</model-component-wrapper>
 						</div>
 						<div *ngIf="itemHasActions(item)" class="form-item-row form-actions-table form-item-last-row">
@@ -101,6 +103,10 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	ngAfterViewInit(): void {
 	}
 
+	public layout(): void {
+		super.layout();
+	}
+
 	/// IComponent implementation
 
 	public get alignItems(): string {
@@ -112,16 +118,21 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	}
 
 	private getFormWidth(): string {
-		return this.convertSize(this._formLayout && this._formLayout.width);
+		return this.convertSize(this._formLayout && this._formLayout.width, '100%');
 	}
 
 	private getFormHeight(): string {
-		return this.convertSize(this._formLayout && this._formLayout.height);
+		return this.convertSize(this._formLayout && this._formLayout.height, '100%');
 	}
 
 	private getComponentWidth(item: FormItem): string {
 		let itemConfig = item.config;
-		return (itemConfig && itemConfig.componentWidth) ? itemConfig.componentWidth + 'px' : '';
+		return (itemConfig && itemConfig.componentWidth) ? this.convertSize(itemConfig.componentWidth, '') : '';
+	}
+
+	private getRowHeight(item: FormItem): string {
+		let itemConfig = item.config;
+		return (itemConfig && itemConfig.componentHeight) ? this.convertSize(itemConfig.componentHeight, '') : '';
 	}
 
 	private getItemTitle(item: FormItem): string {

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

@@ -23,7 +23,7 @@ import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectio
 @Component({
 	selector: 'modelview-table',
 	template: `
-		<div #table style="width: 100%"></div>
+		<div #table style="width: 100%;height:100%"></div>
 	`
 })
 export default class TableComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
@@ -92,9 +92,8 @@ export default class TableComponent extends ComponentBase implements IComponent,
 			let options = <Slick.GridOptions<any>>{
 				syncColumnCellResize: true,
 				enableColumnReorder: false,
-				rowHeight: 45,
 				enableCellNavigation: true,
-				forceFitColumns: true
+				forceFitColumns: true,
 			};
 
 			this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this._tableData, this._tableColumns, options);

src/sql/platform/dialog/dialogPane.ts

@@ -67,6 +67,7 @@ export class DialogPane extends Disposable implements IThemable {
 					this._body.appendChild(tabContainer);
 					this.initializeModelViewContainer(tabContainer, tab.content, tab);
 					this._tabbedPanel.onTabChange(e => {
+						tabContainer.style.height = (this.getTabDimension().height - this._tabbedPanel.headersize) + 'px';
 						this._onTabChange.fire(tab.content);
 					});
 					this._tabbedPanel.pushTab({
@@ -91,7 +92,7 @@ export class DialogPane extends Disposable implements IThemable {
 	}
 
 	private getTabDimension(): DOM.Dimension {
-		return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body))
+		return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body));
 	}
 
 	public layout(): void {

src/sql/sqlops.proposed.d.ts

@@ -232,7 +232,8 @@ declare module 'sqlops' {
 
 	export interface FormItemLayout {
 		horizontal?: boolean;
-		componentWidth?: number;
+		componentWidth?: number | string;
+		componentHeight?: number | string;
 	}
 
 	export interface FormLayout {
@@ -354,7 +355,7 @@ declare module 'sqlops' {
 	}
 
 	export interface DropDownProperties extends ComponentProperties {
-		value?: string;
+		value?: string | CategoryValue;
 		values?: string[] | CategoryValue[];
 		editable?: boolean;
 	}
@@ -418,7 +419,7 @@ declare module 'sqlops' {
 	}
 
 	export interface DropDownComponent extends Component, DropDownProperties {
-		value: string;
+		value: string | CategoryValue;
 		values: string[] | CategoryValue[];
 		onValueChanged: vscode.Event<any>;
 	}

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

@@ -771,10 +771,10 @@ class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownCompone
 		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<any>());
 	}
 
-	public get value(): string {
+	public get value(): string | sqlops.CategoryValue {
 		return this.properties['value'];
 	}
-	public set value(v: string) {
+	public set value(v: string | sqlops.CategoryValue) {
 		this.setProperty('value', v);
 	}