Upgrade to Angular 12.2

helix-front/.nvmrc

@@ -0,0 +1 @@
+v12.20.2

helix-front/angular.json

@@ -24,16 +24,26 @@
               "client/styles.scss",
               "client/theme.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "3523kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -43,20 +53,25 @@
                   "with": "client/environments/environment.prod.ts"
                 }
               ]
-            }
-          }
+            },
+            "development": {}
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "helix-front:build",
             "proxyConfig": "./proxy.conf.json"
           },
           "configurations": {
             "production": {
               "browserTarget": "helix-front:build:production"
+            },
+            "development": {
+              "browserTarget": "helix-front:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -86,8 +101,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "client/tsconfig.app.json",
+              "client/tsconfig.spec.json"
             ],
             "exclude": []
           }
@@ -104,7 +119,8 @@
           "options": {
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "helix-front:serve"
-          }
+          },
+          "configurations": {}
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
@@ -122,7 +138,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "hi",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "hi"

helix-front/client/app/app-routing.module.ts

@@ -145,4 +145,4 @@ const HELIX_ROUTES: Routes = [
   }
 ];
 
-export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(HELIX_ROUTES);
+export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(HELIX_ROUTES, { relativeLinkResolution: 'legacy' });

helix-front/client/app/app.component.spec.ts

@@ -1,16 +1,17 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
-import { Angulartics2, Angulartics2Piwik } from 'angulartics2';
+// import { Angulartics2 } from 'angulartics2';
+// import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 import { TestingModule } from '../testing/testing.module';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        TestingModule
+        TestingModule,
       ],
       declarations: [
         AppComponent
@@ -21,25 +22,25 @@ describe('AppComponent', () => {
       ],
       // TODO vxu: I don't want to add the following two but ...
       providers: [
-        Angulartics2,
-        Angulartics2Piwik
+        // Angulartics2,
+        // Angulartics2Piwik,
       ]
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
 
-  it(`should have a variable controlling footer`, async(() => {
+  it(`should have a variable controlling footer`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.footerEnabled).toBeDefined();
   }));
 
-  xit('should render title in a mat-toolbar', async(() => {
+  xit('should render title in a mat-toolbar', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

helix-front/client/app/app.component.ts

@@ -7,9 +7,9 @@ import {
   NavigationCancel,
   NavigationError
 } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
-import { Angulartics2Piwik } from 'angulartics2';
+// import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 import { UserService } from './core/user.service';
 import { InputDialogComponent } from './shared/dialog/input-dialog/input-dialog.component';
@@ -19,7 +19,7 @@ import { HelperService } from './shared/helper.service';
   selector: 'hi-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.scss' ],
-  providers: [ UserService ]
+  providers: [ UserService/*, Angulartics2Piwik */ ]
 })
 export class AppComponent implements OnInit {
 
@@ -29,9 +29,9 @@ export class AppComponent implements OnInit {
   currentUser: any;
 
   constructor(
+    // protected angulartics2Piwik: Angulartics2Piwik,
     protected route: ActivatedRoute,
     protected router: Router,
-    protected angulartics: Angulartics2Piwik,
     protected dialog: MatDialog,
     protected service: UserService,
     protected helper: HelperService
@@ -50,6 +50,7 @@ export class AppComponent implements OnInit {
         this.isLoading = false;
       }
     });
+    // angulartics2Piwik.startTracking();
   }
 
   ngOnInit() {
@@ -87,13 +88,29 @@ export class AppComponent implements OnInit {
             .subscribe(
               isAuthorized => {
                 if (!isAuthorized) {
-                  this.helper.showError("You're not part of helix-admin group or password incorrect");
+                  this.helper.showError('You\'re not part of helix-admin group or password incorrect');
                 }
                 this.currentUser = this.service.getCurrentUser();
               },
-              error => this.helper.showError(error)
+              error => {
+                // since rest API simply throws 404 instead of empty config when config is not initialized yet
+                // frontend has to treat 404 as normal result
+                if (error != 'Not Found') {
+                  this.helper.showError(error);
+                }
+                this.isLoading = false;
+              },
             );
         }
-      });
+      },
+      error => {
+        // since rest API simply throws 404 instead of empty config when config is not initialized yet
+        // frontend has to treat 404 as normal result
+        if (error != 'Not Found') {
+          this.helper.showError(error);
+        }
+        this.isLoading = false;
+      },
+      );
   }
 }

