Update Angular 17 -> 18 (#2479)

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

@@ -12,25 +12,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 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: [
-        HttpClientTestingModule,
-        RouterTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
-      providers: [BackendService],
       declarations: [AppComponent],
+      imports: [RouterTestingModule, MaterialModule, BrowserAnimationsModule],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents();
   });
 

console-webapp/src/app/app.module.ts

@@ -23,7 +23,7 @@ import { MaterialModule } from './material.module';
 
 import { BackendService } from './shared/services/backend.service';
 
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { BillingInfoComponent } from './billingInfo/billingInfo.component';
 import { DomainListComponent } from './domains/domainList.component';
@@ -80,12 +80,12 @@ import { TldsComponent } from './tlds/tlds.component';
     WhoisComponent,
     WhoisEditComponent,
   ],
+  bootstrap: [AppComponent],
   imports: [
     AppRoutingModule,
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
-    HttpClientModule,
     MaterialModule,
     SnackBarModule,
   ],
@@ -100,7 +100,7 @@ import { TldsComponent } from './tlds/tlds.component';
         subscriptSizing: 'dynamic',
       },
     },
+    provideHttpClient(),
   ],
-  bootstrap: [AppComponent],
 })
 export class AppModule {}

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

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

console-webapp/src/app/registrar/newRegistrar.component.scss

@@ -2,7 +2,7 @@
   max-width: 616px;
 
   h2 {
-    margin: 40px 0 25px 0;
+    margin: 40px 0 25px 0 !important;
   }
 
   section {

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

@@ -14,18 +14,24 @@
 
 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 { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { BackendService } from '../shared/services/backend.service';
+import { RegistrarService } from './registrar.service';
 
 describe('RegistrarService', () => {
   let service: RegistrarService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      providers: [BackendService, MatSnackBar],
+      imports: [],
+      providers: [
+        BackendService,
+        MatSnackBar,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     });
     service = TestBed.inject(RegistrarService);
   });

console-webapp/src/app/registrar/registrarSelector.component.html

@@ -1,9 +1,5 @@
 <div class="console-app__registrar">
-  <mat-form-field
-    class="example-full-width"
-    class="mat-form-field-density-5"
-    appearance="outline"
-  >
+  <mat-form-field class="example-full-width" appearance="outline">
     <mat-label>Registrar</mat-label>
     <input
       type="text"

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

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

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

@@ -14,12 +14,13 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RegistrarComponent } from './registrarsTable.component';
-import { BackendService } from '../shared/services/backend.service';
-import { ActivatedRoute } from '@angular/router';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
 import { MaterialModule } from '../material.module';
