Catalog alignment

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

8 files changed, 333 insertions, 102 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.html
new file mode 100644
index 0000000000..75ee2d520f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.html
@@ -0,0 +1,28 @@
+<!--
+ ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+  
+<div class="name-update-container">
+     <sdc-input #updateNameInput 
+        label="Instance Name" 
+        required="true" 
+        [maxLength]="50" 
+        [(value)]="name" 
+        testId="instanceName"></sdc-input>
+     <sdc-validation [validateElement]="updateNameInput" (validityChanged)="validityChanged($event)">
+        <sdc-required-validator message="Name is required."></sdc-required-validator>
+        <sdc-regex-validator message="Special characters not allowed." [pattern]="pattern"></sdc-regex-validator>
+    </sdc-validation>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.less
new file mode 100644
index 0000000000..b958ca17b7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.less
@@ -0,0 +1,3 @@
+.name-update-container {
+    min-height: 90px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.ts
new file mode 100644
index 0000000000..9c4aab206e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'edit-name-modal',
+    templateUrl: './edit-name-modal.component.html',
+    styleUrls: ['./edit-name-modal.component.less']
+})
+export class EditNameModalComponent {
+
+    @Input() name:String;
+    @Input() validityChangedCallback: Function;
+
+    private pattern:string = "^[\\s\\w\&_.:-]{1,1024}$"
+    constructor(){
+    }
+
+    private validityChanged = (value):void => {
+        if(this.validityChangedCallback) {
+            this.validityChangedCallback(value);
+        }
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
index 67c82389cc..d9c56198ea 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
@@ -1,30 +1,23 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<div class="component-details-panel-header" data-tests-id="w-sdc-designer-sidebar-head">
-    
+<div *ngIf="selectedComponent" class="component-details-panel-header" data-tests-id="w-sdc-designer-sidebar-head">
     <div class="icon">
-        <div class="large {{iconClassName}}">
-            <div [ngClass]="{'non-certified': nonCertified}" tooltip="Not certified"></div>
-        </div>
+        <div *ngIf="iconClassName; else svgIcon" class="large {{iconClassName}}"></div>
+        <ng-template #svgIcon>
+            <sdc-element-icon
+                    [elementType]="selectedComponent.componentType === 'RESOURCE' ? selectedComponent.resourceType: (selectedComponent.originType || selectedComponent.componentType)"
+                    [iconName]="selectedComponent.icon"
+                    [uncertified]="!isTopologyTemplateSelected && selectedComponent.lifecycleState && 'CERTIFIED' !== selectedComponent.lifecycleState"></sdc-element-icon>
+        </ng-template>
     </div>
 
-    <div class="title" data-tests-id="selectedCompTitle" tooltip="&#8203;{{name}}">{{name}}</div>
+    <div class="title" data-tests-id="selectedCompTitle" tooltip="&#8203;{{selectedComponent.name}}">
+        {{selectedComponent.name}}
+    </div>
+
+    <svg-icon-label *ngIf="!isViewOnly && !isTopologyTemplateSelected && !selectedComponent.archived" name="edit-file-o"
+                    clickable="true" size="small" class="rename-instance" data-tests-id="renameInstance"
+                    (click)="renameInstance()"></svg-icon-label>
+    <svg-icon-label *ngIf="!isViewOnly && !isTopologyTemplateSelected && !selectedComponent.archived" name="trash-o"
+                    clickable="true" size="small" class="delete-instance" data-tests-id="deleteInstance"
+                    (click)="deleteInstance()"></svg-icon-label>
 
-    <svg-icon-label *ngIf="!isViewOnly" name="edit-file-o" clickable="true" size="small" class="rename-instance" data-tests-id="renameInstance" (click)="renameInstance()"></svg-icon-label>
-    <svg-icon-label *ngIf="!isViewOnly" name="trash-o" clickable="true" size="small" class="delete-instance" data-tests-id="deleteInstance" (click)="deleteInstance()"></svg-icon-label>
-    
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
index 9bbc765761..6685f74009 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
@@ -7,6 +7,7 @@
 
     .icon {
         margin: 0 20px;
+        display:flex;
     }
 
     .title {
@@ -31,4 +32,17 @@
         cursor: pointer;
     }
 
+
+    .non-certified {
+        position: absolute;
+        background-image: url('../../../../../../assets/styles/images/sprites/sprite-global-old.png');
+        background-position: -157px -3386px; width: 15px; height: 15px;
+    
+        &.smaller-icon {
+            left: 35px;
+            bottom: -14px;
+        }
+    }
+    
+    
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.spec.ts
new file mode 100644
index 0000000000..76e84a2323
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.spec.ts
@@ -0,0 +1,123 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CompositionService } from 'app/ng2/pages/composition/composition.service';
+import { EventListenerService } from '../../../../../services/event-listener-service';
+import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
+import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
+import { GroupsService } from 'app/services-ng2';
+import { PoliciesService } from 'app/services-ng2';
+import { CompositionPanelHeaderComponent } from './panel-header.component';
+import {SdcUiServices} from 'onap-ui-angular';
+import { Capability, Requirement, RequirementsGroup, CapabilitiesGroup, ComponentInstance, Component, FullComponentInstance, PolicyInstance, GroupInstance } from "app/models";
+import { of, Observable } from "rxjs";
+
+describe('CompositionPanelHeaderComponent', () => {
+  let component: CompositionPanelHeaderComponent;
+  let fixture: ComponentFixture<CompositionPanelHeaderComponent>;
+  const componentInstanceServiceNg2Stub = {
+    updateComponentInstance: jest.fn()
+  };
+  const valueEditModalInstance = {
+    innerModalContent : {
+      instance: { name : "VF Test" }
+    },
+    buttons: [{id: 'saveButton', text: 'OK', size: 'xsm', callback: jest.fn(), closeModal: false}],
+    closeModal : jest.fn()
+  };
+
+  beforeEach(
+    () => {
+      const compositionServiceStub = {};
+      const eventListenerServiceStub = {};
+
+      const workspaceServiceStub = {
+        metadata: {
+          componentType: "SERVICE",
+          uniqueId: "123"
+        }
+      };
+      const groupsServiceStub = {
+        updateName: jest.fn()
+      };
+      const policiesServiceStub = {
+        updateName: jest.fn()
+      };
+
+      TestBed.configureTestingModule({
+        schemas: [NO_ERRORS_SCHEMA],
+        declarations: [CompositionPanelHeaderComponent],
+        providers: [
+          { provide: CompositionService, useValue: compositionServiceStub },
+          { provide: EventListenerService, useValue: eventListenerServiceStub },
+          {
+            provide: ComponentInstanceServiceNg2,
+            useValue: componentInstanceServiceNg2Stub
+          },
+          { provide: WorkspaceService, useValue: workspaceServiceStub },
+          { provide: GroupsService, useValue: groupsServiceStub },
+          { provide: PoliciesService, useValue: policiesServiceStub },
+          { provide: SdcUiServices.ModalService, useValue: {}}
+        ]
+      });
+      fixture = TestBed.createComponent(CompositionPanelHeaderComponent);
+      component = fixture.componentInstance;
+    }
+  );
+
+  it('can load instance', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should close the modal without saving if the name has not changed', () => {
+    component.selectedComponent = <FullComponentInstance>{name: "VF Test"};
+    component.valueEditModalInstance = valueEditModalInstance;
+
+    component.saveInstanceName();
+    expect(component.componentInstanceService.updateComponentInstance).not.toHaveBeenCalled();
+    expect(component.valueEditModalInstance.closeModal).toHaveBeenCalled();
+  });
+
+  it('after editing instance name, capabilities/requirements should be updated with new name', () => {
+    const newName = "New VF NAME";
+    component.selectedComponent = new FullComponentInstance(<ComponentInstance>{
+      name: "VF Test",
+      requirements: <RequirementsGroup>{"key": [<Requirement>{ownerName: "VF Test"}, <Requirement>{ownerName: "VF Test"}]},
+      capabilities: new CapabilitiesGroup()
+    }, <Component>{});
+    component.selectedComponent.capabilities['key'] =  [<Capability>{ownerName: "VF Test"}];      
+    component.valueEditModalInstance = valueEditModalInstance;
+    component.valueEditModalInstance.innerModalContent.instance.name = newName;
+    jest.spyOn(component.componentInstanceService, 'updateComponentInstance').mockReturnValue(of(<ComponentInstance>{name: newName}));
+    component.saveInstanceName();
+    
+    expect(component.selectedComponent.name).toBe(newName);
+    expect(component.selectedComponent.requirements['key'][0].ownerName).toEqual(newName);
+    expect(component.selectedComponent.requirements['key'][1].ownerName).toEqual(newName);
+    expect(component.selectedComponent.capabilities['key'][0].ownerName).toEqual(newName);
+  });
+
+  it('if update fails, name is reverted to old value', () => { 
+    component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
+    component.valueEditModalInstance = valueEditModalInstance;
+    jest.spyOn(component.groupService, 'updateName').mockReturnValue(Observable.throw(new Error('Error')));
+    component.saveInstanceName();
+    expect(component.selectedComponent.name).toEqual("GROUP NAME");
+  });
+
+  it('policy instance uses policies service for update name', () => { 
+    component.selectedComponent = new PolicyInstance(<PolicyInstance>{name: "Policy OLD NAME"});
+    component.valueEditModalInstance = valueEditModalInstance;
+    jest.spyOn(component.policiesService, 'updateName').mockReturnValue(of(true));
+    component.saveInstanceName();
+    expect(component.policiesService.updateName).toHaveBeenCalledTimes(1);
+  });
+
+  it('group instance uses groups service for update name', () => { 
+    component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
+    component.valueEditModalInstance = valueEditModalInstance;
+    jest.spyOn(component.groupService, 'updateName').mockReturnValue(of(true));
+    component.saveInstanceName();
+    expect(component.groupService.updateName).toHaveBeenCalledTimes(1);
+  });
+
+});
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
index ab659a3b8f..90a98147e9 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
@@ -18,64 +18,70 @@
  * ============LICENSE_END=========================================================
  */
 
