Merge pull request #7176 from weseek/feat/plugin-i18n

feat: Enable plugin i18n

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

@@ -848,6 +848,16 @@
       "log_type": "https://docs.growi.org/en/admin-guide/admin-cookbook/audit-log-setup.html#log-types"
     }
   },
+  "plugins": {
+    "plugins": "Plugins",
+    "plugin_installer": "Plugin Installer",
+    "repository_url": "Repository URL",
+    "description": "You can install plugins by inputting the URL",
+    "plugin_card": "Plugin Card",
+    "plugin_is_not_installed": "Plugin is not installed",
+    "install": "Install",
+    "delete": "Delete"
+  },
   "cloud_setting_management": {
     "to_cloud_settings": "Open GROWI.cloud Settings"
   },

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

@@ -856,6 +856,16 @@
       "log_type": "https://docs.growi.org/ja/admin-guide/admin-cookbook/audit-log-setup.html#log-types"
     }
   },
+  "plugins": {
+    "plugins": "プラグイン",
+    "plugin_installer": "プラグインインストーラー",
+    "repository_url": "URL",
+    "description": "リポジトリのURLの入力してください。",
+    "plugin_card": "プラグインカード",
+    "plugin_is_not_installed": "プラグインがインストールされていません",
+    "install": "インストール",
+    "delete": "削除"
+  },
   "cloud_setting_management": {
     "to_cloud_settings": "GROWI.cloud の管理画面へ"
   },

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

@@ -856,6 +856,16 @@
       "log_type": "https://docs.growi.org/en/admin-guide/admin-cookbook/audit-log-setup.html#log-types"
     }
   },
+  "plugins": {
+    "plugins": "Plugins",
+    "plugin_installer": "Plugin Installer",
+    "repository_url": "Repository URL",
+    "description": "You can install plugins by inputting the URL",
+    "plugin_card": "Plugin Card",
+    "plugin_is_not_installed": "Plugin is not installed",
+    "install": "Install",
+    "delete": "Delete"
+  },
   "cloud_setting_management": {
     "to_cloud_settings": "進入 GROWI.cloud 的管理界面"
   },

packages/app/src/components/Admin/Common/AdminNavigation.jsx

@@ -36,7 +36,7 @@ const AdminNavigation = (props) => {
       case 'user-groups':              return <><i className="mr-1 icon-fw icon-people"></i>{          t('user_group_management.user_group_management') }</>;
       case 'search':                   return <><i className="mr-1 icon-fw icon-magnifier"></i>{       t('full_text_search_management.full_text_search_management') }</>;
       case 'audit-log':                return <><i className="mr-1 icon-fw icon-feed"></i>{            t('audit_log_management.audit_log')}</>;
-      case 'plugins':                  return <><i className="mr-1 icon-fw icon-puzzle"></i>{          'Plugins'}</>;
+      case 'plugins':                  return <><i className="mr-1 icon-fw icon-puzzle"></i>{          t('plugins.plugins')}</>;
       case 'cloud':                    return <><i className="mr-1 icon-fw icon-share-alt"></i>{       t('cloud_setting_management.to_cloud_settings')} </>;
       default:                         return <><i className="mr-1 icon-fw icon-home"></i>{            t('wiki_management_home_page') }</>;
       /* eslint-enable no-multi-spaces, max-len */

packages/app/src/components/Admin/PluginsExtension/PluginCard.tsx

@@ -93,7 +93,7 @@ export const PluginCard = (props: Props): JSX.Element => {
           className="btn btn-primary"
           onClick={() => onClickPluginDeleteBtnHandler()}
         >
-          Delete
+          {t('plugins.delete')}
         </button>
       </div>
     );

packages/app/src/components/Admin/PluginsExtension/PluginInstallerForm.tsx

@@ -43,7 +43,7 @@ export const PluginInstallerForm = (): JSX.Element => {
   return (
     <form role="form" onSubmit={submitHandler}>
       <div className='form-group row'>
-        <label className="text-left text-md-right col-md-3 col-form-label">GitHub Repository URL</label>
+        <label className="text-left text-md-right col-md-3 col-form-label">{t('plugins.repository_url')}</label>
         <div className="col-md-6">
           <input
             className="form-control"
@@ -52,13 +52,13 @@ export const PluginInstallerForm = (): JSX.Element => {
             placeholder="https://github.com/growi/plugins"
             required
           />
-          <p className="form-text text-muted">You can install plugins by inputting the GitHub URL.</p>
+          <p className="form-text text-muted">{t('plugins.description')}</p>
         </div>
       </div>
 
       <div className="row my-3">
         <div className="mx-auto">
-          <button type="submit" className="btn btn-primary">Install</button>
+          <button type="submit" className="btn btn-primary">{t('plugins.install')}</button>
         </div>
       </div>
     </form>

packages/app/src/components/Admin/PluginsExtension/PluginsExtensionPageContents.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
 import { Spinner } from 'reactstrap';
 
 import { useSWRxPlugins } from '~/stores/plugin';
@@ -16,20 +17,23 @@ const Loading = (): JSX.Element => {
 };
 
 export const PluginsExtensionPageContents = (): JSX.Element => {
+  const { t } = useTranslation('admin');
+
   const { data, mutate } = useSWRxPlugins();
 
   return (
     <div>
       <div className="row mb-5">
         <div className="col-lg-12">
-          <h2 className="admin-setting-header">Plugin Installer</h2>
+          <h2 className="admin-setting-header">{t('plugins.plugin_installer')}</h2>
           <PluginInstallerForm />
         </div>
       </div>
 
       <div className="row mb-5">
         <div className="col-lg-12">
-          <h2 className="admin-setting-header">Plugins
+          <h2 className="admin-setting-header">
+            {t('plugins.plugin_card')}
             <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={() => mutate()}>
               <i className="icon icon-reload"></i>
             </button>
@@ -39,7 +43,7 @@ export const PluginsExtensionPageContents = (): JSX.Element => {
             : (
               <div className="d-grid gap-5">
                 { data.plugins.length === 0 && (
-                  <div>Plugin is not installed</div>
+                  <div>{t('plugins.plugin_is_not_installed')}</div>
                 )}
                 { data.plugins.map((plugin) => {
                   const pluginId = plugin._id;

packages/app/src/pages/admin/plugins.page.tsx

@@ -24,11 +24,11 @@ const PluginsExtensionPageContents = dynamic(
 
 
 const AdminAppPage: NextPage<CommonProps> = (props) => {
-  const { t } = useTranslation('commons');
+  const { t } = useTranslation('admin');
   useIsMaintenanceMode(props.isMaintenanceMode);
   useCurrentUser(props.currentUser ?? null);
 
-  const title = 'Plugins';
+  const title = t('plugins.plugins');
   const injectableContainers: Container<any>[] = [];
 
   if (isClient()) {