UI support for default custom function names

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

3 files changed, 38 insertions, 8 deletions

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 a67364cd60..f77af54c77 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
@@ -21,8 +21,12 @@
 
 <div class="component-container">
   <ng-container [formGroup]="formGroup">
-    <label>Custom function name: </label>
-    <input type="text" formControlName="customName" [value]="name" required/><br/><br/>
+    <div *ngIf="!isDefaultCustomFunction" class="i-sdc-form-item">
+      <label>Custom function name: </label>
+      <div class="i-sdc-form-item">
+        <input type="text" formControlName="customName" [value]="name" (input)="name = $event.target.value" required/>
+      </div>
+    </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>
@@ -32,7 +36,7 @@
               <input type="text" [formControlName]="idx" [value]="parameter.value"/><br/>
             </ng-container>
             <ng-container *ngIf="parameter.type !== STRING_FUNCTION_TYPE">
-              <tosca-function [property]="propertyInputList[idx]" [componentInstanceMap]="componentInstanceMap" [allowClear]="false"
+              <tosca-function [property]="propertyInputList[idx]" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" [allowClear]="false"
                               (onValidityChange)="onFunctionValidityChange($event, idx)">
               </tosca-function>
             </ng-container>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts
index 9c3c188711..c64547a9c7 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts
@@ -29,12 +29,19 @@ import {TranslateModule} from "../../../../shared/translator/translate.module";
 import {ToscaGetFunctionComponent} from "../tosca-get-function/tosca-get-function.component";
 import {UiElementsModule} from "../../../../components/ui/ui-elements.module";
 import {YamlFunctionComponent} from "../yaml-function/yaml-function.component";
+import {TopologyTemplateService} from "../../../../services/component-services/topology-template.service";
+import {Observable} from "rxjs/Observable";
+import {defaultCustomFunctionsMock} from "../../../../../../jest/mocks/default-custom-tosca-function.mock";
 
 describe('ToscaCustomFunctionComponent', () => {
     let component: ToscaCustomFunctionComponent;
     let fixture: ComponentFixture<ToscaCustomFunctionComponent>;
+    let topologyTemplateServiceMock: Partial<TopologyTemplateService>;
 
     beforeEach(async(() => {
+        topologyTemplateServiceMock = {
+            getDefaultCustomFunction: jest.fn().mockImplementation(() => Observable.of(defaultCustomFunctionsMock))
+        };
         TestBed.configureTestingModule({
             declarations: [
                 ToscaCustomFunctionComponent,
@@ -47,6 +54,9 @@ describe('ToscaCustomFunctionComponent', () => {
                 ReactiveFormsModule,
                 TranslateModule,
                 UiElementsModule
+            ],
+            providers: [
+                {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock}
             ]
         })
         .compileComponents();
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 f3687880f2..7746d3845f 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,6 +30,7 @@ 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 {CustomToscaFunction} from "../../../../../models/default-custom-functions";
 
 @Component({
     selector: 'app-tosca-custom-function',
@@ -40,10 +41,12 @@ export class ToscaCustomFunctionComponent implements OnInit {
 
     @Input() toscaCustomFunction: ToscaCustomFunction;
     @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
+    @Input() customToscaFunctions: Array<CustomToscaFunction> = [];
+    @Input() name: string;
+    @Input() isDefaultCustomFunction: boolean;
     @Output() onValidFunction: EventEmitter<ToscaCustomFunction> = new EventEmitter<ToscaCustomFunction>();
     @Output() onValidityChange: EventEmitter<ToscaCustomFunctionValidationEvent> = new EventEmitter<ToscaCustomFunctionValidationEvent>();
 
-    name: string = '';
     customFunctionFormName: FormControl = new FormControl('', [Validators.required, Validators.minLength(1)]);
     customParameterFormArray: FormArray = new FormArray([], Validators.minLength(1));
     formGroup: FormGroup = new FormGroup(
@@ -62,12 +65,18 @@ export class ToscaCustomFunctionComponent implements OnInit {
         this.initForm();
     }
 
+    ngOnChanges() {
+        if (this.name && this.isDefaultCustomFunction) {
+            this.customFunctionFormName.setValue(this.name);
+            this.emitOnValidityChange();
+        } else {
+            this.name = "";
+        }
+    }
+
     private initForm(): void {
         this.formGroup.valueChanges.subscribe(() => {
-            this.onValidityChange.emit({
-                isValid: this.formGroup.valid,
-                toscaCustomFunction: this.formGroup.valid ? this.buildCustomFunctionFromForm() : undefined
-            })
+            this.emitOnValidityChange();
             if (this.formGroup.valid) {
                 this.onValidFunction.emit(this.buildCustomFunctionFromForm());
             }
@@ -114,6 +123,13 @@ export class ToscaCustomFunctionComponent implements OnInit {
         return toscaCustomFunction1;
     }
 
+    private emitOnValidityChange() {
+        this.onValidityChange.emit({
+            isValid: this.formGroup.valid,
+            toscaCustomFunction: this.formGroup.valid ? this.buildCustomFunctionFromForm() : undefined
+        })
+    }
+
     addFunction(): void {
         this.propertyInputList.push(this.createProperty());
         this.parameters.push({} as ToscaFunctionParameter);