Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

9 files changed, 199 insertions, 231 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts
index 20e04f84b6..fe3106649b 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.component.ts
@@ -18,97 +18,95 @@
  * ============LICENSE_END=========================================================
  */
 
-import * as _ from "lodash";
-import {Component} from '@angular/core';
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-import { DataTypeService } from "app/ng2/services/data-type.service";
-import {PropertyBEModel, DataTypesMap} from "app/models";
-import {PROPERTY_DATA} from "app/utils";
-import {PROPERTY_TYPES} from "../../../../utils";
-import { ModalService } from "app/ng2/services/modal.service";
-import { InstancePropertiesAPIMap } from "app/models/properties-inputs/property-fe-map";
-import { ModalModel } from "app/models/modal";
-import { DataTypeModel } from "app/models/data-types";
-
-
+import { Component } from '@angular/core';
+import { DataTypesMap, PropertyBEModel } from 'app/models';
+import { DataTypeModel } from 'app/models/data-types';
+import { ModalModel } from 'app/models/modal';
+import { InstancePropertiesAPIMap } from 'app/models/properties-inputs/property-fe-map';
+import { DropdownValue } from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { DataTypeService } from 'app/ng2/services/data-type.service';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { PROPERTY_DATA } from 'app/utils';
+import * as _ from 'lodash';
+import { PROPERTY_TYPES } from '../../../../utils';
 
 @Component({
     selector: 'declare-list',
     templateUrl: './declare-list.component.html',
-    styleUrls:['./declare-list.component.less'],
+    styleUrls: ['./declare-list.component.less'],
 })
 
 export class DeclareListComponent {
 
-    typesProperties: Array<DropdownValue>;
-    typesSchemaProperties: Array<DropdownValue>;
+    typesProperties: DropdownValue[];
+    typesSchemaProperties: DropdownValue[];
     propertyModel: PropertyBEModel;
-    //propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
-    //commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
-    //types:Array<string>;
-    dataTypes:DataTypesMap;
-    isLoading:boolean;
-    inputsToCreate:InstancePropertiesAPIMap;
-    propertiesListString:string;
+    // propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
+    // commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
+    // types:Array<string>;
+    dataTypes: DataTypesMap;
+    isLoading: boolean;
+    inputsToCreate: InstancePropertiesAPIMap;
+    propertiesListString: string;
     privateDataType: DataTypeModel;
 
-    constructor(protected dataTypeService:DataTypeService, private modalService:ModalService) {}
+    constructor(protected dataTypeService: DataTypeService, private modalService: ModalService) {}
 
     ngOnInit() {
         console.log('DeclareListComponent.ngOnInit() - enter');
         this.propertyModel = new PropertyBEModel();
         this.propertyModel.type = '';
         this.propertyModel.schema.property.type = '';
-        const types: Array<string> =  PROPERTY_DATA.TYPES; //All types - simple type + map + list
-        this.dataTypes = this.dataTypeService.getAllDataTypes(); //Get all data types in service
-        const nonPrimitiveTypes :Array<string> = _.filter(Object.keys(this.dataTypes), (type:string)=> {
-            return types.indexOf(type) == -1;
+        const types: string[] =  PROPERTY_DATA.TYPES; // All types - simple type + map + list
+        this.dataTypes = this.dataTypeService.getAllDataTypes(); // Get all data types in service
+        const nonPrimitiveTypes: string[] = _.filter(Object.keys(this.dataTypes), (type: string) => {
+            return types.indexOf(type) === -1;
         });
 
         this.typesProperties = _.map(PROPERTY_DATA.TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
+        const typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
+        const nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
             (type: string) => new DropdownValue(type,
-                    type.replace("org.openecomp.datatypes.heat.",""))
+                    type.replace('org.openecomp.datatypes.heat.',""))
         );
-        this.typesProperties = _.concat(this.typesProperties,nonPrimitiveTypesValues);
-        this.typesSchemaProperties = _.concat(typesSimpleProperties,nonPrimitiveTypesValues);
-        this.typesProperties.unshift(new DropdownValue('','Select Type...'));
-        this.typesSchemaProperties.unshift(new DropdownValue('','Select Schema Type...'));
+        this.typesProperties = _.concat(this.typesProperties, nonPrimitiveTypesValues);
+        this.typesSchemaProperties = _.concat(typesSimpleProperties, nonPrimitiveTypesValues);
+        this.typesProperties.unshift(new DropdownValue('', 'Select Type...'));
+        this.typesSchemaProperties.unshift(new DropdownValue('', 'Select Schema Type...'));
 
         this.inputsToCreate = this.modalService.currentModal.instance.dynamicContent.instance.input.properties;
 
         this.propertiesListString = this.modalService.currentModal.instance.dynamicContent.instance.input.propertyNameList.join(", ");
 
         this.privateDataType = new DataTypeModel(null);
-        this.privateDataType.name = "datatype";
+        this.privateDataType.name = 'datatype';
 
         console.log('DeclareListComponent.ngOnInit() - leave');
     }
 
-    checkFormValidForSubmit(){
-        const showSchema:boolean = this.showSchema();
-        let isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type)? false : true;
-        if (!showSchema){
+    checkFormValidForSubmit() {
+        const showSchema: boolean = this.showSchema();
+        const isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type) ? false : true;
+        if (!showSchema) {
             this.propertyModel.schema.property.type = '';
         }
         return this.propertyModel.name && this.propertyModel.type && isSchemaValid;
     }
 
-    showSchema():boolean {
+    showSchema(): boolean {
         return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.propertyModel.type) > -1;
-    };
+    }
 
-    onSchemaTypeChange():void {
-        if (this.propertyModel.type == PROPERTY_TYPES.MAP) {
+    onSchemaTypeChange(): void {
+        if (this.propertyModel.type === PROPERTY_TYPES.MAP) {
             this.propertyModel.value = JSON.stringify({'': null});
-        } else if (this.propertyModel.type == PROPERTY_TYPES.LIST) {
+        } else if (this.propertyModel.type === PROPERTY_TYPES.LIST) {
             this.propertyModel.value = JSON.stringify([]);
         }
-    };
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts
index 54af76a9f5..97667f9261 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-list/declare-list.module.ts
@@ -18,13 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {DeclareListComponent} from "./declare-list.component";
-import {FormsModule} from "@angular/forms";
-import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from "../../../shared/translator/translate.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { DeclareListComponent } from './declare-list.component';
 
 @NgModule({
     declarations: [
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 c46d617b86..f5500d42ae 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
@@ -19,7 +19,6 @@
  */
 import { NgModule } from "@angular/core";
 import {HierarchyNavigationComponent} from "../../components/logic/hierarchy-navigtion/hierarchy-navigation.component";
-import {HttpModule} from "@angular/http";
 import {FormsModule} from "@angular/forms";
 import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module";
 import {UiElementsModule} from "../../components/ui/ui-elements.module";
@@ -46,12 +45,11 @@ import {ComponentModeService} from "../../services/component-services/component-
     imports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
         GlobalPipesModule,
         PropertyTableModule,
         PoliciesTableModule,
         UiElementsModule],
-    
+
     entryComponents: [PropertiesAssignmentComponent],
     exports: [
         PropertiesAssignmentComponent
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 580c36284b..8d4215aaec 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
@@ -18,7 +18,7 @@
     <div class="main-content">
         <div class="left-column">
             <div class="main-tabs-section">
-                <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
+                <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true" >
                     <tab tabTitle="Properties">
                         <properties-table class="properties-table"
                             [fePropertiesMap]="instanceFePropertiesMap"
@@ -42,12 +42,13 @@
                     </tab>
                     <tab tabTitle="Inputs">
                         <inputs-table class="properties-table"
-                                      [readonly]="isReadonly"
-                                      [inputs]="inputs | searchFilter:'name':searchQuery"
-                                      [instanceNamesMap]="componentInstanceNamesMap"
-                                      [isLoading]="loadingInputs"
-                                      (deleteInput)="deleteInput($event)"
-                                      (inputChanged)="dataChanged($event)">
+                            [fePropertiesMap]="instanceFePropertiesMap"
+                            [readonly]="isReadonly"
+                            [inputs]="inputs | searchFilter:'name':searchQuery"
+                            [instanceNamesMap]="componentInstanceNamesMap"
+                            [isLoading]="loadingInputs"
+                            (deleteInput)="deleteInput($event)"
+                            (inputChanged)="dataChanged($event)">
                         </inputs-table>
                     </tab>
                     <tab tabTitle="Policies">
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 855bdc5bcb..a1309aba61 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
@@ -133,13 +133,12 @@
         flex-direction:column;
         margin: 0px 0 0 1em;
         overflow-x:auto;
-         .add-btn{
+        .add-btn{
 
             align-self: flex-end;
             margin-top: 10px;
             margin-bottom: 19px;
         }
-
         /deep/ .tabs {
             border-bottom: solid 1px #d0d0d0;
         }
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 061439800f..4b84f0e66f 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
@@ -19,58 +19,34 @@
  */
 
 import * as _ from "lodash";
-import {Component, ViewChild, Inject, TemplateRef} from "@angular/core";
+import { Component, ViewChild, Inject, TemplateRef } from "@angular/core";
 import { PropertiesService } from "../../services/properties.service";
-import {
-    PropertyFEModel,
-    InstanceFePropertiesMap,
-    InstanceBePropertiesMap,
-    InstancePropertiesAPIMap,
-    Component as ComponentData,
-    FilterPropertiesAssignmentData,
-    ModalModel,
-    ButtonModel,
-    Capability,
-    ToscaPresentationData
-} from "app/models";
+import { PropertyFEModel, InstanceFePropertiesMap, InstanceBePropertiesMap, InstancePropertiesAPIMap, Component as ComponentData, FilterPropertiesAssignmentData, ModalModel, ButtonModel } from "app/models";
 import { ResourceType } from "app/utils";
-import {ComponentServiceNg2} from "../../services/component-services/component.service";
-import {ComponentInstanceServiceNg2} from "../../services/component-instance-services/component-instance.service"
-import {
-    InputBEModel,
-    InputFEModel,
-    ComponentInstance,
-    GroupInstance,
-    PolicyInstance,
-    PropertyBEModel,
-    DerivedFEProperty,
-    SimpleFlatProperty,
-    CapabilitiesGroup
-} from "app/models";
+import { ComponentServiceNg2 } from "../../services/component-services/component.service";
+import { TopologyTemplateService } from "../../services/component-services/topology-template.service";
+import { ComponentInstanceServiceNg2 } from "../../services/component-instance-services/component-instance.service"
+import { InputBEModel, InputFEModel, ComponentInstance, GroupInstance, PolicyInstance, PropertyBEModel, DerivedFEProperty, SimpleFlatProperty } from "app/models";
 import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
-import {WorkspaceMode, EVENTS} from "../../../utils/constants";
-import {EventListenerService} from "app/services/event-listener-service"
-import {HierarchyDisplayOptions} from "../../components/logic/hierarchy-navigtion/hierarchy-display-options";
-import {FilterPropertiesAssignmentComponent} from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component";
-import {PropertyRowSelectedEvent} from "../../components/logic/properties-table/properties-table.component";
-import {HierarchyNavService} from "./services/hierarchy-nav.service";
-import {PropertiesUtils} from "./services/properties.utils";
-import {ComponentModeService} from "../../services/component-services/component-mode.service";
-import {ModalService} from "../../services/modal.service";
-import {Tabs, Tab} from "../../components/ui/tabs/tabs.component";
-import {InputsUtils} from "./services/inputs.utils";
-import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
-import {DeclareListComponent} from "./declare-list/declare-list.component";
+import { WorkspaceMode, EVENTS, PROPERTY_TYPES } from "../../../utils/constants";
+import { EventListenerService } from "app/services/event-listener-service"
+import { HierarchyDisplayOptions } from "../../components/logic/hierarchy-navigtion/hierarchy-display-options";
+import { FilterPropertiesAssignmentComponent } from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component";
+import { PropertyRowSelectedEvent } from "../../components/logic/properties-table/properties-table.component";
+import { HierarchyNavService } from "./services/hierarchy-nav.service";
+import { PropertiesUtils } from "./services/properties.utils";
+import { ComponentModeService } from "../../services/component-services/component-mode.service";
+import { Tabs, Tab } from "../../components/ui/tabs/tabs.component";
+import { InputsUtils } from "./services/inputs.utils";
 import { InstanceFeDetails } from "../../../models/instance-fe-details";
-import { SdcUiComponents } from "sdc-ui/lib/angular";
-//import { ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service";
-import { IModalButtonComponent } from "sdc-ui/lib/angular/modals/models/modal-config";
+import { SdcUiServices, SdcUiCommon } from "onap-ui-angular";
 import { UnsavedChangesComponent } from "app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component";
-import {Observable} from "rxjs";
-import { DataTypeService } from "app/ng2/services/data-type.service";
-import { DataTypeModel } from "app/models";
-import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
-import { PropertyDeclareAPIModel} from "app/models";
+import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
+import {ModalService} from "../../services/modal.service";
+import { DeclareListComponent } from "./declare-list/declare-list.component";
+import { CapabilitiesGroup, Capability } from "../../../models/capability";
+import { ToscaPresentationData } from "../../../models/tosca-presentation";
+import { Observable } from "rxjs";
 
 const SERVICE_SELF_TITLE = "SELF";
 @Component({
@@ -119,7 +95,7 @@ export class PropertiesAssignmentComponent {
     stateChangeStartUnregister:Function;
     serviceBePropertiesMap: InstanceBePropertiesMap;
     serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
-    selectedInstance_FlattenCapabilitiesList: Array<Capability>;
+    selectedInstance_FlattenCapabilitiesList: Capability[];
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -136,12 +112,13 @@ export class PropertiesAssignmentComponent {
                 @Inject("$state") private $state:ng.ui.IStateService,
                 @Inject("Notification") private Notification:any,
                 private componentModeService:ComponentModeService,
-                private ModalService:ModalService,
                 private EventListenerService:EventListenerService,
-                private ModalServiceSdcUI: SdcUiComponents.ModalService) {
+                private ModalServiceSdcUI: SdcUiServices.ModalService,
+                private ModalService: ModalService,
+                private keysPipe:KeysPipe,
+                private topologyTemplateService: TopologyTemplateService) {
 
         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;
@@ -159,8 +136,8 @@ export class PropertiesAssignmentComponent {
         this.loadingPolicies = true;
         this.loadingInstances = true;
         this.loadingProperties = true;
-        this.componentServiceNg2
-            .getComponentInputsWithProperties(this.component)
+        this.topologyTemplateService
+            .getComponentInputsWithProperties(this.component.componentType, this.component.uniqueId)
             .subscribe(response => {
                 _.forEach(response.inputs, (input: InputBEModel) => {
                     const newInput: InputFEModel = new InputFEModel(input);
@@ -169,7 +146,7 @@ export class PropertiesAssignmentComponent {
                 });
                 this.loadingInputs = false;
 
-            });
+            }, error => {}); //ignore error
         this.componentServiceNg2
             .getComponentResourcePropertiesData(this.component)
             .subscribe(response => {
@@ -177,6 +154,7 @@ export class PropertiesAssignmentComponent {
                 this.instances = [];
                 this.instances.push(...response.componentInstances);
                 this.instances.push(...response.groupInstances);
+                this.instances.push(...response.policies);
 
                 _.forEach(response.policies, (policy: any) => {
                     const newPolicy: InputFEModel = new InputFEModel(policy);
@@ -199,7 +177,7 @@ export class PropertiesAssignmentComponent {
                     this.loadingProperties = false;
                 }
                 this.selectFirstInstanceByDefault();
-            });
+            }, error => { this.loadingInstances = false; }); //ignore error
 
         this.stateChangeStartUnregister = this.$scope.$on('$stateChangeStart', (event, toState, toParams) => {
             // stop if has changed properties
@@ -238,14 +216,14 @@ export class PropertiesAssignmentComponent {
 
     getServiceProperties(){
         this.loadingProperties = false;
-        this.componentServiceNg2
-            .getServiceProperties(this.component)
-            .subscribe(response => {
+        this.topologyTemplateService
+            .getServiceProperties(this.component.uniqueId)
+            .subscribe((response) => {
                 this.serviceBePropertiesMap = new InstanceBePropertiesMap();
                 this.serviceBePropertiesMap[this.component.uniqueId] = response;
                 this.processInstancePropertiesResponse(this.serviceBePropertiesMap, false);
                 this.loadingProperties = false;
-            }, error => {
+            }, (error) => {
                 this.loadingProperties = false;
             });
     }
@@ -267,14 +245,12 @@ export class PropertiesAssignmentComponent {
         this.loadingProperties = true;
         if (instance instanceof ComponentInstance) {
             let instanceBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
-            this.selectedInstance_FlattenCapabilitiesList = instance.capabilities ? CapabilitiesGroup.getFlattenedCapabilities(instance.capabilities) : [];
             if (this.isInput(instance.originType)) {
                 this.componentInstanceServiceNg2
                     .getComponentInstanceInputs(this.component, instance)
                     .subscribe(response => {
                         instanceBePropertiesMap[instance.uniqueId] = response;
                         this.processInstancePropertiesResponse(instanceBePropertiesMap, true);
-                        this.processInstanceCapabilitiesPropertiesResponse(false);
                         this.loadingProperties = false;
                     }, error => {
                     }); //ignore error
@@ -286,7 +262,6 @@ export class PropertiesAssignmentComponent {
                     .subscribe(response => {
                         instanceBePropertiesMap[instance.uniqueId] = response;
                         this.processInstancePropertiesResponse(instanceBePropertiesMap, false);
-                        this.processInstanceCapabilitiesPropertiesResponse(false);
                         this.loadingProperties = false;
                     }, error => {
                     }); //ignore error
@@ -305,7 +280,7 @@ export class PropertiesAssignmentComponent {
         } else if (instance instanceof PolicyInstance) {
             let instanceBePropertiesMap: InstanceBePropertiesMap = new InstanceBePropertiesMap();
             this.componentInstanceServiceNg2
-                .getComponentPolicyInstanceProperties(this.component, this.selectedInstanceData.uniqueId)
+                .getComponentPolicyInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId)
                 .subscribe((response) => {
                     instanceBePropertiesMap[instance.uniqueId] = response;
                     this.processInstancePropertiesResponse(instanceBePropertiesMap, false);
@@ -480,7 +455,7 @@ export class PropertiesAssignmentComponent {
         let selectedGroupInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let selectedPolicyInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let selectedComponentInstancesInputs: InstanceBePropertiesMap = new InstanceBePropertiesMap();
-        let instancesIds = new KeysPipe().transform(this.instanceFePropertiesMap, []);
+        let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
 
         angular.forEach(instancesIds, (instanceId: string): void => {
             let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId);
@@ -500,7 +475,7 @@ export class PropertiesAssignmentComponent {
 
         let inputsToCreate: InstancePropertiesAPIMap = new InstancePropertiesAPIMap(selectedComponentInstancesInputs, selectedComponentInstancesProperties, selectedGroupInstancesProperties, selectedPolicyInstancesProperties);
 
-        //move changed capabilities properties from componentInstanceInputsMap obj to componentInstanceProperties
+	//move changed capabilities properties from componentInstanceInputsMap obj to componentInstanceProperties
         inputsToCreate.componentInstanceProperties[this.selectedInstanceData.uniqueId] =
             (inputsToCreate.componentInstanceProperties[this.selectedInstanceData.uniqueId] || []).concat(
                 _.filter(
@@ -526,15 +501,14 @@ export class PropertiesAssignmentComponent {
                 }
             }
         );
-
-        this.componentServiceNg2
+        this.topologyTemplateService
             .createInput(this.component, inputsToCreate, this.isSelf())
-            .subscribe(response => {
+            .subscribe((response) => {
                 this.setInputTabIndication(response.length);
                 this.checkedPropertiesCount = 0;
                 this.checkedChildPropertiesCount = 0;
                 _.forEach(response, (input: InputBEModel) => {
-                    let newInput: InputFEModel = new InputFEModel(input);
+                    const newInput: InputFEModel = new InputFEModel(input);
                     this.inputsUtils.resetInputDefaultValue(newInput, input.defaultValue);
                     this.inputs.push(newInput);
                     this.updatePropertyValueAfterDeclare(newInput);
@@ -628,8 +602,8 @@ export class PropertiesAssignmentComponent {
                         };
                         console.log("save button clicked. input=", input);
 
-                        this.componentServiceNg2
-                        .createListInput(this.component, input, this.isSelf())
+                        this.topologyTemplateService
+                        .createListInput(this.component.uniqueId, input, this.isSelf())
                         .subscribe(response => {
                             this.setInputTabIndication(response.length);
                             this.checkedPropertiesCount = 0;
@@ -662,8 +636,8 @@ export class PropertiesAssignmentComponent {
         console.log('declareListProperties() - leave');
     };
 
-    /*** DECLARE PROPERTIES/POLICIES ***/
-    declarePropertiesToPolicies = (): void => {
+     /*** DECLARE PROPERTIES/POLICIES ***/
+     declarePropertiesToPolicies = (): void => {
         let selectedComponentInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
         let instancesIds = new KeysPipe().transform(this.instanceFePropertiesMap, []);
 
@@ -679,7 +653,7 @@ export class PropertiesAssignmentComponent {
         let policiesToCreate: InstancePropertiesAPIMap = new InstancePropertiesAPIMap(null, selectedComponentInstancesProperties, null, null);
         this.loadingPolicies = true;
 
-        this.componentServiceNg2
+        this.topologyTemplateService
             .createPolicy(this.component, policiesToCreate, this.isSelf())
             .subscribe(response => {
                 this.setPolicyTabIndication(response.length);
@@ -688,7 +662,7 @@ export class PropertiesAssignmentComponent {
                 this.loadingPolicies = false;
             }); //ignore error
 
-    };
+    }
 
     displayPoliciesAsDeclared = (policies) => {
         _.forEach(policies, (policy: any) => {
@@ -699,8 +673,7 @@ export class PropertiesAssignmentComponent {
             this.updatePropertyValueAfterDeclare(newPolicy);
             this.policies.push(policy);
         });
-    };
-
+    }
 
     saveChangedData = ():Promise<(PropertyBEModel|InputBEModel)[]> => {
         return new Promise((resolve, reject) => {
@@ -736,7 +709,8 @@ export class PropertiesAssignmentComponent {
                         if (changedInputsProperties.length && changedCapabilitiesProperties.length) {
                             request = Observable.forkJoin(
                                 this.componentInstanceServiceNg2.updateInstanceInputs(this.component, this.selectedInstanceData.uniqueId, changedInputsProperties),
-                                this.componentInstanceServiceNg2.updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties)
+                                this.componentInstanceServiceNg2.updateInstanceProperties(this.component.componentType, this.component.uniqueId,
+                                    this.selectedInstanceData.uniqueId, changedCapabilitiesProperties)
                             );
                         }
                         else if (changedInputsProperties.length) {
@@ -745,7 +719,7 @@ export class PropertiesAssignmentComponent {
                         }
                         else if (changedCapabilitiesProperties.length) {
                             request = this.componentInstanceServiceNg2
-                                .updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties);
+                                .updateInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedCapabilitiesProperties);
                         }
                         handleSuccess = (response) => {
                             // reset each changed property with new value and remove it from changed properties list
@@ -757,19 +731,18 @@ export class PropertiesAssignmentComponent {
                         };
                     } else {
                         if (this.isSelf()) {
-                            request = this.componentServiceNg2.updateServiceProperties(this.component, _.map(changedProperties, cp => {
+                            request = this.topologyTemplateService.updateServiceProperties(this.component.uniqueId,  _.map(changedProperties, cp => {
                                 delete cp.constraints;
                                 return cp;
                             }));
                         } else {
                             request = this.componentInstanceServiceNg2
-                                .updateInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                                .updateInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedProperties);
                         }
                         handleSuccess = (response) => {
                             // reset each changed property with new value and remove it from changed properties list
                             response.forEach((resProp) => {
-                                const changedProp = <PropertyFEModel>_.find(this.changedData, changedDataObject => changedDataObject.uniqueId === resProp.uniqueId);
-                                this.changedData = _.filter(this.changedData, changedDataObject => changedDataObject.uniqueId !== resProp.uniqueId);
+                                const changedProp = <PropertyFEModel>this.changedData.shift();
                                 this.propertiesUtils.resetPropertyValue(changedProp, resProp.value);
                             });
                             resolve(response);
@@ -778,7 +751,7 @@ export class PropertiesAssignmentComponent {
                     }
                 } else if (this.selectedInstanceData instanceof GroupInstance) {
                     request = this.componentInstanceServiceNg2
-                        .updateComponentGroupInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                        .updateComponentGroupInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedProperties);
                     handleSuccess = (response) => {
                         // reset each changed property with new value and remove it from changed properties list
                         response.forEach((resProp) => {
@@ -790,7 +763,7 @@ export class PropertiesAssignmentComponent {
                     };
                 } else if (this.selectedInstanceData instanceof PolicyInstance) {
                     request = this.componentInstanceServiceNg2
-                        .updateComponentPolicyInstanceProperties(this.component, this.selectedInstanceData.uniqueId, changedProperties);
+                        .updateComponentPolicyInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, changedProperties);
                     handleSuccess = (response) => {
                         // reset each changed property with new value and remove it from changed properties list
                         response.forEach((resProp) => {
@@ -802,6 +775,7 @@ export class PropertiesAssignmentComponent {
                     };
                 }
             } else if (this.isInputsTabSelected) {
+            
                 const changedInputs: InputBEModel[] = this.changedData.map((changedInput) => {
                     changedInput = <InputFEModel>changedInput;
                     const inputBE = new InputBEModel(changedInput);
@@ -925,27 +899,27 @@ export class PropertiesAssignmentComponent {
                 {
                     title: modalTitle,
                     size: 'sm',
-                    type: 'custom',
-                    testId: "id",
-                    
+                    type: SdcUiCommon.ModalType.custom,
+                    testId: "navigate-modal",
+
                     buttons: [
-                        {id: 'cancelButton', text: 'Cancel', type: 'secondary', size: 'xsm', closeModal: true, callback: () => reject()},
-                        {id: 'discardButton', text: 'Discard', type: 'secondary', size: 'xsm', closeModal: true, callback: () => { this.reverseChangedData(); resolve()}},
-                        {id: 'saveButton', text: 'Save', type: 'primary', size: 'xsm', closeModal: true, disabled: !this.isValidChangedData, callback: () => this.doSaveChangedData(resolve, reject)}
-                ] as IModalButtonComponent[]
-            }, UnsavedChangesComponent, {isValidChangedData: this.isValidChangedData});
+                        {id: 'cancelButton', text: 'Cancel', type: SdcUiCommon.ButtonType.secondary, size: 'xsm', closeModal: true, callback: () => reject()},
+                        {id: 'discardButton', text: 'Discard', type: SdcUiCommon.ButtonType.secondary, size: 'xsm', closeModal: true, callback: () => { this.reverseChangedData(); resolve()}},
+                        {id: 'saveButton', text: 'Save', type: SdcUiCommon.ButtonType.primary, size: 'xsm', closeModal: true, disabled: !this.isValidChangedData, callback: () => this.doSaveChangedData(resolve, reject)}
+                ] as SdcUiCommon.IModalButtonComponent[]
+            } as SdcUiCommon.IModalConfig, UnsavedChangesComponent, {isValidChangedData: this.isValidChangedData});
         });
 
     }
 
     updatePropertyValueAfterDeclare = (input: InputFEModel) => {
         if (this.instanceFePropertiesMap[input.instanceUniqueId]) {
-            let instanceName = input.instanceUniqueId.slice(input.instanceUniqueId.lastIndexOf('.') + 1);
-            let propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[input.instanceUniqueId], (feProperty: PropertyFEModel) => {
-                return feProperty.uniqueId === input.propertyId &&
+            const instanceName = input.instanceUniqueId.slice(input.instanceUniqueId.lastIndexOf('.') + 1);
+            const propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[input.instanceUniqueId], (feProperty: PropertyFEModel) => {
+                return feProperty.name == input.relatedPropertyName &&
                     (feProperty.name == input.relatedPropertyName || input.name === instanceName.concat('_').concat(feProperty.name.replace(/[.]/g, '_')));
             });
-            let inputPath = (input.inputPath && input.inputPath != propertyForUpdatindVal.name) ? input.inputPath : undefined;
+            const inputPath = (input.inputPath && input.inputPath != propertyForUpdatindVal.name) ? input.inputPath : undefined;
             propertyForUpdatindVal.setAsDeclared(inputPath); //set prop as declared before assigning value
             this.propertiesService.disableRelatedProperties(propertyForUpdatindVal, inputPath);
             this.propertiesUtils.resetPropertyValue(propertyForUpdatindVal, input.relatedPropertyValue, inputPath);
@@ -968,7 +942,7 @@ export class PropertiesAssignmentComponent {
 
     setPolicyTabIndication = (numPolicies: number): void => {
         this.propertyInputTabs.setTabIndication('Policies', numPolicies);
-    };
+    }
 
     resetUnsavedChangesForInput = (input:InputFEModel) => {
         this.inputsUtils.resetInputDefaultValue(input, input.defaultValue);
@@ -1009,9 +983,9 @@ export class PropertiesAssignmentComponent {
 
     deletePolicy = (policy: PolicyInstance) => {
         this.loadingPolicies = true;
-        this.componentServiceNg2
+        this.topologyTemplateService
             .deletePolicy(this.component, policy)
-            .subscribe(response => {
+            .subscribe((response) => {
                 this.policies = this.policies.filter(policy => policy.uniqueId !== response.uniqueId);
                 //Reload the whole instance for now - TODO: CHANGE THIS after the BE starts returning properties within the response, use commented code below instead!
                 this.changeSelectedInstance(this.selectedInstanceData);
@@ -1020,25 +994,25 @@ export class PropertiesAssignmentComponent {
     };
 
     deleteProperty = (property: PropertyFEModel) => {
-        let propertyToDelete = new PropertyFEModel(property);
+        const propertyToDelete = new PropertyFEModel(property);
         this.loadingProperties = true;
-        let feMap = this.instanceFePropertiesMap;
-        this.componentServiceNg2
-            .deleteServiceProperty(this.component, propertyToDelete)
-            .subscribe(response => {
+        const feMap = this.instanceFePropertiesMap;
+        this.topologyTemplateService
+            .deleteServiceProperty(this.component.uniqueId, propertyToDelete)
+            .subscribe((response) => {
                 const props = feMap[this.component.uniqueId];
                 props.splice(props.findIndex(p => p.uniqueId === response),1);
                 this.loadingProperties = false;
-            }, error => {
+            }, (error) => {
                 this.loadingProperties = false;
                 console.error(error);
             });
-    };
+    }
 
     /*** addProperty ***/
     addProperty = () => {
         let modalTitle = 'Add Property';
-        const modal = this.ModalService.createCustomModal(new ModalModel(
+        let modal = this.ModalService.createCustomModal(new ModalModel(
             'sm',
             modalTitle,
             null,
@@ -1046,10 +1020,10 @@ export class PropertiesAssignmentComponent {
                 new ButtonModel('Save', 'blue', () => {
                     modal.instance.dynamicContent.instance.isLoading = true;
                     const newProperty: PropertyBEModel = modal.instance.dynamicContent.instance.propertyModel;
-                    this.componentServiceNg2.createServiceProperty(this.component, newProperty)
-                        .subscribe(response => {
+                    this.topologyTemplateService.createServiceProperty(this.component.uniqueId, newProperty)
+                        .subscribe((response) => {
                             modal.instance.dynamicContent.instance.isLoading = false;
-                            let newProp: PropertyFEModel = this.propertiesUtils.convertAddPropertyBAToPropertyFE(response);
+                            const newProp: PropertyFEModel = this.propertiesUtils.convertAddPropertyBAToPropertyFE(response);
                             this.instanceFePropertiesMap[this.component.uniqueId].push(newProp);
                             modal.instance.close();
                         }, (error) => {
@@ -1059,7 +1033,6 @@ export class PropertiesAssignmentComponent {
                                 title: 'Failure'
                             });
                         });
-
                 }, () => !modal.instance.dynamicContent.instance.checkFormValidForSubmit()),
                 new ButtonModel('Cancel', 'outline grey', () => {
                     modal.instance.close();
@@ -1069,24 +1042,23 @@ export class PropertiesAssignmentComponent {
         ));
         this.ModalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
         modal.instance.open();
-    };
+    }
 
     /*** SEARCH RELATED FUNCTIONS ***/
     searchPropertiesInstances = (filterData:FilterPropertiesAssignmentData) => {
         let instanceBePropertiesMap:InstanceBePropertiesMap;
         this.componentServiceNg2
             .filterComponentInstanceProperties(this.component, filterData)
-            .subscribe(response => {
-
+            .subscribe((response) => {
                 this.processInstancePropertiesResponse(response, false);
                 this.hierarchyPropertiesDisplayOptions.searchText = filterData.propertyName;//mark results in tree
                 this.searchPropertyName = filterData.propertyName;//mark in table
                 this.hierarchyNavTabs.triggerTabChange('Composition');
                 this.propertiesNavigationData = [];
                 this.displayClearSearch = true;
-            }, error => {}); //ignore error
+            }, (error) => {}); //ignore error
 
-    };
+    }
 
     clearSearch = () => {
         this.instancesNavigationData = this.instances;
@@ -1106,5 +1078,6 @@ export class PropertiesAssignmentComponent {
     private isInput = (instanceType:string):boolean =>{
         return instanceType === ResourceType.VF || instanceType === ResourceType.PNF || instanceType === ResourceType.CVFC || instanceType === ResourceType.CR;
     }
+    
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
index 7d76904539..5053d52cc8 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
@@ -1,79 +1,78 @@
-import * as _ from "lodash";
-import {Component} from '@angular/core';
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-import { DataTypeService } from "app/ng2/services/data-type.service";
-import {PropertyBEModel, DataTypesMap} from "app/models";
-import {PROPERTY_DATA} from "app/utils";
-import {PROPERTY_TYPES} from "../../../../utils";
-
 
+import { Component } from '@angular/core';
+import { DataTypesMap, PropertyBEModel } from 'app/models';
+import { DropdownValue } from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { DataTypeService } from 'app/ng2/services/data-type.service';
+import { PROPERTY_DATA } from 'app/utils';
+import * as _ from 'lodash';
+import { PROPERTY_TYPES } from '../../../../utils';
 
 @Component({
     selector: 'property-creator',
     templateUrl: './property-creator.component.html',
-    styleUrls:['./property-creator.component.less'],
+    styleUrls: ['./property-creator.component.less'],
 })
 
 export class PropertyCreatorComponent {
 
-    typesProperties: Array<DropdownValue>;
-    typesSchemaProperties: Array<DropdownValue>;
+    typesProperties: DropdownValue[];
+    typesSchemaProperties: DropdownValue[];
     propertyModel: PropertyBEModel;
-    //propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
-    //commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
-    //types:Array<string>;
-    dataTypes:DataTypesMap;
-    isLoading:boolean;
+    // propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
+    // commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
+    // types:Array<string>;
+    dataTypes: DataTypesMap;
+    isLoading: boolean;
 
-    constructor(protected dataTypeService:DataTypeService) {}
+    constructor(protected dataTypeService: DataTypeService) {}
 
     ngOnInit() {
         this.propertyModel = new PropertyBEModel();
         this.propertyModel.type = '';
         this.propertyModel.schema.property.type = '';
-        const types: Array<string> =  PROPERTY_DATA.TYPES; //All types - simple type + map + list
-        this.dataTypes = this.dataTypeService.getAllDataTypes(); //Get all data types in service
-        const nonPrimitiveTypes :Array<string> = _.filter(Object.keys(this.dataTypes), (type:string)=> {
-            return types.indexOf(type) == -1;
+        const types: string[] =  PROPERTY_DATA.TYPES; // All types - simple type + map + list
+        this.dataTypes = this.dataTypeService.getAllDataTypes(); // Get all data types in service
+        const nonPrimitiveTypes: string[] = _.filter(Object.keys(this.dataTypes), (type: string) => {
+            return types.indexOf(type) === -1;
         });
 
         this.typesProperties = _.map(PROPERTY_DATA.TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
+        const typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
             (type: string) => new DropdownValue(type, type)
         );
-        let nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
+        const nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
             (type: string) => new DropdownValue(type,
-                    type.replace("org.openecomp.datatypes.heat.",""))
+                    type.replace('org.openecomp.datatypes.heat.', ''))
         )
         .sort((a, b) => a.label.localeCompare(b.label));
-        this.typesProperties = _.concat(this.typesProperties,nonPrimitiveTypesValues);
-        this.typesSchemaProperties = _.concat(typesSimpleProperties,nonPrimitiveTypesValues);
-        this.typesProperties.unshift(new DropdownValue('','Select Type...'));
-        this.typesSchemaProperties.unshift(new DropdownValue('','Select Schema Type...'));
+        this.typesProperties = _.concat(this.typesProperties, nonPrimitiveTypesValues);
+        this.typesSchemaProperties = _.concat(typesSimpleProperties, nonPrimitiveTypesValues);
+        this.typesProperties.unshift(new DropdownValue('', 'Select Type...'));
+        this.typesSchemaProperties.unshift(new DropdownValue('', 'Select Schema Type...'));
 
     }
 
-    checkFormValidForSubmit(){
-        const showSchema:boolean = this.showSchema();
-        let isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type)? false : true;
-        if (!showSchema){
+    checkFormValidForSubmit() {
+        const showSchema: boolean = this.showSchema();
+        const isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type) ? false : true;
+        if (!showSchema) {
             this.propertyModel.schema.property.type = '';
         }
         return this.propertyModel.name && this.propertyModel.type && isSchemaValid;
     }
 
-    showSchema():boolean {
+    showSchema(): boolean {
         return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.propertyModel.type) > -1;
-    };
+    }
 
-    onSchemaTypeChange():void {
-        if (this.propertyModel.type == PROPERTY_TYPES.MAP) {
+    onSchemaTypeChange(): void {
+        if (this.propertyModel.type === PROPERTY_TYPES.MAP) {
             this.propertyModel.value = JSON.stringify({'': null});
-        } else if (this.propertyModel.type == PROPERTY_TYPES.LIST) {
+        } else if (this.propertyModel.type === PROPERTY_TYPES.LIST) {
             this.propertyModel.value = JSON.stringify([]);
         }
-    };
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
index 92accb26b5..1cbb4e17ec 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
@@ -1,10 +1,10 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {PropertyCreatorComponent} from "./property-creator.component";
-import {FormsModule} from "@angular/forms";
-import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from "../../../shared/translator/translate.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { PropertyCreatorComponent } from './property-creator.component';
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
index 011be41611..bd7ccd1bfd 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
@@ -48,7 +48,7 @@ export class PropertiesUtils {
 
                     let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
 
-                    this.initValueObjectRef(newFEProp); //initialize valueObj.
+                    this.initValueObjectRef(newFEProp); //initialize valueObj AND creates flattened children
                     propertyFeArray.push(newFEProp);
                     newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
                     this.dataTypeService.checkForCustomBehavior(newFEProp);
@@ -79,8 +79,8 @@ export class PropertiesUtils {
         return instanceFePropertiesMap;
     }
 
-    public convertAddPropertyBAToPropertyFE = (property: PropertyBEModel):PropertyFEModel => {
-        let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
+    public convertAddPropertyBAToPropertyFE = (property: PropertyBEModel): PropertyFEModel => {
+        const newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
         this.initValueObjectRef(newFEProp);
         newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
         this.dataTypeService.checkForCustomBehavior(newFEProp);
@@ -108,7 +108,7 @@ export class PropertiesUtils {
         let tempProps: Array<DerivedFEProperty> = [];
         let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(type);
         this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, parentName);
-        return tempProps;
+        return _.sortBy(tempProps, ['propertiesName']);
     }
 
     /* Sets the valueObj of parent property and its children.