Add angular signals and computed to the console (#2308)

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ViewChild, effect } from '@angular/core';
 import { RegistrarService } from './registrar/registrar.service';
 import { UserDataService } from './shared/services/userData.service';
 import { GlobalLoaderService } from './shared/services/globalLoader.service';
@@ -36,11 +36,13 @@ export class AppComponent implements AfterViewInit {
     protected globalLoader: GlobalLoaderService,
     protected router: Router
   ) {
-    registrarService.activeRegistrarIdChange.subscribe(() => {
-      this.renderRouter = false;
-      setTimeout(() => {
-        this.renderRouter = true;
-      }, 400);
+    effect(() => {
+      if (registrarService.registrarId()) {
+        this.renderRouter = false;
+        setTimeout(() => {
+          this.renderRouter = true;
+        }, 400);
+      }
     });
   }
 

console-webapp/src/app/domains/domainList.service.ts

@@ -52,7 +52,7 @@ export class DomainListService {
   ) {
     return this.backendService
       .getDomains(
-        this.registrarService.activeRegistrarId,
+        this.registrarService.registrarId(),
         this.checkpointTime,
         pageNumber,
         resultsPerPage,

console-webapp/src/app/home/widgets/billingWidget.component.ts

@@ -23,8 +23,10 @@ export class BillingWidgetComponent {
   constructor(public registrarService: RegistrarService) {}
 
   public get driveFolderUrl(): string {
-    if (this.registrarService?.registrar.driveFolderId) {
-      return `https://drive.google.com/drive/folders/${this.registrarService?.registrar.driveFolderId}`;
+    if (this.registrarService.registrar()?.driveFolderId) {
+      return `https://drive.google.com/drive/folders/${
+        this.registrarService.registrar()?.driveFolderId
+      }`;
     }
     return '';
   }

console-webapp/src/app/registrar/emptyRegistrar.component.ts

@@ -12,9 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, effect } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
 
 import { RegistrarService } from './registrar.service';
 
@@ -24,22 +23,15 @@ import { RegistrarService } from './registrar.service';
   styleUrls: ['./emptyRegistrar.component.scss'],
 })
 export class EmptyRegistrar {
-  private registrarIdChangeSubscription?: Subscription;
-
   constructor(
     private route: ActivatedRoute,
     protected registrarService: RegistrarService,
     private router: Router
   ) {
-    this.registrarIdChangeSubscription =
-      registrarService.activeRegistrarIdChange.subscribe((newRegistrarId) => {
-        if (newRegistrarId) {
-          this.router.navigate([this.route.snapshot.paramMap.get('nextUrl')]);
-        }
-      });
-  }
-
-  ngOnDestroy() {
-    this.registrarIdChangeSubscription?.unsubscribe();
+    effect(() => {
+      if (registrarService.registrarId()) {
+        this.router.navigate([this.route.snapshot.paramMap.get('nextUrl')]);
+      }
+    });
   }
 }

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

@@ -34,7 +34,7 @@ export class RegistrarGuard {
     _: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Promise<boolean> | boolean {
-    if (this.registrarService.activeRegistrarId) {
+    if (this.registrarService.registrarId()) {
       return true;
     }
     return this.router.navigate([

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

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
-import { Observable, Subject, tap } from 'rxjs';
+import { Injectable, computed, signal } from '@angular/core';
+import { Observable, tap } from 'rxjs';
 
 import { BackendService } from '../shared/services/backend.service';
 import {
@@ -52,9 +52,11 @@ export interface Registrar {
   providedIn: 'root',
 })
 export class RegistrarService implements GlobalLoader {
-  activeRegistrarId: string = '';
-  registrars: Registrar[] = [];
-  activeRegistrarIdChange: Subject<string> = new Subject<string>();
+  registrarId = signal<string>('');
+  registrars = signal<Registrar[]>([]);
+  registrar = computed<Registrar | undefined>(() =>
+    this.registrars().find((r) => r.registrarId === this.registrarId())
+  );
 
   constructor(
     private backend: BackendService,
@@ -67,22 +69,15 @@ export class RegistrarService implements GlobalLoader {
     this.globalLoader.startGlobalLoader(this);
   }
 
-  public get registrar(): Registrar {
-    return this.registrars.filter(
-      (r) => r.registrarId === this.activeRegistrarId
-    )[0];
-  }
-
   public updateSelectedRegistrar(registrarId: string) {
-    this.activeRegistrarId = registrarId;
-    this.activeRegistrarIdChange.next(registrarId);
+    this.registrarId.set(registrarId);
   }
 
   public loadRegistrars(): Observable<Registrar[]> {
     return this.backend.getRegistrars().pipe(
       tap((registrars) => {
         if (registrars) {
-          this.registrars = registrars;
+          this.registrars.set(registrars);
         }
       })
     );

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

@@ -5,20 +5,20 @@
     routerLinkActive="active"
     *ngIf="isMobile; else desktop"
   >
-    {{ registrarService.activeRegistrarId || "Select registrar" }}
+    {{ registrarService.registrarId() || "Select registrar" }}
     <mat-icon>open_in_new</mat-icon>
   </button>
   <ng-template #desktop>
     <mat-form-field class="mat-form-field-density-5" appearance="fill">
       <mat-label>Registrar</mat-label>
       <mat-select
-        [ngModel]="registrarService.activeRegistrarId"
+        [ngModel]="registrarService.registrarId()"
         (selectionChange)="
           registrarService.updateSelectedRegistrar($event.value)
         "
       >
         <mat-option
-          *ngFor="let registrar of registrarService.registrars"
+          *ngFor="let registrar of registrarService.registrars()"
           [value]="registrar.registrarId"
         >
           {{ registrar.registrarId }}

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

@@ -87,7 +87,7 @@ export class RegistrarComponent {
 
   constructor(protected registrarService: RegistrarService) {
     this.dataSource = new MatTableDataSource<Registrar>(
-      registrarService.registrars
+      registrarService.registrars()
     );
   }
 

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

@@ -1,41 +1,41 @@
-<div *ngIf="loading" class="contact__loading">
+@if (loading) {
+<div class="contact__loading">
   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
 </div>
-<div *ngIf="!loading">
-  <div
-    class="contact__empty-contacts"
-    *ngIf="contactService.contacts.length === 0"
-  >
+} @else {
+<div>
+  @if (contactService.contacts().length === 0) {
+  <div class="contact__empty-contacts">
     <mat-icon class="contact__empty-contacts-icon secondary-text"
       >apps_outage</mat-icon
     >
     <h1>No contacts found</h1>
   </div>
-  <div *ngFor="let group of groupedData">
-    <div class="contact__cards-wrapper" *ngIf="group.contacts.length">
-      <h3>{{ group.label }}s</h3>
-      <mat-divider></mat-divider>
-      <div class="contact__cards">
-        <mat-card class="contact__card" *ngFor="let contact of group.contacts">
-          <mat-card-title>{{ contact.name }}</mat-card-title>
-          <p *ngIf="contact.phoneNumber">{{ contact.phoneNumber }}</p>
-          <p *ngIf="contact.emailAddress">{{ contact.emailAddress }}</p>
-          <mat-card-actions class="contact__card-actions">
-            <button
-              mat-button
-              color="primary"
-              (click)="openDetails($event, contact)"
-            >
-              <mat-icon>edit</mat-icon>Edit
-            </button>
-            <button mat-button color="accent" (click)="deleteContact(contact)">
-              <mat-icon>delete</mat-icon>Delete
-            </button>
-          </mat-card-actions>
-        </mat-card>
-      </div>
+  } @else { @for (group of groupedContacts(); track group.emailAddress) {
+  <div class="contact__cards-wrapper">
+    <h3>{{ group.label }}s</h3>
+    <mat-divider></mat-divider>
+    <div class="contact__cards">
+      <mat-card class="contact__card" *ngFor="let contact of group.contacts">
+        <mat-card-title>{{ contact.name }}</mat-card-title>
+        <p *ngIf="contact.phoneNumber">{{ contact.phoneNumber }}</p>
+        <p *ngIf="contact.emailAddress">{{ contact.emailAddress }}</p>
+        <mat-card-actions class="contact__card-actions">
+          <button
+            mat-button
+            color="primary"
+            (click)="openDetails($event, contact)"
+          >
+            <mat-icon>edit</mat-icon>Edit
+          </button>
+          <button mat-button color="accent" (click)="deleteContact(contact)">
+            <mat-icon>delete</mat-icon>Delete
+          </button>
+        </mat-card-actions>
+      </mat-card>
     </div>
   </div>
+  } }
   <div class="contact__actions">
     <button mat-raised-button color="primary" (click)="openCreateNew($event)">
       <mat-icon>add</mat-icon>Create a Contact
@@ -45,3 +45,4 @@
     #contactDetailsWrapper
   ></app-dialog-bottom-sheet-wrapper>
 </div>
+}

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, computed } from '@angular/core';
 import { Contact, ContactService } from './contact.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -70,9 +70,9 @@ export class ContactDetailsDialogComponent implements DialogBottomSheetContent {
 
   init(params: ContactDetailsParams) {
     this.params = params;
-    this.contactIndex = this.contactService.contacts.findIndex(
-      (c) => c === params.data.contact
-    );
+    this.contactIndex = this.contactService
+      .contacts()
+      .findIndex((c) => c === params.data.contact);
     this.contact = JSON.parse(JSON.stringify(params.data.contact));
   }
 
@@ -115,6 +115,16 @@ export class ContactDetailsDialogComponent implements DialogBottomSheetContent {
 })
 export default class ContactComponent {
   public static PATH = 'contact';
+  public groupedContacts = computed(() => {
+    return this.contactService.contacts().reduce((acc, contact) => {
+      contact.types.forEach((contactType) => {
+        acc
+          .find((group: GroupedContacts) => group.value === contactType)
+          ?.contacts.push(contact);
+      });
+      return acc;
+    }, JSON.parse(JSON.stringify(contactTypes)));
+  });
 
   @ViewChild('contactDetailsWrapper')
   detailsComponentWrapper!: DialogBottomSheetWrapper;
@@ -131,17 +141,6 @@ export default class ContactComponent {
     });
   }
 
-  public get groupedData() {
-    return this.contactService.contacts?.reduce((acc, contact) => {
-      contact.types.forEach((type) => {
-        acc
-          .find((group: GroupedContacts) => group.value === type)
-          ?.contacts.push(contact);
-      });
-      return acc;
-    }, JSON.parse(JSON.stringify(contactTypes)));
-  }
-
   deleteContact(contact: Contact) {
     if (confirm(`Please confirm contact ${contact.name} delete`)) {
       this.contactService.deleteContact(contact).subscribe({

console-webapp/src/app/settings/contact/contact.service.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { Observable, tap } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
@@ -33,7 +33,7 @@ export interface Contact {
   providedIn: 'root',
 })
 export class ContactService {
-  contacts: Contact[] = [];
+  contacts = signal<Contact[]>([]);
 
   constructor(
     private backend: BackendService,
@@ -42,39 +42,37 @@ export class ContactService {
 
   // TODO: Come up with a better handling for registrarId
   fetchContacts(): Observable<Contact[]> {
-    return this.backend
-      .getContacts(this.registrarService.activeRegistrarId)
-      .pipe(
-        tap((contacts = []) => {
-          this.contacts = contacts;
-        })
-      );
+    return this.backend.getContacts(this.registrarService.registrarId()).pipe(
+      tap((contacts = []) => {
+        this.contacts.set(contacts);
+      })
+    );
   }
 
   saveContacts(contacts: Contact[]): Observable<Contact[]> {
     return this.backend
-      .postContacts(this.registrarService.activeRegistrarId, contacts)
+      .postContacts(this.registrarService.registrarId(), contacts)
       .pipe(
         tap((_) => {
-          this.contacts = contacts;
+          this.contacts.set(contacts);
         })
       );
   }
 
   updateContact(index: number, contact: Contact) {
-    const newContacts = this.contacts.map((c, i) =>
+    const newContacts = this.contacts().map((c, i) =>
       i === index ? contact : c
     );
     return this.saveContacts(newContacts);
   }
 
   addContact(contact: Contact) {
-    const newContacts = this.contacts.concat([contact]);
+    const newContacts = this.contacts().concat([contact]);
     return this.saveContacts(newContacts);
   }
 
   deleteContact(contact: Contact) {
-    const newContacts = this.contacts.filter((c) => c !== contact);
+    const newContacts = this.contacts().filter((c) => c !== contact);
     return this.saveContacts(newContacts);
   }
 }

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

@@ -40,7 +40,7 @@ export default class SecurityComponent {
     private _snackBar: MatSnackBar,
     public registrarService: RegistrarService
   ) {
-    this.dataSource = apiToUiConverter(this.registrarService.registrar);
+    this.dataSource = apiToUiConverter(this.registrarService.registrar());
   }
 
   enableEdit() {
@@ -76,6 +76,6 @@ export default class SecurityComponent {
   }
 
   resetDataSource() {
-    this.dataSource = apiToUiConverter(this.registrarService.registrar);
+    this.dataSource = apiToUiConverter(this.registrarService.registrar());
   }
 }

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

@@ -64,7 +64,7 @@ export class SecurityService {
   saveChanges(newSecuritySettings: SecuritySettings) {
     return this.backend
       .postSecuritySettings(
-        this.registrarService.activeRegistrarId,
+        this.registrarService.registrarId(),
         uiToApiConverter(newSecuritySettings)
       )
       .pipe(