Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

27 files changed, 221 insertions, 185 deletions

diff --git a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html
index 150f7c2554..924d46e932 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html
+++ b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html
@@ -22,5 +22,4 @@
         <ng-include src="templateUrl"  ng-if="true"></ng-include>
     </div>
 
-    <ecomp-footer></ecomp-footer>
 </div>
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts
index e1f3a50b44..db94a475d1 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts
+++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts
@@ -20,8 +20,8 @@
 
 'use strict';
 import {ModalsHandler} from "app/utils";
-import {IUserResource, IUserResourceClass} from "app/services";
 import {User, IUserProperties, IUser, IAppConfigurtaion} from "app/models";
+import {UserService} from "../../../ng2/services/user.service";
 
 interface IUserManagementViewModelScope extends ng.IScope {
     sdcConfig:IAppConfigurtaion;
@@ -33,7 +33,7 @@ interface IUserManagementViewModelScope extends ng.IScope {
     tableHeadersList:any;
     roles:Array<string>;
     newUser:IUser;
-    currentUser:IUserResource;
+    currentUser:IUserProperties;
     userIdValidationPattern:RegExp;
     editForm:ng.IFormController;
     getAllUsers():void;
@@ -53,7 +53,7 @@ export class UserManagementViewModel {
     static '$inject' = [
         '$scope',
         'sdcConfig',
-        'Sdc.Services.UserResourceService',
+        'UserServiceNg2',
         'UserIdValidationPattern',
         '$filter',
         'ModalsHandler'
@@ -61,7 +61,7 @@ export class UserManagementViewModel {
 
     constructor(private $scope:IUserManagementViewModelScope,
                 private sdcConfig:IAppConfigurtaion,
-                private userResourceService:IUserResourceClass,
+                private userService:UserService,
                 private UserIdValidationPattern:RegExp,
                 private $filter:ng.IFilterService,
                 private ModalsHandler:ModalsHandler) {
@@ -85,7 +85,7 @@ export class UserManagementViewModel {
             });
             this.$scope.isLoading = false;
         };
-        this.userResourceService.getAllUsers(onSuccess, onError);
+        this.userService.getAllUsers().subscribe(onSuccess, onError);
     };
 
     private updateUserFilterTerm = (user:IUserProperties):void => {
@@ -111,11 +111,11 @@ export class UserManagementViewModel {
         this.$scope.reverse = false;
         this.$scope.roles = this.sdcConfig.roles;
         this.$scope.isNewUser = false;
-        this.$scope.currentUser = this.userResourceService.getLoggedinUser();
+        this.$scope.currentUser = this.userService.getLoggedinUser();
         this.getAllUsers();
 
-        let resource:IUserResource = <IUserResource>{};
-        this.$scope.newUser = new User(resource);
+        let userInfo:IUserProperties = <IUserProperties>{};
+        this.$scope.newUser = new User(userInfo);
 
         this.$scope.sort = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending
             this.$scope.isNewUser = false;
@@ -131,13 +131,12 @@ export class UserManagementViewModel {
             };
 
             let onSuccess = (response:IUserProperties) => {
-                this.$scope.newUser.resource['index'] = this.$scope.usersList.length;
-                this.$scope.newUser.resource.lastLoginTime = "0";
-                this.$scope.newUser.resource.status = response.status;
-                this.updateUserFilterTerm(this.$scope.newUser.resource);
-                this.$scope.usersList.unshift(this.$scope.newUser.resource);
+                this.$scope.newUser.userInfo.lastLoginTime = "0";
+                this.$scope.newUser.userInfo.status = response.status;
+                this.updateUserFilterTerm(this.$scope.newUser.userInfo);
+                this.$scope.usersList.push(this.$scope.newUser.userInfo);
                 this.$scope.isNewUser = true;
-                this.$scope.sortBy = 'index';
+                this.$scope.sortBy = null;
                 this.$scope.reverse = true;
                 this.$scope.isLoading = false;
                 this.$scope.newUser = new User(null);
@@ -147,10 +146,10 @@ export class UserManagementViewModel {
                     _self.$scope.isNewUser = false;
                 }, 7000);
             };
-            this.userResourceService.createUser({
-                userId: this.$scope.newUser.resource.userId,
-                role: this.$scope.newUser.resource.role
-            }, onSuccess, onError);
+            this.userService.createUser({
+                userId: this.$scope.newUser.userInfo.userId,
+                role: this.$scope.newUser.userInfo.role
+            }).subscribe(onSuccess, onError);
         };
 
 
@@ -174,7 +173,7 @@ export class UserManagementViewModel {
                 this.updateUserFilterTerm(user);
             };
 
-            this.userResourceService.editUserRole({id: user.userId, role: user.role}, onSuccess, onError);
+            this.userService.editUserRole(user.userId, user.role).subscribe(onSuccess, onError);
         };
 
         this.$scope.saveUserChanges = (user:IUserProperties):void => {
@@ -198,7 +197,7 @@ export class UserManagementViewModel {
                     _.remove(this.$scope.usersList, {userId: userId});
                     this.$scope.isLoading = false;
                 };
-                this.userResourceService.deleteUser({id: userId}, onSuccess, onError);
+                this.userService.deleteUser(userId).subscribe(onSuccess, onError);
             };
 
             let title:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TITLE");
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html
index d2983873cc..2f94fb4aee 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html
+++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html
@@ -14,7 +14,7 @@
             <div class="sdc-user-management-top-bar-wrapper">
                 <div class="i-sdc-form-item sdc-user-management-top-bar-form-container" data-ng-class="{error:(editForm.contactId.$dirty && editForm.contactId.$invalid)}">
                     <input ng-focus="search.filterTerm=''" type="text"
-                           data-ng-model="newUser.resource.userId"
+                           data-ng-model="newUser.userInfo.userId"
                            class="i-sdc-form-input"
                            placeholder="{{ USER_MANAGEMENT_SEARCH_TEXT | translate}}"
                            data-ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 750, 'blur': 0 } }"
