From c2e03d2cdc8943e1d95a13a517a192a081906e0a Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Mon, 23 Oct 2023 17:22:07 +0200
Subject: [PATCH] [PM-2052] Migrate bulk restore component (#6604)

---
 .../bulk/bulk-restore-revoke.component.html   | 183 ++++++++----------
 .../bulk/bulk-restore-revoke.component.ts     |  30 +--
 .../organizations/members/people.component.ts |  13 +-
 3 files changed, 109 insertions(+), 117 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
index db8af13ed2..d05fed4f92 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
@@ -1,101 +1,88 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
-  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h1 class="modal-title" id="bulkTitle">
-          {{ bulkTitle }}
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <app-callout type="danger" *ngIf="users.length <= 0">
-          {{ "noSelectedUsersApplicable" | i18n }}
-        </app-callout>
-        <app-callout type="error" *ngIf="error">
-          {{ error }}
-        </app-callout>
-        <ng-container *ngIf="!done">
-          <app-callout type="warning" *ngIf="users.length > 0 && !error && isRevoking">
-            <p>{{ "revokeUsersWarning" | i18n }}</p>
-            <p *ngIf="this.showNoMasterPasswordWarning">
-              {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
-            </p>
-          </app-callout>
-          <table class="table table-hover table-list">
-            <thead>
-              <tr>
-                <th colspan="2">{{ "user" | i18n }}</th>
-                <th *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
-              </tr>
-            </thead>
-            <tr *ngFor="let user of users">
-              <td width="30">
-                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
-              </td>
-              <td>
-                {{ user.email }}
-                <small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small>
-              </td>
-              <td *ngIf="this.showNoMasterPasswordWarning">
-                <span class="text-muted d-block tw-lowercase">
-                  <ng-container *ngIf="user.hasMasterPassword === true"> - </ng-container>
-                  <ng-container *ngIf="user.hasMasterPassword === false">
-                    <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
-                    {{ "noMasterPassword" | i18n }}
-                  </ng-container>
-                </span>
-              </td>
-            </tr>
-          </table>
+<bit-dialog>
+  <ng-container bitDialogTitle>
+    <h1>{{ bulkTitle }}</h1>
+  </ng-container>
+  <div bitDialogContent>
+    <bit-callout type="danger" *ngIf="users.length <= 0">
+      {{ "noSelectedUsersApplicable" | i18n }}
+    </bit-callout>
+
+    <bit-callout type="danger" *ngIf="error">
+      {{ error }}
+    </bit-callout>
+
+    <ng-container *ngIf="!done">
+      <bit-callout type="warning" *ngIf="users.length > 0 && !error && isRevoking">
+        <p>{{ "revokeUsersWarning" | i18n }}</p>
+        <p *ngIf="this.showNoMasterPasswordWarning">
+          {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
+        </p>
+      </bit-callout>
+
+      <bit-table>
+        <ng-container header>
+          <tr>
+            <th bitCell colspan="2">{{ "user" | i18n }}</th>
+            <th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
+          </tr>
         </ng-container>
-        <ng-container *ngIf="done">
-          <table class="table table-hover table-list">
-            <thead>
-              <tr>
-                <th colspan="2">{{ "user" | i18n }}</th>
-                <th>{{ "status" | i18n }}</th>
-              </tr>
-            </thead>
-            <tr *ngFor="let user of users">
-              <td width="30">
-                <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
-              </td>
-              <td>
-                {{ user.email }}
-                <small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small>
-              </td>
-              <td *ngIf="statuses.has(user.id)">
-                {{ statuses.get(user.id) }}
-              </td>
-              <td *ngIf="!statuses.has(user.id)">
-                {{ "bulkFilteredMessage" | i18n }}
-              </td>
-            </tr>
-          </table>
+        <ng-template body>
+          <tr bitRow *ngFor="let user of users">
+            <td bitCell width="30">
+              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+            </td>
+            <td bitCell>
+              {{ user.email }}
+              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
+            </td>
+            <td bitCell *ngIf="this.showNoMasterPasswordWarning">
+              <span class="tw-block tw-lowercase tw-text-muted">
+                <ng-container *ngIf="user.hasMasterPassword === true"> - </ng-container>
+                <ng-container *ngIf="user.hasMasterPassword === false">
+                  <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
+                  {{ "noMasterPassword" | i18n }}
+                </ng-container>
+              </span>
+            </td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    </ng-container>
+
+    <ng-container *ngIf="done">
+      <bit-table>
+        <ng-container header>
+          <tr>
+            <th bitCell colspan="2">{{ "user" | i18n }}</th>
+            <th>{{ "status" | i18n }}</th>
+          </tr>
         </ng-container>
-      </div>
-      <div class="modal-footer">
-        <button
-          type="submit"
-          class="btn btn-primary btn-submit"
-          *ngIf="!done && users.length > 0"
-          [disabled]="loading"
-          (click)="submit()"
-        >
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ bulkTitle }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "close" | i18n }}
-        </button>
-      </div>
-    </div>
+        <ng-template body>
+          <tr bitRow *ngFor="let user of users">
+            <td bitCell width="30">
+              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+            </td>
+            <td bitCell>
+              {{ user.email }}
+              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
+            </td>
+            <td bitCell *ngIf="statuses.has(user.id)">
+              {{ statuses.get(user.id) }}
+            </td>
+            <td bitCell *ngIf="!statuses.has(user.id)">
+              {{ "bulkFilteredMessage" | i18n }}
+            </td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    </ng-container>
   </div>
