create tabs

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

@@ -45,19 +45,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.gcp_settings')}</h2>
-          </div>
-        </div>
-
-        <div className="row mt-5">
-          <div className="col-lg-12">
-            <h2 className="admin-setting-header">{t('admin:app_setting.aws_settings')}</h2>
-            <AwsSetting />
-          </div>
-        </div>
-
         <div className="row mt-5">
           <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('admin:app_setting.plugin_settings')}</h2>

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

@@ -38,18 +38,6 @@ class AwsSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <p className="card well">
-          {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>
-
         <div className="row form-group">
           <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.region')}

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

@@ -3,17 +3,85 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 // import loggerFactory from '@alias/logger';
 
+import {
+  TabContent, TabPane, Nav, NavItem, NavLink,
+} from 'reactstrap';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
+import AwsSetting from './AwsSetting';
 
 // const logger = loggerFactory('growi:FileUploadSetting');
 
-function FileUploadSetting() {
-  return (
-    <p>huga</p>
-  );
+class FileUploadSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeTab: 'aws-setting',
+      // Prevent unnecessary rendering
+      activeComponents: new Set(['aws-setting']),
+    };
+
+  }
+
+  toggleActiveTab(activeTab) {
+    this.setState({
+      activeTab, activeComponents: this.state.activeComponents.add(activeTab),
+    });
+  }
+
+  render() {
+    const { t } = this.props;
+    const { activeTab, activeComponents } = this.state;
+
+    return (
+      <React.Fragment>
+        <Nav tabs>
+          <NavItem>
+            <NavLink
+              className={`${activeTab === 'aws-setting' && 'active'} `}
+              onClick={() => { this.toggleActiveTab('aws-setting') }}
+              href="#smtp-setting"
+            >
+              {t('admin:app_setting.aws_settings')}
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={`${activeTab === 'gcp-setting' && 'active'} `}
+              onClick={() => { this.toggleActiveTab('gcp-setting') }}
+              href="#ses-setting"
+            >
+              {t('admin:app_setting.gcp_settings')}
+            </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>
+          <TabPane tabId="aws-setting">
+            {activeComponents.has('aws-setting') && <AwsSetting />}
+          </TabPane>
+          <TabPane tabId="gcp-setting">
+            {activeComponents.has('gcp-setting') && <p>gcp</p>}
+          </TabPane>
+        </TabContent>
+      </React.Fragment>
+    );
+  }
+
 }
 
 /**