re base code

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

4 files changed, 234 insertions, 0 deletions

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
new file mode 100644
index 0000000000..731d6a3855
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
@@ -0,0 +1,14 @@
+<div 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>
+
+    <div class="title" data-tests-id="selectedCompTitle" tooltip="&#8203;{{name}}">{{name}}</div>
+
+    <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
new file mode 100644
index 0000000000..9bbc765761
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
@@ -0,0 +1,34 @@
+/deep/
+.component-details-panel-header {
+    display: flex;
+    flex-direction: row;
+    height: 120px;
+    align-items: center;
+
+    .icon {
+        margin: 0 20px;
+    }
+
+    .title {
+        font-size: 16px;
+        text-overflow: ellipsis;
+        max-width: 180px;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .rename-instance {
+        position: absolute;
+        top: 14px;
+        right: 20px;
+        cursor: pointer;
+    }
+
+    .delete-instance {
+        position: absolute;
+        top: 14px;
+        right: 40px;
+        cursor: pointer;
+    }
+
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..ab659a3b8f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
@@ -0,0 +1,135 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+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 { UIZoneInstanceObject } from "../../../../../models/ui-models/ui-zone-instance-object";
+import { ModalButtonComponent } from "sdc-ui/lib/angular/components";
+
+@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;
+    @Input() isViewOnly: boolean;
+    @Input() isLoading: boolean;
+
+    constructor(private groupsService:GroupsService, private policiesService: PoliciesService, 
+                private modalService:SdcUiComponents.ModalService, private eventListenerService:EventListenerService) { }
+
+    private service:IZoneService;
+    private iconClassName: string;
+
+    ngOnInit(): void {
+        this.init();
+    }
+
+    ngOnChanges (changes:SimpleChanges):void {
+        if(changes.selectedZoneInstanceId){
+            this.init();
+        }
+    }
+
+    ngOnDestroy() {
+        
+        
+    }
+    private init = (): void => {
+        if (this.selectedZoneInstanceType === ZoneInstanceType.POLICY) {
+            this.iconClassName = "sprite-policy-icons policy";
+            this.service = this.policiesService;
+        } else if (this.selectedZoneInstanceType === ZoneInstanceType.GROUP) {
+            this.iconClassName = "sprite-group-icons group";
+            this.service = this.groupsService;
+        } else {
+            this.iconClassName = "sprite-resource-icons defaulticon";
+        }
+    }
+
+    private renameInstance = (): void => {
+        const modalConfig = {
+            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} 
+            ] as ModalButtonComponent[]
+        } as IModalConfig;
+        this.modalService.openCustomModal(modalConfig, ValueEditComponent, {name: this.name, validityChangedCallback: this.enableOrDisableSaveButton});
+    };
+
+    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
+        let saveButton: ModalButtonComponent = this.modalService.getCurrentInstance().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();
+        }
+    };
+    
+    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");
+    };
+
+    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);
+        });
+    };
+
+}
+
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
new file mode 100644
index 0000000000..bde0a14669
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
@@ -0,0 +1,51 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+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";
+
+@NgModule({
+    declarations: [
+        CompositionPanelHeaderComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        UiElementsModule,
+        SdcUiComponentsModule,
+        ModalFormsModule
+    ],
+    entryComponents: [
+        CompositionPanelHeaderComponent, ValueEditComponent
+    ],
+    exports: [
+        CompositionPanelHeaderComponent
+    ],
+})
+export class CompositionPanelHeaderModule {
+
+}