Update Interface definition on VFC

Signed-off-by: aribeiro <anderson.ribeiro@est.tech>
Change-Id: I13678c92ae6088016a78554ffaf0da47b82f7e65
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3893
Signed-off-by: andre.schmid <andre.schmid@est.tech>

4 files changed, 150 insertions, 43 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
index 17f697ecda..07d8fd6eea 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
@@ -29,7 +29,7 @@ import {PluginsService} from "app/ng2/services/plugins.service";
 import {SelectedComponentType} from "../common/store/graph.actions";
 
 import {WorkspaceService} from "../../workspace/workspace.service";
-import {ComponentInstanceInterfaceModel, InterfaceOperationModel} from "../../../../models/interfaceOperation";
+import {ComponentInterfaceDefinitionModel, InterfaceOperationModel} from "../../../../models/interfaceOperation";
 import {InterfaceOperationHandlerComponent} from "./operation-creator/interface-operation-handler.component";
 
 import {ArtifactModel, ButtonModel, ComponentInstance, ComponentMetadata, InputBEModel, InterfaceModel, ModalModel} from 'app/models';
@@ -85,7 +85,7 @@ class ModalTranslation {
   }
 }
 
-export class UIInterfaceModel extends ComponentInstanceInterfaceModel {
+export class UIInterfaceModel extends ComponentInterfaceDefinitionModel {
   isCollapsed: boolean = false;
 
   constructor(interf?: any) {
@@ -163,7 +163,7 @@ export class InterfaceOperationsComponent {
     this.sortInterfaces();
   }
 
-  private initInterfaces(interfaces: ComponentInstanceInterfaceModel[]): void {
+  private initInterfaces(interfaces: ComponentInterfaceDefinitionModel[]): void {
     this.interfaces = _.map(interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel));
   }
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index ce4738a780..7a73a5babc 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -28,7 +28,7 @@
                 <sdc-input
                     label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
                     [(value)]="interfaceType"
-                    [disabled]=isViewOnly>
+                    [disabled]=!isViewOnly>
                 </sdc-input>
             </div>
 
@@ -36,7 +36,7 @@
                 <sdc-input
                     label="{{ 'OPERATION_NAME' | translate }}"
                     [(value)]="operationToUpdate.name"
-                    [disabled]=isViewOnly>
+                    [disabled]=!isViewOnly>
                 </sdc-input>
             </div>
         </div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
index f357ddfc54..059708592e 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
@@ -49,6 +49,7 @@ export class InterfaceOperationHandlerComponent {
         selectedInterfaceOperation: InterfaceOperationModel;
         validityChangedCallback: Function;
         isViewOnly: boolean;
+        interfaceTypesMap: Map<string, string[]>;
     };
 
     dataTypeMap$: Observable<Map<string, DataTypeModel>>;
@@ -63,6 +64,10 @@ export class InterfaceOperationHandlerComponent {
     isLoading: boolean = false;
     readonly: boolean;
     isViewOnly: boolean;
+    interfaceTypes: Array<DropdownValue> = [];
+    interfaceOperations: Array<DropdownValue> = [];
+
+    interfaceTypesMap: Map<string, string[]>;
 
     toscaArtifactTypeSelected: string;
     toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
@@ -71,6 +76,7 @@ export class InterfaceOperationHandlerComponent {
     toscaArtifactTypes: Array<DropdownValue> = [];
 
     enableAddArtifactImplementation: boolean;
+
     propertyValueValid: boolean = true;
     inputTypeOptions: any[];
 
@@ -89,7 +95,7 @@ export class InterfaceOperationHandlerComponent {
 
     ngOnInit() {
         this.isViewOnly = this.input.isViewOnly;
-        this.interfaceType = this.input.selectedInterface.displayType();
+        this.interfaceType = this.input.selectedInterface.type;
         this.operationToUpdate = this.input.selectedInterfaceOperation;
         this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;
         this.operationToUpdate.interfaceType = this.input.selectedInterface.type;
@@ -105,7 +111,13 @@ export class InterfaceOperationHandlerComponent {
                 listToscaDataDefinition: Array<InputOperationParameter> = [];
             }
         }
+
         this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition);
+        this.interfaceTypesMap = this.input.interfaceTypesMap;
+        this.loadInterfaceTypesAndOperations();
+        this.removeImplementationQuote();
+        this.validityChanged();
+        this.loadInterfaceOperationImplementation();
     }
 
     private loadInterfaceOperationImplementation() {
@@ -117,13 +129,13 @@ export class InterfaceOperationHandlerComponent {
         this.getArtifactTypesSelected();
     }
 
-    onDescriptionChange= (value: any): void => {
+    onDescriptionChange = (value: any): void => {
         this.operationToUpdate.description = value;
     }
 
     onImplementationNameChange(value: any) {
         this.readonly = true
-        if (value) {
+        if (value || value === '') {
             let artifact = new ArtifactModel();
             artifact.artifactName = value;
             this.operationToUpdate.implementation = artifact;
@@ -141,6 +153,7 @@ export class InterfaceOperationHandlerComponent {
             this.toscaArtifactTypeSelected = undefined;
             this.artifactVersion = undefined;
             if (this.operationToUpdate.implementation.artifactType) {
+                this.operationToUpdate.implementation.artifactName = '';
                 this.artifactName = undefined;
             }
             this.toscaArtifactTypeProperties = undefined;
@@ -281,7 +294,6 @@ export class InterfaceOperationHandlerComponent {
         if (changedProperty.value instanceof Object) {
             changedProperty.value = JSON.stringify(changedProperty.value);
         }
-        this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
         const property = this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
         property.value = changedProperty.value;
     }
@@ -335,4 +347,12 @@ export class InterfaceOperationHandlerComponent {
         });
         return inputList;
     }
+
+    private loadInterfaceTypesAndOperations() {
+        console.log("loadInterfaceTypesAndOperations ", this.interfaceTypesMap.keys());
+
+        Array.from(this.interfaceTypesMap.keys()).forEach(value => this.interfaceTypes.push(new DropdownValue(value, value)));
+        console.log("loadInterfaceTypesAndOperations interfaceType ", this.interfaceTypes);
+    }
+
 }
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
index 2a77b5e996..8dd17f60e2 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
@@ -18,36 +18,46 @@
 *  SPDX-License-Identifier: Apache-2.0
 *  ============LICENSE_END=========================================================
 */
-import {Component, Input, Inject, ComponentRef} from '@angular/core';
-import {Component as IComponent } from 'app/models/components/component';
+import {Component, ComponentRef, Inject, Input} from '@angular/core';
+import {Component as IComponent} from 'app/models/components/component';
 
-import { SdcConfigToken, ISdcConfig } from "app/ng2/config/sdc-config.config";
-import {TranslateService } from "app/ng2/shared/translator/translate.service";
+import {ISdcConfig, SdcConfigToken} from "app/ng2/config/sdc-config.config";
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
 
-import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
-import {ModalService } from 'app/ng2/services/modal.service';
-import {
-    OperationModel,
-    InterfaceModel,
-    CapabilitiesGroup,
-    ButtonModel, ModalModel
-} from 'app/models';
+import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import {ModalService} from 'app/ng2/services/modal.service';
+import {ButtonModel, CapabilitiesGroup, ModalModel, OperationModel} from 'app/models';
 
-import {ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service';
+import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
 
-import { SdcUiServices } from 'onap-ui-angular';
+import {SdcUiServices} from 'onap-ui-angular';
 import {TopologyTemplateService} from "../../services/component-services/topology-template.service";
-import {InputOperationParameter, InterfaceOperationModel} from "../../../models/interfaceOperation";
-import {PropertyParamRowComponent} from "../composition/interface-operatons/operation-creator/property-param-row/property-param-row.component";
-import {InterfaceOperationHandlerComponent} from "../composition/interface-operatons/operation-creator/interface-operation-handler.component";
-import {DropdownValue} from "../../components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {
+    ComponentInterfaceDefinitionModel,
+    InputOperationParameter,
+    InterfaceOperationModel
+} from "../../../models/interfaceOperation";
+import {
+    PropertyParamRowComponent
+} from "../composition/interface-operatons/operation-creator/property-param-row/property-param-row.component";
+import {
+    InterfaceOperationHandlerComponent
+} from "../composition/interface-operatons/operation-creator/interface-operation-handler.component";
+import {
+    DropdownValue
+} from "../../components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {ToscaArtifactModel} from "../../../models/toscaArtifact";
+import {ToscaArtifactService} from "../../services/tosca-artifact.service";
+import {
+    UIInterfaceOperationModel
+} from "../composition/interface-operatons/interface-operations.component";
 
 export class UIOperationModel extends OperationModel {
     isCollapsed: boolean = true;
     isEllipsis: boolean;
     MAX_LENGTH = 75;
 
-    constructor(operation: OperationModel) {
+    constructor(operation: UIOperationModel) {
         super(operation);
 
         if (!operation.description) {
@@ -99,15 +109,14 @@ class ModalTranslation {
     }
 }
 
-// tslint:disable-next-line:max-classes-per-file
-export class UIInterfaceModel extends InterfaceModel {
+export class UIInterfaceModel extends ComponentInterfaceDefinitionModel {
     isCollapsed: boolean = false;
 
-    constructor(interfaceData?: any) {
-        super(interfaceData);
+    constructor(interf?: any) {
+        super(interf);
         this.operations = _.map(
             this.operations,
-            (operation) => new UIOperationModel(operation)
+            (operation) => new UIInterfaceOperationModel(operation)
         );
     }
 
@@ -134,12 +143,15 @@ export class InterfaceDefinitionComponent {
     deploymentArtifactsFilePath: Array<DropdownValue> = [];
 
     toscaArtifactTypes: Array<DropdownValue> = [];
+    interfaceTypesTest: Array<DropdownValue> = [];
+    interfaceTypesMap: Map<string, string[]>;
 
     isLoading: boolean;
     interfaceTypes: { [interfaceType: string]: string[] };
     modalTranslation: ModalTranslation;
     workflows: any[];
     capabilities: CapabilitiesGroup;
+    isViewOnly: boolean;
 
     @Input() component: IComponent;
     @Input() readonly: boolean;
@@ -149,18 +161,25 @@ export class InterfaceDefinitionComponent {
     constructor(
         @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
         @Inject("$state") private $state: ng.ui.IStateService,
+        @Inject("Notification") private notification: any,
         private translateService: TranslateService,
         private componentServiceNg2: ComponentServiceNg2,
         private modalServiceNg2: ModalService,
         private modalServiceSdcUI: SdcUiServices.ModalService,
-        private topologyTemplateService: TopologyTemplateService
+        private topologyTemplateService: TopologyTemplateService,
+        private toscaArtifactService: ToscaArtifactService
     ) {
         this.modalTranslation = new ModalTranslation(translateService);
+        this.interfaceTypesMap = new Map<string, string[]>();
     }
 
     ngOnInit(): void {
-        if(this.component) {
+        console.info("this.component.lifecycleState ", this.component.lifecycleState);
+        if (this.component) {
+            this.isViewOnly = this.component.componentMetadata.isComponentDataEditable();
             this.initInterfaceDefinition();
+            this.loadInterfaceTypes();
+            this.loadToscaArtifacts();
         }
     }
 
@@ -168,14 +187,18 @@ export class InterfaceDefinitionComponent {
         return this.modalServiceNg2.closeCurrentModal();
     }
 
-    private enableOrDisableSaveButton = (): boolean => {
-        return true;
+    private disableSaveButton = (): boolean => {
+        return this.isViewOnly ||
+            (this.isEnableAddArtifactImplementation()
+                && (!this.modalInstance.instance.dynamicContent.instance.toscaArtifactTypeSelected ||
+                    !this.modalInstance.instance.dynamicContent.instance.artifactName)
+            );
     }
 
     onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) {
         const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal);
         const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () =>
-        null, this.enableOrDisableSaveButton);
+            this.updateOperation(), this.disableSaveButton);
         const interfaceDataModal: ModalModel =
             new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', [saveButton, cancelButton], 'custom');
         this.modalInstance = this.modalServiceNg2.createCustomModal(interfaceDataModal);
@@ -188,13 +211,46 @@ export class InterfaceDefinitionComponent {
                 toscaArtifactTypes: this.toscaArtifactTypes,
                 selectedInterface: interfaceModel,
                 selectedInterfaceOperation: operation,
-                validityChangedCallback: this.enableOrDisableSaveButton,
-                isViewOnly: true
-            }
-        );
+                validityChangedCallback: this.disableSaveButton,
+                isViewOnly: this.isViewOnly,
+                interfaceTypesMap: this.interfaceTypesMap,
+            });
         this.modalInstance.instance.open();
     }
 
+    private updateOperation = (): void => {
+        let operationToUpdate = this.modalInstance.instance.dynamicContent.instance.operationToUpdate;
+        this.componentServiceNg2.updateComponentInterfaceOperation(this.component.uniqueId, operationToUpdate)
+        .subscribe((newOperation: InterfaceOperationModel) => {
+            let oldOpIndex;
+            let oldInterf;
+            this.interfaces.forEach(interf => {
+                interf.operations.forEach(op => {
+                    if (op.uniqueId === newOperation.uniqueId) {
+                        oldInterf = interf;
+                        oldOpIndex = interf.operations.findIndex((el) => el.uniqueId === op.uniqueId);
+                    }
+                });
+            });
+            newOperation = this.handleEnableAddArtifactImplementation(newOperation);
+            oldInterf.operations.splice(oldOpIndex, 1);
+            oldInterf.operations.push(new InterfaceOperationModel(newOperation));
+        });
+        this.modalServiceNg2.closeCurrentModal();
+    }
+
+    private handleEnableAddArtifactImplementation = (newOperation: InterfaceOperationModel): InterfaceOperationModel => {
+        if (!this.isEnableAddArtifactImplementation()) {
+            newOperation.implementation.artifactType = null;
+            newOperation.implementation.artifactVersion = null;
+        }
+        return newOperation;
+    }
+
+    private isEnableAddArtifactImplementation = (): boolean => {
+        return this.modalInstance.instance.dynamicContent.instance.enableAddArtifactImplementation;
+    }
+
     private initInterfaceDefinition() {
         this.isLoading = true;
         this.interfaces = [];
@@ -207,8 +263,39 @@ export class InterfaceDefinitionComponent {
         });
     }
 
+    private loadToscaArtifacts() {
+        this.toscaArtifactService.getToscaArtifacts(this.component.model).subscribe(response => {
+            if (response) {
+                let toscaArtifactsFound = <ToscaArtifactModel[]>_.values(response);
+                toscaArtifactsFound.forEach(value => this.toscaArtifactTypes.push(new DropdownValue(value, value.type)));
+            }
+        }, error => {
+            this.notification.error({
+                message: 'Failed to Load Tosca Artifacts:' + error,
+                title: 'Failure'
+            });
+        });
+    }
+
+    private loadInterfaceTypes() {
+        this.componentServiceNg2.getInterfaceTypes(this.component).subscribe(response => {
+            if (response) {
+                console.info("loadInterfaceTypes ", response);
+                for (const interfaceType in response) {
+                    this.interfaceTypesMap.set(interfaceType, response[interfaceType]);
+                    this.interfaceTypesTest.push(new DropdownValue(interfaceType, interfaceType));
+                }
+            }
+        }, error => {
+            this.notification.error({
+                message: 'Failed to Load Interface Types:' + error,
+                title: 'Failure'
+            });
+        });
+    }
+
     collapseAll(value: boolean = true): void {
-        _.forEach(this.interfaces, (interfaceData) => {
+        this.interfaces.forEach(interfaceData => {
             interfaceData.isCollapsed = value;
         });
     }