re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

7 files changed, 332 insertions, 122 deletions

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 46c2d2edf9..a77377bac4 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
@@ -19,22 +19,34 @@
  */
 'use strict';
 import * as _ from "lodash";
-import {Component, ComponentInstance, IAppMenu} from "app/models";
-import {SharingService, CacheService, EventListenerService, LeftPaletteLoaderService} from "app/services";
-import {ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS} from "app/utils";
-import {IWorkspaceViewModelScope} from "../../workspace-view-model";
-import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
-import {Resource} from "app/models/components/resource";
-import {ResourceType,ComponentType} from "app/utils/constants";
-import {ComponentServiceFactoryNg2} from "app/ng2/services/component-services/component.service.factory";
-import {ServiceGenericResponse} from "app/ng2/services/responses/service-generic-response";
-import {Service} from "app/models/components/service";
+import { Component, ComponentInstance, IAppMenu, Requirement, Capability, ButtonModel } from "app/models";
+import { SharingService, CacheService, EventListenerService, LeftPaletteLoaderService } from "app/services";
+import { ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS, ComponentInstanceFactory } from "app/utils";
+import { IWorkspaceViewModelScope } from "../../workspace-view-model";
+import { ComponentGenericResponse } from "app/ng2/services/responses/component-generic-response";
+import { Resource } from "app/models/components/resource";
+import { ResourceType, ComponentType } from "app/utils/constants";
+import { ComponentServiceFactoryNg2 } from "app/ng2/services/component-services/component.service.factory";
+import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response";
+import { Service } from "app/models/components/service";
+import { ZoneInstance } from "app/models/graph/zones/zone-instance";
+import { ComponentServiceNg2 } from "app/ng2/services/component-services/component.service";
+import { ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service"
+import { IModalConfig, IModalButtonComponent } from "sdc-ui/lib/angular/modals/models/modal-config";
+import { ValueEditComponent } from "app/ng2/components/ui/forms/value-edit/value-edit.component";
+import { UnsavedChangesComponent } from "../../../../ng2/components/ui/forms/unsaved-changes/unsaved-changes.component";
+import { ModalButtonComponent } from "sdc-ui/lib/angular/components";
+
 
 
 export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
 
     currentComponent:Component;
+
+    //Added for now, in the future need to remove and use only id and type to pass to tabs.
     selectedComponent: Component;
+    selectedZoneInstance: ZoneInstance;
+
     componentInstanceNames: Array<string>;
     isLoading:boolean;
     graphApi:any;
@@ -42,21 +54,24 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
     sdcMenu:IAppMenu;
     version:string;
     isViewOnly:boolean;
+    isCanvasTagging:boolean;
     isLoadingRightPanel:boolean;
     disabledTabs:boolean;
     openVersionChangeModal(pathsToDelete:string[]):ng.IPromise<any>;
     onComponentInstanceVersionChange(component:Component);
     isComponentInstanceSelected():boolean;
-    updateSelectedComponent():void
+    updateSelectedComponent():void;
     openUpdateModal();
     deleteSelectedComponentInstance():void;
     onBackgroundClick():void;
     setSelectedInstance(componentInstance:ComponentInstance):void;
+    setSelectedZoneInstance(zoneInstance: ZoneInstance):void;
+    changeZoneInstanceName(newName:string):void;
     printScreen():void;
     isPNF():boolean;
     isConfiguration():boolean;
     preventMoveTab(state: boolean):void;
-
+    ComponentServiceNg2:ComponentServiceNg2,
     cacheComponentsInstancesFullData:Component;
 }
 
