Merge branch 'reactify-admin/CustomizePage' into create-custom-script-setting-frontside

# Conflicts:
#	resource/locales/en-US/translation.json
#	resource/locales/ja/translation.json
#	src/client/js/app.jsx
#	src/client/js/components/Admin/Customize/Customize.jsx
#	src/client/js/services/AdminCustomizeContainer.js

resource/locales/en-US/translation.json

@@ -681,6 +681,7 @@
     "update_layout_success": "Succeeded to update layout",
     "update_behavior_success": "Succeeded to update behavior",
     "update_function_success": "Succeeded to update function",
+    "update_customCss_success": "Succeeded to update customize css",
     "update_script_success": "Succeeded to update custom script",
     "layout_description":{
       "growi_title":"Simple and Clear",
@@ -695,6 +696,16 @@
       "crowi_text1":"Collapsible Sidebar",
       "crowi_text2":"Show and post comments in Sidebar",
       "crowi_text3":"Collapsible Table-of-contents"
+    },
+    "behavior_description":{
+      "growi_text1":"Both of <code>/page</code> and <code>/page/</code> shows the same page。",
+      "growi_text2":"<code>/nonexistent_page</code> shows editing form",
+      "growi_text3":"All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b>",
+      "crowi_text1":"<code>/page</code> shows the page",
+      "crowi_text2":"<code>/page/</code> shows the list of sub pages",
+      "crowi_text3":"If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown",
+      "crowi_text4":"<code>/nonexistent_page</code> shows editing form<",
+      "crowi_text5":"<code>/nonexistent_page/</code> the list of sub pages"
     }
   },
 

resource/locales/ja/translation.json

@@ -665,6 +665,7 @@
     "update_layout_success": "レイアウトを更新しました",
     "update_behavior_success": "動作を更新しました",
     "update_function_success": "機能を更新しました",
+    "update_customCss_success": "カスタムCSSを更新しました",
     "update_script_success": "カスタムスクリプトを更新しました",
     "layout_description":{
       "growi_title":"シンプル・明瞭",
@@ -679,6 +680,16 @@
       "crowi_text1":"サイドバーを開くと情報が表示されます。",
       "crowi_text2":"コメントはサイドバーに表示されます。",
       "crowi_text3":"ページ情報はサイドバーに表示されます。"
+    },
+    "behavior_description":{
+      "growi_text1":"<code>/page</code>と<code>/page/</code>どちらのパスも同じページを表示します。",
+      "growi_text2":"<code>/nonexistent_page</code> では編集フォームを表示します",
+      "growi_text3":"<b>GROWI Enhanced Layout</b>では全てのページが配下のページリストを表示します",
+      "crowi_text1":"<code>/page</code> ではページを表示します。",
+      "crowi_text2":"<code>/page/</code> では配下のページを表示します。",
+      "crowi_text3":"<code>/page/</code>がポータルに適応している場合、ポータルページと配下のページリストを表示します。",
+      "crowi_text4":"<code>/nonexistent_page</code> では編集フォームを表示します",
+      "crowi_text5":"<code>/nonexistent_page</code> では配下のページリストを表示します。"
     }
   },
 

src/client/js/app.jsx

@@ -35,7 +35,6 @@ import UserPictureList from './components/User/UserPictureList';
 import TableOfContents from './components/TableOfContents';
 
 import UserGroupDetailPage from './components/Admin/UserGroupDetail/UserGroupDetailPage';
-import CustomCssEditor from './components/Admin/CustomCssEditor';
 import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
 import MarkdownSetting from './components/Admin/MarkdownSetting/MarkDownSetting';
 import UserManagement from './components/Admin/UserManagement';
@@ -209,17 +208,6 @@ if (adminMarkDownSettingElem != null) {
   );
 }
 
