Update Angular to v17 (#2260)

build.gradle

@@ -61,7 +61,7 @@ dependencyLocking {
 
 node {
   download = false
-  version = "16.19.0"
+  version = "20.10.0"
 }
 
 wrapper {

console-webapp/.eslintrc.json

@@ -31,7 +31,10 @@
             "style": "kebab-case"
           }
         ],
-        "eol-last": ["error", "always"]
+        "eol-last": [
+          "error",
+          "always"
+        ]
       }
     },
     {

console-webapp/package.json

@@ -16,35 +16,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.2",
+    "@angular/animations": "^17.0.7",
-    "@angular/cdk": "^15.2.2",
+    "@angular/cdk": "^17.0.4",
-    "@angular/common": "^15.2.2",
+    "@angular/common": "^17.0.7",
-    "@angular/compiler": "^15.2.2",
+    "@angular/compiler": "^17.0.7",
-    "@angular/core": "^15.2.2",
+    "@angular/core": "^17.0.7",
-    "@angular/forms": "^15.2.2",
+    "@angular/forms": "^17.0.7",
-    "@angular/material": "^15.2.2",
+    "@angular/material": "^17.0.4",
-    "@angular/platform-browser": "^15.2.2",
+    "@angular/platform-browser": "^17.0.7",
-    "@angular/platform-browser-dynamic": "^15.2.2",
+    "@angular/platform-browser-dynamic": "^17.0.7",
-    "@angular/router": "^15.2.2",
+    "@angular/router": "^17.0.7",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.4",
+    "@angular-devkit/build-angular": "^17.0.7",
-    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/builder": "17.1.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin": "17.1.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "17.1.1",
-    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/schematics": "17.1.1",
-    "@angular-eslint/template-parser": "15.2.1",
+    "@angular-eslint/template-parser": "17.1.1",
-    "@angular/cli": "~15.2.4",
+    "@angular/cli": "~17.0.7",
-    "@angular/compiler-cli": "^15.2.2",
+    "@angular/compiler-cli": "^17.0.7",
     "@types/jasmine": "~4.0.0",
     "@types/node": "^18.11.18",
-    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "5.48.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "concurrently": "^7.6.0",
-    "eslint": "^8.33.0",
+    "eslint": "^8.39.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
@@ -52,6 +52,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "prettier": "2.8.7",
-    "typescript": "~4.9.4"
+    "typescript": "~5.2.2"
   }
-}
+}

console-webapp/src/app/app.component.spec.ts

@@ -17,11 +17,19 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from './material.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BackendService } from './shared/services/backend.service';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, MaterialModule, BrowserAnimationsModule],
+      imports: [
+        HttpClientTestingModule,
+        RouterTestingModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [BackendService],
       declarations: [AppComponent],
     }).compileComponents();
   });

console-webapp/src/app/domains/domainList.component.spec.ts

@@ -15,6 +15,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DomainListComponent } from './domainList.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MaterialModule } from '../material.module';
+import { BackendService } from '../shared/services/backend.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('DomainListComponent', () => {
   let component: DomainListComponent;
