Import emails to invite to community

[mxstbr]

Status

• WIP
• Ready for review
• Needs testing

Deploy after merge (delete what needn't be deployed)

• hyperion (frontend)

Related issues (delete if you don't know of any)
Closes #4611

Adds ability to import JSON file with emails of users to be invited to community. Demo (note that UI is not polished, only the functionality):

Click to see test files

• users-emails.json:

  ["hi@bryn.io", "hi@brianlovin.com", "hi@mxstbr.com"]

• users-with-names.json:

  [
    { "email": "arnold@schwarzenegger.at", "name": "Arnold" },
    { "email": "elon@musk.com", "name": "Elon" },
    { "email": "notanemail", "name": "Wrong" }
  ]

Todo

• Show error when file import fails with parse error
• Button styling
• Add help text somewhere explaining the supported data shape

[mxstbr]

Added error handling (note the selected file names):

[mxstbr]

@brianlovin any ideas where best to put the help text about the supported file type and format? Do we have an existing pattern for that?

[spectrum-bot]

	Warnings
⚠️	These modified files do not have Flow enabled: src/components/emailInvitationForm/style.js src/components/mediaInput/index.js

Generated by 🚫 dangerJS

[brianlovin]

@brianlovin any ideas where best to put the help text about the supported file type and format? Do we have an existing pattern for that?

We don't have an existing pattern for this. Maybe it could look like this instead:

I don't think we need to describe the optional method of uploading an array of objects; if people find that error message, they can do it, but ideally they just upload the array of emails. What do you think?

[mxstbr]

Looks good to me, will clean this up!

[mxstbr]

Updated based on your suggestions, ready for another review @brianlovin!

[brianlovin]

@mxstbr check 9e9e31a for some logic changes:

• removes duplicates in the uploaded .json file; also de-duplicates from the existing state.contacts
• clears the input value after an upload is processed - this allows a person to upload the same file again if they messed up (eg upload, delete a couple email rows, re-upload)

You can see this in action better by uploading

[
  "hi@bryn.io",
  "hi@brianlovin.com",
  "hi@mxstbr.com",
  "hi@bryn.io",
  "hi@brianlovin.com",
  "hi@mxstbr.com",
  "hi@bryn.io",
  "hi@brianlovin.com",
  "hi@mxstbr.com",
  "bad.email",
  "shouldnt@work.com"
]

Then in the frontend, try typing one of the existing emails (like hi@brianlovin.com), then upload the file. Duplicates will be removed, and you should see bad.email highlighted with a red border.

[mxstbr]

Super nice, let's ship it!

[brianlovin]

Once tests pass I'll merge :)