Constraints in data type view

Develop all necessary changes in the UI to allow managing data type constraints

Issue-ID: SDC-4331
Signed-off-by: franciscovila <javier.paradela.vila@est.tech>
Change-Id: I337438ba088e4f2f4978a1aff2408eda8157b892

7 files changed, 86 insertions, 11 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
index 525bf884f0..2fb8b64e54 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
@@ -52,10 +52,12 @@ export class ConstraintsComponent implements OnInit {
       }
     }
     this.constraints = new Array();
-    if (changes.propertyConstraints && changes.propertyConstraints.currentValue) {
-      changes.propertyConstraints.currentValue.forEach((constraint: any) => {
-        this.constraints.push(this.getConstraintFromPropertyBEModel(constraint));
-      });
+    if(changes.propertyConstraints) {
+      if (changes.propertyConstraints.currentValue) {
+        changes.propertyConstraints.currentValue.forEach((constraint: any) => {
+            this.constraints.push(this.getConstraintFromPropertyBEModel(constraint));
+        });
+      }
     }
   }
 
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html
index af72e6d6d6..a2e4f48531 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html
@@ -40,7 +40,18 @@
                 [readOnly]="readOnly">
       </textarea>
     </div>
-    <div class="default-value-container i-sdc-form-item" *ngIf="showDefaultValue()">
+      <div class="constraints-section i-sdc-form-item">
+          <label class="i-sdc-form-label" *ngIf="property ? property.constraints: false">Constraints</label>
+          <ng-container>
+              <app-constraints [propertyConstraints]="property ? property.constraints ? property.constraints : null : null"
+                               [isViewOnly]="readOnly"
+                               [propertyType]="property ? property.type : typeForm.value"
+                               (onConstraintChange)="onConstraintChange($event)">
+              </app-constraints>
+          </ng-container>
+      </div>
+
+      <div class="default-value-container i-sdc-form-item" *ngIf="showDefaultValue()">
       <label class="i-sdc-form-label">{{'PROPERTY_DEFAULT_VALUE_LABEL' | translate}}</label>
       <ng-container *ngIf="!readOnly">
         <input type="checkbox" formControlName="hasDefaultValue" [attr.disabled]="readOnly ? readOnly : null"/> {{'PROPERTY_SET_DEFAULT_VALUE_MSG' | translate}}
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.spec.ts
index 7e2c312792..fdb6eefcbf 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.spec.ts
@@ -25,7 +25,7 @@ import {AddPropertyComponent} from './add-property.component';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {TranslateModule} from "../../../../shared/translator/translate.module";
 import {UiElementsModule} from "../../../../components/ui/ui-elements.module";
-import {Component, Input} from "@angular/core";
+import {Component, Input, NO_ERRORS_SCHEMA} from "@angular/core";
 import {DataTypeModel} from "../../../../../models/data-types";
 import {SchemaPropertyGroupModel} from "../../../../../models/schema-property";
 import {DataTypeService} from "../../../../services/data-type.service";
@@ -68,6 +68,7 @@ describe('AddPropertyComponent', () => {
                 TranslateModule,
                 UiElementsModule
             ],
+            schemas: [NO_ERRORS_SCHEMA],
             providers: [
                 {provide: DataTypeService, useValue: dataTypeServiceMock},
                 {provide: TranslateService, useValue: translateServiceMock}
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts
index d4d88b5deb..56db2cefeb 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts
@@ -42,6 +42,7 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
 
     @Output() onValidityChange: EventEmitter<PropertyValidationEvent> = new EventEmitter<PropertyValidationEvent>();
 
+    private validConstraints: boolean = true;
     private valueChangesSub: Subscription;
     private descriptionForm: FormControl = new FormControl(undefined);
     private requiredForm: FormControl = new FormControl(false, Validators.required);
@@ -53,8 +54,10 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
         }
         return null;
     });
+
     hasDefaultValueForm: FormControl = new FormControl(false, Validators.required);
     defaultValueForm: FormControl = new FormControl(undefined);
+    constraintsForm: FormControl = new FormControl(undefined);
     formGroup: FormGroup = new FormGroup({
         'name': this.nameForm,
         'description': this.descriptionForm,
@@ -63,6 +66,7 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
         'schema': this.schemaForm,
         'defaultValue': this.defaultValueForm,
         'hasDefaultValue': this.hasDefaultValueForm,
+        'constraints': this.constraintsForm,
     });
 
     isLoading: boolean = false;
@@ -99,6 +103,9 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
         this.showSchema = this.typeNeedsSchema();
         this.updateDataType();
         this.resetDefaultValue();
+        if (this.property) {
+            this.property.constraints = [];
+        }
     }
 
     private updateDataType(): void {
@@ -116,6 +123,7 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
         this.showSchema = this.typeNeedsSchema();
         this.requiredForm.setValue(this.property.required);
         this.schemaForm.setValue(this.property.schemaType);
+        this.constraintsForm.setValue(this.property.constraints);
         this.initDefaultValueForm();
     }
 
