Merge pull request #1507 from weseek/reactify-admin/enable-plugin-setting

Reactify admin/enable plugin setting

resource/locales/en-US/translation.json

@@ -440,7 +440,8 @@
     "Disable": "Disable",
     "Use env var if empty": "If the value in the database is empty, the value of the environment variable <cod>{{variable}}</code> is used.",
     "updated_app_setting": "Succeeded to update app setting",
-    "updated_site_url": "Succeeded to update site URL"
+    "updated_site_url": "Succeeded to update site URL",
+    "updated_plugin_setting": "Succeeded to update plugin setting"
   },
 
   "security_setting": {

resource/locales/ja/translation.json

@@ -439,7 +439,8 @@
     "Disable": "無効",
     "Use env var if empty": "データベース側の値が空の場合、環境変数 <code>{{variable}}</code> の値を利用します",
     "updated_app_setting": "アプリ設定を更新しました",
-    "updated_site_url": "サイトURLを更新しました"
+    "updated_site_url": "サイトURLを更新しました",
+    "updated_plugin_setting": "プラグイン設定を更新しました"
   },
 
   "security_setting": {

src/client/js/components/Admin/App/PluginSetting.jsx

@@ -7,6 +7,8 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:app:pluginSetting');
@@ -16,21 +18,15 @@ class PluginSetting extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      // TODO GW-690 fetch from db
-      isEnabledPlugins: true,
-    };
-
-    this.onClickSubmit = this.onClickSubmit.bind(this);
-    this.switchIsEnabledPlugins = this.switchIsEnabledPlugins.bind(this);
+    this.submitHandler = this.submitHandler.bind(this);
   }
 
