Override languages names (#2304)

* Refactor language handling

Unify iso639 handling in a single utility module so it's easier to
change its behaviour in the app

* Expose custom language names from the app

If they are enabled via an environment variable, the list of language
names overrides will be exposed to the UI as part of the appConfig
object.

* Override language names in UI when enabled

* Disable flow typing in language.js

Couldn't get it to type the `filter` expression in `livingLanguages`,
and we're set to remove Flow altogether soon anyways.

* Fix linter issue

Code is basically the same, but eslint likes this one better

* Move custom languages to an environment variable

So we can customise this per-instance instead of hard-coding a single
list of mappings

Author: matiasgarciaisaia

assets/js/components/activity/ActivityDescription.jsx

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from "react"
 import { translate } from "react-i18next"
-import { translateLangCode } from "../timezones/util"
+import { codeToName } from "../../language"
 
 class ActivityDescription extends Component {
   reportTypeText(reportType) {
@@ -216,12 +216,12 @@ class ActivityDescription extends Component {
           case "add_language":
             return t("Added language <i>{{language}}</i> to <i>{{questionnaireName}}", {
               questionnaireName,
-              language: translateLangCode(metadata["language"]),
+              language: codeToName(metadata["language"]),
             })
           case "remove_language":
             return t("Removed language <i>{{language}}</i> from <i>{{questionnaireName}}", {
               questionnaireName,
-              language: translateLangCode(metadata["language"]),
+              language: codeToName(metadata["language"]),
             })
           case "create_step":
             return t("Added step <i>{{stepTitle}}</i> to <i>{{questionnaireName}}</i>", {

assets/js/components/questionnaires/AddLanguage.jsx

@@ -1,7 +1,7 @@
 import * as actions from "../../actions/questionnaire"
 import React, { Component, PropTypes } from "react"
 import { Autocomplete } from "../ui"
-import iso6393 from "iso-639-3"
+import { idForLanguage, livingLanguages } from "../../language"
 import "materialize-autocomplete"
 import withQuestionnaire from "./withQuestionnaire"
 import { translate } from "react-i18next"
@@ -28,13 +28,11 @@ class AddLanguage extends Component {
 
   autocompleteGetData(value, callback) {
     const { questionnaire } = this.props
-    const idForLanguange = (lang) => (lang.iso6391 ? lang.iso6391 : lang.iso6393)
     const matchesLanguage = (value, lang) =>
       lang.text.indexOf(value) !== -1 || lang.text.toLowerCase().indexOf(value) !== -1
 
-    let languagesOptions = iso6393
-      .filter((lang) => lang.type == "living")
-      .map((lang) => ({ id: idForLanguange(lang), text: lang.name }))
+    let languagesOptions = livingLanguages()
+      .map((lang) => ({ id: idForLanguage(lang), text: lang.name }))
 
     // Don't show languages that are already selected
     languagesOptions = languagesOptions.filter(

assets/js/components/questionnaires/LanguagesList.jsx

@@ -3,7 +3,7 @@ import * as actions from "../../actions/questionnaire"
 import React, { Component } from "react"
 import { connect } from "react-redux"
 import "materialize-autocomplete"
-import { translateLangCode } from "../timezones/util"
+import { codeToName } from "../../language"
 import classNames from "classnames/bind"
 import AddLanguage from "./AddLanguage"
 import { hasErrorsInLanguage } from "../../questionnaireErrors"
@@ -103,8 +103,8 @@ class LanguagesList extends Component<Props> {
 
     let otherLanguages = languages
       .filter((lang) => lang !== defaultLanguage)
-      .map((lang: string) => [lang, translateLangCode(lang)])
-      .sort(([c1, n1], [c2, n2]) => n1.localeCompare(n2))
+      .map((lang: string) => [lang, codeToName(lang)])
+      .sort(([c1, n1], [c2, n2]) => (n1 || '').localeCompare((n2 || '')))
       .map(([code, name]) => this.renderLanguageRow(code, name))
 
     let otherLanguagesComponent = null
@@ -117,7 +117,7 @@ class LanguagesList extends Component<Props> {
     return (
       <div className="languages">
         <LanguageSection title={t("Primary language")}>
-          {this.renderLanguageRow(defaultLanguage, translateLangCode(defaultLanguage), true)}
+          {this.renderLanguageRow(defaultLanguage, codeToName(defaultLanguage), true)}
         </LanguageSection>
         {otherLanguagesComponent}
         {readOnly ? null : (

assets/js/components/questionnaires/StepLanguageSelection.jsx

@@ -2,16 +2,11 @@ import React, { Component, PropTypes } from "react"
 import { connect } from "react-redux"
 import * as actions from "../../actions/questionnaire"
 import { Input } from "react-materialize"
-import iso6393 from "iso-639-3"
+import { codeToName } from "../../language"
 import { Card } from "../ui"
 import { translate } from "react-i18next"
 
 class StepLanguageSelection extends Component {
-  translateLangCode(code) {
-    const language = iso6393.find((lang) => lang.iso6391 == code || lang.iso6393 == code)
-    return language.name
-  }
-
   changeLanguageOrder(choice, event) {
     const { dispatch } = this.props
     event.preventDefault()
@@ -46,7 +41,7 @@ class StepLanguageSelection extends Component {
               <tbody>
                 {languageChoices.map((choice, index) => (
                   <tr key={`${choice}${index}`}>
-                    <td>{this.translateLangCode(choice)}</td>
+                    <td>{codeToName(choice)}</td>
                     <td>
                       <Input
                         s={8}

assets/js/components/questionnaires/StepNumericEditor.jsx

@@ -6,7 +6,7 @@ import { bindActionCreators } from "redux"
 import * as questionnaireActions from "../../actions/questionnaire"
 import { newRefusal } from "../../step"
 import ChoiceEditor from "./ChoiceEditor"
-import { translateLangCode } from "../timezones/util"
+import { codeToName } from "../../language"
 import SkipLogic from "./SkipLogic"
 import propsAreEqual from "../../propsAreEqual"
 import { config } from "../../config"
@@ -357,7 +357,7 @@ class StepNumericEditor extends Component<any, State> {
         questionnaire.languages,
         config.available_languages_for_numbers
       )
-        .map((lang) => translateLangCode(lang))
+        .map((lang) => codeToName(lang))
         .join(", ")
 
       alphabeticalAnswersComponent = (

assets/js/components/timezones/util.js

@@ -1,4 +1,3 @@
-import iso6393 from "iso-639-3"
 export const formatTimezone = (tz) => {
   const split = (tz || "UTC").replace("_", " ").split("/")
   switch (split.length) {
@@ -10,8 +9,3 @@ export const formatTimezone = (tz) => {
       return split[0]
   }
 }
-
-export const translateLangCode = (code) => {
-  const language = iso6393.find((lang) => lang.iso6391 == code || lang.iso6393 == code)
-  return language.name
-}

assets/js/config.js

@@ -10,10 +10,12 @@ type Config = {
   nuntium: ProviderConfig[],
   verboice: ProviderConfig[],
   available_languages_for_numbers: string[],
+  custom_language_names: {[string]: string},
 }
 
 const defaultConfig = {
   available_languages_for_numbers: ["en"],
+  custom_language_names: {},
   user_settings: {
     language: "en",
   },

assets/js/language.js

@@ -1,12 +1,29 @@
-// @flow
 import iso6393 from "iso-639-3"
+import { config } from "./config"
+
+const languages = (() => {
+  let langs = iso6393
+  for (const [code, name] of Object.entries(config.custom_language_names)) {
+    let lang = langs.find((l) => l.iso6393 == code)
+    if (lang) {
+      lang.name = name
+    }
+  }
+  return langs
+})()
 
 export function nameToCode(name: string): ?string {
-  let match = iso6393.find((l) => l.name == name)
-  return match ? match.iso6391 || match.iso6393 : null
+  let match = languages.find((l) => l.name == name)
+  return match ? idForLanguage(match) : null
+}
+
+export const idForLanguage = (lang): string => (lang.iso6391 ? lang.iso6391 : lang.iso6393)
+
+export function livingLanguages() {
+  return languages.filter((lang) => lang.type == "living")
 }
 
 export function codeToName(code: string): ?string {
-  let match = iso6393.find((l) => l.iso6391 == code || l.iso6393 == code)
+  let match = languages.find((l) => l.iso6391 == code || l.iso6393 == code)
   return match ? match.name : null
 }

config/config.exs

@@ -58,6 +58,8 @@ config :ask, Ask.Runtime.QuestionnaireSimulatorStore,
 config :ask, AskWeb.Email,
   smtp_from_address: {:system, "SMTP_FROM_ADDRESS", "InSTEDD Surveda <noreply@instedd.org>"}
 
+config :ask, custom_language_names: System.get_env("CUSTOM_LANGUAGE_NAMES")
+
 # Configures Elixir's Logger
 config :logger, :console,
   format: "$dateT$timeZ $metadata[$level] $message\n",

lib/ask_web/views/layout_view.ex

@@ -28,13 +28,19 @@ defmodule AskWeb.LayoutView do
           end
       end
 
+    custom_language_names = case Poison.decode(Application.get_env(:ask, :custom_language_names) || "") do
+      {:ok, custom_languages} -> custom_languages
+      _ -> %{}
+    end
+
     client_config = %{
       version: version,
       csrf_token: get_csrf_token(),
       user: user_email,
       user_settings: user_settings,
       sentryDsn: sentry_dsn,
       available_languages_for_numbers: Ask.NumberTranslator.langs(),
+      custom_language_names: custom_language_names,
       nuntium: Config.provider_config(Nuntium) |> guisso_configs,
       verboice: Config.provider_config(Verboice) |> guisso_configs,
       intercom_app_id: Ask.Intercom.intercom_app_id()