From 3c05a8b11fd6a8718dc0c0ef8044e61357f0800b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Tom=C3=A9?=
 <108268980+r-tome@users.noreply.github.com>
Date: Thu, 6 Feb 2025 10:04:21 +0000
Subject: [PATCH] [PM-13761] Refactor revoke/restore modal layout, truncate
 email addresses (#12728)

* Refactor revoke/restore modal layout, truncate email addresses

* refactor: Improve user display in bulk restore/revoke component

* refactor: Simplify user display logic in bulk restore/revoke component
---
 .../bulk/bulk-restore-revoke.component.html   | 124 ++++++------------
 1 file changed, 38 insertions(+), 86 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 d66c43ac50f..ebe27afabf5 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
@@ -26,61 +26,47 @@
       {{ "nonCompliantMembersError" | i18n }}
     </bit-callout>
 
+    <ng-template #userDisplay let-user>
+      <div class="tw-flex tw-items-center">
+        <div class="tw-mr-6">
+          <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+        </div>
+        <ng-container *ngIf="user.name; else emailOnly">
+          <div class="tw-truncate" [title]="user.name + ' ' + user.email">
+            {{ user.name }}
+            <small class="tw-block tw-text-muted tw-truncate">
+              {{ user.email }}
+            </small>
+          </div>
+        </ng-container>
+        <ng-template #emailOnly>
+          <div class="tw-truncate" [title]="user.email">{{ user.email }}</div>
+        </ng-template>
+      </div>
+    </ng-template>
+
     <ng-container *ngIf="!done">
       <bit-callout type="warning" *ngIf="users.length > 0 && !error && isRevoking">
         <p>{{ "revokeUsersWarning" | i18n }}</p>
       </bit-callout>
 
-      <bit-table *ngIf="accountDeprovisioning.enabled">
+      <bit-table>
         <ng-container header>
           <tr>
-            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
-            <th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
+            <th bitCell>{{ (accountDeprovisioning.enabled ? "member" : "user") | i18n }}</th>
+            <th bitCell class="tw-w-1/2" *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 bitCell class="tw-max-w-0">
+              <ng-container
+                *ngTemplateOutlet="userDisplay; context: { $implicit: user }"
+              ></ng-container>
             </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>
-            <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">
-              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
-            </td>
-            <td bitCell>
-              {{ user.email }}
-              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
-            </td>
-            <td bitCell *ngIf="this.showNoMasterPasswordWarning">
+            <td bitCell class="tw-w-1/2" *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">
@@ -95,55 +81,21 @@
     </ng-container>
 
     <ng-container *ngIf="done">
-      <bit-table *ngIf="accountDeprovisioning.enabled">
+      <bit-table>
         <ng-container header>
           <tr>
-            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
-            <th bitCell>{{ "status" | i18n }}</th>
+            <th bitCell class="tw-w-1/2">
+              {{ (accountDeprovisioning.enabled ? "member" : "user") | i18n }}
+            </th>
+            <th bitCell class="tw-w-1/2">{{ "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) }}
-            </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 bitCell class="tw-max-w-0">
+              <ng-container
+                *ngTemplateOutlet="userDisplay; context: { $implicit: user }"
+              ></ng-container>
             </td>
             <td bitCell *ngIf="statuses.has(user.id)">
               {{ statuses.get(user.id) }}