Add PropertiesContainer ModelView component (#10115)

* Add PropertiesContainer ModelView component

* Switch to component

* Remove unneeded interface

* Update names

* Fix names

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

@@ -256,6 +256,14 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
 		return builder;
 	}
 
+	propertiesContainer(): azdata.ComponentBuilder<azdata.PropertiesContainerComponent> {
+		let id = this.getNextComponentId();
+		let builder: ComponentBuilderImpl<azdata.PropertiesContainerComponent> = this.getComponentBuilder(new PropertiesContainerComponentWrapper(this._proxy, this._handle, id), id);
+
+		this._componentBuilders.set(id, builder);
+		return builder;
+	}
+
 	getComponentBuilder<T extends azdata.Component>(component: ComponentWrapper, id: string): ComponentBuilderImpl<T> {
 		let componentBuilder: ComponentBuilderImpl<T> = new ComponentBuilderImpl<T>(component);
 		this._componentBuilders.set(id, componentBuilder);
@@ -1746,6 +1754,27 @@ class TabbedPanelComponentWrapper extends ComponentWrapper implements azdata.Tab
 	}
 }
 
+class PropertiesContainerComponentWrapper extends ComponentWrapper implements azdata.PropertiesContainerComponent {
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
+		super(proxy, handle, ModelComponentTypes.PropertiesContainer, id);
+		this.properties = {};
+	}
+
+	public get propertyItems(): azdata.PropertiesContainerItem[] {
+		return this.properties['propertyItems'];
+	}
+	public set propertyItems(v: azdata.PropertiesContainerItem[]) {
+		this.setProperty('propertyItems', v);
+	}
+
+	public get loading(): boolean {
+		return this.properties['loading'];
+	}
+	public set loading(v: boolean) {
+		this.setProperty('loading', v);
+	}
+}
+
 class GroupContainerComponentWrapper extends ComponentWrapper implements azdata.GroupContainer {
 	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
 		super(proxy, handle, type, id);

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

@@ -175,7 +175,8 @@ export enum ModelComponentTypes {
 	Image,
 	RadioCardGroup,
 	TabbedPanel,
-	Separator
+	Separator,
+	PropertiesContainer
 }
 
 export enum ColumnSizingMode {

src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts

@@ -0,0 +1,65 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef,
+	ViewChild, ElementRef, OnDestroy
+} from '@angular/core';
+
+import * as azdata from 'azdata';
+import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { PropertiesContainer, DisplayProperty } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component';
+
+@Component({
+	selector: `modelview-properties-container`,
+	template: `
+		<properties-container> </properties-container>
+	`
+})
+export default class PropertiesContainerComponent extends ComponentBase implements IComponent, OnDestroy {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	@ViewChild(PropertiesContainer) private _propertiesContainer: PropertiesContainer;
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+	) {
+		super(changeRef, el);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	setLayout(layout: any): void {
+		this.layout();
+	}
+
+	public setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		this._propertiesContainer.displayProperties = this.displayProperties;
+		this._propertiesContainer.loading = this.loading;
+	}
+
+	public get loading(): boolean {
+		return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, boolean>((props) => props.loading, true);
+	}
+
+	public set loading(newValue: boolean) {
+		this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, boolean>((props, value) => props.loading = value, newValue);
+		this._propertiesContainer.loading = newValue;
+	}
+
+	public get displayProperties(): DisplayProperty[] {
+		return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props) => props.displayProperties, []);
+	}
+
+	public set displayProperties(newValue: azdata.PropertiesContainerItem[]) {
+		this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props, value) => props.displayProperties = value, newValue);
+		this._propertiesContainer.displayProperties = newValue;
+	}
+}

src/sql/workbench/contrib/modelView/browser/components.contribution.ts

@@ -33,6 +33,7 @@ import RadioCardGroup from 'sql/workbench/browser/modelComponents/radioCardGroup
 import TabbedPanelComponent from 'sql/workbench/browser/modelComponents/tabbedPanel.component';
 import SeparatorComponent from 'sql/workbench/browser/modelComponents/separator.component';
 import { ModelComponentTypes } from 'sql/platform/dashboard/browser/interfaces';
+import PropertiesContainerComponent from 'sql/workbench/browser/modelComponents/propertiesContainer.component';
 export const DIV_CONTAINER = 'div-container';
 registerComponentType(DIV_CONTAINER, ModelComponentTypes.DivContainer, DivContainer);
 
@@ -63,7 +64,7 @@ registerComponentType(DROPDOWN_COMPONENT, ModelComponentTypes.DropDown, DropDown
 export const DECLARATIVETABLE_COMPONENT = 'declarativeTable-component';
 registerComponentType(DECLARATIVETABLE_COMPONENT, ModelComponentTypes.DeclarativeTable, DeclarativeTableComponent);
 
-export const LISTBOX_COMPONENT = 'lisbox-component';
+export const LISTBOX_COMPONENT = 'listbox-component';
 registerComponentType(LISTBOX_COMPONENT, ModelComponentTypes.ListBox, ListBoxComponent);
 
 export const BUTTON_COMPONENT = 'button-component';
@@ -117,3 +118,6 @@ registerComponentType(TABBEDPANEL_COMPONENT, ModelComponentTypes.TabbedPanel, Ta
 
 export const SEPARATOR_COMPONENT = 'separator-component';
 registerComponentType(SEPARATOR_COMPONENT, ModelComponentTypes.Separator, SeparatorComponent);
+
+export const PROPERTIESCONTAINER_COMPONENT = 'propertiescontainer-component';
+registerComponentType(PROPERTIESCONTAINER_COMPONENT, ModelComponentTypes.PropertiesContainer, PropertiesContainerComponent);

src/sql/workbench/services/dialog/browser/dialog.module.ts

@@ -28,6 +28,7 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { IBootstrapParams, ISelector } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
 import { startsWith } from 'vs/base/common/strings';
 import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';
+import { PropertiesContainerModule } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.module';
 
 export const DialogModule = (params, selector: string, instantiationService: IInstantiationService): any => {
 
@@ -52,7 +53,8 @@ export const DialogModule = (params, selector: string, instantiationService: IIn
 			FormsModule,
 			CommonModule,
 			BrowserModule,
-			PanelModule
+			PanelModule,
+			PropertiesContainerModule
 		],
 		providers: [
 			{ provide: APP_BASE_HREF, useValue: '/' },