Merge pull request #3630 from weseek/feat/GW-5657-custom-bot-with-proxy-integration-ui

Feat/custom bot with proxy integration ui

resource/locales/en_US/admin/admin.json

@@ -299,7 +299,8 @@
     "integration_sentence": {
       "integration_is_not_complete": "Integration is not complete.",
       "proceed_with_the_following_integration_procedure": "Proceed with the following integration procedure."
-    }
+    },
+    "custom_bot_with_proxy_integration": "Custom bot with proxy integration"
   },
   "user_management": {
     "invite_users": "Temporarily issue a new user",

resource/locales/ja_JP/admin/admin.json

@@ -297,7 +297,8 @@
     "integration_sentence": {
       "integration_is_not_complete": "連携は完了していません。",
       "proceed_with_the_following_integration_procedure": "下記の連携手順を進めてください。"
-    }
+    },
+    "custom_bot_with_proxy_integration": "Custom bot with proxy 連携"
   },
   "user_management": {
     "invite_users": "新規ユーザーの仮発行",

resource/locales/zh_CN/admin/admin.json

@@ -307,7 +307,8 @@
     "integration_sentence": {
       "integration_is_not_complete": "一体化未完成。",
       "proceed_with_the_following_integration_procedure": "进行以下一体化程序。"
-    }
+    },
+    "custom_bot_with_proxy_integration": "Custom bot with proxy 一体化"
   },
 	"user_management": {
 		"invite_users": "临时发布新用户",

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

@@ -1,12 +1,65 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
-const CustomBotWithProxySettings = () => {
+const CustomBotWithProxySettings = (props) => {
+  // eslint-disable-next-line no-unused-vars
+  const { appContainer, adminAppContainer } = props;
+  const { t } = useTranslation();
 
   return (
-    <div className="row my-5">
-      <h1>With Proxy Component</h1>
-    </div>
+    <>
+
+      <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_with_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 mb-5">
+          <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>
+
+          <div className="row m-0">
+            <hr className="border-danger align-self-center admin-border col"></hr>
+            <div className="circle text-center bg-primary border-light">
+              <p className="text-light font-weight-bold m-0 pt-3">Proxy</p>
+              <p className="text-light font-weight-bold">Server</p>
+            </div>
+            <hr className="border-danger align-self-center admin-border col"></hr>
+          </div>
+        </div>
+
+        <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
+          <div className="row m-0">
+            <h5 className="card-title font-weight-bold mt-3 ml-4 col">GROWI App</h5>
+            <div className="pull-right mt-3">
+              <a className="icon-fw fa fa-repeat fa-2x"></a>
+            </div>
+          </div>
+          <div className="card-body p-4 text-center">
+            <a className="btn btn-primary mt-3">WESEEK Inner Wiki</a>
+          </div>
+        </div>
+
+      </div>
+
+    </>
   );
 };
 
-export default CustomBotWithProxySettings;
+
+const CustomBotWithProxySettingsWrapper = withUnstatedContainers(CustomBotWithProxySettings, [AppContainer, AdminAppContainer]);
+
+CustomBotWithProxySettings.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default CustomBotWithProxySettingsWrapper;

src/client/styles/scss/_admin.scss

@@ -123,6 +123,13 @@
       border-style : dashed;
       border-width : 2px;
     }
+    .circle{
+      width: 100px;
+      height: 100px;
+      // background: #092c58;
+      border: 13px solid;
+      border-radius: 50%;
+    }
   }
 
   //// TODO: migrate to Bootstrap 4