Merge pull request #2795 from weseek/feat/GW-3818-update-gcp-setting

Feat/gw 3818 update gcp setting

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

@@ -1,133 +1,104 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-import loggerFactory from '@alias/logger';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
-import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-const logger = loggerFactory('growi:appSettings');
-
-class AwsSetting extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.submitHandler = this.submitHandler.bind(this);
-  }
-
-  async submitHandler() {
-    const { t, adminAppContainer } = this.props;
-
-    try {
-      await adminAppContainer.updateAwsSettingHandler();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:app_setting.aws_label') }));
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  }
-
-  render() {
-    const { t, adminAppContainer } = this.props;
-
-    return (
-      <React.Fragment>
-        <div className="row form-group">
-          <label className="text-left text-md-right col-md-3 col-form-label">
-            {t('admin:app_setting.region')}
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              placeholder={`${t('eg')} ap-northeast-1`}
-              defaultValue={adminAppContainer.state.s3Region || ''}
-              onChange={(e) => {
+function AwsSetting(props) {
+  const { t, adminAppContainer } = props;
+
+  return (
+    <React.Fragment>
+      <div className="row form-group">
+        <label className="text-left text-md-right col-md-3 col-form-label">
+          {t('admin:app_setting.region')}
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            placeholder={`${t('eg')} ap-northeast-1`}
+            defaultValue={adminAppContainer.state.s3Region || ''}
+            onChange={(e) => {
                 adminAppContainer.changeS3Region(e.target.value);
               }}
-            />
-          </div>
+          />
         </div>
-
-        <div className="row form-group">
-          <label className="text-left text-md-right col-md-3 col-form-label">
-            {t('admin:app_setting.custom_endpoint')}
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="text"
-              placeholder={`${t('eg')} http://localhost:9000`}
-              defaultValue={adminAppContainer.state.s3CustomEndpoint || ''}
-              onChange={(e) => {
+      </div>
+
+      <div className="row form-group">
+        <label className="text-left text-md-right col-md-3 col-form-label">
+          {t('admin:app_setting.custom_endpoint')}
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            placeholder={`${t('eg')} http://localhost:9000`}
+            defaultValue={adminAppContainer.state.s3CustomEndpoint || ''}
+            onChange={(e) => {
                 adminAppContainer.changeS3CustomEndpoint(e.target.value);
               }}
-            />
-            <p className="form-text text-muted">{t('admin:app_setting.custom_endpoint_change')}</p>
-          </div>
+          />
+          <p className="form-text text-muted">{t('admin:app_setting.custom_endpoint_change')}</p>
         </div>
-
-        <div className="row form-group">
-          <label className="text-left text-md-right col-md-3 col-form-label">
-            {t('admin:app_setting.bucket_name')}
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="text"
-              placeholder={`${t('eg')} crowi`}
-              defaultValue={adminAppContainer.state.s3Bucket || ''}
-              onChange={(e) => {
+      </div>
+
+      <div className="row form-group">
+        <label className="text-left text-md-right col-md-3 col-form-label">
+          {t('admin:app_setting.bucket_name')}
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            placeholder={`${t('eg')} crowi`}
+            defaultValue={adminAppContainer.state.s3Bucket || ''}
+            onChange={(e) => {
                 adminAppContainer.changeS3Bucket(e.target.value);
               }}
-            />
-          </div>
+          />
         </div>
+      </div>
 
-        <div className="row form-group">
-          <label className="text-left text-md-right col-md-3 col-form-label">
+      <div className="row form-group">
+        <label className="text-left text-md-right col-md-3 col-form-label">
             Access key ID
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="text"
-              defaultValue={adminAppContainer.state.s3AccessKeyId || ''}
-              onChange={(e) => {
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            defaultValue={adminAppContainer.state.s3AccessKeyId || ''}
+            onChange={(e) => {
                 adminAppContainer.changeS3AccessKeyId(e.target.value);
               }}
-            />
-          </div>
+          />
         </div>
+      </div>
 
-        <div className="row form-group">
-          <label className="text-left text-md-right col-md-3 col-form-label">
+      <div className="row form-group">
+        <label className="text-left text-md-right col-md-3 col-form-label">
             Secret access key
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="text"
-              defaultValue={adminAppContainer.state.s3SecretAccessKey || ''}
-              onChange={(e) => {
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            defaultValue={adminAppContainer.state.s3SecretAccessKey || ''}
+            onChange={(e) => {
                 adminAppContainer.changeS3SecretAccessKey(e.target.value);
               }}
-            />
-          </div>
+          />
         </div>
-
-        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
-      </React.Fragment>
-    );
-  }
-
+      </div>
+    </React.Fragment>
+  );
 }
 
+
 /**
  * Wrapper component for using unstated
  */

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

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 import AwsSetting from './AwsSetting';
 import GcpSettings from './GcpSettings';
@@ -16,6 +18,18 @@ function FileUploadSetting(props) {
   const { fileUploadType } = adminAppContainer.state;
   const fileUploadTypes = ['aws', 'gcp'];
 
+  async function submitHandler() {
+    const { t } = props;
+
+    try {
+      await adminAppContainer.updateFileUploadSettingHandler();
+      toastSuccess(t('toaster.update_successed', { target: t('admin:app_setting.file_upload_settings') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
   return (
     <React.Fragment>
       <p className="card well my-3">
@@ -57,6 +71,8 @@ function FileUploadSetting(props) {
       {fileUploadType === 'aws' && <AwsSetting />}
       {fileUploadType === 'gcp' && <GcpSettings />}
 
+      <AdminUpdateButtonRow onClick={submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+
     </React.Fragment>
   );
 }

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

@@ -2,136 +2,105 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-import loggerFactory from '@alias/logger';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
-import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-const logger = loggerFactory('growi:GcpSetting');
 
-class GcpSetting extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.submitHandler = this.submitHandler.bind(this);
-  }
-
-  async submitHandler() {
-    const { t, adminAppContainer } = this.props;
-
-    try {
-      await adminAppContainer.updateGcpSettingHandler();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:app_setting.gcp_settings') }));
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  }
-
-  render() {
-    const { t, adminAppContainer } = this.props;
-
-    return (
-      <React.Fragment>
-
-        <table className="table settings-table">
-          <colgroup>
-            <col className="item-name" />
-            <col className="from-db" />
-            <col className="from-env-vars" />
-          </colgroup>
-          <thead>
-            <tr><th></th><th>Database</th><th>Environment variables</th></tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th>Api Key Json Path</th>
-              <td>
-                <input
-                  className="form-control"
-                  type="text"
-                  name="gcsApiKeyJsonPath"
-                  defaultValue={adminAppContainer.state.gcsApiKeyJsonPath}
-                  onChange={e => adminAppContainer.changeGcsApiKeyJsonPath(e.target.value)}
-                />
-              </td>
-              <td>
-                <input
-                  className="form-control"
-                  type="text"
-                  value={adminAppContainer.state.envGcsApiKeyJsonPath || ''}
-                  readOnly
-                  tabIndex="-1"
-                />
-                <p className="form-text text-muted">
-                  {/* eslint-disable-next-line react/no-danger */}
-                  <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_API_KEY_JSON_PATH' }) }} />
-                </p>
-              </td>
-            </tr>
-            <tr>
-              <th>{t('admin:app_setting.bucket_name')}</th>
-              <td>
-                <input
-                  className="form-control"
-                  type="text"
-                  name="gcsBucket"
-                  defaultValue={adminAppContainer.state.gcsBucket}
-                  onChange={e => adminAppContainer.changeGcsBucket(e.target.value)}
-                />
-              </td>
-              <td>
-                <input
-                  className="form-control"
-                  type="text"
-                  value={adminAppContainer.state.envGcsBucket || ''}
-                  readOnly
-                  tabIndex="-1"
-                />
-                <p className="form-text text-muted">
-                  {/* eslint-disable-next-line react/no-danger */}
-                  <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_BUCKET' }) }} />
-                </p>
-              </td>
-            </tr>
-            <tr>
-              <th>Name Space</th>
-              <td>
-                <input
-                  className="form-control"
-                  type="text"
-                  name="gcsUploadNamespace"
-                  defaultValue={adminAppContainer.state.gcsUploadNamespace}
-                  onChange={e => adminAppContainer.changeGcsUploadNamespace(e.target.value)}
-                />
-              </td>
-              <td>
-                <input
-                  className="form-control"
-                  type="text"
-                  value={adminAppContainer.state.envGcsUploadNamespace || ''}
-                  readOnly
-                  tabIndex="-1"
-                />
-                <p className="form-text text-muted">
-                  {/* eslint-disable-next-line react/no-danger */}
-                  <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_UPLOAD_NAMESPACE' }) }} />
-                </p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
-      </React.Fragment>
-    );
-  }
+function GcpSetting(props) {
+  const { t, adminAppContainer } = props;
+
+  return (
+    <table className="table settings-table">
+      <colgroup>
+        <col className="item-name" />
+        <col className="from-db" />
+        <col className="from-env-vars" />
+      </colgroup>
+      <thead>
+        <tr><th></th><th>Database</th><th>Environment variables</th></tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Api Key Json Path</th>
+          <td>
+            <input
+              className="form-control"
+              type="text"
+              name="gcsApiKeyJsonPath"
+              defaultValue={adminAppContainer.state.gcsApiKeyJsonPath}
+              onChange={e => adminAppContainer.changeGcsApiKeyJsonPath(e.target.value)}
+            />
+          </td>
+          <td>
+            <input
+              className="form-control"
+              type="text"
+              value={adminAppContainer.state.envGcsApiKeyJsonPath || ''}
+              readOnly
+              tabIndex="-1"
+            />
+            <p className="form-text text-muted">
+              {/* eslint-disable-next-line react/no-danger */}
+              <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_API_KEY_JSON_PATH' }) }} />
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <th>{t('admin:app_setting.bucket_name')}</th>
+          <td>
+            <input
+              className="form-control"
+              type="text"
+              name="gcsBucket"
+              defaultValue={adminAppContainer.state.gcsBucket}
+              onChange={e => adminAppContainer.changeGcsBucket(e.target.value)}
+            />
+          </td>
+          <td>
+            <input
+              className="form-control"
+              type="text"
+              value={adminAppContainer.state.envGcsBucket || ''}
+              readOnly
+              tabIndex="-1"
+            />
+            <p className="form-text text-muted">
+              {/* eslint-disable-next-line react/no-danger */}
+              <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_BUCKET' }) }} />
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <th>Name Space</th>
+          <td>
+            <input
+              className="form-control"
+              type="text"
+              name="gcsUploadNamespace"
+              defaultValue={adminAppContainer.state.gcsUploadNamespace}
+              onChange={e => adminAppContainer.changeGcsUploadNamespace(e.target.value)}
+            />
+          </td>
+          <td>
+            <input
+              className="form-control"
+              type="text"
+              value={adminAppContainer.state.envGcsUploadNamespace || ''}
+              readOnly
+              tabIndex="-1"
+            />
+            <p className="form-text text-muted">
+              {/* eslint-disable-next-line react/no-danger */}
+              <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_UPLOAD_NAMESPACE' }) }} />
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
 
 }
 

src/client/js/services/AdminAppContainer.js

@@ -86,11 +86,16 @@ export default class AdminAppContainer extends Container {
       smtpPassword: appSettingsParams.smtpPassword,
       sesAccessKeyId: appSettingsParams.sesAccessKeyId,
       sesSecretAccessKey: appSettingsParams.sesSecretAccessKey,
+
+      fileUploadType: appSettingsParams.fileUploadType,
       s3Region: appSettingsParams.s3Region,
       s3CustomEndpoint: appSettingsParams.s3CustomEndpoint,
       s3Bucket: appSettingsParams.s3Bucket,
       s3AccessKeyId: appSettingsParams.s3AccessKeyId,
       s3SecretAccessKey: appSettingsParams.s3SecretAccessKey,
+      gcsApiKeyJsonPath: appSettingsParams.gcsApiKeyJsonPath,
+      gcsBucket: appSettingsParams.gcsBucket,
+      gcsUploadNamespace: appSettingsParams.gcsUploadNamespace,
       envGcsApiKeyJsonPath: appSettingsParams.envGcsApiKeyJsonPath,
       envGcsBucket: appSettingsParams.envGcsBucket,
       envGcsUploadNamespace: appSettingsParams.envGcsUploadNamespace,
@@ -332,6 +337,17 @@ export default class AdminAppContainer extends Container {
     return this.appContainer.apiv3.post('/app-settings/smtp-test');
   }
 
+  /**
+   * Update file upload setting
+   * @memberOf AdminAppContainer
+   */
+  updateFileUploadSettingHandler() {
+    if (this.state.fileUploadType === 'aws') {
+      return this.updateAwsSettingHandler();
+    }
+    return this.updateGcpSettingHandler();
+  }
+
   /**
    * Update AWS setting
    * @memberOf AdminAppContainer
@@ -339,6 +355,7 @@ export default class AdminAppContainer extends Container {
    */
   async updateAwsSettingHandler() {
     const response = await this.appContainer.apiv3.put('/app-settings/aws-setting', {
+      fileUploadType: this.state.fileUploadType,
       s3Region: this.state.s3Region,
       s3CustomEndpoint: this.state.s3CustomEndpoint,
       s3Bucket: this.state.s3Bucket,
@@ -355,8 +372,14 @@ export default class AdminAppContainer extends Container {
    * @return {Array} Appearance
    */
   async updateGcpSettingHandler() {
-    // TODO GW-3660 cteate api
-    return;
+    const response = await this.appContainer.apiv3.put('/app-settings/gcp-setting', {
+      fileUploadType: this.state.fileUploadType,
+      gcsApiKeyJsonPath: this.state.gcsApiKeyJsonPath,
+      gcsBucket: this.state.gcsBucket,
+      gcsUploadNamespace: this.state.gcsUploadNamespace,
+    });
+    const { awsSettingParams } = response.data;
+    return awsSettingParams;
   }
 
   /**

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

@@ -215,6 +215,7 @@ module.exports = (crowi) => {
       envSiteUrl: crowi.configManager.getConfigFromEnvVars('crowi', 'app:siteUrl'),
       isMailerSetup: crowi.mailService.isMailerSetup,
       fromAddress: crowi.configManager.getConfig('crowi', 'mail:from'),
+
       transmissionMethod: crowi.configManager.getConfig('crowi', 'mail:transmissionMethod'),
       smtpHost: crowi.configManager.getConfig('crowi', 'mail:smtpHost'),
       smtpPort: crowi.configManager.getConfig('crowi', 'mail:smtpPort'),
@@ -222,14 +223,20 @@ module.exports = (crowi) => {
       smtpPassword: crowi.configManager.getConfig('crowi', 'mail:smtpPassword'),
       sesAccessKeyId: crowi.configManager.getConfig('crowi', 'mail:sesAccessKeyId'),
       sesSecretAccessKey: crowi.configManager.getConfig('crowi', 'mail:sesSecretAccessKey'),
+
+      fileUploadType: crowi.configManager.getConfig('crowi', 'app:fileUploadType'),
       s3Region: crowi.configManager.getConfig('crowi', 'aws:s3Region'),
       s3CustomEndpoint: crowi.configManager.getConfig('crowi', 'aws:s3CustomEndpoint'),
       s3Bucket: crowi.configManager.getConfig('crowi', 'aws:s3Bucket'),
       s3AccessKeyId: crowi.configManager.getConfig('crowi', 'aws:s3AccessKeyId'),
       s3SecretAccessKey: crowi.configManager.getConfig('crowi', 'aws:s3SecretAccessKey'),
+      gcsApiKeyJsonPath: crowi.configManager.getConfig('crowi', 'gcs:apiKeyJsonPath'),
+      gcsBucket: crowi.configManager.getConfig('crowi', 'gcs:bucket'),
+      gcsUploadNamespace: crowi.configManager.getConfig('crowi', 'gcs:uploadNamespace'),
       envGcsApiKeyJsonPath: crowi.configManager.getConfigFromEnvVars('crowi', 'gcs:apiKeyJsonPath'),
       envGcsBucket: crowi.configManager.getConfigFromEnvVars('crowi', 'gcs:bucket'),
       envGcsUploadNamespace: crowi.configManager.getConfigFromEnvVars('crowi', 'gcs:uploadNamespace'),
+
       isEnabledPlugins: crowi.configManager.getConfig('crowi', 'plugin:isEnabledPlugins'),
     };
     return res.apiv3({ appSettingsParams });
@@ -562,6 +569,7 @@ module.exports = (crowi) => {
    */
   router.put('/aws-setting', loginRequiredStrictly, adminRequired, csrf, validator.awsSetting, apiV3FormValidator, async(req, res) => {
     const requestAwsSettingParams = {
+      'app:fileUploadType': req.body.fileUploadType,
       'aws:s3Region': req.body.s3Region,
       'aws:s3CustomEndpoint': req.body.s3CustomEndpoint,
       'aws:s3Bucket': req.body.s3Bucket,
@@ -616,6 +624,7 @@ module.exports = (crowi) => {
    */
   router.put('/gcp-setting', loginRequiredStrictly, adminRequired, csrf, validator.gcpSetting, apiV3FormValidator, async(req, res) => {
     const requestGcpSettingParams = {
+      'app:fileUploadType': req.body.fileUploadType,
       'gcs:apiKeyJsonPath': req.body.gcsApiKeyJsonPath,
       'gcs:bucket': req.body.gcsBucket,
       'gcs:uploadNamespace': req.body.gcsUploadNamespace,