@@ -76,8 +91,11 @@ export class CompositionViewModel {
         'ChangeLifecycleStateHandler',
         'LeftPaletteLoaderService',
         'ModalsHandler',
+        'ModalServiceSdcUI',
         'EventListenerService',
-        'ComponentServiceFactoryNg2'
+        'ComponentServiceFactoryNg2',
+        'ComponentServiceNg2',
+        'Notification'
     ];
 
     constructor(private $scope:ICompositionViewModelScope,
@@ -93,8 +111,12 @@ export class CompositionViewModel {
                 private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
                 private LeftPaletteLoaderService:LeftPaletteLoaderService,
                 private ModalsHandler:ModalsHandler,
+                private ModalServiceSdcUI: ModalServiceSdcUI,
                 private eventListenerService:EventListenerService,
-                private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2) {
+                private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2,
+                private ComponentServiceNg2:ComponentServiceNg2,
+                private Notification:any
+            ) {
 
         this.$scope.setValidState(true);
         this.initScope();
@@ -104,16 +126,17 @@ export class CompositionViewModel {
 
 
     private initGraphData = ():void => {
-        if(!this.$scope.component.componentInstances || !this.$scope.component.componentInstancesRelations ) {
+        if(!this.hasCompositionGraphData(this.$scope.component)) {
             this.$scope.isLoading = true;
             let service = this.ComponentServiceFactoryNg2.getComponentService(this.$scope.component);
             service.getComponentCompositionData(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
                 if (this.$scope.component.isService()) {
                     (<Service> this.$scope.component).forwardingPaths = (<ServiceGenericResponse>response).forwardingPaths;
                 }
-                this.$scope.component.componentInstances = response.componentInstances;
-                this.$scope.component.componentInstancesRelations = response.componentInstancesRelations;
-                this.$scope.component.policies = response.policies;
+                this.$scope.component.componentInstances = response.componentInstances || [];
+                this.$scope.component.componentInstancesRelations = response.componentInstancesRelations || [];
+                this.$scope.component.policies = response.policies || [];
+                this.$scope.component.groupInstances = response.groupInstances || [];
                 this.$scope.isLoading = false;
                 this.initComponent();
                 this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED);
@@ -124,25 +147,134 @@ export class CompositionViewModel {
         this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED);
     };
 
+    private hasCompositionGraphData = (component:Component):boolean => {
+        return !!(component.componentInstances && component.componentInstancesRelations && component.policies && component.groupInstances);
+    };
 
     private cacheComponentsInstancesFullData:Array<Component>;
 
     private initComponent = ():void => {
         this.$scope.currentComponent = this.$scope.component;
         this.$scope.selectedComponent = this.$scope.currentComponent;
+        this.$scope.selectedZoneInstance = null;
         this.updateUuidMap();
         this.$scope.isViewOnly = this.$scope.isViewMode();
     };
 
     private registerGraphEvents = (scope:ICompositionViewModelScope):void => {
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance);
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, scope.setSelectedZoneInstance);
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick);
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_START, () => { 
+            scope.isCanvasTagging = true;
+            this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, true, this.showUnsavedChangesAlert);
+        });
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_END, () => { 
+            scope.isCanvasTagging = false; 
+            this.resetUnsavedChanges();
+        });
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, scope.changeZoneInstanceName);
+        this.eventListenerService.registerObserverCallback(EVENTS.UPDATE_PANEL, this.removeSelectedZoneInstance);
     };
 
