Admin Panel: Create all Users page

[franknoirot]

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]

Hi @franknoirot. Can you assign me to this story?

[davehakkens]

This one is already in draft PR for a while @Kiebert : https://github.com/ONEARMY/community-platform/pull/1837 It's a complex one. You want to finish it?

[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.

[Kiebert]

I did a quickscan of the users overview page and code. Added a screenshot. I think most of the functionality is present. The branch needed to be updated with all the new master code. One 'TODO' added by the former developer is still open: optimalization of the users database query. I will have to try if I can make this more efficient.

For what I could spot the Figma mockup and the current styling differ on the following:

• A pagination element is added: I think this a good choice;
• Color of the 'User name' is different;
• Filter when activated has no 'border line';

@davehakkens Do you want to keep the pagination?

And in the mockup there is a 'Status' column: in the current page this is 'Badges': do you know more about this change of plan?

Things I did on my repository:

• The route to the users page was not activated: that was a simple adjustment.
• The table height was not responsive to the window height (check the screenshot);

[davehakkens]

hey @Kiebert thanks for looking into it! A pagination element is added: I think this a good choice; Agree Color of the 'User name' is different; Not a big problem for release, but feel free to change :) Filter when activated has no 'border line'; Also not a big problem for first release.

And in the mockup there is a 'Status' column: in the current page this is 'Badges' I think this is related to align with how we call them in the backend, would keep it like this

But let me actually ask Chris if he has any comments since he worked on it, will continue here https://github.com/ONEARMY/community-platform/pull/1837#issuecomment-1274571407

[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...