Support complex types in artifact properties

Adds support to complex types in artifact properties of an interface
operation implementation.

Change-Id: I7a82a3652541b35230fe4ce87bf703a1dbe72d50
Issue-ID: SDC-3899
Signed-off-by: andre.schmid <andre.schmid@est.tech>

8 files changed, 69 insertions, 22 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
index cd75fe87e6..7c0465f62a 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
@@ -42,6 +42,7 @@ export class InputListItemComponent implements OnInit {
   @Input() isMapChild: boolean = false;
   @Input() listIndex: number;
   @Input() isViewOnly: boolean;
+  @Input() allowDeletion: boolean = false;
   @Output('onValueChange') onValueChangeEvent: EventEmitter<any> = new EventEmitter<any>();
   @Output('onDelete') onDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
   @Output('onChildListItemDelete') onChildListItemDeleteEvent: EventEmitter<number> = new EventEmitter<number>();
@@ -145,7 +146,7 @@ export class InputListItemComponent implements OnInit {
   }
 
   showInputDelete(): boolean {
-    return !this.isViewOnly && (this.isRoot() || this.isMapChild);
+    return this.allowDeletion && !this.isViewOnly && (this.isRoot() || this.isMapChild);
   }
 
   resolveType(): string {
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
index 802bd63838..273fc7eac1 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
@@ -19,8 +19,11 @@
   ~  ============LICENSE_END=========================================================
   -->
 
-<label>{{ 'INPUT_LIST_TITLE' | translate }}</label>
+<label *ngIf="title">{{title}}</label>
 <div class="input-tree">
+  <div *ngIf="!_inputs.length">
+    {{emptyMessage}}
+  </div>
   <ul *ngFor="let input of _inputs">
     <app-input-list-item
         [name]="input.name"
@@ -29,6 +32,7 @@
         [valueObjRef]="input.value"
         [schema]="input.schema"
         [isViewOnly]="isViewOnly"
+        [allowDeletion]="allowDeletion"
         (onValueChange)="onValueChange($event)"
         (onDelete)="onDelete($event)">
     </app-input-list-item>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
index b07a4bb55f..99cfd21566 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
@@ -34,6 +34,7 @@ class InputListItemStubComponent {
   @Input() dataTypeMap: any;
   @Input() valueObjRef: any;
   @Input() schema: any;
+  @Input() allowDeletion: any;
   @Input() isViewOnly: boolean;
 }
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
index 72812d810d..832a40e841 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
@@ -45,10 +45,13 @@ export class InputListComponent {
   }
   @Input() dataTypeMap: Map<string, DataTypeModel>;
   @Input() isViewOnly: boolean;
+  @Input() title: string;
+  @Input() emptyMessage: string;
+  @Input() allowDeletion: boolean = false;
   @Output('onValueChange') inputValueChangeEvent: EventEmitter<InputOperationParameter> = new EventEmitter<InputOperationParameter>();
   @Output('onDelete') inputDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
 
-  _inputs: Array<InputOperationParameter>;
+  _inputs: Array<InputOperationParameter> = [];
 
   getDataType(type: string): DataTypeModel {
     return this.dataTypeMap.get(type);
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 46db3b94a9..ce4738a780 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
@@ -104,30 +104,27 @@
                 </div>
             </div>
             <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
-                <label class="sdc-input__label">{{ 'ENTITY_VIEWER_PROPERTIES_TAB' | translate }}</label>
-                <div class="generic-table">
-                    <div class="header-row table-row">
-                        <span class="cell header-cell field-input-name">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_NAME' | translate }}</span>
-                        <span class="cell header-cell field-input-type">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_TYPE' | translate }}</span>
-                        <span class="cell header-cell field-input-value">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_VALUE' | translate }}</span>
-                    </div>
-
-                    <div class="empty-msg data-row" *ngIf="!toscaArtifactTypeProperties.length">
-                        <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
-                    </div>
-                    <property-param-row
-                        *ngFor="let property of toscaArtifactTypeProperties"
-                        class="data-row"
-                        [artifactProperty]="property"
-                        [isPropertyValueValid]="propertyValueValidation">
-                    </property-param-row>
-                </div>
+                <input-list
+                    *ngIf="artifactTypeProperties && dataTypeMap"
+                    [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
+                    [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate"
+                    [inputs]="artifactTypeProperties"
+                    [dataTypeMap]="dataTypeMap"
+                    [isViewOnly]="isViewOnly"
+                    [allowDeletion]="false"
+                    (onValueChange)="onArtifactPropertyValueChange($event)"
+                >
+                </input-list>
             </div>
         </div>
         <div class="group-with-border content-row" *ngIf="dataTypeMap">
             <input-list
-                [inputs]="inputs" [dataTypeMap]="dataTypeMap"
+                [title]="'INPUT_LIST_TITLE' | translate"
+                [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
+                [inputs]="inputs"
+                [dataTypeMap]="dataTypeMap"
                 [isViewOnly]="isViewOnly"
+                [allowDeletion]="true"
                 (onValueChange)="onInputValueChange($event)"
                 (onDelete)="onInputDelete($event)"
             >
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
index cb47c8d167..5edf97f33c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
@@ -22,6 +22,9 @@
 @import '../../../../../../assets/styles/override.less';
 
 .operation-handler {
+    overflow: scroll;
+    max-height: 700px;
+    max-width: 100%;
     font-family: @font-opensans-regular;
     user-select: none;
     padding-top: 12px;
@@ -221,3 +224,7 @@
 
     }
 }
+
+.operation-handler::-webkit-scrollbar-track {
+    border: 0;
+}
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 ed295e867c..f357ddfc54 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
@@ -66,6 +66,7 @@ export class InterfaceOperationHandlerComponent {
 
     toscaArtifactTypeSelected: string;
     toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
+    artifactTypeProperties: Array<InputOperationParameter> = [];
 
     toscaArtifactTypes: Array<DropdownValue> = [];
 
@@ -112,6 +113,7 @@ export class InterfaceOperationHandlerComponent {
         this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
         this.artifactName = this.operationToUpdate.implementation.artifactName;
         this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
+        this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
         this.getArtifactTypesSelected();
     }
 
@@ -142,6 +144,7 @@ export class InterfaceOperationHandlerComponent {
                 this.artifactName = undefined;
             }
             this.toscaArtifactTypeProperties = undefined;
+            this.artifactTypeProperties = undefined;
         } else {
             this.getArtifactTypesSelected();
         }
@@ -158,6 +161,7 @@ export class InterfaceOperationHandlerComponent {
             artifact.artifactType = toscaArtifactType.type;
             artifact.properties = toscaArtifactType.properties;
             this.toscaArtifactTypeProperties = artifact.properties;
+            this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
             this.toscaArtifactTypeSelected = artifact.artifactType;
             this.operationToUpdate.implementation = artifact;
             this.getArtifactTypesSelected();
@@ -225,6 +229,7 @@ export class InterfaceOperationHandlerComponent {
             this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType;
             this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
             this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
+            this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
             this.enableAddArtifactImplementation = true;
         }
         this.validateRequiredField();
@@ -272,6 +277,15 @@ export class InterfaceOperationHandlerComponent {
         inputOperationParameter.value = changedInput.value;
     }
 
+    onArtifactPropertyValueChange(changedProperty: InputOperationParameter) {
+        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;
+    }
+
     /**
      * Handles the add input event.
      * @param input the input to add
@@ -304,4 +318,21 @@ export class InterfaceOperationHandlerComponent {
         currentInputs.splice(currentInputs.indexOf(input1), 1);
         this.inputs = Array.from(currentInputs);
     }
+
+    private convertArtifactsPropertiesToInput(): Array<InputOperationParameter> {
+        if (!this.toscaArtifactTypeProperties) {
+            return [];
+        }
+        const inputList: Array<InputOperationParameter> = [];
+        this.toscaArtifactTypeProperties.forEach(property => {
+            const input = new InputOperationParameter();
+            input.name = property.name;
+            input.type = property.type;
+            input.schema = property.schema;
+            input.toscaDefaultValue = property.defaultValue;
+            input.value = property.value;
+            inputList.push(input);
+        });
+        return inputList;
+    }
 }
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 85e2ec2141..88bd40767f 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -445,7 +445,10 @@
   "INPUT_LIST_ADD_MAP_ENTRY": "Add Map Entry",
   "INPUT_LIST_ADD_LIST_ENTRY": "Add List Entry",
   "INPUT_LIST_TITLE": "Inputs",
+  "INPUT_LIST_EMPTY": "The input list is empty",
   "ADD_INPUT_TITLE": "New Input",
+  "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",