@edx/frontend-platform 4.6.0 → 4.6.2

package/src/config.js

@@ -0,0 +1,327 @@
+/**
+ * #### Import members from **@edx/frontend-platform**
+ *
+ * The configuration module provides utilities for working with an application's configuration
+ * document (ConfigDocument).  Configuration variables can be supplied to the
+ * application in four different ways.  They are applied in the following order:
+ *
+ * - Build-time Configuration
+ *   - Environment Variables
+ *   - JavaScript File
+ * - Runtime Configuration
+ *
+ * Last one in wins.  Variables with the same name defined via the later methods will override any
+ * defined using an earlier method.  i.e., if a variable is defined in Runtime Configuration, that
+ * will override the same variable defined in either Build-time Configuration method (environment
+ * variables or JS file).  Configuration defined in a JS file will override environment variables.
+ *
+ * ##### Build-time Configuration
+ *
+ * Build-time configuration methods add config variables into the app when it is built by webpack.
+ * This saves the app an API call and means it has all the information it needs to initialize right
+ * away.  There are two methods of supplying build-time configuration: environment variables and a
+ * JavaScript file.
+ *
+ * ###### Environment Variables
+ *
+ * A set list of required config variables can be supplied as
+ * command-line environment variables during the build process.
+ *
+ * As a simple example, these are supplied on the command-line before invoking `npm run build`:
+ *
+ * ```
+ * LMS_BASE_URL=http://localhost:18000 npm run build
+ * ```
+ *
+ * Note that additional variables _cannot_ be supplied via this method without using the `config`
+ * initialization handler.  The app won't pick them up and they'll appear `undefined`.
+ *
+ * This configuration method is being deprecated in favor of JavaScript File Configuration.
+ *
+ * ###### JavaScript File Configuration
+ *
+ * Configuration variables can be supplied in an optional file named env.config.js.  This file must
+ * export either an Object containing configuration variables or a function.  The function must
+ * return an Object containing configuration variables or, alternately, a promise which resolves to
+ * an Object.
+ *
+ * Using a function or async function allows the configuration to be resolved at runtime (because
+ * the function will be executed at runtime).  This is not common, and the capability is included
+ * for the sake of flexibility.
+ *
+ * JavaScript File Configuration is well-suited to extensibility use cases or component overrides,
+ * in that the configuration file can depend on any installed JavaScript module.  It is also the
+ * preferred way of doing build-time configuration if runtime configuration isn't used by your
+ * deployment of the platform.
+ *
+ * Exporting a config object:
+ * ```
+ * const config = {
+ *   LMS_BASE_URL: 'http://localhost:18000'
+ * };
+ *
+ * export default config;
+ * ```
+ *
+ * Exporting a function that returns an object:
+ * ```
+ * function getConfig() {
+ *   return {
+ *     LMS_BASE_URL: 'http://localhost:18000'
+ *   };
+ * }
+ * ```
+ *
+ * Exporting a function that returns a promise that resolves to an object:
+ * ```
+ * function getAsyncConfig() {
+ *   return new Promise((resolve, reject) => {
+ *     resolve({
+ *       LMS_BASE_URL: 'http://localhost:18000'
+ *     });
+ *   });
+ * }
+ *
+ * export default getAsyncConfig;
+ * ```
+ *
+ * ##### Runtime Configuration
+ *
+ * Configuration variables can also be supplied using the "runtime configuration" method, taking
+ * advantage of the Micro-frontend Config API in edx-platform. More information on this API can be
+ * found in the ADR which introduced it:
+ *
+ * https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/mfe_config_api/docs/decisions/0001-mfe-config-api.rst
+ *
+ * The runtime configuration method can be enabled by supplying a MFE_CONFIG_API_URL via one of the other
+ * two configuration methods above.
+ *
+ * Runtime configuration is particularly useful if you need to supply different configurations to
+ * a single deployment of a micro-frontend, for instance.  It is also a perfectly valid alternative
+ * to build-time configuration, though it introduces an additional API call to edx-platform on MFE
+ * initialization.
+ *
+ * ##### Initialization Config Handler
+ *
+ * The configuration document can be extended by
+ * applications at run-time using a `config` initialization handler.  Please see the Initialization
+ * documentation for more information on handlers and initialization phases.
+ *
+ * ```
+ * initialize({
+ *   handlers: {
+ *     config: () => {
+ *       mergeConfig({
+ *         CUSTOM_VARIABLE: 'custom value',
+ *         LMS_BASE_URL: 'http://localhost:18001' // You can override variables, but this is uncommon.
+  *       }, 'App config override handler');
+ *     },
+ *   },
+ * });
+ * ```
+ *
+ * @module Config
+ */
+
+import { APP_CONFIG_INITIALIZED, CONFIG_CHANGED } from './constants';
+
+import { publish, subscribe } from './pubSub';
+import { ensureDefinedConfig } from './utils';
+
+function extractRegex(envVar) {
+  // Convert the environment variable string to a regex, while guarding
+  // against a non-string and an empty/whitespace-only string.
+  if (typeof envVar === 'string' && envVar.trim() !== '') {
+    return new RegExp(envVar);
+  }
+  return undefined;
+}
+
+const ENVIRONMENT = process.env.NODE_ENV;
+let config = {
+  ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+  ACCOUNT_PROFILE_URL: process.env.ACCOUNT_PROFILE_URL,
+  ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL,
+  BASE_URL: process.env.BASE_URL,
+  PUBLIC_PATH: process.env.PUBLIC_PATH || '/',
+  CREDENTIALS_BASE_URL: process.env.CREDENTIALS_BASE_URL,
+  CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+  DISCOVERY_API_BASE_URL: process.env.DISCOVERY_API_BASE_URL,
+  PUBLISHER_BASE_URL: process.env.PUBLISHER_BASE_URL,
+  ECOMMERCE_BASE_URL: process.env.ECOMMERCE_BASE_URL,
+  ENVIRONMENT,
+  IGNORED_ERROR_REGEX: extractRegex(process.env.IGNORED_ERROR_REGEX),
+  LANGUAGE_PREFERENCE_COOKIE_NAME: process.env.LANGUAGE_PREFERENCE_COOKIE_NAME,
+  LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  LOGIN_URL: process.env.LOGIN_URL,
+  LOGOUT_URL: process.env.LOGOUT_URL,
+  STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+  MARKETING_SITE_BASE_URL: process.env.MARKETING_SITE_BASE_URL,
+  ORDER_HISTORY_URL: process.env.ORDER_HISTORY_URL,
+  REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+  SECURE_COOKIES: ENVIRONMENT !== 'development',
+  SEGMENT_KEY: process.env.SEGMENT_KEY,
+  SITE_NAME: process.env.SITE_NAME,
+  USER_INFO_COOKIE_NAME: process.env.USER_INFO_COOKIE_NAME,
+  LOGO_URL: process.env.LOGO_URL,
+  LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+  LOGO_WHITE_URL: process.env.LOGO_WHITE_URL,
+  FAVICON_URL: process.env.FAVICON_URL,
+  MFE_CONFIG_API_URL: process.env.MFE_CONFIG_API_URL,
+  APP_ID: process.env.APP_ID,
+  SUPPORT_URL: process.env.SUPPORT_URL,
+};
+
+/**
+ * Getter for the application configuration document.  This is synchronous and merely returns a
+ * reference to an existing object, and is thus safe to call as often as desired.
+ *
+ * Example:
+ *
+ * ```
+ * import { getConfig } from '@edx/frontend-platform';
+ *
+ * const {
+ *   LMS_BASE_URL,
+ * } = getConfig();
+ * ```
+ *
+ * @returns {ConfigDocument}
+  */
+export function getConfig() {
+  return config;
+}
+
+/**
+ * Replaces the existing ConfigDocument.  This is not commonly used, but can be helpful for tests.
+ *
+ * The supplied config document will be tested with `ensureDefinedConfig` to ensure it does not
+ * have any `undefined` keys.
+ *
+ * Example:
+ *
+ * ```
+ * import { setConfig } from '@edx/frontend-platform';
+ *
+ * setConfig({
+ *   LMS_BASE_URL, // This is overriding the ENTIRE document - this is not merged in!
+ * });
+ * ```
+ *
+ * @param {ConfigDocument} newConfig
+ */
+export function setConfig(newConfig) {
+  ensureDefinedConfig(config, 'config');
+  config = newConfig;
+  publish(CONFIG_CHANGED);
+}
+
+/**
+ * Merges additional configuration values into the ConfigDocument returned by `getConfig`.  Will
+ * override any values that exist with the same keys.
+ *
+ * ```
+ * mergeConfig({
+ *   NEW_KEY: 'new value',
+ *   OTHER_NEW_KEY: 'other new value',
+ * });
+ *
+ * If any of the key values are `undefined`, an error will be logged to 'warn'.
+ *
+ * @param {Object} newConfig
+ */
+export function mergeConfig(newConfig) {
+  ensureDefinedConfig(newConfig, 'ProcessEnvConfigService');
+  config = Object.assign(config, newConfig);
+  publish(CONFIG_CHANGED);
+}
+
+/**
+ * A method allowing application code to indicate that particular ConfigDocument keys are required
+ * for them to function.  This is useful for diagnosing development/deployment issues, primarily,
+ * by surfacing misconfigurations early.  For instance, if the build process fails to supply an
+ * environment variable on the command-line, it's possible that one of the `process.env` variables
+ * will be undefined.  Should be used in conjunction with `mergeConfig` for custom `ConfigDocument`
+ * properties.  Requester is for informational/error reporting purposes only.
+ *
+ * ```
+ * ensureConfig(['LMS_BASE_URL', 'LOGIN_URL'], 'MySpecialComponent');
+ *
+ * // Will log a warning with:
+ * // "App configuration error: LOGIN_URL is required by MySpecialComponent."
+ * // if LOGIN_URL is undefined, for example.
+ * ```
+ *
+ * *NOTE*: `ensureConfig` waits until `APP_CONFIG_INITIALIZED` is published to verify the existence
+ * of the specified properties.  This means that this function is compatible with custom `config`
+ * phase handlers responsible for loading additional configuration data in the initialization
+ * sequence.
+ *
+ * @param {Array} keys
+ * @param {string} [requester='unspecified application code']
+ */
+export function ensureConfig(keys, requester = 'unspecified application code') {
+  subscribe(APP_CONFIG_INITIALIZED, () => {
+    keys.forEach((key) => {
+      if (config[key] === undefined) {
+        // eslint-disable-next-line no-console
+        console.warn(`App configuration error: ${key} is required by ${requester}.`);
+      }
+    });
+  });
+}
+
+/**
+ * An object describing the current application configuration.
+ *
+ * In its most basic form, the initialization process loads this document via `process.env`
+ * variables.  There are other ways to add configuration variables to the ConfigDocument as
+ * documented above (JavaScript File Configuration, Runtime Configuration, and the Initialization
+ * Config Handler)
+ *
+ * ```
+ * {
+ *   BASE_URL: process.env.BASE_URL,
+ *   // ... other vars
+ * }
+ * ```
+ *
+ * When using Webpack (i.e., normal usage), the build process is responsible for supplying these
+ * variables via command-line environment variables.  That means they must be supplied at build
+ * time.
+ *
+ * @name ConfigDocument
+ * @memberof module:Config
+ * @property {string} ACCESS_TOKEN_COOKIE_NAME
+ * @property {string} ACCOUNT_PROFILE_URL
+ * @property {string} ACCOUNT_SETTINGS_URL
+ * @property {string} BASE_URL The URL of the current application.
+ * @property {string} CREDENTIALS_BASE_URL
+ * @property {string} CSRF_TOKEN_API_PATH
+ * @property {string} DISCOVERY_API_BASE_URL
+ * @property {string} PUBLISHER_BASE_URL
+ * @property {string} ECOMMERCE_BASE_URL
+ * @property {string} ENVIRONMENT This is one of: development, production, or test.
+ * @property {string} IGNORED_ERROR_REGEX
+ * @property {string} LANGUAGE_PREFERENCE_COOKIE_NAME
+ * @property {string} LEARNING_BASE_URL
+ * @property {string} LMS_BASE_URL
+ * @property {string} LOGIN_URL
+ * @property {string} LOGOUT_URL
+ * @property {string} STUDIO_BASE_URL
+ * @property {string} MARKETING_SITE_BASE_URL
+ * @property {string} ORDER_HISTORY_URL
+ * @property {string} REFRESH_ACCESS_TOKEN_ENDPOINT
+ * @property {boolean} SECURE_COOKIES
+ * @property {string} SEGMENT_KEY
+ * @property {string} SITE_NAME
+ * @property {string} USER_INFO_COOKIE_NAME
+ * @property {string} LOGO_URL
+ * @property {string} LOGO_TRADEMARK_URL
+ * @property {string} LOGO_WHITE_URL
+ * @property {string} FAVICON_URL
+ * @property {string} MFE_CONFIG_API_URL
+ * @property {string} APP_ID
+ * @property {string} SUPPORT_URL
+ */

