Admin Panel: Create all Users page

Description

Part of the larger effort to create an Admin Panel to allow admin users to manage content from within the platform itself. Overarching issue to come.

Fill the /admin/users page’s content and style it to match the designs.

Acceptance Criteria Checklist:

• Route shows a virtualized list of all the current and pending users
• Table shows the following data for each User as columns: Type, Username, Singup Date, Roles, and Status
• Clicking a User’s row in the table links to edit the User’s entry at /admin/users/[id] (placeholder page for now)
• Type column is represented in each User’s row item as the badge icon version, not text.
• Table of elements is styled to match Figma designs on Desktop
• Table header shows total number of users (and pending users)
• Table header and column header rows are sticky when scrolled past
• Search box does simple fuzzy text search of only user’s display name and username on each new character beyond 3 characters. See “Build recommendations” section for more info.
• User can toggle sorting by clicking on the column header buttons.
  • By default, sorting is by Username in Descending order.
  • Clicking a new column button sorts by that column. Only one column can control sorting at a time, they do not stack
  • Clicking a column button repeatedly cycles through sort order for that column: None (-), Descending (⬇️), and Ascending (⬆️), then back to None.
  • If all sort orders are (manually) set to None, Users are sorted by id in ascending order.
• Admins can filter by Type and Role by clicking small secondary buttons beside each of those column headers buttons
  • Clicking the button opens a popout menu (shown in the mockup) with each of the available values shown as checkboxes
  • If any items are selected, the Users are filtered to only include ones with matching values

Related Pages

Related to all other pages within the larger Admin Panel effort (overarching issue to come), including #1507.

Mockups

Visit the Figma space where the mockups are hosted to fully inspect them. Comments and questions about them can be added by pressing C and clicking where you want to pin a discussion, tag @franknoirot or @davehakkens within.

Here is the relevant desktop design as of 28/02/22. The browse all Users page, with one of the filter menus expanded:

Build Recommendations

• On Mobile, I recommend having table section scroll horizontally as a lightweight solution (in addition to any font-sizing adjustments that occur already).
• For fuzzy search, it is worth looking into fuse.js, which is lightweight and easy to configure.

[Kiebert]

Hey @davehakkens
The simple design things (color of the user name and activated filter border line) are done. And I merged the latest master version in this branch.

Currently I do not see a problem with the way the database query is done. It now loads all available users into the grid in one go. That seems to work fine with around 10.000 of users.

I assume if the users amount increases to around 100.000 users then you will probably need to chop up the data retrieval in separate chunks.

I created a PR to merge my additions to the branch ‘feat/admin-users’ branch: https://github.com/ONEARMY/community-platform/pull/1987

Let me know if something needs an update…

[Kiebert]

@davehakkens Good to know that there is a branch/PR already. I will have a look at the code to see if I can work with that. If it is too complex for my brain I will let you know.