Add users list to admin dashboard (#2626)

* Commit initial WIP code

* Fix squashed grid on mobile

* Add pagination support; rename to userList

* Improve grid sizing

* Improve grid row shading

* Move EditUserModal to common

* Add link to profile page in grid

* Use Less styling vars

* Move EditUserModal translations to lib

* Add edit user button to grid

* Fix incorrect profile link priority

* Update profile link translation key

* Add priorities to other columns

* Add group badges to grid

* Add username to profile link tooltip

* Organise imports

* Use variable for header border bottom color

* Fix broken export

* Add total user count to API payload's metadata

* Add new metadata to ApiPayload type

* Implement correct page number

* Remove debug code

* Use function to get the total pages

This allows us to use the raw count elsewhere in the component (pssst... check the next commit!)

* Center profile link in column

* Add profile link header

* Show total users above table

* Use ItemList's itemName property for column data attributes

* Add user email column, hidden by default

This column is hidden by default using a placeholder email and blur filter. These are then removed when the visibility toggle is pressed.

This prevents any over-the-shoulder accidental data leakage, as emails are classed as PII under GDPR.

* Fix incorrect tooltip translation keys

* Add extra padding between email and visibility toggle button

* Prevent selection of blurred email

* Fix incorrect icon state for email toggle

* Update API response type to include metadata (for now)

* Increase number of users per page to 50

* Update compat files with new locations

* Format

* Add @deprecated notices for forum compat export

* Use AdminPayload for user count instead of supplying as REST API metadata

* Make nav look less squashed using bottom margin

* Suppress TS warning

* StyleCI fixes

* Fix TS error

* Update based on review comments

* Rename user list -> users

* Rename internal instances of user_list to users

* Fix formatting

* Use CSS custom properties for the table column count

* Use .Button--icon instead of custom style

* Make fake email more realistic length

* Add a11y attributes

* Use padding bottom instead of margin bottom for page spacing

* Make compatible with new CSS LoadingIndicator

I won't let it break here! :P

* Integrate profile link into username column

* Don't force columns to be 300px

This made the grid look very bloated and intimidating -- lets instead increase the padding between items and make it only the width it needs to be.

* Center edit user button in column

* Increase spacing between email and visibility toggle button

* Rename `statistics` to `modelStatistics` in Admin payload

This prevents any possible conflicts with core and `flarum/statistics`. We might want to consider migrating the stats extension to extend this object in the future.

* Update comments, fix TS error

* Various translation key changes

* Change gmail.com -> example.com

* Stretch 'edit user' button to entire cell size

* Update translations

* Is the YAML formatted right this time? 🙈

* Remove email placeholder

Fixes an issue where the table would jump if an email was unhidden that was longer than the placeholder.

* Re-order lib translations

* Clicking blurred email now unblurs

* Correct header class

* Improve edit user button centring

* Improve vertical row item centering

* Fix incorrect column length in aria attribute

* Use .Button--text!

framework/core/locale/core.yml

@@ -163,6 +163,8 @@ core:
       email_title: => core.admin.email.description
       permissions_button: => core.admin.permissions.title
       permissions_title: => core.admin.permissions.description
+      userlist_button: => core.admin.users.title
+      userlist_title: => core.admin.users.description
       search_placeholder: Search Extensions
 
     # These translations are used in the Permissions page of the admin interface.
@@ -217,6 +219,46 @@ core:
       remove_button: => core.ref.remove
       upload_button: Choose an Image...
 
+    # These translations are used for the users list on the admin dashboard.
+    users:
+      description: A paginated list of all users on your forum.
+
+      grid:
+        columns:
+          edit_user:
+            button: => core.ref.edit
+            title: => core.ref.edit_user
+            tooltip: Edit {username}
+
+          email:
+            title: => core.ref.email
+            visibility_hide: Hide email address
+            visibility_show: Show email address
+
+          group_badges:
+            no_badges: None
+            title: Groups
+
+          join_time:
+            title: Joined
+
+          user_id:
+            title: ID
+
+          username:
+            profile_link_tooltip: Visit {username}'s profile
+            title: => core.ref.username
+
+        invalid_column_content: Invalid
+
+      pagination:
+        back_button: Previous page
+        next_button: Next page
+        page_counter: Page {current} of {total}
+
+      title: => core.ref.users
+      total_users: "Total users: {count}"
+
   # Translations in this namespace are used by the forum user interface.
   forum:
 
@@ -288,21 +330,6 @@ core:
       replied_text: "{username} replied {ago}"
       started_text: "{username} started {ago}"
 
-    # These translations are used in the Edit User modal dialog (admin function).
-    edit_user:
-      activate_button: Activate User
-      email_heading: => core.ref.email
-      email_label: => core.ref.email
-      groups_heading: Groups
-      nothing_available: There is nothing available for you to edit at this time.
-      password_heading: => core.ref.password
-      password_label: => core.ref.password
-      set_password_label: Set new password
-      submit_button: => core.ref.save_changes
-      title: Edit User
-      username_heading: => core.ref.username
-      username_label: => core.ref.username
-
     # These translations are used in the Forgot Password modal dialog.
     forgot_password:
       dismiss_button: => core.ref.okay
@@ -474,6 +501,20 @@ core:
     dropdown:
       toggle_dropdown_accessible_label: Toggle dropdown menu
 
+    # These translations are used in the Edit User modal dialog (admin function).
+    edit_user:
+      activate_button: Activate User
+      email_heading: => core.ref.email
+      email_label: => core.ref.email
+      groups_heading: Groups
+      password_heading: => core.ref.password
+      password_label: => core.ref.password
+      set_password_label: Set new password
+      submit_button: => core.ref.save_changes
+      title: => core.ref.edit_user
+      username_heading: => core.ref.username
+      username_label: => core.ref.username
+
     # These translations are displayed as error messages.
     error:
       dependent_extensions_message: "Cannot disable {extension} until the following dependent extensions are disabled: {extensions}"
@@ -624,6 +665,7 @@ core:
     delete_forever: Delete Forever
     discussions: Discussions                     # Referenced by flarum-statistics.yml
     edit: Edit
+    edit_user: Edit User
     email: Email
     icon: Icon
     icon_text: "Enter the name of any <a>FontAwesome</a> icon class, <em>including</em> the <code>fas fa-</code> prefix."