Merge from ecomp 718fd196 - Modern UI

Issue-ID: VID-378

Change-Id: I2736b98426e324ec3aa233b034229ba84d99839f
Signed-off-by: Ittay Stern <ittay.stern@att.com>

5 files changed, 141 insertions, 17 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
index f02ed6293..46807607d 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
@@ -10,7 +10,7 @@
               </svg-icon>
     </span>
 
-    <div class="header-col middleDetails" style="padding-top: 5px;padding-left: 13px;line-height: 100%;" *ngIf="isServiceFailed">
+    <div class="header-col middleDetails" style="padding-top: 7px;padding-left: 13px;line-height: 100%;" *ngIf="isServiceFailed">
       <custom-popover class="failed-popover-wrap" [value]= "serviceStatusMessage" [placement]="'bottom'" [popoverType]="'error'">
         <span [attr.data-tests-id]="'service-failed-msg'" class="failed-msg labelPosition" >Failed</span>
       </custom-popover>
@@ -22,7 +22,9 @@
     <div class="header-col middleDetails notShowOnCreateMode"
          style="padding-top: 0px;padding-left: 13px;line-height: 100%;">
       <span [attr.data-tests-id]="'orchStatusLabel'" class="service-instance-label labelPosition">Orch Status:</span>
-      <span [attr.data-tests-id]="'orchStatusValue'" class="orch-status-value">{{serviceOrchStatus}}</span>
+      <span [attr.data-tests-id]="'orchStatusValue'"
+            [ngClass]="{'tag-status-value' :serviceOrchStatus?.toLowerCase()!= 'active'}"
+            class="orch-status-value">{{serviceOrchStatus}}</span>
     </div>
     <div class="quantity-container header-col middleDetails"
          style="padding-top: 0px;padding-left: 13px;line-height: 100%;"
@@ -38,6 +40,8 @@
 
 
   <div class="right-header">
+    <span class="action-status-type-header delete" [attr.data-tests-id]="'delete-status-type-header'" *ngIf="isDeleted === true">Delete</span>
+    <span class="action-status-type-header resume" [attr.data-tests-id]="'resume-status-type-header'" *ngIf="isResume === true">Resume</span>
     <span class="menu-container notShowOnViewMode notShowOnRetryMode">
       <span [attr.data-tests-id]="'openMenuBtn'" class="icon-browse" (click)="onContextMenu($event)"></span>
       <context-menu>
@@ -46,7 +50,7 @@
             <span class="icon-edit"></span>Edit</div>
         </ng-template>
         <ng-template *ngIf="mode === 'EDIT'" contextMenuItem
-                     (execute)="isDeleted=!isDeleted; drawingBoardHeaderService.deleteService(serviceModelId,isDeleted)">
+                     (execute)="onDeleteUndoDeleteClick()">
           <div [attr.data-tests-id]="'context-menu-header-delete-item'"><span class="icon-trash"></span>{{isDeleted ? 'Undo delete': 'Delete'}}</div>
         </ng-template>
         <ng-template *ngIf="mode !== 'CREATE'" contextMenuItem
@@ -60,6 +64,10 @@
                 </svg-icon></div>
                 <div style="padding-left: 12px;">Show Audit Info</div>
         </ng-template>
+        <ng-template *ngIf="drawingBoardHeaderService?.showResumeService(serviceModelId)" contextMenuItem
+                     (execute)="onResumeUndoResumeClick()">
+          <div [attr.data-tests-id]="'context-menu-header-resume-item'"><span class="icon-trash"></span>{{isResume ? 'Undo resume': 'Resume'}}</div>
+        </ng-template>
       </context-menu>
     </span>
     <button [disabled]="drawingBoardHeaderService?.deployShouldBeDisabled(serviceModelId, mode)"
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.scss
index 1242f9429..353c1151f 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.scss
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.scss
@@ -85,6 +85,13 @@
         font-family: OpenSans-Regular;
         font-size: 14px;
         color: #191919;
+        &.tag-status-value {
+          background: #009fdb;
+          color: white;
+          border-radius: 2px;
+          text-align: center;
+          padding: 5px;
+        }
       }
       .scale-value {
         font-family: OpenSans-Regular;
@@ -111,9 +118,25 @@
         height: 45px;
       }
     }
