Provide tosca function capability to complex type fields in composition view

Tosca function capability is provided to all complex type fields in composition view

Issue-ID: SDC-4528
Signed-off-by: Imam hussain <imam.hussain@est.tech>
Change-Id: I4742c2a46ac7a9ed0fd47677aac5b4be9ad612a1

7 files changed, 294 insertions, 148 deletions

diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
index 78aa7bc7f4..afbd520532 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
@@ -30,93 +30,116 @@
             </div>
         </div>
         <!--<div class="property-value">-->
-        <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure">
-            <fields-structure value-obj-ref="(valueObjRef[property.name])"
-                              type-name="property.type"
-                              parent-property="parentProperty"
-                              component-instance-map="componentInstanceMap"
-                              parent-form-obj="parentFormObj"
-                              fields-prefix-name="fieldsPrefixName+property.name"
-                              read-only="readOnly"
-                              is-service="isService"
-                              default-value="{{currentTypeDefaultValue[property.name]}}">
-
-            </fields-structure>
-        </div>
-        <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type">
-            <div ng-switch-when="map">
-                <type-map value-obj-ref="valueObjRef[property.name]"
-                          schema-property="property.schema.property"
-                          parent-property="property"
-                          component-instance-map="componentInstanceMap"
-                          parent-form-obj="parentFormObj"
-                          fields-prefix-name="fieldsPrefixName+property.name"
-                          read-only="readOnly"
-                          default-value="{{currentTypeDefaultValue[property.name]}}"
-                          is-service="isService"
-                          types="types"></type-map>
+        <div class="inner-structure tosca-box tosca-parent">
+            <div class="tosca-box" data-ng-if="complexToscapath == null">
+                <form class="temp-form" data-ng-if="isService">
+                    <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name) == false" data-ng-click="onEnableTosca(false,property.name)"/> 
+                    Value
+                    <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name)" data-ng-click="onEnableTosca(true,property.name)" /> 
+                    {{'TOSCA_FUNCTION_LABEL' | translate}}
+                </form>
             </div>
-            <div ng-switch-when="list">
-                <type-list value-obj-ref="valueObjRef[property.name]"
-                           schema-property="property.schema.property"
-                           parent-property="parentProperty"
-                           component-instance-map="componentInstanceMap"
-                           parent-form-obj="parentFormObj"
-                           fields-prefix-name="fieldsPrefixName+property.name"
-                           read-only="readOnly"
-                           default-value="{{currentTypeDefaultValue[property.name]}}"
-                           is-service="isService"
-                           types="types"></type-list>
+            <div data-ng-if="verifyTosca(property.name)" class="div-tosca-function">
+                <tosca-function [property]="getSubProperty(property.name)"
+                                [component-instance-map]="componentInstanceMap"
+                                [allow-clear]="false"
+                                [composition-map]="true"
+                                [composition-map-key]="property.name"
+                                (on-valid-function)="onGetToscaFunction($event,property.name)"
+                >
+                </tosca-function>
+            </div>
+            <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" class="tosca-box">
+                <fields-structure value-obj-ref="(valueObjRef[property.name])"
+                                type-name="property.type"
+                                parent-property="parentProperty"
+                                component-instance-map="componentInstanceMap"
+                                parent-form-obj="parentFormObj"
+                                fields-prefix-name="fieldsPrefixName+property.name"
+                                read-only="readOnly"
+                                is-service="isService"
+                                complex-toscapath="property.name"
+                                default-value="{{currentTypeDefaultValue[property.name]}}">
+
+                </fields-structure>
             </div>
