[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
This commit is contained in:
Cilibiu Bogdan
2018-07-26 22:39:19 +03:00
committed by Denys Vuika
parent 34888e2b0f
commit 617f80c9fd
5 changed files with 40 additions and 22 deletions

View File

@@ -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();
}

View File

@@ -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 () => {

View File

@@ -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]', () => {

View File

@@ -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}`);
});
});

View File

@@ -23,9 +23,9 @@
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
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: `
<a href="" [title]="tooltip | async" (click)="goToLocation()">
<a href="" [title]="nodeLocation$ | async" (click)="goToLocation()">
{{ displayText | async }}
</a>
`,
@@ -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<string>;
@HostListener('mouseenter') onMouseEnter() {
this.getTooltip(this._path);
}
constructor(
private store: Store<AppStore>,
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<string> {
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<string>(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);
}
}