UI support for default custom function names with get_input structure

Issue-ID: SDC-4493
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: Iba3eda9bb5d57aabbe86045b6150564e17a0ff3e

7 files changed, 105 insertions, 28 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index 526ccf21ce..b348d81353 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -46,7 +46,6 @@
             
             <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
                 (click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
-
                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
                 <!-- Property Name -->
                     <div class="property-name">
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html
index f77af54c77..831ce49de8 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html
@@ -29,26 +29,36 @@
     </div>
     <div formArrayName="customParameterList">
       <div *ngFor="let parameter of parameters; let idx = index">
-        <div *ngIf="idx > 0" class="text-center"><span class="custom-plus-icon"></span></div>
-        <div class="parameter-card">
+        <div *ngIf="idx > 0 && type != GET_INPUT" class="text-center"><span class="custom-plus-icon"></span></div>
+        <div class="parameter-card" *ngIf="type != GET_INPUT">
           <div class="card-content">
             <ng-container *ngIf="parameter.type === STRING_FUNCTION_TYPE">
               <input type="text" [formControlName]="idx" [value]="parameter.value"/><br/>
             </ng-container>
             <ng-container *ngIf="parameter.type !== STRING_FUNCTION_TYPE">
-              <tosca-function [property]="propertyInputList[idx]" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" [allowClear]="false"
+              <tosca-function [property]="propertyInputList[idx]"
+                              [customToscaFunctions]="customToscaFunctions"
+                              [componentInstanceMap]="componentInstanceMap"
+                              [allowClear]="false"
                               (onValidityChange)="onFunctionValidityChange($event, idx)">
               </tosca-function>
             </ng-container>
-            <div class="buttons-container">
+            <div *ngIf="type != GET_INPUT" class="buttons-container">
               <span class="delete-icon" (click)="removeParameter(idx)"></span>
             </div>
           </div>
         </div>
+        <ng-container *ngIf="type === GET_INPUT">
+          <app-tosca-get-function [property]="propertyInputList[idx]" [toscaGetFunction]="toscaGetFunction"
+                                  [componentInstanceMap]="componentInstanceMap"
+                                  [functionType]="GET_INPUT"
+                                  (onValidityChange)="onGetFunctionValidityChange($event, idx)">
+          </app-tosca-get-function>
+        </ng-container>
       </div>
     </div>
   </ng-container>
-  <div class="buttons-container">
+  <div *ngIf="type != GET_INPUT" class="buttons-container">
     <a class="add-link" (click)="addStringParameter()">String Value</a> <a class="add-link" (click)="addFunction()">TOSCA Function Expression</a>
   </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts
index 7746d3845f..35f1649ec6 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts
@@ -30,7 +30,9 @@ import {PROPERTY_TYPES} from "../../../../../utils/constants";
 import {InstanceFeDetails} from "../../../../../models/instance-fe-details";
 import {ToscaFunctionValidationEvent} from "../tosca-function.component";
 import {ToscaFunction} from "../../../../../models/tosca-function";
+import {ToscaGetFunction} from "../../../../../models/tosca-get-function";
 import {CustomToscaFunction} from "../../../../../models/default-custom-functions";
+import {ToscaGetFunctionValidationEvent} from "../tosca-get-function/tosca-get-function.component";
 
 @Component({
     selector: 'app-tosca-custom-function',
@@ -43,10 +45,14 @@ export class ToscaCustomFunctionComponent implements OnInit {
     @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
     @Input() customToscaFunctions: Array<CustomToscaFunction> = [];
     @Input() name: string;
+    @Input() type: ToscaFunctionType;
+    @Input() propertyType: string;
+    @Input() propertySchemaType: string = undefined;
     @Input() isDefaultCustomFunction: boolean;
     @Output() onValidFunction: EventEmitter<ToscaCustomFunction> = new EventEmitter<ToscaCustomFunction>();
     @Output() onValidityChange: EventEmitter<ToscaCustomFunctionValidationEvent> = new EventEmitter<ToscaCustomFunctionValidationEvent>();
 
+    toscaGetFunction: ToscaFunction;
     customFunctionFormName: FormControl = new FormControl('', [Validators.required, Validators.minLength(1)]);
     customParameterFormArray: FormArray = new FormArray([], Validators.minLength(1));
     formGroup: FormGroup = new FormGroup(
@@ -58,20 +64,29 @@ export class ToscaCustomFunctionComponent implements OnInit {
 
     parameters: ToscaFunctionParameter[] = [];
     propertyInputList: Array<PropertyBEModel> = [];
+    previousType: ToscaFunctionType;
 
-    STRING_FUNCTION_TYPE = ToscaFunctionType.STRING
+    STRING_FUNCTION_TYPE = ToscaFunctionType.STRING;
+    GET_INPUT = ToscaFunctionType.GET_INPUT;
 
     ngOnInit() {
         this.initForm();
     }
 
     ngOnChanges() {
+        if (this.previousType && this.previousType != this.type) {
+            this.propertyInputList = [];
+            this.customParameterFormArray = new FormArray([], Validators.minLength(1));
+            this.parameters = [];
+        }
+        this.fillVariables();
         if (this.name && this.isDefaultCustomFunction) {
             this.customFunctionFormName.setValue(this.name);
             this.emitOnValidityChange();
         } else {
-            this.name = "";
+            this.name = '';
         }
+        this.previousType = this.type;
     }
 
     private initForm(): void {
@@ -81,7 +96,13 @@ export class ToscaCustomFunctionComponent implements OnInit {
                 this.onValidFunction.emit(this.buildCustomFunctionFromForm());
             }
         });
+    }
+
+    private fillVariables() {
         if (!this.toscaCustomFunction) {
+            if (this.type === this.GET_INPUT && this.parameters.length < 1) {
+                this.addFunction();
+            }
             return;
         }
         if (this.toscaCustomFunction.parameters) {
@@ -89,13 +110,13 @@ export class ToscaCustomFunctionComponent implements OnInit {
             this.customFunctionFormName.setValue(this.name)
             this.parameters = Array.from(this.toscaCustomFunction.parameters);
             for (const parameter of this.parameters) {
+                if (this.type === this.GET_INPUT) {
+                    this.toscaGetFunction = parameter as ToscaGetFunction;
+                    this.addToscaFunctionToParameters(parameter);
+                    return;
+                }
                 if (parameter.type !== PROPERTY_TYPES.STRING) {
-                    const propertyBEModel = this.createProperty(parameter.value);
-                    propertyBEModel.toscaFunction = <ToscaFunction> parameter;
-                    this.propertyInputList.push(propertyBEModel);
-                    this.customParameterFormArray.push(
-                        new FormControl(parameter, [Validators.required, Validators.minLength(1)])
-                    );
+                    this.addToscaFunctionToParameters(parameter);
                 } else {
                     this.propertyInputList.push(undefined);
                     this.customParameterFormArray.push(
@@ -104,6 +125,18 @@ export class ToscaCustomFunctionComponent implements OnInit {
                 }
             }
         }
+        if (this.type === this.GET_INPUT && this.parameters.length < 1) {
+            this.addFunction();
+        }
+    }
+
+    private addToscaFunctionToParameters(parameter: ToscaFunctionParameter) {
+        const propertyBEModel = this.createProperty(parameter.value);
+        propertyBEModel.toscaFunction = <ToscaFunction> parameter;
+        this.propertyInputList.push(propertyBEModel);
+        this.customParameterFormArray.push(
+            new FormControl(parameter, [Validators.required, Validators.minLength(1)])
+        );
     }
 
     private buildCustomFunctionFromForm(): ToscaCustomFunction {
@@ -111,6 +144,9 @@ export class ToscaCustomFunctionComponent implements OnInit {
         toscaCustomFunction1.name = this.customFunctionFormName.value;
         this.customParameterFormArray.controls.forEach(control => {
             const value = control.value;
+            if (!value) {
+                return;
+            }
             if (typeof value === 'string') {
                 const stringParameter = new ToscaStringParameter();
                 stringParameter.value = value;
@@ -140,12 +176,13 @@ export class ToscaCustomFunctionComponent implements OnInit {
 
     addStringParameter(): void {
         const toscaStringParameter = new ToscaStringParameter();
-        toscaStringParameter.value = ''
-        this.parameters.push(toscaStringParameter);
+        toscaStringParameter.value = '';
         this.propertyInputList.push(undefined);
         this.customParameterFormArray.push(
             new FormControl('', [Validators.required, Validators.minLength(1)])
         );
+        this.parameters.push(toscaStringParameter);
+        console.log(this.customParameterFormArray)
     }
 
     removeParameter(position): void {
@@ -156,7 +193,15 @@ export class ToscaCustomFunctionComponent implements OnInit {
 
     createProperty(value?: any): PropertyBEModel {
         const property = new PropertyBEModel();
-        property.type = PROPERTY_TYPES.ANY;
+        if (this.type === this.GET_INPUT) {
+            property.type = this.propertyType;
+            if (this.propertySchemaType) {
+                property.schemaType = this.propertySchemaType;
+            }
+        } else {
+            property.type = PROPERTY_TYPES.ANY;
+        }
+        
         property.value = value ? value : undefined;
         return property;
     }
@@ -168,6 +213,15 @@ export class ToscaCustomFunctionComponent implements OnInit {
             this.customParameterFormArray.controls[index].setValue(undefined);
         }
     }
+
+    onGetFunctionValidityChange(event: ToscaGetFunctionValidationEvent, index: number): void {
+        if (event.isValid && event.toscaGetFunction) {
+            this.customParameterFormArray.controls[index].setValue(event.toscaGetFunction);
+        } else {
+            this.customParameterFormArray.controls[index].setValue(undefined);
+        }
+        this.emitOnValidityChange();
+    }
 }
 
 export interface ToscaCustomFunctionValidationEvent {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
index 65a024cde4..0d5a4973da 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
@@ -38,8 +38,16 @@
                                  (onValidityChange)="onConcatFunctionValidityChange($event)"></app-tosca-concat-function>
     </div>
     <div *ngIf="isCustomSelected()">
-      <app-tosca-custom-function [toscaCustomFunction]="toscaFunction" [customToscaFunctions]="customToscaFunctions" [name]="getCustomFunctionName()" [componentInstanceMap]="componentInstanceMap"
-                                 [isDefaultCustomFunction]="isDefaultCustomFunction()" (onValidityChange)="onCustomFunctionValidityChange($event)"></app-tosca-custom-function>
+      <app-tosca-custom-function [toscaCustomFunction]="toscaFunction"
+                                 [customToscaFunctions]="customToscaFunctions"
+                                 [name]="getCustomFunctionName()"
+                                 [type]="getCustomFunctionType()"
+                                 [propertyType]="property.type"
+                                 [propertySchemaType]="property.schemaType"
+                                 [componentInstanceMap]="componentInstanceMap"
+                                 [isDefaultCustomFunction]="isDefaultCustomFunction()"
+                                 (onValidityChange)="onCustomFunctionValidityChange($event)">
+      </app-tosca-custom-function>
     </div>
     <div *ngIf="isGetFunctionSelected()">
       <app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction"
@@ -48,7 +56,8 @@
                               [functionType]="toscaFunctionTypeForm.value"
                               [compositionMap]="compositionMap"
                               [compositionMapKey]="compositionMapKey"
-                              (onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function>
+                              (onValidityChange)="onGetFunctionValidityChange($event)">
+      </app-tosca-get-function>
     </div>
     <div *ngIf="isYamlFunctionSelected()">
       <app-yaml-function [yamlFunction]="toscaFunction" (onValidityChange)="onYamlFunctionValidityChange($event)"></app-yaml-function>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
index ecaff252d3..b9559838f4 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
@@ -192,6 +192,11 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
         return toscaFunctionType.name;
     }
 
+    getCustomFunctionType():string {
+        let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction();
+        return toscaFunctionType.type;
+    }
+
     isDefaultCustomFunction(): boolean {
         let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction();
         if (toscaFunctionType.name === "other") {
@@ -223,7 +228,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
 
     isCustomSelected(): boolean {
         let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction();
-        return toscaFunctionType && toscaFunctionType.type === ToscaFunctionType.CUSTOM;
+        return toscaFunctionType && (toscaFunctionType.type === ToscaFunctionType.CUSTOM || toscaFunctionType.type === ToscaFunctionType.GET_INPUT);
     }
 
     isGetFunctionSelected(): boolean {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
index 387bb5cbcb..4a9e110982 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
@@ -17,7 +17,7 @@
   ~  ============LICENSE_END=========================================================
   -->
 
-<div class="tosca-function">
+<div>
   <form class="w-sdc-form" [formGroup]="formGroup">
     <div class="i-sdc-form-item" *ngIf="showPropertySourceDropdown()">
       <label class="i-sdc-form-label required">{{'TOSCA_FUNCTION_PROPERTY_SOURCE_LABEL' | translate}}</label>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
index 284c559c55..1b0a1a34ee 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
@@ -100,7 +100,6 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
         this.initToscaGetFunction().subscribe(() => {
             this.isInitialized = true;
         });
-
     }
 
     ngOnChanges(_changes: SimpleChanges): void {
@@ -410,7 +409,8 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
         if (this.property.type === PROPERTY_TYPES.ANY) {
             return true;
         }
-        let validPropertyType = property.type === PROPERTY_TYPES.LIST ? property.schemaType : property.type;
+        let validPropertyType = property.type;
+        let validPropertyTypeSchema = property.schemaType;
         if (this.typeHasSchema(this.property.type)) {
             if ((this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) {
                 let childObject : DerivedFEProperty = (<DerivedFEProperty>(<PropertyDeclareAPIModel> this.property).input);
@@ -421,13 +421,13 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
                     }
                     return validPropertyType === childObject.type;
                 }else{
-                    return validPropertyType === this.property.schema.property.type;
+                    return validPropertyType === this.property.schemaType;
                 }
             }
             if (!property.schema || !property.schema.property) {
                 return false;
             }
-            return validPropertyType === this.property.type && this.property.schema.property.type === property.schema.property.type;
+            return validPropertyType === this.property.type && this.property.schemaType === validPropertyTypeSchema;
         }
         if (this.property.schema.property.isDataType && this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel>this.property).propertiesName){
             let typeToMatch = (<PropertyDeclareAPIModel> this.property).input.type;
@@ -438,7 +438,7 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
             return validPropertyType === typeToMatch;
         }
 
-        return validPropertyType === this.property.type;
+        return validPropertyType === this.property.type || (validPropertyType === PROPERTY_TYPES.LIST && validPropertyTypeSchema === this.property.type);
     }
 
     private getType(propertyPath:string[], type: string): string {
@@ -499,7 +499,7 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
         this.toscaIndexFlag = false;
         this.toscaIndex.reset();
         const selectedProperty: PropertyDropdownValue = this.selectedProperty.value;
-        if (selectedProperty.isList) {
+        if (selectedProperty.isList && this.property.type != PROPERTY_TYPES.LIST) {
             this.toscaIndexFlag = true;
         }
     }