[ADF-2159] Update angular-cli to latest version (#2874)

* Update angular cli version 1.6.5

* fix tslint problems and update devdependencies using the angularcli 1.6.4

* test fixing

* [ADF-2159] start fixing userinfo test

* [ADF-2159] fixed userinfo tests

* [ADF-2159] added async to accordion component test

* [ADF-2159] testing probable failed test on CI

* [ADF-2159] check removing fake destroyed view test

* [ADF-2159] check viewer tests

* [ADF-2159] attempt on test fix

* [ADF-2159] test fix

* [ADF-2159] fix test

* [ADF-2159] fix test

* [ADF-2159] rebased

* [ADF-2159] check test

* [ADF-2159] fixing test

* [ADF-2159] Fix#1

* [ADF-2159] Fix#2

* [ADF-2159] Fix#3

* [ADF-2159] Fix #4

* [ADF-2159] Fix #5

* [ADF-2159] Fix #6

* [ADF-2159] fixed viewer test

* [ADF-2159] fixed cast element

.gitignore

@@ -20,3 +20,4 @@ src/environments/
 package-lock.*
 /ng2-components/ng2-alfresco-core/prebuilt-themes/
 .ng_pkg_build/
+/demo-shell/dist-dev-temp/

demo-shell/.angular-cli.json

@@ -102,43 +102,8 @@
         },
         {
           "glob": "**/*",
-          "input": "../../lib/core/prebuilt-themes",
+          "input": "../dist-dev-temp/",
-          "output": "./assets/prebuilt-themes"
+          "output": "./"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/core/assets",
-          "output": "./assets/"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/process-services/assets",
-          "output": "./assets/"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/content-services/assets",
-          "output": "./assets/"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/core/i18n",
-          "output": "./assets/adf-core/i18n"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/process-services/i18n",
-          "output": "./assets/adf-process-services/i18n"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/content-services/i18n",
-          "output": "./assets/adf-content-services/i18n"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/insights/i18n",
-          "output": "./assets/adf-insights/i18n"
         },
         {
           "glob": "pdf.worker.js",

demo-shell/config/dev-copy-watch.js

@@ -0,0 +1,14 @@
+const cpx = require('cpx');
+
+//Workaround for https://github.com/angular/angular-cli/issues/8783
+//we copy before the files in dist-dev-temp in the demo shell and after we let the angular cli watch over them..double wathh necessary for dev mode
+
+cpx.watch('../lib/core/prebuilt-themes/**/*.*', './dist-dev-temp/assets/prebuilt-themes')
+cpx.watch('../lib/core/assets/**/*.*', './dist-dev-temp/assets/' )
+cpx.watch('../lib/process-services/assets/**/*.*', './dist-dev-temp/assets/' )
+cpx.watch('../lib/content-services/assets/**/*.*', './dist-dev-temp/assets/' )
+
+cpx.watch('../lib/core/i18n/**/*.*', './dist-dev-temp//assets/adf-core/i18n' )
+cpx.watch('../lib/process-services/i18n/**/*.*', './dist-dev-temp/assets/adf-process-services/i18n' )
+cpx.watch('../lib/content-services/i18n/**/*.*', './dist-dev-temp/assets/adf-content-services/i18n' )
+cpx.watch('../lib/insights/i18n/**/*.*', './dist-dev-temp//assets/adf-insights/i18n' )

demo-shell/package.json

@@ -7,12 +7,13 @@
     "ng": "ng",
     "prestart": "npm run validate-config",
     "start": "npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --app dist --open --aot=false",
-    "start:dev": "npm run lint && npm run server-versions && rimraf dist && npm run clean-lib-angular && concurrently \"ng serve --host 0.0.0.0 --disable-host-check --app dev pp-dev --proxy-config proxy.conf.js --open\" \"npm run style:dev -- --watch\" ",
+    "start:dev": " npm run lint && npm run server-versions && rimraf dist && npm run clean-lib-angular && concurrently \"ng serve --host 0.0.0.0 --disable-host-check --app dev pp-dev --proxy-config proxy.conf.js --open\" \"npm run style:dev --watch\" \"npm run copy:dev\" ",
     "start:dist": "npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng serve --prod --build-optimizer=false  --aot=false --host 0.0.0.0 --disable-host-check --app dist",
     "build": "npm run server-versions && rimraf dist && ng build  --app dist",
     "build:dev": "npm run lint && npm run style:dev && npm run server-versions && rimraf dist && ng build --app dev",
     "build:dist": "npm run style:dev && npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng build --prod  --build-optimizer=false  --aot=false --app dist",
     "style:dev": "npm run webpack -- --config  config/webpack.style.js --progress --profile --bail",
+    "copy:dev": "node ./config/dev-copy-watch.js",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -92,7 +93,7 @@
     "moment": "2.18.1",
     "moment-es6": "^1.0.0",
     "ng2-charts": "1.6.0",
-    "pdfjs-dist": "1.5.404",
+    "pdfjs-dist": "2.0.265",
     "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.5.2",
@@ -101,27 +102,28 @@
   },
   "devDependencies": {
     "@angular-devkit/core": "0.0.28",
-    "@angular/cli": "1.5.0",
+    "@angular/cli": "1.6.5",
-    "@angular/compiler-cli": "5.1.1",
+    "@angular/compiler-cli": "^5.2.0",
-    "@angular/language-service": "5.1.1",
+    "@angular/language-service": "^5.2.0",
-    "@types/jasmine": "~2.5.53",
+    "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "ajv-cli": "^3.0.0",
-    "codelyzer": "4.0.0",
+    "codelyzer": "4.1.0",
     "concurrently": "^3.5.1",
-    "jasmine-core": "~2.6.2",
+    "cpx": "^1.5.0",
-    "jasmine-spec-reporter": "~4.1.0",
+    "jasmine-core": "~2.8.0",
-    "karma": "~1.7.0",
+    "jasmine-spec-reporter": "~4.2.1",
-    "karma-chrome-launcher": "~2.1.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
     "rimraf": "^2.6.2",
-    "ts-node": "~3.2.0",
+    "ts-node": "~4.1.0",
-    "tslint": "^5.7.0",
+    "tslint": "~5.9.1",
-    "typescript": "2.6.2"
+    "typescript": "~2.5.3"
   }
 }

