[ADF-2753] New error component (#3336)

* [ADF-1938] Overflowing text in reports section fidex

* [ADF-1938] Long names in report section now fit

* [ADF-1938] Reverted changes in container widget

* [ADF-2753] New error component created

* [ADF-2753] Unit test for Error Content Component

* Deleting unused files

* Deleting unused files

* Deleting unused files

* [ADF-2753] Documentation added

* [ADF-2753] Fixed minor bugs

* [ADF-2753] Authentication not needed to view error

* add error handler

* tslint fix

* router app component

* remove unused import

* fix import modules

* limit to 404

* destroy fixture after any test

* misspelling error

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

@@ -16,30 +16,40 @@
  */
 
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
-import { SettingsService, PageTitleService, StorageService } from '@alfresco/adf-core';
+import { AlfrescoApiService, SettingsService, PageTitleService, StorageService } from '@alfresco/adf-core';
+import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit {
 
     constructor(private settingsService: SettingsService,
                 private storage: StorageService,
-                private pageTitleService: PageTitleService) {
+                private pageTitleService: PageTitleService,
+                private alfrescoApiService: AlfrescoApiService,
+                private router: Router) {
     }
 
-  ngOnInit() {
-    this.setProvider();
+    ngOnInit() {
+        this.setProvider();
 
-    this.pageTitleService.setTitle('title');
-  }
+        this.pageTitleService.setTitle('title');
 
-  private setProvider() {
-    if (this.storage.hasItem(`providers`)) {
-      this.settingsService.setProviders(this.storage.getItem(`providers`));
+        this.alfrescoApiService.getInstance().on('error', (error) => {
+
+            if (error.status === '404') {
+                this.router.navigate(['/error', error.status]);
+            }
+        });
+    }
+
+    private setProvider() {
+        if (this.storage.hasItem(`providers`)) {
+            this.settingsService.setProviders(this.storage.getItem(`providers`));
+        }
     }
-  }
 }

demo-shell/src/app/app.routes.ts

@@ -17,7 +17,7 @@
 
 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from '@alfresco/adf-core';
+import { AuthGuard, AuthGuardBpm, AuthGuardEcm, ErrorContentComponent } from '@alfresco/adf-core';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 import { LoginComponent } from './components/login/login.component';
 import { SettingsComponent } from './components/settings/settings.component';
@@ -51,7 +51,7 @@ import { BlobPreviewComponent } from './components/blob-preview/blob-preview.com
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'settings', component: SettingsComponent },
-    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ], outlet: 'overlay' },
+    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [AuthGuardEcm], outlet: 'overlay' },
     { path: 'preview/blob', component: BlobPreviewComponent, outlet: 'overlay', pathMatch: 'full' },
     { path: 'preview/s/:id', component: SharedLinkViewComponent },
     {
@@ -190,7 +190,16 @@ export const appRoutes: Routes = [
             {
                 path: 'datatable-lazy',
                 loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
+            },
+            {
+                path: 'error/:id',
+                component: ErrorContentComponent
+            },
+            {
+                path: '**',
+                redirectTo: 'error/404'
             }
+
         ]
     }
 ];

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

@@ -277,9 +277,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    onNavigationError(err: any) {
-        if (err) {
-            this.errorMessage = err.message || 'Navigation error';
+    onNavigationError(error: any) {
+        if (error) {
+            this.router.navigate(['/error', error.status]);
         }
     }