i18n for HeaderSearchBox

resource/locales/en-US/translation.json

@@ -163,6 +163,14 @@
 
   "Security settings": "Security settings",
 
+  "header_search_box": {
+    "label": {
+      "This tree": "This tree"
+    },
+    "item_label": {
+      "This tree": "Only children of this tree"
+    }
+  },
 
   "page_page": {
       "notice": {

resource/locales/ja/translation.json

@@ -181,6 +181,15 @@
   "Current API Token": "現在のAPI Token",
   "Update API Token": "API Tokenを更新",
 
+  "header_search_box": {
+    "label": {
+      "This tree": "この階層"
+    },
+    "item_label": {
+      "This tree": "この階層下の子ページのみ"
+    }
+  },
+
   "page_page": {
       "notice": {
           "version": "これは現在の版ではありません。",

src/client/js/app.js

@@ -272,7 +272,7 @@ if (!pageRevisionId && draft != null) {
  *  value: React Element
  */
 const componentMappings = {
-  'search-top': <HeaderSearchBox crowi={crowi} />,
+  'search-top': <I18nextProvider i18n={i18n}><HeaderSearchBox crowi={crowi} /></I18nextProvider>,
   'search-sidebar': <HeaderSearchBox crowi={crowi} />,
   'search-page': <SearchPage crowi={crowi} crowiRenderer={crowiRenderer} />,
 

src/client/js/components/HeaderSearchBox.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
 
 import FormGroup from 'react-bootstrap/es/FormGroup';
 import Button from 'react-bootstrap/es/Button';
@@ -10,7 +11,7 @@ import InputGroup from 'react-bootstrap/es/InputGroup';
 import SearchForm from './SearchForm';
 
 
-export default class HeaderSearchBox extends React.Component {
+class HeaderSearchBox extends React.Component {
 
   constructor(props) {
     super(props);
@@ -59,8 +60,10 @@ export default class HeaderSearchBox extends React.Component {
   }
 
   render() {
-
-    const scopeLabel = this.state.isScopeChildren ? 'Children' : 'All pages';
+    const t = this.props.t;
+    const scopeLabel = this.state.isScopeChildren
+      ? t('header_search_box.label.This tree')
+      : 'All pages';
 
     return (
       <FormGroup>
@@ -68,10 +71,10 @@ export default class HeaderSearchBox extends React.Component {
         <InputGroup.Button className="btn-group-dropdown-scope">
           <DropdownButton id="dbScope" title={scopeLabel}>
             <MenuItem onClick={this.onClickAllPages}>All pages</MenuItem>
-            <MenuItem onClick={this.onClickChildren}>Children</MenuItem>
+            <MenuItem onClick={this.onClickChildren}>{ t('header_search_box.item_label.This tree') }</MenuItem>
           </DropdownButton>
         </InputGroup.Button>
-          <SearchForm
+          <SearchForm t={this.props.t}
             crowi={this.props.crowi}
             onInputChange={this.onInputChange}
             onSubmit={this.search}
@@ -89,5 +92,8 @@ export default class HeaderSearchBox extends React.Component {
 }
 
 HeaderSearchBox.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
   crowi: PropTypes.object.isRequired,
 };
+
+export default translate()(HeaderSearchBox);