Merge branch 'feat/growi-bot' into feat/move-verifyingIsSlackRequest-to-slack-package

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/Common/Accordion.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Collapse } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+const Accordion = (props) => {
+  const [isOpen, setIsOpen] = useState(props.isOpenDefault);
+  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={() => setIsOpen(prevState => !prevState)}
+      >
+        <p className="mb-0 text-primary">{props.title}</p>
+        {isOpen
+          ? <i className="fa fa-chevron-up" />
+          : <i className="fa fa-chevron-down" />
+        }
+      </div>
+      <Collapse isOpen={isOpen}>
+        <div className="card-body">
+          {props.children}
+        </div>
+      </Collapse>
+    </div>
+  );
+};
+
+Accordion.propTypes = {
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  isOpenDefault: PropTypes.bool.isRequired,
+};
+
+export default Accordion;

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const CustomBotWithoutProxySecretTokenSection = (props) => {
+  const { t } = useTranslation();
+
+  const onChangeSigningSecretHandler = (signingSecretInput) => {
+    if (props.onChangeSigningSecretHandler != null) {
+      props.onChangeSigningSecretHandler(signingSecretInput);
+    }
+  };
+
+  const onChangeBotTokenHandler = (botTokenInput) => {
+    if (props.onChangeBotTokenHandler != null) {
+      props.onChangeBotTokenHandler(botTokenInput);
+    }
+  };
+
+  const updateSecretTokenHandler = () => {
+    if (props.updateSecretTokenHandler != null) {
+      props.updateSecretTokenHandler();
+    }
+  };
+
+  return (
+    <div className="card-body">
+      <table className="table settings-table">
+        <colgroup>
+          <col className="item-name" />
+          <col className="from-db" />
+          <col className="from-env-vars" />
+        </colgroup>
+        <thead>
+          <tr><th className="border-top-0"></th><th className="border-top-0">Database</th><th className="border-top-0">Environment variables</th></tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>Signing Secret</th>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={props.slackSigningSecret || ''}
+                onChange={e => onChangeSigningSecretHandler(e.target.value)}
+              />
+            </td>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={props.slackSigningSecretEnv || ''}
+                readOnly
+              />
+              <p className="form-text text-muted">
+                {/* eslint-disable-next-line react/no-danger */}
+                <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_SIGNING_SECRET' }) }} />
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <th>Bot User OAuth Token</th>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={props.slackBotToken || ''}
+                onChange={e => onChangeBotTokenHandler(e.target.value)}
+              />
+            </td>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                value={props.slackBotTokenEnv || ''}
+                readOnly
+              />
+              <p className="form-text text-muted">
+                {/* eslint-disable-next-line react/no-danger */}
+                <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_BOT_TOKEN' }) }} />
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <AdminUpdateButtonRow onClick={updateSecretTokenHandler} disabled={false} />
+    </div>
+  );
+};
+
+CustomBotWithoutProxySecretTokenSection.propTypes = {
+  updateSecretTokenHandler: PropTypes.func,
+  onChangeSigningSecretHandler: PropTypes.func,
+  onChangeBotTokenHandler: PropTypes.func,
+  slackSigningSecret: PropTypes.string,
+  slackSigningSecretEnv: PropTypes.string,
+  slackBotToken: PropTypes.string,
+  slackBotTokenEnv: PropTypes.string,
+};
+
+export default CustomBotWithoutProxySecretTokenSection;

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

@@ -4,20 +4,14 @@ import PropTypes from 'prop-types';
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
-import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import { toastError } from '../../../util/apiNotification';
 import SlackGrowiBridging from './SlackGrowiBridging';
 import CustomBotWithoutProxySettingsAccordion, { botInstallationStep } from './CustomBotWithoutProxySettingsAccordion';
 