-            <div ng-switch-default class="primitive-value-field">
-                <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
-                    <!-- Has Constraints -->
+            <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" ng-switch="property.type" class="tosca-box">
+                <div ng-switch-when="map">
+                    <type-map value-obj-ref="valueObjRef[property.name]"
+                            schema-property="getSubProperty(property.name).schema.property"
+                            parent-property="getSubProperty(property.name)"
+                            component-instance-map="componentInstanceMap"
+                            parent-form-obj="parentFormObj[fieldsPrefixName + property.name]"
+                            fields-prefix-name="fieldsPrefixName+property.name"
+                            read-only="readOnly"
+                            default-value="{{currentTypeDefaultValue[property.name]}}"
+                            is-service="isService"
+                            complex-toscapath="property.name"
+                            types="types"></type-map>
+                </div>
+                <div ng-switch-when="list">
+                    <type-list value-obj-ref="valueObjRef[property.name]"
+                            schema-property="getSubProperty(property.name).schema.property"
+                            parent-property="getSubProperty(property.name)"
+                            component-instance-map="componentInstanceMap"
+                            parent-form-obj="parentFormObj[fieldsPrefixName + property.name]"
+                            fields-prefix-name="fieldsPrefixName+property.name"
+                            read-only="readOnly"
+                            default-value="{{currentTypeDefaultValue[property.name]}}"
+                            is-service="isService"
+                            complex-toscapath="property.name"
+                            types="types"></type-list>
+                </div>
+                <div ng-switch-default class="primitive-value-field">
+                    <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
+                        <!-- Has Constraints -->
 
-                    <!--<select class="i-sdc-form-select"-->
-                    <!--ng-if="(property.constraints)"-->
-                    <!--data-ng-disabled="readOnly"-->
-                    <!--name="{{fieldsPrefixName+property.name}}"-->
-                    <!--data-ng-change="onValueChange(property.name,'constraintsChange')"-->
-                    <!--data-ng-model="valueObjRef[property.name]"-->
-                    <!--&gt;-->
-                    <!--&lt;!&ndash; Get the default value in case exist &ndash;&gt;-->
-                    <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>-->
-                    <!--{{valueObjRef[property.name]}}-->
-                    <!--</option> -->
-                    <!--&lt;!&ndash; add all constratint to Select list &ndash;&gt;-->
-                    <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >-->
-                    <!--{{value}}-->
-                    <!--</option> -->
-                    <!--</select>-->
-                    <!-- Input without constraints -->
-                    <input class="i-sdc-form-input"
-                           data-tests-id="{{fieldsPrefixName+property.name}}"
-                           ng-if="!((property.simpleType||property.type) == 'boolean')"
-                           data-ng-maxlength="100"
-                           data-ng-readonly="readOnly"
-                           maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
-                           data-ng-model="valueObjRef[property.name]"
-                           type="text"
-                           name="{{fieldsPrefixName+property.name}}"
-                           data-ng-pattern="getValidationPattern((property.simpleType||property.type))"
-                           data-ng-model-options="{ debounce: 200 }"
-                           data-ng-change="inputOnValueChange(property)"
-                           autofocus
-                    />
-                    <select class="i-sdc-form-select"
+                        <!--<select class="i-sdc-form-select"-->
+                        <!--ng-if="(property.constraints)"-->
+                        <!--data-ng-disabled="readOnly"-->
+                        <!--name="{{fieldsPrefixName+property.name}}"-->
+                        <!--data-ng-change="onValueChange(property.name,'constraintsChange')"-->
+                        <!--data-ng-model="valueObjRef[property.name]"-->
+                        <!--&gt;-->
+                        <!--&lt;!&ndash; Get the default value in case exist &ndash;&gt;-->
+                        <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>-->
+                        <!--{{valueObjRef[property.name]}}-->
+                        <!--</option> -->
+                        <!--&lt;!&ndash; add all constratint to Select list &ndash;&gt;-->
+                        <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >-->
+                        <!--{{value}}-->
+                        <!--</option> -->
+                        <!--</select>-->
+                        <!-- Input without constraints -->
+                        <input class="i-sdc-form-input"
                             data-tests-id="{{fieldsPrefixName+property.name}}"
