Users management: Include Viewer role in the team members list

[bogiii]

Proposed Changes

For the code review, follow commit by commit; it will be more convenient.

• Introduced a dedicated route/page showing User details of the Viewer role.
  • Viewer details are a combination of user details (login, full name, avatar) and invite details (status, added by, viewer since)
  • If invite object is missing, there will be only user details
• Team members: Reconfigured fetch settings allowing getting of Viewer role
• Rearranged and fixed some typing issues
• Got rid of the Accepted invites block from the team members page.

Testing Instructions

The Follower member type will not be presented since the BE endpoint is not deployed yet, you can follow it in the PR.

The good thing, these changes can be applied/deployed, and nothing will be changed against the current app state.

Scenario 1:

• Go to /people/team/{SITE}
• Check if everything works as before
• Check if there are members and pending invites list

Scenario 2:

• Configure your sandbox to consume changes from the PR
• Go to /people/team/{SIMPLE_SITE}
• Add and accept the Viewer role as a team member
• Check if the member list shows the Viewer role
• Check if a selection of the Viewer role list item leads you to the newly created route /people/viewers/{SITE}/{USER_ID}
• Check if a Remove button functionality works correctly from the Viewer profile screen

Screenshots

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Closes #72000

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-54372

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-54372&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~385 bytes added 📈 [gzipped])

Details

name    parsed_size           gzip_size
people      +2600 B  (+0.5%)     +385 B  (+0.3%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[zaerl]

I've tried it and everything is working using the Jetpack PR. 🚢

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7757367

Thank you @bogiii for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.