Domains: Redesigned domain list updates #58980

leonardost · 2021-12-09T00:06:31Z

Changes proposed in this Pull Request

This PR addresses the design review issues pointed out in pcYYhz-pX-p2#comment-388, pcYYhz-pX-p2#comment-389 and pcYYhz-pX-p2#comment-390, which were:

"Get your domain" card appearing above the domain filters dropdown

When clicking the "All my domains" option in the domain filters dropdown, the user was sent to the "All domains" page with the "All domains" filter selected instead of the "Owned by me" filter
Switch the position of the "+" sign in the "Create site +" and "Add +" (email) links in the domains list

You can compare them with the previous designs:

Testing instructions

Build this branch locally or open the live Calypso link
- If you're in the live Calypso link, please append ?flags=domains/management-list-redesign to your URL to enable the appropriate feature flag

Points to verify:

"Get your domain" card position

Select a site with a plan where you haven't used domain credits yet, i.e. you didn't claim your free domain
Go to "Upgrades > Domains"
Check if the "Get your domain" card appears in the correct location in mobile view

Clicking "All my domains" filter option

In the domains filter dropdown, select "All my domains" and ensure you're taken to the "All domains" page with the "Owned by me" filter selected

"+ Create site" and "+ Add" links

In the "All domains" page, ensure that the "Create site +" link reads "+ Create site" now - this link appears for domain-only sites
Select a site where you have domains without email configured, go to "Upgrades > Domains" and ensure the "Add +" link in the "Email" column reads "+ Add" now

… my domains" in domain filter button

github-actions · 2021-12-09T00:06:51Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-21878
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-21878&env=jetpack

matticbot · 2021-12-09T00:07:35Z

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

