Bulk invite the Polish

[Twixes]

Changes

Polished bulk invite modal, so that we can use it universally instead of mixing the original single-invite one with bulk.
The modal starts with one row now, with the button adding more at a time. Multiple at a time seemed kind of sloppy.

Before	After	Single invite (for comparison)

Checklist

• Django backend tests
• Jest frontend tests
• Cypress end-to-end tests

[paolodamico]

Before doing a full review, I'd like to take a step back and discuss this conceptually. Can't find the original conversation where we talked about this, but the reason I created a new component and not updated the original one is that I think it's a very, very confusing UX to have this form when you don't have email support in your instance. It is the reason too why in the new onboarding (#2822) we don't include this step in the setup process if there's no email engine available.

Currently we know from user feedback (and even from our own team) that it's quite confusing to invite team members even with the yellow warning thing, because by entering the email address you expect the invite to be sent automatically. If we do this with bulk invites, this is going to be even worse, and now you have to copy each link individually.

I believe we need to rethink the strategy for invites when email is not available and/or make it dead simple to setup email support on self-hosted (personally I believe the second one is a must), and until then I would personally hold off on allowing bulk invites if email support is not available. Thoughts?

[Twixes]

I agree that this is confusing if email-sending is not enabled. That's also why this PR doesn't introduce this component to any new places, only polishes it for places where it's used now. That means onboarding and user dropdown. I do suggest replacing it with the classic invite modal in the user dropdown though – this UX is too confusing on private, non-email-enabled instances.

Moving forward, universal emails will be necessary for sure. And then we'll be able to stick to this component.
Besides invitations, we could also use emails for e.g. verifying email addresses (which we don't do now).

In the meantime, this revamp of what we have now is ready for review.

[paolodamico]

Good stuff! Added some comments inline. One additional thing that might be quite useful is to improve keyboard navigation (mainly make sure you can easily add more rows so you can fill out all the invites without using your mouse).

[Twixes]

Up for re-review. Points with 👍 have been addressed.

However, given the opacity of this UX in cases where email-sending is not enabled, I suggest using the original single-invite modal in the user dropdown. How about that?

As for keyboard navigation, this is all Tab-navigable nicely. Though I had to remove the btn-add class, as it was interfering with AntD's Tab focus styling.

BTW, I stumbled upon this line https://github.com/PostHog/posthog/blob/master/frontend/src/scenes/organization/TeamMembers/invitesLogic.tsx#L47, should we adjust that?

[mariusandra]

Probably an old joke by now, but this is what I imagine will happen if you bulk invite Polish:

[Twixes]

😃

[paolodamico]

Agreed on the user dropdown UX, updated! We still don't support setting first name on individual invites so I think that's still false, but thanks for the heads up.

Will avoid merging so you can give it one final look.