Merge branch 'feat/growi-bot' into feat/GW-5859-generate-proxy-access-token

resource/locales/en_US/admin/admin.json

@@ -319,14 +319,16 @@
       "test_connection": "Test Connection",
       "test_connection_by_pressing_button": "Press the button to test the connection",
       "error_check_logs_below": "An error has occurred. Please check the logs below.",
-      "send_message_to_slack_work_space": "Send message to Slack work space."
+      "send_message_to_slack_work_space": "Send message to Slack work space.",
+      "add_slack_workspace": "Add a Slack Workspace"
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy integration",
     "integration_sentence": {
       "integration_is_not_complete": "Integration is not complete.<br>Proceed with the following integration procedure.",
       "integration_successful": "Integration successful"
     },
-    "custom_bot_with_proxy_integration": "Custom bot with proxy integration"
+    "custom_bot_with_proxy_integration": "Custom bot with proxy integration",
+    "official_bot_integration": "Official bot integration"
   },
   "user_management": {
     "invite_users": "Temporarily issue a new user",

resource/locales/ja_JP/admin/admin.json

@@ -289,7 +289,7 @@
     "delete": "削除",
     "cooperation_procedure": "連携手順",
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 設定",
-    "reset":"リセット",
+    "reset": "リセット",
     "delete_slackbot_settings": "Slack Bot 設定をリセットする",
     "slackbot_settings_notice": "リセットします",
     "accordion": {
@@ -316,14 +316,16 @@
       "test_connection": "連携状況のテストをする",
       "test_connection_by_pressing_button": "以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう",
       "error_check_logs_below": "エラーが発生しました。下記のログを確認してください。",
-      "send_message_to_slack_work_space": "Slack ワークスペースに送信しました"
+      "send_message_to_slack_work_space": "Slack ワークスペースに送信しました",
+      "add_slack_workspace": "Slackワークスペースを追加"
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy 連携",
     "integration_sentence": {
       "integration_is_not_complete": "連携は完了していません。<br>下記の連携手順を進めてください。",
       "integration_successful": "連携が完了しました。"
     },
-    "custom_bot_with_proxy_integration": "Custom bot with proxy 連携"
+    "custom_bot_with_proxy_integration": "Custom bot with proxy 連携",
+    "official_bot_integration": "Official bot 連携"
   },
   "user_management": {
     "invite_users": "新規ユーザーの仮発行",

resource/locales/zh_CN/admin/admin.json

@@ -326,14 +326,16 @@
       "test_connection": "测试连接",
       "test_connection_by_pressing_button": "按下按钮以测试连接",
       "error_check_logs_below": "发生了错误。请检查以下日志。",
-      "send_message_to_slack_work_space": "发送到 Slack 工作区。"
+      "send_message_to_slack_work_space": "发送到 Slack 工作区。",
+      "add_slack_workspace": "添加Slack Workspace"
     },
     "custom_bot_without_proxy_integration": "Custom bot without proxy 一体化",
     "integration_sentence": {
       "integration_is_not_complete": "一体化未完成。<br>进行以下一体化程序。",
       "integration_successful": "一体化成功"
     },
-    "custom_bot_with_proxy_integration": "Custom bot with proxy 一体化"
+    "custom_bot_with_proxy_integration": "Custom bot with proxy 一体化",
+    "official_bot_integration": "Official bot 一体化"
   },
 	"user_management": {
 		"invite_users": "临时发布新用户",

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

@@ -11,18 +11,20 @@ const CustomBotWithProxyIntegrationCard = (props) => {
       <div className="card rounded shadow border-0 w-50 admin-bot-card">
         <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
         <div className="card-body px-5">
-          {props.slackWSNameInWithProxy != null && (
-            <div className="card slack-work-space-name-card">
-              <div className="m-2 text-center">
-                <h5 className="font-weight-bold">{props.slackWSNameInWithProxy}</h5>
-                <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
+          {props.slackWorkSpaces.map((slackWorkSpaceName) => {
+            return (
+              <div key={slackWorkSpaceName.name} className={slackWorkSpaceName.active ? 'card slack-work-space-name-card' : ''}>
+                <div className="m-2 text-center">
+                  <h5 className="font-weight-bold">{slackWorkSpaceName.name}</h5>
+                  <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
+                </div>
               </div>
-            </div>
-          )}
+            );
+          })}
         </div>
       </div>
 
-      <div className="text-center w-25">
+      <div className="text-center w-25 mt-5">
         {props.isSlackScopeSet && (
           <p className="text-success small">
             <i className="fa fa-check mr-1" />
@@ -36,6 +38,7 @@ const CustomBotWithProxyIntegrationCard = (props) => {
             dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.integration_sentence.integration_is_not_complete') }}
           />
         )}
+
         <div className="pt-2">
           <div className="position-relative mt-5">
             <div className="circle position-absolute bg-primary border-light">
@@ -59,7 +62,18 @@ const CustomBotWithProxyIntegrationCard = (props) => {
           </div>
         </div>
         <div className="card-body p-4 mb-5 text-center">
-          <a className="btn btn-primary">{props.siteName}</a>
+          <div className="btn-group-vertical w-50">
+            {props.growiApps.map((growiApp) => {
+              return (
+                <button
+                  type="button"
+                  key={growiApp.name}
+                  className={growiApp.active ? 'btn btn-primary mb-3' : 'btn btn-outline-primary mb-3'}
+                >{growiApp.name}
+                </button>
+              );
+            })}
+          </div>
         </div>
       </div>
     </div>
@@ -67,9 +81,9 @@ const CustomBotWithProxyIntegrationCard = (props) => {
 };
 
 CustomBotWithProxyIntegrationCard.propTypes = {
-  siteName: PropTypes.string.isRequired,
-  slackWSNameInWithProxy: PropTypes.string,
-  isSlackScopeSet: PropTypes.bool.isRequired,
+  growiApps: PropTypes.array.isRequired,
+  slackWorkSpaces: PropTypes.array,
+  isSlackScopeSet: PropTypes.bool,
 };
 
 export default CustomBotWithProxyIntegrationCard;

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

@@ -32,8 +32,19 @@ const CustomBotWithProxySettings = (props) => {
 
       {/* TODO delete tmp props */}
       <CustomBotWithProxyIntegrationCard
-        siteName="GROWI"
-        slackWSNameInWithProxy="SlackWorkSpaceName"
+        growiApps={
+          [
+            { name: 'siteName1', active: true },
+            { name: 'siteName2', active: false },
+            { name: 'siteName3', active: false },
+          ]
+        }
+        slackWorkSpaces={
+          [
+            { name: 'wsName1', active: true },
+            { name: 'wsName2', active: false },
+          ]
+        }
         isSlackScopeSet
       />
       <h2 className="admin-setting-header">{t('admin:slack_integration.cooperation_procedure')}</h2>
@@ -64,7 +75,7 @@ const CustomBotWithProxySettings = (props) => {
             className="btn btn-outline-primary"
             onClick={addAccordionHandler}
           >
-            + Slackワークスペースを追加
+            {`+ ${t('admin:slack_integration.accordion.add_slack_workspace')}`}
           </button>
         </div>
       </div>

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

@@ -1,12 +1,32 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import OfficialBotSettingsAccordion from './OfficialbotSettingsAccordion';
+import CustomBotWithProxyIntegrationCard from './CustomBotWithProxyIntegrationCard';
 
 const OfficialBotSettings = () => {
   const { t } = useTranslation();
 
   return (
     <>
+      <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_integration')}</h2>
+      {/* TODO delete tmp props */}
+      <CustomBotWithProxyIntegrationCard
+        growiApps={
+          [
+            { name: 'siteName1', active: true },
+            { name: 'siteName2', active: false },
+            { name: 'siteName3', active: false },
+          ]
+        }
+        slackWorkSpaces={
+          [
+            { name: 'wsName1', active: true },
+            { name: 'wsName2', active: false },
+          ]
+        }
+        isSlackScopeSet
+      />
+
       <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_settings')}</h2>
 
       <div className="my-5 mx-3">