[SDC] rebase 1710 code

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

88 files changed, 986 insertions, 1389 deletions

diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts
index 50b99e8ab9..707d7e456e 100644
--- a/catalog-ui/src/app/app.ts
+++ b/catalog-ui/src/app/app.ts
@@ -245,17 +245,6 @@ ng1appModule.config([
                 data: {unsavedChanges: false, bodyClass: 'general'}
             }
         );
-        //
-        $stateProvider.state(
-            States.WORKSPACE_ICONS, {
-                url: 'icons',
-                parent: 'workspace',
-                controller: viewModelsModuleName + '.IconsViewModel',
-                templateUrl: './view-models/workspace/tabs/icons/icons-view.html',
-                data: {unsavedChanges: false, bodyClass: 'icons'}
-
-            }
-        );
 
         $stateProvider.state(
             States.WORKSPACE_ACTIVITY_LOG, {
@@ -280,17 +269,6 @@ ng1appModule.config([
         );
 
         $stateProvider.state(
-            States.WORKSPACE_HIERARCHY, {
-                url: 'hierarchy',
-                parent: 'workspace',
-                controller: viewModelsModuleName + '.ProductHierarchyViewModel',
-                templateUrl: './view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html',
-                data: {unsavedChanges: false}
-
-            }
-        );
-
-        $stateProvider.state(
             States.WORKSPACE_INFORMATION_ARTIFACTS, {
                 url: 'information_artifacts',
                 parent: 'workspace',
@@ -602,7 +580,7 @@ ng1appModule.value('ValidationPattern', /^[\s\w\&_.:-]{1,1024}$/);
 ng1appModule.value('ComponentNameValidationPattern', /^(?=.*[^. ])[\s\w\&_.:-]{1,1024}$/); //DE250513 - same as ValidationPattern above, plus requirement that name not consist of dots and/or spaces alone.
 ng1appModule.value('PropertyNameValidationPattern', /^[a-zA-Z0-9_:-]{1,50}$/);// DE210977
 ng1appModule.value('TagValidationPattern', /^[\s\w_.-]{1,50}$/);
-ng1appModule.value('VendorValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,25}$/);
+ng1appModule.value('VendorReleaseValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,25}$/);
 ng1appModule.value('VendorNameValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,60}$/);
 ng1appModule.value('VendorModelNumberValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,65}$/);
 ng1appModule.value('ContactIdValidationPattern', /^[\s\w-]{1,50}$/);
@@ -696,7 +674,6 @@ ng1appModule.run([
             categoryResourceService.getAllCategories((categories: Categories):void => {
                 cacheService.set('serviceCategories', categories.serviceCategories);
                 cacheService.set('resourceCategories', categories.resourceCategories);
-                cacheService.set('productCategories', categories.productCategories);
             }, onError);
         };
 
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
index 0a13ebd799..0dcc93dfa7 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -44,7 +44,8 @@ export class ComponentInstanceNodesStyle {
             {
                 selector: 'node',
                 css: {
-                    'font-family': 'omnes-regular,sans-serif',
+                    'font-family': 'OpenSans-Regular,sans-serif',
+
                     'font-size': 14,
                     'events': 'yes',
                     'text-events': 'yes',
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
index f1c3405cfa..f46dc6c939 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -17,21 +17,14 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
-import {
-    Component,
-    IAppMenu,
-    LeftPanelModel,
-    NodesFactory,
-    LeftPaletteComponent,
-    CompositionCiNodeBase,
-    ComponentInstance
-} from "app/models";
+import {Component, IAppMenu, LeftPanelModel, NodesFactory, LeftPaletteComponent, CompositionCiNodeBase, ComponentInstance} from "app/models";
 import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils";
 import {EventListenerService} from "app/services";
 import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils";
 import 'sdc-angular-dragdrop';
 import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service";
+import {Resource} from "app/models/components/resource";
+import {ComponentType} from "app/utils/constants";
 
 interface IPaletteScope {
     components:Array<LeftPaletteComponent>;
@@ -92,7 +85,7 @@ export class Palette implements ng.IDirective {
         el.append(this.nodeHtmlSubstitute);
         this.registerEventListenerForLeftPalette(scope);
         // this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent.componentType);
-                   
+
         this.initComponents(scope);
         this.initEvents(scope);
         this.initDragEvents(scope);
@@ -103,34 +96,31 @@ export class Palette implements ng.IDirective {
         });
     };
 
-    private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => {
-        if (scope.currentComponent.isResource()) {
-            this.EventListenerService.registerObserverCallback(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT, () => {
-                this.updateLeftPanelDisplay(scope);
-            });
-        }
-        if (scope.currentComponent.isService()) {
-            this.EventListenerService.registerObserverCallback(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT, () => {
-                this.updateLeftPanelDisplay(scope);
-            });
-        }
-        if (scope.currentComponent.isProduct()) {
-            this.EventListenerService.registerObserverCallback(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT, () => {
-                this.updateLeftPanelDisplay(scope);
-            });
+    private getUpdateLeftPaletteEventName = (component:Component):string => {
+        switch (component.componentType) {
+            case ComponentType.SERVICE:
+                return EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT;
+            case ComponentType.RESOURCE:
+                if((<Resource>component).resourceType == ResourceType.PNF){
+                    return EVENTS.RESOURCE_PNF_LEFT_PALETTE_UPDATE_EVENT;
+                }else{
+                    return EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT;
+                }
+            default:
+                console.log('ERROR: Component type '+ component.componentType + ' is not exists');
         }
     };
 
+    private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => {
+        let updateEventName:string = this.getUpdateLeftPaletteEventName(scope.currentComponent);
+        this.EventListenerService.registerObserverCallback(updateEventName, () => {
+            this.updateLeftPanelDisplay(scope);
+        });
+    };
+
     private unRegisterEventListenerForLeftPalette = (scope:IPaletteScope):void => {
-        if (scope.currentComponent.isResource()) {
-            this.EventListenerService.unRegisterObserver(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT);
-        }
-        if (scope.currentComponent.isService()) {
-            this.EventListenerService.unRegisterObserver(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT);
-        }
-        if (scope.currentComponent.isProduct()) {
-            this.EventListenerService.unRegisterObserver(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT);
-        }
+        let updateEventName:string = this.getUpdateLeftPaletteEventName(scope.currentComponent);
+        this.EventListenerService.unRegisterObserver(updateEventName);
     };
 
     private leftPanelResourceFilter(resourcesNotAbstract:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):Array<LeftPaletteComponent> {
@@ -236,7 +226,7 @@ export class Palette implements ng.IDirective {
     private updateLeftPanelDisplay(scope:IPaletteScope) {
         let entityType:string = scope.currentComponent.componentType.toLowerCase();
         let resourceFilterTypes:Array<string> = this.sdcConfig.resourceTypesFilter[entityType];
-        scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType);
+        scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
         scope.model = this.initLeftPanel(scope.components, resourceFilterTypes);
         scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
     };
@@ -267,7 +257,7 @@ export class Palette implements ng.IDirective {
                 return;
             }
 
-            let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType), (componentFullData:LeftPaletteComponent) => {
+            let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), (componentFullData:LeftPaletteComponent) => {
                 return displayComponent.uniqueId === componentFullData.uniqueId;
             });
             this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component);
@@ -287,7 +277,7 @@ export class Palette implements ng.IDirective {
             this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event);
         };
         scope.setElementTemplate = (e) => {
-            let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType),
+            let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent),
                 (fullComponent:LeftPaletteComponent) => {
                     return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId;
                 });
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index 3a4720676c..ec9aaf1f7f 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -56,7 +56,7 @@
         </div>
         <div data-ng-if="isSchemaTypeDataType" class="i-sdc-form-item map-item-field">
             <label class="i-sdc-form-label">Value</label>
-            <fields-structure value-obj-ref="valueObjRef[mapKeys[$index]]"
+            <fields-structure value-obj-ref="valueObjRef[mapKeysStatic[$index]]"
                               type-name="schemaProperty.type"
                               parent-form-obj="parentFormObj"
                               fields-prefix-name="'mapValue'+fieldsPrefixName+''+$index"
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 a2274654c8..5718cdd9b5 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
@@ -33,6 +33,7 @@ export interface ITypeMapScope extends ng.IScope {
     isSchemaTypeDataType:boolean;
     valueObjRef:any;
     mapKeys:Array<string>;//array of map keys
+    mapKeysStatic:Array<string>;
     MapKeyValidationPattern:RegExp;
     fieldsPrefixName:string;
     readOnly:boolean;
@@ -82,6 +83,8 @@ export class TypeMapDirective implements ng.IDirective {
             scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
             if (scope.valueObjRef) {
                 scope.mapKeys = Object.keys(scope.valueObjRef);
+                //keeping another copy of the keys, as the mapKeys gets overridden sometimes
+                scope.mapKeysStatic = Object.keys(scope.valueObjRef);
             }
         });
 
@@ -91,6 +94,8 @@ export class TypeMapDirective implements ng.IDirective {
                 scope.valueObjRef = {};
             }
             scope.mapKeys = Object.keys(scope.valueObjRef);
+            //keeping another copy of the keys, as the mapKeys gets overridden sometimes
+            scope.mapKeysStatic = Object.keys(scope.valueObjRef);
 
             if ($attr.defaultValue) {
                 scope.mapDefaultValue = JSON.parse($attr.defaultValue);
diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
index 7d8a883b33..706dbefb80 100644
--- a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
+++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
@@ -6,7 +6,7 @@
     <ul>
         <li  data-ng-repeat="firstLevelResourcesInstances in structureTree.serviceRoot.resourceInstancesList">
             <div class="component-container">
-                <div class="small {{firstLevelResourcesInstances.icon}}" ng-class="{'sprite-resource-icons': !component.isProduct(), 'sprite-services-icons': component.isProduct()}">
+                <div class="small sprite-resource-icons {{firstLevelResourcesInstances.icon}}">
                     <div data-ng-class="{'non-certified':!firstLevelResourcesInstances.certified}"
                          tooltips tooltip-side="top" tooltip-content="Not certified">
                     </div>
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
index 942196e663..af24776cd3 100644
--- a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
@@ -1,10 +1,10 @@
 .tags-box {
 
-    height: 297px;
+    height: 100px;
     .bg_c;
 
     .perfect-scrollbar {
-        height: 265px;
+        height: 70px;
     }
 
     .new-tag-input {
diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts
index c7b7577268..f3eb5d5fa6 100644
--- a/catalog-ui/src/app/models.ts
+++ b/catalog-ui/src/app/models.ts
@@ -35,11 +35,9 @@ export * from './models/category';
 export * from './models/comments';
 export * from './models/components/component';
 export * from './models/components/displayComponent';
-export * from './models/components/product';
 export * from './models/components/resource';
 export * from './models/components/service';
 export * from './models/componentsInstances/componentInstance';
-export * from './models/componentsInstances/productInstance';
 export * from './models/componentsInstances/resourceInstance';
 export * from './models/componentsInstances/serviceInstance';
 export * from './models/csar-component';
@@ -102,7 +100,7 @@ export * from './models/tooltip-data';
 export * from './models/user';
 export * from './models/validate';
 export * from './models/component-metadata';
-
+export * from './models/modal';
 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/app-config.ts b/catalog-ui/src/app/models/app-config.ts
index ef6c195731..40eb18b8b4 100644
--- a/catalog-ui/src/app/models/app-config.ts
+++ b/catalog-ui/src/app/models/app-config.ts
@@ -54,10 +54,7 @@ export interface IApi {
     GET_activity_log:string;
     GET_configuration_ui:string;
     GET_service:string;
-    PUT_product:string;
-    GET_product:string;
     GET_ecomp_menu_items:string;
-    GET_product_validate_name:string;
     GET_service_validate_name:string;
     GET_service_distributions:string;
     GET_service_distributions_components:string;
@@ -85,13 +82,6 @@ export interface IApi {
     GET_onboarding:string;
     GET_component_from_csar_uuid:string;
     kibana:string;
-
-    //Added by Ikram -- starts
-    GET_product_category:string;
-    GET_product_category_temp:string;
-    GET_product_sub_category:string;
-    //Added by Ikram -- ends
-
 }
 
 export interface ILogConfig {
@@ -132,8 +122,6 @@ export interface IConfigRoles {
     TESTER:IConfigRole;
     OPS:IConfigRole;
     GOVERNOR:IConfigRole;
-    PRODUCT_MANAGER:IConfigRole;
-    PRODUCT_STRATEGIST:IConfigRole;
 }
 
 export interface IConfigRole {
diff --git a/catalog-ui/src/app/models/categories.ts b/catalog-ui/src/app/models/categories.ts
index b46c3a6612..0921ca158b 100644
--- a/catalog-ui/src/app/models/categories.ts
+++ b/catalog-ui/src/app/models/categories.ts
@@ -25,6 +25,5 @@ import {IMainCategory} from "./category";
 export class Categories {
 
     resourceCategories:Array<IMainCategory>;
-    productCategories:Array<IMainCategory>;
     serviceCategories:Array<IMainCategory>;
 }
diff --git a/catalog-ui/src/app/models/component-metadata.ts b/catalog-ui/src/app/models/component-metadata.ts
index 2501f0bab5..8c6ed5593d 100644
--- a/catalog-ui/src/app/models/component-metadata.ts
+++ b/catalog-ui/src/app/models/component-metadata.ts
@@ -56,12 +56,15 @@ export class ComponentMetadata {
     public vendorName:string;
     public vendorRelease:string;
     public derivedFrom: Array<string>;
+    public resourceVendorModelNumber:string;
 
     //Service only
     public projectCode:string;
     public distributionStatus:string;
     public ecompGeneratedNaming: boolean;
     public namingPolicy: string;
+    public serviceType:string;
+    public serviceRole:string;
 
 
     //backend lifecycleState
@@ -103,6 +106,9 @@ export class ComponentMetadata {
         this.ecompGeneratedNaming = response.ecompGeneratedNaming;
         this.namingPolicy = response.namingPolicy;
         this.derivedFrom = response.derivedFrom;
+        this.resourceVendorModelNumber = response.resourceVendorModelNumber;
+        this.serviceType = response.serviceType;
+        this.serviceRole = response.serviceRole;
         return this;
     }
 
diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts
index 0c47cc4cb2..9b2c942483 100644
--- a/catalog-ui/src/app/models/components/component.ts
+++ b/catalog-ui/src/app/models/components/component.ts
@@ -22,7 +22,7 @@
 
 import {AsdcComment, ArtifactModel, ArtifactGroupModel, IFileDownload, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance,
     InputModel, DisplayModule, Module, IValidate, RelationshipModel, IMainCategory, RequirementsGroup, CapabilitiesGroup, AdditionalInformationModel,
-    Resource, IAppMenu, Product, Service} from "../../models";
+    Resource, IAppMenu, Service} from "../../models";
 
 import {IComponentService} from "../../services/components/component-service";
 import {CommonUtils} from "../../utils/common-utils";
@@ -92,7 +92,6 @@ export interface IComponent {
 
     getComponentSubType():string;
     isAlreadyCertified():boolean;
-    isProduct():boolean;
     isService():boolean;
     isResource():boolean;
     isComplex():boolean;
@@ -797,10 +796,6 @@ export abstract class Component implements IComponent {
 
     //------------------------------------------ Help Functions ----------------------------------------------------------------//
 
-    public isProduct = ():boolean => {
-        return this instanceof Product;
-    };
-
     public isService = ():boolean => {
         return this instanceof Service;
     };
diff --git a/catalog-ui/src/app/models/components/displayComponent.ts b/catalog-ui/src/app/models/components/displayComponent.ts
index a5407e6d17..3a9cbfdaf3 100644
--- a/catalog-ui/src/app/models/components/displayComponent.ts
+++ b/catalog-ui/src/app/models/components/displayComponent.ts
@@ -97,9 +97,6 @@ export class LeftPaletteComponent {
             case ComponentType.SERVICE:
                 this.iconClass = "sprite-services-icons " + icon;
                 break;
-            case ComponentType.PRODUCT:
-                this.iconClass = "sprite-product-icons " + icon;
-                break;
             default:
                 this.iconClass = "sprite-resource-icons " + icon;
         }
diff --git a/catalog-ui/src/app/models/components/product.ts b/catalog-ui/src/app/models/components/product.ts
deleted file mode 100644
index dfb429b971..0000000000
--- a/catalog-ui/src/app/models/components/product.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by obarda on 2/4/2016.
- */
-'use strict';
-import {Component} from "./component";
-import {IProductService} from "../../services/components/product-service";
-import {IGroup, ISubCategory, IMainCategory, ICategoryBase} from "../category";
-import {ComponentMetadata} from "../component-metadata";
-
-export class Product extends Component {
-
-    public contacts:Array<string>;
-    public componentService:IProductService;
-    public fullName:string;
-
-    constructor(componentService:IProductService, $q:ng.IQService, component?:Product) {
-        super(componentService, $q, component);
-
-        if (component) {
-            this.fullName = component.fullName;
-            this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
-            this.contacts = component.contacts;
-        }
-        this.componentService = componentService;
-        this.iconSprite = "sprite-product-icons";
-    }
-
-    public deleteGroup = (uniqueId:string):void => {
-        _.forEach(this.categories, (category:IMainCategory) => {
-            _.forEach(category.subcategories, (subcategory:ISubCategory) => {
-                subcategory.groupings = _.reject(subcategory.groupings, (group:IGroup) => {
-                    return group.uniqueId === uniqueId;
-                });
-                if (subcategory.groupings.length == 0) { // if there is no groups, delete the subcategory
-                    category.subcategories = _.reject(category.subcategories, (subcategoryObj:ISubCategory) => {
-                        return subcategoryObj.uniqueId === subcategory.uniqueId;
-                    });
-                    if (category.subcategories.length == 0) { // if there is no subcategory, delete the category
-                        this.categories = _.reject(this.categories, (categoryObj:IMainCategory) => {
-                            return categoryObj.uniqueId === category.uniqueId;
-                        });
-                    }
-                }
-            });
-        });
-    };
-
-    private getCategoryObjectById = (categoriesArray:Array<ICategoryBase>, categoryUniqueId:string):ICategoryBase => {
-        let categorySelected = _.find(categoriesArray, (category) => {
-            return category.uniqueId === categoryUniqueId;
-        });
-        return categorySelected;
-    };
-
-    public addGroup = (category:IMainCategory, subcategory:ISubCategory, group:IGroup):void => {
-        if (!this.categories) {
-            this.categories = new Array<IMainCategory>();
-        }
-        let existingCategory:IMainCategory = <IMainCategory>this.getCategoryObjectById(this.categories, category.uniqueId);
-        let newGroup = angular.copy(group);
-        newGroup.filterTerms = undefined;
-        newGroup.isDisabled = undefined;
-        if (!existingCategory) {
-            let newCategory:IMainCategory = angular.copy(category);
-            newCategory.filteredGroup = undefined;
-            newCategory.subcategories = [];
-            let newSubcategory:ISubCategory = angular.copy(subcategory);
-            newSubcategory.groupings = [];
-            newSubcategory.groupings.push(newGroup);
-            newCategory.subcategories.push(newSubcategory);
-            this.categories.push(newCategory);
-        }
-        else {
-            let existingSubcategory:ISubCategory = <ISubCategory> this.getCategoryObjectById(existingCategory.subcategories, subcategory.uniqueId);
-            if (!existingSubcategory) {
-                let newSubcategory:ISubCategory = angular.copy(subcategory);
-                newSubcategory.groupings = [];
-                newSubcategory.groupings.push(newGroup);
-                existingCategory.subcategories.push(newSubcategory);
-
-            } else {
-                let existingGroup:IGroup = <IGroup> this.getCategoryObjectById(existingSubcategory.groupings, group.uniqueId);
-                if (!existingGroup) {
-                    existingSubcategory.groupings.push(newGroup);
-                }
-            }
-        }
-    };
-
-    getTypeUrl():string {
-        return 'products/';
-    }
-
-    public setComponentMetadata(componentMetadata:ComponentMetadata) {
-        super.setComponentMetadata(componentMetadata);
-        this.setComponentDisplayData();
-    };
-
-    setComponentDisplayData():void {
-        this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
-        this.iconSprite = "sprite-product-icons";
-    }
-}
-
-
diff --git a/catalog-ui/src/app/models/components/resource.ts b/catalog-ui/src/app/models/components/resource.ts
index 9f7a123486..138b413028 100644
--- a/catalog-ui/src/app/models/components/resource.ts
+++ b/catalog-ui/src/app/models/components/resource.ts
@@ -41,6 +41,7 @@ export class Resource extends Component {
     public payloadData:string;
     public payloadName:string;
     public importedFile:FileUploadModel;
+    public resourceVendorModelNumber:string;
 
     // Onboarding parameters
     public csarUUID:string;
@@ -59,6 +60,7 @@ export class Resource extends Component {
             this.resourceType = component.resourceType;
             this.csarUUID = component.csarUUID;
             this.csarVersion = component.csarVersion;
+            this.resourceVendorModelNumber = component.resourceVendorModelNumber;
             this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version + ' ' + this.resourceType;
             if (component.categories && component.categories[0] && component.categories[0].subcategories && component.categories[0].subcategories[0]) {
                 component.mainCategory = component.categories[0].name;
@@ -80,6 +82,7 @@ export class Resource extends Component {
         this.csarUUID = componentMetadata.csarUUID;
         this.csarVersion = componentMetadata.csarVersion;
         this.derivedFrom = componentMetadata.derivedFrom;
+        this.resourceVendorModelNumber = componentMetadata.resourceVendorModelNumber;
         this.setComponentDisplayData();
     };
 
@@ -88,7 +91,7 @@ export class Resource extends Component {
     };
 
     public isComplex = ():boolean => {
-        return this.resourceType === ResourceType.VF;
+        return this.resourceType === ResourceType.VF || this.resourceType === ResourceType.PNF || this.resourceType === ResourceType.CVFC;
     };
 
     public isVl = ():boolean => {
diff --git a/catalog-ui/src/app/models/components/service.ts b/catalog-ui/src/app/models/components/service.ts
index fbe32519c3..90a38e895b 100644
--- a/catalog-ui/src/app/models/components/service.ts
+++ b/catalog-ui/src/app/models/components/service.ts
@@ -34,6 +34,8 @@ export class Service extends Component {
     public componentService:IServiceService;
     public ecompGeneratedNaming:boolean;
     public namingPolicy:string;
+    public serviceType:string;
+    public serviceRole:string;
 
     constructor(componentService:IServiceService, $q:ng.IQService, component?:Service) {
         super(componentService, $q, component);
@@ -43,6 +45,8 @@ export class Service extends Component {
             this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
             this.ecompGeneratedNaming = component.ecompGeneratedNaming;
             this.namingPolicy = component.namingPolicy;
+            this.serviceType = component.serviceType;
+            this.serviceRole = component.serviceRole;
             if (component.categories && component.categories[0]) {
                 this.mainCategory = component.categories[0].name;
                 this.selectedCategory = this.mainCategory;
@@ -155,6 +159,8 @@ export class Service extends Component {
         super.setComponentMetadata(componentMetadata);
         this.ecompGeneratedNaming = componentMetadata.ecompGeneratedNaming;
         this.namingPolicy = componentMetadata.namingPolicy;
+        this.serviceType = componentMetadata.serviceType;
+        this.serviceRole = componentMetadata.serviceRole;
         this.setComponentDisplayData();
     }
 
diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
index 726e3382ba..06939a7a9e 100644
--- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
+++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
@@ -52,6 +52,7 @@ export class ComponentInstance {
     public inputs:Array<InputModel>;
     public properties:Array<PropertyModel>;
     public groupInstances:Array<Module>;
+    public invariantName:string;
 
     constructor(componentInstance?:ComponentInstance) {
 
@@ -77,6 +78,7 @@ export class ComponentInstance {
             this.customizationUUID = componentInstance.customizationUUID;
             this.updatePosition(componentInstance.posX, componentInstance.posY);
             this.groupInstances = componentInstance.groupInstances;
+            this.invariantName = componentInstance.invariantName;
         }
     }
 
@@ -92,7 +94,7 @@ export class ComponentInstance {
     };
 
     public isComplex = () : boolean => {
-        return this.originType === ResourceType.VF;
+        return this.originType === ResourceType.VF || this.originType === ResourceType.PNF || this.originType === ResourceType.CVFC  ;
     }
 
     public setInstanceRC = ():void=> {
diff --git a/catalog-ui/src/app/models/componentsInstances/productInstance.ts b/catalog-ui/src/app/models/componentsInstances/productInstance.ts
deleted file mode 100644
index 91f0999b9a..0000000000
--- a/catalog-ui/src/app/models/componentsInstances/productInstance.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by obarda on 2/4/2016.
- */
-'use strict';
-import {ComponentInstance} from "./componentInstance";
-
-export class ProductInstance extends ComponentInstance {
-
-    constructor(componentInstance?:ProductInstance) {
-        super(componentInstance);
-        this.iconSprite = "sprite-product-icons";
-    }
-}
diff --git a/catalog-ui/src/app/models/modal.ts b/catalog-ui/src/app/models/modal.ts
new file mode 100644
index 0000000000..51aa5e19a7
--- /dev/null
+++ b/catalog-ui/src/app/models/modal.ts
@@ -0,0 +1,16 @@
+import { ButtonModel } from 'app/models';
+
+export class ModalModel {
+    size: string; 'xl|l|md|sm|xsm'
+    title: string;
+    content: any;
+    buttons: Array<ButtonModel>;
+
+    constructor(size?: string, title?: string, content?: any, buttons?: Array<ButtonModel>) {
+        this.size = size;
+        this.title = title;
+        this.content = content;
+        this.buttons = buttons;
+    }
+}
+
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 04a224bff7..630374aac3 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
@@ -40,4 +40,4 @@ export class InputFEModel extends InputBEModel {
         }
     }
 
-}
+}
\ No newline at end of file
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 78d01d9af2..b35bb27b65 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
@@ -55,7 +55,7 @@ export class PropertyFEModel extends PropertyBEModel {
             } catch (e){}
         }
 
-        return (this.derivedDataType == DerivedPropertyType.SIMPLE) ? this.valueObj : JSON.stringify(this.valueObj);     
+        return (this.derivedDataType == DerivedPropertyType.SIMPLE) ? this.valueObj : JSON.stringify(this.valueObj);
     }
 
     public setNonDeclared = (childPath?: string): void => {
@@ -101,16 +101,16 @@ export class PropertyFEModel extends PropertyBEModel {
     //     this.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName)
     // }
 
-    /* Updates parent valueObj when a child prop's value has changed */    
-    public childPropUpdated = (childProp: DerivedFEProperty): void => {          
+    /* Updates parent valueObj when a child prop's value has changed */
+    public childPropUpdated = (childProp: DerivedFEProperty): void => {
         let parentNames = this.getParentNamesArray(childProp.propertiesName, []);
         if (parentNames.length) {
             _.set(this.valueObj, parentNames.join('.'), childProp.valueObj);
         }
     };
 
-    /* Returns array of individual parents for given prop path, with list/map UUIDs replaced with index/mapkey */    
-    private getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
+    /* Returns array of individual parents for given prop path, with list/map UUIDs replaced with index/mapkey */
+    public getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
         if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
 
         let parentProp: DerivedFEProperty = this.flattenedChildren.find(prop => prop.propertiesName === parentPropName);
diff --git a/catalog-ui/src/app/models/user.ts b/catalog-ui/src/app/models/user.ts
index ec42aed553..54ddf1e5f6 100644
--- a/catalog-ui/src/app/models/user.ts
+++ b/catalog-ui/src/app/models/user.ts
@@ -26,9 +26,7 @@ export enum UserRole {
     DESIGNER,
     TESTER,
     GOVERNOR,
-    OPS,
-    PRODUCT_MANAGER,
-    PRODUCT_STRATEGIST
+    OPS
 }
 
 export interface IUserManager {
@@ -99,12 +97,6 @@ export class User implements IUser {
             case UserRole.OPS:
                 role = UserRole.OPS;
                 break;
-            case UserRole.PRODUCT_MANAGER:
-                role = UserRole.PRODUCT_MANAGER;
-                break;
-            case UserRole.PRODUCT_STRATEGIST:
-                role = UserRole.PRODUCT_STRATEGIST;
-                break;
         }
         return role;
     }
diff --git a/catalog-ui/src/app/modules/service-module.ts b/catalog-ui/src/app/modules/service-module.ts
index bf9ebce749..99624ada45 100644
--- a/catalog-ui/src/app/modules/service-module.ts
+++ b/catalog-ui/src/app/modules/service-module.ts
@@ -35,7 +35,6 @@ import {DataTypesService} from "../services/data-types-service";
 import {ComponentService} from "../services/components/component-service";
 import {ServiceService} from "../services/components/service-service";
 import {ResourceService} from "../services/components/resource-service";
-import {ProductService} from "../services/components/product-service";
 import {LeftPaletteLoaderService} from "../services/components/utils/composition-left-palette-service";
 import {EventListenerService} from "../services/event-listener-service";
 import {ProgressService} from "../services/progress-service";
@@ -69,7 +68,6 @@ serviceModule.service('Sdc.Services.DataTypesService', DataTypesService);
 serviceModule.service('Sdc.Services.Components.ComponentService', ComponentService);
 serviceModule.service('Sdc.Services.Components.ServiceService',ServiceService);
 serviceModule.service('Sdc.Services.Components.ResourceService', ResourceService);
-serviceModule.service('Sdc.Services.Components.ProductService', ProductService);
 serviceModule.service('LeftPaletteLoaderService', LeftPaletteLoaderService);
 serviceModule.service('EventListenerService', EventListenerService);
 serviceModule.service('Sdc.Services.ProgressService', ProgressService);
diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts
index de7bc5ac1f..f94bfc3218 100644
--- a/catalog-ui/src/app/modules/view-model-module.ts
+++ b/catalog-ui/src/app/modules/view-model-module.ts
@@ -56,13 +56,12 @@ import {OnboardingModalViewModel} from "../view-models/modals/onboarding-modal/o
 import {DistributionStatusModalViewModel} from "../view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model";
 import {DcaeAppViewModel} from "../view-models/dcae-app/dcae-app-view-model";
 import {GeneralViewModel} from "../view-models/workspace/tabs/general/general-view-model";
-import {IconsViewModel} from "../view-models/workspace/tabs/icons/icons-view-model";
+import {IconsModalViewModel} from "../view-models/modals/icons-modal/icons-modal-view";
 import {DeploymentArtifactsViewModel} from "../view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model";
 import {InformationArtifactsViewModel} from "../view-models/workspace/tabs/information-artifacts/information-artifacts-view-model";
 import {ToscaArtifactsViewModel} from "../view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model";
 import {PropertiesViewModel} from "../view-models/workspace/tabs/properties/properties-view-model";
 import {AttributesViewModel} from "../view-models/workspace/tabs/attributes/attributes-view-model";
-import {ProductHierarchyViewModel} from "../view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model";
 import {ActivityLogViewModel} from "../view-models/workspace/tabs/activity-log/activity-log";
 import {ManagementWorkflowViewModel} from "../view-models/workspace/tabs/management-workflow/management-workflow-view-model";
 import {NetworkCallFlowViewModel} from "../view-models/workspace/tabs/network-call-flow/network-call-flow-view-model";
@@ -114,6 +113,7 @@ viewModelModule
   .controller(moduleName + '.UserManagementViewModel', UserManagementViewModel)
   .controller(moduleName + '.CategoryManagementViewModel', CategoryManagementViewModel)
   .controller(moduleName + '.OnboardingModalViewModel', OnboardingModalViewModel)
+  .controller(moduleName + '.IconsModalViewModel', IconsModalViewModel)
   .controller(moduleName + '.DistributionStatusModalViewModel', DistributionStatusModalViewModel)
   .controller(moduleName + '.DcaeAppViewModel', DcaeAppViewModel)
   //
@@ -122,13 +122,11 @@ viewModelModule
   .controller(moduleName + '.ConformanceLevelModalViewModel', ConformanceLevelModalViewModel)
   .controller(moduleName + '.CompositionViewModel', CompositionViewModel)
   .controller(moduleName + '.GeneralViewModel', GeneralViewModel)
-  .controller(moduleName + '.IconsViewModel', IconsViewModel)
   .controller(moduleName + '.DeploymentArtifactsViewModel', DeploymentArtifactsViewModel)
   .controller(moduleName + '.InformationArtifactsViewModel', InformationArtifactsViewModel)
   .controller(moduleName + '.ToscaArtifactsViewModel', ToscaArtifactsViewModel)
   .controller(moduleName + '.PropertiesViewModel', PropertiesViewModel)
   .controller(moduleName + '.AttributesViewModel', AttributesViewModel)
-  .controller(moduleName + '.ProductHierarchyViewModel', ProductHierarchyViewModel)
   .controller(moduleName + '.ActivityLogViewModel', ActivityLogViewModel)
   .controller(moduleName + '.ManagementWorkflowViewModel', ManagementWorkflowViewModel)
   .controller(moduleName + '.NetworkCallFlowViewModel', NetworkCallFlowViewModel)
diff --git a/catalog-ui/src/app/ng2/app.component.ts b/catalog-ui/src/app/ng2/app.component.ts
index 58f483ae11..cb10581c93 100644
--- a/catalog-ui/src/app/ng2/app.component.ts
+++ b/catalog-ui/src/app/ng2/app.component.ts
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ViewContainerRef } from '@angular/core';
 import { AuthenticationService } from './services/authentication.service';
 
 @Component({
@@ -28,7 +28,7 @@ import { AuthenticationService } from './services/authentication.service';
 })
 export class AppComponent {
 
-  constructor(auth:AuthenticationService){
+  constructor(auth:AuthenticationService, public viewContainerRef:ViewContainerRef){
 
   }
 
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
deleted file mode 100644
index 7fdd95b304..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
deleted file mode 100644
index f73692f525..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * 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 331415c26f..38de3ce649 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
@@ -45,6 +45,5 @@
         </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.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
index 526f5de360..30cdb89d8e 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
@@ -23,7 +23,9 @@
  */
 import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
 import {InputFEModel} from "app/models";
-import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component";
+import { ModalService } from 'app/ng2/services/modal.service';
+
+
 
 @Component({
     selector: 'inputs-table',
@@ -38,11 +40,10 @@ export class InputsTableComponent {
     @Input() isLoading:boolean;
     @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
-    @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent;
 
     selectedInputToDelete:InputFEModel;
 
-    constructor (){
+    constructor(private modalService: ModalService){
     }
 
     onInputValueChanged = (input) => {
@@ -51,11 +52,12 @@ export class InputsTableComponent {
 
     onDeleteInput = () => {
         this.deleteInput.emit(this.selectedInputToDelete);
+        this.modalService.closeCurrentModal();
     };
 
     openDeleteModal = (input:InputFEModel) => {
         this.selectedInputToDelete = input;
-        this.deleteInputConfirmation.openModal();
+        this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close");
     }
 }
 
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
index 4882449596..cc411bc751 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -1,17 +1,15 @@
-<div class="custom-modal {{size}}">
+<div class="custom-modal {{input.size}}">
     <div class="ng2-modal-content">
         <div class="ng2-modal-header">
-            <span class="title">{{ title }}</span>
+            <span class="title">{{ input.title }}</span>
             <span class="close-button" (click)="close()"></span>
         </div>
-        <div class="ng2-modal-body">
-            <ng-content></ng-content>
-        </div>
+        <div class="ng2-modal-body" >{{input.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>
+            <button *ngFor="let button of input.buttons"
+                    class="tlv-btn {{button.cssClass}}"
+                    [disabled] = "button.getDisabled && button.getDisabled()"
+                    (click) = "button.callback()">{{button.text}}</button>
         </div>
     </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
index e432a6fde0..09fb9abdd1 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -22,8 +22,9 @@
  * Created by rc2122 on 6/1/2017.
  */
 import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+//import {ViewContainerRef, ViewChild} from '@angular/core';
 import * as $ from 'jquery';
-import {ButtonsModelMap} from "app/models/button";
+import { ButtonsModelMap, ModalModel } from 'app/models';
 
 @Component({
     selector: 'modal',
@@ -32,22 +33,17 @@ import {ButtonsModelMap} from "app/models/button";
 })
 
 export class ModalComponent implements OnInit, OnDestroy {
-    @Input() size: string; 'xl|l|md|sm|xsm'
-    @Input() title: string;
-    @Input() public buttons:ButtonsModelMap;
+    @Input() input: ModalModel;
     private modalElement: JQuery;
-    private buttonsNames:Array<string>;
+    //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message
+    
 
     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 {
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
new file mode 100644
index 0000000000..d77be2cd23
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ModalComponent } from "app/ng2/components/modal/modal.component"
+
+@NgModule({
+    declarations: [
+        ModalComponent,
+    ],
+    imports: [CommonModule],
+    exports: [],
+    entryComponents: [
+        ModalComponent
+    ],
+    providers: [ModalService]
+})
+export class ModalModule {
+
+}
\ No newline at end of file
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 92948b3b0d..95cc79dce9 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
@@ -5,12 +5,12 @@
     <!-- LEFT CELL -->
     <ng-container *ngIf="!isPropertyFEModel">
         <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- simple children of complex type [@checkEffect]="property.isDeclared"-->
-            <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox> 
+            <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
             <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
         </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}" />
+            <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':!mapKey.validity.valid}" />
         </div>
     </ng-container>
     <!-- RIGHT CELL OR FULL WIDTH CELL-->
@@ -36,7 +36,7 @@
     </ng-container>
     <!-- ICONS: add, delete, and expand -->
     <ng-container *ngIf="!property.isDeclared">
-            <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
+            <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}">Add value to list</a>
             <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 || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
     </ng-container>
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 4da98ec736..48d3d035d0 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,3 +1,4 @@
+@import '../../../../../assets/styles/variables.less';
 .flat-children-container {
     .dynamic-property-row {
         /*create nested left border classes for up to 10 levels of nesting*/
@@ -64,4 +65,10 @@
     overflow: hidden;
     display: inline;
     padding-left: 8px;
-}
\ No newline at end of file
+}
+.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/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index e078b74d65..59811b582d 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
@@ -88,7 +88,7 @@ export class DynamicPropertyComponent {
     }
 
     createNewChildProperty = (): void => {
-        
+
         let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
         if (this.property instanceof PropertyFEModel) {
             this.addChildProps(newProps, this.property.name);
@@ -98,11 +98,22 @@ export class DynamicPropertyComponent {
     }
 
     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 
+            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);
+
+
+            if(!newProps[0].schema.property.isSimpleType){
+                angular.forEach(newProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
+                    (<PropertyFEModel>this.property).childPropUpdated(prop);
+                },this);
+                //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added)
+                let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(newProps[0].propertiesName, []);
+                newProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
+                this.valueChanged.emit(this.property.name);
+            }
         }
     }
 
@@ -113,7 +124,7 @@ export class DynamicPropertyComponent {
             this.dataTypeService.checkForCustomBehavior(this.property);
             this.valueChanged.emit(this.property.name);
         }
-    }    
+    }
 
     deleteListOrMapItem = (item: DerivedFEProperty) => {
         if (this.property instanceof PropertyFEModel) {
@@ -123,15 +134,22 @@ export class DynamicPropertyComponent {
         }
     }
 
-    removeValueFromParent = (item: DerivedFEProperty, replaceKey?: string) => {
+    removeValueFromParent = (item: DerivedFEProperty, target?: any) => {
         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;
+                if (target && typeof target.value == 'string') { //allow saving empty string
+                    let replaceKey:string = target.value;
+                    if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists
+                        target.setCustomValidity('This key is already exists.');
+                        return;
+                    }else {
+                        target.setCustomValidity('');
+                        _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
+                        item.mapKey = replaceKey;
+                    }
                 }
                 delete itemParent.valueObj[oldKey];
             } else {
@@ -147,4 +165,11 @@ export class DynamicPropertyComponent {
         }
     }
 
+    preventInsertItem = (property:DerivedFEProperty):boolean => {
+        if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){
+            return true;
+        }
+        return false;
+    }
+
 }
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 1e09c9e4c6..3a5daba711 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
@@ -37,14 +37,13 @@ import { HierarchyNavService } from './../../services/hierarchy-nav.service';
 import { PropertiesUtils } from './properties.utils';
 import { DynamicElementModule } from 'app/ng2/components/dynamic-element/dynamic-element.module';
 import { DynamicPropertyComponent } from './../../components/properties-table/dynamic-property/dynamic-property.component';
-import {ConfirmationDeleteInputComponent} from "app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component"
-import { PopoverModule } from "../../components/popover/popover.module"
+import { PopoverModule } from "../../components/popover/popover.module";
+import { ModalModule } from "../../components/modal/modal.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"
 import {HttpInterceptor} from "../../services/http.interceptor.service";
 
@@ -63,8 +62,6 @@ import {HttpInterceptor} from "../../services/http.interceptor.service";
         // PopoverContentComponent,
         // PopoverComponent,
         FilterPropertiesAssignmentComponent,
-        ModalComponent,
-        ConfirmationDeleteInputComponent,
         LoaderComponent
     ],
     imports: [
@@ -75,7 +72,8 @@ import {HttpInterceptor} from "../../services/http.interceptor.service";
         CheckboxModule,
         DynamicElementModule,
         PopoverModule,
-        TooltipModule
+        TooltipModule,
+        ModalModule
     ],
     entryComponents: [PropertiesAssignmentComponent],
     exports: [
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 ab059b1240..8151d001e8 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
@@ -27,7 +27,6 @@
     .left-column {
         flex: 1 0 500px;
         position: relative;
-        margin: 0 0 1em 0;
 
         /deep/ .tabs {
             width:33%;
@@ -119,7 +118,7 @@
         display:flex;
         flex:0 0 350px;
         flex-direction:column;
-        margin: 45px 0 1em 1em;
+        margin: 45px 0 0 1em;
         overflow-x:auto;
 
         /deep/ .tabs {
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 30ba6c0755..6782b72fa2 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
@@ -170,6 +170,10 @@ export class PropertiesAssignmentComponent {
                 });
         }
 
+        if(resourceInstance.componentName === "vnfConfiguration") {
+            this.isReadonly = true;
+        }
+
         if( this.searchPropertyName ){
             this.clearSearch();
         }
@@ -298,7 +302,7 @@ export class PropertiesAssignmentComponent {
 
         angular.forEach(instancesIds, (instanceId: string): void => {
             let selectedInstanceData: ResourceInstance = this.instances.find(instance => instance.uniqueId == instanceId);
-            let originType: string = (selectedInstanceData) ? selectedInstanceData.originType : this.selectedInstanceType; 
+            let originType: string = (selectedInstanceData) ? selectedInstanceData.originType : this.selectedInstanceType;
             if (!this.isInput(originType)) {
                 selectedProperties[instanceId] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
             } else {
@@ -408,7 +412,7 @@ export class PropertiesAssignmentComponent {
     };
 
     private isInput = (instanceType:string):boolean =>{
-        return instanceType === ResourceType.VF || instanceType === ResourceType.PNF;
+        return instanceType === ResourceType.VF || instanceType === ResourceType.PNF || instanceType === ResourceType.CVFC;
     }
 
 }
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 f876af7f8a..a04d23a16a 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
@@ -139,8 +139,11 @@ export class PropertiesUtils {
             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
+            if ( prop.isDeclared && typeof prop.valueObj == 'object') { //Stringify objects of items that are declared
                 prop.valueObj = JSON.stringify(prop.valueObj);
+            } else if(typeof prop.valueObj == PROPERTY_TYPES.STRING
+                && (prop.type == PROPERTY_TYPES.INTEGER || prop.type == PROPERTY_TYPES.FLOAT || prop.type == PROPERTY_TYPES.BOOLEAN)){ //parse ints and non-string simple types
+                prop.valueObj = JSON.parse(prop.valueObj);
             } else { //parse strings that should be objects
                 if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') {
                     prop.valueObj = JSON.parse(prop.valueObj || '{}');
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index c6865fde9d..cd593d5e3e 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -59,8 +59,6 @@ export class ComponentServiceNg2 {
 
     private getServerTypeUrl = (componentType:string):string => {
         switch (componentType) {
-            case ComponentType.PRODUCT:
-                return ServerTypeUrl.PRODUCTS;
             case ComponentType.SERVICE:
                 return ServerTypeUrl.SERVICES;
             default:
diff --git a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
index e1653cf0bc..c90bfd2848 100644
--- a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
+++ b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -21,8 +21,8 @@
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
 import 'rxjs/Rx';
-import { sdc2Config } from './../../../main';
-import { Interceptor, InterceptedRequest, InterceptedResponse } from 'ng2-interceptors';
+import {sdc2Config} from './../../../main';
+import {Interceptor, InterceptedRequest, InterceptedResponse} from 'ng2-interceptors';
 import {SharingService} from "../../services/sharing-service";
 import {ReflectiveInjector} from '@angular/core';
 import {Cookie2Service} from "./cookie.service";
@@ -31,23 +31,23 @@ import {Dictionary} from "../../utils/dictionary/dictionary";
 import {SEVERITY} from "../../utils/constants";
 import {IServerMessageModalModel} from "../../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
 
+
 export class HttpInterceptor implements Interceptor {
 
-    private cookieService: Cookie2Service;
+    private cookieService:Cookie2Service;
     private sharingService:SharingService;
+
     constructor() {
-        let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service,SharingService]);
+        let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service, SharingService]);
         this.cookieService = injector.get(Cookie2Service);
         this.sharingService = injector.get(SharingService);
     }
 
-    public interceptBefore(request: InterceptedRequest): InterceptedRequest {
-
+    public interceptBefore(request:InterceptedRequest):InterceptedRequest {
         /**
          * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
          * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
          */
-
         request.options.headers.append(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId());
         request.options.withCredentials = true;
         var uuidValue = this.getUuidValue(request.url);
@@ -56,7 +56,6 @@ export class HttpInterceptor implements Interceptor {
         }
         request.options.headers.set('X-ECOMP-RequestID', UUID.UUID());
         return request;
-
     }
 
     public interceptAfter(response:InterceptedResponse):InterceptedResponse {
@@ -66,10 +65,9 @@ export class HttpInterceptor implements Interceptor {
             //console.log("Error from BE:",response);
         }
         return response;
-
     }
 
-    private getUuidValue = (url: string) :string => {
+    private getUuidValue = (url:string):string => {
         let map:Dictionary<string, string> = this.sharingService.getUuidMap();
         if (map && url.indexOf(sdc2Config.api.root) > 0) {
             map.forEach((key:string) => {
@@ -158,9 +156,7 @@ export class HttpInterceptor implements Interceptor {
                 severity: SEVERITY.ERROR
             };
         }
-        // let modalsHandler = this.$injector.get('ModalsHandler');
 
-      //  this.modalsHandler.openServerMessageModal(data);
         console.error('ERROR data',data);
     }
 }
diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
new file mode 100644
index 0000000000..32192f40c2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -0,0 +1,73 @@
+import { Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef } from '@angular/core';
+import { ModalModel, ButtonModel } from 'app/models';
+import { ModalComponent } from 'app/ng2/components/modal/modal.component';
+
+
+@Injectable()
+export class ModalService {
+    currentModal: ComponentRef<any>;
+
+
+    constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef) { }
+
+    
+    /* Shortcut method to open a simple modal with title, message, and close button that simply closes the modal. */
+    public openAlertModal(title: string, message: string, closeButtonText?:string) {
+        let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
+        let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton]);
+        this.createCustomModal(modalModel).instance.open();
+    }
+
+
+    /**
+     * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
+     * NOTE: To close the modal from within the callback, use modalService.closeCurrentModal() //if you run into zone issues with callbacks see:https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components
+     * @param title Heading for modal
+     * @param message Message for modal
+     * @param actionButtonText Blue call to action button
+     * @param actionButtonCallback function to invoke when button is clicked
+     * @param cancelButtonText text for close/cancel button
+     */    
+    public openActionModal = (title:string, message:string, actionButtonText:string, actionButtonCallback:Function, cancelButtonText:string) => {
+        let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
+        let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
+        let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
+        this.createCustomModal(modalModel).instance.open();
+    }
+    
+
+    /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
+    public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
+        let customModal: ComponentRef<ModalComponent> = this.createDynamicComponent(ModalComponent);
+        customModal.instance.input = customModalData;
+        this.currentModal = customModal;
+
+        return customModal;
+    }
+
+    
+    public closeCurrentModal = () => {
+        if (!this.currentModal) return;
+        this.currentModal.instance.close();
+        this.currentModal.destroy();
+    }
+
+
+    //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root. 
+    //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name));
+    private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<any> {
+
+        viewContainerRef = viewContainerRef || this.getRootViewContainerRef();
+        viewContainerRef.clear();
+
+        let factory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
+        let componentRef = viewContainerRef.createComponent(factory);
+        
+        return componentRef; 
+    }
+
+    
+    private getRootViewContainerRef(): ViewContainerRef {
+        return this.applicationRef.components[0].instance.viewContainerRef;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/services.ts b/catalog-ui/src/app/services.ts
index ce4a8e32d3..5dd08c2d20 100644
--- a/catalog-ui/src/app/services.ts
+++ b/catalog-ui/src/app/services.ts
@@ -27,7 +27,6 @@ export * from './services/cache-service';
 export * from './services/configuration-ui-service';
 export * from './services/category-resource-service';
 export * from './services/components/component-service';
-export * from './services/components/product-service';
 export * from './services/components/resource-service';
 export * from './services/components/service-service';
 export * from './services/components/resource-service';
diff --git a/catalog-ui/src/app/services/available-icons-service.ts b/catalog-ui/src/app/services/available-icons-service.ts
index ebb6c5ff77..13b6caea2a 100644
--- a/catalog-ui/src/app/services/available-icons-service.ts
+++ b/catalog-ui/src/app/services/available-icons-service.ts
@@ -81,23 +81,6 @@ export class AvailableIconsService implements IAvailableIconsService {
                     'firewall'
                 ];
                 break;
-
-            case ComponentType.PRODUCT:
-                icons = [
-                    'vfw',
-                    'network',
-                    'security',
-                    'cloud',
-                    'setting',
-                    'orphan',
-                    'wanx',
-                    'vrouter',
-                    'ucpe',
-                    'mobility'
-
-                ];
-                break;
-
         }
         return icons;
     }
diff --git a/catalog-ui/src/app/services/components/product-service.ts b/catalog-ui/src/app/services/components/product-service.ts
deleted file mode 100644
index 09199ea172..0000000000
--- a/catalog-ui/src/app/services/components/product-service.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by obarda on 2/8/2016.
- */
-'use strict';
-import {IComponentService, ComponentService} from "./component-service";
-import {SharingService} from "../sharing-service";
-import {Product, Component, IAppConfigurtaion} from "../../models";
-
-export interface IProductService extends IComponentService {
-
-}
-
-export class ProductService extends ComponentService implements IProductService {
-
-    static '$inject' = [
-        'Restangular',
-        'sdcConfig',
-        'Sdc.Services.SharingService',
-        '$q',
-        '$base64'
-    ];
-
-    constructor(protected restangular:restangular.IElement,
-                protected sdcConfig:IAppConfigurtaion,
-                protected sharingService:SharingService,
-                protected $q:ng.IQService,
-                protected $base64:any) {
-        super(restangular, sdcConfig, sharingService, $q, $base64);
-        this.restangular = restangular.one("products");
-    }
-
-    createComponentObject = (component:Component):Component => {
-        return new Product(this, this.$q, <Product>component);
-    };
-}
diff --git a/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts b/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
index 52cb78f6d5..a1fa65159f 100644
--- a/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
+++ b/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
@@ -28,6 +28,7 @@ import {ComponentFactory} from "../../../utils/component-factory";
 import {IAppConfigurtaion} from "../../../models/app-config";
 import {ResourceType, ComponentType, EVENTS} from "../../../utils/constants";
 import {ComponentMetadata} from "../../../models/component-metadata";
+import {Resource} from "app/models/components/resource";
 
 export class LeftPaletteDataObject {
     displayLeftPanelComponents:Array<LeftPaletteComponent>;
@@ -58,24 +59,27 @@ export class LeftPaletteLoaderService {
                 protected EventListenerService:EventListenerService) {
 
         this.restangular.setBaseUrl(sdcConfig.api.root + sdcConfig.api.component_api_root);
-      
+
     }
 
     private serviceLeftPaletteData:LeftPaletteDataObject;
     private resourceLeftPaletteData:LeftPaletteDataObject;
-    private productLeftPaletteData:LeftPaletteDataObject;
+    private resourcePNFLeftPaletteData:LeftPaletteDataObject;
     private vlData:LeftPaletteDataObject;
 
-    public loadLeftPanel = (componentType: string):void => {
+    public loadLeftPanel = (component:Component):void => {
         this.serviceLeftPaletteData = new LeftPaletteDataObject(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT);
         this.resourceLeftPaletteData = new LeftPaletteDataObject(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT);
-        this.updateComponentLeftPalette(componentType);
+        this.resourcePNFLeftPaletteData = new LeftPaletteDataObject(EVENTS.RESOURCE_PNF_LEFT_PALETTE_UPDATE_EVENT);
+        this.updateComponentLeftPalette(component);
     }
 
-
-    private getTypeUrl = (componentType:string):string => {
-        return ComponentType.PRODUCT === componentType ? "services" : "resources";
-    };
+    private getResourceLeftPaletteDataByResourceType = (resourceType:string):LeftPaletteDataObject => {
+        if(resourceType == ResourceType.PNF) {
+            return this.resourcePNFLeftPaletteData;
+        }
+        return this.resourceLeftPaletteData;
+    }
 
     private onFinishLoading = (componentType:string, leftPaletteData:LeftPaletteDataObject):void => {
         this.EventListenerService.notifyObservers(leftPaletteData.onFinishLoadingEvent);
@@ -83,7 +87,7 @@ export class LeftPaletteLoaderService {
 
     private updateLeftPalette = (componentType, componentInternalType:string, leftPaletteData:LeftPaletteDataObject):void => {
 
-        this.restangular.one(this.getTypeUrl(componentType)).one('/latestversion/notabstract/metadata').get({'internalComponentType': componentInternalType}).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {
+        this.restangular.one("resources").one('/latestversion/notabstract/metadata').get({'internalComponentType': componentInternalType}).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {
             _.forEach(leftPaletteComponentMetadata, (componentMetadata:ComponentMetadata) => {
                 leftPaletteData.displayLeftPanelComponents.push(new LeftPaletteComponent(componentMetadata));
             });
@@ -91,30 +95,25 @@ export class LeftPaletteLoaderService {
         });
     };
 
-    public getLeftPanelComponentsForDisplay = (componentType:string):Array<LeftPaletteComponent> => {
-        switch (componentType) {
+    public getLeftPanelComponentsForDisplay = (component:Component):Array<LeftPaletteComponent> => {
+        switch (component.componentType) {
             case ComponentType.SERVICE:
                 return this.serviceLeftPaletteData.displayLeftPanelComponents;
-            case ComponentType.PRODUCT:
-                return this.productLeftPaletteData.displayLeftPanelComponents;
-            default:
-                return this.resourceLeftPaletteData.displayLeftPanelComponents;
+            default://resource
+                return this.getResourceLeftPaletteDataByResourceType((<Resource>component).resourceType).displayLeftPanelComponents;
         }
     };
 
-    public updateComponentLeftPalette = (componentType):void => {
-        switch (componentType) {
-            case ResourceType.VL:
-                this.updateLeftPalette(ComponentType.RESOURCE, ResourceType.VL, this.vlData);
-                break;
+    public updateComponentLeftPalette = (component:Component):void => {
+        switch (component.componentType) {
             case ComponentType.SERVICE:
                 this.updateLeftPalette(ComponentType.SERVICE, ComponentType.SERVICE, this.serviceLeftPaletteData);
                 break;
-            case ComponentType.PRODUCT:
-                this.updateLeftPalette(ComponentType.PRODUCT, ComponentType.SERVICE, this.productLeftPaletteData);
+            case ComponentType.RESOURCE:
+                this.updateLeftPalette(ComponentType.RESOURCE, (<Resource>component).resourceType, this.getResourceLeftPaletteDataByResourceType((<Resource>component).resourceType));
                 break;
             default:
-                this.updateLeftPalette(ComponentType.RESOURCE, ResourceType.VF, this.resourceLeftPaletteData);
+                console.log('ERROR: Component type '+ component.componentType + ' is not exists');
         }
     };
 }
diff --git a/catalog-ui/src/app/services/data-types-service.ts b/catalog-ui/src/app/services/data-types-service.ts
index a6dbf7f12d..84fe42e9f3 100644
--- a/catalog-ui/src/app/services/data-types-service.ts
+++ b/catalog-ui/src/app/services/data-types-service.ts
@@ -132,7 +132,8 @@ export class DataTypesService implements IDataTypesService {
 
     public isDataTypeForDataTypePropertyType = (property:DataTypePropertyModel):boolean=> {
         property.simpleType = "";
-        if (property.type && PROPERTY_DATA.TYPES.indexOf(property.type) > -1) {
+        let isScalarForNFoD:boolean = property.type === 'scalar-unit.size';
+        if (property.type && PROPERTY_DATA.TYPES.indexOf(property.type) > -1 || isScalarForNFoD) {
             return false;
         }
         let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type);
diff --git a/catalog-ui/src/app/services/entity-service.ts b/catalog-ui/src/app/services/entity-service.ts
index a255dcff34..75ea036b3e 100644
--- a/catalog-ui/src/app/services/entity-service.ts
+++ b/catalog-ui/src/app/services/entity-service.ts
@@ -19,7 +19,7 @@
  */
 
 'use strict';
-import {Product, Service, IApi, IAppConfigurtaion, Resource, Component} from "../models";
+import { Service, IApi, IAppConfigurtaion, Resource, Component} from "../models";
 import {SharingService} from "./sharing-service";
 import {ComponentFactory} from "../utils/component-factory";
 import {CacheService} from "./cache-service";
@@ -31,7 +31,6 @@ interface IEntityService {
 interface IComponentsArray {
     services:Array<Service>;
     resources:Array<Resource>;
-    products:Array<Product>;
 }
 
 export class EntityService implements IEntityService {
@@ -66,13 +65,6 @@ export class EntityService implements IEntityService {
                     this.sharingService.addUuidValue(component.uniqueId, component.uuid);
                 });
 
-                followedResponse.products.forEach((productResponse:Product) => {
-
-                    let component:Product = this.ComponentFactory.createProduct(productResponse);
-                    componentsList.push(component);
-                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
-                });
-
                 this.cacheService.set('breadcrumbsComponents', componentsList);
                 defer.resolve(componentsList);
             },(responce) => {
@@ -99,12 +91,7 @@ export class EntityService implements IEntityService {
                     componentsList.push(component);
                     this.sharingService.addUuidValue(component.uniqueId, component.uuid);
                 });
-
-                componentResponse.products && componentResponse.products.forEach((productsResponse:Product) => {
-                    let component:Product = this.ComponentFactory.createProduct(productsResponse);
-                    componentsList.push(component);
-                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
-                });
+                
                 this.cacheService.set('breadcrumbsComponents', componentsList);
                 defer.resolve(componentsList);
             });
diff --git a/catalog-ui/src/app/utils/component-factory.ts b/catalog-ui/src/app/utils/component-factory.ts
index c202a1c8f5..b35918c0f6 100644
--- a/catalog-ui/src/app/utils/component-factory.ts
+++ b/catalog-ui/src/app/utils/component-factory.ts
@@ -20,8 +20,8 @@
 
 'use strict';
 import {DEFAULT_ICON, ResourceType, ComponentType} from "./constants";
-import {ServiceService, CacheService, ResourceService, ProductService} from "app/services";
-import {IMainCategory, ISubCategory, ICsarComponent, Component, Resource, Service, Product} from "app/models";
+import {ServiceService, CacheService, ResourceService} from "app/services";
+import {IMainCategory, ISubCategory, ICsarComponent, Component, Resource, Service} from "app/models";
 import {ComponentMetadata} from "../models/component-metadata";
 import {ComponentServiceNg2} from "../ng2/services/component-services/component.service";
 import {ComponentGenericResponse} from "../ng2/services/responses/component-generic-response";
@@ -32,7 +32,6 @@ export class ComponentFactory {
     static '$inject' = [
         'Sdc.Services.Components.ResourceService',
         'Sdc.Services.Components.ServiceService',
-        'Sdc.Services.Components.ProductService',
         'Sdc.Services.CacheService',
         '$q',
         'ComponentServiceNg2'
@@ -40,7 +39,6 @@ export class ComponentFactory {
 
     constructor(private ResourceService:ResourceService,
                 private ServiceService:ServiceService,
-                private ProductService:ProductService,
                 private cacheService:CacheService,
                 private $q:ng.IQService,
                 private ComponentServiceNg2: ComponentServiceNg2) {
@@ -58,18 +56,10 @@ export class ComponentFactory {
                 newComponent = new Resource(this.ResourceService, this.$q, <Resource> component);
                 break;
 
-            case 'PRODUCT':
-                newComponent = new Product(this.ProductService, this.$q, <Product> component);
-                break;
         }
         return newComponent;
     };
 
-    public createProduct = (product:Product):Product => {
-        let newProduct:Product = new Product(this.ProductService, this.$q, <Product> product);
-        return newProduct;
-    };
-
     public createService = (service:Service):Service => {
         let newService:Service = new Service(this.ServiceService, this.$q, <Service> service);
         return newService;
@@ -144,12 +134,10 @@ export class ComponentFactory {
             case ResourceType.VL:
             case ResourceType.VFC:
             case ResourceType.CP:
+            case ResourceType.PNF:
+            case ResourceType.CVFC:
                 newComponent = new Resource(this.ResourceService, this.$q);
                 break;
-
-            case ComponentType.PRODUCT:
-                newComponent = new Product(this.ProductService, this.$q);
-                break;
         }
         newComponent.componentType = componentType;
         newComponent.tags = [];
diff --git a/catalog-ui/src/app/utils/component-instance-factory.ts b/catalog-ui/src/app/utils/component-instance-factory.ts
index c020c53705..9e25e6b02f 100644
--- a/catalog-ui/src/app/utils/component-instance-factory.ts
+++ b/catalog-ui/src/app/utils/component-instance-factory.ts
@@ -21,7 +21,7 @@
  * Created by obarda on 3/7/2016.
  */
 'use strict';
-import {ComponentInstance, ServiceInstance, ProductInstance, ResourceInstance, Component} from "../models";
+import {ComponentInstance, ServiceInstance, ResourceInstance, Component} from "../models";
 import {LeftPaletteComponent} from "../models/components/displayComponent";
 
 export class ComponentInstanceFactory {
@@ -33,10 +33,6 @@ export class ComponentInstanceFactory {
                 newComponentInstance = new ServiceInstance(componentInstance);
                 break;
 
-            case 'PRODUCT':
-                newComponentInstance = new ProductInstance(componentInstance);
-                break;
-
             default :
                 newComponentInstance = new ResourceInstance(componentInstance);
                 break;
@@ -51,10 +47,6 @@ export class ComponentInstanceFactory {
                 newComponentInstance = new ServiceInstance();
                 break;
 
-            case 'PRODUCT':
-                newComponentInstance = new ProductInstance();
-                break;
-
             default :
                 newComponentInstance = new ResourceInstance();
                 break;
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index 636c0c4fbf..d239019455 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.ts
@@ -29,13 +29,11 @@ export let CHANGE_COMPONENT_CSAR_VERSION_FLAG = 'changeComponentCsarVersion';
 export class ComponentType {
     static SERVICE = 'SERVICE';
     static RESOURCE = 'RESOURCE';
-    static PRODUCT = 'PRODUCT';
 }
 
 export class ServerTypeUrl {
     static RESOURCES = 'resources/';
     static SERVICES = 'services/';
-    static PRODUCTS = 'product/';
 }
 
 export class ResourceType {
@@ -45,6 +43,7 @@ export class ResourceType {
     static VFC = 'VFC';
     static VFCMT = 'VFCMT';
     static PNF = 'PNF';
+    static CVFC = 'CVFC';
 }
 
 export class ComponentState {
@@ -129,8 +128,6 @@ export class PROPERTY_VALUE_CONSTRAINTS {
 export class Role {
     public static ADMIN = 'ADMIN';
     public static DESIGNER = 'DESIGNER';
-    public static PRODUCT_STRATEGIST = 'PRODUCT_STRATEGIST';
-    public static PRODUCT_MANAGER = 'PRODUCT_MANAGER';
     public static TESTER = 'TESTER';
     public static OPS = 'OPS';
     public static GOVERNOR = 'GOVERNOR';
@@ -213,14 +210,12 @@ export class GraphUIObjects {
 
 export class States {
     public static WORKSPACE_GENERAL = 'workspace.general';
-    public static WORKSPACE_ICONS = 'workspace.icons';
     public static WORKSPACE_ACTIVITY_LOG = 'workspace.activity_log';
     public static WORKSPACE_DEPLOYMENT_ARTIFACTS = 'workspace.deployment_artifacts';
     public static WORKSPACE_PROPERTIES = 'workspace.properties';
     public static WORKSPACE_SERVICE_INPUTS = 'workspace.service_inputs';
     public static WORKSPACE_RESOURCE_INPUTS = 'workspace.resource_inputs';
     public static WORKSPACE_ATTRIBUTES = 'workspace.attributes';
-    public static WORKSPACE_HIERARCHY = 'workspace.hierarchy';
     public static WORKSPACE_INFORMATION_ARTIFACTS = 'workspace.information_artifacts';
     public static WORKSPACE_TOSCA_ARTIFACTS = 'workspace.tosca_artifacts';
     public static WORKSPACE_COMPOSITION = 'workspace.composition';
@@ -237,7 +232,6 @@ export class EVENTS {
     static RESOURCE_LEFT_PALETTE_UPDATE_EVENT = "resourceLeftPanelUpdateEvent";
     static RESOURCE_PNF_LEFT_PALETTE_UPDATE_EVENT = "resourcePNFLeftPanelUpdateEvent";
     static SERVICE_LEFT_PALETTE_UPDATE_EVENT = "serviceLeftPanelUpdateEvent";
-    static PRODUCT_LEFT_PALETTE_UPDATE_EVENT = "productLeftPanelUdateEvent";
     static VL_LEFT_PALETTE_UPDATE_EVENT = "vlLeftPanelUdateEvent";
     static ON_CSAR_LOADING = "onCsarLoading";
     static DOWNLOAD_ARTIFACT_FINISH_EVENT = "downloadArtifactFinishEvent";
diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts
index ae91b2acb7..0d17683116 100644
--- a/catalog-ui/src/app/utils/modals-handler.ts
+++ b/catalog-ui/src/app/utils/modals-handler.ts
@@ -187,6 +187,24 @@ export class ModalsHandler implements IModalsHandler {
         return deferred.promise;
     };
 
+    openUpdateIconModal = (component: Component):ng.IPromise<any> => {
+        let deferred = this.$q.defer();
+        let modalOptions:ng.ui.bootstrap.IModalSettings = {
+            templateUrl: '../view-models/modals/icons-modal/icons-modal-view.html',
+            controller: 'Sdc.ViewModels.IconsModalViewModel',
+            size: 'sdc-auto',
+            backdrop: 'static',
+            resolve: {
+                component: ():Component => {
+                    return component;
+                }
+            }
+        };
+        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        deferred.resolve(modalInstance.result);
+        return deferred.promise;
+    };
+
     openEditEnvParametersModal = (artifactResource:ArtifactModel, component?:Component):ng.IPromise<any> => {
         let deferred = this.$q.defer();
         let modalOptions:ng.ui.bootstrap.IModalSettings = {
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
index 8925be0fff..ec9e888eed 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
@@ -117,7 +117,7 @@ export class CatalogViewModel {
         let onSuccess = (followedResponse:Array<Component>):void => {
             this.$scope.catalogFilterdItems = followedResponse;
             this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
-            this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).concat(this.cacheService.get('productCategories'));
+            this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'));
             this.$scope.gui.isLoading = false;
         };
 
@@ -137,7 +137,7 @@ export class CatalogViewModel {
         //this.$scope.categories = this.cacheService.get('categoriesMap');
         this.$scope.sdcMenu = this.sdcMenu;
         this.$scope.confStatus = this.sdcMenu.statuses;
-        this.$scope.expandedSection = ["type", "category", "product-category", "status"];
+        this.$scope.expandedSection = ["type", "category", "status"];
         this.$scope.user = this.userResourceService.getLoggedinUser();
         this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem;
         this.$scope.version = this.cacheService.get('version');
@@ -147,8 +147,8 @@ export class CatalogViewModel {
 
         // Checklist init
         this.$scope.checkboxes = <Checkboxes>{};
-        this.$scope.checkboxes.componentTypes = ['Resource', 'Service', 'Product'];
-        this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CP', 'VL'];
+        this.$scope.checkboxes.componentTypes = ['Resource', 'Service'];
+        this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'PNF', 'CP', 'VL'];
 
         // Checkboxes filter init
         this.$scope.checkboxesFilter = <CheckboxesFilter>{};
diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less
index ff50202243..1f473c9638 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog.less
+++ b/catalog-ui/src/app/view-models/catalog/catalog.less
@@ -67,28 +67,6 @@
         //text-indent: -10px;
     }
 
-    /*Added by - Ikram */
-     .i-sdc-product-input,
-    .i-sdc-product-select {
-        border: 1px solid @border_color_f;
-        min-height: 30px;
-        padding: 0;
-        width: 100%;
-        margin: 1px 0;
-        background-color: #F2F2F2;
-        outline: none;
-
-        &:disabled {
-            .disabled;
-        }
-        optgroup{
-            color: @color_u;
-            option{
-                color: @color_b;
-            }
-        }
-    }
-
     .i-sdc-categories-list-item-icon {
         display: inline-block;
         float: right;
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
index b9e51f098a..5480e4f6cf 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
@@ -310,6 +310,13 @@ export class DashboardViewModel {
 
         };
 
+        this.$scope.createPNF = ():void => {
+            this.$state.go('workspace.general', {
+                type: ComponentType.RESOURCE.toLowerCase(),
+                resourceType: ResourceType.PNF
+            });
+        };
+
         this.$scope.entitiesCount = (folderItem:FoldersItemsMenu):any => {
             let self = this;
             let total:number = 0;
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
index 806bb8138d..baf4aa6e51 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
@@ -13,15 +13,15 @@
             <div class='w-sdc-row-flex-items'>
 
                 <!-- ADD Component -->
-                <div ng-if="user.role === 'DESIGNER' || user.role === 'PRODUCT_MANAGER'" class="w-sdc-dashboard-card-new"
+                <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new"
                     data-ng-mouseleave="displayActions = false"
                     data-ng-mouseover="displayActions = true"
                     data-ng-init="displayActions = false">
                     <div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea">
                         <div class="w-sdc-dashboard-card-new-content-plus" data-ng-show="!displayActions"></div>
                         <div class="sdc-dashboard-create-element-container" data-ng-show="displayActions">
-                            <button data-ng-if="roles[user.role].dashboard.showCreateNewProduct" data-tests-id="createProductButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('PRODUCT')">Create Product</button>
                             <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createResourceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('RESOURCE')">Add VF</button>
+                            <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createPNFButton" class="tlv-btn outline blue" data-ng-click="createPNF()">Add PNF</button>
                             <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createServiceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('SERVICE')">Add Service</button>
                         </div>
                     </div>
@@ -44,8 +44,8 @@
                             </div>
                         </div>
                     </div>
-                </div>            
-            
+                </div>
+
                 <!-- Tile new -->
                 <div class="sdc-tile-catalog sdc-tile-fix-width" data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search">
 
@@ -62,7 +62,7 @@
                                 data-tests-id="{{component.name}}"></div>
                         </div>
                         <div class='sdc-tile-content-info'>
-                            <div class="sdc-tile-content-info-item-name" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>                                
+                            <div class="sdc-tile-content-info-item-name" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
                             <div class="sdc-tile-content-info-version-info">
                                 <div class="sdc-tile-content-info-version-info-text" data-tests-id="{{component.name}}Version">V {{component.version}}</div>
                             </div>
@@ -70,11 +70,11 @@
                     </div>
                     <div class='sdc-tile-footer'>
                         <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
-                    </div>               
+                    </div>
 
                 </div>
                 <!-- Tile new -->
-                
+
             </div>
 
         </perfect-scrollbar>
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard.less b/catalog-ui/src/app/view-models/dashboard/dashboard.less
index 7993390769..02280cdb42 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard.less
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard.less
@@ -244,13 +244,6 @@
             }
         }
 
-        &.PRODUCT {
-            .b_14_m;
-            &::before {
-                content: 'P';
-            }
-        }
-
         &.green {
             .d_12;
             &::before {
diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
index bc1404d7c4..71a3101412 100644
--- a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
+++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
@@ -48,28 +48,6 @@
         //text-indent: -10px;
     }
 
-    /*Added by - Ikram */
-     .i-sdc-product-input,
-    .i-sdc-product-select {
-        border: 1px solid @border_color_f;
-        min-height: 30px;
-        padding: 0;
-        width: 100%;
-        margin: 1px 0;
-        background-color: #F2F2F2;
-        outline: none;
-
-        &:disabled {
-            .disabled;
-        }
-        optgroup{
-            color: @color_u;
-            option{
-                color: @color_b;
-            }
-        }
-    }
-
     .i-sdc-categories-list-item-icon {
         display: inline-block;
         float: right;
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 8b9acbcab7..ee2e94f934 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
@@ -23,6 +23,7 @@ import {
     PROPERTY_TYPES, ModalsHandler, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS, FormState, PROPERTY_DATA} from "app/utils";
 import {DataTypesService} from "app/services";
 import {PropertyModel, DataTypesMap, Component} from "app/models";
+import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
 
 export interface IEditPropertyModel {
     property:PropertyModel;
@@ -50,6 +51,7 @@ interface IPropertyFormViewModelScope extends ng.IScope {
     isTypeDataType:boolean;
     maxLength:number;
     isPropertyValueOwner:boolean;
+    isVnfConfiguration:boolean;
 
     validateJson(json:string):boolean;
     save(doNotCloseModal?:boolean):void;
@@ -192,6 +194,17 @@ export class PropertyFormViewModel {
         this.$scope.isPropertyValueOwner = this.isPropertyValueOwner;
         this.initEditPropertyModel();
 
+        //check if property of VnfConfiguration
+        this.$scope.isVnfConfiguration = false;
+        if(angular.isArray(this.component.componentInstances)) {
+            var componentPropertyOwner:ComponentInstance = this.component.componentInstances.find((ci:ComponentInstance) => {
+                return ci.uniqueId === this.property.resourceInstanceUniqueId;
+            });
+            if (componentPropertyOwner.componentName === 'vnfConfiguration') {
+                this.$scope.isVnfConfiguration = true;
+            }
+        }
+
         this.$scope.nonPrimitiveTypes = _.filter(Object.keys(this.$scope.dataTypes), (type:string)=> {
             return this.$scope.editPropertyModel.types.indexOf(type) == -1;
         });
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index f92d9a5ddc..743de298cd 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -142,7 +142,7 @@
                                  schema-property="editPropertyModel.property.schema.property"
                                  parent-form-obj="forms.editForm"
                                  fields-prefix-name="currentPropertyIndex"
-                                 read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                 read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration"
                                  default-value="{{getDefaultValue()}}"
                                  max-length="maxLength"></type-map>
                         </div>
diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html
new file mode 100644
index 0000000000..4b89701201
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html
@@ -0,0 +1,18 @@
+<sdc-modal modal="modalIcons" type="classic" class="w-sdc-modal-icons" buttons="footerButtons" header="Choose Icon" show-close-button="true">
+
+    <div class="suggested-icons-container">
+        <div class ="suggested-icon-wrapper" data-ng-class="{'selected': selectedIcon == iconSrc}"  data-ng-repeat="iconSrc in icons track by $index">
+            <div class="i-sdc-form-item-suggested-icon large hand {{iconSprite}} {{iconSrc}}"
+                 data-tests-id="{{iconSrc}} iconBox"
+                 data-ng-click="changeIcon(iconSrc)"
+                 tooltips tooltip-content='{{iconSrc | translate}}'
+            >
+            </div>
+        </div>
+    </div>
+
+    <div class="w-sdc-modal-footer classic">
+        <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="updateIcon()">OK</button>
+        <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
+    </div>
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less
new file mode 100644
index 0000000000..660846c883
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less
@@ -0,0 +1,33 @@
+.suggested-icons-container {
+    text-align: left;
+    width: 370px;
+    margin-bottom: 20px;
+    position: relative;
+
+    .suggested-icon-wrapper {
+        padding: 5px;
+        margin: 14px 0 14px 28px;
+        display: inline-block;
+        height: 71px;
+        width: 71px;
+
+        &.selected {
+            border: 2px solid @main_color_a;
+            border-radius: 35px;
+            display: inline-block;
+            line-height: 0px;
+            padding: 3px;
+        }
+
+    }
+    .i-sdc-form-item-suggested-icon {
+        opacity: 0.8;
+        &:hover{
+            opacity: 1;
+        }
+    }
+    .suggested-icon-wrapper:nth-child(4n+1) {
+        margin-left: 0;
+    }
+}
+
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts
index c25bc4a1f1..eeadcd4e83 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts
+++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts
@@ -19,53 +19,60 @@
  */
 
 /**
- * Created by obarda on 4/4/2016.
+ * Created by rc2122 on 7/4/2017.
  */
 'use strict';
 import {ComponentFactory} from "app/utils";
 import {AvailableIconsService} from "app/services";
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
 import {IMainCategory, ISubCategory} from "app/models";
-
-export interface IIconsScope extends IWorkspaceViewModelScope {
-    icons:Array<string>;
-    iconSprite:string;
-    setComponentIcon(iconSrc:string):void;
+import {Component} from "app/models";
+import {ResourceType} from "app/utils/constants";
+
+interface IIconsModalViewModelScope {
+    modalIcons:ng.ui.bootstrap.IModalServiceInstance;
+    icons:Array<string>,
+    iconSprite:string,
+    selectedIcon:string,
+    changeIcon(icon:string):void,
+    cancel():void
+    updateIcon():void;
 }
 
-export class IconsViewModel {
-
+export class IconsModalViewModel {
     static '$inject' = [
         '$scope',
         'Sdc.Services.AvailableIconsService',
         'ComponentFactory',
-        '$state'
+        '$state',
+        '$uibModalInstance',
+        'component'
     ];
 
-    constructor(private $scope:IIconsScope,
+    constructor(private $scope:IIconsModalViewModelScope,
                 private availableIconsService:AvailableIconsService,
                 private ComponentFactory:ComponentFactory,
-                private $state:ng.ui.IStateService) {
-
-
+                private $state:ng.ui.IStateService,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private component: Component) {
         this.initScope();
-        this.initIcons();
-        this.$scope.updateSelectedMenuItem();
-        this.$scope.iconSprite = this.$scope.component.iconSprite;
+        this._initIcons();
+        this.$scope.iconSprite = this.component.iconSprite;
+        this.$scope.selectedIcon = this.component.icon;
 
-        if (this.$scope.component.isResource()) {
+        if (this.component.isResource()) {
             this.initVendor();
         }
+
     }
 
-    private initialIcon:string = this.$scope.component.icon;
-    private initIcons = ():void => {
+    private _initIcons = ():void => {
 
         // For subcategories that where created by admin, there is no icons
         this.$scope.icons = new Array<string>();
-        if (this.$scope.component.categories && this.$scope.component.categories.length > 0) {
+        if (this.component.categories && this.component.categories.length > 0) {
 
-            _.forEach(this.$scope.component.categories, (category:IMainCategory):void => {
+            _.forEach(this.component.categories, (category:IMainCategory):void => {
                 if (category.icons) {
                     this.$scope.icons = this.$scope.icons.concat(category.icons);
                 }
@@ -79,26 +86,26 @@ export class IconsViewModel {
             });
         }
 
-        if (this.$scope.component.isResource()) {
-            let resourceType:string = this.$scope.component.getComponentSubType();
-            if (resourceType === 'VL') {
+        if (this.component.isResource()) {
+            let resourceType:string = this.component.getComponentSubType();
+            if (resourceType === ResourceType.VL) {
                 this.$scope.icons = ['vl'];
             }
-            if (resourceType === 'CP') {
+            if (resourceType === ResourceType.CP) {
                 this.$scope.icons = ['cp'];
             }
         }
 
         if (this.$scope.icons.length === 0) {
-            this.$scope.icons = this.availableIconsService.getIcons(this.$scope.component.componentType);
+            this.$scope.icons = this.availableIconsService.getIcons(this.component.componentType);
         }
         //we always add the defual icon to the list
         this.$scope.icons.push('defaulticon');
     };
 
     private initVendor = ():void => {
-        let vendors:Array<string> = this.availableIconsService.getIcons(this.$scope.component.componentType).slice(5, 19);
-        let vendorName = this.$scope.component.vendorName.toLowerCase();
+        let vendors:Array<string> = this.availableIconsService.getIcons(this.component.componentType).slice(5, 19);
+        let vendorName = this.component.vendorName.toLowerCase();
         if ('at&t' === vendorName) {
             vendorName = 'att';
         }
@@ -115,17 +122,22 @@ export class IconsViewModel {
     };
 
     private initScope():void {
+        this.$scope.modalIcons = this.$uibModalInstance;
         this.$scope.icons = [];
-        this.$scope.setValidState(true);
-        //if(this.$scope.component.icon === DEFAULT_ICON){
-        //    //this.$scope.setValidState(false);
-        //}
-
-        this.$scope.setComponentIcon = (iconSrc:string):void => {
-            this.$state.current.data.unsavedChanges = !this.$scope.isViewMode() && (iconSrc != this.initialIcon);
-            this.$scope.component.icon = iconSrc;
-            // this.$scope.setValidState(true);
+        this.$scope.changeIcon = (icon:string):void => {
+            this.$scope.selectedIcon = icon;
         };
-
+        this.$scope.cancel = ():void => {
+            this.$uibModalInstance.dismiss();
+        };
+        this.$scope.updateIcon = ():void => {
+            let isDirty:boolean = this.component.icon != this.$scope.selectedIcon;
+            this.component.icon = this.$scope.selectedIcon;
+            this.$uibModalInstance.close(isDirty);
+        }
     }
+
 }
+
+
+
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
index bc1404d7c4..71a3101412 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
@@ -48,28 +48,6 @@
         //text-indent: -10px;
     }
 
-    /*Added by - Ikram */
-     .i-sdc-product-input,
-    .i-sdc-product-select {
-        border: 1px solid @border_color_f;
-        min-height: 30px;
-        padding: 0;
-        width: 100%;
-        margin: 1px 0;
-        background-color: #F2F2F2;
-        outline: none;
-
-        &:disabled {
-            .disabled;
-        }
-        optgroup{
-            color: @color_u;
-            option{
-                color: @color_b;
-            }
-        }
-    }
-
     .i-sdc-categories-list-item-icon {
         display: inline-block;
         float: right;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
index 61bb3e9f01..24f83ec503 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
@@ -1,7 +1,4 @@
 .activity-log {
-
-    margin-top: 30px;
-
     .title-wrapper {
         display: flex;
         justify-content: flex-end;
@@ -10,7 +7,7 @@
     .table-container-flex .table .body .scrollbar-container {
         max-height: 448px;
     }
-    
+
     .view-mode {
         background-color: @main_color_p;
     }
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
index ffd28afce4..932daa167d 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
@@ -13,7 +13,7 @@
     }
 
     .table-container-flex {
-        margin-top: 27px;
+        margin-top: 0;
 
         .text{
             overflow: hidden;
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 894f8aeb2a..fbd32cc967 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
@@ -18,12 +18,14 @@
  * ============LICENSE_END=========================================================
  */
 'use strict';
-import {Component, Product, ComponentInstance, IAppMenu} from "app/models";
+import {Component, ComponentInstance, IAppMenu} from "app/models";
 import {SharingService, CacheService, EventListenerService, LeftPaletteLoaderService} from "app/services";
 import {ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS} from "app/utils";
 import {IWorkspaceViewModelScope} from "../../workspace-view-model";
 import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
 import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
+import {Resource} from "app/models/components/resource";
+import {ResourceType} from "../../../../utils/constants";
 
 export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
 
@@ -205,9 +207,6 @@ export class CompositionViewModel {
             if (this.$state.current.name === 'workspace.composition.api') {
                 this.$state.go('workspace.composition.details');
             }
-            if (this.$state.current.name === 'workspace.composition.relations' && this.$scope.currentComponent.isProduct()) {
-                this.$state.go('workspace.composition.details');
-            }
         };
 
         this.$scope.onBackgroundClick = ():void => {
@@ -238,7 +237,7 @@ export class CompositionViewModel {
             this.ModalsHandler.openAlertModal(title, message).then(onOk);
         };
 
-        this.$scope.onComponentInstanceVersionChange = (component:Product):void => {
+        this.$scope.onComponentInstanceVersionChange = (component:Component):void => {
             this.$scope.currentComponent = component;
             this.$scope.setComponent(this.$scope.currentComponent);
             this.$scope.updateSelectedComponent();
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
index 761ae53909..cef942e853 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
@@ -57,7 +57,8 @@
             <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
                     data-ui-sref="workspace.composition.deployment"
                     tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
-                    data-tests-id="deployment-artifact-tab">
+                    data-tests-id="deployment-artifact-tab"
+                    data-ng-if="!isPNF()">
                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
             </button>
             <button tooltips tooltip-class="tooltip-custom tab-tooltip"
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 01cb9d4ee4..8221c67eca 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
@@ -60,7 +60,7 @@
             </div>
 
         </div>
-        <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||selectedComponent.resourceType=='VF') && !currentComponent.isProduct() && ('deployment' != artifactType || selectedComponent.isComplex())">
+        <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||selectedComponent.resourceType=='VF') && ('deployment' != artifactType || selectedComponent.isComplex())">
             <button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="add_Artifact_Button" data-ng-click="addOrUpdate({})" type="button">Add Artifact</button>
         </div>
     </div>
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 223d6cf964..0d8d17ec73 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,7 +82,7 @@ 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 = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent.componentType), (component:LeftPaletteComponent) => { //latest checked in
+            let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent), (component:LeftPaletteComponent) => { //latest checked in
                 return (component.systemName === this.$scope.selectedComponent.systemName
                 || component.uuid === this.$scope.selectedComponent.uuid);
             }),(component)=>{return component.version});
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
index 70dc58075a..8607d65964 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
@@ -77,6 +77,27 @@
                       data-tests-id="rightTab_vendorRelease">
                 </span>
             </div>
+            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
+                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></span>
+                <span class="i-sdc-designer-sidebar-section-content-item-value vendor-model-number" data-ng-bind="selectedComponent.resourceVendorModelNumber"
+                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.resourceVendorModelNumber}}"
+                      data-tests-id="rightTab_resourceVendorModelNumber">
+                </span>
+            </div>
+            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
+                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_TYPE"></span>
+                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceType"
+                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.serviceType}}"
+                      data-tests-id="rightTab_serviceType">
+                </span>
+            </div>
+            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
+                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_ROLE"></span>
+                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceRole"
+                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.serviceRole}}"
+                      data-tests-id="rightTab_serviceRole">
+                </span>
+            </div>
             <div class="i-sdc-designer-sidebar-section-content-item">
                 <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span>
                 <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.contactId"
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
index 3ebb14c2b8..0ed72e2f00 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
@@ -37,6 +37,9 @@
         max-width: 160px;
         vertical-align:bottom;
         font-weight: normal;
+        &.vendor-model-number{
+            max-width: 110px;
+        }
         &.additional-information{
             max-width:160px;
             display: inline-block;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
index 3596a217b8..f67d088b5a 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
@@ -71,7 +71,7 @@
 
     .table-container-flex {
 
-        margin-top: 27px;
+        margin-top: 0;
 
         .text{
             overflow: hidden;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index 05b3324bbb..1dc326a7c0 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -22,14 +22,16 @@
 import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
     ResourceType} from "app/utils";
 import {CacheService, EventListenerService, ProgressService} from "app/services";
-import {IAppConfigurtaion, Product, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models";
+import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models";
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
 
 export class Validation {
     componentNameValidationPattern:RegExp;
     contactIdValidationPattern:RegExp;
     tagValidationPattern:RegExp;
-    vendorValidationPattern:RegExp;
+    VendorReleaseValidationPattern:RegExp;
+    VendorNameValidationPattern:RegExp;
+    VendorModelNumberValidationPattern:RegExp;
     commentValidationPattern:RegExp;
     projectCodeValidationPattern:RegExp;
 }
@@ -63,6 +65,8 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     onEcompGeneratedNamingChange():void;
     openOnBoardingModal():void;
     initCategoreis():void;
+    updateIcon():void;
+    possibleToUpdateIcon():boolean;
 }
 
 export class GeneralViewModel {
@@ -73,7 +77,9 @@ export class GeneralViewModel {
         'ComponentNameValidationPattern',
         'ContactIdValidationPattern',
         'TagValidationPattern',
-        'VendorValidationPattern',
+        'VendorReleaseValidationPattern',
+        'VendorNameValidationPattern',
+        'VendorModelNumberValidationPattern',
         'CommentValidationPattern',
         'ValidationUtils',
         'sdcConfig',
@@ -93,7 +99,9 @@ export class GeneralViewModel {
                 private ComponentNameValidationPattern:RegExp,
                 private ContactIdValidationPattern:RegExp,
                 private TagValidationPattern:RegExp,
-                private VendorValidationPattern:RegExp,
+                private VendorReleaseValidationPattern:RegExp,
+                private VendorNameValidationPattern:RegExp,
+                private VendorModelNumberValidationPattern:RegExp,
                 private CommentValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils,
                 private sdcConfig:IAppConfigurtaion,
@@ -121,7 +129,9 @@ export class GeneralViewModel {
         this.$scope.validation.componentNameValidationPattern = this.ComponentNameValidationPattern;
         this.$scope.validation.contactIdValidationPattern = this.ContactIdValidationPattern;
         this.$scope.validation.tagValidationPattern = this.TagValidationPattern;
-        this.$scope.validation.vendorValidationPattern = this.VendorValidationPattern;
+        this.$scope.validation.VendorReleaseValidationPattern = this.VendorReleaseValidationPattern;
+        this.$scope.validation.VendorNameValidationPattern = this.VendorNameValidationPattern;
+        this.$scope.validation.VendorModelNumberValidationPattern = this.VendorModelNumberValidationPattern;
         this.$scope.validation.commentValidationPattern = this.CommentValidationPattern;
         this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
     };
@@ -140,12 +150,6 @@ export class GeneralViewModel {
         this.$scope.componentCategories = new componentCategories();
         this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
 
-        // Workaround to short vendor name to 25 chars
-        // Amdocs send 27 chars, and the validation pattern is 25 chars.
-        if (this.$scope.component.vendorName) {
-            this.$scope.component.vendorName = this.$scope.component.vendorName.substr(0, 25);
-        }
-
         // Init UIModel
         this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);
 
@@ -202,10 +206,7 @@ export class GeneralViewModel {
         };
 
         //TODO remove this after handling contact in UI
-        if (this.$scope.component.isProduct() && this.$scope.isCreateMode()) {
-            (<Product>this.$scope.component).contacts = [];
-            (<Product>this.$scope.component).contacts.push(this.cacheService.get("user").userId);
-        } else if (this.$scope.isCreateMode()) {
+        if (this.$scope.isCreateMode()) {
             this.$scope.component.contactId = this.cacheService.get("user").userId;
         }
 
@@ -273,6 +274,24 @@ export class GeneralViewModel {
             });
         };
 
+        this.$scope.updateIcon = ():void => {
+            this.ModalsHandler.openUpdateIconModal(this.$scope.component).then((isDirty:boolean)=> {
+                if(!this.$scope.isCreateMode()){
+                    this.$state.current.data.unsavedChanges = this.$state.current.data.unsavedChanges || isDirty;
+                }
+            }, ()=> {
+                // ERROR
+            });
+        };
+
+        this.$scope.possibleToUpdateIcon = ():boolean => {
+            if(this.$scope.componentCategories.selectedCategory && (!this.$scope.component.isResource() || this.$scope.component.vendorName)){
+                return true;
+            }else{
+                return false;
+            }
+        }
+
         this.$scope.validateName = (isInit:boolean):void => {
             if (isInit === undefined) {
                 isInit = false;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index 2ad0cbacd6..d3626803e9 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -4,122 +4,121 @@
 
         <div class="w-sdc-form-section-container">
 
-            <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
-            <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
-                <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
-                <file-upload id="fileUploadElement"
-                             class="i-sdc-form-input"
-                             element-name="fileElement"
-                             element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
-                             form-element="editForm"
-                             file-model="component.importedFile"
-                             on-file-changed-in-directive="uploadFileChangedInGeneralTab"
-                             extensions="{{importedFileExtension}}"
-                             default-text="'Browse to select file'"
-                             data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
-            </div>
-
-            <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
-            <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
-                <label class="i-sdc-form-label required">Select VSP</label>
-                <div class="i-sdc-form-file-upload i-sdc-form-input">
-                    <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span>
-                    <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
-                    <input type="button" name="fileElement"/>
-                    <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
-                </div>
-            </div>
-
-            <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
-                <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
-                <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
-                <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
-                <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
-                <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
-            </div>
-            <!--------------------- IMPORT TOSCA FILE -------------------->
-
             <div class="w-sdc-form-columns-wrapper">
 
                 <div class="w-sdc-form-column">
-
-                <!--------------------- NAME -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
-                    <label class="i-sdc-form-label required">Name</label>
-                    <input class="i-sdc-form-input"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           name="componentName"
-                           data-ng-init="isCreateMode() && validateName(true)"
-                           data-ng-maxlength="{{component.isProduct()?'25':'50'}}"
-                           maxlength="{{component.isProduct()?'25':'50'}}"
-                           data-ng-minlength="{{component.isProduct()?'4':'0'}}"
-                           minlength="{{component.isProduct()?'4':'0'}}"
-                           data-ng-model="component.name"
-                           type="text"
-                           data-required
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-pattern="validation.componentNameValidationPattern"
-                           data-ng-disabled="component.isAlreadyCertified()"
-                           data-tests-id="name"
-                           autofocus
-                           ng-readonly="isViewMode()"
-                        />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.componentName)">
-                        <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                        <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
-                        <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
-                        <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
+                    <div class="upper-general-fields">
+                        <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
+                            <div class="selected-icon-inner-container">
+                                <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
+                                <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
+                                     data-ng-class="{ 'disable': isViewMode() || !possibleToUpdateIcon() }"
+                                     ng-model="component.icon"
+                                     tooltips tooltip-content='{{component.icon | translate}}'
+                                >
+                                </div>
+                            </div>
+                        </div>
+                        <div class="name-and-category-fields">
+                            <!--------------------- NAME -------------------->
+                            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
+                                <label class="i-sdc-form-label required">Name</label>
+                                <input class="i-sdc-form-input"
+                                       data-ng-class="{'view-mode': isViewMode()}"
+                                       name="componentName"
+                                       data-ng-init="isCreateMode() && validateName(true)"
+	                               data-ng-maxlength="50"
+                                       maxlength="50"
+                                       data-ng-model="component.name"
+                                       type="text"
+                                       data-required
+                                       data-ng-model-options="{ debounce: 500 }"
+                                       data-ng-pattern="validation.componentNameValidationPattern"
+                                       data-ng-disabled="component.isAlreadyCertified()"
+                                       data-tests-id="name"
+                                       autofocus
+                                       ng-readonly="isViewMode()"
+                                />
+
+                                <div class="input-error" data-ng-show="validateField(editForm.componentName)">
+                                    <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
+                                    <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+                                    <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
+                                    <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
+                                    <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
+                                </div>
+                            </div>
+                            <!--------------------- NAME -------------------->
+
+
+
+                            <!--------------------- CATEGORIES -------------------->
+                            <div class="i-sdc-form-item"
+                     data-ng-class="{'error': validateField(editForm.category)}">
+                                <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
+                                <label class="i-sdc-form-label required">Category</label>
+                                <select class="i-sdc-form-select"
+                                        data-required
+                                        name="category"
+                                        data-ng-class="{'view-mode': isViewMode()}"
+                                        data-ng-change="onCategoryChange()"
+                                        data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
+                                        data-ng-model="componentCategories.selectedCategory"
+                                        data-tests-id="selectGeneralCategory"
+                                >
+                                    <option value="">Select category</option>
+                                    <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
+                                        <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
+                                                data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
+                                                data-tests-id="{{subCategory.name}}"
+                                                value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
+
+                                        </option>
+                                    </optgroup>
+                                    <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
+                                            data-ng-selected="component.selectedCategory===mainCategory.name"
+                                            value="{{mainCategory.name}}"
+                                            data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
+                                </select>
+
+                                <div class="input-error" data-ng-show="validateField(editForm.category)">
+                                    <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
+                                </div>
+                            </div>
+                            <!--------------------- CATEGORIES -------------------->
+                        </div>
                     </div>
-                </div>
-                <!--------------------- NAME -------------------->
+                <!--------------------- RESOURCE TAGS -------------------->
+                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
+                    <label class="i-sdc-form-label">Tags</label>
 
-                <!--------------------- FULL NAME -------------------->
-                <div ng-if="component.isProduct()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.fullName)}">
-                    <label class="i-sdc-form-label required">Full Name</label>
-                    <input class="i-sdc-form-input"
-                           name="fullName"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-change="validateName()"
-                           data-ng-maxlength="100"
-                           maxlength="100"
-                           data-ng-minlength="4"
-                           minlength="4"
-                           data-ng-model="component.fullName"
-                           type="text"
-                           data-required
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-pattern="validation.commentValidationPattern"
-                           data-tests-id="fullName"
-                           autofocus
-                           ng-readonly="isViewMode()"
-                        />
+                    <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
+                              sdc-disabled="isViewMode()"
+                              tags="component.tags"
+                              pattern="validation.tagValidationPattern"
+                              special-tag="component.name"></sdc-tags>
 
-                    <div class="input-error" data-ng-show="validateField(editForm.fullName)">
-                        <span ng-show="editForm.fullName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.fullName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                        <span ng-show="editForm.fullName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
-                        <span ng-show="editForm.fullName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
-                        <span ng-show="editForm.fullName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                    <div class="input-error" data-ng-show="validateField(editForm.tags)">
+                        <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
                     </div>
                 </div>
-                <!--------------------- NAME -------------------->
+                <!--------------------- RESOURCE TAGS -------------------->
 
                 <!--------------------- DESCRIPTION -------------------->
-                <div class="i-sdc-form-item"
+                <div class="i-sdc-form-item description-field"
                      data-ng-class="{'error': validateField(editForm.description)}">
                     <label class="i-sdc-form-label required">Description</label>
-                    <textarea class="description"
-                              name="description"
-                              data-ng-class="{'view-mode': isViewMode()}"
-                              data-ng-maxlength="1024"
-                              data-required
-                              data-ng-model="component.description"
-                              data-ng-model-options="{ debounce: 500 }"
-                              data-ng-pattern="validation.commentValidationPattern"
-                              maxlength="1024"
-                              data-tests-id="description"></textarea>
+                <textarea class="description"
+                          name="description"
+                          data-ng-class="{'view-mode': isViewMode()}"
+                          data-ng-maxlength="1024"
+                          data-required
+                          data-ng-model="component.description"
+                          data-ng-model-options="{ debounce: 500 }"
+                          data-ng-pattern="validation.commentValidationPattern"
+                          maxlength="1024"
+                          data-tests-id="description"></textarea>
                     <!-- placeholder="Description here..." -->
 
                     <div class="input-error" data-ng-show="validateField(editForm.description)">
@@ -130,110 +129,85 @@
                 </div>
                 <!--------------------- DESCRIPTION -------------------->
 
-                <!--------------------- CATEGORIES -------------------->
-                <div class="i-sdc-form-item"
-                     data-ng-class="{'error': validateField(editForm.category)}"
-                     data-ng-if="!component.isProduct()">
-                    <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
-                    <label class="i-sdc-form-label required">Category</label>
-                    <select class="i-sdc-form-select"
-                            data-required
-                            name="category"
-                            data-ng-class="{'view-mode': isViewMode()}"
-                            data-ng-change="onCategoryChange()"
-                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
-                            data-ng-model="componentCategories.selectedCategory"
-                            data-tests-id="selectGeneralCategory"
-                        >
-                        <option value="">Select category</option>
-                        <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
-                            <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
-                                    data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
-                                    data-tests-id="{{subCategory.name}}"
-                                    value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
-
-                            </option>
-                        </optgroup>
-                        <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
-                                data-ng-selected="component.selectedCategory===mainCategory.name"
-                                value="{{mainCategory.name}}"
-                                data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
-                    </select>
-
-                    <div class="input-error" data-ng-show="validateField(editForm.category)">
-                        <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
-                    </div>
-                </div>
-                <!--------------------- CATEGORIES -------------------->
-
-                <!--------------------- PROJECT CODE -------------------->
-                <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
-                     data-ng-class="{'error': validateField(editForm.projectCode)}">
-                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-model="component.projectCode"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model-options="{ debounce: 500 }"
-                           maxlength="50"
-                           data-required
-                           name="projectCode"
-                           data-ng-pattern="validation.projectCodeValidationPattern"
-                           data-tests-id="projectCode"
-                        />
+            </div><!-- Close w-sdc-form-column -->
 
-                    <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
-                        <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
-                        <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
+                <div class="w-sdc-form-column">
+                    <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
+                    <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
+                        <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
+                        <file-upload id="fileUploadElement"
+                                     class="i-sdc-form-input"
+                                     element-name="fileElement"
+                                     element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
+                                     form-element="editForm"
+                                     file-model="component.importedFile"
+                                     on-file-changed-in-directive="uploadFileChangedInGeneralTab"
+                                     extensions="{{importedFileExtension}}"
+                                     default-text="'Browse to select file'"
+                                     data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
                     </div>
-                </div>
 
+                    <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
+                    <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
+                        <label class="i-sdc-form-label required">Select VSP</label>
+                        <div class="i-sdc-form-file-upload i-sdc-form-input">
+                            <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span>
+                            <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
+                            <input type="button" name="fileElement"/>
+                            <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
+                        </div>
+                    </div>
 
-                    <!--------------------- ECOMPGENERATEDNAMING -------------------->
+                    <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
+                        <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
+                        <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
+                        <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
+                        <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
+                        <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
+                    </div>
+                    <!--------------------- IMPORT TOSCA FILE -------------------->
 
-                    <div class="i-sdc-form-item"
-                         data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
-                         data-ng-if="component.isService()">
-                        <label class="i-sdc-form-label">Ecomp Generated Naming</label>
-                        <select class="i-sdc-form-select"
-                                data-required
-                                name="ecompGeneratedNaming"
-                                data-ng-change="onEcompGeneratedNamingChange()"
-                                data-ng-class="{'view-mode': isViewMode()}"
-                                data-ng-model="component.ecompGeneratedNaming"
-                                data-tests-id="ecompGeneratedNaming">
-                            <option ng-value="true">true</option>
-                            <option ng-value="false">false</option>
-                        </select>
-                        <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
+                    <!--------------------- USER ID -------------------->
+                    <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
+                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
+                    <input class="i-sdc-form-input" type="text"
+                               data-ng-model="component.contactId"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-required="true"
+                               name="contactId"
+                               data-ng-pattern="validation.contactIdValidationPattern"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-tests-id="contactId"
+                               maxlength="50"
+                        />
 
+                        <div class="input-error" data-ng-show="validateField(editForm.contactId)">
+                            <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
+                            <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
                         </div>
                     </div>
-                    <!--------------------- CATEGORIES -------------------->
-
-                    <!--------------------- NAMING POLICY  -------------------->
-                    <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
-                        <label class="i-sdc-form-label">Naming policy</label>
-                        <input class="i-sdc-form-input"
-                               name="fullName"
-                               data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
-                               data-ng-maxlength="100"
-                               maxlength="100"
-                               data-ng-model="component.namingPolicy"
-                               type="text"
+                    <!--------------------- USER ID -------------------->
+
+                    <!--------------------- PROJECT CODE -------------------->
+                    <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
+                         data-ng-class="{'error': validateField(editForm.projectCode)}">
+                        <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-model="component.projectCode"
+                               data-ng-class="{'view-mode': isViewMode()}"
                                data-ng-model-options="{ debounce: 500 }"
-                               data-ng-pattern="validation.commentValidationPattern"
-                               data-tests-id="namingPolicy"
-                               autofocus
-                               ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
+                               maxlength="50"
+                               data-required
+                               name="projectCode"
+                               data-ng-pattern="validation.projectCodeValidationPattern"
+                               data-tests-id="projectCode"
                         />
 
-                        <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
-                            <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
-                            <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
+                            <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
+                            <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
                         </div>
                     </div>
-                    <!--------------------- NAMING POLICY  -------------------->
-
 
                 <!--------------------- VENDOR NAME -------------------->
                 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
@@ -242,20 +216,20 @@
                            data-ng-class="{'view-mode': isViewMode()}"
                            data-ng-model="component.vendorName"
                            data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="25"
+                           data-ng-maxlength="60"
                            data-required
                            ng-click="oldValue = component.vendorName"
                            name="vendorName"
                            data-ng-change="onVendorNameChange(oldValue)"
-                           data-ng-pattern="validation.vendorValidationPattern"
-                           maxlength="25"
+                           data-ng-pattern="validation.VendorNameValidationPattern"
+                           maxlength="60"
                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
                            data-tests-id="vendorName"
-                        />
+                    />
 
                     <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
                         <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                        <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
                         <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
                     </div>
 
@@ -275,80 +249,160 @@
                            data-ng-maxlength="25"
                            data-required
                            name="vendorRelease"
-                           data-ng-pattern="validation.vendorValidationPattern"
+                           data-ng-pattern="validation.VendorReleaseValidationPattern"
                            maxlength="25"
                            data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
                            data-tests-id="vendorRelease"
-                        />
+                    />
 
                     <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
                         <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
-                        <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span>
+                        <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
                         <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
                     </div>
                 </div>
                 <!--------------------- VENDOR RELEASE -------------------->
 
+                <!--------------------- Resource Model Number -------------------->
+                <div ng-if="component.isResource()"
+                     class="i-sdc-form-item"
+                     data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
+                    <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_RESOURCE_MODEL_NUMBER"></label>
+                    <input class="i-sdc-form-input" type="text"
+                           data-ng-class="{'view-mode': isViewMode()}"
+                           data-ng-model="component.resourceVendorModelNumber"
+                           data-ng-model-options="{ debounce: 500 }"
+                           data-ng-maxlength="65"
+                           name="resourceVendorModelNumber"
+                           data-ng-pattern="validation.VendorModelNumberValidationPattern"
+                           maxlength="65"
+                           data-tests-id="resourceVendorModelNumber"
+                    />
 
+                    <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
+                        <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
+                        <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                    </div>
+                </div>
+                <!--------------------- Resource Model Number -------------------->
 
-            </div><!-- Close w-sdc-form-column -->
-
-                <div class="w-sdc-form-column">
-
-                <!--------------------- RESOURCE TAGS -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
-                    <label class="i-sdc-form-label">Tags</label>
+                    <!--------------------- ECOMPGENERATEDNAMING -------------------->
 
-                    <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
-                              sdc-disabled="isViewMode()"
-                              tags="component.tags"
-                              pattern="validation.tagValidationPattern"
-                              special-tag="component.name"></sdc-tags>
+                    <div class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
+                         data-ng-if="component.isService()">
+                        <label class="i-sdc-form-label">Ecomp Generated Naming</label>
+                        <select class="i-sdc-form-select"
+                                data-required
+                                name="ecompGeneratedNaming"
+                                data-ng-change="onEcompGeneratedNamingChange()"
+                                data-ng-class="{'view-mode': isViewMode()}"
+                                data-ng-model="component.ecompGeneratedNaming"
+                                data-tests-id="ecompGeneratedNaming">
+                            <option ng-value="true">true</option>
+                            <option ng-value="false">false</option>
+                        </select>
+                        <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
 
-                    <div class="input-error" data-ng-show="validateField(editForm.tags)">
-                        <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
+                        </div>
                     </div>
-                </div>
-                <!--------------------- RESOURCE TAGS -------------------->
+                    <!--------------------- CATEGORIES -------------------->
 
-                <!--------------------- USER ID -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
-                    <label class="i-sdc-form-label " data-ng-class="{'required':!component.isProduct()}" translate="GENERAL_LABEL_CONTACT_ID"></label>
-                    <input class="i-sdc-form-input" type="text" data-ng-if="!component.isProduct()"
-                           data-ng-model="component.contactId"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-required="!component.isProduct()"
-                           name="contactId"
-                           data-ng-pattern="validation.contactIdValidationPattern"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-tests-id="contactId"
-                           maxlength="50"
+                    <!--------------------- NAMING POLICY  -------------------->
+                    <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
+                        <label class="i-sdc-form-label">Naming policy</label>
+                        <input class="i-sdc-form-input"
+                               name="fullName"
+                               data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
+                               data-ng-maxlength="100"
+                               maxlength="100"
+                               data-ng-model="component.namingPolicy"
+                               type="text"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-ng-pattern="validation.commentValidationPattern"
+                               data-tests-id="namingPolicy"
+                               autofocus
+                               ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
                         />
-                    <input class="i-sdc-form-input" type="text" data-ng-if="component.isProduct()"
-                           data-ng-model="component.contacts[0]"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-required="!component.isProduct()"
-                           name="contactId"
-                           data-ng-pattern="validation.contactIdValidationPattern"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-tests-id="contactId"
-                           maxlength="50"
-                    />
 
-                    <div class="input-error" data-ng-show="validateField(editForm.contactId)">
-                        <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
-                        <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
+                        <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
+                            <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
+                            <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
                     </div>
-                </div>
-                <!--------------------- USER ID -------------------->
-
+                    <!--------------------- NAMING POLICY  -------------------->
 
+                    <!--------------------- Service Type -------------------->
+                    <div ng-if="component.isService()"
+                         class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.serviceType)}">
+                        <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-model="component.serviceType"
+                               data-ng-model-options="{ debounce: 500 }"
+                               name="serviceType"
+                               data-tests-id="serviceType"
+                               data-ng-maxlength="25"
+                               data-ng-pattern="validation.VendorReleaseValidationPattern"
+                               maxlength="25"
+                        />
+                        <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
+                            <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                            <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- Service Type -------------------->
+
+                    <!--------------------- Service Role -------------------->
+                    <div ng-if="component.isService()"
+                         class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.serviceRole)}">
+                        <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-model="component.serviceRole"
+                               data-ng-model-options="{ debounce: 500 }"
+                               name="serviceRole"
+                               data-tests-id="serviceRole"
+                               data-ng-maxlength="25"
+                               data-ng-pattern="validation.VendorReleaseValidationPattern"
+                               maxlength="25"
+                        />
+                        <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
+                            <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                            <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- Service Role -------------------->
+                    <div class="meta-data" data-ng-if="component.creationDate">
+                        <div>
+                            <b>Created:</b>
+                        </div>
+                        <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
+                        <div>
+                            <b>Modifed:</b>
+                        </div>
+                        <div class="meta-data-item-value">
+                            {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
+                        </div>
+                        <div>
+                            <b>UUID:</b>
+                        </div>
+                        <div class="meta-data-item-value">
+                            {{component.uuid}}
+                        </div>
+                        <div>
+                            <b>Invariant UUID:</b>
+                        </div>
+                        <div class="meta-data-item-value">
+                            {{component.invariantUUID}}
+                        </div>
+                    </div>
                 </div><!-- Close w-sdc-form-column -->
             </div>
 
         </div><!-- Close w-sdc-form-section-container -->
 
     </form>
-
 </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
index caa755cce3..9633ec5bb6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
@@ -1,8 +1,8 @@
 .sdc-workspace-general-step {
-
+    display: flex;
     .w-sdc-form {
         padding: 0;
-
+        flex-grow: 10;
         .i-sdc-form-file-upload{
             input[type="button"] {
                 cursor: pointer;
@@ -33,6 +33,14 @@
             }
         }
 
+        .description{
+            height: 300px;
+        }
+
+        .i-sdc-form-item.description-field{
+            margin-bottom: 0;
+        }
+
         .w-sdc-form-section-container {
             text-align: center;
         }
@@ -43,6 +51,7 @@
                 width: auto;
                 padding: 10px;
             }
+            margin-bottom: 15px;
         }
 
         .i-sdc-form-label {
@@ -63,6 +72,73 @@
 
     }
 
+    .w-sdc-form-column {
+        position: relative;
+    }
+
+    .meta-data{
+        padding: 8px 0 2px 20px;
+        text-align: left;
+        background-color: @tlv_color_t;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        .meta-data-item-value{
+            padding-bottom: 6px;
+        }
+    }
+
+    .upper-general-fields{
+        display: flex;
+    }
+
+    .selected-icon-container{
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        .selected-icon-inner-container{
+            height: 64px;
+            width: 64px;
+            margin: 0 auto;
+        }
+        .update-component-icon{
+            position: relative;
+            float: right;
+            cursor: pointer;
+        }
+        .selected-icon{
+            position: relative;
+            top: -20px;
+            z-index: -1;
+            &.disable{
+                position: inherit;
+            }
+        }
+        &.show-only-on-over{
+            .update-component-icon{
+                display: none;
+            }
+            .selected-icon{
+                position: inherit;
+            }
+            &:hover{
+                .update-component-icon{
+                    display: inline-block;
+                }
+                .selected-icon{
+                    position: relative;
+                }
+            }
+        }
+    }
+
+    .name-and-category-fields{
+        flex-grow: 5;
+    }
+
+
+
+
 }
 
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html
deleted file mode 100644
index aac14e0e84..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="workspace-icons">
-
-    <form novalidate class="w-sdc-form" name="iconForm">
-        <label class="i-sdc-form-label icons-label required">Icons</label>
-        <div class="selected-icon-container" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="i-sdc-form-item-suggested-icon large selected-icon {{iconSprite}} {{component.icon}}"
-                 data-ng-class="{ 'disable': isViewMode() }"
-                 ng-model="component.icon"
-                 tooltips tooltip-content='{{component.icon | translate}}'
-                >
-            </div>
-        </div>
-        <div data-ng-class="{'view-mode': isViewMode()}" class="icons-text">Select one of the icons below for the asset</div>
-        <div class="i-sdc-form-item suggested-icons-container" data-ng-class="{'view-mode no-pointer-events' : isViewMode()}">
-            <div class ="suggested-icon-wrapper" ng-class="component.icon==='{{iconSrc}}' ? 'selected' : '' "  data-ng-repeat="iconSrc in icons track by $index">
-                <div class="i-sdc-form-item-suggested-icon large {{iconSprite}} {{iconSrc}}" data-ng-class="component.isAlreadyCertified() ||  isViewMode() ? 'disable':'hand'"
-                     ng-model="component.icon"
-                     data-tests-id="{{iconSrc}} iconBox"
-                     data-ng-click="!component.isAlreadyCertified() && setComponentIcon(iconSrc)"
-                     tooltips tooltip-content='{{iconSrc | translate}}'
-                    >
-                </div>
-            </div>
-        </div>
-    </form>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less
deleted file mode 100644
index 65f946f395..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less
+++ /dev/null
@@ -1,65 +0,0 @@
-.workspace-icons {
-
-    width: 89%;
-    display: inline-block;
-    text-align: center;
-    align-items: center;
-
-    .w-sdc-form {
-        padding-top: 0px;
-        padding-bottom:  0px;
-        .selected-icon-container {
-            text-align: left;
-            border: 1px solid #cfcfcf;
-            clear: both;
-            margin-bottom: 30px;
-            padding: 2px 0px 5px 5px;
-            .selected-icon {
-                margin: 8px 5px 0px 6px;
-            }
-        }
-
-        .suggested-icons-container {
-            text-align: left;
-            border: 1px solid #cfcfcf;
-            clear: both;
-            padding: 2px 0px 5px 5px;
-            height: 340px;
-            margin-bottom: 0px;
-
-            .suggested-icon-wrapper {
-                margin: 8px 5px 0px 6px;
-                display: inline-block;
-
-                &.selected {
-                    border: 2px solid @main_color_a;
-                    border-radius: 35px;
-                    display: inline-block;
-                    line-height: 0px;
-                    padding: 3px;
-                }
-
-            }
-            .suggested-icon {
-                // margin: 8px 5px 0px 6px;
-                display: inline-block;
-                &.disable{
-                    opacity: 0.4;
-                }
-            }
-        }
-
-        .icons-label {
-            float: left;
-        }
-
-        .icons-text {
-            text-align: left;
-            line-height: 32px;
-            padding-left: 10px;
-            width: 100%;
-            border: 1px solid #cfcfcf;
-            border-bottom: none;
-        }
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
index 3ba9cf47d5..5e69c44e9b 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
@@ -12,7 +12,7 @@
     }
 
     .table-container-flex {
-        margin-top: 27px;
+        margin-top: 0;
 
         .item-opened{
             word-wrap: break-word;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
index eff5c5395b..17c18e1741 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
@@ -216,7 +216,7 @@
     }
 
     .table-container-flex {
-        margin-top: 27px;
+        margin-top: 0;
         width: 46%;
         min-width: 46%;
         display: inline-block;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts
deleted file mode 100644
index c891875f52..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {ComponentFactory} from "app/utils";
-import {Product, IGroup, ISubCategory, IMainCategory} from "app/models";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {CacheService} from "app/services";
-
-export interface IProductHierarchyScope extends IWorkspaceViewModelScope {
-
-    categoriesOptions:Array<IMainCategory>;
-    product:Product;
-    isLoading:boolean;
-    showDropDown:boolean;
-
-    onInputTextClicked():void;
-    onGroupSelected(category:IMainCategory, subcategory:ISubCategory, group:IGroup):void;
-    clickOutside():void;
-    deleteGroup(uniqueId:string):void;
-}
-
-export class ProductHierarchyViewModel {
-
-    static '$inject' = [
-        '$scope',
-        'Sdc.Services.CacheService',
-        'ComponentFactory',
-        '$state'
-    ];
-
-    constructor(private $scope:IProductHierarchyScope,
-                private cacheService:CacheService,
-                private ComponentFactory:ComponentFactory,
-                private $state:ng.ui.IStateService) {
-
-
-        this.$scope.product = <Product>this.$scope.getComponent();
-        this.$scope.setValidState(true);
-        this.initScope();
-        this.$scope.updateSelectedMenuItem();
-    }
-
-    private initCategories = () => {
-        this.$scope.categoriesOptions = angular.copy(this.cacheService.get('productCategories'));
-        let selectedGroup:Array<IGroup> = [];
-        _.forEach(this.$scope.product.categories, (category:IMainCategory) => {
-            _.forEach(category.subcategories, (subcategory:ISubCategory) => {
-                selectedGroup = selectedGroup.concat(subcategory.groupings);
-            });
-        });
-        _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => {
-            _.forEach(category.subcategories, (subcategory:ISubCategory) => {
-                _.forEach(subcategory.groupings, (group:ISubCategory) => {
-                    let componentGroup:IGroup = _.find(selectedGroup, (componentGroupObj) => {
-                        return componentGroupObj.uniqueId == group.uniqueId;
-                    });
-                    if (componentGroup) {
-                        group.isDisabled = true;
-                    }
-                });
-            });
-        });
-    };
-
-    private setFormValidation = ():void => {
-
-        this.$scope.setValidState(true);
-
-    };
-
-    private initScope = ():void => {
-        this.$scope.isLoading = false;
-        this.$scope.showDropDown = false;
-        this.initCategories();
-        this.setFormValidation();
-
-        this.$scope.onGroupSelected = (category:IMainCategory, subcategory:ISubCategory, group:IGroup):void => {
-            this.$scope.product.addGroup(category, subcategory, group);
-            this.$state.current.data.unsavedChanges = !this.$scope.isViewMode();
-            group.isDisabled = true;
-            this.$scope.showDropDown = false;
-            this.setFormValidation();
-        };
-
-        this.$scope.onInputTextClicked = ():void => {//just edit the component in place, no pop up nor server update ?
-            this.$scope.showDropDown = !this.$scope.showDropDown;
-        };
-
-        this.$scope.clickOutside = ():any => {
-            this.$scope.showDropDown = false;
-        };
-
-        this.$scope.deleteGroup = (uniqueId:string):void => {
-            //delete group from component
-            this.$scope.product.deleteGroup(uniqueId);
-            this.$state.current.data.unsavedChanges = !this.$scope.isViewMode();
-            this.setFormValidation();
-            //enabled group
-            _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => {
-                _.forEach(category.subcategories, (subcategory:ISubCategory) => {
-                    let groupObj:IGroup = _.find(subcategory.groupings, (group) => {
-                        return group.uniqueId === uniqueId;
-                    });
-                    if (groupObj) {
-                        groupObj.isDisabled = false;
-                    }
-                });
-            });
-        }
-    };
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html
deleted file mode 100644
index 2335ad7c74..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="workspace-hierarchy">
-    <div class="dropdown-container"  clicked-outside="{onClickedOutside: 'clickOutside()', clickedOutsideEnable: 'true'}" >
-        <input placeholder="Add Group" data-ng-click="onInputTextClicked()" class="dropdown-input-text"  data-ng-model="search.filterTerms" data-ng-disabled="isViewMode()"  data-ng-class="{'view-mode': isViewMode()}" data-ng-model-options="{debounce: 200}"/>
-        <div data-ng-class="{'show': showDropDown}" class="dropdown-content" >
-            <perfect-scrollbar scroll-y-margin-offset="0" include-padding="false" class="scrollbar-container">
-                <div ng-repeat="category in categoriesOptions track by $index">
-                    <div ng-repeat="subcategory in category.subcategories track by $index">
-                        <div class="dropdown-option" ng-show="!category.filteredGroup || category.filteredGroup.length > 0">
-                            <div class="category-container">
-                                <div class="category">{{category.name}}</div>
-                                <div class="subcategory">{{subcategory.name}}</div>
-                            </div>
-                            <div class="groupings-container">
-                                <div ng-init="group.filterTerms = group.name + ' ' + category.name + ' ' + subcategory.name"
-                                     ng-repeat="group in (category.filteredGroup = (subcategory.groupings  | filter:search )) track by $index">
-                                    <div class="group" data-ng-disabled="group.isDisabled" data-ng-class="{'disabled-group': group.isDisabled}" ng-click="onGroupSelected(category, subcategory, group)">
-                                        <span >{{group.name}}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </perfect-scrollbar>
-        </div>
-    </div>
-    <div class="hierarchy-groups-container no-border-top" data-ng-class="{'view-mode': isViewMode()}">
-        <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-            <div ng-if="!product.categories.length ||  product.categories.length === 0" class="no-groups-text" translate="NEW_PRODUCT_NO_CATEGORIES_TO_DISPLAY"></div>
-            <div ng-repeat="category in product.categories track by $index">
-                <div ng-repeat="subcategory in category.subcategories track by $index">
-                    <div class="group-tag" ng-repeat="group in subcategory.groupings track by $index"
-                         data-ng-init="tooltip = '<b>' + category.name + '</b><br />' + subcategory.name">
-                        <sdc-tag sdc-disable="isViewMode()" data-on-delete="deleteGroup(uniqueId)" data-tag-data="{tag: group.name, tooltip: tooltip, id: group.uniqueId }"></sdc-tag>
-                    </div>
-                </div>
-            </div>
-        </perfect-scrollbar>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less
deleted file mode 100644
index c992558ed2..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less
+++ /dev/null
@@ -1,130 +0,0 @@
-.workspace-hierarchy {
-    display: inline-block;
-    width: 93%;
-
-    .scrollbar-container{
-        max-height:400px;
-        .perfect-scrollbar;
-    }
-
-    .dropdown-container {
-        position: relative;
-        display: inline-block;
-        width: 100%;
-
-        &:after{
-            top: 47%;
-            right: 1%;
-            border: solid transparent;
-            content: " ";
-            height: 0;
-            width: 0;
-            position: absolute;
-            pointer-events: none;
-            border-color: rgba(0, 0, 0, 0);
-            border-top-color: black;
-            border-width: 4px;
-            margin-left: -4px;
-        }
-
-        .dropdown-input-text {
-            width: 100%;
-            padding: 4px 10px;
-        }
-
-        .dropdown-content {
-            .perfect-scrollbar;
-            border: 1px solid #d8d8d8;
-            display: none;
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            .bg_c;
-            max-height: 400px;
-            z-index: 999999;
-
-            .dropdown-option {
-                border-bottom: 1px solid #d8d8d8;
-                display: inline-block;
-                width: 100%;
-            }
-
-            .category-container{
-                width: 250px;
-                float: left;
-                padding-left: 5px;
-
-                .category {
-                    .bold;
-                    padding: 3px 3px 2px 3px;
-                    &:after{
-                        .sprite;
-                        .arrow-left;
-                        content: '';
-                        margin-left: 5px;
-                        transform: rotate(180deg);
-                    }
-                }
-                .subcategory {
-                    padding-left: 3px;
-                }
-            }
-
-            .groupings-container{
-                display: inline-block;
-                width: 424px;
-                border-left: 1px solid #d8d8d8;
-                min-height: 55px;
-                .group{
-                    padding: 3px 3px 3px 10px;
-                    &:hover{
-                        .hand;
-                        .bg_n;
-                    }
-                    &.disabled-group {
-                        opacity: 0.5;
-                        &:hover{
-                            cursor: auto;
-                            .bg_c;
-                        }
-                    }
-                }
-            }
-
-            .seperator {
-                height: 1px;
-                width: 100%;
-                .bg_j;
-                margin: 5px 0px;
-            }
-        }
-        .show {
-            display: block;
-        }
-    }
-
-    .hierarchy-groups-container{
-        .b_9;
-        width: 100%;
-        border: 1px solid #d8d8d8;
-        height: 425px;
-        padding: 15px;
-        text-align: center;
-
-        .scrollbar-container {
-            z-index: 0;
-        }
-
-        .no-group-text{
-            text-align: center;
-            margin-top:25px;
-            a {
-                cursor: pointer;
-            }
-        }
-        .group-tag{
-            display: inline-block;
-            float: left;
-        }
-    }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less
index 3e8d6c3fbd..48c462e143 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less
@@ -76,7 +76,7 @@
     }
 
     .table-container-flex {
-        margin-top: 27px;
+        margin-top: 0;
 
         .text{
             overflow: hidden;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
index 6dfec2980f..23be3c3548 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
@@ -1,5 +1,5 @@
 .workspace-tosca-artifact {
-    width: 93%;
+    width: 100%;
     display: inline-block;
     .w-sdc-classic-btn {
         float: right;
@@ -18,8 +18,7 @@
 
 
     .table-container-flex {
-        margin-top: 27px;
-
+        margin-top: 0;
         .item-opened{
             word-wrap: break-word;
         }
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 21bd199aac..ec8b04dbdb 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
@@ -77,7 +77,6 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
     changeLifecycleState(state:string):void;
     enabledTabs():void
     isDesigner():boolean;
-    isProductManager():boolean;
     isViewMode():boolean;
     isEditMode():boolean;
     isCreateMode():boolean;
@@ -91,6 +90,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
     updateSelectedMenuItem():void;
     uploadFileChangedInGeneralTab():void;
     updateMenuComponentName(ComponentName:string):void;
+    getTabTitle():string;
     reload(component:Component):void;
 }
 
@@ -149,9 +149,6 @@ export class WorkspaceViewModel {
         } else {
             if (this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT &&
                 this.$scope.component.lastUpdaterUserId === this.cacheService.get("user").userId) {
-                if (this.$scope.component.isProduct() && this.role == Role.PRODUCT_MANAGER) {
-                    mode = WorkspaceMode.EDIT;
-                }
                 if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role == Role.DESIGNER) {
                     mode = WorkspaceMode.EDIT;
                 }
@@ -171,7 +168,7 @@ export class WorkspaceViewModel {
     };
 
     private initLeftPalette = ():void => {
-        this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component.componentType);
+        this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component);
     };
 
     private initScope = ():void => {
@@ -192,7 +189,7 @@ export class WorkspaceViewModel {
         this.$scope.$state = this.$state;
         this.$scope.isLoading = false;
         this.$scope.isComposition = (this.$state.current.name.indexOf(States.WORKSPACE_COMPOSITION) > -1);
-        this.$scope.isDeployment = (this.$state.current.name.indexOf(States.WORKSPACE_DEPLOYMENT) > -1);
+        this.$scope.isDeployment = this.$state.current.name == States.WORKSPACE_DEPLOYMENT;
         this.$scope.progressService = this.progressService;
 
         this.$scope.getComponent = ():Component => {
@@ -269,7 +266,7 @@ export class WorkspaceViewModel {
                 type: this.$scope.componentType.toLowerCase(),
                 mode: WorkspaceMode.VIEW,
                 components: this.$state.params['components']
-            },{reload: true});
+            }, {reload: true});
 
         };
 
@@ -431,7 +428,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);
@@ -565,18 +562,13 @@ export class WorkspaceViewModel {
             return this.role == Role.DESIGNER;
         };
 
-        this.$scope.isProductManager = ():boolean => {
-            return this.role == Role.PRODUCT_MANAGER;
-        };
-
         this.$scope.isDisableMode = ():boolean => {
             return this.$scope.mode === WorkspaceMode.VIEW && this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKIN;
         };
 
         this.$scope.showFullIcons = ():boolean => {
-            //we show revert and save icons only in general\icon view
-            return this.$state.current.name === States.WORKSPACE_GENERAL ||
-                this.$state.current.name === States.WORKSPACE_ICONS;
+            //we show revert and save icons only in general view
+            return this.$state.current.name === States.WORKSPACE_GENERAL;
         };
 
         this.$scope.isCreateMode = ():boolean => {
@@ -593,8 +585,7 @@ export class WorkspaceViewModel {
         };
 
         this.$scope.showLifecycleIcon = ():boolean => {
-            return this.role == Role.DESIGNER ||
-                this.role == Role.PRODUCT_MANAGER;
+            return this.role == Role.DESIGNER;
         };
 
         this.$scope.getStatus = ():string => {
@@ -612,13 +603,6 @@ export class WorkspaceViewModel {
             if (!this.$scope.component.isLatestVersion() && Role.OPS != this.role && Role.GOVERNOR != this.role) {
                 result = false;
             }
-            if (this.role === Role.PRODUCT_MANAGER && !this.$scope.component.isProduct()) {
-                result = false;
-            }
-            if ((this.role === Role.DESIGNER || this.role === Role.TESTER)
-                && this.$scope.component.isProduct()) {
-                result = false;
-            }
             if (ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState && this.$scope.isViewMode()) {
                 result = false;
             }
@@ -639,10 +623,16 @@ export class WorkspaceViewModel {
         this.$scope.$watch('$state.current.name', (newVal:string):void => {
             if (newVal) {
                 this.$scope.isComposition = (newVal.indexOf(States.WORKSPACE_COMPOSITION) > -1);
-                this.$scope.isDeployment = (newVal.indexOf(States.WORKSPACE_DEPLOYMENT) > -1);
+                this.$scope.isDeployment = newVal == States.WORKSPACE_DEPLOYMENT;
             }
         });
 
+        this.$scope.getTabTitle = ():string => {
+            return this.$scope.leftBarTabs.menuItems.find((menuItem:MenuItem)=>{
+                return menuItem.state == this.$scope.$state.current.name;
+            }).text;
+        };
+
         this.$scope.reload = (component:Component):void => {
             this.$state.go(this.$state.current.name,{id:component.uniqueId},{reload:true});
         };
@@ -658,7 +648,11 @@ export class WorkspaceViewModel {
 
     private initVersionObject = ():void => {
         this.$scope.versionsList = (this.$scope.component.getAllVersionsAsSortedArray()).reverse();
-        this.$scope.changeVersion = {selectedVersion: _.find(this.$scope.versionsList, {versionId: this.$scope.component.uniqueId})};
+        this.$scope.changeVersion = {
+            selectedVersion: _.find(this.$scope.versionsList, (versionObj)=> {
+                return versionObj.versionId === this.$scope.component.uniqueId;
+            })
+        };
     };
 
     private getNewComponentBreadcrumbItem = ():MenuItem => {
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html
index dbb7fa6d63..19ebefe7a5 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view.html
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html
@@ -3,8 +3,11 @@
     <div class="w-sdc-main-container">
 
         <div class="w-sdc-left-sidebar" data-ng-if="!isComposition">
-            <div class="i-sdc-left-sidebar-item">
-                <expand-collapse-menu-box menu-items-group="leftBarTabs" menu-title="{{menuComponentTitle}}" parent-scope="this"> </expand-collapse-menu-box>
+            <div class="menu-header" tooltips tooltip-content="{{menuComponentTitle}}">
+                {{menuComponentTitle}}
+            </div>
+            <div class="i-sdc-designer-sidebar-section-content-item" ng-class="{'selected': menuItem.state == $state.current.name}" ng-repeat="menuItem in leftBarTabs.menuItems track by $index">
+                <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemPressed(menuItem.state)" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}">{{menuItem.text}}</div>
             </div>
         </div>
 
@@ -54,22 +57,22 @@
 
                     <button ng-if="!isViewMode() && isCreateMode()" data-ng-disabled="!isValidForm || isDisableMode() || isLoading" ng-click="save()" class="tlv-btn outline green" data-tests-id="create/save">Create</button>
 
-                    <span data-ng-if="(isDesigner() || isProductManager()) && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip=""
+                    <span data-ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip=""
                         data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode()}" ng-click="changeLifecycleState('deleteVersion')"
                         class="sprite-new delete-btn" data-tests-id="delete_version" sdc-smart-tooltip="">Delete</span>
 
                     <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
                           data-ng-show="showFullIcons()" sdc-smart-tooltip="">Revert</span>
 
-                    <span  data-ng-if="isComposition && !component.isProduct()" class="sprite-new print-screen-btn" entity="component" print-graph-screen data-tests-id="printScreen"></span>
+                    <span  data-ng-if="isComposition" class="sprite-new print-screen-btn" entity="component" print-graph-screen data-tests-id="printScreen"></span>
                     <span class="delimiter"></span>
                     <span class="sprite-new x-btn" data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip="">Close</span>
 
                 </div>
             </div>
-
-            <div data-ng-if="component.creationDate && (!isComposition && !isDeployment)" class="sdc-asset-creation-info"><b>Created:</b>&nbsp;{{component.creationDate | date:'MM/dd/yyyy'}},&nbsp;{{component.creatorFullName}}&nbsp;|&nbsp;<b>Modifed:</b>&nbsp;{{component.lastUpdateDate | date:'MM/dd/yyyy'}}&nbsp;|&nbsp;<b>UUID:</b>&nbsp;{{component.uuid}}<b>&nbsp;Invariant UUID:</b>&nbsp;{{component.invariantUUID}}</div>
-
+            <div class="tab-title" data-ng-if="!isComposition && !isDeployment">
+                {{getTabTitle()}}
+            </div>
             <div class="w-sdc-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view></div>
         </div>
     </div>
diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less
index 278708ca33..b7331b5f93 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace.less
+++ b/catalog-ui/src/app/view-models/workspace/workspace.less
@@ -27,10 +27,46 @@
 
     }
     .w-sdc-left-sidebar {
-        padding: 3px 3px 0px 0px;
-        background-color: @main_color_p;
-        box-shadow: 7px -3px 6px -8px @main_color_n;
+        padding: 0px;
+        background-color: @tlv_color_t;
+        box-shadow: none;
         z-index: 2;
+        border-right: 1px solid @main_color_o;
+        .menu-header{
+            border-bottom: 1px solid @main_color_o;
+            height: 53px;
+            .f-type._16_m;
+            font-weight: 700;
+            line-height: 53px;
+            padding-left: 40px;
+            padding-right: 10px;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            white-space: nowrap;
+        }
+        .i-sdc-designer-sidebar-section-content-item{
+            .f-type._13_m;
+            color: @main_color_m;
+            margin-left: 20px;
+            padding-left: 20px;
+            margin-top: 20px;
+            height: 17px;
+            .hand;
+            &:hover{
+                color: @func_color_s;
+                font-weight: 600;
+            }
+            &.selected{
+                border-left: 4px solid @main_color_a;
+                color: @main_color_a;
+                margin-left: 18px;
+                padding-left: 18px;
+                font-weight: 600;
+
+            }
+        }
     }
 
     .sdc-asset-creation-info {
@@ -128,17 +164,21 @@
                 margin-top: 6px;
             }
         }
+        .tab-title{
+            height: 110px;
+            padding-left: 100px;
+            line-height: 110px;
+            .f-type ._28;
+        }
         .w-sdc-main-container-body-content {
-            height:calc(~'100% - @{action_nav_height}');
-
-            text-align: center;
+            height:calc(~'100% - @{action_nav_height} - @{tab_title}');
             align-items: center;
-            padding: 40px 14% 20px 14%;
+            padding: 0 100px 20px 100px;
             &.third-party {
                 text-align: left;
                 padding: 0;
                 position: absolute;
-                top: @action_nav_height;
+                top: @action_nav_height + @tab_title;
                 left: 0;
                 right: 0;
                 bottom: 0;
@@ -147,7 +187,3 @@
     }
 }
 
-
-.properties-assignment  .sdc-workspace-container  .w-sdc-main-right-container  .w-sdc-main-container-body-content{
-    padding: 80px 2% 40px 2%;
-}