package/src/constants.js

@@ -0,0 +1,66 @@
+/** @constant */
+export const APP_TOPIC = 'APP';
+
+export const APP_PUBSUB_INITIALIZED = `${APP_TOPIC}.PUBSUB_INITIALIZED`;
+
+/**
+ * Event published when the application initialization sequence has finished loading any dynamic
+ * configuration setup in a custom config handler.
+ *
+ * @event
+ */
+export const APP_CONFIG_INITIALIZED = `${APP_TOPIC}.CONFIG_INITIALIZED`;
+
+/**
+ * Event published when the application initialization sequence has finished determining the user's
+ * authentication state, creating an authenticated API client, and executing auth handlers.
+ *
+ * @event
+ */
+export const APP_AUTH_INITIALIZED = `${APP_TOPIC}.AUTH_INITIALIZED`;
+
+/**
+ * Event published when the application initialization sequence has finished initializing
+ * internationalization and executing any i18n handlers.
+ *
+ * @event
+ */
+export const APP_I18N_INITIALIZED = `${APP_TOPIC}.I18N_INITIALIZED`;
+
+/**
+ * Event published when the application initialization sequence has finished initializing the
+ * logging service and executing any logging handlers.
+ *
+ * @event
+ */
+export const APP_LOGGING_INITIALIZED = `${APP_TOPIC}.LOGGING_INITIALIZED`;
+
+/**
+ * Event published when the application initialization sequence has finished initializing the
+ * analytics service and executing any analytics handlers.
+ *
+ * @event
+ */
+export const APP_ANALYTICS_INITIALIZED = `${APP_TOPIC}.ANALYTICS_INITIALIZED`;
+
+/**
+ * Event published when the application initialization sequence has finished.  Applications should
+ * subscribe to this event and start rendering the UI when it has fired.
+ *
+ * @event
+ */
+export const APP_READY = `${APP_TOPIC}.READY`;
+
+/**
+ * Event published when the application initialization sequence has aborted.  This is frequently
+ * used to show an error page when an initialization error has occurred.
+ *
+ * @see {@link module:React~ErrorPage}
+ * @event
+ */
+export const APP_INIT_ERROR = `${APP_TOPIC}.INIT_ERROR`;
+
+/** @constant */
+export const CONFIG_TOPIC = 'CONFIG';
+
+export const CONFIG_CHANGED = `${CONFIG_TOPIC}.CHANGED`;

