Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New emails home screen #51452

Merged
merged 41 commits into from Apr 21, 2021
Merged

New emails home screen #51452

merged 41 commits into from Apr 21, 2021

Conversation

hambai
Copy link
Contributor

@hambai hambai commented Mar 26, 2021

This is an initial PR to create the new/updated email management screens. @hambai built most of the infrastructure, but we delayed some work to wait for updated designs. The code is heavily based on #50790 but in the end it was easier to start clean and manually move stuff from the old PR.

The PR has been updated to fold in the updated designs in pcDL0W-al-p2, though we still have a ways to go before we get all the elements in.

Changes proposed in this Pull Request

  • Add the new emails home screen component
  • Introduce separate components for email list, email status, mailbox list, subscription management, etc
  • Wire in the new general-purpose REST API for email accounts (implemented in D60197-code) -- more on this in the TODO/Known Issues section
Screenshots

The email list:
Screenshot 2021-04-17 at 21 05 34

Email forwards:
Screenshot 2021-04-17 at 21 26 21
Note that the list of email forwards also needs D60279-code to land.

WordPress.com Email:
Screenshot 2021-04-17 at 21 15 05

G Suite:
Screenshot 2021-04-17 at 21 13 16

Known Issues and TODOs

This PR is mostly intended to land the core functionality behind the email/centralized-home feature flag so we can iterate with much smaller patches. It also means we can get some clear feedback from design on how to prioritise remaining tasks.

We still have the following items outstanding:

  • Verify that the implementation matches the mobile designs
  • Show warnings for the email subscription; it should be similar to how we render domain warnings in the domain management screen
  • Add the "no domains" component
  • Show the "needs action" state in the email list
  • Show the target address and verification button for email forwarding mailboxes
  • Implement the mailbox action menu and actions
  • Add tracking for all the things
  • Show an empty mailbox list when there are no mailboxes set up
  • Add loading mailboxes placeholder component
  • Move the account/mailbox loading into Redux and the global state
  • D60334-code needs to land on the back end to identify G Suite accounts (we currently show Google Workspace due to this bug)

Testing instructions

  • Apply D60197-code on your sandbox and ensure that you're routing requests to your sandbox.
    • If that patch has already been deployed (which should happen early on 2021-04-19), apply D60279-code to your sandbox to add email forwarding addresses.
  • Go to http://calypso.localhost:3000/email?flags=email/centralized-home or to /email?flags=email/centralized-home on the calypso.live branch
  • Verify general site email page works when there is only one domain for the selected site (i.e. /email/siteSlug.tld)
  • Verify that you can see all the active email services for the selected site when you have multiple domains with email services
  • Verify that you see a list of domains that don't have email under the "Other domains" section of the page
    • If you happen to have domains that don't currently allow email purchases (which are mostly triggered due to the domain being expired or due to it being owned by another user), ensure that the "Add Email" button is not displayed.
  • Verify that you can navigate to each service/domain combination, and on each of those pages verify the following:
    • We show an appropriate title (with the exception of G Suite, which is due to a bug addressed by D60334-code)
    • We show the correct logo in the header, and offer subscription management options for WordPress.com Email, G Suite, and Google Workspace, but don't offer the subscription toggles for email forwarding and Titan purchases from the MVP period. (This last may not be easy to test/verify -- we can defer that.)
    • For all providers, we show the list of mailboxes/forwards _(with the possible exception of email forwards, which depend on D60279-code)
    • For all providers, we show a menu item to add a new mailbox, and clicking on the item takes you to the correct page
    • For WordPress.com Email, G Suite, and Google Workspace, we show a "Manage all mailboxes" item with an external link indicator, and clicking on it takes you to the correct admin UI. If you're running via calypso.localhost, the WordPress.com Email link should not be internal, as we show the iframed control panel in that case.
    • For WordPress.com Email, G Suite, and Google Workspace, we show a "Billing and payment settings" link. Confirm that clicking on the link takes you to the subscription management page.

