Add boilerplate code for the new domain list #57188

hambai · 2021-10-20T13:30:07Z

Changes proposed in this Pull Request

Copy the existing domain management List component into a new one called SiteDomains
Extract some of the code into a separate component called DomainsTable
Created DomainsTableHeader that'll be the base of the domains list header
Added a few TODO items

Testing instructions

Open up the site domain list with the feature flag enabled - it should work mostly as it was before with the slight change that there is a header and the background of the page is white

It should look like this

:

github-actions · 2021-10-20T13:30:29Z

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

matticbot · 2021-10-20T13:30:55Z

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

Sections (~1865 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
domains      +8418 B  (+0.6%)    +1865 B  (+0.5%)

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.

leonardost

LGTM! Thank you for doing this 🙇‍♂️

a8ci18n · 2021-10-20T15:18:43Z

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

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

@hambai

Changes proposed in this Pull Request: This PR adds the breadcrumbs section for the new domain management list page. This is part of the domain management pages redesign described in pcYYhz-m2-p2. Testing instructions: Access the live Calypso link, go to "Upgrades > Domains", and append this feature flag to your browser's URL: ?flags=domains/management-list-redesign. Ensure the page contains the breadcrumbs as shown in the screenshot above and that all links work as expected. The page still contains only the breadcrumbs. This PR depends on #57038. Commits: * Create breadcrumbs for the domains management list page I 'll rename `list-new` to something more meaningful before finishing this PR. (sorry @hambai!) * Move files from `list-new` folder to `list` * Rename import of new List component * Remove unnecessary DomainActionsButton component, reuse AddDomainButton * Add white background CSS class to body * Rebase on #57188 * Add icons to the "Add a domain" button * Make Breadcrumbs span the entire allowed width in desktop view * Add code that should make Breadcrumbs stick top the top of the page * Make first breadcrumb item bold in mobile view * Make string translatable * Update mobile view buttons to reduce used layout space

Changes proposed in this Pull Request: This PR depends on #57111 for the white background CSS class. This is part of the domain managements page redesign project, detailed in pcYYhz-m2-p2. This PR redesigns the free WPCOM address component which is located at the bottom of the domain management list page. It's main updates were the addition of a background and replacing the popover menu button with an ellipsis menu. Testing instructions: Access the live Calypso link, go to "Upgrades > domains" and append this feature flag to your browser's URL: ?flags=domains/management-list-redesign. Ensure the page contains the free WordPress address component and it looks like the screenshots above. Commits: * Add redesigned free WPCOM address component * Adjust mobile view CSS * Replace component background color with variable and make page background white * Move free domain item component to `list` folder * Rebase on #57188 * Fix styling issues as per design review * Replace gridicons with Gutenberg icons * Change horizontal ellipsis by vertical ellipsis * Update `EllipsisMenu` docs * Remove duplicated `icon` const

@hambai

Changes proposed in this Pull Request: This PR adds the breadcrumbs section for the new domain management list page. This is part of the domain management pages redesign described in pcYYhz-m2-p2. Testing instructions: Access the live Calypso link, go to "Upgrades > Domains", and append this feature flag to your browser's URL: ?flags=domains/management-list-redesign. Ensure the page contains the breadcrumbs as shown in the screenshot above and that all links work as expected. The page still contains only the breadcrumbs. This PR depends on #57038. Commits: * Create breadcrumbs for the domains management list page I 'll rename `list-new` to something more meaningful before finishing this PR. (sorry @hambai!) * Move files from `list-new` folder to `list` * Rename import of new List component * Remove unnecessary DomainActionsButton component, reuse AddDomainButton * Add white background CSS class to body * Rebase on #57188 * Add icons to the "Add a domain" button * Make Breadcrumbs span the entire allowed width in desktop view * Add code that should make Breadcrumbs stick top the top of the page * Make first breadcrumb item bold in mobile view * Make string translatable * Update mobile view buttons to reduce used layout space

a8ci18n · 2021-10-28T15:28:33Z

Translation for this Pull Request has now been finished.

@hambai

Changes proposed in this Pull Request: This PR adds the breadcrumbs section for the new domain management list page. This is part of the domain management pages redesign described in pcYYhz-m2-p2. Testing instructions: Access the live Calypso link, go to "Upgrades > Domains", and append this feature flag to your browser's URL: ?flags=domains/management-list-redesign. Ensure the page contains the breadcrumbs as shown in the screenshot above and that all links work as expected. The page still contains only the breadcrumbs. This PR depends on #57038. Commits: * Create breadcrumbs for the domains management list page I 'll rename `list-new` to something more meaningful before finishing this PR. (sorry @hambai!) * Move files from `list-new` folder to `list` * Rename import of new List component * Remove unnecessary DomainActionsButton component, reuse AddDomainButton * Add white background CSS class to body * Rebase on #57188 * Add icons to the "Add a domain" button * Make Breadcrumbs span the entire allowed width in desktop view * Add code that should make Breadcrumbs stick top the top of the page * Make first breadcrumb item bold in mobile view * Make string translatable * Update mobile view buttons to reduce used layout space

Changes proposed in this Pull Request: This PR adds the breadcrumbs section for the new domain management list page. This is part of the domain management pages redesign described in pcYYhz-m2-p2. Note: This update was done initially in PR #57082 which had to be reverted because the popover for the "Add a domain" button was being shown incorrectly (see issue #57368). That happened because two different components (desktop and mobile buttons) were using the same reference. This was corrected now. Testing instructions: Access the live Calypso link, go to "Upgrades > Domains", and append this feature flag to your browser's URL: ?flags=domains/management-list-redesign. Ensure the page contains the breadcrumbs as shown in the screenshot above and that all buttons work as expected. Please also check the page in mobile view. Commits: * Domains: Add domains management list breadcrumbs (#57082) * Create breadcrumbs for the domains management list page * Move files from `list-new` folder to `list` * Rename import of new List component * Remove unnecessary DomainActionsButton component, reuse AddDomainButton * Add white background CSS class to body * Rebase on #57188 * Add icons to the "Add a domain" button * Make Breadcrumbs span the entire allowed width in desktop view * Add code that should make Breadcrumbs stick top the top of the page * Make first breadcrumb item bold in mobile view * Make string translatable * Update mobile view buttons to reduce used layout space * Replace some GridIcons by WordPress.com icons * Fix popover location and improve code readability * Fix styling for mobile view * Remove old domain management title information * Replace ellipsis icon by `moreVertical` and fix some small layout issues * Add missing `translate` declaration

Add boilerplate code for the new domain list

c0bed67

hambai added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Feature Group] Emails & Domains Features related to email integrations and domain management. labels Oct 20, 2021

