create gcp setting table

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

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import AppSetting from './AppSetting';
 import SiteUrlSetting from './SiteUrlSetting';
 import MailSetting from './MailSetting';
-import AwsSetting from './AwsSetting';
 import PluginSetting from './PluginSetting';
 import FileUploadSetting from './FileUploadSetting';
 
@@ -37,7 +36,6 @@ class AppSettingsPageContents extends React.Component {
           </div>
         </div>
 
-
         <div className="row mt-5">
           <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('admin:app_setting.file_upload_settings')}</h2>

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

@@ -11,6 +11,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 import AwsSetting from './AwsSetting';
+import GcpSettings from './GcpSettings';
 
 // const logger = loggerFactory('growi:FileUploadSetting');
 
@@ -39,6 +40,17 @@ class FileUploadSetting extends React.Component {
 
     return (
       <React.Fragment>
+        <p className="card well my-3">
+          {t('admin:app_setting.aws_access')}
+          <br />
+          {t('admin:app_setting.no_smtp_setting')}
+          <br />
+          <br />
+          <span className="text-danger">
+            <i className="ti-unlink"></i>
+            {t('admin:app_setting.change_setting')}
+          </span>
+        </p>
         <Nav tabs>
           <NavItem>
             <NavLink
@@ -59,23 +71,12 @@ class FileUploadSetting extends React.Component {
             </NavLink>
           </NavItem>
         </Nav>
-        <TabContent activeTab={activeTab}>
-          <p className="card well my-3">
-            {t('admin:app_setting.aws_access')}
-            <br />
-            {t('admin:app_setting.no_smtp_setting')}
-            <br />
-            <br />
-            <span className="text-danger">
-              <i className="ti-unlink"></i>
-              {t('admin:app_setting.change_setting')}
-            </span>
-          </p>
+        <TabContent activeTab={activeTab} className="pt-3">
           <TabPane tabId="aws-setting">
             {activeComponents.has('aws-setting') && <AwsSetting />}
           </TabPane>
           <TabPane tabId="gcp-setting">
-            {activeComponents.has('gcp-setting') && <p>gcp</p>}
+            {activeComponents.has('gcp-setting') && <GcpSettings />}
           </TabPane>
         </TabContent>
       </React.Fragment>

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

@@ -0,0 +1,146 @@
+
+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 } = this.props;
+
+    try {
+      // TODO create api
+      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.changeSamlEntryPoint(e.target.value)}
+                />
+              </td>
+              <td>
+                <input
+                  className="form-control"
+                  type="text"
+                  value={adminAppContainer.state.envGcsApiKeyJsonPath || ''}
+                  readOnly
+                />
+                <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.changeSamlEntryPoint(e.target.value)}
+                />
+              </td>
+              <td>
+                <input
+                  className="form-control"
+                  type="text"
+                  value={adminAppContainer.state.envGcsBucket || ''}
+                  readOnly
+                />
+                <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.changeSamlEntryPoint(e.target.value)}
+                />
+              </td>
+              <td>
+                <input
+                  className="form-control"
+                  type="text"
+                  value={adminAppContainer.state.envGcsUploadNamespace || ''}
+                  readOnly
+                />
+                <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>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const GcpSettingWrapper = withUnstatedContainers(GcpSetting, [AppContainer, AdminAppContainer]);
+
+GcpSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default withTranslation()(GcpSettingWrapper);

src/client/js/services/AdminAppContainer.js

@@ -20,19 +20,31 @@ export default class AdminAppContainer extends Container {
       confidential: '',
       globalLang: '',
       fileUpload: '',
+
       siteUrl: '',
       envSiteUrl: '',
       isSetSiteUrl: true,
+
       fromAddress: '',
+
       smtpHost: '',
       smtpPort: '',
       smtpUser: '',
       smtpPassword: '',
+
+      gcsApiKeyJsonPath: '',
+      envGcsApiKeyJsonPath: '',
+      gcsBucket: '',
+      envGcsBucket: '',
+      gcsUploadNamespace: '',
+      envGcsUploadNamespace: '',
+
       region: '',
       customEndpoint: '',
       bucket: '',
       accessKeyId: '',
       secretAccessKey: '',
+
       isEnabledPlugins: true,
     };