Corrected artifact name for multiple template ids

Made changes in param name value component ts for setting correct
artifact name while saving and retrieving artifacts, in case of multiple
template ids.

Issue-ID: APPC-812
Change-Id: I973f7b763f4c2204425fceb77cdae33944ba3c8d
Signed-off-by: sj108s <sj108s@us.att.com>

3 files changed, 500 insertions, 384 deletions

diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
index 302fd60..5aeb7ff 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
@@ -16,11 +16,13 @@ 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============================================
 -->
 
 <simple-notifications [options]="options"></simple-notifications>
-<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
+<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'"
+    [color]="'#6ab344'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
 <form class="" novalidate #userForm="ngForm" (ngSubmit)="save(userForm.value,userForm.valid)">
     <div class="card">
 
@@ -28,7 +30,8 @@ limitations under the License.
             <div class="row" style="padding: 15px 25px">
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Action*</label>
-                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);" #action="ngModel" name="action">
+                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);"
+                        #action="ngModel" name="action">
                         <option [value]="actionType"
                                 [ngClass]="{'selectedAction':selectedActions.indexOf(actionType)>-1}"
                                 [selected]="referenceDataObject.action===actionType"
@@ -39,16 +42,20 @@ limitations under the License.
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>VNF Type* </label>
-                    <input type="text" readonly class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']" (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype">
+                    <input type="text" readonly class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']"
+                        (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype">
                     <span class="error-message" [hidden]="vnfParams?.vnfType || vnftype.valid || (vnftype.pristine && !userForm.submitted)">Required Field</span>
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>VNFC Type</label>
-                    <input type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
+                    <input type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)"
+                        (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Device Protocol*</label>
-                    <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" #deviceProtocol="ngModel" name="deviceProtocol">
+                    <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" (ngModelChange)="deviceProtocolChange()"
+                        #deviceProtocol="ngModel" name="deviceProtocol">
+
                         <option [value]="device" [selected]="referenceDataObject.deviceProtocol===device"
                                 *ngFor="let device of deviceProtocols">{{device}}
                         </option>
@@ -57,7 +64,8 @@ limitations under the License.
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="isConfigScaleOut">
                     <label>Template Identifier</label>
-                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified()" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)"
+                        [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
                         <option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}}
                         </option>
                     </select>
@@ -74,16 +82,20 @@ limitations under the License.
             <div class="col-12" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')">
                 <div class="input-group">
                     <input id="inputFile" class="file" #myInput type='file' (change)="fileChange($event)">
-                    <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse" style="width:80%">
-                    <button (click)="browseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload Reference File
+                    <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse"
+                        style="width:80%">
+                    <button (click)="browseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
+                        type="button">Upload Reference File
                     </button>
                 </div>
             </div>
             <div class="col-12" *ngIf="referenceDataObject.action === 'OpenStack Actions'">
                 <div class="input-group">
                     <input id="excelInputFile" #myInput1 class="file" type="file" (change)="upload($event)">
-                    <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName" style="width:80%">
-                    <button (click)="excelBrowseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload VM Capabilities File
+                    <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName"
+                        style="width:80%">
+                    <button (click)="excelBrowseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
+                        type="button">Upload VM Capabilities File
                     </button>
                 </div>
             </div>
@@ -98,7 +110,8 @@ limitations under the License.
                         <div class="text-right col-6">
                             <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="submit">Download All To PC
                             </button>&emsp;&emsp;
-                            <button id="saveToAppc" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" (click)="saveToAppc(userForm.valid, userForm)">Save All to APPC
+                            <button id="saveToAppc" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button"
+                                (click)="saveToAppc(userForm.valid, userForm)">Save All to APPC
                             </button>&emsp;&emsp;
                         </div>
                     </div>
@@ -126,7 +139,8 @@ limitations under the License.
                                     <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['url']" name="contextUrl">
                                 </div>
                             </div>
-                            <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action ==''  || referenceDataObject.action ==undefined)" style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
+                            <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action ==''  || referenceDataObject.action ==undefined)"
+                                style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
                                 <div class="col-12">
                                     <h5 style="margin-top: 0.5rem;font-family: Roboto"> VNFC Information
                                         <span class="pull-right">
@@ -139,12 +153,13 @@ limitations under the License.
                             </div>
                             <div class="row" *ngIf="(( referenceDataObject.action =='ConfigScaleOut' ||referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ) && isCollapsedContent) ">
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px;">VNFC Type*</label>
+                                    <label style="font-size:12px;">VNFC Type</label>
                                     <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" #vnfcType="ngModel" name="samplevnfcType">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px">VNFC Function Code*</label>
-                                    <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="samplevnfcFunctionCode">
+                                    <label style="font-size:12px">VNFC Function Code</label>
+                                    <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel"
+                                        name="samplevnfcFunctionCode">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                     <label style="font-size:12px;">IPAddress V4 OAM VIP</label>
@@ -161,33 +176,39 @@ limitations under the License.
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                     <label style="font-size:12px;">Group Notation Value</label>
-                                    <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']" name="sampleGroupValue">
+                                    <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']"
+                                        name="sampleGroupValue">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn" (click)="clearVnfcData()">Clear VNFC Info
+                                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn"
+                                        (click)="clearVnfcData()">Clear VNFC Info
                                     </button>
                                 </div>
                             </div>
                             <hr>
-                            <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )" class="row">
+                            <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )"
+                                class="row">
                                 <div class="col-lg-2 col-md-2 hdden-sm-down">
                                     <label style="margin-top: 17px;" class="headlinesInBold"> Number Of VM(s): </label>
                                 </div>
                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6">
                                     <div class="form-group">
-                                        <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from" (ngModelChange)="numberValidation($event)" name="txtNumber23">
+                                        <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from"
+                                            (ngModelChange)="numberValidation($event)" name="txtNumber23">
                                     </div>
                                 </div>
                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 text-right">
                                     <div class="form-group">
-                                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!refernceScopeObj.from || !numberOfVmTest" (click)="addVms()">Add VM Information
+                                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!refernceScopeObj.from || !numberOfVmTest"
+                                            (click)="addVms()">Add VM Information
                                         </button>
                                     </div>
                                 </div>
                             </div>
                             <div *ngIf="referenceDataObject.vm?.length>0">
                                 <div class="row" *ngFor="let noOfvm of referenceDataObject.vm | vmFiltering:referenceDataObject?.action:templateIdentifier; let j=index">
-                                    <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))" class="col-12">
+                                    <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))"
+                                        class="col-12">
                                         <div class="row" *ngFor="let item of noOfvm.vnfc; let i=index">
                                             <div class="col-md-12" *ngIf="i==0">
                                                 <h5 class="headlinesInBold">VM Number: {{j+1}}</h5>
@@ -198,12 +219,14 @@ limitations under the License.
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Type*</label>
-                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType="ngModel" name="vnfcType{{j}}">
+                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType="ngModel"
+                                                    name="vnfcType{{j}}">
                                                 <span class="error-message" [hidden]="vnfcType.valid || (vnfcType.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Function Code*</label>