+import { BackendService } from '../shared/services/backend.service';
+import { RegistrarComponent } from './registrarsTable.component';
 
 describe('RegistrarComponent', () => {
   let component: RegistrarComponent;
@@ -28,14 +29,12 @@ describe('RegistrarComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [RegistrarComponent],
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
+      imports: [MaterialModule, BrowserAnimationsModule],
       providers: [
         BackendService,
         { provide: ActivatedRoute, useValue: {} as ActivatedRoute },
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
     }).compileComponents();
 

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

@@ -14,10 +14,11 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import ContactComponent from './contact.component';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MaterialModule } from 'src/app/material.module';
 import { BackendService } from 'src/app/shared/services/backend.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import ContactComponent from './contact.component';
 
 describe('ContactComponent', () => {
   let component: ContactComponent;
@@ -26,8 +27,12 @@ describe('ContactComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ContactComponent],
-      imports: [HttpClientTestingModule, MaterialModule],
-      providers: [BackendService],
+      imports: [MaterialModule],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents();
     fixture = TestBed.createComponent(ContactComponent);
     component = fixture.componentInstance;

console-webapp/src/app/settings/contact/contactDetails.component.scss

@@ -26,6 +26,6 @@
   mat-form-field {
     display: block;
     width: 100%;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
   }
 }

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

@@ -14,18 +14,19 @@
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import SecurityComponent from './security.component';
-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 { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
-import { FormsModule } from '@angular/forms';
+import { MaterialModule } from 'src/app/material.module';
 import {
   Registrar,
   RegistrarService,
 } from 'src/app/registrar/registrar.service';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import SecurityComponent from './security.component';
+import { SecurityService, apiToUiConverter } from './security.service';
 
 describe('SecurityComponent', () => {
   let component: SecurityComponent;
@@ -50,16 +51,13 @@ describe('SecurityComponent', () => {
     } as RegistrarService;
 
     await TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-        FormsModule,
-      ],
       declarations: [SecurityComponent],
+      imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
       providers: [
         BackendService,
         { provide: RegistrarService, useValue: dummyRegistrarService },
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
     })
       .overrideComponent(SecurityComponent, {

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

@@ -14,6 +14,11 @@
 
 import { TestBed } from '@angular/core/testing';
 
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import SecurityComponent from './security.component';
 import {
   SecurityService,
   SecuritySettings,
@@ -21,10 +26,6 @@ import {
   apiToUiConverter,
   uiToApiConverter,
 } from './security.service';
-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 = {
@@ -42,9 +43,15 @@ describe('SecurityService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
       declarations: [SecurityComponent],
-      providers: [MatSnackBar, SecurityService, BackendService],
+      imports: [],
+      providers: [
+        MatSnackBar,
+        SecurityService,
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     });
     service = TestBed.inject(SecurityService);
   });

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

@@ -29,7 +29,6 @@
         >Security</a
       >
     </nav>
-    <mat-divider></mat-divider>
     <mat-tab-nav-panel #tabPanel>
       <router-outlet></router-outlet>
     </mat-tab-nav-panel>

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

@@ -13,9 +13,6 @@
 // limitations under the License.
 
 .console-settings {
-  > mat-divider {
-    margin-bottom: 40px;
-  }
   .mdc-tab {
     &.active-link {
       border-bottom: 2px solid var(--primary);
@@ -24,4 +21,7 @@
       }
     }
   }
+  nav {
+    margin-bottom: 40px;
+  }
 }

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

@@ -5,7 +5,7 @@
     display: flex;
     align-items: center;
     gap: 1rem;
-    margin: 20px 0;
+    margin-bottom: 20px;
     button {
       flex-shrink: 0;
     }

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

@@ -14,12 +14,13 @@
 
 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 { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterialModule } from 'src/app/material.module';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import WhoisComponent from './whois.component';
 
 describe('WhoisComponent', () => {
   let component: WhoisComponent;
@@ -28,14 +29,12 @@ describe('WhoisComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [WhoisComponent],
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
+      imports: [MaterialModule, BrowserAnimationsModule],
       providers: [
         BackendService,
         { provide: RegistrarService, useValue: { registrar: {} } },
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
     }).compileComponents();
 

console-webapp/src/styles.scss

@@ -30,14 +30,14 @@ body {
 
 .console-app {
   .mat-headline-4 {
-    margin-top: 6px;
-    margin-bottom: 24px;
+    margin-top: 6px !important;
+    margin-bottom: 24px !important;
   }
   .spacer {
     flex: 1;
   }
   h1 {
-    margin-bottom: 24px;
+    margin-bottom: 24px !important;
   }
   a {
     text-decoration: none;

console-webapp/src/theme.scss

@@ -4,63 +4,19 @@
 
 $secondary-color: #80868b;
 $border-color: #dadce0;
-$hue-undefined: "undefined";
-$blue-palette: (
-  50: #e8f0fe,
-  100: #d2e3fc,
-  200: #aecbfa,
-  300: #8ab4f8,
-  400: #669df6,
-  500: #4285f4,
-  600: #1a73e8,
-  700: #1967d2,
-  800: #185abc,
-  900: #174ea6,
-  A100: $hue-undefined,
-  A200: $hue-undefined,
-  A400: $hue-undefined,
-  A700: $hue-undefined,
-  contrast: (
-    50: #174ea6,
-    100: #174ea6,
-    200: #174ea6,
-    300: #174ea6,
-    400: #174ea6,
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: white,
-    A100: $hue-undefined,
-    A200: $hue-undefined,
-    A400: $hue-undefined,
-    A700: $hue-undefined,
-  ),
-);
 
 @function rem($valueInPixels, $rootbase: 16px) {
   @return math.div($valueInPixels, $rootbase) * 1rem;
 }
 
-/** Copied from docs section **/
-
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
 @include mat.core();
 
-// The warn palette is optional (defaults to red).
-$theme-warn: mat.define-palette(mat.$red-palette);
-
-/** 
-** Application specific section - Global styles and mixins
-**/
-
-$theme-primary: mat.define-palette($blue-palette);
-
-$typographyConfig: mat.define-typography-config(
+$typographyConfig: mat.m2-define-typography-config(
   $headline-1:
-    mat.define-typography-level(
+    mat.m2-define-typography-level(
       rem(29px),
       rem(36px),
       500,
@@ -68,7 +24,7 @@ $typographyConfig: mat.define-typography-config(
       normal
     ),
   $headline-4:
-    mat.define-typography-level(
+    mat.m2-define-typography-level(
       rem(28px),
       rem(36px),
       500,
@@ -76,7 +32,7 @@ $typographyConfig: mat.define-typography-config(
       normal
     ),
   $headline-5:
-    mat.define-typography-level(
+    mat.m2-define-typography-level(
       rem(20px),
       rem(28px),
       400,
@@ -84,9 +40,15 @@ $typographyConfig: mat.define-typography-config(
       normal
     ),
   $headline-6:
-    mat.define-typography-level(rem(16px), rem(2px), 500, "Google Sans", normal),
+    mat.m2-define-typography-level(
+      rem(16px),
+      rem(2px),
+      500,
+      "Google Sans",
+      normal
+    ),
   $body-1:
-    mat.define-typography-level(
+    mat.m2-define-typography-level(
       rem(16px),
       rem(24px),
       400,
@@ -94,7 +56,7 @@ $typographyConfig: mat.define-typography-config(
       normal
     ),
   $body-2:
-    mat.define-typography-level(
+    mat.m2-define-typography-level(
       rem(14px),
       rem(20px),
       400,
@@ -102,7 +64,7 @@ $typographyConfig: mat.define-typography-config(
       normal
     ),
   $caption:
-    mat.define-typography-level(
+    mat.m2-define-typography-level(
       rem(14px),
       rem(24px),
       400,
@@ -110,37 +72,13 @@ $typographyConfig: mat.define-typography-config(
       0.15px
     ),
   $overline:
-    mat.define-typography-level(rem(14px), rem(20px), 500, "Google Sans", 0.5px),
-);
-
-@include mat.typography-hierarchy($typographyConfig);
-@mixin form-field-density($density) {
-  $field-typography: mat.define-typography-config(
-    $body-1: mat.define-typography-level(12px, 24px, 400),
-  );
-  @include mat.typography-level($field-typography, "body-1");
-  @include mat.form-field-density($density);
-}
-
-// Define lowest possible density class to be used in application
-// In the same manner -1...-5 classes can be defined
-.mat-form-field-density-5 {
-  @include form-field-density(-5);
-}
-
-/** 
-** Light theme
-**/
-$light-theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $theme-primary,
-      accent: $theme-primary,
-      warn: $theme-warn,
+    mat.m2-define-typography-level(
+      rem(14px),
+      rem(20px),
+      500,
+      "Google Sans",
+      0.5px
     ),
-    density: 0,
-    typography: $typographyConfig,
-  )
 );
 
 // Access and define a class with secondary color exposed
@@ -165,12 +103,41 @@ mat-row:hover {
 
 :root {
   --text: #5f6368;
-  --primary: #{mat.get-color-from-palette($blue-palette, 500)};
-  --lightest: #{mat.get-color-from-palette($blue-palette, 100)};
+  --primary: #4285f4;
+  --lightest: #d2e3fc;
   --light-highlight: #e8eaed;
   --lightest-highlight: #f8f9fa;
   --secondary: #{$secondary-color};
   --border: #{$border-color};
+  --mat-tree-node-text-font: "Google Sans Text";
+  --mat-tree-node-text-size: 0.95rem;
+  --mat-sidenav-container-width: 280px;
 }
 
-@include mat.all-component-themes($light-theme);
+$theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: mat.$blue-palette,
+    ),
+    typography: (
+      plain-family: "Google Sans",
+      brand-family: "Google Sans Text",
+      bold-weight: 600,
+    ),
+  )
+);
+
+html {
+  @include mat.all-component-themes($theme);
+  @include mat.typography-hierarchy($typographyConfig);
+  @include mat.form-field-theme(
+    mat.define-theme(
+      (
+        density: (
+          scale: -3,
+        ),
+      )
+    )
+  );
+}