package/src/i18n/countries.js

@@ -0,0 +1,57 @@
+/* eslint-disable import/extensions */
+import COUNTRIES, { langs as countryLangs } from 'i18n-iso-countries';
+
+import { getPrimaryLanguageSubtag } from './lib';
+
+/*
+ * COUNTRY LISTS
+ *
+ * Lists of country names localized in supported languages.
+ *
+ * TODO: When we start dynamically loading translations only for the current locale, change this.
+ */
+
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/ar.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/en.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/es.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/fr.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/zh.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/ca.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/he.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/id.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/ko.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/pl.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/pt.json'));
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/ru.json'));
+// COUNTRIES.registerLocale(require('i18n-iso-countries/langs/th.json')); // Doesn't exist in lib.
+COUNTRIES.registerLocale(require('i18n-iso-countries/langs/uk.json'));
+
+/**
+ * Provides a lookup table of country IDs to country names for the current locale.
+ *
+ * @memberof module:I18n
+ */
+export function getCountryMessages(locale) {
+  const primaryLanguageSubtag = getPrimaryLanguageSubtag(locale);
+  const languageCode = countryLangs().includes(primaryLanguageSubtag) ? primaryLanguageSubtag : 'en';
+
+  return COUNTRIES.getNames(languageCode);
+}
+
+/**
+ * Provides a list of countries represented as objects of the following shape:
+ *
+ * {
+ *   key, // The ID of the country
+ *   name // The localized name of the country
+ * }
+ *
+ * TODO: ARCH-878: The list should be sorted alphabetically in the current locale.
+ * This is useful for populating dropdowns.
+ *
+ * @memberof module:I18n
+ */
+export function getCountryList(locale) {
+  const countryMessages = getCountryMessages(locale);
+  return Object.entries(countryMessages).map(([code, name]) => ({ code, name }));
+}