helix-front/client/app/app.module.ts

@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
-import { Angulartics2Module, Angulartics2Piwik } from 'angulartics2';
-
+// import { Angulartics2Module } from 'angulartics2';
+// import { Angulartics2Piwik } from 'angulartics2/piwik';
 import { AppRoutingModule } from './app-routing.module';
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
@@ -28,7 +28,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
     FormsModule,
     HttpClientModule,
     AppRoutingModule,
-    Angulartics2Module.forRoot([ Angulartics2Piwik ]),
+    // Angulartics2Module.forRoot(),
     CoreModule,
     SharedModule,
     ClusterModule,

helix-front/client/app/chooser/helix-list/helix-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { TestingModule } from '../../../testing/testing.module';
@@ -9,7 +9,7 @@ describe('HelixListComponent', () => {
   let component: HelixListComponent;
   let fixture: ComponentFixture<HelixListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TestingModule

helix-front/client/app/cluster/cluster-detail/cluster-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { TestingModule } from '../../../testing/testing.module';
@@ -8,7 +8,7 @@ describe('ClusterDetailComponent', () => {
   let component: ClusterDetailComponent;
   let fixture: ComponentFixture<ClusterDetailComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TestingModule

helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts

@@ -2,7 +2,7 @@
 import {map} from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 import { Cluster } from '../shared/cluster.model';
 import { HelperService } from '../../shared/helper.service';

helix-front/client/app/cluster/cluster-list/cluster-list.component.scss

@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 @import 'client/theme.scss';
 
 .mat-spinner {
@@ -6,7 +7,7 @@
 
 .cluster-list-item-selected h4 {
   font-weight: 500;
-  color: mat-color($hi-primary);
+  color: mat.get-color-from-palette($hi-primary);
 }
 
 .error-message {

helix-front/client/app/cluster/cluster-list/cluster-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { TestingModule } from '../../../testing/testing.module';
@@ -8,7 +8,7 @@ describe('ClusterListComponent', () => {
   let component: ClusterListComponent;
   let fixture: ComponentFixture<ClusterListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TestingModule

helix-front/client/app/cluster/cluster-list/cluster-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialog, MatSnackBar } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
 import { ClusterService } from '../shared/cluster.service';
@@ -15,9 +16,9 @@ import { InputDialogComponent } from '../../shared/dialog/input-dialog/input-dia
 export class ClusterListComponent implements OnInit {
 
   clusters: Cluster[] = [];
-  errorMessage: string = '';
-  isLoading: boolean = true;
-  can: boolean = false;
+  errorMessage = '';
+  isLoading = true;
+  can = false;
   service = '';
 
   constructor(

helix-front/client/app/cluster/cluster.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 .mat-sidenav {
   width: 25vw;
   min-width: 200px;
@@ -9,7 +7,7 @@
   position: fixed;
   top: 50%;
   z-index: 3;
-  transition: $swift-ease-out;
+  transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
   cursor: pointer;
 
   &.open {

helix-front/client/app/cluster/cluster.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
@@ -9,7 +9,7 @@ describe('ClusterComponent', () => {
   let component: ClusterComponent;
   let fixture: ComponentFixture<ClusterComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         FlexLayoutModule,
@@ -34,7 +34,7 @@ describe('ClusterComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should contain cluster list', async(() => {
+  it('should contain cluster list', waitForAsync(() => {
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
     expect(compiled.querySelector('hi-cluster-list')).toBeDefined();