-    private openUpdateComponentInstanceNameModal = ():void => {
-        this.ModalsHandler.openUpdateComponentInstanceNameModal(this.$scope.currentComponent).then(()=> {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance);
+    private showUnsavedChangesAlert = (afterSave?:Function):Promise<any> => {
+        let deferred = new Promise<any>((resolve, reject)=> {
+            const modal = this.ModalServiceSdcUI.openCustomModal(
+                {
+                    title: "Unsaved Changes",
+                    size: 'sm',
+                    type: 'custom',
+                    
+                    buttons: [
+                        {id: 'cancelButton', text: 'Cancel', type: 'secondary', size: 'xsm', closeModal: true, callback: () => reject()},
+                        {id: 'discardButton', text: 'Discard', type: 'secondary', size: 'xsm', closeModal: true, callback: () => { this.resetUnsavedChanges(); resolve()}},
+                        {id: 'saveButton', text: 'Save', type: 'primary', size: 'xsm', closeModal: true, callback: () => {  reject(); this.saveUnsavedChanges(afterSave);  }}
+                ] as IModalButtonComponent[]
+            }, UnsavedChangesComponent, { isValidChangedData: true});
         });
+
+        return deferred;
+    }
+
+    private unRegisterGraphEvents = (scope: ICompositionViewModelScope):void => {
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, scope.setSelectedZoneInstance);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CANVAS_TAG_START);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CANVAS_TAG_END);
+        this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, scope.changeZoneInstanceName);
+        this.eventListenerService.unRegisterObserver(EVENTS.UPDATE_PANEL, this.removeSelectedZoneInstance);
+
+    };
+
+    private resetUnsavedChanges = () => {
+        this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false);
+    }
+
+    private saveUnsavedChanges = (afterSaveFunction?:Function):void => {
+        this.$scope.selectedZoneInstance.forceSave.next(afterSaveFunction);
+        this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false);
+    }
+
+    private openUpdateComponentInstanceNameModal = ():void => {
+
+        let modalConfig:IModalConfig = {
+            title: "Edit Name",
+            size: "sm",
+            type: "custom",
+            testId: "renameInstanceModal",
+            buttons: [
+                {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false},
+                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true} 
+            ]
+        };
+
+        this.ModalServiceSdcUI.openCustomModal(modalConfig, ValueEditComponent, {name: this.$scope.currentComponent.selectedInstance.name, validityChangedCallback: this.enableOrDisableSaveButton});
+
+    };
+
+
+    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
+        let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
+        saveButton.disabled = !shouldEnable;
+    }
+
+    private saveInstanceName = () => {
+        let currentModal = this.ModalServiceSdcUI.getCurrentInstance();
+        let nameFromModal:string = currentModal.innerModalContent.instance.name;
+
+        if(nameFromModal != this.$scope.currentComponent.selectedInstance.name){
+            currentModal.buttons[0].disabled = true;
+            let componentInstanceModel:ComponentInstance = ComponentInstanceFactory.createComponentInstance(this.$scope.currentComponent.selectedInstance);
+            componentInstanceModel.name = nameFromModal;
+
+            let onFailed = (error) => {
+                currentModal.buttons[0].disabled = false;
+            };
+            let onSuccess = (componentInstance:ComponentInstance) => {
+
+                this.$scope.currentComponent.selectedInstance.name = componentInstance.name;
+                //update requirements and capabilities owner name
+                _.forEach(this.$scope.currentComponent.selectedInstance.requirements, (requirementsArray:Array<Requirement>) => {
+                    _.forEach(requirementsArray, (requirement:Requirement):void => {
+                        requirement.ownerName = componentInstance.name;
+                    });
+                });
+
+                _.forEach(this.$scope.currentComponent.selectedInstance.capabilities, (capabilitiesArray:Array<Capability>) => {
+                    _.forEach(capabilitiesArray, (capability:Capability):void => {
+                        capability.ownerName = componentInstance.name;
+                    });
+                });
+                this.ModalServiceSdcUI.closeModal();
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance);
+            };
+
+            this.$scope.currentComponent.updateComponentInstance(componentInstanceModel).then(onSuccess, onFailed);
+        }  else {
+            this.ModalServiceSdcUI.closeModal();
+        }
+        
     };
 
     private removeSelectedComponentInstance = ():void => {
@@ -151,6 +283,12 @@ export class CompositionViewModel {
         this.$scope.selectedComponent = this.$scope.currentComponent;
     };
 
+    private removeSelectedZoneInstance = ():void => {
+        this.$scope.currentComponent.selectedInstance = null;
+        this.$scope.selectedZoneInstance = null;
+        this.$scope.selectedComponent = this.$scope.currentComponent;
+    }
+
     private updateUuidMap = ():void => {
         /**
          * In case user press F5, the page is refreshed and this.sharingService.currentEntity will be undefined,
@@ -165,6 +303,7 @@ export class CompositionViewModel {
         this.$scope.sdcMenu = this.sdcMenu;
         this.$scope.isLoading = false;
         this.$scope.isLoadingRightPanel = false;
+        this.$scope.isCanvasTagging = false;
         this.$scope.graphApi = {};
         this.$scope.version = this.cacheService.get('version');
         this.initComponent();
@@ -175,6 +314,21 @@ export class CompositionViewModel {
             return this.$scope.currentComponent && this.$scope.currentComponent.selectedInstance != undefined && this.$scope.currentComponent.selectedInstance != null;
         };
 
+        this.$scope.$on('$destroy', () => {
+            this.unRegisterGraphEvents(this.$scope);
+        })
+
+        this.$scope.restoreComponent = ():void => {
+            this.ComponentServiceNg2.restoreComponent(this.$scope.selectedComponent.componentType, this.$scope.selectedComponent.uniqueId).subscribe(() => {
+                    this.Notification.success({
+                        message: '&lt;' + this.$scope.component.name + '&gt; ' + this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TEXT"),
+                        title: this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TITLE")
+                    });
+                    this.$scope.selectedComponent.archived = false;
+                }
+            )
+        };
+
         this.$scope.updateSelectedComponent = ():void => {
             if (this.$scope.currentComponent.selectedInstance) {
                 let parentComponentUid = this.$scope.currentComponent.selectedInstance.componentUid
@@ -215,15 +369,25 @@ export class CompositionViewModel {
 
             this.$log.debug('composition-view-model::onNodeSelected:: with id: ' + selectedComponent.uniqueId);
             this.$scope.currentComponent.setSelectedInstance(selectedComponent);
+            this.$scope.selectedZoneInstance = null;
             this.$scope.updateSelectedComponent();
 
+
+
+
             if (this.$state.current.name === 'workspace.composition.api') {
                 this.$state.go('workspace.composition.details');
             }
         };
 
+        this.$scope.setSelectedZoneInstance = (zoneInstance: ZoneInstance): void => {
+            this.$scope.currentComponent.selectedInstance = null;
+            this.$scope.selectedZoneInstance = zoneInstance;
+        };
+
         this.$scope.onBackgroundClick = ():void => {
             this.$scope.currentComponent.selectedInstance = null;
+            this.$scope.selectedZoneInstance = null;
             this.$scope.selectedComponent = this.$scope.currentComponent;
 
             if (this.$state.current.name === 'workspace.composition.api') {
@@ -238,6 +402,10 @@ export class CompositionViewModel {
         this.$scope.openUpdateModal = ():void => {
             this.openUpdateComponentInstanceNameModal();
         };
+
+        this.$scope.changeZoneInstanceName = (newName:string):void => {
+            this.$scope.selectedZoneInstance.instanceData.name = newName;
+        };
     
         this.$scope.deleteSelectedComponentInstance = ():void => {
             const {currentComponent} = this.$scope;
@@ -258,8 +426,7 @@ export class CompositionViewModel {
                     modalText += `<p>The following service paths will be erased: ${pathNames}</p>`;
                 }
             }
-
-            this.ModalsHandler.openAlertModal(title, modalText).then(this.removeSelectedComponentInstance);
+            this.ModalServiceSdcUI.openAlertModal(title, modalText, "OK", this.removeSelectedComponentInstance, "deleteInstanceModal");
         };
 
         this.$scope.openVersionChangeModal = (pathsToDelete:string[]):ng.IPromise<any> => {
@@ -308,7 +475,7 @@ export class CompositionViewModel {
             this.$scope.disabledTabs = state;
         };
 
-        this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload);
+        this.eventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, 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 fceb73b882..4cd33f3210 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
@@ -2,7 +2,7 @@
     <loader data-display="isLoading"></loader>
     <div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
         <palette current-component="currentComponent"
-                 is-view-only="isViewOnly"
+                 is-view-only="isViewOnly || isCanvasTagging"
                  is-loading="isLoading"></palette>
 
         <ng2-palette-popup-panel></ng2-palette-popup-panel>
@@ -19,86 +19,107 @@
 
     <div class="w-sdc-designer-sidebar" data-ng-class="{'view-mode':isViewOnly}">
 
-        <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
-            <div class="w-sdc-designer-sidebar-logo-ph">
-                <div class="large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}">
-                    <div ng-if="isComponentInstanceSelected()"
-                         data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
-                         tooltips tooltip-side="top" tooltip-content="Not certified"></div>
+        <div ng-if="!selectedZoneInstance">
+
+            <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
+                <div class="w-sdc-designer-sidebar-logo-ph">
+                    <div class=" large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}"
+                    ng-class="{'archive-component':selectedComponent.archived}">
+                        <div ng-if="isComponentInstanceSelected()"
+                            data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
+                            tooltips tooltip-side="top" tooltip-content="Not certified"></div>
+                    </div>
                 </div>
-            </div>
 
-            <div class="w-sdc-designer-sidebar-logo">
-              <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
-                    tooltip-class="tooltip-custom break-word-tooltip"
-                    tooltip-content="&#8203;{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
-                    data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
+                <div class="w-sdc-designer-sidebar-logo">
+                <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
+                        tooltip-class="tooltip-custom break-word-tooltip"
+                        tooltip-content="&#8203;{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
+                        data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
+                </div>
+                <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
+                    data-tests-id="renameInstance"
+                    data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
+                    data-ng-click="openUpdateModal()" id="editPencil"></div>
+
+                <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
+                    data-tests-id="deleteInstance"
+                    data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
+                    data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
             </div>
-            <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
-                 data-ng-if="!isViewOnly && isComponentInstanceSelected()"
-                 data-ng-click="openUpdateModal()" id="editPencil"></div>
 
-            <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
-                 data-tests-id="e-sdc-small-icon-delete"
-                 data-ng-if="!isViewOnly && isComponentInstanceSelected()"
-                 data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
-        </div>
+            <div class="w-sdc-designer-sidebar-tabs">
+                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+                        data-ui-sref="workspace.composition.details"
+                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information"
+                        data-tests-id="information-tab"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
+                </button>
+                <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"-->
+                        <!--ui-sref="workspace.composition.structure"-->
+                        <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">-->
+                    <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>-->
+                <!--</button>-->
+                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+                        data-ui-sref="workspace.composition.deployment"
+                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
+                        data-tests-id="deployment-artifact-tab"
+                        data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <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() || (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"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
+                        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"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
+                </button>
+                <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"
+                        data-tests-id="requirements-and-capabilities"
+                        tooltip-content="Requirements and Capabilities"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
+                </button>
+                <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"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
+                </button>
 
-        <div class="w-sdc-designer-sidebar-tabs">
-            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    data-ui-sref="workspace.composition.details"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information"
-                    data-tests-id="information-tab"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
-            </button>
-            <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"-->
-                    <!--ui-sref="workspace.composition.structure"-->
-                    <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">-->
-                <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>-->
-            <!--</button>-->
-            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    data-ui-sref="workspace.composition.deployment"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
-                    data-tests-id="deployment-artifact-tab"
-                    data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <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() || (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"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
-                     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"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
-            </button>
-            <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"
-                    data-tests-id="requirements-and-capabilities"
-                    tooltip-content="Requirements and Capabilities"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
-            </button>
-            <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"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
-            </button>
+            </div>
+            <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
 
         </div>
 
-        <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
+        <!-- Solution for now to support policies and groups working with Angular 2 components -->
+        <!-- isCertified not relevant for group or policy -->
+        <!-- (selectedZoneInstanceType === ZoneInstanceType.GROUP || selectedZoneInstanceType === ZoneInstanceType.POLICY) -->
+        <div ng-if="selectedZoneInstance">
+            
+            <ng2-composition-panel
+                [is-loading]="isLoading"
+                [is-view-only]="isViewOnly || isCanvasTagging"
+                [selected-zone-instance-name]="selectedZoneInstance.instanceData.name"
+                [selected-zone-instance-id]="selectedZoneInstance.instanceData.uniqueId"
+                [selected-zone-instance-type]="selectedZoneInstance.type"
+                [topology-template]="currentComponent"
+            >
+            </ng2-composition-panel>
+        </div>       
 
         <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>
 
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 f351450e6d..b9bb66cde7 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
@@ -107,7 +107,7 @@
         position: fixed;
         right: -302px;
         width: 302px;
-        top: 102px;
+        top: 103px;
         transition: right 0.2s;
         z-index: 9;
         .box-shadow(-7px -3px 6px -8px @main_color_n);
@@ -163,6 +163,13 @@
         top: 10px;
     }
 
+    .w-sdc-designer-restore-button {
+        .hand;
+        position:absolute;
+        right: 20px;
+        top:10px;
+        width:65px;
+    }
     .w-sdc-designer-sidebar-tabs {
         .bg_c;
     }
@@ -237,7 +244,7 @@
         height: 32px;
         line-height: 32px;
         margin-top: 1px;
-        padding: 0 40px 0 20px;
+        padding: 0 10px 0 20px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -266,7 +273,7 @@
         .sprite-new;
         .arrow-up;
         right: 16px;
-        top: 10px;
+        top: 13px;
         transition: .3s all;
         position: absolute;
     }
@@ -664,8 +671,8 @@
         align-items: center;
         .non-certified {
             position: relative;
-            left: 27px;
-            bottom: 6px;
+            left: -4px;
+            top: -4px;
             .sprite;
             .s-sdc-state-non-certified;
             display: block;
@@ -682,8 +689,8 @@
 
     .non-certified {
         position: relative;
-        left: 43px;
-        bottom: 3px;
+        left: 0px;
+        top: 0px;
         .sprite;
         .s-sdc-state-non-certified;
         display: block;
@@ -841,6 +848,11 @@
         flex-direction: column;
         align-items: flex-end;
         margin-right:10px;
+        pointer-events: none;
+
+        & > * {
+            pointer-events: all;
+        }
 
         &.with-sidebar {
             right:320px;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
index 6e3258f69b..e389395142 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
@@ -143,19 +143,23 @@ export class DetailsViewModel {
                 this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onCancel);
             };
 
-            this.serviceService.checkComponentInstanceVersionChange(service, componentUid).subscribe((pathsToDelete:string[]) => {
-                if (pathsToDelete && pathsToDelete.length) {
-                    this.$scope.isLoading = false;
-                    this.$scope.$parent.isLoading = false;
-                    this.$scope.$parent.openVersionChangeModal(pathsToDelete).then(() => {
-                        this.$scope.isLoading = true;
-                        this.$scope.$parent.isLoading = true;
+            if (this.$scope.currentComponent.isService()) {
+                this.serviceService.checkComponentInstanceVersionChange(service, componentUid).subscribe((pathsToDelete:string[]) => {
+                    if (pathsToDelete && pathsToDelete.length) {
+                        this.$scope.isLoading = false;
+                        this.$scope.$parent.isLoading = false;
+                        this.$scope.$parent.openVersionChangeModal(pathsToDelete).then(() => {
+                            this.$scope.isLoading = true;
+                            this.$scope.$parent.isLoading = true;
+                            onUpdate();
+                        }, onCancel);
+                    } else {
                         onUpdate();
-                    }, onCancel);
-                } else {
-                    onUpdate();
-                }
-            }, onCancel);
+                    }
+                }, onCancel);
+            } else {
+                onUpdate();
+            }
         };
     }
 }
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 033c4668f3..9468937610 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
@@ -26,9 +26,10 @@
                       data-ng-if="!isComponentInstanceSelected()"  data-tests-id="rightTab_version" data-ng-bind="selectedComponent.version"></span>
 
                 <ng-form name="editForm" data-ng-if="isComponentInstanceSelected()">
-                    <select data-ng-model="editResourceVersion.changeVersion" name="changeVersion" data-tests-id="changeVersion" data-ng-disabled="$parent.isViewOnly || selectedComponent.uniqueId != editResourceVersion.allVersions[editResourceVersion.changeVersion]"
+                    <select data-ng-model="editResourceVersion.changeVersion" name="changeVersion" data-tests-id="changeVersion"
+                            data-ng-disabled="$parent.isViewOnly || selectedComponent.uniqueId != editResourceVersion.allVersions[editResourceVersion.changeVersion] || selectedComponent.archived"
                             class="i-sdc-designer-sidebar-section-content-item-value i-sdc-form-select"
-                            data-ng-class="{'minor': (editResourceVersion.changeVersion)%1}"
+                            data-ng-class="{'minor': (editResourceVersion.changeVersion)%1, 'disabled':selectedComponent.archived}"
                             data-ng-change="changeResourceVersion()">
                         <option class="select-instance-version" data-ng-class="{'minor': key%1}"
                                 ng-repeat="(key, value) in editResourceVersion.allVersions">{{key}}</option>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
index efd5cfd84d..e3ddecd9a5 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
@@ -139,9 +139,11 @@ export class ResourcePropertiesViewModel {
             (this.$scope.isPropertyOwner() ?
                 this.$scope.properties[property.parentUniqueId] :
                 this.$scope.properties[property.resourceInstanceUniqueId]) || [],
-            this.isPropertyValueOwner()).then((updatedProperty:PropertyModel) => {
-               let oldProp = _.find(this.$scope.properties[updatedProperty.resourceInstanceUniqueId], (prop:PropertyModel) => {return prop.uniqueId == updatedProperty.uniqueId;});
-            oldProp.value = updatedProperty.value;
+            this.isPropertyValueOwner(), "component", property.resourceInstanceUniqueId).then((updatedProperty:PropertyModel) => {
+                if(updatedProperty){
+                    let oldProp = _.find(this.$scope.properties[updatedProperty.resourceInstanceUniqueId], (prop:PropertyModel) => {return prop.uniqueId == updatedProperty.uniqueId;});
+                    oldProp.value = updatedProperty.value;
+                }
         });
     };
 
@@ -224,7 +226,9 @@ export class ResourcePropertiesViewModel {
                     return this.$filter("resourceName")(this.$scope.currentComponent.name);
 
                 default:
-                    return this.$filter("resourceName")((_.find(this.$scope.currentComponent.componentInstances, {uniqueId: key})).name);
+                    let componentInstance = _.find(this.$scope.currentComponent.componentInstances, {uniqueId: key});
+                    if(componentInstance)
+                        return this.$filter("resourceName")(componentInstance.name);
             }
         };
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less
index 41a90bff9d..ce5acc83e5 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less
@@ -1,5 +1,6 @@
 .w-sdc-designer-sidebar-tab-content.properties {
     .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label{
+        display:block;
         font-weight: bold;
     }
     .i-sdc-designer-sidebar-section-content-item-button.update{