Use LocaleProvider in calypso

[lsl]

Changes proposed in this Pull Request

• Implements usage of LocaleProvider, useLocalizeUrl
• Implements withLocalizeUrl
• Makes use of both with/useLocalizeUrl
• adds i18n-utils to domain-picker package

Testing instructions

• Check url is localized as shown in Localize Support URL for HSTS Tooltip in Domain Picker #45610
• Check urls is localized on the privacy settings screen
• Check existing localized urls still localize elsewhere in calypso

Fixes #45610 🎉

[matticbot]

Test live: https://calypso.live/?branch=update/use-locale

[p-jackson]

domain-picker is also used in the ETK's launch flow it will need a <LocaleProvider> added somewhere near the root. Probably in attach-launch-sidebar.tsx

[p-jackson]

Lots of CI errors, rebased in case it needed it after the trunk branch rename.

[p-jackson]

I'm at a bit of a loss as to what the build error's about. I see the error in the local build logs too, but I just can't see what the problem is.

[lsl]

Lots of CI errors, rebased in case it needed it after the trunk branch rename.

I don't think this took, tried a fresh rebase. Should probably retest, the initial testing was done against master that was probably a few days out of date.

[lsl]

That didn't work, testing moving to fresh PR in case its something build related #47692

[p-jackson]

Maybe it's something to do with the filename changing from .ts to .tsx?

[p-jackson]

Actually I wonder if this is something to do build order.
If I do yarn clean && yarn to clean the dist folders and build the packages then I get a build error. Then if I follow up with another yarn then the build succeeds. The domain-picker package is complaining about i18n-utils not existing. But after starting the second build the i18n-utils/dist/types folder exists and now. Maybe the order packages are built is alphabetical so lerna builds domain-picker first, followed by i18n-utils. This might just be the first time that this has hit us.

Looking up lerna docs to see if there's a way to change the order workspace operations are run in.

[p-jackson]

@scinos we had a broken build here before the domain-picker package was being built before i18n-utils, even though i18n-utils depends on domain-picker. Pretty unfortunate if we need to main this build ordering manually :(

From this comment it sounds like it's possible to have tsc build packages in the correct order if you also maintain a references list in each of the sibling package's tsconfig.json too. Which would be a lot of duplication.

TypeScript has a giant tracking issue to support this without having to maintain another list of dependencies.

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-main                 +1307 B  (+0.1%)      +91 B  (+0.0%)
entry-gutenboarding        +1173 B  (+0.1%)     +211 B  (+0.0%)
entry-login                +1103 B  (+0.1%)     +147 B  (+0.1%)
entry-domains-landing      +1103 B  (+0.2%)     +182 B  (+0.1%)

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

Sections (~10 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
privacy        +14 B  (+0.0%)      +10 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 (~19 bytes added 📈 [gzipped])

name                                           parsed_size           gzip_size
async-load-calypso-blocks-editor-launch-modal        +70 B  (+0.0%)      +19 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.

[scinos]

Looks like adding the reference to i18n-utils in packages/domain-picker/tsconfig.json fixed it (in #47692)

I agree it is not great to have to declare the dependencies in package.json and tsconfig.json, but I don't see how we can improve it until microsoft/TypeScript#25376 is resolved.

Maybe we can start by having some tsconfig.json linting that ensures all links are there? At least we would be able to produce a clear error, not something obscure that takes time to diagnose.

[p-jackson]

Updated so that the locale slug in context updates when when i18n-calypso fires the 'change' event. Also fixed lint error and force pushed to bring things up to date.

[p-jackson]

Looks like adding the reference to i18n-utils in packages/domain-picker/tsconfig.json fixed it

Awesome! I've brought that fix into this PR and closed #47692 since it was more just a trial PR to see if we were dealing with some GH or CI issue.

[p-jackson]

Tested and everything to do with the change is working as expected.

I tested the domain picker inside the launch flow too (so inside the ETK). The HSTS tooltip doesn't appear when you click the button. It's a bug that needs to be fixed, but not i18n related.

The woo e2e tests are failing, but I think it's because there's currently something wrong with the e2e test user's site. When I run it locally the user's dashboard looks like this:

Maybe the e2e tests have just caught the site at a bad time 🤷

[p-jackson]

Re-ran tests, passing now. Whatever was afflicting the woo test user must have been fixed.

[lsl]

Rebased, retested, everything seems ok.