From 8a459b3427bdd871ab9d5fe413537df97062302c Mon Sep 17 00:00:00 2001
From: Brandon Treston <btreston@bitwarden.com>
Date: Tue, 3 Dec 2024 09:58:32 -0500
Subject: [PATCH] [PM-14551] Update copy for revoke dialog (#12089)

* update copy for revoke dialog

* Update bulk restore copy

* update copy in dialog

* remove unused copy

* Check run earlier during setup (#11958)

(cherry picked from commit 80c71c191b2ed56984dc301b7d41133e09340fed)

* Check run earlier during setup (#11958)

(cherry picked from commit 80c71c191b2ed56984dc301b7d41133e09340fed)

* add copy

* update button copy

* add feature flag logic

* restore copy, fix build error

* fix copy

* remove unused copy

---------

Co-authored-by: Matt Bishop <mbishop@bitwarden.com>
---
 .../bulk/bulk-restore-revoke.component.html   | 143 +++++++++++++++---
 .../bulk/bulk-restore-revoke.component.ts     |  25 ++-
 .../components/bulk/bulk-status.component.ts  |   1 +
 apps/web/src/locales/en/messages.json         |  33 ++++
 4 files changed, 182 insertions(+), 20 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 d05fed4f922..3414cc8d325 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,7 +1,14 @@
-<bit-dialog>
+<bit-dialog
+  dialogSize="large"
+  *ngIf="{ enabled: accountDeprovisioningEnabled$ | async } as accountDeprovisioning"
+>
   <ng-container bitDialogTitle>
-    <h1>{{ bulkTitle }}</h1>
+    <h1 *ngIf="accountDeprovisioning.enabled; else nonMemberTitle">{{ bulkMemberTitle }}</h1>
+    <ng-template #nonMemberTitle>
+      <h1>{{ bulkTitle }}</h1>
+    </ng-template>
   </ng-container>
+
   <div bitDialogContent>
     <bit-callout type="danger" *ngIf="users.length <= 0">
       {{ "noSelectedUsersApplicable" | i18n }}
@@ -11,15 +18,81 @@
       {{ 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-callout
+      type="danger"
+      *ngIf="nonCompliantMembers && accountDeprovisioning.enabled"
+      title="{{ 'nonCompliantMembersTitle' | i18n }}"
+    >
+      {{ "nonCompliantMembersError" | i18n }}
+    </bit-callout>
 
-      <bit-table>
+    <ng-container *ngIf="!done">
+      <ng-container *ngIf="accountDeprovisioning.enabled">
+        <div *ngIf="users.length > 0 && !error && isRevoking">
+          <p>{{ "revokeMembersWarning" | i18n }}</p>
+          <ul>
+            <li>
+              {{ "claimedAccountRevoke" | i18n }}
+            </li>
+            <li>
+              {{ "unclaimedAccountRevoke" | i18n }}
+            </li>
+          </ul>
+          <p>
+            {{ "restoreMembersInstructions" | i18n }}
+          </p>
+          <p *ngIf="this.showNoMasterPasswordWarning">
+            {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
+          </p>
+        </div>
+      </ng-container>
+
+      <ng-container *ngIf="!accountDeprovisioning.enabled">
+        <bit-callout type="warning" *ngIf="users.length > 0 && !error && isRevoking">
+          <p>{{ "revokeUsersWarning" | i18n }}</p>
+        </bit-callout>
+      </ng-container>
+
+      <bit-table *ngIf="accountDeprovisioning.enabled">
+        <ng-container header>
+          <tr>
+            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
+            <th bitCell *ngIf="isRevoking">{{ "details" | i18n }}</th>
+            <th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
+          </tr>
+        </ng-container>
+        <ng-template body>
+          <tr bitRow *ngFor="let user of users">
+            <td bitCell width="30">
+              <div class="tw-flex tw-items-center">
+                <div class="tw-flex tw-items-center tw-mr-6">
+                  <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+                </div>
+                <div>
+                  {{ user.email }}
+                  <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
+                </div>
+              </div>
+            </td>
+            <td *ngIf="isRevoking" bitCell width="30">
+              {{
+                user.managedByOrganization ? ("claimedAccount" | i18n) : ("unclaimedAccount" | i18n)
+              }}
+            </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>
+
+      <bit-table *ngIf="!accountDeprovisioning.enabled">
         <ng-container header>
           <tr>
             <th bitCell colspan="2">{{ "user" | i18n }}</th>
@@ -50,21 +123,55 @@
     </ng-container>
 
     <ng-container *ngIf="done">
-      <bit-table>
+      <bit-table *ngIf="accountDeprovisioning.enabled">
         <ng-container header>
           <tr>
-            <th bitCell colspan="2">{{ "user" | i18n }}</th>
-            <th>{{ "status" | i18n }}</th>
+            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
+            <th bitCell>{{ "status" | i18n }}</th>
           </tr>
         </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>
+              <div class="tw-flex tw-items-center">
+                <div class="tw-flex tw-items-center tw-mr-6">
+                  <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+                </div>
+                <div>
+                  {{ user.email }}
+                  <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
+                </div>
+              </div>
             </td>
-            <td bitCell>
-              {{ user.email }}
-              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
+            <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>
+
+      <bit-table *ngIf="!accountDeprovisioning.enabled">
+        <ng-container header>
+          <tr>
+            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
+            <th bitCell>{{ "status" | i18n }}</th>
+          </tr>
+        </ng-container>
+        <ng-template body>
+          <tr bitRow *ngFor="let user of users">
+            <td bitCell width="30">
+              <div class="tw-flex tw-items-center">
+                <div class="tw-flex tw-items-center tw-mr-6">
+                  <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+                </div>
+                <div>
+                  {{ user.email }}
+                  <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
+                </div>
+              </div>
             </td>
             <td bitCell *ngIf="statuses.has(user.id)">
               {{ statuses.get(user.id) }}
@@ -79,7 +186,7 @@
   </div>
   <ng-container bitDialogFooter>
     <button type="button" bitButton *ngIf="!done && users.length > 0" [bitAction]="submit">
-      {{ bulkTitle }}
+      {{ accountDeprovisioning.enabled ? bulkMemberTitle : bulkTitle }}
     </button>
     <button type="button" bitButton buttonType="secondary" bitDialogClose>
       {{ "close" | i18n }}
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 0ac413eb820..d2bbe4cc40f 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,8 +1,11 @@
 import { DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
+import { Observable } from "rxjs";
 
 import { OrganizationUserApiService } from "@bitwarden/admin-console/common";
 import { OrganizationUserStatusType } from "@bitwarden/common/admin-console/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { DialogService } from "@bitwarden/components";
 
@@ -29,10 +32,13 @@ export class BulkRestoreRevokeComponent {
   done = false;
   error: string;
   showNoMasterPasswordWarning = false;
+  nonCompliantMembers: boolean = false;
+  accountDeprovisioningEnabled$: Observable<boolean>;
 
   constructor(
     protected i18nService: I18nService,
     private organizationUserApiService: OrganizationUserApiService,
+    private configService: ConfigService,
     @Inject(DIALOG_DATA) protected data: BulkRestoreDialogParams,
   ) {
     this.isRevoking = data.isRevoking;
@@ -41,6 +47,9 @@ export class BulkRestoreRevokeComponent {
     this.showNoMasterPasswordWarning = this.users.some(
       (u) => u.status > OrganizationUserStatusType.Invited && u.hasMasterPassword === false,
     );
+    this.accountDeprovisioningEnabled$ = this.configService.getFeatureFlag$(
+      FeatureFlag.AccountDeprovisioning,
+    );
   }
 
   get bulkTitle() {
@@ -48,14 +57,26 @@ export class BulkRestoreRevokeComponent {
     return this.i18nService.t(titleKey);
   }
 
+  get bulkMemberTitle() {
+    const titleKey = this.isRevoking ? "revokeMembers" : "restoreMembers";
+    return this.i18nService.t(titleKey);
+  }
+
   submit = async () => {
     try {
       const response = await this.performBulkUserAction();
 
       const bulkMessage = this.isRevoking ? "bulkRevokedMessage" : "bulkRestoredMessage";
-      response.data.forEach((entry) => {
-        const error = entry.error !== "" ? entry.error : this.i18nService.t(bulkMessage);
+
+      response.data.forEach(async (entry) => {
+        const error =
+          entry.error !== ""
+            ? this.i18nService.t("cannotRestoreAccessError")
+            : this.i18nService.t(bulkMessage);
         this.statuses.set(entry.id, error);
+        if (entry.error !== "") {
+          this.nonCompliantMembers = true;
+        }
       });
       this.done = true;
     } catch (e) {
diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-status.component.ts b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-status.component.ts
index 7bcae82cfd8..87037304f52 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-status.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-status.component.ts
@@ -21,6 +21,7 @@ export interface BulkUserDetails {
   email: string;
   status: OrganizationUserStatusType | ProviderUserStatusType;
   hasMasterPassword?: boolean;
+  managedByOrganization?: boolean;
 }
 
 type BulkStatusEntry = {
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 660a00c364d..7025e194786 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -29,6 +29,33 @@
   "notifiedMembers": {
     "message": "Notified members"
   },
+  "revokeMembers": {
+    "message": "Revoke members"
+  },
+  "restoreMembers": {
+    "message": "Restore members"
+  },
+  "revokeMembersWarning":{
+    "message": "Members with claimed and unclaimed accounts will have different results when revoked:"
+  },
+  "claimedAccountRevoke": {
+    "message": "Claimed account: Revoke access to Bitwarden account"
+  },
+  "unclaimedAccountRevoke": {
+    "message": "Unclaimed account: Revoke access to organization data"
+  },
+  "claimedAccount": {
+    "message": "Claimed account"
+  },
+  "unclaimedAccount": {
+    "message": "Unclaimed account"
+  },
+  "restoreMembersInstructions": {
+    "message": "To restore a member's account, go to the Revoked tab. The process may take a few seconds to complete and cannot be interrupted or canceled."
+  },
+  "cannotRestoreAccessError":{
+    "message": "Cannot restore organization access"
+  },
   "allApplicationsWithCount": {
     "message": "All applications ($COUNT$)",
     "placeholders": {
@@ -5610,6 +5637,12 @@
   "bulkFilteredMessage": {
     "message": "Excluded, not applicable for this action"
   },
+  "nonCompliantMembersTitle":{
+    "message": "Non-compliant members"
+  },
+  "nonCompliantMembersError":{
+    "message": "Members that are non-compliant with the Single organization or Two-step login policy cannot be restored until they adhere to the policy requirements"
+  },
   "fingerprint": {
     "message": "Fingerprint"
   },