-                            ng-if="(property.simpleType||property.type) == 'boolean'"
-                            data-ng-disabled="readOnly"
-                            name="{{fieldsPrefixName+property.name}}"
-                            data-ng-change="onValueChange(property.name,'boolean')"
+                            ng-if="!((property.simpleType||property.type) == 'boolean')"
+                            data-ng-maxlength="100"
+                            data-ng-readonly="readOnly"
+                            maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
                             data-ng-model="valueObjRef[property.name]"
-                            data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
-                    </select>
+                            type="text"
+                            name="{{fieldsPrefixName+property.name}}"
+                            data-ng-pattern="getValidationPattern((property.simpleType||property.type))"
+                            data-ng-model-options="{ debounce: 200 }"
+                            data-ng-change="inputOnValueChange(property,valueObjRef[property.name])"
+                            autofocus
+                        />
+                        <select class="i-sdc-form-select"
+                                data-tests-id="{{fieldsPrefixName+property.name}}"
+                                ng-if="(property.simpleType||property.type) == 'boolean'"
+                                data-ng-disabled="readOnly"
+                                name="{{fieldsPrefixName+property.name}}"
+                                data-ng-change="onValueChange(property.name,'boolean')"
+                                data-ng-model="valueObjRef[property.name]"
+                                data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
+                        </select>
 
-                    <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid">
-                        <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
-                        <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
-                        <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
+                        <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid">
+                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
+                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less
index abca49d7a3..de1f423fcb 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less
@@ -92,3 +92,15 @@
     }
 }
 
+.temp-form {
+    all: unset;
+    margin-left: 6px !important;
+}
+.tosca-box {
+    display: block !important;
+    all : unset;
+}
+.tosca-parent {
+    margin-left: 10px;
+}
+
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
index 30c7b06733..37ca36a371 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
@@ -22,11 +22,14 @@
  * Created by obarda on 1/27/2016.
  */
 'use strict';
-import { DataTypesMap, PropertyModel } from 'app/models';
+import { DataTypesMap, DerivedFEProperty, PropertyDeclareAPIModel, PropertyModel } from 'app/models';
 import { DataTypePropertyModel } from 'app/models/data-type-properties';
 import { DataTypesService } from 'app/services';
 import { ValidationUtils } from 'app/utils';
-import {InstanceFeDetails} from "app/models/instance-fe-details";
+import { PropertiesUtils } from "../../../ng2/pages/properties-assignment/services/properties.utils";
+import { InstanceFeDetails } from "app/models/instance-fe-details";
+import { SubPropertyToscaFunction } from 'app/models/sub-property-tosca-function';
+import { ToscaGetFunction } from 'app/models/tosca-get-function';
 import * as _ from 'lodash';
 
 export interface IDataTypeFieldsStructureScope extends ng.IScope {
@@ -47,12 +50,20 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope {
     dataTypesService: DataTypesService;
     constraints: string[];
     isService:boolean;
+    showToscaFunction: Map<string, boolean>;
+    subpropertyMap: Map<string, PropertyDeclareAPIModel>;
+    complexToscapath: string;
 
     expandAndCollapse(): void;
     getValidationPattern(type: string): RegExp;
     validateIntRange(value: string): boolean;
     onValueChange(propertyName: string, type: string): void;
-    inputOnValueChange(property: any): void;
+    inputOnValueChange(property: any, value: any): void;
+    onEnableTosca(toscaFlag:boolean,propertyName:string);
+    verifyTosca(propertyName: string) : boolean;
+    getSubProperty(propertyName: string) : PropertyDeclareAPIModel;
+    getToscaPathValue(propertyName: string) : Array<string>;
+    onGetToscaFunction(toscaGetFunction: ToscaGetFunction, propertyName:string);
 }
 
 export class DataTypeFieldsStructureDirective implements ng.IDirective {
@@ -70,7 +81,8 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         defaultValue: '@',
         types: '=',
         expandByDefault: '=',
-        isService: '='
+        isService: '=',
+        complexToscapath: '='
     };
 
     restrict = 'E';
@@ -78,13 +90,15 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
 
     constructor(private DataTypesService: DataTypesService,
                 private PropertyNameValidationPattern: RegExp,
-                private ValidationUtils: ValidationUtils) {
+                private ValidationUtils: ValidationUtils, 
+                private PropertiesUtils: PropertiesUtils) {
     }
 
     public static factory = (DataTypesService: DataTypesService,
                              PropertyNameValidationPattern: RegExp,
-                             ValidationUtils: ValidationUtils) => {
-        return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils);
+                             ValidationUtils: ValidationUtils, 
+                             PropertiesUtils: PropertiesUtils) => {
+        return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils, PropertiesUtils);
     }
     template = (): string => {
         return require('./data-type-fields-structure.html');
@@ -96,7 +110,20 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         scope.$watchCollection('[typeName,fieldsPrefixName]', (newData: any): void => {
             this.rerender(scope);
         });
-
+        let childProp = this.PropertiesUtils.convertAddPropertyBAToPropertyFE(scope.parentProperty);
+        scope.subpropertyMap = new Map<string,PropertyDeclareAPIModel>();
+        scope.showToscaFunction = new Map<string,boolean>();
+        childProp.flattenedChildren.forEach(prop => {
+            scope.showToscaFunction.set(prop.name,false);
+            if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+                    if (SubPropertyToscaFunction.subPropertyPath.toString() == prop.name) {
+                        scope.showToscaFunction.set(prop.name,true);
+                    }
+                });
+            }
+            scope.subpropertyMap.set(prop.name,new PropertyDeclareAPIModel(childProp, prop));
+        });
         scope.expandAndCollapse = (): void => {
             if (!scope.expanded) {
                 this.initDataOnScope(scope, $attr);
@@ -130,6 +157,65 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
                 || scope.onValueChange(property.name, (property.simpleType || property.type)));
             return value;
         };
