PM -2050 Update Bulk Confirm Dialog (#8723)

* PM-2050 Update Bulk Confirm Dialog

* PM-2050 Added css classes

* PM-2050 Addressed comments

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

@@ -1,24 +1,5 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+<bit-dialog dialogSize="large" [title]="'confirmUsers' | i18n" [loading]="loading">
-  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+  <ng-container bitDialogContent>
-    <div class="modal-content">
-      <div class="modal-header">
-        <h1 class="modal-title" id="bulkTitle">
-          {{ "confirmUsers" | i18n }}
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="card-body text-center" *ngIf="loading">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          {{ "loading" | i18n }}
-        </div>
     <app-callout type="danger" *ngIf="filteredUsers.length <= 0">
       {{ "noSelectedUsersApplicable" | i18n }}
     </app-callout>
@@ -26,9 +7,10 @@
       {{ error }}
     </app-callout>
     <ng-container *ngIf="!loading && !done">
-          <p>
+      <p bitTypography="body1">
         {{ "fingerprintEnsureIntegrityVerify" | i18n }}
         <a
+          bitLink
           href="https://bitwarden.com/help/fingerprint-phrase/"
           target="_blank"
           rel="noreferrer"
@@ -36,80 +18,82 @@
           {{ "learnMore" | i18n }}</a
         >
       </p>
-          <table class="table table-hover table-list">
+      <bit-table>
-            <thead>
+        <ng-container header>
           <tr>
-                <th colspan="2">{{ "user" | i18n }}</th>
+            <th bitCell colspan="2">{{ "user" | i18n }}</th>
-                <th>{{ "fingerprint" | i18n }}</th>
+            <th bitCell>{{ "fingerprint" | i18n }}</th>
           </tr>
-            </thead>
+        </ng-container>
-            <tr *ngFor="let user of filteredUsers">
+        <ng-template body>
-              <td width="30">
+          <tr bitRow *ngFor="let user of filteredUsers" alignContent="middle">
+            <td bitCell class="tw-w-5">
               <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>
+              <p class="tw-text-muted tw-text-sm" *ngIf="user.name">{{ user.name }}</p>
             </td>
-              <td>
+            <td bitCell>
               {{ fingerprints.get(user.id) }}
             </td>
           </tr>
-            <tr *ngFor="let user of excludedUsers">
+          <tr *ngFor="let user of excludedUsers" alignContent="middle">
-              <td width="30">
+            <td bitCell class="tw-w-5">
               <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>
+              <p class="tw-text-muted tw-text-sm" *ngIf="user.name">{{ user.name }}</p>
             </td>
-              <td>
+            <td bitCell>
               {{ "bulkFilteredMessage" | i18n }}
             </td>
           </tr>
-          </table>
+        </ng-template>
+      </bit-table>
     </ng-container>
     <ng-container *ngIf="!loading && done">
-          <table class="table table-hover table-list">
+      <bit-table>
-            <thead>
+        <ng-container header>
           <tr>
-                <th colspan="2">{{ "user" | i18n }}</th>
+            <th bitCell colspan="2">{{ "user" | i18n }}</th>
-                <th>{{ "status" | i18n }}</th>
+            <th bitCell>{{ "status" | i18n }}</th>
           </tr>
-            </thead>
+        </ng-container>
-            <tr *ngFor="let user of filteredUsers">
+        <ng-template body>
-              <td width="30">
+          <tr bitRow *ngFor="let user of filteredUsers" alignContent="middle">
+            <td bitCell class="tw-w-5">
               <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>
+              <p class="tw-text-muted tw-text-sm" *ngIf="user.name">{{ user.name }}</p>
             </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>
+  </ng-container>
-      <div class="modal-footer">
+  <ng-container bitDialogFooter>
     <button
-          type="submit"
-          class="btn btn-primary btn-submit"
       *ngIf="!done"
-          [disabled]="loading"
+      bitButton
+      type="submit"
+      buttonType="primary"
       (click)="submit()"
+      [disabled]="loading"
     >
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      {{ "confirm" | i18n }}
-          <span>{{ "confirm" | i18n }}</span>
     </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+    <button bitButton type="button" buttonType="secondary" bitDialogClose>
       {{ "close" | i18n }}
     </button>
-      </div>
+  </ng-container>
-    </div>
+</bit-dialog>
-  </div>
-</div>

apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
+import { Component, Inject, OnInit } from "@angular/core";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationUserService } from "@bitwarden/common/admin-console/abstractions/organization-user/organization-user.service";
@@ -8,16 +9,22 @@ import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.se
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
+import { DialogService } from "@bitwarden/components";
 
 import { BulkUserDetails } from "./bulk-status.component";
 
+type BulkConfirmDialogData = {
+  organizationId: string;
+  users: BulkUserDetails[];
+};
+
 @Component({
   selector: "app-bulk-confirm",
   templateUrl: "bulk-confirm.component.html",
 })
 export class BulkConfirmComponent implements OnInit {
-  @Input() organizationId: string;
+  organizationId: string;
-  @Input() users: BulkUserDetails[];
+  users: BulkUserDetails[];
 
   excludedUsers: BulkUserDetails[];
   filteredUsers: BulkUserDetails[];
@@ -30,11 +37,15 @@ export class BulkConfirmComponent implements OnInit {
   error: string;
 
   constructor(
+    @Inject(DIALOG_DATA) protected data: BulkConfirmDialogData,
     protected cryptoService: CryptoService,
     protected apiService: ApiService,
     private organizationUserService: OrganizationUserService,
     private i18nService: I18nService,
-  ) {}
+  ) {
+    this.organizationId = data.organizationId;
+    this.users = data.users;
+  }
 
   async ngOnInit() {
     this.excludedUsers = this.users.filter((u) => !this.isAccepted(u));
@@ -110,4 +121,8 @@ export class BulkConfirmComponent implements OnInit {
       request,
     );
   }
+
+  static open(dialogService: DialogService, config: DialogConfig<BulkConfirmDialogData>) {
+    return dialogService.open(BulkConfirmComponent, config);
+  }
 }

apps/web/src/app/admin-console/organizations/members/people.component.ts

@@ -558,16 +558,14 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
       return;
     }
 
-    const [modal] = await this.modalService.openViewRef(
+    const dialogRef = BulkConfirmComponent.open(this.dialogService, {
-      BulkConfirmComponent,
+      data: {
-      this.bulkConfirmModalRef,
+        organizationId: this.organization.id,
-      (comp) => {
+        users: this.getCheckedUsers(),
-        comp.organizationId = this.organization.id;
-        comp.users = this.getCheckedUsers();
       },
-    );
+    });
 
-    await modal.onClosedPromise();
+    await lastValueFrom(dialogRef.closed);
     await this.load();
   }