-  async onClickSubmit() {
-    const { t } = this.props;
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
 
     try {
-      // TODO GW-690 post apiV3
-      toastSuccess(t('app_setting.update', { target: 'Plugin Setting' }));
+      await adminAppContainer.updatePluginSettingHandler();
+      toastSuccess(t('app_setting.updated_plugin_setting'));
     }
     catch (err) {
       toastError(err);
@@ -38,18 +34,12 @@ class PluginSetting extends React.Component {
     }
   }
 
-  switchIsEnabledPlugins() {
-    this.setState({ isEnabledPlugins: !this.state.isEnabledPlugins });
-  }
-
-
   render() {
-    const { t } = this.props;
+    const { t, adminAppContainer } = this.props;
 
     return (
       <React.Fragment>
-
-        <p className="well">{ t('app_setting.Enable plugin loading') }</p>
+        <p className="well">{t('app_setting.Enable plugin loading')}</p>
 
         <div className="row mb-5">
           <div className="col-xs-offset-3 col-xs-6 text-left">
@@ -57,22 +47,17 @@ class PluginSetting extends React.Component {
               <input
                 id="isEnabledPlugins"
                 type="checkbox"
-                checked={this.state.isEnabledPlugins}
-                onChange={this.switchIsEnabledPlugins}
+                checked={adminAppContainer.state.isEnabledPlugins}
+                onChange={(e) => {
+                  adminAppContainer.changeIsEnabledPlugins(e.target.checked);
+                }}
               />
-              <label htmlFor="isEnabledPlugins">
-                { t('app_setting.Load plugins') }
-              </label>
+              <label htmlFor="isEnabledPlugins">{t('app_setting.Load plugins')}</label>
             </div>
           </div>
         </div>
 
-        <div className="row my-3">
-          <div className="col-xs-offset-4 col-xs-5">
-            <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
-          </div>
-        </div>
-
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }
@@ -83,12 +68,13 @@ class PluginSetting extends React.Component {
  * Wrapper component for using unstated
  */
 const PluginSettingWrapper = (props) => {
-  return createSubscribedElement(PluginSetting, props, [AppContainer]);
+  return createSubscribedElement(PluginSetting, props, [AppContainer, AdminAppContainer]);
 };
 
 PluginSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
 };
 
 export default withTranslation()(PluginSettingWrapper);

src/client/js/services/AdminAppContainer.js

@@ -36,6 +36,7 @@ export default class AdminAppContainer extends Container {
       bucket: '',
       accessKeyId: '',
       secretKey: '',
+      isEnabledPlugins: true,
     };
 
     this.changeTitle = this.changeTitle.bind(this);
@@ -53,10 +54,12 @@ export default class AdminAppContainer extends Container {
     this.changeBucket = this.changeBucket.bind(this);
     this.changeAccessKeyId = this.changeAccessKeyId.bind(this);
     this.changeSecretKey = this.changeSecretKey.bind(this);
+    this.changeIsEnabledPlugins = this.changeIsEnabledPlugins.bind(this);
     this.updateAppSettingHandler = this.updateAppSettingHandler.bind(this);
     this.updateSiteUrlSettingHandler = this.updateSiteUrlSettingHandler.bind(this);
     this.updateMailSettingHandler = this.updateMailSettingHandler.bind(this);
     this.updateAwsSettingHandler = this.updateAwsSettingHandler.bind(this);
+    this.updatePluginSettingHandler = this.updatePluginSettingHandler.bind(this);
   }
 
   /**
@@ -92,6 +95,7 @@ export default class AdminAppContainer extends Container {
         bucket: appSettingsParams.bucket,
         accessKeyId: appSettingsParams.accessKeyId,
         secretKey: appSettingsParams.secretKey,
+        isEnabledPlugins: appSettingsParams.isEnabledPlugins,
       });
 
     }
@@ -207,6 +211,13 @@ export default class AdminAppContainer extends Container {
     this.setState({ secretKey });
   }
 
+  /**
+   * Change secret key
+   */
+  changeIsEnabledPlugins(isEnabledPlugins) {
+    this.setState({ isEnabledPlugins });
+  }
+
   /**
    * Update app setting
    * @memberOf AdminAppContainer
@@ -271,4 +282,18 @@ export default class AdminAppContainer extends Container {
     return awsSettingParams;
   }
 
+  /**
+   * Update plugin setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updatePluginSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/plugin-setting', {
+      isEnabledPlugins: this.state.isEnabledPlugins,
+    });
+    const { pluginSettingParams } = response.data;
+    return pluginSettingParams;
+  }
+
+
 }

src/server/form/admin/plugin.js

@@ -1,7 +0,0 @@
-const form = require('express-form');
-
-const field = form.field;
-
-module.exports = form(
-  field('settingForm[plugin:isEnabledPlugins]').trim().toBooleanStrict(),
-);

src/server/form/index.js

@@ -11,7 +11,6 @@ module.exports = {
     apiToken: require('./me/apiToken'),
   },
   admin: {
-    plugin: require('./admin/plugin'),
     securityGeneral: require('./admin/securityGeneral'),
     securityPassportLocal: require('./admin/securityPassportLocal'),
     securityPassportLdap: require('./admin/securityPassportLdap'),

src/server/routes/admin.js

@@ -567,20 +567,6 @@ module.exports = function(crowi, app) {
   };
 
   actions.api = {};
-  actions.api.appSetting = async function(req, res) {
-    const form = req.form.settingForm;
-
-    if (req.form.isValid) {
-      debug('form content', form);
-
-      await configManager.updateConfigsInTheSameNamespace('crowi', form);
-      return res.json({ status: true });
-    }
-
-    return res.json({ status: false, message: req.form.errors.join('\n') });
-
-  };
-
   actions.api.securitySetting = async function(req, res) {
     if (!req.form.isValid) {
       return res.json({ status: false, message: req.form.errors.join('\n') });

src/server/routes/apiv3/app-settings.js

@@ -81,6 +81,11 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *          secretKey:
  *            type: String
  *            description: secret key for authentification of AWS
+ *      PluginSettingParams:
+ *        type: object
+ *          isEnabledPlugins:
+ *            type: String
+ *            description: enable use plugins
  */
 
 module.exports = (crowi) => {
@@ -116,6 +121,9 @@ module.exports = (crowi) => {
       body('accessKeyId').trim().matches(/^[\da-zA-Z]+$/),
       body('secretKey').trim(),
     ],
+    pluginSetting: [
+      body('isEnabledPlugins').isBoolean(),
+    ],
   };
 
   /**
@@ -154,6 +162,7 @@ module.exports = (crowi) => {
       bucket: crowi.configManager.getConfig('crowi', 'aws:bucket'),
       accessKeyId: crowi.configManager.getConfig('crowi', 'aws:accessKeyId'),
       secretKey: crowi.configManager.getConfig('crowi', 'aws:secretKey'),
+      isEnabledPlugins: crowi.configManager.getConfig('crowi', 'plugin:isEnabledPlugins'),
     };
     return res.apiv3({ appSettingsParams });
 
@@ -405,5 +414,47 @@ module.exports = (crowi) => {
     }
 
   });
+
+  /**
+   * @swagger
+   *
+   *    /app-settings/plugin-setting:
+   *      put:
+   *        tags: [AppSettings]
+   *        description: Update plugin setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/PluginSettingParams'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update plugin setting
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/PluginSettingParams'
+   */
+  router.put('/plugin-setting', loginRequiredStrictly, adminRequired, csrf, validator.pluginSetting, ApiV3FormValidator, async(req, res) => {
+    const requestPluginSettingParams = {
+      'plugin:isEnabledPlugins': req.body.isEnabledPlugins,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestPluginSettingParams);
+      const pluginSettingParams = {
+        isEnabledPlugins: crowi.configManager.getConfig('crowi', 'plugin:isEnabledPlugins'),
+      };
+      return res.apiv3({ pluginSettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating plugin setting';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-pluginSetting-failed'));
+    }
+
+  });
+
   return router;
 };

src/server/routes/index.js

@@ -59,7 +59,6 @@ module.exports = function(crowi, app) {
 
   app.get('/admin'                          , loginRequiredStrictly , adminRequired , admin.index);
   app.get('/admin/app'                      , loginRequiredStrictly , adminRequired , admin.app.index);
-  app.post('/_api/admin/settings/plugin'    , loginRequiredStrictly , adminRequired , csrf, form.admin.plugin, admin.api.appSetting);
 
   // security admin
   app.get('/admin/security'                     , loginRequiredStrictly , adminRequired , admin.security.index);