Add suspend / unsuspend to the console (#2675)

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

@@ -24,7 +24,11 @@
     </div>
     } @else {
     <mat-menu #actions="matMenu">
-      <ng-template matMenuContent let-domainName="domainName">
+      <ng-template
+        matMenuContent
+        let-domainName="domainName"
+        let-domain="domain"
+      >
         <button
           mat-menu-item
           (click)="openRegistryLock(domainName)"
@@ -33,6 +37,24 @@
           <mat-icon>key</mat-icon>
           <span>Registry Lock</span>
         </button>
+        <button
+          mat-menu-item
+          (click)="onSuspendClick(domainName)"
+          [elementId]="getElementIdForSuspendUnsuspend()"
+          [disabled]="isDomainUnsuspendable(domain)"
+        >
+          <mat-icon>lock_clock</mat-icon>
+          <span>Suspend</span>
+        </button>
+        <button
+          mat-menu-item
+          (click)="onUnsuspendClick(domainName)"
+          [elementId]="getElementIdForSuspendUnsuspend()"
+          [disabled]="!isDomainUnsuspendable(domain)"
+        >
+          <mat-icon>lock_open</mat-icon>
+          <span>Unsuspend</span>
+        </button>
       </ng-template>
     </mat-menu>
     <div
@@ -170,7 +192,10 @@
                 <button
                   mat-icon-button
                   [matMenuTriggerFor]="actions"
-                  [matMenuTriggerData]="{ domainName: element.domainName }"
+                  [matMenuTriggerData]="{
+                    domainName: element.domainName,
+                    domain: element
+                  }"
                   aria-label="Domain actions"
                 >
                   <mat-icon>more_horiz</mat-icon>

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

@@ -14,13 +14,17 @@
 
 import { SelectionModel } from '@angular/cdk/collections';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
-import { Component, ViewChild, effect, Inject } from '@angular/core';
+import { Component, effect, Inject, ViewChild } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableDataSource } from '@angular/material/table';
-import { Subject, debounceTime, take, filter } from 'rxjs';
+import { debounceTime, filter, Subject, take } from 'rxjs';
 import { RegistrarService } from '../registrar/registrar.service';
-import { Domain, DomainListService } from './domainList.service';
+import {
+  BULK_ACTION_NAME,
+  Domain,
+  DomainListService,
+} from './domainList.service';
 import { RegistryLockComponent } from './registryLock.component';
 import { RegistryLockService } from './registryLock.service';
 import {
@@ -62,6 +66,12 @@ export class ResponseDialogComponent {
   }
 }
 
