From 51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 Mon Sep 17 00:00:00 2001
From: Tal Gitelman <tg851x@intl.att.com>
Date: Sun, 10 Dec 2017 18:55:03 +0200
Subject: Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>
---
 .../tabs/composition/composition-view-model.ts     |  16 ++-
 .../tabs/composition/composition-view.html         |  11 +-
 .../workspace/tabs/composition/composition.less    | 111 +++++++--------------
 .../tabs/artifacts/artifacts-view-model.ts         |  10 +-
 .../composition/tabs/artifacts/artifacts-view.html |   7 +-
 .../composition/tabs/details/details-view.html     |  11 +-
 .../tabs/composition/tabs/details/details.less     |   2 +-
 .../workspace/tabs/general/general-view-model.ts   |  26 +++++
 .../workspace/tabs/general/general-view.html       |  32 ++++--
 .../tabs/properties/properties-view-model.ts       |   3 +-
 .../view-models/workspace/workspace-view-model.ts  |   2 +-
 .../app/view-models/workspace/workspace-view.html  |  10 +-
 .../src/app/view-models/workspace/workspace.less   |   6 +-
 13 files changed, 135 insertions(+), 112 deletions(-)

(limited to 'catalog-ui/src/app/view-models/workspace')

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}');
-- 
cgit 1.2.3-korg