lib-user: refactor group stats page header items and content per group, user, and membership

[mcbouslog]

Package

• lib-user

Describe your changes

• add header link to MyGroups
• refactor GroupStats header items per user, group, and membership (role)
• add initial leave group (delete membership) functionality
• refactor GroupStats TopContributors per user, group, and membership (role)

How to Review

Helpful explanations that will make your reviewer happy:

• What Zooniverse project should my reviewer use to review UX? n/a
• What user actions should my reviewer step through to review this PR?
  • review different group types as different roles
  • you'll likely want to create a group to test as group_admin, but here are some staging groups to test as a group_member (app-root yarn dev):
    • public aggregate only: https://local.zooniverse.org:3000/groups/1326971?join_token=a7dd6ca55dc96f1d
    • public member stats: https://local.zooniverse.org:3000/groups/1326991?join_token=9a7853ccece01473
    • public show all stats: https://local.zooniverse.org:3000/groups/1326989?join_token=3df585676014b6b8
    • private aggregate only: https://local.zooniverse.org:3000/groups/1326984?join_token=62403a6204292768
    • private member stats: https://local.zooniverse.org:3000/groups/1326986?join_token=a1428f952269778b
• Which storybook stories should be reviewed?
  • TopContributors:
    • http://localhost:6008/?path=/story/components-groupstats-topcontributors--default
    • http://localhost:6008/?path=/story/components-shared-contentbox--top-contributors
• Are there plans for follow up PR’s to further fix this bug or develop this feature? see linked GitHub project

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[coveralls]

coverage: 80.363% (-0.3%) from 80.631%
when pulling 92a8e95 on lib-user_header-items-refactor
into e041fd1 on master.

[goplayoutside3]

I was able to join a public group at: https://local.zooniverse.org:3000/groups/1326991
I made contributions and left the group 👍 Once I left the group, the component refreshed and my account was removed from the contributors list.

I was a member of group https://local.zooniverse.org:3000/groups/1326984, which is a private, agg only group. When I left the group while viewing that url, the component did not refresh until I manually refreshed the page though, so I could still see the private group even though I was no longer a member. Just want to check if you're seeing the same behavior for private groups? If you need one of my private groups to test, here's a staging link: https://www.zooniverse.org/groups/1326995?join_token=0e834515f7390aa4

(Also note the group links in your PR description are all for production and would be easier to click if linked to app-root run locally).

[mcbouslog]

Ack sorry about the links! I just copied them with the related button and forgot to find and replace the domain 🤦‍♂️ I've edited accordingly.

[mcbouslog]

Yes I saw the same behavior after leaving. I added a refactor to route a user to their profile page after if the membership delete is successful. I had an iteration that stayed on the group stats page if it was a public group, but thought that might be confusing? I could add that back, as I could see an argument accordingly (stay on group stats page if public, route elsewhere if private). I think there are a few other similar situations I can bring up in related user_group meeting.

[goplayoutside3]

Much better 🎉 When I join and then leave a private or public group, I get redirected.

1. Your comment above brings up a point I want to discuss too. Because a user's profile page is not part of the launch this summer (even though there is a matching new design), I don't think we should link users to it. I think when a user is viewing /groups/[groupId] the header "back" button should be to /users/[login]/groups, aka My Groups. I don't think it makes sense to send a user "back" to PFE from any of the Groups related pages. For user stats pages, whenever a user is viewing /users/[login]/stats I think the "back" button should be to Zooniverse homepage since they're signed in. Let's definitely chat at the next user groups meeting!

   Edit: Expanding on this comment ^ to add that when a user leaves a group, they should be redirected to the My Groups page, too.

2. To double check my understanding of top contributors - the classification count used for a group's contributors only applies when a contributor made the classifications while a member of the group. Is that correct? For instance, my staging account shows I made 7 classifications on Pizza Please via the profile ribbon, but as a member of group 1326986 I made 3 classifications, and therefore my username says "3 classifications" in top contributors of the group page.

[goplayoutside3]

Just a side note that you can now use <Loader/> from lib-react-components for any loading UI if desired!

[mcbouslog]

1. Agreed and sounds good about revisiting how users are routed after certain group actions

2. That's correct, user classifications only count towards group classifications while the user is a member of the group

[mcbouslog]

Noting these code changes include console logging the resource responses after an action (i.e. deleting a group), but I've included iterations on that in this subsequent PR (i.e. f8009e8).