package/src/i18n/index.js

@@ -0,0 +1,123 @@
+/**
+ * #### Import members from **@edx/frontend-platform/i18n**
+ * The i18n module relies on react-intl and re-exports all of that package's exports.
+ *
+ * For each locale we want to support, react-intl needs 1) the locale-data, which includes
+ * information about how to format numbers, handle plurals, etc., and 2) the translations, as an
+ * object holding message id / translated string pairs.  A locale string and the messages object are
+ * passed into the IntlProvider element that wraps your element hierarchy.
+ *
+ * Note that react-intl has no way of checking if the translations you give it actually have
+ * anything to do with the locale you pass it; it will happily use whatever messages object you pass
+ * in.  However, if the locale data for the locale you passed into the IntlProvider was not
+ * correctly installed with addLocaleData, all of your translations will fall back to the default
+ * (in our case English), *even if you gave IntlProvider the correct messages object for that
+ * locale*.
+ *
+ * Messages are provided to this module via the configure() function below.
+ *
+ *
+ * @module Internationalization
+ * @see {@link https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst}
+ * @see {@link https://formatjs.io/docs/react-intl/components/ Intl} for components exported from this module.
+ *
+ */
+
+/**
+ * @name createIntl
+ * @kind function
+ * @see {@link https://formatjs.io/docs/react-intl/api#createIntl Intl}
+ */
+
+/**
+ * @name FormattedDate
+ * @kind class
+ * @see {@link https://formatjs.io/docs/react-intl/components/#formatteddate Intl}
+ */
+
+/**
+ * @name FormattedTime
+ * @kind class
+ * @see {@link https://formatjs.io/docs/react-intl/components/#formattedtime Intl}
+ */
+
+/**
+ * @name FormattedRelativeTime
+ * @kind class
+ * @see {@link https://formatjs.io/docs/react-intl/components/#formattedrelativetime Intl}
+ */
+
+/**
+ * @name FormattedNumber
+ * @kind class
+ * @see {@link https://formatjs.io/docs/react-intl/components/#formattednumber Intl}
+ */
+
+/**
+ * @name FormattedPlural
+ * @kind class
+ * @see {@link https://formatjs.io/docs/react-intl/components/#formattedplural Intl}
+ */
+
+/**
+ * @name FormattedMessage
+ * @kind class
+ * @see {@link https://formatjs.io/docs/react-intl/components/#formattedmessage Intl}
+ */
+
+/**
+ * @name IntlProvider
+ * @kind class
+ * @see {@link https://formatjs.io/docs/react-intl/components/#intlprovider Intl}
+ */
+
+/**
+ * @name defineMessages
+ * @kind function
+ * @see {@link https://formatjs.io/docs/react-intl/api#definemessagesdefinemessage Intl}
+ */
+
+/**
+ * @name useIntl
+ * @kind function
+ * @see {@link https://formatjs.io/docs/react-intl/api#useIntl Intl}
+ */
+
+export {
+  createIntl,
+  FormattedDate,
+  FormattedTime,
+  FormattedRelativeTime,
+  FormattedNumber,
+  FormattedPlural,
+  FormattedMessage,
+  defineMessages,
+  IntlProvider,
+  useIntl,
+} from 'react-intl';
+
+export {
+  intlShape,
+  configure,
+  getPrimaryLanguageSubtag,
+  getLocale,
+  getMessages,
+  isRtl,
+  handleRtl,
+  LOCALE_CHANGED,
+  LOCALE_TOPIC,
+} from './lib';
+
+export {
+  default as injectIntl,
+} from './injectIntlWithShim';
+
+export {
+  getCountryList,
+  getCountryMessages,
+} from './countries';
+
+export {
+  getLanguageList,
+  getLanguageMessages,
+} from './languages';

