Allow to edit or clear a TOSCA function value

In the properties assignment view, when a property that has a TOSCA
function value is selected, a button "Clear Value" will show allowing
to clear the property value.
This behaviour was changed to show the TOSCA function button, which,
when clicked, will open the TOSCA function modal with the function
values loaded, allowing to edit or clear the existing value.

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

1 files changed, 4 insertions, 1 deletions

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 1f81ebe425..f0db645b0e 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
@@ -21,7 +21,7 @@
   <loader [display]="isLoading" [loaderDelay]="500" [relative]="true" [size]="'large'"></loader>
   <form class="w-sdc-form">
     <div class="i-sdc-form-item">
-      <label class="i-sdc-form-label required">{{'TOSCA_FUNCTION_LABEL' | translate}}</label>
+      <label class="i-sdc-form-label">{{'TOSCA_FUNCTION_LABEL' | translate}}</label>
       <select [(ngModel)]="toscaGetFunction.functionType" (change)="onToscaFunctionChange()" name="toscaFunctionType">
         <option *ngFor="let toscaFunction of toscaFunctions"
                 [ngValue]="toscaFunction">{{toscaFunction | lowercase}}</option>
@@ -41,6 +41,9 @@
       </select>
     </div>
     <div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div>
+    <div *ngIf="showClearButton()" class="button-container">
+      <button (click)="onClearValues()" class="tlv-btn red ng-star-inserted">{{'TOSCA_FUNCTION_CLEAR_VALUE_BUTTON' | translate}}</button>
+    </div>
   </form>
   <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
 </div>