fixed several model view issues (#1640)

* fixed several model view issues

src/sql/base/browser/ui/button/button.ts

@@ -33,4 +33,12 @@ export class Button extends vsButton {
 	public set title(value: string) {
 		this.$el.title(value);
 	}
+
+	public setHeight(value: string) {
+		this.$el.style('height', value);
+	}
+
+	public setWidth(value: string) {
+		this.$el.style('width', value);
+	}
 }

src/sql/base/browser/ui/inputBox/inputBox.ts

@@ -32,6 +32,7 @@ export class InputBox extends vsInputBox {
 	private _onLoseFocus = this._register(new Emitter<OnLoseFocusParams>());
 	public onLoseFocus: Event<OnLoseFocusParams> = this._onLoseFocus.event;
 
+	private _isTextAreaInput: boolean;
 
 	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
 		super(container, contextViewProvider, options);
@@ -48,6 +49,10 @@ export class InputBox extends vsInputBox {
 			self._onLoseFocus.fire({ value: self.value, hasChanged: self._lastLoseFocusValue !== self.value });
 			self._lastLoseFocusValue = self.value;
 		});
+
+		if (options && options.type === 'textarea') {
+			this._isTextAreaInput = true;
+		}
 	}
 
 	public style(styles: IInputBoxStyles): void {
@@ -75,6 +80,12 @@ export class InputBox extends vsInputBox {
 		this.inputElement.setAttribute('cols', value.toString());
 	}
 
+	public layout(): void {
+		if (!this._isTextAreaInput) {
+			super.layout();
+		}
+	}
+
 	public disable(): void {
 		super.disable();
 		this.inputBackground = this.disabledInputBackground;
@@ -84,7 +95,9 @@ export class InputBox extends vsInputBox {
 	}
 
 	public setHeight(value: string) {
-		this.inputElement.style.height = value;
+		if (this._isTextAreaInput) {
+			this.inputElement.style.height = value;
+		}
 	}
 
 	public isEnabled(): boolean {

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

@@ -55,8 +55,6 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 
 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
-
-
 			this._button = new Button(this._inputContainer.nativeElement);
 
 			this._register(this._button);
@@ -94,6 +92,12 @@ export default class ButtonComponent extends ComponentBase implements IComponent
 		super.setProperties(properties);
 		this._button.enabled = this.enabled;
 		this._button.label = this.label;
+		if (this.width) {
+			this._button.setWidth(this.width.toString());
+		}
+		if (this.height) {
+			this._button.setWidth(this.height.toString());
+		}
 		this.updateIcon();
 	}
 

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

@@ -50,7 +50,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 
 			this._register(this._input);
 			this._register(this._input.onChange(e => {
-				this.value = this._input.checked;
+				this.checked = this._input.checked;
 				this._onEventEmitter.fire({
 					eventType: ComponentEventType.onDidChange,
 					args: e
@@ -88,10 +88,10 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 	// CSS-bound properties
 
 	public get checked(): boolean {
-		return this.getPropertyOrDefault<sqlops.CheckBoxProperties, boolean>((props) => props.value, false);
+		return this.getPropertyOrDefault<sqlops.CheckBoxProperties, boolean>((props) => props.checked, false);
 	}
 
-	public set value(newValue: boolean) {
+	public set checked(newValue: boolean) {
 		this.setPropertyFromUI<sqlops.CheckBoxProperties, boolean>((properties, value) => { properties.checked = value; }, newValue);
 	}
 

src/sql/parts/modelComponents/componentBase.ts

@@ -12,7 +12,7 @@ import {
 import * as types from 'vs/base/common/types';
 
 import { IComponent, IComponentDescriptor, IModelStore, IComponentEventArgs, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
-import { FlexLayout, FlexItemLayout } from 'sqlops';
+import * as sqlops from 'sqlops';
 import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost.directive';
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { Event, Emitter } from 'vs/base/common/event';
@@ -112,7 +112,36 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		this.setProperties(properties);
 	}
 
+	public get height(): number | string {
+		return this.getPropertyOrDefault<sqlops.ComponentProperties, number | string>((props) => props.height, undefined);
+	}
+
+	public set height(newValue: number | string) {
+		this.setPropertyFromUI<sqlops.ComponentProperties, number | string>((props, value) => props.height = value, newValue);
+	}
+
+	public get width(): number | string {
+		return this.getPropertyOrDefault<sqlops.ComponentProperties, number | string>((props) => props.width, undefined);
+	}
+
+	public set width(newValue: number | string) {
+		this.setPropertyFromUI<sqlops.ComponentProperties, number | string>((props, value) => props.width = value, newValue);
+	}
+
+	protected convertSizeToNumber(size: number | string): number {
+		if (size && typeof (size) === 'string') {
+			if (size.toLowerCase().endsWith('px')) {
+				return +size.replace('px', '');
+			}
+			return 0;
+		}
+		return +size;
+	}
+
 	protected convertSize(size: number | string): string {
+		if (types.isUndefinedOrNull(size)) {
+			return '';
+		}
 		let convertedSize: string = size ? size.toString() : '100%';
 		if (!convertedSize.toLowerCase().endsWith('px') && !convertedSize.toLowerCase().endsWith('%')) {
 			convertedSize = convertedSize + 'px';

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

@@ -69,7 +69,7 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 			this._register(attachEditableDropdownStyler(this._editableDropdown, this.themeService));
 			this._register(this._editableDropdown.onValueChange(e => {
 				if (this.editable) {
-					this.value = this._editableDropdown.value;
+					this.setSelectedValue(this._editableDropdown.value);
 					this._onEventEmitter.fire({
 						eventType: ComponentEventType.onDidChange,
 						args: e
@@ -78,14 +78,14 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 			}));
 		}
 		if (this._dropDownContainer) {
-			this._selectBox = new SelectBox(this.values || [], this.value, this.contextViewService, this._dropDownContainer.nativeElement);
+			this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), this.contextViewService, this._dropDownContainer.nativeElement);
 			this._selectBox.render(this._dropDownContainer.nativeElement);
 			this._register(this._selectBox);
 
 			this._register(attachSelectBoxStyler(this._selectBox, this.themeService));
 			this._register(this._selectBox.onDidSelect(e => {
 				if (!this.editable) {
-					this.value = this._selectBox.value;
+					this.setSelectedValue(this._selectBox.value);
 					this._onEventEmitter.fire({
 						eventType: ComponentEventType.onDidChange,
 						args: e
@@ -113,14 +113,14 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		if (this.editable) {
-			this._editableDropdown.values = this.values ? this.values : [];
+			this._editableDropdown.values = this.getValues();
 			if (this.value) {
-				this._editableDropdown.value = this.value;
+				this._editableDropdown.value = this.getSelectedValue();
 			}
 			this._editableDropdown.enabled = this.enabled;
 		} else {
-			this._selectBox.setOptions(this.values || []);
-			this._selectBox.selectWithOptionName(this.value);
+			this._selectBox.setOptions(this.getValues());
+			this._selectBox.selectWithOptionName(this.getSelectedValue());
 			if (this.enabled) {
 				this._selectBox.enable();
 			} else {
@@ -129,6 +129,39 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 		}
 	}
 
+	private getValues(): string[] {
+		if (this.values && this.values.length > 0) {
+			if (!this.valuesHaveDisplayName()) {
+				return this.values as string[];
+			} else {
+				return (<sqlops.CategoryValue[]>this.values).map(v => v.displayName);
+			}
+		}
+		return [];
+	}
+
+	private valuesHaveDisplayName(): boolean {
+		return typeof (this.values[0]) !== 'string';
+	}
+
+	private getSelectedValue(): string {
+		if (this.values && this.valuesHaveDisplayName()) {
+			let valueCategory = (<sqlops.CategoryValue[]>this.values).find(v => v.name === this.value);
+			return valueCategory && valueCategory.displayName;
+		} else {
+			return 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;
+		} else {
+			this.value = newValue;
+		}
+	}
+
 	// CSS-bound properties
 
 	private get value(): string {
@@ -139,11 +172,11 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 		return this.getPropertyOrDefault<sqlops.DropDownProperties, boolean>((props) => props.editable, false);
 	}
 
-	public getEditableDisplay() : string {
+	public getEditableDisplay(): string {
 		return this.editable ? '' : 'none';
 	}
 
-	public getNotEditableDisplay() : string {
+	public getNotEditableDisplay(): string {
 		return !this.editable ? '' : 'none';
 	}
 
@@ -151,12 +184,12 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 		this.setPropertyFromUI<sqlops.DropDownProperties, string>(this.setValueProperties, newValue);
 	}
 
-	private get values(): string[] {
-		return this.getPropertyOrDefault<sqlops.DropDownProperties, string[]>((props) => props.values, undefined);
+	private get values(): string[] | sqlops.CategoryValue[] {
+		return this.getPropertyOrDefault<sqlops.DropDownProperties, string[] | sqlops.CategoryValue[]>((props) => props.values, undefined);
 	}
 
-	private set values(newValue: string[]) {
-		this.setPropertyFromUI<sqlops.DropDownProperties, string[]>(this.setValuesProperties, newValue);
+	private set values(newValue: string[] | sqlops.CategoryValue[]) {
+		this.setPropertyFromUI<sqlops.DropDownProperties, string[] | sqlops.CategoryValue[]>(this.setValuesProperties, newValue);
 	}
 
 	private setValueProperties(properties: sqlops.DropDownProperties, value: string): void {

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

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./flexContainer';
 
-import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
 	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
 } from '@angular/core';
 
@@ -18,13 +19,13 @@ import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentW
 import types = require('vs/base/common/types');
 
 class FlexItem {
-	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {}
+	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) { }
 }
 
 @Component({
 	template: `
 		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height">
+				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width">
 			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.order]="getItemOrder(item)" >
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
@@ -40,6 +41,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	private _alignItems: string;
 	private _alignContent: string;
 	private _height: string;
+	private _width: string;
 
 	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
 		super(changeRef);
@@ -58,18 +60,14 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 
 	/// IComponent implementation
 
-	public setLayout (layout: FlexLayout): void {
+	public setLayout(layout: FlexLayout): void {
 		this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
 		this._justifyContent = layout.justifyContent ? layout.justifyContent : '';
 		this._alignItems = layout.alignItems ? layout.alignItems : '';
 		this._alignContent = layout.alignContent ? layout.alignContent : '';
-		if (types.isUndefinedOrNull(layout.height)) {
-			this._height = '';
-		} else if (types.isNumber(layout.height)) {
-			this._height = layout.height + 'px';
-		} else {
-			this._height = layout.height;
-		}
+		this._height = this.convertSize(layout.height);
+		this._width = this.convertSize(layout.width);
+
 		this.layout();
 	}
 
@@ -90,6 +88,10 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		return this._height;
 	}
 
+	public get width(): string {
+		return this._width;
+	}
+
 	public get alignContent(): string {
 		return this._alignContent;
 	}

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

@@ -35,10 +35,10 @@ class FormItem {
 
 @Component({
 	template: `
-		<div #container *ngIf="items" class="form-table" [style.width]="getFormWidth()">
+		<div #container *ngIf="items" class="form-table" [style.width]="getFormWidth()" [style.height]="getFormHeight()">
 			<ng-container *ngFor="let item of items">
-			<div class="form-row" >
-				<ng-container *ngIf="isFormComponent(item)">
+			<div class="form-row" *ngIf="isFormComponent(item)">
+
 					<ng-container *ngIf="isHorizontal(item)">
 						<div class="form-cell">{{getItemTitle(item)}}</div>
 						<div class="form-cell">
@@ -69,7 +69,6 @@ class FormItem {
 								</div>
 							</div>
 					</div>
-				</ng-container>
 			</div>
 			</ng-container>
 		</div>
@@ -113,7 +112,11 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	}
 
 	private getFormWidth(): string {
-		return this._formLayout && this._formLayout.width ? +this._formLayout.width + 'px' : '100%';
+		return this.convertSize(this._formLayout && this._formLayout.width);
+	}
+
+	private getFormHeight(): string {
+		return this.convertSize(this._formLayout && this._formLayout.height);
 	}
 
 	private getComponentWidth(item: FormItem): string {

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

@@ -73,7 +73,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 
 		}
 		if (this._textareaContainer) {
-			let textAreaInputOptions = Object.assign({}, inputOptions, { flexibleHeight: true });
+			let textAreaInputOptions = Object.assign({}, inputOptions, { flexibleHeight: true, type: 'textarea' });
 			this._textAreaInput = new InputBox(this._textareaContainer.nativeElement, this.contextViewService, textAreaInputOptions);
 			this.registerInput(this._textAreaInput, () => this.multiline);
 		}
@@ -124,6 +124,16 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 
 	public layout(): void {
 		this._changeRef.detectChanges();
+		this.layoutInputBox();
+	}
+
+	private layoutInputBox(): void {
+		if (this.width) {
+			this.inputElement.width = this.convertSizeToNumber(this.width);
+		}
+		if (this.height) {
+			this.inputElement.setHeight(this.convertSize(this.height));
+		}
 	}
 
 	public setLayout(layout: any): void {
@@ -154,13 +164,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		input.setAriaLabel(this.ariaLabel);
 		input.setPlaceHolder(this.placeHolder);
 		input.setEnabled(this.enabled);
-		if (this.width) {
-			input.width = this.width;
-		}
-		if (this.height) {
-			input.setHeight(this.convertSize(this.height));
-			input.layout();
-		}
+		this.layoutInputBox();
 		if (this.multiline) {
 			if (this.rows) {
 				this.inputElement.rows = this.rows;
@@ -200,22 +204,6 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		this.setPropertyFromUI<sqlops.InputBoxProperties, string>((props, value) => props.placeHolder = value, newValue);
 	}
 
-	public get height(): number {
-		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.height, undefined);
-	}
-
-	public set height(newValue: number) {
-		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.height = value, newValue);
-	}
-
-	public get width(): number {
-		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.width, undefined);
-	}
-
-	public set width(newValue: number) {
-		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.width = value, newValue);
-	}
-
 	public set columns(newValue: number) {
 		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.columns = value, newValue);
 	}

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

@@ -109,20 +109,4 @@ export default class ListBoxComponent extends ComponentBase implements IComponen
 	private set selectedRow(newValue: number) {
 		this.setPropertyFromUI<sqlops.ListBoxProperties, number>((props, value) => props.selectedRow = value, newValue);
 	}
-
-	public get height(): number {
-		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.height, undefined);
-	}
-
-	public set height(newValue: number) {
-		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.height = value, newValue);
-	}
-
-	public get width(): number {
-		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.width, undefined);
-	}
-
-	public set width(newValue: number) {
-		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.width = value, newValue);
-	}
 }

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

@@ -25,10 +25,18 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { memoize } from 'vs/base/common/decorators';
 import { generateUuid } from 'vs/base/common/uuid';
+import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
+import { Event, Emitter } from 'vs/base/common/event';
 import * as nls from 'vs/nls';
 
 const componentRegistry = <IComponentRegistry>Registry.as(Extensions.ComponentContribution);
 
+export interface ModelComponentParams extends IBootstrapParams {
+
+	onLayoutRequested: Event<string>;
+	modelViewId: string;
+}
+
 @Component({
 	selector: 'model-component-wrapper',
 	template: `
@@ -46,6 +54,7 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit {
 	}
 
 	private _componentInstance: IComponent;
+	private _modelViewId: string;
 
 	@ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective;
 
@@ -54,9 +63,18 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit {
 		@Inject(forwardRef(() => ElementRef)) private _ref: ElementRef,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeref: ChangeDetectorRef,
 		@Inject(forwardRef(() => Injector)) private _injector: Injector,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(IBootstrapParams) private _params: ModelComponentParams
 	) {
 		super();
+		if (_params && _params.onLayoutRequested) {
+			this._modelViewId = _params.modelViewId;
+			_params.onLayoutRequested(modelViewId => {
+				if (modelViewId === this._modelViewId) {
+					this.layout();
+				}
+			});
+		}
 	}
 
 	ngOnInit() {

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

@@ -62,6 +62,7 @@ export class ModelViewContent extends ViewBase implements OnInit, IModelView {
 	}
 
 	public layout(): void {
+		this.changeRef.detectChanges();
 	}
 
 	public get id(): string {

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

@@ -127,13 +127,19 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	/// IComponent implementation
 
 	public layout(): void {
-		this._table.layout(new Dimension(
-			this.width ? this.width : getContentWidth(this._inputContainer.nativeElement),
-			this.height ? this.height : getContentHeight(this._inputContainer.nativeElement)));
+		this.layoutTable();
 
 		this._changeRef.detectChanges();
 	}
 
+	private layoutTable(): void {
+		let width: number = this.convertSizeToNumber(this.width);
+		let height: number = this.convertSizeToNumber(this.height);
+		this._table.layout(new Dimension(
+			width && width > 0 ? width : getContentWidth(this._inputContainer.nativeElement),
+			height && height > 0 ? height : getContentHeight(this._inputContainer.nativeElement)));
+	}
+
 	public setLayout(): void {
 		// TODO allow configuring the look and feel
 		this.layout();
@@ -149,10 +155,8 @@ export default class TableComponent extends ComponentBase implements IComponent,
 		if (this.selectedRows) {
 			this._table.setSelectedRows(this.selectedRows);
 		}
-		this._table.layout(new Dimension(
-			this.width ? this.width : getContentWidth(this._inputContainer.nativeElement),
-			this.height ? this.height : getContentHeight(this._inputContainer.nativeElement)));
 
+		this.layoutTable();
 		this.validate();
 	}
 
@@ -181,20 +185,4 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	public set selectedRows(newValue: number[]) {
 		this.setPropertyFromUI<sqlops.TableComponentProperties, number[]>((props, value) => props.selectedRows = value, newValue);
 	}
-
-	public get height(): number {
-		return this.getPropertyOrDefault<sqlops.TableComponentProperties, number>((props) => props.height, undefined);
-	}
-
-	public set height(newValue: number) {
-		this.setPropertyFromUI<sqlops.TableComponentProperties, number>((props, value) => props.height = value, newValue);
-	}
-
-	public get width(): number {
-		return this.getPropertyOrDefault<sqlops.TableComponentProperties, number>((props) => props.width, undefined);
-	}
-
-	public set width(newValue: number) {
-		this.setPropertyFromUI<sqlops.TableComponentProperties, number>((props, value) => props.width = value, newValue);
-	}
 }

src/sql/platform/dialog/dialogContainer.component.ts

@@ -15,6 +15,7 @@ import { ComponentEventType } from '../../parts/modelComponents/interfaces';
 export interface DialogComponentParams extends IBootstrapParams {
 	modelViewId: string;
 	validityChangedCallback: (valid: boolean) => void;
+	onLayoutRequested: Event<string>;
 }
 
 @Component({
@@ -35,6 +36,11 @@ export class DialogContainer implements AfterContentInit {
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
 		@Inject(IBootstrapParams) private _params: DialogComponentParams) {
 		this.modelViewId = this._params.modelViewId;
+		this._params.onLayoutRequested(e => {
+			if (this.modelViewId === e) {
+				this.layout();
+			}
+		});
 	}
 
 	ngAfterContentInit(): void {

src/sql/platform/dialog/dialogPane.ts

@@ -21,6 +21,7 @@ import { Builder } from 'vs/base/browser/builder';
 import { IThemable } from 'vs/platform/theme/common/styler';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { Emitter } from 'vs/base/common/event';
 
 export class DialogPane extends Disposable implements IThemable {
 	private _tabbedPanel: TabbedPanel;
@@ -34,6 +35,9 @@ export class DialogPane extends Disposable implements IThemable {
 	private _tabBar: HTMLElement;
 	private _tabs: HTMLElement[];
 	private _tabContent: HTMLElement[];
+	private _selectedTabIndex: number = 0; //TODO: can be an option
+	private _onTabChange = new Emitter<string>();
+	private _selectedTabContent: string;
 
 	constructor(
 		private _title: string,
@@ -55,10 +59,16 @@ export class DialogPane extends Disposable implements IThemable {
 			} else {
 				this._tabbedPanel = new TabbedPanel(this._body);
 				this._content.forEach((tab, tabIndex) => {
+					if (this._selectedTabIndex === tabIndex) {
+						this._selectedTabContent = tab.content;
+					}
 					let tabContainer = document.createElement('div');
 					tabContainer.style.display = 'none';
 					this._body.appendChild(tabContainer);
 					this.initializeModelViewContainer(tabContainer, tab.content, tab);
+					this._tabbedPanel.onTabChange(e => {
+						this._onTabChange.fire(tab.content);
+					});
 					this._tabbedPanel.pushTab({
 						title: tab.title,
 						identifier: 'dialogPane.' + this._title + '.' + tabIndex,
@@ -70,7 +80,7 @@ export class DialogPane extends Disposable implements IThemable {
 								container.appendChild(tabContainer);
 								tabContainer.style.display = 'block';
 							},
-							layout: (dimension) => { }
+							layout: (dimension) => { this.getTabDimension(); }
 						} as IPanelView
 					} as IPanelTab);
 				});
@@ -80,9 +90,14 @@ export class DialogPane extends Disposable implements IThemable {
 		return this._body;
 	}
 
+	private getTabDimension(): DOM.Dimension {
+		return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body))
+	}
+
 	public layout(): void {
 		if (this._tabbedPanel) {
 			this._tabbedPanel.layout(new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body)));
+			this._onTabChange.fire(this._selectedTabContent);
 		}
 	}
 
@@ -101,10 +116,13 @@ export class DialogPane extends Disposable implements IThemable {
 					if (tab) {
 						tab.notifyValidityChanged(valid);
 					}
-				}
+				},
+				onLayoutRequested: this._onTabChange.event
 			} as DialogComponentParams,
 			undefined,
-			(moduleRef) => this._moduleRefs.push(moduleRef));
+			(moduleRef) => {
+				return this._moduleRefs.push(moduleRef);
+			});
 	}
 
 	public show(): void {

src/sql/platform/dialog/media/dialogModal.css

@@ -29,4 +29,4 @@
 
 .footer-button.dialogModal-hidden {
 	margin: 0;
-}
+}

src/sql/sqlops.proposed.d.ts

@@ -207,7 +207,15 @@ declare module 'sqlops' {
 		 */
 		alignContent?: string;
 
+		/**
+		 * Container Height
+		 */
 		height?: number | string;
+
+		/**
+		 * Container Width
+		 */
+		width?: number | string;
 	}
 
 	export interface FlexItemLayout {
@@ -228,7 +236,8 @@ declare module 'sqlops' {
 	}
 
 	export interface FormLayout {
-		width?: number;
+		width?: number | string;
+		height?: number | string;
 	}
 
 	export interface GroupLayout {
@@ -294,12 +303,15 @@ declare module 'sqlops' {
 
 	export type InputBoxInputType = 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'range' | 'search' | 'text' | 'time' | 'url' | 'week';
 
-	export interface InputBoxProperties {
+	export interface ComponentProperties {
+		height: number | string;
+		width: number | string;
+	}
+
+	export interface InputBoxProperties extends ComponentProperties {
 		value?: string;
 		ariaLabel?: string;
 		placeHolder?: string;
-		height: number;
-		width: number;
 		inputType?: InputBoxInputType;
 		required?: boolean;
 		multiline?: boolean;
@@ -313,7 +325,7 @@ declare module 'sqlops' {
 		value: string
 	}
 
-	export interface TableComponentProperties {
+	export interface TableComponentProperties extends ComponentProperties {
 		data: any[][];
 		columns: string[] | TableColumn[];
 		selectedRows?: number[];
@@ -341,9 +353,9 @@ declare module 'sqlops' {
 		value?: string;
 	}
 
-	export interface DropDownProperties {
+	export interface DropDownProperties extends ComponentProperties {
 		value?: string;
-		values?: string[];
+		values?: string[] | CategoryValue[];
 		editable?: boolean;
 	}
 
@@ -352,7 +364,7 @@ declare module 'sqlops' {
 		categoryValues: CategoryValue[];
 		valueType: DeclarativeDataType;
 		isReadOnly: boolean;
-		width: number|string;
+		width: number | string;
 	}
 
 	export interface DeclarativeTableProperties {
@@ -371,7 +383,7 @@ declare module 'sqlops' {
 		html?: string;
 	}
 
-	export interface ButtonProperties {
+	export interface ButtonProperties extends ComponentProperties {
 		label?: string;
 		iconPath?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri };
 	}
@@ -407,7 +419,7 @@ declare module 'sqlops' {
 
 	export interface DropDownComponent extends Component, DropDownProperties {
 		value: string;
-		values: string[];
+		values: string[] | CategoryValue[];
 		onValueChanged: vscode.Event<any>;
 	}
 

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

@@ -342,7 +342,6 @@ class InternalItemConfig {
 	}
 }
 
-
 class ComponentWrapper implements sqlops.Component {
 	public properties: { [key: string]: any } = {};
 	public layout: any;
@@ -385,6 +384,22 @@ class ComponentWrapper implements sqlops.Component {
 		this.setProperty('enabled', value);
 	}
 
+	public get height(): number | string {
+		return this.properties['height'];
+	}
+
+	public set height(v: number | string) {
+		this.setProperty('height', v);
+	}
+
+	public get width(): number | string {
+		return this.properties['width'];
+	}
+
+	public set width(v: number | string) {
+		this.setProperty('width', v);
+	}
+
 	public toComponentShape(): IComponentShape {
 		return <IComponentShape>{
 			id: this.id,
@@ -553,13 +568,6 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone
 		this.setProperty('placeHolder', v);
 	}
 
-	public get height(): number {
-		return this.properties['height'];
-	}
-	public set height(v: number) {
-		this.setProperty('height', v);
-	}
-
 	public get rows(): number {
 		return this.properties['rows'];
 	}
@@ -588,13 +596,6 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone
 		this.setProperty('columns', v);
 	}
 
-	public get width(): number {
-		return this.properties['width'];
-	}
-	public set width(v: number) {
-		this.setProperty('width', v);
-	}
-
 	public get multiline(): boolean {
 		return this.properties['multiline'];
 	}
@@ -777,10 +778,10 @@ class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownCompone
 		this.setProperty('value', v);
 	}
 
-	public get values(): string[] {
+	public get values(): string[] | sqlops.CategoryValue[] {
 		return this.properties['values'];
 	}
-	public set values(v: string[]) {
+	public set values(v: string[] | sqlops.CategoryValue[]) {
 		this.setProperty('values', v);
 	}