feat: provide an 'actions' dropdown for extensions to add their additional buttons (#4054)

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

@@ -18,6 +18,7 @@ import extractText from '../../common/utils/extractText';
 import AdminPage from './AdminPage';
 import { debounce } from '../../common/utils/throttleDebounce';
 import CreateUserModal from './CreateUserModal';
+import Dropdown from '../../common/components/Dropdown';
 
 type ColumnData = {
   /**
@@ -425,17 +426,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(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
@@ -453,6 +455,24 @@ export default class UserListPage extends AdminPage {
     };
   }
 
+  userActionItems(user: User): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'editUser',
+      <Button
+        icon="fas fa-pencil-alt"
+        className="Button UserList-editModalBtn"
+        title={app.translator.trans('core.admin.users.grid.columns.edit_user.tooltip', { username: user.username() })}
+        onclick={() => app.modal.show(EditUserModal, { user })}
+      >
+        {app.translator.trans('core.admin.users.grid.columns.edit_user.button')}
+      </Button>
+    );
+
+    return items;
+  }
+
   /**
    * Asynchronously fetch the next set of users to be rendered.
    *

framework/core/locale/core.yml

@@ -271,7 +271,6 @@ core:
 
           edit_user:
             button: => core.ref.edit
-            title: => core.ref.edit_user
             tooltip: Edit {username}
 
           email:
@@ -286,6 +285,9 @@ core:
           join_time:
             title: Joined
 
+          user_actions:
+            title: Actions
+
           user_id:
             title: ID