Add action dropdown descriptions

2 files changed, 31 insertions, 25 deletions

diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 885335313..ca05bac19 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -66,7 +66,7 @@
         </a>
       </td>
 
-      <td *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus">{{ user.email }}</td>
+      <td *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus" [title]="user.email">{{ user.email }}</td>
 
       <ng-template #emailWithVerificationStatus>
         <td *ngIf="user.emailVerified === false; else emailVerifiedNotFalse" i18n-title title="User's email must be verified to login">
@@ -81,7 +81,7 @@
 
       <td>{{ user.videoQuotaUsed }} / {{ user.videoQuota }}</td>
       <td>{{ user.roleLabel }}</td>
-      <td>{{ user.createdAt }}</td>
+      <td [title]="user.createdAt">{{ user.createdAt }}</td>
       <td class="action-cell">
         <my-user-moderation-dropdown *ngIf="!isInSelectionMode()" [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
         </my-user-moderation-dropdown>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 1083ba291..a596251f6 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -23,7 +23,7 @@ export class UserListComponent extends RestTable implements OnInit {
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
   selectedUsers: User[] = []
-  bulkUserActions: DropdownAction<User[]>[] = []
+  bulkUserActions: DropdownAction<User[]>[][] = []
 
   private serverConfig: ServerConfig
 
@@ -54,29 +54,35 @@ export class UserListComponent extends RestTable implements OnInit {
     this.initialize()
 
     this.bulkUserActions = [
-      {
-        label: this.i18n('Delete'),
-        handler: users => this.removeUsers(users),
-        isDisplayed: users => users.every(u => this.authUser.canManage(u))
-      },
-      {
-        label: this.i18n('Ban'),
-        handler: users => this.openBanUserModal(users),
-        isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
-      },
-      {
-        label: this.i18n('Unban'),
-        handler: users => this.unbanUsers(users),
-        isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
-      },
-      {
-        label: this.i18n('Set Email as Verified'),
-        handler: users => this.setEmailsAsVerified(users),
-        isDisplayed: users => {
-          return this.requiresEmailVerification &&
-            users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false)
+      [
+        {
+          label: this.i18n('Delete'),
+          description: this.i18n('Videos will be deleted, comments will be tombstoned.'),
+          handler: users => this.removeUsers(users),
+          isDisplayed: users => users.every(u => this.authUser.canManage(u))
+        },
+        {
+          label: this.i18n('Ban'),
+          description: this.i18n('Videos will be kept as private, comments will be kept as is.'),
+          handler: users => this.openBanUserModal(users),
+          isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
+        },
+        {
+          label: this.i18n('Unban'),
+          handler: users => this.unbanUsers(users),
+          isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
         }
-      }
+      ],
+      [
+        {
+          label: this.i18n('Set Email as Verified'),
+          handler: users => this.setEmailsAsVerified(users),
+          isDisplayed: users => {
+            return this.requiresEmailVerification &&
+              users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false)
+          }
+        }
+      ]
     ]
   }