Jetpack section: Add Jetpack tab to Settings section

[cleacos]

Changes proposed in this Pull Request

Add a new Jetpack subsection-tab to the Settings sections in Calypso and move the Credential block to it.

(note: in this PR the Credential block is the Credential component from Calypso and not from cloud. On an upcoming PR we'll set the Credential component from cloud.

Testing instructions

• Apply this change

1. yarn start-jetpack-section if not, use the flags query ?flags=jetpack/features-section
2. Select a Jetpack site and go to the Settings section, you'll see the new Jetpack tab
3. Click on the Jetpack tab and you should see the Credential block (with a connected or disconnected status)
4. Click on the Security tab, you shouldn't see the Credential block and you'll see a banner with a CTA that will take you to the Jetpack tab, click on that CTA and check if it takes you to the Jetpack tab.

• Now deactivate the Jetpack features-section with this query: ?flags=-jetpack/features-section
• Check again the point 2: now you shouldn't see the Jetpack tab
• Check again the point 4: now you should see the Credential block as always.

[matticbot]

Test live: https://calypso.live/?branch=move/jetpack-cloud-setting-section-to-wp-jetpack-tab

[matticbot]

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

Webpack Runtime (~406 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest      +1313 B  (+0.7%)     +406 B  (+1.1%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name        parsed_size           gzip_size
entry-main      +1208 B  (+0.1%)      +59 B  (+0.0%)

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

Sections (~60409 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
settings-jetpack        +209823 B    (new)   +58384 B    (new)
settings-security         +1206 B  (+0.5%)    +1689 B  (+2.4%)
settings-writing           +201 B  (+0.0%)      +36 B  (+0.0%)
settings-performance       +201 B  (+0.1%)      +41 B  (+0.1%)
settings-discussion        +201 B  (+0.1%)      +35 B  (+0.1%)
settings                   +201 B  (+0.0%)      +33 B  (+0.0%)
activity                   +104 B  (+0.0%)     +673 B  (+0.6%)
stats                       +46 B  (+0.0%)     -489 B  (-0.2%)
signup                      +40 B  (+0.0%)       +7 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.

[rcanepa]

LGTM! I tested both cases and they worked as expected.

[rcanepa]

@cleacos, I think there is still one more thing to do. @keoshi commented in #43125 that we should include the highlight mentioned here: #40018

[cleacos]

@rcanepa okay, thanks. Let's do it in another PR

[a8ci18n]

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

Hi @cleacos, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include this string: No Jetpack configuration is required.

Thank you in advance!

[a8ci18n]

Translation for this Pull Request has now been finished.