In general, please keep an eye out for any weirdness/bugs. We'll likely fix them in follow-up PRs, but it would be good to catch anything like this. (I already tripped over an issue with the VerticalNavItem placeholder display that I fixed in #52028!)

@hambai hambai self-assigned this Mar 26, 2021
@matticbot
Copy link
Contributor

@matticbot
Copy link
Contributor

matticbot commented Mar 26, 2021

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~280 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                 +1015 B  (+0.1%)     +280 B  (+0.1%)
entry-login                 +691 B  (+0.1%)     +175 B  (+0.1%)
entry-gutenboarding         +691 B  (+0.0%)     +175 B  (+0.0%)
entry-domains-landing       +691 B  (+0.1%)     +175 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1754 bytes added 📈 [gzipped])

name                      parsed_size            gzip_size
email                        +58305 B  (+13.7%)   +14887 B  (+12.2%)
domains                       +1389 B   (+0.1%)    +2158 B   (+0.7%)
checkout                       +199 B   (+0.0%)     +979 B   (+0.3%)
signup                         +183 B   (+0.1%)    +1009 B   (+1.7%)
plans                          -112 B   (-0.0%)     -707 B   (-0.4%)
zoninator                       +71 B   (+0.0%)      +25 B   (+0.0%)
wp-super-cache                  +71 B   (+0.0%)      +25 B   (+0.0%)
woocommerce-installation        +71 B   (+0.0%)      +25 B   (+0.1%)
woocommerce                     +71 B   (+0.0%)      +25 B   (+0.0%)
themes                          +71 B   (+0.0%)      +25 B   (+0.0%)
theme                           +71 B   (+0.0%)      +25 B   (+0.0%)
stats                           +71 B   (+0.0%)      +25 B   (+0.0%)
sites                           +71 B   (+0.1%)      +25 B   (+0.1%)
site-purchases                  +71 B   (+0.0%)      +25 B   (+0.0%)
settings-writing                +71 B   (+0.0%)      +25 B   (+0.0%)
settings-security               +71 B   (+0.0%)      +25 B   (+0.0%)
settings-performance            +71 B   (+0.0%)      +25 B   (+0.0%)
settings-jetpack                +71 B   (+0.0%)      +25 B   (+0.0%)
settings-discussion             +71 B   (+0.0%)      +25 B   (+0.0%)
settings                        +71 B   (+0.0%)      +25 B   (+0.0%)
sensei                          +71 B   (+0.1%)      +25 B   (+0.1%)
scan                            +71 B   (+0.0%)      +25 B   (+0.0%)
purchases                       +71 B   (+0.0%)      +25 B   (+0.0%)
preview                         +71 B   (+0.1%)      +25 B   (+0.1%)
posts-custom                    +71 B   (+0.0%)      +25 B   (+0.0%)
posts                           +71 B   (+0.0%)      +25 B   (+0.0%)
plugins                         +71 B   (+0.0%)      +25 B   (+0.0%)
people                          +71 B   (+0.0%)      +31 B   (+0.0%)
pages                           +71 B   (+0.0%)      +25 B   (+0.0%)
migrate                         +71 B   (+0.0%)      +25 B   (+0.1%)
media                           +71 B   (+0.0%)      +25 B   (+0.0%)
marketing                       +71 B   (+0.0%)      +25 B   (+0.0%)
jetpack-search                  +71 B   (+0.0%)      +25 B   (+0.0%)
jetpack-connect                 +71 B   (+0.0%)      -21 B   (-0.0%)
jetpack-cloud-settings          +71 B   (+0.0%)      +25 B   (+0.0%)
jetpack-cloud-pricing           +71 B   (+0.0%)      -59 B   (-0.1%)
jetpack-cloud                   +71 B   (+0.1%)      +25 B   (+0.1%)
import                          +71 B   (+0.0%)      +25 B   (+0.0%)
hosting                         +71 B   (+0.0%)      +25 B   (+0.0%)
home                            +71 B   (+0.0%)      +25 B   (+0.0%)
hello-dolly                     +71 B   (+0.1%)      +25 B   (+0.1%)
gutenberg-editor                +71 B   (+0.0%)      +36 B   (+0.0%)
google-my-business              +71 B   (+0.0%)      +25 B   (+0.0%)
export                          +71 B   (+0.0%)      +25 B   (+0.1%)
earn                            +71 B   (+0.0%)      +25 B   (+0.0%)
customize                       +71 B   (+0.0%)      +25 B   (+0.1%)
concierge                       +71 B   (+0.0%)      +25 B   (+0.0%)
comments                        +71 B   (+0.0%)      +25 B   (+0.0%)
backup                          +71 B   (+0.0%)      +25 B   (+0.0%)
activity                        +71 B   (+0.0%)      +25 B   (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

@hambai hambai added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 29, 2021
@hambai hambai marked this pull request as ready for review March 29, 2021 13:45
@hambai hambai requested a review from a team as a code owner March 29, 2021 13:45
Copy link
Contributor

@stephanethomas stephanethomas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like how clear the logic is, and how each component are designed (except maybe the EmailPlanView which is doing too many things). That's a lot of code so I left several comments but most of them are minor.

Not for this pull request but we should probably make sure that all pages of the domain and email management sections have the same width, as right now it's not consistent. We could also order the lists of domains alphabetically on the new Email Homepage.

}