package/src/i18n/injectIntlWithShim.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import { getLoggingService, intlShape } from './lib';
+
+/**
+ * This function wraps react-intl's injectIntl function in order to add error logging to the intl
+ * property's formatMessage function.
+ *
+ * @memberof I18n
+ */
+const injectIntlWithShim = (WrappedComponent) => {
+  class ShimmedIntlComponent extends React.Component {
+    constructor(props) {
+      super(props);
+      this.shimmedIntl = Object.create(this.props.intl, {
+        formatMessage: {
+          value: (definition, ...args) => {
+            if (definition === undefined || definition.id === undefined) {
+              const error = new Error('i18n error: An undefined message was supplied to intl.formatMessage.');
+              if (process.env.NODE_ENV !== 'production') {
+                console.error(error); // eslint-disable-line no-console
+                return '!!! Missing message supplied to intl.formatMessage !!!';
+              }
+              getLoggingService().logError(error);
+              return ''; // Fail silently in production
+            }
+            return this.props.intl.formatMessage(definition, ...args);
+          },
+        },
+      });
+    }
+
+    render() {
+      return <WrappedComponent {...this.props} intl={this.shimmedIntl} />;
+    }
+  }
+
+  ShimmedIntlComponent.propTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  return injectIntl(ShimmedIntlComponent);
+};
+
+export default injectIntlWithShim;

