added group container (#1508)

src/sql/parts/modelComponents/componentBase.ts

@@ -105,6 +105,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		return <boolean>enabled;
 	}
 
+	public set enabled(value: boolean) {
+		let properties = this.getProperties();
+		properties['enabled'] = value;
+		this.setProperties(properties);
+	}
+
 	public get valid(): boolean {
 		return this._valid;
 	}
@@ -173,5 +179,15 @@ export abstract class ContainerBase<T> extends ComponentBase {
 		this._changeRef.detectChanges();
 	}
 
+	public setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		this.items.forEach(item => {
+			let component = this.modelStore.getComponent(item.descriptor.id);
+			if (component) {
+				component.enabled = this.enabled;
+			}
+		});
+	}
+
 	abstract setLayout(layout: any): void;
 }

src/sql/parts/modelComponents/components.contribution.ts

@@ -5,6 +5,7 @@
 
 import FlexContainer from './flexContainer.component';
 import FormContainer from './formContainer.component';
+import GroupContainer from './groupContainer.component';
 import CardComponent from './card.component';
 import InputBoxComponent from './inputbox.component';
 import DropDownComponent from './dropdown.component';
@@ -22,6 +23,9 @@ registerComponentType(FLEX_CONTAINER, ModelComponentTypes.FlexContainer, FlexCon
 export const FORM_CONTAINER = 'form-container';
 registerComponentType(FORM_CONTAINER, ModelComponentTypes.Form, FormContainer);
 
+export const GROUP_CONTAINER = 'group-container';
+registerComponentType(GROUP_CONTAINER, ModelComponentTypes.Group, GroupContainer);
+
 export const CARD_COMPONENT = 'card-component';
 registerComponentType(CARD_COMPONENT, ModelComponentTypes.Card, CardComponent);
 

src/sql/parts/modelComponents/formLayout.css

@@ -1,7 +1,7 @@
 
 .form-table {
 	display: table;
-	padding: 10px 30px 0px 30px;
+	padding: 5px 30px 0px 30px;
 	box-sizing: border-box;
 }
 
@@ -23,7 +23,7 @@
 }
 
 .form-cell {
-	padding-bottom: 20px;
+	padding-bottom: 10px;
 	padding-right: 5px;
 	display: table-cell;
 }

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

@@ -0,0 +1,94 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./groupLayout';
+
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+} from '@angular/core';
+
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { GroupLayout, GroupItemLayout } from 'sqlops';
+
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
+import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+
+@Component({
+	selector: 'modelview-groupContainer',
+	template: `
+		<div *ngIf="hasHeader()" class="modelview-group-header" >
+				{{_containerLayout.header}}
+		</div>
+		<div #container *ngIf="items" class="modelview-group-container" [style.width]="getContainerWidth()">
+			<ng-container *ngFor="let item of items">
+			<div class="modelview-group-row" >
+				<div  class="modelview-group-cell">
+				<model-component-wrapper  [descriptor]="item.descriptor" [modelStore]="modelStore" >
+				</model-component-wrapper>
+				</div>
+			</div>
+			</ng-container>
+		</div>
+	`
+})
+export default class GroupContainer extends ContainerBase<GroupLayout> implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	private _containerLayout: GroupLayout;
+
+	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
+	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
+
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	ngAfterViewInit(): void {
+	}
+
+	/// IComponent implementation
+
+	public layout(): void {
+		if (this._componentWrappers) {
+			this._componentWrappers.forEach(wrapper => {
+				wrapper.layout();
+			});
+		}
+	}
+
+	public setLayout(layout: GroupLayout): void {
+		this._containerLayout = layout;
+		this.layout();
+	}
+
+	private hasHeader(): boolean {
+		return this._containerLayout && this._containerLayout && this._containerLayout.header !== undefined;
+	}
+
+	private getContainerWidth(): string {
+		if (this._containerLayout && this._containerLayout.width) {
+			let width: string = this._containerLayout.width.toString();
+			if (!width.endsWith('%') && !width.toLowerCase().endsWith('px')) {
+				width = width + 'px';
+			}
+			return width;
+		} else {
+			return '100%';
+		}
+	}
+}

src/sql/parts/modelComponents/groupLayout.css

@@ -0,0 +1,21 @@
+
+.modelview-group-container {
+	display: table;
+	padding: 5px 10px 5px 10px;
+	box-sizing: border-box;
+}
+
+.modelview-group-row {
+	display: table-row;
+
+}
+
+.modelview-group-header {
+	padding-bottom: 5px;
+	font-size: 14px;
+}
+
+.modelview-group-cell {
+	padding-bottom: 5px;
+	display: table-cell;
+}

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