+enum Operation {
+  deleting = 'deleting',
+  suspending = 'suspending',
+  unsuspending = 'unsuspending',
+}
+
 @Component({
   selector: 'app-reason-dialog',
   template: `
@@ -75,8 +85,8 @@ export class ResponseDialogComponent {
     </mat-dialog-content>
     <mat-dialog-actions>
       <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-button color="warn" (click)="onDelete()" [disabled]="!reason">
-        Delete
+      <button mat-button color="warn" (click)="onSave()" [disabled]="!reason">
+        Save
       </button>
     </mat-dialog-actions>
   `,
@@ -84,14 +94,13 @@ export class ResponseDialogComponent {
 })
 export class ReasonDialogComponent {
   reason: string = '';
-
   constructor(
     public dialogRef: MatDialogRef<ReasonDialogComponent>,
     @Inject(MAT_DIALOG_DATA)
-    public data: { operation: 'deleting' | 'suspending' }
+    public data: { operation: Operation }
   ) {}
 
-  onDelete(): void {
+  onSave(): void {
     this.dialogRef.close(this.reason);
   }
 
@@ -108,6 +117,13 @@ export class ReasonDialogComponent {
 })
 export class DomainListComponent {
   public static PATH = 'domain-list';
+  private static SUSPENDED_STATUSES = [
+    'SERVER_RENEW_PROHIBITED',
+    'SERVER_TRANSFER_PROHIBITED',
+    'SERVER_UPDATE_PROHIBITED',
+    'SERVER_DELETE_PROHIBITED',
+    'SERVER_HOLD',
+  ];
   private readonly DEBOUNCE_MS = 500;
   isAllSelected = false;
 
@@ -258,19 +274,30 @@ export class DomainListComponent {
     return RESTRICTED_ELEMENTS.BULK_DELETE;
   }
 
+  getElementIdForSuspendUnsuspend() {
+    return RESTRICTED_ELEMENTS.SUSPEND;
+  }
+
   getOperationMessage(domain: string) {
     if (this.operationResult && this.operationResult[domain])
       return this.operationResult[domain].message;
     return '';
   }
 
+  isDomainUnsuspendable(domain: Domain) {
+    return DomainListComponent.SUSPENDED_STATUSES.every((s) =>
+      domain.statuses.includes(s)
+    );
+  }
+
   sendDeleteRequest(reason: string) {
     this.isLoading = true;
     this.domainListService
-      .deleteDomains(
-        this.selection.selected,
+      .bulkDomainAction(
+        this.selection.selected.map((d) => d.domainName),
         reason,
-        this.registrarService.registrarId()
+        this.registrarService.registrarId(),
+        BULK_ACTION_NAME.DELETE
       )
       .pipe(take(1))
       .subscribe({
@@ -294,15 +321,17 @@ export class DomainListComponent {
           this.operationResult = result;
           this.reloadData();
         },
-        error: (err: HttpErrorResponse) =>
-          this._snackBar.open(err.error || err.message),
+        error: (err: HttpErrorResponse) => {
+          this.isLoading = false;
+          this._snackBar.open(err.error || err.message);
+        },
       });
   }
 
   deleteSelectedDomains() {
     const dialogRef = this.dialog.open(ReasonDialogComponent, {
       data: {
-        operation: 'deleting',
+        operation: Operation.deleting,
       },
     });
 
@@ -314,4 +343,77 @@ export class DomainListComponent {
       )
       .subscribe(this.sendDeleteRequest.bind(this));
   }
+
+  sendSuspendUnsuspendRequest(
+    domainName: string,
+    reason: string,
+    actionName: BULK_ACTION_NAME
+  ) {
+    this.isLoading = true;
+    this.domainListService
+      .bulkDomainAction(
+        [domainName],
+        reason,
+        this.registrarService.registrarId(),
+        actionName
+      )
+      .pipe(take(1))
+      .subscribe({
+        next: (result: DomainData) => {
+          this.isLoading = false;
+          if (result[domainName].responseCode.toString().startsWith('2')) {
+            this._snackBar.open(result[domainName].message);
+          } else {
+            this.reloadData();
+          }
+        },
+        error: (err: HttpErrorResponse) => {
+          this.isLoading = false;
+          this._snackBar.open(err.error || err.message);
+        },
+      });
+  }
+  onSuspendClick(domainName: string) {
+    const dialogRef = this.dialog.open(ReasonDialogComponent, {
+      data: {
+        operation: Operation.suspending,
+      },
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(
+        take(1),
+        filter((reason) => !!reason)
+      )
+      .subscribe((reason) => {
+        this.sendSuspendUnsuspendRequest(
+          domainName,
+          reason,
+          BULK_ACTION_NAME.SUSPEND
+        );
+      });
+  }
+
+  onUnsuspendClick(domainName: string) {
+    const dialogRef = this.dialog.open(ReasonDialogComponent, {
+      data: {
+        operation: Operation.unsuspending,
+      },
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(
+        take(1),
+        filter((reason) => !!reason)
+      )
+      .subscribe((reason) => {
+        this.sendSuspendUnsuspendRequest(
+          domainName,
+          reason,
+          BULK_ACTION_NAME.UNSUSPEND
+        );
+      });
+  }
 }

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

@@ -35,6 +35,12 @@ export interface DomainListResult {
   totalResults: number;
 }
 
+export enum BULK_ACTION_NAME {
+  DELETE = 'DELETE',
+  SUSPEND = 'SUSPEND',
+  UNSUSPEND = 'UNSUSPEND',
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -71,11 +77,16 @@ export class DomainListService {
       );
   }
 
-  deleteDomains(domains: Domain[], reason: string, registrarId: string) {
+  bulkDomainAction(
+    domains: string[],
+    reason: string,
+    registrarId: string,
+    actionName: BULK_ACTION_NAME
+  ) {
     return this.backendService.bulkDomainAction(
-      domains.map((d) => d.domainName),
+      domains,
       reason,
-      'DELETE',
+      actionName,
       registrarId
     );
   }

console-webapp/src/app/shared/directives/userLevelVisiblity.directive.ts

@@ -20,6 +20,7 @@ export enum RESTRICTED_ELEMENTS {
   OTE,
   USERS,
   BULK_DELETE,
+  SUSPEND,
 }
 
 export const DISABLED_ELEMENTS_PER_ROLE = {
@@ -28,6 +29,7 @@ export const DISABLED_ELEMENTS_PER_ROLE = {
     RESTRICTED_ELEMENTS.OTE,
     RESTRICTED_ELEMENTS.USERS,
     RESTRICTED_ELEMENTS.BULK_DELETE,
+    RESTRICTED_ELEMENTS.SUSPEND,
   ],
   SUPPORT_LEAD: [RESTRICTED_ELEMENTS.USERS],
   SUPPORT_AGENT: [RESTRICTED_ELEMENTS.USERS],