-
 const CustomBotWithoutProxySettings = (props) => {
   const { appContainer, adminAppContainer } = props;
   const { t } = useTranslation();
 
-  const [slackSigningSecret, setSlackSigningSecret] = useState('');
-  const [slackBotToken, setSlackBotToken] = useState('');
-  const [slackSigningSecretEnv, setSlackSigningSecretEnv] = useState('');
-  const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
   const [slackWSNameInWithoutProxy, setSlackWSNameInWithoutProxy] = useState(null);
   // get site name from this GROWI
   // eslint-disable-next-line no-unused-vars
@@ -25,7 +19,6 @@ const CustomBotWithoutProxySettings = (props) => {
   // eslint-disable-next-line no-unused-vars
   const [isSetupSlackBot, setIsSetupSlackBot] = useState(null);
   const [isConnectedToSlack, setIsConnectedToSlack] = useState(null);
-  const currentBotType = 'custom-bot-without-proxy';
 
   useEffect(() => {
     const fetchData = async() => {
@@ -47,13 +40,7 @@ const CustomBotWithoutProxySettings = (props) => {
     try {
       await adminAppContainer.retrieveAppSettingsData();
       const res = await appContainer.apiv3.get('/slack-integration/');
-      const {
-        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars, isSetupSlackBot, isConnectedToSlack,
-      } = res.data.slackBotSettingParams.customBotWithoutProxySettings;
-      setSlackSigningSecret(slackSigningSecret);
-      setSlackBotToken(slackBotToken);
-      setSlackSigningSecretEnv(slackSigningSecretEnvVars);
-      setSlackBotTokenEnv(slackBotTokenEnvVars);
+      const { isSetupSlackBot, isConnectedToSlack } = res.data.slackBotSettingParams.customBotWithoutProxySettings;
       setSiteName(adminAppContainer.state.title);
       setIsSetupSlackBot(isSetupSlackBot);
       setIsConnectedToSlack(isConnectedToSlack);
@@ -67,89 +54,37 @@ const CustomBotWithoutProxySettings = (props) => {
     fetchData();
   }, [fetchData]);
 
-  async function updateHandler() {
-    try {
-      await appContainer.apiv3.put('/slack-integration/custom-bot-without-proxy', {
-        slackSigningSecret,
-        slackBotToken,
-        currentBotType,
-      });
-      fetchData();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:slack_integration.custom_bot_without_proxy_settings') }));
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }
-
   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
         siteName={siteName}
         slackWorkSpaceName={slackWSNameInWithoutProxy}
       />
-      <table className="table settings-table">
-        <colgroup>
-          <col className="item-name" />
-          <col className="from-db" />
-          <col className="from-env-vars" />
-        </colgroup>
-        <thead>
-          <tr><th></th><th>Database</th><th>Environment variables</th></tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th>Signing Secret</th>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackSigningSecret || ''}
-                onChange={e => setSlackSigningSecret(e.target.value)}
-              />
-            </td>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackSigningSecretEnv || ''}
-                readOnly
-              />
-              <p className="form-text text-muted">
-                {/* eslint-disable-next-line react/no-danger */}
-                <small dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.use_env_var_if_empty', { variable: 'SLACK_SIGNING_SECRET' }) }} />
-              </p>
-            </td>
-          </tr>
-          <tr>
-            <th>Bot User OAuth Token</th>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackBotToken || ''}
-                onChange={e => setSlackBotToken(e.target.value)}
-              />
-            </td>
-            <td>
-              <input
-                className="form-control"
-                type="text"
-                value={slackBotTokenEnv || ''}
-                readOnly
-              />
-              <p className="form-text text-muted">
-                {/* eslint-disable-next-line react/no-danger */}
-                <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">
         {/* TODO GW-5644 active create bot step temporary */}

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

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Collapse } from 'reactstrap';
 import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
-
+import Accordion from '../Common/Accordion';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+import CustomBotWithoutProxySecretTokenSection from './CustomBotWithoutProxySecretTokenSection';
 
 export const botInstallationStep = {
   CREATE_BOT: 'create-bot',
@@ -13,23 +15,61 @@ export const botInstallationStep = {
   CONNECTION_TEST: 'connection-test',
 };
 
-const CustomBotWithoutProxySettingsAccordion = ({ appContainer, activeStep }) => {
+const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContainer, activeStep }) => {
   const { t } = useTranslation('admin');
-  const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set([activeStep]));
-
+  // TODO: GW-5644 Store default open accordion
+  // eslint-disable-next-line no-unused-vars
+  const [defaultOpenAccordionKeys, setDefaultOpenAccordionKeys] = useState(new Set([activeStep]));
   const [connectionErrorCode, setConnectionErrorCode] = useState(null);
   const [connectionErrorMessage, setConnectionErrorMessage] = useState(null);
+  const [slackSigningSecret, setSlackSigningSecret] = useState('');
+  const [slackBotToken, setSlackBotToken] = useState('');
+  const [slackSigningSecretEnv, setSlackSigningSecretEnv] = useState('');
+  const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
+  const currentBotType = 'custom-bot-without-proxy';
+
+  const fetchData = useCallback(async() => {
+    try {
+      await adminAppContainer.retrieveAppSettingsData();
+      const res = await appContainer.apiv3.get('/slack-integration/');
+      const {
+        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars,
+      } = res.data.slackBotSettingParams.customBotWithoutProxySettings;
+      setSlackSigningSecret(slackSigningSecret);
+      setSlackBotToken(slackBotToken);
+      setSlackSigningSecretEnv(slackSigningSecretEnvVars);
+      setSlackBotTokenEnv(slackBotTokenEnvVars);
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [appContainer, adminAppContainer]);
 
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
 
-  const onToggleAccordionHandler = (installationStep) => {
-    const accordionIndexes = new Set(openAccordionIndexes);
-    if (accordionIndexes.has(installationStep)) {
-      accordionIndexes.delete(installationStep);
+  const updateSecretTokenHandler = async() => {
+    try {
+      await appContainer.apiv3.put('/slack-integration/custom-bot-without-proxy', {
+        slackSigningSecret,
+        slackBotToken,
+        currentBotType,
+      });
+      fetchData();
+      toastSuccess(t('toaster.update_successed', { target: t('slack_integration.custom_bot_without_proxy_settings') }));
     }
-    else {
-      accordionIndexes.add(installationStep);
+    catch (err) {
+      toastError(err);
     }
-    setOpenAccordionIndexes(accordionIndexes);
+  };
+
+  const onChangeSigningSecretHandler = (signingSecretInput) => {
+    setSlackSigningSecret(signingSecretInput);
+  };
+
+  const onChangeBotTokenHandler = (botTokenInput) => {
+    setSlackBotToken(botTokenInput);
   };
 
   const onTestConnectionHandler = async() => {
@@ -49,137 +89,92 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, activeStep }) =>
 
   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(botInstallationStep.CREATE_BOT)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</p>
-          {openAccordionIndexes.has(botInstallationStep.CREATE_BOT)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={openAccordionIndexes.has(botInstallationStep.CREATE_BOT)}>
-          <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>
+      <Accordion
+        defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CREATE_BOT)}
+        title={<><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</>}
+      >
+        <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>
-        </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(botInstallationStep.INSTALL_BOT)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">②</span>{t('slack_integration.without_proxy.install_bot_to_slack')}</p>
-          {openAccordionIndexes.has(botInstallationStep.INSTALL_BOT)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
         </div>
-        <Collapse isOpen={openAccordionIndexes.has(botInstallationStep.INSTALL_BOT)}>
-          <div className="card-body py-5">
-            <div className="container w-75">
-              <p>1. Install your app をクリックします。</p>
-              <img src="/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light img-fluid mb-5" />
-              <p>2. Install to Workspace をクリックします。</p>
-              <img src="/images/slack-integration/slack-bot-install-to-workspace.png" className="border border-light img-fluid mb-5" />
-              <p>3. 遷移先の画面にて、Allowをクリックします。</p>
-              <img src="/images/slack-integration/slack-bot-install-your-app-transition-destination.png" className="border border-light img-fluid mb-5" />
-              <p>4. Install your app の右側に 緑色のチェックがつけばワークスペースへのインストール完了です。</p>
-              <img src="/images/slack-integration/slack-bot-install-your-app-complete.png" className="border border-light img-fluid mb-5" />
-              <p>5. GROWI bot を使いたいチャンネルに @example を使用して招待します。</p>
-              <img src="/images/slack-integration/slack-bot-install-to-workspace-joined-bot.png" className="border border-light img-fluid mb-1" />
-              <img src="/images/slack-integration/slack-bot-install-your-app-introduction-to-channel.png" className="border border-light img-fluid" />
-            </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(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">③</span>{t('slack_integration.without_proxy.register_secret_and_token')}</p>
-          {openAccordionIndexes.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
+      </Accordion>
+      <Accordion
+        defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.INSTALL_BOT)}
+        title={<><span className="mr-2">②</span>{t('slack_integration.without_proxy.install_bot_to_slack')}</>}
+      >
+        <div className="container w-75 py-5">
+          <p>1. Install your app をクリックします。</p>
+          <img src="/images/slack-integration/slack-bot-install-your-app-introduction.png" className="border border-light img-fluid mb-5" />
+          <p>2. Install to Workspace をクリックします。</p>
+          <img src="/images/slack-integration/slack-bot-install-to-workspace.png" className="border border-light img-fluid mb-5" />
+          <p>3. 遷移先の画面にて、Allowをクリックします。</p>
+          <img src="/images/slack-integration/slack-bot-install-your-app-transition-destination.png" className="border border-light img-fluid mb-5" />
+          <p>4. Install your app の右側に 緑色のチェックがつけばワークスペースへのインストール完了です。</p>
+          <img src="/images/slack-integration/slack-bot-install-your-app-complete.png" className="border border-light img-fluid mb-5" />
+          <p>5. GROWI bot を使いたいチャンネルに @example を使用して招待します。</p>
+          <img src="/images/slack-integration/slack-bot-install-to-workspace-joined-bot.png" className="border border-light img-fluid mb-1" />
+          <img src="/images/slack-integration/slack-bot-install-your-app-introduction-to-channel.png" className="border border-light img-fluid" />
         </div>
-        <Collapse isOpen={openAccordionIndexes.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}>
-          <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(botInstallationStep.CONNECTION_TEST)}
-        >
-          <p className="mb-0 text-primary"><span className="mr-2">④</span>{t('slack_integration.without_proxy.test_connection')}</p>
-          {openAccordionIndexes.has(botInstallationStep.CONNECTION_TEST)
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
+      </Accordion>
+      <Accordion
+        defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
+        title={<><span className="mr-2">③</span>{t('slack_integration.without_proxy.register_secret_and_token')}</>}
+      >
+        <CustomBotWithoutProxySecretTokenSection
+          updateSecretTokenHandler={updateSecretTokenHandler}
+          onChangeSigningSecretHandler={onChangeSigningSecretHandler}
+          onChangeBotTokenHandler={onChangeBotTokenHandler}
+          slackSigningSecret={slackSigningSecret}
+          slackSigningSecretEnv={slackSigningSecretEnv}
+          slackBotToken={slackBotToken}
+          slackBotTokenEnv={slackBotTokenEnv}
+        />
+      </Accordion>
+      <Accordion
+        defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CONNECTION_TEST)}
+        title={<><span className="mr-2">④</span>{t('slack_integration.without_proxy.test_connection')}</>}
+      >
+        <p className="text-center m-4">以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう</p>
+        <div className="d-flex justify-content-center">
+          <button type="button" className="btn btn-info m-3 px-5 font-weight-bold" onClick={onTestConnectionHandler}>Test</button>
         </div>
-        <Collapse isOpen={openAccordionIndexes.has(botInstallationStep.CONNECTION_TEST)}>
-          <div className="card-body">
-            <p className="text-center m-4">以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう</p>
-            <div className="d-flex justify-content-center">
-              <button type="button" className="btn btn-info m-3 px-5 font-weight-bold" onClick={onTestConnectionHandler}>Test</button>
-            </div>
-            {connectionErrorMessage != null
-              && <p className="text-danger text-center m-4">エラーが発生しました。下記のログを確認してください。</p>
-            }
-            <div className="row m-3 justify-content-center">
-              <div className="col-sm-5 slack-connection-error-log">
-                <p className="border-info slack-connection-error-log-title mb-1 pl-2">Logs</p>
-                <div className="card border-info slack-connection-error-log-body rounded-lg px-5 py-4">
-                  <p className="m-0">{connectionErrorCode}</p>
-                  <p className="m-0">{connectionErrorMessage}</p>
-                </div>
-              </div>
+        {connectionErrorMessage != null
+          && <p className="text-danger text-center m-4">エラーが発生しました。下記のログを確認してください。</p>
+        }
+        <div className="row m-3 justify-content-center">
+          <div className="col-sm-5 slack-connection-error-log">
+            <p className="border-info slack-connection-error-log-title mb-1 pl-2">Logs</p>
+            <div className="card border-info slack-connection-error-log-body rounded-lg px-5 py-4">
+              <p className="m-0">{connectionErrorCode}</p>
+              <p className="m-0">{connectionErrorMessage}</p>
             </div>
           </div>
-        </Collapse>
-      </div>
+        </div>
+      </Accordion>
     </div>
   );
 };
 
-const CustomBotWithoutProxySettingsAccordionWrapper = withUnstatedContainers(CustomBotWithoutProxySettingsAccordion, [AppContainer]);
+const CustomBotWithoutProxySettingsAccordionWrapper = withUnstatedContainers(CustomBotWithoutProxySettingsAccordion, [AppContainer, AdminAppContainer]);
 
 CustomBotWithoutProxySettingsAccordion.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
   activeStep: PropTypes.oneOf(Object.values(botInstallationStep)).isRequired,
 };
 

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