translation add tags

resource/locales/ja/translation.json

@@ -111,6 +111,7 @@
   "Shareable link": "このページの共有用URL",
   "The whitelist of registration permission E-mail address": "登録許可メールアドレスの<br>ホワイトリスト",
   "Selecting authentication mechanism": "認証機構選択",
+  "Add tags for this page": "タグを付ける",
 
 
 

src/client/js/app.js

@@ -312,7 +312,7 @@ if (pagePath) {
   componentMappings['revision-path'] = <RevisionPath pagePath={pagePath} crowi={crowi} />;
   // [TODO] there is a need to decide the destination of RevisionUrl
   componentMappings['revision-url'] = <RevisionUrl crowi={crowi} pageId={pageId} pagePath={pagePath} sendTagData={setTagData} />;
-  componentMappings['tag-label'] = <TagLabel crowi={crowi} pageId={pageId} sendTagData={setTagData} />;
+  componentMappings['tag-label'] = <I18nextProvider i18n={i18n}><TagLabel crowi={crowi} pageId={pageId} sendTagData={setTagData} /></I18nextProvider>;
 }
 
 Object.keys(componentMappings).forEach((key) => {

src/client/js/components/Page/TagLabel.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 import Button from 'react-bootstrap/es/Button';
 import Modal from 'react-bootstrap/es/Modal';
 import PageTagForm from '../PageTagForm';
 
-export default class TagLabel extends React.Component {
+class TagLabel extends React.Component {
 
   constructor(props) {
     super(props);
@@ -50,11 +51,12 @@ export default class TagLabel extends React.Component {
 
   render() {
     const tags = [];
+    const { t } = this.props;
 
     if (this.state.currentPageTags.length === 0) {
       tags.push(
         <a onClick={this.handleShowModal}>
-        Add tags for this page
+          <span>{ t('Add tags for this page') }</span>
         </a>,
       );
     }
@@ -96,7 +98,10 @@ export default class TagLabel extends React.Component {
 }
 
 TagLabel.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   crowi: PropTypes.object.isRequired,
   pageId: PropTypes.string,
   sendTagData: PropTypes.func.isRequired,
 };
+
+export default withTranslation()(TagLabel);

src/client/styles/scss/_tag.scss

@@ -6,7 +6,7 @@
     .manage-tags {
       cursor: pointer;
       font-size: 12px;
-      margin-left: 10px;
+      margin-left: 5px;
     }
 
     .tag-icon {