SHIBUI-907 Fixed issue with validation messages

TIER · Jan 23, 2019 · 69fd222 · 69fd222
1 parent 17c0cfe
commit 69fd222
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 16 deletions.
diff --git a/backend/src/main/resources/dynamic-http-metadata-provider.schema.json b/backend/src/main/resources/dynamic-http-metadata-provider.schema.json
@@ -598,8 +598,7 @@
                         "certificateFile": {
                             "title": "label.certificate-file",
                             "description": "tooltip.certificate-file",
-                            "type": "string",
-                            "default": ""
+                            "type": "string"
                         }
                     },
                     "anyOf": [

diff --git a/ui/src/app/metadata/metadata.module.ts b/ui/src/app/metadata/metadata.module.ts
@@ -9,7 +9,8 @@ import { MetadataRoutingModule } from './metadata.routing';
 import { ProviderModule } from './provider/provider.module';
 import { I18nModule } from '../i18n/i18n.module';
 import { CustomWidgetRegistry } from '../schema-form/registry';
-import { WidgetRegistry } from 'ngx-schema-form';
+import { WidgetRegistry, SchemaValidatorFactory } from 'ngx-schema-form';
+import { CustomSchemaValidatorFactory } from '../schema-form/service/schema-validator';
 
 
 @NgModule({
@@ -23,7 +24,11 @@ import { WidgetRegistry } from 'ngx-schema-form';
         I18nModule
     ],
     providers: [
-        { provide: WidgetRegistry, useClass: CustomWidgetRegistry }
+        { provide: WidgetRegistry, useClass: CustomWidgetRegistry },
+        {
+            provide: SchemaValidatorFactory,
+            useClass: CustomSchemaValidatorFactory
+        }
     ],
     declarations: [
         MetadataPageComponent

diff --git a/ui/src/app/schema-form/model/messages.ts b/ui/src/app/schema-form/model/messages.ts
@@ -0,0 +1,3 @@
+export const HARD_CODED_REQUIRED_MSG = RegExp('Missing required property');
+
+export const REQUIRED_MSG_OVERRIDE = 'message.required';
diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { SchemaFormModule } from 'ngx-schema-form';
+import { SchemaFormModule, SchemaValidatorFactory } from 'ngx-schema-form';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 
@@ -23,6 +23,7 @@ import { CustomObjectWidget } from './widget/object/object.component';
 import { CustomRadioComponent } from './widget/radio/radio.component';
 import { InlineObjectListComponent } from './widget/array/inline-obj-list.component';
 import { InlineObjectComponent } from './widget/object/inline-obj.component';
+import { CustomSchemaValidatorFactory } from './service/schema-validator';
 
 export const COMPONENTS = [
     BooleanRadioComponent,

diff --git a/ui/src/app/schema-form/service/schema-validator.ts b/ui/src/app/schema-form/service/schema-validator.ts
@@ -0,0 +1,19 @@
+import * as ZSchema from 'z-schema';
+import { ZSchemaValidatorFactory } from 'ngx-schema-form';
+
+export class CustomSchemaValidatorFactory extends ZSchemaValidatorFactory {
+
+    protected zschema;
+
+    constructor() {
+        super();
+        this.createSchemaValidator();
+    }
+
+    private createSchemaValidator() {
+        this.zschema = new ZSchema({
+            breakOnFirstError: false
+        });
+    }
+}
+
diff --git a/ui/src/app/schema-form/service/schema.service.ts b/ui/src/app/schema-form/service/schema.service.ts
@@ -31,7 +31,8 @@ export class SchemaService {
                 Object
                     .keys(condition.properties)
                     .some(
-                        key => values.hasOwnProperty(key) ? condition.properties[key].enum[0] === values[key] : false
+                        key => values.hasOwnProperty(key) && condition.properties[key].enum ?
+                            condition.properties[key].enum[0] === values[key] : false
                     )
             );
             currentConditions.forEach(el => {

diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -42,7 +42,7 @@
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="error">error</translate-i18n>
+            <translate-i18n [key]="getError(error)">error</translate-i18n>
         </ng-container>
     </small>
     <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">

diff --git a/ui/src/app/schema-form/widget/select/select.component.ts b/ui/src/app/schema-form/widget/select/select.component.ts
@@ -4,6 +4,7 @@ import { SelectWidget } from 'ngx-schema-form';
 import { SchemaService } from '../../service/schema.service';
 import { map, shareReplay, startWith } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
+import { HARD_CODED_REQUIRED_MSG } from '../../model/messages';
 
 @Component({
     selector: 'select-component',
@@ -43,7 +44,7 @@ export class CustomSelectComponent extends SelectWidget implements AfterViewInit
         }
 
         this.errorSub = this.control.valueChanges.pipe(startWith(this.control.value)).subscribe(v => {
-            if (!v && this.required && !this.errorMessages.some(msg => !!msg.toLowerCase().match('required').length)) {
+            if (!v && this.required && !this.errorMessages.some(msg => HARD_CODED_REQUIRED_MSG.test(msg))) {
                 this.errorMessages.push('message.required');
             }
         });
@@ -56,4 +57,8 @@ export class CustomSelectComponent extends SelectWidget implements AfterViewInit
     get required(): boolean {
         return this.widgetService.isRequired(this.formProperty);
     }
+
+    getError(error: string): string {
+        return HARD_CODED_REQUIRED_MSG.test(error) ? 'message.required' : error;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
@@ -13,6 +13,7 @@
         validate="true"
         [attr.readonly]="schema.readOnly?true:null"
         class="text-widget.id textline-widget form-control"
+        [class.is-invalid]="control.touched && !control.value && errorMessages.length"
         [attr.type]="this.getInputType()"
         [attr.id]="id"
         [formControl]="control"
@@ -25,7 +26,7 @@
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="error">error</translate-i18n>
+            <translate-i18n [key]="getError(error)">error</translate-i18n>
         </ng-container>
     </small>
     <small class="form-text text-secondary"

diff --git a/ui/src/app/schema-form/widget/string/string.component.ts b/ui/src/app/schema-form/widget/string/string.component.ts
@@ -5,6 +5,8 @@ import { SchemaService } from '../../service/schema.service';
 import { startWith } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 
+import { HARD_CODED_REQUIRED_MSG, REQUIRED_MSG_OVERRIDE } from '../../model/messages';
+
 @Component({
     selector: 'custom-string',
     templateUrl: `./string.component.html`,
@@ -22,9 +24,16 @@ export class CustomStringComponent extends StringWidget implements AfterViewInit
 
     ngAfterViewInit(): void {
         super.ngAfterViewInit();
-        this.errorSub = this.control.valueChanges.pipe(startWith(this.control.value)).subscribe(v => {
-            if (!v && this.required && !this.errorMessages.some(msg => !!msg.toLowerCase().match('required').length)) {
-                this.errorMessages.push('message.required');
+        let listener = this.formProperty.parent ? this.formProperty.parent : this.control;
+        this.errorSub = listener.valueChanges.pipe(startWith(listener.value)).subscribe(v => {
+            if (!this.control.value
+                    && this.required
+                    && !this.errorMessages.some(msg => HARD_CODED_REQUIRED_MSG.test(msg))
+                    && this.errorMessages.indexOf(REQUIRED_MSG_OVERRIDE) < 0) {
+                this.errorMessages.push(REQUIRED_MSG_OVERRIDE);
+            }
+            if (!this.required) {
+                this.errorMessages = this.errorMessages.filter(e => e !== REQUIRED_MSG_OVERRIDE);
             }
         });
     }
@@ -38,4 +47,8 @@ export class CustomStringComponent extends StringWidget implements AfterViewInit
 
         return req;
     }
+
+    getError(error: string): string {
+        return HARD_CODED_REQUIRED_MSG.test(error) ? REQUIRED_MSG_OVERRIDE : error;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -21,7 +21,7 @@
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="error">error</translate-i18n>
+            <translate-i18n [key]="getError(error)">error</translate-i18n>
         </ng-container>
     </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.ts b/ui/src/app/schema-form/widget/textarea/textarea.component.ts
@@ -4,6 +4,7 @@ import { TextAreaWidget } from 'ngx-schema-form';
 import { SchemaService } from '../../service/schema.service';
 import { Subscription } from 'rxjs';
 import { startWith } from 'rxjs/operators';
+import { HARD_CODED_REQUIRED_MSG } from '../../model/messages';
 
 @Component({
   selector: 'textarea-component',
@@ -22,7 +23,7 @@ export class CustomTextAreaComponent extends TextAreaWidget implements AfterView
     ngAfterViewInit(): void {
         super.ngAfterViewInit();
         this.errorSub = this.control.valueChanges.pipe(startWith(this.control.value)).subscribe(v => {
-            if (!v && this.required && !this.errorMessages.some(msg => !!msg.toLowerCase().match('required').length)) {
+            if (!v && this.required && !this.errorMessages.some(msg => HARD_CODED_REQUIRED_MSG.test(msg))) {
                 this.errorMessages.push('message.required');
             }
         });
@@ -35,4 +36,8 @@ export class CustomTextAreaComponent extends TextAreaWidget implements AfterView
     get required(): boolean {
         return this.widgetService.isRequired(this.formProperty);
     }
+
+    getError(error: string): string {
+        return error.match('required').length ? 'message.required' : error;
+    }
 }
diff --git a/ui/src/assets/schema/provider/filebacked-http-filters.schema.json b/ui/src/assets/schema/provider/filebacked-http-filters.schema.json
@@ -50,15 +50,18 @@
                             "title": "label.certificate-file",
                             "description": "tooltip.certificate-file",
                             "type": "string",
-                            "widget": "textline",
-                            "default": ""
+                            "widget": "textline"
                         }
                     },
                     "anyOf": [
                         {
                             "properties": {
                                 "requireSignedRoot": {
                                     "enum": [ true ]
+                                },
+                                "certificateFile": {
+                                    "minLength": 1,
+                                    "type": "string"
                                 }
                             },
                             "required": [