added properties to inputbox and form to be able to change style fro… (#1371)

* added properties to inputbox and form to be able to change style from extension
* moved registerModelViewProvider from dashboard to ui namespace

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

@@ -18,7 +18,7 @@ import { CommonServiceInterface } from 'sql/services/common/commonServiceInterfa
 import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 
 @Component({
-	selector: 'inputBox',
+	selector: 'checkbox',
 	template: `
 		<div #input style="width: 100%"></div>
 	`

src/sql/parts/modelComponents/componentBase.ts

@@ -86,10 +86,10 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		});
 	}
 
-	public get title(): string {
+	public get enabled(): boolean {
 		let properties = this.getProperties();
-		let title = properties['title'];
-		return title ? <string>title : '';
+		let enabled = properties['enabled'];
+		return enabled !== undefined ? <boolean>enabled : true;
 	}
 
 	public get valid(): boolean {

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

@@ -19,7 +19,7 @@ import { attachListStyler } from 'vs/platform/theme/common/styler';
 import { attachEditableDropdownStyler } from 'sql/common/theme/styler';
 
 @Component({
-	selector: 'inputBox',
+	selector: 'dropdown',
 	template: `
 		<div #input style="width: 100%"></div>
 	`

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

@@ -22,6 +22,8 @@ export interface TitledFormItemLayout {
 	actions?: string[];
 	isFormComponent: Boolean;
 	horizontal: boolean;
+	width: number;
+	componentWidth: number;
 }
 class FormItem {
 	constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { }
@@ -29,20 +31,20 @@ class FormItem {
 
 @Component({
 	template: `
-		<div #container *ngIf="items" class="form-table"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent">
-			<div *ngFor="let item of items" class="form-row">
+		<div #container *ngIf="items" class="form-table" >
+			<ng-container *ngFor="let item of items">
+			<div class="form-row" [style.width]="getFormWidth(item)">
 				<ng-container *ngIf="isFormComponent(item)">
 					<ng-container *ngIf="isHorizontal(item)">
 						<div class="form-cell">{{getItemTitle(item)}}</div>
-						<div class="form-cell">
+						<div class="form-cell" [style.width]="getComponentWidth(item)">
 							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 							</model-component-wrapper>
 						</div>
 						<div *ngIf="itemHasActions(item)" class="form-cell">
 							<div class="form-actions-table">
 								<div *ngFor="let actionItem of getActionComponents(item)" class="form-cell" >
-									<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
+									<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore" >
 									</model-component-wrapper>
 								</div>
 							</div>
@@ -50,8 +52,8 @@ class FormItem {
 					</ng-container>
 					<ng-container *ngIf="isVertical(item)">
 						<div class="form-item-row form-item-title">{{getItemTitle(item)}}</div>
-						<div class="form-item-row">
-							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+						<div class="form-item-row" [style.width]="getComponentWidth(item)">
+							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
 							</model-component-wrapper>
 						</div>
 						<div *ngIf="itemHasActions(item)" class="form-actions-table">
@@ -65,6 +67,7 @@ class FormItem {
 					</ng-container>
 				</ng-container>
 			</div>
+			</ng-container>
 		</div>
 	`
 })
@@ -113,6 +116,16 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 		return this._alignContent;
 	}
 
+	private getFormWidth(item: FormItem): string {
+		let itemConfig = item.config;
+		return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '400px';
+	}
+
+	private getComponentWidth(item: FormItem): string {
+		let itemConfig = item.config;
+		return itemConfig ? itemConfig.componentWidth + 'px' : '';
+	}
+
 	private getItemTitle(item: FormItem): string {
 		let itemConfig = item.config;
 		return itemConfig ? itemConfig.title : '';

src/sql/parts/modelComponents/formLayout.css

@@ -36,7 +36,3 @@
 	padding-right: 5px;
 	display: table-cell;
 }
-
-.form-action {
-	width: 20px;
-}

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

@@ -92,6 +92,12 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		this._input.value = this.value;
+		this._input.setAriaLabel(this.ariaLabel);
+		this._input.setPlaceHolder(this.placeHolder);
+		this._input.setEnabled(this.enabled);
+		if (this.width) {
+			this._input.width = this.width;
+		}
 	}
 
 	public setValid(valid: boolean): void {
@@ -106,10 +112,38 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 	}
 
 	public set value(newValue: string) {
-		this.setPropertyFromUI<sqlops.InputBoxProperties, string>(this.setInputBoxProperties, newValue);
+		this.setPropertyFromUI<sqlops.InputBoxProperties, string>((props, value) => props.value = value, newValue);
 	}
 
-	private setInputBoxProperties(properties: sqlops.InputBoxProperties, value: string): void {
-		properties.value = value;
+	public get ariaLabel(): string {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, string>((props) => props.ariaLabel, '');
+	}
+
+	public set ariaLabel(newValue: string) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, string>((props, value) => props.ariaLabel = value, newValue);
+	}
+
+	public get placeHolder(): string {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, string>((props) => props.placeHolder, '');
+	}
+
+	public set placeHolder(newValue: string) {
+		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);
 	}
 }

src/sql/parts/modelComponents/interfaces.ts

@@ -25,7 +25,6 @@ export interface IComponent {
 	setProperties?: (properties: { [key: string]: any; }) => void;
 	readonly valid?: boolean;
 	setValid(valid: boolean): void;
-	title?: string;
 }
 
 export const COMPONENT_CONFIG = new InjectionToken<IComponentConfig>('component_config');

src/sql/sqlops.proposed.d.ts

@@ -58,6 +58,7 @@ declare module 'sqlops' {
 		 */
 		updateProperties(properties: { [key: string]: any }): Thenable<boolean>;
 
+		enabled: boolean;
 		/**
 		 * Event fired to notify that the component's validity has changed
 		 */
@@ -162,6 +163,8 @@ declare module 'sqlops' {
 
 	export interface FormItemLayout {
 		horizontal: boolean;
+		width: number;
+		componentWidth: number;
 	}
 
 	export interface FormLayout {
@@ -203,6 +206,10 @@ declare module 'sqlops' {
 
 	export interface InputBoxProperties {
 		value?: string;
+		ariaLabel?: string;
+		placeHolder?: string;
+		height: number;
+		width: number;
 	}
 
 	export interface CheckBoxProperties {
@@ -225,8 +232,7 @@ declare module 'sqlops' {
 		actions?: ActionDescriptor[];
 	}
 
-	export interface InputBoxComponent extends Component {
-		value: string;
+	export interface InputBoxComponent extends Component, InputBoxProperties {
 		onTextChanged: vscode.Event<any>;
 	}
 
@@ -303,7 +309,7 @@ declare module 'sqlops' {
 		initializeModel<T extends Component>(root: T): Thenable<void>;
 	}
 
-	export namespace dashboard {
+	export namespace ui {
 		/**
 		 * Register a provider for a model-view widget
 		 */

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

@@ -243,6 +243,14 @@ class ComponentWrapper implements sqlops.Component {
 		return this.itemConfigs.map(itemConfig => itemConfig.component);
 	}
 
+	public get enabled(): boolean {
+		return this.properties['enabled'];
+	}
+
+	public set enabled(value: boolean) {
+		this.setProperty('enabled', value);
+	}
+
 	public toComponentShape(): IComponentShape {
 		return <IComponentShape>{
 			id: this.id,
@@ -391,6 +399,34 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone
 		this.setProperty('value', v);
 	}
 
+	public get ariaLabel(): string {
+		return this.properties['ariaLabel'];
+	}
+	public set ariaLabel(v: string) {
+		this.setProperty('ariaLabel', v);
+	}
+
+	public get placeHolder(): string {
+		return this.properties['placeHolder'];
+	}
+	public set placeHolder(v: string) {
+		this.setProperty('placeHolder', v);
+	}
+
+	public get height(): number {
+		return this.properties['height'];
+	}
+	public set height(v: number) {
+		this.setProperty('height', v);
+	}
+
+	public get width(): number {
+		return this.properties['width'];
+	}
+	public set width(v: number) {
+		this.setProperty('width', v);
+	}
+
 	public get onTextChanged(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
 		return emitter && emitter.event;

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

@@ -324,9 +324,12 @@ export function createApiFactory(
 			const dashboard = {
 				registerWebviewProvider(widgetId: string, handler: (webview: sqlops.DashboardWebview) => void) {
 					extHostWebviewWidgets.$registerProvider(widgetId, handler);
-				},
-				registerModelViewProvider(widgetId: string, handler: (view: sqlops.ModelView) => void): void {
-					extHostModelView.$registerProvider(widgetId, handler);
+				}
+			};
+
+			const ui = {
+				registerModelViewProvider(modelViewId: string, handler: (view: sqlops.ModelView) => void): void {
+					extHostModelView.$registerProvider(modelViewId, handler);
 				}
 			};
 
@@ -361,7 +364,8 @@ export function createApiFactory(
 				tasks,
 				dashboard,
 				workspace,
-				queryeditor: queryEditor
+				queryeditor: queryEditor,
+				ui: ui
 			};
 		}
 	};