Support ?pseudolocalization=true|false to enable/disable pseudoloca…

…lization; `?lang=` to force language (ansible#3225)

* Support `?pseudolocalization=true|false` to enable/disable pseudolocalization

Pseudlocalization (>>marking<< strings marked for translation, instead of actually translating them),
is supported since ansible#810 by setting `localStorage.test_l10n = true` in the browser console and reloading the page.

> Note: the current lingui implementation needs `npm run gettext:extract; npm run gettext:compile` for any new strings before they appear as marked. We should try to remove that limitation during the i18next switch.

This PR makes it easier to enable/disable by setting a `?pseudolocalization=true/false` URL param,
which gets used to set/unset `localStorage.test_l10n`.
(Thus, after using `?pseudolocalization=true` once, you will see it until you explicitly set `?pseudolocalization=false`, even when visiting URLs without the param.)

No-Issue
(but really AAP-4750)

* Allow ?lang=ja to override detected language, ?lang= to unset it

Visiting the UI with `?pseudolocalization=true` sets `localStorage.test_l10n = true`,
and `?pseudolocalization=false` does `delete localStorage.test_l10n`.

Now, also `?lang=ja` sets `localStorage.override_l10n = 'ja'`,
and `?lang=` does `delete localStorage.override_l10n`.

This allows the user to override the language by adding an URL param,
and the UI will remember the choice until unset.

Also adding two `console.debug` messages when pseudolocalization or langugage override are enabled, with URLs to disable again.

(cherry picked from commit 6ba2b97)

src/l10n.ts

@@ -5,16 +5,10 @@ import * as moment from 'moment';
 // remember to update .linguirc as well
 const availableLanguages = ['en', 'es', 'fr', 'ko', 'nl', 'ja', 'zh'];
 
-// Accept-Language
-export const userLanguage =
-  navigator.languages
-    .map((lang) => lang.replace(/[-_].*/, ''))
-    .filter((lang) => availableLanguages.includes(lang))[0] || 'en';
-
-async function activate(locale: string) {
+async function activate(locale: string, pseudolocalization = false) {
   const { messages } = await import(`src/../locale/${locale}.js`);
 
-  if (window.localStorage.test_l10n === 'true') {
+  if (pseudolocalization) {
     Object.keys(messages).forEach((key) => {
       if (Array.isArray(messages[key])) {
         // t`Foo ${param}` -> ["Foo ", ['param']] => [">>", "Foo ", ['param'], "<<"]
@@ -33,4 +27,51 @@ async function activate(locale: string) {
   moment.locale(locale);
 }
 
-activate(userLanguage);
+// Accept-Language
+const userLanguage = navigator.languages
+  .map((lang) => lang.replace(/[-_].*/, ''))
+  .filter((lang) => availableLanguages.includes(lang))[0];
+
+const searchParams = Object.fromEntries(
+  new URLSearchParams(window.location.search),
+);
+
+if (searchParams.pseudolocalization === 'true') {
+  window.localStorage.test_l10n = 'true';
+}
+if (searchParams.pseudolocalization === 'false') {
+  delete window.localStorage.test_l10n;
+}
+
+if (searchParams.lang) {
+  window.localStorage.override_l10n = searchParams.lang;
+}
+if (searchParams.lang === '') {
+  delete window.localStorage.override_l10n;
+}
+
+const overrideLanguage =
+  window.localStorage.override_l10n &&
+  availableLanguages.includes(window.localStorage.override_l10n) &&
+  window.localStorage.override_l10n;
+const language = overrideLanguage || userLanguage || 'en';
+const pseudolocalization = window.localStorage.test_l10n === 'true';
+
+if (overrideLanguage) {
+  console.debug(
+    `language autodetection overriden to: ${overrideLanguage}, unset by visiting ${
+      window.location.origin + window.location.pathname + '?lang='
+    }`,
+  );
+}
+if (pseudolocalization) {
+  console.debug(
+    `pseudolocalization enabled, unset by visiting ${
+      window.location.origin +
+      window.location.pathname +
+      '?pseudolocalization=false'
+    }`,
+  );
+}
+
+activate(language, pseudolocalization);