@@ -36,7 +36,7 @@
                             data-required
                             name="role"
                             data-tests-id="selectrole"
-                            data-ng-model = "newUser.resource.role"
+                            data-ng-model = "newUser.userInfo.role"
                             data-ng-options="role as (getTitle(role)) for role in roles | orderBy:'role'"
                             ng-focus="search.filterTerm=''">
                         <option value="">Select Role</option>
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 ec9e888eed..10aa47e0ed 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
@@ -20,8 +20,9 @@
 
 'use strict';
 import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory} from "app/models";
-import {EntityService, IUserResourceClass, CacheService} from "app/services";
+import {EntityService, CacheService} from "app/services";
 import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils";
+import {UserService} from "../../ng2/services/user.service";
 
 
 interface Checkboxes {
@@ -87,7 +88,7 @@ export class CatalogViewModel {
         'sdcMenu',
         '$state',
         '$q',
-        'Sdc.Services.UserResourceService',
+        'UserServiceNg2',
         'Sdc.Services.CacheService',
         'ComponentFactory',
         'ChangeLifecycleStateHandler',
@@ -101,7 +102,7 @@ export class CatalogViewModel {
                 private sdcMenu:IAppMenu,
                 private $state:ng.ui.IStateService,
                 private $q:ng.IQService,
-                private userResourceService:IUserResourceClass,
+                private userService:UserService,
                 private cacheService:CacheService,
                 private ComponentFactory:ComponentFactory,
                 private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
@@ -138,7 +139,7 @@ export class CatalogViewModel {
         this.$scope.sdcMenu = this.sdcMenu;
         this.$scope.confStatus = this.sdcMenu.statuses;
         this.$scope.expandedSection = ["type", "category", "status"];
-        this.$scope.user = this.userResourceService.getLoggedinUser();
+        this.$scope.user = this.userService.getLoggedinUser();
         this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem;
         this.$scope.version = this.cacheService.get('version');
         this.$scope.sortBy = 'lastUpdateDate';
@@ -158,8 +159,6 @@ export class CatalogViewModel {
         this.$scope.checkboxesFilter.selectedStatuses = [];
 
         //      this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
-
-        this.$scope.vfcmtType = ResourceType.VFCMT;
     };
 
     private initScopeMethods = ():void => {
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html
index 03ca4cb81f..76f23573a1 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog-view.html
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view.html
@@ -135,7 +135,7 @@
             <!-- HEADER -->
             <div>
                 <div class="w-sdc-dashboard-catalog-header">
-                    {{getNumOfElements((catalogFilterdItems| filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search).length)}}
+                    {{getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)}}
                 </div>
                 <div class="w-sdc-dashboard-catalog-header-right">
                     <span class="w-sdc-dashboard-catalog-header-order" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
@@ -155,31 +155,32 @@
                     
                     <!-- Tile new -->
                     <div data-ng-init="component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version"
-                        class="sdc-tile-catalog sdc-tile-fix-width"
-                        data-ng-repeat="component in catalogFilterdItems| filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
+                        class="sdc-tile sdc-tile-fix-width"
+                        data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
                         >
 
-                        <div class="sdc-tile-header">
-                            <div class='sdc-tile-header-type' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}">
-                                <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
-                                <div data-ng-if="component.isService()">S</div>
-                            </div>
+                        <div class='sdc-tile-header' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}">
+                            <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
+                            <div data-ng-if="component.isService()">S</div>
                         </div>
+
                         <div class='sdc-tile-content' data-ng-click="gui.isLoading || goToComponent(component)">
-                            <div class='sdc-tile-content-icon'>
+                            <div class='sdc-tile-content-icon centered'>
                                 <div class="{{component.iconSprite}} {{component.icon}}"
                                     data-ng-class="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
                                     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-version-info">
-                                    <div class="sdc-tile-content-info-version-info-text" data-tests-id="{{component.name}}Version">V {{component.version}}</div>
+                                <div class="sdc-tile-info-line title" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
+                                <div class="sdc-tile-info-line subtitle" data-tests-id="{{component.name}}Version">
+                                    V {{component.version}}
                                 </div>
                             </div>
                         </div>
                         <div class='sdc-tile-footer'>
-                            <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+                            <div class="sdc-tile-footer-content">
+                                <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+                            </div>
                         </div>               
 
                     </div>
@@ -192,8 +193,7 @@
 
     </div>
 
-    <top-nav top-lvl-selected-index="1" search-bind="search.filterTerm" version="{{version}}"></top-nav>
+    <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="search.filterTerm=$event" [version]="version"></top-nav>
 
-    <ecomp-footer></ecomp-footer>
 
 </div>
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 5480e4f6cf..80a9bcac3e 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
@@ -20,9 +20,10 @@
 
 'use strict';
 import {IConfigRoles, IAppConfigurtaion, IAppMenu, IUserProperties, Component} from "app/models";
-import {EntityService, IUserResourceClass, SharingService, CacheService} from "app/services";
+import {EntityService, SharingService, CacheService} from "app/services";
 import {ComponentType, ResourceType, MenuHandler, ModalsHandler, ChangeLifecycleStateHandler, SEVERITY, ComponentFactory} from "app/utils";
 import {IClientMessageModalModel} from "../modals/message-modal/message-client-modal/client-message-modal-view-model";
+import {UserService} from "../../ng2/services/user.service";
 
 export interface IDashboardViewModelScope extends ng.IScope {
 
@@ -171,7 +172,7 @@ export class DashboardViewModel {
         'sdcMenu',
         '$state',
         '$stateParams',
-        'Sdc.Services.UserResourceService',
+        'UserServiceNg2',
         'Sdc.Services.SharingService',
         'Sdc.Services.CacheService',
         '$q',
@@ -191,7 +192,7 @@ export class DashboardViewModel {
                 private sdcMenu:IAppMenu,
                 private $state:any,
                 private $stateParams:any,
-                private userResourceService:IUserResourceClass,
+                private userService:UserService,
                 private sharingService:SharingService,
                 private cacheService:CacheService,
                 private $q:ng.IQService,
@@ -239,7 +240,7 @@ export class DashboardViewModel {
         this.$scope.isLoading = false;
         this.$scope.sdcConfig = this.sdcConfig;
         this.$scope.sdcMenu = this.sdcMenu;
-        this.$scope.user = this.userResourceService.getLoggedinUser();
+        this.$scope.user = this.userService.getLoggedinUser();
         this.$scope.roles = this.sdcMenu.roles;
         this.$scope.showTutorial = false;
         this.$scope.isFirstTime = false;
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 baf4aa6e51..0ef5f4a1f9 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
@@ -47,29 +47,30 @@
                 </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">
-
-                    <div class="sdc-tile-header">
-                        <div class='sdc-tile-header-type' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}">
-                            <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
-                            <div data-ng-if="component.isService()">S</div>
-                        </div>
+                <div class="sdc-tile sdc-tile-fix-width" data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search">
+                 
+                    <div class='sdc-tile-header' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}">
+                        <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
+                        <div data-ng-if="component.isService()">S</div>
                     </div>
+
                     <div class='sdc-tile-content' data-tests-id="dashboard-Elements" data-ng-click="goToComponent(component)">
                         <div class='sdc-tile-content-icon'>
                             <div class="{{component.iconSprite}} {{component.icon}}"
                                 data-ng-class="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
                                 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-version-info">
-                                <div class="sdc-tile-content-info-version-info-text" data-tests-id="{{component.name}}Version">V {{component.version}}</div>
-                            </div>
+                            <div class="sdc-tile-info-line title" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
+                            <div class="sdc-tile-info-line subtitle" data-tests-id="{{component.name}}Version">V {{component.version}}</div>
                         </div>
                     </div>
+
                     <div class='sdc-tile-footer'>
-                        <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+                        <div class="sdc-tile-footer-content">
+                            <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+                        </div>
                     </div>
 
                 </div>
@@ -103,10 +104,9 @@
 
     </div>
 
-    <top-nav top-lvl-selected-index="0" version="{{version}}" search-bind="search.filterTerm" notification-icon-callback="notificationIconCallback" version="{{version}}"></top-nav>
+    <top-nav [top-lvl-selected-index]="0" [version]="version" [search-term]="search.filterTerm" (search-term-change)="search.filterTerm=$event" [notification-icon-callback]="notificationIconCallback"></top-nav>
 
 </div>
 <div data-ui-view=""></div>
 
 
-<ecomp-footer></ecomp-footer>
diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html
index af0d06787a..bb74374c01 100644
--- a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html
+++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html
@@ -12,6 +12,6 @@
         <div id="main" ui-view="main"></div>
     </div>
 
-    <top-nav top-lvl-selected-index="3" search-bind="search.filterTerm" menu-model="topNavMenuModel" version="{{version}}"></top-nav>
+    <top-nav [top-lvl-selected-index]="3" [search-term]="search.filterTerm" (search-term-change)="search.filterTerm=$event" [menu-model]="topNavMenuModel" [version]="version"></top-nav>
 
 </div>
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html
index ae13844532..5fd57f6b24 100644
--- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html
+++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html
@@ -46,7 +46,8 @@
                                         <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm[parameter.name].$dirty && forms.editForm[parameter.name].$invalid), required: (parameter.defaultValue)}">
                                             <span class="required-symbol">*</span>
                                             <div class="input-parameter">
-                                                <input class="i-sdc-form-input" data-ng-class="{error: (forms.editForm[parameter.name].$invalid)}"
+                                                <input class="i-sdc-form-input" data-ng-class="{error: (forms.editForm[parameter.name].$invalid),
+                                                                                                'default-value':(parameter.defaultValue && parameter.currentValue === parameter.defaultValue)}"
                                                        data-ng-model-options="{ debounce: 200 }"
                                                        data-ng-model="parameter.currentValue"
                                                        value="{{parameter.currentValue}}"
@@ -54,7 +55,7 @@
                                                        name="{{parameter.name}}"
                                                        data-ng-pattern="getValidationPattern(parameter.type, 'heat')"
                                                        data-ng-required="parameter.defaultValue"
-                                                       data-ng-change="'json'==parameter.type && forms.editForm[parameter.name].$setValidity('pattern', validateJson(parameter.currentValue))"
+                                                       data-ng-change="onValueChanged(parameter)"
                                                        data-ng-blur="(forms.editForm[parameter.name].$error.required && (parameter.currentValue=parameter.defaultValue))"
                                                        data-tests-id="value-field-of-{{parameter.name}}"/>
 
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less
index a25a2c5f62..e797093271 100644
--- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less
+++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less
@@ -1,4 +1,3 @@
-
 .sdc-env-form-container{
     .w-sdc-modal-body{
         padding: 20px 10px 2px 10px;
@@ -110,6 +109,9 @@
                             width: 100%;
                             display: inline-flex;
                             padding-right: 33px;
+                            &.default-value{
+                                border-color: @func_color_h;
+                            }
                         }
                         .action-button{
                             border-left: solid 1px @main_color_o;
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts
index f5962a2f79..a30fd15c63 100644
--- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts
+++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts
@@ -37,6 +37,7 @@ export interface IEnvParametersFormViewModelScope extends ng.IScope {
     getValidationPattern(type:string):RegExp;
     isInstance():boolean;
     validateJson(json:string):boolean;
+    onValueChanged(parameter: HeatParameterModel):void;
     close():void;
     save():void;
     openDescPopover(selectedParam:HeatParameterModel):void;
@@ -86,7 +87,10 @@ export class EnvParametersFormViewModel {
         this.$scope.envParametersModal = this.$uibModalInstance;
         this.$scope.artifactResource = this.artifact;
         this.$scope.heatParameters = angular.copy(this.artifact.heatParameters);
-
+        //if param does not have a value - display the default
+        this.$scope.heatParameters.forEach((heatParam) => {
+            heatParam.currentValue = heatParam.currentValue || heatParam.defaultValue;
+        });
         this.$scope.tableHeadersList = [
             {title: "Parameter", property: "name"},
             {title: "Default Value", property: "defaultValue", info: "DEFAULT_VALUE_INFO"},
@@ -114,13 +118,13 @@ export class EnvParametersFormViewModel {
         this.$scope.save = ():void => {
             this.$scope.buttons[0].disabled = true;//prevent double click (DE246266)
             this.$scope.isLoading = true;
-            this.artifact.heatParameters = this.$scope.heatParameters;
+            this.artifact.heatParameters = angular.copy(this.$scope.heatParameters);
             this.artifact.heatParameters.forEach((parameter:any):void => {
                 if ("" === parameter.currentValue) {
                     //[Bug 154465] - Update and erase current value field in Env parameters form return empty String ("") instead of null.
                     parameter.currentValue = null;
-                }else if (!parameter.currentValue && parameter.defaultValue) {
-                    parameter.currentValue = parameter.defaultValue;
+                } else if (parameter.defaultValue && parameter.defaultValue == parameter.currentValue) {
+                    parameter.currentValue = undefined;
                 }
             });
 
@@ -143,6 +147,13 @@ export class EnvParametersFormViewModel {
             this.component.addOrUpdateArtifact(this.$scope.artifactResource).then(success, error);
         };
 
+        this.$scope.onValueChanged = (parameter: HeatParameterModel):void => {
+            parameter.filterTerm = parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description
+            if('json'==parameter.type){
+                this.$scope.forms.editForm[parameter.name].$setValidity('pattern', this.$scope.validateJson(parameter.currentValue));
+            }
+        }
+
         this.$scope.close = ():void => {
             //this.artifact.heatParameters.forEach((parameter:any):void => {
             //    if (!parameter.currentValue && parameter.defaultValue) {
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 ee2e94f934..0ad55715db 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
@@ -112,6 +112,7 @@ export class PropertyFormViewModel {
     private initResource = ():void => {
         this.$scope.editPropertyModel.property = new PropertyModel(this.property);
         this.$scope.editPropertyModel.property.type = this.property.type ? this.property.type : null;
+        this.$scope.editPropertyModel.property.value = this.$scope.editPropertyModel.property.value || this.$scope.editPropertyModel.property.defaultValue;
         this.setMaxLength();
         this.initAddOnLabels();
     };
@@ -241,7 +242,7 @@ export class PropertyFormViewModel {
             let onPropertySuccess = (propertyFromBE:PropertyModel):void => {
                 console.info('onPropertyResourceSuccess : ', propertyFromBE);
                 this.$scope.isLoading = false;
-
+                this.filteredProperties[this.$scope.currentPropertyIndex] = propertyFromBE;
                 if (!doNotCloseModal) {
                     this.$uibModalInstance.close(propertyFromBE);
                 } else {
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts
index cf8c91c5e3..1cc3690e9f 100644
--- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts
+++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts
@@ -125,6 +125,7 @@ export class OnboardingModalViewModel {
             this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, (<Resource>this.$scope.selectedComponent).csarVersion);
             this.$state.go('workspace.general', {
                 id: this.$scope.componentFromServer.uniqueId,
+                componentCsar: this.$scope.selectedComponent,
                 type: this.$scope.componentFromServer.componentType.toLowerCase(),
                 disableButtons: true
             });
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
index eec7c4758d..604a1c3647 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
@@ -5,8 +5,7 @@
         <punch-out name="'onboarding/vendor'" data="vendorData"  user="user" on-event="onVendorEvent"></punch-out>
     </div>
 
-    <top-nav top-lvl-selected-index="2" search-bind="search.filterTerm" menu-model="topNavMenuModel" version="{{version}}" hide-search="true"></top-nav>
+    <top-nav [top-lvl-selected-index]="2" [menu-model]="topNavMenuModel" [version]="version" [hide-search]="true"></top-nav>
 
-    <ecomp-footer></ecomp-footer>
 
 </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
index 4b9dd6fc00..5236259f30 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
@@ -25,7 +25,7 @@ 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";
+import {ResourceType,ComponentType} from "../../../../utils/constants";
 
 export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
 
@@ -48,6 +48,7 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
     setSelectedInstance(componentInstance:ComponentInstance):void;
     printScreen():void;
     isPNF():boolean;
+    isConfiguration():boolean;
 
     cacheComponentsInstancesFullData:Component;
 }
@@ -167,9 +168,12 @@ export class CompositionViewModel {
 
         this.$scope.updateSelectedComponent = ():void => {
             if (this.$scope.currentComponent.selectedInstance) {
-
+                let parentComponentUid = this.$scope.currentComponent.selectedInstance.componentUid
+                if(this.$scope.currentComponent.selectedInstance.originType === ComponentType.SERVICE_PROXY){
+                    parentComponentUid = this.$scope.currentComponent.selectedInstance.sourceModelUid;
+                }
                 let componentParent = _.find(this.cacheComponentsInstancesFullData, (component) => {
-                    return component.uniqueId === this.$scope.currentComponent.selectedInstance.componentUid;
+                    return component.uniqueId === parentComponentUid;
                 });
                 if (componentParent) {
                     this.$scope.selectedComponent = componentParent;
@@ -185,7 +189,7 @@ export class CompositionViewModel {
                             console.log("Error updating selected component");
                             this.$scope.isLoadingRightPanel = false;
                         };
-                        this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, this.$scope.currentComponent.selectedInstance.componentUid).then(onSuccess, onError);
+                        this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, parentComponentUid).then(onSuccess, onError);
                     } catch (e) {
                         console.log("Error updating selected component", e);
                         this.$scope.isLoadingRightPanel = false;
@@ -247,6 +251,10 @@ export class CompositionViewModel {
             return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.PNF;
         };
 
+        this.$scope.isConfiguration = (): boolean => {
+            return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.CONFIGURATION;
+        };
+
         this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload);
 
     }
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 e05574e8c8..bfb2865348 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
@@ -58,29 +58,30 @@
                     data-ui-sref="workspace.composition.deployment"
                     tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
                     data-tests-id="deployment-artifact-tab"
-                    data-ng-if="!isPNF()">
+                    data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())">
                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
             </button>
             <button tooltips tooltip-class="tooltip-custom tab-tooltip"
-                    tooltip-content="{{selectedComponent.isResource() ? 'Properties and Attributes': 'Inputs'}}"
+                    tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}"
                     class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
                     data-ui-sref="workspace.composition.properties"
                     data-tests-id="properties-and-attributes-tab">
                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
-                     ng-class="selectedComponent.isResource() ? 'properties': 'inputs'"></div>
+                     ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
             </button>
             <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
                     data-ui-sref="workspace.composition.artifacts"
+                    data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
                     tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts">
                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
             </button>
-            <button data-ng-show="!selectedComponent.isService()" class="i-sdc-designer-sidebar-tab"
+            <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
                     data-ui-sref-active="active" ui-sref="workspace.composition.relations"
                     tooltips tooltip-class="tooltip-custom tab-tooltip  tooltip-rightside"
                     tooltip-content="Requirements and Capabilities">
                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
             </button>
-            <button data-ng-show="selectedComponent.isService()" class="i-sdc-designer-sidebar-tab"
+            <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
                     data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api"
                     tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API">
                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
index 262dfd9be8..624ed03431 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
@@ -21,6 +21,11 @@
             }
         }
     }
+
+    .custom-modal {
+        /* Hack solution to hide canvas tooltips under modals */
+        z-index: 20000 !important;
+    }
 }
 
 .workspace-composition {
@@ -68,7 +73,7 @@
     .w-sdc-designer-sidebar {
         background-color:@main_color_p ;
         .noselect;
-        bottom: @footer_height;
+        bottom: 0;
         position: fixed;
         right: -302px;
         width: 302px;
@@ -92,8 +97,8 @@
     .w-sdc-designer-sidebar-logo-ph {
         display: inline-block;
         vertical-align: middle;
-        line-height: 48px;
-        height: 48px;
+        line-height: 60px;
+        height: 60px;
     }
 
     .w-sdc-designer-sidebar-logo {
@@ -129,7 +134,7 @@
     }
 
     .w-sdc-designer-sidebar-tabs {
-        .bg_e;
+        .bg_c;
     }
 
     .w-sdc-designer-sidebar-tabs::after {
@@ -275,7 +280,9 @@
         .g_7;
         .bg_c;
         border-radius: 4px;
-        display: inline-block;
+        //fix long name for firefox:
+        display: block;
+        float: left;
         line-height: 25px;
         margin: 0 4px 6px 0;
         min-width: 50px;
@@ -620,7 +627,11 @@
         display: inline-block;
         margin: 12px 0 12px 10px;
         pointer-events: auto;
-
+        height: 45px;
+        width: 40px;
+        float: left;
+        display: flex;
+        align-items: center;
         .non-certified {
             position: relative;
             left: 27px;
@@ -849,82 +860,30 @@
     // ---------------------------------------------------------------------------------------------------
     // Canvas inline menu
     // ---------------------------------------------------------------------------------------------------
-    .w-sdc-canvas-menu {
-        position: fixed;
-        z-index: 100;
-
-        border-style: solid;
-        border-width: 1px;
-        border-color: #d8d8d8;
-        box-sizing: border-box;
-        background-color: #ffffff;
-        box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
-        width: 91px;
-
-        /*        &.vl-type-select{
-                    width: 173px;
-                }
-        */
+    .w-sdc-canvas-menu-list {
+        .w-sdc-canvas-menu-item-view {
+            &::before {
+                content: '';
+                display: inline-block;
 
-        h3 {
-            color: @func_color_s;
-            font-size: 14px;
-            font-weight: bold;
-            margin: 0;
-            padding: 7px 11px;
-            border-bottom: 1px solid #e5e5e5;
+                .sprite-new;
+                .view-icon;
+                vertical-align: top;
+                margin: 2px 6px 2px 4px;
+            }
         }
 
-        .w-sdc-canvas-menu-content {
-            padding: 5px 5px;
-
-            &.vl-select{
-                border-bottom: #d8d8d8 solid 1px;
-                line-height: 15px;
-
-                .tlv-radio {
-                    padding: 3px 0px;
-
-                    .tlv-radio-label {
-                        padding: 3px 0px;
-
-                        &::before {
-                            margin-right: 10px;
-                        }
-                    }
-                }
-            }
+        .w-sdc-canvas-menu-item-delete {
+            &::before {
+                content: '';
+                display: inline-block;
 
-            .w-sdc-canvas-menu-content-update-button {
-                .sprite;
-                .sprite.e-sdc-small-icon-delete;
-                .hand;
-                position: absolute;
-                top: 15px;
-                right: 10px;
+                .sprite-new;
+                .delete-icon;
+                vertical-align: bottom;
+                margin: 1px 10px 0 7px;
             }
-            .w-sdc-canvas-menu-content-delete-button {
-                .sprite;
-                .sprite.e-sdc-small-icon-delete;
-                .hand;
-                margin: 0 8px 0 6px;
-            }
-        }
-
-        .w-sdc-canvas-menu-arrow {
-            //TODO: Missing image for small blue triangle.
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
-            content: '';
-            display: block;
-            height: 21px;
-            position: absolute;
-            right: 12px;
-            top: -24px;
-            width: 184px;
-            background-repeat: no-repeat;
-            background-position: 175px 16px;
         }
-
     }
 }
 /*.right-tab-loader {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
index f0c8b1d86b..b80b63cac9 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
@@ -40,7 +40,7 @@ export interface IArtifactsViewModelScope extends ICompositionViewModelScope {
     artifactType:string;
     downloadFile:IFileDownload;
     isLoading:boolean;
-    displayDeleteButtonMap:Dictionary<string, boolean>;
+    allowDeleteAndUpdateArtifactMap:Dictionary<string, boolean>;
     getTitle():string;
     addOrUpdate(artifact:ArtifactModel):void;
     delete(artifact:ArtifactModel):void;
@@ -126,9 +126,9 @@ export class ResourceArtifactsViewModel {
             }
         }
         this.$scope.artifacts = artifacts;
-        this.$scope.displayDeleteButtonMap = new Dictionary<string, boolean>();
+        this.$scope.allowDeleteAndUpdateArtifactMap = new Dictionary<string, boolean>();
         _.forEach(this.$scope.artifacts, (artifact:ArtifactModel)=>{
-            this.$scope.displayDeleteButtonMap[artifact.artifactLabel] = this.displayDeleteButton(artifact);
+            this.$scope.allowDeleteAndUpdateArtifactMap[artifact.artifactLabel] = this.allowDeleteAndUpdateArtifact(artifact);
         });
         this.$scope.isLoading = false;
     };
@@ -234,8 +234,8 @@ export class ResourceArtifactsViewModel {
         });
     };
 
-    private displayDeleteButton = (artifact:ArtifactModel):boolean => {
-    if(!this.$scope.isViewMode() && artifact.esId){
+    private allowDeleteAndUpdateArtifact = (artifact:ArtifactModel):boolean => {
+    if(!this.$scope.isViewMode()){
         if(this.$scope.isComponentInstanceSelected()){//is artifact of instance
             return !this.$scope.selectedComponent.deploymentArtifacts || !this.$scope.selectedComponent.deploymentArtifacts[artifact.artifactLabel];//if the artifact is not from instance parent
         }else{//is artifact of main component
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 dfbd639eb4..f4102977b9 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
@@ -1,5 +1,6 @@
 <perfect-scrollbar class="w-sdc-designer-sidebar-tab-content artifacts">
     <div class="w-sdc-designer-sidebar-section">
+        <loader data-display="isLoading"></loader>
         <expand-collapse
             expanded-selector=".w-sdc-designer-sidebar-section-content" class="w-sdc-designer-sidebar-section-title">
             <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getTitle()" tooltips tooltip-content="{{getTitle()}}"></span>
@@ -19,8 +20,8 @@
                               data-ng-if="artifact.artifactName"></div>
                         <div>
                             <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-name" data-tests-id="artifact_Display_Name-{{artifact.artifactDisplayName}}"
-                                  data-ng-class="{'hand enabled': !isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)}"
-                                  data-ng-bind="artifact.artifactDisplayName" data-ng-click="!isViewMode() && !isLoading && !isComponentInstanceSelected() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact) && addOrUpdate(artifact)"
+                                  data-ng-class="{'hand enabled': allowDeleteAndUpdateArtifactMap[artifact.artifactLabel]}"
+                                  data-ng-bind="artifact.artifactDisplayName" data-ng-click="!isLoading && allowDeleteAndUpdateArtifactMap[artifact.artifactLabel] && addOrUpdate(artifact)"
                                   tooltips tooltip-content="{{artifact.artifactDisplayName}}"></span>
                             <div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env" ng-if="artifact.heatParameters.length">
                                 <span data-ng-bind="getEnvArtifactName(artifact)"data-tests-id="heat_env_{{artifact.artifactDisplayName}}"></span>
@@ -36,7 +37,7 @@
                             <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label" data-ng-show="artifact.description">Description:</span>{{artifact.description}}
                         </div>
                     </div>
-                    <button ng-if="displayDeleteButtonMap[artifact.artifactLabel]" class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
+                    <button ng-if="artifact.esId && allowDeleteAndUpdateArtifactMap[artifact.artifactLabel]" class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
                             data-tests-id="delete_{{artifact.artifactDisplayName}}" data-ng-click="delete(artifact)" type="button"></button>
                     <button ng-if="!isViewMode()  && artifact.isHEAT() && isComponentInstanceSelected() && artifact.heatParameters.length"
                             class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-pad"
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 0418515789..5020c73df4 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
@@ -11,7 +11,7 @@
         <div class="w-sdc-designer-sidebar-section-content general">
             <div class="i-sdc-designer-sidebar-section-content-item">
                 <span class="i-sdc-designer-sidebar-section-content-item-label">Type:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value"  data-tests-id="rightTab_componentType" data-ng-bind="selectedComponent.componentType"></span>
+                <span class="i-sdc-designer-sidebar-section-content-item-value"  data-tests-id="rightTab_componentType" data-ng-bind="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy() ? 'Service Proxy' : selectedComponent.componentType"></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">Resource Type:</span>
@@ -103,8 +103,15 @@
                 <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.contactId"
                       data-tests-id="rightTab_contactId"></span>
             </div>
+
+            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()">
+                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SOURCE_SERVICE_NAME"></span>
+                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="currentComponent.selectedInstance.sourceModelName"  tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{currentComponent.selectedInstance.sourceModelName}}"
+                      data-tests-id="rightTab_sourceModelName"></span>
+            </div>
+
             <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="isViewMode() && currentComponent.isService() && selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Resource Customization UUID:</span><br>
+                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID"></span><br>
                 <span class="customization-uuid selectable" data-ng-bind="currentComponent.selectedInstance.customizationUUID"
                       data-tests-id="rightTab_customizationModuleUUID"></span><br>
             </div>
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 0ed72e2f00..90bb5658c8 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
@@ -33,7 +33,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        display: inline-block;
+        //display: inline-block; fix long name for firefox
         max-width: 160px;
         vertical-align:bottom;
         font-weight: normal;
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 c60a490b4b..6060130191 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
@@ -41,11 +41,16 @@ export class componentCategories {//categories field bind to this obj in order t
     selectedCategory:string;
 }
 
+export interface IEnvironmentContext {
+    defaultValue:string;
+    validValues:Array<string>;
+}
 
 export interface IGeneralScope extends IWorkspaceViewModelScope {
     validation:Validation;
     editForm:ng.IFormController;
     categories:Array<IMainCategory>;
+    environmentContextObj:IEnvironmentContext;
     latestCategoryId:string;
     latestVendorName:string;
     importedFileExtension:any;
@@ -67,6 +72,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     onEcompGeneratedNamingChange():void;
     openOnBoardingModal():void;
     initCategoreis():void;
+    initEnvironmentContext():void;
     updateIcon():void;
     possibleToUpdateIcon():boolean;
 }
@@ -195,6 +201,9 @@ export class GeneralViewModel {
         // Init categories
         this.$scope.initCategoreis();
 
+        // Init Environment Context
+        this.$scope.initEnvironmentContext();
+
         // Init the decision if to show file browse.
         this.$scope.isShowFileBrowse = false;
         if (this.$scope.component.isResource()) {
@@ -239,6 +248,7 @@ export class GeneralViewModel {
         //TODO remove this after handling contact in UI
         if (this.$scope.isCreateMode()) {
             this.$scope.component.contactId = this.cacheService.get("user").userId;
+            this.$scope.originComponent.contactId = this.$scope.component.contactId;
         }
 
     };
@@ -288,6 +298,19 @@ export class GeneralViewModel {
             }
         };
 
+
+        this.$scope.initEnvironmentContext = ():void => {
+            if (this.$scope.componentType === ComponentType.SERVICE) {
+                this.$scope.environmentContextObj = this.cacheService.get('UIConfiguration').environmentContext;
+                var environmentContext:string =(<Service>this.$scope.component).environmentContext;
+                var isCheckout:boolean = ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState;
+                // In creation new service OR check outing old service without environmentContext parameter - set default value
+                if(this.$scope.isCreateMode() || (isCheckout && !environmentContext)){
+                    (<Service>this.$scope.component).environmentContext = this.$scope.environmentContextObj.defaultValue;
+                }
+            }
+        };
+
         this.$scope.validateField = (field:any):boolean => {
             if (field && field.$dirty && field.$invalid) {
                 return true;
@@ -416,5 +439,8 @@ export class GeneralViewModel {
             }
         };
         this.EventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload);
+        this.EventListenerService.registerObserverCallback(EVENTS.ON_REVERT, ()=>{
+            this.$scope.componentCategories.selectedCategory = this.$scope.originComponent.selectedCategory;
+        });
     };
 }
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 3a3b2d316d..e3eb903a36 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
@@ -343,9 +343,9 @@
                                data-ng-model-options="{ debounce: 500 }"
                                name="serviceType"
                                data-tests-id="serviceType"
-                               data-ng-maxlength="25"
-                               data-ng-pattern="validation.VendorReleaseValidationPattern"
-                               maxlength="25"
+                               data-ng-maxlength="256"
+                               data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+                               maxlength="256"
                         />
                         <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>
@@ -365,9 +365,9 @@
                                data-ng-model-options="{ debounce: 500 }"
                                name="serviceRole"
                                data-tests-id="serviceRole"
-                               data-ng-maxlength="25"
-                               data-ng-pattern="validation.VendorReleaseValidationPattern"
-                               maxlength="25"
+                               data-ng-maxlength="256"
+                               data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+                               maxlength="256"
                         />
                         <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>
@@ -376,6 +376,26 @@
                     </div>
                     <!--------------------- Service Role -------------------->
 
+                    <!-------------------- ENVIRONMENT CONTEXT  ----------------->
+
+                    <div  ng-if="component.isService()" class="i-sdc-form-item">
+                        <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
+                        <label class="i-sdc-form-label">Environment Context</label>
+                        <select class="i-sdc-form-select"
+                                name="environmentContext"
+                                data-ng-class="{'view-mode': isViewMode()}"
+                                data-ng-model="component.environmentContext"
+                                data-tests-id="environmentContext"
+                        >
+                            <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
+                                    value="{{environmentContextVal}}"
+                                    data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
+                        </select>
+
+                    </div>
+                    <!--------------------- ENVIRONMENT CONTEXT ------------------>
+
+
                     <div class="meta-data" data-ng-if="component.creationDate">
                         <div>
                             <b>Created:</b>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
index 3c9c7e9e4b..0360c9c805 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
@@ -71,7 +71,8 @@ export class PropertiesViewModel {
     }
 
     private openEditPropertyModal = (property:PropertyModel):void => {
-        this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false).then(() => {
+        this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false).then((updatedProperty:PropertyModel) => {
+            //property = updatedProperty;
         });
     };
 
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 a3af8ca68e..226785e06f 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
@@ -393,7 +393,7 @@ export class WorkspaceViewModel {
             } else {
                 this.$scope.component = this.ComponentFactory.createComponent(this.$scope.originComponent);
             }
-
+            this.EventListenerService.notifyObservers(EVENTS.ON_REVERT);
         };
 
         this.$scope.changeLifecycleState = (state:string):void => {
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 a7c9da05c4..0663074dbc 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view.html
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html
@@ -7,11 +7,11 @@
                 {{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 class="expand-collapse-menu-box-item-text" ng-click="onMenuItemPressed(menuItem.state)" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}LeftSideMenu">{{menuItem.text}}</div>
             </div>
         </div>
 
-        <div include-padding="true" class="w-sdc-main-right-container" data-ng-class="{'composition':isComposition}">
+        <div include-padding="true" class="w-sdc-main-right-container" data-ng-class="{'composition':isComposition, 'deployment':isDeployment}">
             <loader data-display="isCreateProgress" data-ng-show="isCreateProgress" relative="false"></loader>
 
             <div class="sdc-workspace-top-bar">
@@ -63,8 +63,7 @@
 
                     <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" 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>
 
@@ -78,6 +77,5 @@
             </div>
         </div>
     </div>
-    <top-nav search-bind="search.filterTerm" hide-search="true" menu-model="breadcrumbsModel" version="{{version}}"></top-nav>
-    <ecomp-footer></ecomp-footer>
+    <top-nav [hide-search]="true" [menu-model]="breadcrumbsModel" [version]="version"></top-nav>
 </div>
diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less
index 8b8b6d624a..84a3599d47 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace.less
+++ b/catalog-ui/src/app/view-models/workspace/workspace.less
@@ -170,8 +170,10 @@
             line-height: 110px;
             .f-type ._28;
         }
-        &.composition .w-sdc-main-container-body-content {
-            height: calc(~'100% - @{action_nav_height}'); //composition is the only tab without a tab title. need to exclude from calculation.
+        &.composition, &.deployment{
+            .w-sdc-main-container-body-content {
+                height: 100%;
+            }
         }
         .w-sdc-main-container-body-content {
             // height:calc(~'100% - @{action_nav_height} - @{tab_title}');