Map operation outputs to input properties

Change-Id: Iedf41e429c87ac9e15c8ff520e3ce7d69e44293d
Issue-ID: SDC-2084
Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>

5 files changed, 89 insertions, 18 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
index 4acf424993..5848b585e9 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -157,6 +157,7 @@
                 [isAssociateWorkflow]="isUsingExistingWF()"
                 [param]="param"
                 [inputProps]="inputProperties"
+                [operationOutputs]="operationOutputs"
                 [onRemoveParam]="onRemoveParam"
                 [readonly]="readonly"
                 [validityChanged]="validityChanged">
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
index e746c6d6fe..fd9e1cf5a8 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -73,6 +73,7 @@ export class OperationCreatorComponent {
     assignOutputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
 
     tableParameters: Array<OperationParameter> = [];
+    operationOutputs: Array<OperationModel> = [];
 
     associationOptions: Array<DropdownValue> = [];
     workflowAssociationType: string;
@@ -134,6 +135,17 @@ export class OperationCreatorComponent {
         this.onSelectInterface(new DropDownOption(this.operation.interfaceType));
         this.validityChanged();
 
+        this.operationOutputs = _.reduce(
+            this.interfaces,
+            (acc: Array<OperationModel>, interf) => [
+                ...acc,
+                ..._.filter(
+                    interf.operations,
+                    op => op.uniqueId !== this.operation.uniqueId
+                ),
+            ],
+        []);
+
         if (this.enableWorkflowAssociation) {
             this.isLoading = true;
             this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
index d23783715c..aa4277c004 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -38,14 +38,27 @@
 </div>
 
 <div class="cell field-property" *ngIf="isInputParam">
-    <ui-element-dropdown
+    <select
         *ngIf="filteredInputProps.length || !isAssociateWorkflow"
-        [testId]="'param-property-' + (param.name || 'unnamed')"
-        [values]="filteredInputProps"
-        [(value)]="param.inputId"
-        (valueChange)="onChangeProperty($event)"
-        [readonly]="readonly">
-    </ui-element-dropdown>
+        [(ngModel)]="param.inputId"
+        (change)="onChangeProperty($event)"
+        [ngClass]="{'disabled': readonly}"
+        [attr.data-tests-id]="'value-param-property-' + (param.name || 'unnamed')">
+        <option
+            *ngFor="let prop of filteredInputProps"
+            [ngValue]="prop.value">
+            {{prop.label}}
+        </option>
+        <optgroup
+            *ngFor="let operation of operationOutputCats"
+            label="{{operation.operationName}}">
+            <option
+                *ngFor="let output of operation.outputs"
+                [ngValue]="output.value">
+                {{output.label}}
+            </option>
+        </optgroup>
+    </select>
     <span
         *ngIf="!filteredInputProps.length && isAssociateWorkflow"
         class="no-properties-error">
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index 99a54bb65c..f6cda17777 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -35,6 +35,10 @@
         padding-left: 10px;
     }
 
+    select {
+        width: 100%;
+    }
+
     &.field-property {
         &:last-child {
             flex: 1;
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index 89aa251252..bfa2b11b1c 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -1,9 +1,20 @@
 import {Component, Input} from '@angular/core';
 import {DataTypeService} from "app/ng2/services/data-type.service";
-import {OperationParameter, InputBEModel} from 'app/models';
+import {OperationModel, OperationParameter, InputBEModel} from 'app/models';
 import {DropDownOption} from "../operation-creator.component";
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
+class DropdownValueType extends DropdownValue {
+    type: String;
+
+    constructor(value: string, label: string, type?: String) {
+        super(value, label);
+        if (type) {
+            this.type = type;
+        }
+    }
+}
+
 @Component({
     selector: 'param-row',
     templateUrl: './param-row.component.html',
@@ -13,6 +24,7 @@ import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-e
 export class ParamRowComponent {
     @Input() param: OperationParameter;
     @Input() inputProps: Array<InputBEModel>;
+    @Input() operationOutputs: Array<OperationModel>;
     @Input() onRemoveParam: Function;
     @Input() isAssociateWorkflow: boolean;
     @Input() readonly: boolean;
@@ -20,6 +32,7 @@ export class ParamRowComponent {
     @Input() validityChanged: Function;
 
     propTypeEnum: Array<string> = [];
+    operationOutputCats: Array<{ operationName: string, outputs: Array<DropdownValueType> }> = [];
     filteredInputProps: Array<DropdownValue> = [];
 
     constructor(private dataTypeService: DataTypeService) {}
@@ -31,6 +44,7 @@ export class ParamRowComponent {
                 prop => prop.type
             )
         );
+
         this.onChangeType();
         this.validityChanged();
     }
@@ -48,14 +62,31 @@ export class ParamRowComponent {
             prop => new DropdownValue(prop.uniqueId, prop.name)
         );
 
+        this.operationOutputCats = _.filter(
+            _.map(
+                this.operationOutputs,
+                op => {
+                    return {
+                        operationName: `${op.displayType()}.${op.name}`,
+                        outputs: _.map(
+                            _.filter(op.outputs.listToscaDataDefinition, output => !this.param.type || output.type === this.param.type),
+                            output => new DropdownValueType(
+                                `${op.interfaceType}.${op.name}.${output.name}`,
+                                output.name,
+                                output.type
+                            )
+                        )
+                    };
+                }
+            ),
+            category => category.outputs.length > 0
+        );
+
         if (this.param.inputId) {
-            const selProp = _.find(
-                this.getPrimitiveSubtypes(),
-                prop => prop.uniqueId === this.param.inputId
-            );
+            const selProp = this.getSelectedProp();
             if (selProp && selProp.type === this.param.type) {
                 this.param.inputId = '-1';
-                setTimeout(() => this.param.inputId = selProp.uniqueId, 100);
+                setTimeout(() => this.param.inputId = selProp.uniqueId || selProp.value, 0);
             } else {
                 this.param.inputId = null;
             }
@@ -65,10 +96,7 @@ export class ParamRowComponent {
     }
 
     onChangeProperty() {
-        const newProp = _.find(
-            this.getPrimitiveSubtypes(),
-            prop => this.param.inputId === prop.uniqueId
-        );
+        const newProp = this.getSelectedProp();
 
         if (!this.param.type) {
             this.param.type = newProp.type;
@@ -76,7 +104,7 @@ export class ParamRowComponent {
         }
 
         if (!this.param.name) {
-            this.param.name = newProp.name;
+            this.param.name = newProp.name || newProp.label;
         }
 
         this.validityChanged();
@@ -108,6 +136,19 @@ export class ParamRowComponent {
         return flattenedProps;
     }
 
+    getSelectedProp() {
+        return _.find(
+            this.getPrimitiveSubtypes(),
+            prop => this.param.inputId === prop.uniqueId
+        ) || _.find(
+            _.reduce(
+                this.operationOutputCats,
+                (acc, cat) => [...acc, ...cat.outputs],
+            []),
+            (out: DropdownValueType) => this.param.inputId === out.value
+        );
+    }
+
     isTypePrimitive(type): boolean {
         return (
             type === 'string' ||