Normalise stored locale and add support for dev override

Normalise the stored locale to match the values we use to reference our string bundles, e.g. `zh-TW` will be stored as `zh-Hant`. This mapping can be extended in future to handle additional conversion if required, e.g. `en-US` -> `en` or `en-AU` -> `en-GB` For now if an exact match isn't found, a fallback search is performed by dropping the region/script portion and comparing the language subtag against supported locales, e.g. `zh-SG` would match `zh`. For development purposes, the list of supported locales can be overridden to expose all built locales by adding a known key to the browser's `localStorage`. The application will then match the browser language setting against all built locales allowing for easy dev / test without having to modify the locale handling or message bundle loading code.: `localStorage.setItem('tkn-locale-dev', true);` and `localStorage.removeItem('tkn-locale-dev');`
dippynark · Mar 1, 2021 · 85108db · 85108db
1 parent 248053b
commit 85108db
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 8 deletions.
diff --git a/config_frontend/config.json b/config_frontend/config.json
@@ -3,7 +3,8 @@
   "PORT": "8000",
   "locales": {
     "default": "en",
+    "devOverrideKey": "tkn-locale-dev",
     "supported": ["en", "ja"],
     "build": ["de", "en", "es", "fr", "it", "ja", "ko", "pt", "zh-Hans", "zh-Hant"]
   }
-}
+}
diff --git a/docs/dev/README.md b/docs/dev/README.md
@@ -188,6 +188,18 @@ This project uses `react-intl` for internationalization, and provides a script t
 
 **Note:** `src/nls/messages_en.json` should **NOT** be edited manually, instead edit the defaultMessage in the code and re-run the script.
 
+Configuration for the message bundles can be found in `config_frontend/config.json`:
+- `locales.build` lists the locales for which message bundles will be produced
+- `locales.supported` lists the locales that will be loaded at runtime based on browser language settings
+
+For testing and development purposes the list of supported locales can be overridden to include all built locales by adding a known value to `localStorage`:
+
+`localStorage.setItem('tkn-locale-dev', true);`
+
+and refreshing the page. When done, to return to normal production behaviour, remove the override:
+
+`localStorage.removeItem('tkn-locale-dev');`
+
 ## Storybook
 
 Run `npm run storybook` to start [storybook](https://storybook.js.org/) in development mode. It automatically opens 

diff --git a/src/actions/locale.js b/src/actions/locale.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,9 +11,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { getLocale } from '../utils';
+
 export function setLocale(locale) {
   return {
     type: 'LOCALE_SET',
-    locale
+    locale: getLocale(locale)
   };
 }
diff --git a/src/actions/locale.test.js b/src/actions/locale.test.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -13,9 +13,11 @@ limitations under the License.
 
 import { setLocale } from './locale';
 
-it('setLocale', () => {
-  const locale = 'it';
-  expect(setLocale(locale)).toMatchObject({
-    locale
+describe('setLocale', () => {
+  it('handles exact matches for supported locales', () => {
+    const locale = 'en';
+    expect(setLocale(locale)).toMatchObject({
+      locale
+    });
   });
 });
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -17,6 +17,15 @@ import { LogsToolbar } from '@tektoncd/dashboard-components';
 
 import { getPodLog, getPodLogURL } from '../api';
 import { get } from '../api/comms';
+import config from '../../config_frontend/config.json';
+
+const { locales: localesConfig } = config;
+const {
+  build: buildLocales,
+  default: defaultLocale,
+  devOverrideKey,
+  supported: supportedLocales
+} = localesConfig;
 
 export function sortRunsByStartTime(runs) {
   runs.sort((a, b) => {
@@ -161,3 +170,35 @@ export function getLogsToolbar({
     />
   );
 }
+
+export function formatLocale(locale) {
+  switch (locale) {
+    case 'zh':
+      return 'zh-Hans';
+    case 'zh-HA':
+    case 'zh-HK':
+    case 'zh-MO':
+    case 'zh-TW':
+      return 'zh-Hant';
+    default:
+      return locale;
+  }
+}
+
+export function getSupportedLocale(requestedLocale, locales) {
+  let locale = formatLocale(requestedLocale);
+  if (!locales.includes(locale)) {
+    locale = formatLocale(locale.split('-')[0]);
+    if (!locales.includes(locale)) {
+      locale = defaultLocale;
+    }
+  }
+  return locale;
+}
+
+export function getLocale(requestedLocale) {
+  const locales = localStorage.getItem(devOverrideKey)
+    ? buildLocales
+    : supportedLocales;
+  return getSupportedLocale(requestedLocale, locales);
+}
diff --git a/src/utils/index.test.js b/src/utils/index.test.js
@@ -13,18 +13,22 @@ limitations under the License.
 
 import * as API from '../api';
 import * as comms from '../api/comms';
+import config from '../../config_frontend/config.json';
 
 import {
   fetchLogs,
   fetchLogsFallback,
   followLogs,
+  getLocale,
   getLogsToolbar,
   getViewChangeHandler,
   isStale,
   sortRunsByStartTime,
   typeToPlural
 } from '.';
 
+const { locales: localesConfig } = config;
+
 describe('sortRunsByStartTime', () => {
   it('should handle missing start time or status', () => {
     const a = { name: 'a', status: { startTime: '0' } };
@@ -225,3 +229,38 @@ it('getLogsToolbar', () => {
   });
   expect(logsToolbar).toBeTruthy();
 });
+
+describe('getLocale', () => {
+  it('handles exact matches for supported locales', () => {
+    const locale = 'en';
+    expect(getLocale(locale)).toEqual(locale);
+  });
+
+  it('handles fallback matches for supported locales', () => {
+    expect(getLocale('en-US')).toEqual('en');
+  });
+
+  it('handles Chinese locales', () => {
+    localStorage.setItem(localesConfig.devOverrideKey, true);
+    const locales = {
+      zh: 'zh-Hans',
+      'zh-CN': 'zh-Hans',
+      'zh-Hans': 'zh-Hans',
+      'zh-Hant': 'zh-Hant',
+      'zh-HA': 'zh-Hant',
+      'zh-HK': 'zh-Hant',
+      'zh-MO': 'zh-Hant',
+      'zh-SG': 'zh-Hans',
+      'zh-TW': 'zh-Hant'
+    };
+
+    Object.keys(locales).forEach(locale => {
+      expect(getLocale(locale)).toEqual(locales[locale]);
+    });
+    localStorage.removeItem(localesConfig.devOverrideKey);
+  });
+
+  it('handles unsupported locales', () => {
+    expect(getLocale('zz')).toEqual('en');
+  });
+});