Replace vfmodule: opens an popup

Issue-ID: VID-603
Change-Id: I7d7524f75bfb8d6ef949a4f069591c4097d470b4
Signed-off-by: Sara Weiss <sara.weiss@intl.att.com>
Signed-off-by: Ittay Stern <ittay.stern@att.com>

25 files changed, 197 insertions, 36 deletions

diff --git a/vid-webpack-master/cypress/integration/iFrames/changeManagement.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/changeManagement.e2e.ts
index a48ed4a9f..3c2c9d80c 100644
--- a/vid-webpack-master/cypress/integration/iFrames/changeManagement.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/changeManagement.e2e.ts
@@ -23,7 +23,7 @@ describe('Change management AKA VNF changes', function () {
         "aai-sub-details")
     });
 
-    cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.json').then(() => {
+    cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json').then(() => {
       cy.server()
         .route({
           method: 'GET',
diff --git a/vid-webpack-master/cypress/integration/iFrames/resume.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/resume.e2e.ts
index 5857e1ac0..2d4d631b3 100644
--- a/vid-webpack-master/cypress/integration/iFrames/resume.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/resume.e2e.ts
@@ -76,7 +76,7 @@ describe('Resume tests', function () {
 
     it(`Resume Defect 710619 - with flag FLAG_1810_CR_SOFT_DELETE_ALACARTE_VF_MODULE is OFF`, function () {
 
-      cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.json').then((res) => {
+      cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json').then((res) => {
         cy.server()
           .route({
             method: 'GET',
diff --git a/vid-webpack-master/cypress/integration/iFrames/softDeleteAndResume.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/softDeleteAndResume.e2e.ts
index fccdd53c6..ef1db6864 100644
--- a/vid-webpack-master/cypress/integration/iFrames/softDeleteAndResume.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/softDeleteAndResume.e2e.ts
@@ -75,7 +75,7 @@ describe('Soft delete tests', function () {
 
     it(`Resume button display in orch status - pendingactivation, assigned - feature FLAG_VF_MODULE_RESUME_STATUS_CREATE - is OFF`, function () {
 
-      cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.json').then(() => {
+      cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json').then(() => {
         cy.server()
           .route({
             method: 'GET',
diff --git a/vid-webpack-master/cypress/integration/iFrames/viewEditUpgradeVfModule.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/viewEditUpgradeVfModule.e2e.ts
index f111189fc..4ca39b185 100644
--- a/vid-webpack-master/cypress/integration/iFrames/viewEditUpgradeVfModule.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/viewEditUpgradeVfModule.e2e.ts
@@ -111,7 +111,7 @@ describe('View Edit Page: Upgrade VFModule', function () {
       cy.wait('@expectedPostAsyncInstantiation').then(xhr => {
         expect(Object(xhr.request.body).action).to.equal("None_Upgrade");
         expect(Object(xhr.request.body).vnfs['VNF2_INSTANCE_ID'].action).to.equal("None_Upgrade");
-        expect(Object(xhr.request.body).vnfs['VNF2_INSTANCE_ID'].vfModules['dc229cd8-c132-4455-8517-5c1787c18b14']['3ef042c4-259f-45e0-9aba-0989bd8d1cc5'].action).to.equal("None_Upgrade");
+        expect(Object(xhr.request.body).vnfs['VNF2_INSTANCE_ID'].vfModules['vf_vgeraldine0..VfVgeraldine..vflorence_vlc..module-1']['2c1ca484-cbc2-408b-ab86-25a2c15ce280'].action).to.equal("None_Upgrade");
       });
     });
 
@@ -206,16 +206,18 @@ describe('View Edit Page: Upgrade VFModule', function () {
       method: 'GET',
       status: 200,
       response: {},
-    }).as("expectLatestServiceModelUpgradeVersion")
+    }).as("expectLatestServiceModelUpgradeVersion");
   }
 
-  function upgradeTheVFM(treeNodeId = 'node-undefined-dc229cd8-c132-4455-8517-5c1787c18b14'): Chainable<any> {
-    return cy.getElementByDataTestsId(`${treeNodeId}-menu-btn`).click()
+  function upgradeTheVFM(treeNodeId = 'node-522159d5-d6e0-4c2a-aa44-5a542a12a830-vf_vgeraldine0..VfVgeraldine..vflorence_vlc..module-1') {
+    cy.getElementByDataTestsId(`${treeNodeId}-menu-btn`).click()
     .drawingBoardTreeClickOnContextMenuOptionByName("Upgrade");
+    // The following is needed when enabling FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS
+    cy.getElementByDataTestsId('form-set').click();
   }
 
   function undoUpgradeForVFM() {
-    cy.getElementByDataTestsId('node-undefined-dc229cd8-c132-4455-8517-5c1787c18b14-menu-btn').click()
+    cy.getElementByDataTestsId('node-522159d5-d6e0-4c2a-aa44-5a542a12a830-vf_vgeraldine0..VfVgeraldine..vflorence_vlc..module-1-menu-btn').click()
     .drawingBoardTreeClickOnContextMenuOptionByName("Undo Upgrade");
   }
 
diff --git a/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.json b/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json
index 5dd02cb63..40b37cbc9 100644
--- a/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.json
+++ b/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json
@@ -20,5 +20,5 @@
   "FLAG_FLASH_REPLACE_VF_MODULE": true,
   "FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT": true,
   "FLAG_1911_INSTANTIATION_ORDER_IN_ASYNC_ALACARTE": false,
-  "FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS" : false
+  "FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS": true
 }
diff --git a/vid-webpack-master/cypress/support/jsonBuilders/mocks/vid.mock.ts b/vid-webpack-master/cypress/support/jsonBuilders/mocks/vid.mock.ts
index 6fff0bc2d..2569556e2 100644
--- a/vid-webpack-master/cypress/support/jsonBuilders/mocks/vid.mock.ts
+++ b/vid-webpack-master/cypress/support/jsonBuilders/mocks/vid.mock.ts
@@ -43,7 +43,7 @@ function initCategoryParameter(response? : JSON) : void {
 }
 
 function initFlags(response? : JSON, delay?: number, status?: number) : void {
-  cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.json').then((res) => {
+  cy.readFile('cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json').then((res) => {
     cy.server()
       .route({
         method: 'GET',
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts
index 840f31dcf..a44c21bf0 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts
@@ -13,6 +13,7 @@ import {VnfPopupService} from "../../../../../shared/components/genericFormPopup
 import {DuplicateService} from "../../../duplicate/duplicate.service";
 import {IframeService} from "../../../../../shared/utils/iframe.service";
 import {RelatedVnfMemberInfoModel} from "./relatedVnfMember.info.model";
+import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 
 class MockAppStore<T> {
@@ -38,6 +39,7 @@ describe('Related Vnf member Model Info', () => {
         DynamicInputsService,
         DialogService,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         VnfPopupService,
         DefaultDataGeneratorService,
         SharedTreeService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts
index b596d0b48..eb9902f7c 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts
@@ -16,6 +16,7 @@ import {ModelInformationItem} from "../../../../../shared/components/model-infor
 import {AaiService} from "../../../../../shared/services/aaiService/aai.service";
 import {HttpClient, HttpHandler} from "@angular/common/http";
 import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 class MockAppStore<T> {
   getState() {
@@ -34,6 +35,7 @@ describe('VFModule Model Info', () => {
   let  vfModuleModel: VFModuleModelInfo;
   let _dialogService : DialogService;
   let _vfModulePopupService : VfModulePopuopService;
+  let _vfModuleUpgradePopupService : VfModuleUpgradePopupService;
   let _iframeService : IframeService;
   let _componentInfoService : ComponentInfoService;
 
@@ -44,6 +46,7 @@ describe('VFModule Model Info', () => {
         DynamicInputsService,
         DialogService,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         SharedTreeService,
         IframeService,
         {provide: NgRedux, useClass: MockAppStore},
@@ -60,7 +63,7 @@ describe('VFModule Model Info', () => {
     injector = getTestBed();
     _sharedTreeService = injector.get(SharedTreeService);
     _componentInfoService = injector.get(ComponentInfoService)
-    vfModuleModel = new VFModuleModelInfo(_dynamicInputsService, _sharedTreeService, _dialogService, _vfModulePopupService, _iframeService, MockNgRedux.getInstance(),_componentInfoService);
+    vfModuleModel = new VFModuleModelInfo(_dynamicInputsService, _sharedTreeService, _dialogService, _vfModulePopupService, _vfModuleUpgradePopupService, _iframeService, MockNgRedux.getInstance(),_componentInfoService);
 
   })().then(done).catch(done.fail));
 
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
index 47a6dcb50..2210d7c84 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
@@ -30,12 +30,15 @@ import {
 import {ComponentInfoService} from "../../../component-info/component-info.service";
 import {ComponentInfoType} from "../../../component-info/component-info-model";
 import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
+import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
+import {FeatureFlagsService, Features} from "../../../../../shared/services/featureFlag/feature-flags.service";
 
 export class VFModuleModelInfo implements ILevelNodeInfo {
   constructor(private _dynamicInputsService: DynamicInputsService,
               private _sharedTreeService: SharedTreeService,
               private _dialogService: DialogService,
               private _vfModulePopupService: VfModulePopuopService,
+              private _vfModuleUpgradePopupService: VfModuleUpgradePopupService,
               private _iframeService: IframeService,
               private _store: NgRedux<AppState>,
               private _componentInfoService: ComponentInfoService) {
@@ -93,7 +96,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
     newVfModule.typeName = this.typeName;
     newVfModule.menuActions = this.getMenuAction(<any>newVfModule, currentModel.uuid);
     newVfModule.isFailed = _.isNil(instance.isFailed) ? false : instance.isFailed;
-    newVfModule.statusMessage = !_.isNil(instance.statusMessage) ? instance.statusMessage: "";
+    newVfModule.statusMessage = !_.isNil(instance.statusMessage) ? instance.statusMessage : "";
 
     newVfModule = this._sharedTreeService.addingStatusProperty(newVfModule);
     return newVfModule;
@@ -247,7 +250,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
     if (!_.isNil(this._store.getState().service.serviceInstance[serviceModelId].vnfs[selectedVNF]) && node.parent.data.name === this._store.getState().service.serviceInstance[serviceModelId].vnfs[selectedVNF].originalName) {
       const existingVFModules = this.getCountVFModuleOfSelectedVNF(node, selectedVNF, serviceModelId);
       const reachedLimit = this.isVFModuleReachedLimit(node, this._store.getState().service.serviceHierarchy, serviceModelId, existingVFModules);
-      const showAddIcon = this._sharedTreeService.shouldShowAddIcon()&& !reachedLimit;
+      const showAddIcon = this._sharedTreeService.shouldShowAddIcon() && !reachedLimit;
       return new AvailableNodeIcons(showAddIcon, reachedLimit);
     }
     return new AvailableNodeIcons(false, false);
@@ -356,10 +359,9 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
         visible: (node) => this._sharedTreeService.shouldShowUndoDelete(node),
         enable: (node, serviceModelId) => this._sharedTreeService.shouldShowUndoDelete(node) && this._sharedTreeService.shouldShowDelete(node.parent) && !this._sharedTreeService.isServiceOnDeleteMode(serviceModelId)
       },
-      upgrade : {
-        method : (node, serviceModelId) => {
-          this._sharedTreeService.upgradeBottomUp(node, serviceModelId);
-          this._store.dispatch(upgradeVFModule(node.data.modelName,  node.parent.data.vnfStoreKey, serviceModelId, node.data.dynamicModelName));
+      upgrade: {
+        method: (node, serviceModelId) => {
+          this.upgradeVFM(serviceModelId, node);
         },
         visible: (node,serviceModelId) => {
           return this._sharedTreeService.shouldShowUpgrade(node, serviceModelId);
@@ -371,7 +373,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
       undoUpgrade: {
         method: (node, serviceModelId) => {
           this._sharedTreeService.undoUpgradeBottomUp(node, serviceModelId);
-          this._store.dispatch(undoUgradeVFModule(node.data.modelName,  node.parent.data.vnfStoreKey, serviceModelId, node.data.dynamicModelName));
+          this._store.dispatch(undoUgradeVFModule(node.data.modelName, node.parent.data.vnfStoreKey, serviceModelId, node.data.dynamicModelName));
         },
         visible: (node) => {
           return this._sharedTreeService.shouldShowUndoUpgrade(node);
@@ -383,7 +385,30 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
     };
   }
 
-  updatePosition(that , node, instanceId, parentStoreKey): void {
+  private upgradeVFM(serviceModelId, node) {
+    this._sharedTreeService.upgradeBottomUp(node, serviceModelId);
+    this._store.dispatch(upgradeVFModule(node.data.modelName,  node.parent.data.vnfStoreKey, serviceModelId, node.data.dynamicModelName));
+
+    if (FeatureFlagsService.getFlagState(Features.FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS, this._store)) {
+      this._iframeService.addClassOpenModal('content');
+      this._dialogService.addDialog(GenericFormPopupComponent, {
+        type: PopupType.VF_MODULE_UPGRADE,
+        uuidData: <any>{
+          serviceId: serviceModelId,
+          modelName: node.data.modelName,
+          vFModuleStoreKey: node.data.dynamicModelName,
+          vnfStoreKey: node.parent.data.vnfStoreKey,
+          modelId: node.data.modelId,
+          type: node.data.type,
+          popupService: this._vfModuleUpgradePopupService,
+        },
+        node: node,
+        isUpdateMode: false
+      });
+    }
+  }
+
+  updatePosition(that, node, instanceId, parentStoreKey): void {
     that.store.dispatch(updateVFModulePosition(node, instanceId, parentStoreKey));
   }
 
@@ -395,12 +420,12 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
   getInfo(model, instance): ModelInformationItem[] {
     const modelInformation = !_.isEmpty(model) && !_.isEmpty(model.properties) ? [
       ModelInformationItem.createInstance("Base module", model.properties.baseModule),
-      ModelInformationItem.createInstance("Min instances", !_.isNull(model.properties.minCountInstances)? String(model.properties.minCountInstances): null),
-      ModelInformationItem.createInstance("Max instances", !_.isNull(model.properties.maxCountInstances)? String(model.properties.maxCountInstances): null),
-      ModelInformationItem.createInstance("Initial instances count", !_.isNull(model.properties.initialCount)? String(model.properties.initialCount): null)
+      ModelInformationItem.createInstance("Min instances", !_.isNull(model.properties.minCountInstances) ? String(model.properties.minCountInstances) : null),
+      ModelInformationItem.createInstance("Max instances", !_.isNull(model.properties.maxCountInstances) ? String(model.properties.maxCountInstances) : null),
+      ModelInformationItem.createInstance("Initial instances count", !_.isNull(model.properties.initialCount) ? String(model.properties.initialCount) : null)
     ] : [];
 
-    const instanceInfo =  [];
+    const instanceInfo = [];
     const result = [modelInformation, instanceInfo];
     return _.uniq(_.flatten(result));
   }
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts
index de8962787..3af42884d 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts
@@ -22,6 +22,7 @@ import {ComponentInfoService} from "../../../component-info/component-info.servi
 import {AaiService} from "../../../../../shared/services/aaiService/aai.service";
 import {HttpClient, HttpHandler} from "@angular/common/http";
 import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 describe('Vnf Model Info', () => {
  let injector;
@@ -32,6 +33,7 @@ describe('Vnf Model Info', () => {
  let _defaultDataGeneratorService : DefaultDataGeneratorService;
  let _dialogService : DialogService;
  let _vfModulePopupService : VfModulePopuopService;
+ let _vfModuleUpgradePopupService : VfModuleUpgradePopupService;
  let _vnfPopupService : VnfPopupService;
  let _duplicateService : DuplicateService;
  let _iframeService : IframeService;
@@ -47,6 +49,7 @@ describe('Vnf Model Info', () => {
         DynamicInputsService,
         DialogService,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         VnfPopupService,
         DefaultDataGeneratorService,
         SharedTreeService,
@@ -71,6 +74,7 @@ describe('Vnf Model Info', () => {
       _dialogService,
       _vnfPopupService,
       _vfModulePopupService,
+      _vfModuleUpgradePopupService,
       _duplicateService,
       null,
       _iframeService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
index ebcba162e..05d4af18d 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
@@ -38,6 +38,7 @@ import {IModalConfig} from "onap-ui-angular/dist/modals/models/modal-config";
 import {ComponentInfoType} from "../../../component-info/component-info-model";
 import {ComponentInfoService} from "../../../component-info/component-info.service";
 import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
+import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 export class VnfModelInfo implements ILevelNodeInfo {
   constructor(private _dynamicInputsService: DynamicInputsService,
@@ -46,6 +47,7 @@ export class VnfModelInfo implements ILevelNodeInfo {
               private _dialogService: DialogService,
               private _vnfPopupService: VnfPopupService,
               private _vfModulePopupService: VfModulePopuopService,
+              private _vfModuleUpgradePopupService : VfModuleUpgradePopupService,
               private _duplicateService: DuplicateService,
               private modalService: SdcUiServices.ModalService,
               private _iframeService: IframeService,
@@ -111,7 +113,7 @@ export class VnfModelInfo implements ILevelNodeInfo {
    * return next level object (VFModule)
    ************************************************************/
   getNextLevelObject = (): VFModuleModelInfo => {
-    return new VFModuleModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._vfModulePopupService, this._iframeService, this._store, this._componentInfoService);
+    return new VFModuleModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._vfModulePopupService, this._vfModuleUpgradePopupService, this._iframeService, this._store, this._componentInfoService);
   };
 
   /***********************************************************
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
index 7ab2f5b5b..9add349db 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
@@ -32,6 +32,7 @@ import {ErrorMsgService} from "../../../../shared/components/error-msg/error-msg
 import {ComponentInfoService} from "../../component-info/component-info.service";
 import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service";
 import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service";
+import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 class MockAppStore<T> {
   getState() {
@@ -73,6 +74,7 @@ describe('Model Tree Generator service', () => {
         NetworkPopupService,
         NetworkControlGenerator,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         VfModuleControlGenerator,
         VnfGroupControlGenerator,
         DialogService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
index 7246adc27..e5559ee15 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
@@ -35,6 +35,7 @@ import {ComponentInfoService} from "../../component-info/component-info.service"
 import {IModelTreeNodeModel} from "../../../objectsToTree/objectToModelTree/modelTreeNode.model";
 import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service";
+import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 class MockAppStore<T> {
   getState() {
@@ -98,6 +99,7 @@ describe('Model Tree Generator service', () => {
         NetworkPopupService,
         NetworkControlGenerator,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         VfModuleControlGenerator,
         VnfGroupControlGenerator,
         DialogService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
index 0072196f2..443741ff9 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
@@ -24,6 +24,7 @@ import {AaiService} from "../../../shared/services/aaiService/aai.service";
 import {VrfModelInfo} from "./models/vrf/vrf.model.info";
 import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step.service";
 import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service";
+import { VfModuleUpgradePopupService } from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 @Injectable()
 export class ObjectToTreeService {
@@ -34,6 +35,7 @@ export class ObjectToTreeService {
               private _vnfPopupService : VnfPopupService,
               private  _networkPopupService :  NetworkPopupService,
               private _vfModulePopupService : VfModulePopuopService,
+              private _vfModuleUpgradePopupService : VfModuleUpgradePopupService,
               private _vnfGroupPopupService : VnfGroupPopupService,
               private _duplicateService : DuplicateService,
               private _modalService: SdcUiServices.ModalService,
@@ -52,7 +54,7 @@ export class ObjectToTreeService {
    * return all first optional first level of the model tree
    ************************************************************/
   getFirstLevelOptions(): ILevelNodeInfo[] {
-    return [new VnfModelInfo(this._dynamicInputsService, this._sharedTreeService, this._defaultDataGeneratorService, this._dialogService, this._vnfPopupService, this._vfModulePopupService, this._duplicateService, this._modalService, this._iframeService, this._componentInfoService, this._store)
+    return [new VnfModelInfo(this._dynamicInputsService, this._sharedTreeService, this._defaultDataGeneratorService, this._dialogService, this._vnfPopupService, this._vfModulePopupService, this._vfModuleUpgradePopupService,this._duplicateService, this._modalService, this._iframeService, this._componentInfoService, this._store)
       , new NetworkModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._networkPopupService, this._duplicateService, this._modalService, this._iframeService,  this._store),
       new PnfModelInfo(),
       new VrfModelInfo(this._store, this._sharedTreeService, this._dialogService, this._iframeService, this._networkStepService, this._vpnStepService),
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
index 89e20a2d6..1412faa24 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
@@ -40,6 +40,7 @@ import {ComponentInfoModel, ComponentInfoType} from "../component-info/component
 import {ModelInformationItem} from "../../../shared/components/model-information/model-information.component";
 import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step.service";
+import {VfModuleUpgradePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 class MockAppStore<T> {
   getState() {
@@ -96,6 +97,7 @@ describe('Shared Tree Service', () => {
         NetworkPopupService,
         NetworkControlGenerator,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         VfModuleControlGenerator,
         VnfGroupControlGenerator,
         DialogService,
@@ -162,7 +164,7 @@ describe('Shared Tree Service', () => {
     jest.spyOn(AuditInfoModalComponent.openInstanceAuditInfoModal, 'next');
 
     let modelInfoServiceMock: ILevelNodeInfo = new VnfModelInfo(null, null,
-      null, null, null, null,
+      null, null, null, null, null,
       null, null, null, null,null);
     const modelMock = {"a": "a"};
     const instanceMock = {"instance": "instance", "trackById": "123456789"};
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
index 8a95d108f..d0e2d4b85 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
@@ -27,6 +27,7 @@ export enum PopupType{
   VNF = 'vnf',
   NETWORK = 'network',
   VF_MODULE = 'vf_module',
+  VF_MODULE_UPGRADE = 'vf_module_upgrade',
   VNF_GROUP = 'vnf_group'
 }
 
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.spec.ts
index fa77bed5f..ab70ea335 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.spec.ts
@@ -20,6 +20,7 @@ import {NetworkControlGenerator} from "../genericForm/formControlsServices/netwo
 import {VfModulePopuopService} from "./genericFormServices/vfModule/vfModule.popuop.service";
 import {VfModuleControlGenerator} from "../genericForm/formControlsServices/vfModuleGenerator/vfModule.control.generator";
 import {FeatureFlagsService} from "../../services/featureFlag/feature-flags.service";
+import {VfModuleUpgradePopupService} from "./genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 class MockAppStore<T>{
   getState() {
@@ -970,6 +971,7 @@ describe('Generic Form popup Service', () => {
         NetworkPopupService,
         NetworkControlGenerator,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         VfModuleControlGenerator,
         {provide:FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: ActivatedRoute, useClass: ActivatedRouteMock},
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popuop.service.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popuop.service.ts
index c7a71efc0..d0a68675c 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popuop.service.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popuop.service.ts
@@ -33,13 +33,13 @@ export class VfModulePopuopService implements GenericPopupInterface {
   isUpdateMode: boolean;
 
 
-  constructor(private _basicControlGenerator: BasicControlGenerator,
-              private _vfModuleControlGenerator: VfModuleControlGenerator,
-              private _iframeService: IframeService,
-              private _defaultDataGeneratorService: DefaultDataGeneratorService,
-              private _aaiService: AaiService,
-              private _basicPopupService : BasicPopupService,
-              private _store: NgRedux<AppState>) {
+  constructor(protected _basicControlGenerator: BasicControlGenerator,
+              protected _vfModuleControlGenerator: VfModuleControlGenerator,
+              protected _iframeService: IframeService,
+              protected _defaultDataGeneratorService: DefaultDataGeneratorService,
+              protected _aaiService: AaiService,
+              protected _basicPopupService : BasicPopupService,
+              protected _store: NgRedux<AppState>) {
 
   }
 
@@ -141,16 +141,20 @@ export class VfModulePopuopService implements GenericPopupInterface {
       delete form.value['supplementaryFileName'];
     }
     that.storeVFModule(that, form.value);
+    this.postSubmitIframeMessage(that);
+    this.onCancel(that, form);
+  }
+
+
+  protected postSubmitIframeMessage(that) {
     window.parent.postMessage({
       eventId: 'submitIframe',
       data: {
         serviceModelId: that.serviceModel.uuid
       }
     }, "*");
-    this.onCancel(that, form);
   }
 
-
   onCancel(that, form) {
     form.reset();
     that._iframeService.removeClassCloseModal('content');
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service.ts
new file mode 100644
index 000000000..a7f6d5515
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service.ts
@@ -0,0 +1,25 @@
+import {Injectable} from "@angular/core";
+import {ITreeNode} from "angular-tree-component/dist/defs/api";
+import {FormGroup} from "@angular/forms";
+import {VfModulePopuopService} from "../vfModule/vfModule.popuop.service";
+import {FormPopupDetails} from "../../../../models/formControlModels/formPopupDetails.model";
+
+@Injectable()
+export class VfModuleUpgradePopupService extends VfModulePopuopService {
+  node: ITreeNode;
+
+  getGenericFormPopupDetails(serviceId: string, vnfStoreKey: string, vfModuleStoreKey: string, node: ITreeNode, uuidData: Object, isUpdateMode: boolean): FormPopupDetails {
+    return super.getGenericFormPopupDetails(serviceId, vnfStoreKey, vfModuleStoreKey, node, uuidData, isUpdateMode);
+  }
+
+  getDynamicInputs = () => [];
+  getControls = () => [];
+  getTitle = (): string => 'Upgrade Module';
+
+  onSubmit(that, form: FormGroup) {
+    //that.storeVFModule(that, form.value);
+    this.postSubmitIframeMessage(that);
+    this.onCancel(that, form);
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts
new file mode 100644
index 000000000..17054c78b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts
@@ -0,0 +1,76 @@
+import {LogService} from "../../../../utils/log/log.service";
+import {NgRedux} from "@angular-redux/store";
+import {BasicControlGenerator} from "../../../genericForm/formControlsServices/basic.control.generator";
+import {AaiService} from "../../../../services/aaiService/aai.service";
+import {HttpClient} from "@angular/common/http";
+import {GenericFormService} from "../../../genericForm/generic-form.service";
+import {FormBuilder} from "@angular/forms";
+import {IframeService} from "../../../../utils/iframe.service";
+import {DefaultDataGeneratorService} from "../../../../services/defaultDataServiceGenerator/default.data.generator.service";
+import {BasicPopupService} from "../basic.popup.service";
+import {VfModuleControlGenerator} from "../../../genericForm/formControlsServices/vfModuleGenerator/vfModule.control.generator";
+import {SdcUiServices} from "onap-ui-angular";
+import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service";
+import {getTestBed, TestBed} from "@angular/core/testing";
+import {VfModuleUpgradePopupService} from "./vfModule.upgrade.popuop.service";
+
+class MockModalService<T> {
+}
+
+class MockAppStore<T> {
+}
+
+let uuidData = {};
+
+class MockReduxStore<T> {
+  getState() {
+    return {};
+  }
+}
+
+class MockFeatureFlagsService {
+}
+
+describe('VFModule popup service', () => {
+  let injector;
+  let service: VfModuleUpgradePopupService;
+  let genericFormService: GenericFormService;
+  let defaultDataGeneratorService: DefaultDataGeneratorService;
+  let fb: FormBuilder;
+  let iframeService: IframeService;
+
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      providers: [
+        VfModuleUpgradePopupService,
+        BasicControlGenerator,
+        VfModuleControlGenerator,
+        DefaultDataGeneratorService,
+        GenericFormService,
+        FormBuilder,
+        IframeService,
+        AaiService,
+        LogService,
+        BasicPopupService,
+        {provide: FeatureFlagsService, useClass: MockFeatureFlagsService},
+        {provide: NgRedux, useClass: MockReduxStore},
+        {provide: HttpClient, useClass: MockAppStore},
+        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+      ]
+    });
+    await TestBed.compileComponents();
+
+    injector = getTestBed();
+    service = injector.get(VfModuleUpgradePopupService);
+    genericFormService = injector.get(GenericFormService);
+    defaultDataGeneratorService = injector.get(DefaultDataGeneratorService);
+    fb = injector.get(FormBuilder);
+    iframeService = injector.get(IframeService);
+
+  })().then(done).catch(done.fail));
+
+  test('getTitle should return the correct title', () => {
+    expect(service.getTitle()).toBe("Upgrade Module")
+  });
+
+});
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts
index 6458e4f97..b1bbc92a8 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts
@@ -14,6 +14,7 @@ import {VnfControlGenerator} from "../../../genericForm/formControlsServices/vnf
 import {UUIDData} from "../../generic-form-popup.component";
 import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service";
 import {getTestBed, TestBed} from "@angular/core/testing";
+import {VfModuleUpgradePopupService} from "../vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 class MockAppStore<T> {}
 
@@ -2261,6 +2262,7 @@ describe('vnf new popup service', () => {
         LogService,
         BasicPopupService,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         BasicControlGenerator,
         VnfControlGenerator,
         {provide: NgRedux, useClass: MockReduxStore},
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service.spec.ts
index 5397a7233..075c97227 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service.spec.ts
@@ -14,6 +14,7 @@ import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flag
 import {VnfGroupPopupService} from "./vnfGroup.popup.service";
 import {VnfGroupControlGenerator} from "../../../genericForm/formControlsServices/vnfGroupGenerator/vnfGroup.control.generator";
 import {getTestBed, TestBed} from "@angular/core/testing";
+import {VfModuleUpgradePopupService} from "../vfModuleUpgrade/vfModule.upgrade.popuop.service";
 
 class MockAppStore<T> {}
 
@@ -2258,6 +2259,7 @@ describe('vnf group new popup service', () => {
         LogService,
         BasicPopupService,
         VfModulePopuopService,
+        VfModuleUpgradePopupService,
         BasicControlGenerator,
         VnfGroupControlGenerator,
         {provide: NgRedux, useClass: MockReduxStore},
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
index 8ea3d2d0b..0a7e61082 100644
--- a/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
@@ -49,6 +49,7 @@ export enum PopupType {
   VNF_MACRO  ='vnf macro',
   VNF_A_LA_CARTE = 'vnf a-la-carte',
   VFMODULE = 'vfModule',
+  VFMODULE_UPGRADE = 'vfModule_upgrade',
   NETWORK_MACRO = 'network_macro',
   VNF_GROUP = 'vnfGroup'
 }
diff --git a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
index 39a947f9d..518830dab 100644
--- a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
+++ b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
@@ -12,7 +12,7 @@ export enum Features {
   FLAG_1908_RESUME_MACRO_SERVICE = 'FLAG_1908_RESUME_MACRO_SERVICE',
   FLAG_FLASH_REPLACE_VF_MODULE ='FLAG_FLASH_REPLACE_VF_MODULE',
   FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT ='FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT',
-  FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS = 'FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS'
+  FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS ='FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS',
 }
 
 @Injectable()
diff --git a/vid-webpack-master/src/app/shared/shared.module.ts b/vid-webpack-master/src/app/shared/shared.module.ts
index 93452256b..d486f2975 100644
--- a/vid-webpack-master/src/app/shared/shared.module.ts
+++ b/vid-webpack-master/src/app/shared/shared.module.ts
@@ -42,6 +42,7 @@ import {NetworkPopupService} from "./components/genericFormPopup/genericFormServ
 import {NetworkControlGenerator} from "./components/genericForm/formControlsServices/networkGenerator/network.control.generator";
 import {BasicPopupService} from "./components/genericFormPopup/genericFormServices/basic.popup.service";
 import {VfModulePopuopService} from "./components/genericFormPopup/genericFormServices/vfModule/vfModule.popuop.service";
+import {VfModuleUpgradePopupService} from "./components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {VfModuleControlGenerator} from "./components/genericForm/formControlsServices/vfModuleGenerator/vfModule.control.generator";
 import {OrderByPipe} from "./pipes/order/orderBy.pipe";
 import {ServicePopupService} from "./components/genericFormPopup/genericFormServices/service/service.popup.service";
@@ -181,6 +182,7 @@ import {ModelInformationService} from "./components/model-information/model-info
     CustomValidators,
     NetworkPopupService,
     VfModulePopuopService,
+    VfModuleUpgradePopupService,
     NetworkControlGenerator,
     VnfGroupControlGenerator,
     VnfGroupPopupService,