+
     .right-header {
       display: flex;
       align-items: center;
+      .action-status-type-header {
+          background: transparent;
+          font-family: OpenSans-SemiBold;
+          font-size: 12px;
+          border-radius: 50px;
+          border: 1px solid gray;
+          padding: 5px 20px;
+          margin-right: 10px;
+        &.delete {
+          color: red;
+        }
+        &.resume {
+          color: #009fdb;
+        }
+      }
       .quantity-container {
         .quantity-label {
           padding-left: 10px;
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
index 6e4391572..51f90534b 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
@@ -39,6 +39,7 @@ export class DrawingBoardHeader {
   mode : DrawingBoardModes = DrawingBoardModes.CREATE;
   serviceOrchStatus: string;
   isDeleted: boolean = false;
+  isResume: boolean = false;
   store : NgRedux<AppState>;
   drawingBoardPermissions : DrawingBoardPermissions;
   drawingBoardHeaderService : DrawingBoardHeaderService;
@@ -122,7 +123,7 @@ export class DrawingBoardHeader {
       type: PopupType.SERVICE,
       uuidData: <any>{
         type : PopupType.SERVICE,
-        isMacro : this.store.getState().service.serviceHierarchy[this.serviceModelId].service.instantiationType === 'Macro',
+        isMacro : this.store.getState().service.serviceHierarchy[this.serviceModelId].service.vidNotions.instantiationType === 'Macro',
         serviceId: this.serviceModelId,
         popupService: this._servicePopupService
       },
@@ -130,6 +131,32 @@ export class DrawingBoardHeader {
     });
   }
 
+  onDeleteUndoDeleteClick(){
+    this.cancelResume(this.serviceModelId);
+    this.isDeleted = !this.isDeleted;
+    this._drawingBoardHeaderService.deleteService(this.serviceModelId, this.isDeleted)
+  }
+
+  onResumeUndoResumeClick(){
+    this.cancelDelete(this.serviceModelId);
+    this.isResume = !this.isResume;
+    this._drawingBoardHeaderService.toggleResumeService(this.serviceModelId, this.isResume);
+  }
+
+  cancelDelete(serviceModelId: string) {
+    if (this.isDeleted) {
+      this.isDeleted = false;
+      this._drawingBoardHeaderService.deleteService(serviceModelId,this.isDeleted);
+    }
+  }
+
+  cancelResume(serviceModelId: string) {
+    if (this.isResume) {
+      this.isResume = false;
+      this._drawingBoardHeaderService.toggleResumeService(serviceModelId,this.isResume);
+    }
+  }
+
   extractOwningEntityNameAccordingtoId(id:String): string {
     let owningEntityName;
     _.forEach(this.store.getState().service.categoryParameters.owningEntityList,(owningEntity: OwningEntity) => {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
index bcf6753b9..76fc28a9e 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
@@ -85,7 +85,7 @@ describe('Generate path to old View/Edit ', () => {
   });
 
   test('deployShouldBeDisabled with validationCounter greater then 0',()=>{
-    jest.spyOn(store, 'getState').mockReturnValue({
+    jest.spyOn(store, 'getState').mockReturnValue(<any>{
       service: {
         serviceInstance : {
           'serviceInstanceId' : {
@@ -94,12 +94,12 @@ describe('Generate path to old View/Edit ', () => {
         }
       }
     });
-    let result = service.deployShouldBeDisabled("serviceInstanceId");
+    let result = service.deployShouldBeDisabled("serviceInstanceId", DrawingBoardModes.RETRY_EDIT);
     expect(result).toBeTruthy();
   });
 
   test('deployShouldBeDisabled with validationCounter is 0 and not dirty',()=>{
-    jest.spyOn(store, 'getState').mockReturnValue({
+    jest.spyOn(store, 'getState').mockReturnValue(<any>{
       service: {
         serviceInstance : {
           'serviceInstanceId' : {
@@ -109,12 +109,12 @@ describe('Generate path to old View/Edit ', () => {
         }
       }
     });
-    let result = service.deployShouldBeDisabled("serviceInstanceId");
+    let result = service.deployShouldBeDisabled("serviceInstanceId", DrawingBoardModes.RETRY_EDIT);
     expect(result).toBeFalsy();
   });
 
   test('deployShouldBeDisabled with validationCounter is 0 and dirty',()=>{
-    jest.spyOn(store, 'getState').mockReturnValue({
+    jest.spyOn(store, 'getState').mockReturnValue(<any>{
       service: {
         serviceInstance : {
           'serviceInstanceId' : {
@@ -125,12 +125,12 @@ describe('Generate path to old View/Edit ', () => {
         }
       }
     });
-    let result = service.deployShouldBeDisabled("serviceInstanceId");
+    let result = service.deployShouldBeDisabled("serviceInstanceId", DrawingBoardModes.RETRY_EDIT);
     expect(result).not.toBeTruthy();
   });
 
   test('deployShouldBeDisabled with validationCounter is 0 and not and action is None and dirty',()=>{
-    jest.spyOn(store, 'getState').mockReturnValue({
+    jest.spyOn(store, 'getState').mockReturnValue(<any>{
       service: {
         serviceInstance : {
           'serviceInstanceId' : {
@@ -141,7 +141,7 @@ describe('Generate path to old View/Edit ', () => {
         }
       }
     });
-    let result = service.deployShouldBeDisabled("serviceInstanceId");
+    let result = service.deployShouldBeDisabled("serviceInstanceId", DrawingBoardModes.RETRY_EDIT);
     expect(result).not.toBeTruthy();
   });
 
@@ -157,8 +157,8 @@ describe('Generate path to old View/Edit ', () => {
     expect(result).toEqual('REDEPLOY');
   });
   test('getButtonText',()=>{
-    expect(service.getButtonText("VIEW")).toEqual('EDIT');
-    expect(service.getButtonText("RETRY")).toEqual('REDEPLOY');
+    expect(service.getButtonText(DrawingBoardModes.VIEW)).toEqual('EDIT');
+    expect(service.getButtonText(DrawingBoardModes.RETRY)).toEqual('REDEPLOY');
 
   });
   const showEditServiceDataProvider = [
@@ -169,7 +169,7 @@ describe('Generate path to old View/Edit ', () => {
     ['None action EDIT mode',DrawingBoardModes.EDIT,  ServiceInstanceActions.None, false],
     ['None action RETRY_EDIT mode', DrawingBoardModes.RETRY_EDIT, ServiceInstanceActions.None, false]];
   each(showEditServiceDataProvider).test('showEditService service with %s', (description, mode, action, enabled) => {
-    jest.spyOn(store, 'getState').mockReturnValue({
+    jest.spyOn(store, 'getState').mockReturnValue(<any>{
       service: {
         serviceInstance : {
           'serviceInstanceId' : {
@@ -181,4 +181,49 @@ describe('Generate path to old View/Edit ', () => {
     expect(service.showEditService(mode, 'serviceInstanceId')).toBe(enabled);
 
   });
+
+  const showResumeServiceDataProvider = [
+    ['all conditions of resume- should show resume',true, 'MACRO', 'VPE', 'AssiGNed', true],
+    ['flag is disabled- should not show resume ',false, 'MACRO', 'VPE', 'AssiGNed', false],
+    ['transport service (PNF)- should not show resume', true, 'Macro', 'transport', 'Assigned', false],
+    ['instantiationType is a-la-carte- should not show resume', true, 'ALaCarte', 'VPE', 'Assigned', false],
+    ['orchestration Status is not assigned- should not show resume', true, 'Macro', 'VPE', 'Created', false],
+    ['orchestration Status is Inventoried - should show resume', true, 'Macro', 'VPE', 'iNventOriEd', true]
+  ];
+
+  each(showResumeServiceDataProvider).test('showResumeService when %s', (description, flagResumeMacroService,instantiationType, subscriptionServiceType, orchStatus, shouldShowResumeService) => {
+    jest.spyOn(store, 'getState').mockReturnValue(<any>{
+      global: {
+        flags:{
+          'FLAG_1908_RESUME_MACRO_SERVICE': flagResumeMacroService
+        }
+      },
+      service: {
+        serviceInstance : {
+          'serviceModelId' : {
+            'vidNotions': {
+              'instantiationType': instantiationType
+            },
+            'subscriptionServiceType':subscriptionServiceType,
+            'orchStatus': orchStatus
+          }
+        }
+      }
+    });
+    expect(service.showResumeService('serviceModelId')).toBe(shouldShowResumeService);
+
+  });
+
+
+  const toggleResumeServiceDataProvider = [
+    [ServiceInstanceActions.None, true],
+    [ServiceInstanceActions.Resume, false]
+  ];
+
+  each(toggleResumeServiceDataProvider).test('toggleResumeService - should call %s for resume/ undo Resume',(serviceAction, isResume)=>{
+    jest.spyOn(store, 'dispatch');
+    service.toggleResumeService("serviceInstanceId", isResume);
+    expect(store.dispatch).toHaveBeenCalledWith(addServiceAction("serviceInstanceId", serviceAction));
+  });
+
 });
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts
index 946c5cab5..7df2f3a3f 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts
@@ -11,6 +11,7 @@ import * as _ from 'lodash';
 import {ErrorMsgService} from "../../../shared/components/error-msg/error-msg.service";
 import {DrawingBoardModes} from "../drawing-board.modes";
 import {ServiceInstance} from "../../../shared/models/serviceInstance";
+import {FeatureFlagsService, Features} from "../../../shared/services/featureFlag/feature-flags.service";
 
 @Injectable()
 export class DrawingBoardHeaderService{
@@ -38,7 +39,13 @@ export class DrawingBoardHeaderService{
   showAuditInfo(serviceModelId) : void {
     let instance: ServiceInstance = this.store.getState().service.serviceInstance[serviceModelId];
     let model =  new ServiceModel(this.store.getState().service.serviceHierarchy[serviceModelId]);
-    AuditInfoModalComponent.openInstanceAuditInfoModal.next({instanceId : serviceModelId , type : 'SERVICE', model : model , instance : instance, trackById: instance.trackById});
+    AuditInfoModalComponent.openInstanceAuditInfoModal.next({instanceId : serviceModelId , type : 'SERVICE', model : model , instance : instance});
+  }
+
+  toggleResumeService(serviceModelId, isResume: boolean) : void {
+    const action: ServiceInstanceActions = isResume ? ServiceInstanceActions.Resume : ServiceInstanceActions.None;
+    this.store.dispatch(addServiceAction(serviceModelId, action));
+
   }
 
 
@@ -49,7 +56,7 @@ export class DrawingBoardHeaderService{
     const serviceInstance = this.store.getState().service.serviceInstance[serviceInstanceId];
     if(!_.isNil(serviceInstance)){
       const validationCounter = serviceInstance.validationCounter;
-      if (!_.isNil(this.errorMsgService.errorMsgObject)&& mode !== DrawingBoardModes.RETRY_EDIT) return true;
+      if (!_.isNil(this.errorMsgService.errorMsgObject) && mode !== DrawingBoardModes.RETRY_EDIT) return true;
       if(validationCounter > 0) return true;
       if(serviceInstance.action !== ServiceInstanceActions.None) return false;
       if(mode === DrawingBoardModes.RETRY_EDIT) return false;
@@ -83,4 +90,18 @@ export class DrawingBoardHeaderService{
     return mode === DrawingBoardModes.CREATE || ((mode === DrawingBoardModes.RETRY_EDIT || mode === DrawingBoardModes.EDIT)&&
       !_.isNil(serviceInstance) && !_.isNil(serviceInstance[serviceModelId])&& serviceInstance[serviceModelId].action === ServiceInstanceActions.Create);
   }
+
+  showResumeService(serviceModelId: string): boolean {
+    const serviceInstance: ServiceInstance = !_.isNil(this.store.getState().service.serviceInstance)? this.store.getState().service.serviceInstance[serviceModelId] : null;
+    if (serviceInstance)
+    {
+      return FeatureFlagsService.getFlagState(Features.FLAG_1908_RESUME_MACRO_SERVICE, this.store) &&
+        serviceInstance.vidNotions.instantiationType.toLowerCase() === "macro" &&
+        serviceInstance.subscriptionServiceType.toLowerCase() !== "transport" &&
+        serviceInstance.orchStatus &&
+        (serviceInstance.orchStatus.toLowerCase() === "assigned" ||
+          serviceInstance.orchStatus.toLowerCase() === "inventoried");
+    }
+    return false;
+  }
 }