+
+        scope.onEnableTosca = (toscaFlag:boolean,key:string):void => {
+            scope.showToscaFunction.set(key,toscaFlag);
+            scope.valueObjRef[key] = "";
+            if (!toscaFlag) {
+                if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                    let subToscaFunctionList : Array<SubPropertyToscaFunction> = [];
+                    scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => {
+                        if (SubPropertyToscaFunction.subPropertyPath.toString() != key) {
+                            subToscaFunctionList.push(SubPropertyToscaFunction);
+                        }
+                    });
+                    scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList;
+                }
+            }
+        };
+
+        scope.verifyTosca = (propName:string) : boolean => {
+            return scope.showToscaFunction.get(propName);
+        }
+
+        scope.getSubProperty = (propertyName: string) : PropertyDeclareAPIModel => {
+            return scope.subpropertyMap.get(propertyName);
+        }
+
+        scope.getToscaPathValue = (propertyName: string) : Array<string> => {
+            const parentObj : PropertyDeclareAPIModel = scope.subpropertyMap.get(propertyName);
+            if (parentObj.input instanceof DerivedFEProperty) {
+                return parentObj.input.toscaPath;
+            }
+            return [propertyName];
+        }
+
+        scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key:string): void => {
+            let toscaPath = key;
+            scope.valueObjRef[key] = "";
+            if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                let toscaFlag : boolean = true
+                scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+                    if (SubPropertyToscaFunction.subPropertyPath.toString() == toscaPath) {
+                        SubPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                        toscaFlag = false;
+                        return;
+                    }
+                });
+                if (toscaFlag) {
+                    let subPropertyToscaFunction = new SubPropertyToscaFunction();
+                    subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                    subPropertyToscaFunction.subPropertyPath = [toscaPath];
+                    scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction);
+                }
+            } else {
+                let subPropertyToscaFunction = new SubPropertyToscaFunction();
+                subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                subPropertyToscaFunction.subPropertyPath = [toscaPath];
+                scope.parentProperty.subPropertyToscaFunctions = [subPropertyToscaFunction];
+            }
+        }
+
     }
     // public types=Utils.Constants.PROPERTY_DATA.TYPES;
 
