Merge pull request #1347 from Senyoret1/angular14

Update to Angular 14
skycoin · Sep 6, 2022 · f5da40a · f5da40a
2 parents 49bd6af + 91319b3
commit f5da40a
Show file tree

Hide file tree

Showing 21 changed files with 3,757 additions and 2,996 deletions.
diff --git a/static/skywire-manager-src/angular.json b/static/skywire-manager-src/angular.json
@@ -140,9 +140,10 @@
       }
     }
   },
-  "defaultProject": "skywire-manager",
   "cli": {
     "analytics": "2d518d5d-5b45-41d0-ab29-e449d316a742",
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }
diff --git a/static/skywire-manager-src/package-lock.json b/static/skywire-manager-src/package-lock.json
diff --git a/static/skywire-manager-src/package.json b/static/skywire-manager-src/package.json
@@ -13,16 +13,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.2.5",
-    "@angular/cdk": "^13.2.5",
-    "@angular/common": "^13.2.5",
-    "@angular/compiler": "^13.2.5",
-    "@angular/core": "^13.2.5",
-    "@angular/forms": "^13.2.5",
-    "@angular/material": "^13.2.5",
-    "@angular/platform-browser": "^13.2.5",
-    "@angular/platform-browser-dynamic": "^13.2.5",
-    "@angular/router": "^13.2.5",
+    "@angular/animations": "^14.2.0",
+    "@angular/cdk": "^14.2.0",
+    "@angular/common": "^14.2.0",
+    "@angular/compiler": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/forms": "^14.2.0",
+    "@angular/material": "^14.2.0",
+    "@angular/platform-browser": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/router": "^14.2.0",
     "@ngx-translate/core": "^10.0.2",
     "bignumber.js": "^7.2.1",
     "chart.js": "^2.7.2",
@@ -33,20 +33,20 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.5",
-    "@angular-eslint/builder": "13.1.0",
-    "@angular-eslint/eslint-plugin": "13.1.0",
-    "@angular-eslint/eslint-plugin-template": "13.1.0",
-    "@angular-eslint/schematics": "13.1.0",
-    "@angular-eslint/template-parser": "13.1.0",
-    "@angular/cli": "^13.2.5",
-    "@angular/compiler-cli": "~13.2.5",
-    "@angular/language-service": "^13.2.5",
+    "@angular-devkit/build-angular": "^14.2.1",
+    "@angular-eslint/builder": "14.0.2",
+    "@angular-eslint/eslint-plugin": "14.0.2",
+    "@angular-eslint/eslint-plugin-template": "14.0.2",
+    "@angular-eslint/schematics": "14.0.2",
+    "@angular-eslint/template-parser": "14.0.2",
+    "@angular/cli": "^14.2.1",
+    "@angular/compiler-cli": "^14.2.0",
+    "@angular/language-service": "^14.2.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "5.11.0",
-    "@typescript-eslint/parser": "5.11.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "bootstrap": "^4.1.3",
     "eslint": "^8.2.0",
     "eslint-plugin-import": "2.25.4",
@@ -61,6 +61,6 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
-    "typescript": "~4.5.5"
+    "typescript": "~4.8.2"
   }
 }
diff --git a/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts b/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogConfig, MatDialog } from '@angular/material/dialog';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 
 import { StorageService, LabelInfo } from '../../../services/storage.service';
 import { SnackbarService } from '../../../services/snackbar.service';
