[ACA-2368] UI Issues while editing Metadata in the Preview Page #1091 (#5562)

* [ACA-2368] UI Issues while editing Metadata in the Preview Page #1091

* tslint fxed

* [ACA-2368] UI Issues while editing Metadata in the Preview Page #1091

* * revert commits

* Revert "* revert commits"

This reverts commit fd0e86084cc4ac14870d9008400528f63a681c59.

* * unit test added

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -11,6 +11,7 @@
             </mat-expansion-panel-header>
 
             <adf-card-view
+                (keydown)="keyDown($event)"
                 [properties]="basicProperties$ | async"
                 [editable]="editable"
                 [displayEmpty]="displayEmpty">
@@ -30,6 +31,7 @@
                         </mat-expansion-panel-header>
 
                         <adf-card-view
+                            (keydown)="keyDown($event)"
                             [properties]="group.properties"
                             [editable]="editable"
                             [displayEmpty]="displayEmpty">

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -352,7 +352,6 @@ describe('ContentMetadataComponent', () => {
             expect(defaultProp.componentInstance.expanded).toBeTruthy();
             expect(exifProp.componentInstance.expanded).toBeFalsy();
             expect(customProp.componentInstance.expanded).toBeFalsy();
-
         }));
 
         it('should not expand anything if input is wrong', async(() => {
@@ -370,6 +369,35 @@ describe('ContentMetadataComponent', () => {
 
         }));
     });
+
+    describe('events', () => {
+        it('should not propagate the event on left arrows press', () => {
+            fixture.detectChanges();
+            const event = { keyCode: 37, stopPropagation: () => {} };
+            spyOn(event, 'stopPropagation').and.stub();
+            const element = fixture.debugElement.query(By.css('adf-card-view'));
+            element.triggerEventHandler('keydown', event);
+            expect(event.stopPropagation).toHaveBeenCalled();
+        });
+
+        it('should not propagate the event on right arrows press', () => {
+            fixture.detectChanges();
+            const event = { keyCode: 39, stopPropagation: () => {} };
+            spyOn(event, 'stopPropagation').and.stub();
+            const element = fixture.debugElement.query(By.css('adf-card-view'));
+            element.triggerEventHandler('keydown', event);
+            expect(event.stopPropagation).toHaveBeenCalled();
+        });
+
+        it('should propagate the event on other keys press', () => {
+            fixture.detectChanges();
+            const event = { keyCode: 40, stopPropagation: () => {} };
+            spyOn(event, 'stopPropagation').and.stub();
+            const element = fixture.debugElement.query(By.css('adf-card-view'));
+            element.triggerEventHandler('keydown', event);
+            expect(event.stopPropagation).not.toHaveBeenCalled();
+        });
+    });
 });
 
 function queryDom(fixture: ComponentFixture<ContentMetadataComponent>, properties: string = 'properties') {

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -174,4 +174,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         return !this.expanded || this.displayAspect === 'Properties';
     }
 
+    keyDown(event: KeyboardEvent) {
+        if (event.keyCode === 37 || event.keyCode === 39) { // ArrowLeft && ArrowRight
+            event.stopPropagation();
+        }
+    }
+
 }

lib/core/viewer/components/viewer.component.spec.ts

@@ -377,6 +377,39 @@ describe('ViewerComponent', () => {
         expect(component.fileTitle).toBe('file2');
     }));
 
+    it('should update node only if node name changed', fakeAsync(() => {
+        spyOn(alfrescoApiService.nodesApi, 'getNode').and.returnValues(
+            Promise.resolve(new NodeEntry({ entry: { name: 'file1', content: {} } }))
+        );
+        spyOn(alfrescoApiService.contentApi, 'getContentUrl').and.returnValues('http://iam-fake.url');
+        spyOn(component, 'getViewerTypeByExtension').and.returnValue('pdf');
+
+        component.urlFile = null;
+        component.displayName = null;
+        component.blobFile = null;
+        component.showViewer = true;
+
+        component.nodeId = 'id1';
+        fixture.detectChanges();
+        component.ngOnChanges();
+        tick();
+
+        expect(component.fileTitle).toBe('file1');
+
+        alfrescoApiService.nodeUpdated.next(<any> { id: 'id1', name: 'file2' });
+        fixture.detectChanges();
+        expect(component.fileTitle).toBe('file2');
+
+        alfrescoApiService.nodeUpdated.next(<any> { id: 'id1', name: 'file3' });
+        fixture.detectChanges();
+        expect(component.fileTitle).toBe('file3');
+
+        alfrescoApiService.nodeUpdated.next(<any> { id: 'id2', name: 'file4' });
+        fixture.detectChanges();
+        expect(component.fileTitle).toBe('file3');
+        expect(component.nodeId).toBe('id1');
+    }));
+
     describe('Viewer Example Component Rendering', () => {
 
         it('should use custom toolbar', (done) => {

lib/core/viewer/components/viewer.component.ts

@@ -31,6 +31,7 @@ import { ViewerToolbarComponent } from './viewer-toolbar.component';
 import { Subscription } from 'rxjs';
 import { ViewUtilService } from '../services/view-util.service';
 import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
+import { filter } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-viewer',
@@ -249,7 +250,9 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
 
     ngOnInit() {
         this.subscriptions.push(
-            this.apiService.nodeUpdated.subscribe((node) => this.onNodeUpdated(node))
+            this.apiService.nodeUpdated.pipe(
+                filter((node) => node && node.id === this.nodeId && node.name !== this.fileName)
+            ).subscribe((node) => this.onNodeUpdated(node))
         );
 
         this.loadExtensions();