-                                                <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="vnfcFunctionCode{{j}}">
+                                                <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel"
+                                                    name="vnfcFunctionCode{{j}}">
                                                 <span class="error-message" [hidden]="vnfcFunctionCode.valid || (vnfcFunctionCode.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
@@ -228,7 +251,8 @@ limitations under the License.
                                             </div>
                                             <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                                 <div class="removevnfcClass" *ngIf="refernceScopeObj.sourceType !='vnfcType'">
-                                                    <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="removeFeature(j,i,templateIdentifier)">Remove Vm</a>
+                                                    <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
+                                                        (click)="removeFeature(j,i,templateIdentifier)">Remove Vm</a>
                                                 </div>
                                                 <div>
                                                     <a *ngIf="(referenceDataObject.vm[j].vnfc.length-1) == i " [hidden]="true" role="button" (click)="addVnfcData(j)">Add VNFC
@@ -313,8 +337,10 @@ limitations under the License.
             </div>
             <div class="modal-footer">
                 <div>
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal" (click)="addToIdentDrp()">Add</button>
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''" data-dismiss="modal">cancel</button>
+                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal"
+                        (click)="addToIdentDrp()">Add</button>
+                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''"
+                        data-dismiss="modal">cancel</button>
                 </div>
             </div>
         </div>
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.spec.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.spec.ts
index 1570e9c..72f56a7 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.spec.ts
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.spec.ts
@@ -22,82 +22,104 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
 */
 /* tslint:disable:no-unused-variable */
 
