People: Refresh invite UI with Form components

[ebinnion]

This PR is meant as a possible alternative to #3046.

There are potential issues with moving the form into the section header. And as we explore that in #3046, it makes sense to compare to a form on its own route.

The main benefit here is more space. This space allows us to do things such as provide explanations and labels for the fields. We could also potentially show an inline notice below the token field to provide a bit more explanation as to why a username or email didn't validate.

[rickybanister]

This makes me sad because it's not as instant and slick as the 'micro' interface in the SectionHeader, but this likely makes more long-term sense. We can ship this quickly and move on, and think about implementing the design as more of a v2. I'll keep thinking about this. In the meantime there are a few things that would be nice to improve with this PR.

Namely:

• Can we create a 'light colored' prop for the token field? It would let you just type usernames and emails more like the original design (but with the 'x' next to them to clear)?
• How can we do nice inline validation in the token field? Can we? I think submitting and getting an error notice for email validation stinks.
• We need a page title giving a bit more context to this page
• We'll want to improve some of the label language and things, add some more helper text. I can help with this.
• A general concern—the role dropdown is a many-to-one relationship here. My early early designs for this page allowed you to invite several people with different roles in one go (but it was overly complicated). Are we ok with letting people add multiple people to a single role?

Nice work on providing a quick alternative @ebinnion

[ebinnion]

Can we create a 'light colored' prop for the token field?

I think we definitely can. Although, it may be best to break this out in a separate PR.

How can we do nice inline validation in the token field?

We now have a validation endpoint, so there shouldn't be a technical issue here.

I would suggest that we add statuses, similar to how notices work, to the tags. When we combine this with the isBorderless prop as suggested in Slack chat, perhaps the text color is all that changes?

We need a page title giving a bit more context to this page

I'll go ahead and add that.

We'll want to improve some of the label language and things, add some more helper text. I can help with this.

👍

A general concern—the role dropdown is a many-to-one relationship here. My early early designs for this page allowed you to invite several people with different roles in one go (but it was overly complicated). Are we ok with letting people add multiple people to a single role?

I would say that we're OK with it as that is what currently happens in wp-admin. Also, as far as I know, the invitation system currently expects that each batch of invites is for a single role.

[lezama]

Looks good to 🚢 as base for future work 👍