Sections (~19 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
domains        +77 B  (+0.0%)      +19 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.

a8ci18n · 2021-12-09T00:11:48Z

client/my-sites/domains/domain-management/list/domain-row.jsx

@@ -284,7 +284,7 @@ class DomainRow extends PureComponent {

 		return (
 			<a href="#" onClick={ this.addEmailClick }>
-				{ translate( 'Add +', { context: 'Button label' } ) }
+				{ translate( '+ Add', { context: 'Button label' } ) }


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

poligilad-auto · 2021-12-09T08:30:09Z

Nice work @leonardost and thanks.
All is working as expected.

There is just a strange functionality that happened to me:
I started with a site with no domains > selected "All my domains" > saw "All domains" but the list was empty > I switched to a site where I own 2 domains > selected "All my domains" > saw "All domains" and now I saw the list with 2 domains that I own (but I own more) > switched to another site with a domain > selected "All my domains" > saw "All domains" with 3 domains that I own 🤷‍♀️

Hope my explanation is clear :)

poligilad-auto · 2021-12-09T09:17:54Z

Also @leonardost, really sorry for not noticing this before.
In the designs the big version (when there are also no connected domains) of the banner doesn't have any borders (as we have enough on the page as is).
Could we also make that update here?

leonardost · 2021-12-09T15:36:02Z

Thanks for the review @poligilad-auto!

Could we also make that update here?

No worries, sure thing! Should the border be removed in mobile view too, like this?

I started with a site with no domains > selected "All my domains" > saw "All domains" but the list was empty > I switched to a site where I own 2 domains > selected "All my domains" > saw "All domains" and now I saw the list with 2 domains that I own (but I own more) > switched to another site with a domain > selected "All my domains" > saw "All domains" with 3 domains that I own 🤷‍♀️

This is weird 🤔 I can't seem to reproduce this in my account, every time I select "All my domains" the same domains appear in my list.

Each time you clicked on "All my domains" were you taken to the "All domains" page with the "Owned by me" filter selected? Does this behavior (different domains appearing in the list) occur every time if you follow the same steps?

gius80 · 2021-12-10T08:52:54Z

This is weird 🤔 I can't seem to reproduce this in my account, every time I select "All my domains" the same domains appear in my list.

I also can not reproduce it.🤯

I still see the border on the banner but I guess you're waiting for the feedback for mobile version, but everything else looks ok to me! 🙂

leonardost · 2021-12-10T14:46:42Z

I'll be deploying this PR so we can start preparing to disable the domains list feature flag and launch for customers 🙂 if anything comes up we can address it in a following PR

a8ci18n · 2021-12-10T15:16:44Z

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

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

poligilad-auto · 2021-12-13T08:59:15Z

@leonardost

No worries, sure thing! Should the border be removed in mobile view too, like this?

Thanks! And yes, exactly.

This is weird 🤔 I can't seem to reproduce this in my account, every time I select "All my domains" the same domains appear in my list.

Each time you clicked on "All my domains" were you taken to the "All domains" page with the "Owned by me" filter selected? Does this behavior (different domains appearing in the list) occur every time if you follow the same steps?

That's strange.. Yes, it happens every time. It's as if the current site domains are "added" to the "all domains" list when I visit that site. Check it out:

Strange.mov

leonardost · 2021-12-14T17:40:25Z

@poligilad-auto thanks for the recording! And that's so odd 🤔 I've created a card in Asana for us to keep track and investigate that issue further 1146722293412575-as-1201515666298451

a8ci18n · 2021-12-17T13:29:12Z

Translation for this Pull Request has now been finished.

In the all domains page we do a `GET /all-domains/` query, which retrieves all the domains for all the sites of a user. So at least the initial domain list render should be quick, because the `all-domans` query is pretty fast even when you have many domains. The weird behavior reported in #58980 (comment) was happening because the `createLightSiteDomainObject` method was not processing the `current_user_is_owner` property - it was only set for domains that were fully loaded before. This PR adds this property and removes the `AllSitesDomains` query that was being done upfront and increased the page's load time.

leonardost added 4 commits December 8, 2021 17:10

Swap position of "plus" in labels

ef66bad

Show "Claim free domain" card below domain list filter button

ba77917

Update some attributes to appease linter

8d70255

Go to "all domains list" filtered by owned domains when clicking "All…

8d1d00f

… my domains" in domain filter button

leonardost requested a review from a team as a code owner December 9, 2021 00:06

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 9, 2021

a8ci18n reviewed Dec 9, 2021

View reviewed changes

leonardost added the [Feature Group] Emails & Domains Features related to email integrations and domain management. label Dec 9, 2021

leonardost requested a review from a team December 9, 2021 00:45

Remove border of large "Get your domain" card

27ef814

gius80 self-requested a review December 10, 2021 08:18

leonardost merged commit 7e51f28 into trunk Dec 10, 2021

leonardost deleted the update/redesigned-domain-list-updates branch December 10, 2021 14:51

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 10, 2021

rafaelgallani mentioned this pull request Dec 15, 2021

Domains: Fix "All domains" page load #59269

Merged

leonardost mentioned this pull request Dec 23, 2021

Domain: Improve loading performance of the all domains page #59544

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Domains: Redesigned domain list updates #58980

Domains: Redesigned domain list updates #58980

leonardost commented Dec 9, 2021 •

edited

github-actions bot commented Dec 9, 2021 •

edited by matticbot

matticbot commented Dec 9, 2021 •

edited

a8ci18n Dec 9, 2021

poligilad-auto commented Dec 9, 2021

poligilad-auto commented Dec 9, 2021

leonardost commented Dec 9, 2021

gius80 commented Dec 10, 2021

leonardost commented Dec 10, 2021

a8ci18n commented Dec 10, 2021

poligilad-auto commented Dec 13, 2021

leonardost commented Dec 14, 2021

a8ci18n commented Dec 17, 2021

Domains: Redesigned domain list updates #58980

Domains: Redesigned domain list updates #58980

Conversation

leonardost commented Dec 9, 2021 • edited

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Dec 9, 2021 • edited by matticbot

matticbot commented Dec 9, 2021 • edited

a8ci18n Dec 9, 2021

Choose a reason for hiding this comment

poligilad-auto commented Dec 9, 2021

poligilad-auto commented Dec 9, 2021

leonardost commented Dec 9, 2021

gius80 commented Dec 10, 2021

leonardost commented Dec 10, 2021

a8ci18n commented Dec 10, 2021

poligilad-auto commented Dec 13, 2021

leonardost commented Dec 14, 2021

a8ci18n commented Dec 17, 2021

leonardost commented Dec 9, 2021 •

edited

github-actions bot commented Dec 9, 2021 •

edited by matticbot

matticbot commented Dec 9, 2021 •

edited