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

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;
-  @Input() users: BulkUserDetails[];
+  organizationId: string;
+  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(
-      BulkConfirmComponent,
-      this.bulkConfirmModalRef,
-      (comp) => {
-        comp.organizationId = this.organization.id;
-        comp.users = this.getCheckedUsers();
+    const dialogRef = BulkConfirmComponent.open(this.dialogService, {
+      data: {
+        organizationId: this.organization.id,
+        users: this.getCheckedUsers(),
       },
-    );
+    });
 
-    await modal.onClosedPromise();
+    await lastValueFrom(dialogRef.closed);
     await this.load();
   }