@@ -18,7 +18,7 @@ import { AppConfig } from 'src/app/app.config';
 export class EditLabelComponent implements OnInit, AfterViewInit {
   @ViewChild('firstInput') firstInput: ElementRef;
 
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
@@ -35,7 +35,7 @@ export class EditLabelComponent implements OnInit, AfterViewInit {
   constructor(
     public dialogRef: MatDialogRef<EditLabelComponent>,
     @Inject(MAT_DIALOG_DATA) private data: LabelInfo,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private snackbarService: SnackbarService,
   ) { }

diff --git a/...re-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts b/...re-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 
 import { AppConfig } from 'src/app/app.config';
 import { FilterFieldTypes, CompleteFilterProperties } from 'src/app/utils/filters';
@@ -33,7 +33,7 @@ export interface FiltersSelectiondParams {
   styleUrls: ['./filters-selection.component.scss']
 })
 export class FiltersSelectionComponent implements OnInit {
-  form: FormGroup;
+  form: UntypedFormGroup;
   filterFieldTypes = FilterFieldTypes;
 
   /**
@@ -52,7 +52,7 @@ export class FiltersSelectionComponent implements OnInit {
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: FiltersSelectiondParams,
     public dialogRef: MatDialogRef<FiltersSelectionComponent>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) { }
 
   ngOnInit() {

diff --git a/static/skywire-manager-src/src/app/components/pages/login/login.component.ts b/static/skywire-manager-src/src/app/components/pages/login/login.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
@@ -20,7 +20,7 @@ import { processServiceError } from '../../../utils/errors';
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit, OnDestroy {
-  form: FormGroup;
+  form: UntypedFormGroup;
   loading = false;
   isForVpn = false;
   vpnKey = '';
@@ -52,8 +52,8 @@ export class LoginComponent implements OnInit, OnDestroy {
       });
     });
 
-    this.form = new FormGroup({
-      password: new FormControl('', Validators.required),
+    this.form = new UntypedFormGroup({
+      password: new UntypedFormControl('', Validators.required),
     });
   }
 

diff --git a/.../src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.ts b/.../src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
@@ -31,7 +31,7 @@ export interface LogsFilter {
 })
 export class LogFilterComponent implements OnInit, OnDestroy {
   filters: LogsFilter[];
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   private formSubscription: Subscription;
 
@@ -50,7 +50,7 @@ export class LogFilterComponent implements OnInit, OnDestroy {
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: LogsFilter,
     public dialogRef: MatDialogRef<LogFilterComponent>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) { }
 
   ngOnInit() {

diff --git a/...skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts b/...skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild, ElementRef, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MatDialogConfig, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 
 import { AppConfig } from 'src/app/app.config';
 
@@ -18,7 +18,7 @@ import { AppConfig } from 'src/app/app.config';
 export class EditSkysocksClientNoteComponent implements OnInit {
   @ViewChild('firstInput', { static: false }) firstInput: ElementRef;
 
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
@@ -35,7 +35,7 @@ export class EditSkysocksClientNoteComponent implements OnInit {
   constructor(
     public dialogRef: MatDialogRef<EditSkysocksClientNoteComponent>,
     @Inject(MAT_DIALOG_DATA) private data: string,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) { }
 
   ngOnInit() {

diff --git a/...-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts b/...-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
 
 import { AppConfig } from 'src/app/app.config';
@@ -35,7 +35,7 @@ export interface FilterWindowData {
   styleUrls: ['./skysocks-client-filter.component.scss']
 })
 export class SkysocksClientFilterComponent implements OnInit {
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   completeCountriesList = countriesList;
 
@@ -54,7 +54,7 @@ export class SkysocksClientFilterComponent implements OnInit {
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: FilterWindowData,
     public dialogRef: MatDialogRef<SkysocksClientFilterComponent>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) { }
 
   ngOnInit() {

diff --git a/...s/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.ts b/...s/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
 import { MatDialogRef, MatDialogConfig, MatDialog } from '@angular/material/dialog';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 
 import { AppConfig } from 'src/app/app.config';
 
@@ -18,7 +18,7 @@ import { AppConfig } from 'src/app/app.config';
 export class SkysocksClientPasswordComponent implements OnInit {
   @ViewChild('firstInput', { static: false }) firstInput: ElementRef;
 
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
@@ -33,7 +33,7 @@ export class SkysocksClientPasswordComponent implements OnInit {
 
   constructor(
     public dialogRef: MatDialogRef<SkysocksClientPasswordComponent>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) { }
 
   ngOnInit() {

diff --git a/.../pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts b/.../pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, OnDestroy, ElementRef, Inject } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MatDialog, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
@@ -72,7 +72,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
   @ViewChild('button') button: ButtonComponent;
   @ViewChild('settingsButton') settingsButton: ButtonComponent;
   @ViewChild('firstInput') firstInput: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   // Entries to show on the history.
   history: HistoryEntry[];
 
@@ -131,7 +131,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     @Inject(MAT_DIALOG_DATA) private data: Application,
     public dialogRef: MatDialogRef<SkysocksClientSettingsComponent>,
     private appsService: AppsService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private snackbarService: SnackbarService,
     private dialog: MatDialog,
     private proxyDiscoveryService: ProxyDiscoveryService,

diff --git a/...app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts b/...app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, OnDestroy, ElementRef, Inject } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialogRef, MatDialog, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
@@ -24,7 +24,7 @@ import { Application } from 'src/app/app.datatypes';
 export class SkysocksSettingsComponent implements OnInit, OnDestroy {
   @ViewChild('button') button: ButtonComponent;
   @ViewChild('firstInput') firstInput: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   // True if configuring Vpn-Server, false if configuring Skysocks.
   configuringVpn = false;
@@ -50,7 +50,7 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy {
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: Application,
     private appsService: AppsService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     public dialogRef: MatDialogRef<SkysocksSettingsComponent>,
     private snackbarService: SnackbarService,
     private dialog: MatDialog,

diff --git a/...omponents/pages/node/node-info/node-info-content/router-config/router-config.component.ts b/...omponents/pages/node/node-info/node-info-content/router-config/router-config.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogConfig, MatDialog } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
 import { SnackbarService } from '../../../../../../services/snackbar.service';
@@ -38,7 +38,7 @@ export class RouterConfigComponent implements OnInit, OnDestroy {
   @ViewChild('button') button: ButtonComponent;
   @ViewChild('firstInput') firstInput: ElementRef;
 
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   private operationSubscription: Subscription;
 
@@ -57,7 +57,7 @@ export class RouterConfigComponent implements OnInit, OnDestroy {
   constructor(
     public dialogRef: MatDialogRef<RouterConfigComponent>,
     @Inject(MAT_DIALOG_DATA) private data: RouterConfigParams,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private snackbarService: SnackbarService,
     private routeService: RouteService,
   ) { }

diff --git a/...mponents/pages/node/routing/transport-list/create-transport/create-transport.component.ts b/...mponents/pages/node/routing/transport-list/create-transport/create-transport.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, OnDestroy, ElementRef } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Subscription, of } from 'rxjs';
 import { delay, flatMap } from 'rxjs/operators';
@@ -28,7 +28,7 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
   @ViewChild('button') button: ButtonComponent;
   @ViewChild('firstInput') firstInput: ElementRef;
   types: string[];
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   makePersistent = false;
 
@@ -49,7 +49,7 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
 
   constructor(
     private transportService: TransportService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     public dialogRef: MatDialogRef<CreateTransportComponent>,
     private snackbarService: SnackbarService,
     private storageService: StorageService,

diff --git a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.ts b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
@@ -28,7 +28,7 @@ export class PasswordComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   @Input() forInitialConfig = false;
 
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   private subscription: Subscription;
   private formSubscription: Subscription;
@@ -42,10 +42,10 @@ export class PasswordComponent implements OnInit, AfterViewInit, OnDestroy {
 
   ngOnInit() {
     // TODO: Password validation is not exactly the same as in the hypervisor code.
-    this.form = new FormGroup({
-      oldPassword: new FormControl('', !this.forInitialConfig ? Validators.required : null),
-      newPassword: new FormControl('', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(64)])),
-      newPasswordConfirmation: new FormControl('', [Validators.required, this.validatePasswords.bind(this)]),
+    this.form = new UntypedFormGroup({
+      oldPassword: new UntypedFormControl('', !this.forInitialConfig ? Validators.required : null),
+      newPassword: new UntypedFormControl('', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(64)])),
+      newPasswordConfirmation: new UntypedFormControl('', [Validators.required, this.validatePasswords.bind(this)]),
     });
 
     this.formSubscription = this.form.controls['newPassword'].valueChanges