t ranslation.json

resource/locales/en-US/translation.json

@@ -722,7 +722,8 @@
   },
 
   "importer_management": {
-    "import_from": "Import from %s",
+    "import_from_esa": "Import from esa.io",
+    "import_from_qiita": "import_from Qiita:Team",
     "esa_settings": {
       "team_name": "Team name",
       "access_token": "Access token",

resource/locales/ja/translation.json

@@ -707,7 +707,8 @@
   },
 
   "importer_management": {
-    "import_from": "%s からインポート",
+    "import_from_esa": "esa.ioからインポート",
+    "import_from_qiita": "Qiita:Teamからインポート",
     "esa_settings": {
       "team_name": "チーム名",
       "access_token": "アクセストークン",

src/client/js/app.js

@@ -196,13 +196,15 @@ if (adminUserGroupPageElem != null) {
 
 
 Object.keys(componentMappings).forEach((key) => {
-  const elm = document.getElementById(key);
-  if (elm) {
+  const elem = document.getElementById(key);
+  if (elem) {
     ReactDOM.render(
       <Provider inject={injectableContainers}>
-        {componentMappings[key]}
+        <I18nextProvider i18n={i18n}>
+          {componentMappings[key]}
+        </I18nextProvider>
       </Provider>,
-      elm,
+      elem,
     );
   }
 });

src/client/js/components/Admin/Importer.jsx

@@ -7,6 +7,8 @@ import EditorContainer from '../../services/EditorContainer';
 import { createSubscribedElement } from '../UnstatedUtils';
 import HackmdEditor from '../PageEditorByHackmd/HackmdEditor';
 
+import { withTranslation } from 'react-i18next';
+
 
 class Importer extends React.Component {
 
@@ -48,11 +50,12 @@ class Importer extends React.Component {
     const params = {
       esaTeamName: this.state.esaTeamName, esaAccessToken: this.state.esaAccessToken,
     };
-    this.props.appContainer.apiPost('/_api/admin/settings/importerEsa', params);
+    this.props.appContainer.apiPost('/admin/settings/importerEsa', params);
   }
 
   render() {
     const { esaTeamName, esaAccessToken } = this.state;
+    const { t } = this.props;
     return (
       <Fragment>
         <form
@@ -93,7 +96,8 @@ class Importer extends React.Component {
           </div>
 
         </form>
-
+        
+        <legend>{ t('importer_management.import_from_esa') }</legend>
       </Fragment>
 
     );
@@ -112,6 +116,7 @@ Importer.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
+  t: PropTypes.func.isRequired, // i18next
 };
 
-export default ImporterWrapper;
+export default withTranslation()(ImporterWrapper);