Merge pull request #3561 from weseek/feat/5479-custom-bot-form

Feat/5479 custom bot form

resource/locales/en_US/admin/admin.json

@@ -252,6 +252,16 @@
     "download": "Download",
     "delete": "Delete"
   },
+  "slack_integration": {
+    "access_token_settings": {
+      "discard": "Discard",
+      "generate": "Generate"
+    },
+    "custom_bot_non_proxy_settings": "Custom bot (non-proxy) Settings",
+    "non_proxy": {
+      "create_bot": "Create Bot"
+    }
+  },
   "user_management": {
     "invite_users": "Invite new users",
     "click_twice_same_checkbox": "You should check at least one checkbox.",

resource/locales/ja_JP/admin/admin.json

@@ -250,6 +250,16 @@
     "page_skip": "既に GROWI 側に同名のページが存在する場合、そのページはスキップされます",
     "Directory_hierarchy_tag": "ディレクトリ階層タグ"
   },
+  "slack_integration": {
+    "access_token_settings": {
+      "discard": "破棄",
+      "generate": "発行"
+    },
+    "custom_bot_non_proxy_settings": "Custom bot (non-proxy) 設定",
+    "non_proxy": {
+      "create_bot": "Bot を作成する"
+    }
+  },
   "user_management": {
     "invite_users": "新規ユーザーの招待",
     "click_twice_same_checkbox": "少なくとも一つはチェックしてください。",

resource/locales/zh_CN/admin/admin.json

@@ -259,6 +259,16 @@
 		"export_menu": "导出菜单",
 		"download": "下载",
 		"delete": "删除"
+  },
+  "slack_integration": {
+    "access_token_settings": {
+      "discard": "丢弃",
+      "generate": "生成"
+    },
+    "custom_bot_non_proxy_settings": "Custom bot (non-proxy) 设置",
+    "non_proxy": {
+      "create_bot": "创建 Bot"
+    }
   },
 	"user_management": {
 		"invite_users": "邀请新用户",

src/client/js/components/Admin/Common/AdminUpdateButtonRow.jsx

@@ -16,7 +16,6 @@ const AdminUpdateButtonRow = (props) => {
 
 AdminUpdateButtonRow.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-
   onClick: PropTypes.func.isRequired,
   disabled: PropTypes.bool.isRequired,
 };

src/client/js/components/Admin/SlackIntegration/AccessTokenSettings.jsx

@@ -0,0 +1,39 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function AccessTokenSettings() {
+
+  const { t } = useTranslation('admin');
+  function discardHandler() {
+    console.log('Discard button pressed');
+  }
+
+  function generateHandler() {
+    console.log('Generate button pressed');
+  }
+
+  return (
+    <>
+      <div className="form-group row my-5">
+        <label className="text-left text-md-right col-md-3 col-form-label">Access Token</label>
+        <div className="col-md-6">
+          <input className="form-control" type="text" placeholder="access-token" />
+        </div>
+      </div>
+
+      <div className="row">
+        <div className="mx-auto">
+          <button type="button" className="btn btn-outline-secondary text-nowrap mx-1" onClick={discardHandler}>
+            {t('slack_integration.access_token_settings.discard')}
+          </button>
+          <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={generateHandler}>
+            {t('slack_integration.access_token_settings.generate')}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AccessTokenSettings;

src/client/js/components/Admin/SlackIntegration/CustomBotNonProxySettings.jsx

@@ -0,0 +1,54 @@
+/* eslint-disable no-console */
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+function CustomBotNonProxySettings() {
+
+  const { t } = useTranslation('admin');
+  const [secret, setSecret] = useState('');
+  const [token, setToken] = useState('');
+
+  function updateHandler() {
+    console.log(`Signing Secret: ${secret}, Bot User OAuth Token: ${token}`);
+  }
+
+  return (
+    <>
+      <div className="row my-5">
+        <div className="mx-auto">
+          <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+            {t('slack_integration.non_proxy.create_bot')}
+          </button>
+        </div>
+      </div>
+
+      <div className="form-group row">
+        <label className="text-left text-md-right col-md-3 col-form-label">Signing Secret</label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            onChange={e => setSecret(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="form-group row mb-5">
+        <label className="text-left text-md-right col-md-3 col-form-label">Bot User OAuth Token</label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            onChange={e => setToken(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
+    </>
+  );
+}
+
+export default CustomBotNonProxySettings;

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -1,42 +1,29 @@
-import React, { Fragment } from 'react';
-// import PropTypes from 'prop-types';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 
-// import { withUnstatedContainers } from '../../UnstatedUtils';
-// import AppContainer from '../../../services/AppContainer';
+import AccessTokenSettings from './AccessTokenSettings';
+import CustomBotNonProxySettings from './CustomBotNonProxySettings';
 
-class SlackIntegration extends React.Component {
+function SlackIntegration() {
 
-  render() {
-    // const { t } = this.props;
-
-    return (
-      <Fragment>
-        <div className="row">
-          <div className="col-lg-12">
-            {/* <h2 className="admin-setting-header">{t('Access Token')}</h2> */}
-            <h2 className="admin-setting-header">Access Token</h2>
-            <div className="form-group row">
-              {/* <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label> */}
-              <label className="text-left text-md-right col-md-3 col-form-label">Access Token</label>
-
-              <div className="col-md-6">
-                <input className="form-control" type="text" placeholder="access-token" />
-              </div>
-            </div>
-          </div>
+  const { t } = useTranslation('admin');
+  return (
+    <>
+      <div className="row">
+        <div className="col-lg-12">
+          <h2 className="admin-setting-header">Access Token</h2>
+          <AccessTokenSettings />
         </div>
-      </Fragment>
-    );
-  }
+      </div>
 
+      <div className="row">
+        <div className="col-lg-12">
+          <h2 className="admin-setting-header">{t('slack_integration.custom_bot_non_proxy_settings')}</h2>
+          <CustomBotNonProxySettings />
+        </div>
+      </div>
+    </>
+  );
 }
 
-// const SlackIntegrationWrapper = withUnstatedContainers(SlackIntegration, [AppContainer]);
-
-// SlackIntegration.propTypes = {
-//   t: PropTypes.func.isRequired, // i18next
-//   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-// slackIntegrationContainer: PropTypes.instanceOf(SlackIntegrationContainer).isRequired,
-// };
-
 export default SlackIntegration;