demo-shell/src/app/components/files/files.component.ts

@@ -34,7 +34,7 @@ import { DocumentListComponent, PermissionStyleModel, DownloadZipDialogComponent
 import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
 
 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
-import { Subscription } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -272,7 +272,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                 message,
                 4000
             );
-        })
+        });
     }
 
     handleUploadError(event: any) {

demo-shell/src/app/components/process-service/form-node-viewer.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector: 'app-form-node-viewer',

demo-shell/src/app/components/process-service/form-viewer.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector: 'app-form-viewer',

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -58,7 +58,7 @@ import {
     ObjectDataRow,
     ObjectDataTableAdapter
 } from '@alfresco/adf-core';
-import { Subscription } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
 

demo-shell/src/app/components/settings/settings.component.ts

@@ -28,6 +28,6 @@ export class SettingsComponent {
     }
 
     onError(error: string) {
-        this.logService.log(error)
+        this.logService.log(error);
     }
 }

demo-shell/src/main.ts

@@ -7,7 +7,7 @@ import 'hammerjs';
 import 'chart.js';
 import 'ng2-charts';
 
-import pdfjsLib from 'pdfjs-dist';
+import * as pdfjsLib from 'pdfjs-dist';
 pdfjsLib.PDFJS.workerSrc = 'pdf.worker.js';
 
 if (environment.production) {

demo-shell/src/polyfills.ts

@@ -65,5 +65,6 @@ import 'intl';  // Run `npm install --save intl`.
  * Support custom event in IE11
  *
  * */
-import 'custom-event-polyfill/custom-event-polyfill'  // Run `npm install --save custom-event-polyfill`.
+
+import 'custom-event-polyfill/custom-event-polyfill'; // Run `npm install --save custom-event-polyfill`.
 

demo-shell/tslint.json

@@ -3,6 +3,7 @@
     "node_modules/codelyzer"
   ],
   "rules": {
+    "arrow-return-shorthand": true,
     "callable-types": true,
     "class-name": true,
     "comment-format": [
@@ -12,7 +13,11 @@
     "curly": true,
     "eofline": true,
     "forin": true,
-    "import-blacklist": [true, "rxjs"],
+    "import-blacklist": [
+      true,
+      "rxjs",
+      "rxjs/Rx"
+    ],
     "import-spacing": true,
     "indent": [
       true,
@@ -27,8 +32,14 @@
     "member-access": false,
     "member-ordering": [
       true,
-      "static-before-instance",
+      {
-      "variables-before-functions"
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
     ],
     "no-arg": true,
     "no-bitwise": true,
@@ -43,7 +54,7 @@
     ],
     "no-construct": true,
     "no-debugger": true,
-    "no-duplicate-variable": true,
+    "no-duplicate-super": true,
     "no-empty": false,
     "no-empty-interface": true,
     "no-eval": true,
@@ -71,6 +82,7 @@
     ],
     "radix": true,
     "semicolon": [
+      true,
       "always"
     ],
     "triple-equals": [
@@ -108,9 +120,6 @@
     "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
-    "directive-class-suffix": true,
+    "directive-class-suffix": true
-    "no-access-missing-member": true,
-    "templates-use-public": true,
-    "invoke-injectable": true
   }
 }

lib/content-services/content-node-selector/content-node-selector-panel.component.ts

@@ -91,7 +91,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
     pagination: Pagination;
     skipCount: number = 0;
     infiniteScroll: boolean = false;
-    debounceSearch: number= 200;
+    debounceSearch: number = 200;
     searchInput: FormControl = new FormControl();
 
     constructor(private contentNodeSelectorService: ContentNodeSelectorService,

lib/content-services/mock/search.component.mock.ts

@@ -141,7 +141,7 @@ export let errorJson = {
     search: SearchComponent;
 
     message: string = '';
-    searchedWord= '';
+    searchedWord = '';
     maxResults: number = 5;
     searchNode: QueryBody;
 

lib/core/collapsable/accordion-group.component.spec.ts

@@ -46,7 +46,7 @@ describe('AccordionGroupComponent', () => {
 
     });
 
-    it('should be closed by default', () => {
+    it('should be closed by default', async(() => {
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
         component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
@@ -59,9 +59,9 @@ describe('AccordionGroupComponent', () => {
             let headerToggle = element.querySelector('#accordion-button .material-icons');
             expect(headerToggle.innerText).toEqual('expand_more');
         });
-    });
+    }));
 
-    it('should be open when click', () => {
+    it('should be open when click', async(() => {
         component.isSelected = true;
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
@@ -77,9 +77,9 @@ describe('AccordionGroupComponent', () => {
             let headerToggle = element.querySelector('#accordion-button .material-icons');
             expect(headerToggle.innerText).toEqual('expand_less');
         });
-    });
+    }));
 
-    it('should show expand icon by default', () => {
+    it('should show expand icon by default', async(() => {
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
         component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
@@ -88,9 +88,9 @@ describe('AccordionGroupComponent', () => {
             let headerIcon = element.querySelector('#accordion-button');
             expect(headerIcon).toBeDefined();
         });
-    });
+    }));
 
-    it('should hide expand icon', () => {
+    it('should hide expand icon', async(() => {
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
         component.hasAccordionIcon = false;
@@ -100,19 +100,18 @@ describe('AccordionGroupComponent', () => {
             let headerIcon = element.querySelector('#accordion-button');
             expect(headerIcon).toBeNull();
         });
-    });
+    }));
 
-    it('should emit an event when a heading clicked', (done) => {
+    it('should emit an event when a heading clicked', async(() => {
         component.heading = 'Fake Header';
         fixture.detectChanges();
         let heading: string = component.heading;
         component.headingClick.subscribe((headName: string) => {
             expect(headName).toBeDefined();
             expect(headName).toEqual(heading);
-            done();
         });
         let header = element.querySelector('.adf-panel-heading');
         header.click();
-    });
+    }));
 
 });

lib/core/form/components/start-form.component.spec.ts

@@ -339,8 +339,8 @@ describe('ActivitiStartForm', () => {
             component.showOutcomeButtons = true;
             component.showRefreshButton = true;
             component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
+            fixture.detectChanges();
             fixture.whenStable().then(() => {
-                fixture.detectChanges();
                 const formTabs = component.form.tabs;
                 const tabField1 = formTabs.find(tab => tab.id === 'form1');
                 const tabField2 = formTabs.find(tab => tab.id === 'form2');
@@ -357,8 +357,8 @@ describe('ActivitiStartForm', () => {
             component.showOutcomeButtons = true;
             component.showRefreshButton = true;
             component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
+            fixture.detectChanges();
             fixture.whenStable().then(() => {
-                fixture.detectChanges();
                 const titleIcon = fixture.debugElement.nativeElement.querySelector('mat-card-title>mat-icon');
                 const titleElement = fixture.debugElement.nativeElement.querySelector('mat-card-title>h2');
                 const actionButtons = fixture.debugElement.nativeElement.querySelectorAll('.mat-button');

lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts

@@ -43,9 +43,9 @@ describe('DropdownWidgetComponent', () => {
     let element: HTMLElement;
 
     let fakeOptionList: FormFieldOption[] = [
-        {id: 'opt_1', name: 'option_1'},
+        { id: 'opt_1', name: 'option_1' },
-        {id: 'opt_2', name: 'option_2'},
+        { id: 'opt_2', name: 'option_2' },
-        {id: 'opt_3', name: 'option_3'}];
+        { id: 'opt_3', name: 'option_3' }];
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -71,7 +71,7 @@ describe('DropdownWidgetComponent', () => {
         widget.ngOnInit();
         expect(formService.getRestFieldValues).not.toHaveBeenCalled();
 
-        widget.field = new FormFieldModel(null, {restUrl: null});
+        widget.field = new FormFieldModel(null, { restUrl: null });
         widget.ngOnInit();
         expect(formService.getRestFieldValues).not.toHaveBeenCalled();
     });
@@ -100,7 +100,7 @@ describe('DropdownWidgetComponent', () => {
     });
 
     it('should preserve empty option when loading fields', () => {
-        let restFieldValue: FormFieldOption = <FormFieldOption> {id: '1', name: 'Option1'};
+        let restFieldValue: FormFieldOption = <FormFieldOption> { id: '1', name: 'Option1' };
         spyOn(formService, 'getRestFieldValues').and.callFake(() => {
             return Observable.create(observer => {
                 observer.next([restFieldValue]);
@@ -108,8 +108,8 @@ describe('DropdownWidgetComponent', () => {
             });
         });
 
-        let form = new FormModel({taskId: '<id>'});
+        let form = new FormModel({ taskId: '<id>' });
-        let emptyOption: FormFieldOption = <FormFieldOption> {id: 'empty', name: 'Empty'};
+        let emptyOption: FormFieldOption = <FormFieldOption> { id: 'empty', name: 'Empty' };
         widget.field = new FormFieldModel(form, {
             id: '<id>',
             restUrl: '/some/url/address',
@@ -133,14 +133,14 @@ describe('DropdownWidgetComponent', () => {
                 spyOn(formService, 'getRestFieldValues').and.callFake(() => {
                     return Observable.of(fakeOptionList);
                 });
-                widget.field = new FormFieldModel(new FormModel({taskId: 'fake-task-id'}), {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
                     id: 'dropdown-id',
                     name: 'date-name',
                     type: 'dropdown',
                     readOnly: 'false',
                     restUrl: 'fake-rest-url'
                 });
-                widget.field.emptyOption = {id: 'empty', name: 'Choose one...'};
+                widget.field.emptyOption = { id: 'empty', name: 'Choose one...' };
                 widget.field.isVisible = true;
                 fixture.detectChanges();
             }));
@@ -179,6 +179,8 @@ describe('DropdownWidgetComponent', () => {
 
                 openSelect();
 
+                fixture.detectChanges();
+
                 fixture.whenStable()
                     .then(() => {
                         let dropDownElement: any = element.querySelector('#dropdown-id');
@@ -216,14 +218,14 @@ describe('DropdownWidgetComponent', () => {
                 spyOn(formService, 'getRestFieldValuesByProcessId').and.callFake(() => {
                     return Observable.of(fakeOptionList);
                 });
-                widget.field = new FormFieldModel(new FormModel({processDefinitionId: 'fake-process-id'}), {
+                widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
                     id: 'dropdown-id',
                     name: 'date-name',
                     type: 'dropdown',
                     readOnly: 'false',
                     restUrl: 'fake-rest-url'
                 });
-                widget.field.emptyOption = {id: 'empty', name: 'Choose one...'};
+                widget.field.emptyOption = { id: 'empty', name: 'Choose one...' };
                 widget.field.isVisible = true;
                 fixture.detectChanges();
             }));
@@ -262,6 +264,8 @@ describe('DropdownWidgetComponent', () => {
 
                 openSelect();
 
+                fixture.detectChanges();
+
                 fixture.whenStable()
                     .then(() => {
                         let dropDownElement: any = element.querySelector('#dropdown-id');
@@ -270,7 +274,7 @@ describe('DropdownWidgetComponent', () => {
             }));
 
             it('should be disabled when the field is readonly', async(() => {
-                widget.field = new FormFieldModel(new FormModel({processDefinitionId: 'fake-process-id'}), {
+                widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
                     id: 'dropdown-id',
                     name: 'date-name',
                     type: 'dropdown',

lib/core/form/components/widgets/tabs/tabs.widget.spec.ts

@@ -91,29 +91,22 @@ describe('TabsWidgetComponent', () => {
                 fixture = TestBed.createComponent(TabsWidgetComponent);
                 tabWidgetComponent = fixture.componentInstance;
                 element = fixture.nativeElement;
+
+                fakeTabVisible = new TabModel(new FormModel(fakeFormJson), {
+                    id: 'tab-id-visible',
+                    title: 'tab-title-visible'
+                });
+                fakeTabVisible.isVisible = true;
+                fakeTabInvisible = new TabModel(new FormModel(fakeFormJson), {
+                    id: 'tab-id-invisible',
+                    title: 'tab-title-invisible'
+                });
+                fakeTabInvisible.isVisible = false;
+                tabWidgetComponent.tabs.push(fakeTabVisible);
+                tabWidgetComponent.tabs.push(fakeTabInvisible);
             });
         }));
 
-        beforeEach(() => {
-            fakeTabVisible = new TabModel(new FormModel(fakeFormJson), {
-                id: 'tab-id-visible',
-                title: 'tab-title-visible'
-            });
-            fakeTabVisible.isVisible = true;
-            fakeTabInvisible = new TabModel(new FormModel(fakeFormJson), {
-                id: 'tab-id-invisible',
-                title: 'tab-title-invisible'
-            });
-            fakeTabInvisible.isVisible = false;
-            tabWidgetComponent.tabs.push(fakeTabVisible);
-            tabWidgetComponent.tabs.push(fakeTabInvisible);
-        });
-
-        afterEach(() => {
-            fixture.destroy();
-            TestBed.resetTestingModule();
-        });
-
         it('should show only visible tabs', () => {
             fixture.detectChanges();
             fixture.whenStable()

lib/core/userinfo/components/user-info.component.html

@@ -43,7 +43,7 @@
                                     <span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
                                 </div>
                                 <div class="adf-userinfo-detail">
-                                    <span class="adf-userinfo__secondary-info">
+                                    <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
                                         {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
                                         <span id="ecm-job-title" class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
                                     </span>

lib/core/userinfo/components/user-info.component.spec.ts

@@ -26,6 +26,7 @@ import { BpmUserService } from '../services/bpm-user.service';
 import { EcmUserService } from '../services/ecm-user.service';
 import { BpmUserModel } from './../models/bpm-user.model';
 import { UserInfoComponent } from './user-info.component';
+import { Observable } from 'rxjs/Observable';
 
 class FakeSanitazer extends DomSanitizer {
 
@@ -58,15 +59,22 @@ class FakeSanitazer extends DomSanitizer {
     }
 }
 
-declare let jasmine: any;
-
 describe('User info component', () => {
 
-    let userInfoComp: UserInfoComponent;
+    let component: UserInfoComponent;
     let fixture: ComponentFixture<UserInfoComponent>;
     let element: HTMLElement;
-    let stubAuthService: AuthenticationService;
+    let authService: AuthenticationService;
-    let stubContent: ContentService;
+    let contentService: ContentService;
+    let ecmUserService: EcmUserService;
+    let bpmUserService: BpmUserService;
+
+    function openUserInfo() {
+        fixture.detectChanges();
+        let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+        imageButton.click();
+        fixture.detectChanges();
+    }
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -78,18 +86,25 @@ describe('User info component', () => {
             ],
             providers: [
                 EcmUserService,
-                BpmUserService
+                BpmUserService,
+                ContentService
             ]
         }).compileComponents().then(() => {
             fixture = TestBed.createComponent(UserInfoComponent);
-            userInfoComp = fixture.componentInstance;
+            component = fixture.componentInstance;
             element = fixture.nativeElement;
 
-            stubAuthService = TestBed.get(AuthenticationService);
+            authService = TestBed.get(AuthenticationService);
-            stubContent = TestBed.get(ContentService);
+            ecmUserService = TestBed.get(EcmUserService);
+            bpmUserService = TestBed.get(BpmUserService);
+            contentService = TestBed.get(ContentService);
         });
     }));
 
+    afterEach(() => {
+        fixture.destroy();
+    });
+
     it('should not show any image if the user is not logged in', () => {
         expect(element.querySelector('#userinfo_container')).toBeDefined();
         expect(element.querySelector('#logged-user-img')).toBeNull();
@@ -104,107 +119,77 @@ describe('User info component', () => {
 
     describe('when user is logged on ecm', () => {
 
-        beforeEach(() => {
+        describe('ui ', () => {
-            spyOn(stubAuthService, 'isEcmLoggedIn').and.returnValue(true);
+
-            spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
+            beforeEach(() => {
-            jasmine.Ajax.install();
+                spyOn(authService, 'isEcmLoggedIn').and.returnValue(true);
+                spyOn(authService, 'isLoggedIn').and.returnValue(true);
+                spyOn(ecmUserService, 'getCurrentUserInfo').and.returnValue(Observable.of(fakeEcmEditedUser));
+            });
+
+            it('should show ecm only last name when user first name is null ', async(() => {
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                    imageButton.click();
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container')).toBeDefined();
+                    let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
+                    expect(ecmUsername).toBeDefined();
+                    expect(ecmUsername).not.toBeNull();
+                    expect(ecmUsername.nativeElement.textContent).not.toContain('fake-ecm-first-name');
+                    expect(ecmUsername.nativeElement.textContent).not.toContain('null');
+                });
+            }));
+
+            it('should show the username when showName attribute is true', async(() => {
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(component.showName).toBeTruthy();
+                    expect(element.querySelector('#adf-userinfo-ecm-name-display')).not.toBeNull();
+                });
+            }));
+
+            it('should hide the username when showName attribute is false', async(() => {
+                component.showName = false;
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#adf-userinfo-ecm-name-display')).toBeNull();
+                });
+            }));
+
+            it('should have the defined class to show the name on the right side', async(() => {
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container').classList).toContain('adf-userinfo-name-right');
+                });
+            }));
+
+            it('should not have the defined class to show the name on the left side', async(() => {
+                component.namePosition = 'left';
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container').classList).not.toContain('adf-userinfo-name-right');
+                });
+            }));
         });
 
-        afterEach(() => {
-            jasmine.Ajax.uninstall();
-        });
-
-        it('should show ecm only last name when user first name is null ', async(() => {
-            fixture.detectChanges();
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
-            });
-
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-                let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
-                imageButton.click();
-                fixture.detectChanges();
-                expect(element.querySelector('#userinfo_container')).toBeDefined();
-                let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
-                expect(ecmUsername).toBeDefined();
-                expect(ecmUsername).not.toBeNull();
-                expect(ecmUsername.nativeElement.textContent).not.toContain('fake-ecm-first-name');
-                expect(ecmUsername.nativeElement.textContent).not.toContain('null');
-            });
-        }));
-
-        it('should show the username when showName attribute is true', async(() => {
-            fixture.detectChanges();
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
-            });
-
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-                expect(userInfoComp.showName).toBeTruthy();
-                expect(element.querySelector('#adf-userinfo-ecm-name-display')).not.toBeNull();
-            });
-        }));
-
-        it('should hide the username when showName attribute is false', async(() => {
-            userInfoComp.showName = false;
-            fixture.detectChanges();
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
-            });
-
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-                expect(element.querySelector('#adf-userinfo-ecm-name-display')).toBeNull();
-            });
-        }));
-
-        it('should have the defined class to show the name on the right side', async(() => {
-            fixture.detectChanges();
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
-            });
-
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-                expect(element.querySelector('#userinfo_container').classList).toContain('adf-userinfo-name-right');
-            });
-        }));
-
-        it('should not have the defined class to show the name on the left side', async(() => {
-            userInfoComp.namePosition = 'left';
-            fixture.detectChanges();
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
-            });
-
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-                expect(element.querySelector('#userinfo_container').classList).not.toContain('adf-userinfo-name-right');
-            });
-        }));
-
         describe('and has image', () => {
 
             beforeEach(async(() => {
-                spyOn(stubContent, 'getContentUrl').and.returnValue('assets/images/ecmImg.gif');
+                spyOn(authService, 'isEcmLoggedIn').and.returnValue(true);
+                spyOn(authService, 'isLoggedIn').and.returnValue(true);
+                spyOn(ecmUserService, 'getCurrentUserInfo').and.returnValue(Observable.of(fakeEcmUser));
+                spyOn(contentService, 'getContentUrl').and.returnValue('assets/images/ecmImg.gif');
                 fixture.detectChanges();
-                jasmine.Ajax.requests.mostRecent().respondWith({
-                    status: 200,
-                    contentType: 'application/json',
-                    responseText: JSON.stringify({ entry: fakeEcmUser })
-                });
             }));
 
             it('should get the ecm current user image from the service', async(() => {
@@ -222,20 +207,22 @@ describe('User info component', () => {
             }));
 
             it('should display the current user image if user has avatarId', async(() => {
+                fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
                     imageButton.click();
                     fixture.detectChanges();
                     let loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
-                    expect(userInfoComp.ecmUser.avatarId).toBe('fake-avatar-id');
+                    expect(component.ecmUser.avatarId).toBe('fake-avatar-id');
                     expect(element.querySelector('#userinfo_container')).not.toBeNull();
                     expect(loggedImage).not.toBeNull();
                     expect(loggedImage.properties.src).toContain('assets/images/ecmImg.gif');
                 });
             }));
 
-            it('should get the ecm user informations from the service', () => {
+            it('should get the ecm user informations from the service', async(() => {
+                fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
@@ -252,18 +239,16 @@ describe('User info component', () => {
                     expect(ecmFullName.nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
                     expect(ecmJobTitle.nativeElement.textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
                 });
-            });
+            }));
         });
 
         describe('and has no image', () => {
 
             beforeEach(async(() => {
+                spyOn(authService, 'isEcmLoggedIn').and.returnValue(true);
+                spyOn(authService, 'isLoggedIn').and.returnValue(true);
+                spyOn(ecmUserService, 'getCurrentUserInfo').and.returnValue(Observable.of(fakeEcmUserNoImage));
                 fixture.detectChanges();
-                jasmine.Ajax.requests.mostRecent().respondWith({
-                    status: 200,
-                    contentType: 'application/json',
-                    responseText: JSON.stringify({ entry: fakeEcmUserNoImage })
-                });
                 fixture.whenStable().then(() => fixture.detectChanges());
             }));
 
@@ -290,7 +275,7 @@ describe('User info component', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     let pipe = new InitialUsernamePipe(new FakeSanitazer());
-                    expect(userInfoComp.ecmUser.avatarId).toBeNull();
+                    expect(component.ecmUser.avatarId).toBeNull();
                     expect(pipe.transform({
                         id: 13,
                         firstName: 'Wilbur',
@@ -305,24 +290,16 @@ describe('User info component', () => {
 
     describe('when user is logged on bpm', () => {
 
+        let getCurrentUserInfoStub;
+
         beforeEach(async(() => {
-            spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
+            spyOn(authService, 'isBpmLoggedIn').and.returnValue(true);
-            spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
+            spyOn(authService, 'isLoggedIn').and.returnValue(true);
-            jasmine.Ajax.install();
+            getCurrentUserInfoStub = spyOn(bpmUserService, 'getCurrentUserInfo').and.returnValue(Observable.of(fakeBpmUser));
         }));
 
-        afterEach(() => {
+        it('should show full name next the user image', async(() => {
-            jasmine.Ajax.uninstall();
-        });
-
-        it('should show full name next the user image', () => {
             fixture.detectChanges();
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify(fakeBpmUser)
-            });
-
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
                 let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
@@ -334,16 +311,10 @@ describe('User info component', () => {
                 expect(bpmUserName).not.toBeNull();
                 expect(bpmUserName.nativeElement.innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
             });
-        });
+        }));
 
-        it('should get the bpm current user image from the service', () => {
+        it('should get the bpm current user image from the service', async(() => {
             fixture.detectChanges();
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify(fakeBpmUser)
-            });
-
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
                 expect(element.querySelector('#userinfo_container')).not.toBeNull();
@@ -351,118 +322,93 @@ describe('User info component', () => {
                 expect(element.querySelector('#logged-user-img').getAttribute('src'))
                     .toContain('activiti-app/app/rest/admin/profile-picture');
             });
-        });
+        }));
 
-        it('should show last name if first name is null', () => {
+        it('should show last name if first name is null', async(() => {
-            fixture.detectChanges();
             let wrongBpmUser: BpmUserModel = new BpmUserModel({
                 firstName: null,
                 lastName: 'fake-last-name'
             });
-            userInfoComp.bpmUser = wrongBpmUser;
+            getCurrentUserInfoStub.and.returnValue(Observable.of(wrongBpmUser));
 
+            fixture.detectChanges();
             fixture.whenStable().then(() => {
-                fixture.detectChanges();
                 expect(element.querySelector('#userinfo_container')).toBeDefined();
-                expect(element.querySelector('#bpm-username')).not.toBeNull();
+                expect(element.querySelector('#adf-userinfo-bpm-name-display')).not.toBeNull();
-                expect(element.querySelector('#bpm-username').textContent).toContain('fake-last-name');
+                expect(element.querySelector('#adf-userinfo-bpm-name-display').textContent).toContain('fake-last-name');
-                expect(element.querySelector('#bpm-username').textContent).not.toContain('fake-bpm-first-name');
+                expect(element.querySelector('#adf-userinfo-bpm-name-display').textContent).not.toContain('fake-bpm-first-name');
 
             });
-        });
+        }));
 
-        it('should not show first name if it is null string', () => {
+        it('should not show first name if it is null string', async(() => {
-            fixture.detectChanges();
             let wrongFirstNameBpmUser: BpmUserModel = new BpmUserModel({
                 firstName: 'null',
                 lastName: 'fake-last-name'
             });
-            userInfoComp.bpmUser = wrongFirstNameBpmUser;
+            getCurrentUserInfoStub.and.returnValue(Observable.of(wrongFirstNameBpmUser));
 
+            fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
                 expect(element.querySelector('#userinfo_container')).toBeDefined();
-                expect(element.querySelector('#bpm-full-name')).toBeDefined();
+                expect(element.querySelector('#adf-userinfo-bpm-name-display')).toBeDefined();
-                expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-last-name');
+                expect(element.querySelector('#adf-userinfo-bpm-name-display').textContent).toContain('fake-last-name');
-                expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+                expect(element.querySelector('#adf-userinfo-bpm-name-display').textContent).not.toContain('null');
             });
-        });
+        }));
 
-        it('should not show last name if it is null string', () => {
+        it('should not show last name if it is null string', async(() => {
-            fixture.detectChanges();
             let wrongLastNameBpmUser: BpmUserModel = new BpmUserModel({
                 firstName: 'fake-first-name',
                 lastName: 'null'
             });
-            userInfoComp.bpmUser = wrongLastNameBpmUser;
+            getCurrentUserInfoStub.and.returnValue(Observable.of(wrongLastNameBpmUser));
+            fixture.detectChanges();
 
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
                 expect(element.querySelector('#userinfo_container')).toBeDefined();
-                expect(element.querySelector('#bpm-full-name')).toBeDefined();
+                expect(element.querySelector('#adf-userinfo-bpm-name-display')).toBeDefined();
-                expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-first-name');
+                expect(element.querySelector('#adf-userinfo-bpm-name-display').textContent).toContain('fake-first-name');
-                expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+                expect(element.querySelector('#adf-userinfo-bpm-name-display').textContent).not.toContain('null');
             });
-        });
+        }));
 
-        it('should not show the tabs', () => {
+        it('should not show the tabs', async(() => {
+            fixture.detectChanges();
+            let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+            imageButton.click();
             fixture.detectChanges();
-
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
+                expect(fixture.debugElement.query(By.css('#tab-group-env')).classes['adf-hide-tab']).toBeTruthy();
             });
-        });
+        }));
     });
 
     describe('when user is logged on bpm and ecm', () => {
 
-        beforeEach(async(() => {
+        let ecmUserInfoSpy;
-
-        }));
 
         beforeEach(async(() => {
-            spyOn(stubAuthService, 'isEcmLoggedIn').and.returnValue(true);
+            spyOn(authService, 'isEcmLoggedIn').and.returnValue(true);
-            spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
+            spyOn(authService, 'isBpmLoggedIn').and.returnValue(true);
-            spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
+            spyOn(authService, 'isLoggedIn').and.returnValue(true);
-            spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/images/ecmImg.gif');
+            spyOn(contentService, 'getContentUrl').and.returnValue('src/assets/images/ecmImg.gif');
-            jasmine.Ajax.install();
 
-            fixture.detectChanges();
+            ecmUserInfoSpy = spyOn(ecmUserService, 'getCurrentUserInfo').and.returnValue(Observable.of(fakeEcmUser));
-
+            spyOn(bpmUserService, 'getCurrentUserInfo').and.returnValue(Observable.of(fakeBpmUser));
-            jasmine.Ajax.requests.first().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify({ entry: fakeEcmUser })
-            });
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'json',
-                responseText: fakeBpmUser
-            });
         }));
 
-        beforeEach(() => {
+        it('should get the bpm user informations from the service', async(() => {
-            fixture.detectChanges();
+            openUserInfo();
-
-            let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
-            imageButton.click();
-
-            fixture.detectChanges();
-        });
-
-        afterEach(() => {
-            jasmine.Ajax.uninstall();
-        });
-
-        it('should get the bpm user informations from the service', () => {
             let bpmTab = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'))[1];
             bpmTab.triggerEventHandler('click', null);
             fixture.detectChanges();
-            let bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
-            let bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
-
             fixture.whenStable().then(() => {
+                let bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
+                let bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
                 expect(element.querySelector('#userinfo_container')).not.toBeNull();
                 expect(bpmUsername).not.toBeNull();
                 expect(bpmImage).not.toBeNull();
@@ -470,12 +416,14 @@ describe('User info component', () => {
                 expect(bpmUsername.nativeElement.textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
                 expect(fixture.debugElement.query(By.css('#bpm-tenant')).nativeElement.textContent).toContain('fake-tenant-name');
             });
-        });
+        }));
 
-        it('should get the ecm user informations from the service', () => {
+        it('should get the ecm user informations from the service', async(() => {
+            openUserInfo();
             let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
             let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
 
+            fixture.detectChanges();
             fixture.whenStable().then(() => {
                 expect(element.querySelector('#userinfo_container')).toBeDefined();
                 expect(ecmUsername).not.toBeNull();
@@ -484,26 +432,29 @@ describe('User info component', () => {
                 expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
                 expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
             });
-        });
+        }));
 
-        it('should show the ecm image if exists', () => {
+        it('should show the ecm image if exists', async(() => {
+            openUserInfo();
             expect(element.querySelector('#userinfo_container')).toBeDefined();
             expect(element.querySelector('#logged-user-img')).toBeDefined();
             expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/images/ecmImg.gif');
-        });
+        }));
 
-        it('should show the bpm image if ecm does not have it', () => {
+        it('should show the ecm initials if the ecm user has no image', async(() => {
-            userInfoComp.ecmUserImage = null;
+            ecmUserInfoSpy.and.returnValue(Observable.of(fakeEcmUserNoImage));
             fixture.detectChanges();
+
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
                 expect(element.querySelector('#userinfo_container')).toBeDefined();
-                expect(element.querySelector('#logged-user-img')).toBeDefined();
+                expect(element.querySelector('#logged-user-img')).toBeNull();
-                expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('rest/admin/profile-picture');
+                expect(element.querySelector('#user-initials-image').textContent).toContain('ff');
             });
-        });
+        }));
 
         it('should show the tabs for the env', () => {
+            openUserInfo();
             let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
             let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
 
@@ -513,6 +464,7 @@ describe('User info component', () => {
         });
 
         it('should not close the menu when a tab is clicked', () => {
+            openUserInfo();
             let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
             let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
 

lib/core/userinfo/components/user-info.component.ts

@@ -77,8 +77,7 @@ export class UserInfoComponent implements OnInit {
                 .subscribe((res) => {
                     this.ecmUser = new EcmUserModel(res);
                     this.getEcmAvatar();
-                }
+                });
-                );
         } else {
             this.ecmUser = null;
             this.ecmUserImage = null;

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

@@ -65,7 +65,7 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     ngOnInit() {
-        this.element = (<HTMLElement> this.el.nativeElement).querySelector('#viewer-image');
+        this.element = <HTMLElement> this.el.nativeElement.querySelector('#viewer-image');
 
         if (this.element) {
             this.element.addEventListener('mousedown', this.onMouseDown.bind(this));

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

@@ -186,106 +186,113 @@ export class ViewerComponent implements OnChanges {
             if (!this.isSourceDefined()) {
                 throw new Error('A content source attribute value is missing.');
             }
-
+            if (this.blobFile) {
-            return new Promise((resolve, reject) => {
+                this.setUpBlobData();
-                if (this.blobFile) {
+            } else if (this.urlFile) {
-                    this.displayName = this.getDisplayName('Unknown');
+                this.setUpUrlFile();
-                    this.isLoading = true;
+            } else if (this.fileNodeId) {
-                    this.mimeType = this.blobFile.type;
+                this.isLoading = true;
-                    this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
+                this.apiService.getInstance().nodes.getNodeInfo(this.fileNodeId).then(
-
+                    (data: MinimalNodeEntryEntity) => {
-                    this.allowDownload = false;
+                        this.setUpNodeFile(data);
-                    // TODO: wrap blob into the data url and allow downloading
+                    },
-
+                    (error) => {
-                    this.extensionChange.emit(this.mimeType);
-                    this.isLoading = false;
-                    this.scrollTop();
-                    resolve();
-                } else if (this.urlFile) {
-                    this.isLoading = true;
-                    let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
-                    this.displayName = this.getDisplayName(filenameFromUrl);
-                    this.extension = this.getFileExtension(filenameFromUrl);
-                    this.urlFileContent = this.urlFile;
-
-                    this.downloadUrl = this.urlFile;
-                    this.fileName = this.displayName;
-
-                    this.viewerType = this.urlFileViewer || this.getViewerTypeByExtension(this.extension);
-                    if (this.viewerType === 'unknown') {
-                        this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
-                    }
-
-                    this.extensionChange.emit(this.extension);
-                    this.isLoading = false;
-                    this.scrollTop();
-                    resolve();
-                } else if (this.fileNodeId) {
-                    this.isLoading = true;
-                    this.apiService.getInstance().nodes.getNodeInfo(this.fileNodeId).then(
-                        (data: MinimalNodeEntryEntity) => {
-                            this.mimeType = data.content.mimeType;
-                            this.displayName = this.getDisplayName(data.name);
-                            this.urlFileContent = this.apiService.getInstance().content.getContentUrl(data.id);
-                            this.extension = this.getFileExtension(data.name);
-
-                            this.fileName = data.name;
-                            this.downloadUrl = this.apiService.getInstance().content.getContentUrl(data.id, true);
-
-                            this.viewerType = this.getViewerTypeByExtension(this.extension);
-                            if (this.viewerType === 'unknown') {
-                                this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
-                            }
-
-                            if (this.viewerType === 'unknown') {
-                                this.displayNodeRendition(data.id);
-                            } else {
-                                this.isLoading = false;
-                            }
-
-                            this.extensionChange.emit(this.extension);
-                            this.sidebarTemplateContext.node = data;
-                            this.scrollTop();
-                            resolve();
-                        },
-                        (error) => {
-                            this.isLoading = false;
-                            reject(error);
-                            this.logService.error('This node does not exist');
-                        }
-                    );
-                } else if (this.sharedLinkId) {
-                    this.isLoading = true;
-
-                    this.apiService.sharedLinksApi.getSharedLink(this.sharedLinkId).then(details => {
-                        this.mimeType = details.entry.content.mimeType;
-                        this.displayName = this.getDisplayName(details.entry.name);
-                        this.extension = this.getFileExtension(details.entry.name);
-                        this.fileName = details.entry.name;
-
-                        this.urlFileContent = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, false);
-                        this.downloadUrl = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, true);
-
-                        this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
-                        if (this.viewerType === 'unknown') {
-                            this.viewerType = this.getViewerTypeByExtension(this.extension);
-                        }
-
-                        if (this.viewerType === 'unknown') {
-                            this.displaySharedLinkRendition(this.sharedLinkId);
-                        } else {
-                            this.isLoading = false;
-                        }
-
-                        this.extensionChange.emit(this.extension);
                         this.isLoading = false;
-                        resolve();
+                        this.logService.error('This node does not exist');
-                    });
+                    }
-                }
+                );
-            });
+            } else if (this.sharedLinkId) {
+                this.isLoading = true;
+
+                this.apiService.sharedLinksApi.getSharedLink(this.sharedLinkId).then(details => {
+                    this.setUpSharedLinkFile(details);
+                });
+            }
         }
     }
 
+    private setUpBlobData() {
+        this.displayName = this.getDisplayName('Unknown');
+        this.isLoading = true;
+        this.mimeType = this.blobFile.type;
+        this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
+
+        this.allowDownload = false;
+        // TODO: wrap blob into the data url and allow downloading
+
+        this.extensionChange.emit(this.mimeType);
+        this.isLoading = false;
+        this.scrollTop();
+    }
+
+    private setUpUrlFile() {
+        this.isLoading = true;
+        let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
+        this.displayName = this.getDisplayName(filenameFromUrl);
+        this.extension = this.getFileExtension(filenameFromUrl);
+        this.urlFileContent = this.urlFile;
+
+        this.downloadUrl = this.urlFile;
+        this.fileName = this.displayName;
+
+        this.viewerType = this.urlFileViewer || this.getViewerTypeByExtension(this.extension);
+        if (this.viewerType === 'unknown') {
+            this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
+        }
+
+        this.extensionChange.emit(this.extension);
+        this.isLoading = false;
+        this.scrollTop();
+    }
+
+    private setUpNodeFile(data: MinimalNodeEntryEntity) {
+        this.mimeType = data.content.mimeType;
+        this.displayName = this.getDisplayName(data.name);
+        this.urlFileContent = this.apiService.getInstance().content.getContentUrl(data.id);
+        this.extension = this.getFileExtension(data.name);
+
+        this.fileName = data.name;
+        this.downloadUrl = this.apiService.getInstance().content.getContentUrl(data.id, true);
+
+        this.viewerType = this.getViewerTypeByExtension(this.extension);
+        if (this.viewerType === 'unknown') {
+            this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
+        }
+
+        if (this.viewerType === 'unknown') {
+            this.displayNodeRendition(data.id);
+        } else {
+            this.isLoading = false;
+        }
+
+        this.extensionChange.emit(this.extension);
+        this.sidebarTemplateContext.node = data;
+        this.scrollTop();
+    }
+
+    private setUpSharedLinkFile(details: any) {
+        this.mimeType = details.entry.content.mimeType;
+        this.displayName = this.getDisplayName(details.entry.name);
+        this.extension = this.getFileExtension(details.entry.name);
+        this.fileName = details.entry.name;
+
+        this.urlFileContent = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, false);
+        this.downloadUrl = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, true);
+
+        this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
+        if (this.viewerType === 'unknown') {
+            this.viewerType = this.getViewerTypeByExtension(this.extension);
+        }
+
+        if (this.viewerType === 'unknown') {
+            this.displaySharedLinkRendition(this.sharedLinkId);
+        } else {
+            this.isLoading = false;
+        }
+        this.extensionChange.emit(this.extension);
+        this.isLoading = false;
+    }
+
     toggleSidebar() {
         this.showSidebar = !this.showSidebar;
         if (this.showSidebar && this.fileNodeId) {

lib/insights/diagram/components/tooltip/diagram-tooltip.component.ts

@@ -103,7 +103,7 @@ export class DiagramTooltipComponent implements AfterViewInit, OnDestroy {
 
         if (this.strategy === STRATEGY.ELEMENT ) {
             props = event.target.getBoundingClientRect();
-        }else {
+        } else {
             props = {top: (event.pageY - 150), left: event.pageX , width: event.layerX, height: 50};
         }
 

lib/package.json

@@ -77,7 +77,7 @@
     "moment-es6": "^1.0.0",
     "ng-packagr": "2.0.0-rc.4",
     "ng2-charts": "1.6.0",
-    "pdfjs-dist": "1.5.404",
+    "pdfjs-dist": "2.0.265",
     "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.5.2",
@@ -85,7 +85,7 @@
     "zone.js": "0.8.14"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "5.1.1",
+    "@angular/compiler-cli": "^5.2.0",
     "@types/hammerjs": "2.0.35",
     "@types/jasmine": "^2.5.35",
     "@types/node": "6.0.90",
@@ -139,7 +139,7 @@
     "traceur": "0.0.91",
     "ts-loader": "3.3.0",
     "ts-node": "2.0.0",
-    "tslint": "5.7.0",
+    "tslint": "5.9.1",
     "tslint-loader": "3.5.3",
     "typescript": "2.6.1",
     "uglifyjs-webpack-plugin": "1.1.6",

lib/tslint.json

@@ -21,6 +21,12 @@
         "curly": true,
         "eofline": true,
         "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs",
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
         "indent": [
             true,
             "spaces"
@@ -32,10 +38,17 @@
             true,
             180
         ],
+        "member-access": false,
         "member-ordering": [
             true,
-            "static-before-instance",
+      {
-            "variables-before-functions"
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
         ],
         "no-any": false,
         "no-arg": true,
@@ -54,6 +67,7 @@
         "no-construct": true,
         "no-constructor-vars": false,
         "no-debugger": true,
+        "no-duplicate-super": true,
         "no-duplicate-variable": true,
         "no-empty": false,
         "no-eval": true,
@@ -82,7 +96,10 @@
             "avoid-escape"
         ],
         "radix": true,
-        "semicolon": true,
+        "semicolon": [
+          true,
+          "always"
+        ],
         "switch-default": true,
         "trailing-comma": [
             true,
@@ -152,7 +169,6 @@
         "use-pipe-transform-interface": true,
         "component-class-suffix": true,
         "directive-class-suffix": true,
-        "no-access-missing-member": false,
         "adf-file-name": true,
         "adf-class-name": true,
         "adf-prefix-name": true,