PLT-3793 Re-order languages in Account Settings (#3756)

3 files changed, 33 insertions, 16 deletions

diff --git a/webapp/components/admin_console/localization_settings.jsx b/webapp/components/admin_console/localization_settings.jsx
index b5bc28b52..7868ca8eb 100644
--- a/webapp/components/admin_console/localization_settings.jsx
+++ b/webapp/components/admin_console/localization_settings.jsx
@@ -25,8 +25,8 @@ export default class LocalizationSettings extends AdminSettings {
         this.state = Object.assign(this.state, {
             hasErrors: false,
             languages: Object.keys(locales).map((l) => {
-                return {value: locales[l].value, text: locales[l].name};
-            })
+                return {value: locales[l].value, text: locales[l].name, order: locales[l].order};
+            }).sort((a, b) => a.order - b.order)
         });
     }
 
diff --git a/webapp/components/user_settings/manage_languages.jsx b/webapp/components/user_settings/manage_languages.jsx
index ed82bc666..f4ae79088 100644
--- a/webapp/components/user_settings/manage_languages.jsx
+++ b/webapp/components/user_settings/manage_languages.jsx
@@ -64,20 +64,27 @@ export default class ManageLanguage extends React.Component {
         }
 
         const options = [];
-        const languages = I18n.getLanguages();
-        for (const key in languages) {
-            if (languages.hasOwnProperty(key)) {
-                const lang = languages[key];
-                options.push(
-                    <option
-                        key={lang.value}
-                        value={lang.value}
-                    >
-                        {lang.name}
-                    </option>
-                );
-            }
-        }
+        const locales = I18n.getLanguages();
+
+        const languages = Object.keys(locales).map((l) => {
+            return {
+                value: locales[l].value,
+                name: locales[l].name,
+                order: locales[l].order
+            };
+        }).
+        sort((a, b) => a.order - b.order);
+
+        languages.forEach((lang) => {
+            options.push(
+                <option
+                    key={lang.value}
+                    value={lang.value}
+                >
+                    {lang.name}
+                </option>
+            );
+        });
 
         const input = (
             <div key='changeLanguage'>
diff --git a/webapp/i18n/i18n.jsx b/webapp/i18n/i18n.jsx
index f963b77c2..ccfb47ae7 100644
--- a/webapp/i18n/i18n.jsx
+++ b/webapp/i18n/i18n.jsx
@@ -27,51 +27,61 @@ const languages = {
     de: {
         value: 'de',
         name: 'Deutsch (Beta)',
+        order: 0,
         url: de
     },
     en: {
         value: 'en',
         name: 'English',
+        order: 1,
         url: ''
     },
     es: {
         value: 'es',
         name: 'Español',
+        order: 2,
         url: es
     },
     fr: {
         value: 'fr',
         name: 'Français (Beta)',
+        order: 3,
         url: fr
     },
     ja: {
         value: 'ja',
         name: '日本語 (Beta)',
+        order: 9,
         url: ja
     },
     ko: {
         value: 'ko',
         name: '한국어 (Beta)',
+        order: 6,
         url: ko
     },
     nl: {
         value: 'nl',
         name: 'Nederlands (Beta)',
+        order: 4,
         url: nl
     },
     'pt-BR': {
         value: 'pt-BR',
         name: 'Português (Brasil)',
+        order: 5,
         url: pt_BR
     },
     'zh-TW': {
         value: 'zh-TW',
         name: '中文 (繁體) (Beta)',
+        order: 8,
         url: zh_TW
     },
     'zh-CN': {
         value: 'zh-CN',
         name: '中文 (简体) (Beta)',
+        order: 7,
         url: zh_CN
     }
 };