-const customCssEditorElem = document.getElementById('custom-css-editor');
-if (customCssEditorElem != null) {
-  // get input[type=hidden] element
-  const customCssInputElem = document.getElementById('inputCustomCss');
-
-  ReactDOM.render(
-    <CustomCssEditor inputElem={customCssInputElem} />,
-    customCssEditorElem,
-  );
-}
-
 const customHeaderEditorElem = document.getElementById('custom-header-editor');
 if (customHeaderEditorElem != null) {
   // get input[type=hidden] element

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

@@ -16,12 +16,10 @@ require('jquery-ui/ui/widgets/resizable');
 export default class CustomCssEditor extends React.Component {
 
   render() {
-    // get initial value from inputElem
-    const value = this.props.inputElem.value;
 
     return (
       <CodeMirror
-        value={value}
+        value={this.props.value}
         autoFocus
         options={{
           mode: 'css',
@@ -43,7 +41,7 @@ export default class CustomCssEditor extends React.Component {
           });
         }}
         onChange={(editor, data, value) => {
-          this.props.inputElem.value = value;
+          this.props.onChange(value);
         }}
       />
     );
@@ -52,5 +50,6 @@ export default class CustomCssEditor extends React.Component {
 }
 
 CustomCssEditor.propTypes = {
-  inputElem: PropTypes.object.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
 };

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

@@ -9,7 +9,8 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import CustomizeLayoutSetting from './CustomizeLayoutSetting';
 import CustomizeBehaviorSetting from './CustomizeBehaviorSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
-import CustomizeCustomScriptSetting from './CustomizeCustomScriptSetting';
+import CustomizeCssSetting from './CustomizeCssSetting';
+import CustomizeScriptSetting from './CustomizeScriptSetting';
 
 class Customize extends React.Component {
 
@@ -31,10 +32,11 @@ class Customize extends React.Component {
         {/* コードハイライトフォームの react componentをここで呼ぶ(GW-277) */}
         <legend>{t('customize_page.custom_title')}</legend>
         {/* カスタムタイトルフォームの react componentをここで呼ぶ(GW-278) */}
-        <legend>{t('customize_page.Custom CSS')}</legend>
-        {/* カスタムCSSフォームの react componentをここで呼ぶ(GW-279) */}
         <div className="my-3">
-          <CustomizeCustomScriptSetting />
+          <CustomizeCssSetting />
+        </div>
+        <div className="my-3">
+          <CustomizeScriptSetting />
         </div>
       </Fragment>
     );

src/client/js/components/Admin/Customize/CustomizeBehaviorSetting.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
@@ -48,13 +49,12 @@ class CustomizeBehaviorSetting extends React.Component {
               behaviorType="growi"
               isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
               onSelected={() => adminCustomizeContainer.switchBehaviorType('growi')}
-              labelHtml='GROWI Simplified Behavior <small class="text-success">(Recommended)</small>'
+              labelHtml={`GROWI Simplified Behavior <small class="text-success">${t('customize_page.recommended')}</small>`}
             >
-              {/* TODO i18n */}
               <ul>
-                <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
-                <li><code>/nonexistent_page</code> shows editing form</li>
-                <li>All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b></li>
+                <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.growi_text1') }} /></li>
+                <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.growi_text2') }} /></li>
+                <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.growi_text3') }} /></li>
               </ul>
             </CustomizeBehaviorOption>
           </div>
@@ -66,15 +66,14 @@ class CustomizeBehaviorSetting extends React.Component {
               onSelected={() => adminCustomizeContainer.switchBehaviorType('crowi-plus')}
               labelHtml="Crowi Classic Behavior"
             >
-              {/* TODO i18n */}
               <ul>
-                <li><code>/page</code> shows the page</li>
-                <li><code>/page/</code> shows the list of sub pages</li>
+                <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.crowi_text1') }} /></li>
+                <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.crowi_text2') }} /></li>
                 <ul>
-                  <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
+                  <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.crowi_text3') }} /></li>
                 </ul>
-                <li><code>/nonexistent_page</code> shows editing form</li>
-                <li><code>/nonexistent_page/</code> the list of sub pages</li>
+                <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.crowi_text4') }} /></li>
+                <li><span dangerouslySetInnerHTML={{ __html: t('customize_page.behavior_description.crowi_text5') }} /></li>
               </ul>
             </CustomizeBehaviorOption>
           </div>

src/client/js/components/Admin/Customize/CustomizeCssSetting.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import loggerFactory from '@alias/logger';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+
+import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import CustomCssEditor from '../CustomCssEditor';
+
+const logger = loggerFactory('growi:Customize');
+
+class CustomizeCssSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async onClickSubmit() {
+    const { t, adminCustomizeContainer } = this.props;
+
+    try {
+      await adminCustomizeContainer.updateCustomizeCss();
+      toastSuccess(t('customize_page.update_customCss_success'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t, appContainer, adminCustomizeContainer } = this.props;
+
+    return (
+      <React.Fragment>
+        <h2>{t('customize_page.Custom CSS')}</h2>
+        <p className="well">
+          { t('customize_page.write_CSS') }<br />
+          { t('customize_page.reflect_change') }
+        </p>
+        <div className="form-group">
+          <div className="col-xs-12">
+            <CustomCssEditor
+              // The value passed must be immutable
+              value={appContainer.config.customizeCss}
+              onChange={(inputValue) => { adminCustomizeContainer.changeCustomCss(inputValue) }}
+            />
+          </div>
+          <div className="col-xs-12">
+            <p className="help-block text-right">
+              <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
+              { t('customize_page.ctrl_space') }
+            </p>
+          </div>
+        </div>
+
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+      </React.Fragment>
+    );
+  }
+
+}
+
+const CustomizeCssSettingWrapper = (props) => {
+  return createSubscribedElement(CustomizeCssSetting, props, [AppContainer, AdminCustomizeContainer]);
+};
+
+CustomizeCssSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
+};
+
+export default withTranslation()(CustomizeCssSettingWrapper);

src/client/js/components/Admin/Customize/CustomizeCustomScriptSetting.jsx → src/client/js/components/Admin/Customize/CustomizeScriptSetting.jsx

@@ -15,7 +15,7 @@ import CustomScriptEditor from '../CustomScriptEditor';
 
 const logger = loggerFactory('growi:customizeScript');
 
-class CustomizeCustomScriptSetting extends React.Component {
+class CustomizeScriptSetting extends React.Component {
 
   constructor(props) {
     super(props);
@@ -100,14 +100,14 @@ class CustomizeCustomScriptSetting extends React.Component {
 
 }
 
-const CustomizeCustomScriptSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeCustomScriptSetting, props, [AppContainer, AdminCustomizeContainer]);
+const CustomizeScriptSettingWrapper = (props) => {
+  return createSubscribedElement(CustomizeScriptSetting, props, [AppContainer, AdminCustomizeContainer]);
 };
 
-CustomizeCustomScriptSetting.propTypes = {
+CustomizeScriptSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default withTranslation()(CustomizeCustomScriptSettingWrapper);
+export default withTranslation()(CustomizeScriptSettingWrapper);

src/client/js/services/AdminCustomizeContainer.js

@@ -19,6 +19,7 @@ export default class AdminCustomizeContainer extends Container {
       isSavedStatesOfTabChanges: appContainer.config.isSavedStatesOfTabChanges,
       isEnabledAttachTitleHeader: appContainer.config.isEnabledAttachTitleHeader,
       currentRecentCreatedLimit: appContainer.config.recentCreatedLimit,
+      currentCustomizeCss: appContainer.config.customizeCss,
       currentCustomizeScript: appContainer.config.customizeScript,
     };
 
@@ -84,6 +85,13 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ currentRecentCreatedLimit: value });
   }
 
+  /**
+   * Change custom css
+   */
+  changeCustomCss(inputValue) {
+    this.setState({ currentCustomizeCss: inputValue });
+  }
+
   /**
    * Change customize script
    */
@@ -91,6 +99,7 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ currentCustomizeScript: inpuValue });
   }
 
+
   /**
    * Update layout
    * @memberOf AdminCustomizeContainer
@@ -134,6 +143,15 @@ export default class AdminCustomizeContainer extends Container {
     return customizedParams;
   }
 
+  /**
+   * Update customCss
+   * @memberOf AdminCustomizeContainer
+   * @return {string} css
+   */
+  async updateCustomizeCss() {
+    // TODO GW-534 create apiV3
+  }
+
   /**
    * Update customize script
    * @memberOf AdminCustomizeContainer
@@ -143,4 +161,5 @@ export default class AdminCustomizeContainer extends Container {
     // TODO GW-538 create apiV3
   }
 
+
 }

src/server/models/config.js

@@ -183,6 +183,7 @@ module.exports = function(crowi) {
       tagWhiteList: crowi.xssService.getTagWhiteList(),
       attrWhiteList: crowi.xssService.getAttrWhiteList(),
       highlightJsStyleBorder: crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
+      customizeCss: crowi.configManager.getConfig('crowi', 'customize:css'),
       isSavedStatesOfTabChanges: crowi.configManager.getConfig('crowi', 'customize:isSavedStatesOfTabChanges'),
       isEnabledAttachTitleHeader: crowi.configManager.getConfig('crowi', 'customize:isEnabledAttachTitleHeader'),
       customizeScript: crowi.configManager.getConfig('crowi', 'customize:script'),