@@ -23,6 +27,12 @@ describe('DomainListComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DomainListComponent],
+      imports: [
+        HttpClientTestingModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [BackendService],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DomainListComponent);

console-webapp/src/app/header/header.component.scss

@@ -18,6 +18,8 @@
     text-decoration: none;
   }
   &__header {
+    margin-top: 0;
+    margin-bottom: 10px;
     @media (max-width: 599px) {
       .mat-toolbar {
         padding: 0;

console-webapp/src/app/registrar/registrar.guard.spec.ts

@@ -15,18 +15,23 @@
 import { TestBed } from '@angular/core/testing';
 
 import { RegistrarGuard } from './registrar.guard';
-import { Router, RouterStateSnapshot } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
 import { RegistrarService } from './registrar.service';
 
 describe('RegistrarGuard', () => {
   let guard: RegistrarGuard;
   let dummyRegistrarService: RegistrarService;
   let routeSpy: Router;
-  let dummyRoute: RouterStateSnapshot = {} as RouterStateSnapshot;
+  let dummyRoute: RouterStateSnapshot;
 
   beforeEach(() => {
     routeSpy = jasmine.createSpyObj<Router>('Router', ['navigate']);
     dummyRegistrarService = { activeRegistrarId: '' } as RegistrarService;
+    dummyRoute = { url: '/value' } as RouterStateSnapshot;
 
     TestBed.configureTestingModule({
       providers: [
@@ -39,7 +44,7 @@ describe('RegistrarGuard', () => {
 
   it('should not be able to activate when activeRegistrarId is empty', () => {
     guard = TestBed.inject(RegistrarGuard);
-    const res = guard.canActivate();
+    const res = guard.canActivate(new ActivatedRouteSnapshot(), dummyRoute);
     expect(res).toBeFalsy();
   });
 
@@ -48,17 +53,16 @@ describe('RegistrarGuard', () => {
       useValue: { activeRegistrarId: 'value' },
     });
     guard = TestBed.inject(RegistrarGuard);
-    const res = guard.canActivate();
+    const res = guard.canActivate(new ActivatedRouteSnapshot(), dummyRoute);
     expect(res).toBeTrue();
   });
 
-  it('should navigate to registrars when activeRegistrarId is empty', () => {
+  it('should navigate to empty-registrar screen when activeRegistrarId is empty', () => {
-    const dummyRoute = { url: '/value' } as RouterStateSnapshot;
     guard = TestBed.inject(RegistrarGuard);
-    guard.canActivate();
+    guard.canActivate(new ActivatedRouteSnapshot(), dummyRoute);
     expect(routeSpy.navigate).toHaveBeenCalledOnceWith([
-      '/registrars',
+      '/empty-registrar',
-      { nextUrl: '/value' },
+      { nextUrl: dummyRoute.url },
     ]);
   });
 });

console-webapp/src/app/registrar/registrar.service.spec.ts

@@ -17,6 +17,7 @@ import { TestBed } from '@angular/core/testing';
 import { RegistrarService } from './registrar.service';
 import { BackendService } from '../shared/services/backend.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 describe('RegistrarService', () => {
   let service: RegistrarService;
@@ -24,7 +25,7 @@ describe('RegistrarService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
-      providers: [BackendService],
+      providers: [BackendService, MatSnackBar],
     });
     service = TestBed.inject(RegistrarService);
   });

console-webapp/src/app/registrar/registrarSelector.component.spec.ts

@@ -15,6 +15,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RegistrarSelectorComponent } from './registrarSelector.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MaterialModule } from '../material.module';
+import { BackendService } from '../shared/services/backend.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('RegistrarSelectorComponent', () => {
   let component: RegistrarSelectorComponent;
@@ -22,6 +26,12 @@ describe('RegistrarSelectorComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [BackendService],
       declarations: [RegistrarSelectorComponent],
     }).compileComponents();
 

console-webapp/src/app/settings/security/security.component.spec.ts

@@ -15,19 +15,24 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import SecurityComponent from './security.component';
-import { SecurityService } from './security.service';
+import { SecurityService, apiToUiConverter } from './security.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MaterialModule } from 'src/app/material.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 import { FormsModule } from '@angular/forms';
+import {
+  Registrar,
+  RegistrarService,
+} from 'src/app/registrar/registrar.service';
 
 describe('SecurityComponent', () => {
   let component: SecurityComponent;
   let fixture: ComponentFixture<SecurityComponent>;
   let fetchSecurityDetailsSpy: Function;
   let saveSpy: Function;
+  let dummyRegistrarService: RegistrarService;
 
   beforeEach(async () => {
     const securityServiceSpy = jasmine.createSpyObj(SecurityService, [
@@ -40,9 +45,9 @@ describe('SecurityComponent', () => {
 
     saveSpy = securityServiceSpy.saveChanges;
 
-    securityServiceSpy.securitySettings = {
+    dummyRegistrarService = {
-      ipAddressAllowList: [{ value: '123.123.123.123' }],
+      registrar: { ipAddressAllowList: ['123.123.123.123'] },
-    };
+    } as RegistrarService;
 
     await TestBed.configureTestingModule({
       imports: [
@@ -52,7 +57,10 @@ describe('SecurityComponent', () => {
         FormsModule,
       ],
       declarations: [SecurityComponent],
-      providers: [BackendService],
+      providers: [
+        BackendService,
+        { provide: RegistrarService, useValue: dummyRegistrarService },
+      ],
     })
       .overrideComponent(SecurityComponent, {
         set: {
@@ -72,10 +80,6 @@ describe('SecurityComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call fetch spy', () => {
-    expect(fetchSecurityDetailsSpy).toHaveBeenCalledTimes(1);
-  });
-
   it('should render ip allow list', waitForAsync(() => {
     component.enableEdit();
     fixture.whenStable().then(() => {
@@ -121,16 +125,17 @@ describe('SecurityComponent', () => {
   });
 
   it('should create temporary data structure', () => {
-    expect(component.dataSource).toBe(
+    expect(component.dataSource).toEqual(
-      component.securityService.securitySettings
+      apiToUiConverter(dummyRegistrarService.registrar)
-    );
-    component.enableEdit();
-    expect(component.dataSource).not.toBe(
-      component.securityService.securitySettings
     );
+    component.removeIpEntry(0);
+    expect(component.dataSource).toEqual({ ipAddressAllowList: [] });
+    expect(dummyRegistrarService.registrar).toEqual({
+      ipAddressAllowList: ['123.123.123.123'],
+    } as Registrar);
     component.cancel();
-    expect(component.dataSource).toBe(
+    expect(component.dataSource).toEqual(
-      component.securityService.securitySettings
+      apiToUiConverter(dummyRegistrarService.registrar)
     );
   });
 

console-webapp/src/app/settings/security/security.service.spec.ts

@@ -24,6 +24,7 @@ import {
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import SecurityComponent from './security.component';
 import { BackendService } from 'src/app/shared/services/backend.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 describe('SecurityService', () => {
   const uiMockData: SecuritySettings = {
@@ -43,7 +44,7 @@ describe('SecurityService', () => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       declarations: [SecurityComponent],
-      providers: [SecurityService, BackendService],
+      providers: [MatSnackBar, SecurityService, BackendService],
     });
     service = TestBed.inject(SecurityService);
   });

console-webapp/src/app/settings/whois/whois.component.html

@@ -133,9 +133,8 @@
         <h3>Address Line 1:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress?.street">
           <input
-            *ngIf="registrar.localizedAddress?.street"
             matInput
             type="text"
             [(ngModel)]="(registrar.localizedAddress?.street)![0]"
@@ -149,9 +148,8 @@
         <h3>City:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress">
           <input
-            *ngIf="registrar.localizedAddress"
             matInput
             type="text"
             [(ngModel)]="registrar.localizedAddress.city"
@@ -167,9 +165,8 @@
         <h3>Address Line 2:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress?.street">
           <input
-            *ngIf="registrar.localizedAddress?.street"
             matInput
             type="text"
             [(ngModel)]="(registrar.localizedAddress?.street)![1]"
@@ -183,9 +180,8 @@
         <h3>State/Region:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress">
           <input
-            *ngIf="registrar.localizedAddress"
             matInput
             type="text"
             [(ngModel)]="registrar.localizedAddress.state"
@@ -201,9 +197,8 @@
         <h3>Address Line 3:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress?.street">
           <input
-            *ngIf="registrar.localizedAddress?.street"
             matInput
             type="text"
             [(ngModel)]="(registrar.localizedAddress?.street)![2]"
@@ -217,9 +212,8 @@
         <h3>Country Code:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress">
           <input
-            *ngIf="registrar.localizedAddress"
             matInput
             type="text"
             [(ngModel)]="registrar.localizedAddress.countryCode"

console-webapp/src/app/settings/whois/whois.component.spec.ts

@@ -15,6 +15,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import WhoisComponent from './whois.component';
+import { MaterialModule } from 'src/app/material.module';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('WhoisComponent', () => {
   let component: WhoisComponent;
@@ -23,6 +28,15 @@ describe('WhoisComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [WhoisComponent],
+      imports: [
+        HttpClientTestingModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [
+        BackendService,
+        { provide: RegistrarService, useValue: { registrar: {} } },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(WhoisComponent);

console-webapp/src/theme.scss

@@ -35,15 +35,6 @@ $theme-warn: mat.define-palette(mat.$red-palette);
   @include form-field-density(-5);
 }
 
-@import "@angular/material/theming";
-
-// Define application specific typography settings, font-family, etc
-$typography-configuration: mat-typography-config(
-  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
-);
-
-@include angular-material-typography($typography-configuration);
-
 /** 
 ** Light theme
 **/

release/builder/build.sh

@@ -37,7 +37,7 @@ npm cache clean -f
 npm install -g n
 # Retrying because fails are possible for node.js intallation. See - 
 # https://github.com/nodejs/build/issues/1993
-for i in {1..5}; do n 16.19.0 && break || sleep 15; done
+for i in {1..5}; do n 20.10.0 && break || sleep 15; done
 # Install gcloud
 # Cribbed from https://cloud.google.com/sdk/docs/quickstart-debian-ubuntu
 apt-get install lsb-release -y