From 7ae335c3d20beedfb748b7d07c9c289819eb6c8c Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Tue, 24 Oct 2023 22:29:59 +0200
Subject: [PATCH] [ACS-5647] rework template of library metadata form component
 (#3487)

* ACS-5647 Removed template for view mode and used template for edit mode instead

* ACS-5647 Fixed auto focus for name field

* ACS-5647 Reverted data automation id

* ACS-5647 Corrected unit tests

* e2e fix for library details

---------

Co-authored-by: akash.rathod@hyland.com <akash.rathod@hyland.com>
---
 .../actions/src/tests/create-library.spec.ts  |   8 +-
 .../library-metadata-form.component.html      | 110 +++---------------
 .../library-metadata-form.component.spec.ts   |  31 ++++-
 .../library-metadata-form.component.ts        |  18 +--
 .../components/adf-info-drawer.component.ts   |   2 +-
 .../info-drawer-metadata-library.ts           |   8 +-
 6 files changed, 66 insertions(+), 111 deletions(-)

diff --git a/e2e/playwright/actions/src/tests/create-library.spec.ts b/e2e/playwright/actions/src/tests/create-library.spec.ts
index 3b9b00a67..25f702135 100644
--- a/e2e/playwright/actions/src/tests/create-library.spec.ts
+++ b/e2e/playwright/actions/src/tests/create-library.spec.ts
@@ -145,10 +145,10 @@ test.describe('Create Libraries ', () => {
     await expect(libraryTable.getCellLinkByName(randomLibraryName).and(myLibrariesPage.page.getByTitle(randomLibraryDescription))).toBeVisible();
     await libraryTable.getRowByName(randomLibraryName).click();
     await libraryViewDetails.click();
-    await expect(libraryDetails.getNameField('Name').getByText(randomLibraryName)).toBeVisible();
-    await expect(libraryDetails.getIdField('Library ID').getByText(randomLibraryId)).toBeVisible();
-    await expect(libraryDetails.getVisibilityField('Visibility').getByText(publicVisibility)).toBeVisible();
-    await expect(libraryDetails.getDescriptionField(libraryDescriptionLabel).getByText(randomLibraryDescription)).toBeVisible();
+    expect(await libraryDetails.getNameField('Name').locator('input').inputValue()).toBe(randomLibraryName);
+    expect(await libraryDetails.getIdField('Library ID').locator('input').inputValue()).toBe(randomLibraryId);
+    await expect(libraryDetails.getVisibilityField('Visibility').locator('.mat-select-value').getByText(publicVisibility)).toBeVisible();
+    expect(await libraryDetails.getDescriptionField.inputValue()).toBe(randomLibraryDescription);
 
     await apiClientFactory.sites.deleteSite(randomLibraryId, { permanent: true });
   });
diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
index 220221205..7d80a4127 100644
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
@@ -1,90 +1,11 @@
 <mat-card *ngIf="node">
-  <mat-card-content *ngIf="!edit">
-    <div class="mat-form-field mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float">
-      <div class="mat-form-field-wrapper" data-automation-id="library-name-properties-wrapper">
-        <div class="mat-form-field-flex">
-          <div class="mat-form-field-infix">
-            <span class="mat-form-field-label-wrapper">
-              <span class="mat-form-field-label">
-                {{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}
-              </span>
-            </span>
-
-            <span class="mat-input-element">
-              {{ form.controls.title.value }}
-            </span>
-          </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">
-      <div class="mat-form-field-wrapper" data-automation-id="library-id-properties-wrapper">
-        <div class="mat-form-field-flex">
-          <div class="mat-form-field-infix">
-            <span class="mat-form-field-label-wrapper">
-              <span class="mat-form-field-label">
-                {{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}
-              </span>
-            </span>
-
-            <span class="mat-input-element">
-              {{ form.controls.id.value }}
-            </span>
-          </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">
-      <div class="mat-form-field-wrapper" data-automation-id="library-visibility-properties-wrapper">
-        <div class="mat-form-field-flex">
-          <div class="mat-form-field-infix">
-            <span class="mat-form-field-label-wrapper">
-              <span class="mat-form-field-label">
-                {{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}
-              </span>
-            </span>
-
-            <span class="mat-input-element">
-              {{ visibilityLabel | translate }}
-            </span>
-          </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">
-      <div class="mat-form-field-wrapper" data-automation-id="library-description-properties-wrapper">
-        <div class="mat-form-field-flex">
-          <div class="mat-form-field-infix">
-            <span class="mat-form-field-label-wrapper">
-              <span class="mat-form-field-label">
-                {{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}
-              </span>
-            </span>
-
-            <span class="mat-input-element">
-              {{ form.controls.description?.value }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </mat-card-content>
-
-  <mat-card-actions align="end" *ngIf="!edit && canUpdateLibrary">
-    <button mat-button color="primary" (click)="toggleEdit()">
-      {{ 'LIBRARY.DIALOG.EDIT' | translate }}
-    </button>
-  </mat-card-actions>
-
-  <mat-card-content *ngIf="edit">
+  <mat-card-content>
     <form [formGroup]="form" autocomplete="off">
-      <mat-form-field floatLabel="auto">
+      <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper">
         <input
           matInput
-          cdkFocusInitial
+          [cdkTrapFocusAutoCapture]="form.enabled"
+          [cdkTrapFocus]="form.enabled"
           required
           placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
           formControlName="title"
@@ -96,11 +17,11 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto">
+      <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper">
         <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto">
+      <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper">
         <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
           <mat-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
@@ -108,7 +29,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto">
+      <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper">
         <textarea
           matInput
           placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
@@ -123,12 +44,17 @@
     </form>
   </mat-card-content>
 
-  <mat-card-actions align="end" *ngIf="edit && canUpdateLibrary">
-    <button mat-button (click)="cancel()">
-      {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
-    </button>
-    <button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
-      {{ 'LIBRARY.DIALOG.UPDATE' | translate }}
+  <mat-card-actions align="end" *ngIf="canUpdateLibrary">
+    <ng-container *ngIf="form.enabled">
+      <button mat-button (click)="cancel()">
+        {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
+      </button>
+      <button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
+        {{ 'LIBRARY.DIALOG.UPDATE' | translate }}
+      </button>
+    </ng-container>
+    <button mat-button color="primary" (click)="toggleEdit()" *ngIf="form.disabled">
+      {{ 'LIBRARY.DIALOG.EDIT' | translate }}
     </button>
   </mat-card-actions>
 </mat-card>
diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts
index 80881c92e..b36dabb0d 100644
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts
@@ -77,6 +77,7 @@ describe('LibraryMetadataFormComponent', () => {
 
   it('should initialize form with node data', () => {
     fixture.detectChanges();
+    component.toggleEdit();
 
     expect(component.form.value).toEqual(siteEntryModel);
   });
@@ -89,6 +90,7 @@ describe('LibraryMetadataFormComponent', () => {
     };
 
     fixture.detectChanges();
+    component.toggleEdit();
 
     expect(component.form.value).toEqual(siteEntryModel);
 
@@ -161,6 +163,7 @@ describe('LibraryMetadataFormComponent', () => {
     component.node.entry.role = Site.RoleEnum.SiteManager;
 
     fixture.detectChanges();
+    component.toggleEdit();
 
     component.update();
 
@@ -172,6 +175,7 @@ describe('LibraryMetadataFormComponent', () => {
     siteEntryModel.title = '   some title    ';
     component.node.entry.title = siteEntryModel.title;
     component.ngOnInit();
+    component.toggleEdit();
 
     component.update();
     expect(store.dispatch).toHaveBeenCalledWith(
@@ -186,6 +190,7 @@ describe('LibraryMetadataFormComponent', () => {
     component.node.entry.role = Site.RoleEnum.SiteManager;
     spyOn(component.form, 'markAsPristine');
     component.ngOnInit();
+    component.toggleEdit();
 
     component.update();
     expect(component.form.markAsPristine).toHaveBeenCalled();
@@ -195,6 +200,7 @@ describe('LibraryMetadataFormComponent', () => {
     component.node.entry.role = Site.RoleEnum.SiteConsumer;
 
     fixture.detectChanges();
+    component.toggleEdit();
 
     component.update();
 
@@ -205,6 +211,7 @@ describe('LibraryMetadataFormComponent', () => {
     component.node.entry.role = Site.RoleEnum.SiteConsumer;
     spyOn(component.form, 'markAsPristine');
     component.ngOnInit();
+    component.toggleEdit();
 
     component.update();
     expect(component.form.markAsPristine).not.toHaveBeenCalled();
@@ -214,6 +221,7 @@ describe('LibraryMetadataFormComponent', () => {
     component.node.entry.role = Site.RoleEnum.SiteManager;
 
     fixture.detectChanges();
+    component.toggleEdit();
 
     component.form.controls['title'].setErrors({ maxlength: true });
 
@@ -227,23 +235,36 @@ describe('LibraryMetadataFormComponent', () => {
     spyOn(component.form, 'markAsPristine');
     spyOnProperty(component.form, 'valid').and.returnValue(false);
     component.ngOnInit();
+    component.toggleEdit();
 
     component.update();
     expect(component.form.markAsPristine).not.toHaveBeenCalled();
   });
 
-  it('should toggle edit mode', () => {
-    component.edit = false;
+  it('should disable form after calling toggleEdit if form was enabled', () => {
+    spyOn(component.form, 'disable');
 
     component.toggleEdit();
-    expect(component.edit).toBe(true);
+    expect(component.form.disable).toHaveBeenCalledWith({
+      emitEvent: false
+    });
+  });
+
+  it('should enable form without id field after calling toggleEdit if form was disabled', () => {
+    component.toggleEdit();
+    spyOn(component.form, 'enable');
+    spyOn(component.form.controls.id, 'disable');
 
     component.toggleEdit();
-    expect(component.edit).toBe(false);
+    expect(component.form.enable).toHaveBeenCalledWith({
+      emitEvent: false
+    });
+    expect(component.form.controls.id.disable).toHaveBeenCalled();
   });
 
   it('should cancel from changes', () => {
     fixture.detectChanges();
+    component.toggleEdit();
 
     expect(component.form.value).toEqual(siteEntryModel);
 
@@ -252,6 +273,7 @@ describe('LibraryMetadataFormComponent', () => {
     expect(component.form.value.title).toBe('libraryTitle-edit');
 
     component.cancel();
+    component.toggleEdit();
 
     expect(component.form.value).toEqual(siteEntryModel);
   });
@@ -328,6 +350,7 @@ describe('LibraryMetadataFormComponent', () => {
 
   it('should set proper titleErrorTranslationKey when there is error for empty title', () => {
     component.ngOnInit();
+    component.toggleEdit();
 
     component.form.controls.title.setValue('     ');
     expect(component.titleErrorTranslationKey).toBe('LIBRARY.ERRORS.ONLY_SPACES');
diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
index d44316896..5f67a8f5b 100644
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
@@ -101,7 +101,6 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
   @Input()
   node: SiteEntry;
 
-  edit: boolean;
   libraryTitleExists = false;
 
   libraryType = [
@@ -119,17 +118,22 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
 
   matcher = new InstantErrorStateMatcher();
   canUpdateLibrary = false;
-  visibilityLabel = '';
 
   onDestroy$: Subject<boolean> = new Subject<boolean>();
 
   constructor(private alfrescoApiService: AlfrescoApiService, protected store: Store<AppStore>, private actions$: Actions) {}
-  getVisibilityLabel(value: string) {
-    return this.libraryType.find((type) => type.value === value).label;
-  }
 
   toggleEdit() {
-    this.edit = !this.edit;
+    if (this.form.enabled) {
+      this.form.disable({
+        emitEvent: false
+      });
+    } else {
+      this.form.enable({
+        emitEvent: false
+      });
+      this.form.controls.id.disable();
+    }
   }
 
   cancel() {
@@ -139,6 +143,7 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
   }
 
   ngOnInit() {
+    this.toggleEdit();
     this.updateForm(this.node);
     this.form.controls.title.statusChanges
       .pipe(takeUntil(this.onDestroy$))
@@ -168,7 +173,6 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
         }
       });
     this.canUpdateLibrary = this.node?.entry?.role === 'SiteManager';
-    this.visibilityLabel = this.libraryType.find((type) => type.value === this.form.controls['visibility'].value).label;
     this.handleUpdatingEvent<SnackbarInfoAction>(SnackbarActionTypes.Info, 'LIBRARY.SUCCESS.LIBRARY_UPDATED', () =>
       Object.assign(this.node.entry, this.form.value)
     );
diff --git a/projects/aca-playwright-shared/src/page-objects/components/adf-info-drawer.component.ts b/projects/aca-playwright-shared/src/page-objects/components/adf-info-drawer.component.ts
index 0e859048e..b6fe6d5bc 100644
--- a/projects/aca-playwright-shared/src/page-objects/components/adf-info-drawer.component.ts
+++ b/projects/aca-playwright-shared/src/page-objects/components/adf-info-drawer.component.ts
@@ -35,5 +35,5 @@ export class AdfInfoDrawerComponent extends BaseComponent {
   public getNameField = (labelText: string) => this.getChild('[data-automation-id="library-name-properties-wrapper"]', { hasText: labelText });
   public getIdField = (labelText: string) => this.getChild('[data-automation-id="library-id-properties-wrapper"]', { hasText: labelText });
   public getVisibilityField = (labelText: string) => this.getChild('[data-automation-id="library-visibility-properties-wrapper"]', { hasText: labelText });
-  public getDescriptionField = (labelText: string) => this.getChild('[data-automation-id="library-description-properties-wrapper"]', { hasText: labelText });
+  public getDescriptionField = this.getChild('[data-automation-id="library-description-properties-wrapper"] textarea');
 }
diff --git a/projects/aca-testing-shared/src/components/info-drawer/info-drawer-metadata-library.ts b/projects/aca-testing-shared/src/components/info-drawer/info-drawer-metadata-library.ts
index 158e2256b..ac71e3ba8 100755
--- a/projects/aca-testing-shared/src/components/info-drawer/info-drawer-metadata-library.ts
+++ b/projects/aca-testing-shared/src/components/info-drawer/info-drawer-metadata-library.ts
@@ -32,6 +32,8 @@ export class LibraryMetadata extends Component {
   visibilityPublic = this.byCssText('.mat-option .mat-option-text', 'Public', browser);
   visibilityPrivate = this.byCssText('.mat-option .mat-option-text', 'Private', browser);
   visibilityModerated = this.byCssText('.mat-option .mat-option-text', 'Moderated', browser);
+  visibilityValue = this.byCss('[data-automation-id="library-visibility-properties-wrapper"] .mat-select');
+
   hint = this.byCss('.mat-hint');
   error = this.byCss('.mat-error');
 
@@ -57,7 +59,7 @@ export class LibraryMetadata extends Component {
   }
 
   private async getValueOfField(fieldName: string) {
-    return this.getFieldByName(fieldName).getText();
+    return this.getFieldByName(fieldName).getAttribute('value');
   }
 
   private async enterTextInInput(fieldName: string, text: string) {
@@ -140,11 +142,11 @@ export class LibraryMetadata extends Component {
   }
 
   async isVisibilityDisplayed() {
-    return this.isFieldDisplayed('Visibility');
+    return browser.isElementPresent(this.visibilityValue);
   }
 
   async getVisibility(): Promise<string> {
-    return this.getValueOfField('Visibility');
+    return this.visibilityValue.getText();
   }
 
   async setVisibility(visibility: string) {