@@ -191,4 +277,4 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
     }
 }
 
-DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils'];
+DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils','PropertiesUtils'];
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
index 1455f2742f..109c9a9ec9 100644
--- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
@@ -15,12 +15,13 @@
   -->
     
 <div class="dt-list">
-    <div data-ng-repeat="i in getNumber(valueObjRef.length) track by $index" class="dt-list-item">
+    <div data-ng-if="valueObjRef.length > 0" data-ng-repeat="i in getNumber(valueObjRef.length) track by $index" class="dt-list-item">
         <span class="delete-dt-list-item" data-ng-click="deleteListItem($index)"></span>
         <div data-ng-if="isSchemaTypeDataType">
             <fields-structure value-obj-ref="valueObjRef[$index]"
                             type-name="schemaProperty.type"
                             parent-form-obj="parentFormObj"
+                            parent-property="parentProperty"
                             fields-prefix-name="fieldsPrefixName+''+$index"
                             types="types"
                             read-only="readOnly"></fields-structure>
@@ -28,7 +29,7 @@
         <div data-ng-if="!isSchemaTypeDataType">
             <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}"
                 ng-if="schemaProperty.type !== 'map'">
-                <form class="temp-form" data-ng-if="isService">
+                <form class="temp-form" data-ng-if="isService && complexToscapath == null">
                     <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index] == false}}" data-ng-click="onEnableTosca(false,$index)"/> 
                     Value
                     <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index]}}" data-ng-click="onEnableTosca(true,$index)" /> 
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
index 40a29da5fb..18c46b4bac 100644
--- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
@@ -47,6 +47,7 @@ export interface ITypeListScope extends ng.IScope {
     constraints:string[];
     types:DataTypesMap;
     isService:boolean;
+    complexToscapath: string;
 
     getValidationPattern(type:string):RegExp;
     validateIntRange(value:string):boolean;
@@ -85,7 +86,8 @@ export class TypeListDirective implements ng.IDirective {
         maxLength: '=',
         constraints: '=',
         types: '=',
-        isService: '='
+        isService: '=',
+        complexToscapath: '='
     };
 
     restrict = 'E';
@@ -123,22 +125,26 @@ export class TypeListDirective implements ng.IDirective {
     link = (scope:ITypeListScope, element:any, $attr:any) => {
         scope.propertyNameValidationPattern = this.PropertyNameValidationPattern;
         scope.stringSchema = this.stringSchema;
-        if (scope.valueObjRef == null || scope.valueObjRef.length == 0) {
+        if ((scope.valueObjRef == null || scope.valueObjRef.length == 0) && scope.complexToscapath == null) {
             scope.valueObjRef = [];
             scope.valueObjRef.push("");
         }
-        scope.showToscaFunction = new Array(scope.valueObjRef.length);
-        scope.valueObjRef.forEach((value, index) => {
-            scope.showToscaFunction[index] = false;
-            let key : string = index.toString();
-            if (scope.parentProperty.subPropertyToscaFunctions != null) {
-                scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
-                    if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
-                        scope.showToscaFunction[index] = true;
-                    }
-                });
-            }
-        });
+        if (scope.valueObjRef != null && scope.valueObjRef.length > 0) {
+            scope.showToscaFunction = new Array(scope.valueObjRef.length);
+            scope.valueObjRef.forEach((value, index) => {
+                scope.showToscaFunction[index] = false;
+                if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                    let key : string = index.toString();
+                    scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+                        if (SubPropertyToscaFunction.subPropertyPath.toString() == key) {
+                            scope.showToscaFunction[index] = true;
+                            return;
+                        }
+                    });
+                }
+            });
+        }
+        
         //reset valueObjRef when schema type is changed
         scope.$watchCollection('schemaProperty.type', (newData:any):void => {
             scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
@@ -174,6 +180,7 @@ export class TypeListDirective implements ng.IDirective {
                 }
             }
             scope.valueObjRef.push(newVal);
+            scope.showToscaFunction = scope.showToscaFunction || [];
             scope.showToscaFunction.push(false);
             scope.listNewItem.value = "";
         };
