Merge pull request #3712 from weseek/feat/GW-5854-show-integration-card

show integration card

resource/locales/en_US/admin/admin.json

@@ -326,7 +326,8 @@
       "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

@@ -323,7 +323,8 @@
       "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

@@ -333,7 +333,8 @@
       "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

@@ -64,8 +64,14 @@ const CustomBotWithProxyIntegrationCard = (props) => {
         <div className="card-body p-4 mb-5 text-center">
           <div className="btn-group-vertical w-50">
             {props.growiApps.map((growiApp) => {
-              // eslint-disable-next-line max-len
-              return <button type="button" key={growiApp.name} className={growiApp.active ? 'btn btn-primary mb-3' : 'btn btn-outline-primary mb-3'}>{growiApp.name}</button>;
+              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>

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">