From 617f80c9fdb17a23448731e6c9dd504ad5433808 Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Thu, 26 Jul 2018 22:39:19 +0300 Subject: [PATCH] [ACA-1595] Location link - reduce HTTP requests for tooltip (#535) * get node tooltip info on hover * refactore * remove nodeLocation private attribute * e2e - added datatable method for async tooltips * fix failing tests * lint * lint * removed manual unsubscribe --- e2e/components/data-table/data-table.ts | 12 +++++++ e2e/suites/list-views/favorites.test.ts | 6 ++-- e2e/suites/list-views/recent-files.test.ts | 6 ++-- e2e/suites/list-views/shared-files.test.ts | 4 +-- .../location-link/location-link.component.ts | 34 +++++++++++-------- 5 files changed, 40 insertions(+), 22 deletions(-) diff --git a/e2e/components/data-table/data-table.ts b/e2e/components/data-table/data-table.ts index b448710b6..9fe1c48ee 100755 --- a/e2e/components/data-table/data-table.ts +++ b/e2e/components/data-table/data-table.ts @@ -204,6 +204,18 @@ export class DataTable extends Component { return this.getItemLocation(name).$('a').getAttribute('title'); } + getItemLocationTileAttr(name: string) { + const location = this.getItemLocation(name).$('a'); + const condition = () => location.getAttribute('title').then((value) => value && value.length > 0); + + browser.actions() + .mouseMove(location) + .perform(); + + browser.wait(condition, BROWSER_WAIT_TIMEOUT); + return location.getAttribute('title'); + } + clickItemLocation(name: string) { return this.getItemLocation(name).click(); } diff --git a/e2e/suites/list-views/favorites.test.ts b/e2e/suites/list-views/favorites.test.ts index 015cb57b7..b584a50c5 100755 --- a/e2e/suites/list-views/favorites.test.ts +++ b/e2e/suites/list-views/favorites.test.ts @@ -131,9 +131,9 @@ describe('Favorites', () => { }); it('Location column displays a tooltip with the entire path of the file [C213671]', async () => { - expect(dataTable.getItemLocationTooltip(fileName1)).toEqual(`File Libraries/${siteName}`); - expect(dataTable.getItemLocationTooltip(fileName2)).toEqual(`Personal Files/${parentFolder}`); - expect(dataTable.getItemLocationTooltip(favFolderName)).toEqual('Personal Files'); + expect(dataTable.getItemLocationTileAttr(fileName1)).toEqual(`File Libraries/${siteName}`); + expect(dataTable.getItemLocationTileAttr(fileName2)).toEqual(`Personal Files/${parentFolder}`); + expect(dataTable.getItemLocationTileAttr(favFolderName)).toEqual('Personal Files'); }); it('Location column redirect - item in user Home [C213650] [C260968]', async () => { diff --git a/e2e/suites/list-views/recent-files.test.ts b/e2e/suites/list-views/recent-files.test.ts index 1e76a4de7..7ed7bad44 100755 --- a/e2e/suites/list-views/recent-files.test.ts +++ b/e2e/suites/list-views/recent-files.test.ts @@ -119,9 +119,9 @@ describe('Recent Files', () => { }); it('Location column displays a tooltip with the entire path of the file [C213177]', () => { - expect(dataTable.getItemLocationTooltip(fileName1)).toEqual(`Personal Files/${folderName}`); - expect(dataTable.getItemLocationTooltip(fileName2)).toEqual('Personal Files'); - expect(dataTable.getItemLocationTooltip(fileSite)).toEqual(`File Libraries/${siteName}/${folderSite}`); + expect(dataTable.getItemLocationTileAttr(fileName1)).toEqual(`Personal Files/${folderName}`); + expect(dataTable.getItemLocationTileAttr(fileName2)).toEqual('Personal Files'); + expect(dataTable.getItemLocationTileAttr(fileSite)).toEqual(`File Libraries/${siteName}/${folderSite}`); }); it('Location column redirect - file in user Home [C213176] [C260968]', () => { diff --git a/e2e/suites/list-views/shared-files.test.ts b/e2e/suites/list-views/shared-files.test.ts index d34d0d910..1f3e3e61e 100755 --- a/e2e/suites/list-views/shared-files.test.ts +++ b/e2e/suites/list-views/shared-files.test.ts @@ -136,7 +136,7 @@ describe('Shared Files', () => { }); it('Location column displays a tooltip with the entire path of the file [C213667]', () => { - expect(dataTable.getItemLocationTooltip(fileAdmin)).toEqual(`File Libraries/${siteName}`); - expect(dataTable.getItemLocationTooltip(file1User)).toEqual(`Personal Files/${folderUser}`); + expect(dataTable.getItemLocationTileAttr(fileAdmin)).toEqual(`File Libraries/${siteName}`); + expect(dataTable.getItemLocationTileAttr(file1User)).toEqual(`Personal Files/${folderUser}`); }); }); diff --git a/src/app/components/location-link/location-link.component.ts b/src/app/components/location-link/location-link.component.ts index 1f083351e..818a04788 100644 --- a/src/app/components/location-link/location-link.component.ts +++ b/src/app/components/location-link/location-link.component.ts @@ -23,9 +23,9 @@ * along with Alfresco. If not, see . */ -import { Component, Input, ChangeDetectionStrategy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, OnInit, ViewEncapsulation, HostListener } from '@angular/core'; import { PathInfo, MinimalNodeEntity } from 'alfresco-js-api'; -import { Observable } from 'rxjs/Rx'; +import { Observable, BehaviorSubject } from 'rxjs/Rx'; import { Store } from '@ngrx/store'; import { AppStore } from '../../store/states/app.state'; @@ -35,7 +35,7 @@ import { ContentApiService } from '../../services/content-api.service'; @Component({ selector: 'aca-location-link', template: ` - + {{ displayText | async }} `, @@ -44,6 +44,9 @@ import { ContentApiService } from '../../services/content-api.service'; host: { 'class': 'aca-location-link adf-location-cell' } }) export class LocationLinkComponent implements OnInit { + private _path: PathInfo; + + nodeLocation$ = new BehaviorSubject(null); @Input() context: any; @@ -57,6 +60,10 @@ export class LocationLinkComponent implements OnInit { @Input() tooltip: Observable; + @HostListener('mouseenter') onMouseEnter() { + this.getTooltip(this._path); + } + constructor( private store: Store, private contentApi: ContentApiService) { @@ -77,7 +84,7 @@ export class LocationLinkComponent implements OnInit { if (path && path.name && path.elements) { this.displayText = this.getDisplayText(path); - this.tooltip = this.getTooltip(path); + this._path = path; } } } @@ -120,7 +127,9 @@ export class LocationLinkComponent implements OnInit { } // todo: review once 5.2.3 is out - private getTooltip(path: PathInfo): Observable { + private getTooltip(path: PathInfo) { + let result: string = null; + const elements = path.elements.map(e => Object.assign({}, e)); if (elements[0].name === 'Company Home') { @@ -129,8 +138,6 @@ export class LocationLinkComponent implements OnInit { if (elements.length > 2) { if (elements[1].name === 'Sites') { const fragment = elements[2]; - - return new Observable(observer => { this.contentApi.getNodeInfo(fragment.id).subscribe( node => { elements.splice(0, 2); @@ -138,19 +145,18 @@ export class LocationLinkComponent implements OnInit { elements.splice(1, 1); elements.unshift({ id: null, name: 'File Libraries' }); - observer.next(elements.map(e => e.name).join('/')); - observer.complete(); + result = elements.map(e => e.name).join('/'); + this.nodeLocation$.next(result); }, () => { elements.splice(0, 2); elements.unshift({ id: null, name: 'File Libraries' }); elements.splice(2, 1); - observer.next(elements.map(e => e.name).join('/')); - observer.complete(); + result = elements.map(e => e.name).join('/'); + this.nodeLocation$.next(result); } ); - }); } if (elements[1].name === 'User Homes') { @@ -160,7 +166,7 @@ export class LocationLinkComponent implements OnInit { } } - const result = elements.map(e => e.name).join('/'); - return Observable.of(result); + result = elements.map(e => e.name).join('/'); + this.nodeLocation$.next(result); } }