[ADF-4900] Card View and Metadata Components refactoring (#5592)

* [ADF-4900] Card View and Metadata Components refactoring

* CSS linting

* Unit test excluded

* Rebase branch

* Fix unit tests

* Fix linting

* Fix e2e tests

* Fix 2e2 tests

* Fix process-services e2e tests

* More fixes

* Fix more e2e tests

* Fix unit test

* Improve flaky unit test

* Fix process services e2e tests

* Update Process Header Cloud Page

* Fix linting

* Fix timing issue

* Lintintg

* Fix selectors

* Fix e2e tests

* Fix timing issue

* Fix C260328

* Fix spellcheck

* save screenshot

* performance issue

* Fix unit tests and e2e tests

* fix e2e

* refactoring

* fix lint

* fix e2e

* Fix C309698

* fix other e2e

* fix lint

* increase timeout

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

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -1,151 +1,124 @@
-<div [attr.data-automation-id]="'card-textitem-label-' + property.key"
-     class="adf-property-label"
-     *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
-<div class="adf-property-value">
-    <span *ngIf="!isEditable()">
-        <span *ngIf="!isClickable(); else nonClickableTemplate"
-              [attr.data-automation-id]="'card-textitem-value-' + property.key">
-            <span *ngIf="!isChipViewEnabled; else chipListTemplate">
-                <span *ngIf="showProperty() && !copyToClipboardAction"
-                      [ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
-                      class="adf-textitem-value">
-                    {{ property.displayValue }}
-                </span>
-                <span *ngIf="showProperty() && copyToClipboardAction"
-                      [ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
-                      (dblclick)="copyToClipboard(property.displayValue)"
-                      class="adf-textitem-value"
-                      matTooltipShowDelay="1000"
-                      [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
-                    {{ property.displayValue }}
-                </span>
-            </span>
-        </span>
-        <ng-template #nonClickableTemplate>
-            <div role="button"
-                 class="adf-textitem-clickable"
-                 [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-                 (click)="clicked()"
-                 fxLayout="row"
-                 fxLayoutAlign="space-between center">
-                <span class="adf-textitem-clickable-value"
-                      [attr.data-automation-id]="'card-textitem-value-' + property.key">
-                    <span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
-                </span>
-                <button mat-icon-button
-                        fxFlex="0 0 auto"
-                        *ngIf="showClickableIcon()"
-                        class="adf-textitem-action"
-                        [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                        [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
-                    <mat-icon class="adf-textitem-icon">{{property?.icon}}</mat-icon>
-                </button>
-            </div>
-        </ng-template>
-    </span>
-    <span *ngIf="isEditable()">
-        <div *ngIf="!inEdit"
-             role="button"
-             tabindex="0"
-             [attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-             (click)="setEditMode(true)"
-             (keydown.enter)="setEditMode(true)"
-             class="adf-textitem-readonly"
-             [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-             fxLayout="row"
-             fxLayoutAlign="space-between center">
-            <span *ngIf="!isChipViewEnabled; else chipListTemplate"
-                  [attr.data-automation-id]="'card-textitem-value-' + property.key">
-                <span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
-            </span>
+<div [ngSwitch]="templateType">
+    <div class="adf-property-label"
+         [attr.data-automation-id]="'card-textitem-label-' + property.key"
+         *ngIf="showProperty || isEditable">
+        {{ property.label | translate }}
+    </div>
 
-            <button mat-icon-button
-                    fxFlex="0 0 auto"
-                    class="adf-textitem-action"
-                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                    [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key">
-
-                <mat-icon class="adf-textitem-icon"> create</mat-icon>
+    <div *ngSwitchDefault>
+        <mat-form-field class="adf-property-field adf-card-textitem-field"
+                        [ngClass]="{ 'adf-property-read-only': !isEditable }">
+            <input matInput
+                   *ngIf="!property.multiline"
+                   class="adf-property-value"
+                   [placeholder]="property.default"
+                   [(ngModel)]="editedValue"
+                   (blur)="update()"
+                   (keydown.enter)="update()"
+                   [disabled]="!isEditable"
+                   (dblclick)="copyToClipboard(property.displayValue)"
+                   matTooltipShowDelay="1000"
+                   [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                   [matTooltipDisabled]="isEditable"
+                   [attr.data-automation-id]="'card-textitem-value-' + property.key">
+            <textarea matInput
+                      *ngIf="property.multiline"
+                      matTextareaAutosize
+                      matAutosizeMaxRows="1"
+                      matAutosizeMaxRows="5"
+                      class="adf-property-value"
+                      [placeholder]="property.default"
+                      [(ngModel)]="editedValue"
+                      (blur)="update()"
+                      (keydown.enter)="update()"
+                      [disabled]="!isEditable"
+                      [attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea>
+            <button mat-button
+                    matSuffix
+                    class="adf-property-clear-value"
+                    *ngIf="isEditable"
+                    mat-icon-button
+                    aria-label="Clear"
+                    (click)="editedValue=''">
+                <mat-icon>cancel</mat-icon>
             </button>
-        </div>
-        <div *ngIf="inEdit"
-             class="adf-textitem-editable">
-            <div class="adf-textitem-editable-controls">
-                <mat-form-field floatPlaceholder="never"
-                                class="adf-input-container">
-                    <input *ngIf="!isChipViewEnabled && !property.multiline"
-                           #editorInput
-                           (keydown.escape)="reset($event)"
-                           (keydown.enter)="update($event)"
-                           matInput
-                           class="adf-input"
-                           [placeholder]="property.default | translate"
-                           [(ngModel)]="editedValue"
-                           [attr.data-automation-id]="'card-textitem-editinput-' + property.key">
-                    <textarea *ngIf="!isChipViewEnabled && property.multiline"
-                              #editorInput
-                              matInput
-                              matTextareaAutosize
-                              matAutosizeMaxRows="1"
-                              matAutosizeMaxRows="5"
-                              class="adf-textarea"
-                              [placeholder]="property.default | translate"
-                              [(ngModel)]="editedValue"
-                              (input)="onTextAreaInputChange()"
-                              [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
-                    <div *ngIf="isChipViewEnabled">
-                        <mat-chip-list class="adf-input"
-                                       #chipList>
-                            <mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
-                                      [removable]="true"
-                                      (removed)="removeValueFromList(idx)">
-                                {{ propertyValue }}
-                                <mat-icon matChipRemove>cancel</mat-icon>
-                            </mat-chip>
-                            <input #editorInput
-                                   [placeholder]="property.default | translate"
-                                   [matChipInputFor]="chipList"
-                                   [matChipInputAddOnBlur]="true"
-                                   (matChipInputTokenEnd)="addValueToList($event)"
-                                   [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
-                        </mat-chip-list>
-                    </div>
-                </mat-form-field>
-                <button mat-icon-button
-                        class="adf-textitem-action"
-                        (click)="update($event)"
-                        [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
-                        [attr.data-automation-id]="'card-textitem-update-' + property.key">
-                    <mat-icon class="adf-textitem-icon">done</mat-icon>
-                </button>
+            <mat-icon matSuffix
+                      *ngIf="isEditable"
+                      [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                      class="adf-textitem-edit-icon">mode_edit</mat-icon>
 
-                <button mat-icon-button
-                        (click)="reset($event)"
-                        class="adf-textitem-action"
-                        [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
-                        [attr.data-automation-id]="'card-textitem-reset-' + property.key">
+        </mat-form-field>
+    </div>
 
-                    <mat-icon>clear</mat-icon>
-                </button>
-            </div>
-            <mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
-                       class="adf-textitem-editable-error"
-                       *ngIf="hasErrors()">
-                <ul>
-                    <li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
-                </ul>
-            </mat-error>
-        </div>
-    </span>
-    <ng-template #emptyValueTemplate>
-        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
-    </ng-template>
+    <mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
+               class="adf-textitem-editable-error"
+               *ngIf="hasErrors">
+        <ul>
+            <li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
+        </ul>
+    </mat-error>
 
-    <ng-template #chipListTemplate>
-        <mat-chip-list>
-            <mat-chip *ngFor="let propertyValue of editedValue">
+    <div *ngSwitchCase="'chipsTemplate'"
+         class="adf-property-field adf-textitem-chip-list-container">
+        <mat-chip-list #chipList
+                       class="adf-textitem-chip-list">
+            <mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
+                      [removable]="isEditable"
+                      (removed)="removeValueFromList(idx)">
                 {{ propertyValue }}
+                <mat-icon *ngIf="isEditable"
+                          matChipRemove>cancel</mat-icon>
             </mat-chip>
         </mat-chip-list>
-    </ng-template>
+
+        <mat-form-field *ngIf="isEditable"
+                        class="adf-property-field adf-textitem-chip-list-input"
+                        [ngClass]="{ 'adf-property-read-only': !isEditable }">
+            <input matInput
+                   class="adf-property-value"
+                   [placeholder]="property.default | translate"
+                   [matChipInputFor]="chipList"
+                   [matChipInputAddOnBlur]="true"
+                   (matChipInputTokenEnd)="addValueToList($event)"
+                   [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
+            <mat-icon matSuffix
+                      class="adf-textitem-edit-icon">mode_edit</mat-icon>
+        </mat-form-field>
+    </div>
+
+    <div *ngSwitchCase="'clickableTemplate'"
+         role="button"
+         class="adf-textitem-clickable"
+         [ngClass]="{ 'adf-property-read-only': !isEditable }"
+         [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
+         (click)="clicked()"
+         fxLayout="row"
+         fxLayoutAlign="space-between center">
+        <mat-form-field class="adf-property-field adf-card-textitem-field">
+            <input matInput
+                   [type]=property.inputType
+                   class="adf-property-value"
+                   [ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
+                   [placeholder]="property.default"
+                   [(ngModel)]="editedValue"
+                   (blur)="update()"
+                   (keydown.enter)="update()"
+                   [disabled]="!isEditable"
+                   [attr.data-automation-id]="'card-textitem-value-' + property.key">
+            <button mat-icon-button
+                    matSuffix
+                    fxFlex="0 0 auto"
+                    *ngIf="showClickableIcon"
+                    class="adf-textitem-action"
+                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                    [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
+                <mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
+            </button>
+        </mat-form-field>
+
+    </div>
+
+    <div *ngSwitchCase="'emptyTemplate'">
+        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
+    </div>
 </div>

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -5,17 +5,22 @@
     $outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
 
     .adf {
-        &-textitem-icon {
+        &-textitem-edit-icon.mat-icon {
             font-size: 16px;
             width: 16px;
             height: 16px;
-        }
-
-        &-textitem-action {
             color: mat-color($foreground, text, 0.25);
         }
 
-        &-textitem-action:hover, &-textitem-action:focus {
+        &-textitem-action.mat-icon-button {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            color: mat-color($foreground, text, 0.25);
+        }
+
+        &-textitem-action:hover,
+        &-textitem-action:focus {
             color: mat-color($foreground, text);
         }
 
@@ -32,8 +37,23 @@
             }
         }
 
+        &-textitem-chip-list-container {
+            margin-bottom: 25px !important;
+            margin-top: 6px;
+
+            .mat-form-field-label {
+                margin-top: 6px;
+            }
+        }
+
         &-textitem-clickable {
             cursor: pointer !important;
+            padding-top: 3px;
+
+            .adf-textitem-edit-icon.mat-icon {
+                line-height: 16px;
+            }
+
             &:hover .adf-textitem-action {
                 color: mat-color($foreground, text);
             }
@@ -41,11 +61,10 @@
 
         &-textitem-clickable-value {
             cursor: pointer !important;
-            color: mat-color($primary);
+            color: mat-color($primary) !important;
         }
 
         &-textitem-editable {
-
             &-controls {
                 display: flex;
                 align-items: center;
@@ -148,5 +167,22 @@
         &-textitem-multiline {
             display: block;
         }
+
+        &-property-field .adf-property-clear-value {
+            display: none;
+        }
+
+        &-property-field.adf-card-textitem-field:hover {
+            .adf-textitem-edit-icon {
+                display: none;
+            }
+            .adf-property-clear-value {
+                color: mat-color($foreground, text, 0.25);
+                display: inline;
+            }
+            .adf-property-clear-value:hover {
+                color: mat-color($foreground, text, 1);
+            }
+        }
     }
 }

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { BaseCardView } from '../base-card-view';
@@ -24,6 +24,13 @@ import { ClipboardService } from '../../../clipboard/clipboard.service';
 import { TranslationService } from '../../../services/translation.service';
 
 export const DEFAULT_SEPARATOR = ', ';
+const templateTypes = {
+    clickableTemplate: 'clickableTemplate',
+    multilineTemplate: 'multilineTemplate',
+    chipsTemplate: 'chipsTemplate',
+    emptyTemplate: 'emptyTemplate',
+    defaultTemplate: 'defaultTemplate'
+};
 
 @Component({
     selector: 'adf-card-view-textitem',
@@ -47,12 +54,9 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     @Input()
     multiValueSeparator: string = DEFAULT_SEPARATOR;
 
-    @ViewChild('editorInput')
-    private editorInput: any;
-
-    inEdit: boolean = false;
     editedValue: string | string[];
     errorMessages: string[];
+    templateType: string;
 
     constructor(cardViewUpdateService: CardViewUpdateService,
                 private clipboardService: ClipboardService,
@@ -62,54 +66,28 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
 
     ngOnChanges(): void {
         this.resetValue();
+        this.setTemplateType();
     }
 
-    showProperty(): boolean {
-        return this.displayEmpty || !this.property.isEmpty();
-    }
-
-    showClickableIcon(): boolean {
-        return this.hasIcon() && this.editable;
-    }
-
-    isEditable(): boolean {
-        return this.editable && this.property.editable;
-    }
-
-    isClickable(): boolean {
-        return !!this.property.clickable;
-    }
-
-    hasIcon(): boolean {
-        return !!this.property.icon;
-    }
-
-    hasErrors(): boolean {
-        return this.errorMessages && this.errorMessages.length > 0;
-    }
-
-    setEditMode(editStatus: boolean): void {
-        this.inEdit = editStatus;
-        setTimeout(() => {
-            if (this.editorInput) {
-                this.editorInput.nativeElement.click();
+    private setTemplateType() {
+        if (this.showProperty || this.isEditable) {
+            if (this.isClickable) {
+                this.templateType = templateTypes.clickableTemplate;
+            } else if (this.isChipViewEnabled) {
+                this.templateType = templateTypes.chipsTemplate;
+            } else {
+                this.templateType = templateTypes.defaultTemplate;
             }
-        }, 0);
-    }
-
-    reset(event: Event): void {
-        event.stopPropagation();
-
-        this.resetValue();
-        this.setEditMode(false);
-        this.resetErrorMessages();
+        } else {
+            this.templateType = templateTypes.emptyTemplate;
+        }
     }
 
     resetValue() {
         if (this.isChipViewEnabled) {
             this.editedValue = this.property.value ? Array.from(this.property.value) : [];
         } else {
-            this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
+            this.editedValue = this.property.displayValue;
         }
     }
 
@@ -117,14 +95,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         this.errorMessages = [];
     }
 
-    update(event: Event): void {
-        event.stopPropagation();
-
+    update(): void {
         if (this.property.isValid(this.editedValue)) {
             const updatedValue = this.prepareValueForUpload(this.property, this.editedValue);
             this.cardViewUpdateService.update(<CardViewTextItemModel> { ...this.property }, updatedValue);
             this.property.value = updatedValue;
-            this.setEditMode(false);
             this.resetErrorMessages();
         } else {
             this.errorMessages = this.property.getValidationErrors(this.editedValue);
@@ -142,6 +117,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     removeValueFromList(itemIndex: number) {
         if (typeof this.editedValue !== 'string') {
             this.editedValue.splice(itemIndex, 1);
+            this.update();
         }
     }
 
@@ -152,16 +128,12 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         if (typeof this.editedValue !== 'string') {
             if (chipValue) {
                 this.editedValue.push(chipValue);
+                this.update();
             }
 
             if (chipInput) {
                 chipInput.value = '';
-            }
-        }
-    }
-
-    onTextAreaInputChange() {
-        this.errorMessages = this.property.getValidationErrors(this.editedValue);
+            }        }
     }
 
     clicked(): void {
@@ -172,9 +144,39 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         }
     }
 
+    clearValue() {
+        this.editedValue = '';
+    }
+
     copyToClipboard(valueToCopy: string) {
-        const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
-        this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
+        if (this.copyToClipboard) {
+            const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+            this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
+        }
+    }
+
+    get showProperty(): boolean {
+        return this.displayEmpty || !this.property.isEmpty();
+    }
+
+    get showClickableIcon(): boolean {
+        return this.hasIcon && this.editable;
+    }
+
+    get isEditable(): boolean {
+        return this.editable && this.property.editable;
+    }
+
+    get isClickable(): boolean {
+        return this.property.clickable;
+    }
+
+    get hasIcon(): boolean {
+        return !!this.property.icon;
+    }
+
+    get hasErrors(): boolean {
+        return this.errorMessages && this.errorMessages.length > 0;
     }
 
     get isChipViewEnabled(): boolean {