Update angular @21 (#2965)

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

@@ -22,13 +22,12 @@
   </div>
   } @else {
   <mat-table [dataSource]="dataSource" class="mat-elevation-z0">
-    <ng-container
-      *ngFor="let column of columns"
-      [matColumnDef]="column.columnDef"
-    >
+    @for (column of columns; track column) {
+    <ng-container [matColumnDef]="column.columnDef">
       <mat-header-cell *matHeaderCellDef> {{ column.header }} </mat-header-cell>
       <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
     </ng-container>
+    }
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row
       *matRowDef="let row; columns: displayedColumns"

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

@@ -1,9 +1,5 @@
-<div
-  class="console-app__contact"
-  *ngIf="contactService.contactInEdit"
-  cdkTrapFocus
-  [cdkTrapFocusAutoCapture]="true"
->
+@if (contactService.contactInEdit) {
+<div class="console-app__contact" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
   <div class="console-app__contact-controls">
     <button
       mat-icon-button
@@ -32,7 +28,6 @@
     </button>
     }
   </div>
-
   @if(isEditing || contactService.isContactNewView) {
   <h1>Contact Details</h1>
   <form (ngSubmit)="save($event)">
@@ -46,7 +41,6 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Primary account email: </mat-label>
         <input
@@ -64,7 +58,6 @@
           "
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Phone: </mat-label>
         <input
@@ -74,7 +67,6 @@
           placeholder="+0.0000000000"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Fax: </mat-label>
         <input
@@ -84,7 +76,6 @@
         />
       </mat-form-field>
     </section>
-
     <section>
       <h1>Contact Type</h1>
       <p class="console-app__contact-required">
@@ -92,21 +83,18 @@
         (primary contact can't be updated)
       </p>
       <div class="">
-        <ng-container
-          *ngFor="let contactType of contactTypeToTextMap | keyvalue"
+        @for (contactType of contactTypeToTextMap | keyvalue; track contactType)
+        { @if (shouldDisplayCheckbox(contactType.key)) {
+        <mat-checkbox
+          [checked]="checkboxIsChecked(contactType.key)"
+          (change)="checkboxOnChange($event, contactType.key)"
+          [disabled]="checkboxIsDisabled(contactType.key)"
         >
-          <mat-checkbox
-            *ngIf="shouldDisplayCheckbox(contactType.key)"
-            [checked]="checkboxIsChecked(contactType.key)"
-            (change)="checkboxOnChange($event, contactType.key)"
-            [disabled]="checkboxIsDisabled(contactType.key)"
-          >
-            {{ contactType.value }}
-          </mat-checkbox>
-        </ng-container>
+          {{ contactType.value }}
+        </mat-checkbox>
+        } }
       </div>
     </section>
-
     <section>
       <h1>RDAP Preferences</h1>
       <div>
@@ -116,7 +104,6 @@
           >Show in Registrar RDAP record as admin contact</mat-checkbox
         >
       </div>
-
       <div>
         <mat-checkbox
           [(ngModel)]="contactService.contactInEdit.visibleInRdapAsTech"
@@ -124,7 +111,6 @@
           >Show in Registrar RDAP record as technical contact</mat-checkbox
         >
       </div>
-
       <div>
         <mat-checkbox
           [(ngModel)]="contactService.contactInEdit.visibleInDomainRdapAsAbuse"
@@ -198,15 +184,13 @@
         </mat-list-item>
         } @if(contactService.contactInEdit.visibleInRdapAsTech) {
         <mat-divider></mat-divider>
-        <mat-list-item
-          role="listitem"
-          *ngIf="contactService.contactInEdit.visibleInRdapAsTech"
-        >
+        @if (contactService.contactInEdit.visibleInRdapAsTech) {
+        <mat-list-item role="listitem">
           <span class="console-app__list-value"
             >Show in Registrar RDAP record as technical contact</span
           >
         </mat-list-item>
-        } @if(contactService.contactInEdit.visibleInDomainRdapAsAbuse) {
+        } } @if(contactService.contactInEdit.visibleInDomainRdapAsAbuse) {
         <mat-divider></mat-divider>
         <mat-list-item role="listitem">
           <span class="console-app__list-value"
@@ -220,3 +204,4 @@
   </mat-card>
   }
 </div>
+}

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

@@ -1,6 +1,6 @@
+@if (registrarInEdit) {
 <div
   class="console-app__rdap-edit"
-  *ngIf="registrarInEdit"
   cdkTrapFocus
   [cdkTrapFocusAutoCapture]="true"
 >
@@ -12,7 +12,6 @@
   >
     <mat-icon>arrow_back</mat-icon>
   </button>
-
   <div class="console-app__rdap-edit-controls">
     <span>
       General registrar information for your RDAP record. This information is
@@ -20,10 +19,8 @@
     </span>
     <div class="spacer"></div>
   </div>
-
   <div class="console-app__rdap-edit">
     <h1>Personal info</h1>
-
     <form (ngSubmit)="save($event)">
       <mat-form-field appearance="outline">
         <mat-label>Email: </mat-label>
@@ -34,7 +31,6 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Phone: </mat-label>
         <input
@@ -44,7 +40,6 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Fax: </mat-label>
         <input
@@ -54,7 +49,6 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Street Address (line 1): </mat-label>
         <input
@@ -64,7 +58,6 @@
           [(ngModel)]="registrarInEdit.localizedAddress.street![0]"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Street Address (line 2): </mat-label>
         <input
@@ -74,7 +67,6 @@
           [(ngModel)]="registrarInEdit.localizedAddress.street![1]"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>City: </mat-label>
         <input
@@ -84,7 +76,6 @@
           [(ngModel)]="(registrarInEdit.localizedAddress || {}).city"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>State or Province: </mat-label>
         <input
@@ -94,7 +85,6 @@
           [(ngModel)]="(registrarInEdit.localizedAddress || {}).state"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Country: </mat-label>
         <input
@@ -104,7 +94,6 @@
           [(ngModel)]="(registrarInEdit.localizedAddress || {}).countryCode"
         />
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Postal code: </mat-label>
         <input
@@ -114,7 +103,6 @@
           [(ngModel)]="(registrarInEdit.localizedAddress || {}).zip"
         />
       </mat-form-field>
-
       <button
         mat-flat-button
         color="primary"
@@ -126,3 +114,4 @@
     </form>
   </div>
 </div>
+}

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

@@ -20,7 +20,7 @@ import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { SecurityService } from './security.service';
 import { UserDataService } from 'src/app/shared/services/userData.service';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { CommonModule } from '@angular/common';
+
 import { MaterialModule } from 'src/app/material.module';
 import { filter, switchMap, take } from 'rxjs';
 import { BackendService } from 'src/app/shared/services/backend.service';
@@ -41,7 +41,7 @@ import {
       <button mat-button color="warn" (click)="onSave()">Confirm</button>
     </mat-dialog-actions>
   `,
-  imports: [CommonModule, MaterialModule],
+  imports: [MaterialModule],
 })
 export class ResetEppPasswordComponent {
   constructor(public dialogRef: MatDialogRef<ResetEppPasswordComponent>) {}

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

@@ -68,7 +68,7 @@
           >
         </mat-list-item>
         <mat-divider></mat-divider>
-        @for (item of dataSource.ipAddressAllowList; track item.value) {
+        @for (item of dataSource.ipAddressAllowList; track $index){
         <mat-list-item role="listitem">
           <span class="console-app__list-value">{{ item.value }}</span>
         </mat-list-item>

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

@@ -12,7 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
 
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
@@ -30,43 +36,32 @@ import { MOCK_REGISTRAR_SERVICE } from 'src/testdata/registrar/registrar.service
 describe('SecurityComponent', () => {
   let component: SecurityComponent;
   let fixture: ComponentFixture<SecurityComponent>;
-  let fetchSecurityDetailsSpy: Function;
   let saveSpy: Function;
+  let securityServiceStub: Partial<SecurityService>;
 
   beforeEach(async () => {
-    const securityServiceSpy = jasmine.createSpyObj(SecurityService, [
-      'fetchSecurityDetails',
-      'saveChanges',
-    ]);
-
-    fetchSecurityDetailsSpy =
-      securityServiceSpy.fetchSecurityDetails.and.returnValue(of());
-
-    saveSpy = securityServiceSpy.saveChanges.and.returnValue(of());
+    securityServiceStub = {
+      isEditingSecurity: false,
+      isEditingPassword: false,
+      saveChanges: jasmine.createSpy('saveChanges').and.returnValue(of({})),
+    };
 
     await TestBed.configureTestingModule({
       declarations: [SecurityEditComponent, SecurityComponent],
       imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
       providers: [
         BackendService,
-        SecurityService,
+        { provide: SecurityService, useValue: securityServiceStub },
         { provide: RegistrarService, useValue: MOCK_REGISTRAR_SERVICE },
         provideHttpClient(),
         provideHttpClientTesting(),
       ],
-    })
-      .overrideComponent(SecurityComponent, {
-        set: {
-          providers: [
-            { provide: SecurityService, useValue: securityServiceSpy },
-          ],
-        },
-      })
-      .compileComponents();
+    }).compileComponents();
+
+    saveSpy = securityServiceStub.saveChanges as jasmine.Spy;
 
     fixture = TestBed.createComponent(SecurityComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
@@ -93,17 +88,36 @@ describe('SecurityComponent', () => {
     });
   }));
 
-  it('should remove ip', waitForAsync(() => {
-    component.dataSource.ipAddressAllowList =
-      component.dataSource.ipAddressAllowList?.splice(1);
-    fixture.whenStable().then(() => {
-      fixture.detectChanges();
-      let listElems: Array<HTMLElement> = Array.from(
-        fixture.nativeElement.querySelectorAll('span.console-app__list-value')
-      );
-      expect(listElems.map((e) => e.textContent)).toContain(
-        'No IP addresses on file.'
-      );
+  it('should remove ip', fakeAsync(() => {
+    fixture.detectChanges();
+    tick();
+
+    const editBtn = fixture.nativeElement.querySelector(
+      'button[aria-label="Edit security settings"]'
+    );
+    editBtn.click();
+
+    tick();
+    fixture.detectChanges();
+
+    const removeIpBtn = fixture.nativeElement.querySelector(
+      '.console-app__removeIp'
+    );
+    removeIpBtn.click();
+
+    tick();
+    fixture.detectChanges();
+
+    const saveBtn = fixture.nativeElement.querySelector(
+      '.settings-security__edit-save'
+    );
+    saveBtn.click();
+
+    tick();
+    fixture.detectChanges();
+
+    expect(saveSpy).toHaveBeenCalledWith({
+      ipAddressAllowList: [],
     });
   }));
 
@@ -119,21 +133,34 @@ describe('SecurityComponent', () => {
     expect(component.securityService.isEditingPassword).toBeTrue();
   });
 
-  it('should call save', waitForAsync(async () => {
-    component.editSecurity();
-    await fixture.whenStable();
+  it('should call save', fakeAsync(() => {
     fixture.detectChanges();
+    tick();
+
+    const editBtn = fixture.nativeElement.querySelector(
+      'button[aria-label="Edit security settings"]'
+    );
+    editBtn.click();
+
+    tick();
+    fixture.detectChanges();
+
     const el = fixture.nativeElement.querySelector(
       '.console-app__clientCertificateValue'
     );
     el.value = 'test';
     el.dispatchEvent(new Event('input'));
+
+    tick();
     fixture.detectChanges();
-    await fixture.whenStable();
-    fixture.nativeElement
-      .querySelector('.settings-security__edit-save')
-      .click();
-    expect(saveSpy).toHaveBeenCalledOnceWith({
+
+    const saveBtn = fixture.nativeElement.querySelector(
+      '.settings-security__edit-save'
+    );
+    saveBtn.click();
+
+    tick();
+    expect(saveSpy).toHaveBeenCalledWith({
       ipAddressAllowList: [{ value: '123.123.123.123' }],
       clientCertificate: 'test',
     });

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

@@ -23,9 +23,11 @@
       <button
         matSuffix
         mat-icon-button
+        class="console-app__removeIp"
         [attr.aria-label]="'Remove IP entry ' + ip.value"
         (click)="removeIpEntry(ip)"
         [disabled]="isUpdating"
+        type="button"
       >
         <mat-icon>close</mat-icon>
       </button>