[ACA-2074] Create Library - title & id validation (#865)

* add i18n string

* render title custom errors

* update form validation

* tests

src/app/dialogs/library/library.dialog.html

@@ -14,9 +14,15 @@
       <mat-hint *ngIf="libraryTitleExists">{{
         'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate
       }}</mat-hint>
+
       <mat-error *ngIf="form.controls['title'].hasError('maxlength')">
         {{ 'LIBRARY.ERRORS.TITLE_TOO_LONG' | translate }}
       </mat-error>
+
+      <mat-error *ngIf="form.controls['title'].errors?.message">
+          {{ form.controls['title'].errors?.message | translate }}
+      </mat-error>
+
     </mat-form-field>
 
     <mat-form-field>

src/app/dialogs/library/library.dialog.spec.ts

@@ -100,6 +100,48 @@ describe('LibraryDialogComponent', () => {
     expect(component.form.controls.id.value).toBe('library-title');
   }));
 
+  it('should not translate library title if value is not a valid id', fakeAsync(() => {
+    spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
+      return new Promise((resolve, reject) => reject());
+    });
+
+    fixture.detectChanges();
+    component.form.controls.title.setValue('@@@####');
+    tick(500);
+    flush();
+    fixture.detectChanges();
+
+    expect(component.form.controls.id.value).toBe(null);
+  }));
+
+  it('should translate library title partially for library id', fakeAsync(() => {
+    spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
+      return new Promise((resolve, reject) => reject());
+    });
+
+    fixture.detectChanges();
+    component.form.controls.title.setValue('@@@####library');
+    tick(500);
+    flush();
+    fixture.detectChanges();
+
+    expect(component.form.controls.id.value).toBe('library');
+  }));
+
+  it('should translate library title multiple space character to one dash for library id', fakeAsync(() => {
+    spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
+      return new Promise((resolve, reject) => reject());
+    });
+
+    fixture.detectChanges();
+    component.form.controls.title.setValue('library     title');
+    tick(500);
+    flush();
+    fixture.detectChanges();
+
+    expect(component.form.controls.id.value).toBe('library-title');
+  }));
+
   it('should not change custom library id on title input', fakeAsync(() => {
     spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
       return new Promise((resolve, reject) => reject());

src/app/dialogs/library/library.dialog.ts

@@ -79,13 +79,17 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
         Validators.maxLength(72),
         this.forbidSpecialCharacters
       ],
-      title: [Validators.required, Validators.maxLength(256)],
+      title: [
+        Validators.required,
+        this.forbidOnlySpaces,
+        Validators.maxLength(256)
+      ],
       description: [Validators.maxLength(512)]
     };
 
     this.form = this.formBuilder.group({
-      title: ['', validators.title],
+      title: [null, validators.title],
-      id: ['', validators.id, this.createSiteIdValidator()],
+      id: [null, validators.id, this.createSiteIdValidator()],
       description: ['', validators.description]
     });
 
@@ -98,11 +102,7 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
         takeUntil(this.onDestroy$)
       )
       .subscribe((title: string) => {
-        if (!title.trim().length) {
+        if (!this.form.controls['id'].dirty && this.canGenerateId(title)) {
-          return;
-        }
-
-        if (!this.form.controls['id'].dirty) {
           this.form.patchValue({ id: this.sanitize(title.trim()) });
           this.form.controls['id'].markAsTouched();
         }
@@ -169,7 +169,11 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
   }
 
   private sanitize(input: string) {
-    return input.replace(/[\s]/g, '-').replace(/[^A-Za-z0-9-]/g, '');
+    return input.replace(/[\s\s]+/g, '-').replace(/[^A-Za-z0-9-]/g, '');
+  }
+
+  private canGenerateId(title) {
+    return Boolean(title.replace(/[^A-Za-z0-9-]/g, '').length);
   }
 
   private handleError(error: any): any {
@@ -207,6 +211,10 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
   }
 
   private forbidSpecialCharacters({ value }: FormControl) {
+    if (value === null || value.length === 0) {
+      return null;
+    }
+
     const validCharacters: RegExp = /[^A-Za-z0-9-]/;
     const isValid: boolean = !validCharacters.test(value);
 
@@ -217,6 +225,20 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
         };
   }
 
+  private forbidOnlySpaces({ value }: FormControl) {
+    if (value === null || value.length === 0) {
+      return null;
+    }
+
+    const isValid: boolean = !!(value || '').trim();
+
+    return isValid
+      ? null
+      : {
+          message: 'LIBRARY.ERRORS.ONLY_SPACES'
+        };
+  }
+
   private createSiteIdValidator() {
     let timer;
 

src/assets/i18n/en.json

@@ -406,6 +406,7 @@
             "DESCRIPTION_TOO_LONG": "Use 512 characters or less for description",
             "TITLE_TOO_LONG": "Use 256 characters or less for title",
             "ILLEGAL_CHARACTERS": "Use numbers and letters only",
+            "ONLY_SPACES": "Library name can't contain only spaces",
             "LIBRARY_UPDATE_ERROR": "There was an error updating library properties"
         },
         "SUCCESS": {