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 setwidth: 32 rem
?
@quinnkeast some of the styles are definitely not 1 to 1 as in Figma, which elements stand out to you the most?
Merge request reports
Activity
Created by: codecov[bot]
Codecov Report
Merging #15778 (4da6551) into main (e6ba3e5) will decrease coverage by
0.00%
. The diff coverage is6.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:
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: 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 latestemails
.Also ensures that users can't click "Add" when the email is not valid