-import { Component,  Input,  AfterViewInit, SimpleChanges, OnInit, OnChanges } from "@angular/core";
-import {  SdcUiComponents } from "sdc-ui/lib/angular";
-import { IModalConfig } from 'sdc-ui/lib/angular/modals/models/modal-config';
-import { ZoneInstanceType } from 'app/models/graph/zones/zone-instance';
-import { ValueEditComponent } from './../../../../components/ui/forms/value-edit/value-edit.component';
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
-import { PoliciesService } from '../../../../services/policies.service';
-import { GroupsService } from '../../../../services/groups.service';
-import {IZoneService} from "../../../../../models/graph/zones/zone";
-import { EventListenerService, LoaderService } from "../../../../../services";
-import { GRAPH_EVENTS, EVENTS } from "../../../../../utils";
+import { Component, Input, OnInit } from "@angular/core";
+import { SdcUiComponents, SdcUiCommon, SdcUiServices } from "onap-ui-angular";
+import { EditNameModalComponent } from "app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component";
+import {Component as TopologyTemplate, FullComponentInstance, GroupInstance, PolicyInstance, Requirement, Capability, ComponentInstance} from "app/models";
+import { Select } from "@ngxs/store";
+import { Observable } from "rxjs/Observable";
+import { Subscription } from "rxjs";
+import {GRAPH_EVENTS} from "../../../../../utils/constants";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import {EventListenerService} from "../../../../../services/event-listener-service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { GroupsService, PoliciesService } from "app/services-ng2";
 import { UIZoneInstanceObject } from "../../../../../models/ui-models/ui-zone-instance-object";
