Merge branch 'feat/growi-bot' into feat/5630-accordion-translation

resource/locales/en_US/admin/admin.json

@@ -306,7 +306,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

@@ -304,7 +304,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

@@ -314,7 +314,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/Common/Accordion.jsx

@@ -11,7 +11,7 @@ const Accordion = (props) => {
         role="button"
         onClick={() => setIsOpen(prevState => !prevState)}
       >
-        <p className="mb-0 text-primary">{props.title}</p>
+        <p className="mb-0">{props.title}</p>
         {isOpen
           ? <i className="fa fa-chevron-up" />
           : <i className="fa fa-chevron-down" />

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import { Collapse } from 'reactstrap';
-import PropTypes from 'prop-types';
-
-const BotSettingsAccordion = (props) => {
-  return (
-    <div className="card border-0 rounded-lg shadow overflow-hidden">
-      {props.children}
-    </div>
-  );
-};
-
-const BotSettingsAccordionItem = (props) => {
-  const onToggleAccordionHandler = () => {
-    if (props.onToggleAccordionHandler != null) {
-      props.onToggleAccordionHandler();
-    }
-  };
-
-  return (
-    <div className="card border-0 rounded-lg mb-0">
-      <div
-        className="card-header font-weight-normal py-3 d-flex justify-content-between"
-        role="button"
-        onClick={onToggleAccordionHandler}
-      >
-        <p className="mb-0"><span className="mr-2">{props.itemNumber}</span>{props.title}</p>
-        {props.isActive
-          ? <i className="fa fa-chevron-up" />
-          : <i className="fa fa-chevron-down" />
-        }
-      </div>
-      <Collapse isOpen={props.isActive}>
-        <div className="card-body">
-          {props.children}
-        </div>
-      </Collapse>
-    </div>
-  );
-};
-
-BotSettingsAccordion.Item = BotSettingsAccordionItem;
-
-BotSettingsAccordionItem.propTypes = {
-  isActive: PropTypes.bool,
-  itemNumber: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  onToggleAccordionHandler: PropTypes.func,
-  children: PropTypes.element.isRequired,
-};
-
-BotSettingsAccordion.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-export default BotSettingsAccordion;

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