return true;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aren't we performing eligibility checks server-side now? @daledupreez or @olaseni may be able to provide more details.

client/lib/domains/email-forwarding/has-email-forwards.js Outdated Show resolved Hide resolved
client/my-sites/email/email-management/email-home.jsx Outdated Show resolved Hide resolved
</React.Fragment>
);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would recommend refactoring this component. At first I thought it would handle all types of email accounts. Then I started reading it, and found that it actually contains lots of logic that is specific to Titan. And finally, I've realized that it's indeed for G Suite and email forwards when I reached the part where we connect it to the Redux state tree. We should really separate responsibilities, extract the code that retrieves the list of Titan mailboxes in a Query component, moves the normalization logic in another component ...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code is in there temporary - I just didn't want to add all the boilerplate code in one single PR as that would make the PR even bigger. This is actually on my list of next tasks - "Move the Titan mailboxes loading into global state"

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha. I've mentioned it in the server patch but I believe we could simplify this code a lot if data normalization happened on the server, and if we used one API endpoint to retrieve all the email accounts (may they be for Titan or Google Workspace).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually there is a stub for this called QueryEmailAccounts and related redux stuff in client/state/email-accounts but it would require a lot more changed to actually make this work so I decided on making this PR work instead and leave the refactoring for later. It would definitely make the code simpler but it's just too big to include in this PR.