-import { ModalButtonComponent } from "sdc-ui/lib/angular/components";
+import {SelectedComponentType} from "../../common/store/graph.actions";
+import * as _ from 'lodash';
+import {GraphState} from "../../common/store/graph.state";
+
 
 @Component({
     selector: 'ng2-composition-panel-header',
     templateUrl: './panel-header.component.html',
     styleUrls: ['./panel-header.component.less']
 })
-export class CompositionPanelHeaderComponent implements OnInit, OnChanges {
-
-    @Input() topologyTemplate: TopologyTemplate;
-    @Input() selectedZoneInstanceType: ZoneInstanceType;
-    @Input() selectedZoneInstanceId: string;
-    @Input() name: string;
-    @Input() nonCertified: boolean;
+export class CompositionPanelHeaderComponent implements OnInit {
     @Input() isViewOnly: boolean;
-    @Input() isLoading: boolean;
+    @Input() selectedComponent: FullComponentInstance | TopologyTemplate | GroupInstance | PolicyInstance;
+    @Select(GraphState.getSelectedComponentType) selectedComponentType$:Observable<SelectedComponentType>;
+
 
-    constructor(private groupsService:GroupsService, private policiesService: PoliciesService, 
-                private modalService:SdcUiComponents.ModalService, private eventListenerService:EventListenerService) { }
+    constructor(private modalService: SdcUiServices.ModalService,
+                private groupService: GroupsService,
+                private policiesService: PoliciesService,
+                private eventListenerService: EventListenerService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService,
+                private componentInstanceService: ComponentInstanceServiceNg2) { }
 
-    private service:IZoneService;
     private iconClassName: string;
+    private valueEditModalInstance: SdcUiComponents.ModalComponent;
+    private isTopologyTemplateSelected: boolean;
+    private componentTypeSubscription: Subscription;
 
     ngOnInit(): void {
-        this.init();
-    }
+        this.componentTypeSubscription = this.selectedComponentType$.subscribe((newComponentType) => {
 
-    ngOnChanges (changes:SimpleChanges):void {
-        if(changes.selectedZoneInstanceId){
-            this.init();
-        }
+            this.initClasses(newComponentType);
+            this.isTopologyTemplateSelected = (newComponentType === SelectedComponentType.TOPOLOGY_TEMPLATE) ? true : false;
+        });
     }
 
     ngOnDestroy() {
-        
-        
+        if(this.componentTypeSubscription) {
+            this.componentTypeSubscription.unsubscribe();
+        }
     }
-    private init = (): void => {
-        if (this.selectedZoneInstanceType === ZoneInstanceType.POLICY) {
+
+    private initClasses = (componentType:SelectedComponentType): void => {
+        if (componentType === SelectedComponentType.POLICY) {
             this.iconClassName = "sprite-policy-icons policy";
-            this.service = this.policiesService;
-        } else if (this.selectedZoneInstanceType === ZoneInstanceType.GROUP) {
+        } else if (componentType === SelectedComponentType.GROUP) {
             this.iconClassName = "sprite-group-icons group";
-            this.service = this.groupsService;
         } else {
-            this.iconClassName = "sprite-resource-icons defaulticon";
+            this.iconClassName = undefined;
         }
     }
 
@@ -83,53 +89,95 @@ export class CompositionPanelHeaderComponent implements OnInit, OnChanges {
         const modalConfig = {
             title: "Edit Name",
             size: "sm",
-            type: "custom",
+            type: SdcUiCommon.ModalType.custom,
             testId: "renameInstanceModal",
             buttons: [
                 {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false},
-                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true} 
-            ] as ModalButtonComponent[]
-        } as IModalConfig;
-        this.modalService.openCustomModal(modalConfig, ValueEditComponent, {name: this.name, validityChangedCallback: this.enableOrDisableSaveButton});
+                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true}
+            ] as SdcUiCommon.IModalButtonComponent[]
+        } as SdcUiCommon.IModalConfig;
+        this.valueEditModalInstance = this.modalService.openCustomModal(modalConfig, EditNameModalComponent, {name: this.selectedComponent.name, validityChangedCallback: this.enableOrDisableSaveButton});
     };
 
     private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