package/src/i18n/languages.js

@@ -0,0 +1,60 @@
+/* eslint-disable import/extensions */
+import LANGUAGES, { langs as languageLangs } from '@cospired/i18n-iso-languages';
+
+import { getPrimaryLanguageSubtag } from './lib';
+
+/*
+ * LANGUAGE LISTS
+ *
+ * Lists of language names localized in supported languages.
+ *
+ * TODO: When we start dynamically loading translations only for the current locale, change this.
+ * TODO: Also note that a bunch of languages are missing here. They're present but commented out
+ * for reference. That's because they're not implemented in this library.  If you read this and it's
+ * been a while, go check and see if that's changed!
+ */
+
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/ar.json'));
+LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/en.json'));
+LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/es.json'));
+LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/fr.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/zh.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/ca.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/he.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/id.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/ko.json'));
+LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/pl.json'));
+LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/pt.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/ru.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/th.json'));
+// LANGUAGES.registerLocale(require('@cospired/i18n-iso-languages/langs/uk.json'));
+
+/**
+ * Provides a lookup table of language IDs to language names for the current locale.
+ *
+ * @memberof I18n
+ */
+export const getLanguageMessages = (locale) => {
+  const primaryLanguageSubtag = getPrimaryLanguageSubtag(locale);
+  const languageCode = languageLangs().includes(primaryLanguageSubtag) ? primaryLanguageSubtag : 'en';
+
+  return LANGUAGES.getNames(languageCode);
+};
+
+/**
+ * Provides a list of languages represented as objects of the following shape:
+ *
+ * {
+ *   key, // The ID of the language
+ *   name // The localized name of the language
+ * }
+ *
+ * TODO: ARCH-878: The list should be sorted alphabetically in the current locale.
+ * This is useful for populating dropdowns.
+ *
+ * @memberof I18n
+ */
+export const getLanguageList = (locale) => {
+  const languageMessages = getLanguageMessages(locale);
+  return Object.entries(languageMessages).map(([code, name]) => ({ code, name }));
+};