@@ -214,7 +221,7 @@ export class TypeListDirective implements ng.IDirective {
                 if (scope.parentProperty.subPropertyToscaFunctions != null) {
                     let subToscaFunctionList : Array<SubPropertyToscaFunction> = [];
                     scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => {
-                        if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) == -1) {
+                        if (SubPropertyToscaFunction.subPropertyPath.toString() != key) {
                             subToscaFunctionList.push(SubPropertyToscaFunction);
                         }
                     });
@@ -226,21 +233,26 @@ export class TypeListDirective implements ng.IDirective {
         scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, index:number): void => {
             let key:string = index.toString();
             if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                let toscaFlag : boolean = true;
                 scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
-                    if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+                    if (SubPropertyToscaFunction.subPropertyPath.toString() == key) {
                         SubPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                        toscaFlag = false;
                         return;
                     }
                 });
-
-            }
-            if (scope.parentProperty.subPropertyToscaFunctions == null){
-                scope.parentProperty.subPropertyToscaFunctions = [];
+                if (toscaFlag) {
+                    let subPropertyToscaFunction = new SubPropertyToscaFunction();
+                    subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                    subPropertyToscaFunction.subPropertyPath = [key];
+                    scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction);
+                }
+            } else {  
+                let subPropertyToscaFunction = new SubPropertyToscaFunction();
+                subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                subPropertyToscaFunction.subPropertyPath = [key];
+                scope.parentProperty.subPropertyToscaFunctions = [subPropertyToscaFunction];
             }
-            let subPropertyToscaFunction = new SubPropertyToscaFunction();
-            subPropertyToscaFunction.toscaFunction = toscaGetFunction;
-            subPropertyToscaFunction.subPropertyPath = [key];
-            scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction);
         }
 
     };
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index f53f5cf205..fad6838d01 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -41,7 +41,7 @@
         </div>
         <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}">
             <label class="i-sdc-form-label required">Value</label>
-            <form class="temp-form" data-ng-if="isService">
+            <form class="temp-form" data-ng-if="isService && complexToscapath == null">
                 <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index] == false}}" data-ng-click="onEnableTosca(false,$index)"/>
                 Value
                 <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index]}}" data-ng-click="onEnableTosca(true,$index)" ng-disabled="mapKeys[$index] == '' || mapKeys[$index] == null"/>
@@ -120,7 +120,7 @@
     </div>
     <div class="add-map-item" data-ng-class="{'schema-data-type':isSchemaTypeDataType}" data-ng-if="showAddBtn">
         <div class="add-btn" data-tests-id="add-map-item"
