Rearrange Interface Operation Implementation

Name and File fields now called Artifact File URI.
Add Artifact To Implementation renamed to Add Artifact Details,
it was also added to localization.
Artifact File URI is made always visible,
and Add Artifact Details moved underneath it.

Issue-ID: SDC-3982
Signed-off-by: stasys10 <stasys.jurgaitis@est.tech>
Change-Id: I4cbe864347d156137a2ab4746500e5fd454a2b26

4 files changed, 69 insertions, 72 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 c0a883a1ed..6135c305f3 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
@@ -263,7 +263,7 @@ export class InterfaceOperationsComponent {
         if (!isArtifactChecked) {
             let artifactName = interfaceOperationHandlerComponentInstance.artifactName;
             artifactName = artifactName === undefined ? '' : artifactName;
-            operationUpdated.implementation = new ArtifactModel({'artifactName': artifactName} as ArtifactModel);
+            operationUpdated.implementation = new ArtifactModel({'artifactName': artifactName, 'artifactVersion': ''} as ArtifactModel);
         }
         this.topologyTemplateService.updateComponentInstanceInterfaceOperation(
             this.componentMetaData.uniqueId,
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 5f02bc2bf7..7cc8570423 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
@@ -65,56 +65,46 @@
         <div class="group-with-border content-row">
             <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
             <div class="form-item">
-                <checkbox [label]="'Add Artifact To Implementation'"
-                          [(checked)]="enableAddArtifactImplementation"
-                          (checkedChange)="onMarkToAddArtifactToImplementation($event)"
-                          [disabled]=isViewOnly>
-                </checkbox>
-            </div>
-            <div class="form-item" *ngIf="!enableAddArtifactImplementation">
                 <sdc-input
-                    label="{{'INTERFACE_OPERATION_IMPLEMENTATION_NAME' | translate}}"
+                    label="{{'INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI' | translate}}"
                     testId="interface-operation-implementation-name"
                     [(value)]="artifactName"
-                    (valueChange)="onImplementationNameChange($event)"
+                    (valueChange)="onURIChange($event)"
                     [disabled]=isViewOnly>
                 </sdc-input>
             </div>
-
-            <div class="side-by-side" *ngIf="enableAddArtifactImplementation">
-                <div class="form-item" *ngIf="toscaArtifactTypes">
-                    <sdc-dropdown
-                        label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
-                        testId="selectToscaArtifactType"
-                        [required]="true"
-                        [selectedOption]="toscaArtifactTypeSelected"
-                        placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
-                        (changed)="onSelectToscaArtifactType($event)"
-                        [options]="toscaArtifactTypes"
-                        [disabled]=isViewOnly>
-                    </sdc-dropdown>
-                </div>
-                <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
-                    <sdc-input
-                        label="{{ 'INTERFACE_OPERATION_IMPLEMENTATION_FILE' | translate }}"
-                        data-tests-id="artifactFile"
-                        [(value)]="artifactName"
-                        [required]="true"
-                        (valueChange)="onArtifactFileChange($event)"
-                        [disabled]=isViewOnly>
-                    </sdc-input>
-                </div>
-                <div class="form-item">
-                    <sdc-input
-                        label="{{ 'ARTIFACT_VERSION' | translate }}"
-                        data-tests-id="artifactVersion"
-                        [(value)]="artifactVersion"
-                        (valueChange)="onArtifactVersionChange($event)"
-                        [disabled]=isViewOnly>
-                    </sdc-input>
-                </div>
+            <br>
+            <div class="form-item">
+                <checkbox [label]="'ADD_ARTIFACT_DETAILS' | translate"
+                    [(checked)]="enableAddArtifactImplementation"
+                    (checkedChange)="onMarkToAddArtifactToImplementation($event)"
+                    [disabled]=isViewOnly>
+                </checkbox>
+            </div>
+            <div class="form-item" *ngIf="toscaArtifactTypes && enableAddArtifactImplementation">
+                <br>
+                <sdc-dropdown
+                    label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
+                    testId="selectToscaArtifactType"
+                    [required]="true"
+                    [selectedOption]="toscaArtifactTypeSelected"
+                    placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
+                    (changed)="onSelectToscaArtifactType($event)"
+                    [options]="toscaArtifactTypes"
+                    [disabled]=isViewOnly>
+                </sdc-dropdown>
+            </div>
+            <div class="form-item" *ngIf="enableAddArtifactImplementation">
+                <sdc-input
+                    label="{{ 'ARTIFACT_VERSION' | translate }}"
+                    data-tests-id="artifactVersion"
+                    [(value)]="artifactVersion"
+                    (valueChange)="onArtifactVersionChange($event)"
+                    [disabled]=isViewOnly>
+                </sdc-input>
             </div>
             <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
+                <br>
                 <input-list
                     *ngIf="artifactTypeProperties && dataTypeMap"
                     [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
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 fd745ff311..6bfb09da9d 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
@@ -96,7 +96,7 @@ export class InterfaceOperationHandlerComponent {
         this.isViewOnly = this.input.isViewOnly;
         this.isEdit = this.input.isEdit;
         this.interfaceType = this.input.selectedInterface.type;
-        this.operationToUpdate = this.input.selectedInterfaceOperation;
+        this.operationToUpdate = new InterfaceOperationModel(this.input.selectedInterfaceOperation);
         this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;
         this.operationToUpdate.interfaceType = this.input.selectedInterface.type;
         this.modelName = this.input.modelName;
@@ -182,28 +182,25 @@ export class InterfaceOperationHandlerComponent {
         this.operationToUpdate.description = value;
     }
 
-    onImplementationNameChange(value: any) {
-        this.readonly = true
-        if (value || value === '') {
+    onURIChange(value: string | undefined) {
+        if(!this.operationToUpdate.implementation){
             let artifact = new ArtifactModel();
-            artifact.artifactName = value;
             this.operationToUpdate.implementation = artifact;
-            this.enableAddArtifactImplementation = false;
-            this.readonly = false;
         }
+        this.operationToUpdate.implementation.artifactName = value ? value : '';
     }
 
     onPropertyValueChange = (propertyValue) => {
         this.emitter.emit(propertyValue);
     }
 
-    onMarkToAddArtifactToImplementation(event: any) {
+    onMarkToAddArtifactToImplementation(event: boolean) {
         if (!event) {
             this.toscaArtifactTypeSelected = undefined;
             this.artifactVersion = undefined;
             if (this.operationToUpdate.implementation.artifactType) {
                 this.operationToUpdate.implementation.artifactName = '';
-                this.artifactName = undefined;
+                this.operationToUpdate.implementation.artifactVersion = '';
             }
             this.toscaArtifactTypeProperties = undefined;
             this.artifactTypeProperties = undefined;
@@ -218,8 +215,8 @@ export class InterfaceOperationHandlerComponent {
         if (type) {
             let toscaArtifactType = type.value;
             let artifact = new ArtifactModel();
-            this.artifactName = undefined;
-            this.artifactVersion = undefined;
+            artifact.artifactName = this.operationToUpdate.implementation.artifactName;
+            artifact.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
             artifact.artifactType = toscaArtifactType.type;
             artifact.properties = toscaArtifactType.properties;
             this.toscaArtifactTypeProperties = artifact.properties;
@@ -231,17 +228,8 @@ export class InterfaceOperationHandlerComponent {
         this.validateRequiredField();
     }
 
-    onArtifactFileChange(value: any) {
-        if (value) {
-            this.operationToUpdate.implementation.artifactName = value;
-        }
-        this.validateRequiredField();
-    }
-
-    onArtifactVersionChange(value: any) {
-        if (value) {
-            this.operationToUpdate.implementation.artifactVersion = value;
-        }
+    onArtifactVersionChange(value: string | undefined) {
+            this.operationToUpdate.implementation.artifactVersion = value ? value : '';
     }
 
     onAddInput(inputOperationParameter: InputOperationParameter) {
@@ -287,9 +275,11 @@ export class InterfaceOperationHandlerComponent {
 
     private getArtifactTypesSelected() {
         if (this.operationToUpdate.implementation && this.operationToUpdate.implementation.artifactType) {
-            this.artifactName = this.operationToUpdate.implementation.artifactName;
+            this.artifactName =
+                this.artifactName ? this.artifactName : this.operationToUpdate.implementation.artifactName;
             this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType;
-            this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
+            this.artifactVersion =
+                this.artifactVersion ? this.artifactVersion : this.operationToUpdate.implementation.artifactVersion;
             this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
             this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
             this.enableAddArtifactImplementation = true;
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 35490b183c..5372fc919d 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
@@ -29,6 +29,7 @@ import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
 
 import {ModalService} from 'app/ng2/services/modal.service';
 import {
+    ArtifactModel,
     ButtonModel,
     CapabilitiesGroup,
     InputBEModel,
@@ -62,7 +63,6 @@ export class UIOperationModel extends OperationModel {
 
     constructor(operation: OperationModel) {
         super(operation);
-
         if (!operation.description) {
             this.description = '';
         }
@@ -263,7 +263,15 @@ export class InterfaceDefinitionComponent {
     }
 
     private updateOperation = (): void => {
-        let operationToUpdate = this.modalInstance.instance.dynamicContent.instance.operationToUpdate;
+        this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = true;
+        const interfaceOperationHandlerComponentInstance: InterfaceOperationHandlerComponent = this.modalInstance.instance.dynamicContent.instance;
+        const operationToUpdate = this.modalInstance.instance.dynamicContent.instance.operationToUpdate;
+        const isArtifactChecked = interfaceOperationHandlerComponentInstance.enableAddArtifactImplementation;
+        if (!isArtifactChecked) {
+            const artifactName = interfaceOperationHandlerComponentInstance.artifactName ?
+                interfaceOperationHandlerComponentInstance.artifactName : '';
+            operationToUpdate.implementation = new ArtifactModel({'artifactName': artifactName, 'artifactVersion': ''} as ArtifactModel);
+        }
         this.componentServiceNg2.updateComponentInterfaceOperation(this.component.uniqueId, operationToUpdate)
         .subscribe((newOperation: InterfaceOperationModel) => {
             let oldOpIndex;
@@ -276,14 +284,19 @@ export class InterfaceDefinitionComponent {
                     }
                 });
             });
-            newOperation = this.handleEnableAddArtifactImplementation(newOperation);
             oldInterf.operations.splice(oldOpIndex, 1);
             oldInterf.operations.push(new InterfaceOperationModel(newOperation));
+        }, error => {
+            this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
+        }, () => {
+            this.sortInterfaces();
+            this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
+            this.modalServiceNg2.closeCurrentModal();
         });
-        this.modalServiceNg2.closeCurrentModal();
     }
 
     private createOperationCallback(): void {
+        this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = true;
         const operationToUpdate = this.modalInstance.instance.dynamicContent.instance.operationToUpdate;
         console.log('createOperationCallback', operationToUpdate);
         console.log('this.component', this.component);
@@ -300,8 +313,12 @@ export class InterfaceDefinitionComponent {
                 uiInterfaceModel.operations.push(new UIOperationModel(new OperationModel(newOperation)));
                 this.interfaces.push(uiInterfaceModel);
             }
+        }, error => {
+            this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
+        }, () => {
+            this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
+            this.modalServiceNg2.closeCurrentModal();
         });
-        this.modalServiceNg2.closeCurrentModal();
     }
 
     private handleEnableAddArtifactImplementation = (newOperation: InterfaceOperationModel): InterfaceOperationModel => {