Merge pull request #3611 from weseek/feat/GW-5591-ui-improvement-for-custom-bot-without-proxy

Feat/ui improvement for custom bot without proxy

resource/locales/en_US/admin/admin.json

@@ -294,6 +294,11 @@
       "register_secret_and_token": "Set Signing Secret and Bot Token",
       "test_connection": "Test Connection",
       "how_to_create_a_bot": "How to create a bot"
+    },
+    "custom_bot_without_proxy_integration": "Custom bot without proxy integration",
+    "integration_sentence": {
+      "integration_is_not_complete": "Integration is not complete.",
+      "proceed_with_the_following_integration_procedure": "Proceed with the following integration procedure."
     }
   },
   "user_management": {

resource/locales/ja_JP/admin/admin.json

@@ -292,6 +292,11 @@
       "register_secret_and_token": "Signing Secret と Bot Token を登録する",
       "test_connection": "連携状況のテストをする",
       "how_to_create_a_bot": "作成方法はこちら"
+    },
+    "custom_bot_without_proxy_integration": "Custom bot without proxy 連携",
+    "integration_sentence": {
+      "integration_is_not_complete": "連携は完了していません。",
+      "proceed_with_the_following_integration_procedure": "下記の連携手順を進めてください。"
     }
   },
   "user_management": {

resource/locales/zh_CN/admin/admin.json

@@ -302,6 +302,11 @@
       "register_secret_and_token": "设置签名秘密和BOT令牌",
       "test_connection": "测试连接",
       "how_to_create_a_bot": "如何创建一个BOT"
+    },
+    "custom_bot_without_proxy_integration": "Custom bot without proxy 一体化",
+    "integration_sentence": {
+      "integration_is_not_complete": "一体化未完成。",
+      "proceed_with_the_following_integration_procedure": "进行以下一体化程序。"
     }
   },
 	"user_management": {

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

@@ -56,6 +56,29 @@ const CustomBotWithoutProxySettings = (props) => {
 
   return (
     <>
+
+      <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_integration')}</h2>
+
+      <div className="d-flex justify-content-center my-5 bot-integration">
+        <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 p-4"></div>
+        </div>
+
+        <div className="text-center w-25 mt-4">
+          <p className="text-secondary m-0"><small>{t('admin:slack_integration.integration_sentence.integration_is_not_complete')}</small></p>
+          <p className="text-secondary"><small>{t('admin:slack_integration.integration_sentence.proceed_with_the_following_integration_procedure')}</small></p>
+          <hr className="border-danger align-self-center admin-border"></hr>
+        </div>
+
+        <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
+          <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
+          <div className="card-body p-4 text-center">
+            <a className="btn btn-primary mb-5">WESEEK Inner Wiki</a>
+          </div>
+        </div>
+      </div>
+
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_settings')}</h2>
       {/* temporarily put bellow component */}
       <SlackGrowiBridging

src/client/styles/scss/_admin.scss

@@ -115,6 +115,16 @@
     }
   }
 
+  .bot-integration {
+    .admin-bot-card {
+      border-radius: 8px !important;
+    }
+    .admin-border {
+      border-style : dashed;
+      border-width : 2px;
+    }
+  }
+
   //// TODO: migrate to Bootstrap 4
   //// omit all .btn-toggle and use Switches
   //// https://getbootstrap.com/docs/4.2/components/forms/#switches