Merge branch 'feat/growi-bot' into 5862-2-multiple-accordions

resource/locales/en_US/admin/admin.json

@@ -288,6 +288,8 @@
       "discard": "Discard",
       "generate": "Generate"
     },
+    "delete": "Delete",
+    "cooperation_procedure": "Cooperation procedure",
     "official_bot_settings": "Official bot Settings",
     "custom_bot_without_proxy_settings": "Custom Bot without proxy Settings",
     "accordion": {

resource/locales/ja_JP/admin/admin.json

@@ -286,6 +286,8 @@
       "discard": "破棄",
       "generate": "発行"
     },
+    "delete": "削除",
+    "cooperation_procedure": "連携手順",
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 設定",
     "accordion": {
       "create_bot": "Bot を作成する",

resource/locales/zh_CN/admin/admin.json

@@ -296,6 +296,8 @@
       "discard": "丢弃",
       "generate": "生成"
     },
+    "delete": "取消",
+    "cooperation_procedure": "协作程序",
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 设置",
     "accordion": {
       "create_bot": "创建 Bot",

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

@@ -22,7 +22,7 @@ const CustomBotWithProxySettings = (props) => {
 
   return (
     <>
-      <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
+      <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
 
       {/* TODO delete tmp props */}
       <CustomBotWithProxyIntegrationCard
@@ -31,23 +31,34 @@ const CustomBotWithProxySettings = (props) => {
         isSlackScopeSet
       />
 
-      {/* // TODO: Multiple accordion logic */}
-      {Array(...Array(accordionComponentsArray)).map(i => (
-        <div className="my-5 mx-3">
-          <CustomBotWithProxySettingsAccordion key={i} />
+      <h2 className="admin-setting-header">{t('admin:slack_integration.cooperation_procedure')}</h2>
+      <div className="mx-3">
+        <div className="d-flex flex-column pull-right">
+          <button
+            className="my-3 btn btn-outline-danger"
+            type="button"
+          ><i className="icon-trash mr-1" />{t('admin:slack_integration.delete')}
+          </button>
+        </div>
+
+        {/* // TODO: Multiple accordion logic */}
+        {Array(...Array(accordionComponentsArray)).map(i => (
+          <div className="d-flex flex-column my-5 w-100">
+            <CustomBotWithProxySettingsAccordion />
+          </div>
+        ))}
+
+        {/* TODO: Disable button when integration is incomplete */}
+        {/* TODO: i18n */}
+        <div className="row justify-content-center my-5">
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            onClick={addAccordionHandler}
+          >
+            + Slackワークスペースを追加
+          </button>
         </div>
-      ))}
-
-      {/* TODO: Disable button when integration is incomplete */}
-      {/* TODO: i18n */}
-      <div className="row justify-content-center my-5">
-        <button
-          type="button"
-          className="btn btn-outline-primary"
-          onClick={addAccordionHandler}
-        >
-          + Slackワークスペースを追加
-        </button>
       </div>
     </>
   );