-        let saveButton: ModalButtonComponent = this.modalService.getCurrentInstance().getButtonById('saveButton');
+        let saveButton: SdcUiComponents.ModalButtonComponent = this.valueEditModalInstance.getButtonById('saveButton');
         saveButton.disabled = !shouldEnable;
     }
 
     private saveInstanceName = ():void => {
-        let currentModal = this.modalService.getCurrentInstance();
-        let nameFromModal:string = currentModal.innerModalContent.instance.name;
-
-        if(nameFromModal != this.name){
-            currentModal.buttons[0].disabled = true;
-            this.service.updateName(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId, nameFromModal).subscribe((success)=>{
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, nameFromModal);
-                this.modalService.closeModal();
-            }, (error)=> {
-                currentModal.buttons[0].disabled = false;
-            });
-        } else {
-            this.modalService.closeModal();
+        let nameFromModal:string = this.valueEditModalInstance.innerModalContent.instance.name;
+
+        if(nameFromModal != this.selectedComponent.name){
+            let oldName = this.selectedComponent.name;
+            this.selectedComponent.name = nameFromModal;
+            this.valueEditModalInstance.buttons[0].disabled = true;
+
+            let onFailed = (error) => { 
+                this.selectedComponent.name = oldName;
+                this.valueEditModalInstance.buttons[0].disabled = false;
+            };
+
+            if(this.selectedComponent instanceof FullComponentInstance){
+                let onSuccess = (componentInstance:ComponentInstance) => {
+                    //update requirements and capabilities owner name
+                    _.forEach((<FullComponentInstance>this.selectedComponent).requirements, (requirementsArray:Array<Requirement>) => {
+                        _.forEach(requirementsArray, (requirement:Requirement):void => {
+                            requirement.ownerName = componentInstance.name;
+                        });
+                    });
+
+                    _.forEach((<FullComponentInstance>this.selectedComponent).capabilities, (capabilitiesArray:Array<Capability>) => {
+                        _.forEach(capabilitiesArray, (capability:Capability):void => {
+                            capability.ownerName = componentInstance.name;
+                        });
+                    });
+                    this.valueEditModalInstance.closeModal();
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.selectedComponent);
+                };
+
+                this.componentInstanceService.updateComponentInstance(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, new ComponentInstance(this.selectedComponent))
+                    .subscribe(onSuccess, onFailed);
+            } else if (this.selectedComponent instanceof PolicyInstance) {
+                this.policiesService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.selectedComponent);
+                    this.valueEditModalInstance.closeModal();
+                }, onFailed);
+            } else if (this.selectedComponent instanceof GroupInstance){
+                this.groupService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.selectedComponent);
+                    this.valueEditModalInstance.closeModal();
+                }, onFailed);
+            }
+        }  else {
+            this.valueEditModalInstance.closeModal();
         }
     };
