[ADF-3299] and [ADF-3300] upgrade to Angular and Material 6 (#3579)

* upgrade to HttpClient

* upgrade to Renderer2

* upgrade Document reference

* remove useless test with deprecated ReflectiveInjector

* upgrade to latest typescript

* upgrade libs

* upgrade package scripts

* remove rxjs blacklists and duplicate rules

* add rxjs compat to help with migration

* fix breaking changes

* fix breaking changes in material

* fix breaking changes (material 6)

* upgrade rxjs, ngx-translate and flex layout

* update unit tests

* restore providers

* upgrade deprecated Observable.error

* rebase
fix first configuration problems

* fix style issues commented

* fix core build

* fix lib template errors

* move lib test execution in angular.json

* ignore

* karma conf files

* fix import statement test

* single run option

* update packages reporter

* restore report

* increase timeout

* improve karma conf test configuration

* fix test issues about lint

* fix test analytics

* fix process service test

* content service fix test

* fix logout directive test

* fix core test

* fix build

* update node-sass to latest

* update angular cli dependencies

* improve build script

create directorites and move files only if previous command succeded

* upgrade individual libs to 6.0

* remove old webpack files

* revert sass change

* fix type issues
fix style issues

* fix tslint demo shell issue

* fix peerdependencies

* fix test e2e BC

* package upate

* fix style import issue

* extract-text-webpack-plugin beta

* fix test dist build command

* remove alpha js-api

* fix tslint issue
add banner tslint rule

* upload service fix

* change BC script

* fix test dist script

* increase demo shell timeout test

* verbose copy

* path absolute

* fix script bc

* fix copy part

* fix path warning
fix monaco editor

* remove duplicate header

* remove unused import

* fix align and check ago tests

* add missing import

* fix notification button selector

* [ANGULAR6] fixed core tests

* fix CS test

* fix cs test step 2

* increase travis_wait for dist

* fix attachment PS

* fix checklist test

* use pdf min

lib/core/directives/highlight.directive.ts

@@ -17,7 +17,7 @@
 
 /* tslint:disable:no-input-rename  */
 
-import { Directive, ElementRef, Input, Renderer } from '@angular/core';
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 import { HighlightTransformService, HightlightTransformResult } from '../services/highlight-transform.service';
 
 @Directive({
@@ -39,7 +39,7 @@ export class HighlightDirective {
 
     constructor(
         private el: ElementRef,
-        private renderer: Renderer,
+        private renderer: Renderer2,
         private highlightTransformService: HighlightTransformService) { }
 
     public highlight(search = this.search, selector = this.selector, classToApply = this.classToApply) {
@@ -49,7 +49,7 @@ export class HighlightDirective {
             elements.forEach((element) => {
                 const result: HightlightTransformResult = this.highlightTransformService.highlight(element.innerHTML, search, classToApply);
                 if (result.changed) {
-                    this.renderer.setElementProperty(element, 'innerHTML', result.text);
+                    this.renderer.setProperty(element, 'innerHTML', result.text);
                 }
             });
         }

lib/core/directives/logout.directive.spec.ts

@@ -19,7 +19,7 @@ import { Component, ContentChildren } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Observable } from 'rxjs/Observable';
+import { of, throwError } from 'rxjs';
 import { AuthenticationService } from '../services';
 import { setupTestBed } from '../testing/setupTestBed';
 import { CoreModule } from '../core.module';
@@ -60,8 +60,8 @@ describe('LogoutDirective', () => {
         });
 
         it('should redirect to login on click', () => {
-            spyOn(router, 'navigate').and.callThrough();
-            spyOn(authService, 'logout').and.returnValue(Observable.of(true));
+            spyOn(router, 'navigate');
+            spyOn(authService, 'logout').and.returnValue(of(true));
 
             const button = fixture.nativeElement.querySelector('button');
             button.click();
@@ -71,8 +71,8 @@ describe('LogoutDirective', () => {
         });
 
         it('should redirect to login even on logout error', () => {
-            spyOn(router, 'navigate').and.callThrough();
-            spyOn(authService, 'logout').and.returnValue(Observable.throw('err'));
+            spyOn(router, 'navigate');
+            spyOn(authService, 'logout').and.returnValue(throwError('err'));
 
             const button = fixture.nativeElement.querySelector('button');
             button.click();
@@ -116,8 +116,8 @@ describe('LogoutDirective', () => {
         });
 
         it('should redirect to the the input redirectUri on click if present', () => {
-            spyOn(router, 'navigate').and.callThrough();
-            spyOn(authService, 'logout').and.returnValue(Observable.of(true));
+            spyOn(router, 'navigate');
+            spyOn(authService, 'logout').and.returnValue(of(true));
 
             const button = fixture.nativeElement.querySelector('button');
             button.click();
@@ -128,7 +128,7 @@ describe('LogoutDirective', () => {
 
     });
 
-    describe('redirectUri', () => {
+    describe('enabelRedirect', () => {
 
         @Component({
             selector: 'adf-test-component',
@@ -161,8 +161,8 @@ describe('LogoutDirective', () => {
         });
 
         it('should not redirect if enabelRedirect is false', () => {
-            spyOn(router, 'navigate').and.callThrough();
-            spyOn(authService, 'logout').and.returnValue(Observable.of(true));
+            spyOn(router, 'navigate');
+            spyOn(authService, 'logout').and.returnValue(of(true));
             const button = fixture.nativeElement.querySelector('button');
             button.click();
 

lib/core/directives/node-delete.directive.ts

@@ -19,12 +19,10 @@
 
 import { Directive, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output } from '@angular/core';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, DeletedNodeEntity, DeletedNodeMinimalEntry } from 'alfresco-js-api';
-import { Observable } from 'rxjs/Observable';
+import { Observable, forkJoin, from, of } from 'rxjs';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
 import { TranslationService } from '../services/translation.service';
-import 'rxjs/add/observable/fromPromise';
-import 'rxjs/observable/forkJoin';
-import 'rxjs/add/operator/catch';
+import { map, catchError } from 'rxjs/operators';
 
 interface ProcessedNodeData {
     entry: MinimalNodeEntryEntity | DeletedNodeMinimalEntry;
@@ -93,7 +91,7 @@ export class NodeDeleteDirective implements OnChanges {
 
             const batch = this.getDeleteNodesBatch(selection);
 
-            Observable.forkJoin(...batch)
+            forkJoin(...batch)
                 .subscribe((data: ProcessedNodeData[]) => {
                     const processedItems: ProcessStatus = this.processStatus(data);
                     const message = this.getMessage(processedItems);
@@ -118,17 +116,16 @@ export class NodeDeleteDirective implements OnChanges {
             promise = this.alfrescoApiService.nodesApi.deleteNode(id, { permanent: this.permanent });
         }
 
-        return Observable.fromPromise(promise)
-            .map(() => ({
+        return from(promise).pipe(
+            map(() => ({
                 entry: node.entry,
                 status: 1
+            })),
+            catchError(() => of({
+                entry: node.entry,
+                status: 0
             }))
-            .catch((error: any) => {
-                return Observable.of({
-                    entry: node.entry,
-                    status: 0
-                });
-            });
+        );
     }
 
     private processStatus(data): ProcessStatus {

lib/core/directives/node-favorite.directive.spec.ts

@@ -175,8 +175,8 @@ describe('NodeFavoriteDirective', () => {
         let addFavoriteSpy;
 
         beforeEach(() => {
-            removeFavoriteSpy = spyOn(alfrescoApiService.getInstance().core.favoritesApi, 'removeFavoriteSite');
-            addFavoriteSpy = spyOn(alfrescoApiService.getInstance().core.favoritesApi, 'addFavorite');
+            removeFavoriteSpy = spyOn(alfrescoApiService.getInstance().core.favoritesApi, 'removeFavoriteSite').and.callThrough();
+            addFavoriteSpy = spyOn(alfrescoApiService.getInstance().core.favoritesApi, 'addFavorite').and.callThrough();
         });
 
         afterEach(() => {

lib/core/directives/node-favorite.directive.ts

@@ -19,10 +19,9 @@
 
 import { Directive, EventEmitter, HostListener, Input, OnChanges, Output } from '@angular/core';
 import { FavoriteBody, MinimalNodeEntity } from 'alfresco-js-api';
-import { Observable } from 'rxjs/Observable';
+import { Observable, from, forkJoin, of } from 'rxjs';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
-import 'rxjs/add/observable/fromPromise';
-import 'rxjs/observable/forkJoin';
+import { catchError, map } from 'rxjs/operators';
 
 @Directive({
     selector: '[adf-node-favorite]',
@@ -71,10 +70,10 @@ export class NodeFavoriteDirective implements OnChanges {
                 // shared files have nodeId
                 const id = selected.entry.nodeId || selected.entry.id;
 
-                return Observable.fromPromise(this.alfrescoApiService.favoritesApi.removeFavoriteSite('-me-', id));
+                return from(this.alfrescoApiService.favoritesApi.removeFavoriteSite('-me-', id));
             });
 
-            Observable.forkJoin(batch).subscribe(
+            forkJoin(batch).subscribe(
                 () => {
                     this.favorites.map(selected => selected.entry.isFavorite = false);
                     this.toggle.emit();
@@ -87,7 +86,7 @@ export class NodeFavoriteDirective implements OnChanges {
             const notFavorite = this.favorites.filter((node) => !node.entry.isFavorite);
             const body: FavoriteBody[] = notFavorite.map((node) => this.createFavoriteBody(node));
 
-            Observable.fromPromise(this.alfrescoApiService.favoritesApi.addFavorite('-me-', <any> body))
+            from(this.alfrescoApiService.favoritesApi.addFavorite('-me-', <any> body))
                 .subscribe(
                     () => {
                         notFavorite.map(selected => selected.entry.isFavorite = true);
@@ -107,7 +106,7 @@ export class NodeFavoriteDirective implements OnChanges {
         const result = this.diff(selection, this.favorites);
         const batch = this.getProcessBatch(result);
 
-        Observable.forkJoin(batch).subscribe((data) => {
+        forkJoin(batch).subscribe(data => {
             this.favorites.push(...data);
         });
     }
@@ -129,7 +128,7 @@ export class NodeFavoriteDirective implements OnChanges {
 
         // ACS 6.x with 'isFavorite' include
         if (node && node.hasOwnProperty('isFavorite')) {
-            return Observable.of(selected);
+            return of(selected);
         }
 
         // ACS 5.x and 6.x without 'isFavorite' include
@@ -139,8 +138,8 @@ export class NodeFavoriteDirective implements OnChanges {
 
         const promise = this.alfrescoApiService.favoritesApi.getFavorite('-me-', id);
 
-        return Observable.from(promise)
-            .map(() => ({
+        return from(promise).pipe(
+            map(() => ({
                 entry: {
                     id,
                     isFolder,
@@ -148,9 +147,9 @@ export class NodeFavoriteDirective implements OnChanges {
                     name,
                     isFavorite: true
                 }
-            }))
-            .catch(() => {
-                return Observable.of({
+            })),
+            catchError(() => {
+                return of({
                     entry: {
                         id,
                         isFolder,
@@ -159,7 +158,8 @@ export class NodeFavoriteDirective implements OnChanges {
                         isFavorite: false
                     }
                 });
-            });
+            })
+        );
     }
 
     private createFavoriteBody(node): FavoriteBody {

lib/core/directives/node-restore.directive.ts

@@ -19,12 +19,10 @@
 
 import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 import { DeletedNodeEntry, DeletedNodesPaging, PathInfoEntity } from 'alfresco-js-api';
-import { Observable } from 'rxjs/Observable';
+import { Observable, forkJoin, from, of } from 'rxjs';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
 import { TranslationService } from '../services/translation.service';
-import 'rxjs/add/observable/from';
-import 'rxjs/add/observable/zip';
-import 'rxjs/add/operator/mergeMap';
+import { tap, mergeMap, map, catchError } from 'rxjs/operators';
 
 export class RestoreMessageModel {
     message: string;
@@ -69,28 +67,27 @@ export class NodeRestoreDirective {
 
         if (selection.length && nodesWithPath.length) {
 
-            this.restoreNodesBatch(nodesWithPath)
-                .do((restoredNodes) => {
+            this.restoreNodesBatch(nodesWithPath).pipe(
+                tap(restoredNodes => {
                     const status = this.processStatus(restoredNodes);
 
                     this.restoreProcessStatus.fail.push(...status.fail);
                     this.restoreProcessStatus.success.push(...status.success);
-                })
-                .mergeMap(() => this.getDeletedNodes())
-                .subscribe(
-                    (deletedNodesList: any) => {
-                        const { entries: nodelist } = deletedNodesList.list;
-                        const { fail: restoreErrorNodes } = this.restoreProcessStatus;
-                        const selectedNodes = this.diff(restoreErrorNodes, selection, false);
-                        const remainingNodes = this.diff(selectedNodes, nodelist);
+                }),
+                mergeMap(() => this.getDeletedNodes())
+            )
+            .subscribe(deletedNodesList => {
+                const { entries: nodelist } = deletedNodesList.list;
+                const { fail: restoreErrorNodes } = this.restoreProcessStatus;
+                const selectedNodes = this.diff(restoreErrorNodes, selection, false);
+                const remainingNodes = this.diff(selectedNodes, nodelist);
 
-                        if (!remainingNodes.length) {
-                            this.notification();
-                        } else {
-                            this.recover(remainingNodes);
-                        }
-                    }
-                );
+                if (!remainingNodes.length) {
+                    this.notification();
+                } else {
+                    this.recover(remainingNodes);
+                }
+            });
         } else {
             this.restoreProcessStatus.fail.push(...selection);
             this.notification();
@@ -99,7 +96,7 @@ export class NodeRestoreDirective {
     }
 
     private restoreNodesBatch(batch: DeletedNodeEntry[]): Observable<DeletedNodeEntry[]> {
-        return Observable.forkJoin(batch.map((node) => this.restoreNode(node)));
+        return forkJoin(batch.map((node) => this.restoreNode(node)));
     }
 
     private getNodesWithPath(selection): DeletedNodeEntry[] {
@@ -110,7 +107,7 @@ export class NodeRestoreDirective {
         const promise = this.alfrescoApiService.getInstance()
             .core.nodesApi.getDeletedNodes({ include: ['path'] });
 
-        return Observable.from(promise);
+        return from(promise);
     }
 
     private restoreNode(node): Observable<any> {
@@ -118,20 +115,21 @@ export class NodeRestoreDirective {
 
         const promise = this.alfrescoApiService.getInstance().nodes.restoreNode(entry.id);
 
-        return Observable.from(promise)
-            .map(() => ({
+        return from(promise).pipe(
+            map(() => ({
                 status: 1,
                 entry
-            }))
-            .catch((error) => {
+            })),
+            catchError((error) => {
                 const { statusCode } = (JSON.parse(error.message)).error;
 
-                return Observable.of({
+                return of({
                     status: 0,
                     statusCode,
                     entry
                 });
-            });
+            })
+        );
     }
 
     private diff(selection, list, fromList = true): any {

lib/core/directives/upload.directive.ts

@@ -17,7 +17,7 @@
 
 /* tslint:disable:no-input-rename  */
 
-import { Directive, ElementRef, HostListener, Input, NgZone, OnDestroy, OnInit, Renderer } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { FileInfo, FileUtils } from '../utils/file-utils';
 
 @Directive({
@@ -57,13 +57,15 @@ export class UploadDirective implements OnInit, OnDestroy {
     private upload: HTMLInputElement;
     private element: HTMLElement;
 
-    constructor(private el: ElementRef, private renderer: Renderer, private ngZone: NgZone) {
+    constructor(private el: ElementRef, private renderer: Renderer2, private ngZone: NgZone) {
         this.element = el.nativeElement;
     }
 
     ngOnInit() {
         if (this.isClickMode() && this.renderer) {
-            this.upload = this.renderer.createElement(this.el.nativeElement.parentNode, 'input') as HTMLInputElement;
+            let inputUpload = this.renderer.createElement('input');
+            this.upload = this.el.nativeElement.parentElement.appendChild(inputUpload);
+
             this.upload.type = 'file';
             this.upload.style.display = 'none';
             this.upload.addEventListener('change', e => this.onSelectFiles(e));