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

diff --git a/catalog-ui/src/app/models/interfaceOperation.ts b/catalog-ui/src/app/models/interfaceOperation.ts
index 0768054..98a6040 100644 (file)
--- a/catalog-ui/src/app/models/interfaceOperation.ts
+++ b/catalog-ui/src/app/models/interfaceOperation.ts
@@ -123,8 +123,18 @@ export class InterfaceOperationModel extends BEInterfaceOperationModel {
             this.description = operation.description;
             this.operationType = operation.operationType;
             this.uniqueId = operation.uniqueId;
-            this.inputParams = operation.inputParams;
-            this.implementation = operation.implementation;
+            if (operation.inputParams && operation.inputParams.listToscaDataDefinition) {
+                const listToscaDataDefinition: InputOperationParameter[] = [];
+                operation.inputParams.listToscaDataDefinition.forEach(inputOperation => {
+                    listToscaDataDefinition.push(new InputOperationParameter(inputOperation));
+                });
+                this.inputParams = <IOperationParamsList> {
+                    'listToscaDataDefinition': listToscaDataDefinition
+                };
+            }
+            if (operation.implementation) {
+                this.implementation = new ArtifactModel(operation.implementation);
+            }
         }
     }
 

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 c0a883a..6135c30 100644 (file)
--- 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 5f02bc2..7cc8570 100644 (file)
--- 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 fd745ff..6bfb09d 100644 (file)
--- 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 35490b1..5372fc9 100644 (file)
--- 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 => {

diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 7225a1d..238e099 100644 (file)
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -463,8 +463,8 @@
   "ARTIFACT_PROPERTY_LIST_EMPTY": "The artifact type has no properties",
   "ARTIFACT_PROPERTY_LIST_TITLE": "Artifact properties",
   "INTERFACE_OPERATION_IMPLEMENTATION": "Implementation",
-  "INTERFACE_OPERATION_IMPLEMENTATION_NAME": "Name",
-  "INTERFACE_OPERATION_IMPLEMENTATION_FILE": "File",
+  "INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI": "Artifact File URI",
+  "ADD_ARTIFACT_DETAILS": "Add Artifact Details",
   "ADD_INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT": "Enable add Artifact To Implementation",
   "=========== PLUGIN NOT CONNECTED ===========": "",
   "PLUGIN_NOT_CONNECTED_ERROR_MAIN": "The \"{{pluginName}}\" plugin is currently unavailable.",