Add bulk user delete dialog component

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

@@ -0,0 +1,85 @@
+<bit-dialog dialogSize="large" [title]="'deleteMembers' | i18n">
+  <ng-container bitDialogContent>
+    <bit-callout type="danger" *ngIf="users.length <= 0">
+      {{ "noSelectedMembersApplicable" | i18n }}
+    </bit-callout>
+    <bit-callout type="danger" [title]="'error' | i18n" *ngIf="error">
+      {{ error }}
+    </bit-callout>
+    <ng-container *ngIf="!done">
+      <bit-callout type="warning" *ngIf="users.length > 0 && !error">
+        <p bitTypography="body1">{{ "deleteOrganizationUserWarning" | i18n }}</p>
+      </bit-callout>
+      <bit-table>
+        <ng-container header>
+          <tr>
+            <th bitCell colspan="2">{{ "member" | i18n }}</th>
+          </tr>
+        </ng-container>
+        <ng-template body>
+          <tr bitRow *ngFor="let user of users">
+            <td bitCell class="tw-w-5">
+              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+            </td>
+            <td bitCell>
+              <div>
+                {{ user.email }}
+                <span
+                  bitBadge
+                  class="tw-text-xs"
+                  variant="secondary"
+                  *ngIf="user.status === this.userStatusType.Invited"
+                >
+                  {{ "invited" | i18n }}
+                </span>
+              </div>
+              <small class="tw-text-muted tw-block" *ngIf="user.name">{{ user.name }}</small>
+            </td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    </ng-container>
+    <ng-container *ngIf="done">
+      <bit-table>
+        <ng-container header>
+          <tr>
+            <th bitCell colspan="2">{{ "member" | i18n }}</th>
+            <th bitCell>{{ "status" | i18n }}</th>
+          </tr>
+        </ng-container>
+        <ng-template body>
+          <tr bitRow *ngFor="let user of users">
+            <td bitCell class="tw-w-5">
+              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+            </td>
+            <td bitCell>
+              {{ user.email }}
+              <small class="tw-text-muted tw-block" *ngIf="user.name">{{ user.name }}</small>
+            </td>
+            <td *ngIf="statuses.has(user.id)" bitCell>
+              {{ statuses.get(user.id) }}
+            </td>
+            <td *ngIf="!statuses.has(user.id)" bitCell>
+              {{ "bulkFilteredMessage" | i18n }}
+            </td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    </ng-container>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button
+      *ngIf="!done && users.length > 0"
+      bitButton
+      type="submit"
+      buttonType="primary"
+      [disabled]="loading"
+      (click)="submit()"
+    >
+      {{ "deleteMembers" | 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-delete-dialog.component.ts

@@ -0,0 +1,65 @@
+import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+
+import { OrganizationUserApiService } from "@bitwarden/admin-console/common";
+import { OrganizationUserStatusType } from "@bitwarden/common/admin-console/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService } from "@bitwarden/components";
+
+import { BulkUserDetails } from "./bulk-status.component";
+
+type BulkDeleteDialogParams = {
+  organizationId: string;
+  users: BulkUserDetails[];
+};
+
+@Component({
+  templateUrl: "bulk-delete-dialog.component.html",
+})
+export class BulkDeleteDialogComponent {
+  organizationId: string;
+  users: BulkUserDetails[];
+  loading = false;
+  done = false;
+  error: string = null;
+  statuses = new Map<string, string>();
+  userStatusType = OrganizationUserStatusType;
+
+  constructor(
+    @Inject(DIALOG_DATA) protected dialogParams: BulkDeleteDialogParams,
+    protected i18nService: I18nService,
+    private organizationUserApiService: OrganizationUserApiService,
+  ) {
+    this.organizationId = dialogParams.organizationId;
+    this.users = dialogParams.users;
+  }
+
+  async submit() {
+    try {
+      this.loading = true;
+      this.error = null;
+
+      const response = await this.organizationUserApiService.deleteManyOrganizationUsers(
+        this.organizationId,
+        this.users.map((user) => user.id),
+      );
+
+      response.data.forEach((entry) => {
+        this.statuses.set(
+          entry.id,
+          entry.error ? entry.error : this.i18nService.t("deletedSuccessfully"),
+        );
+      });
+
+      this.done = true;
+    } catch (e) {
+      this.error = e.message;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  static open(dialogService: DialogService, config: DialogConfig<BulkDeleteDialogParams>) {
+    return dialogService.open(BulkDeleteDialogComponent, config);
+  }
+}

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

@@ -8,6 +8,7 @@ import { LooseComponentsModule } from "../../../shared";
 import { SharedOrganizationModule } from "../shared";
 
 import { BulkConfirmDialogComponent } from "./components/bulk/bulk-confirm-dialog.component";
+import { BulkDeleteDialogComponent } from "./components/bulk/bulk-delete-dialog.component";
 import { BulkEnableSecretsManagerDialogComponent } from "./components/bulk/bulk-enable-sm-dialog.component";
 import { BulkRemoveDialogComponent } from "./components/bulk/bulk-remove-dialog.component";
 import { BulkRestoreRevokeComponent } from "./components/bulk/bulk-restore-revoke.component";
@@ -35,6 +36,7 @@ import { MembersComponent } from "./members.component";
     BulkStatusComponent,
     MembersComponent,
     ResetPasswordComponent,
+    BulkDeleteDialogComponent,
   ],
 })
 export class MembersModule {}