Emails page redesign

Created by: artemruts

Fixes #15409

Reworked Setting/Emails page, removed FilteredConnection and hopefully simplified a few things. There's a "Set primary address" select now, ty @ryanslade. A 80% of the time I spend recalling React.

CSS:

• Maybe select element can have fixed(-ish) width?
• Replace filtered-connection styles, what approach should I take?
• Not sure why modal looks that way, why did we set width: 32 rem?

@quinnkeast some of the styles are definitely not 1 to 1 as in Figma, which elements stand out to you the most?

Created by: codecov[bot]

Codecov Report

Merging #15778 (4da6551) into main (e6ba3e5) will decrease coverage by 0.00%. The diff coverage is 6.72%.

@@            Coverage Diff             @@
##             main   #15778      +/-   ##
==========================================
- Coverage   52.97%   52.97%   -0.01%     
==========================================
  Files        1649     1651       +2     
  Lines       82442    82452      +10     
  Branches     7413     7334      -79     
==========================================
+ Hits        43671    43676       +5     
- Misses      34928    34932       +4     
- Partials     3843     3844       +1     

Flag	Coverage Δ
go	52.56% <ø> (-0.01%)
integration	29.10% <0.00%> (-0.05%)
storybook	28.00% <22.22%> (-0.01%)
typescript	53.95% <6.72%> (+<0.01%)
unit	36.02% <6.72%> (+0.04%)

Impacted Files	Coverage Δ
.../web/src/user/settings/emails/AddUserEmailForm.tsx	0.00% <0.00%> (ø)
...c/user/settings/emails/SetUserPrimaryEmailForm.tsx	0.00% <0.00%> (ø)
client/web/src/user/settings/emails/UserEmail.tsx	0.00% <0.00%> (ø)
...rc/user/settings/emails/UserSettingsEmailsPage.tsx	0.00% <0.00%> (ø)
client/shared/src/util/useInputValidation.ts	94.00% <88.88%> (-1.24%)
cmd/repo-updater/repos/syncer.go	76.92% <0.00%> (-0.54%)

Created by: quinnkeast

I've created a visual QA in Figma here:

https://www.figma.com/file/zXvqCASHDzmvKbrAl1EVsd/Public-and-Private-Repos-for-Users-on-Cloud?node-id=291%3A228

I don't know if this is the best format, but let me know if it works or if I should make any adjustments to how I share this QA feedback!

Re: confirmation modal, I don't believe we need to show the confirmation modal. Only the non-primary email can be removed, and it's easy enough to add it back that we don't need the extra confirmation step.

Created by: artemruts

@quinnkeast would it be possible to ship this UI without the resend email verification link?
I'll file a separate issue and pair with somebody on this.

Also can you please check this UI one more time?

Created by: quinnkeast

@quinnkeast would it be possible to ship this UI without the resend email verification link? I'll file a separate issue and pair with somebody on this.

Yes, that sounds fine! Let me know if I can help with the issue.

Also can you please check this UI one more time?

For sure. Two last bits of feedback:

The placeholder on the Email input isn't needed, and should be removed.

The external corners of the email list should have a 4px corner radius, like so:

Created by: tjkandala

Pushed a quick commit to fix a UI state issue when emails are deleted in quick succession. We were filtering on emails at the time that the user clicked "remove", so when the mutation promise resolved, there was a chance that we added deleted emails back to the array. Now, we use a setState callback so we're always passed the latest emails.

Email deletion before

Email deletion after

Also ensures that users can't click "Add" when the email is not valid

Created by: felixfbecker

That's the kind of bug refetching avoids :)

Created by: artemruts

@tjkandala thanks for UI fixes