Add ModelView method SetItemLayout (#10306)

* Add ModelView method SetItemLayout

* Remove extra line break

src/sql/workbench/api/browser/mainThreadModelView.ts

@@ -66,6 +66,10 @@ export class MainThreadModelView extends Disposable implements MainThreadModelVi
 		return this.execModelViewAction(handle, (modelView) => modelView.setLayout(componentId, layout));
 	}
 
+	$setItemLayout(handle: number, containerId: string, item: IItemConfig): Thenable<void> {
+		return this.execModelViewAction(handle, (modelView) => modelView.setItemLayout(containerId, item));
+	}
+
 	private onEvent(handle: number, componentId: string, eventArgs: any) {
 		this._proxy.$handleEvent(handle, componentId, eventArgs);
 	}

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

@@ -19,6 +19,7 @@ import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs,
 import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
 import { firstIndex } from 'vs/base/common/arrays';
 import { ILogService } from 'vs/platform/log/common/log';
+import { onUnexpectedError } from 'vs/base/common/errors';
 
 class ModelBuilderImpl implements azdata.ModelBuilder {
 	private nextComponentId: number;
@@ -730,6 +731,15 @@ class ComponentWrapper implements azdata.Component {
 		return this._proxy.$setLayout(this._handle, this.id, layout);
 	}
 
+	public setItemLayout(item: azdata.Component, itemLayout: any): boolean {
+		const itemConfig = this.itemConfigs.find(c => c.component.id === item.id);
+		if (itemConfig) {
+			itemConfig.config = itemLayout;
+			this._proxy.$setItemLayout(this._handle, this.id, itemConfig.toIItemConfig()).then(undefined, onUnexpectedError);
+		}
+		return false;
+	}
+
 	public updateProperties(properties: { [key: string]: any }): Thenable<void> {
 		this.properties = assign(this.properties, properties);
 		return this.notifyPropertyChanged();
@@ -1740,11 +1750,19 @@ class TabbedPanelComponentWrapper extends ComponentWrapper implements azdata.Tab
 		this.properties = {};
 		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<string>());
 	}
+
 	updateTabs(tabs: (azdata.Tab | azdata.TabGroup)[]): void {
-		this.clearItems();
 		const itemConfigs = createFromTabs(tabs);
-		itemConfigs.forEach(itemConfig => {
-			this.addItem(itemConfig.component, itemConfig.config);
+		// Go through all of the tabs and either update their layout if they already exist
+		// or add them if they don't.
+		// We do not currently support reordering or removing tabs. 
+		itemConfigs.forEach(newItemConfig => {
+			const existingTab = this.itemConfigs.find(itemConfig => newItemConfig.config.id === itemConfig.config.id);
+			if (existingTab) {
+				this.setItemLayout(existingTab.component, newItemConfig.config);
+			} else {
+				this.addItem(newItemConfig.component, newItemConfig.config);
+			}
 		});
 	}
 

src/sql/workbench/api/common/sqlExtHost.protocol.ts

@@ -732,6 +732,7 @@ export interface MainThreadModelViewShape extends IDisposable {
 	$addToContainer(handle: number, containerId: string, item: IItemConfig, index?: number): Thenable<void>;
 	$removeFromContainer(handle: number, containerId: string, item: IItemConfig): Thenable<void>;
 	$setLayout(handle: number, componentId: string, layout: any): Thenable<void>;
+	$setItemLayout(handle: number, componentId: string, item: IItemConfig): Thenable<void>;
 	$setProperties(handle: number, componentId: string, properties: { [key: string]: any }): Thenable<void>;
 	$registerEvent(handle: number, componentId: string): Thenable<void>;
 	$validate(handle: number, componentId: string): Thenable<boolean>;

src/sql/workbench/browser/modelComponents/componentBase.ts

@@ -352,6 +352,24 @@ export abstract class ContainerBase<T> extends ComponentBase {
 
 	abstract setLayout(layout: any): void;
 
+	public setItemLayout(componentDescriptor: IComponentDescriptor, config: any): void {
+		if (!componentDescriptor) {
+			return;
+		}
+		const item = this.items.find(item => item.descriptor.id === componentDescriptor.id && item.descriptor.type === componentDescriptor.type);
+		if (item) {
+			item.config = config;
+			this.onItemLayoutUpdated(item);
+			this._changeRef.detectChanges();
+		} else {
+			throw new Error(`Unable to set item layout - unknown item ${componentDescriptor.id}`);
+		}
+		return;
+	}
+
 	protected onItemsUpdated(): void {
 	}
+
+	protected onItemLayoutUpdated(item: ItemDescriptor<T>): void {
+	}
 }

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

@@ -5,7 +5,7 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
 import { NavigationBarLayout, PanelComponent } from 'sql/base/browser/ui/panel/panel.component';
 import { TabType } from 'sql/base/browser/ui/panel/tab.component';
-import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
+import { ContainerBase, ItemDescriptor } from 'sql/workbench/browser/modelComponents/componentBase';
 import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
 import 'vs/css!./media/tabbedPanel';
 import { IUserFriendlyIcon, createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
@@ -121,4 +121,8 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 			this._panel.selectTab(firstTabIndex);
 		}
 	}
+
+	onItemLayoutUpdated(item: ItemDescriptor<TabConfig>): void {
+		this._panel.updateTab(item.config.id, { title: item.config.title, iconClass: item.config.icon ? createIconCssClass(item.config.icon) : undefined });
+	}
 }

src/sql/workbench/browser/modelComponents/viewBase.ts

@@ -105,6 +105,13 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
 		this.queueAction(componentId, (component) => component.setLayout(layout));
 	}
 
+	setItemLayout(containerId: string, itemConfig: IItemConfig): void {
+		let childDescriptor = this.modelStore.getComponentDescriptor(itemConfig.componentShape.id);
+		this.queueAction(containerId, (component) => {
+			component.setItemLayout(childDescriptor, itemConfig.config);
+		});
+	}
+
 	setProperties(componentId: string, properties: { [key: string]: any; }): void {
 		if (!properties) {
 			return;