Support a custom yaml value in tosca function

Allows to add a custom YAML value to properties in the TOSCA function
feature.

Change-Id: I15e65088a18537d9832428717be826ac0ef6049a
Issue-ID: SDC-4099
Signed-off-by: André Schmid <andre.schmid@est.tech>

9 files changed, 234 insertions, 5 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
index 70c9303c14..8e9be8b9a0 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
@@ -55,7 +55,7 @@ export class PropertiesUtils {
                     newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
                     this.dataTypeService.checkForCustomBehavior(newFEProp);
 
-                    if (newFEProp.isToscaGetFunction()) {
+                    if (newFEProp.isToscaFunction()) {
                         return;
                     }
                     //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.spec.ts
index 5c9af47361..199f73349e 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.spec.ts
@@ -27,6 +27,7 @@ import {ToscaFunctionComponent} from "../tosca-function.component";
 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";
 
 describe('ToscaConcatFunctionComponent', () => {
     let component: ToscaConcatFunctionComponent;
@@ -34,7 +35,7 @@ describe('ToscaConcatFunctionComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [ToscaConcatFunctionComponent, ToscaFunctionComponent, ToscaGetFunctionComponent],
+            declarations: [ToscaConcatFunctionComponent, ToscaFunctionComponent, ToscaGetFunctionComponent, YamlFunctionComponent],
             imports: [
                 FormsModule,
                 ReactiveFormsModule,
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 e98f688eef..f93973cb16 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
@@ -36,6 +36,9 @@
                               [functionType]="toscaFunctionTypeForm.value"
                               (onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function>
     </div>
+    <div *ngIf="isYamlFunctionSelected()">
+      <app-yaml-function [yamlFunction]="toscaFunction" (onValidityChange)="onYamlFunctionValidityChange($event)"></app-yaml-function>
+    </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>
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 076e1182ad..ae778006ce 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
@@ -30,6 +30,7 @@ import {ToscaGetFunctionValidationEvent} from "./tosca-get-function/tosca-get-fu
 import {ToscaFunction} from "../../../../models/tosca-function";
 import {ToscaConcatFunctionValidationEvent} from "./tosca-concat-function/tosca-concat-function.component";
 import {PROPERTY_TYPES} from "../../../../utils/constants";
+import {YamlFunctionValidationEvent} from "./yaml-function/yaml-function.component";
 
 @Component({
     selector: 'tosca-function',
@@ -75,7 +76,7 @@ export class ToscaFunctionComponent implements OnInit {
                 this.onValidFunction.emit(this.toscaFunctionForm.value);
             }
         });
-        this.initToscaGetFunction();
+        this.initToscaFunction();
         this.emitValidityChange();
         this.isInitialized = true;
     }
@@ -84,8 +85,8 @@ export class ToscaFunctionComponent implements OnInit {
         return (!this.toscaFunctionForm.value && !this.toscaFunctionTypeForm.value) || this.formGroup.valid;
     }
 
-    private initToscaGetFunction() {
-        if (!this.property.isToscaGetFunction()) {
+    private initToscaFunction() {
+        if (!this.property.isToscaFunction()) {
             return;
         }
         this.toscaFunctionForm.setValue(this.property.toscaFunction);
@@ -99,6 +100,7 @@ export class ToscaFunctionComponent implements OnInit {
         if (this.property.type === PROPERTY_TYPES.STRING) {
             this.toscaFunctions.push(ToscaFunctionType.CONCAT);
         }
+        this.toscaFunctions.push(ToscaFunctionType.YAML);
     }
 
     private resetForm(): void {
@@ -126,6 +128,10 @@ export class ToscaFunctionComponent implements OnInit {
         return this.isGetInputSelected() || this.isGetPropertySelected() || this.isGetAttributeSelected();
     }
 
+    isYamlFunctionSelected(): boolean {
+        return this.formGroup.get('toscaFunctionType').value === ToscaFunctionType.YAML;
+    }
+
     onClearValues() {
         this.resetForm();
     }
@@ -150,6 +156,14 @@ export class ToscaFunctionComponent implements OnInit {
         }
     }
 
+    onYamlFunctionValidityChange(validationEvent: YamlFunctionValidationEvent) {
+        if (validationEvent.isValid) {
+            this.toscaFunctionForm.setValue(validationEvent.value);
+        } else {
+            this.toscaFunctionForm.setValue(undefined);
+        }
+    }
+
     private emitValidityChange() {
         const isValid = this.validate();
         this.onValidityChange.emit({
@@ -157,6 +171,7 @@ export class ToscaFunctionComponent implements OnInit {
             toscaFunction: isValid ? this.toscaFunctionForm.value : undefined
         });
     }
+
 }
 
 export class ToscaFunctionValidationEvent {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts
index 2db76cf544..19cf2fb260 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts
@@ -27,12 +27,14 @@ import { ToscaFunctionComponent } from './tosca-function.component';
 import { SdcUiComponentsModule } from 'onap-ui-angular';
 import { ToscaGetFunctionComponent } from './tosca-get-function/tosca-get-function.component';
 import { ToscaConcatFunctionComponent } from './tosca-concat-function/tosca-concat-function.component';
+import { YamlFunctionComponent } from './yaml-function/yaml-function.component';
 
 @NgModule({
     declarations: [
         ToscaFunctionComponent,
         ToscaGetFunctionComponent,
         ToscaConcatFunctionComponent,
+        YamlFunctionComponent,
     ],
     imports: [
         CommonModule,
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.html
new file mode 100644
index 0000000000..ac51d413be
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.html
@@ -0,0 +1,35 @@
+<!--
+  ~ -
+  ~  ============LICENSE_START=======================================================
+  ~  Copyright (C) 2022 Nordix Foundation.
+  ~  ================================================================================
+  ~  Licensed under the Apache License, Version 2.0 (the "License");
+  ~  you may not use this file except in compliance with the License.
+  ~  You may obtain a copy of the License at
+  ~
+  ~       http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~  Unless required by applicable law or agreed to in writing, software
+  ~  distributed under the License is distributed on an "AS IS" BASIS,
+  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~  See the License for the specific language governing permissions and
+  ~  limitations under the License.
+  ~
+  ~  SPDX-License-Identifier: Apache-2.0
+  ~  ============LICENSE_END=========================================================
+  -->
+
+<div>
+  <div [formGroup]="formGroup">
+    <div>
+      <textarea class="yaml-text-area"
+                [formControl]="yamlValueForm"
+                [class.input-error]="yamlValueForm.invalid && (yamlValueForm.dirty || yamlValueForm.touched)"></textarea>
+      <div *ngIf="yamlValueForm.invalid && (yamlValueForm.dirty || yamlValueForm.touched)">
+        <div *ngIf="yamlValueForm.errors && yamlValueForm.errors['invalidYaml']" class="error">
+          {{'YAML_FUNCTION_INVALID_YAML_ERROR' | translate}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.less
new file mode 100644
index 0000000000..7cbcbc4985
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.less
@@ -0,0 +1,40 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+@import "../../../../../../assets/styles/mixins.less";
+
+.yaml-text-area {
+    width: 100%;
+    min-height: 250px;
+    max-height: 400px;
+    font-size: 12px;
+}
+
+.error {
+    color: @func_color_q;
+}
+
+.input-error {
+    .error();
+    border: solid 1px @func_color_q;
+    outline: none;
+    box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.spec.ts
new file mode 100644
index 0000000000..500fe643c8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.spec.ts
@@ -0,0 +1,53 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {YamlFunctionComponent} from './yaml-function.component';
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {TranslateModule} from "../../../../shared/translator/translate.module";
+
+describe('YamlFunctionComponent', () => {
+    let component: YamlFunctionComponent;
+    let fixture: ComponentFixture<YamlFunctionComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [YamlFunctionComponent],
+            imports: [
+                FormsModule,
+                ReactiveFormsModule,
+                TranslateModule
+            ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(YamlFunctionComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.ts
new file mode 100644
index 0000000000..e0272270d1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.ts
@@ -0,0 +1,80 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {YamlFunction} from "../../../../../models/yaml-function";
+import {FormControl, FormGroup, Validators, AbstractControl, ValidationErrors, ValidatorFn} from "@angular/forms";
+import * as jsYaml from 'js-yaml';
+
+@Component({
+    selector: 'app-yaml-function',
+    templateUrl: './yaml-function.component.html',
+    styleUrls: ['./yaml-function.component.less']
+})
+export class YamlFunctionComponent implements OnInit {
+
+    @Input() yamlFunction: YamlFunction;
+    @Output() onValidityChange: EventEmitter<YamlFunctionValidationEvent> = new EventEmitter<YamlFunctionValidationEvent>();
+
+    yamlValueForm: FormControl = new FormControl('', [Validators.minLength(1), YamlValidator()]);
+    formGroup: FormGroup = new FormGroup(
+        {
+            'value': this.yamlValueForm
+        }
+    );
+
+    ngOnInit() {
+        this.formGroup.valueChanges.subscribe(() => {
+            this.onValidityChange.emit({
+                isValid: this.formGroup.valid,
+                value: this.formGroup.valid ? this.buildYamlFunctionFromForm() : undefined
+            });
+        });
+        if (this.yamlFunction) {
+            this.yamlValueForm.setValue(this.yamlFunction.value);
+        }
+    }
+
+    private buildYamlFunctionFromForm(): YamlFunction {
+        const yamlFunction = new YamlFunction();
+        yamlFunction.value = this.yamlValueForm.value;
+        return yamlFunction;
+    }
+}
+
+export class YamlFunctionValidationEvent {
+    isValid: boolean;
+    value: YamlFunction;
+}
+
+export function YamlValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        if (!control.value) {
+            return {invalidYaml: {value: control.value}};
+        }
+        try {
+            jsYaml.load(control.value);
+            return null;
+        } catch (e) {
+            return {invalidYaml: {value: control.value}};
+        }
+    };
+}
\ No newline at end of file