-import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing';
-import {Http, Response, ResponseOptions, XHRBackend} from '@angular/http';
-import {BuildDesignComponent} from '../build-artifacts.component';
-import {DialogService} from 'ng2-bootstrap-modal';
-import {FormsModule} from '@angular/forms';
-import {HttpModule} from '@angular/http';
-import {HttpUtilService} from '../../../shared/services/httpUtil/http-util.service';
-import {MappingEditorService} from '../../..//shared/services/mapping-editor.service';
-import {NO_ERRORS_SCHEMA} from '@angular/core';
-import {NgModule} from '@angular/core';
-import {NgProgress} from 'ngx-progressbar';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
-import {NotificationService} from '../../../shared/services/notification.service';
-import {Observable} from 'rxjs/Observable';
-import {ParamShareService} from '../../..//shared/services/paramShare.service';
-import {ReferenceDataformComponent} from './reference-dataform.component';
-import {RouterTestingModule} from '@angular/router/testing';
-import {SharedModule} from '../../../shared/shared.module';
-import {environment} from '../../../../environments/environment';
+import { ComponentFixture, TestBed, async, inject } from '@angular/core/testing';
+import { Http, Response, ResponseOptions, XHRBackend } from '@angular/http';
+
+import { BuildDesignComponent } from '../build-artifacts.component';
+import { DialogService } from 'ng2-bootstrap-modal';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service';
+import { MappingEditorService } from '../../..//shared/services/mapping-editor.service';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
+import { NgProgress } from 'ngx-progressbar';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NotificationService } from '../../../shared/services/notification.service';
+import { Observable } from 'rxjs/Observable';
+import { ParamShareService } from '../../..//shared/services/paramShare.service';
+import { ReferenceDataformComponent } from './reference-dataform.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SharedModule } from '../../../shared/shared.module';
+import { environment } from '../../../../environments/environment';
 
 describe('ReferenceDataformComponent', () => {
-    let component : ReferenceDataformComponent;
-    let fixture : ComponentFixture < ReferenceDataformComponent >;
-    let service : MockMappingService;
+    let component: ReferenceDataformComponent;
+    let fixture: ComponentFixture<ReferenceDataformComponent>;
+    let service: MockMappingService;
 
-    let httpMock : HttpUtilService
+    let httpMock: HttpUtilService
     //mockingthe data for mappingEditorService
 
     class HttpMock {
         post(req) {
-        if(req.url==""){
-        
-        return Observable.of({
-        output: {
-        data: {block:'{"artifactInfo": [ {"artifact-content": "{"reference_data": [{ "action": "Configure","scopeType":"tetsScope"}] }" } ]}'},
-        status:{code:"400",message:"success"}
+
+            return Observable.of(
+
+
+                {
+                    "output": { "data": { "block": "{\"userID\":null,\"designInfo\":null,\"statusInfo\":null,\"artifactInfo\":[{\"artifact-content\":\" {\\\"reference_data\\\":[{\\\"action\\\":\\\"Configure\\\",\\\"action-level\\\":\\\"vnf\\\",\\\"scope\\\":{\\\"vnf-type\\\":\\\"Btesting123\\\",\\\"vnfc-type\\\":\\\"\\\"},\\\"template\\\":\\\"Y\\\",\\\"vm\\\":[],\\\"device-protocol\\\":\\\"ANSIBLE\\\",\\\"user-name\\\":\\\"root\\\",\\\"port-number\\\":\\\"830\\\",\\\"artifact-list\\\":[{\\\"artifact-name\\\":\\\"template_Configure_Btesting123_0.0.1V.json\\\",\\\"artifact-type\\\":\\\"config_template\\\"},{\\\"artifact-name\\\":\\\"pd_Configure_Btesting123_0.0.1V.yaml\\\",\\\"artifact-type\\\":\\\"parameter_definitions\\\"}],\\\"scopeType\\\":\\\"vnf-type\\\"},{\\\"action\\\":\\\"AllAction\\\",\\\"action-level\\\":\\\"vnf\\\",\\\"scope\\\":{\\\"vnf-type\\\":\\\"Btesting123\\\",\\\"vnfc-type\\\":\\\"\\\"},\\\"artifact-list\\\":[{\\\"artifact-name\\\":\\\"reference_AllAction_Btesting123_0.0.1V.json\\\",\\\"artifact-type\\\":\\\"reference_template\\\"}]},{\\\"action\\\":\\\"ConfigScaleOut\\\",\\\"action-level\\\":\\\"vnf\\\",\\\"scope\\\":{\\\"vnf-type\\\":\\\"Btesting123\\\",\\\"vnfc-type\\\":\\\"\\\"},\\\"template\\\":\\\"Y\\\",\\\"vm\\\":[{\\\"template-id\\\":\\\"id1\\\",\\\"vm-instance\\\":1,\\\"vnfc\\\":[{\\\"vnfc-instance\\\":\\\"1\\\",\\\"vnfc-function-code\\\":\\\"12313\\\",\\\"ipaddress-v4-oam-vip\\\":\\\"Y\\\",\\\"group-notation-type\\\":\\\"first-vnfc-name\\\",\\\"group-notation-value\\\":\\\"pair\\\",\\\"vnfc-type\\\":\\\"vDBE-V\\\"}]},{\\\"template-id\\\":\\\"id1\\\",\\\"vm-instance\\\":2,\\\"vnfc\\\":[{\\\"vnfc-instance\\\":\\\"1\\\",\\\"vnfc-function-code\\\":\\\"12313\\\",\\\"ipaddress-v4-oam-vip\\\":\\\"Y\\\",\\\"group-notation-type\\\":\\\"first-vnfc-name\\\",\\\"group-notation-value\\\":\\\"pair\\\",\\\"vnfc-type\\\":\\\"vDBE-V\\\"}]},{\\\"template-id\\\":\\\"id1\\\",\\\"vm-instance\\\":3,\\\"vnfc\\\":[{\\\"vnfc-instance\\\":\\\"1\\\",\\\"vnfc-function-code\\\":\\\"12313\\\",\\\"ipaddress-v4-oam-vip\\\":\\\"Y\\\",\\\"group-notation-type\\\":\\\"first-vnfc-name\\\",\\\"group-notation-value\\\":\\\"pair\\\",\\\"vnfc-type\\\":\\\"vDBE-V\\\"}]}],\\\"device-protocol\\\":\\\"CHEF\\\",\\\"user-name\\\":\\\"root\\\",\\\"port-number\\\":\\\"830\\\",\\\"artifact-list\\\":[{\\\"artifact-name\\\":\\\"template_ConfigScaleOut_Btesting123_0.0.1V_id1.json\\\",\\\"artifact-type\\\":\\\"config_template\\\"},{\\\"artifact-name\\\":\\\"pd_ConfigScaleOut_Btesting123_0.0.1V_id1.yaml\\\",\\\"artifact-type\\\":\\\"parameter_definitions\\\"}],\\\"scopeType\\\":\\\"vnf-type\\\",\\\"template-id-list\\\":[\\\"id1\\\"]}]}\"}]}", "requestId": "563507520187" }, "status": { "code": "400", "message": "success" } },
+
+                    "status": { code: "400", message: "success" }
+                }
+
+
+            )
         }
-        })
-        } }
+    }
+    class MockMappingService {
+        public latestAction; // = {"action":"Configure"}
+        appDataObject = {
+            reference: {},
+            template: {
+                templateData: {},
+                nameValueData: {}
+            },
+            pd: {}
+        };
+        downloadDataObject = {
+            reference: {},
+            template: {
+                templateData: {},
+                nameValueData: {},
+                templateFileName: '',
+                nameValueFileName: ''
+            },
+            pd: {
+                pdData: '',
+                pdFileName: ''
+            }
         }
-        class MockMappingService {
-            public latestAction; // = {"action":"Configure"}
-            appDataObject= { reference: {}, template: { templateData: {}, nameValueData: {} }, pd: {} };
-            downloadDataObject={reference: {},
-            template: { templateData: {}, nameValueData: {}, templateFileName: '', nameValueFileName: '' },
-            pd: { pdData: '', pdFileName: '' }}
-            referenceNameObjects = [
+        referenceNameObjects = [
             {
-            action: "Configure"
+                action: "Configure"
             }, {
-            action: "StartApplication"
+                action: "StartApplication"
             }
-            ]
-            
-            setTemplateMappingDataFromStore(data){
+        ]
+
+        setTemplateMappingDataFromStore(data) {
             return "test"
-            }
-            getReferenceList() {
+        }
+        getReferenceList() {
             return ["test data"]
-            }
-            changeNav() {
+        }
+        changeNav() {
             return "test data"
-            }
-            setParamContent(data){
+        }
+        setParamContent(data) {
             return "test"
-            }
-            setSessionParamData(data){
+        }
+        setSessionParamData(data) {
             return "test"
-            }
-            
-            saveLatestAction() {}
-            saveLatestIdentifier() {}
-            changeNavDownloadData() {}
-            changeNavAppData() {}
-            }
-    class MockreferenceDataObject {}
+        }
+
+        saveLatestAction() { }
+        saveLatestIdentifier() { }
+        changeNavDownloadData() { }
+        changeNavAppData() { }
+    }
+    class MockreferenceDataObject { }
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [ReferenceDataformComponent],
@@ -123,14 +145,14 @@ describe('ReferenceDataformComponent', () => {
         }).compileComponents();
     }));
     beforeEach(() => {
-        
+
         fixture = TestBed.createComponent(ReferenceDataformComponent);
         component = fixture.componentInstance;
         //  component = new ReferenceDataformComponent(service)
         fixture.detectChanges();
         service = TestBed.get(MappingEditorService)
         httpMock = TestBed.get(HttpUtilService)
-        sessionStorage.setItem('vnfParams',JSON.stringify({vnfType:"test",vnfcType:"testVnfcType"}));
+        sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: "test", vnfcType: "testVnfcType" }));
         // component = new ReferenceDataformComponent(service)
     });
     it('should create reference component', () => {
@@ -145,13 +167,17 @@ describe('ReferenceDataformComponent', () => {
         expect(component.tempAllData.length).toBe(2)
     })
 
-    it("should set app data from service", ()=>{
+    it("should set app data from service", () => {
         component.ngOnInit()
-        expect(component.appData).not.toBe(undefined)
+        expect(component.appData)
+            .not
+            .toBe(undefined)
     })
-    it("should set download from service", ()=>{
+    it("should set download from service", () => {
         component.ngOnInit()
-        expect(component.downloadData).not.toBe(undefined)
+        expect(component.downloadData)
+            .not
+            .toBe(undefined)
     })
     it('Should reset form', () => {
         component.resetForm()
@@ -473,7 +499,7 @@ describe('ReferenceDataformComponent', () => {
 
     it("should remove feature from the reference object ", () => {
         component.referenceDataObject = {
-            action: '',
+            action: 'Configure',
             'action-level': 'vnf',
             scope: {
                 'vnf-type': '',
@@ -503,11 +529,61 @@ describe('ReferenceDataformComponent', () => {
             'artifact-list': []
         };
 
-        component.removeFeature(0, 0)
+        component.removeFeature(0, 0, 0)
 
         expect(component.referenceDataObject.vm.length).toBe(1)
     })
 
+    it("remove templateIds vm if action is confiogscaleout", () => {
+        component.referenceDataObject = {
+            action: 'ConfigScaleOut',
+            'action-level': 'vnf',
+            scope: {
+                'vnf-type': '',
+                'vnfc-type': ''
+            },
+            'template': 'Y',
+            "vm": [
+                {
+                    "template-id": "klmklj",
+                    "vm-instance": 1,
+                    "vnfc": [
+                        {
+                            "vnfc-instance": "1",
+                            "vnfc-function-code": "klkl",
+                            "ipaddress-v4-oam-vip": "",
+                            "group-notation-type": "",
+                            "group-notation-value": "",
+                            "vnfc-type": "nnk"
+                        }
+                    ]
+                }, {
+                    "template-id": "test 12",
+                    "vm-instance": 2,
+                    "vnfc": [
+                        {
+                            "vnfc-instance": "1",
+                            "vnfc-function-code": "klkl",
+                            "ipaddress-v4-oam-vip": "",
+                            "group-notation-type": "",
+                            "group-notation-value": "",
+                            "vnfc-type": "nnk"
+                        }
+                    ]
+                }
+            ],
+            'device-protocol': '',
+            'user-name': '',
+            'port-number': '',
+            'artifact-list': []
+        };
+
+        component.removeFeature(0, 0, 'test 12')
+
+        expect(component.referenceDataObject.vm.length).toBe(2)
+
+    })
+
     it("should add capabilities", () => {
         component.uploadedDataArray = [
             ['y', 'n']
@@ -544,7 +620,7 @@ describe('ReferenceDataformComponent', () => {
         expect(component.referenceDataObject['action-level']).toBe("vnf")
     })
 
-     it("should add capabilities", () => {
+    it("should add capabilities", () => {
         service.latestAction = {
             action: 'OpenStack Actions',
             'action-level': 'vnf',
@@ -560,7 +636,7 @@ describe('ReferenceDataformComponent', () => {
             'artifact-list': []
         }
 
-        component.referenceDataObject.action="OpenStack Actions"
+        component.referenceDataObject.action = "OpenStack Actions"
         service.referenceNameObjects = [
             {
                 action: "Configure"
@@ -664,177 +740,236 @@ describe('ReferenceDataformComponent', () => {
     })
 
     it('Should call get artifact', () => {
-        sessionStorage.setItem('updateParams', JSON.stringify({vnf: 123, userID: 'testUser'}))
+        sessionStorage.setItem('updateParams', JSON.stringify({ vnf: 123, userID: 'testUser' }))
         component.getArtifact()
-        expect(component.tempAllData.length).toBe(2)
+        expect(component.tempAllData.length).toBe(3)
     })
 
     it('Save file - should not process if action is null ', () => {
-        component.referenceDataObject.action =""
-       let fileSaved =  component.save({},true)
+        component.referenceDataObject.action = ""
+        let fileSaved = component.save({}, true)
         expect(fileSaved).toBe(undefined)
     })
-  it('Save file - should not process if device protocol is null ', () => {
-        component.referenceDataObject['device-protocol'] =""
-       let fileSaved =  component.save({},true)
+    it('Save file - should not process if device protocol is null ', () => {
+        component.referenceDataObject.action = "Configure"
+        component.referenceDataObject['device-protocol'] = ''
+        let fileSaved = component.save({}, true)
         expect(fileSaved).toBe(undefined)
     })
     it('Save file - should not process if device protocol is null ', () => {
-        component.referenceDataObject.action ="Configure"
-        component.referenceDataObject['device-protocol'] ="test"
-       let fileSaved =  component.save({},true)
+        component.referenceDataObject.action = "Configure"
+        component.referenceDataObject['device-protocol'] = "test"
+        component.downloadData.template.templateData = { "test": "test" }
+        component.downloadData.template.nameValueData = { "test": "test" }
+        component.downloadData.pd.pdData = "test"
+        let fileSaved = component.save({}, true)
         //expect(fileSaved).toBe(undefined)
     })
 
-     it('Save to appc file - should not process if action is null ', () => {
-        component.referenceDataObject.action =""
-       let fileSaved =  component.saveToAppc(true,{})
+    it('Save to appc file - should not process if action is null ', () => {
+        component.referenceDataObject.action = ""
+        let fileSaved = component.saveToAppc(true, {}, onclick)
         expect(fileSaved).toBe(undefined)
     })
-  it('Save to app cfile - should not process if device protocol is null ', () => {
-        component.referenceDataObject['device-protocol'] =""
-       let fileSaved =  component.saveToAppc(true,{})
+    it('Save to app cfile - should not process if device protocol is null ', () => {
+        component.referenceDataObject['device-protocol'] = ""
+        component.referenceDataObject.action = "Configure"
+        let fileSaved = component.saveToAppc(true, {}, onclick)
         expect(fileSaved).toBe(undefined)
     })
     it('Save to appc file - should not process if device protocol is null ', () => {
-        component.referenceDataObject.action ="Configure"
-        component.referenceDataObject['device-protocol'] ="test"
-       let fileSaved =  component.saveToAppc(true,{})
-        //expect(fileSaved).toBe(undefined)
-    })
-
-    //   it('uploadfile  ', () => {
-
-    //  let    files = { 0: {name:'foo.XLS', size: 500001} };
-    //     var mockEVet = {
-    //         target:{files:files}
-    //     }
-    //   component.upload(mockEVet)
-    //     //expect(fileSaved).toBe(undefined)
-    // })
-
-    it('downloadTemplate() of reference dataform',()=>{
-        component.downloadTemplate()
-        
-    })
-    it('downloadNameValue() of reference dataform',()=>{
+        component.referenceDataObject.action = "Configure"
+        component.referenceDataObject['device-protocol'] = "test"
+        component.appData.template.templateData = { "test": "test" }
+        component.appData.template.nameValueData = { "test": "test" }
+        component.appData.pd = { "test": "test" }
+        component.actionChanged = true
+        component.currentAction = "COnfigure"
+        let fileSaved = component.saveToAppc(true, {}, onclick)
+    })
+    it('downloadTemplate() of reference dataform', () => {
+        expect(component.downloadTemplate());
+    })
+    it('downloadNameValue() of reference dataform', () => {
         component.downloadNameValue()
     })
-    
-    it('downloadPd() of reference dataform',()=>{
+    it('downloadPd() of reference dataform', () => {
         component.downloadPd()
     })
-    it('validateTempAllData() of reference dataform',()=>{
+    it('validateTempAllData() of reference dataform', () => {
         component.validateTempAllData()
     })
-    it('retriveFromAppc() of reference dataform',()=>{
-        sessionStorage.setItem('updateParams', JSON.stringify({vnf: 123, userID: 'testUser'}))
+    it('retriveFromAppc() of reference dataform', () => {
+        sessionStorage.setItem('updateParams', JSON.stringify({ vnf: 123, userID: 'testUser' }))
         component.retriveFromAppc()
         expect(component.noCacheData).toBeFalsy()
     })
-    it('retriveFromAppc() of reference dataform for false',()=>{
-        
+    it('retriveFromAppc() of reference dataform for false', () => {
+        sessionStorage.setItem('updateParams', 'undefined')
         component.retriveFromAppc()
-        expect(component.noCacheData).toBeFalsy()
+        expect(component.noCacheData).toBeTruthy()
     })
-    it(' cloneMessage(servermessage) of reference dataform',()=>{
-        let servermessage = {test:"test"}
+    it(' cloneMessage(servermessage) of reference dataform', () => {
+        let servermessage = {
+            test: "test"
+        }
         component.cloneMessage(servermessage)
     })
 
-    it('resetGroupNotation() of reference dataform for false case',()=>{
+    it('resetGroupNotation() of reference dataform for false case', () => {
         component.resetGroupNotation()
         expect(component.disableGrpNotationValue).toBeFalsy()
     })
-    it('resetGroupNotation() of reference dataform for true case',()=>{
-        component.Sample['group-notation-type'] == "existing-group-name"
+    it('resetGroupNotation() of reference dataform for true case', () => {
+        component.Sample['group-notation-type'] = "existing-group-name"
         component.resetGroupNotation()
         expect(component.disableGrpNotationValue).toBeTruthy()
     })
-    it('resetVms() of reference dataform',()=>{
+    it('resetVms() of reference dataform', () => {
         component.resetVms()
-        expect(component.referenceDataObject.vm).toBe([])
+        expect(component.referenceDataObject.vm).toBeNull
     })
-    it('dataModified() of reference dataform',()=>{
-        component.dataModified()
-        expect(component.referenceDataObject.vm).toBe(this.referenceDataObject.vm)
-    })
-
     it('Clear cache ', () => {
         component.clearCache()
         expect(component.downloadData.reference['name']).toBe(undefined);
-         //expect(fileSaved).toBe(undefined)
-     })
- 
-     it('sholud reset group notification ', () => {
-         component.Sample['group-notation-type'] = "existing-group-name"
+    })
+    it('sholud reset group notification ', () => {
+        component.Sample['group-notation-type'] = "existing-group-name"
         component.resetGroupNotation()
         expect(component.disableGrpNotationValue).toBe(true);
-         //expect(fileSaved).toBe(undefined)
-     })
-      it('sholud reset group notification if value does not match ', () => {
-         component.Sample['group-notation-type'] = "123"
+    })
+    it('sholud reset group notification if value does not match ', () => {
+        component.Sample['group-notation-type'] = "123"
         component.resetGroupNotation()
         expect(component.disableGrpNotationValue).toBe(false);
-         //expect(fileSaved).toBe(undefined)
-     })
-      it('add identity group', () => {
-         component.referenceDataObject['template-id-list'] = undefined
-         component.templateId="test"
+    })
+    it('add identity group', () => {
+        component.referenceDataObject['template-id-list'] = undefined
+        component.templateId = "test"
         component.addToIdentDrp()
         expect(component.referenceDataObject['template-id-list'].length).toBe(1);
-         //expect(fileSaved).toBe(undefined)
-     })
- 
-      it('add identity group', () => {
-         
+    })
+
+    it('add identity group', () => {
+
         component.resetVms()
         expect(component.referenceDataObject.vm.length).toBe(0);
-         //expect(fileSaved).toBe(undefined)
-     })
-     it('data modified', () => {
-         
+    })
+    it('data modified', () => {
+
         component.dataModified()
- 
-        component.referenceDataObject.vm =[1,2]
+        component.referenceDataObject.vm = [1, 2]
         expect(component.referenceDataObject.vm.length).toBe(2);
-         //expect(fileSaved).toBe(undefined)
-     })
- 
-     it("should set values on action change ConfigScaleOut",()=>{
-         component.actionChange("ConfigScaleOut","",{})
- 
-         expect(component.groupAnotationType.length).toBe(5)
-     })
- 
-     it("should set values on action change when action is HealthCheck ",()=>{
-         component.populateExistinAction("HealthCheck")
- 
-         expect(component.deviceProtocols.length).toBe(4)
- 
- 
-     })
-     it("should set values on action change when action is UpgradeBackout",()=>{
-         component.populateExistinAction("UpgradeBackout")
- 
-         expect(component.deviceProtocols.length).toBe(3)
- 
- 
-     })
-     it("should set values on action change when action is OpenStack Actions",()=>{
-         component.populateExistinAction("OpenStack Actions")
- 
-         expect(component.deviceProtocols.length).toBe(2)
- 
- 
-     })
-     it("should set values on action change when action is Configure",()=>{
- 
-         component.tempAllData=[{action:"Configure",scope:{'vnf-type':"testVnf"}}]
-         component.populateExistinAction("Configure")
- 
-         expect(component.referenceDataObject.scope['vnf-type']).toBe('testVnf')
- 
- 
+    })
+
+    it("should set values on action change ConfigScaleOut", () => {
+        component.actionChange("ConfigScaleOut", "", {})
+
+        expect(component.groupAnotationType.length).toBe(5)
+    })
+    it("shpukd return false if its very first action", () => {
+        component.actionChange(null, "", "")
+
+        expect(component.disableGrpNotationValue).toBe(false)
+    })
+    it("sholud check no configuration actions", () => {
+        component.tempAllData = [
+            {
+                action: "Configure",
+                scope: {
+                    'vnf-type': "testVnf"
+                }
+            }
+        ]
+        component.actionChange("Configure", "", "")
+
+        expect(component.nonConfigureAction).toBe(false)
+    })
+
+    it("should set values on action change when action is HealthCheck ", () => {
+        component.populateExistinAction("HealthCheck")
+
+        expect(component.deviceProtocols.length).toBe(4)
+
+    })
+    it("should set values on action change when action is UpgradeBackout", () => {
+        component.populateExistinAction("UpgradeBackout")
+
+        expect(component.deviceProtocols.length).toBe(3)
+
+    })
+    it("should set values on action change when action is OpenStack Actions", () => {
+        component.populateExistinAction("OpenStack Actions")
+
+        expect(component.deviceProtocols.length).toBe(2)
+
+    })
+    it("should set values on action change when action is Configure", () => {
+        component.tempAllData = [
+            {
+                action: "Configure",
+                scope: {
+                    'vnf-type': "testVnf"
+                }
+            }
+        ]
+        component.populateExistinAction("Configure")
+        expect(component.referenceDataObject.scope['vnf-type']).toBe('testVnf')
+
+    })
+    it("shoukd clear vnf data ", () => {
+        component.clearVnfcData()
+        expect(component.Sample['vnfc-instance']).toBe('1')
+    })
+    it("shoudl showUpload", () => {
+        component.uploadTypes = [
+            {
+                value: 'Reference Data',
+                display: 'Sample Json Param File'
+            },
+            {
+                value: 'Mapping Data',
+                display: 'Sample Json Param File'
+            }
+        ]
+        component.showUpload()
+
+        expect(component.selectedUploadType).toBe('Reference Data')
+    })
+    it("set vm instance", () => {
+
+        component.referenceDataObject.vm = [
+            {
+                'vm-instance': 1
+            }
+        ]
+        component.setVmInstance(0)
+        expect(component.referenceDataObject.vm[0]['vm-instance']).toBe(1)
+
+    })
+    it("set vnfc type", () => {
+        component.setVnfcType("test")
+        expect(component.Sample['vnfc-type']).toBe("test")
+    })
+    it("getChange", () => {
+        component.getChange("vnfType")
+        expect(component.referenceDataObject.scope['vnfc-type']).toBe("")
      })
+    it("idChange", () => {
+        component.idChange(null, "", { valid: true })
+        component.oldAction = "Configure"
+        expect(component.actionChanged).toBeFalsy()
+    })
+    it("idChange", () => {
+        component.oldAction = "Configure"
+        component.idChange("test", "", { valid: true })
+        expect(component.actionChanged).toBeTruthy()
+    })
+    it('Should test deviceProtocolChange method', () => {
+        let spy = spyOn(BuildDesignComponent.prototype, 'getRefData');
+        let refData = { "action": "Configure", "vnf-type": "test 1", "device-protocol": "ANSIBLE" };
+        component.deviceProtocolChange();
+        expect(spy).toHaveBeenCalled()
+    });
+
 });
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
index fa3be63..f7d501b 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
@@ -16,6 +16,7 @@ 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============================================
 */
 
@@ -331,26 +332,26 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     //to remove the VM's created by the user
-    removeFeature(vmNumber: any, index: any,templateId) {
-        if(this.referenceDataObject.action == "Configure"){
+    removeFeature(vmNumber: any, index: any, templateId) {
+        if (this.referenceDataObject.action == "Configure") {
             this.referenceDataObject.vm.splice(vmNumber, 1);
-            this.referenceDataObject.vm.forEach((obj,arrIndex)=>{
-                if(arrIndex>=vmNumber){
-                    obj["vm-instance"] = obj["vm-instance"]-1
+            this.referenceDataObject.vm.forEach((obj, arrIndex) => {
+                if (arrIndex >= vmNumber) {
+                    obj["vm-instance"] = obj["vm-instance"] - 1
                 }
             })
             console.log(this.referenceDataObject.vm)
-        } else{
-            let data = this.referenceDataObject.vm.filter(obj=>{
+        } else {
+            let data = this.referenceDataObject.vm.filter(obj => {
                 return obj['template-id'] == templateId;
             })
             this.referenceDataObject.vm.splice(data[index]['vm-instance'], 1);
-            this.referenceDataObject.vm.forEach((obj,arrIndex)=>{
-                
-                    obj["vm-instance"] = arrIndex+1
+            this.referenceDataObject.vm.forEach((obj, arrIndex) => {
+
+                obj["vm-instance"] = arrIndex + 1
             })
         }
-        
+
     }
 
     //add new VM's to the configure
@@ -372,10 +373,10 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     //Reference object to create reference data
-    prepareReferenceObject(isSaving?:any){
-        let scopeName = this. resetParamsOnVnfcType(); 
-        let extension =  this.decideExtension();
-        this.prepareArtifactList(scopeName,extension);
+    prepareReferenceObject(isSaving?: any) {
+        let scopeName = this.resetParamsOnVnfcType();
+        let extension = this.decideExtension();
+        this.prepareArtifactList(scopeName, extension);
 
         if (this.referenceDataObject.action === 'OpenStack Actions') {
             this.referenceDataObject['template'] = 'N';
@@ -385,9 +386,9 @@ export class ReferenceDataformComponent implements OnInit {
         let newObj = $.extend(true, {}, this.referenceDataObject);
         let action = this.referenceDataObject.action;
         //preparing Obj for save/download
-        newObj =   this.deleteVmsforNonActions(newObj,action)
-        this.pushOrReplaceTempData(newObj,action);
-        this. addAllActionObj(newObj,scopeName);
+        newObj = this.deleteVmsforNonActions(newObj, action)
+        this.pushOrReplaceTempData(newObj, action);
+        this.addAllActionObj(newObj, scopeName);
         this.resetTempData()
         //saving data to service
         this.mappingEditorService.getReferenceList().push(JSON.parse(JSON.stringify(this.referenceDataObject)));
@@ -414,35 +415,8 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     upload(evt: any) {
-        /*  // console.log("This uploaded array==" + JSON.stringify(this.uploadedDataArray))
-          // // console.log("This template data before==" + JSON.stringify(this.tempAllData))
-          if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length!=0) {
-              /*  for (var i = 0; i < this.uploadedDataArray.length; i++) {
-                    var action = this.uploadedDataArray[i][0];
-                    for (var j = 0; j < this.tempAllData.length; j++) {
-                        if (action === this.tempAllData[j].action) {
-                            this.tempAllData.splice(j);
-                            // console.log("This template data===" + this.tempAllData[j]);
-                        }
-                    }
-                }
-               if (this.tempAllData && this.tempAllData != undefined) {
-                  for (var i = 0; i < this.tempAllData.length; i++) {
-                      // alert(this.checkIfelementExistsInArray(this.tempAllData[i].action,this.actions))
-                      var result = this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions);
-                      if (this.tempAllData[i].action === "AllAction") result = true;
-                      if (!result) {
-                          // console.log("Removing VM action==" + this.tempAllData[i].action)
-                          this.tempAllData.splice(i, 1);
-                      }
-     
-                  }
-              }
-          }
-          // // console.log("This template data after==" + JSON.stringify(this.tempAllData))
-          /* wire up file reader */
+        /* wire up file reader */
         const target: DataTransfer = <DataTransfer>(evt.target);
-        //// console.log("filename========" + evt.target.files[0].name)
         this.uploadFileName = evt.target.files[0].name;
         var fileExtension = this.uploadFileName.substr(this.uploadFileName.lastIndexOf('.') + 1);
         if (target.files.length != 1) {
@@ -453,19 +427,10 @@ export class ReferenceDataformComponent implements OnInit {
             reader.onload = (e: any) => {
                 /* read workbook */
                 const bstr = e.target.result;
-                //      // console.log("print 1---" + bstr);
                 const wb = XLSX.read(bstr, { type: 'binary' });
-                //    // console.log("print 2---" + JSON.stringify(wb));
-                /* grab first sheet */
                 const wsname = wb.SheetNames[0];
-                //  // console.log("Name:---" + wsname);
                 const ws = wb.Sheets[wsname];
-
-                /* save data */
-
                 let arrData = (<AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 })));
-                //// console.log("row======" + (XLSX.utils.sheet_to_json(ws, { header: 1 })).toString())
-                // // console.log("Array data---" + JSON.stringify(arrData));
                 this.uploadedDataArray = arrData;
                 this.firstArrayElement = arrData[0];
                 var remUploadedDataArray = arrData;
@@ -481,7 +446,6 @@ export class ReferenceDataformComponent implements OnInit {
                 }
             };
             reader.readAsBinaryString(target.files[0]);
-            // console.log('TARGET files---' + JSON.stringify(evt.target));
         }
         else {
             this.nService.error('Error', 'Incorrect VM capabilities file uploaded');
@@ -585,7 +549,7 @@ export class ReferenceDataformComponent implements OnInit {
         saveAs(blob, fileName);
     }
 
-    saveToAppc(valid, form,event) {
+    saveToAppc(valid, form, event) {
         if (this.referenceDataObject.action === '') {
             this.nService.error('Error', 'Select a valid Action');
             return;
@@ -611,7 +575,9 @@ export class ReferenceDataformComponent implements OnInit {
                 if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue();
                 if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd();
                 if (this.actionChanged) {
-                    this.referenceDataObject.action = this.currentAction;
+                    if (this.currentAction) {
+                        this.referenceDataObject.action = this.currentAction;
+                    }
                     this.populateExistinAction(this.referenceDataObject.action);
                     this.actionChanged = false;
                 }
@@ -839,7 +805,7 @@ export class ReferenceDataformComponent implements OnInit {
         } else if (data == 'OpenStack Actions') {
             this.deviceProtocols = ['', 'OpenStack'];
         } else if (data == 'ConfigScaleOut') {
-            this.deviceProtocols = ['', 'CHEF', 'ANSIBLE', 'NETCONF-XML','RESTCONF'];
+            this.deviceProtocols = ['', 'CHEF', 'ANSIBLE', 'NETCONF-XML', 'RESTCONF'];
         }
         else {
             this.deviceProtocols = ['', 'ANSIBLE', 'CHEF', 'NETCONF-XML', 'RESTCONF', 'CLI'];
@@ -925,48 +891,53 @@ export class ReferenceDataformComponent implements OnInit {
         } else {
             this.nonConfigureAction = true;
         }
+        this.buildDesignComponent.getRefData(this.referenceDataObject);
+
     }
+
+    deviceProtocolChange() {
+        this.buildDesignComponent.getRefData(this.referenceDataObject)
+    }
+
     // For the issue with multiple template changes
-    // idChange(data, content, userForm) {
-    //     if (data == null) {
-    //     return;
-    //     }
-    //     if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
-    //     let referenceObject = this.prepareReferenceObject();
-    //     this.actionChanged = true;
-    //     if(this.templateIdentifier)
-    //     {
-    //     this.modalService.open(content).result.then(res => {
-    //     if (res == 'yes') {
-    //     this.validateTempAllData();
-    //     let theJSON = JSON.stringify(this.tempAllData, null, '\t');
-    //     let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
-    //     this.uploadArtifact(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
-    //     var templateData = JSON.stringify(this.appData.template.templateData);
-    //     var nameValueData = JSON.stringify(this.appData.template.nameValueData);
-    //     var pdData = JSON.stringify(this.appData.pd);
-    //     if (templateData != '{}' && templateData != null && templateData != undefined) this.saveTemp();
-    //     if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue();
-    //     if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd();
-    //     this.clearTemplateCache();
-    //     this.clearPdCache();
-    //     }
-    //     else{
-    //     this.clearTemplateCache();
-    //     this.clearPdCache();
-    //     }
-    //     });
-    //     }
-    //     }
-    //     }
-
-    clearCache() 
+    idChange(data, content, userForm) {
+        if (data == null) {
+            return;
+        }
+        if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
+            let referenceObject = this.prepareReferenceObject();
+            this.actionChanged = true;
+            if (this.templateIdentifier) {
+                this.modalService.open(content).result.then(res => {
+                    if (res == 'yes') {
+                        this.validateTempAllData();
+                        let theJSON = JSON.stringify(this.tempAllData, null, '\t');
+                        let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
+                        this.uploadArtifact(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
+                        var templateData = JSON.stringify(this.appData.template.templateData);
+                        var nameValueData = JSON.stringify(this.appData.template.nameValueData);
+                        var pdData = JSON.stringify(this.appData.pd);
+                        if (templateData != '{}' && templateData != null && templateData != undefined) this.saveTemp();
+                        if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue();
+                        if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd();
+                        this.clearTemplateCache();
+                        this.clearPdCache();
+                    }
+                    else {
+                        this.clearTemplateCache();
+                        this.clearPdCache();
+                    }
+                });
+            }
+        }
+    }
+
+    clearCache()
+    //needed for the the clearing template cache.
     {
-        // get the value and save the userid and persist it. 
-        this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
-        localStorage['paramsContent'] = '{}';
-        this.mappingEditorService.setParamContent(undefined);
-        this.paramShareService.setSessionParamData(undefined);
+        // get the value and save the userid and persist it.
+        this.clearTemplateCache();
+        this.clearPdCache();
         this.appData = { reference: {}, template: { templateData: {}, nameValueData: {} }, pd: {} };
         this.downloadData = {
             reference: {},
@@ -975,54 +946,38 @@ export class ReferenceDataformComponent implements OnInit {
         };
     }
 
-    // needed for the the clearing template cache.
-    //{
-    //     // get the value and save the userid and persist it.
-    //     this.clearTemplateCache();
-    //     this.clearPdCache();
-    //     this.appData = { reference: {}, template: { templateData: {}, nameValueData: {} }, pd: {} };
-    //     this.downloadData = {
-    //     reference: {},
-    //     template: { templateData: {}, nameValueData: {}, templateFileName: '', nameValueFileName: '' },
-    //     pd: { pdData: '', pdFileName: '' }
-    //     };
-    //     }
-        
-    //     clearTemplateCache()
-    //     {
-    //     this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
-    //     localStorage['paramsContent'] = '{}';
-    //     }
-    //     clearPdCache()
-    //     {
-    //     this.mappingEditorService.setParamContent(undefined);
-    //     this.paramShareService.setSessionParamData(undefined);
-    //     }
+    clearTemplateCache() {
+        this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
+        localStorage['paramsContent'] = '{}';
+    }
+    clearPdCache() {
+        this.mappingEditorService.setParamContent(undefined);
+        this.paramShareService.setSessionParamData(undefined);
+    }
 
     saveTemp() {
         this
             .httpUtils
             .post(
-                { url: environment.getDesigns, data: this.appData.template.templateData })
+            { url: environment.getDesigns, data: this.appData.template.templateData })
             .subscribe(resp => {
                 if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
                     this.nService.success('Status', 'Successfully uploaded the Template Data');
                 }
                 if (resp.output.status.code === '401') {
                     this.nService.warn('Status', 'Error in saving the Template to Appc');
-
                 }
             },
-                (err) => this.nService.error('Status', 'Error Connecting to the APPC Network'));
+            (err) => this.nService.error('Status', 'Error Connecting to the APPC Network'));
     }
 
     saveNameValue() {
         this
             .httpUtils
             .post(
-                {
-                    url: environment.getDesigns, data: this.appData.template.nameValueData
-                })
+            {
+                url: environment.getDesigns, data: this.appData.template.nameValueData
+            })
             .subscribe(resp => {
                 if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
                     this.nService.success('Status', 'Successfully uploaded the Name Value Pairs');
@@ -1031,19 +986,19 @@ export class ReferenceDataformComponent implements OnInit {
                     this.nService.warn('Status', 'Error in saving the Name value pairs to Appc');
                 }
             },
-                error => {
-                    this.nService.error('Status', 'Error Connecting to the APPC Network');
-                    return false;
-                });
+            error => {
+                this.nService.error('Status', 'Error Connecting to the APPC Network');
+                return false;
+            });
     }
 
     savePd() {
         this
             .httpUtils
             .post(
-                {
-                    url: environment.getDesigns, data: this.appData.pd
-                })
+            {
+                url: environment.getDesigns, data: this.appData.pd
+            })
             .subscribe(resp => {
                 if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
                     this.nService.success('Status', 'Successfully uploaded PD file');
@@ -1052,10 +1007,10 @@ export class ReferenceDataformComponent implements OnInit {
                     this.nService.warn('Status', 'Error in saving the PD to Appc');
                 }
             },
-                error => {
-                    this.nService.error('Status', 'Error Connecting to the APPC Network');
-                    return false;
-                });
+            error => {
+                this.nService.error('Status', 'Error Connecting to the APPC Network');
+                return false;
+            });
     }
 
     openModel(toShow: any, message: any, title: any) {
@@ -1080,7 +1035,7 @@ export class ReferenceDataformComponent implements OnInit {
         if (!(this.referenceDataObject['template-id-list'])) {
             this.referenceDataObject['template-id-list'] = [];
         }
-        if(!(this.referenceDataObject['template-id-list'].indexOf(this.templateId.trim())>-1)){
+        if (!(this.referenceDataObject['template-id-list'].indexOf(this.templateId.trim()) > -1)) {
             this.referenceDataObject['template-id-list'].push(this.templateId.trim());
         }
     }
@@ -1090,7 +1045,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     dataModified() {
-      //  this.referenceDataObject.vm = this.referenceDataObject.vm;
+        //  this.referenceDataObject.vm = this.referenceDataObject.vm;
     }
 
     resetGroupNotation() {
@@ -1103,25 +1058,25 @@ export class ReferenceDataformComponent implements OnInit {
         }
     }
 
-    resetVmsForScaleout(action){
-         //reset currentform vms based on action
-         if (action == "ConfigScaleOut") {
+    resetVmsForScaleout(action) {
+        //reset currentform vms based on action
+        if (action == "ConfigScaleOut") {
             let ConfigScaleOutIndex = this.tempAllData.findIndex(obj => {
-                return obj['action'] ==action
+                return obj['action'] == action
             });
             if (ConfigScaleOutIndex > -1) {
                 this.referenceDataObject.vm = this.tempAllData[ConfigScaleOutIndex].vm
             } else {
-               if(this.actionChanged ){
-               this.referenceDataObject.vm = []
-               }
-              //  
+                if (this.actionChanged) {
+                    this.referenceDataObject.vm = []
+                }
+                //  
             }
         }
     }
 
-     resetParamsOnVnfcType(){
-    let scopeName = '';
+    resetParamsOnVnfcType() {
+        let scopeName = '';
         //if only vnf is there
         if (this.referenceDataObject.scope['vnfc-type'] == '' || this.referenceDataObject.scope['vnfc-type'] == null || this.referenceDataObject.scope['vnfc-type'] == 'null') {
             scopeName = this.referenceDataObject.scope['vnf-type'];
@@ -1140,13 +1095,13 @@ export class ReferenceDataformComponent implements OnInit {
                 this.referenceDataObject['scopeType'] = 'vnf-type';
             }
         }
-          //replacing / with _ and removing spaces in the scopeName
-         if (scopeName) {
+        //replacing / with _ and removing spaces in the scopeName
+        if (scopeName) {
             scopeName = scopeName.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
         }
         return scopeName
-     }
-    decideExtension(){
+    }
+    decideExtension() {
         //marking the extension based on the device-protocol selected by the user 
         let extension = 'json';
         if (this.referenceDataObject['device-protocol'] == 'ANSIBLE' || this.referenceDataObject['device-protocol'] == 'CHEF' || this.referenceDataObject['device-protocol'] == 'CLI') {
@@ -1156,10 +1111,10 @@ export class ReferenceDataformComponent implements OnInit {
         }
         return extension
     }
-    prepareArtifactList(scopeName,extension){
-    this.referenceDataObject['artifact-list'] = [];
+    prepareArtifactList(scopeName, extension) {
+        this.referenceDataObject['artifact-list'] = [];
 
- //preparing the artifact list array file names along with extension
+        //preparing the artifact list array file names along with extension
         let config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.' + extension;
         let pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.yaml';
         let reference_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.json';
@@ -1184,7 +1139,7 @@ export class ReferenceDataformComponent implements OnInit {
             if (identifiers) {
                 for (var x = 0; x < identifiers.length; x++) {
                     //for replacing spaces and "/" with "_"
-                    identifiers[x]=identifiers[x].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
+                    identifiers[x] = identifiers[x].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
                     pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.yaml';
                     config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.' + extension;
 
@@ -1204,8 +1159,8 @@ export class ReferenceDataformComponent implements OnInit {
 
         }
     }
-    deleteVmsforNonActions(newObj,action){
- let configureObject = (action == 'Configure');
+    deleteVmsforNonActions(newObj, action) {
+        let configureObject = (action == 'Configure');
         let ConfigScaleOut = (action == 'ConfigScaleOut');
         //delete VM's if selected action is not configure.
         if (!ConfigScaleOut && !configureObject && this.tempAllData.length != 0) {
@@ -1225,7 +1180,7 @@ export class ReferenceDataformComponent implements OnInit {
         }
         return newObj
     }
-    pushOrReplaceTempData(newObj,action){
+    pushOrReplaceTempData(newObj, action) {
 
         let actionObjIndex = this.tempAllData.findIndex(obj => {
             return obj['action'] == action;
@@ -1233,7 +1188,7 @@ export class ReferenceDataformComponent implements OnInit {
         if (newObj.action != 'HealthCheck') {
             delete newObj['url'];
         }
-        
+
         if (actionObjIndex > -1) {
             this.tempAllData[actionObjIndex] = newObj;
             this.mappingEditorService.saveLatestAction(this.tempAllData[actionObjIndex]);
@@ -1245,11 +1200,11 @@ export class ReferenceDataformComponent implements OnInit {
                 this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
             }
         }
-        
+
     }
 
-    addAllActionObj(newObj,scopeName){
-        
+    addAllActionObj(newObj, scopeName) {
+
         //Creating all action block to allow mulitple actions at once
         let allAction = {
             action: 'AllAction',
@@ -1270,9 +1225,9 @@ export class ReferenceDataformComponent implements OnInit {
         }
     }
 
-    resetTempData(){
- if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length != 0) {
-           
+    resetTempData() {
+        if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length != 0) {
+
             if (this.tempAllData && this.tempAllData != undefined) {
                 for (var i = 0; i < this.tempAllData.length; i++) {
                     // alert(this.checkIfelementExistsInArray(this.tempAllData[i].action,this.actions))
@@ -1295,4 +1250,4 @@ export class ReferenceDataformComponent implements OnInit {
             this.addVmCapabilitiesData();
         }
     }
-}
+}
\ No newline at end of file