feat: actions dropdown in admin user list (#4188)

framework/core/js/src/admin/components/UserListPage.tsx

@@ -4,6 +4,7 @@ import app from '../../admin/app';
 
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import Button from '../../common/components/Button';
+import Dropdown from '../../common/components/Dropdown';
 
 import listItems from '../../common/helpers/listItems';
 
@@ -363,17 +364,18 @@ export default class UserListPage extends AdminPage {
     );
 
     columns.add(
-      'editUser',
+      'userActions',
       {
-        name: app.translator.trans('core.admin.users.grid.columns.edit_user.title'),
+        name: app.translator.trans('core.admin.users.grid.columns.user_actions.title'),
         content: (user: User) => (
-          <Button
+          <Dropdown
-            className="Button UserList-editModalBtn"
+            className="User-controls"
-            title={app.translator.trans('core.admin.users.grid.columns.edit_user.tooltip', { username: user.username() })}
+            buttonClassName="Button Button--icon Button--flat"
-            onclick={() => app.modal.show(() => import('../../common/components/EditUserModal'), { user })}
+            menuClassName="Dropdown-menu--right"
+            icon="fas fa-ellipsis-h"
           >
-            {app.translator.trans('core.admin.users.grid.columns.edit_user.button')}
+            {this.userActionItems(user).toArray()}
-          </Button>
+          </Dropdown>
         ),
       },
       -90
@@ -382,6 +384,23 @@ export default class UserListPage extends AdminPage {
     return columns;
   }
 
+  userActionItems(user: User): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'editUser',
+      <Button
+        icon="fas fa-pencil-alt"
+        title={app.translator.trans('core.admin.users.grid.columns.user_actions.edit_user.tooltip', { username: user.displayName() }, true)}
+        onclick={() => app.modal.show(() => import('../../common/components/EditUserModal'), { user })}
+      >
+        {app.translator.trans('core.admin.users.grid.columns.user_actions.edit_user.button')}
+      </Button>
+    );
+
+    return items;
+  }
+
   headerInfo() {
     return {
       className: 'UserListPage',

framework/core/locale/core.yml

@@ -360,11 +360,6 @@ core:
           display_name:
             title: Display name
 
-          edit_user:
-            button: => core.ref.edit
-            title: => core.ref.edit_user
-            tooltip: Edit {username}
-
           email:
             title: => core.ref.email
             visibility_hide: Hide email address
@@ -377,6 +372,12 @@ core:
           join_time:
             title: Joined
 
+          user_actions:
+            title: Actions
+            edit_user:
+              button: => core.ref.edit
+              tooltip: Edit {username}
+
           user_id:
             title: ID