-    
+
     private deleteInstance = (): void => {
         let title:string = "Delete Confirmation";
-        let message:string = "Are you sure you would like to delete "+ this.name + "?";
-        this.modalService.openAlertModal(title, message, "OK", this.deleteInstanceConfirmed, "deleteInstanceModal");
+        let message:string = "Are you sure you would like to delete "+ this.selectedComponent.name + "?";
+        const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.warning, callback: this.deleteInstanceConfirmed, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+        this.modalService.openWarningModal(title, message, "delete-modal", [okButton]);
     };
 
-    private deleteInstanceConfirmed = () => {
-        this.eventListenerService.notifyObservers(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
-        this.service.deleteZoneInstance(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).finally(()=> {
-            this.eventListenerService.notifyObservers(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
-        }).subscribe(()=> {
-            let deletedItem:UIZoneInstanceObject = new UIZoneInstanceObject(this.selectedZoneInstanceId, this.selectedZoneInstanceType, this.name);
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, deletedItem);
-        });
-    };
+    private deleteInstanceConfirmed: Function = () => {
+        if(this.selectedComponent instanceof FullComponentInstance){
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE , this.selectedComponent.uniqueId);
+        }
+        else if(this.selectedComponent instanceof PolicyInstance){
+            this.policiesService.deletePolicy(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
+                    new UIZoneInstanceObject(this.selectedComponent.uniqueId, 1));
+            }, (err) => {});
+
+        }
+        else if(this.selectedComponent instanceof GroupInstance){
+            this.groupService.deleteGroup(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
+                    new UIZoneInstanceObject(this.selectedComponent.uniqueId, 0));
+            }, (err) => {});
 
+        }
+    };
 }
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
index bde0a14669..a11bc99fee 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
@@ -18,29 +18,26 @@
  * ============LICENSE_END=========================================================
  */
 import { NgModule } from "@angular/core";
-import { HttpModule } from "@angular/http";
 import { FormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { CompositionPanelHeaderComponent } from "./panel-header.component";
 import { UiElementsModule } from './../../../../components/ui/ui-elements.module';
-import { ValueEditComponent } from './../../../../components/ui/forms/value-edit/value-edit.component';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { ModalFormsModule } from "app/ng2/components/ui/forms/modal-forms.module";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { EditNameModalComponent } from "app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component";
 
 @NgModule({
     declarations: [
-        CompositionPanelHeaderComponent
+        CompositionPanelHeaderComponent,
+        EditNameModalComponent
     ],
     imports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
         UiElementsModule,
-        SdcUiComponentsModule,
-        ModalFormsModule
+        SdcUiComponentsModule
     ],
     entryComponents: [
-        CompositionPanelHeaderComponent, ValueEditComponent
+        CompositionPanelHeaderComponent, EditNameModalComponent
     ],
     exports: [
         CompositionPanelHeaderComponent