move update button

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,19 @@ function FileUploadSetting(props) {
   const { fileUploadType } = adminAppContainer.state;
   const fileUploadTypes = ['aws', 'gcp'];
 
+  async function submitHandler() {
+    const { t } = props;
+
+    try {
+      // TODO
+      // await adminAppContainer.updateAwsSettingHandler();
+      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 +72,8 @@ function FileUploadSetting(props) {
       {fileUploadType === 'aws' && <AwsSetting />}
       {fileUploadType === 'gcp' && <GcpSettings />}
 
+      <AdminUpdateButtonRow onClick={submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+
     </React.Fragment>
   );
 }