[PM-2052] Migrate bulk restore component (#6604)

apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html

@@ -1,50 +1,42 @@
-<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">
+<bit-dialog>
+  <ng-container bitDialogTitle>
+    <h1>{{ bulkTitle }}</h1>
+  </ng-container>
+  <div bitDialogContent>
+    <bit-callout type="danger" *ngIf="users.length <= 0">
       {{ "noSelectedUsersApplicable" | i18n }}
-        </app-callout>
-        <app-callout type="error" *ngIf="error">
+    </bit-callout>
+
+    <bit-callout type="danger" *ngIf="error">
       {{ error }}
-        </app-callout>
+    </bit-callout>
+
     <ng-container *ngIf="!done">
-          <app-callout type="warning" *ngIf="users.length > 0 && !error && isRevoking">
+      <bit-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>
+      </bit-callout>
+
+      <bit-table>
+        <ng-container header>
           <tr>
-                <th colspan="2">{{ "user" | i18n }}</th>
-                <th *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
+            <th bitCell colspan="2">{{ "user" | i18n }}</th>
+            <th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
           </tr>
-            </thead>
-            <tr *ngFor="let user of users">
-              <td width="30">
+        </ng-container>
+        <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>
+            <td bitCell>
               {{ user.email }}
-                <small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small>
+              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
             </td>
-              <td *ngIf="this.showNoMasterPasswordWarning">
-                <span class="text-muted d-block tw-lowercase">
+            <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>
@@ -53,49 +45,44 @@
               </span>
             </td>
           </tr>
-          </table>
+        </ng-template>
+      </bit-table>
     </ng-container>
+
     <ng-container *ngIf="done">
-          <table class="table table-hover table-list">
-            <thead>
+      <bit-table>
+        <ng-container header>
           <tr>
-                <th colspan="2">{{ "user" | i18n }}</th>
+            <th bitCell colspan="2">{{ "user" | i18n }}</th>
             <th>{{ "status" | i18n }}</th>
           </tr>
-            </thead>
-            <tr *ngFor="let user of users">
-              <td width="30">
+        </ng-container>
+        <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>
+            <td bitCell>
               {{ user.email }}
-                <small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small>
+              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
             </td>
-              <td *ngIf="statuses.has(user.id)">
+            <td bitCell *ngIf="statuses.has(user.id)">
               {{ statuses.get(user.id) }}
             </td>
-              <td *ngIf="!statuses.has(user.id)">
+            <td bitCell *ngIf="!statuses.has(user.id)">
               {{ "bulkFilteredMessage" | i18n }}
             </td>
           </tr>
-          </table>
+        </ng-template>
+      </bit-table>
     </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>
+  <ng-container bitDialogFooter>
+    <button type="button" bitButton *ngIf="!done && users.length > 0" [bitAction]="submit">
+      {{ bulkTitle }}
     </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+    <button type="button" bitButton buttonType="secondary" bitDialogClose>
       {{ "close" | i18n }}
     </button>
-      </div>
-    </div>
-  </div>
-</div>
+  </ng-container>
+</bit-dialog>

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 });
+  }
 }

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: {
+    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();
   }