show app setting content

packages/app/public/static/locales/en_US/translation.json

@@ -1125,5 +1125,10 @@
   "page_operation":{
     "paths_recovered": "Paths recovered successfully",
     "path_recovery_failed":"Path recovery failed"
+  },
+  "i18n": {
+    "en_US": "English",
+    "ja_JP": "Japanese",
+    "zh_CN": "Chinese"
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -1118,5 +1118,10 @@
   "page_operation":{
     "paths_recovered": "パスを修復しました",
     "path_recovery_failed":"パスを修復できませんでした"
+  },
+  "i18n": {
+    "en_US": "英語",
+    "ja_JP": "日本語",
+    "zh_CN": "中国語"
   }
 }

packages/app/public/static/locales/zh_CN/translation.json

@@ -1128,5 +1128,10 @@
   "page_operation":{
     "paths_recovered": "成功恢复了页面路径",
     "path_recovery_failed":"路径恢复失败"
+  },
+  "i18n": {
+    "en_US": "英语",
+    "ja_JP": "日文",
+    "zh_CN": "中文"
   }
 }

packages/app/src/components/Admin/App/AppSetting.jsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import { localeMetadatas } from '~/client/util/i18n';
+import { i18n } from '~/next-i18next.config';
 import loggerFactory from '~/utils/logger';
 
 
@@ -77,20 +77,20 @@ const AppSetting = (props) => {
         </label>
         <div className="col-md-6 py-2">
           {
-            localeMetadatas.map(meta => (
-              <div key={meta.id} className="custom-control custom-radio custom-control-inline">
+            i18n.locales.map(locale => (
+              <div key={locale} className="custom-control custom-radio custom-control-inline">
                 <input
                   type="radio"
-                  id={`radioLang${meta.id}`}
+                  id={`radioLang${locale}`}
                   className="custom-control-input"
                   name="globalLang"
-                  value={meta.id}
-                  checked={adminAppContainer.state.globalLang === meta.id}
+                  value={locale}
+                  checked={adminAppContainer.state.globalLang === locale}
                   onChange={(e) => {
                     adminAppContainer.changeGlobalLang(e.target.value);
                   }}
                 />
-                <label className="custom-control-label" htmlFor={`radioLang${meta.id}`}>{meta.displayName}</label>
+                <label className="custom-control-label" htmlFor={`radioLang${locale}`}>{t(`i18n.${locale}`)}</label>
               </div>
             ))
           }

packages/app/src/components/Admin/App/AppSettingsPageContents.tsx

@@ -58,8 +58,7 @@ const AppSettingsPageContents = (props: Props) => {
       <div className="row">
         <div className="col-lg-12">
           <h2 className="admin-setting-header">{t('App Settings')}</h2>
-          {/* TODO: show AppSetting by https://redmine.weseek.co.jp/issues/100056 */}
-          {/* <AppSetting /> */}
+          <AppSetting />
         </div>
       </div>