feat(ui): migrate to angular 11 (#5576)

ui/package.json

@@ -11,10 +11,6 @@
     "ng": "ng",
     "start": "ng serve -c development",
     "test": "ng lint && ng test --watch false --code-coverage",
-    "test:model": "ng test --include src/app/model --watch false --code-coverage",
-    "test:shared": "ng test --include src/app/shared --watch false --code-coverage",
-    "test:views": "ng test --include src/app/views --watch false --code-coverage",
-    "test:store": "ng test --include src/app/store --watch false --code-coverage",
     "e2e": "testcafe chromium:headless ./e2e/tests/* -S -s screenshots",
     "doc": "./node_modules/.bin/compodoc -p tsconfig.json -s",
     "build:prod": "ng build --prod",
@@ -35,15 +31,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "10.1.1",
+    "@angular/animations": "11.0.2",
     "@angular/cdk": "9.2.1",
-    "@angular/common": "10.1.1",
-    "@angular/compiler": "10.1.1",
-    "@angular/core": "10.1.1",
-    "@angular/forms": "10.1.1",
-    "@angular/platform-browser": "10.1.1",
-    "@angular/platform-browser-dynamic": "10.1.1",
-    "@angular/router": "10.1.1",
+    "@angular/common": "11.0.2",
+    "@angular/compiler": "11.0.2",
+    "@angular/core": "11.0.2",
+    "@angular/forms": "11.0.2",
+    "@angular/platform-browser": "11.0.2",
+    "@angular/platform-browser-dynamic": "11.0.2",
+    "@angular/router": "11.0.2",
     "@icholy/duration": "5.0.0",
     "@ngui/auto-complete": "3.0.0",
     "@ngx-translate/core": "12.1.2",
@@ -52,7 +48,7 @@
     "@ngxs/logger-plugin": "3.7.0",
     "@ngxs/store": "3.7.0",
     "@richardlt/ng2-semantic-ui": "0.10.0-alpha.6-fork-5",
-    "@swimlane/ngx-charts": "14.0.0",
+    "@swimlane/ngx-charts": "16.0.0",
     "@types/dagre-d3": "0.4.38",
     "@types/js-yaml": "3.12.2",
     "@types/zxcvbn": "4.4.0",
@@ -98,31 +94,31 @@
     "string-format-obj": "1.1.1",
     "ts-helpers": "1.1.2",
     "tslib": "2.0.0",
-    "zone.js": "~0.10.2",
+    "zone.js": "0.11.3",
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "9.1.0",
-    "@angular-devkit/build-angular": "0.1001.1",
-    "@angular/cli": "10.1.1",
-    "@angular/compiler-cli": "10.1.1",
+    "@angular-devkit/build-angular": "0.1100.2",
+    "@angular/cli": "11.0.2",
+    "@angular/compiler-cli": "11.0.2",
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-conventional": "8.3.4",
     "@compodoc/compodoc": "1.1.11",
     "@sentry/cli": "1.37.4",
     "@types/codemirror": "0.0.81",
     "@types/d3": "5.9.2",
     "@types/dagre": "0.7.40",
-    "@types/jasmine": "3.3.8",
+    "@types/jasmine": "3.6.0",
     "@types/jasminewd2": "2.0.8",
     "@types/lodash-es": "4.17.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
+    "@types/node": "12.11.1",
+    "codelyzer": "6.0.0",
     "copy-webpack-plugin": "4.6.0",
     "husky": "3.0.5",
-    "jasmine-core": "3.5.0",
+    "jasmine-core": "3.6.0",
     "jasmine-spec-reporter": "5.0.0",
-    "karma": "5.0.0",
+    "karma": "5.1.1",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.2",
     "karma-jasmine": "4.0.0",

ui/src/app/app.component.spec.ts

@@ -6,6 +6,11 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { Store } from '@ngxs/store';
 import { ToasterModule } from 'angular2-toaster-sgu';
+import { EventService } from 'app/event.service';
+import { MonitoringStatus } from 'app/model/monitoring.model';
+import { EnvironmentService } from 'app/service/environment/environment.service';
+import { HelpService } from 'app/service/help/help.service';
+import { MonitoringService } from 'app/service/monitoring/monitoring.service';
 import { WorkflowRunService } from 'app/service/workflow/run/workflow.run.service';
 import { WorkflowService } from 'app/service/workflow/workflow.service';
 import { of } from 'rxjs';
@@ -51,7 +56,11 @@ describe('App: CDS', () => {
                 WorkflowRunService,
                 UserService,
                 NavbarService,
+                HelpService,
+                MonitoringService,
+                EventService,
                 ProjectStore,
+                EnvironmentService,
                 AuthenticationService,
                 LanguageStore,
                 ThemeStore,
@@ -103,10 +112,16 @@ describe('App: CDS', () => {
 
         fixture.componentInstance.ngOnInit();
 
+        const http = TestBed.get(HttpTestingController);
+
+        http.expectOne((req: HttpRequest<any>) => {
+            return req.url === '/mon/status'
+        }).flush(<MonitoringStatus>{});
+
         const store = TestBed.get(Store);
         store.dispatch(new FetchCurrentUser());
 
-        const http = TestBed.get(HttpTestingController);
+
         http.expectOne(((req: HttpRequest<any>) => {
             return req.url === '/user/me';
         })).flush(<AuthentifiedUser>{

ui/src/app/app.component.ts

@@ -136,6 +136,7 @@ export class AppComponent implements OnInit, OnDestroy {
             } else {
                 this.user = user;
                 this.isConnected = true;
+                localStorage.setItem('CDS-USER', this.user.username);
                 this._eventService.startWebsocket();
             }
         });

ui/src/app/app.module.ts

@@ -15,7 +15,33 @@ import { ServicesModule } from './service/services.module';
 import { SharedModule } from './shared/shared.module';
 import { NavbarModule } from './views/navbar/navbar.module';
 
-let ngModule: NgModule = {
+export let errorFactory = () => {
+    if ((<any>window).cds_sentry_url) {
+        class RavenErrorHandler implements ErrorHandler {
+            handleError(err: any): void {
+                console.error(err);
+                Raven.captureException(err);
+            }
+        }
+
+        let tags = {};
+        let username = localStorage.getItem('CDS-USER');
+        if (username) {
+            tags['CDS_USER'] = username;
+        }
+
+        Raven
+            .config((<any>window).cds_sentry_url, { release: (<any>window).cds_version, tags })
+            .install();
+
+        return new RavenErrorHandler();
+    } else {
+        return new ErrorHandler();
+    }
+}
+
+
+@NgModule({
     declarations: [
         AppComponent
     ],
@@ -43,40 +69,11 @@ let ngModule: NgModule = {
     providers: [
         AppService,
         EventService,
+        { provide: ErrorHandler, useFactory: errorFactory},
         { provide: LOCALE_ID, useValue: navigator.language.match(/fr/) ? 'fr' : 'en' }
     ],
     bootstrap: [AppComponent]
-};
-
-if ((<any>window).cds_sentry_url) {
-    class RavenErrorHandler implements ErrorHandler {
-        handleError(err: any): void {
-            console.error(err);
-            Raven.captureException(err);
-        }
-    }
-
-    let tags = {};
-    let userStr = localStorage.getItem('CDS-USER');
-    if (userStr) {
-        try {
-            tags['CDS_USER'] = JSON.parse(userStr).username;
-        } catch (e) {
-
-        }
-    }
-
-    Raven
-        .config((<any>window).cds_sentry_url, { release: (<any>window).cds_version, tags })
-        .install();
-
-    ngModule.providers.unshift({ provide: ErrorHandler, useClass: RavenErrorHandler });
-}
-
-
-
-
-@NgModule(ngModule)
+})
 export class AppModule {
 }
 

ui/src/app/app.routing.ts

@@ -35,6 +35,7 @@ const routes: Routes = [
 ];
 
 export const routing: ModuleWithProviders<AppModule> = RouterModule.forRoot(routes, {
-    initialNavigation: true,
-    preloadingStrategy: PreloadAllModules
+    initialNavigation: 'enabledNonBlocking',
+    preloadingStrategy: PreloadAllModules,
+    relativeLinkResolution: 'legacy'
 });

ui/src/app/store/applications.state.spec.ts

@@ -1,6 +1,6 @@
 import { HttpRequest } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { NgxsModule, Store } from '@ngxs/store';
 import { Application, Overview } from 'app/model/application.model';
 import { IntegrationModel, ProjectIntegration } from 'app/model/integration.model';
@@ -28,7 +28,7 @@ describe('Applications', () => {
     let store: Store;
     let testProjectKey = 'test1';
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             providers: [
                 RouterService,
@@ -63,10 +63,9 @@ describe('Applications', () => {
             expect(projState.project).toBeTruthy();
             expect(projState.project.key).toBeTruthy();
         });
-        // store.reset(getInitialApplicationsState());
     }));
 
-    it('fetch application', async(() => {
+    it('fetch application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         store.dispatch(new ActionApplication.FetchApplication({
             projectKey: testProjectKey,
@@ -86,7 +85,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('add application', async(() => {
+    it('add application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -126,7 +125,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('update an application', async(() => {
+    it('update an application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -175,7 +174,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('clone an application', async(() => {
+    it('clone an application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -223,7 +222,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('delete an application', async(() => {
+    it('delete an application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -260,7 +259,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('fetch an overview application', async(() => {
+    it('fetch an overview application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         store.dispatch(new ActionApplication.FetchApplicationOverview({
             projectKey: testProjectKey,
@@ -278,7 +277,7 @@ describe('Applications', () => {
     }));
 
     //  ------- Variables --------- //
-    it('add a variable on application', async(() => {
+    it('add a variable on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -324,7 +323,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('update a variable on application', async(() => {
+    it('update a variable on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -372,7 +371,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('delete a variable on application', async(() => {
+    it('delete a variable on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -425,7 +424,7 @@ describe('Applications', () => {
     }));
 
     //  ------- Keys --------- //
-    it('add a key on application', async(() => {
+    it('add a key on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -464,7 +463,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('delete a key on application', async(() => {
+    it('delete a key on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -520,7 +519,7 @@ describe('Applications', () => {
     }));
 
     //  ------- Deployment strategies --------- //
-    it('add a deployment on application', async(() => {
+    it('add a deployment on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -569,7 +568,7 @@ describe('Applications', () => {
     }));
 
     //  ------- VCS strategies --------- //
-    it('connect a repository on application', async(() => {
+    it('connect a repository on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -609,7 +608,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('delete a repository on application', async(() => {
+    it('delete a repository on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -648,7 +647,7 @@ describe('Applications', () => {
     }));
 
     //  ------- Misc --------- //
-    it('mark an external change on application', async(() => {
+    it('mark an external change on application', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -677,7 +676,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('delete application from cache', async(() => {
+    it('delete application from cache', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';
@@ -705,7 +704,7 @@ describe('Applications', () => {
         });
     }));
 
-    it('resync application from cache', async(() => {
+    it('resync application from cache', waitForAsync(() => {
         const http = TestBed.get(HttpTestingController);
         let application = new Application();
         application.name = 'app1';