hambai requested a review from a team October 20, 2021 13:30

hambai self-assigned this Oct 20, 2021

leonardost approved these changes Oct 20, 2021

View reviewed changes

pass down some props in the DomainsTable component

58d80cd

hambai merged commit 7f89783 into trunk Oct 20, 2021

hambai deleted the add/domain-list-redesign-boilerplate branch October 20, 2021 14:12

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 Oct 20, 2021

leonardost added a commit that referenced this pull request Oct 20, 2021

Rebase on #57188

4a5c426

leonardost added a commit that referenced this pull request Oct 20, 2021

Rebase on #57188

3449713

leonardost added a commit that referenced this pull request Oct 27, 2021

Rebase on #57188

e871174

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add boilerplate code for the new domain list #57188

Add boilerplate code for the new domain list #57188

hambai commented Oct 20, 2021

github-actions bot commented Oct 20, 2021 •

edited by matticbot

Loading

matticbot commented Oct 20, 2021 •

edited

Loading

leonardost left a comment

a8ci18n commented Oct 20, 2021

a8ci18n commented Oct 28, 2021

Add boilerplate code for the new domain list #57188

Add boilerplate code for the new domain list #57188

Conversation

hambai commented Oct 20, 2021

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Oct 20, 2021 • edited by matticbot Loading

matticbot commented Oct 20, 2021 • edited Loading

leonardost left a comment

Choose a reason for hiding this comment

a8ci18n commented Oct 20, 2021

a8ci18n commented Oct 28, 2021

github-actions bot commented Oct 20, 2021 •

edited by matticbot

Loading

matticbot commented Oct 20, 2021 •

edited

Loading