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!

js/src/admin/compat.js

@@ -24,6 +24,7 @@ import UploadImageButton from './components/UploadImageButton';
 import LoadingModal from './components/LoadingModal';
 import DashboardPage from './components/DashboardPage';
 import BasicsPage from './components/BasicsPage';
+import UserListPage from './components/UserListPage';
 import EditCustomHeaderModal from './components/EditCustomHeaderModal';
 import PermissionsPage from './components/PermissionsPage';
 import PermissionDropdown from './components/PermissionDropdown';
@@ -59,6 +60,7 @@ export default Object.assign(compat, {
   'components/LoadingModal': LoadingModal,
   'components/DashboardPage': DashboardPage,
   'components/BasicsPage': BasicsPage,
+  'components/UserListPage': UserListPage,
   'components/EditCustomHeaderModal': EditCustomHeaderModal,
   'components/PermissionsPage': PermissionsPage,
   'components/PermissionDropdown': PermissionDropdown,

js/src/admin/components/AdminNav.js

@@ -94,6 +94,13 @@ export default class AdminNav extends Component {
       </LinkButton>
     );
 
+    items.add(
+      'userList',
+      <LinkButton href={app.route('users')} icon="fas fa-users" title={app.translator.trans('core.admin.nav.userlist_title')}>
+        {app.translator.trans('core.admin.nav.userlist_button')}
+      </LinkButton>
+    );
+
     items.add(
       'search',
       <div className="Search-input">