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

3 files changed, 47 insertions, 67 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;