@@ -156,7 +164,7 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
     private emitValidityChange(): void {
         const isValid: boolean = this.formGroup.valid;
         this.onValidityChange.emit({
-            isValid: isValid,
+            isValid: isValid && this.validConstraints,
             property: isValid ? this.buildPropertyFromForm() : undefined
         });
     }
@@ -165,6 +173,7 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
         const property = new PropertyBEModel();
         property.name = this.nameForm.value;
         property.type = this.typeForm.value;
+        property.constraints = this.constraintsForm.value;
         if (this.schemaForm.value) {
             property.schemaType = this.schemaForm.value;
         }
@@ -225,6 +234,22 @@ export class AddPropertyComponent implements OnInit, OnDestroy {
         return new SchemaPropertyGroupModel(schemaProperty);
     }
 
+    onConstraintChange = (constraints: any): void => {
+        if (this.property) {
+            if (!this.property.constraints) {
+                this.property.constraints = [];
+            }
+            this.property.constraints = constraints.constraints;
+        }
+        else {
+            this.constraintsForm.setValue(constraints.constraints);
+        }
+        this.validConstraints = constraints.valid;
+        this.onValidityChange.emit({
+            isValid: constraints.valid,
+            property: constraints.valid ? this.buildPropertyFromForm() : undefined
+        });
+    }
 }
 
 export class PropertyValidationEvent {
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts
index bcc5fe9c28..83651fc73c 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts
@@ -32,6 +32,7 @@ import {TranslateService} from "../../../shared/translator/translate.service";
 import {AddPropertyComponent, PropertyValidationEvent} from "./add-property/add-property.component";
 import {IWorkspaceViewModelScope} from "../../../../view-models/workspace/workspace-view-model";
 import {SdcUiServices} from "onap-ui-angular/dist";
+import {ToscaTypeHelper} from "../../../../utils/tosca-type-helper";
 
 @Component({
     selector: 'app-type-workspace-properties',
@@ -192,14 +193,47 @@ export class TypeWorkspacePropertiesComponent implements OnInit {
         this.properties = properties.map(value => {
             const property = new PropertyBEModel(value);
             if (property.defaultValue) {
-                property.defaultValue = JSON.parse(property.defaultValue);
+                if (!this.isTypeSimple(property.type) && typeof property.defaultValue === 'string') {
+                    property.defaultValue = JSON.parse(property.defaultValue);
+                } else {
+                    property.defaultValue = property.defaultValue;
+                }
             }
-
             return property;
         });
         this.filteredProperties = Array.from(this.properties);
         this.sort();
     }
+
+    public isTypeSimple(value:any): boolean {
+        return ToscaTypeHelper.isTypeSimple(value);
+    }
+
+    onConstraintChange = (constraints: any): void => {
+        if (!this.$scope.invalidMandatoryFields) {
+            this.$scope.footerButtons[0].disabled = !constraints.valid;
+        } else {
+            this.$scope.footerButtons[0].disabled = this.$scope.invalidMandatoryFields;
+        }
+        if (!constraints.constraints || constraints.constraints.length == 0) {
+            this.$scope.editPropertyModel.property.propertyConstraints = null;
+            this.$scope.editPropertyModel.property.constraints = null;
+            return;
+        }
+        this.$scope.editPropertyModel.property.propertyConstraints = this.serializePropertyConstraints(constraints.constraints);
+        this.$scope.editPropertyModel.property.constraints = constraints.constraints;
+    }
+
+    private serializePropertyConstraints(constraints: any[]): string[] {
+        if (constraints) {
+            let stringConstraints = new Array();
+            constraints.forEach((constraint) => {
+                stringConstraints.push(JSON.stringify(constraint));
+            })
+            return stringConstraints;
+        }
+        return null;
+    }
 }
 
 interface TableHeader {
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts
index e7ddb46602..c517dd22c8 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts
@@ -39,6 +39,7 @@ import {ModalService} from "../../services/modal.service";
 import {AddPropertyComponent} from './type-workspace-properties/add-property/add-property.component';
 import {InterfaceOperationHandlerModule} from "../composition/interface-operatons/operation-creator/interface-operation-handler.module";
 import {AutoCompleteModule} from "onap-ui-angular/dist/autocomplete/autocomplete.module";
+import {ConstraintsModule} from "../properties-assignment/constraints/constraints.module";
 
 @NgModule({
    imports: [
@@ -52,7 +53,8 @@ import {AutoCompleteModule} from "onap-ui-angular/dist/autocomplete/autocomplete
         InterfaceOperationHandlerModule,
         NgxDatatableModule,
         SvgIconModule,
-        AutoCompleteModule
+        AutoCompleteModule,
+       ConstraintsModule
     ],
     declarations: [
         TypeWorkspaceComponent,
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index 3a27801315..7e18d0a4ba 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -88,7 +88,7 @@ export class DataTypeService {
     }
 
     public createProperty(id: string, property: PropertyBEModel): Observable<PropertyBEModel> {
-        const url = `${this.dataTypeUrl}/${id}/properties`
+        const url = `${this.dataTypeUrl}/${id}/properties`;
         return this.httpClient.post<PropertyBEModel>(url, property);
     }