fix: use the translated country and language names

Use the translated country and language names in combo boxes.

package.json

@@ -84,6 +84,7 @@
     "cldr-data": "^36.0.1",
     "clean-deep": "^3.4.0",
     "copy-to-clipboard": "^3.3.3",
+    "countries-list": "^3.0.6",
     "deepmerge": "^4.3.1",
     "design-react-kit": "^5.0.0-7",
     "dotenv": "^16.3.1",

src/app/contents/fields/generic.ts

@@ -1,8 +1,7 @@
 import categories from "../categories";
 import scopes from "../scopes";
 import licenses from "../../../generated/licenses.json";
-import { allLangs } from '../../../i18n';
-import countries from "../countries";
+import { allLangs, allCountries } from '../../../i18n';
 
 const developmentStatus_list = [
   "concept",
@@ -303,8 +302,10 @@ const fields = (): Array<Field> => {
       type: "array",
       items: {
         title: "item",
-        type: "string",
-        enum: countries,
+        type: "object",
+        dataKey: "value",
+        textField: "text",
+        enum: allCountries(),
       },
       section: 6,
       group: "intendedAudience",
@@ -315,8 +316,10 @@ const fields = (): Array<Field> => {
       type: "array",
       items: {
         title: "item",
-        type: "string",
-        enum: countries,
+        type: "object",
+        dataKey: "value",
+        textField: "text",
+        enum: allCountries(),
       },
       section: 6,
       group: "intendedAudience",
@@ -358,7 +361,9 @@ const fields = (): Array<Field> => {
       type: "array",
       items: {
         title: "item",
-        type: "string",
+        type: "object",
+        dataKey: "value",
+        textField: "text",
         enum: allLangs(),
       },
       widget: "tags",

src/app/form/widgets/TagWidget.js

@@ -19,6 +19,10 @@ const TagWidget = (props) => {
   });
   const className = classNames(["form-group", { "has-error": invalid }]);
 
+  const multiSelectDataOpts = (props.schema.items.dataKey && props.schema.items.textField)
+    ? { dataKey: props.schema.items.dataKey, textField: props.schema.items.textField }
+    : {};
+
   return (
     <div className={className}>
       <label className="control-label active text-muted" htmlFor={id}>
@@ -27,6 +31,7 @@ const TagWidget = (props) => {
 
       <Multiselect
         {...inputProps}
+        {...multiSelectDataOpts}
         ref={ref}
         id={id}
         onBlur={() => inputProps.onBlur()}

src/i18n/index.ts

@@ -1,13 +1,16 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import locales from "locale-codes";
+import { countries } from "countries-list";
 import LanguageDetector from 'i18next-browser-languagedetector';
 
 import { FALLBACK_LANGUAGE } from "../app/contents/constants";
 import en from "./locales/en.json";
 import fr from "./locales/fr.json";
 import it from "./locales/it.json";
 
+type LocalizedEntity = 'language' | 'region';
+
 const resources = {
   en: { translation: en },
   fr: { translation: fr },
@@ -37,16 +40,21 @@ i18n
     }
   });
 
-export const displayName = (tag: string, locale: string = i18n.language) => {
+export const displayName = (tag: string, locale: string = i18n.language, entity: LocalizedEntity) => {
   try {
-    return new Intl.DisplayNames([locale], { type: 'language' }).of(tag);
+    return new Intl.DisplayNames([locale], { type: entity }).of(tag);
   } catch (e) {
     return null;
   }
 }
 
 export const allLangs = (locale: string = i18n.language) => {
   return locales.all
-    .map(l => ({ text: displayName(l.tag, locale), value: l.tag }))
+    .map(l => ({ text: displayName(l.tag, locale, 'language'), value: l.tag }))
     .filter(e => e !== null)
 }
+
+export const allCountries = (locale: string = i18n.language) => {
+  return Object.keys(countries)
+    .map((countryCode) => ({ text: displayName(countryCode, locale, 'region'), value: countryCode }))
+}