-</div>
+  <ng-container bitDialogFooter>
+    <button type="button" bitButton *ngIf="!done && users.length > 0" [bitAction]="submit">
+      {{ bulkTitle }}
+    </button>
+    <button type="button" bitButton buttonType="secondary" bitDialogClose>
+      {{ "close" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>
diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts
index 8005efcb8d..f26321c32a 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts
@@ -1,11 +1,18 @@
-import { Component } from "@angular/core";
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
 
-import { ModalConfig } from "@bitwarden/angular/services/modal.service";
 import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService } from "@bitwarden/components";
 
 import { BulkUserDetails } from "./bulk-status.component";
 
+type BulkRestoreDialogParams = {
+  organizationId: string;
+  users: BulkUserDetails[];
+  isRevoking: boolean;
+};
+
 @Component({
   selector: "app-bulk-restore-revoke",
   templateUrl: "bulk-restore-revoke.component.html",
@@ -25,11 +32,11 @@ export class BulkRestoreRevokeComponent {
   constructor(
     protected i18nService: I18nService,
     private organizationUserService: OrganizationUserService,
-    config: ModalConfig
+    @Inject(DIALOG_DATA) protected data: BulkRestoreDialogParams
   ) {
-    this.isRevoking = config.data.isRevoking;
-    this.organizationId = config.data.organizationId;
-    this.users = config.data.users;
+    this.isRevoking = data.isRevoking;
+    this.organizationId = data.organizationId;
+    this.users = data.users;
     this.showNoMasterPasswordWarning = this.users.some((u) => u.hasMasterPassword === false);
   }
 
@@ -38,8 +45,7 @@ export class BulkRestoreRevokeComponent {
     return this.i18nService.t(titleKey);
   }
 
-  async submit() {
-    this.loading = true;
+  submit = async () => {
     try {
       const response = await this.performBulkUserAction();
 
@@ -52,9 +58,7 @@ export class BulkRestoreRevokeComponent {
     } catch (e) {
       this.error = e.message;
     }
-
-    this.loading = false;
-  }
+  };
 
   protected async performBulkUserAction() {
     const userIds = this.users.map((user) => user.id);
@@ -70,4 +74,8 @@ export class BulkRestoreRevokeComponent {
       );
     }
   }
+
+  static open(dialogService: DialogService, data: BulkRestoreDialogParams) {
+    return dialogService.open(BulkRestoreRevokeComponent, { data });
+  }
 }
diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.ts b/apps/web/src/app/admin-console/organizations/members/people.component.ts
index e696609d17..01c22862a0 100644
--- a/apps/web/src/app/admin-console/organizations/members/people.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.ts
@@ -449,16 +449,13 @@ export class PeopleComponent
       return;
     }
 
-    const ref = this.modalService.open(BulkRestoreRevokeComponent, {
-      allowMultipleModals: true,
-      data: {
-        organizationId: this.organization.id,
-        users: this.getCheckedUsers(),
-        isRevoking: isRevoking,
-      },
+    const ref = BulkRestoreRevokeComponent.open(this.dialogService, {
+      organizationId: this.organization.id,
+      users: this.getCheckedUsers(),
+      isRevoking: isRevoking,
     });
 
-    await ref.onClosedPromise();
+    await firstValueFrom(ref.closed);
     await this.load();
   }