@saygunnyc saygunnyc added the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Apr 2, 2021
@github-actions github-actions bot added the [Status] Design Input Requested Label automatically added to PRs where design feedback is requested label Apr 2, 2021
@saygunnyc saygunnyc removed [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR [Status] Design Input Requested Label automatically added to PRs where design feedback is requested labels Apr 2, 2021
@daledupreez daledupreez assigned daledupreez and unassigned hambai Apr 16, 2021
@daledupreez daledupreez added the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Apr 17, 2021
@github-actions github-actions bot added the [Status] Design Input Requested Label automatically added to PRs where design feedback is requested label Apr 17, 2021
@daledupreez daledupreez requested a review from a team April 17, 2021 19:59
@daledupreez
Copy link
Contributor

@saygunnyc, when you get online today, I would really appreciate your eyes on the changes here. We're not all the way there yet in terms of implementation, but this gets the bulk of the infrastructure into place. (There are plenty of TODOs to take on!)

In particular, there is one smaller item where I'd like you to weigh in, and then a much broader one as well.

Vertical spacing

The first area that would be good to align on is vertical spacing. The designs have all the cards in lists with a height of 80px. In the main home page, I think that makes sense, as we have a lot going on in each row, including buttons and/or logos, so the space is likely necessary. On the domain/account-specific page, the default spacing for cards has the height way less at around 56px, as all the rows only contain text. In this iteration, I've increased the padding to 24px above and below the text, but this only brings the height for these rows to 72px. LMK if you think we should increase the padding to 28px either side to keep the element spacing the same vs the internal spacing.

Staging the remaining work

While our goal is clearly to ship all the improvements to users, I also don't want to defer getting all the improvements into place before we launch the new pages. From my side, I think the following items are absolute must-haves. Please weigh in with any not on my list that you think we need for launch.

Proposed must-haves

  • Mobile support - we haven't worked on this yet
  • Show warnings/notices for each email subscription; it should be similar to how we render domain warnings in the domain management screen
  • Implement the "no domains" component
  • Show the "needs action" state in the email list
  • Show the target address and verification button for email forwarding mailboxes
  • Add tracking for all clicks and navigation
  • Show an empty mailbox list when there are no mailboxes set up
  • Add loading mailboxes placeholder component
Proposed non-blocking items
  • Implement the mailbox action menu and actions
  • Move the account/mailbox loading into Redux and the global state
  • Update some email-related pages to navigate "Back" to the correct page instead of going to domain management by default (though there are some flows where that is appropriate, like clicking "Add Email" on the domain listing screen or managing email from the domains screen).
  • Update some email-related pages to use the new email header instead the domain header

@saygunnyc
Copy link

Hey Dale,
Thank you for sharing this!

Vertical spacing

Yes, let's have all be consistent. Same height for both email products and mailboxes. Mailboxes will also have a lot going on soon with the addition of the overflow menu, nudges, and CTAs, so I'd say it's better to do the change now rather than later.

Staging the remaining work

At a high level, I would say we shouldn't be removing any functionalities or links that users can reach today. An example of that would be having links to Gmail, Slides, etc. on Google Workspace as well as Inbox, Calendar, etc. on Titan. I'm open to staging what makes the most sense for the rest but in a frame where we're not creating UX issues or taking away something we provided earlier to the user.

One another question,

Show an empty mailbox list when there are no mailboxes set up

Do we have a case like this? If yes, then we should direct the user to take action. What's the required action for the user in this case? How does the empty mailbox list look like?

* extract the email type icon
* fixed the active email list styling
* fixed the active email mailbox count string
Copy link
Contributor

@stephanethomas stephanethomas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tested it, and everything seems to work fine - apart from the limitations already mentioned in the description of this pull request. I've found the following issues though:

  1. We don't display any Finish Setup notice for Google Workspace and G Suite
  2. We don't display any Finish Setup button for Google Workspace and G Suite
  3. We don't display any You have n unused mailbox message for Titan
  4. The Back button always redirects to the general Email page even if coming from the Domain Settings page

All of this, plus the suggestions I've made in some comments, can of course be addressed in future iterations. It would be good to address issue #1 and #2 asap though.


export function isEmailUserAdmin( emailUser ) {
return EMAIL_USER_ROLE_ADMIN === emailUser?.role;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm concerned that we're introducing yet another name for something we usually call a user for G Suite, and mailbox for Titan. We should really agree on a term.

client/lib/gsuite/get-google-product-slug.js Outdated Show resolved Hide resolved
@@ -759,6 +759,18 @@ Undocumented.prototype.validateGoogleAppsContactInformation = function (
return result.then?.( camelCaseKeys );
};

Undocumented.prototype.getEmailAccountsForSiteAndDomain = function ( siteId, domain, fn ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the name reflect the fact that the list of accounts retrieved will also contain the list of mailboxes? What will happen when we start using this API endpoint to only retrieve accounts (and not mailboxes)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thinking here is that I want this to be replaced/updated pretty soon.

In terms of naming, does it make sense to call this getMailboxesForSiteAndDomain()? Or should we call it something else?

return this.renderContentWithHeader(
<>
<SectionHeader className="email-home__section-placeholder is-placeholder" />
<Card className="email-home__content-placeholder is-placeholder" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to define the email-home__section-placeholder and email-home__content-placeholder classes? There are never used anywhere.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think I added these specific classes, but this is a "feature" of the linter -- all initial class names need to include an acceptable prefix.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that the linter may complain if a class name doesn't have the right prefix. Do you mean it also added those class names itself (assuming you used it with the --fix argument)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, the issue is that if you try to add just a different classname, like className="is-placeholder", the linter won't accept that. One workaround is to then use className="some_compliant_prefix__something is-placeholder". I am not saying that it's a good approach, but it's one that is linter-compliant. :-/

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, thanks for the clarification. There is not much we can do indeed 😞.

client/my-sites/email/email-management/home/email-plan.jsx Outdated Show resolved Hide resolved
client/my-sites/email/email-management/home/email-plan.jsx Outdated Show resolved Hide resolved
return '';
}

export function resolveEmailPlanStatus( domain ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a big fan of that function name as it doesn't provide any clue regarding the type of data returned. Maybe it does too much? Looking at how it is used, maybe we could have two distinct functions - one that returns if the status is ok or not, and another one that renders this status:

export function renderEmailPlanStatus( domain ) {
  let icon = 'check_circle';
  let text = translate( 'Active' );

  if ( hasPendingGSuiteUsers( domain ) ) {
    icon = 'info';
    text = translate( 'Action required' );
  }

  return (
    <span className="email-plan__status">
      <MaterialIcon icon={ icon } /> { text }
    </span>
  );
}

width: 150px;
height: 28px;
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of this should most probably be moved to a new stylesheet in the home subfolder.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed.

return translate( 'Email settings' );
}

return translate( 'Email forwarding settings' );
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 32 times:
translate( 'Email Forwarding' ) ES Score: 6

const managePurchaseUrl = getManagePurchaseUrlFor( selectedSite.slug, purchase.id );
return (
<VerticalNavItem path={ managePurchaseUrl }>
{ translate( 'Billing and payment settings' ) }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 18 times:
translate( 'Update your billing and payment settings' ) ES Score: 7

<div className="email-plan__actions">
<VerticalNav>
<VerticalNavItem { ...addMailboxProps }>
{ translate( 'Add new mailbox' ) }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 17 times:
translate( 'Add New Mailboxes' ) ES Score: 8

@saygunnyc
Copy link

How are we planning to resolve these cases if not within the interface?
1.We don't display any Finish Setup notice for Google Workspace and G Suite
2.We don't display any Finish Setup button for Google Workspace and G Suite
3.We don't display any You have n unused mailbox message for Titan

Can you expand this a little, so I understand better.
4.The Back button always redirects to the general Email page even if coming from the Domain Settings page

@stephanethomas
Copy link
Contributor

How are we planning to resolve these cases if not within the interface?

I'm not sure to understand your question @saygunnyc 🙂. I personally think those issues should be addressed prior to launching this new Emails page to users. They don't prevent us from merging this pull request though since this page is hidden behind a feature flag.

Can you expand this a little, so I understand better.

Sure. If I'm on the new Emails page and click a Google Workspace account I'm presented with the Google Workspace settings page. If I click the Back button in the section header, I'm redirected to the Emails page, all is fine. Now if go to the Domains page, click the domain of that Google Workspace account, click the Manage your email accounts option, I'm again presented with the same Google Workspace settings page than earlier. However, if I click the Back button I'm taken to the Emails page while I would have expected to go back to the Domain Settings page (like the back button of the browser).

@saygunnyc
Copy link

Yes, all make sense to me now! Thank you, @stephanethomas for clarifying!

@daledupreez daledupreez merged commit 09e109d into trunk Apr 21, 2021
@daledupreez daledupreez deleted the new/email-home-screen branch April 21, 2021 17:56
@github-actions github-actions bot removed [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Design Input Requested Label automatically added to PRs where design feedback is requested labels Apr 21, 2021
@a8ci18n
Copy link

a8ci18n commented Apr 21, 2021

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5748853

Thank you @hambai for including a screenshot in the description! This is really helpful for our translators.


state = {
isLoadingEmailAccounts: false,
errorLoadingEmailAccounts: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like we set this state property but we never use it. Maybe it can be removed?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Marin! I will remove it in #52815.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @stephanethomas 🙌

@a8ci18n
Copy link

a8ci18n commented Apr 30, 2021

Translation for this Pull Request has now been finished.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants