[ACS-6587] ACA: Viewer does not update after restoring version and th…

…e toolbar disappears (#9383) * [ACS-6587] reload files after update * [ACS-6587] update view after version change * [ACS-6587] update view after version change * [ACS-6587] update tests * AAE-0000 e2e affected were not running on ADF pipeline' (#9409) * AAE-14727 Removed unused css rule (#9408) * [ACS-6587] update tests * [ACS-6587] rearrange tests description --------- Co-authored-by: Vito Albano <vito.albano@alfresco.com> Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Alfresco · Mar 7, 2024 · 75f33b1 · 75f33b1
1 parent 5dc82f0
commit 75f33b1
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 65 deletions.
diff --git a/demo-shell/src/app/components/file-view/file-view.component.ts b/demo-shell/src/app/components/file-view/file-view.component.ts
@@ -16,9 +16,15 @@
  */
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
+import { ActivatedRoute, PRIMARY_OUTLET, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
-import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService, FileUploadErrorEvent } from '@alfresco/adf-content-services';
+import {
+    AllowableOperationsEnum,
+    ContentService,
+    FileUploadErrorEvent,
+    NodesApiService,
+    PermissionsEnum
+} from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 
 @Component({
@@ -87,8 +93,7 @@ export class FileViewComponent implements OnInit {
     }
 
     onUploadError(event: FileUploadErrorEvent) {
-        const errorMessage = event.error;
-        this.notificationService.showError(errorMessage);
+        this.notificationService.showError(event.error);
     }
 
     toggleEmptyMetadata() {

diff --git a/lib/content-services/src/lib/version-manager/version-list.component.html b/lib/content-services/src/lib/version-manager/version-list.component.html
@@ -8,43 +8,49 @@
                 <span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
                 <span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
             </p>
-            <p mat-line [id]="'adf-version-list-item-comment-'+ version.entry.id" class="adf-version-list-item-comment"
+            <p mat-line [id]="'adf-version-list-item-comment-' + version.entry.id"
+               class="adf-version-list-item-comment"
                *ngIf="showComments">{{version.entry.versionComment}}</p>
 
             <div *ngIf="showActions">
-                <mat-menu [id]="'adf-version-list-action-menu-'+version.entry.id"
-                          #versionMenu="matMenu" yPosition="below" xPosition="before">
+                <mat-menu [id]="'adf-version-list-action-menu-' + version.entry.id"
+                          #versionMenu="matMenu"
+                          yPosition="below"
+                          xPosition="before">
                     <ng-container *adf-acs-version="'7'">
                         <button *ngIf="allowViewVersions"
-                                [id]="'adf-version-list-action-view-'+version.entry.id"
+                                [id]="'adf-version-list-action-view-' + version.entry.id"
                                 mat-menu-item
                                 (click)="onViewVersion(version.entry.id)">
                             {{ 'ADF_VERSION_LIST.ACTIONS.VIEW' | translate }}
                         </button>
                     </ng-container>
                     <button
-                        [id]="'adf-version-list-action-restore-'+version.entry.id"
+                        [id]="'adf-version-list-action-restore-' + version.entry.id"
                         [disabled]="!canUpdate() || latestVersion"
                         mat-menu-item
                         (click)="restore(version.entry.id)">
                         {{ 'ADF_VERSION_LIST.ACTIONS.RESTORE' | translate }}
                     </button>
                     <button *ngIf="allowDownload"
-                            [id]="'adf-version-list-action-download-'+version.entry.id"
+                            [id]="'adf-version-list-action-download-' + version.entry.id"
                             mat-menu-item
                             (click)="downloadVersion(version.entry.id)">
                         {{ 'ADF_VERSION_LIST.ACTIONS.DOWNLOAD' | translate }}
                     </button>
                     <button
                         [disabled]="!canDelete()"
-                        [id]="'adf-version-list-action-delete-'+version.entry.id"
+                        [id]="'adf-version-list-action-delete-' + version.entry.id"
                         (click)="deleteVersion(version.entry.id)"
                         mat-menu-item>
                         {{ 'ADF_VERSION_LIST.ACTIONS.DELETE' | translate }}
                     </button>
                 </mat-menu>
 
-                <button mat-icon-button [matMenuTriggerFor]="versionMenu" [id]="'adf-version-list-action-menu-button-'+version.entry.id" title="{{ 'ADF_VERSION_LIST.MANAGE_VERSION_OPTIONS' | translate }}">
+                <button mat-icon-button
+                        [matMenuTriggerFor]="versionMenu"
+                        [id]="'adf-version-list-action-menu-button-' + version.entry.id"
+                        title="{{ 'ADF_VERSION_LIST.MANAGE_VERSION_OPTIONS' | translate }}">
                     <mat-icon>more_vert</mat-icon>
                 </button>
             </div>

diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts
@@ -291,7 +291,6 @@ describe('AlfrescoViewerComponent', () => {
 
         component.nodeId = 'id1';
         component.showViewer = true;
-
         component.versionId = '1.0';
         component.ngOnChanges();
         tick();
@@ -305,34 +304,6 @@ describe('AlfrescoViewerComponent', () => {
         expect(component.fileName).toBe('file2');
     }));
 
-    it('should update node only if node name changed', fakeAsync(() => {
-        spyOn(component['nodesApi'], 'getNode').and.returnValues(
-            Promise.resolve(new NodeEntry({ entry: new Node({ name: 'file1', content: new ContentInfo() }) }))
-        );
-
-        component.showViewer = true;
-
-        component.nodeId = 'id1';
-        fixture.detectChanges();
-        component.ngOnChanges();
-        tick();
-
-        expect(component.fileName).toBe('file1');
-
-        nodesApiService.nodeUpdated.next({ id: 'id1', name: 'file2' } as any);
-        fixture.detectChanges();
-        expect(component.fileName).toBe('file2');
-
-        nodesApiService.nodeUpdated.next({ id: 'id1', name: 'file3' } as any);
-        fixture.detectChanges();
-        expect(component.fileName).toBe('file3');
-
-        nodesApiService.nodeUpdated.next({ id: 'id2', name: 'file4' } as any);
-        fixture.detectChanges();
-        expect(component.fileName).toBe('file3');
-        expect(component.nodeId).toBe('id1');
-    }));
-
     it('should download file when downloadFile event is emitted', () => {
         spyOn(nodeActionsService, 'downloadNode');
         const viewerComponent = fixture.debugElement.query(By.directive(ViewerComponent));
@@ -501,12 +472,13 @@ describe('AlfrescoViewerComponent', () => {
 
             fixture.detectChanges();
             nodesApiService.nodeUpdated.next({
+                ...defaultNode,
                 id: '123',
                 name: 'file2',
-                content: {
-                    mimeType: 'application/msWord'
-                }
-            } as any);
+                content: { mimeType: 'application/msWord' },
+                properties: { 'cm:versionLabel': 'mock-version-label2' }
+            } as Node);
+
             await fixture.whenStable();
             expect(component.originalMimeType).toEqual('application/msWord');
         });

diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
@@ -258,7 +258,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
                     (node) =>
                         node &&
                         node.id === this.nodeId &&
-                        (node.name !== this.fileName || this.getNodeVersionProperty(this.nodeEntry.entry) !== this.getNodeVersionProperty(node))
+                        this.getNodeVersionProperty(this.nodeEntry.entry) !== this.getNodeVersionProperty(node)
                 ),
                 takeUntil(this.onDestroy$)
             )
@@ -323,9 +323,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
             : encodeURI('1.0');
 
         urlFileContent = versionData ? this.contentApi.getVersionContentUrl(this.nodeId, versionData.id) : this.contentApi.getContentUrl(this.nodeId);
-        urlFileContent = this.cacheBusterNumber
-            ? urlFileContent + '&' + currentFileVersion + '&' + this.cacheBusterNumber
-            : urlFileContent + '&' + currentFileVersion;
+        urlFileContent = urlFileContent + '&' + currentFileVersion;
 
         const fileExtension = this.viewUtilService.getFileExtension(versionData ? versionData.name : nodeData.name);
         this.fileName = versionData ? versionData.name : nodeData.name;
@@ -348,7 +346,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
         }
 
         this.mimeType = mimeType;
-        this.urlFileContent = urlFileContent;
+        this.urlFileContent = urlFileContent + (this.cacheBusterNumber ? '&' + this.cacheBusterNumber : '');
         this.sidebarRightTemplateContext.node = nodeData;
         this.sidebarLeftTemplateContext.node = nodeData;
     }

diff --git a/lib/core/src/lib/viewer/components/img-viewer.component.html b/lib/core/src/lib/viewer/components/img-viewer.component.html
@@ -1,5 +1,14 @@
-<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="fileName" data-automation-id="adf-image-container">
-    <img #image id="viewer-image" [src]="urlFile" [alt]="fileName" (error)="onImageError()" />
+<div id="adf-image-container"
+     (keydown)="onKeyDown($event)"
+     class="adf-image-container"
+     tabindex="0"
+     role="img"
+     [attr.aria-label]="fileName"
+     data-automation-id="adf-image-container">
+    <img #image id="viewer-image"
+         [src]="urlFile"
+         [alt]="fileName"
+         (error)="onImageError()" />
 </div>
 
 <div class="adf-image-viewer__toolbar" *ngIf="showToolbar">

diff --git a/lib/core/src/lib/viewer/components/img-viewer.component.spec.ts b/lib/core/src/lib/viewer/components/img-viewer.component.spec.ts
@@ -125,40 +125,38 @@ describe('Test Img viewer component ', () => {
             fixture.detectChanges();
         });
 
-        it('If no url or blob are passed should thrown an error', () => {
+        it('should thrown an error if no url or blob are passed', () => {
             const change = new SimpleChange(null, null, true);
             expect(() => {
                 component.ngOnChanges({ blobFile: change, urlFile: change });
             }).toThrow(new Error('Attribute urlFile or blobFile is required'));
         });
 
-        it('If  url is passed should not thrown an error', () => {
+        it('should not thrown an error if url is passed ', () => {
             component.urlFile = 'fake-url';
             expect(() => {
                 component.ngOnChanges(null);
             }).not.toThrow(new Error('Attribute urlFile or blobFile is required'));
         });
 
-        it('The file Name should be present in the alt attribute', () => {
+        it('should present file name in the alt attribute', () => {
             component.fileName = 'fake-name';
             fixture.detectChanges();
             expect(element.querySelector('#viewer-image').getAttribute('alt')).toEqual('fake-name');
         });
 
         it('should call replace on cropper with new url if blobFile is null', () => {
-            component.fileName = 'fake-name';
             component.urlFile = 'fake-url';
             spyOn(component.cropper, 'replace').and.stub();
-            const fileName = new SimpleChange('val', 'val2', false);
             const urlFile = new SimpleChange('fake-url', 'fake-url-2', false);
 
             fixture.detectChanges();
-            component.ngOnChanges({ fileName, urlFile });
+            component.ngOnChanges({ urlFile });
 
             expect(component.cropper.replace).toHaveBeenCalledWith('fake-url-2');
         });
 
-        it('If blob is passed should not thrown an error', () => {
+        it('should not thrown an error if blob is passed ', () => {
             const blob = createFakeBlob();
 
             spyOn(urlService, 'createTrustedUrl').and.returnValue('fake-blob-url');

diff --git a/lib/core/src/lib/viewer/components/img-viewer.component.ts b/lib/core/src/lib/viewer/components/img-viewer.component.ts
@@ -78,7 +78,10 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
         return Math.round(this.scale * 100) + '%';
     }
 
-    constructor(private appConfigService: AppConfigService, private urlService: UrlService) {
+    constructor(
+        private appConfigService: AppConfigService,
+        private urlService: UrlService
+    ) {
         this.initializeScaling();
     }
 
@@ -155,8 +158,8 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
             return;
         }
 
-        if (!changes['urlFile'].firstChange && changes['fileName']) {
-            if (changes['fileName'].previousValue !== changes['fileName'].currentValue) {
+        if (!changes['urlFile'].firstChange) {
+            if (changes['urlFile'].previousValue !== changes['urlFile'].currentValue) {
                 this.cropper.replace(changes['urlFile'].currentValue);
             }
         }

diff --git a/lib/core/src/lib/viewer/components/viewer-render.component.ts b/lib/core/src/lib/viewer/components/viewer-render.component.ts
@@ -132,7 +132,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
         return this._externalViewer;
     }
 
-    cacheTypeForContent = '';
+    cacheTypeForContent = 'no-cache';
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -143,7 +143,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        this.cacheTypeForContent = '';
+        this.cacheTypeForContent = 'no-cache';
     }
 
     ngOnDestroy() {

diff --git a/lib/core/src/lib/viewer/components/viewer.component.ts b/lib/core/src/lib/viewer/components/viewer.component.ts
@@ -262,7 +262,7 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
         }
 
         if (urlFile?.currentValue) {
-            this.fileName = this.fileName ? this.fileName : this.viewUtilsService.getFilenameFromUrl(urlFile.currentValue);
+            this.fileName ||= this.viewUtilsService.getFilenameFromUrl(urlFile.currentValue);
         }
     }