[ACA-4038] Fix Description error message not showing (#1775)

* [ACA-4038] Fix Description error message not showing

* increase timeout due really slow create sites

Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>

e2e/suites/pagination/multiple-pages-libraries.test.ts

@@ -51,12 +51,12 @@ describe('Pagination on multiple pages', () => {
     await userApi.sites.waitForApi({ expect: initialSitesTotalItems + 101 });
 
     await loginPage.loginWith(username);
-  }, 150000);
+  }, 450000);
 
   afterAll(async () => {
     await userApi.sites.deleteSites(sites);
     await userApi.sites.waitForApi({ expect: initialSitesTotalItems });
-  }, 120000);
+  }, 420000);
 
   describe('on My Libraries', () => {
     beforeAll(async () => {

src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.html

@@ -1,8 +1,6 @@
 <mat-card *ngIf="node">
   <mat-card-content *ngIf="!edit">
-    <div
+    <div class="mat-form-field mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
-      class="mat-form-field mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
-    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -20,9 +18,7 @@
       </div>
     </div>
 
-    <div
+    <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
-      class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
-    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -40,9 +36,7 @@
       </div>
     </div>
 
-    <div
+    <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
-      class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
-    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -53,18 +47,14 @@
             </span>
 
             <span class="mat-input-element">
-              {{
+              {{ getVisibilityLabel(form.controls.visibility.value) | translate }}
-                getVisibilityLabel(form.controls.visibility.value) | translate
-              }}
             </span>
           </div>
         </div>
       </div>
     </div>
 
-    <div
+    <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
-      class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width"
-    >
       <div class="mat-form-field-wrapper">
         <div class="mat-form-field-flex">
           <div class="mat-form-field-infix">
@@ -98,29 +88,20 @@
           required
           placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
           formControlName="title"
+          [errorStateMatcher]="matcher"
         />
-
+        <mat-hint *ngIf="libraryTitleExists">{{ 'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate }}</mat-hint>
-        <mat-hint *ngIf="libraryTitleExists">{{
+        <mat-error>
-          '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-form-field>
 
       <mat-form-field class="adf-full-width">
-        <input
+        <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
-          matInput
-          placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}"
-          formControlName="id"
-        />
       </mat-form-field>
 
       <mat-form-field class="adf-full-width">
-        <mat-select
+        <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
-          placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}"
-          formControlName="visibility"
-        >
           <mat-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
           </mat-option>
@@ -133,9 +114,9 @@
           placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
           rows="3"
           formControlName="description"
+          [errorStateMatcher]="matcher"
         ></textarea>
-
+        <mat-error>
-        <mat-error *ngIf="form.controls['description'].hasError('maxlength')">
           {{ 'LIBRARY.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
         </mat-error>
       </mat-form-field>
@@ -146,12 +127,7 @@
     <button mat-button color="secondary" (click)="cancel()">
       {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
     </button>
-    <button
+    <button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
-      mat-button
-      color="primary"
-      [disabled]="form.invalid || form.pristine"
-      (click)="update()"
-    >
       {{ 'LIBRARY.DIALOG.UPDATE' | translate }}
     </button>
   </mat-card-actions>

src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts

@@ -24,13 +24,21 @@
  */
 
 import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
 import { SiteEntry, SitePaging } from '@alfresco/js-api';
 import { Store } from '@ngrx/store';
 import { AppStore, UpdateLibraryAction } from '@alfresco/aca-shared/store';
 import { debounceTime, mergeMap, takeUntil } from 'rxjs/operators';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { Observable, from, Subject } from 'rxjs';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+export class InstantErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
 
 @Component({
   selector: 'app-library-metadata-form',
@@ -56,6 +64,8 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
     visibility: new FormControl(this.libraryType[0].value)
   });
 
+  matcher = new InstantErrorStateMatcher();
+
   onDestroy$: Subject<boolean> = new Subject<boolean>();
 
   constructor(private alfrescoApiService: AlfrescoApiService, protected store: Store<AppStore>) {}