[SDC-29] rebase continue work to align source

Change-Id: I218f1c5ee23fb2c8314f1c70921d3ad8682c10f4
Signed-off-by: Michael Lando <ml636r@att.com>

86 files changed, 1684 insertions, 1592 deletions

diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
index db03aa53fb..b404a83634 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
@@ -168,7 +168,7 @@ export class CompositionGraph implements ng.IDirective {
 
             this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => {
 
-                    let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType); 
+                    let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType);
                     component.uniqueId = component.uniqueId;
                     component.capabilities = response.capabilities;
                     component.requirements = response.requirements;
@@ -246,6 +246,7 @@ export class CompositionGraph implements ng.IDirective {
 
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component:Component) => {
             scope.component = component;
+            this._cy.elements().remove();
             this.loadGraphData(scope);
         });
 
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
index a0c9a6c460..fa71e47804 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
@@ -96,15 +96,17 @@ export class TypeMapDirective implements ng.IDirective {
             } else {
                 scope.parentFormObj[fieldName].$setValidity('keyExist', true);
                 if (!scope.parentFormObj[fieldName].$invalid) {
+                    //To preserve the order of the keys, delete each one and recreate
                     let newObj = {};
-                    angular.forEach(scope.valueObjRef,function(value:any,key:string){
+                    angular.copy(scope.valueObjRef , newObj);
+                    angular.forEach(newObj,function(value:any,key:string){
+                        delete scope.valueObjRef[key];
                         if(key == oldKey){
-                            newObj[newKey] = value;
+                            scope.valueObjRef[newKey] = value;
                         }else{
-                            newObj[key] = value;
+                            scope.valueObjRef[key] = value;
                         }
                     });
-                    scope.valueObjRef = newObj;
                 }
             }
         };
diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts
index 5b286d0667..838137ba72 100644
--- a/catalog-ui/src/app/models.ts
+++ b/catalog-ui/src/app/models.ts
@@ -29,6 +29,7 @@ export * from './models/properties-inputs/property-fe-model';
 export * from './models/properties-inputs/property-fe-map';
 export * from './models/properties-inputs/derived-fe-property';
 export * from './models/properties-inputs/input-fe-model';
+export * from './models/properties-inputs/simple-flat-property';
 export * from './models/data-types-map';
 export * from './models/data-types';
 export * from './models/distribution';
@@ -82,3 +83,5 @@ export * from './models/component-metadata';
 
 export * from './models/button';
 export * from './models/filter-properties-assignment-data'
+export * from './models/properties-inputs/input-be-model'
+
diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts
index 898285f032..c7cc81fae7 100644
--- a/catalog-ui/src/app/models/components/component.ts
+++ b/catalog-ui/src/app/models/components/component.ts
@@ -205,7 +205,19 @@ export abstract class Component implements IComponent {
 
     //------------------------------------------ API Calls ----------------------------------------------------------------//
     public changeLifecycleState = (state:string, commentObj:AsdcComment):ng.IPromise<Component> => {
-        return this.componentService.changeLifecycleState(this, state, JSON.stringify(commentObj));
+        let deferred = this.$q.defer();
+        let onSuccess = (componentMetadata:ComponentMetadata):void => {
+            this.setComponentMetadata(componentMetadata);
+            // this.version = componentMetadata.version;
+            this.lifecycleState = componentMetadata.lifecycleState;
+
+            deferred.resolve(this);
+        };
+        let onError = (error:any):void => {
+            deferred.reject(error);
+        };
+        this.componentService.changeLifecycleState(this, state, JSON.stringify(commentObj)).then(onSuccess, onError);
+        return deferred.promise;
     };
 
     public getComponent = ():ng.IPromise<Component> => {
@@ -892,7 +904,7 @@ export abstract class Component implements IComponent {
         this.systemName = componentMetadata.systemName;
         this.projectCode = componentMetadata.projectCode;
         this.categories = componentMetadata.categories;
- 
+
     }
 
     public toJSON = ():any => {
diff --git a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
index 7fdc0838ed..1744aa0ff3 100644
--- a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
+++ b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts
@@ -33,19 +33,20 @@ export class LinksFactory {
 
     let newRelation:CompositionCiLinkBase;
 
-    let fromNode:CompositionCiNodeBase = cy.getElementById(relation.fromNode).data();
-    let toNode:CompositionCiNodeBase = cy.getElementById(relation.toNode).data();
-
-    if ((relation.fromNode && fromNode.isUcpePart) || (relation.toNode && toNode.isUcpePart )) { //Link from or to node inside ucpe
-
-      if (singleRelation && singleRelation.relationship.type && singleRelation.relationship.type == 'tosca.relationships.HostedOn') {
-        newRelation = new LinkUcpeHost(relation, singleRelation);
-      } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
-        newRelation = new CompositionCiVlUcpeLink(relation, fromNode.isUcpePart, singleRelation);
-      } else {
-        newRelation = new CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation);
-      }
-    } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+    // let fromNode:CompositionCiNodeBase = cy.getElementById(relation.fromNode).data();
+    // let toNode:CompositionCiNodeBase = cy.getElementById(relation.toNode).data();
+    //
+    // if ((relation.fromNode && fromNode.isUcpePart) || (relation.toNode && toNode.isUcpePart )) { //Link from or to node inside ucpe
+    //
+    //   if (singleRelation && singleRelation.relationship.type && singleRelation.relationship.type == 'tosca.relationships.HostedOn') {
+    //     newRelation = new LinkUcpeHost(relation, singleRelation);
+    //   } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+    //     newRelation = new CompositionCiVlUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+    //   } else {
+    //     newRelation = new CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+    //   }
+    // } else
+     if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
       newRelation = new CompositionCiVLink(relation, singleRelation);
     } else {
       newRelation = new CompositionCiSimpleLink(relation, singleRelation);
diff --git a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
index 1d79353453..f7117e456c 100644
--- a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
+++ b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
@@ -1,15 +1,11 @@
 import { SchemaPropertyGroupModel, SchemaProperty } from '../aschema-property';
-import { PROPERTY_DATA, PROPERTY_TYPES} from 'app/utils';
-import { PropertyBEModel } from '../../models';
+import { DerivedPropertyType, PropertyBEModel } from '../../models';
+import { PROPERTY_TYPES } from 'app/utils';
+import { UUID } from "angular2-uuid";
 
-export enum DerivedPropertyType {
-    SIMPLE,
-    LIST,
-    MAP,
-    COMPLEX //other datatype, list of non-simple, or map of non-simple
-}
 
 export class DerivedFEProperty extends PropertyBEModel {
+    valueObj: any; 
     parentName: string;
     propertiesName: string; //"network_assignments#ipv4_subnet#use_ipv4 =  parentPath + name
     derivedDataType: DerivedPropertyType;
@@ -17,56 +13,39 @@ export class DerivedFEProperty extends PropertyBEModel {
     isSelected: boolean;
     isDisabled: boolean;
     isChildOfListOrMap: boolean;
+    canBeDeclared: boolean;
+    mapKey: string;
 
-    constructor(property: PropertyBEModel, parentName?: string)
-    constructor(name: string, parentName: string, type: string, value: string, isChildOfListOrMap?:boolean, schema?: SchemaPropertyGroupModel);
-    constructor(nameOrPropertyObj?: string | PropertyBEModel, parentName?: string, type?: string, value?: string, isChildOfListOrMap?: boolean, schema?: SchemaPropertyGroupModel) {
-
-        super(typeof nameOrPropertyObj === 'string' ? null : nameOrPropertyObj);
-
-        if (typeof nameOrPropertyObj !== 'string') { //constructor #1
+    constructor(property: PropertyBEModel, parentName?: string, createChildOfListOrMap?: boolean, key?:string, value?:any) {
+        if (!createChildOfListOrMap) { //creating a standard derived prop
+            super(property);
             this.parentName = parentName ? parentName : null;
-            this.propertiesName = (parentName) ? parentName + '#' + nameOrPropertyObj.name : nameOrPropertyObj.name;
-        } else { //constructor #2
-            this.name = nameOrPropertyObj;
-            this.type = type;
+            this.propertiesName = (parentName) ? parentName + '#' + property.name : property.name;
+            this.canBeDeclared = true; //defaults to true
+        } else { //creating a direct child of list or map (ie. Item that can be deleted, with UUID instead of name)
+            super(null);
+            this.isChildOfListOrMap = true;
+            this.canBeDeclared = false;
+            this.name = UUID.UUID();
             this.parentName = parentName;
-            this.propertiesName = parentName + '#' + nameOrPropertyObj;
-            this.value = value;
-            if (schema) {
-                this.schema = new SchemaPropertyGroupModel(new SchemaProperty(schema.property));
+            this.propertiesName = parentName + '#' + this.name;
+
+            
+            if (property.type == PROPERTY_TYPES.LIST) {
+                this.mapKey = property.schema.property.type.split('.').pop();
+                this.type = property.schema.property.type;
+            } else { //map
+                this.mapKey = key || "";
+                this.type = property.type;
             }
+            this.valueObj = (this.type == PROPERTY_TYPES.JSON && typeof value == 'object') ? JSON.stringify(value) : value;
+            this.schema = new SchemaPropertyGroupModel(new SchemaProperty(property.schema.property));
         }
         this.derivedDataType = this.getDerivedPropertyType();
-        this.isChildOfListOrMap = (isChildOfListOrMap) ? isChildOfListOrMap : false;
     }
-   
-    public getDerivedPropertyType = () => {
-        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1) {
-            return DerivedPropertyType.SIMPLE;
-        } else if (this.type == PROPERTY_TYPES.LIST) {
-            return DerivedPropertyType.LIST;
-        } else if (this.type == PROPERTY_TYPES.MAP) {
-            return DerivedPropertyType.MAP;
-        } else {
-            return DerivedPropertyType.COMPLEX;
-        }
-   } 
     
 }
 export class DerivedFEPropertyMap {
     [parentPath: string]: Array<DerivedFEProperty>;
 }
 
-
-
-// isDataType: boolean;
-
-
-// canAdd: boolean;
-// canCollapse: boolean;
-// canBeDeclared: boolean;
-
-// derivedValue: string;
-// derivedValueType: string;
-// propertiesName: string; 
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/properties-inputs/input-be-model.ts b/catalog-ui/src/app/models/properties-inputs/input-be-model.ts
new file mode 100644
index 0000000000..6d7854a6bf
--- /dev/null
+++ b/catalog-ui/src/app/models/properties-inputs/input-be-model.ts
@@ -0,0 +1,49 @@
+import {PropertyBEModel} from 'app/models';
+/**
+ * Created by rc2122 on 6/1/2017.
+ */
+export class InputBEModel extends PropertyBEModel {
+    properties:Array<ComponentInstanceProperty>;
+    inputs:Array<ComponentInstanceInput>;
+
+    constructor(input?: PropertyBEModel) {
+        super(input);
+    }
+
+
+
+    public toJSON = (): any => {
+    };
+
+}
+
+export class ComponentInstanceProperty extends PropertyBEModel {
+    componentInstanceId:string;
+    componentInstanceName:string;
+
+    constructor(property?: PropertyBEModel) {
+        super(property);
+    }
+
+
+
+    public toJSON = (): any => {
+    };
+
+}
+
+export class ComponentInstanceInput extends InputBEModel {
+    componentInstanceId:string;
+    componentInstanceName:string;
+
+    constructor(property?: PropertyBEModel) {
+        super(property);
+    }
+
+
+
+    public toJSON = (): any => {
+    };
+
+}
+
diff --git a/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
index 1261df3d6d..03c923c228 100644
--- a/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
@@ -1,25 +1,37 @@
 import { SchemaPropertyGroupModel, SchemaProperty } from "../aschema-property";
 import { PropertyBEModel } from "../../models";
 import {PROPERTY_DATA} from "../../utils/constants";
+import {InputBEModel} from "./input-be-model";
 
-export class InputFEModel extends PropertyBEModel {
+export class InputFEModel extends InputBEModel {
     isSimpleType: boolean;
     isDataType: boolean;
     instanceName: string;
+    instanceId: string;
     propertyName: string;
 
 
-    constructor(input?: PropertyBEModel) {
+    constructor(input?: InputBEModel) {
         super(input);
         if (input) {
             this.isSimpleType = PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1;
             this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
+
             let propNameIndex:number = this.name.indexOf('_');
             this.instanceName = this.name.substring(0, propNameIndex);
-            if (input.inputPath) {
-                this.propertyName = input.inputPath.substring(0, input.inputPath.indexOf('#'))
-            } else {
-                this.propertyName = this.name.substring(propNameIndex + 1);
+
+            if(input.properties && input.properties.length){
+                this.instanceId = input.properties[0].componentInstanceId;
+                this.propertyName = input.properties[0].name;
+            }else if(input.inputs && input.inputs.length){
+                this.instanceId = input.inputs[0].componentInstanceId;
+                this.propertyName = input.inputs[0].name;
+            }else{
+                if (input.inputPath) {
+                    this.propertyName = input.inputPath.substring(0, input.inputPath.indexOf('#'))
+                } else {
+                    this.propertyName = this.name.substring(propNameIndex + 1);
+                }
             }
         }
     }
diff --git a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
index a5279d0668..f5cd4094f5 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
@@ -1,4 +1,11 @@
 import { SchemaPropertyGroupModel, SchemaProperty } from "../aschema-property";
+import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
+export enum DerivedPropertyType {
+    SIMPLE,
+    LIST,
+    MAP,
+    COMPLEX
+}
 
 export class PropertyBEModel {
 
@@ -16,6 +23,7 @@ export class PropertyBEModel {
     definition: boolean;
     inputPath: string;
     propertiesName: string;
+    ownerId: string;
     input: PropertyBEModel;
 
     constructor(property?: PropertyBEModel, childProperty?:PropertyBEModel) {
@@ -32,6 +40,7 @@ export class PropertyBEModel {
             this.uniqueId = property.uniqueId;
             this.value = property.value ? property.value : property.defaultValue;
             this.definition = property.definition;
+            this.ownerId = property.ownerId;
             if (property.inputPath) {
                 this.inputPath = property.inputPath;
             }
@@ -39,6 +48,8 @@ export class PropertyBEModel {
         if (childProperty) {
             this.input = childProperty;
             this.propertiesName = childProperty.propertiesName;
+        } else {
+            this.propertiesName = this.name;
         }
 
         if (!this.schema || !this.schema.property) {
@@ -48,7 +59,7 @@ export class PropertyBEModel {
         }
     }
 
- 
+
 
     public toJSON = (): any => {
         let temp = angular.copy(this);
@@ -57,6 +68,18 @@ export class PropertyBEModel {
         return temp;
     };
 
+    public getDerivedPropertyType = () => {
+        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1) {
+            return DerivedPropertyType.SIMPLE;
+        } else if (this.type == PROPERTY_TYPES.LIST) {
+            return DerivedPropertyType.LIST;
+        } else if (this.type == PROPERTY_TYPES.MAP) {
+            return DerivedPropertyType.MAP;
+        } else {
+            return DerivedPropertyType.COMPLEX;
+        }
+    }
+
 }
 
 
diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
index 29f2c79225..564611c344 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
@@ -1,86 +1,40 @@
 import {SchemaPropertyGroupModel, SchemaProperty} from '../aschema-property';
-import { PROPERTY_DATA } from 'app/utils';
-import { PropertyBEModel, DerivedFEPropertyMap, DerivedFEProperty } from '../../models';
+import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
+import { FilterPropertiesAssignmentData, PropertyBEModel, DerivedPropertyType, DerivedFEPropertyMap, DerivedFEProperty } from 'app/models';
 
 
 export class PropertyFEModel extends PropertyBEModel {
 
-    //START - TO REMOVE:
-    treeNodeId: string;
-    parent: PropertyFEModel;
-
-    childrenProperties: Array<PropertyFEModel>;
-    isAllChildrenLevelsCalculated: boolean;
-    uniqueId: string;
-    valueObjectRef: any;
-    //END - TO REMOVE:
-
     expandedChildPropertyId: string;
     flattenedChildren:  Array<DerivedFEProperty>; //[parentPath] : Array<DerivedFEProp>
-    isDataType: boolean; //aka- isComplexType. (Type is NOT: simple, list, or map)
     isDeclared: boolean;
     isDisabled: boolean;
     isSelected: boolean;
-    isSimpleType: boolean;
-
-    private _derivedFromSimpleTypeName:string;
-    get derivedFromSimpleTypeName():string {
-        return this._derivedFromSimpleTypeName;
-    }
-    set derivedFromSimpleTypeName(derivedFromSimpleTypeName:string) {
-        this._derivedFromSimpleTypeName = derivedFromSimpleTypeName;
-    }
-
-    constructor(property?: PropertyBEModel);
-    constructor(name: string, type: string, treeNodeId: string, parent: PropertyFEModel, valueObjectRef: any, schema?: SchemaPropertyGroupModel);
-    constructor(nameOrPropertyObj?: string | PropertyBEModel, type?: string, treeNodeId?: string, parent?: PropertyFEModel, valueObjectRef?: any, schema?: SchemaPropertyGroupModel) {
-
-        super(typeof nameOrPropertyObj === 'string' ? null : nameOrPropertyObj);
-
-        if (typeof nameOrPropertyObj === 'string') {
-            this.name = nameOrPropertyObj;
-            this.type = type;
-            this.treeNodeId = treeNodeId;
-            this.parent = parent;
-            this.valueObjectRef = valueObjectRef;
-            this.value = this.value || this.defaultValue;
-            if(schema){
-                this.schema = new SchemaPropertyGroupModel(new SchemaProperty(schema.property));
-            }
-        }
+    isSimpleType: boolean; //for convenience only - we can really just check if derivedDataType == derivedPropertyTypes.SIMPLE to know if the prop is simple
+    uniqueId: string;
+    valueObj: any; //this is the only value we relate to in the html templates
+    derivedDataType: DerivedPropertyType;
 
+    constructor(property: PropertyBEModel){
+        super(property);
         this.isSimpleType = PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1;
-        this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
         this.setNonDeclared();
+        this.derivedDataType = this.getDerivedPropertyType();
+        this.flattenedChildren = [];
     }
 
-    public convertChildToInput = (childName: string): void => {
-        //childName: "mac_count_required"
-        let childJson = this.flattenedChildren[childName].map((child) => {
 
-        });
-    };
-
-    public getChildJsonRecursive = (child: string, value?: string): void => {
-        //TODO: use array.map for the below
-       /* value += "{" + this.flattenedChildren[child].name + ":";
-        if (this.flattenedChildren[child].valueType == 'simple') {
-            value += this.flattenedChildren[child].value + '}';
-            return value;
-        } else {
-            this.flattenedChildren[child].forEach(grandChild => {
-                if (this.flattenedChildren[grandChild].valueType == 'simple') {
-                    return "{" + this.flattenedChildren[grandChild].name + ':' + this.flattenedChildren[child].value.toString() + "}";
-                } else {
-                    return  this.getChildJsonRecursive(grandChild + '#' + this.flattenedChildren[child].name);
-                }
-            });
+    public getJSONValue = (): string => {
+        //If type is JSON, need to try parsing it before we stringify it so that it appears property in TOSCA - change per Bracha due to AMDOCS
+        //TODO: handle this.derivedDataType == DerivedPropertyType.MAP
+        if (this.derivedDataType == DerivedPropertyType.LIST && this.schema.property.type == PROPERTY_TYPES.JSON) {
+            try {
+                return JSON.stringify(this.valueObj.map(item => JSON.parse(item)));
+            } catch (e){}
         }
 
-        return "{" + this.flattenedChildren[child].name + this.flattenedChildren[child].value.toString() + "}";
-*/
-
-    };
+        return (this.derivedDataType == DerivedPropertyType.SIMPLE) ? this.valueObj : JSON.stringify(this.valueObj);     
+    }
 
     public setNonDeclared = (childPath?: string): void => {
         if (!childPath) { //declaring a child prop
@@ -102,31 +56,26 @@ export class PropertyFEModel extends PropertyBEModel {
         }
     }
 
-
-
-    //For expand-collapse functionality
+    //For expand-collapse functionality - used within HTML template
     public updateExpandedChildPropertyId = (childPropertyId: string): void => {
         if (childPropertyId.lastIndexOf('#') > -1) {
             this.expandedChildPropertyId = (this.expandedChildPropertyId == childPropertyId) ? (childPropertyId.substring(0, childPropertyId.lastIndexOf('#'))) : childPropertyId;
         } else {
             this.expandedChildPropertyId = this.name;
         }
-        //console.log("expandedChild is now " + this.expandedChildPropertyId);
     }
 
-    public convertToServerObject: Function = (): any => { //TODO: Idan, Rachel, Nechama: Decide what we need to do here
-        // let serverObject = {};
-        // let mapData = {
-        //     'type': this.type,
-        //     'required': this.required || false,
-        //     'defaultValue': this.defaultValue != '' && this.defaultValue != '[]' && this.defaultValue != '{}' ? this.defaultValue : null,
-        //     'description': this.description,
-        //     'isPassword': this.password || false,
-        //     'schema': this.schema,
-        //     'name': this.name
-        // };
-        // serverObject[this.name] = mapData;
+    public getIndexOfChild = (childPropName: string): number => {
+        return this.flattenedChildren.findIndex(prop => prop.propertiesName.indexOf(childPropName) === 0);
+    }
+
+    public getCountOfChildren = (childPropName: string):number => {
+        let matchingChildren:Array<DerivedFEProperty> = this.flattenedChildren.filter(prop => prop.propertiesName.indexOf(childPropName) === 0) || [];
+        return matchingChildren.length;
+    }
+
+    // public getListIndexOfChild = (childPropName: string): number => { //gets list of siblings and then the index within that list
+    //     this.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName)
+    // }
 
-        //return JSON.stringify(serverObject);
-    };
 }
diff --git a/catalog-ui/src/app/models/properties-inputs/simple-flat-property.ts b/catalog-ui/src/app/models/properties-inputs/simple-flat-property.ts
new file mode 100644
index 0000000000..d67a7d4d14
--- /dev/null
+++ b/catalog-ui/src/app/models/properties-inputs/simple-flat-property.ts
@@ -0,0 +1,15 @@
+export class SimpleFlatProperty {
+    uniqueId: string;
+    path: string;
+    name: string;
+    parentName: string;
+    instanceName: string;
+
+    constructor(uniqueId?: string, path?: string, name?: string, parentName?: string, instanceName?: string) {
+        this.uniqueId = uniqueId;
+        this.path = path;
+        this.name = name;
+        this.parentName = parentName;
+        this.instanceName = instanceName;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/property-fe-model.ts b/catalog-ui/src/app/models/property-fe-model.ts
deleted file mode 100644
index f83d6d6b51..0000000000
--- a/catalog-ui/src/app/models/property-fe-model.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import {SchemaPropertyGroupModel, SchemaProperty} from './aschema-property';
-import { PROPERTY_DATA } from 'app/utils';
-import { FilterPropertiesAssignmentData, PropertyBEModel } from 'app/models';
-
-export class PropertyFEModel extends PropertyBEModel {
-    public static filterData:FilterPropertiesAssignmentData;
-    childrenProperties: Array<PropertyFEModel>;
-    expandedChildPropertyId: string;
-    isAllChildrenLevelsCalculated: boolean;
-    isDataType: boolean;
-    isDisabled: boolean;
-    isSelected: boolean;
-    isSimpleType: boolean;
-    parent: PropertyFEModel;
-    treeNodeId: string;
-    valueObjectRef: any;
-    private _derivedFromSimpleTypeName:string;
-    get derivedFromSimpleTypeName():string {
-        return this._derivedFromSimpleTypeName;
-    }
-    set derivedFromSimpleTypeName(derivedFromSimpleTypeName:string) {
-        this._derivedFromSimpleTypeName = derivedFromSimpleTypeName;
-    }
-
-    constructor(property?: PropertyBEModel);
-    constructor(name: string, type: string, treeNodeId: string, parent: PropertyFEModel, valueObjectRef: any, schema?: SchemaPropertyGroupModel);
-    constructor(nameOrPropertyObj?: string | PropertyBEModel, type?: string, treeNodeId?: string, parent?: PropertyFEModel, valueObjectRef?: any, schema?: SchemaPropertyGroupModel) {
-
-        super(typeof nameOrPropertyObj === 'string' ? null : nameOrPropertyObj);
-
-        if (typeof nameOrPropertyObj === 'string') {
-            this.name = nameOrPropertyObj;
-            this.type = type;
-            this.treeNodeId = treeNodeId;
-            this.parent = parent;
-            this.valueObjectRef = valueObjectRef;
-            this.value = this.value || this.defaultValue;
-            if(schema){
-                this.schema = new SchemaPropertyGroupModel(new SchemaProperty(schema.property));
-            }
-        }
-        this.isSimpleType = PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1;
-        this.isDataType = PROPERTY_DATA.TYPES.indexOf(this.type) == -1;
-        this.setNonDeclared();
-    }
-
-
-    public setNonDeclared = (): void => {
-        this.isSelected = false;
-        this.isDisabled = false;
-    }
-
-    public setAsDeclared = (): void => {
-        this.isSelected = true;
-        this.isDisabled = true;
-    }
-
-    //For expand-collapse functionality
-    public updateExpandedChildPropertyId = (childPropertyId: string): void => {
-        this.expandedChildPropertyId = (this.expandedChildPropertyId == childPropertyId) ? '' : childPropertyId;
-    }
-
-    public convertToServerObject: Function = (): any => { //TODO: Idan, Rachel, Nechama: Decide what we need to do here
-        // let serverObject = {};
-        // let mapData = {
-        //     'type': this.type,
-        //     'required': this.required || false,
-        //     'defaultValue': this.defaultValue != '' && this.defaultValue != '[]' && this.defaultValue != '{}' ? this.defaultValue : null,
-        //     'description': this.description,
-        //     'isPassword': this.password || false,
-        //     'schema': this.schema,
-        //     'name': this.name
-        // };
-        // serverObject[this.name] = mapData;
-
-        //return JSON.stringify(serverObject);
-    };
-}
diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts
index 4060fe794e..7bfc014c36 100644
--- a/catalog-ui/src/app/modules/view-model-module.ts
+++ b/catalog-ui/src/app/modules/view-model-module.ts
@@ -53,7 +53,7 @@ import {ReqAndCapabilitiesViewModel} from "../view-models/workspace/tabs/req-and
 import {InputFormViewModel} from "../view-models/forms/input-form/input-form-view-modal";
 import {HierarchyViewModel} from "../view-models/tabs/hierarchy/hierarchy-view-model";
 import {downgradeComponent} from "@angular/upgrade/static";
-import {ConformanceLevelModalViewModel} from "../view-models/workspace/conformance-level-modal/conformance-level-modal-view-model";
+import {ConformanceLevelModalViewModel} from "../view-models/modals/conformance-level-modal/conformance-level-modal-view-model";
 // import {NG2ExampleComponent} from "../ng2/view-ng2/ng2.example.component/ng2.example.component";
 // import {upgradeAdapter} from "../ng2/app.module";
 // import { UpgradeAdapter } from '@angular/upgrade';
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 9e122cd288..ea73d382e2 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -8,7 +8,7 @@ import {UpgradeModule} from '@angular/upgrade/static';
 import {PropertiesAssignmentModule} from './pages/properties-assignment/properties-assignment.module';
 import {
     DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider,
-    StateParamsServiceFactory
+    StateParamsServiceFactory, CacheServiceProvider, EventListenerServiceProvider
 } from "./utils/ng1-upgraded-provider";
 import {ConfigService} from "./services/config.service";
 import {HttpService} from "./services/http.service";
@@ -48,6 +48,8 @@ export function configServiceFactory(config:ConfigService) {
         SharingServiceProvider,
         CookieServiceProvider,
         StateParamsServiceFactory,
+        CacheServiceProvider,
+        EventListenerServiceProvider,
         AuthenticationService,
         Cookie2Service,
         ConfigService,
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
index de5965e488..84ac46c4cf 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
@@ -4,6 +4,7 @@ import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdow
 import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
 import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component";
 import {ValidationConfiguration} from "app/models";
+import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component";
 
 @Component({
     selector: 'dynamic-element',
@@ -13,7 +14,8 @@ import {ValidationConfiguration} from "app/models";
         UiElementInputComponent,
         UiElementDropDownComponent,
         UiElementCheckBoxComponent,
-        UiElementPopoverInputComponent
+        UiElementPopoverInputComponent,
+        UiElementIntegerInputComponent
     ]
 })
 export class DynamicElementComponent {
@@ -21,6 +23,7 @@ export class DynamicElementComponent {
     @ViewChild('target', { read: ViewContainerRef }) target: any;
     @Input() type: any;
     @Input() name: string;
+    @Input() readonly:boolean;
     value:any;
 
     // Two way binding for value (need to write the "Change" word like this)
@@ -50,17 +53,16 @@ export class DynamicElementComponent {
         // Factory to create component based on type or peroperty name.
         switch(this.type) {
             case 'list':
-            case 'integer': 
-                this.createComponent(UiElementInputComponent);
+            case 'integer':
+                this.createComponent(UiElementIntegerInputComponent);
                 this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
                 break;
             case 'string':
-                switch(this.name.toUpperCase()) {
-                    case 'SUBNETPOOLID':
-                        this.createComponent(UiElementPopoverInputComponent);
-                        break;
-                    default:
-                        this.createComponent(UiElementInputComponent);
+                if (this.name.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
+                    this.createComponent(UiElementPopoverInputComponent);
+                }
+                else {
+                    this.createComponent(UiElementInputComponent);
                 }
                 break;
             case 'boolean':
@@ -84,6 +86,7 @@ export class DynamicElementComponent {
             this.cmpRef.instance.name = this.name;
             this.cmpRef.instance.type = this.type;
             this.cmpRef.instance.value = this.value;
+            this.cmpRef.instance.readonly = this.readonly;
         }
 
         // Subscribe to change event of of ui-element-basic and fire event to change the value
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
index 18b044bc9d..f53b8616ac 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
@@ -8,6 +8,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { UiElementPopoverInputComponent } from "./elements-ui/popover-input/ui-element-popover-input.component";
 import {PopoverModule} from "../popover/popover.module";
 import {TooltipModule} from "../tooltip/tooltip.module";
+import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component";
 
 @NgModule({
     declarations: [
@@ -15,7 +16,8 @@ import {TooltipModule} from "../tooltip/tooltip.module";
         UiElementInputComponent,
         UiElementCheckBoxComponent,
         UiElementDropDownComponent,
-        UiElementPopoverInputComponent
+        UiElementPopoverInputComponent,
+        UiElementIntegerInputComponent
     ],
     imports: [
         BrowserModule,
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
index 2ad3d8e94a..a3e28c5f0b 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
@@ -1 +1 @@
-<input #{{name}}  [(ngModel)]="value" type="checkbox" (change)="onSave(value)" />
+<input #{{name}}  [(ngModel)]="value" type="checkbox" (change)="onSave(value)" [ngClass]="{'disabled':readonly}"/>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
index 589d00e42d..bfb927af71 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
@@ -1,3 +1,3 @@
-<select name='{{name}}' [(ngModel)]="value" #t (change)="onSave()">
+<select name='{{name}}' [(ngModel)]="value" #t (change)="onSave()"  [ngClass]="{'disabled':readonly}">
   <option *ngFor="let ddvalue of values" [value]="ddvalue.value">{{ddvalue.label}}</option>
 </select>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
index 208bf54983..b1fb37a186 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
@@ -18,7 +18,6 @@ export class DropdownValue {
   styleUrls: ['./ui-element-dropdown.component.less'],
 })
 export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
-
   @Input()
   values: DropdownValue[];
 
@@ -27,7 +26,7 @@ export class UiElementDropDownComponent extends UiElementBase implements UiEleme
   }
 
     onSave() {
-        this.baseEmitter.emit(this.value);
+        this.baseEmitter.emit(JSON.parse(this.value));
     }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
index 00fea65b72..814ebfd28b 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
@@ -10,4 +10,6 @@
     [pattern]="pattern"
     [formControl]="control"
     tooltip="{{value}}"
+    [readonly]="readonly"
+    [ngClass]="{'disabled':readonly}"
     />
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
index 5a14d8f206..2d64d9b713 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef, ContentChildren } from '@angular/core';
+import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser'
 import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
 
@@ -8,7 +8,6 @@ import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.comp
     styleUrls: ['./ui-element-input.component.less'],
 })
 export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface {
-
     constructor() {
         super();
         this.pattern = this.validation.validationPatterns.comment;
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html
new file mode 100644
index 0000000000..e5518d453f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html
@@ -0,0 +1,15 @@
+<input
+    class="value-input"
+    [ngClass]="{'error': control.invalid}"
+    type="text"
+    [name]="name"
+    [(ngModel)]="value"
+    (change)="onSave()"
+    [attr.maxlength]="validation.propertyValue.max"
+    [attr.minlength]="validation.propertyValue.min"
+    [pattern]="pattern"
+    [formControl]="control"
+    tooltip="{{value}}"
+    [readonly]="readonly"
+    [ngClass]="{'disabled':readonly}"
+/>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less
new file mode 100644
index 0000000000..8073c3858e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less
@@ -0,0 +1,17 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-integer-input {
+
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
+
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
new file mode 100644
index 0000000000..d42c80a89e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
@@ -0,0 +1,21 @@
+import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+@Component({
+    selector: 'ui-element-integer-input',
+    templateUrl: './ui-element-integer-input.component.html',
+    styleUrls: ['./ui-element-integer-input.component.less'],
+})
+export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface {
+    constructor() {
+        super();
+        this.pattern = this.validation.validationPatterns.comment;
+    }
+
+    onSave() {
+        if (!this.control.invalid){
+            this.baseEmitter.emit(JSON.parse(this.value));
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
index 5adceb49a0..3bd51b4e36 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
@@ -4,10 +4,10 @@
         type="text"
         [ngClass]="{'error': control.invalid}"
         [name]="name"
-        [value]="value"
+        [value]="value!=undefined?value:''"
         disabled
         />
-    <button [popover]="popoverForm">Edit</button>
+    <button [popover]="popoverForm"  [ngClass]="{'disabled':readonly}">Edit</button>
 </div>
 
 <popover-content #popoverForm [title]="name" [buttons]="buttonsArray" [placement]="'top'" [closeOnClickOutside]="true">
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
index 7300417686..84dd884d1f 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
@@ -1,4 +1,4 @@
-import {Component, ViewChild, ElementRef} from '@angular/core';
+import {Component, ViewChild, ElementRef, Input} from '@angular/core';
 import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
 import {ButtonsModelMap, ButtonModel} from "app/models";
 import { PopoverContentComponent } from "app/ng2/components/popover/popover-content.component"
@@ -10,7 +10,6 @@ import { PopoverComponent } from "app/ng2/components/popover/popover.component"
     styleUrls: ['./ui-element-popover-input.component.less']
 })
 export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface {
-
     @ViewChild('textArea') textArea: ElementRef;
     @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent;
 
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
index b60271f6f0..fa2be1048c 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
@@ -25,6 +25,7 @@ export class UiElementBase {
     protected type: string;
     protected value: any;
     protected pattern: any;
+    protected readonly:boolean;
 
     constructor() {
         //this.control = new FormControl('', [Validators.required]);
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
index c1341b8dcf..afed54672c 100644
--- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
+++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
@@ -6,6 +6,13 @@ form{
         &:not(:last-child){
             border-bottom: solid 1px @main_color_o;
         }
+        input{
+            &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
+            &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
+            &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
+            &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
+            &:-ms-input-placeholder { font-style: italic; } /* Edge */
+        }
     }
     /deep/ [ng-reflect-checked="true"]{
         /deep/ .checkbox-label-content{
@@ -16,7 +23,7 @@ form{
 
 .open-filter-button{
     cursor: pointer;
-    width: 25px;
+    width: 32px;
     height: 34px;
     display: inline-block;
     &.open{
@@ -29,6 +36,7 @@ form{
     }
     .filter-icon{
         top: 8px;
+        right: 2px;
         position: relative;
     }
 }
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
new file mode 100644
index 0000000000..7fdd95b304
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
@@ -0,0 +1,3 @@
+<modal #confirmationModal title="Delete Input" size="sm" [buttons]="footerButtons">
+    Are you sure you want to delete this input?
+</modal>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
new file mode 100644
index 0000000000..24c37b5636
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
@@ -0,0 +1,38 @@
+/**
+ * Created by rc2122 on 6/1/2017.
+ */
+import {Component, Output, EventEmitter, ViewChild} from "@angular/core";
+import {ButtonsModelMap, ButtonModel} from "app/models/button";
+import {ModalComponent} from "app/ng2/components/modal/modal.component";
+
+@Component({
+    selector: 'confirm-delete-input',
+    templateUrl: './confirmation-delete-input.component.html'
+})
+export class ConfirmationDeleteInputComponent {
+
+    @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
+    @ViewChild ('confirmationModal') confirmationModal:ModalComponent;
+    footerButtons:ButtonsModelMap = {};
+
+    constructor (){
+    }
+
+    ngOnInit() {
+        this.footerButtons['Delete'] = new ButtonModel('Delete', 'blue', this.onDeleteInput);
+        this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.closeModal);
+    }
+
+    onDeleteInput = (input) => {
+        this.deleteInput.emit(input);
+        this.closeModal();
+    };
+
+    openModal = () => {
+        this.confirmationModal.open();
+    }
+
+    closeModal = () => {
+        this.confirmationModal.close();
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
index e7801b82cf..fb6b04013f 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -1,4 +1,5 @@
 <div class="properties-table">
+    <loader [display]="isLoading" size="large" [relative]="true"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
         <div class="table-cell col2">Type</div>
@@ -7,31 +8,39 @@
     </div>
     <div class="table-body">
         <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
-        <div class="table-row" *ngFor="let input of inputs">
-            <div class="table-cell col1">
-                <span tooltip="{{input.name}}" >{{input.name}}</span>
-                <span *ngIf="input.description"
-                      class="property-description-icon sprite-new show-desc"
-                      tooltip="{{input.description}}"></span>
-            </div>
-            <div class="table-cell col2">{{input.type | contentAfterLastDot}}</div>
-            <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
-            <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
-                <dynamic-element class="value-input"
-                                 *ngIf="input.isSimpleType"
-                                 pattern="validationUtils.getValidationPattern(input.type)"
-                                 [(value)]="input.defaultValue"
-                                 [type]="input.type"
-                                 [name]="input.name"
-                                 (change)="onInputValueChanged(input);">
-                </dynamic-element>
-                <div class="delete-button-container">
-                    <span class="sprite-new delete-btn" (click)="onDeleteInput(input)"></span>
+        <div>
+            <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
+                <div class="table-cell col1">
+                    <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
+                    <span *ngIf="input.description"
+                          class="property-description-icon sprite-new show-desc"
+                          tooltip="{{input.description}}"></span>
+                </div>
+                <div class="table-cell col2">
+                    <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
+                        <span>{{input.type | contentAfterLastDot}}</span>
+                    </div>
+                </div>
+                <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
+                <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
+                    <dynamic-element class="value-input"
+                                     *ngIf="input.isSimpleType"
+                                     pattern="validationUtils.getValidationPattern(input.type)"
+                                     [(value)]="input.defaultValue"
+                                     [type]="input.type"
+                                     [name]="input.name"
+                                 (change)="onInputValueChanged(input);"
+                                 [readonly]="readonly">
+                    </dynamic-element>
+                    <div class="delete-button-container">
+                        <span *ngIf="!input.ownerId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
+                    </div>
                 </div>
-            </div>
 
+            </div>
         </div>
     </div>
 </div>
+<confirm-delete-input #deleteInputConfirmation (deleteInput)="onDeleteInput()"></confirm-delete-input>
 
 
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
new file mode 100644
index 0000000000..93f96470bc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
@@ -0,0 +1,178 @@
+
+@import './../../../../assets/styles/variables.less';
+
+:host /deep/ input { width:100%;}
+
+.properties-table {
+    display:flex;
+    flex-direction:column;
+    flex: 1;
+    height:100%;
+    text-align:left;
+
+    dynamic-property {
+        width:100%;
+    }
+
+    /deep/ .dynamic-property-row {
+         border-top:solid #d2d2d2 1px;
+    }
+
+    /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
+        border-top: none;
+    }
+
+    .table-header {
+        font-weight:bold;
+        border-top: #d2d2d2 solid 1px;
+        background-color: #eaeaea;
+
+        .valueCol {
+            justify-content: flex-start;
+            padding: 5px;
+        }
+    }
+    .table-header, .table-row {
+        display: flex;
+        flex-direction:row;
+        flex: 0 0 auto;
+    }
+
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+
+        .no-data {
+            border: #d2d2d2 solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: #e6f6fb;
+            color:  #009fdb;
+        }
+    }
+
+    .table-rows-header {
+        font-size:16px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: @tlv_color_v;
+    }
+
+    .table-row {
+        &:hover {
+             background-color:#f8f8f8; cursor:pointer;
+        }
+
+        &:last-child {
+            flex: 1 0 auto;
+        }
+        .selected-row {
+            background-color:#e6f6fb;
+        }
+    }
+    .cut-inner-long-text{
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+     .table-cell {
+        font-size:13px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-right:none;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+
+        &:last-child {
+            border-right:#d2d2d2 solid 1px;
+        }
+        &.col1 {
+            flex: 0 0 300px;
+            max-width:300px;
+            display: flex;
+            justify-content: space-between;
+
+            .property-name {
+                flex: 1;
+            }
+
+            .property-description-icon {
+                float: right;
+                margin-top: 4px;
+                margin-left: 5px;
+                flex: 0 0 auto;
+            }
+        }
+        &.col2 {
+            flex: 0 0 150px;
+            max-width:150px;
+        }
+
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+        }
+
+        &.valueCol {
+            flex: 1 0 auto;
+            min-width: 350px;
+            display: flex;
+            justify-content: flex-end;
+            padding: 0px;
+
+            .value-input {
+                flex: 1;
+                max-height: 24px;
+                border: none;
+                background-color: inherit;
+
+                &:focus, &:active {
+                    border:none;
+                    outline:none;
+                }
+            }
+
+            .delete-btn {
+                flex: 0 0 auto;
+            }
+
+            .delete-button-container {
+                max-height: 24px;
+            }
+
+            &.inner-table-container {
+                padding: 0px;
+
+                .delete-button-container {
+                    padding: 3px 5px 0 0 ;
+                }
+            }
+        }
+
+         &.input-value-col {
+             padding: 5px;
+         }
+
+
+    }
+
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
index ea01edf043..83c0bda991 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
@@ -1,20 +1,25 @@
 /**
  * Created by rc2122 on 5/4/2017.
  */
-import {Component, Input, Output, EventEmitter} from "@angular/core";
+import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
 import {InputFEModel} from "app/models";
+import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component";
 
 @Component({
     selector: 'inputs-table',
     templateUrl: './inputs-table.component.html',
-    styleUrls: ['../properties-table/properties-table.component.less']
+    styleUrls: ['../inputs-table/inputs-table.component.less']
 })
 export class InputsTableComponent {
 
     @Input() inputs: Array<InputFEModel>;
-
+    @Input() readonly:boolean;
+    @Input() isLoading:boolean;
     @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
+    @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent;
+
+    selectedInputToDelete:InputFEModel;
 
     constructor (){
     }
@@ -23,11 +28,14 @@ export class InputsTableComponent {
         this.inputValueChanged.emit(input);
     };
 
-    onDeleteInput = (input) => {
-        this.deleteInput.emit(input);
-    }
-
+    onDeleteInput = () => {
+        this.deleteInput.emit(this.selectedInputToDelete);
+    };
 
+    openDeleteModal = (input:InputFEModel) => {
+        this.selectedInputToDelete = input;
+        this.deleteInputConfirmation.openModal();
+    }
 }
 
 
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html
new file mode 100644
index 0000000000..0e13cee674
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.html
@@ -0,0 +1,5 @@
+<div *ngIf="display" data-tests-id="tlv-loader">
+    <div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div>
+    <div class="tlv-loader {{size}}"></div>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less
new file mode 100644
index 0000000000..054b6021a1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.less
@@ -0,0 +1,75 @@
+@import '../../../../assets/styles/variables';
+.tlv-loader-back {
+    background-color: @main_color_p;
+    position: fixed;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    opacity: 0.5;
+}
+
+.tlv-loader-relative { position: absolute; top: 0;}
+
+.tlv-loader {
+    z-index: 10002;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+@keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
new file mode 100644
index 0000000000..4d90b2853d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
@@ -0,0 +1,92 @@
+/**
+ * Created by rc2122 on 6/6/2017.
+ */
+import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core";
+@Component({
+    selector: 'loader',
+    templateUrl: './loader.component.html',
+    styleUrls: ['./loader.component.less']
+})
+export class LoaderComponent {
+
+    @Input() display:boolean;
+    @Input() size:string;// small || medium || large
+    @Input() elementSelector:string; // required if is relative true
+    @Input() relative:boolean;
+
+    interval;
+
+    constructor (private el: ElementRef, private renderer: Renderer){
+    }
+
+    ngOnInit() {
+
+        if (this.elementSelector) {
+            let elemParent = angular.element(this.elementSelector);
+            let positionStyle:string = elemParent.css('position');
+            this.setStyle(positionStyle);
+        }
+
+        if (this.relative === true) {
+            let positionStyle:string = this.el.nativeElement.parentElement.style.position;
+            this.setStyle(positionStyle);
+        }
+        if (!this.size) {
+            this.size = 'large';
+        }
+    }
+
+    ngOnDestroy(){
+        clearInterval(this.interval);
+    }
+
+    calculateSizesForFixPosition = (positionStyle:string):void => {
+        // This is problematic, I do not want to change the parent position.
+        // set the loader on all the screen
+        let parentLeft = this.el.nativeElement.parentElement.offsetLeft;
+        let parentTop = this.el.nativeElement.parentElement.offsetTop;
+        let parentWidth = this.el.nativeElement.parentElement.offsetWidth;
+        let parentHeight = this.el.nativeElement.parentElement.offsetHeight;
+        this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle);
+        this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop);
+        this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft);
+        this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth);
+        this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight);
+    };
+
+    setStyle = (positionStyle:string):void => {
+
+        switch (positionStyle) {
+            case 'absolute':
+            case 'fixed':
+                // The parent size is not set yet, still loading, so need to use interval to update the size.
+                this.interval = window.setInterval(()=> {
+                    this.calculateSizesForFixPosition(positionStyle);
+                }, 2000);
+                break;
+            default:
+                // Can change the parent position to relative without causing style issues.
+                this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative');
+                break;
+        }
+    };
+
+    ngOnChanges(changes: SimpleChanges) {
+        if(changes.display){
+            this.changeLoaderDisplay(false);
+            if ( this.display ) {
+                window.setTimeout(():void => {
+                    this.changeLoaderDisplay(true);
+                }, 500);
+            } else {
+                window.setTimeout(():void => {
+                    this.changeLoaderDisplay(false);
+                }, 0);
+            }
+        }
+    }
+
+    changeLoaderDisplay = (display:boolean):void => {
+        this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none');
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
new file mode 100644
index 0000000000..4882449596
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -0,0 +1,18 @@
+<div class="custom-modal {{size}}">
+    <div class="ng2-modal-content">
+        <div class="ng2-modal-header">
+            <span class="title">{{ title }}</span>
+            <span class="close-button" (click)="close()"></span>
+        </div>
+        <div class="ng2-modal-body">
+            <ng-content></ng-content>
+        </div>
+        <div class="ng2-modal-footer">
+            <button *ngFor="let buttonName of buttonsNames"
+                    class="tlv-btn {{buttons[buttonName].cssClass}}"
+                    [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
+                    (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+        </div>
+    </div>
+</div>
+<div class="modal-background"></div>
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less
new file mode 100644
index 0000000000..a35f829e6a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.less
@@ -0,0 +1,115 @@
+@import '../../../../assets/styles/variables';
+@import '../../../../assets/styles/mixins';
+@import '../../../../assets/styles/sprite-old';
+/deep/ modal {
+    display: none;
+
+    .custom-modal {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1000;
+        overflow: auto;
+        margin: auto;
+        display: flex;
+        align-items: center;
+
+        .ng2-modal-content {
+            background: #fff;
+            width: 100%;
+            box-shadow: 0 5px 15px rgba(0,0,0,.5);
+            border-radius: 4px;
+            .ng2-modal-body{
+                padding: 20px;
+            }
+
+            .ng2-modal-header{
+                .m_18_m;
+                font-weight: bold;
+                -webkit-box-flex: 1;
+                -ms-flex-positive: 1;
+                flex-grow: 1;
+                height: 50px;
+                line-height: 50px;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                text-align: left;
+                border-bottom: solid 1px @main_color_o;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                align-items: center;
+                margin: 0px 20px;
+                .title{
+                    -webkit-box-flex: 999;
+                    -ms-flex-positive: 999;
+                    flex-grow: 999;
+                }
+                .close-button{
+                    .sprite;
+                    .sprite.x-btn-black;
+                    cursor: pointer;
+                }
+            }
+
+            .ng2-modal-footer{
+                background-color: @tlv_color_t;
+                padding: 17px 30px;
+                clear: both;
+                -webkit-box-flex: 1;
+                -ms-flex-positive: 1;
+                flex-grow: 1;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                align-items: center;
+                -webkit-box-pack: end;
+                -ms-flex-pack: end;
+                justify-content: flex-end;
+                border-radius: 4px;
+                button{
+                    margin: 0 12px 0 6px;
+                }
+            }
+        }
+    }
+
+    .modal-background {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: #000;
+        opacity: 0.5;
+        z-index: 900;
+    }
+}
+
+.xl {
+    width: 1200px;
+}
+
+.l {
+    width: 875px;
+}
+
+.md {
+    width: 650px;
+}
+
+.sm {
+    width: 552px;
+}
+
+.xsm {
+    width: 432px;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
new file mode 100644
index 0000000000..4a00871b21
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -0,0 +1,46 @@
+/**
+ * Created by rc2122 on 6/1/2017.
+ */
+import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+import * as $ from 'jquery';
+import {ButtonsModelMap} from "app/models/button";
+
+@Component({
+    selector: 'modal',
+    templateUrl: './modal.component.html',
+    styleUrls:['modal.component.less']
+})
+
+export class ModalComponent implements OnInit, OnDestroy {
+    @Input() size: string; 'xl|l|md|sm|xsm'
+    @Input() title: string;
+    @Input() public buttons:ButtonsModelMap;
+    private modalElement: JQuery;
+    private buttonsNames:Array<string>;
+
+    constructor( el: ElementRef ) {
+        this.modalElement = $(el.nativeElement);
+    }
+
+    ngOnInit(): void {
+        let modal = this;
+        this.modalElement.appendTo('body');
+        if(this.buttons){
+            this.buttonsNames = Object.keys(this.buttons);
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.modalElement.remove();
+    }
+
+    open(): void {
+        this.modalElement.show();
+        $('body').addClass('modal-open');
+    }
+
+    close(): void {
+        this.modalElement.hide();
+        $('body').removeClass('modal-open');
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html
deleted file mode 100644
index 6e7d4e882b..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- TODO: refactor this to be dynamic -->
-<div class="derived-property-row" *ngIf="propertyObj.isDeclared || propertyObj.derivedDataType == derivedPropertyTypes.SIMPLE">
-    <div class="table-cell" [ngClass]="{'iltered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div>
-
-    <div class="table-cell simple">
-        <input type="text" [(ngModel)]="propertyObj.value" [disabled]="propertyObj.isDisabled || propertyObj.isDeclared" (change)="valueChanged.emit()" />
-    </div>
-</div>
-<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.COMPLEX">
-    <div class="table-cell" [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div>
-    <div class="table-cell complex">
-        <span class="datatype-text">{{propertyObj.type | contentAfterLastDot }}</span>
-        <span (click)="expandChildById(propertyObj.propertiesName)" class="expand-icon" [class.expanded]="expanded">V</span>
-    </div>
-</div>
-<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.SIMPLELIST ||propertyObj.derivedDataType == derivedPropertyTypes.SIMPLEMAP">
-    <div class="table-cell">
-        <span [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}">{{propertyObj.name}}</span>
-    </div>
-    <div class="table-cell simple2">
-        <div class="sprite-new add-item-icon" (click)="addRows(propertyObj)"></div>
-    </div>
-</div>
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less
deleted file mode 100644
index 3102c5ceb8..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less
+++ /dev/null
@@ -1,35 +0,0 @@
-.derived-property-row {
-    display:flex;
-    flex-direction:row;
-    position:relative;
-    border-top: #d2d2d2 solid 1px;
-    
-    &:first-child {
-        border-top:none;
-    }
-    .table-cell {
-        flex: 0 0 50%;
-        padding:5px;
-        position:relative;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &:first-child {
-            border-right:#d2d2d2 solid 1px;
-            overflow:hidden;
-        }
-        span.expand-icon {
-            position: absolute;
-            right: 10px;
-            transition: 200ms transform ease-in-out;
-        }
-        span.expand-icon.expanded {
-            transform: rotate(-180deg);
-        }
-    }
-}
-.filtered {
-    /deep/ .checkbox-label-content{
-        background-color: yellow;
-    }
-}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts
deleted file mode 100644
index 16f069a685..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Created by rc2122 on 4/20/2017.
- */
-import {Component, Input, Output, EventEmitter} from "@angular/core";
-import { DerivedFEProperty, DerivedPropertyType} from "app/models";
-import {PropertiesService} from "../../../services/properties.service";
-
-@Component({
-    selector: 'derived-property',
-    templateUrl: './derived-property.component.html',
-    styleUrls: ['./derived-property.component.less']
-})
-export class DerivedPropertyComponent {
-
-    derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement
-    
-    @Input() propertyObj: DerivedFEProperty;
-    @Input() propertyNameSearchText: string;
-    @Input() expanded: boolean;
-    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
-    @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
-    @Output() selectProperty: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-
-    constructor ( private propertiesService:PropertiesService){
-    }
-
-
-    propValueChanged = () => {
-        this.valueChanged.emit(this.propertyObj);
-    };
-
-    expandChildById = (id: string) => {
-        this.expandChild.emit(id);
-    }
-
-    checkedChange = (isChecked:boolean) => {
-        this.selectProperty.emit(isChecked);
-    }
-    
-    addRows = (flatProperty: DerivedFEProperty): void => {
-        console.log("ADDING A ROW OF TYPE " + flatProperty.type);
-        console.log(flatProperty);
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index 17e4002ae5..d6ee568c0c 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -1,66 +1,65 @@
 <div class="dynamic-property-row"
-    [ngClass]="{'selected': selectedPropertyId === property.uniqueId }"
+    [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName }"
     [class.with-top-border]="property.isChildOfListOrMap"
     (click)="onClickPropertyRow(property, $event)">
-    <!-- LEFT CELL - for all NON-PropFEModel properties except for MAP)-->
+    <!-- LEFT CELL -->
     <ng-container *ngIf="!isPropertyFEModel">
-        <div class="table-cell" *ngIf="canBeDeclared"> <!-- simple children of complex type -->
-            <checkbox  [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared" (checkedChange)="checkProperty.emit(property.propertiesName)"
+        <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}"> <!-- simple children of complex type -->
+            <checkbox  [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"
             ></checkbox>
         </div>
         <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
+        <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
+            <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly}" />
+        </div>
     </ng-container>
-    <!-- RIGHT CELL -->
-    <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared">
-        <div class="table-cell" [class.full-width]="isPropertyFEModel || property.isChildOfListOrMap">
+    <!-- RIGHT CELL OR FULL WIDTH CELL-->
+    <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared || (property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)">
+        <div class="table-cell">
             <dynamic-element class="value-input"
                 pattern="validationUtils.getValidationPattern(property.type)"
-                [(value)]="property.value"
-                [type]="property.type"
+                [(value)]="property.valueObj"
+                [type]="property.isDeclared ? 'string' : property.type"
                 [name]="property.name"
-                (valueChange)="propValueChanged(property);"
+                (valueChange)="valueChanged.emit();"
+                             [readonly]="readonly||property.isDeclared"
                 > <!--[disabled]="property.isDisabled || property.isDeclared" -->
             </dynamic-element>
         </div>
     </ng-container>
-    <ng-container *ngIf="!property.isDeclared"> <!--  other cases need to fail if isDeclared, in which case we need to use full width value above instead) -->
-
-        <ng-container *ngIf="propType == derivedPropertyTypes.COMPLEX && !isPropertyFEModel">
-            <div class="table-cell complex" [class.full-width]="property.isChildOfListOrMap">
-                <span>{{property.type | contentAfterLastDot }}</span>
-            </div>
-        </ng-container>
-        <ng-container *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP">
-            <div class="table-cell map-entry"><input type="text" /></div>
-            <div class="table-cell" *ngIf="property.schema.property.isSimpleType">
-                <input type="text" [(ngModel)]="property.value" /></div>
-            <div class="table-cell" *ngIf="!property.schema.property.isSimpleType">
-                <span>{{property.schema.property.type | contentAfterLastDot }}</span>
-            </div>
-        </ng-container>
-
-        <!-- ICONS: add, delete, and expand -->
-        <div *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="table-cell"><span class="sprite-new add-item-icon" (click)="addRows()"></span></div>
-        <span *ngIf="property.isChildOfListOrMap" class="delete-span sprite-new delete-item-icon" (click)="deleteItem.emit(property.propertiesName)"></span>
-        <span *ngIf="propType == derivedPropertyTypes.COMPLEX || (property.isChildOfListOrMap && propChildren)" (click)="expandChildById(propPath)" class="expand-icon" [class.expanded]="propPath == expandedChildId">V</span>
+    <ng-container *ngIf="!isPropertyFEModel && propType != derivedPropertyTypes.SIMPLE && !property.isDeclared"> <!-- right cell for complex elements, or list complex -->
+        <div class="table-cell" *ngIf="propType == derivedPropertyTypes.COMPLEX">{{property.type | contentAfterLastDot }}</div>
+        <div class="table-cell" *ngIf="propType == derivedPropertyTypes.MAP && !property.schema.property.isSimpleType">{{property.schema.property.type | contentAfterLastDot }}</div>
+    </ng-container>
+    <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP)"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
+        <div class="table-cell empty"></div>
+    </ng-container>
+    <!-- ICONS: add, delete, and expand -->
+    <ng-container *ngIf="!property.isDeclared">
+            <span *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon sprite-new add-item-icon" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}"></span>
+            <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
+            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || hasChildren())" (click)="expandChildById(propPath)" class="property-icon expand-icon" [class.expanded]="propPath == expandedChildId">V</span>
     </ng-container>
 
 </div>
-<!-- Now, recurse into children -->
-<ng-container *ngIf="propChildren && !property.isDeclared">
-    <ng-container *ngFor="let prop of propChildren | filterChildProperties: expandedChildId; trackBy:prop?.propertiesName">
+<!-- FLAT CHILDREN -->
+<div class="flat-children-container" *ngIf="isPropertyFEModel && !property.isDeclared">
+    <ng-container *ngFor="let prop of property.flattenedChildren | filterChildProperties: expandedChildId; trackBy:prop?.propertiesName">
         <dynamic-property
             [selectedPropertyId]="selectedPropertyId"
-            [canBeDeclared]="childrenCanBeDeclared"
+            [canBeDeclared]="prop.canBeDeclared"
             [property]="prop"
             [expandedChildId]="expandedChildId"
-            [propChildren]=""
-            (valueChanged)="propValueChanged(prop);"
+            [propertyNameSearchText]="propertyNameSearchText"
+            [readonly]="readonly"
+            (valueChanged)="childValueChanged(prop)"
+            (mapKeyChanged)="removeValueFromParent(prop, $event)"
             (expandChild)="expandChildById($event)"
             (deleteItem)="deleteListOrMapItem($event)"
             (clickOnPropertyRow)="onClickPropertyRow($event)"
             (checkProperty)="checkedChange($event)"
+            (addChildPropsToParent)="addChildProps($event, prop.propertiesName)"
             >
         </dynamic-property>
     </ng-container>
-</ng-container>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
index 53cde3035a..cb7cd39640 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,40 +1,40 @@
+.flat-children-container {
+    dynamic-property:first-child .dynamic-property-row:not(.with-top-border) {
+        border-top:none;
+    }
+    .dynamic-property-row {
+        border-top: solid 1px #CCC;
+    }
+}
 .dynamic-property-row {
     display:flex;
     flex-direction:row;
-    position:relative;
-
+    align-items: center;
+    
     .table-cell {
-        flex: 1 0 50%;
+        flex: 1;
         padding:5px;
-        position:relative;
         text-overflow: ellipsis;
         white-space: nowrap;
-        
+        overflow:hidden;
+        min-height:32px;
 
-        &.full-width {
-            border-right:none;
-            flex: 0 0 100%;
-        }
-
-        &:first-child:not(:only-child) {
+        &:first-child {
+            flex: 0 0 50%;
             border-right:#d2d2d2 solid 1px;
-            overflow:hidden;
+            
+        
+            &:only-of-type {
+                flex: 1 1 100%;
+                border-right:none;
+            }
         }
 
-
-    }
-    span.delete-item-icon{
-        position: absolute;
-        right: 25px;
-        top: 10px;
     }
-    span.add-item-icon {
-        float:right;
+    .property-icon {
+        flex: 0 0 auto;
     }
     span.expand-icon {
-        position: absolute;
-        top:6px;
-        right: 10px;
         transition: 200ms transform ease-in-out;
     }
     span.expand-icon.expanded {
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index 0ca93a773f..1c7fbfac7a 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -3,7 +3,6 @@ import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyTyp
 import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
 import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils";
 import { DataTypeService } from "../../../services/data-type.service";
-import { UUID } from "angular2-uuid";
 
 
 @Component({
@@ -17,64 +16,33 @@ export class DynamicPropertyComponent {
     propType: DerivedPropertyType;
     propPath: string;
     isPropertyFEModel: boolean;
-    mapOfIDsAndKeys: Map<string, string> = new Map(); //used for map and list
+    childrenCount: number;
 
-    childrenCanBeDeclared: boolean;
     @Input() canBeDeclared: boolean;
     @Input() property: PropertyFEModel | DerivedFEProperty;
-    @Input() propChildren: Array<DerivedFEProperty>;
     @Input() expandedChildId: string;
     @Input() selectedPropertyId: string;
+    @Input() propertyNameSearchText: string;
+    @Input() readonly: boolean;
 
     @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
     @Output() checkProperty: EventEmitter<string> = new EventEmitter<string>();
     @Output() deleteItem: EventEmitter<string> = new EventEmitter<string>();
     @Output() clickOnPropertyRow: EventEmitter<PropertyFEModel | DerivedFEProperty> = new EventEmitter<PropertyFEModel | DerivedFEProperty>();
+    @Output() mapKeyChanged: EventEmitter<string> = new EventEmitter<string>();
+    @Output() addChildPropsToParent: EventEmitter<Array<DerivedFEProperty>> = new EventEmitter<Array<DerivedFEProperty>>();
+
 
     constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) {
     }
 
     ngOnInit() {
         this.isPropertyFEModel = this.property instanceof PropertyFEModel;
-        if (this.property instanceof PropertyFEModel) {
-            this.propType = this.getDerivedPropertyType(this.property.type);
-            this.propPath = this.property.name;
-        } else {
-            this.propType = this.property.derivedDataType;
-            this.propPath = this.property.propertiesName;
-        }
-
-        this.childrenCanBeDeclared = this.canBeDeclared && this.propType != this.derivedPropertyTypes.MAP && this.propType != this.derivedPropertyTypes.LIST;
-
-        if (this.propType == this.derivedPropertyTypes.LIST || this.propType == this.derivedPropertyTypes.MAP) {
-            this.initializeValues();
-        }
-
+        this.propType = this.property.derivedDataType;
+        this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
     }
 
-    initializeValues = () => {
-        let tempValue: any;
-        if (this.property.value) {
-            tempValue = JSON.parse(this.property.value);
-            if (!_.isEmpty(tempValue)) {
-                tempValue.forEach((element, key) => {
-                    let newChildID: string = this.createNewChildProperty(JSON.stringify(element));
-                    this.mapOfIDsAndKeys[newChildID] = key;
-                    console.log(this.mapOfIDsAndKeys);
-                });
-            }
-        }
-        //this.pseudoChildren = [];
-        //this.valueObjRef = [];
-        //TODO: generate necessary elements for existing values here
-        // if (this.propType == this.derivedPropertyTypes.LIST) {
-        //     this.valueObjRef = (this.property.value) ? JSON.parse(this.property.value) : [];
-        // } else if (this.propType == this.derivedPropertyTypes.MAP) {
-        //     this.valueObjRef = (this.property.value)? JSON.parse(this.property.value) : {};
-        // }
-        console.log(this.property.value);
-    }
 
     onClickPropertyRow = (property, event) => {
         // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined
@@ -82,68 +50,106 @@ export class DynamicPropertyComponent {
         this.clickOnPropertyRow.emit(property);
     }
 
-    deleteListOrMapItem  = (itemName: string) => {
-        this.propChildren = this.propChildren.filter(prop => prop.propertiesName.indexOf(itemName) != 0); //remove item and children;
-    }
-
-    propValueChanged = (property) => {
-        console.log("property value change!! Prop type: " + property.type + " New value: " + property.value);
-        this.valueChanged.emit(property);
-    };
 
     expandChildById = (id: string) => {
         this.expandedChildId = id;
-         this.expandChild.emit(id);
+        this.expandChild.emit(id);
     }
 
     checkedChange = (propName: string) => {
         this.checkProperty.emit(propName);
     }
 
+    hasChildren = (): number => {
+        return (this.property.valueObj && typeof this.property.valueObj == 'object') ? Object.keys(this.property.valueObj).length : 0;
+    }
 
+    createNewChildProperty = (): void => {
+        
+        let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", null);
+        if (this.property instanceof PropertyFEModel) {
+            this.addChildProps(newProps, this.property.name);
+        } else {
+            this.addChildPropsToParent.emit(newProps);
+        }
+    }
 
-    addRows = (): void => { //from within the template, when creating empty item
-        let childPropId = this.createNewChildProperty();
-        this.expandChildById(this.propPath + "#" + childPropId);
+    addChildProps = (newProps: Array<DerivedFEProperty>, childPropName: string) => {
+        
+        if (this.property instanceof PropertyFEModel) {
+            let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children 
+            this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator 
+            this.expandChildById(newProps[0].propertiesName);
+        }
     }
 
-    createNewChildProperty = (value?:string):string => {
-        let propUUID:string = UUID.UUID();
-        let newProp: DerivedFEProperty;
-        if (this.propType == this.derivedPropertyTypes.LIST) { //for list - create new prop of schema type
-            newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.schema.property.type, value, true);
-        } else { //for map - create new prop of type map, with schema, but with flag that its a child
-            newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.type, value, true, this.property.schema);
+    childValueChanged = (property: DerivedFEProperty) => { //value of child property changed
+
+        if (this.property instanceof PropertyFEModel) { // will always be the case
+            let parentNames = this.getParentNamesArray(property.propertiesName, []);
+            if (parentNames.length) {
+                _.set(this.property.valueObj, parentNames.join('.'), property.valueObj);
+            }
+            console.log(parentNames);
+            this.valueChanged.emit(this.property.name);
         }
+    }    
 
+    deleteListOrMapItem = (item: DerivedFEProperty) => {
+        if (this.property instanceof PropertyFEModel) {
+            this.removeValueFromParent(item);
+            this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName));
+            this.expandChildById(item.propertiesName);
+        }
+    }
 
-        this.propChildren = this.propChildren || [];
-        this.propChildren.push(newProp);
+    removeValueFromParent = (item: DerivedFEProperty, replaceKey?: string) => {
+        if (this.property instanceof PropertyFEModel) {
+            let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName);
+
+            if (item.derivedDataType == DerivedPropertyType.MAP) {
+                let oldKey = item.mapKey;
+                if (typeof replaceKey == 'string') { //allow saving empty string
+                    _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
+                    item.mapKey = replaceKey;
+                }
+                delete itemParent.valueObj[oldKey];
+            } else {
+                let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName);
+                itemParent.valueObj.splice(itemIndex, 1);
+            }
 
-        //if it's a complex type, add children properties
-        if (!this.property.schema.property.isSimpleType) {
-            let schemaDataType: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(this.property.schema.property.type);
-            this.dataTypeService.getDerivedDataTypeProperties(schemaDataType, this.propChildren, newProp.propertiesName);
-            this.propertiesUtils.assignValuesRecursively(JSON.parse(value), this.propChildren, newProp.propertiesName);
-            console.log(JSON.stringify(this.propChildren));
+            if (itemParent instanceof PropertyFEModel) { //direct child
+                this.valueChanged.emit(this.property.name);
+            } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc)
+                this.childValueChanged(itemParent);
+            }
         }
+    }
 
-        return propUUID;
-    }    
 
+    getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
+        if (this.property instanceof PropertyFEModel) {
 
+            if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
 
-    //TODO: remove this and move to somewhere central!! (or make all properties be the same type...)
-    getDerivedPropertyType = (type) => {
-        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(type) > -1) {
-            return DerivedPropertyType.SIMPLE;
-        } else if (type == PROPERTY_TYPES.LIST) {
-            return DerivedPropertyType.LIST;
-        } else if (type == PROPERTY_TYPES.MAP) {
-            return DerivedPropertyType.MAP;
-        } else {
-            return DerivedPropertyType.COMPLEX;
+            let parentProp: DerivedFEProperty = this.property.flattenedChildren.find(prop => prop.propertiesName === parentPropName);
+            let nameToInsert: string = parentProp.name;
+
+            if (parentProp.isChildOfListOrMap) {
+                if (parentProp.derivedDataType == DerivedPropertyType.MAP) {
+                    nameToInsert = parentProp.mapKey;
+                } else { //LIST
+                    let siblingProps = this.property.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName);
+                    nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString();
+                }
+            }
+
+            parentNames.splice(0, 0, nameToInsert); //add prop name to array
+            return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing
+            
         }
     }
 
+
 }
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html
deleted file mode 100644
index a251d33649..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="add-data-row">
-    <div class="sprite-new add-item-icon" (click)="addListItem()"></div>
-</div>
-<div *ngIf="property.schema.property.isSimpleType && property.valueObjectRef && property.valueObjectRef.length">
-    <!--the ngFor runs on dummy array in the list array length and not on list array in order to prevent from page do the ngFor again when user changes an item-->
-    <div class="simple-list-item" *ngFor="let item of getNumber(property.valueObjectRef); let i = index">
-        <input class="value-input" [(ngModel)]="property.valueObjectRef[i]"
-               type="property.schema.property.derivedFromSimpleTypeName || property.schema.property.type"
-               (change)="propValueChanged()"/>
-        <span class="delete-span sprite-new delete-item-icon" (click)="deleteListItem(i)"></span>
-    </div>
-</div>
-<div class="test" *ngIf="property.schema.property.isDataType && property.childrenProperties && property.childrenProperties.length">
-    <template ngFor let-item [ngForOf]="property.childrenProperties" let-i="index">
-            <div class="table-inner-row" (click)="onChildPropertySelected(item)" [ngClass]="{'selected': selectedPropertyId === item.treeNodeId}">
-                <div class="table-cell">{{item.name}}</div>
-                <div class="table-cell">
-                    <span class="delete-span sprite-new delete-item-icon" (click)="deleteListItem(i)"></span>
-                    <span (click)="property.updateExpandedChildPropertyId(item.treeNodeId)">V</span>
-                </div>
-            </div>
-            <div class="table-inner-row" *ngIf="property.expandedChildPropertyId == item.treeNodeId">
-                <div class="inner-table-container">
-                <properties-value-inner-table  [property]="item"
-                                      (selectChildProperty)="onChildPropertySelected($event)"
-                                      [selectedPropertyId]="selectedPropertyId"
-                                       [propertyNameSearchText]="propertyNameSearchText"
-                                      (valueChanged)="propValueChanged()"></properties-value-inner-table>
-                </div>
-            </div>
-    </template>
-
-</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less
deleted file mode 100644
index 7c4d90a38d..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.simple-list-item{
-    position: relative;
-}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts
deleted file mode 100644
index 96f8c680a2..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Created by rc2122 on 4/23/2017.
- */
-import {Component, Input, Output, EventEmitter} from "@angular/core";
-import { PropertyFEModel} from "app/models";
-import {PropertiesService} from "app/ng2/services/properties.service";
-import { ContentAfterLastDotPipe } from "app/ng2/pipes/contentAfterLastDot.pipe";
-import {UUID} from "angular2-uuid";
-import {ComponentType} from "app/utils";
-
-@Component({
-    selector: 'list-property',
-    templateUrl: './list-property.component.html',
-    styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less', './list-property.component.less']
-})
-export class ListPropertyComponent {
-
-    @Input() property: PropertyFEModel;
-    @Input() selectedPropertyId: string;
-    @Input() propertyNameSearchText:string;
-    
-    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
-    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
-
-    constructor ( private propertiesService:PropertiesService, private contentAfterLastDotPipe:ContentAfterLastDotPipe ){
-    }
-
-    propValueChanged = () => {
-        this.valueChanged.emit(this.property);
-    };
-
-    onChildPropertySelected = (property) => {
-        this.selectChildProperty.emit(property);
-    };
-
-    getNumber = (valueObjectRef: any): Array<any> => {
-        let num: number = (valueObjectRef) ? valueObjectRef.length : 0;
-        return new Array(num);
-    }
-
-    createNewChildProperty = ():void => {
-        let newProperty: PropertyFEModel = new PropertyFEModel(this.contentAfterLastDotPipe.transform(this.property.schema.property.type),
-            this.property.schema.property.type,
-            UUID.UUID(),
-            this.property,
-            this.property.valueObjectRef[this.property.childrenProperties.length]
-        );
-        this.propertiesService.createPropertiesTreeForProp(newProperty);
-        this.property.childrenProperties.push(newProperty);
-    }
-
-    addListItem = ():void => {
-        this.property.valueObjectRef = this.property.valueObjectRef || [];
-        this.property.childrenProperties = this.property.childrenProperties || [];
-        if (this.property.schema.property.isSimpleType){
-            if( this.property.valueObjectRef.indexOf("") == -1 ) {//prevent insert multiple empty simple type items to list
-                this.property.valueObjectRef.push("");
-            }
-        }else{
-            this.property.valueObjectRef[this.property.childrenProperties.length] = {};
-            this.property.childrenProperties = this.property.childrenProperties || [];
-            this.createNewChildProperty();
-            this.valueChanged.emit(this.property);
-        }
-    }
-
-    deleteListItem = (indexInList:number):void => {
-        this.property.valueObjectRef.splice(indexInList, 1);
-        if(this.property.childrenProperties){
-            this.property.childrenProperties.splice(indexInList, 1);
-        }
-        if (!this.property.valueObjectRef.length) {//only when user removes all items from list - put the default
-            if ( this.property.defaultValue ) {
-                angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef);
-                if (this.property.schema.property.isDataType){
-                    _.forEach(this.property.valueObjectRef, () => {
-                        this.createNewChildProperty();
-                    });
-                }
-            }
-        }
-        this.valueChanged.emit(this.property);
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html
deleted file mode 100644
index e1975175a8..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<div class="add-data-row">
-    <div class="sprite-new add-item-icon" (click)="addMapItemFields()"></div>
-</div>
-
-<!--the ngFor runs on dummy array in mapKey array length and not on maKeys array in order to prevent from page do the ngFor again when user changes a key-->
-<template  ngFor let-num [ngForOf]="getNumber(mapKeys.length)" let-i="index">
-    <div class="table-inner-row"
-         [ngClass]="{'selected': property.schema.property.isDataType && selectedPropertyId === property.childrenProperties[i].treeNodeId}"
-         (click)="property.schema.property.isDataType && onChildPropertySelected(property.childrenProperties[i])">
-        <div class="table-cell">
-            <input class="value-input" (keyup)="changeKeyOfMap(mapKeys[i], i);$event.stopPropagation();"
-                    [(ngModel)]="mapKeys[i]"
-                    name="mapKey{{property.treeNodeId}}{{i}}"
-                    (change)="propValueChanged()"/>
-        </div>
-        <div class="table-cell">
-            <input class="value-input" *ngIf="property.schema.property.isSimpleType"
-                    [(ngModel)]="property.valueObjectRef[mapKeys[i]]"
-                   type="property.schema.property.derivedFromSimpleTypeName || property.schema.property.type"
-                    (change)="propValueChanged()"/>
-            <div *ngIf="property.schema.property.isDataType">
-                <div>{{ property.schema.property.type | contentAfterLastDot }}</div>
-                <span (click)="property.updateExpandedChildPropertyId(property.childrenProperties[i].treeNodeId)">V</span>
-            </div>
-            <span class="delete-span sprite-new delete-item-icon" (click)="deleteMapItem(i)"></span>
-        </div>
-    </div>
-    <div class="table-inner-row" *ngIf="property.schema.property.isDataType && property.expandedChildPropertyId == property.childrenProperties[i].treeNodeId">
-        <div class="inner-table-container">
-            <properties-value-inner-table [property]="property.childrenProperties[i]"
-                                          [selectedPropertyId]="selectedPropertyId"
-                                          [propertyNameSearchText]="propertyNameSearchText"
-                                            (selectChildProperty)="onChildPropertySelected($event)"
-                                            (valueChanged)="propValueChanged()"></properties-value-inner-table>
-        </div>
-    </div>
-</template>
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts
deleted file mode 100644
index d62d0b94e3..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Created by rc2122 on 4/24/2017.
- */
-/**
- * Created by rc2122 on 4/23/2017.
- */
-import {Component, Input, Output, EventEmitter} from "@angular/core";
-import { PropertyFEModel} from "app/models";
-import { PropertiesService } from "../../../services/properties.service";
-import {ComponentType} from "app/utils";
-import {UUID} from "angular2-uuid";
-
-@Component({
-    selector: 'map-property',
-    templateUrl: './map-property.component.html',
-    styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less']
-})
-export class MapPropertyComponent {
-
-    @Input() property: PropertyFEModel;
-    @Input() selectedPropertyId: string;
-    @Input() propertyNameSearchText:string;
-    
-    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
-    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
-
-    constructor ( private propertiesService:PropertiesService){
-    }
-
-    mapKeys:Array<string>;
-
-    ngOnInit() {
-        this.mapKeys = Object.keys(this.property.valueObjectRef);
-    }
-
-    propValueChanged = () => {
-        this.valueChanged.emit(this.property);
-    };
-
-    onChildPropertySelected = (property) => {
-        this.selectChildProperty.emit(property);
-    };
-
-    getNumber = (num:number):Array<any> => {
-        return new Array(num);
-    }
-
-    createNewChildProperty = (mapKey:string):void => {
-
-        let newProperty: PropertyFEModel = new PropertyFEModel(mapKey,
-            this.property.schema.property.type,
-            UUID.UUID(), this.property,
-            this.property.valueObjectRef[mapKey]);
-        this.propertiesService.createPropertiesTreeForProp(newProperty);
-        this.property.childrenProperties = this.property.childrenProperties || [];
-        this.property.childrenProperties.push(newProperty);
-    }
-
-    //get: new key and the index of this item in the map
-    //This method checks if the new key isn't exist already in the map and update the object and the children array with the new key
-    changeKeyOfMap = (newKey:string, index:number):void => {
-        //let fieldName:string = "mapKey" + this.property.treeNodeId + index;
-        let oldKey:string = Object.keys(this.property.valueObjectRef)[index];
-        let existsKeyIndex:number = Object.keys(this.property.valueObjectRef).indexOf(newKey);
-        if (existsKeyIndex > -1 && existsKeyIndex != index) {
-            //error for exists key validation
-        } else {
-            //remove error for exists key validation and if the form is valid - update the map object
-            let newObj = {};
-            angular.forEach(this.property.valueObjectRef,function(value:any,key:string){
-                if(key == oldKey){
-                    newObj[newKey] = value;
-                }else{
-                    newObj[key] = value;
-                }
-            });
-            this.property.valueObjectRef = newObj;
-            this.property.parent.valueObjectRef[this.property.name] = this.property.valueObjectRef;//in order to prevent break ref
-            if(this.property.childrenProperties){
-                this.property.childrenProperties[index].name = newKey;//update this property childrenProperties with the new key
-            }
-        }
-    }
-
-    //get: index of the item in the map
-    //This method removes item from map.
-    deleteMapItem = (index:number):void=> {
-        delete this.property.valueObjectRef[this.mapKeys[index]];
-        this.mapKeys.splice(index, 1);
-        if(this.property.childrenProperties){
-            this.property.childrenProperties.splice(index, 1);
-        }
-        if (!this.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default
-            if (this.property.defaultValue) {
-                angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef);
-                this.mapKeys = Object.keys(this.property.valueObjectRef);
-                if (this.property.schema.property.isDataType){
-                    angular.forEach(this.property.valueObjectRef, (value, key) => {
-                        this.createNewChildProperty(key);
-                    }, this);
-                }
-            }
-        }
-        this.valueChanged.emit(this.property);
-    }
-
-    //This method inserts new empty item to map
-    addMapItemFields = ():void => {
-        this.property.valueObjectRef = this.property.valueObjectRef || {};
-        if (this.property.schema.property.isSimpleType){
-            this.property.valueObjectRef[''] = null;
-        }else{
-            if(!this.property.valueObjectRef['']){
-                this.property.valueObjectRef[''] = {};
-                this.createNewChildProperty('');
-            }
-        }
-        this.mapKeys = Object.keys(this.property.valueObjectRef);
-    }
-}
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
index 3ab47074e7..426ae3ab23 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -1,6 +1,5 @@
-
-
 <div class="properties-table">
+    <loader [display]="isLoading" size="large" [relative]="true"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
         <div class="table-cell col2">Type</div>
@@ -13,16 +12,27 @@
         <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
             <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div>
 
-            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceName]; trackBy:property?.name" (click)="onClickPropertyRow(property, instanceName, $event)" [ngClass]="{'selected': selectedPropertyId === property.uniqueId}">
-                <div class="table-cell col1">
-                <checkbox [label]="property.name"
-                          [(checked)]="property.isSelected"
-                          [disabled]="property.isDisabled || property.isDeclared"
-                          (checkedChange)="propertyChecked(property)"
-                          tooltip="{{property.name}}"></checkbox>
-                    <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+            <div class="table-row"
+                *ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name"
+                (click)="onClickPropertyRow(property, instanceName, $event)"
+                [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name }">
+
+                <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}">
+                <div class="property-name cut-inner-long-text">
+                    <checkbox [(checked)]="property.isSelected"
+                          [disabled]="property.isDisabled || property.isDeclared || readonly"
+                          (checkedChange)="propertyChecked(property)"></checkbox>
+                    <div class="inner-cell-div" tooltip="{{property.name}}">
+                        <span>{{property.name}}</span>
+                    </div>
+                </div>
+                <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+                </div>
+                <div class="table-cell col2">
+                    <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
+                        <span>{{property.type | contentAfterLastDot}}</span>
+                    </div>
                 </div>
-                <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
                 <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
                     | contentAfterLastDot) : ''}}</div>
                 <div class="table-cell valueCol">
@@ -32,7 +42,8 @@
                         [canBeDeclared]="true"
                         [property]="property"
                         [expandedChildId]="property.expandedChildPropertyId"
-                        [propChildren]="property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
+                        [propertyNameSearchText]="propertyNameSearchText"
+                        [readonly]="readonly"
                         (valueChanged)="propValueChanged(property);"
                         (expandChild)="property.updateExpandedChildPropertyId($event)"
                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
@@ -42,94 +53,8 @@
 
                 </div>
             </div>
-<!--
-                <div *ngIf="!property.isSimpleType && !property.isDeclared" class="table-cell valueCol child-property-container">
-
-                    <div class="child-property-row" *ngFor="let flatProperty of property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
-                        [ngClass]="{'selected': selectedPropertyId === flatProperty.uniqueId}" (click)="clickOnPropertyRow(flatProperty, instanceName, $event)" [@fadeIn]="''">
-                        <derived-property [propertyObj]="flatProperty"  [propertyNameSearchText]="propertyNameSearchText" [expanded]="flatProperty.propertiesName == property.expandedChildPropertyId"
-                                    (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" (valueChanged)="propValueChanged(property)" (expandChild)="property.updateExpandedChildPropertyId($event)"></derived-property>
-                    </div>
-
-                </div>
-                <!--
-
-
-                <property [propertyObj]="flatProperty"
-                        [expanded]="flatProperty.parentName == property.expandedChildPropertyId"
-                        (valueChanged)="propValueChanged($event)"
-                        (selectChildProperty)="onChildPropertySelected($event)"></property>
-                <list-property *ngIf="property.type == 'list'"
-                                    [property]="property"
-                            [selectedPropertyId]="selectedPropertyId"
-                                    (valueChanged)="propValueChanged($event)"
-                            (selectChildProperty)="onChildPropertySelected($event)"></list-property>
-                <map-property *ngIf="property.type == 'map'"
-                            [property]="property"
-                            [selectedPropertyId]="selectedPropertyId"
-                            (valueChanged)="propValueChanged($event)"
-                            (selectChildProperty)="onChildPropertySelected($event)"></map-property>
-                <properties-value-inner-table *ngIf="property.isDataType"
-                                            [property]="property"
-                                            [selectedPropertyId]="selectedPropertyId"
-                                            (selectChildProperty)="onChildPropertySelected($event)"
-                                            (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
-                -->
-
-
 
         </div>
 
     </div>
 </div>
-<!--
-<div class="properties-table" style="display:block">
-    <div class="table-header">
-        <div class="table-cell col1">Property Name</div>
-        <div class="table-cell col2">Type</div>
-        <div class="table-cell col3">ES</div>
-        <div class="table-cell valueCol">Value</div>
-    </div>
-    <div class="table-body">
-        <div class="no-data" *ngIf="!properties || !properties.length">No data to display</div>
-        <div class="table-row" *ngFor="let property of properties" (click)="clickOnPropertyRow(property)">
-            <div class="table-cell col1"><checkbox [label]="property.name" [(checked)]="property.isSelected" (checkedChange)="propSelected(property)" [disabled]="property.isDisabled"></checkbox></div>
-            <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
-            <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type | contentAfterLastDot) : ''}}</div>
-            <div class="table-cell valueCol" [class.inner-table-container]="property.childrenProperties || !property.isSimpleType">
-                <!--<input class="value-input" *ngIf="property.isSimpleType"
-                       type="property.derivedFromSimpleTypeName || property.type"
-                       [(ngModel)]="property.value"
-                        (change)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
-                       pattern="validationUtils.getValidationPattern(property.type)"/>
-                <dynamic-element
-                    class="value-input"
-                    *ngIf="property.isSimpleType"
-                    [(value)]="property.value"
-                    (valueChange)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
-                    [type]="property.derivedFromSimpleTypeName || property.type"
-                    [name]="property.name">
-                </dynamic-element>
-                <list-property *ngIf="property.type == 'list'"
-                                      [property]="property"
-                               [selectedPropertyId]="selectedPropertyId"
-                                      (valueChanged)="propValueChanged($event)"
-                               (selectChildProperty)="onChildPropertySelected($event)"></list-property>
-                <map-property *ngIf="property.type == 'map'"
-                               [property]="property"
-                              [selectedPropertyId]="selectedPropertyId"
-                               (valueChanged)="propValueChanged($event)"
-                               (selectChildProperty)="onChildPropertySelected($event)"></map-property>
-                <properties-value-inner-table *ngIf="property.isDataType"
-                                              [property]="property"
-                                              [selectedPropertyId]="selectedPropertyId"
-                                              (selectChildProperty)="onChildPropertySelected($event)"
-                                              (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
-            </div>
-
-        </div>
-    </div>
-</div> -->
-
-
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
index de080dfdc9..bb019a768b 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
@@ -10,38 +10,17 @@
     height:100%;
     text-align:left;
 
-
-    .child-property-container {
-        display:flex;
-        flex-direction:column;
-
-        &.table-cell {
-            padding:0;
-        }
-
-        .child-property-row {
-            border-bottom: #d2d2d2 solid 1px;
-            &:last-child {
-                border-bottom:none;
-            }
-        }
-    }
-
-
-    derived-property, dynamic-property {
-        width:100%;
-    }
-
-    /deep/ dynamic-property dynamic-property .dynamic-property-row {
-         border-top:solid #d2d2d2 1px;
-    }
-
-    /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
-        border-top: none;
+    .inner-cell-div{
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 20px;
     }
-
-    properties-value-inner-table {
-        width: 100%;
+    
+    .table-header, .table-row {
+        display: flex;
+        flex-direction:row;
+        flex: 0 0 auto;
     }
 
     .table-header {
@@ -54,10 +33,17 @@
             padding: 5px;
         }
     }
-    .table-header, .table-row {
-        display: flex;
-        flex-direction:row;
-        flex: 0 0 auto;
+
+    .table-rows-header {
+        font-size:16px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: @tlv_color_v;
     }
 
     .table-body {
@@ -79,17 +65,6 @@
         }
     }
 
-    .table-rows-header {
-        font-size:16px;
-        flex:1;
-        border: #d2d2d2 solid 1px;
-        border-top:none;
-        padding: 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: @tlv_color_v;
-    }
 
     .table-row {
         &:hover {
@@ -103,6 +78,10 @@
             background-color:#e6f6fb;
         }
     }
+    .cut-inner-long-text{
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
      .table-cell {
         font-size:13px;
         flex:1;
@@ -112,7 +91,7 @@
         padding: 5px;
         text-overflow: ellipsis;
         white-space: nowrap;
-        overflow: hidden;
+        display: flex;
 
         &:last-child {
             border-right:#d2d2d2 solid 1px;
@@ -120,10 +99,24 @@
         &.col1 {
             flex: 0 0 300px;
             max-width:300px;
+            display: flex;
+            justify-content: space-between;
+
+            .property-name {
+                flex: 1;
+                display: flex;
+                max-width: 270px;
+            }
 
             .property-description-icon {
                 float: right;
                 margin-top: 4px;
+                margin-left: 5px;
+                flex: 0 0 auto;
+            }
+
+            /deep/ .checkbox-container {
+                margin-right: 5px;
             }
         }
         &.col2 {
@@ -137,46 +130,12 @@
         }
 
         &.valueCol {
-            flex: 1 0 auto;
+            flex: 1;
             min-width: 350px;
             display: flex;
             justify-content: flex-end;
             padding: 0px;
-
-            .value-input {
-                flex: 1;
-                max-height: 24px;
-                border: none;
-                background-color: inherit;
-
-                &:focus, &:active {
-                    border:none;
-                    outline:none;
-                }
-            }
-
-            .delete-btn {
-                flex: 0 0 auto;
-            }
-
-            .delete-button-container {
-                max-height: 24px;
-            }
-
-            &.inner-table-container {
-                padding: 0px;
-
-                .delete-button-container {
-                    padding: 3px 5px 0 0 ;
-                }
-            }
         }
-
-         &.input-value-col {
-             padding: 5px;
-         }
-
-
     }
 
     .filtered {
@@ -184,5 +143,9 @@
             background-color: yellow;
         }
     }
+    
+    dynamic-property {
+        width:100%;
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
index d5a9b40425..58214ca16b 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
@@ -2,8 +2,6 @@ import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, Eleme
 import { trigger, state, style, transition, animate} from '@angular/core';
 import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models";
 import {PropertiesService} from "../../services/properties.service";
-// import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
-//import {PropertiesValueInnerTableComponent} from "./properties-table/properties-value-inner-table/properties-value-inner-table";
 import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component';
 import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
 
@@ -19,7 +17,10 @@ export class PropertiesTableComponent {
     @Input() selectedPropertyId: string;
     @Input() displayDeleteButton: boolean;
     @Input() propertyNameSearchText:string;
-
+    @Input() searchTerm:string;
+    @Input() readonly:boolean;
+    @Input() isLoading:boolean;
+    
     @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
     @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -50,6 +51,7 @@ export class PropertiesTableComponent {
     // Click on main row (row of propertyFEModel)
     onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => {
         //event && event.stopPropagation();
+        this.selectedPropertyId = property.name;
         let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
         this.selectPropertyRow.emit(propertyRowSelectedEvent);
     };
@@ -72,14 +74,6 @@ export class PropertiesTableComponent {
         this.updateCheckedPropertyCount.emit(isChecked);
     }
 
-    putDefaultValueInEmptyProperty = (property:PropertyFEModel):void => {
-        property.value = property.value || property.defaultValue;
-    }
-
-    // clickOnInstanceRow = (instanceName:string) =>{
-    //     this.selectInstanceRow.emit(instanceName);
-    // };
-
 }
 
 export class PropertyRowSelectedEvent {
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html
deleted file mode 100644
index 61555cac50..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-<template  ngFor let-childProp [ngForOf]="property.childrenProperties" let-i="index">
-    <div class="table-inner-row" (click)="onChildPropertySelected(childProp)" [ngClass]="{'selected': selectedPropertyId === childProp.treeNodeId}">
-        <div class="table-cell" [ngClass]="{'filtered':childProp.name === propertyNameSearchText}">
-            <checkbox [label]="childProp.name" [(checked)]="childProp.isSelected" [disabled]="property.isDisabled"></checkbox>
-        </div>
-        <div class="table-cell  prop-value">
-            <input class="value-input" *ngIf="childProp.isSimpleType"
-                   [(ngModel)]="property.valueObjectRef[childProp.name]"
-                   (change)="putDefaultValueInEmptyChildProperty(childProp);propValueChanged();"
-                   type="childProp.derivedFromSimpleTypeName || childProp.type"/>
-            <span class="datatype-text" *ngIf="childProp.isDataType">{{ childProp.type | contentAfterLastDot }}</span>
-            <span *ngIf="!childProp.isSimpleType" (click)="property.updateExpandedChildPropertyId(childProp.treeNodeId)">V</span>
-        </div>
-    </div>
-    <div class="table-inner-row" *ngIf="childProp.type === 'list' && property.expandedChildPropertyId === childProp.treeNodeId">
-            <list-property [property]="childProp"
-                           [selectedPropertyId]="selectedPropertyId"
-                           [propertyNameSearchText]="propertyNameSearchText"
-                            (valueChanged)="propValueChanged()"
-                            (selectChildProperty)="onChildPropertySelected($event)"></list-property>
-
-    </div>
-    <div class="table-inner-row" *ngIf="childProp.type === 'map' && property.expandedChildPropertyId == childProp.treeNodeId">
-            <map-property [property]="childProp"
-                            [selectedPropertyId]="selectedPropertyId"
-                          [propertyNameSearchText]="propertyNameSearchText"
-                            (valueChanged)="propValueChanged()"
-                            (selectChildProperty)="onChildPropertySelected($event)"></map-property>
-
-    </div>
-    <div class="table-inner-row" *ngIf="childProp.isDataType && property.expandedChildPropertyId == childProp.treeNodeId">
-            <properties-value-inner-table [property]="childProp"
-                                          [selectedPropertyId]="selectedPropertyId"
-                                          [propertyNameSearchText]="propertyNameSearchText"
-                                            (selectChildProperty)="onChildPropertySelected($event)"
-                                            (valueChanged)="propValueChanged()"></properties-value-inner-table>
-    </div>
-</template>
-
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less
deleted file mode 100644
index 1b7f6d4cd1..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less
+++ /dev/null
@@ -1,71 +0,0 @@
-table { width:100%;}
-tr {border-bottom: #d2d2d2 solid 1px;}
-tr:last-child { border-bottom:none;}
-td { border:none; padding:5px;}
-td:first-child { border-right:#d2d2d2 solid 1px;}
-
-.prop-value{
-    span {
-        position: absolute;
-        top: 5px;
-        right: 2px;
-
-        &.delete-span {
-            right:20px;
-        }
-
-        &.datatype-text {
-            position:static;
-        }
-
-    }
-}
-
-.add-data-row {
-    padding:5px;
-    text-align:right;
-    border-bottom: #d2d2d2 solid 1px;
-
-    &:last-child {
-        border-bottom:none;
-    }
-}
-.table-inner-row {
-    display:flex;
-    flex-direction:row;
-    border-bottom: #d2d2d2 solid 1px;
-    flex: 0 0 100%;
-    position:relative;
-
-    &:last-child {
-        border-bottom:none;
-    }
-
-    .table-cell {
-        flex: 0 0 50%;
-        padding:5px;
-        position:relative;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &:first-child {
-            border-right:#d2d2d2 solid 1px;
-            overflow:hidden;
-        }
-
-
-    }
-
-    .table-inner-container, .inner-table-container {
-        flex: 0 0 100%;
-    }
-}
-/deep/ map-property, /deep/ properties-value-inner-table, /deep/ list-property{
-    width:100%;
-}
-
-.filtered {
-    /deep/ .checkbox-label-content{
-        background-color: yellow;
-    }
-}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts
deleted file mode 100644
index 7d0b219ffe..0000000000
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Created by rc2122 on 4/20/2017.
- */
-import {Component, Input, Output, EventEmitter} from "@angular/core";
-import {PropertyFEModel} from "app/models";
-import {PropertiesService} from "../../../services/properties.service";
-
-@Component({
-    selector: 'properties-value-inner-table',
-    templateUrl: './properties-value-inner-table.component.html',
-    styleUrls: ['./properties-value-inner-table.component.less']
-})
-export class PropertiesValueInnerTableComponent {
-
-    @Input() property: PropertyFEModel;
-    @Input() selectedPropertyId: string;
-    @Input() propertyNameSearchText:string;
-    
-    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
-    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
-
-    constructor ( private propertiesService:PropertiesService){
-    }
-
-
-    onChildPropertySelected = (property) => {
-        this.selectChildProperty.emit(property);
-    };
-
-    propValueChanged = () => {
-        this.valueChanged.emit(this.property);
-    };
-
-    putDefaultValueInEmptyChildProperty = (childProp:PropertyFEModel):void => {
-        this.property.valueObjectRef[childProp.name] = this.property.valueObjectRef[childProp.name] || childProp.defaultValue;
-    }
-}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
index 6ef3e57678..b59ef9dbda 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
@@ -13,21 +13,20 @@ import { SearchFilterPipe } from "../../pipes/searchFilter.pipe";
 import { FilterChildPropertiesPipe } from "../../pipes/filterChildProperties.pipe";
 import { DataTypeService } from './../../services/data-type.service';
 import { PropertiesService } from './../../services/properties.service';
+import { HierarchyNavService } from './../../services/hierarchy-nav.service';
 import { PropertiesUtils } from './properties.utils';
 import { PostsService } from "../../services/posts.service";
-import { PropertiesValueInnerTableComponent } from "./../../components/properties-table/properties-value-inner-table/properties-value-inner-table.component";
-import { ListPropertyComponent } from "./../../components/properties-table/list-property/list-property.component";
-import { MapPropertyComponent } from "./../../components/properties-table/map-property/map-property.component";
 import { DynamicElementModule } from 'app/ng2/components/dynamic-element/dynamic-element.module';
 import { DynamicPropertyComponent } from './../../components/properties-table/dynamic-property/dynamic-property.component';
-import { DerivedPropertyComponent } from './../../components/properties-table/derived-property/derived-property.component';
-// import {PopoverContentComponent} from "../../components/popover/popover-content.component"
-// import {PopoverComponent} from "../../components/popover/popover.component"
+import {ConfirmationDeleteInputComponent} from "app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component"
 import { PopoverModule } from "../../components/popover/popover.module"
 import { FilterPropertiesAssignmentComponent } from "./../../components/filter-properties-assignment/filter-properties-assignment.component";
 import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
 import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
 import {TooltipModule} from "../../components/tooltip/tooltip.module";
+import { ComponentModeService } from "app/ng2/services/component-mode.service"
+import { ModalComponent } from "app/ng2/components/modal/modal.component"
+import {LoaderComponent} from "app/ng2/components/loader/loader.component"
 
 @NgModule({
     declarations: [
@@ -40,14 +39,13 @@ import {TooltipModule} from "../../components/tooltip/tooltip.module";
         SearchFilterPipe,
         FilterChildPropertiesPipe,
         HierarchyNavigationComponent,
-        PropertiesValueInnerTableComponent,
-        ListPropertyComponent,
-        MapPropertyComponent,
-        DerivedPropertyComponent,
         DynamicPropertyComponent,
         // PopoverContentComponent,
         // PopoverComponent,
-        FilterPropertiesAssignmentComponent
+        FilterPropertiesAssignmentComponent,
+        ModalComponent,
+        ConfirmationDeleteInputComponent,
+        LoaderComponent
     ],
     imports: [
         BrowserModule,
@@ -65,7 +63,7 @@ import {TooltipModule} from "../../components/tooltip/tooltip.module";
         // PopoverContentComponent,
         // PopoverComponent
     ],
-    providers: [PropertiesService, PropertiesUtils, DataTypeService, PostsService, ContentAfterLastDotPipe, GroupByPipe, KeysPipe]
+    providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService, PostsService, ContentAfterLastDotPipe, GroupByPipe, KeysPipe, ComponentModeService]
 })
 export class PropertiesAssignmentModule {
 
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index d1b671cff2..317a1fc827 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -4,9 +4,12 @@
             <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
                 <tab tabTitle="Properties">
                     <properties-table class="properties-table"
-                        [fePropertiesMap]="instanceFePropertiesMap | searchFilter:'name':searchQuery"
-                        [selectedPropertyId]="selectedFlatProperty.uniqueId"
+                        [fePropertiesMap]="instanceFePropertiesMap"
+                        [searchTerm]="searchQuery"
+                        [selectedPropertyId]="selectedFlatProperty.path"
                         [propertyNameSearchText]="searchPropertyName"
+                        [readonly]="isReadonly"
+                        [isLoading]="loadingProperties"
                         (valueChanged)="propertyValueChanged($event)"
                         (propertySelected)="propertySelected($event)"
                         (selectPropertyRow)="selectPropertyRow($event)"
@@ -16,39 +19,51 @@
                         </properties-table>
                 </tab>
                 <tab tabTitle="Inputs">
-                    <inputs-table class="properties-table" [inputs]="inputs | searchFilter:'name':searchQuery" (deleteInput)="deleteInput($event)" (inputValueChanged)="inputValueChanged($event)"></inputs-table>
+                    <inputs-table class="properties-table"
+                                  [readonly]="isReadonly"
+                                  [inputs]="inputs | searchFilter:'name':searchQuery"
+                                  [isLoading]="loadingInputs"
+                                  (deleteInput)="deleteInput($event)"
+                                  (inputValueChanged)="inputValueChanged($event)"></inputs-table>
                 </tab>
             </tabs>
             <div class="header">
                 <div class="search-filter-container">
                     <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" />
                     <span class="sprite search-icon"></span>
-                    <filter-properties-assignment *ngIf="!hideAdvanceSearch" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
-                    <span *ngIf="displayClearSearch && !hideAdvanceSearch" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span>
+                    <filter-properties-assignment *ngIf="!isInpusTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
+                    <span *ngIf="displayClearSearch && !isInpusTabSelected" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span>
                 </div>
-                <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount" (click)="declareProperties()">Declare</button>
+                <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly" (click)="declareProperties()">Declare</button>
             </div>
         </div>
         <div class="right-column gray-border">
             <tabs #hierarchyNavTabs tabStyle="simple-tabs">
                 <tab tabTitle="Composition">
                     <div class="hierarchy-nav-container">
-                    <div class="hierarchy-header">{{component.name}}</div>
-                    <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0">No data to display</div>
-                    <hierarchy-navigation class="hierarchy-nav" (updateSelected)="onInstanceSelectedUpdate($event)"
-                                          [displayData]="instancesNavigationData"
-                                          [selectedItem]="selectedInstanceData.uniqueId"
-                                          [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
+                        <loader [display]="loadingInstances" size="medium" [relative]="true"></loader>
+                        <div class="hierarchy-header">
+                            <span tooltip="{{component.name}}">{{component.name}}</span>
+                        </div>
+                        <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
+                        <hierarchy-navigation class="hierarchy-nav"
+                                (updateSelected)="onInstanceSelectedUpdate($event)"
+                                [displayData]="isInpusTabSelected ? []: instancesNavigationData"
+                                [selectedItem]="selectedInstanceData.uniqueId"
+                                [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
                     </div>
                 </tab>
                 <tab tabTitle="Property Structure">
                     <div class="hierarchy-nav-container">
-                    <div class="hierarchy-header">{{propertyStructureHeader || selectedFlatProperty.name || "No Property Selected"}}</div>
-                    <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0">No data to display</div>
-                    <hierarchy-navigation class="hierarchy-nav" (updateSelected)="onPropertySelectedUpdate($event)"
-                                          [displayData]="propertiesNavigationData"
-                                          [selectedItem]="selectedFlatProperty.uniqueId"
-                                          [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
+                    <div class="hierarchy-header">
+                        <span tooltip="{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name) : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name || "No Property Selected") : "No Property Selected"}}</span>
+                    </div>
+                    <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
+                    <hierarchy-navigation class="hierarchy-nav"
+                            (updateSelected)="onPropertySelectedUpdate($event)"
+                            [displayData]="isInpusTabSelected ? [] : propertiesNavigationData"
+                            [selectedItem]="selectedFlatProperty.path"
+                            [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
                     </div>
                 </tab>
             </tabs>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index f7a62bbcb5..e56374a2c2 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -145,6 +145,12 @@
         text-align: left;
         background-color: @ng2-light-gray;
         font-size: 13px;
+        span{
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 290px;
+        }
     }
 
     .hierarchy-nav {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 299615b122..98fdc7391a 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -1,18 +1,23 @@
 import {Component, ViewChild, ElementRef, Renderer, Inject} from "@angular/core";
 import {PostsService} from "../../services/posts.service";
-import {PropertiesService, SimpleFlatProperty} from "../../services/properties.service";
+import { PropertiesService } from "../../services/properties.service";
+import { HierarchyNavService } from "../../services/hierarchy-nav.service";
 import { PropertiesUtils } from './properties.utils';
 import { PropertyFEModel, InstanceFePropertiesMap, InstanceBePropertiesMap, InstancePropertiesAPIMap, Component as ComponentData, FilterPropertiesAssignmentData } from "app/models";
 import { PROPERTY_TYPES, ResourceType } from "app/utils";
 import property = require("lodash/property");
 import {ComponentServiceNg2} from "../../services/component-services/component.service";
 import {ComponentInstanceServiceNg2} from "../../services/component-instance-services/component-instance.service"
-import {InputFEModel, ComponentInstance, PropertyBEModel, DerivedFEProperty, ResourceInstance} from "app/models";
+import { InputFEModel, ComponentInstance, PropertyBEModel, DerivedPropertyType, DerivedFEProperty, ResourceInstance, SimpleFlatProperty } from "app/models";
 import {HierarchyDisplayOptions} from "../../components/hierarchy-navigtion/hierarchy-display-options"
 import {PropertyRowSelectedEvent} from "./../../components/properties-table/properties-table.component";
 import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
 import {FilterPropertiesAssignmentComponent} from "../../components/filter-properties-assignment/filter-properties-assignment.component";
-
+import { ComponentModeService } from "app/ng2/services/component-mode.service"
+import {WorkspaceMode, EVENTS} from "../../../utils/constants";
+import {ComponentInstanceProperty, InputBEModel} from "app/models"
+import {ComponentInstanceInput} from "../../../models/properties-inputs/input-be-model";
+import {EventListenerService} from "app/services/event-listener-service"
 @Component({
     templateUrl: './properties-assignment.page.component.html',
     styleUrls: ['./properties-assignment.page.component.less']
@@ -29,39 +34,60 @@ export class PropertiesAssignmentComponent {
     inputs: Array<InputFEModel> = [];
     instances: Array<ComponentInstance> = [];
     searchQuery: string;
-    propertyStructureHeader: string
+    propertyStructureHeader: string;
 
     selectedFlatProperty: SimpleFlatProperty = new SimpleFlatProperty();
     selectedInstanceType: string;
     selectedInstanceData: ComponentInstance = new ComponentInstance();
     checkedPropertiesCount: number = 0;
 
-    hierarchyPropertiesDisplayOptions:HierarchyDisplayOptions = new HierarchyDisplayOptions('uniqueId', 'name', 'childrens');
+    hierarchyPropertiesDisplayOptions:HierarchyDisplayOptions = new HierarchyDisplayOptions('path', 'name', 'childrens');
     hierarchyInstancesDisplayOptions:HierarchyDisplayOptions = new HierarchyDisplayOptions('uniqueId', 'name');
     displayClearSearch = false;
     searchPropertyName:string;
-    hideAdvanceSearch:boolean;
+    isInpusTabSelected:boolean;
+    isReadonly:boolean;
+    loadingInstances:boolean = false;
+    loadingInputs:boolean = false;
+    loadingProperties:boolean = false;
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: ElementRef;
     @ViewChild('propertyInputTabs') propertyInputTabs: ElementRef;
     @ViewChild('advanceSearch') advanceSearch: FilterPropertiesAssignmentComponent;
 
-    constructor(private propertiesService:PropertiesService,
+    constructor(private propertiesService: PropertiesService,
+                private hierarchyNavService: HierarchyNavService,
                 private propertiesUtils:PropertiesUtils,
                 private componentServiceNg2:ComponentServiceNg2,
                 private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
                 @Inject("$stateParams") _stateParams,
-                private renderer: Renderer) {
+                private renderer: Renderer,
+                private componentModeService:ComponentModeService,
+                private EventListenerService:EventListenerService) {
 
         this.instanceFePropertiesMap = new InstanceFePropertiesMap();
 
         /* This is the way you can access the component data, please do not use any data except metadata, all other data should be received from the new api calls on the first time
         than if the data is already exist, no need to call the api again - Ask orit if you have any questions*/
         this.component = _stateParams.component;
+        this.EventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.onCheckout);
+        this.updateViewMode();
     }
 
     ngOnInit() {
         console.log("==>" + this.constructor.name + ": ngOnInit");
+        this.loadingInputs = true;
+        this.loadingInstances = true;
+        this.loadingProperties = true;
+        this.componentServiceNg2
+            .getComponentInputs(this.component)
+            .subscribe(response => {
+                _.forEach(response.inputs, (input: InputBEModel) => {
+                    this.inputs.push(new InputFEModel(input));
+                });
+                this.loadingInputs = false;
+
+            });
         this.componentServiceNg2
             .getComponentResourceInstances(this.component)
             .subscribe(response => {
@@ -70,95 +96,33 @@ export class PropertiesAssignmentComponent {
                 _.forEach(this.instances, (instance) => {
                     this.instancesNavigationData.push(instance);
                 });
-
+                this.loadingInstances = false;
+                if (this.instancesNavigationData[0] == undefined) {
+                    this.loadingProperties = false;
+                }
                 this.selectFirstInstanceByDefault();
             });
+    };
 
-        this.componentServiceNg2
-            .getComponentInputs(this.component)
-            .subscribe(response => {
-                _.forEach(response.inputs, (input: PropertyBEModel) => {
-                    this.inputs.push(new InputFEModel(input));
-                });
-            })
+    ngOnDestroy() {
+        this.EventListenerService.unRegisterObserver(EVENTS.ON_CHECKOUT);
     }
 
     selectFirstInstanceByDefault = () => {
         if (this.instancesNavigationData[0] !== undefined) {
             this.onInstanceSelectedUpdate(this.instancesNavigationData[0]);
         }
-    }
-
-    propertyValueChanged = (event) => {
-        console.log("==>" + this.constructor.name + ": propertyValueChanged " + event);
-
-        if(this.selectedInstanceData.originType === ResourceType.VF) {
-            console.log("I want to update input value on the resource instance");
-            let inputToUpdate = new PropertyBEModel(event);
-            this.componentInstanceServiceNg2
-                .updateInstanceInput(this.component, this.selectedInstanceData.uniqueId, inputToUpdate)
-                .subscribe(response => {
-                    console.log("update resource instance input and got this response: ",response);
-                })
-        }
-        else {
-            // Copying the actual value from the object ref into the value if it's from a complex type
-            if(event.isDataType) {
-                event.value = JSON.stringify(event.valueObjectRef);
-            }
-            let propertyBe = new PropertyBEModel(event);
-            this.componentInstanceServiceNg2
-                .updateInstanceProperty(this.component, this.selectedInstanceData.uniqueId, propertyBe)
-                .subscribe(response => {
-                    console.log("updated resource instance property and got this response: ",response);
-                });
-            console.log(event);
-        }
-
-    };
-
-    inputValueChanged = (event) => {
-        console.log("==>" + this.constructor.name + ": inputValueChanged");
-        let inputToUpdate = new PropertyBEModel(event);
-
-        this.componentServiceNg2
-            .updateComponentInput(this.component, inputToUpdate)
-            .subscribe(response => {
-                console.log("updated the component input and got this response: ", response);
-            })
     };
 
-    declareProperties = ():void => {
-        console.log("==>" + this.constructor.name + ": declareProperties");
-
-        let selectedProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
-
-        let instancesNames = new KeysPipe().transform(this.instanceFePropertiesMap,[]);
-        angular.forEach(instancesNames, (instanceName:string):void=>{
-            selectedProperties[instanceName] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceName]);
-            //selectedProperties[this.selectedInstanceData.uniqueId] = this.propertiesService.getCheckedProperties(this.properties);
-        });
+    updateViewMode = () => {
+        this.isReadonly = this.componentModeService.getComponentMode(this.component) === WorkspaceMode.VIEW;
+    }
 
-        let inputsToCreate: InstancePropertiesAPIMap;
-        if (this.selectedInstanceType !== ResourceType.VF) {
-            inputsToCreate = new InstancePropertiesAPIMap(null, selectedProperties);
-        } else {
-            inputsToCreate = new InstancePropertiesAPIMap(selectedProperties, null);
-        }
-        this.componentServiceNg2
-            .createInput(this.component, inputsToCreate)
-            .subscribe(response => {
-                this.setInputTabIndication(response.length);
-                this.checkedPropertiesCount = 0;
-                _.forEach(response, (input: PropertyBEModel) => { this.inputs.push(new InputFEModel(input)); });
-                this.findAndDisableDeclaredProperties();
-            });
+    onCheckout = (component:ComponentData) => {
+        this.component = component;
+        this.updateViewMode();
     }
 
-    //TODO: Can remove? no one use it
-    // getSelectedFEProps = (): Array<PropertyFEModel> => {
-    //     return this.properties.filter(prop => prop.isSelected && !prop.isDeclared);
-    // }
 
     onInstanceSelectedUpdate = (resourceInstance: ResourceInstance) => {
         console.log("==>" + this.constructor.name + ": onInstanceSelectedUpdate");
@@ -166,12 +130,15 @@ export class PropertiesAssignmentComponent {
         this.selectedInstanceData = resourceInstance;
         this.selectedInstanceType = resourceInstance.originType;
 
+        this.loadingProperties = true;
         if(resourceInstance.originType === ResourceType.VF) {
             this.componentInstanceServiceNg2
                 .getComponentInstanceInputs(this.component, resourceInstance)
                 .subscribe(response => {
                     instanceBePropertiesMap[resourceInstance.uniqueId] = response;
                     this.processInstancePropertiesResponse(instanceBePropertiesMap);
+                    this.loadingProperties = false;
+
                 });
         } else {
             this.componentInstanceServiceNg2
@@ -179,23 +146,68 @@ export class PropertiesAssignmentComponent {
                 .subscribe(response => {
                     instanceBePropertiesMap[resourceInstance.uniqueId] = response;
                     this.processInstancePropertiesResponse(instanceBePropertiesMap);
+                    this.loadingProperties = false;
                 });
         }
 
         if( this.searchPropertyName ){
             this.clearSearch();
         }
+        //clear selected property from the navigation
+        this.selectedFlatProperty = new SimpleFlatProperty();
+        this.propertiesNavigationData = [];
     };
 
     /**
      * Entry point handling response from server
      */
     processInstancePropertiesResponse = (instanceBePropertiesMap:InstanceBePropertiesMap) => {
-        this.instanceFePropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(instanceBePropertiesMap); //create flattened children
-        this.findAndDisableDeclaredProperties(); //disable properties or flattened children that are declared
+        this.instanceFePropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(instanceBePropertiesMap, this.inputs); //create flattened children, disable declared props, and init values
         this.checkedPropertiesCount = 0;
     };
 
+
+    /*** VALUE CHANGE EVENTS ***/
+    propertyValueChanged = (event: PropertyFEModel) => {
+        console.log("==>" + this.constructor.name + ": propertyValueChanged " + event);
+        // Copying the actual value from the object ref into the value if it's from a complex type
+        event.value = event.getJSONValue();
+
+        if (this.selectedInstanceData.originType === ResourceType.VF) {
+            console.log("I want to update input value on the resource instance");
+            let inputToUpdate = new PropertyBEModel(event);
+            this.componentInstanceServiceNg2
+                .updateInstanceInput(this.component, this.selectedInstanceData.uniqueId, inputToUpdate)
+                .subscribe(response => {
+                    console.log("update resource instance input and got this response: ", response);
+                })
+        }
+        else {
+            let propertyBe = new PropertyBEModel(event);
+            this.componentInstanceServiceNg2
+                .updateInstanceProperty(this.component, this.selectedInstanceData.uniqueId, propertyBe)
+                .subscribe(response => {
+                    console.log("updated resource instance property and got this response: ", response);
+                });
+            console.log(event);
+        }
+
+    };
+
+    inputValueChanged = (event) => {
+        console.log("==>" + this.constructor.name + ": inputValueChanged");
+        let inputToUpdate = new PropertyBEModel(event);
+
+        this.componentServiceNg2
+            .updateComponentInput(this.component, inputToUpdate)
+            .subscribe(response => {
+                console.log("updated the component input and got this response: ", response);
+            })
+    };
+
+
+    /*** HEIRARCHY/NAV RELATED FUNCTIONS ***/
+
     /**
      * Handle select node in navigation area, and select the row in table
      */
@@ -219,13 +231,13 @@ export class PropertiesAssignmentComponent {
         if(this.selectedInstanceData.originType !== ResourceType.VF) {
             let simpleFlatProperty:Array<SimpleFlatProperty>;
             if (property instanceof PropertyFEModel) {
-                simpleFlatProperty = this.propertiesService.getSimplePropertiesTree(property, instanceName);
+                simpleFlatProperty = this.hierarchyNavService.getSimplePropertiesTree(property, instanceName);
             } else if (property instanceof DerivedFEProperty) {
                 // Need to find parent PropertyFEModel
                 let parentPropertyFEModel:PropertyFEModel = _.find(this.instanceFePropertiesMap[instanceName], (tmpFeProperty):boolean => {
                     return property.propertiesName.indexOf(tmpFeProperty.name)===0;
                 });
-                simpleFlatProperty = this.propertiesService.getSimplePropertiesTree(parentPropertyFEModel, instanceName);
+                simpleFlatProperty = this.hierarchyNavService.getSimplePropertiesTree(parentPropertyFEModel, instanceName);
             }
             this.propertiesNavigationData = simpleFlatProperty;
         }
@@ -236,20 +248,10 @@ export class PropertiesAssignmentComponent {
         }
 
         // Set selected property in table
-        this.selectedFlatProperty = new SimpleFlatProperty(property.uniqueId, null, property.name, null);
+        this.selectedFlatProperty = this.hierarchyNavService.createSimpleFlatProperty(property, instanceName);
         this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Property Structure']);
     };
 
-    //TODO: Can remove? no one use it
-    // findParentProperty = (childProp: DerivedFEProperty): PropertyFEModel => {
-    //     return this.properties.find(prop => prop.name == childProp.propertiesName.substring(0, childProp.propertiesName.indexOf("#")));
-    // }
-
-    //used for declare button, to keep count of newly checked properties (and ignore declared properties)
-    updateCheckedPropertyCount = (increment: boolean):void => {
-        this.checkedPropertiesCount += (increment) ? 1 : -1;
-        console.log("CheckedProperties count is now.... " + this.checkedPropertiesCount);
-    }
 
     selectInstanceRow = ($event) => {//get instance name
         this.selectedInstanceData =  _.find(this.instancesNavigationData, (instance:ComponentInstance) => {
@@ -257,15 +259,90 @@ export class PropertiesAssignmentComponent {
         });
         this.renderer.invokeElementMethod(
             this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
-    }
+    };
 
     tabChanged = (event) => {
         console.log("==>" + this.constructor.name + ": tabChanged " + event);
-        this.hideAdvanceSearch = event.title !== "Properties";
+        this.isInpusTabSelected = event.title === "Inputs";
+        this.propertyStructureHeader = null;
         this.searchQuery = '';
     };
 
-    deleteInput = (input:InputFEModel) => {
+
+
+    /*** DECLARE PROPERTIES/INPUTS ***/
+    declareProperties = (): void => {
+        console.log("==>" + this.constructor.name + ": declareProperties");
+
+        let selectedProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
+
+        let instancesNames = new KeysPipe().transform(this.instanceFePropertiesMap, []);
+        angular.forEach(instancesNames, (instanceName: string): void => {
+            selectedProperties[instanceName] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceName]);
+            //selectedProperties[this.selectedInstanceData.uniqueId] = this.propertiesService.getCheckedProperties(this.properties);
+        });
+
+        let inputsToCreate: InstancePropertiesAPIMap;
+        if (this.selectedInstanceType !== ResourceType.VF) {
+            inputsToCreate = new InstancePropertiesAPIMap(null, selectedProperties);
+        } else {
+            inputsToCreate = new InstancePropertiesAPIMap(selectedProperties, null);
+        }
+        this.componentServiceNg2
+            .createInput(this.component, inputsToCreate)
+            .subscribe(response => {
+                this.setInputTabIndication(response.length);
+                this.checkedPropertiesCount = 0;
+                _.forEach(response, (input: InputBEModel) => {
+                    this.inputs.push(new InputFEModel(input));
+                    this.updatePropertyValueAfterDeclare(input);
+                });
+            });
+    };
+
+    updatePropertyValueAfterDeclare = (input: InputBEModel) => {
+        _.forEach(input.properties, (property: ComponentInstanceProperty) => {
+            this.updatePropertyOrInputValueAfterDeclare(property, input);
+        });
+
+        _.forEach(input.inputs, (inputInstance: ComponentInstanceInput) => {
+            this.updatePropertyOrInputValueAfterDeclare(inputInstance, input);
+        });
+    }
+
+    updatePropertyOrInputValueAfterDeclare = (inputSource: ComponentInstanceProperty | ComponentInstanceInput, input: InputBEModel) => {
+        if (this.instanceFePropertiesMap[inputSource.componentInstanceId]) {
+            let propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[inputSource.componentInstanceId], (feProperty: PropertyFEModel) => {
+                return feProperty.name == inputSource.name;
+            });
+
+            if (input.inputPath == propertyForUpdatindVal.name) input.inputPath = null; //Fix - if inputPath is sent for parent props, remove it
+
+            propertyForUpdatindVal.setAsDeclared(input.inputPath); //set prop as declared before assigning value
+            this.propertiesService.disableRelatedProperties(propertyForUpdatindVal, input.inputPath);
+            this.propertiesUtils.resetPropertyValue(propertyForUpdatindVal, inputSource.value, input.inputPath);
+            // if (input.inputPath) {
+            //     let childProp = _.find(propertyForUpdatindVal.flattenedChildren, (child: DerivedFEProperty) => {
+            //         return child.propertiesName == input.inputPath;
+            //     });
+            //     this.propertiesUtils.assignFlattenedChildrenValues(JSON.parse(inputSource.value), [childProp], inputSource.name);
+            // } else {
+            //     propertyForUpdatindVal.valueObj = inputSource.value;
+            // }
+        }
+    }
+
+    //used for declare button, to keep count of newly checked properties (and ignore declared properties)
+    updateCheckedPropertyCount = (increment: boolean): void => {
+        this.checkedPropertiesCount += (increment) ? 1 : -1;
+        console.log("CheckedProperties count is now.... " + this.checkedPropertiesCount);
+    };
+
+    setInputTabIndication = (numInputs: number): void => {
+        this.renderer.invokeElementMethod(this.propertyInputTabs, 'setTabIndication', ['Inputs', numInputs]);
+    };
+
+    deleteInput = (input: InputFEModel) => {
         console.log("==>" + this.constructor.name + ": deleteInput");
         let inputToDelete = new PropertyBEModel(input);
 
@@ -273,51 +350,45 @@ export class PropertiesAssignmentComponent {
             .deleteInput(this.component, inputToDelete)
             .subscribe(response => {
                 this.inputs = this.inputs.filter(input => input.uniqueId !== response.uniqueId);
-                let propToEnable: PropertyFEModel = this.instanceFePropertiesMap[input.instanceName].find(prop => prop.name == input.propertyName);
-                propToEnable.setNonDeclared(response.inputPath);
-                this.propertiesService.undoDisableRelatedProperties(propToEnable, response.inputPath);
-                //this.propertiesService.initValueObjectRef(propToEnable); //TODO:speak to BE about value returned by server
-            });
-    }
 
-    setInputTabIndication = (numInputs: number): void => {
-        this.renderer.invokeElementMethod( this.propertyInputTabs, 'setTabIndication', ['Inputs', numInputs]);
-    }
+                //Reload the whole instance for now - TODO: CHANGE THIS after the BE starts returning properties within the response, use commented code below instead!
+                this.onInstanceSelectedUpdate(this.selectedInstanceData);
+                // let instanceFeProperties = this.instanceFePropertiesMap[this.getInstanceUniqueId(input.instanceName)];
+
+                // if (instanceFeProperties) {
+                //     let propToEnable: PropertyFEModel = instanceFeProperties.find((prop) => {
+                //         return prop.name == input.propertyName;
+                //     });
+
+                //     if (propToEnable) {
+                //         if (propToEnable.name == response.inputPath) response.inputPath = null;
+                //         propToEnable.setNonDeclared(response.inputPath);
+                //         //this.propertiesUtils.resetPropertyValue(propToEnable, newValue, response.inputPath);
+                //         this.propertiesService.undoDisableRelatedProperties(propToEnable, response.inputPath);
+                //     }
+                // }
+            });
+    };
 
-    findAndDisableDeclaredProperties = () => {
-        this.inputs.filter(input => input.instanceName === this.selectedInstanceData.normalizedName).forEach(input => {
-            let prop: PropertyFEModel = this.instanceFePropertiesMap[this.selectedInstanceData.uniqueId].find(prop => prop.name === input.propertyName);
-            if (prop) {
-                prop.setAsDeclared(input.inputPath); //if a path was sent, its a child prop. this param is optional
-                this.propertiesService.disableRelatedProperties(prop, input.inputPath)
-                //this.propertiesService.initValueObjectRef(prop);
-            }
+    getInstanceUniqueId = (instanceName: string): string => {
+        let wantedInstance: ComponentInstance = this.instances.find((instance) => {
+            return instance.normalizedName === instanceName;
         });
+
+        return wantedInstance.uniqueId;
     };
 
+
+
+    /*** SEARCH RELATED FUNCTIONS ***/
     searchPropertiesInstances = (filterData:FilterPropertiesAssignmentData) => {
-        //let filteredProperties = this.componentServiceNg2.filterComponentInstanceProperties(this.component, filterData);
         let instanceBePropertiesMap:InstanceBePropertiesMap;
         this.componentServiceNg2
             .filterComponentInstanceProperties(this.component, filterData)
             .subscribe(response => {
-                //instanceBePropertiesMap=response;
-                //console.log("================filter results=============");
-                //console.table(instanceBePropertiesMap);
-                this.processInstancePropertiesResponse(response);
-
-
-                //this.properties = [];
-                // _.forEach(instanceBePropertiesMap, (InstanceProperties:Array<PropertyBEModel>, instanceName:string) => {
-                //     this.properties = this.properties.concat(this.propertiesService.convertPropertiesToFEAndCreateChildren(InstanceProperties, instanceName));
-                // });
-
-
-                // this.instancesNavigationData = _.filter(this.instancesNavigationData, (instance:ComponentInstance) => {
-                //     return instanceBePropertiesMap[instance.name];
-                // });
 
-                // this.hierarchyPropertiesDisplayOptions.searchText = filterData.propertyName;//mark results in tree
+                this.processInstancePropertiesResponse(response);
+                this.hierarchyPropertiesDisplayOptions.searchText = filterData.propertyName;//mark results in tree
                 this.searchPropertyName = filterData.propertyName;//mark in table
                 this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
                 this.propertiesNavigationData = [];
@@ -332,13 +403,13 @@ export class PropertiesAssignmentComponent {
         this.hierarchyPropertiesDisplayOptions.searchText = "";
         this.displayClearSearch = false;
         this.advanceSearch.clearAll();
-    }
+    };
 
     clickOnClearSearch = () => {
         this.clearSearch();
         this.selectFirstInstanceByDefault();
         this.renderer.invokeElementMethod(
             this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
-    }
+    };
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
index 79769e21b5..dfde2a40b2 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
@@ -1,78 +1,154 @@
 import { Injectable } from '@angular/core';
 import { DataTypeModel, PropertyFEModel, PropertyBEModel, InstanceBePropertiesMap, InstanceFePropertiesMap, SchemaProperty, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models";
 import { DataTypeService } from "app/ng2/services/data-type.service";
+import { PropertiesService } from "app/ng2/services/properties.service";
 import { PROPERTY_TYPES } from "app/utils";
 import { UUID } from "angular2-uuid";
 
 @Injectable()
 export class PropertiesUtils {
 
-    constructor(private dataTypeService:DataTypeService) {}
+    constructor(private dataTypeService:DataTypeService, private propertiesService: PropertiesService) {}
 
     /**
      * Entry point when getting properties from server
-     * Returning InstanceFePropertiesMap
+     * For each instance, loop through each property, and:
+     * 1. Create flattened children
+     * 2. Check against inputs to see if any props are declared and disable them
+     * 3. Initialize valueObj (which also creates any new list/map flattened children as needed)
+     * Returns InstanceFePropertiesMap
      */
-    public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap): InstanceFePropertiesMap => {
+    public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, inputs:Array<InputFEModel>): InstanceFePropertiesMap => {
         let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap();
         angular.forEach(instancePropertiesMap, (properties:Array<PropertyBEModel>, instanceName:string) => {
-            instanceFePropertiesMap[instanceName] = this.convertPropertiesToFEAndCreateChildren(properties);
+            let instanceInputs: Array<InputFEModel> = inputs.filter(input => input.instanceName == instanceName.split('.').pop());
+            let propertyFeArray: Array<PropertyFEModel> = [];
+            _.forEach(properties, (property: PropertyBEModel) => {
+
+                if (!this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list
+                    console.log("ERROR: missing type " + property.type + " in dataTypes , of property ", property);
+                } else {
+
+                    let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
+
+                    if (newFEProp.derivedDataType == DerivedPropertyType.COMPLEX) { //Create children if prop is not simple, list, or map.
+                        newFEProp.flattenedChildren = this.createFlattenedChildren(newFEProp.type, newFEProp.name);
+                    }
+                    if (instanceInputs.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children
+                        instanceInputs.filter(input => input.propertyName == newFEProp.name).forEach((input) => {
+                            newFEProp.setAsDeclared(input.inputPath); //if a path was sent, its a child prop. this param is optional
+                            this.propertiesService.disableRelatedProperties(newFEProp, input.inputPath);
+                        });
+                    }
+                    this.initValueObjectRef(newFEProp); //initialize valueObj.
+                    propertyFeArray.push(newFEProp);
+                    newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
+                }    
+            });
+            instanceFePropertiesMap[instanceName] = propertyFeArray;
+
         });
         return instanceFePropertiesMap;
     }
+    private createListOrMapChildrenFromValueObj = (property: PropertyFEModel) => {
+        if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP)
+            && Object.keys(property.valueObj).length) {
 
-    /**
-     * Convert the properties Array<PropertyBEModel> to Array<PropertyFEModel>
-     */
-    private convertPropertiesToFEAndCreateChildren = (properties: Array<PropertyBEModel>): Array<PropertyFEModel> => {
-        let propertyFeArray: Array<PropertyFEModel> = [];
-        _.forEach(properties, (property: PropertyBEModel, index: number) => {
-            //console.log("=======" + property.name + "========");
-                if(!this.dataTypeService.getDataTypeByTypeName(property.type)){ // if type not exist in data types remove property from list
-                    console.log("ERROR: missing type " + property.type + " in dataTypes , of property ",property);
-                    return;
-                }
-                let propertyFe:PropertyFEModel = new PropertyFEModel(property);
-                if (propertyFe.isDataType) { //prop is not simple, list, or map. Need to create children.
-                    let tempProps: Array<DerivedFEProperty> = [];
-                    let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(propertyFe.type);
-                    this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, propertyFe.name);
-                    propertyFe.flattenedChildren = tempProps;
-                    propertyFe.expandedChildPropertyId = propertyFe.name;
-                    this.initValueObjectRef(propertyFe);
-                }
-                propertyFeArray.push(propertyFe);
-
+            Object.keys(property.valueObj).forEach((key) => {
+                let newProps: Array<DerivedFEProperty> = this.createListOrMapChildren(property, key, property.valueObj[key]);
+                property.flattenedChildren.push(...newProps);
+            });
+            
+        }
+    }
 
-        });
-        return propertyFeArray;
+    public createListOrMapChildren = (property:PropertyBEModel, key: string, valueObj: any): Array<DerivedFEProperty> => {
+        let newProps: Array<DerivedFEProperty> = [];
+        let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj);
+        newProps.push(parentProp);
 
-        //TODO: need to look at schema to create the nested properties for the following cases:
-        // 1 - when value is populated for a complex type (list or map)
-        // 2 - when adding new entries to a complex type (eg. adding a new entry to a list of AddressRequirements)
+        if (!property.schema.property.isSimpleType) {
+            let additionalChildren:Array<DerivedFEProperty> = this.createFlattenedChildren(property.schema.property.type, parentProp.propertiesName);
+            this.assignFlattenedChildrenValues(parentProp.valueObj, additionalChildren, parentProp.propertiesName);
+            additionalChildren.forEach(prop => prop.canBeDeclared = false);
+            newProps.push(...additionalChildren);
+        }
+        return newProps;
     }
 
+    /**
+     * Creates derivedFEProperties of a specified type and returns them.
+     */
+    private createFlattenedChildren = (type: string, parentName: string):Array<DerivedFEProperty> => {
+        let tempProps: Array<DerivedFEProperty> = [];
+        let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(type);
+        this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, parentName);
+        return tempProps;
+    }
+    
+    /* Sets the valueObj of parent property and its children. 
+    * Note: This logic is different than assignflattenedchildrenvalues - here we merge values, there we pick either the parents value, props value, or default value - without merging.
+    */
     public initValueObjectRef = (property: PropertyFEModel): void => {
-        //console.log("Property " + property.name + " has value: " + property.value);
-        if (!property.isDataType || property.isDeclared) { //if property is declared, it gets a simple input instead. List and map values and pseudo-children will be handled in property component
-            property.value = property.value || property.defaultValue;
-        } else if (property.value){ //we have a complex property with a value. Lets parse property.value and populate our flattened children with those values
-            this.assignValuesRecursively(JSON.parse(property.value), property.flattenedChildren, property.name);
+        if (property.derivedDataType == DerivedPropertyType.SIMPLE || property.isDeclared) { //if property is declared, it gets a simple input instead. List and map values and pseudo-children will be handled in property component
+            property.valueObj = property.value || property.defaultValue;
+
+            if (property.isDeclared && typeof property.valueObj == 'object')  property.valueObj = JSON.stringify(property.valueObj);
+        } else {
+            if (property.derivedDataType == DerivedPropertyType.LIST) {
+                property.valueObj = _.merge([], JSON.parse(property.defaultValue || '[]'), JSON.parse(property.value || '[]')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined.
+            } else {
+                property.valueObj = _.merge({}, JSON.parse(property.defaultValue || '{}'), JSON.parse(property.value || '{}')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined.
+            }
+            if (property.derivedDataType == DerivedPropertyType.COMPLEX) {
+                this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name);
+            } else {
+                this.createListOrMapChildrenFromValueObj(property);
+            }
         }
     }
 
-    public assignValuesRecursively = (valueJSON: any, derivedPropArray: Array<DerivedFEProperty>, propName: string) => {
-        if (valueJSON && Object.keys(valueJSON)) {
-            Object.keys(valueJSON).forEach(valueKey => {
-                let childProp: DerivedFEProperty = derivedPropArray.find(prop => prop.propertiesName == propName + "#" + valueKey);
-                if (!childProp) return;
-                if (childProp.isDeclared || (childProp.derivedDataType != DerivedPropertyType.COMPLEX && !_.isEmpty(valueJSON[valueKey]))) {
-                    childProp.value = (typeof valueJSON[valueKey] === 'object')? JSON.stringify(valueJSON[valueKey]) : valueJSON[valueKey];
-                } else {
-                    this.assignValuesRecursively(valueJSON[valueKey], derivedPropArray, childProp.propertiesName)
+    /*
+    * Loops through flattened properties array and to assign values
+    * Then, convert any neccessary strings to objects, and vis-versa
+    * For list or map property, creates new children props if valueObj has values
+    */
+    public assignFlattenedChildrenValues = (parentValueJSON: any, derivedPropArray: Array<DerivedFEProperty>, parentName: string) => {
+        if (!derivedPropArray || !parentName) return;
+        derivedPropArray.forEach((prop, index) => {
+
+            let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name
+            prop.valueObj = _.get(parentValueJSON, propNameInObj, prop.value || prop.defaultValue); //assign value -first value of parent if exists. If not, prop.value if not, prop.defaultvalue
+            
+            if ((prop.derivedDataType == DerivedPropertyType.SIMPLE || prop.isDeclared) && typeof prop.valueObj == 'object') { //Stringify objects that should be strings
+                prop.valueObj = JSON.stringify(prop.valueObj);
+            } else { //parse strings that should be objects
+                if ((prop.derivedDataType == DerivedPropertyType.COMPLEX || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj != 'object') {
+                    prop.valueObj = JSON.parse(prop.valueObj || '{}');
+                } else if (prop.derivedDataType == DerivedPropertyType.LIST && typeof prop.valueObj != 'object') {
+                    prop.valueObj = JSON.parse(prop.valueObj || '[]');
                 }
-            });
+                if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && Object.keys(prop.valueObj).length) {
+                    let newProps: Array<DerivedFEProperty> = [];
+                    Object.keys(prop.valueObj).forEach((key) => {
+                        newProps.push(...this.createListOrMapChildren(prop, key, prop.valueObj[key]));//create new children, assign their values, and then add to array
+                    });
+                    derivedPropArray.splice(index + 1, 0, ...newProps);
+                }
+            }
+        });
+    }
+
+    public resetPropertyValue = (property: PropertyFEModel, newValue: string, inputPath?: string): void => {
+        property.value = newValue;
+        if (inputPath) {
+            let newProp = property.flattenedChildren.find(prop => prop.propertiesName == inputPath);
+            newProp && this.assignFlattenedChildrenValues(JSON.parse(newValue), [newProp], property.name);
+        } else {
+            this.initValueObjectRef(property);
         }
     }
 
+
+
 }
diff --git a/catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts b/catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts
index 7e017e8590..3a0c85dda2 100644
--- a/catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts
+++ b/catalog-ui/src/app/ng2/pipes/searchFilter.pipe.ts
@@ -8,11 +8,10 @@ export class SearchFilterPipe implements PipeTransform {
         if (!term || !term.length) return value;
         return value.filter((item) => {
             if (item.hasOwnProperty(key)) {
-                let regExp = new RegExp(term, 'gi');
-                return regExp.test(item[key]);
+                return item[key].indexOf(term) > -1;
             } else {
                 return false;
             }
         });
     }
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-mode.service.ts
new file mode 100644
index 0000000000..12a581e5f9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-mode.service.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by rc2122 on 5/23/2017.
+ */
+import { Injectable } from '@angular/core';
+import {WorkspaceMode, ComponentState, Role} from "../../utils/constants";
+import { Component as ComponentData } from "app/models";
+import { CacheService } from "app/services/cache-service"
+
+@Injectable()
+
+export class ComponentModeService {
+
+    constructor(private cacheService:CacheService) {
+    }
+
+    public getComponentMode = (component:ComponentData):WorkspaceMode => {//return if is edit or view for resource or service
+        let mode = WorkspaceMode.VIEW;
+
+        let user = this.cacheService.get("user");
+        if (component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT &&
+            component.lastUpdaterUserId === user.userId) {
+            if ((component.isService() || component.isResource()) && user.role == Role.DESIGNER) {
+                mode = WorkspaceMode.EDIT;
+            }
+        }
+        return mode;
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
index b47b64c5c2..d2f7078599 100644
--- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -20,7 +20,7 @@ export class ServiceServiceNg2 {
 
     validateConformanceLevel(service: Service): Observable<boolean> {
 
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/conformanceLevelValidation')
+        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uuid + '/conformanceLevelValidation')
             .map((res: Response) => {
                 return res.json();
             });
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index e7ea1a8430..be2388144f 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -49,12 +49,14 @@ export class DataTypeService {
         return propertiesArray;
     }
 */
-    
+
     public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
         //push all child properties to array
         if (dataTypeObj.properties) {
             dataTypeObj.properties.forEach((derivedProperty) => {
-                propertiesArray.push(new DerivedFEProperty(derivedProperty, parentName));
+                if(dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedProperty.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA){//The requirement is to not display the property supplemental_data
+                    propertiesArray.push(new DerivedFEProperty(derivedProperty, parentName));
+                }
                 let derivedDataTypeObj: DataTypeModel = this.getDataTypeByTypeName(derivedProperty.type);
                 this.getDerivedDataTypeProperties(derivedDataTypeObj, propertiesArray, parentName + "#" + derivedProperty.name);
             });
@@ -62,8 +64,8 @@ export class DataTypeService {
         //recurse parent (derivedFrom), in case one of parents contains properties
         if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFrom.name) {
             this.getDerivedDataTypeProperties(dataTypeObj.derivedFrom, propertiesArray, parentName);
-        }    
-    }    
-    
+        }
+    }
+
 }
 
diff --git a/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts b/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts
new file mode 100644
index 0000000000..512505d7c6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts
@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import { SimpleFlatProperty, PropertyFEModel, DerivedFEProperty } from 'app/models';
+
+
+@Injectable()
+export class HierarchyNavService {
+    /**
+     * Build hirarchy structure for the tree when user selects on table row.
+     * First create Array<SimpleFlatProperty> and insert also the parent (PropertyFEModel) to this array.
+     * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId.
+     * Now we build hirarchy from this Array (that includes childrens) and return it for the tree
+     *
+     * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty
+     * @returns  Array<SimpleFlatProperty> - containing childrens Array<SimpleFlatProperty>, augmantin childrens to SimpleFlatProperty.
+     */
+    public getSimplePropertiesTree(property: PropertyFEModel, instanceName: string): Array<SimpleFlatProperty> {
+        // Build Array of SimpleFlatProperty before unflatten function
+        let flattenProperties: Array<SimpleFlatProperty> = [];
+        flattenProperties.push(this.createSimpleFlatProperty(property, instanceName)); // Push the root property
+        _.each(property.flattenedChildren, (child: DerivedFEProperty): void => {
+            if (child.isChildOfListOrMap && child.schema.property.isSimpleType) return; //do not display non-complex children of list or map
+            flattenProperties.push(this.createSimpleFlatProperty(child, instanceName));
+        });
+
+        let tree = this.unflatten(flattenProperties, '', []);
+        return tree[0].childrens; // Return the childrens without the root.
+    }
+
+    public createSimpleFlatProperty = (property: PropertyFEModel | DerivedFEProperty, instanceName:string): SimpleFlatProperty => {
+        if (property instanceof PropertyFEModel) {
+            return new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName);
+        } else {
+            let propName: string = (property.isChildOfListOrMap) ? property.mapKey : property.name;
+            return new SimpleFlatProperty(property.uniqueId, property.propertiesName, propName, property.parentName, instanceName);
+        }
+        
+    }
+
+    /**
+     * Unflatten Array<SimpleFlatProperty> and build hirarchy.
+     * The result will be Array<SimpleFlatProperty> that augmantin with childrens for each SimpleFlatProperty.
+     */
+    private unflatten(array: Array<SimpleFlatProperty>, parent: any, tree?: any): any {
+        tree = typeof tree !== 'undefined' ? tree : [];
+        parent = typeof parent !== 'undefined' && parent !== '' ? parent : { path: '' };
+
+        var childrens = _.filter(array, (child: SimpleFlatProperty): boolean => {
+            return child.parentName == parent.path;
+        });
+
+        if (!_.isEmpty(childrens)) {
+            if (parent.path == '') {
+                tree = childrens;
+            } else {
+                parent['childrens'] = childrens;
+            }
+            _.each(childrens, (child): void => {
+                this.unflatten(array, child);
+            });
+        }
+        return tree;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/properties.service.ts b/catalog-ui/src/app/ng2/services/properties.service.ts
index 638e537cd1..a22e2aed20 100644
--- a/catalog-ui/src/app/ng2/services/properties.service.ts
+++ b/catalog-ui/src/app/ng2/services/properties.service.ts
@@ -8,11 +8,11 @@ import { UUID } from "angular2-uuid";
 @Injectable()
 export class PropertiesService {
 
-    constructor(private dataTypeService:DataTypeService, private contentAfterLastDotPipe:ContentAfterLastDotPipe) {
+    constructor(private dataTypeService: DataTypeService, private contentAfterLastDotPipe: ContentAfterLastDotPipe) {
     }
 
-    public getParentPropertyFEModelFromPath = (properties:Array<PropertyFEModel>, path:string) => {
-        let parent:PropertyFEModel = _.find(properties, (property:PropertyFEModel):boolean=>{
+    public getParentPropertyFEModelFromPath = (properties: Array<PropertyFEModel>, path: string) => {
+        let parent: PropertyFEModel = _.find(properties, (property: PropertyFEModel): boolean => {
             return property.name === path.substring(0, path.indexOf('#'));
         });
         return parent;
@@ -33,7 +33,7 @@ export class PropertiesService {
     }
 
     //disable parents and children of prop
-    public disableRelatedProperties = (property:PropertyFEModel, childPath?: string): void => {
+    public disableRelatedProperties = (property: PropertyFEModel, childPath?: string): void => {
         if (!childPath) { //selecting the parent property
             property.isSelected = true;
             property.flattenedChildren && property.flattenedChildren.map(child => { child.isSelected = false; child.isDisabled = true; });
@@ -41,18 +41,18 @@ export class PropertiesService {
             property.isSelected = false;
             property.isDisabled = true;
             property.flattenedChildren.filter((childProp: DerivedFEProperty) => {
-                return (childProp.propertiesName.indexOf(childPath + "#") > -1 //is child of prop to disable
-                    || childPath.indexOf(childProp.propertiesName + "#") > -1); //is parent of prop to disable
+                return (childProp.propertiesName.indexOf(childPath + "#") === 0 //is child of prop to disable
+                    || childPath.indexOf(childProp.propertiesName + "#") === 0); //is parent of prop to disable
             }).map((child: DerivedFEProperty) => { child.isSelected = false; child.isDisabled = true; });
         }
     }
 
-    public getCheckedProperties = (properties:Array<PropertyFEModel>): Array<PropertyBEModel> => {
+    public getCheckedProperties = (properties: Array<PropertyFEModel>): Array<PropertyBEModel> => {
         let selectedProps: Array<PropertyBEModel> = [];
         properties.forEach(prop => {
             if (prop.isSelected && !prop.isDeclared && !prop.isDisabled) {
                 selectedProps.push(new PropertyBEModel(prop));
-            } else if(prop.flattenedChildren) {
+            } else if (prop.flattenedChildren) {
                 prop.flattenedChildren.forEach((child) => {
                     if (child.isSelected && !child.isDeclared && !child.isDisabled) {
                         let childProp = new PropertyBEModel(prop, child); //create it from the parent
@@ -64,186 +64,5 @@ export class PropertiesService {
         return selectedProps;
     }
 
-    /**
-     * Build hirarchy structure for the tree when user selects on table row.
-     * First create Array<SimpleFlatProperty> and insert also the parent (PropertyFEModel) to this array.
-     * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId.
-     * Now we build hirarchy from this Array (that includes childrens) and return it for the tree
-     *
-     * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty
-     * @returns  Array<SimpleFlatProperty> - containing childrens Array<SimpleFlatProperty>, augmantin childrens to SimpleFlatProperty.
-     */
-    public getSimplePropertiesTree(property: PropertyFEModel, instanceName:string):Array<SimpleFlatProperty> {
-        // Build Array of SimpleFlatProperty before unflatten function
-        let flattenProperties:Array<SimpleFlatProperty> = [];
-        flattenProperties.push(new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName)); // Push the root property
-        _.each(property.flattenedChildren, (child:DerivedFEProperty):void => {
-            flattenProperties.push(new SimpleFlatProperty(child.uniqueId, child.propertiesName, child.name, child.parentName, instanceName));
-        });
-
-        let tree = this.unflatten(flattenProperties, '', []);
-        return tree[0].childrens; // Return the childrens without the root.
-    }
-
-    /**
-     * Unflatten Array<SimpleFlatProperty> and build hirarchy.
-     * The result will be Array<SimpleFlatProperty> that augmantin with childrens for each SimpleFlatProperty.
-     */
-    private unflatten( array:Array<SimpleFlatProperty>, parent:any, tree?:any ):any {
-        tree = typeof tree!=='undefined' ? tree : [];
-        parent = typeof parent!=='undefined' && parent!=='' ? parent : { path: '' };
-
-        var childrens = _.filter( array, (child:SimpleFlatProperty):boolean => {
-            return child.parentName == parent.path;
-        });
-
-        if( !_.isEmpty( childrens )  ){
-            if( parent.path == '' ){
-                tree = childrens;
-            } else {
-                parent['childrens'] = childrens;
-            }
-            _.each( childrens, ( child ):void => {
-                this.unflatten( array, child );
-            });
-        }
-        return tree;
-    }
-
-    // TODO: To remove
-    // public convertPropertiesToFEAndInitialize(properties: Array<PropertyBEModel>): Array<PropertyFEModel> {
-    //     let props:Array<PropertyFEModel> = [];
-    //     _.forEach(properties, (property: PropertyFEModel, index: number) => {
-    //         props[index] = new PropertyFEModel(property);
-    //         this.initValueObjectRef(props[index]);
-    //         if (props[index].isDataType ||
-    //             ((props[index].type === PROPERTY_TYPES.MAP || props[index].type === PROPERTY_TYPES.LIST) && props[index].schema.property.isDataType)) {
-    //             props[index].valueObjectRef = props[index].valueObjectRef || {};
-    //             let defaultValueObject:any = props[index].defaultValue ? JSON.parse(props[index].defaultValue): null;
-    //             this.createPropertiesTreeForProp(props[index], true, defaultValueObject);
-    //         }
-    //     });
-    //     return props;
-    // }
-
 
-    /**
-     * Converts a property's map values to properties and adds them to property.childrenProperties
-     * @param property - property to add children to
-     * @param onlyFirstLevel - recursively retrieve properties for each dataType?
-     */
-    //TODO: To remove
-    // public createPropertyNodesForMapOfDataTypes(property: PropertyFEModel, onlyFirstLevel:boolean):void {
-    //     property.childrenProperties = [];
-    //     angular.forEach(property.valueObjectRef,function(itemInMap:any, keyInMap:string){
-    //         let newProperty: PropertyFEModel = new PropertyFEModel(keyInMap,
-    //             property.schema.property.type,
-    //             UUID.UUID(),
-    //             property,
-    //             property.valueObjectRef[keyInMap]);
-    //         !onlyFirstLevel && this.createPropertiesTreeForProp(newProperty);
-    //         property.childrenProperties.push(newProperty);
-    //     },this);
-    // }
-
-
-    /**
-     * Converts a property's list values to properties and adds them to property.childrenProperties
-     * @param property - property to add children to
-     * @param onlyFirstLevel - recursively retrieve properties for each dataType?
-     */
-    //TODO: To remove
-    // public createPropertyNodesForListOfDataTypes(property: PropertyFEModel, onlyFirstLevel:boolean):void {
-    //     property.childrenProperties = [];
-    //     property.valueObjectRef.forEach((itemInList:any, index:number):void =>{
-    //         let newProperty: PropertyFEModel = new PropertyFEModel(this.contentAfterLastDotPipe.transform(property.schema.property.type),
-    //             property.schema.property.type,
-    //             UUID.UUID(),
-    //             property,
-    //             property.valueObjectRef[index]);
-    //         !onlyFirstLevel && this.createPropertiesTreeForProp(newProperty);
-    //         property.childrenProperties.push(newProperty);
-    //     });
-    // }
-
-    // private checkIfPropertyDerivedFromSimpleAndUpdateProp(property:PropertyFEModel | SchemaProperty): boolean{
-    //     property.derivedFromSimpleTypeName = this.dataTypeService.getTypeForDataTypeDerivedFromSimple(property.type);
-    //     if(property.derivedFromSimpleTypeName){
-    //         property.isSimpleType = true;
-    //         property.isDataType = false;
-    //     }
-    //     return property.isSimpleType;
-    // }
-
-    // TODO: Remove
-    public createPropertiesTreeForProp(property: PropertyFEModel, onlyFirstLevel?: boolean, defaultValueObj?: any): void {
-    }
-
-    public getPropertyFEModelFromDerivedPropertyUniqueId(properties: Array<PropertyFEModel>, uniqueId: string): PropertyFEModel {
-        // _.each(properties, (property):void => {
-        //     property.flattenedChildren
-
-        // });
-
-        // let rootProperty = _.find(properties, (property):boolean => { return property.uniqueId === uniqueId; });
-        // if
-        return null;
-    }
-
-    /**
-     * Utilizes the dataTypeService to retrieve children properties from dataTypes recursively.
-     * @param property
-     * @param onlyFirstLevel
-     */
-    // TODO: To remove
-    // public createPropertiesTreeForProp(property: PropertyFEModel, onlyFirstLevel?:boolean, defaultValueObj?:any ):void{
-    //     if (property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property)){
-    //         let dataType: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(property.type);
-    //         property.childrenProperties = [];
-    //         let childrenProperties = this.dataTypeService.getDataTypePropertiesRecursively(dataType);
-    //         childrenProperties.forEach((childProperty: PropertyBEModel):void => {
-    //             let childDataTypePropertyObj: PropertyFEModel = new PropertyFEModel(childProperty.name, childProperty.type,UUID.UUID(),property, {}, childProperty.schema);
-    //             //init empty object in valueObjectRef[childProperty.name] because this property's children should has ref to this obj.
-    //             if(!property.valueObjectRef[childDataTypePropertyObj.name]){
-    //                 if ((childDataTypePropertyObj.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(childDataTypePropertyObj))
-    //                     || childDataTypePropertyObj.type === PROPERTY_TYPES.MAP){
-    //                     property.valueObjectRef[childDataTypePropertyObj.name] = {};
-    //                 }else if(childDataTypePropertyObj.type === PROPERTY_TYPES.LIST){
-    //                     property.valueObjectRef[childDataTypePropertyObj.name] = [];
-    //                 }
-    //             }
-    //             childDataTypePropertyObj.valueObjectRef = property.valueObjectRef[childDataTypePropertyObj.name];
-    //             property.valueObjectRef[childDataTypePropertyObj.name] =  property.valueObjectRef[childProperty.name] || childDataTypePropertyObj.defaultValue;
-    //             if( !childDataTypePropertyObj.isDataType && defaultValueObj ){//init property default value
-    //                 childDataTypePropertyObj.defaultValue = JSON.stringify(defaultValueObj[childDataTypePropertyObj.name]);
-    //             }
-    //             property.childrenProperties.push(childDataTypePropertyObj);
-    //             !onlyFirstLevel && this.createPropertiesTreeForProp(childDataTypePropertyObj, false, (defaultValueObj ? defaultValueObj[childDataTypePropertyObj.name] : null));
-    //         });
-    //     } else if (property.type == PROPERTY_TYPES.MAP && property.schema.property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property.schema.property)){
-    //         if( property.valueObjectRef && !_.isEmpty(property.valueObjectRef)){
-    //             this.createPropertyNodesForMapOfDataTypes(property, onlyFirstLevel);
-    //         }
-    //     } else if (property.type == PROPERTY_TYPES.LIST && property.schema.property.isDataType && !this.checkIfPropertyDerivedFromSimpleAndUpdateProp(property.schema.property)){
-    //         if( property.valueObjectRef && property.valueObjectRef.length){
-    //             this.createPropertyNodesForListOfDataTypes(property, onlyFirstLevel);
-    //         }
-    //     }
-    // }
-}
-
-export class SimpleFlatProperty {
-    uniqueId:string;
-    path:string;
-    name:string;
-    parentName:string;
-    instanceName:string;
-
-    constructor(uniqueId?:string, path?:string, name?: string, parentName?:string, instanceName?:string) {
-        this.uniqueId = uniqueId;
-        this.path = path;
-        this.name = name;
-        this.parentName = parentName;
-        this.instanceName = instanceName;
-    }
-}
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
index aa59428a64..fa05249ea4 100644
--- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
@@ -15,7 +15,6 @@
 .tab-content-container {
     flex: 1;
     height: 100%;
-    overflow: hidden;
     width:100%;
 }
 
@@ -59,7 +58,7 @@
             width: 25px;
             height: 25px;
             text-align: center;
-            
+
         }
     }
 
diff --git a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
index c8c1d9b721..ed1ecd87bd 100644
--- a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
+++ b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts
@@ -5,6 +5,8 @@ import {DataTypesService} from "../../services/data-types-service";
 import ICacheObject = angular.ICacheObject;
 import {SharingService} from "../../services/sharing-service";
 import {CookieService} from "../../services/cookie-service";
+import {CacheService} from "../../services/cache-service";
+import {EventListenerService} from "app/services/event-listener-service";
 
 /** Services we need to upgrade from angular1 to angular2 - in the future we need to rewrite them all to angular2 **/
 
@@ -24,6 +26,14 @@ export function stateParamsServiceFactory(cacheObj: ICacheObject) {
     return cacheObj.get('$stateParams');
 }
 
+export function cacheServiceFactory(cacheObj: ICacheObject) {
+    return cacheObj.get('Sdc.Services.CacheService');
+}
+
+export function eventListenerServiceServiceFactory(cacheObj: ICacheObject) {
+    return cacheObj.get('EventListenerService');
+}
+
 export const DataTypesServiceProvider = {
     provide: DataTypesService,
     useFactory: dataTypesServiceFactory,
@@ -49,3 +59,15 @@ export const StateParamsServiceFactory = {
     useFactory: stateParamsServiceFactory,
     deps: ['$injector']
 };
+
+export const CacheServiceProvider = {
+    provide: CacheService,
+    useFactory: cacheServiceFactory,
+    deps: ['$injector']
+};
+
+export const EventListenerServiceProvider = {
+    provide: EventListenerService,
+    useFactory: eventListenerServiceServiceFactory,
+    deps: ['$injector']
+};
diff --git a/catalog-ui/src/app/services/components/component-service.ts b/catalog-ui/src/app/services/components/component-service.ts
index 1a6b9a8a14..7e031baa08 100644
--- a/catalog-ui/src/app/services/components/component-service.ts
+++ b/catalog-ui/src/app/services/components/component-service.ts
@@ -22,12 +22,13 @@ import {ArtifactModel, IFileDownload, InstancesInputsPropertiesMap, InputModel,
     AttributeModel, IAppConfigurtaion, Resource, Module, DisplayModule, ArtifactGroupModel, InputsAndProperties} from "app/models";
 import {ComponentInstanceFactory, CommonUtils} from "app/utils";
 import {SharingService} from "../sharing-service";
+import {ComponentMetadata} from "../../models/component-metadata";
 
 export interface IComponentService {
 
     getComponent(id:string);
     updateComponent(component:Component):ng.IPromise<Component>;
-    changeLifecycleState(component:Component, state:string, userRemarks:any):ng.IPromise<Component> ;
+    changeLifecycleState(component:Component, state:string, userRemarks:any):ng.IPromise<ComponentMetadata> ;
     validateName(newName:string, subtype?:string):ng.IPromise<IValidate>;
     createComponent(component:Component):ng.IPromise<Component>;
     addOrUpdateArtifact(componentId:string, artifact:ArtifactModel):ng.IPromise<ArtifactModel>;
@@ -213,11 +214,11 @@ export class ComponentService implements IComponentService {
         return deferred.promise;
     };
 
-    public changeLifecycleState = (component:Component, state:string, userRemarks:any):ng.IPromise<Component> => {
+    public changeLifecycleState = (component:Component, state:string, userRemarks:any):ng.IPromise<ComponentMetadata> => {
         let deferred = this.$q.defer();
-        this.restangular.one(component.uniqueId).one(state).customPOST(userRemarks).then((response:Component) => {
+        this.restangular.one(component.uniqueId).one(state).customPOST(userRemarks).then((response:ComponentMetadata) => {
             this.sharingService.addUuidValue(response.uniqueId, response.uuid);
-            let component:Component = this.createComponentObject(response);
+            let component:ComponentMetadata = new ComponentMetadata().deserialize(response);
             deferred.resolve(component);
         }, (err)=> {
             deferred.reject(err);
diff --git a/catalog-ui/src/app/utils/component-factory.ts b/catalog-ui/src/app/utils/component-factory.ts
index 18edbfb02c..13f1d761f2 100644
--- a/catalog-ui/src/app/utils/component-factory.ts
+++ b/catalog-ui/src/app/utils/component-factory.ts
@@ -106,6 +106,7 @@ export class ComponentFactory {
         newResource.csarVersion = csar.version;
         newResource.packageId = csar.packageId;
         newResource.description = csar.description;
+        newResource.filterTerm = newResource.name +  ' '  + newResource.description + ' ' + newResource.vendorName + ' ' + newResource.csarVersion
         return newResource;
     };
 
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index d55079d662..7426c7c92b 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.ts
@@ -91,11 +91,13 @@ export class PROPERTY_DATA {
     public static TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP];
     public static SIMPLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON];
     public static ROOT_DATA_TYPE = "tosca.datatypes.Root";
+    public static OPENECOMP_ROOT = "org.openecomp.datatypes.Root";
+    public static SUPPLEMENTAL_DATA = "supplemental_data";
     public static SOURCES = [SOURCES.A_AND_AI, SOURCES.ORDER, SOURCES.RUNTIME];
 }
 
 export class PROPERTY_VALUE_CONSTRAINTS {
-    public static MAX_LENGTH = 100;
+    public static MAX_LENGTH = 2500;
     public static JSON_MAX_LENGTH = 4096;
 }
 
@@ -216,6 +218,7 @@ export class EVENTS {
     static ON_WORKSPACE_SAVE_BUTTON_CLICK = "onWorkspaceSaveButtonClick";
     static ON_WORKSPACE_SAVE_BUTTON_SUCCESS = "onWorkspaceSaveButtonSuccess";
     static ON_WORKSPACE_SAVE_BUTTON_ERROR = "onWorkspaceSaveButtonError";
+    static ON_CHECKOUT = "onCheckout";
 
     //Loader events
     static SHOW_LOADER_EVENT = "showLoaderEvent";
diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts
index fe864cb658..c6d1d36fc7 100644
--- a/catalog-ui/src/app/utils/modals-handler.ts
+++ b/catalog-ui/src/app/utils/modals-handler.ts
@@ -372,7 +372,7 @@ export class ModalsHandler implements IModalsHandler {
     public openConformanceLevelModal = ():ng.IPromise<any> => {
         let deferred = this.$q.defer();
         let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/workspace/conformance-level-modal/conformance-level-modal-view.html',
+            templateUrl: '../view-models/modals/conformance-level-modal/conformance-level-modal-view.html',
             controller: 'Sdc.ViewModels.ConformanceLevelModalViewModel',
             size: 'sdc-sm',
             backdrop: 'static',
diff --git a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html
index 90b8f67df4..daa7a90bf8 100644
--- a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html
@@ -103,9 +103,9 @@
                         <input class="i-sdc-form-input"
                                data-tests-id="defaultvalue"
                                ng-if="!(editAttributeModel.attribute.type == 'boolean')"
-                               data-ng-maxlength="100"
+                               data-ng-maxlength="2500"
                                data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()"
-                               maxlength="100"
+                               maxlength="2500"
                                data-ng-model="attributeValue.value"
                                type="text"
                                name="value"
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
index b3557b055f..a6124f41a2 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
@@ -210,7 +210,7 @@ export class PropertyFormViewModel {
                 this.$scope.isLoading = false;
 
                 if (!doNotCloseModal) {
-                    this.$uibModalInstance.close();
+                    this.$uibModalInstance.close(propertyFromBE);
                 } else {
                     this.$scope.forms.editForm.$setPristine();
                     this.$scope.editPropertyModel.property = new PropertyModel();
diff --git a/catalog-ui/src/app/view-models/workspace/conformance-level-modal/conformance-level-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts
index 61a83c88f7..61a83c88f7 100644
--- a/catalog-ui/src/app/view-models/workspace/conformance-level-modal/conformance-level-modal-view-model.ts
+++ b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts
diff --git a/catalog-ui/src/app/view-models/workspace/conformance-level-modal/conformance-level-modal-view.html b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html
index 3577e4d77b..3577e4d77b 100644
--- a/catalog-ui/src/app/view-models/workspace/conformance-level-modal/conformance-level-modal-view.html
+++ b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html
diff --git a/catalog-ui/src/app/view-models/workspace/conformance-level-modal/conformance-level-modal.less b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less
index 7f195ade83..7f195ade83 100644
--- a/catalog-ui/src/app/view-models/workspace/conformance-level-modal/conformance-level-modal.less
+++ b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html
index 3657fad017..b078a4b1ef 100644
--- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html
+++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html
@@ -9,9 +9,9 @@
             <input type="text"
                    class="search-text"
                    placeholder="Search"
-                   data-ng-model="searchBind"
+                   data-ng-model="search.filterTerm"
                    data-tests-id="onboarding-search"
-                   ng-model-options="{ debounce: 500 }" />
+                   ng-model-options="{ debounce: 300 }" />
             <span class="w-sdc-search-icon magnification"></span>
         </div>
     </div>
@@ -38,16 +38,16 @@
                     <div infinite-scroll-disabled='allItemsDisplayed'  infinite-scroll="increaseNumItemsToDisplay()" infinite-scroll-container="'#onboarding-modal-scrollbar-container'">
 
                     <!-- Loop on components list -->
-                    <div data-ng-repeat-start="component in componentsList | filter: searchBind | orderBy:sortBy:reverse | limitTo:numberOfItemsToDisplay track by $index"
+                    <div data-ng-repeat-start="component in componentsList | filter: search | orderBy:sortBy:reverse | limitTo:numberOfItemsToDisplay track by $index"
                          class="flex-container data-row"
-                         data-ng-class="{'selected': component === selectedComponent}"
+                         data-ng-class="{'selected': component.packageId === selectedComponent.packageId}"
                          data-ng-click="doSelectComponent(component);"
                          data-tests-id="csar-row"
                          >
 
                         <!-- Name -->
                         <div class="table-col-general flex-item"  sdc-smart-tooltip>
-                            <span class="sprite table-arrow" data-ng-class="{'opened': component === selectedComponent}" data-tests-id="{{component.name}}"></span>
+                            <span class="sprite table-arrow" data-ng-class="{'opened': component.packageId === selectedComponent.packageId}" data-tests-id="{{component.name}}"></span>
                             {{component.name}}
                         </div>
 
@@ -71,7 +71,7 @@
 
                     </div>
 
-                    <div data-ng-repeat-end="" data-ng-if="component===selectedComponent" class="item-opened">
+                    <div data-ng-repeat-end="" data-ng-if="component.packageId === selectedComponent.packageId" class="item-opened">
 
                         <div class="item-opened-description">
                             <div class="item-opened-description-title">VSP Description:</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
index e2d95280c8..670655ea4b 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
@@ -215,6 +215,10 @@ export class CompositionViewModel {
             if (this.$state.current.name === 'workspace.composition.api') {
                 this.$state.go('workspace.composition.details');
             }
+
+            if(this.$scope.selectedComponent.isService() && this.$state.current.name === 'workspace.composition.relations'){
+                this.$state.go('workspace.composition.api');
+            }
         };
 
         this.$scope.openUpdateModal = ():void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
index 0ac5fd0799..5d03563042 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
@@ -179,7 +179,7 @@ export class ResourceArtifactsViewModel {
                     this.$scope.currentComponent.selectedInstance.artifacts = artifacts;
                     break;
             }
-            this.loadComponentArtifactIfNeeded();
+            this.initArtifactArr(this.$scope.artifactType);
         };
 
         let onError = ()=> {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
index b0d81b3437..bd4864771e 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
@@ -49,7 +49,7 @@
                             data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button>
 
                     <download-artifact ng-if="artifact.esId && 'deployment' != artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"
-                                       artifact="artifact" component="currentComponent" data-tests-id="download-{{artifact.artifactDisplayName}}" instance="isComponentInstanceSelected()"></download-artifact>
+                                       artifact="artifact" component="currentComponent" data-tests-id="download_{{artifact.artifactDisplayName}}" instance="isComponentInstanceSelected()"></download-artifact>
                     <download-artifact ng-if="artifact.esId && 'deployment' == artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"
                                        artifact="artifact" component="currentComponent" instance="isComponentInstanceSelected()" data-tests-id="download_{{artifact.artifactDisplayName}}"
                                        show-loader="artifact.isHEAT()"
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
index a81bb9176e..b19c08a28c 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
@@ -82,10 +82,11 @@ export class DetailsViewModel {
         let highestVersion = _.last(Object.keys(this.$scope.selectedComponent.allVersions));
 
         if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in -
-            let latestVersionComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent.componentType), (component:LeftPaletteComponent) => { //latest checked in
+            let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent.componentType), (component:LeftPaletteComponent) => { //latest checked in
                 return (component.systemName === this.$scope.selectedComponent.systemName
                 || component.uuid === this.$scope.selectedComponent.uuid);
-            });
+            }),(component)=>{return component.version});
+
             let latestVersion:string = latestVersionComponent ? latestVersionComponent.version : highestVersion;
 
             if (highestVersion != latestVersion) { //highest is checked out - remove from options
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
index 84769d7a62..90cb556c75 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
@@ -118,7 +118,9 @@ export class ResourcePropertiesViewModel {
             (this.$scope.isPropertyOwner() ?
                 this.$scope.properties[property.parentUniqueId] :
                 this.$scope.properties[property.resourceInstanceUniqueId]) || [],
-            this.isPropertyValueOwner()).then(() => {
+            this.isPropertyValueOwner()).then((updatedProperty:PropertyModel) => {
+               let oldProp = _.find(this.$scope.properties[updatedProperty.resourceInstanceUniqueId], (prop:PropertyModel) => {return prop.uniqueId == updatedProperty.uniqueId;});
+            oldProp.value = updatedProperty.value;
         });
     };
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
index cc914b07a8..a36eb1b74d 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
@@ -28,7 +28,7 @@
                             <div class="heat-env-connect-container" ng-class="{'heat-env-connect-container-view-mode': isViewMode()}" data-ng-if="artifact.envArtifact">
                             <span  class="heat-env-connect"></span>
                              </div>
-                            <span data-tests-id="artifactDisplayName_{{artifact.artifactDisplayName}}" sdc-smart-tooltip class="artifact-name">{{artifact.artifactDisplayName}}</span>
+                            <span data-tests-id="artifactDisplayName_{{artifact.artifactDisplayName}}" class="artifact-name text" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span>
 
                             <span class="sprite-new show-desc hand description-popover-icon"
                                   uib-popover-template="popoverTemplate"
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
index ff4636e002..48a2446e5f 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
@@ -408,7 +408,7 @@ export class WorkspaceViewModel {
                 switch (url) {
                     case 'lifecycleState/CHECKOUT':
                         // only checkOut get the full component from server
-                        this.$scope.component = component;
+                     //   this.$scope.component = component;
                         // Work around to change the csar version
                         if (this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
                             (<Resource>this.$scope.component).csarVersion = this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
@@ -424,12 +424,17 @@ export class WorkspaceViewModel {
                             //when checking out a major(certified) version
                             this.components.unshift(component);
                         }
+                        this.EventListenerService.notifyObservers(EVENTS.ON_CHECKOUT, component);
+                        // this.$state.go(this.$state.current.name, {
+                        //     id: component.uniqueId,
+                        //     type: component.componentType.toLowerCase(),
+                        //     components: this.components
+                        // });
+                        this.$scope.mode = this.initViewMode();
+                        this.initChangeLifecycleStateButtons();
+                        this.initVersionObject();
+                        this.$scope.isLoading = false;
 
-                        this.$state.go(this.$state.current.name, {
-                            id: component.uniqueId,
-                            type: component.componentType.toLowerCase(),
-                            components: this.components
-                        });
                         this.Notification.success({
                             message: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TEXT"),
                             title: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TITLE")