Debouncedly use a search term in console domain list (#2242)

console-webapp/src/app/domains/domainList.component.html

@@ -1,7 +1,13 @@
 <div class="console-domains">
   <mat-form-field>
     <mat-label>Filter</mat-label>
-    <input matInput (keyup)="applyFilter($event)" #input />
+    <input
+      type="search"
+      matInput
+      [(ngModel)]="searchTerm"
+      (ngModelChange)="sendInput()"
+      #input
+    />
   </mat-form-field>
 
   <div *ngIf="isLoading; else domains_content" class="console-domains__loading">

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

@@ -18,6 +18,7 @@ import { BackendService } from '../shared/services/backend.service';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { RegistrarService } from '../registrar/registrar.service';
 import { Domain, DomainListService } from './domainList.service';
+import { Subject, debounceTime } from 'rxjs';
 
 @Component({
   selector: 'app-domain-list',
@@ -27,6 +28,7 @@ import { Domain, DomainListService } from './domainList.service';
 })
 export class DomainListComponent {
   public static PATH = 'domain-list';
+  private readonly DEBOUNCE_MS = 500;
 
   displayedColumns: string[] = [
     'domainName',
@@ -38,6 +40,9 @@ export class DomainListComponent {
   dataSource: MatTableDataSource<Domain> = new MatTableDataSource();
   isLoading = true;
 
+  searchTermSubject = new Subject<string>();
+  searchTerm?: string;
+
   pageNumber?: number;
   resultsPerPage = 50;
   totalResults?: number;
@@ -52,13 +57,28 @@ export class DomainListComponent {
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    // Don't spam the server unnecessarily while the user is typing
+    this.searchTermSubject
+      .pipe(debounceTime(this.DEBOUNCE_MS))
+      .subscribe((searchTermValue) => {
+        this.reloadData();
+      });
     this.reloadData();
   }
 
+  ngOnDestroy() {
+    this.searchTermSubject.complete();
+  }
+
   reloadData() {
     this.isLoading = true;
     this.domainListService
-      .retrieveDomains(this.pageNumber, this.resultsPerPage, this.totalResults)
+      .retrieveDomains(
+        this.pageNumber,
+        this.resultsPerPage,
+        this.totalResults,
+        this.searchTerm
+      )
       .subscribe((domainListResult) => {
         this.dataSource.data = domainListResult.domains;
         this.totalResults = domainListResult.totalResults;
@@ -66,10 +86,8 @@ export class DomainListComponent {
       });
   }
 
-  /** TODO: the backend will need to accept a filter string. */
+  sendInput() {
-  applyFilter(event: KeyboardEvent) {
+    this.searchTermSubject.next(this.searchTerm!);
-    // const filterValue = (event.target as HTMLInputElement).value;
-    this.reloadData();
   }
 
   onPageChange(event: PageEvent) {

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

@@ -47,7 +47,8 @@ export class DomainListService {
   retrieveDomains(
     pageNumber?: number,
     resultsPerPage?: number,
-    totalResults?: number
+    totalResults?: number,
+    searchTerm?: string
   ) {
     return this.backendService
       .getDomains(
@@ -55,7 +56,8 @@ export class DomainListService {
         this.checkpointTime,
         pageNumber,
         resultsPerPage,
-        totalResults
+        totalResults,
+        searchTerm
       )
       .pipe(
         tap((domainListResult: DomainListResult) => {

console-webapp/src/app/shared/services/backend.service.ts

@@ -69,7 +69,8 @@ export class BackendService {
     checkpointTime?: string,
     pageNumber?: number,
     resultsPerPage?: number,
-    totalResults?: number
+    totalResults?: number,
+    searchTerm?: string
   ): Observable<DomainListResult> {
     var url = `/console-api/domain-list?registrarId=${registrarId}`;
     if (checkpointTime) {
@@ -84,6 +85,9 @@ export class BackendService {
     if (totalResults) {
       url += `&totalResults=${totalResults}`;
     }
+    if (searchTerm) {
+      url += `&searchTerm=${searchTerm}`;
+    }
     return this.http
       .get<DomainListResult>(url)
       .pipe(catchError((err) => this.errorCatcher<DomainListResult>(err)));