model view remove and insert components (#2351)

* added the ability to remove a component from a container to insert it to a position

src/sqltest/parts/modelComponents/componentBase.test.ts

@@ -5,7 +5,7 @@
 
 import * as assert from 'assert';
 import { Mock, It, Times, MockBehavior } from 'typemoq';
-import { ComponentBase, ContainerBase } from 'sql/parts/modelComponents/componentBase';
+import { ComponentBase, ContainerBase, ItemDescriptor } from 'sql/parts/modelComponents/componentBase';
 import { IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { ModelStore } from 'sql/parts/modelComponents/modelStore';
 import { ChangeDetectorRef } from '@angular/core';
@@ -41,6 +41,10 @@ class TestContainer extends ContainerBase<TestComponent> {
 		this.baseInit();
 	}
 
+	public get TestItems(): ItemDescriptor<TestComponent>[] {
+		return this.items;
+	}
+
 	ngOnInit() { }
 	setLayout() { }
 
@@ -51,12 +55,14 @@ class TestContainer extends ContainerBase<TestComponent> {
 
 suite('ComponentBase Tests', () => {
 	let testComponent: TestComponent;
+	let testComponent2: TestComponent;
 	let testContainer: TestContainer;
 	let modelStore: IModelStore;
 
 	setup(() => {
 		modelStore = new ModelStore();
 		testComponent = new TestComponent(modelStore, 'testComponent');
+		testComponent2 = new TestComponent(modelStore, 'testComponent2');
 		testContainer = new TestContainer(modelStore, 'testContainer');
 	});
 
@@ -130,6 +136,63 @@ suite('ComponentBase Tests', () => {
 		testComponent.validate();
 	});
 
+	test('Inserting a component to a container adds the component to the right place', done => {
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		assert.equal(testContainer.TestItems.length, 1);
+		testContainer.addToContainer(testComponent2.descriptor, undefined, 0);
+		assert.equal(testContainer.TestItems.length, 2);
+		assert.equal(testContainer.TestItems[0].descriptor.id, testComponent2.descriptor.id);
+		done();
+	});
+
+	test('Inserting a component to a container given negative index fails', done => {
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		assert.equal(testContainer.TestItems.length, 1);
+		assert.throws(() => testContainer.addToContainer(testComponent2.descriptor, undefined, -1));
+		done();
+	});
+
+	test('Inserting a component to a container given wrong index fails', done => {
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		assert.equal(testContainer.TestItems.length, 1);
+		assert.throws(() => testContainer.addToContainer(testComponent2.descriptor, undefined, 10));
+		done();
+	});
+
+	test('Inserting a component to a container given end of list fails', done => {
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		assert.equal(testContainer.TestItems.length, 1);
+		assert.throws(() => testContainer.addToContainer(testComponent2.descriptor, undefined, 1));
+		done();
+	});
+
+	test('Removing a component the does not exist does not make change in the items', done => {
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		assert.equal(testContainer.TestItems.length, 1);
+		testContainer.removeFromContainer(testComponent2.descriptor);
+		assert.equal(testContainer.TestItems.length, 1);
+		done();
+	});
+
+	test('Removing a component removes it from items', done => {
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		testContainer.addToContainer(testComponent2.descriptor, undefined);
+		assert.equal(testContainer.TestItems.length, 2);
+		testContainer.removeFromContainer(testComponent.descriptor);
+		assert.equal(testContainer.TestItems.length, 1);
+		assert.equal(testContainer.TestItems[0].descriptor.id, testComponent2.descriptor.id);
+		done();
+	});
+
+	test('Container dost not add same component twice', done => {
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		assert.equal(testContainer.TestItems.length, 1);
+		testContainer.addToContainer(testComponent.descriptor, 0);
+		assert.equal(testContainer.TestItems.length, 1);
+		done();
+	});
+
+
 	test('Component convert size should add px', done => {
 		let expected = '100px';
 		let actual = testComponent.convertSize(100);

src/sqltest/workbench/api/extHostModelView.test.ts

@@ -14,6 +14,12 @@ import { IComponentShape, IItemConfig, ComponentEventType, IComponentEventArgs,
 import { TitledFormItemLayout } from 'sql/parts/modelComponents/formContainer.component';
 
 'use strict';
+interface InternalItemConfig {
+	toIItemConfig(): IItemConfig;
+}
+interface IWithItemConfig {
+	itemConfigs?: InternalItemConfig[];
+}
 
 suite('ExtHostModelView Validation Tests', () => {
 	let extHostModelView: ExtHostModelView;
@@ -33,6 +39,7 @@ suite('ExtHostModelView Validation Tests', () => {
 			$initializeModel: (handle: number, rootComponent: IComponentShape) => undefined,
 			$clearContainer: (handle: number, componentId: string) => undefined,
 			$addToContainer: (handle: number, containerId: string, item: IItemConfig) => undefined,
+			$removeFromContainer: (handle: number, containerId: string, item: IItemConfig) => undefined,
 			$setLayout: (handle: number, componentId: string, layout: any) => undefined,
 			$setProperties: (handle: number, componentId: string, properties: { [key: string]: any }) => undefined,
 			$registerEvent: (handle: number, componentId: string) => undefined,
@@ -132,7 +139,7 @@ suite('ExtHostModelView Validation Tests', () => {
 	});
 
 	test('Setting a form component as required initializes the model with the component required', () => {
-		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
 
 		// Set up the input component with required initially set to false
 		let inputComponent = modelView.modelBuilder.inputBox().component();
@@ -157,7 +164,7 @@ suite('ExtHostModelView Validation Tests', () => {
 		// Set up the mock proxy to save the component that gets initialized so that it can be verified
 		let rootComponent: IComponentShape;
 		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).callback((handle, componentShape) => rootComponent = componentShape);
-		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
 
 		// Set up the form with a top level component and a group
 		let topLevelList = modelView.modelBuilder.listBox().component();
@@ -213,4 +220,164 @@ suite('ExtHostModelView Validation Tests', () => {
 		assert.equal((inputBoxConfig.config as sqlops.FormItemLayout).horizontal, groupInputLayout.horizontal);
 		assert.equal((dropdownConfig.config as sqlops.FormItemLayout).horizontal, defaultLayout.horizontal);
 	});
+
+	test('Inserting and removing components from a container should work correctly', () => {
+		// Set up the mock proxy to save the component that gets initialized so that it can be verified
+		let rootComponent: IComponentShape;
+		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).callback((handle, componentShape) => rootComponent = componentShape);
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$removeFromContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+
+		// Set up the form with a top level component and a group
+		let listBox = modelView.modelBuilder.listBox().component();
+		let inputBox = modelView.modelBuilder.inputBox().component();
+		let dropDown = modelView.modelBuilder.dropDown().component();
+
+		let flex = modelView.modelBuilder.flexContainer().withItems([listBox, inputBox]).component();
+		modelView.initializeModel(flex);
+
+		assert.equal((flex as IWithItemConfig).itemConfigs.length, 2);
+		flex.insertItem(dropDown, 1);
+		assert.equal((flex as IWithItemConfig).itemConfigs.length, 3);
+		assert.equal((flex as IWithItemConfig).itemConfigs[1].toIItemConfig().componentShape.type, ModelComponentTypes.DropDown);
+		flex.removeItem(listBox);
+		assert.equal((flex as IWithItemConfig).itemConfigs.length, 2);
+		assert.equal((flex as IWithItemConfig).itemConfigs[0].toIItemConfig().componentShape.type, ModelComponentTypes.DropDown);
+	});
+
+	test('Inserting component give negative number fails', () => {
+		// Set up the mock proxy to save the component that gets initialized so that it can be verified
+		let rootComponent: IComponentShape;
+		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).callback((handle, componentShape) => rootComponent = componentShape);
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$removeFromContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+
+		// Set up the form with a top level component and a group
+		let listBox = modelView.modelBuilder.listBox().component();
+		let inputBox = modelView.modelBuilder.inputBox().component();
+		let dropDown = modelView.modelBuilder.dropDown().component();
+
+		let flex = modelView.modelBuilder.flexContainer().withItems([listBox, inputBox]).component();
+		modelView.initializeModel(flex);
+
+		assert.equal((flex as IWithItemConfig).itemConfigs.length, 2);
+		assert.throws(() => flex.insertItem(dropDown, -1));
+	});
+
+	test('Inserting component give wrong number fails', () => {
+		// Set up the mock proxy to save the component that gets initialized so that it can be verified
+		let rootComponent: IComponentShape;
+		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).callback((handle, componentShape) => rootComponent = componentShape);
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$removeFromContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+
+		// Set up the form with a top level component and a group
+		let listBox = modelView.modelBuilder.listBox().component();
+		let inputBox = modelView.modelBuilder.inputBox().component();
+		let dropDown = modelView.modelBuilder.dropDown().component();
+
+		let flex = modelView.modelBuilder.flexContainer().withItems([listBox, inputBox]).component();
+		modelView.initializeModel(flex);
+
+		assert.equal((flex as IWithItemConfig).itemConfigs.length, 2);
+		assert.throws(() => flex.insertItem(dropDown, 10));
+	});
+
+	test('Inserting component give end of the list fails', () => {
+		// Set up the mock proxy to save the component that gets initialized so that it can be verified
+		let rootComponent: IComponentShape;
+		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).callback((handle, componentShape) => rootComponent = componentShape);
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$removeFromContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+
+		// Set up the form with a top level component and a group
+		let listBox = modelView.modelBuilder.listBox().component();
+		let inputBox = modelView.modelBuilder.inputBox().component();
+		let dropDown = modelView.modelBuilder.dropDown().component();
+
+		let flex = modelView.modelBuilder.flexContainer().withItems([listBox, inputBox]).component();
+		modelView.initializeModel(flex);
+
+		assert.equal((flex as IWithItemConfig).itemConfigs.length, 2);
+		assert.throws(() => flex.insertItem(dropDown, 2));
+	});
+
+	test('Removing a component that does not exist does not fail', () => {
+		// Set up the mock proxy to save the component that gets initialized so that it can be verified
+		let rootComponent: IComponentShape;
+		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).callback((handle, componentShape) => rootComponent = componentShape);
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+
+		// Set up the form with a top level component and a group
+		let listBox = modelView.modelBuilder.listBox().component();
+		let inputBox = modelView.modelBuilder.inputBox().component();
+		let dropDown = modelView.modelBuilder.dropDown().component();
+
+		let flex = modelView.modelBuilder.flexContainer().withItems([listBox, inputBox]).component();
+		modelView.initializeModel(flex);
+
+		let result = flex.removeItem(dropDown);
+		assert.equal(result, false);
+		assert.equal((flex as IWithItemConfig).itemConfigs.length, 2);
+		assert.equal((flex as IWithItemConfig).itemConfigs[0].toIItemConfig().componentShape.type, ModelComponentTypes.ListBox);
+	});
+
+
+	test('Inserting and removing component in a form should work correctly', () => {
+		// Set up the mock proxy to save the component that gets initialized so that it can be verified
+		let rootComponent: IComponentShape;
+		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).callback((handle, componentShape) => rootComponent = componentShape);
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+		mockProxy.setup(x => x.$removeFromContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+
+		// Set up the form with a top level component and a group
+		let listBox = modelView.modelBuilder.listBox().component();
+		let inputBox = modelView.modelBuilder.inputBox().component();
+		let dropDown = modelView.modelBuilder.dropDown().component();
+		let checkBox = modelView.modelBuilder.checkBox().component();
+
+		let groupItems: sqlops.FormComponentGroup = {
+			title: 'Group',
+			components: [{
+				title: 'Drop Down',
+				component: dropDown
+			}, {
+				title: 'Check Box',
+				component: checkBox
+			}]
+		};
+		let listBoxFormItem: sqlops.FormComponent = {
+			title: 'List Box',
+			component: listBox
+		};
+		let inputBoxFormItem: sqlops.FormComponent = {
+			title: 'Input Box',
+			component: inputBox
+		};
+
+		let formBuilder = modelView.modelBuilder.formContainer();
+		formBuilder.addFormItem(listBoxFormItem);
+		let form = formBuilder.component();
+		modelView.initializeModel(formBuilder.component());
+
+		assert.equal((form as IWithItemConfig).itemConfigs.length, 1);
+		formBuilder.insertFormItem(inputBoxFormItem, 0);
+		assert.equal((form as IWithItemConfig).itemConfigs.length, 2);
+		assert.equal((form as IWithItemConfig).itemConfigs[0].toIItemConfig().componentShape.type, ModelComponentTypes.InputBox);
+		formBuilder.insertFormItem(groupItems, 0);
+		assert.equal((form as IWithItemConfig).itemConfigs.length, 5);
+		formBuilder.removeFormItem(listBoxFormItem);
+		assert.equal((form as IWithItemConfig).itemConfigs.length, 4);
+		formBuilder.removeFormItem(groupItems);
+		assert.equal((form as IWithItemConfig).itemConfigs.length, 1);
+		formBuilder.addFormItem(listBoxFormItem);
+		assert.equal((form as IWithItemConfig).itemConfigs.length, 2);
+		assert.equal((form as IWithItemConfig).itemConfigs[1].toIItemConfig().componentShape.type, ModelComponentTypes.ListBox);
+	});
 });