@@ -13,7 +13,8 @@ import * as sqlops from 'sqlops';
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 
-import { InputBox, IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
+import { InputBox } from 'sql/base/browser/ui/inputbox/inputBox';
+import { IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';

src/sql/parts/modelComponents/interfaces.ts

@@ -23,6 +23,7 @@ export interface IComponent {
 	addToContainer?: (componentDescriptor: IComponentDescriptor, config: any) => void;
 	setLayout?: (layout: any) => void;
 	setProperties?: (properties: { [key: string]: any; }) => void;
+	enabled: boolean;
 	readonly valid?: boolean;
 	validate(): Thenable<boolean>;
 }

src/sql/sqlops.proposed.d.ts

@@ -29,6 +29,7 @@ declare module 'sqlops' {
 		dashboardWidget(widgetId: string): ComponentBuilder<DashboardWidgetComponent>;
 		dashboardWebview(webviewId: string): ComponentBuilder<DashboardWebviewComponent>;
 		formContainer(): FormBuilder;
+		groupContainer(): GroupBuilder;
 	}
 
 	export interface ComponentBuilder<T extends Component> {
@@ -45,6 +46,9 @@ declare module 'sqlops' {
 
 	}
 
+	export interface GroupBuilder extends ContainerBuilder<GroupContainer, GroupLayout, GroupItemLayout> {
+	}
+
 	export interface FormBuilder extends ContainerBuilder<FormContainer, FormLayout, FormItemLayout> {
 		withFormItems(components: FormComponent[], itemLayout?: FormItemLayout): ContainerBuilder<FormContainer, FormLayout, FormItemLayout>;
 
@@ -167,7 +171,7 @@ declare module 'sqlops' {
 		 */
 		alignContent?: string;
 
-		height? : number | string;
+		height?: number | string;
 	}
 
 	export interface FlexItemLayout {
@@ -183,12 +187,20 @@ declare module 'sqlops' {
 	}
 
 	export interface FormItemLayout {
-		horizontal: boolean;
-		componentWidth: number;
+		horizontal?: boolean;
+		componentWidth?: number;
 	}
 
 	export interface FormLayout {
-		width: number;
+		width?: number;
+	}
+
+	export interface GroupLayout {
+		width?: number | string;
+		header?: string;
+	}
+
+	export interface GroupItemLayout {
 	}
 
 	export interface FlexContainer extends Container<FlexLayout, FlexItemLayout> {
@@ -197,6 +209,8 @@ declare module 'sqlops' {
 	export interface FormContainer extends Container<FormLayout, FormItemLayout> {
 	}
 
+	export interface GroupContainer extends Container<GroupLayout, GroupItemLayout> {
+	}
 
 	/**
 	 * Describes an action to be shown in the UI, with a user-readable label

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -76,7 +76,8 @@ export enum ModelComponentTypes {
 	Text,
 	DashboardWidget,
 	DashboardWebview,
-	Form
+	Form,
+	Group
 }
 
 export interface IComponentShape {

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

@@ -45,6 +45,13 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
 		return container;
 	}
 
+	groupContainer(): sqlops.GroupBuilder {
+		let id = this.getNextComponentId();
+		let container: ContainerBuilderImpl<sqlops.GroupContainer, any, any> = new ContainerBuilderImpl<sqlops.GroupContainer, sqlops.GroupLayout, sqlops.GroupItemLayout>(this._proxy, this._handle, ModelComponentTypes.Group, id);
+		this._componentBuilders.set(id, container);
+		return container;
+	}
+
 	card(): sqlops.ComponentBuilder<sqlops.CardComponent> {
 		let id = this.getNextComponentId();
 		let builder: ComponentBuilderImpl<sqlops.CardComponent> = this.getComponentBuilder(new CardWrapper(this._proxy, this._handle, id), id);
@@ -199,7 +206,6 @@ class ContainerBuilderImpl<T extends sqlops.Component, TLayout, TItemLayout> ext
 }
 
 class FormContainerBuilder extends ContainerBuilderImpl<sqlops.FormContainer, sqlops.FormLayout, sqlops.FormItemLayout> implements sqlops.FormBuilder {
-
 	withFormItems(components: sqlops.FormComponent[], itemLayout?: sqlops.FormItemLayout): sqlops.ContainerBuilder<sqlops.FormContainer, sqlops.FormLayout, sqlops.FormItemLayout> {
 		this._component.itemConfigs = components.map(item => {
 			return this.convertToItemConfig(item, itemLayout);