refactor HeaderSearchBox

src/client/js/app.jsx

@@ -94,7 +94,7 @@ const i18n = appContainer.i18n;
  *  value: React Element
  */
 let componentMappings = {
-  'search-top': <HeaderSearchBox crowi={appContainer} />,
+  'search-top': <HeaderSearchBox />,
   'search-sidebar': <HeaderSearchBox crowi={appContainer} />,
   'search-page': <SearchPage crowi={appContainer} />,
 

src/client/js/components/HeaderSearchBox.jsx

@@ -8,6 +8,9 @@ import DropdownButton from 'react-bootstrap/es/DropdownButton';
 import MenuItem from 'react-bootstrap/es/MenuItem';
 import InputGroup from 'react-bootstrap/es/InputGroup';
 
+import { createSubscribedElement } from './UnstatedUtils';
+import AppContainer from '../services/AppContainer';
+
 import SearchForm from './SearchForm';
 
 
@@ -60,13 +63,15 @@ class HeaderSearchBox extends React.Component {
   }
 
   render() {
-    const t = this.props.t;
+    const { t, appContainer } = this.props;
     const scopeLabel = this.state.isScopeChildren
       ? t('header_search_box.label.This tree')
       : 'All pages';
 
+    const config = appContainer.getConfig();
+
     return (
-      <FormGroup>
+      <FormGroup className={config.isSearchServiceReachable ? '' : 'has-error'}>
         <InputGroup>
           <InputGroup.Button className="btn-group-dropdown-scope">
             <DropdownButton id="dbScope" title={scopeLabel}>
@@ -76,7 +81,7 @@ class HeaderSearchBox extends React.Component {
           </InputGroup.Button>
           <SearchForm
             t={this.props.t}
-            crowi={this.props.crowi}
+            crowi={this.props.appContainer}
             onInputChange={this.onInputChange}
             onSubmit={this.search}
             placeholder="Search ..."
@@ -93,9 +98,17 @@ class HeaderSearchBox extends React.Component {
 
 }
 
+
+/**
+ * Wrapper component for using unstated
+ */
+const HeaderSearchBoxWrapper = (props) => {
+  return createSubscribedElement(HeaderSearchBox, props, [AppContainer]);
+};
+
 HeaderSearchBox.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
-export default withTranslation()(HeaderSearchBox);
+export default withTranslation()(HeaderSearchBoxWrapper);