Settings: highlight credentials settings section when redirected from the site activity

[keoshi]

Changes proposed in this Pull Request

Right now we're sending customers from the site activity to security settings in case they haven't added server credentials yet. In these scenarios, it's easy to lose focus when jumping into settings. This PR helps focusing on the section that needs attention.

• Highlights credentials section in settings when sent from the site activity to help maintain context.
• Builds up on Site Activity: adds contextual popover menu item to add site credentials #40014

Note for reviewers: this implementation was done as the smallest MVP possible. I'm aware it is very fragile, so feel free to dismiss it.

Testing instructions

• Fire up this PR locally or using jurassic.ninja.
• Connect Jetpack.
• Go to your site activity in Calypso; e.g.: http://calypso.localhost:3000/activity-log/SITE_URL.
• Click the top banner or the popover menu item to add server credentials.
• Ensure the correct section is highlighted when redirected to settings.

[matticbot]

Test live: https://calypso.live/?branch=add/highlight-credentials-settings-section

[matticbot]

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

Sections (~103 bytes added 📈 [gzipped])

name               parsed_size           gzip_size
settings-security       +224 B  (+0.1%)      +79 B  (+0.1%)
stats                    +30 B  (+0.0%)      +10 B  (+0.0%)
activity                 +30 B  (+0.0%)      +10 B  (+0.0%)
settings                 +15 B  (+0.0%)       +4 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.

Async-loaded Components (~6 bytes added 📈 [gzipped])

name                                 parsed_size           gzip_size
async-load-signup-steps-clone-point        +15 B  (+0.0%)       +6 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[enejb]

I left a couple of minor things but other then that this looks great! Nicely done! @keoshi

[keoshi]

Thanks for the review and the suggestions, @enejb ! They both make a lot of sense.

[enejb]

This works as expected. Nicely done!