Merge pull request #3599 from weseek/feat/5569-without-proxy-accordion

Added accordion for Without Proxy section

resource/locales/en_US/admin/admin.json

@@ -292,7 +292,11 @@
     },
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) Settings",
     "without_proxy": {
-      "create_bot": "Create Bot"
+      "create_bot": "Create Bot",
+      "install_bot_to_slack": "Install Bot To Slack",
+      "register_secret_and_token": "Set Signing Secret and Bot Token",
+      "test_connection": "Test Connection",
+      "how_to_create_a_bot": "How to create a bot"
     }
   },
   "user_management": {

resource/locales/ja_JP/admin/admin.json

@@ -290,7 +290,11 @@
     },
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 設定",
     "without_proxy": {
-      "create_bot": "Bot を作成する"
+      "create_bot": "Bot を作成する",
+      "install_bot_to_slack": "Bot を Slackにインストールする",
+      "register_secret_and_token": "Signing Secret と Bot Token を登録する",
+      "test_connection": "連携状況のテストをする",
+      "how_to_create_a_bot": "作成方法はこちら"
     }
   },
   "user_management": {

resource/locales/zh_CN/admin/admin.json

@@ -300,7 +300,11 @@
     },
     "custom_bot_without_proxy_settings": "Custom Bot (Without-Proxy) 设置",
     "without_proxy": {
-      "create_bot": "创建 Bot"
+      "create_bot": "创建 Bot",
+      "install_bot_to_slack": "将Bot安装到Slack",
+      "register_secret_and_token": "设置签名秘密和BOT令牌",
+      "test_connection": "测试连接",
+      "how_to_create_a_bot": "如何创建一个BOT"
     }
   },
 	"user_management": {

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

@@ -7,6 +7,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import SlackGrowiBridging from './SlackGrowiBridging';
+import CustomBotWithoutProxySettingsAccordion from './CustomBotWithoutProxySettingsAccordion';
 
 
 const CustomBotWithoutProxySettings = (props) => {
@@ -89,17 +90,6 @@ const CustomBotWithoutProxySettings = (props) => {
         siteName={siteName}
         slackWorkSpaceName={slackWSNameInWithoutProxy}
       />
-      <div className="row my-5">
-        <div className="mx-auto">
-          <button
-            type="button"
-            className="btn btn-primary text-nowrap mx-1"
-            onClick={() => window.open('https://api.slack.com/apps', '_blank')}
-          >
-            {t('admin:slack_integration.without_proxy.create_bot')}
-          </button>
-        </div>
-      </div>
       <table className="table settings-table">
         <colgroup>
           <col className="item-name" />
@@ -155,13 +145,16 @@ const CustomBotWithoutProxySettings = (props) => {
                 <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_BOT_TOKEN' }) }} />
               </p>
             </td>
-
           </tr>
         </tbody>
       </table>
 
-
       <AdminUpdateButtonRow onClick={updateHandler} disabled={false} />
+
+      <div className="my-5 mx-3">
+        <CustomBotWithoutProxySettingsAccordion />
+      </div>
+
     </>
   );
 };

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

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Collapse } from 'reactstrap';
+
+const CustomBotWithoutSettingsAccordion = () => {
+  const { t } = useTranslation('admin');
+  const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set());
+
+  const onToggleAccordionHandler = (i) => {
+    const accordionIndexes = new Set(openAccordionIndexes);
+    if (accordionIndexes.has(i)) {
+      accordionIndexes.delete(i);
+    }
+    else {
+      accordionIndexes.add(i);
+    }
+    setOpenAccordionIndexes(accordionIndexes);
+  };
+
+  return (
+    <div className="card border-0 rounded-lg shadow overflow-hidden">
+
+      <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(0)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</p>
+          {openAccordionIndexes.has(0)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={openAccordionIndexes.has(0)}>
+          <div className="card-body">
+
+            <div className="row my-5">
+              <div className="mx-auto">
+                <div>
+                  <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+                    {t('slack_integration.without_proxy.create_bot')}
+                    <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                  </button>
+                </div>
+                {/* TODO: Insert DOCS link */}
+                <a href="#">
+                  <p className="text-center mt-1">
+                    <small>
+                      {t('slack_integration.without_proxy.how_to_create_a_bot')}
+                      <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                    </small>
+                  </p>
+                </a>
+              </div>
+            </div>
+          </div>
+        </Collapse>
+      </div>
+
+      <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(1)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">②</span>{t('slack_integration.without_proxy.install_bot_to_slack')}</p>
+          {openAccordionIndexes.has(1)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={openAccordionIndexes.has(1)}>
+          <div className="card-body">
+            BODY2
+          </div>
+        </Collapse>
+      </div>
+
+      <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(2)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">③</span>{t('slack_integration.without_proxy.register_secret_and_token')}</p>
+          {openAccordionIndexes.has(2)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={openAccordionIndexes.has(2)}>
+          <div className="card-body">
+            BODY 3
+          </div>
+        </Collapse>
+      </div>
+
+      <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(3)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">④</span>{t('slack_integration.without_proxy.test_connection')}</p>
+          {openAccordionIndexes.has(3)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={openAccordionIndexes.has(3)}>
+          <div className="card-body">
+            BODY 4
+          </div>
+        </Collapse>
+      </div>
+
+    </div>
+
+  );
+
+};
+
+
+export default CustomBotWithoutSettingsAccordion;