-             data-ng-class="{'disabled': readOnly || !schemaProperty.type || mapKeys.indexOf('')>-1 || !isMapKeysUnique}"
+             data-ng-class="{'disabled': readOnly || !isMapKeysUnique}"
              data-ng-click="addMapItemFields()" title="{{'PROPERTY_EDIT_MAP_ADD_ITEM' | translate}}">Add</div>
     </div>
 </div>
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
index 098b28936b..875a49cbd2 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
@@ -49,6 +49,7 @@ export interface ITypeMapScope extends ng.IScope {
     showToscaFunction: boolean[];
     types: DataTypesMap;
     isService: boolean;
+    complexToscapath: string;
 
     getValidationPattern(type: string): RegExp;
     validateIntRange(value: string): boolean;
@@ -77,7 +78,8 @@ export class TypeMapDirective implements ng.IDirective {
         showAddBtn: '=?',
         parentProperty: '=',
         types: '=',
-        isService: '='
+        isService: '=',
+        complexToscapath: '='
     };
 
     restrict = 'E';
@@ -182,26 +184,30 @@ export class TypeMapDirective implements ng.IDirective {
             const currentKey = currentKeySet[index];
             const existingKeyIndex = currentKeySet.indexOf(newKey);
             if (existingKeyIndex > -1 && existingKeyIndex != index) {
-                scope.parentFormObj[fieldName].$setValidity('keyExist', false);
+                if (scope.parentFormObj != null) {
+                    scope.parentFormObj[fieldName].$setValidity('keyExist', false);
+                }
                 scope.isMapKeysUnique = false;
                 return;
             }
-
-            scope.parentFormObj[fieldName].$setValidity('keyExist', true);
-            scope.isMapKeysUnique = true;
-            if (!scope.parentFormObj[fieldName].$invalid) {
-                // To preserve the order of the keys, delete each one and recreate
-                const newObj = {};
-                angular.copy(scope.valueObjRef, newObj);
-                angular.forEach(newObj, function(value: any, key: string) {
-                    delete scope.valueObjRef[key];
-                    if (key == currentKey) {
-                        scope.valueObjRef[newKey] = value;
-                    } else {
-                        scope.valueObjRef[key] = value;
-                    }
-                });
+            if (scope.parentFormObj != null) {
+                scope.parentFormObj[fieldName].$setValidity('keyExist', true);
+                if (!scope.parentFormObj[fieldName].$invalid) {
+                    // To preserve the order of the keys, delete each one and recreate
+                    const newObj = {};
+                    angular.copy(scope.valueObjRef, newObj);
+                    angular.forEach(newObj, function(value: any, key: string) {
+                        delete scope.valueObjRef[key];
+                        if (key == currentKey) {
+                            scope.valueObjRef[newKey] = value;
+                        } else {
+                            scope.valueObjRef[key] = value;
+                        }
+                    });
+                }
             }
+            scope.isMapKeysUnique = true;
+            
         };
 
         scope.deleteMapItem = (index: number): void => {
@@ -233,7 +239,7 @@ export class TypeMapDirective implements ng.IDirective {
                 if (scope.parentProperty.subPropertyToscaFunctions != null) {
                     const subToscaFunctionList: SubPropertyToscaFunction[] = [];
                     scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => {
-                        if (SubPropertyToscaFunction.subPropertyPath.indexOf(scope.mapKeys[flagIndex]) == -1) {
+                        if (SubPropertyToscaFunction.subPropertyPath.toString() != scope.mapKeys[flagIndex]) {
                             subToscaFunctionList.push(SubPropertyToscaFunction);
                         }
                     });
@@ -242,24 +248,30 @@ export class TypeMapDirective implements ng.IDirective {
             }
         };
 
-        scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key: string): void => {
+        scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, index:string): void => {
+            let key:string = index;
             if (scope.parentProperty.subPropertyToscaFunctions != null) {
-                scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction) => {
-                    if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+                let toscaFlag : boolean = true;
+                scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+                    if (SubPropertyToscaFunction.subPropertyPath.toString() == key) {
                         SubPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                        toscaFlag = false;
                         return;
                     }
                 });
-
-            }
-            if (scope.parentProperty.subPropertyToscaFunctions == null) {
-                scope.parentProperty.subPropertyToscaFunctions = [];
+                if (toscaFlag) {
+                    let subPropertyToscaFunction = new SubPropertyToscaFunction();
+                    subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                    subPropertyToscaFunction.subPropertyPath = [key];
+                    scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction);
+                }
+            } else {  
+                let subPropertyToscaFunction = new SubPropertyToscaFunction();
+                subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                subPropertyToscaFunction.subPropertyPath = [key];
+                scope.parentProperty.subPropertyToscaFunctions = [subPropertyToscaFunction];
             }
-            const subPropertyToscaFunction = new SubPropertyToscaFunction();
-            subPropertyToscaFunction.toscaFunction = toscaGetFunction;
-            subPropertyToscaFunction.subPropertyPath = [key];
-            scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction);
-        };
+        }
 
         scope.addMapItemFields = (): void => {
             if (!scope.valueObjRef) {