create component

resource/locales/en-US/translation.json

@@ -679,7 +679,8 @@
     "recently_created_n_draft_num_desc": "Number of recently created pages and drafts displayed on user page",
     "update_layout_success": "Succeeded to update layout",
     "update_behavior_success": "Succeeded to update behavior",
-    "update_function_success": "Succeeded to update function"
+    "update_function_success": "Succeeded to update function",
+    "update_customCss_success": "Succeeded to update customize css"
   },
 
   "user_management": {

resource/locales/ja/translation.json

@@ -663,7 +663,8 @@
     "recently_created_n_draft_num_desc": "ホーム画面の Recently Created での、1ページの表示数を設定します。",
     "update_layout_success": "レイアウトを更新しました",
     "update_behavior_success": "挙動を更新しました",
-    "update_function_success": "機能を更新しました"
+    "update_function_success": "機能を更新しました",
+    "update_customCss_success": "カスタムCSSを更新しました"
   },
 
   "user_management": {

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

@@ -9,6 +9,7 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import CustomizeLayoutSetting from './CustomizeLayoutSetting';
 import CustomizeBehaviorSetting from './CustomizeBehaviorSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
+import CustomizeCssSetting from './CustomizeCssSetting';
 
 class Customize extends React.Component {
 
@@ -30,8 +31,9 @@ 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">
+          <CustomizeCssSetting />
+        </div>
         <legend>{t('customize_page.Custom script')}</legend>
         {/* カスタムスクリプトフォームの react componentをここで呼ぶ(GW-280) */}
       </Fragment>

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

@@ -0,0 +1,60 @@
+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';
+
+const logger = loggerFactory('growi:Customize');
+
+class CustomizeCssSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async onClickSubmit() {
+    const { t } = this.props;
+
+    try {
+      toastSuccess(t('customize_page.update_customCss_success'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <React.Fragment>
+        <h2>{t('customize_page.Custom CSS')}</h2>
+        <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);